@cdc/chart 4.24.1 → 4.24.3

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 (82) hide show
  1. package/dist/cdcchart.js +48948 -37923
  2. package/examples/{private/combo.json → chart-regression-1.json} +40 -31
  3. package/examples/chart-regression-2.json +2360 -0
  4. package/examples/feature/filters/url-filter.json +1076 -0
  5. package/examples/feature/line/line-chart-preliminary.json +84 -37
  6. package/examples/feature/line/line-chart.json +2 -1
  7. package/examples/feature/regions/index.json +55 -5
  8. package/examples/feature/sankey/sankey-example-data.json +1364 -0
  9. package/examples/feature/sankey/sankey_chart_data.csv +20 -0
  10. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +306 -19
  11. package/examples/sparkline.json +868 -0
  12. package/index.html +128 -121
  13. package/package.json +4 -2
  14. package/src/CdcChart.tsx +73 -38
  15. package/src/_stories/ChartEditor.stories.tsx +15 -4
  16. package/src/_stories/_mock/pie_config.json +4 -3
  17. package/src/_stories/_mock/url_filter.json +1076 -0
  18. package/src/components/AreaChart/components/AreaChart.Stacked.jsx +2 -1
  19. package/src/components/AreaChart/components/AreaChart.jsx +2 -25
  20. package/src/components/BarChart/components/BarChart.Horizontal.tsx +39 -49
  21. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +36 -56
  22. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +36 -41
  23. package/src/components/BarChart/components/BarChart.Vertical.tsx +48 -64
  24. package/src/components/BoxPlot/BoxPlot.jsx +11 -9
  25. package/src/components/DeviationBar.jsx +3 -3
  26. package/src/components/EditorPanel/EditorPanel.tsx +1717 -1961
  27. package/src/components/EditorPanel/EditorPanelContext.ts +40 -0
  28. package/src/components/EditorPanel/components/Panels/Panel.BoxPlot.tsx +148 -0
  29. package/src/components/EditorPanel/components/{Panel.ForestPlotSettings.tsx → Panels/Panel.ForestPlotSettings.tsx} +16 -7
  30. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +160 -0
  31. package/src/components/EditorPanel/components/{Panel.Regions.tsx → Panels/Panel.Regions.tsx} +6 -6
  32. package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx +108 -0
  33. package/src/components/EditorPanel/components/{Panel.Series.tsx → Panels/Panel.Series.tsx} +50 -6
  34. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +338 -0
  35. package/src/components/EditorPanel/components/Panels/index.tsx +19 -0
  36. package/src/components/EditorPanel/components/panels.scss +11 -0
  37. package/src/components/EditorPanel/editor-panel.scss +1 -13
  38. package/src/components/EditorPanel/useEditorPermissions.js +44 -13
  39. package/src/components/Legend/Legend.Component.tsx +207 -0
  40. package/src/components/Legend/Legend.tsx +8 -327
  41. package/src/components/Legend/helpers/createFormatLabels.tsx +140 -0
  42. package/src/components/LineChart/LineChartProps.ts +2 -1
  43. package/src/components/LineChart/components/LineChart.Circle.tsx +85 -52
  44. package/src/components/LineChart/helpers.ts +3 -3
  45. package/src/components/LineChart/index.tsx +99 -23
  46. package/src/components/LinearChart.jsx +12 -33
  47. package/src/components/PairedBarChart.jsx +10 -12
  48. package/src/components/PieChart/PieChart.tsx +80 -27
  49. package/src/components/Regions/components/Regions.tsx +120 -69
  50. package/src/components/Sankey/index.tsx +434 -0
  51. package/src/components/Sankey/sankey.scss +153 -0
  52. package/src/components/Sankey/types/index.ts +16 -0
  53. package/src/components/ScatterPlot/ScatterPlot.jsx +1 -0
  54. package/src/components/Sparkline/{SparkLine.jsx → components/SparkLine.tsx} +14 -30
  55. package/src/components/Sparkline/index.scss +3 -0
  56. package/src/components/Sparkline/index.tsx +1 -1
  57. package/src/components/ZoomBrush.tsx +2 -1
  58. package/src/data/initial-state.js +51 -4
  59. package/src/helpers/computeMarginBottom.ts +4 -3
  60. package/src/helpers/tests/computeMarginBottom.test.ts +2 -1
  61. package/src/hooks/useBarChart.js +5 -2
  62. package/src/hooks/useHighlightedBars.js +1 -1
  63. package/src/hooks/useMinMax.ts +3 -3
  64. package/src/hooks/useScales.ts +28 -18
  65. package/src/hooks/useTooltip.tsx +19 -14
  66. package/src/scss/main.scss +8 -96
  67. package/src/types/ChartConfig.ts +47 -20
  68. package/src/types/ChartContext.ts +17 -4
  69. package/src/types/Label.ts +7 -0
  70. package/examples/private/chart-t.json +0 -3740
  71. package/examples/private/epi-data.csv +0 -13
  72. package/examples/private/epi-data.json +0 -62
  73. package/examples/private/epi.json +0 -403
  74. package/examples/private/occupancy.json +0 -109283
  75. package/examples/private/prod-line-config.json +0 -401
  76. package/examples/private/region-data.json +0 -822
  77. package/examples/private/region-testing.json +0 -312
  78. package/examples/private/scaling.json +0 -45325
  79. package/examples/private/testing-data.json +0 -1739
  80. package/examples/private/testing.json +0 -816
  81. package/src/components/EditorPanel/components/Panel.DateHighlighting.tsx +0 -109
  82. package/src/components/EditorPanel/components/Panels.tsx +0 -13
@@ -10,7 +10,7 @@
10
10
  "theme": "theme-orange",
11
11
  "animate": false,
12
12
  "fontSize": "medium",
13
- "lineDatapointStyle": "hover",
13
+ "lineDatapointStyle": "always show",
14
14
  "lineDatapointColor": "Same as Line",
15
15
  "barHasBorder": "false",
16
16
  "isLollipopChart": false,
@@ -32,26 +32,10 @@
32
32
  "preliminaryData": [
33
33
  {
34
34
  "type": "effect",
35
- "label": "Cricle 1",
35
+ "label": "dashed",
36
36
  "column": "Data 2",
37
- "value": "20",
38
- "style": "Open Circles",
39
- "seriesKey": "Data 1"
40
- },
41
- {
42
- "type": "",
43
- "label": "Cricle 2",
44
- "column": "Data 3",
45
- "value": "20",
46
- "style": "Open Circles",
47
- "seriesKey": "Data 1"
48
- },
49
- {
50
- "type": "effect",
51
- "label": "circle 3",
52
- "column": "Data 2",
53
- "value": "30",
54
- "style": "Open Circles",
37
+ "value": "38",
38
+ "style": "Dashed Medium",
55
39
  "seriesKey": "Data 1"
56
40
  }
57
41
  ],
@@ -77,6 +61,7 @@
77
61
  "rightAxisTickColor": "#333",
78
62
  "numTicks": "",
79
63
  "axisPadding": 0,
64
+ "scalePadding": 10,
80
65
  "tickRotation": 0,
81
66
  "anchors": [],
82
67
  "label": "Y-Axis Label Example"
@@ -158,6 +143,7 @@
158
143
  "indexLabel": "",
159
144
  "download": true,
160
145
  "showVertical": false,
146
+ "dateDisplayFormat": "",
161
147
  "show": true
162
148
  },
163
149
  "orientation": "vertical",
@@ -186,25 +172,55 @@
186
172
  "data": [
187
173
  {
188
174
  "Year": "2015",
189
- "Data 1": "25",
175
+ "Data 1": "44",
190
176
  "Data 2": "20",
191
177
  "Data 3": "55"
192
178
  },
193
179
  {
194
180
  "Year": "2016",
195
- "Data 1": "35",
181
+ "Data 1": "",
196
182
  "Data 2": "30",
197
183
  "Data 3": "35"
198
184
  },
199
185
  {
200
186
  "Year": "2017",
201
- "Data 1": "22",
187
+ "Data 1": "133",
202
188
  "Data 2": "38",
203
- "Data 3": "40"
189
+ "Data 3": ""
204
190
  },
205
191
  {
206
192
  "Year": "2018",
207
- "Data 1": "40",
193
+ "Data 1": "122",
194
+ "Data 2": "40",
195
+ "Data 3": "20"
196
+ },
197
+ {
198
+ "Year": "2019",
199
+ "Data 1": "12",
200
+ "Data 2": "40",
201
+ "Data 3": ""
202
+ },
203
+ {
204
+ "Year": "2020",
205
+ "Data 1": "55",
206
+ "Data 2": "40",
207
+ "Data 3": "20"
208
+ },
209
+ {
210
+ "Year": "2021",
211
+ "Data 1": "34",
212
+ "Data 2": "40",
213
+ "Data 3": "20"
214
+ },
215
+ {
216
+ "Year": "2022",
217
+ "Data 1": "",
218
+ "Data 2": "40",
219
+ "Data 3": "20"
220
+ },
221
+ {
222
+ "Year": "2023",
223
+ "Data 1": "65",
208
224
  "Data 2": "40",
209
225
  "Data 3": "20"
210
226
  }
@@ -251,20 +267,21 @@
251
267
  },
252
268
  {
253
269
  "dataKey": "Data 2",
254
- "type": "Bar",
255
- "tooltip": true,
256
- "axis": "Left"
270
+ "type": "Line",
271
+ "axis": "Left",
272
+ "tooltip": true
257
273
  },
258
274
  {
259
275
  "dataKey": "Data 3",
260
- "type": "Bar",
261
- "tooltip": true,
262
- "axis": "Left"
276
+ "type": "Line",
277
+ "axis": "Left",
278
+ "tooltip": true
263
279
  }
264
280
  ],
265
281
  "tooltips": {
266
282
  "opacity": 90,
267
- "singleSeries": false
283
+ "singleSeries": false,
284
+ "dateDisplayFormat": ""
268
285
  },
269
286
  "forestPlot": {
270
287
  "startAt": 0,
@@ -317,25 +334,55 @@
317
334
  "data": [
318
335
  {
319
336
  "Year": "2015",
320
- "Data 1": "25",
337
+ "Data 1": "44",
321
338
  "Data 2": "20",
322
339
  "Data 3": "55"
323
340
  },
324
341
  {
325
342
  "Year": "2016",
326
- "Data 1": "35",
343
+ "Data 1": "",
327
344
  "Data 2": "30",
328
345
  "Data 3": "35"
329
346
  },
330
347
  {
331
348
  "Year": "2017",
332
- "Data 1": "22",
349
+ "Data 1": "133",
333
350
  "Data 2": "38",
334
- "Data 3": "40"
351
+ "Data 3": ""
335
352
  },
336
353
  {
337
354
  "Year": "2018",
338
- "Data 1": "40",
355
+ "Data 1": "122",
356
+ "Data 2": "40",
357
+ "Data 3": "20"
358
+ },
359
+ {
360
+ "Year": "2019",
361
+ "Data 1": "12",
362
+ "Data 2": "40",
363
+ "Data 3": ""
364
+ },
365
+ {
366
+ "Year": "2020",
367
+ "Data 1": "55",
368
+ "Data 2": "40",
369
+ "Data 3": "20"
370
+ },
371
+ {
372
+ "Year": "2021",
373
+ "Data 1": "34",
374
+ "Data 2": "40",
375
+ "Data 3": "20"
376
+ },
377
+ {
378
+ "Year": "2022",
379
+ "Data 1": "",
380
+ "Data 2": "40",
381
+ "Data 3": "20"
382
+ },
383
+ {
384
+ "Year": "2023",
385
+ "Data 1": "65",
339
386
  "Data 2": "40",
340
387
  "Data 3": "20"
341
388
  }
@@ -22,6 +22,7 @@
22
22
  "label": "X-Axis Example Label",
23
23
  "type": "date",
24
24
  "dateParseFormat": "%m/%d/%Y",
25
+ "sortDates": true,
25
26
  "dateDisplayFormat": "%m/%d/%Y"
26
27
  },
27
28
  "table": {
@@ -121,4 +122,4 @@
121
122
  "type": "Line"
122
123
  }
123
124
  ]
124
- }
125
+ }
@@ -29,6 +29,7 @@
29
29
  "right": 5
30
30
  },
31
31
  "suppressedData": [],
32
+ "preliminaryData": [],
32
33
  "yAxis": {
33
34
  "hideAxis": false,
34
35
  "displayNumbersOnBar": false,
@@ -51,6 +52,7 @@
51
52
  "rightAxisTickColor": "#333",
52
53
  "numTicks": "9",
53
54
  "axisPadding": 0,
55
+ "scalePadding": 10,
54
56
  "tickRotation": 0,
55
57
  "anchors": [],
56
58
  "label": "Y-Axis Example Label"
@@ -134,6 +136,7 @@
134
136
  "indexLabel": "Data Group",
135
137
  "download": true,
136
138
  "showVertical": false,
139
+ "dateDisplayFormat": "",
137
140
  "show": true
138
141
  },
139
142
  "orientation": "vertical",
@@ -153,6 +156,8 @@
153
156
  "dynamicLegendChartMessage": "Select Options from the Legend",
154
157
  "lineMode": false,
155
158
  "verticalSorted": false,
159
+ "highlightOnHover": false,
160
+ "seriesHighlight": [],
156
161
  "position": "right",
157
162
  "label": "Type of Data"
158
163
  },
@@ -276,7 +281,9 @@
276
281
  }
277
282
  ],
278
283
  "tooltips": {
279
- "opacity": 90
284
+ "opacity": 90,
285
+ "singleSeries": false,
286
+ "dateDisplayFormat": ""
280
287
  },
281
288
  "forestPlot": {
282
289
  "startAt": 0,
@@ -319,9 +326,9 @@
319
326
  "leftWidthOffset": 0,
320
327
  "rightWidthOffset": 0,
321
328
  "showZeroLine": false,
322
- "hideDateCategoryCol": false,
323
329
  "leftLabel": "",
324
330
  "rightLabel": "",
331
+ "hideDateCategoryCol": false,
325
332
  "width": "auto",
326
333
  "lowerCiField": "",
327
334
  "upperCiField": ""
@@ -329,6 +336,48 @@
329
336
  "area": {
330
337
  "isStacked": false
331
338
  },
339
+ "sankey": {
340
+ "title": {
341
+ "defaultColor": "black"
342
+ },
343
+ "iterations": 1,
344
+ "rxValue": 0.9,
345
+ "overallSize": {
346
+ "width": 900,
347
+ "height": 700
348
+ },
349
+ "margin": {
350
+ "margin_y": 25,
351
+ "margin_x": 0
352
+ },
353
+ "nodeSize": {
354
+ "nodeWidth": 26,
355
+ "nodeHeight": 40
356
+ },
357
+ "nodePadding": 55,
358
+ "nodeFontColor": "black",
359
+ "nodeColor": {
360
+ "default": "#ff8500",
361
+ "inactive": "#808080"
362
+ },
363
+ "linkColor": {
364
+ "default": "#ffc900",
365
+ "inactive": "#D3D3D3"
366
+ },
367
+ "opacity": {
368
+ "nodeOpacityDefault": 1,
369
+ "nodeOpacityInactive": 0.1,
370
+ "LinkOpacityDefault": 1,
371
+ "LinkOpacityInactive": 0.1
372
+ },
373
+ "storyNodeFontColor": "#006778",
374
+ "storyNodeText": [],
375
+ "nodeValueStyle": {
376
+ "textBefore": "(",
377
+ "textAfter": ")"
378
+ },
379
+ "data": []
380
+ },
332
381
  "showChartBrush": false,
333
382
  "height": "375",
334
383
  "data": [
@@ -387,17 +436,18 @@
387
436
  "Data 6": "300"
388
437
  }
389
438
  ],
390
- "visualizationType": "Bar",
439
+ "visualizationType": "Line",
391
440
  "regions": [
392
441
  {
393
442
  "from": "03/15/2016",
394
443
  "to": "05/15/2016",
395
444
  "label": "Region Applied to Timeline",
396
445
  "color": "Black",
397
- "background": "Grey"
446
+ "background": "Grey",
447
+ "fromType": "Fixed"
398
448
  }
399
449
  ],
400
- "validated": 4.23,
450
+ "validated": "4.24.3",
401
451
  "formattedData": [
402
452
  {
403
453
  "Date": "1/15/2016",