@redsift/dashboard 8.0.1 → 8.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (155) hide show
  1. package/package.json +3 -2
  2. package/.env +0 -2
  3. package/coverage/clover.xml +0 -509
  4. package/coverage/coverage-final.json +0 -22
  5. package/coverage/lcov-report/ConnectedDataGrid/ConnectedDataGrid.tsx.html +0 -193
  6. package/coverage/lcov-report/ConnectedDataGrid/index.html +0 -131
  7. package/coverage/lcov-report/ConnectedDataGrid/index.ts.html +0 -85
  8. package/coverage/lcov-report/Dashboard/Dashboard.tsx.html +0 -229
  9. package/coverage/lcov-report/Dashboard/context.ts.html +0 -118
  10. package/coverage/lcov-report/Dashboard/index.html +0 -176
  11. package/coverage/lcov-report/Dashboard/index.ts.html +0 -97
  12. package/coverage/lcov-report/Dashboard/reducer.ts.html +0 -139
  13. package/coverage/lcov-report/Dashboard/types.ts.html +0 -190
  14. package/coverage/lcov-report/HorizontalBarChart/HorizontalBarChart.tsx.html +0 -430
  15. package/coverage/lcov-report/HorizontalBarChart/index.html +0 -161
  16. package/coverage/lcov-report/HorizontalBarChart/index.ts.html +0 -88
  17. package/coverage/lcov-report/HorizontalBarChart/styles.ts.html +0 -217
  18. package/coverage/lcov-report/HorizontalBarChart/types.ts.html +0 -184
  19. package/coverage/lcov-report/PieChart/PieChart.tsx.html +0 -736
  20. package/coverage/lcov-report/PieChart/index.html +0 -161
  21. package/coverage/lcov-report/PieChart/index.ts.html +0 -88
  22. package/coverage/lcov-report/PieChart/styles.ts.html +0 -244
  23. package/coverage/lcov-report/PieChart/types.ts.html +0 -184
  24. package/coverage/lcov-report/base.css +0 -224
  25. package/coverage/lcov-report/block-navigation.js +0 -87
  26. package/coverage/lcov-report/components/ChartEmptyState/ChartEmptyState.tsx.html +0 -679
  27. package/coverage/lcov-report/components/ChartEmptyState/index.html +0 -146
  28. package/coverage/lcov-report/components/ChartEmptyState/index.ts.html +0 -91
  29. package/coverage/lcov-report/components/ChartEmptyState/styles.ts.html +0 -184
  30. package/coverage/lcov-report/components/ConnectedDataGrid/ConnectedDataGrid.tsx.html +0 -181
  31. package/coverage/lcov-report/components/ConnectedDataGrid/index.html +0 -131
  32. package/coverage/lcov-report/components/ConnectedDataGrid/index.ts.html +0 -85
  33. package/coverage/lcov-report/components/CrossfilterRegistry/CrossfilterRegistry.ts.html +0 -163
  34. package/coverage/lcov-report/components/CrossfilterRegistry/index.html +0 -131
  35. package/coverage/lcov-report/components/CrossfilterRegistry/index.ts.html +0 -88
  36. package/coverage/lcov-report/components/Dashboard/Dashboard.tsx.html +0 -289
  37. package/coverage/lcov-report/components/Dashboard/context.ts.html +0 -115
  38. package/coverage/lcov-report/components/Dashboard/index.html +0 -176
  39. package/coverage/lcov-report/components/Dashboard/index.ts.html +0 -97
  40. package/coverage/lcov-report/components/Dashboard/reducer.ts.html +0 -382
  41. package/coverage/lcov-report/components/Dashboard/types.ts.html +0 -226
  42. package/coverage/lcov-report/components/DataGrid/DataGrid.tsx.html +0 -202
  43. package/coverage/lcov-report/components/DataGrid/index.html +0 -131
  44. package/coverage/lcov-report/components/DataGrid/index.ts.html +0 -91
  45. package/coverage/lcov-report/components/EmptyChart/EmptyChart.tsx.html +0 -244
  46. package/coverage/lcov-report/components/EmptyChart/index.html +0 -146
  47. package/coverage/lcov-report/components/EmptyChart/index.ts.html +0 -91
  48. package/coverage/lcov-report/components/EmptyChart/styles.ts.html +0 -241
  49. package/coverage/lcov-report/components/HorizontalBarChart/HorizontalBarChart.tsx.html +0 -1063
  50. package/coverage/lcov-report/components/HorizontalBarChart/index.html +0 -161
  51. package/coverage/lcov-report/components/HorizontalBarChart/index.ts.html +0 -91
  52. package/coverage/lcov-report/components/HorizontalBarChart/styles.ts.html +0 -385
  53. package/coverage/lcov-report/components/HorizontalBarChart/types.ts.html +0 -328
  54. package/coverage/lcov-report/components/PDFExportButton/PdfDocument.tsx.html +0 -688
  55. package/coverage/lcov-report/components/PDFExportButton/PdfExportButton.tsx.html +0 -583
  56. package/coverage/lcov-report/components/PDFExportButton/index.html +0 -161
  57. package/coverage/lcov-report/components/PDFExportButton/index.ts.html +0 -88
  58. package/coverage/lcov-report/components/PDFExportButton/styles.ts.html +0 -532
  59. package/coverage/lcov-report/components/PDFExportButton/utils.ts.html +0 -283
  60. package/coverage/lcov-report/components/PieChart/PieChart.tsx.html +0 -1363
  61. package/coverage/lcov-report/components/PieChart/index.html +0 -161
  62. package/coverage/lcov-report/components/PieChart/index.ts.html +0 -91
  63. package/coverage/lcov-report/components/PieChart/styles.ts.html +0 -388
  64. package/coverage/lcov-report/components/PieChart/types.ts.html +0 -325
  65. package/coverage/lcov-report/components/ResetButton/ResetButton.tsx.html +0 -160
  66. package/coverage/lcov-report/components/ResetButton/index.html +0 -131
  67. package/coverage/lcov-report/components/ResetButton/index.ts.html +0 -91
  68. package/coverage/lcov-report/components/ScatterPlot/ScatterPlot.tsx.html +0 -2881
  69. package/coverage/lcov-report/components/ScatterPlot/index.html +0 -176
  70. package/coverage/lcov-report/components/ScatterPlot/index.ts.html +0 -91
  71. package/coverage/lcov-report/components/ScatterPlot/styles.ts.html +0 -505
  72. package/coverage/lcov-report/components/ScatterPlot/types.ts.html +0 -370
  73. package/coverage/lcov-report/components/ScatterPlot/utils.ts.html +0 -136
  74. package/coverage/lcov-report/components/StaticPieChart/StaticPieChart.tsx.html +0 -286
  75. package/coverage/lcov-report/components/StaticPieChart/index.html +0 -131
  76. package/coverage/lcov-report/components/StaticPieChart/index.ts.html +0 -88
  77. package/coverage/lcov-report/components/TimeSeriesBarChart/TimeSeriesBarChart.tsx.html +0 -1744
  78. package/coverage/lcov-report/components/TimeSeriesBarChart/index.html +0 -161
  79. package/coverage/lcov-report/components/TimeSeriesBarChart/index.ts.html +0 -91
  80. package/coverage/lcov-report/components/TimeSeriesBarChart/styles.ts.html +0 -361
  81. package/coverage/lcov-report/components/TimeSeriesBarChart/types.ts.html +0 -319
  82. package/coverage/lcov-report/components/WithFilters/FilterableBarChart.tsx.html +0 -628
  83. package/coverage/lcov-report/components/WithFilters/FilterableDataGrid.tsx.html +0 -220
  84. package/coverage/lcov-report/components/WithFilters/FilterablePieChart.tsx.html +0 -622
  85. package/coverage/lcov-report/components/WithFilters/FilterableScatterPlot.tsx.html +0 -1090
  86. package/coverage/lcov-report/components/WithFilters/WithFilters.tsx.html +0 -172
  87. package/coverage/lcov-report/components/WithFilters/index.html +0 -191
  88. package/coverage/lcov-report/components/WithFilters/index.ts.html +0 -91
  89. package/coverage/lcov-report/components/index.html +0 -116
  90. package/coverage/lcov-report/components/index.ts.html +0 -97
  91. package/coverage/lcov-report/favicon.png +0 -0
  92. package/coverage/lcov-report/hooks/index.html +0 -116
  93. package/coverage/lcov-report/hooks/useCategoricalChartAsListbox.ts.html +0 -478
  94. package/coverage/lcov-report/hooks/useChartAsListbox.ts.html +0 -655
  95. package/coverage/lcov-report/index.html +0 -206
  96. package/coverage/lcov-report/prettify.css +0 -1
  97. package/coverage/lcov-report/prettify.js +0 -2
  98. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  99. package/coverage/lcov-report/sorter.js +0 -196
  100. package/coverage/lcov-report/utils/groupReduceCount.ts.html +0 -94
  101. package/coverage/lcov-report/utils/groupReduceSum.ts.html +0 -97
  102. package/coverage/lcov-report/utils/groupReducers/groupReduceCount.ts.html +0 -100
  103. package/coverage/lcov-report/utils/groupReducers/groupReduceSum.ts.html +0 -103
  104. package/coverage/lcov-report/utils/groupReducers/index.html +0 -146
  105. package/coverage/lcov-report/utils/groupReducers/index.ts.html +0 -91
  106. package/coverage/lcov-report/utils/index.html +0 -116
  107. package/coverage/lcov-report/utils/index.ts.html +0 -88
  108. package/coverage/lcov.info +0 -1070
  109. package/dist/package.json +0 -113
  110. package/index.ts +0 -1
  111. package/jest.config.js +0 -3
  112. package/rollup.config.js +0 -13
  113. package/src/components/ChartEmptyState/ChartEmptyState.stories.tsx +0 -23
  114. package/src/components/ChartEmptyState/ChartEmptyState.tsx +0 -198
  115. package/src/components/ChartEmptyState/index.ts +0 -2
  116. package/src/components/ChartEmptyState/styles.ts +0 -33
  117. package/src/components/ChartEmptyState/types.ts +0 -15
  118. package/src/components/CrossfilterRegistry/CrossfilterRegistry.ts +0 -26
  119. package/src/components/CrossfilterRegistry/index.ts +0 -1
  120. package/src/components/Dashboard/Dashboard.stories.tsx +0 -602
  121. package/src/components/Dashboard/Dashboard.test.tsx +0 -19
  122. package/src/components/Dashboard/Dashboard.tsx +0 -68
  123. package/src/components/Dashboard/__snapshots__/Dashboard.stories.storyshot +0 -24646
  124. package/src/components/Dashboard/context.ts +0 -10
  125. package/src/components/Dashboard/index.ts +0 -4
  126. package/src/components/Dashboard/reducer.ts +0 -99
  127. package/src/components/Dashboard/types.ts +0 -47
  128. package/src/components/PdfExportButton/PdfDocument.tsx +0 -203
  129. package/src/components/PdfExportButton/PdfExportButton.tsx +0 -168
  130. package/src/components/PdfExportButton/index.ts +0 -3
  131. package/src/components/PdfExportButton/styles.ts +0 -151
  132. package/src/components/PdfExportButton/types.ts +0 -59
  133. package/src/components/TimeSeriesBarChart/TimeSeriesBarChart.tsx +0 -565
  134. package/src/components/TimeSeriesBarChart/index.ts +0 -4
  135. package/src/components/TimeSeriesBarChart/styles.ts +0 -94
  136. package/src/components/TimeSeriesBarChart/types.ts +0 -82
  137. package/src/components/WithFilters/FilterableBarChart.tsx +0 -181
  138. package/src/components/WithFilters/FilterableDataGrid.tsx +0 -45
  139. package/src/components/WithFilters/FilterablePieChart.tsx +0 -179
  140. package/src/components/WithFilters/FilterableScatterPlot.tsx +0 -335
  141. package/src/components/WithFilters/WithFilters.tsx +0 -29
  142. package/src/components/WithFilters/index.ts +0 -2
  143. package/src/components/WithFilters/types.ts +0 -45
  144. package/src/hooks/useCategoricalChartAsListbox.ts +0 -131
  145. package/src/index.ts +0 -8
  146. package/src/types.ts +0 -39
  147. package/src/utils/groupReducers/groupReduceCount.ts +0 -5
  148. package/src/utils/groupReducers/groupReduceSum.ts +0 -6
  149. package/src/utils/groupReducers/index.ts +0 -2
  150. package/src/utils/index.ts +0 -1
  151. package/tsconfig.json +0 -3
  152. /package/{dist/CONTRIBUTING.md → CONTRIBUTING.md} +0 -0
  153. /package/{dist/index.d.ts → index.d.ts} +0 -0
  154. /package/{dist/index.js → index.js} +0 -0
  155. /package/{dist/index.js.map → index.js.map} +0 -0
package/coverage/lcov-report/PieChart/PieChart.tsx.html DELETED
@@ -1,736 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for PieChart/PieChart.tsx</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../prettify.css" />
9
- <link rel="stylesheet" href="../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../index.html">All files</a> / <a href="index.html">PieChart</a> PieChart.tsx</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">51% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>51/100</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">17.54% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>10/57</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">15.78% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>3/19</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">50.52% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>48/95</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input oninput="onInput()" type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line medium'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a>
80
- <a name='L15'></a><a href='#L15'>15</a>
81
- <a name='L16'></a><a href='#L16'>16</a>
82
- <a name='L17'></a><a href='#L17'>17</a>
83
- <a name='L18'></a><a href='#L18'>18</a>
84
- <a name='L19'></a><a href='#L19'>19</a>
85
- <a name='L20'></a><a href='#L20'>20</a>
86
- <a name='L21'></a><a href='#L21'>21</a>
87
- <a name='L22'></a><a href='#L22'>22</a>
88
- <a name='L23'></a><a href='#L23'>23</a>
89
- <a name='L24'></a><a href='#L24'>24</a>
90
- <a name='L25'></a><a href='#L25'>25</a>
91
- <a name='L26'></a><a href='#L26'>26</a>
92
- <a name='L27'></a><a href='#L27'>27</a>
93
- <a name='L28'></a><a href='#L28'>28</a>
94
- <a name='L29'></a><a href='#L29'>29</a>
95
- <a name='L30'></a><a href='#L30'>30</a>
96
- <a name='L31'></a><a href='#L31'>31</a>
97
- <a name='L32'></a><a href='#L32'>32</a>
98
- <a name='L33'></a><a href='#L33'>33</a>
99
- <a name='L34'></a><a href='#L34'>34</a>
100
- <a name='L35'></a><a href='#L35'>35</a>
101
- <a name='L36'></a><a href='#L36'>36</a>
102
- <a name='L37'></a><a href='#L37'>37</a>
103
- <a name='L38'></a><a href='#L38'>38</a>
104
- <a name='L39'></a><a href='#L39'>39</a>
105
- <a name='L40'></a><a href='#L40'>40</a>
106
- <a name='L41'></a><a href='#L41'>41</a>
107
- <a name='L42'></a><a href='#L42'>42</a>
108
- <a name='L43'></a><a href='#L43'>43</a>
109
- <a name='L44'></a><a href='#L44'>44</a>
110
- <a name='L45'></a><a href='#L45'>45</a>
111
- <a name='L46'></a><a href='#L46'>46</a>
112
- <a name='L47'></a><a href='#L47'>47</a>
113
- <a name='L48'></a><a href='#L48'>48</a>
114
- <a name='L49'></a><a href='#L49'>49</a>
115
- <a name='L50'></a><a href='#L50'>50</a>
116
- <a name='L51'></a><a href='#L51'>51</a>
117
- <a name='L52'></a><a href='#L52'>52</a>
118
- <a name='L53'></a><a href='#L53'>53</a>
119
- <a name='L54'></a><a href='#L54'>54</a>
120
- <a name='L55'></a><a href='#L55'>55</a>
121
- <a name='L56'></a><a href='#L56'>56</a>
122
- <a name='L57'></a><a href='#L57'>57</a>
123
- <a name='L58'></a><a href='#L58'>58</a>
124
- <a name='L59'></a><a href='#L59'>59</a>
125
- <a name='L60'></a><a href='#L60'>60</a>
126
- <a name='L61'></a><a href='#L61'>61</a>
127
- <a name='L62'></a><a href='#L62'>62</a>
128
- <a name='L63'></a><a href='#L63'>63</a>
129
- <a name='L64'></a><a href='#L64'>64</a>
130
- <a name='L65'></a><a href='#L65'>65</a>
131
- <a name='L66'></a><a href='#L66'>66</a>
132
- <a name='L67'></a><a href='#L67'>67</a>
133
- <a name='L68'></a><a href='#L68'>68</a>
134
- <a name='L69'></a><a href='#L69'>69</a>
135
- <a name='L70'></a><a href='#L70'>70</a>
136
- <a name='L71'></a><a href='#L71'>71</a>
137
- <a name='L72'></a><a href='#L72'>72</a>
138
- <a name='L73'></a><a href='#L73'>73</a>
139
- <a name='L74'></a><a href='#L74'>74</a>
140
- <a name='L75'></a><a href='#L75'>75</a>
141
- <a name='L76'></a><a href='#L76'>76</a>
142
- <a name='L77'></a><a href='#L77'>77</a>
143
- <a name='L78'></a><a href='#L78'>78</a>
144
- <a name='L79'></a><a href='#L79'>79</a>
145
- <a name='L80'></a><a href='#L80'>80</a>
146
- <a name='L81'></a><a href='#L81'>81</a>
147
- <a name='L82'></a><a href='#L82'>82</a>
148
- <a name='L83'></a><a href='#L83'>83</a>
149
- <a name='L84'></a><a href='#L84'>84</a>
150
- <a name='L85'></a><a href='#L85'>85</a>
151
- <a name='L86'></a><a href='#L86'>86</a>
152
- <a name='L87'></a><a href='#L87'>87</a>
153
- <a name='L88'></a><a href='#L88'>88</a>
154
- <a name='L89'></a><a href='#L89'>89</a>
155
- <a name='L90'></a><a href='#L90'>90</a>
156
- <a name='L91'></a><a href='#L91'>91</a>
157
- <a name='L92'></a><a href='#L92'>92</a>
158
- <a name='L93'></a><a href='#L93'>93</a>
159
- <a name='L94'></a><a href='#L94'>94</a>
160
- <a name='L95'></a><a href='#L95'>95</a>
161
- <a name='L96'></a><a href='#L96'>96</a>
162
- <a name='L97'></a><a href='#L97'>97</a>
163
- <a name='L98'></a><a href='#L98'>98</a>
164
- <a name='L99'></a><a href='#L99'>99</a>
165
- <a name='L100'></a><a href='#L100'>100</a>
166
- <a name='L101'></a><a href='#L101'>101</a>
167
- <a name='L102'></a><a href='#L102'>102</a>
168
- <a name='L103'></a><a href='#L103'>103</a>
169
- <a name='L104'></a><a href='#L104'>104</a>
170
- <a name='L105'></a><a href='#L105'>105</a>
171
- <a name='L106'></a><a href='#L106'>106</a>
172
- <a name='L107'></a><a href='#L107'>107</a>
173
- <a name='L108'></a><a href='#L108'>108</a>
174
- <a name='L109'></a><a href='#L109'>109</a>
175
- <a name='L110'></a><a href='#L110'>110</a>
176
- <a name='L111'></a><a href='#L111'>111</a>
177
- <a name='L112'></a><a href='#L112'>112</a>
178
- <a name='L113'></a><a href='#L113'>113</a>
179
- <a name='L114'></a><a href='#L114'>114</a>
180
- <a name='L115'></a><a href='#L115'>115</a>
181
- <a name='L116'></a><a href='#L116'>116</a>
182
- <a name='L117'></a><a href='#L117'>117</a>
183
- <a name='L118'></a><a href='#L118'>118</a>
184
- <a name='L119'></a><a href='#L119'>119</a>
185
- <a name='L120'></a><a href='#L120'>120</a>
186
- <a name='L121'></a><a href='#L121'>121</a>
187
- <a name='L122'></a><a href='#L122'>122</a>
188
- <a name='L123'></a><a href='#L123'>123</a>
189
- <a name='L124'></a><a href='#L124'>124</a>
190
- <a name='L125'></a><a href='#L125'>125</a>
191
- <a name='L126'></a><a href='#L126'>126</a>
192
- <a name='L127'></a><a href='#L127'>127</a>
193
- <a name='L128'></a><a href='#L128'>128</a>
194
- <a name='L129'></a><a href='#L129'>129</a>
195
- <a name='L130'></a><a href='#L130'>130</a>
196
- <a name='L131'></a><a href='#L131'>131</a>
197
- <a name='L132'></a><a href='#L132'>132</a>
198
- <a name='L133'></a><a href='#L133'>133</a>
199
- <a name='L134'></a><a href='#L134'>134</a>
200
- <a name='L135'></a><a href='#L135'>135</a>
201
- <a name='L136'></a><a href='#L136'>136</a>
202
- <a name='L137'></a><a href='#L137'>137</a>
203
- <a name='L138'></a><a href='#L138'>138</a>
204
- <a name='L139'></a><a href='#L139'>139</a>
205
- <a name='L140'></a><a href='#L140'>140</a>
206
- <a name='L141'></a><a href='#L141'>141</a>
207
- <a name='L142'></a><a href='#L142'>142</a>
208
- <a name='L143'></a><a href='#L143'>143</a>
209
- <a name='L144'></a><a href='#L144'>144</a>
210
- <a name='L145'></a><a href='#L145'>145</a>
211
- <a name='L146'></a><a href='#L146'>146</a>
212
- <a name='L147'></a><a href='#L147'>147</a>
213
- <a name='L148'></a><a href='#L148'>148</a>
214
- <a name='L149'></a><a href='#L149'>149</a>
215
- <a name='L150'></a><a href='#L150'>150</a>
216
- <a name='L151'></a><a href='#L151'>151</a>
217
- <a name='L152'></a><a href='#L152'>152</a>
218
- <a name='L153'></a><a href='#L153'>153</a>
219
- <a name='L154'></a><a href='#L154'>154</a>
220
- <a name='L155'></a><a href='#L155'>155</a>
221
- <a name='L156'></a><a href='#L156'>156</a>
222
- <a name='L157'></a><a href='#L157'>157</a>
223
- <a name='L158'></a><a href='#L158'>158</a>
224
- <a name='L159'></a><a href='#L159'>159</a>
225
- <a name='L160'></a><a href='#L160'>160</a>
226
- <a name='L161'></a><a href='#L161'>161</a>
227
- <a name='L162'></a><a href='#L162'>162</a>
228
- <a name='L163'></a><a href='#L163'>163</a>
229
- <a name='L164'></a><a href='#L164'>164</a>
230
- <a name='L165'></a><a href='#L165'>165</a>
231
- <a name='L166'></a><a href='#L166'>166</a>
232
- <a name='L167'></a><a href='#L167'>167</a>
233
- <a name='L168'></a><a href='#L168'>168</a>
234
- <a name='L169'></a><a href='#L169'>169</a>
235
- <a name='L170'></a><a href='#L170'>170</a>
236
- <a name='L171'></a><a href='#L171'>171</a>
237
- <a name='L172'></a><a href='#L172'>172</a>
238
- <a name='L173'></a><a href='#L173'>173</a>
239
- <a name='L174'></a><a href='#L174'>174</a>
240
- <a name='L175'></a><a href='#L175'>175</a>
241
- <a name='L176'></a><a href='#L176'>176</a>
242
- <a name='L177'></a><a href='#L177'>177</a>
243
- <a name='L178'></a><a href='#L178'>178</a>
244
- <a name='L179'></a><a href='#L179'>179</a>
245
- <a name='L180'></a><a href='#L180'>180</a>
246
- <a name='L181'></a><a href='#L181'>181</a>
247
- <a name='L182'></a><a href='#L182'>182</a>
248
- <a name='L183'></a><a href='#L183'>183</a>
249
- <a name='L184'></a><a href='#L184'>184</a>
250
- <a name='L185'></a><a href='#L185'>185</a>
251
- <a name='L186'></a><a href='#L186'>186</a>
252
- <a name='L187'></a><a href='#L187'>187</a>
253
- <a name='L188'></a><a href='#L188'>188</a>
254
- <a name='L189'></a><a href='#L189'>189</a>
255
- <a name='L190'></a><a href='#L190'>190</a>
256
- <a name='L191'></a><a href='#L191'>191</a>
257
- <a name='L192'></a><a href='#L192'>192</a>
258
- <a name='L193'></a><a href='#L193'>193</a>
259
- <a name='L194'></a><a href='#L194'>194</a>
260
- <a name='L195'></a><a href='#L195'>195</a>
261
- <a name='L196'></a><a href='#L196'>196</a>
262
- <a name='L197'></a><a href='#L197'>197</a>
263
- <a name='L198'></a><a href='#L198'>198</a>
264
- <a name='L199'></a><a href='#L199'>199</a>
265
- <a name='L200'></a><a href='#L200'>200</a>
266
- <a name='L201'></a><a href='#L201'>201</a>
267
- <a name='L202'></a><a href='#L202'>202</a>
268
- <a name='L203'></a><a href='#L203'>203</a>
269
- <a name='L204'></a><a href='#L204'>204</a>
270
- <a name='L205'></a><a href='#L205'>205</a>
271
- <a name='L206'></a><a href='#L206'>206</a>
272
- <a name='L207'></a><a href='#L207'>207</a>
273
- <a name='L208'></a><a href='#L208'>208</a>
274
- <a name='L209'></a><a href='#L209'>209</a>
275
- <a name='L210'></a><a href='#L210'>210</a>
276
- <a name='L211'></a><a href='#L211'>211</a>
277
- <a name='L212'></a><a href='#L212'>212</a>
278
- <a name='L213'></a><a href='#L213'>213</a>
279
- <a name='L214'></a><a href='#L214'>214</a>
280
- <a name='L215'></a><a href='#L215'>215</a>
281
- <a name='L216'></a><a href='#L216'>216</a>
282
- <a name='L217'></a><a href='#L217'>217</a>
283
- <a name='L218'></a><a href='#L218'>218</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
284
- <span class="cline-any cline-neutral">&nbsp;</span>
285
- <span class="cline-any cline-neutral">&nbsp;</span>
286
- <span class="cline-any cline-neutral">&nbsp;</span>
287
- <span class="cline-any cline-neutral">&nbsp;</span>
288
- <span class="cline-any cline-neutral">&nbsp;</span>
289
- <span class="cline-any cline-neutral">&nbsp;</span>
290
- <span class="cline-any cline-neutral">&nbsp;</span>
291
- <span class="cline-any cline-yes">1x</span>
292
- <span class="cline-any cline-yes">1x</span>
293
- <span class="cline-any cline-yes">1x</span>
294
- <span class="cline-any cline-neutral">&nbsp;</span>
295
- <span class="cline-any cline-neutral">&nbsp;</span>
296
- <span class="cline-any cline-neutral">&nbsp;</span>
297
- <span class="cline-any cline-yes">1x</span>
298
- <span class="cline-any cline-yes">1x</span>
299
- <span class="cline-any cline-yes">1x</span>
300
- <span class="cline-any cline-yes">1x</span>
301
- <span class="cline-any cline-neutral">&nbsp;</span>
302
- <span class="cline-any cline-neutral">&nbsp;</span>
303
- <span class="cline-any cline-yes">1x</span>
304
- <span class="cline-any cline-yes">1x</span>
305
- <span class="cline-any cline-yes">1x</span>
306
- <span class="cline-any cline-neutral">&nbsp;</span>
307
- <span class="cline-any cline-neutral">&nbsp;</span>
308
- <span class="cline-any cline-neutral">&nbsp;</span>
309
- <span class="cline-any cline-neutral">&nbsp;</span>
310
- <span class="cline-any cline-yes">1x</span>
311
- <span class="cline-any cline-yes">10x</span>
312
- <span class="cline-any cline-neutral">&nbsp;</span>
313
- <span class="cline-any cline-yes">4x</span>
314
- <span class="cline-any cline-neutral">&nbsp;</span>
315
- <span class="cline-any cline-yes">2x</span>
316
- <span class="cline-any cline-neutral">&nbsp;</span>
317
- <span class="cline-any cline-neutral">&nbsp;</span>
318
- <span class="cline-any cline-yes">4x</span>
319
- <span class="cline-any cline-neutral">&nbsp;</span>
320
- <span class="cline-any cline-neutral">&nbsp;</span>
321
- <span class="cline-any cline-neutral">&nbsp;</span>
322
- <span class="cline-any cline-yes">1x</span>
323
- <span class="cline-any cline-neutral">&nbsp;</span>
324
- <span class="cline-any cline-yes">10x</span>
325
- <span class="cline-any cline-neutral">&nbsp;</span>
326
- <span class="cline-any cline-yes">10x</span>
327
- <span class="cline-any cline-yes">10x</span>
328
- <span class="cline-any cline-yes">10x</span>
329
- <span class="cline-any cline-yes">10x</span>
330
- <span class="cline-any cline-neutral">&nbsp;</span>
331
- <span class="cline-any cline-neutral">&nbsp;</span>
332
- <span class="cline-any cline-neutral">&nbsp;</span>
333
- <span class="cline-any cline-neutral">&nbsp;</span>
334
- <span class="cline-any cline-neutral">&nbsp;</span>
335
- <span class="cline-any cline-neutral">&nbsp;</span>
336
- <span class="cline-any cline-neutral">&nbsp;</span>
337
- <span class="cline-any cline-yes">10x</span>
338
- <span class="cline-any cline-yes">10x</span>
339
- <span class="cline-any cline-yes">10x</span>
340
- <span class="cline-any cline-yes">70x</span>
341
- <span class="cline-any cline-neutral">&nbsp;</span>
342
- <span class="cline-any cline-neutral">&nbsp;</span>
343
- <span class="cline-any cline-yes">10x</span>
344
- <span class="cline-any cline-neutral">&nbsp;</span>
345
- <span class="cline-any cline-neutral">&nbsp;</span>
346
- <span class="cline-any cline-yes">10x</span>
347
- <span class="cline-any cline-neutral">&nbsp;</span>
348
- <span class="cline-any cline-neutral">&nbsp;</span>
349
- <span class="cline-any cline-yes">10x</span>
350
- <span class="cline-any cline-yes">10x</span>
351
- <span class="cline-any cline-neutral">&nbsp;</span>
352
- <span class="cline-any cline-yes">10x</span>
353
- <span class="cline-any cline-no">&nbsp;</span>
354
- <span class="cline-any cline-no">&nbsp;</span>
355
- <span class="cline-any cline-no">&nbsp;</span>
356
- <span class="cline-any cline-no">&nbsp;</span>
357
- <span class="cline-any cline-neutral">&nbsp;</span>
358
- <span class="cline-any cline-neutral">&nbsp;</span>
359
- <span class="cline-any cline-yes">10x</span>
360
- <span class="cline-any cline-no">&nbsp;</span>
361
- <span class="cline-any cline-no">&nbsp;</span>
362
- <span class="cline-any cline-no">&nbsp;</span>
363
- <span class="cline-any cline-no">&nbsp;</span>
364
- <span class="cline-any cline-neutral">&nbsp;</span>
365
- <span class="cline-any cline-neutral">&nbsp;</span>
366
- <span class="cline-any cline-neutral">&nbsp;</span>
367
- <span class="cline-any cline-yes">10x</span>
368
- <span class="cline-any cline-yes">1x</span>
369
- <span class="cline-any cline-yes">1x</span>
370
- <span class="cline-any cline-yes">1x</span>
371
- <span class="cline-any cline-neutral">&nbsp;</span>
372
- <span class="cline-any cline-neutral">&nbsp;</span>
373
- <span class="cline-any cline-yes">1x</span>
374
- <span class="cline-any cline-yes">1x</span>
375
- <span class="cline-any cline-yes">1x</span>
376
- <span class="cline-any cline-neutral">&nbsp;</span>
377
- <span class="cline-any cline-neutral">&nbsp;</span>
378
- <span class="cline-any cline-yes">1x</span>
379
- <span class="cline-any cline-neutral">&nbsp;</span>
380
- <span class="cline-any cline-neutral">&nbsp;</span>
381
- <span class="cline-any cline-neutral">&nbsp;</span>
382
- <span class="cline-any cline-neutral">&nbsp;</span>
383
- <span class="cline-any cline-neutral">&nbsp;</span>
384
- <span class="cline-any cline-neutral">&nbsp;</span>
385
- <span class="cline-any cline-yes">1x</span>
386
- <span class="cline-any cline-no">&nbsp;</span>
387
- <span class="cline-any cline-neutral">&nbsp;</span>
388
- <span class="cline-any cline-no">&nbsp;</span>
389
- <span class="cline-any cline-neutral">&nbsp;</span>
390
- <span class="cline-any cline-neutral">&nbsp;</span>
391
- <span class="cline-any cline-neutral">&nbsp;</span>
392
- <span class="cline-any cline-neutral">&nbsp;</span>
393
- <span class="cline-any cline-neutral">&nbsp;</span>
394
- <span class="cline-any cline-neutral">&nbsp;</span>
395
- <span class="cline-any cline-neutral">&nbsp;</span>
396
- <span class="cline-any cline-neutral">&nbsp;</span>
397
- <span class="cline-any cline-neutral">&nbsp;</span>
398
- <span class="cline-any cline-neutral">&nbsp;</span>
399
- <span class="cline-any cline-neutral">&nbsp;</span>
400
- <span class="cline-any cline-yes">1x</span>
401
- <span class="cline-any cline-neutral">&nbsp;</span>
402
- <span class="cline-any cline-no">&nbsp;</span>
403
- <span class="cline-any cline-neutral">&nbsp;</span>
404
- <span class="cline-any cline-neutral">&nbsp;</span>
405
- <span class="cline-any cline-neutral">&nbsp;</span>
406
- <span class="cline-any cline-neutral">&nbsp;</span>
407
- <span class="cline-any cline-neutral">&nbsp;</span>
408
- <span class="cline-any cline-neutral">&nbsp;</span>
409
- <span class="cline-any cline-neutral">&nbsp;</span>
410
- <span class="cline-any cline-no">&nbsp;</span>
411
- <span class="cline-any cline-no">&nbsp;</span>
412
- <span class="cline-any cline-neutral">&nbsp;</span>
413
- <span class="cline-any cline-no">&nbsp;</span>
414
- <span class="cline-any cline-no">&nbsp;</span>
415
- <span class="cline-any cline-neutral">&nbsp;</span>
416
- <span class="cline-any cline-no">&nbsp;</span>
417
- <span class="cline-any cline-neutral">&nbsp;</span>
418
- <span class="cline-any cline-neutral">&nbsp;</span>
419
- <span class="cline-any cline-no">&nbsp;</span>
420
- <span class="cline-any cline-neutral">&nbsp;</span>
421
- <span class="cline-any cline-neutral">&nbsp;</span>
422
- <span class="cline-any cline-neutral">&nbsp;</span>
423
- <span class="cline-any cline-neutral">&nbsp;</span>
424
- <span class="cline-any cline-neutral">&nbsp;</span>
425
- <span class="cline-any cline-neutral">&nbsp;</span>
426
- <span class="cline-any cline-neutral">&nbsp;</span>
427
- <span class="cline-any cline-no">&nbsp;</span>
428
- <span class="cline-any cline-no">&nbsp;</span>
429
- <span class="cline-any cline-no">&nbsp;</span>
430
- <span class="cline-any cline-neutral">&nbsp;</span>
431
- <span class="cline-any cline-neutral">&nbsp;</span>
432
- <span class="cline-any cline-no">&nbsp;</span>
433
- <span class="cline-any cline-no">&nbsp;</span>
434
- <span class="cline-any cline-no">&nbsp;</span>
435
- <span class="cline-any cline-no">&nbsp;</span>
436
- <span class="cline-any cline-neutral">&nbsp;</span>
437
- <span class="cline-any cline-neutral">&nbsp;</span>
438
- <span class="cline-any cline-no">&nbsp;</span>
439
- <span class="cline-any cline-no">&nbsp;</span>
440
- <span class="cline-any cline-no">&nbsp;</span>
441
- <span class="cline-any cline-no">&nbsp;</span>
442
- <span class="cline-any cline-neutral">&nbsp;</span>
443
- <span class="cline-any cline-neutral">&nbsp;</span>
444
- <span class="cline-any cline-no">&nbsp;</span>
445
- <span class="cline-any cline-neutral">&nbsp;</span>
446
- <span class="cline-any cline-no">&nbsp;</span>
447
- <span class="cline-any cline-neutral">&nbsp;</span>
448
- <span class="cline-any cline-no">&nbsp;</span>
449
- <span class="cline-any cline-no">&nbsp;</span>
450
- <span class="cline-any cline-no">&nbsp;</span>
451
- <span class="cline-any cline-no">&nbsp;</span>
452
- <span class="cline-any cline-neutral">&nbsp;</span>
453
- <span class="cline-any cline-no">&nbsp;</span>
454
- <span class="cline-any cline-no">&nbsp;</span>
455
- <span class="cline-any cline-no">&nbsp;</span>
456
- <span class="cline-any cline-no">&nbsp;</span>
457
- <span class="cline-any cline-neutral">&nbsp;</span>
458
- <span class="cline-any cline-neutral">&nbsp;</span>
459
- <span class="cline-any cline-no">&nbsp;</span>
460
- <span class="cline-any cline-no">&nbsp;</span>
461
- <span class="cline-any cline-no">&nbsp;</span>
462
- <span class="cline-any cline-neutral">&nbsp;</span>
463
- <span class="cline-any cline-no">&nbsp;</span>
464
- <span class="cline-any cline-neutral">&nbsp;</span>
465
- <span class="cline-any cline-no">&nbsp;</span>
466
- <span class="cline-any cline-neutral">&nbsp;</span>
467
- <span class="cline-any cline-neutral">&nbsp;</span>
468
- <span class="cline-any cline-neutral">&nbsp;</span>
469
- <span class="cline-any cline-neutral">&nbsp;</span>
470
- <span class="cline-any cline-yes">1x</span>
471
- <span class="cline-any cline-neutral">&nbsp;</span>
472
- <span class="cline-any cline-no">&nbsp;</span>
473
- <span class="cline-any cline-no">&nbsp;</span>
474
- <span class="cline-any cline-no">&nbsp;</span>
475
- <span class="cline-any cline-neutral">&nbsp;</span>
476
- <span class="cline-any cline-no">&nbsp;</span>
477
- <span class="cline-any cline-neutral">&nbsp;</span>
478
- <span class="cline-any cline-neutral">&nbsp;</span>
479
- <span class="cline-any cline-neutral">&nbsp;</span>
480
- <span class="cline-any cline-neutral">&nbsp;</span>
481
- <span class="cline-any cline-yes">1x</span>
482
- <span class="cline-any cline-neutral">&nbsp;</span>
483
- <span class="cline-any cline-neutral">&nbsp;</span>
484
- <span class="cline-any cline-neutral">&nbsp;</span>
485
- <span class="cline-any cline-yes">10x</span>
486
- <span class="cline-any cline-neutral">&nbsp;</span>
487
- <span class="cline-any cline-neutral">&nbsp;</span>
488
- <span class="cline-any cline-neutral">&nbsp;</span>
489
- <span class="cline-any cline-neutral">&nbsp;</span>
490
- <span class="cline-any cline-neutral">&nbsp;</span>
491
- <span class="cline-any cline-neutral">&nbsp;</span>
492
- <span class="cline-any cline-neutral">&nbsp;</span>
493
- <span class="cline-any cline-neutral">&nbsp;</span>
494
- <span class="cline-any cline-neutral">&nbsp;</span>
495
- <span class="cline-any cline-neutral">&nbsp;</span>
496
- <span class="cline-any cline-neutral">&nbsp;</span>
497
- <span class="cline-any cline-yes">1x</span>
498
- <span class="cline-any cline-yes">1x</span>
499
- <span class="cline-any cline-yes">1x</span>
500
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, {
501
- forwardRef,
502
- RefObject,
503
- useContext,
504
- useEffect,
505
- useId,
506
- useRef,
507
- } from 'react';
508
- import classNames from 'classnames';
509
- import crossfilter from 'crossfilter2';
510
- import * as dc from 'dc';
511
- &nbsp;
512
- import { Comp } from '@redsift/design-system';
513
- &nbsp;
514
- import { DashboardContext, DashboardReducerActionType } from '../Dashboard';
515
- import { PieChartProps, PieChartSize } from './types';
516
- import { StyledPieChart } from './styles';
517
- import { schemeCategorical } from '../../scheme';
518
- import { ChartDimensions } from '../../types';
519
- &nbsp;
520
- const COMPONENT_NAME = 'RedSiftPieChart';
521
- const CLASSNAME = 'redsift-piechart';
522
- const DEFAULT_PROPS: Partial&lt;PieChartProps&gt; = {
523
- size: PieChartSize.medium,
524
- title: 'Pie Chart',
525
- };
526
- &nbsp;
527
- const sizeToDimension = (size: PieChartSize): ChartDimensions =&gt; {
528
- switch(size) {
529
- case PieChartSize.small:
530
- return { width: 200, height: 200 };
531
- case PieChartSize.large:
532
- return { width: 400, height: 400 };
533
- case PieChartSize.medium:
534
- default:
535
- return { width: 300, height: 300 };
536
- }
537
- };
538
- &nbsp;
539
- export const PieChart: Comp&lt;PieChartProps, HTMLDivElement&gt; = forwardRef(
540
- (props, ref) =&gt; {
541
- const containerRef = (ref ||
542
- useRef&lt;HTMLDivElement&gt;()) as RefObject&lt;HTMLDivElement&gt;;
543
- const chartRef = useRef&lt;HTMLDivElement&gt;() as RefObject&lt;HTMLDivElement&gt;;
544
- const currentIndexRef = useRef(0);
545
- const numberOfGroupsRef = useRef(0);
546
- const id = useId();
547
- &nbsp;
548
- const {
549
- className,
550
- columnToFilter,
551
- data,
552
- dimension,
553
- group,
554
- size = <span class="branch-0 cbranch-no" title="branch not covered" >DEFAULT_PROPS.size,</span>
555
- title = <span class="branch-0 cbranch-no" title="branch not covered" >DEFAULT_PROPS.title,</span>
556
- ...forwardedProps
557
- } = props;
558
- &nbsp;
559
- // Get charts dimensions based on the selected size.
560
- const chartDimensions = sizeToDimension(size!);
561
- &nbsp;
562
- // Get ndx from context or initialize it.
563
- const { ndx = crossfilter(data)<span class="branch-1 cbranch-no" title="branch not covered" >, d</span>ispatch } = useContext(DashboardContext);
564
- &nbsp;
565
- // Create utils to manipulate focus on slices
566
- const getAllSlices = <span class="fstat-no" title="function not covered" >() =&gt; <span class="cstat-no" title="statement not covered" >c</span>hartRef.current?.querySelectorAll('g.pie-slice') as NodeListOf&lt;Element&gt;;</span>
567
- const getCurrentSlice = <span class="fstat-no" title="function not covered" >() =&gt; <span class="cstat-no" title="statement not covered" >c</span>hartRef.current?.querySelector(`g.pie-slice._${currentIndexRef.current}`) as HTMLElement;</span>
568
- &nbsp;
569
- const next = <span class="fstat-no" title="function not covered" >() =&gt; {</span>
570
- <span class="cstat-no" title="statement not covered" > getCurrentSlice().classList.remove('focused');</span>
571
- const index = <span class="cstat-no" title="statement not covered" >currentIndexRef.current === numberOfGroupsRef.current - 1 ? 0 : currentIndexRef.current + 1;</span>
572
- <span class="cstat-no" title="statement not covered" > currentIndexRef.current = index;</span>
573
- <span class="cstat-no" title="statement not covered" > getCurrentSlice().classList.add('focused');</span>
574
- };
575
- &nbsp;
576
- const previous = <span class="fstat-no" title="function not covered" >() =&gt; {</span>
577
- <span class="cstat-no" title="statement not covered" > getCurrentSlice().classList.remove('focused');</span>
578
- const index = <span class="cstat-no" title="statement not covered" >currentIndexRef.current === 0 ? numberOfGroupsRef.current - 1 : currentIndexRef.current - 1;</span>
579
- <span class="cstat-no" title="statement not covered" > currentIndexRef.current = index;</span>
580
- <span class="cstat-no" title="statement not covered" > getCurrentSlice().classList.add('focused');</span>
581
- };
582
- &nbsp;
583
- // useEffect called only once to initialize the chart.
584
- useEffect(() =&gt; {
585
- if (chartRef.current) {
586
- dc.config.defaultColors(schemeCategorical);
587
- const chart = dc.pieChart(chartRef.current);
588
- &nbsp;
589
- // Compute dimension and group.
590
- const computedDimension = ndx.dimension(dimension);
591
- const computedGroup = group(computedDimension.group());
592
- numberOfGroupsRef.current = computedGroup.size();
593
- &nbsp;
594
- // Initialize the chart.
595
- chart
596
- .width(chartDimensions.width)
597
- .height(chartDimensions.height)
598
- .dimension(computedDimension)
599
- .group(computedGroup);
600
- &nbsp;
601
- // Dispatch filters to datagrid when a slice is selected or unselected.
602
- <span class="missing-if-branch" title="if path not taken" >I</span>if (columnToFilter) {
603
- <span class="cstat-no" title="statement not covered" > chart</span>
604
- .on('filtered', <span class="fstat-no" title="function not covered" >() =&gt; {</span>
605
- <span class="cstat-no" title="statement not covered" > dispatch({</span>
606
- type: DashboardReducerActionType.FilterTable,
607
- filter: {
608
- id: chart.anchorName(),
609
- columnField: columnToFilter,
610
- operatorValue: 'isAnyOf',
611
- value: chart.filters(),
612
- }
613
- });
614
- });
615
- }
616
- &nbsp;
617
- chart.on('postRender', <span class="fstat-no" title="function not covered" >(c</span>hart) =&gt; {
618
- // Create a rect that will be used to indicate whether the pie chart is focused or not.
619
- <span class="cstat-no" title="statement not covered" > chart.select('svg &gt; g')</span>
620
- .append('rect')
621
- .attr('class', 'rect-outline')
622
- .attr('width', chartDimensions.width - 2)
623
- .attr('height', chartDimensions.height - 2)
624
- .attr('transform', `translate(-${(chartDimensions.width - 2) / 2},-${(chartDimensions.width - 2) / 2})`);
625
- &nbsp;
626
- // Add role and aria attributes to the each slice.
627
- <span class="cstat-no" title="statement not covered" > chart.selectAll('g.pie-slice &gt; title')</span>
628
- .attr('id', <span class="fstat-no" title="function not covered" >d </span>=&gt; <span class="cstat-no" title="statement not covered" >`id${id}__slice-${d.index}-title`);</span>
629
- &nbsp;
630
- <span class="cstat-no" title="statement not covered" > chart.selectAll('g.pie-slice')</span>
631
- .attr('id', <span class="fstat-no" title="function not covered" >d </span>=&gt; <span class="cstat-no" title="statement not covered" >`id${id}__slice-${d.index}`)</span>
632
- .attr('role', 'option')
633
- .attr('aria-labelledby', <span class="fstat-no" title="function not covered" >d </span>=&gt; <span class="cstat-no" title="statement not covered" >`id${id}__slice-${d.index}-title`);</span>
634
- &nbsp;
635
- // Add role, aria attributes and keyboard events to the group of slices.
636
- <span class="cstat-no" title="statement not covered" > chart.select('g.pie-slice-group')</span>
637
- .attr('tabIndex', 0)
638
- .attr('role', 'listbox')
639
- .attr('aria-labelledby', `id${id}__title`)
640
- .attr('aria-multiselectable', 'true')
641
- .attr('aria-orientation', 'horizontal')
642
- .attr('aria-activedescendant', `id${id}__slice-0`)
643
- .on('focus', <span class="fstat-no" title="function not covered" >() =&gt; {</span>
644
- <span class="cstat-no" title="statement not covered" > getCurrentSlice().classList.add('focused');</span>
645
- <span class="cstat-no" title="statement not covered" > chart.select('g.pie-slice-group').attr('aria-activedescendant', `id${id}__slice-0`);</span>
646
- <span class="cstat-no" title="statement not covered" > chartRef.current?.querySelector('rect.rect-outline')?.classList.add('visible');</span>
647
- })
648
- .on('blur', <span class="fstat-no" title="function not covered" >() =&gt; {</span>
649
- <span class="cstat-no" title="statement not covered" > getCurrentSlice().classList.remove('focused');</span>
650
- <span class="cstat-no" title="statement not covered" > currentIndexRef.current = 0;</span>
651
- <span class="cstat-no" title="statement not covered" > chart.select('g.pie-slice-group').attr('aria-activedescendant', '');</span>
652
- <span class="cstat-no" title="statement not covered" > chartRef.current?.querySelector('rect.rect-outline')?.classList.remove('visible');</span>
653
- })
654
- .on('mouseout', <span class="fstat-no" title="function not covered" >() =&gt; {</span>
655
- <span class="cstat-no" title="statement not covered" > getCurrentSlice().classList.remove('focused');</span>
656
- <span class="cstat-no" title="statement not covered" > currentIndexRef.current = 0;</span>
657
- <span class="cstat-no" title="statement not covered" > chart.select('g.pie-slice-group').attr('aria-activedescendant', '');</span>
658
- <span class="cstat-no" title="statement not covered" > chartRef.current?.querySelector('rect.rect-outline')?.classList.remove('visible');</span>
659
- })
660
- .on('keydown', <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
661
- <span class="cstat-no" title="statement not covered" > e.stopPropagation();</span>
662
- &nbsp;
663
- <span class="cstat-no" title="statement not covered" > switch (e.code) {</span>
664
- case 'ArrowRight':
665
- <span class="cstat-no" title="statement not covered" > e.preventDefault();</span>
666
- <span class="cstat-no" title="statement not covered" > next();</span>
667
- <span class="cstat-no" title="statement not covered" > chart.select('g.pie-slice-group').attr('aria-activedescendant', `id${id}__slice-${currentIndexRef.current}`);</span>
668
- <span class="cstat-no" title="statement not covered" > break;</span>
669
- case 'ArrowLeft':
670
- <span class="cstat-no" title="statement not covered" > e.preventDefault();</span>
671
- <span class="cstat-no" title="statement not covered" > previous();</span>
672
- <span class="cstat-no" title="statement not covered" > chart.select('g.pie-slice-group').attr('aria-activedescendant', `id${id}__slice-${currentIndexRef.current}`);</span>
673
- <span class="cstat-no" title="statement not covered" > break;</span>
674
- case 'Enter':
675
- case 'Space':
676
- <span class="cstat-no" title="statement not covered" > e.preventDefault();</span>
677
- <span class="cstat-no" title="statement not covered" > chart.selectAll(`g.pie-slice._${currentIndexRef.current}`).each(<span class="fstat-no" title="function not covered" >d </span>=&gt; {</span>
678
- <span class="cstat-no" title="statement not covered" > chart.onClick(d.data);</span>
679
- });
680
- <span class="cstat-no" title="statement not covered" > break;</span>
681
- default:
682
- <span class="cstat-no" title="statement not covered" > break;</span>
683
- }
684
- });
685
- });
686
- &nbsp;
687
- chart.on('renderlet', <span class="fstat-no" title="function not covered" >() =&gt; {</span>
688
- // Set aria-selected on each slice based on the selection.
689
- <span class="cstat-no" title="statement not covered" > getAllSlices().forEach(<span class="fstat-no" title="function not covered" >(e</span>lement) =&gt; {</span>
690
- <span class="cstat-no" title="statement not covered" > if (element.classList.contains('selected')) {</span>
691
- <span class="cstat-no" title="statement not covered" > element.setAttribute('aria-selected', 'true');</span>
692
- } else {
693
- <span class="cstat-no" title="statement not covered" > element.setAttribute('aria-selected', 'false');</span>
694
- }
695
- });
696
- });
697
- &nbsp;
698
- chart.render();
699
- }
700
- }, []);
701
- &nbsp;
702
- return (
703
- &lt;StyledPieChart
704
- {...forwardedProps}
705
- className={classNames(PieChart.className, className)}
706
- ref={containerRef as RefObject&lt;HTMLDivElement&gt;}
707
- &gt;
708
- &lt;span className={`${PieChart.className}__title`} id={`id${id}__title`}&gt;{title}&lt;/span&gt;
709
- &lt;div className={`${PieChart.className}__chart`} ref={chartRef as RefObject&lt;HTMLDivElement&gt;} /&gt;
710
- &lt;/StyledPieChart&gt;
711
- );
712
- }
713
- );
714
- PieChart.className = CLASSNAME;
715
- PieChart.defaultProps = DEFAULT_PROPS;
716
- PieChart.displayName = COMPONENT_NAME;
717
- &nbsp;</pre></td></tr></table></pre>
718
-
719
- <div class='push'></div><!-- for sticky footer -->
720
- </div><!-- /wrapper -->
721
- <div class='footer quiet pad2 space-top1 center small'>
722
- Code coverage generated by
723
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
724
- at 2022-10-14T15:28:47.432Z
725
- </div>
726
- <script src="../prettify.js"></script>
727
- <script>
728
- window.onload = function () {
729
- prettyPrint();
730
- };
731
- </script>
732
- <script src="../sorter.js"></script>
733
- <script src="../block-navigation.js"></script>
734
- </body>
735
- </html>
736
-