@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,413 @@
1
+ {
2
+ "annotations": [],
3
+ "allowLineToBarGraph": "__​undefined__",
4
+ "type": "chart",
5
+ "debugSvg": false,
6
+ "chartMessage": {
7
+ "noData": "No Data Available"
8
+ },
9
+ "title": "",
10
+ "showTitle": true,
11
+ "showDownloadMediaButton": false,
12
+ "theme": "theme-blue",
13
+ "animate": false,
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
+ "palette": {
32
+ "isReversed": true,
33
+ "version": "2.0",
34
+ "name": "sequential_bluereverse"
35
+ }
36
+ },
37
+ "padding": {
38
+ "left": 5,
39
+ "right": 5
40
+ },
41
+ "preliminaryData": [],
42
+ "yAxis": {
43
+ "hideAxis": false,
44
+ "displayNumbersOnBar": true,
45
+ "hideLabel": false,
46
+ "hideTicks": false,
47
+ "size": 50,
48
+ "gridLines": true,
49
+ "enablePadding": false,
50
+ "min": "",
51
+ "max": "",
52
+ "labelColor": "#1c1d1f",
53
+ "tickLabelColor": "#1c1d1f",
54
+ "tickColor": "#1c1d1f",
55
+ "rightHideAxis": false,
56
+ "rightAxisSize": 0,
57
+ "rightLabel": "",
58
+ "rightLabelOffsetSize": 0,
59
+ "rightAxisLabelColor": "#1c1d1f",
60
+ "rightAxisTickLabelColor": "#1c1d1f",
61
+ "rightAxisTickColor": "#1c1d1f",
62
+ "numTicks": "",
63
+ "axisPadding": 0,
64
+ "scalePadding": 10,
65
+ "tickRotation": 0,
66
+ "anchors": [],
67
+ "shoMissingDataLabel": true,
68
+ "showMissingDataLine": true,
69
+ "categories": [],
70
+ "type": "__​undefined__",
71
+ "labelPlacement": "On Date/Category Axis"
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
+ "count": "Count",
90
+ "outliers": "Outliers",
91
+ "values": "Values",
92
+ "lowerBounds": "Lower Bounds",
93
+ "upperBounds": "Upper Bounds"
94
+ }
95
+ },
96
+ "topAxis": {
97
+ "hasLine": false
98
+ },
99
+ "isLegendValue": false,
100
+ "barThickness": "0.37",
101
+ "barHeight": 45,
102
+ "barSpace": 30,
103
+ "heights": {
104
+ "vertical": 300,
105
+ "horizontal": 200
106
+ },
107
+ "xAxis": {
108
+ "sortDates": false,
109
+ "anchors": [],
110
+ "type": "categorical",
111
+ "showTargetLabel": true,
112
+ "targetLabel": "Target",
113
+ "hideAxis": true,
114
+ "hideLabel": false,
115
+ "hideTicks": true,
116
+ "size": 75,
117
+ "tickRotation": 0,
118
+ "min": "",
119
+ "max": "",
120
+ "labelColor": "#1c1d1f",
121
+ "tickLabelColor": "#1c1d1f",
122
+ "tickColor": "#1c1d1f",
123
+ "numTicks": "",
124
+ "labelOffset": 0,
125
+ "axisPadding": 200,
126
+ "target": 0,
127
+ "maxTickRotation": 45,
128
+ "padding": 5,
129
+ "showYearsOnce": false,
130
+ "sortByRecentDate": false,
131
+ "brushActive": false,
132
+ "dataKey": "Race",
133
+ "axisBBox": 29.860000610351562,
134
+ "tickWidthMax": 29
135
+ },
136
+ "table": {
137
+ "label": "Data Table",
138
+ "expanded": true,
139
+ "limitHeight": false,
140
+ "height": "",
141
+ "caption": "",
142
+ "showDownloadUrl": false,
143
+ "showDataTableLink": true,
144
+ "showDownloadLinkBelow": true,
145
+ "indexLabel": "",
146
+ "download": true,
147
+ "showVertical": true,
148
+ "dateDisplayFormat": "",
149
+ "showMissingDataLabel": true,
150
+ "showSuppressedSymbol": true,
151
+ "collapsible": true,
152
+ "show": true
153
+ },
154
+ "orientation": "horizontal",
155
+ "columns": {},
156
+ "legend": {
157
+ "hide": true,
158
+ "behavior": "isolate",
159
+ "axisAlign": true,
160
+ "singleRow": true,
161
+ "colorCode": "",
162
+ "reverseLabelOrder": false,
163
+ "description": "",
164
+ "dynamicLegend": false,
165
+ "dynamicLegendDefaultText": "Show All",
166
+ "dynamicLegendItemLimit": 5,
167
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
168
+ "dynamicLegendChartMessage": "Select Options from the Legend",
169
+ "label": "",
170
+ "lineMode": false,
171
+ "verticalSorted": false,
172
+ "highlightOnHover": false,
173
+ "hideSuppressedLabels": false,
174
+ "hideSuppressionLink": false,
175
+ "seriesHighlight": [],
176
+ "style": "circles",
177
+ "subStyle": "linear blocks",
178
+ "groupBy": "",
179
+ "shape": "circle",
180
+ "tickRotation": "",
181
+ "order": "dataColumn",
182
+ "hideBorder": {
183
+ "side": false,
184
+ "topBottom": true
185
+ },
186
+ "position": "right",
187
+ "orderedValues": [],
188
+ "patterns": {},
189
+ "patternField": "",
190
+ "unified": true
191
+ },
192
+ "smallMultiples": {
193
+ "mode": "",
194
+ "tileColumn": "",
195
+ "tilesPerRowDesktop": 3,
196
+ "tilesPerRowMobile": 1,
197
+ "tileOrder": [],
198
+ "tileOrderType": "asc",
199
+ "tileTitles": {},
200
+ "independentYAxis": false,
201
+ "colorMode": "same",
202
+ "synchronizedTooltips": true,
203
+ "showAreaUnderLine": true
204
+ },
205
+ "exclusions": {
206
+ "active": false,
207
+ "keys": []
208
+ },
209
+ "twoColor": {
210
+ "palette": "monochrome-1",
211
+ "isPaletteReversed": false
212
+ },
213
+ "labels": false,
214
+ "dataFormat": {
215
+ "commas": false,
216
+ "prefix": "",
217
+ "suffix": "",
218
+ "abbreviated": false,
219
+ "bottomSuffix": "",
220
+ "bottomPrefix": "",
221
+ "bottomAbbreviated": false
222
+ },
223
+ "filters": [],
224
+ "confidenceKeys": {},
225
+ "visual": {
226
+ "border": true,
227
+ "accent": true,
228
+ "background": true,
229
+ "verticalHoverLine": false,
230
+ "horizontalHoverLine": false,
231
+ "lineDatapointSymbol": "none",
232
+ "maximumShapeAmount": 7
233
+ },
234
+ "useLogScale": false,
235
+ "filterBehavior": "Filter Change",
236
+ "highlightedBarValues": [],
237
+ "series": [
238
+ {
239
+ "dataKey": "Age-adjusted rate",
240
+ "type": "Bar",
241
+ "axis": "Left",
242
+ "tooltip": true
243
+ }
244
+ ],
245
+ "tooltips": {
246
+ "opacity": 90,
247
+ "singleSeries": false,
248
+ "dateDisplayFormat": ""
249
+ },
250
+ "forestPlot": {
251
+ "startAt": 0,
252
+ "colors": {
253
+ "line": "",
254
+ "shape": ""
255
+ },
256
+ "lineOfNoEffect": {
257
+ "show": true
258
+ },
259
+ "type": "",
260
+ "pooledResult": {
261
+ "diamondHeight": 5,
262
+ "column": ""
263
+ },
264
+ "estimateField": "",
265
+ "estimateRadius": "",
266
+ "shape": "square",
267
+ "rowHeight": 20,
268
+ "description": {
269
+ "show": true,
270
+ "text": "description",
271
+ "location": 0
272
+ },
273
+ "result": {
274
+ "show": true,
275
+ "text": "result",
276
+ "location": 100
277
+ },
278
+ "radius": {
279
+ "min": 2,
280
+ "max": 10,
281
+ "scalingColumn": ""
282
+ },
283
+ "regression": {
284
+ "lower": 0,
285
+ "upper": 0,
286
+ "estimateField": 0
287
+ },
288
+ "leftWidthOffset": 0,
289
+ "rightWidthOffset": 0,
290
+ "showZeroLine": false,
291
+ "leftLabel": "",
292
+ "rightLabel": ""
293
+ },
294
+ "area": {
295
+ "isStacked": false
296
+ },
297
+ "sankey": {
298
+ "title": {
299
+ "defaultColor": "black"
300
+ },
301
+ "iterations": 1,
302
+ "rxValue": 0.9,
303
+ "overallSize": {
304
+ "width": 900,
305
+ "height": 700
306
+ },
307
+ "margin": {
308
+ "margin_y": 25,
309
+ "margin_x": 0
310
+ },
311
+ "nodeSize": {
312
+ "nodeWidth": 26,
313
+ "nodeHeight": 40
314
+ },
315
+ "nodePadding": 55,
316
+ "nodeFontColor": "black",
317
+ "nodeColor": {
318
+ "default": "#ff8500",
319
+ "inactive": "#808080"
320
+ },
321
+ "linkColor": {
322
+ "default": "#ffc900",
323
+ "inactive": "#D3D3D3"
324
+ },
325
+ "opacity": {
326
+ "nodeOpacityDefault": 1,
327
+ "nodeOpacityInactive": 0.1,
328
+ "LinkOpacityDefault": 1,
329
+ "LinkOpacityInactive": 0.1
330
+ },
331
+ "storyNodeFontColor": "#006778",
332
+ "storyNodeText": [],
333
+ "nodeValueStyle": {
334
+ "textBefore": "(",
335
+ "textAfter": ")"
336
+ },
337
+ "data": []
338
+ },
339
+ "markupVariables": [],
340
+ "enableMarkupVariables": false,
341
+ "errors": [],
342
+ "currentViewport": "lg",
343
+ "id": 1,
344
+ "category": "Charts",
345
+ "label": "Bar",
346
+ "subType": "Bar",
347
+ "icon": {
348
+ "key": null,
349
+ "ref": null,
350
+ "props": {},
351
+ "_owner": null,
352
+ "_store": {}
353
+ },
354
+ "content": "Use bars to show comparisons between data categories.",
355
+ "visualizationType": "Bar",
356
+ "activeVizButtonID": 1,
357
+ "dataFileName": "valid-data-chart.csv",
358
+ "dataFileSourceType": "file",
359
+ "dataDescription": {
360
+ "horizontal": false,
361
+ "series": false
362
+ },
363
+ "version": "4.25.10",
364
+ "migrations": {
365
+ "addColorMigration": true
366
+ },
367
+ "dynamicMarginTop": 0,
368
+ "data": [
369
+ {
370
+ "Race": "Hispanic or Latino",
371
+ "Age-adjusted rate": "644.2"
372
+ },
373
+ {
374
+ "Race": "Non-Hispanic American Indian",
375
+ "Age-adjusted rate": "636.1"
376
+ },
377
+ {
378
+ "Race": "Non-Hispanic Black",
379
+ "Age-adjusted rate": "563.7"
380
+ },
381
+ {
382
+ "Race": "Non-Hispanic Asian or Pacific Islander",
383
+ "Age-adjusted rate": "202.5"
384
+ },
385
+ {
386
+ "Race": "Non-Hispanic White",
387
+ "Age-adjusted rate": "183.6"
388
+ }
389
+ ],
390
+ "formattedData": [
391
+ {
392
+ "Race": "Hispanic or Latino",
393
+ "Age-adjusted rate": "644.2"
394
+ },
395
+ {
396
+ "Race": "Non-Hispanic American Indian",
397
+ "Age-adjusted rate": "636.1"
398
+ },
399
+ {
400
+ "Race": "Non-Hispanic Black",
401
+ "Age-adjusted rate": "563.7"
402
+ },
403
+ {
404
+ "Race": "Non-Hispanic Asian or Pacific Islander",
405
+ "Age-adjusted rate": "202.5"
406
+ },
407
+ {
408
+ "Race": "Non-Hispanic White",
409
+ "Age-adjusted rate": "183.6"
410
+ }
411
+ ],
412
+ "datasets": {}
413
+ }