lucid-ui

<!doctype html> <html lang="en"> <head> <title>Code coverage report for LoadingSkeletons/BarChartLoadingSkeleton.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> BarChartLoadingSkeleton.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></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 } from './LoadingSkeletonsSvgUtil'; import LoadingSkeleton, { ILoadingSkeletonProps, IStandardSkeleton, } from './LoadingSkeleton';   export const BarChartSkeleton = ( props: IStandardSkeleton ): React.ReactElement => { const { width = 880, height = 350, className } = props;   return ( <div data-test-id='loadingSkeleton-BarChartSkeleton' className={cxBackgroundGray('&', className)} > <svg data-test-id='loadingSkeleton-BarChartSkeleton-svg' width={width} height={height} version='1.1' > <g id='BarChartSkeleton-Details' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd' > <g id='BarChartSkeleton-DM' transform='translate(-93.000000, -723.000000)' > <g id='BarChartSkeleton-Chart' transform='translate(93.000000, 723.000000)' > <path className={cxBackgroundGray('&', className)} d='M54,59 L54,339 L21,339 L21,59 L54,59 Z M517,19 L517,339 L485,339 L485,19 L517,19 Z M105,19 L105,339 L72,339 L72,19 L105,19 Z M620,19 L620,339 L587,339 L587,19 L620,19 Z M157,113 L157,339 L124,339 L124, 113 L157,113 Z M569,113 L569,339 L536,339 L536,113 L569,113 Z M467,59 L467,339 L435,339 L435,59 L467, 59 Z M260,59 L260,339 L226,339 L226,59 L260,59 Z M314,19 L314,339 L278,339 L278,19 L314,19 Z M366, 113 L366,339 L333,339 L333,113 L366,113 Z M417,19 L417,339 L384,339 L384,19 L417,19 Z M208,19 L208, 339 L175,339 L175,19 L208,19 Z M672,59 L672,339 L638,339 L638,59 L672,59 Z M723,19 L723,339 L690,339 L690, 19 L723,19 Z M775,113 L775,339 L742,339 L742,113 L775,113 Z M1082,59 L1082,339 L1048,339 L1048,59 L1082, 59 Z M876,59 L876,339 L844,339 L844,59 L876,59 Z M926,19 L926,339 L894,339 L894,19 L926, 19 Z M978,113 L978,339 L945,339 L945,113 L978,113 Z M1030,19 L1030,339 L996,339 L996,19 L1030, 19 Z M826,19 L826,339 L793,339 L793,19 L826,19 Z' id='Combined-Shape' /> <path className={cxBackgroundGray('&', className)} d='M0,340 L0,0 L1,0 L1,339 L1130,339 L1130,340 L0,340 Z' id='BarChartSkeleton-Combined-Shape' /> </g> </g> </g> </svg> </div> ); };   export const BarChartLoadingSkeleton = ( props: ILoadingSkeletonProps ): React.ReactElement => { return ( <LoadingSkeleton data-test-id='loadingSkeleton-BarChartLoadingSkeleton' Skeleton={BarChartSkeleton} {...props} /> ); };   BarChartLoadingSkeleton.displayName = 'BarChartLoadingSkeleton'; BarChartLoadingSkeleton.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 Bar Chart of data `, intendedUse: ` - Use in places where data takes time to load. BarChartLoadingSkeleton 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 BarChartLoadingSkeleton;  </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>