lucid-ui

<!doctype html> <html lang="en"> <head> <title>Code coverage report for LoadingSkeletons/LineChartLoadingSkeleton.tsx</title> <meta charset="utf-8" /> <link rel="stylesheet" href="../prettify.css" /> <link rel="stylesheet" href="../base.css" /> <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type='text/css'> .coverage-summary .sorter { background-image: url(../sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1><a href="../index.html">All files</a> / <a href="index.html">LoadingSkeletons</a> LineChartLoadingSkeleton.tsx</h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 100% Statements 7/7 </div> <div class='fl pad1y space-right2'> 0% Branches 0/2 </div> <div class='fl pad1y space-right2'> 100% Functions 2/2 </div> <div class='fl pad1y space-right2'> 100% Lines 7/7 </div> </div> Press n or j to go to the next uncovered block, b, p or k for the previous block. <template id="filterTemplate"> <div class="quiet"> Filter: <input oninput="onInput()" type="search" id="fileSearch"> </div> </template> </div> <div class='status-line high'></div> <pre><table class="coverage"> <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a> <a name='L2'></a><a href='#L2'>2</a> <a name='L3'></a><a href='#L3'>3</a> <a name='L4'></a><a href='#L4'>4</a> <a name='L5'></a><a href='#L5'>5</a> <a name='L6'></a><a href='#L6'>6</a> <a name='L7'></a><a href='#L7'>7</a> <a name='L8'></a><a href='#L8'>8</a> <a name='L9'></a><a href='#L9'>9</a> <a name='L10'></a><a href='#L10'>10</a> <a name='L11'></a><a href='#L11'>11</a> <a name='L12'></a><a href='#L12'>12</a> <a name='L13'></a><a href='#L13'>13</a> <a name='L14'></a><a href='#L14'>14</a> <a name='L15'></a><a href='#L15'>15</a> <a name='L16'></a><a href='#L16'>16</a> <a name='L17'></a><a href='#L17'>17</a> <a name='L18'></a><a href='#L18'>18</a> <a name='L19'></a><a href='#L19'>19</a> <a name='L20'></a><a href='#L20'>20</a> <a name='L21'></a><a href='#L21'>21</a> <a name='L22'></a><a href='#L22'>22</a> <a name='L23'></a><a href='#L23'>23</a> <a name='L24'></a><a href='#L24'>24</a> <a name='L25'></a><a href='#L25'>25</a> <a name='L26'></a><a href='#L26'>26</a> <a name='L27'></a><a href='#L27'>27</a> <a name='L28'></a><a href='#L28'>28</a> <a name='L29'></a><a href='#L29'>29</a> <a name='L30'></a><a href='#L30'>30</a> <a name='L31'></a><a href='#L31'>31</a> <a name='L32'></a><a href='#L32'>32</a> <a name='L33'></a><a href='#L33'>33</a> <a name='L34'></a><a href='#L34'>34</a> <a name='L35'></a><a href='#L35'>35</a> <a name='L36'></a><a href='#L36'>36</a> <a name='L37'></a><a href='#L37'>37</a> <a name='L38'></a><a href='#L38'>38</a> <a name='L39'></a><a href='#L39'>39</a> <a name='L40'></a><a href='#L40'>40</a> <a name='L41'></a><a href='#L41'>41</a> <a name='L42'></a><a href='#L42'>42</a> <a name='L43'></a><a href='#L43'>43</a> <a name='L44'></a><a href='#L44'>44</a> <a name='L45'></a><a href='#L45'>45</a> <a name='L46'></a><a href='#L46'>46</a> <a name='L47'></a><a href='#L47'>47</a> <a name='L48'></a><a href='#L48'>48</a> <a name='L49'></a><a href='#L49'>49</a> <a name='L50'></a><a href='#L50'>50</a> <a name='L51'></a><a href='#L51'>51</a> <a name='L52'></a><a href='#L52'>52</a> <a name='L53'></a><a href='#L53'>53</a> <a name='L54'></a><a href='#L54'>54</a> <a name='L55'></a><a href='#L55'>55</a> <a name='L56'></a><a href='#L56'>56</a> <a name='L57'></a><a href='#L57'>57</a> <a name='L58'></a><a href='#L58'>58</a> <a name='L59'></a><a href='#L59'>59</a> <a name='L60'></a><a href='#L60'>60</a> <a name='L61'></a><a href='#L61'>61</a> <a name='L62'></a><a href='#L62'>62</a> <a name='L63'></a><a href='#L63'>63</a> <a name='L64'></a><a href='#L64'>64</a> <a name='L65'></a><a href='#L65'>65</a> <a name='L66'></a><a href='#L66'>66</a> <a name='L67'></a><a href='#L67'>67</a> <a name='L68'></a><a href='#L68'>68</a> <a name='L69'></a><a href='#L69'>69</a> <a name='L70'></a><a href='#L70'>70</a> <a name='L71'></a><a href='#L71'>71</a> <a name='L72'></a><a href='#L72'>72</a> <a name='L73'></a><a href='#L73'>73</a> <a name='L74'></a><a href='#L74'>74</a> <a name='L75'></a><a href='#L75'>75</a> <a name='L76'></a><a href='#L76'>76</a> <a name='L77'></a><a href='#L77'>77</a> <a name='L78'></a><a href='#L78'>78</a> <a name='L79'></a><a href='#L79'>79</a> <a name='L80'></a><a href='#L80'>80</a> <a name='L81'></a><a href='#L81'>81</a> <a name='L82'></a><a href='#L82'>82</a> <a name='L83'></a><a href='#L83'>83</a> <a name='L84'></a><a href='#L84'>84</a> <a name='L85'></a><a href='#L85'>85</a> <a name='L86'></a><a href='#L86'>86</a> <a name='L87'></a><a href='#L87'>87</a> <a name='L88'></a><a href='#L88'>88</a> <a name='L89'></a><a href='#L89'>89</a> <a name='L90'></a><a href='#L90'>90</a> <a name='L91'></a><a href='#L91'>91</a> <a name='L92'></a><a href='#L92'>92</a> <a name='L93'></a><a href='#L93'>93</a> <a name='L94'></a><a href='#L94'>94</a> <a name='L95'></a><a href='#L95'>95</a> <a name='L96'></a><a href='#L96'>96</a> <a name='L97'></a><a href='#L97'>97</a> <a name='L98'></a><a href='#L98'>98</a> <a name='L99'></a><a href='#L99'>99</a> <a name='L100'></a><a href='#L100'>100</a> <a name='L101'></a><a href='#L101'>101</a> <a name='L102'></a><a href='#L102'>102</a> <a name='L103'></a><a href='#L103'>103</a> <a name='L104'></a><a href='#L104'>104</a> <a name='L105'></a><a href='#L105'>105</a></td><td class="line-coverage quiet">                      1x     1x   1x                                                                                                                 1x     1x                 1x 1x                                    </td><td class="text"><pre class="prettyprint lang-js">import React from 'react';   import { cxBackgroundGray, cxBackgroundGrayStrokeNeutralFill, } from './LoadingSkeletonsSvgUtil'; import LoadingSkeleton, { ILoadingSkeletonProps, IStandardSkeleton, } from './LoadingSkeleton';   export const LineChartSkeleton = ( props: IStandardSkeleton ): React.ReactElement<IStandardSkeleton> => { const { width = 900, height = 310, className } = props;   return ( <div data-test-id='loadingSkeleton-LineChartSkeleton'> <svg data-test-id='loadingSkeleton-LineChartSkeleton-svg' width={width} height={height} version='1.1' xmlns='http://www.w3.org/2000/svg' > <g id='LineChartSkeleton-Details' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd' > <g id='LineChartSkeleton-Group-1' transform='translate(-93.000000, -1173.000000)' > <g id='LineChartSkeleton-Chart' transform='translate(93.000000, 1173.000000)' > <path className={cxBackgroundGray('&', className)} d='M0,310 L0,0 L1,0 L1,309 L1130,309 L1130,310 L0,310 Z' id='LineChartSkeleton-Combined-Shape-1' /> <polyline className={cxBackgroundGrayStrokeNeutralFill('&', className)} id='Line-8' strokeWidth='3' strokeLinecap='square' points='2 260 218 212 435 185 653 103 870 45 1087 22' /> <path className={cxBackgroundGray('&', className)} d='M218,206 C221.313708,206 224,208.686292 224,212 C224,215.313708 221.313708, 218 218,218 C214.686292,218 212,215.313708 212,212 C212,208.686292 214.686292, 206 218,206 Z M435,179 C438.313708,179 441,181.686292 441,185 C441,188.313708 438.313708, 191 435,191 C431.686292,191 429,188.313708 429,185 C429,181.686292 431.686292,179 435, 179 Z M653,97 C656.313708,97 659,99.6862915 659,103 C659,106.313708 656.313708,109 653,109 C649.686292,109 647, 106.313708 647,103 C647,99.6862915 649.686292,97 653,97 Z M870,39 C873.313708,39 876,41.6862915 876,45 C876, 48.3137085 873.313708,51 870,51 C866.686292,51 864,48.3137085 864,45 C864,41.6862915 866.686292, 39 870,39 Z M1087,16 C1090.31371,16 1093,18.6862915 1093,22 C1093,25.3137085 1090.31371,28 1087,28 C1083.68629, 28 1081,25.3137085 1081,22 C1081,18.6862915 1083.68629,16 1087,16 Z' id='LineChartSkeleton-Combined-Shape-2' /> </g> </g> </g> </svg> </div> ); };   const LineChartLoadingSkeleton = ( props: ILoadingSkeletonProps ): React.ReactElement => { return ( <LoadingSkeleton data-test-id='loadingSkeleton-LineChartLoadingSkeleton' Skeleton={LineChartSkeleton} {...props} /> ); };   LineChartLoadingSkeleton.displayName = 'LineChartLoadingSkeleton'; LineChartLoadingSkeleton.peek = { description: `A loading indicator wrapper with optional overlay.`, notes: { overview: ` A visual indication that a section or component of the interface is loading. Designed to indicate loading data `, intendedUse: ` - Use in places where data takes time to load. LineChartLoadingSkeleton lets users know that the information they expect to see will appear shortly. `, technicalRecommendations: ` If a page is displaying a lot of data coming from multiple sources, try as best as possible to load the individual parts of the UI, so as not to disrupt the user and block them from interacting with the entire page until all data is loaded. `, }, categories: ['Loading Indicator'], };   export default LineChartLoadingSkeleton;  </pre></td></tr></table></pre> <div class='push'></div> </div> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a> at Wed Jun 08 2022 15:46:41 GMT+0000 (Coordinated Universal Time) </div> <script src="../prettify.js"></script> <script> window.onload = function () { prettyPrint(); }; </script> <script src="../sorter.js"></script> <script src="../block-navigation.js"></script> </body> </html>