@cdc/chart 4.24.12 → 4.25.2-25

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 (84) hide show
  1. package/dist/cdcchart.js +79900 -78999
  2. package/examples/feature/boxplot/boxplot.json +2 -157
  3. package/examples/feature/boxplot/testing.csv +23 -38
  4. package/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json +579 -49
  5. package/examples/private/ehdi.json +29939 -0
  6. package/examples/private/line-issue.json +497 -0
  7. package/examples/private/not-loading.json +360 -0
  8. package/index.html +11 -15
  9. package/package.json +2 -2
  10. package/src/CdcChart.tsx +92 -1512
  11. package/src/CdcChartComponent.tsx +1113 -0
  12. package/src/ConfigContext.tsx +6 -1
  13. package/src/_stories/Chart.Anchors.stories.tsx +1 -1
  14. package/src/_stories/Chart.CustomColors.stories.tsx +1 -1
  15. package/src/_stories/Chart.DynamicSeries.stories.tsx +17 -2
  16. package/src/_stories/Chart.Filters.stories.tsx +19 -0
  17. package/src/_stories/Chart.Legend.Gradient.stories.tsx +2 -2
  18. package/src/_stories/Chart.ScatterPlot.stories.tsx +19 -0
  19. package/src/_stories/Chart.tooltip.stories.tsx +1 -2
  20. package/src/_stories/ChartAnnotation.stories.tsx +1 -1
  21. package/src/_stories/ChartAxisLabels.stories.tsx +1 -1
  22. package/src/_stories/ChartAxisTitles.stories.tsx +1 -1
  23. package/src/_stories/ChartEditor.stories.tsx +1 -1
  24. package/src/_stories/ChartLine.Suppression.stories.tsx +1 -1
  25. package/src/_stories/ChartLine.Symbols.stories.tsx +18 -0
  26. package/src/_stories/ChartPrefixSuffix.stories.tsx +1 -1
  27. package/src/_stories/_mock/line_chart_symbols.json +437 -0
  28. package/src/_stories/_mock/scatterplot-image-download.json +1244 -0
  29. package/src/components/Annotations/components/AnnotationDraggable.tsx +3 -11
  30. package/src/components/Annotations/components/AnnotationDropdown.tsx +3 -3
  31. package/src/components/Axis/Categorical.Axis.tsx +3 -4
  32. package/src/components/BarChart/components/BarChart.Horizontal.tsx +14 -5
  33. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +10 -4
  34. package/src/components/BarChart/components/BarChart.Vertical.tsx +5 -7
  35. package/src/components/BarChart/components/BarChart.jsx +24 -4
  36. package/src/components/BarChart/components/context.tsx +1 -0
  37. package/src/components/BoxPlot/BoxPlot.tsx +34 -32
  38. package/src/components/BoxPlot/helpers/index.ts +108 -18
  39. package/src/components/BrushChart.tsx +44 -24
  40. package/src/components/DeviationBar.jsx +2 -6
  41. package/src/components/EditorPanel/EditorPanel.tsx +64 -8
  42. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +4 -0
  43. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +3 -1
  44. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +44 -7
  45. package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts +6 -1
  46. package/src/components/ForestPlot/ForestPlot.tsx +176 -26
  47. package/src/components/Legend/Legend.Component.tsx +29 -38
  48. package/src/components/Legend/Legend.Suppression.tsx +3 -5
  49. package/src/components/Legend/Legend.tsx +2 -2
  50. package/src/components/Legend/LegendLine.Shape.tsx +51 -0
  51. package/src/components/Legend/helpers/createFormatLabels.tsx +29 -26
  52. package/src/components/Legend/helpers/getLegendClasses.ts +20 -38
  53. package/src/components/Legend/helpers/index.ts +22 -9
  54. package/src/components/Legend/tests/getLegendClasses.test.ts +3 -20
  55. package/src/components/LineChart/components/LineChart.Circle.tsx +104 -94
  56. package/src/components/LineChart/index.tsx +6 -2
  57. package/src/components/LinearChart.tsx +77 -43
  58. package/src/components/PairedBarChart.jsx +2 -9
  59. package/src/components/ZoomBrush.tsx +5 -7
  60. package/src/data/initial-state.js +6 -3
  61. package/src/helpers/getBoxPlotConfig.ts +68 -0
  62. package/src/helpers/getColorScale.ts +24 -0
  63. package/src/helpers/getComboChartConfig.ts +42 -0
  64. package/src/helpers/getExcludedData.ts +37 -0
  65. package/src/helpers/getTopAxis.ts +7 -0
  66. package/src/helpers/isConvertLineToBarGraph.ts +10 -3
  67. package/src/hooks/useBarChart.ts +40 -13
  68. package/src/hooks/{useHighlightedBars.js → useHighlightedBars.ts} +2 -1
  69. package/src/hooks/useIntersectionObserver.ts +37 -0
  70. package/src/hooks/useMinMax.ts +11 -8
  71. package/src/hooks/useReduceData.ts +1 -1
  72. package/src/hooks/useScales.ts +10 -0
  73. package/src/hooks/useTooltip.tsx +21 -2
  74. package/src/index.jsx +1 -0
  75. package/src/scss/DataTable.scss +0 -5
  76. package/src/scss/main.scss +31 -116
  77. package/src/store/chart.actions.ts +40 -0
  78. package/src/store/chart.reducer.ts +83 -0
  79. package/src/types/ChartConfig.ts +6 -3
  80. package/src/types/ChartContext.ts +1 -3
  81. package/src/helpers/getQuartiles.ts +0 -27
  82. package/src/hooks/useColorScale.ts +0 -50
  83. package/src/hooks/useIntersectionObserver.jsx +0 -29
  84. package/src/hooks/useTopAxis.js +0 -6
@@ -0,0 +1,497 @@
1
+ {
2
+ "annotations": [],
3
+ "type": "chart",
4
+ "debugSvg": false,
5
+ "chartMessage": {
6
+ "noData": "No Data Available"
7
+ },
8
+ "title": "",
9
+ "showTitle": false,
10
+ "showDownloadMediaButton": false,
11
+ "theme": "theme-blue",
12
+ "animate": false,
13
+ "fontSize": "medium",
14
+ "lineDatapointStyle": "hover",
15
+ "lineDatapointColor": "Same as Line",
16
+ "barHasBorder": "false",
17
+ "isLollipopChart": false,
18
+ "lollipopShape": "circle",
19
+ "lollipopColorStyle": "two-tone",
20
+ "visualizationSubType": "regular",
21
+ "barStyle": "flat",
22
+ "roundingStyle": "standard",
23
+ "tipRounding": "top",
24
+ "isResponsiveTicks": true,
25
+ "general": {
26
+ "annotationDropdownText": "Annotations",
27
+ "showDownloadButton": false,
28
+ "showMissingDataLabel": false,
29
+ "showSuppressedSymbol": true,
30
+ "showZeroValueData": false,
31
+ "hideNullValue": 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": "75",
44
+ "gridLines": false,
45
+ "enablePadding": false,
46
+ "min": "0.1",
47
+ "max": "3",
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": 10,
61
+ "tickRotation": 0,
62
+ "anchors": [],
63
+ "shoMissingDataLabel": true,
64
+ "showMissingDataLine": true,
65
+ "categories": [],
66
+ "label": "Reported cases per 100,000 Population",
67
+ "type": "linear"
68
+ },
69
+ "boxplot": {
70
+ "plots": [],
71
+ "borders": "true",
72
+ "plotOutlierValues": false,
73
+ "plotNonOutlierValues": true,
74
+ "labels": {
75
+ "q1": "Lower Quartile",
76
+ "q2": "q2",
77
+ "q3": "Upper Quartile",
78
+ "q4": "q4",
79
+ "minimum": "Minimum",
80
+ "maximum": "Maximum",
81
+ "mean": "Mean",
82
+ "median": "Median",
83
+ "sd": "Standard Deviation",
84
+ "iqr": "Interquartile Range",
85
+ "count": "Count",
86
+ "outliers": "Outliers",
87
+ "values": "Values",
88
+ "lowerBounds": "Lower Bounds",
89
+ "upperBounds": "Upper Bounds"
90
+ }
91
+ },
92
+ "topAxis": {
93
+ "hasLine": false
94
+ },
95
+ "isLegendValue": false,
96
+ "barThickness": 0.35,
97
+ "barHeight": 25,
98
+ "barSpace": 15,
99
+ "heights": {
100
+ "vertical": 300,
101
+ "horizontal": 750
102
+ },
103
+ "xAxis": {
104
+ "sortDates": false,
105
+ "anchors": [],
106
+ "type": "categorical",
107
+ "showTargetLabel": true,
108
+ "targetLabel": "Target",
109
+ "hideAxis": false,
110
+ "hideLabel": false,
111
+ "hideTicks": false,
112
+ "size": 75,
113
+ "tickRotation": 0,
114
+ "min": "",
115
+ "max": "",
116
+ "labelColor": "#333",
117
+ "tickLabelColor": "#333",
118
+ "tickColor": "#333",
119
+ "numTicks": "",
120
+ "labelOffset": 0,
121
+ "axisPadding": 200,
122
+ "target": 0,
123
+ "maxTickRotation": 0,
124
+ "padding": 5,
125
+ "showYearsOnce": false,
126
+ "sortByRecentDate": false,
127
+ "dataKey": "Year",
128
+ "label": "Year",
129
+ "manual": true,
130
+ "axisBBox": 52.939998626708984,
131
+ "tickWidthMax": 41
132
+ },
133
+ "table": {
134
+ "label": "Data Table",
135
+ "expanded": true,
136
+ "limitHeight": false,
137
+ "height": "",
138
+ "caption": "",
139
+ "showDownloadUrl": false,
140
+ "showDataTableLink": true,
141
+ "showDownloadLinkBelow": true,
142
+ "indexLabel": "",
143
+ "download": true,
144
+ "showVertical": false,
145
+ "dateDisplayFormat": "",
146
+ "showMissingDataLabel": true,
147
+ "showSuppressedSymbol": true,
148
+ "show": true
149
+ },
150
+ "orientation": "vertical",
151
+ "color": "pinkpurple",
152
+ "columns": {},
153
+ "legend": {
154
+ "hide": false,
155
+ "behavior": "isolate",
156
+ "axisAlign": true,
157
+ "singleRow": true,
158
+ "colorCode": "",
159
+ "reverseLabelOrder": false,
160
+ "description": "",
161
+ "dynamicLegend": false,
162
+ "dynamicLegendDefaultText": "Show All",
163
+ "dynamicLegendItemLimit": 5,
164
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
165
+ "dynamicLegendChartMessage": "Select Options from the Legend",
166
+ "label": "",
167
+ "lineMode": false,
168
+ "verticalSorted": false,
169
+ "highlightOnHover": false,
170
+ "hideSuppressedLabels": false,
171
+ "hideSuppressionLink": false,
172
+ "seriesHighlight": [],
173
+ "style": "boxes",
174
+ "subStyle": "linear blocks",
175
+ "tickRotation": "",
176
+ "hideBorder": {
177
+ "side": false,
178
+ "topBottom": true
179
+ },
180
+ "position": "top"
181
+ },
182
+ "brush": {
183
+ "height": 25,
184
+ "active": false
185
+ },
186
+ "exclusions": {
187
+ "active": false,
188
+ "keys": []
189
+ },
190
+ "palette": "qualitative-bold",
191
+ "isPaletteReversed": false,
192
+ "twoColor": {
193
+ "palette": "monochrome-1",
194
+ "isPaletteReversed": false
195
+ },
196
+ "labels": false,
197
+ "dataFormat": {
198
+ "commas": false,
199
+ "prefix": "",
200
+ "suffix": "",
201
+ "abbreviated": false,
202
+ "bottomSuffix": "",
203
+ "bottomPrefix": "",
204
+ "bottomAbbreviated": false,
205
+ "roundTo": "1"
206
+ },
207
+ "confidenceKeys": {},
208
+ "visual": {
209
+ "border": true,
210
+ "accent": true,
211
+ "background": true,
212
+ "verticalHoverLine": false,
213
+ "horizontalHoverLine": false
214
+ },
215
+ "useLogScale": false,
216
+ "filterBehavior": "Filter Change",
217
+ "highlightedBarValues": [],
218
+ "series": [
219
+ {
220
+ "dataKey": "American Indian/Alaska Native",
221
+ "type": "Line",
222
+ "axis": "Left",
223
+ "tooltip": true
224
+ },
225
+ {
226
+ "dataKey": "Asian/Pacific Islander",
227
+ "type": "Line",
228
+ "axis": "Left",
229
+ "tooltip": true
230
+ },
231
+ {
232
+ "dataKey": "Black, non-Hispanic",
233
+ "type": "Line",
234
+ "axis": "Left",
235
+ "tooltip": true
236
+ },
237
+ {
238
+ "dataKey": "White, non-Hispanic",
239
+ "type": "Line",
240
+ "axis": "Left",
241
+ "tooltip": true
242
+ },
243
+ {
244
+ "dataKey": "Hispanic",
245
+ "type": "Line",
246
+ "axis": "Left",
247
+ "tooltip": true
248
+ }
249
+ ],
250
+ "tooltips": {
251
+ "opacity": 90,
252
+ "singleSeries": false,
253
+ "dateDisplayFormat": ""
254
+ },
255
+ "forestPlot": {
256
+ "startAt": 0,
257
+ "colors": {
258
+ "line": "",
259
+ "shape": ""
260
+ },
261
+ "lineOfNoEffect": {
262
+ "show": true
263
+ },
264
+ "type": "",
265
+ "pooledResult": {
266
+ "diamondHeight": 5,
267
+ "column": ""
268
+ },
269
+ "estimateField": "",
270
+ "estimateRadius": "",
271
+ "shape": "square",
272
+ "rowHeight": 20,
273
+ "description": {
274
+ "show": true,
275
+ "text": "description",
276
+ "location": 0
277
+ },
278
+ "result": {
279
+ "show": true,
280
+ "text": "result",
281
+ "location": 100
282
+ },
283
+ "radius": {
284
+ "min": 2,
285
+ "max": 10,
286
+ "scalingColumn": ""
287
+ },
288
+ "regression": {
289
+ "lower": 0,
290
+ "upper": 0,
291
+ "estimateField": 0
292
+ },
293
+ "leftWidthOffset": 0,
294
+ "rightWidthOffset": 0,
295
+ "showZeroLine": false,
296
+ "leftLabel": "",
297
+ "rightLabel": ""
298
+ },
299
+ "area": {
300
+ "isStacked": false
301
+ },
302
+ "sankey": {
303
+ "title": {
304
+ "defaultColor": "black"
305
+ },
306
+ "iterations": 1,
307
+ "rxValue": 0.9,
308
+ "overallSize": {
309
+ "width": 900,
310
+ "height": 700
311
+ },
312
+ "margin": {
313
+ "margin_y": 25,
314
+ "margin_x": 0
315
+ },
316
+ "nodeSize": {
317
+ "nodeWidth": 26,
318
+ "nodeHeight": 40
319
+ },
320
+ "nodePadding": 55,
321
+ "nodeFontColor": "black",
322
+ "nodeColor": {
323
+ "default": "#ff8500",
324
+ "inactive": "#808080"
325
+ },
326
+ "linkColor": {
327
+ "default": "#ffc900",
328
+ "inactive": "#D3D3D3"
329
+ },
330
+ "opacity": {
331
+ "nodeOpacityDefault": 1,
332
+ "nodeOpacityInactive": 0.1,
333
+ "LinkOpacityDefault": 1,
334
+ "LinkOpacityInactive": 0.1
335
+ },
336
+ "storyNodeFontColor": "#006778",
337
+ "storyNodeText": [],
338
+ "nodeValueStyle": {
339
+ "textBefore": "(",
340
+ "textAfter": ")"
341
+ },
342
+ "data": []
343
+ },
344
+ "errors": [],
345
+ "currentViewport": "lg",
346
+ "id": 4,
347
+ "category": "Charts",
348
+ "label": "Line",
349
+ "subType": "Line",
350
+ "icon": {
351
+ "key": null,
352
+ "ref": null,
353
+ "props": {},
354
+ "_owner": null
355
+ },
356
+ "content": "Present one or more data trends over time.",
357
+ "visualizationType": "Line",
358
+ "datasets": {},
359
+ "activeVizButtonID": 4,
360
+ "data": [
361
+ {
362
+ "Year": "2007",
363
+ "American Indian/Alaska Native": "1.4",
364
+ "Asian/Pacific Islander": "0.9",
365
+ "Black, non-Hispanic": "2.3",
366
+ "White, non-Hispanic": "1",
367
+ "Hispanic": "1"
368
+ },
369
+ {
370
+ "Year": "2008",
371
+ "American Indian/Alaska Native": "1.8",
372
+ "Asian/Pacific Islander": "0.8",
373
+ "Black, non-Hispanic": "2.2",
374
+ "White, non-Hispanic": "0.9",
375
+ "Hispanic": "0.8"
376
+ },
377
+ {
378
+ "Year": "2009",
379
+ "American Indian/Alaska Native": "1",
380
+ "Asian/Pacific Islander": "0.7",
381
+ "Black, non-Hispanic": "1.7",
382
+ "White, non-Hispanic": "0.8",
383
+ "Hispanic": "0.7"
384
+ },
385
+ {
386
+ "Year": "2010",
387
+ "American Indian/Alaska Native": "1.1",
388
+ "Asian/Pacific Islander": "0.6",
389
+ "Black, non-Hispanic": "1.7",
390
+ "White, non-Hispanic": "0.8",
391
+ "Hispanic": "0.6"
392
+ },
393
+ {
394
+ "Year": "2011",
395
+ "American Indian/Alaska Native": "0.5",
396
+ "Asian/Pacific Islander": "0.4",
397
+ "Black, non-Hispanic": "1.4",
398
+ "White, non-Hispanic": "0.8",
399
+ "Hispanic": "0.4"
400
+ },
401
+ {
402
+ "Year": "2012",
403
+ "American Indian/Alaska Native": "0.7",
404
+ "Asian/Pacific Islander": "0.4",
405
+ "Black, non-Hispanic": "1.1",
406
+ "White, non-Hispanic": "0.8",
407
+ "Hispanic": "0.4"
408
+ },
409
+ {
410
+ "Year": "2013",
411
+ "American Indian/Alaska Native": "0.7",
412
+ "Asian/Pacific Islander": "0.3",
413
+ "Black, non-Hispanic": "0.9",
414
+ "White, non-Hispanic": "0.9",
415
+ "Hispanic": "0.4"
416
+ },
417
+ {
418
+ "Year": "2014",
419
+ "American Indian/Alaska Native": "0.8",
420
+ "Asian/Pacific Islander": "0.3",
421
+ "Black, non-Hispanic": "0.8",
422
+ "White, non-Hispanic": "0.9",
423
+ "Hispanic": "0.3"
424
+ },
425
+ {
426
+ "Year": "2015",
427
+ "American Indian/Alaska Native": "0.7",
428
+ "Asian/Pacific Islander": "0.4",
429
+ "Black, non-Hispanic": "1",
430
+ "White, non-Hispanic": "1.1",
431
+ "Hispanic": "0.3"
432
+ },
433
+ {
434
+ "Year": "2016",
435
+ "American Indian/Alaska Native": "0.5",
436
+ "Asian/Pacific Islander": "0.3",
437
+ "Black, non-Hispanic": "0.9",
438
+ "White, non-Hispanic": "1",
439
+ "Hispanic": "0.3"
440
+ },
441
+ {
442
+ "Year": "2017",
443
+ "American Indian/Alaska Native": "0.7",
444
+ "Asian/Pacific Islander": "0.3",
445
+ "Black, non-Hispanic": "1",
446
+ "White, non-Hispanic": "1.1",
447
+ "Hispanic": "0.3"
448
+ },
449
+ {
450
+ "Year": "2018",
451
+ "American Indian/Alaska Native": "0.9",
452
+ "Asian/Pacific Islander": "0.3",
453
+ "Black, non-Hispanic": "1",
454
+ "White, non-Hispanic": "1",
455
+ "Hispanic": "0.4"
456
+ },
457
+ {
458
+ "Year": "2019",
459
+ "American Indian/Alaska Native": "0.6",
460
+ "Asian/Pacific Islander": "0.3",
461
+ "Black, non-Hispanic": "0.9",
462
+ "White, non-Hispanic": "1",
463
+ "Hispanic": "0.4"
464
+ },
465
+ {
466
+ "Year": "2020",
467
+ "American Indian/Alaska Native": "0.4",
468
+ "Asian/Pacific Islander": "0.2",
469
+ "Black, non-Hispanic": "0.7",
470
+ "White, non-Hispanic": "0.7",
471
+ "Hispanic": "0.3"
472
+ },
473
+ {
474
+ "Year": "2021",
475
+ "American Indian/Alaska Native": "0.4",
476
+ "Asian/Pacific Islander": "0.2",
477
+ "Black, non-Hispanic": "0.9",
478
+ "White, non-Hispanic": "0.6",
479
+ "Hispanic": "0.4"
480
+ },
481
+ {
482
+ "Year": "2022",
483
+ "American Indian/Alaska Native": "0.4",
484
+ "Asian/Pacific Islander": "0.3",
485
+ "Black, non-Hispanic": "1",
486
+ "White, non-Hispanic": "0.6",
487
+ "Hispanic": "0.4"
488
+ }
489
+ ],
490
+ "dataFileName": "chart_data 2-6.csv",
491
+ "dataFileSourceType": "file",
492
+ "dataDescription": {
493
+ "horizontal": true
494
+ },
495
+ "version": "4.24.10",
496
+ "dynamicMarginTop": 0
497
+ }