@cdc/chart 4.24.12 → 4.25.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 (72) hide show
  1. package/dist/cdcchart.js +79611 -78971
  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 +394 -30
  5. package/examples/private/ehdi.json +29939 -0
  6. package/examples/private/not-loading.json +360 -0
  7. package/index.html +7 -14
  8. package/package.json +2 -2
  9. package/src/CdcChart.tsx +92 -1512
  10. package/src/CdcChartComponent.tsx +1105 -0
  11. package/src/_stories/Chart.Anchors.stories.tsx +1 -1
  12. package/src/_stories/Chart.CustomColors.stories.tsx +1 -1
  13. package/src/_stories/Chart.DynamicSeries.stories.tsx +1 -1
  14. package/src/_stories/Chart.Legend.Gradient.stories.tsx +2 -2
  15. package/src/_stories/Chart.ScatterPlot.stories.tsx +19 -0
  16. package/src/_stories/Chart.tooltip.stories.tsx +1 -2
  17. package/src/_stories/ChartAnnotation.stories.tsx +1 -1
  18. package/src/_stories/ChartAxisLabels.stories.tsx +1 -1
  19. package/src/_stories/ChartAxisTitles.stories.tsx +1 -1
  20. package/src/_stories/ChartEditor.stories.tsx +1 -1
  21. package/src/_stories/ChartLine.Suppression.stories.tsx +1 -1
  22. package/src/_stories/ChartLine.Symbols.stories.tsx +18 -0
  23. package/src/_stories/ChartPrefixSuffix.stories.tsx +1 -1
  24. package/src/_stories/_mock/line_chart_symbols.json +437 -0
  25. package/src/_stories/_mock/scatterplot-image-download.json +1244 -0
  26. package/src/components/Annotations/components/AnnotationDraggable.tsx +3 -11
  27. package/src/components/Annotations/components/AnnotationDropdown.tsx +3 -3
  28. package/src/components/Axis/Categorical.Axis.tsx +3 -4
  29. package/src/components/BarChart/components/BarChart.Horizontal.tsx +14 -5
  30. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +10 -4
  31. package/src/components/BarChart/components/BarChart.Vertical.tsx +2 -2
  32. package/src/components/BoxPlot/BoxPlot.tsx +34 -32
  33. package/src/components/BoxPlot/helpers/index.ts +108 -18
  34. package/src/components/DeviationBar.jsx +2 -6
  35. package/src/components/EditorPanel/EditorPanel.tsx +62 -6
  36. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +4 -0
  37. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +44 -7
  38. package/src/components/ForestPlot/ForestPlot.tsx +176 -26
  39. package/src/components/Legend/Legend.Component.tsx +29 -38
  40. package/src/components/Legend/Legend.Suppression.tsx +3 -5
  41. package/src/components/Legend/Legend.tsx +2 -2
  42. package/src/components/Legend/LegendLine.Shape.tsx +51 -0
  43. package/src/components/Legend/helpers/createFormatLabels.tsx +29 -26
  44. package/src/components/Legend/helpers/getLegendClasses.ts +20 -38
  45. package/src/components/Legend/helpers/index.ts +14 -7
  46. package/src/components/Legend/tests/getLegendClasses.test.ts +3 -20
  47. package/src/components/LineChart/components/LineChart.Circle.tsx +90 -88
  48. package/src/components/LineChart/index.tsx +4 -0
  49. package/src/components/LinearChart.tsx +65 -31
  50. package/src/components/PairedBarChart.jsx +2 -9
  51. package/src/components/ZoomBrush.tsx +5 -7
  52. package/src/data/initial-state.js +6 -3
  53. package/src/helpers/getBoxPlotConfig.ts +68 -0
  54. package/src/helpers/getColorScale.ts +28 -0
  55. package/src/helpers/getComboChartConfig.ts +42 -0
  56. package/src/helpers/getExcludedData.ts +37 -0
  57. package/src/helpers/getTopAxis.ts +7 -0
  58. package/src/hooks/useBarChart.ts +28 -9
  59. package/src/hooks/{useHighlightedBars.js → useHighlightedBars.ts} +2 -1
  60. package/src/hooks/useIntersectionObserver.ts +37 -0
  61. package/src/hooks/useMinMax.ts +4 -0
  62. package/src/hooks/useReduceData.ts +1 -1
  63. package/src/hooks/useTooltip.tsx +9 -1
  64. package/src/index.jsx +1 -0
  65. package/src/scss/DataTable.scss +0 -5
  66. package/src/scss/main.scss +30 -115
  67. package/src/types/ChartConfig.ts +6 -3
  68. package/src/types/ChartContext.ts +1 -3
  69. package/src/helpers/getQuartiles.ts +0 -27
  70. package/src/hooks/useColorScale.ts +0 -50
  71. package/src/hooks/useIntersectionObserver.jsx +0 -29
  72. package/src/hooks/useTopAxis.js +0 -6
@@ -4,16 +4,19 @@
4
4
  "theme": "theme-indigo",
5
5
  "animate": false,
6
6
  "fontSize": "medium",
7
- "lineDatapointStyle": "hover",
7
+ "lineDatapointStyle": "always show",
8
8
  "barHasBorder": "false",
9
9
  "isLollipopChart": false,
10
10
  "lollipopShape": "circle",
11
11
  "lollipopColorStyle": "two-tone",
12
12
  "visualizationSubType": "regular",
13
- "barStyle": "",
13
+ "barStyle": "flat",
14
14
  "roundingStyle": "standard",
15
15
  "tipRounding": "top",
16
- "padding": { "left": 5, "right": 5 },
16
+ "padding": {
17
+ "left": 5,
18
+ "right": 5
19
+ },
17
20
  "yAxis": {
18
21
  "hideAxis": false,
19
22
  "displayNumbersOnBar": false,
@@ -21,6 +24,7 @@
21
24
  "hideTicks": false,
22
25
  "size": "68",
23
26
  "gridLines": true,
27
+ "enablePadding": false,
24
28
  "min": "",
25
29
  "max": "",
26
30
  "labelColor": "#333",
@@ -28,20 +32,34 @@
28
32
  "tickColor": "#333",
29
33
  "rightHideAxis": true,
30
34
  "rightAxisSize": 50,
35
+ "rightLabel": "",
31
36
  "rightLabelOffsetSize": 0,
32
37
  "rightAxisLabelColor": "#333",
33
38
  "rightAxisTickLabelColor": "#333",
34
39
  "rightAxisTickColor": "#333",
35
- "isLegendValue": false,
36
40
  "numTicks": "",
41
+ "axisPadding": 0,
42
+ "scalePadding": 10,
43
+ "tickRotation": 0,
44
+ "anchors": [],
45
+ "shoMissingDataLabel": true,
46
+ "showMissingDataLine": true,
47
+ "categories": [],
48
+ "isLegendValue": false,
37
49
  "label": "Y-Axis Label Example"
38
50
  },
39
- "topAxis": { "hasLine": false },
51
+ "topAxis": {
52
+ "hasLine": false
53
+ },
40
54
  "barThickness": "0.5",
41
55
  "barHeight": 25,
42
56
  "height": "332",
43
57
  "xAxis": {
58
+ "sortDates": false,
59
+ "anchors": [],
44
60
  "type": "date",
61
+ "showTargetLabel": true,
62
+ "targetLabel": "Target",
45
63
  "hideAxis": false,
46
64
  "hideLabel": false,
47
65
  "hideTicks": false,
@@ -52,18 +70,45 @@
52
70
  "labelColor": "#333",
53
71
  "tickLabelColor": "#333",
54
72
  "tickColor": "#333",
55
- "isLegendValue": false,
56
73
  "numTicks": "",
74
+ "labelOffset": 0,
75
+ "axisPadding": 200,
76
+ "target": 0,
77
+ "maxTickRotation": 0,
78
+ "padding": 5,
79
+ "showYearsOnce": false,
80
+ "sortByRecentDate": false,
81
+ "isLegendValue": false,
57
82
  "dataKey": "Date",
58
83
  "label": "X-Axis Example Label",
59
84
  "dateParseFormat": "%d/%m/%Y",
60
- "dateDisplayFormat": "%d/%m/%Y"
85
+ "dateDisplayFormat": "%d/%m/%Y",
86
+ "axisBBox": 96.9543685913086,
87
+ "tickWidthMax": 86
61
88
  },
62
- "table": { "label": "Data Table", "expanded": true, "limitHeight": false, "height": "", "caption": "", "download": true, "show": true },
89
+ "table": {
90
+ "label": "Data Table",
91
+ "expanded": true,
92
+ "limitHeight": false,
93
+ "height": "",
94
+ "caption": "",
95
+ "showDownloadUrl": false,
96
+ "showDataTableLink": true,
97
+ "showDownloadLinkBelow": true,
98
+ "indexLabel": "",
99
+ "download": true,
100
+ "showVertical": true,
101
+ "dateDisplayFormat": "",
102
+ "showMissingDataLabel": true,
103
+ "showSuppressedSymbol": true,
104
+ "show": true
105
+ },
106
+
63
107
  "orientation": "vertical",
64
108
  "legend": {
109
+ "hide": false,
65
110
  "behavior": "highlight",
66
- "position": "right",
111
+ "axisAlign": true,
67
112
  "singleRow": false,
68
113
  "colorCode": "",
69
114
  "reverseLabelOrder": false,
@@ -73,33 +118,352 @@
73
118
  "dynamicLegendItemLimit": 5,
74
119
  "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
75
120
  "dynamicLegendChartMessage": "Select Options from the Legend",
76
- "label": "Data Type"
121
+ "label": "Data Type",
122
+ "lineMode": false,
123
+ "verticalSorted": false,
124
+ "highlightOnHover": false,
125
+ "hideSuppressedLabels": false,
126
+ "hideSuppressionLink": false,
127
+ "seriesHighlight": [],
128
+ "style": "lines",
129
+ "subStyle": "linear blocks",
130
+ "shape": "circle",
131
+ "tickRotation": "",
132
+ "hideBorder": {
133
+ "side": false,
134
+ "topBottom": true
135
+ },
136
+ "position": "right",
137
+ "hasShape": true
77
138
  },
78
- "exclusions": { "active": false, "keys": [] },
79
- "palette": "qualitative2",
139
+ "exclusions": {
140
+ "active": false,
141
+ "keys": []
142
+ },
143
+ "palette": "qualitative4",
80
144
  "isPaletteReversed": false,
81
145
  "labels": false,
82
- "dataFormat": { "commas": false, "prefix": "", "suffix": "" },
146
+ "dataFormat": {
147
+ "commas": false,
148
+ "prefix": "",
149
+ "suffix": "",
150
+ "abbreviated": false,
151
+ "bottomSuffix": "",
152
+ "bottomPrefix": "",
153
+ "bottomAbbreviated": false
154
+ },
83
155
  "confidenceKeys": {},
84
- "visual": { "border": true, "accent": true, "background": true },
156
+ "visual": {
157
+ "border": true,
158
+ "accent": true,
159
+ "background": true,
160
+ "verticalHoverLine": false,
161
+ "horizontalHoverLine": false,
162
+ "lineDatapointSymbol": "standard"
163
+ },
85
164
  "data": [
86
- { "Date": "1/15/2016", "Data 1": "N/A", "Data 2": "110", "Data 3": "100", "Data 4": "90", "Monthly-Goal": "100" },
87
- { "Date": "2/15/2016", "Data 1": "100", "Data 2": "goop", "Data 3": "100", "Data 4": "100", "Monthly-Goal": "100" },
88
- { "Date": "3/15/2016", "Data 1": "", "Data 2": "90", "Data 3": "100.5", "Data 4": "120", "Monthly-Goal": "110" },
89
- { "Date": "4/15/2016", "Data 1": "80", "Data 2": "2,00", "Data 3": "110", "Data 4": "120", "Monthly-Goal": "110" },
90
- { "Date": "5/15/2016", "Data 1": "70", "Data 2": "90", "Data 3": "110", "Data 4": "130", "Monthly-Goal": "120" },
91
- { "Date": "6/15/2016", "Data 1": "100", "Data 2": "120", "Data 3": "120", "Data 4": "130", "Monthly-Goal": "120" },
92
- { "Date": "7/15/2016", "Data 1": "zip", "Data 2": null, "Data 3": "120", "Data 4": "130", "Monthly-Goal": "130" },
93
- { "Date": "8/15/2016", "Data 1": "110", "Data 2": "130", "Data 3": "120", "Data 4": "140", "Monthly-Goal": "130" },
94
- { "Date": "9/15/2016", "Data 1": "120", "Data 2": "130", "Data 3": "120", "Data 4": "150", "Monthly-Goal": "140" }
165
+ {
166
+ "Date": "1/15/2016",
167
+ "Data 1": "N/A",
168
+ "Data 2": "110",
169
+ "Data 3": "100",
170
+ "Data 4": "90",
171
+ "Data 5": "00",
172
+ "Data 6": "190",
173
+ "Data 7": "00",
174
+ "Data 8": "40",
175
+ "Monthly-Goal": "100"
176
+ },
177
+ {
178
+ "Date": "2/15/2016",
179
+ "Data 1": "100",
180
+ "Data 2": "goop",
181
+ "Data 3": "100",
182
+ "Data 4": "100",
183
+ "Data 5": "10",
184
+ "Data 6": "590",
185
+ "Data 7": "44",
186
+ "Data 8": "10",
187
+ "Monthly-Goal": "100"
188
+ },
189
+ {
190
+ "Date": "3/15/2016",
191
+ "Data 1": "",
192
+ "Data 2": "90",
193
+ "Data 3": "100.5",
194
+ "Data 4": "120",
195
+ "Data 5": "50",
196
+ "Data 6": "66",
197
+ "Data 7": "12",
198
+ "Data 8": "123",
199
+ "Monthly-Goal": "110"
200
+ },
201
+ {
202
+ "Date": "4/15/2016",
203
+ "Data 1": "80",
204
+ "Data 2": "2,00",
205
+ "Data 3": "110",
206
+ "Data 4": "120",
207
+ "Data 5": "50",
208
+ "Data 6": "190",
209
+ "Data 7": "99",
210
+ "Data 8": "33",
211
+ "Monthly-Goal": "110"
212
+ },
213
+ {
214
+ "Date": "5/15/2016",
215
+ "Data 1": "70",
216
+ "Data 2": "90",
217
+ "Data 3": "110",
218
+ "Data 4": "130",
219
+ "Data 5": "12",
220
+ "Data 6": "90",
221
+ "Data 7": "60",
222
+ "Data 8": "30",
223
+ "Monthly-Goal": "120"
224
+ },
225
+ {
226
+ "Date": "6/15/2016",
227
+ "Data 1": "100",
228
+ "Data 2": "120",
229
+ "Data 3": "120",
230
+ "Data 4": "130",
231
+ "Data 5": "90",
232
+ "Data 6": "190",
233
+ "Data 7": "30",
234
+ "Data 8": "10",
235
+ "Monthly-Goal": "120"
236
+ },
237
+ {
238
+ "Date": "7/15/2016",
239
+ "Data 1": "zip",
240
+ "Data 2": null,
241
+ "Data 3": "120",
242
+ "Data 4": "130",
243
+ "Data 5": "90",
244
+ "Data 6": "90",
245
+ "Data 7": "20",
246
+ "Data 8": "40",
247
+ "Monthly-Goal": "130"
248
+ },
249
+ {
250
+ "Date": "8/15/2016",
251
+ "Data 1": "110",
252
+ "Data 2": "130",
253
+ "Data 3": "120",
254
+ "Data 4": "140",
255
+ "Data 5": "80",
256
+ "Data 6": "10",
257
+ "Data 7": "11",
258
+ "Data 8": "4",
259
+ "Monthly-Goal": "130"
260
+ },
261
+ {
262
+ "Date": "9/15/2016",
263
+ "Data 1": "120",
264
+ "Data 2": "130",
265
+ "Data 3": "120",
266
+ "Data 4": "150",
267
+ "Data 5": "70",
268
+ "Data 6": "10",
269
+ "Data 7": "00",
270
+ "Data 8": "40",
271
+ "Monthly-Goal": "140"
272
+ }
95
273
  ],
96
- "visualizationType": "Combo",
274
+ "visualizationType": "Line",
97
275
  "series": [
98
- { "dataKey": "Data 1", "type": "Bar" },
99
- { "dataKey": "Data 2", "type": "Bar" },
100
- { "dataKey": "Data 3", "type": "Bar" },
101
- { "dataKey": "Data 4", "type": "Bar" },
102
- { "dataKey": "Monthly-Goal", "type": "dashed-sm", "axis": "Left" }
276
+ {
277
+ "dataKey": "Data 3",
278
+ "type": "Line",
279
+ "axis": "Left",
280
+ "tooltip": true
281
+ },
282
+ {
283
+ "dataKey": "Data 4",
284
+ "type": "Line",
285
+ "axis": "Left",
286
+ "tooltip": true
287
+ }
103
288
  ],
104
- "description": "Note: There is an option to make the line dotted as demonstrated above"
289
+ "description": "Note: There is an option to make the line dotted as demonstrated above",
290
+ "annotations": [],
291
+ "debugSvg": false,
292
+ "chartMessage": {
293
+ "noData": "No Data Available"
294
+ },
295
+ "showTitle": true,
296
+ "showDownloadMediaButton": false,
297
+ "lineDatapointColor": "Same as Line",
298
+ "isResponsiveTicks": false,
299
+ "general": {
300
+ "annotationDropdownText": "Annotations",
301
+ "showDownloadButton": false,
302
+ "showMissingDataLabel": true,
303
+ "showSuppressedSymbol": true,
304
+ "showZeroValueData": true,
305
+ "hideNullValue": true
306
+ },
307
+ "preliminaryData": [
308
+ {
309
+ "type": "effect",
310
+ "seriesKey": "Data 4",
311
+ "label": "Suppressed",
312
+ "column": "Data 3",
313
+ "value": "120",
314
+ "style": "Open Circles",
315
+ "displayTooltip": true,
316
+ "displayLegend": true,
317
+ "displayTable": true,
318
+ "symbol": "",
319
+ "iconCode": "",
320
+ "lineCode": "◯",
321
+ "hideBarSymbol": false,
322
+ "hideLineStyle": false,
323
+ "circleSize": "7",
324
+ "displayGray": true
325
+ }
326
+ ],
327
+ "boxplot": {
328
+ "plots": [],
329
+ "borders": "true",
330
+ "plotOutlierValues": false,
331
+ "plotNonOutlierValues": true,
332
+ "labels": {
333
+ "q1": "Lower Quartile",
334
+ "q2": "q2",
335
+ "q3": "Upper Quartile",
336
+ "q4": "q4",
337
+ "minimum": "Minimum",
338
+ "maximum": "Maximum",
339
+ "mean": "Mean",
340
+ "median": "Median",
341
+ "sd": "Standard Deviation",
342
+ "iqr": "Interquartile Range",
343
+ "count": "Count",
344
+ "outliers": "Outliers",
345
+ "values": "Values",
346
+ "lowerBounds": "Lower Bounds",
347
+ "upperBounds": "Upper Bounds"
348
+ }
349
+ },
350
+ "isLegendValue": false,
351
+ "barSpace": 15,
352
+ "heights": {
353
+ "vertical": 300,
354
+ "horizontal": 750
355
+ },
356
+ "color": "pinkpurple",
357
+ "columns": {},
358
+ "brush": {
359
+ "height": 45,
360
+ "active": false
361
+ },
362
+ "twoColor": {
363
+ "palette": "monochrome-1",
364
+ "isPaletteReversed": false
365
+ },
366
+ "filters": [],
367
+ "useLogScale": false,
368
+ "filterBehavior": "Filter Change",
369
+ "highlightedBarValues": [],
370
+ "tooltips": {
371
+ "opacity": 90,
372
+ "singleSeries": false,
373
+ "dateDisplayFormat": ""
374
+ },
375
+ "forestPlot": {
376
+ "startAt": 0,
377
+ "colors": {
378
+ "line": "",
379
+ "shape": ""
380
+ },
381
+ "lineOfNoEffect": {
382
+ "show": true
383
+ },
384
+ "type": "",
385
+ "pooledResult": {
386
+ "diamondHeight": 5,
387
+ "column": ""
388
+ },
389
+ "estimateField": "",
390
+ "estimateRadius": "",
391
+ "shape": "square",
392
+ "rowHeight": 20,
393
+ "description": {
394
+ "show": true,
395
+ "text": "description",
396
+ "location": 0
397
+ },
398
+ "result": {
399
+ "show": true,
400
+ "text": "result",
401
+ "location": 100
402
+ },
403
+ "radius": {
404
+ "min": 2,
405
+ "max": 10,
406
+ "scalingColumn": ""
407
+ },
408
+ "regression": {
409
+ "lower": 0,
410
+ "upper": 0,
411
+ "estimateField": 0
412
+ },
413
+ "leftWidthOffset": 0,
414
+ "rightWidthOffset": 0,
415
+ "showZeroLine": false,
416
+ "leftLabel": "",
417
+ "rightLabel": ""
418
+ },
419
+ "area": {
420
+ "isStacked": false
421
+ },
422
+ "sankey": {
423
+ "title": {
424
+ "defaultColor": "black"
425
+ },
426
+ "iterations": 1,
427
+ "rxValue": 0.9,
428
+ "overallSize": {
429
+ "width": 900,
430
+ "height": 700
431
+ },
432
+ "margin": {
433
+ "margin_y": 25,
434
+ "margin_x": 0
435
+ },
436
+ "nodeSize": {
437
+ "nodeWidth": 26,
438
+ "nodeHeight": 40
439
+ },
440
+ "nodePadding": 55,
441
+ "nodeFontColor": "black",
442
+ "nodeColor": {
443
+ "default": "#ff8500",
444
+ "inactive": "#808080"
445
+ },
446
+ "linkColor": {
447
+ "default": "#ffc900",
448
+ "inactive": "#D3D3D3"
449
+ },
450
+ "opacity": {
451
+ "nodeOpacityDefault": 1,
452
+ "nodeOpacityInactive": 0.1,
453
+ "LinkOpacityDefault": 1,
454
+ "LinkOpacityInactive": 0.1
455
+ },
456
+ "storyNodeFontColor": "#006778",
457
+ "storyNodeText": [],
458
+ "nodeValueStyle": {
459
+ "textBefore": "(",
460
+ "textAfter": ")"
461
+ },
462
+ "data": []
463
+ },
464
+ "version": "4.25.1",
465
+ "migrations": {
466
+ "addColorMigration": true
467
+ },
468
+ "dynamicMarginTop": 0
105
469
  }