@cdc/chart 4.25.10 → 4.26.1

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 (135) hide show
  1. package/dist/{cdcchart-1a1724a1.es.js → cdcchart-dgT_1dIT.es.js} +136 -151
  2. package/dist/cdcchart.js +44003 -43518
  3. package/examples/feature/__data__/planet-example-data.json +1 -1
  4. package/examples/feature/boxplot/valid-boxplot.csv +38 -17
  5. package/examples/feature/pie/planet-pie-example-config.json +48 -2
  6. package/examples/private/DEV-11825.json +573 -0
  7. package/examples/private/DEV-12100.json +1303 -0
  8. package/examples/private/cat-y.json +1235 -0
  9. package/examples/private/data-points.json +228 -0
  10. package/examples/private/height.json +3915 -0
  11. package/examples/private/links.json +569 -0
  12. package/examples/private/na.json +913 -0
  13. package/examples/private/quadrant.txt +30 -0
  14. package/examples/private/test-data.csv +28 -0
  15. package/examples/private/test-forecast.json +5510 -0
  16. package/examples/private/warming-stripe-test.json +2578 -0
  17. package/examples/private/warming-stripes.json +4763 -0
  18. package/examples/tech-adoption-with-links.json +560 -0
  19. package/index.html +16 -140
  20. package/package.json +6 -5
  21. package/preview.html +1616 -0
  22. package/src/CdcChart.tsx +8 -11
  23. package/src/CdcChartComponent.tsx +329 -124
  24. package/src/_stories/Chart.Combo.stories.tsx +18 -0
  25. package/src/_stories/Chart.Forecast.stories.tsx +36 -0
  26. package/src/_stories/Chart.HTMLInDataTable.stories.tsx +520 -0
  27. package/src/_stories/Chart.Patterns.stories.tsx +2 -1
  28. package/src/_stories/Chart.PreserveDecimals.stories.tsx +220 -0
  29. package/src/_stories/Chart.Regions.Categorical.stories.tsx +148 -0
  30. package/src/_stories/Chart.Regions.DateScale.stories.tsx +197 -0
  31. package/src/_stories/Chart.Regions.DateTimeScale.stories.tsx +297 -0
  32. package/src/_stories/Chart.SmallMultiples.stories.tsx +47 -0
  33. package/src/_stories/Chart.stories.tsx +8 -0
  34. package/src/_stories/ChartAnnotation.stories.tsx +6 -3
  35. package/src/_stories/ChartBar.Editor.stories.tsx +3585 -0
  36. package/src/_stories/ChartBrush.Editor.stories.tsx +295 -0
  37. package/src/_stories/ChartBrush.stories.tsx +50 -0
  38. package/src/_stories/ChartEditor.Editor.stories.tsx +656 -0
  39. package/src/_stories/ChartEditor.stories.tsx +1 -2
  40. package/src/_stories/TechAdoptionWithLinks.stories.tsx +27 -0
  41. package/src/_stories/_mock/brush_enabled.json +326 -0
  42. package/src/_stories/_mock/brush_mock.json +2 -69
  43. package/src/_stories/_mock/combo.json +451 -0
  44. package/src/_stories/_mock/editor-test-configs.json +376 -0
  45. package/src/_stories/_mock/editor-test-datasets.json +477 -0
  46. package/src/_stories/_mock/editor-tests/bar-chart-editor-test.json +255 -0
  47. package/src/_stories/_mock/editor-tests/bar-chart-general-test.json +267 -0
  48. package/src/_stories/_mock/editor-tests/bar-chart-test.json +237 -0
  49. package/src/_stories/_mock/forecast_combo_with_gaps.json +913 -0
  50. package/src/_stories/_mock/horizontal-bars-dynamic-y-axis.json +413 -0
  51. package/src/_stories/_mock/pie_config.json +257 -62
  52. package/src/_stories/_mock/small_multiples/small_multiples_bars.json +1944 -0
  53. package/src/_stories/_mock/small_multiples/small_multiples_big_data_bars.json +1114 -0
  54. package/src/_stories/_mock/small_multiples/small_multiples_lines.json +2646 -0
  55. package/src/_stories/_mock/small_multiples/small_multiples_lines_colors.json +1305 -0
  56. package/src/_stories/_mock/small_multiples/small_multiples_stacked_bars.json +1936 -0
  57. package/src/components/Annotations/components/findNearestDatum.ts +6 -41
  58. package/src/components/AreaChart/components/AreaChart.Stacked.jsx +10 -7
  59. package/src/components/AreaChart/index.tsx +1 -2
  60. package/src/components/Axis/Categorical.Axis.tsx +6 -7
  61. package/src/components/BarChart/components/BarChart.Horizontal.tsx +181 -27
  62. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +3 -1
  63. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +1 -0
  64. package/src/components/BarChart/components/BarChart.Vertical.tsx +8 -9
  65. package/src/components/BarChart/components/context.tsx +1 -0
  66. package/src/components/BarChart/helpers/useBarChart.ts +14 -2
  67. package/src/components/BoxPlot/helpers/index.ts +3 -3
  68. package/src/components/Brush/BrushSelector.tsx +1258 -0
  69. package/src/components/Brush/MiniChartPreview.tsx +283 -0
  70. package/src/components/DeviationBar.jsx +9 -7
  71. package/src/components/EditorPanel/EditorPanel.tsx +2720 -2586
  72. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +96 -111
  73. package/src/components/EditorPanel/components/Panels/Panel.ForestPlotSettings.tsx +56 -34
  74. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +76 -31
  75. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +104 -55
  76. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +54 -49
  77. package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx +427 -0
  78. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +96 -48
  79. package/src/components/EditorPanel/components/Panels/index.tsx +3 -1
  80. package/src/components/EditorPanel/editor-panel.scss +0 -20
  81. package/src/components/EditorPanel/useEditorPermissions.ts +36 -31
  82. package/src/components/Forecasting/Forecasting.tsx +139 -21
  83. package/src/components/Legend/Legend.Component.tsx +16 -9
  84. package/src/components/Legend/Legend.tsx +3 -2
  85. package/src/components/Legend/helpers/createFormatLabels.tsx +325 -176
  86. package/src/components/Legend/helpers/getLegendClasses.ts +0 -1
  87. package/src/components/Legend/helpers/index.ts +10 -6
  88. package/src/components/LineChart/LineChartProps.ts +0 -3
  89. package/src/components/LineChart/helpers.ts +1 -1
  90. package/src/components/LineChart/index.tsx +36 -13
  91. package/src/components/LinearChart.tsx +559 -499
  92. package/src/components/PairedBarChart.jsx +20 -3
  93. package/src/components/Regions/components/Regions.tsx +366 -144
  94. package/src/components/Sankey/types/index.ts +1 -1
  95. package/src/components/ScatterPlot/ScatterPlot.jsx +2 -2
  96. package/src/components/SmallMultiples/SmallMultipleTile.tsx +202 -0
  97. package/src/components/SmallMultiples/SmallMultiples.css +32 -0
  98. package/src/components/SmallMultiples/SmallMultiples.tsx +271 -0
  99. package/src/components/SmallMultiples/index.ts +2 -0
  100. package/src/components/WarmingStripes/WarmingStripes.tsx +160 -0
  101. package/src/components/WarmingStripes/WarmingStripesGradientLegend.css +35 -0
  102. package/src/components/WarmingStripes/WarmingStripesGradientLegend.tsx +104 -0
  103. package/src/components/WarmingStripes/index.tsx +3 -0
  104. package/src/data/initial-state.js +16 -2
  105. package/src/helpers/buildForecastPaletteOptions.ts +0 -38
  106. package/src/helpers/calculateHorizontalBarCategoryLabelWidth.ts +57 -0
  107. package/src/helpers/getColorScale.ts +10 -0
  108. package/src/{hooks/useMinMax.ts → helpers/getMinMax.ts} +26 -14
  109. package/src/helpers/getYAxisAutoPadding.ts +53 -0
  110. package/src/helpers/sizeHelpers.ts +0 -20
  111. package/src/helpers/smallMultiplesHelpers.ts +529 -0
  112. package/src/hooks/useChartHoverAnalytics.tsx +10 -9
  113. package/src/hooks/useProgrammaticTooltip.ts +96 -0
  114. package/src/hooks/useScales.ts +98 -34
  115. package/src/hooks/useSmallMultipleSynchronization.ts +59 -0
  116. package/src/hooks/useTooltip.tsx +91 -25
  117. package/src/scss/DataTable.scss +0 -4
  118. package/src/scss/main.scss +18 -83
  119. package/src/store/chart.actions.ts +2 -0
  120. package/src/store/chart.reducer.ts +4 -0
  121. package/src/test/CdcChart.test.jsx +1 -1
  122. package/src/types/ChartConfig.ts +27 -6
  123. package/src/types/ChartContext.ts +3 -0
  124. package/src/types/Label.ts +1 -0
  125. package/src/utils/analyticsTracking.ts +19 -0
  126. package/LICENSE +0 -201
  127. package/src/_stories/_mock/pie_data.json +0 -218
  128. package/src/components/AreaChart/components/AreaChart.jsx +0 -109
  129. package/src/components/Brush/BrushChart.tsx +0 -128
  130. package/src/components/Brush/BrushController.tsx +0 -71
  131. package/src/components/Brush/types.tsx +0 -8
  132. package/src/components/BrushChart.tsx +0 -223
  133. package/src/helpers/sort.ts +0 -7
  134. package/src/hooks/useActiveElement.js +0 -19
  135. package/src/hooks/useChartClasses.js +0 -41
package/src/_stories/_mock/editor-test-configs.json ADDED
@@ -0,0 +1,376 @@
1
+ {
2
+ "area_chart_config": {
3
+ "type": "chart",
4
+ "title": "Area Chart Editor Test",
5
+ "showTitle": true,
6
+ "visualizationType": "Area Chart",
7
+ "theme": "theme-blue",
8
+ "fontSize": "medium",
9
+ "orientation": "vertical",
10
+ "xAxis": {
11
+ "type": "date",
12
+ "dataKey": "Date",
13
+ "label": "Date",
14
+ "dateParseFormat": "%Y-%m-%d",
15
+ "dateDisplayFormat": "%m/%d/%Y",
16
+ "size": 50
17
+ },
18
+ "yAxis": {
19
+ "label": "Value",
20
+ "size": 50,
21
+ "gridLines": true
22
+ },
23
+ "series": [
24
+ {
25
+ "dataKey": "Value",
26
+ "type": "Area Chart"
27
+ },
28
+ {
29
+ "dataKey": "Secondary_Value",
30
+ "type": "Area Chart"
31
+ }
32
+ ],
33
+ "legend": {
34
+ "position": "right",
35
+ "label": "Legend"
36
+ },
37
+ "visual": {
38
+ "border": true,
39
+ "accent": true,
40
+ "background": true
41
+ },
42
+ "palette": "qualitative-bold",
43
+ "area": {
44
+ "isStacked": false
45
+ }
46
+ },
47
+
48
+ "bar_chart_config": {
49
+ "type": "chart",
50
+ "title": "Bar Chart Editor Test",
51
+ "showTitle": true,
52
+ "visualizationType": "Bar",
53
+ "theme": "theme-green",
54
+ "fontSize": "medium",
55
+ "orientation": "vertical",
56
+ "xAxis": {
57
+ "type": "categorical",
58
+ "dataKey": "State",
59
+ "label": "State",
60
+ "size": 50,
61
+ "tickRotation": 45
62
+ },
63
+ "yAxis": {
64
+ "label": "Value",
65
+ "size": 50,
66
+ "gridLines": true
67
+ },
68
+ "series": [
69
+ {
70
+ "dataKey": "Value",
71
+ "type": "Bar"
72
+ }
73
+ ],
74
+ "legend": {
75
+ "position": "bottom",
76
+ "label": "Data Series"
77
+ },
78
+ "visual": {
79
+ "border": true,
80
+ "accent": true,
81
+ "background": true
82
+ },
83
+ "palette": "qualitative-soft",
84
+ "barThickness": 0.8
85
+ },
86
+
87
+ "line_chart_config": {
88
+ "type": "chart",
89
+ "title": "Line Chart Editor Test",
90
+ "showTitle": true,
91
+ "visualizationType": "Line",
92
+ "theme": "theme-purple",
93
+ "fontSize": "medium",
94
+ "orientation": "vertical",
95
+ "xAxis": {
96
+ "type": "date",
97
+ "dataKey": "Date",
98
+ "label": "Date",
99
+ "dateParseFormat": "%Y-%m-%d",
100
+ "dateDisplayFormat": "%b %Y",
101
+ "size": 50
102
+ },
103
+ "yAxis": {
104
+ "label": "Count",
105
+ "size": 50,
106
+ "gridLines": true
107
+ },
108
+ "series": [
109
+ {
110
+ "dataKey": "Count",
111
+ "type": "Line"
112
+ },
113
+ {
114
+ "dataKey": "Value",
115
+ "type": "Line"
116
+ }
117
+ ],
118
+ "legend": {
119
+ "position": "right",
120
+ "label": "Metrics"
121
+ },
122
+ "visual": {
123
+ "border": true,
124
+ "accent": true,
125
+ "background": true
126
+ },
127
+ "palette": "qualitative-bold",
128
+ "lineDatapointStyle": "hover"
129
+ },
130
+
131
+ "pie_chart_config": {
132
+ "type": "chart",
133
+ "title": "Pie Chart Editor Test",
134
+ "showTitle": true,
135
+ "visualizationType": "Pie",
136
+ "theme": "theme-orange",
137
+ "fontSize": "medium",
138
+ "xAxis": {
139
+ "dataKey": "Category"
140
+ },
141
+ "yAxis": {
142
+ "dataKey": "Value"
143
+ },
144
+ "legend": {
145
+ "position": "right",
146
+ "label": "Categories"
147
+ },
148
+ "visual": {
149
+ "border": true,
150
+ "accent": true,
151
+ "background": true
152
+ },
153
+ "palette": "qualitative-pastel",
154
+ "pieType": "Pie"
155
+ },
156
+
157
+ "combo_chart_config": {
158
+ "type": "chart",
159
+ "title": "Combo Chart Editor Test",
160
+ "showTitle": true,
161
+ "visualizationType": "Combo",
162
+ "theme": "theme-teal",
163
+ "fontSize": "medium",
164
+ "orientation": "vertical",
165
+ "xAxis": {
166
+ "type": "categorical",
167
+ "dataKey": "State",
168
+ "label": "State",
169
+ "size": 50
170
+ },
171
+ "yAxis": {
172
+ "label": "Primary Values",
173
+ "size": 50,
174
+ "gridLines": true,
175
+ "rightHideAxis": false,
176
+ "rightLabel": "Secondary Values"
177
+ },
178
+ "series": [
179
+ {
180
+ "dataKey": "Value",
181
+ "type": "Bar",
182
+ "axis": "Left"
183
+ },
184
+ {
185
+ "dataKey": "Rate",
186
+ "type": "Line",
187
+ "axis": "Right"
188
+ }
189
+ ],
190
+ "legend": {
191
+ "position": "bottom",
192
+ "label": "Data Types"
193
+ },
194
+ "visual": {
195
+ "border": true,
196
+ "accent": true,
197
+ "background": true
198
+ },
199
+ "palette": "qualitative-bold"
200
+ },
201
+
202
+ "scatter_plot_config": {
203
+ "type": "chart",
204
+ "title": "Scatter Plot Editor Test",
205
+ "showTitle": true,
206
+ "visualizationType": "Scatter Plot",
207
+ "theme": "theme-blue",
208
+ "fontSize": "medium",
209
+ "orientation": "vertical",
210
+ "xAxis": {
211
+ "type": "linear",
212
+ "dataKey": "X_Value",
213
+ "label": "X Values",
214
+ "size": 50
215
+ },
216
+ "yAxis": {
217
+ "dataKey": "Y_Value",
218
+ "label": "Y Values",
219
+ "size": 50,
220
+ "gridLines": true
221
+ },
222
+ "legend": {
223
+ "position": "right",
224
+ "label": "Categories",
225
+ "colorCode": "Category"
226
+ },
227
+ "visual": {
228
+ "border": true,
229
+ "accent": true,
230
+ "background": true
231
+ },
232
+ "palette": "qualitative-bold"
233
+ },
234
+
235
+ "box_plot_config": {
236
+ "type": "chart",
237
+ "title": "Box Plot Editor Test",
238
+ "showTitle": true,
239
+ "visualizationType": "Box Plot",
240
+ "theme": "theme-green",
241
+ "fontSize": "medium",
242
+ "orientation": "vertical",
243
+ "xAxis": {
244
+ "type": "categorical",
245
+ "dataKey": "Group_Category",
246
+ "label": "Groups",
247
+ "size": 75
248
+ },
249
+ "yAxis": {
250
+ "dataKey": "Value",
251
+ "label": "Observations",
252
+ "size": 50,
253
+ "gridLines": true
254
+ },
255
+ "boxplot": {
256
+ "borders": "true",
257
+ "plotOutlierValues": false,
258
+ "plotNonOutlierValues": true,
259
+ "labels": {
260
+ "q1": "Lower Quartile",
261
+ "q3": "Upper Quartile",
262
+ "minimum": "Minimum",
263
+ "maximum": "Maximum",
264
+ "mean": "Mean",
265
+ "median": "Median"
266
+ }
267
+ },
268
+ "legend": {
269
+ "position": "right"
270
+ },
271
+ "visual": {
272
+ "border": true,
273
+ "accent": true,
274
+ "background": true
275
+ },
276
+ "palette": "qualitative1"
277
+ },
278
+
279
+ "sankey_config": {
280
+ "type": "chart",
281
+ "title": "Sankey Chart Editor Test",
282
+ "showTitle": true,
283
+ "visualizationType": "Sankey",
284
+ "theme": "theme-purple",
285
+ "fontSize": "medium",
286
+ "sankey": {
287
+ "title": {
288
+ "defaultColor": "black"
289
+ },
290
+ "iterations": 1,
291
+ "rxValue": 0.9,
292
+ "overallSize": {
293
+ "width": 900,
294
+ "height": 700
295
+ },
296
+ "margin": {
297
+ "margin_y": 25,
298
+ "margin_x": 0
299
+ },
300
+ "nodeSize": {
301
+ "nodeWidth": 26,
302
+ "nodeHeight": 40
303
+ },
304
+ "nodePadding": 55,
305
+ "nodeFontColor": "black",
306
+ "nodeColor": {
307
+ "default": "#ff8500",
308
+ "inactive": "#808080"
309
+ },
310
+ "linkColor": {
311
+ "default": "#ffc900",
312
+ "inactive": "#D3D3D3"
313
+ },
314
+ "opacity": {
315
+ "nodeOpacityDefault": 1,
316
+ "nodeOpacityInactive": 0.1,
317
+ "LinkOpacityDefault": 1,
318
+ "LinkOpacityInactive": 0.1
319
+ }
320
+ },
321
+ "visual": {
322
+ "border": true,
323
+ "accent": true,
324
+ "background": true
325
+ }
326
+ },
327
+
328
+ "forecasting_config": {
329
+ "type": "chart",
330
+ "title": "Forecasting Chart Editor Test",
331
+ "showTitle": true,
332
+ "visualizationType": "Forecasting",
333
+ "theme": "theme-teal",
334
+ "fontSize": "medium",
335
+ "orientation": "vertical",
336
+ "xAxis": {
337
+ "type": "date",
338
+ "dataKey": "Date",
339
+ "label": "Date",
340
+ "dateParseFormat": "%Y-%m-%d",
341
+ "dateDisplayFormat": "%b %Y",
342
+ "size": 50
343
+ },
344
+ "yAxis": {
345
+ "label": "Values",
346
+ "size": 50,
347
+ "gridLines": true
348
+ },
349
+ "series": [
350
+ {
351
+ "dataKey": "Actual_Value",
352
+ "type": "Line"
353
+ },
354
+ {
355
+ "dataKey": "Forecast_Value",
356
+ "type": "Line"
357
+ }
358
+ ],
359
+ "confidenceKeys": {
360
+ "lower": "Lower_CI",
361
+ "upper": "Upper_CI",
362
+ "forecastLower": "Forecast_Lower",
363
+ "forecastUpper": "Forecast_Upper"
364
+ },
365
+ "legend": {
366
+ "position": "bottom",
367
+ "label": "Forecasting Data"
368
+ },
369
+ "visual": {
370
+ "border": true,
371
+ "accent": true,
372
+ "background": true
373
+ },
374
+ "palette": "qualitative-bold"
375
+ }
376
+ }