@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
@@ -0,0 +1,451 @@
1
+ {
2
+ "annotations": [],
3
+ "type": "chart",
4
+ "debugSvg": false,
5
+ "chartMessage": {
6
+ "noData": "No Data Available"
7
+ },
8
+ "title": "Combo Bar-Area Chart",
9
+ "showTitle": true,
10
+ "showDownloadMediaButton": false,
11
+ "theme": "theme-slate",
12
+ "animate": false,
13
+ "fontSize": "medium",
14
+ "lineDatapointStyle": "hover",
15
+ "lineDatapointColor": "Same as Line",
16
+ "barHasBorder": "true",
17
+ "isLollipopChart": false,
18
+ "lollipopShape": "circle",
19
+ "lollipopColorStyle": "two-tone",
20
+ "visualizationSubType": "regular",
21
+ "barStyle": "",
22
+ "roundingStyle": "standard",
23
+ "tipRounding": "top",
24
+ "isResponsiveTicks": false,
25
+ "general": {
26
+ "annotationDropdownText": "Annotations",
27
+ "showMissingDataLabel": true,
28
+ "showSuppressedSymbol": true,
29
+ "showZeroValueData": true,
30
+ "hideNullValue": true,
31
+ "showZeroValueDataLabel": true
32
+ },
33
+ "padding": {
34
+ "left": 5,
35
+ "right": 5
36
+ },
37
+ "preliminaryData": [],
38
+ "yAxis": {
39
+ "hideAxis": false,
40
+ "displayNumbersOnBar": false,
41
+ "hideLabel": false,
42
+ "hideTicks": false,
43
+ "size": "59",
44
+ "gridLines": true,
45
+ "enablePadding": false,
46
+ "min": "",
47
+ "max": "160",
48
+ "labelColor": "#333",
49
+ "tickLabelColor": "#333",
50
+ "tickColor": "#333",
51
+ "rightHideAxis": true,
52
+ "rightAxisSize": "0",
53
+ "rightLabel": "",
54
+ "rightLabelOffsetSize": 0,
55
+ "rightAxisLabelColor": "#333",
56
+ "rightAxisTickLabelColor": "#333",
57
+ "rightAxisTickColor": "#333",
58
+ "numTicks": "6",
59
+ "axisPadding": 0,
60
+ "scalePadding": "",
61
+ "tickRotation": 0,
62
+ "anchors": [],
63
+ "shoMissingDataLabel": true,
64
+ "showMissingDataLine": true,
65
+ "categories": [],
66
+ "isLegendValue": false,
67
+ "label": "Y-Axis Label Example",
68
+ "maxValue": "160",
69
+ "rightNumTicks": "",
70
+ "rightHideTicks": true,
71
+ "rightHideLabel": true
72
+ },
73
+ "boxplot": {
74
+ "plots": [],
75
+ "borders": "true",
76
+ "plotOutlierValues": false,
77
+ "plotNonOutlierValues": true,
78
+ "labels": {
79
+ "q1": "Lower Quartile",
80
+ "q2": "q2",
81
+ "q3": "Upper Quartile",
82
+ "q4": "q4",
83
+ "minimum": "Minimum",
84
+ "maximum": "Maximum",
85
+ "mean": "Mean",
86
+ "median": "Median",
87
+ "sd": "Standard Deviation",
88
+ "iqr": "Interquartile Range",
89
+ "total": "Total",
90
+ "outliers": "Outliers",
91
+ "values": "Values",
92
+ "lowerBounds": "Lower Bounds",
93
+ "upperBounds": "Upper Bounds",
94
+ "count": "Count"
95
+ },
96
+ "firstQuartilePercentage": 25,
97
+ "thirdQuartilePercentage": 75,
98
+ "boxWidthPercentage": 40,
99
+ "legend": {
100
+ "showHowToReadText": false,
101
+ "howToReadText": ""
102
+ }
103
+ },
104
+ "topAxis": {
105
+ "hasLine": false
106
+ },
107
+ "isLegendValue": false,
108
+ "barThickness": "0.55",
109
+ "barHeight": 25,
110
+ "barSpace": 15,
111
+ "heights": {
112
+ "vertical": "200",
113
+ "horizontal": 750
114
+ },
115
+ "xAxis": {
116
+ "sortDates": false,
117
+ "anchors": [],
118
+ "type": "date",
119
+ "showTargetLabel": true,
120
+ "targetLabel": "Target",
121
+ "hideAxis": false,
122
+ "hideLabel": false,
123
+ "hideTicks": false,
124
+ "size": "0",
125
+ "tickRotation": "25",
126
+ "min": "",
127
+ "max": "",
128
+ "labelColor": "#333",
129
+ "tickLabelColor": "#333",
130
+ "tickColor": "#333",
131
+ "numTicks": "",
132
+ "labelOffset": 0,
133
+ "axisPadding": 0,
134
+ "target": 0,
135
+ "maxTickRotation": 0,
136
+ "padding": 6,
137
+ "showYearsOnce": false,
138
+ "sortByRecentDate": false,
139
+ "showSuppressedSymbol": true,
140
+ "showSuppressedLine": true,
141
+ "isLegendValue": false,
142
+ "dataKey": "Date",
143
+ "label": "X-Axis Example Label",
144
+ "dateParseFormat": "%m/%d/%Y",
145
+ "dateDisplayFormat": "%m/%Y",
146
+ "tickWidthMax": 86,
147
+ "axisBBox": 96.67210388183594
148
+ },
149
+ "table": {
150
+ "label": "Data Table",
151
+ "expanded": false,
152
+ "limitHeight": false,
153
+ "height": "",
154
+ "caption": "",
155
+ "showDownloadUrl": false,
156
+ "showDataTableLink": true,
157
+ "showDownloadLinkBelow": true,
158
+ "indexLabel": "Date",
159
+ "download": false,
160
+ "showVertical": true,
161
+ "dateDisplayFormat": "",
162
+ "showMissingDataLabel": true,
163
+ "showSuppressedSymbol": true,
164
+ "show": true
165
+ },
166
+ "orientation": "vertical",
167
+ "color": "pinkpurple",
168
+ "columns": {},
169
+ "legend": {
170
+ "hide": false,
171
+ "behavior": "highlight",
172
+ "axisAlign": true,
173
+ "singleRow": false,
174
+ "colorCode": "",
175
+ "reverseLabelOrder": false,
176
+ "description": "",
177
+ "dynamicLegend": false,
178
+ "dynamicLegendDefaultText": "Show All",
179
+ "dynamicLegendItemLimit": 5,
180
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
181
+ "dynamicLegendChartMessage": "Select Options from the Legend",
182
+ "label": "Data Type",
183
+ "lineMode": false,
184
+ "verticalSorted": false,
185
+ "highlightOnHover": false,
186
+ "hideSuppressedLabels": false,
187
+ "hideSuppressionLink": false,
188
+ "seriesHighlight": [],
189
+ "style": "circles",
190
+ "subStyle": "linear blocks",
191
+ "groupBy": "",
192
+ "shape": "circle",
193
+ "tickRotation": "",
194
+ "order": "dataColumn",
195
+ "hideBorder": {
196
+ "side": false,
197
+ "topBottom": true
198
+ },
199
+ "position": "right",
200
+ "orderedValues": [],
201
+ "unified": true
202
+ },
203
+ "brush": {
204
+ "height": 25,
205
+ "active": false
206
+ },
207
+ "exclusions": {
208
+ "active": false,
209
+ "keys": []
210
+ },
211
+ "palette": "qualitative1",
212
+ "isPaletteReversed": false,
213
+ "twoColor": {
214
+ "palette": "monochrome-1",
215
+ "isPaletteReversed": false
216
+ },
217
+ "labels": false,
218
+ "dataFormat": {
219
+ "commas": false,
220
+ "prefix": "",
221
+ "suffix": "",
222
+ "abbreviated": false,
223
+ "bottomSuffix": "",
224
+ "bottomPrefix": "",
225
+ "bottomAbbreviated": false
226
+ },
227
+ "confidenceKeys": {},
228
+ "visual": {
229
+ "border": true,
230
+ "accent": true,
231
+ "background": true,
232
+ "verticalHoverLine": false,
233
+ "horizontalHoverLine": false,
234
+ "lineDatapointSymbol": "none",
235
+ "maximumShapeAmount": 7
236
+ },
237
+ "useLogScale": false,
238
+ "filterBehavior": "Filter Change",
239
+ "highlightedBarValues": [],
240
+ "series": [
241
+ {
242
+ "dataKey": "Data 1",
243
+ "type": "Bar",
244
+ "tooltip": true,
245
+ "axis": "Left"
246
+ },
247
+ {
248
+ "dataKey": "Data 2",
249
+ "type": "Bar",
250
+ "tooltip": true,
251
+ "axis": "Left"
252
+ },
253
+ {
254
+ "dataKey": "Data 3",
255
+ "type": "Bar",
256
+ "tooltip": true,
257
+ "axis": "Left"
258
+ },
259
+ {
260
+ "dataKey": "Data 4",
261
+ "type": "Bar",
262
+ "tooltip": true,
263
+ "axis": "Left"
264
+ },
265
+ {
266
+ "dataKey": "Monthly-Goal",
267
+ "type": "Area Chart",
268
+ "axis": "Left",
269
+ "tooltip": true,
270
+ "lineType": "curveLinear"
271
+ }
272
+ ],
273
+ "tooltips": {
274
+ "opacity": 90,
275
+ "singleSeries": false,
276
+ "dateDisplayFormat": ""
277
+ },
278
+ "forestPlot": {
279
+ "startAt": 0,
280
+ "colors": {
281
+ "line": "",
282
+ "shape": ""
283
+ },
284
+ "lineOfNoEffect": {
285
+ "show": true
286
+ },
287
+ "type": "",
288
+ "pooledResult": {
289
+ "diamondHeight": 5,
290
+ "column": ""
291
+ },
292
+ "estimateField": "",
293
+ "estimateRadius": "",
294
+ "shape": "square",
295
+ "rowHeight": 20,
296
+ "description": {
297
+ "show": true,
298
+ "text": "description",
299
+ "location": 0
300
+ },
301
+ "result": {
302
+ "show": true,
303
+ "text": "result",
304
+ "location": 100
305
+ },
306
+ "radius": {
307
+ "min": 2,
308
+ "max": 10,
309
+ "scalingColumn": ""
310
+ },
311
+ "regression": {
312
+ "lower": 0,
313
+ "upper": 0,
314
+ "estimateField": 0
315
+ },
316
+ "leftWidthOffset": 0,
317
+ "rightWidthOffset": 0,
318
+ "showZeroLine": false,
319
+ "leftLabel": "",
320
+ "rightLabel": ""
321
+ },
322
+ "area": {
323
+ "isStacked": false
324
+ },
325
+ "sankey": {
326
+ "title": {
327
+ "defaultColor": "black"
328
+ },
329
+ "iterations": 1,
330
+ "rxValue": 0.9,
331
+ "overallSize": {
332
+ "width": 900,
333
+ "height": 700
334
+ },
335
+ "margin": {
336
+ "margin_y": 25,
337
+ "margin_x": 0
338
+ },
339
+ "nodeSize": {
340
+ "nodeWidth": 26,
341
+ "nodeHeight": 40
342
+ },
343
+ "nodePadding": 55,
344
+ "nodeFontColor": "black",
345
+ "nodeColor": {
346
+ "default": "#ff8500",
347
+ "inactive": "#808080"
348
+ },
349
+ "linkColor": {
350
+ "default": "#ffc900",
351
+ "inactive": "#D3D3D3"
352
+ },
353
+ "opacity": {
354
+ "nodeOpacityDefault": 1,
355
+ "nodeOpacityInactive": 0.1,
356
+ "LinkOpacityDefault": 1,
357
+ "LinkOpacityInactive": 0.1
358
+ },
359
+ "storyNodeFontColor": "#006778",
360
+ "storyNodeText": [],
361
+ "nodeValueStyle": {
362
+ "textBefore": "(",
363
+ "textAfter": ")"
364
+ },
365
+ "data": []
366
+ },
367
+ "height": "332",
368
+ "data": [
369
+ {
370
+ "Date": "1/15/2016",
371
+ "Data 1": "90",
372
+ "Data 2": "110",
373
+ "Data 3": "100",
374
+ "Data 4": "90",
375
+ "Monthly-Goal": "100"
376
+ },
377
+ {
378
+ "Date": "2/15/2016",
379
+ "Data 1": "100",
380
+ "Data 2": "110",
381
+ "Data 3": "100",
382
+ "Data 4": "100",
383
+ "Monthly-Goal": "100"
384
+ },
385
+ {
386
+ "Date": "3/15/2016",
387
+ "Data 1": "80",
388
+ "Data 2": "90",
389
+ "Data 3": "100",
390
+ "Data 4": "120",
391
+ "Monthly-Goal": "110"
392
+ },
393
+ {
394
+ "Date": "4/15/2016",
395
+ "Data 1": "80",
396
+ "Data 2": "90",
397
+ "Data 3": "110",
398
+ "Data 4": "120",
399
+ "Monthly-Goal": "110"
400
+ },
401
+ {
402
+ "Date": "5/15/2016",
403
+ "Data 1": "70",
404
+ "Data 2": "90",
405
+ "Data 3": "110",
406
+ "Data 4": "130",
407
+ "Monthly-Goal": "120"
408
+ },
409
+ {
410
+ "Date": "6/15/2016",
411
+ "Data 1": "100",
412
+ "Data 2": "120",
413
+ "Data 3": "120",
414
+ "Data 4": "130",
415
+ "Monthly-Goal": "120"
416
+ },
417
+ {
418
+ "Date": "7/15/2016",
419
+ "Data 1": "110",
420
+ "Data 2": "140",
421
+ "Data 3": "120",
422
+ "Data 4": "130",
423
+ "Monthly-Goal": "130"
424
+ },
425
+ {
426
+ "Date": "8/15/2016",
427
+ "Data 1": "110",
428
+ "Data 2": "130",
429
+ "Data 3": "120",
430
+ "Data 4": "140",
431
+ "Monthly-Goal": "130"
432
+ },
433
+ {
434
+ "Date": "9/15/2016",
435
+ "Data 1": "120",
436
+ "Data 2": "130",
437
+ "Data 3": "120",
438
+ "Data 4": "150",
439
+ "Monthly-Goal": "140"
440
+ }
441
+ ],
442
+ "visualizationType": "Combo",
443
+ "description": "",
444
+ "validated": 4.23,
445
+ "dynamicMarginTop": 0,
446
+ "version": "4.25.4",
447
+ "filters": [],
448
+ "migrations": {
449
+ "addColorMigration": true
450
+ }
451
+ }