@cdc/chart 4.25.3 → 4.25.6

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 (86) hide show
  1. package/dist/cdcchart.js +46641 -42561
  2. package/index.html +130 -129
  3. package/package.json +22 -27
  4. package/src/CdcChartComponent.tsx +75 -35
  5. package/src/_stories/Chart.CI.stories.tsx +10 -0
  6. package/src/_stories/Chart.DynamicSeries.stories.tsx +68 -49
  7. package/src/_stories/Chart.stories.tsx +99 -86
  8. package/src/_stories/ChartPrefixSuffix.stories.tsx +29 -32
  9. package/{examples/private/line-issue.json → src/_stories/_mock/barchart_labels.mock.json} +150 -35
  10. package/src/_stories/_mock/dynamic_series_bar_config.json +1 -1
  11. package/src/_stories/_mock/dynamic_series_suppression_mock.json +610 -0
  12. package/{examples/private/not-loading.json → src/_stories/_mock/pie_calculated_area.json} +152 -95
  13. package/src/components/Annotations/components/AnnotationDropdown.tsx +2 -2
  14. package/src/components/AreaChart/components/AreaChart.jsx +33 -5
  15. package/src/components/Axis/Categorical.Axis.tsx +2 -2
  16. package/src/components/BarChart/components/BarChart.Horizontal.tsx +38 -37
  17. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +18 -8
  18. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +8 -8
  19. package/src/components/BarChart/components/BarChart.Vertical.tsx +47 -36
  20. package/src/components/BarChart/components/{BarChart.jsx → BarChart.tsx} +23 -5
  21. package/src/components/BarChart/components/context.tsx +20 -2
  22. package/src/components/BarChart/helpers/getBarHeights.ts +47 -0
  23. package/src/components/BarChart/helpers/index.ts +5 -2
  24. package/src/components/BarChart/helpers/tests/getBarHeights.test.ts +83 -0
  25. package/src/{hooks → components/BarChart/helpers}/useBarChart.ts +9 -46
  26. package/src/components/BoxPlot/BoxPlot.tsx +2 -1
  27. package/src/components/Brush/BrushChart.tsx +73 -0
  28. package/src/components/Brush/BrushController..tsx +39 -0
  29. package/src/components/DeviationBar.jsx +2 -2
  30. package/src/components/EditorPanel/EditorPanel.tsx +232 -147
  31. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +36 -36
  32. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +52 -25
  33. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +12 -4
  34. package/src/components/EditorPanel/components/Panels/panelVisual.styles.css +8 -0
  35. package/src/components/EditorPanel/useEditorPermissions.ts +5 -5
  36. package/src/components/ForestPlot/ForestPlot.tsx +2 -2
  37. package/src/components/HoverLine/HoverLine.tsx +74 -0
  38. package/src/components/Legend/Legend.Component.tsx +1 -1
  39. package/src/components/Legend/Legend.Suppression.tsx +59 -25
  40. package/src/components/Legend/helpers/createFormatLabels.tsx +28 -0
  41. package/src/components/Legend/helpers/index.ts +1 -1
  42. package/src/components/LineChart/LineChartProps.ts +3 -1
  43. package/src/components/LineChart/components/LineChart.Circle.tsx +72 -119
  44. package/src/components/LineChart/helpers.ts +133 -56
  45. package/src/components/LineChart/index.tsx +106 -55
  46. package/src/components/LinearChart.tsx +178 -198
  47. package/src/components/PairedBarChart.jsx +3 -2
  48. package/src/components/PieChart/PieChart.tsx +127 -102
  49. package/src/components/ScatterPlot/ScatterPlot.jsx +5 -0
  50. package/src/components/Sparkline/components/SparkLine.tsx +80 -18
  51. package/src/data/initial-state.js +11 -6
  52. package/src/helpers/countNumOfTicks.ts +1 -1
  53. package/src/helpers/dataHelpers.ts +23 -2
  54. package/src/helpers/getNewRuntime.ts +35 -0
  55. package/src/helpers/getPiePercent.ts +22 -0
  56. package/src/helpers/getTransformedData.ts +22 -0
  57. package/src/helpers/sizeHelpers.ts +1 -1
  58. package/src/helpers/tests/getNewRuntime.test.ts +82 -0
  59. package/src/helpers/tests/getPiePercent.test.ts +38 -0
  60. package/src/hooks/useMinMax.ts +21 -28
  61. package/src/hooks/useRightAxis.ts +5 -3
  62. package/src/hooks/useScales.ts +15 -6
  63. package/src/hooks/useTooltip.tsx +218 -203
  64. package/src/index.jsx +2 -2
  65. package/src/scss/main.scss +13 -6
  66. package/src/store/chart.actions.ts +2 -6
  67. package/src/store/chart.reducer.ts +23 -23
  68. package/src/types/ChartConfig.ts +11 -3
  69. package/src/types/ChartContext.ts +0 -2
  70. package/examples/private/DEV-8850-2.json +0 -493
  71. package/examples/private/DEV-9822.json +0 -574
  72. package/examples/private/DEV-9840.json +0 -553
  73. package/examples/private/DEV-9850-3.json +0 -461
  74. package/examples/private/chart.json +0 -1084
  75. package/examples/private/ci_formatted.json +0 -202
  76. package/examples/private/ci_issue.json +0 -3016
  77. package/examples/private/completed.json +0 -634
  78. package/examples/private/dem-data-long.csv +0 -20
  79. package/examples/private/dem-data-long.json +0 -36
  80. package/examples/private/demographic_data.csv +0 -157
  81. package/examples/private/demographic_data.json +0 -2654
  82. package/examples/private/demographic_dynamic.json +0 -443
  83. package/examples/private/demographic_standard.json +0 -560
  84. package/examples/private/ehdi.json +0 -29939
  85. package/examples/private/test.json +0 -493
  86. package/src/components/ZoomBrush.tsx +0 -251
@@ -1,560 +0,0 @@
1
- {
2
- "annotations": [],
3
- "type": "chart",
4
- "debugSvg": false,
5
- "chartMessage": {
6
- "noData": "No Data Available"
7
- },
8
- "title": "",
9
- "showTitle": true,
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": false,
25
- "general": {
26
- "annotationDropdownText": "Annotations",
27
- "showDownloadButton": false,
28
- "showMissingDataLabel": false,
29
- "showSuppressedSymbol": false,
30
- "showZeroValueData": false,
31
- "hideNullValue": false
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": 50,
44
- "gridLines": false,
45
- "enablePadding": false,
46
- "min": "",
47
- "max": "",
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": "",
59
- "axisPadding": 0,
60
- "scalePadding": 10,
61
- "tickRotation": 0,
62
- "anchors": [],
63
- "shoMissingDataLabel": true,
64
- "showMissingDataLine": true,
65
- "categories": []
66
- },
67
- "boxplot": {
68
- "plots": [],
69
- "borders": "true",
70
- "plotOutlierValues": false,
71
- "plotNonOutlierValues": true,
72
- "labels": {
73
- "q1": "Lower Quartile",
74
- "q2": "q2",
75
- "q3": "Upper Quartile",
76
- "q4": "q4",
77
- "minimum": "Minimum",
78
- "maximum": "Maximum",
79
- "mean": "Mean",
80
- "median": "Median",
81
- "sd": "Standard Deviation",
82
- "iqr": "Interquartile Range",
83
- "count": "Count",
84
- "outliers": "Outliers",
85
- "values": "Values",
86
- "lowerBounds": "Lower Bounds",
87
- "upperBounds": "Upper Bounds"
88
- }
89
- },
90
- "topAxis": {
91
- "hasLine": false
92
- },
93
- "isLegendValue": false,
94
- "barThickness": 0.35,
95
- "barHeight": 25,
96
- "barSpace": 15,
97
- "heights": {
98
- "vertical": 300,
99
- "horizontal": 750
100
- },
101
- "xAxis": {
102
- "sortDates": false,
103
- "anchors": [],
104
- "type": "categorical",
105
- "showTargetLabel": true,
106
- "targetLabel": "Target",
107
- "hideAxis": false,
108
- "hideLabel": false,
109
- "hideTicks": false,
110
- "size": 75,
111
- "tickRotation": "45",
112
- "min": "",
113
- "max": "",
114
- "labelColor": "#333",
115
- "tickLabelColor": "#333",
116
- "tickColor": "#333",
117
- "numTicks": "",
118
- "labelOffset": 0,
119
- "axisPadding": 200,
120
- "target": 0,
121
- "maxTickRotation": 0,
122
- "padding": "0",
123
- "showYearsOnce": false,
124
- "sortByRecentDate": false,
125
- "dataKey": "date",
126
- "axisBBox": 110.59320068359375,
127
- "tickWidthMax": 93,
128
- "dateParseFormat": "%Y-%m-%d",
129
- "dateDisplayFormat": "%Y-%m-%d",
130
- "manual": false,
131
- "label": "Date"
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": true,
145
- "dateDisplayFormat": "%Y-%m-%d",
146
- "showMissingDataLabel": true,
147
- "showSuppressedSymbol": true,
148
- "show": true
149
- },
150
- "orientation": "vertical",
151
- "color": "pinkpurple",
152
- "columns": {
153
- "male_ci": {
154
- "label": "Male (CI)",
155
- "dataTable": true,
156
- "tooltips": false,
157
- "prefix": "",
158
- "suffix": "",
159
- "forestPlot": false,
160
- "startingPoint": "0",
161
- "forestPlotAlignRight": false,
162
- "roundToPlace": 0,
163
- "commas": false,
164
- "showInViz": false,
165
- "forestPlotStartingPoint": 0,
166
- "name": "male_ci"
167
- },
168
- "female_ci": {
169
- "label": "Female (CI)",
170
- "dataTable": true,
171
- "tooltips": false,
172
- "prefix": "",
173
- "suffix": "",
174
- "forestPlot": false,
175
- "startingPoint": "0",
176
- "forestPlotAlignRight": false,
177
- "roundToPlace": 0,
178
- "commas": false,
179
- "showInViz": false,
180
- "forestPlotStartingPoint": 0,
181
- "name": "female_ci"
182
- },
183
- "male": {
184
- "label": "male",
185
- "dataTable": false,
186
- "tooltips": false,
187
- "prefix": "",
188
- "suffix": "",
189
- "forestPlot": false,
190
- "startingPoint": "0",
191
- "forestPlotAlignRight": false,
192
- "roundToPlace": 0,
193
- "commas": false,
194
- "showInViz": false,
195
- "forestPlotStartingPoint": 0,
196
- "name": "male"
197
- },
198
- "female": {
199
- "label": "female",
200
- "dataTable": false,
201
- "tooltips": false,
202
- "prefix": "",
203
- "suffix": "",
204
- "forestPlot": false,
205
- "startingPoint": "0",
206
- "forestPlotAlignRight": false,
207
- "roundToPlace": 0,
208
- "commas": false,
209
- "showInViz": false,
210
- "forestPlotStartingPoint": 0,
211
- "name": "female"
212
- },
213
- "date": {
214
- "label": "Date",
215
- "dataTable": true,
216
- "tooltips": false,
217
- "prefix": "",
218
- "suffix": "",
219
- "forestPlot": false,
220
- "startingPoint": "0",
221
- "forestPlotAlignRight": false,
222
- "roundToPlace": 0,
223
- "commas": false,
224
- "showInViz": false,
225
- "forestPlotStartingPoint": 0,
226
- "name": "date"
227
- }
228
- },
229
- "legend": {
230
- "hide": false,
231
- "behavior": "isolate",
232
- "axisAlign": true,
233
- "singleRow": true,
234
- "colorCode": "",
235
- "reverseLabelOrder": false,
236
- "description": "",
237
- "dynamicLegend": false,
238
- "dynamicLegendDefaultText": "Show All",
239
- "dynamicLegendItemLimit": 5,
240
- "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
241
- "dynamicLegendChartMessage": "Select Options from the Legend",
242
- "label": "",
243
- "lineMode": false,
244
- "verticalSorted": false,
245
- "highlightOnHover": false,
246
- "hideSuppressedLabels": false,
247
- "hideSuppressionLink": false,
248
- "seriesHighlight": [],
249
- "style": "circles",
250
- "subStyle": "linear blocks",
251
- "tickRotation": "",
252
- "hideBorder": {
253
- "side": false,
254
- "topBottom": true
255
- },
256
- "position": "right"
257
- },
258
- "brush": {
259
- "height": 25,
260
- "active": false
261
- },
262
- "exclusions": {
263
- "active": true,
264
- "keys": [],
265
- "dateStart": "2023-01-02",
266
- "dateEnd": "2023-01-11"
267
- },
268
- "palette": "qualitative-bold",
269
- "isPaletteReversed": false,
270
- "twoColor": {
271
- "palette": "monochrome-1",
272
- "isPaletteReversed": false
273
- },
274
- "labels": false,
275
- "dataFormat": {
276
- "commas": false,
277
- "prefix": "",
278
- "suffix": "",
279
- "abbreviated": false,
280
- "bottomSuffix": "",
281
- "bottomPrefix": "",
282
- "bottomAbbreviated": false
283
- },
284
- "confidenceKeys": {
285
- "upper": "upper",
286
- "lower": "lower"
287
- },
288
- "visual": {
289
- "border": true,
290
- "accent": true,
291
- "background": true,
292
- "verticalHoverLine": false,
293
- "horizontalHoverLine": false
294
- },
295
- "useLogScale": false,
296
- "filterBehavior": "Filter Change",
297
- "highlightedBarValues": [],
298
- "series": [
299
- {
300
- "dataKey": "demographic 1",
301
- "type": "Bar",
302
- "axis": "Left",
303
- "tooltip": true
304
- },
305
- {
306
- "dataKey": "demographic 2",
307
- "type": "Bar",
308
- "axis": "Left",
309
- "tooltip": true
310
- },
311
- {
312
- "dataKey": "demographic 3",
313
- "type": "Bar",
314
- "axis": "Left",
315
- "tooltip": true
316
- }
317
- ],
318
- "tooltips": {
319
- "opacity": 90,
320
- "singleSeries": false,
321
- "dateDisplayFormat": ""
322
- },
323
- "forestPlot": {
324
- "startAt": 0,
325
- "colors": {
326
- "line": "",
327
- "shape": ""
328
- },
329
- "lineOfNoEffect": {
330
- "show": true
331
- },
332
- "type": "",
333
- "pooledResult": {
334
- "diamondHeight": 5,
335
- "column": ""
336
- },
337
- "estimateField": "",
338
- "estimateRadius": "",
339
- "shape": "square",
340
- "rowHeight": 20,
341
- "description": {
342
- "show": true,
343
- "text": "description",
344
- "location": 0
345
- },
346
- "result": {
347
- "show": true,
348
- "text": "result",
349
- "location": 100
350
- },
351
- "radius": {
352
- "min": 2,
353
- "max": 10,
354
- "scalingColumn": ""
355
- },
356
- "regression": {
357
- "lower": 0,
358
- "upper": 0,
359
- "estimateField": 0
360
- },
361
- "leftWidthOffset": 0,
362
- "rightWidthOffset": 0,
363
- "showZeroLine": false,
364
- "leftLabel": "",
365
- "rightLabel": ""
366
- },
367
- "area": {
368
- "isStacked": false
369
- },
370
- "sankey": {
371
- "title": {
372
- "defaultColor": "black"
373
- },
374
- "iterations": 1,
375
- "rxValue": 0.9,
376
- "overallSize": {
377
- "width": 900,
378
- "height": 700
379
- },
380
- "margin": {
381
- "margin_y": 25,
382
- "margin_x": 0
383
- },
384
- "nodeSize": {
385
- "nodeWidth": 26,
386
- "nodeHeight": 40
387
- },
388
- "nodePadding": 55,
389
- "nodeFontColor": "black",
390
- "nodeColor": {
391
- "default": "#ff8500",
392
- "inactive": "#808080"
393
- },
394
- "linkColor": {
395
- "default": "#ffc900",
396
- "inactive": "#D3D3D3"
397
- },
398
- "opacity": {
399
- "nodeOpacityDefault": 1,
400
- "nodeOpacityInactive": 0.1,
401
- "LinkOpacityDefault": 1,
402
- "LinkOpacityInactive": 0.1
403
- },
404
- "storyNodeFontColor": "#006778",
405
- "storyNodeText": [],
406
- "nodeValueStyle": {
407
- "textBefore": "(",
408
- "textAfter": ")"
409
- },
410
- "data": []
411
- },
412
- "visualizationType": "Bar",
413
- "data": [
414
- {
415
- "date": "2023-01-01",
416
- "category": "demographic 1",
417
- "demographic 1": 67,
418
- "value": 67,
419
- "lower": 65,
420
- "upper": 69,
421
- "demographic_1_lower": 65,
422
- "demographic_1_upper": 69,
423
- "demographic_1_formatted": "CI (65, 69)"
424
- },
425
- {
426
- "date": "2023-01-01",
427
- "category": "demographic 2",
428
- "demographic 2": 77,
429
- "value": 77,
430
- "lower": 73,
431
- "upper": 81,
432
- "demographic_2_lower": 73,
433
- "demographic_2_upper": 81,
434
- "demographic_2_formatted": "CI (73, 81)"
435
- },
436
- {
437
- "date": "2023-01-01",
438
- "category": "demographic 3",
439
- "demographic 3": 50,
440
- "value": 50,
441
- "lower": 48,
442
- "upper": 52,
443
- "demographic_3_lower": 48,
444
- "demographic_3_upper": 52,
445
- "demographic_3_formatted": "CI (48, 52)"
446
- },
447
- {
448
- "date": "2023-02-01",
449
- "category": "demographic 1",
450
- "demographic 1": 67,
451
- "value": 67,
452
- "lower": 65,
453
- "upper": 69,
454
- "demographic_1_lower": 65,
455
- "demographic_1_upper": 69,
456
- "demographic_1_formatted": "CI (65, 69)"
457
- },
458
- {
459
- "date": "2023-02-01",
460
- "category": "demographic 2",
461
- "demographic 2": 77,
462
- "value": 77,
463
- "lower": 73,
464
- "upper": 81,
465
- "demographic_2_lower": 73,
466
- "demographic_2_upper": 81,
467
- "demographic_2_formatted": "CI (73, 81)"
468
- },
469
- {
470
- "date": "2023-02-01",
471
- "category": "demographic 3",
472
- "demographic 3": 150,
473
- "value": 50,
474
- "lower": 145,
475
- "upper": 155,
476
- "demographic_3_lower": 155,
477
- "demographic_3_upper": 145,
478
- "demographic_3_formatted": "CI (48, 52)"
479
- }
480
- ],
481
- "dataFileName": "valid-forecast-data.csv",
482
- "dataFileSourceType": "file",
483
- "dataDescription": {
484
- "horizontal": false,
485
- "series": false,
486
- "singleRow": false,
487
- "seriesKey": ""
488
- },
489
- "version": "4.24.12",
490
- "dynamicMarginTop": 0,
491
- "regions": [],
492
- "formattedData": [
493
- {
494
- "date": "2023-01-01",
495
- "category": "demographic 1",
496
- "demographic 1": 67,
497
- "value": 67,
498
- "lower": 65,
499
- "upper": 69,
500
- "demographic_1_lower": 65,
501
- "demographic_1_upper": 69,
502
- "demographic_1_formatted": "CI (65, 69)"
503
- },
504
- {
505
- "date": "2023-01-01",
506
- "category": "demographic 2",
507
- "demographic 2": 77,
508
- "value": 77,
509
- "lower": 73,
510
- "upper": 81,
511
- "demographic_2_lower": 73,
512
- "demographic_2_upper": 81,
513
- "demographic_2_formatted": "CI (73, 81)"
514
- },
515
- {
516
- "date": "2023-01-01",
517
- "category": "demographic 3",
518
- "demographic 3": 50,
519
- "value": 50,
520
- "lower": 48,
521
- "upper": 52,
522
- "demographic_3_lower": 48,
523
- "demographic_3_upper": 52,
524
- "demographic_3_formatted": "CI (48, 52)"
525
- },
526
- {
527
- "date": "2023-02-01",
528
- "category": "demographic 1",
529
- "demographic 1": 67,
530
- "value": 67,
531
- "lower": 65,
532
- "upper": 69,
533
- "demographic_1_lower": 65,
534
- "demographic_1_upper": 69,
535
- "demographic_1_formatted": "CI (65, 69)"
536
- },
537
- {
538
- "date": "2023-02-01",
539
- "category": "demographic 2",
540
- "demographic 2": 77,
541
- "value": 77,
542
- "lower": 73,
543
- "upper": 81,
544
- "demographic_2_lower": 73,
545
- "demographic_2_upper": 81,
546
- "demographic_2_formatted": "CI (73, 81)"
547
- },
548
- {
549
- "date": "2023-02-01",
550
- "category": "demographic 3",
551
- "demographic 3": 50,
552
- "value": 50,
553
- "lower": 48,
554
- "upper": 52,
555
- "demographic_3_lower": 48,
556
- "demographic_3_upper": 52,
557
- "demographic_3_formatted": "CI (48, 52)"
558
- }
559
- ]
560
- }