@cdc/chart 4.23.10-alpha → 4.23.11

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 (54) hide show
  1. package/dist/cdcchart.js +30598 -28669
  2. package/examples/feature/bar/example-bar-chart.json +1 -46
  3. package/examples/feature/dev-4261.json +399 -0
  4. package/examples/feature/forest-plot/{broken.json → linear.json} +55 -50
  5. package/examples/{private/forest-plot.json → feature/forest-plot/logarithmic.json} +305 -355
  6. package/examples/feature/line/line-points.json +340 -0
  7. package/examples/feature/regions/index.json +462 -0
  8. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +181 -48
  9. package/examples/sparkline-multilple.json +846 -0
  10. package/index.html +11 -8
  11. package/package.json +3 -3
  12. package/src/CdcChart.tsx +71 -60
  13. package/src/_stories/Chart.tooltip.stories.tsx +305 -0
  14. package/src/_stories/ChartBrush.stories.tsx +19 -0
  15. package/src/_stories/ChartSuppress.stories.tsx +19 -0
  16. package/{examples/private/missing-color.json → src/_stories/_mock/brush_mock.json} +392 -332
  17. package/src/_stories/_mock/suppress_mock.json +911 -0
  18. package/src/components/AreaChart.Stacked.jsx +4 -5
  19. package/src/components/AreaChart.jsx +6 -35
  20. package/src/components/{BarChart.Horizontal.jsx → BarChart.Horizontal.tsx} +106 -29
  21. package/src/components/{BarChart.StackedHorizontal.jsx → BarChart.StackedHorizontal.tsx} +22 -17
  22. package/src/components/{BarChart.StackedVertical.jsx → BarChart.StackedVertical.tsx} +22 -26
  23. package/src/components/{BarChart.Vertical.jsx → BarChart.Vertical.tsx} +175 -31
  24. package/src/components/BarChart.jsx +1 -1
  25. package/src/components/DeviationBar.jsx +4 -3
  26. package/src/components/EditorPanel.jsx +176 -50
  27. package/src/components/ForestPlot/ForestPlotProps.ts +11 -0
  28. package/src/components/ForestPlot/index.scss +1 -0
  29. package/src/components/{ForestPlot.jsx → ForestPlot/index.tsx} +51 -31
  30. package/src/components/ForestPlotSettings.jsx +162 -112
  31. package/src/components/Legend.jsx +35 -2
  32. package/src/components/{LineChart.Circle.tsx → LineChart/LineChart.Circle.tsx} +26 -23
  33. package/src/components/LineChart/LineChartProps.ts +17 -0
  34. package/src/components/LineChart/index.scss +1 -0
  35. package/src/components/{LineChart.tsx → LineChart/index.tsx} +60 -24
  36. package/src/components/LinearChart.jsx +120 -60
  37. package/src/components/PairedBarChart.jsx +2 -2
  38. package/src/components/Series.jsx +22 -3
  39. package/src/components/ZoomBrush.tsx +168 -0
  40. package/src/data/initial-state.js +27 -12
  41. package/src/hooks/useBarChart.js +70 -6
  42. package/src/hooks/useColorScale.ts +50 -0
  43. package/src/hooks/useEditorPermissions.js +22 -4
  44. package/src/hooks/{useMinMax.js → useMinMax.ts} +75 -23
  45. package/src/hooks/{useRightAxis.js → useRightAxis.ts} +10 -2
  46. package/src/hooks/{useScales.js → useScales.ts} +64 -17
  47. package/src/hooks/useTooltip.jsx +68 -41
  48. package/src/scss/main.scss +3 -35
  49. package/src/types/ChartConfig.ts +43 -0
  50. package/src/types/ChartContext.ts +38 -0
  51. package/src/types/ChartProps.ts +7 -0
  52. package/src/types/ForestPlot.ts +60 -0
  53. package/examples/private/full.json +0 -45324
  54. /package/{examples/private/TESTING.json → src/components/ForestPlot/Readme.md} +0 -0
@@ -498,58 +498,13 @@
498
498
  "height": 300,
499
499
  "data": [
500
500
  {
501
- "Date": "1/15/2016",
501
+ "Date": "2023-08-28T00:00:00",
502
502
  "Data 1": "90",
503
503
  "Data 2": "135",
504
504
  "Data 3": "300",
505
505
  "Data 4": "95",
506
506
  "Data 5": "120",
507
507
  "Data 6": "Bad"
508
- },
509
- {
510
- "Date": "2/15/2016",
511
- "Data 1": "40",
512
- "Data 2": "90",
513
- "Data 3": "240",
514
- "Data 4": "60",
515
- "Data 5": "160",
516
- "Data 6": "Good"
517
- },
518
- {
519
- "Date": "3/15/2016",
520
- "Data 1": "50",
521
- "Data 2": "300",
522
- "Data 3": "290",
523
- "Data 4": "100",
524
- "Data 5": "200",
525
- "Data 6": "Good"
526
- },
527
- {
528
- "Date": "4/15/2016",
529
- "Data 1": "120",
530
- "Data 2": "160",
531
- "Data 3": "230",
532
- "Data 4": "180",
533
- "Data 5": "160",
534
- "Data 6": "Good"
535
- },
536
- {
537
- "Date": "5/15/2016",
538
- "Data 1": "80",
539
- "Data 2": "350",
540
- "Data 3": "300",
541
- "Data 4": "150",
542
- "Data 5": "130",
543
- "Data 6": "Good"
544
- },
545
- {
546
- "Date": "6/15/2016",
547
- "Data 1": "80",
548
- "Data 2": "220",
549
- "Data 3": "320",
550
- "Data 4": "100",
551
- "Data 5": "220",
552
- "Data 6": "ABC"
553
508
  }
554
509
  ],
555
510
  "visualizationType": "Bar",
@@ -0,0 +1,399 @@
1
+ {
2
+ "type": "chart",
3
+ "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
7
+ "title": "",
8
+ "showTitle": true,
9
+ "showDownloadMediaButton": false,
10
+ "theme": "theme-blue",
11
+ "animate": false,
12
+ "fontSize": "medium",
13
+ "lineDatapointStyle": "hover",
14
+ "barHasBorder": "false",
15
+ "isLollipopChart": false,
16
+ "lollipopShape": "circle",
17
+ "lollipopColorStyle": "two-tone",
18
+ "visualizationSubType": "regular",
19
+ "barStyle": "",
20
+ "roundingStyle": "standard",
21
+ "tipRounding": "top",
22
+ "isResponsiveTicks": false,
23
+ "general": {
24
+ "showDownloadButton": false
25
+ },
26
+ "padding": {
27
+ "left": 5,
28
+ "right": 5
29
+ },
30
+ "yAxis": {
31
+ "hideAxis": false,
32
+ "displayNumbersOnBar": false,
33
+ "hideLabel": false,
34
+ "hideTicks": false,
35
+ "size": 50,
36
+ "gridLines": false,
37
+ "enablePadding": false,
38
+ "min": "",
39
+ "max": "",
40
+ "labelColor": "#333",
41
+ "tickLabelColor": "#333",
42
+ "tickColor": "#333",
43
+ "rightHideAxis": true,
44
+ "rightAxisSize": 50,
45
+ "rightLabel": "",
46
+ "rightLabelOffsetSize": 0,
47
+ "rightAxisLabelColor": "#333",
48
+ "rightAxisTickLabelColor": "#333",
49
+ "rightAxisTickColor": "#333",
50
+ "numTicks": "",
51
+ "axisPadding": 0,
52
+ "tickRotation": 0,
53
+ "anchors": []
54
+ },
55
+ "boxplot": {
56
+ "plots": [],
57
+ "borders": "true",
58
+ "firstQuartilePercentage": 25,
59
+ "thirdQuartilePercentage": 75,
60
+ "boxWidthPercentage": 40,
61
+ "plotOutlierValues": false,
62
+ "plotNonOutlierValues": true,
63
+ "legend": {
64
+ "showHowToReadText": false,
65
+ "howToReadText": ""
66
+ },
67
+ "labels": {
68
+ "q1": "Lower Quartile",
69
+ "q2": "q2",
70
+ "q3": "Upper Quartile",
71
+ "q4": "q4",
72
+ "minimum": "Minimum",
73
+ "maximum": "Maximum",
74
+ "mean": "Mean",
75
+ "median": "Median",
76
+ "sd": "Standard Deviation",
77
+ "iqr": "Interquartile Range",
78
+ "total": "Total",
79
+ "outliers": "Outliers",
80
+ "values": "Values",
81
+ "lowerBounds": "Lower Bounds",
82
+ "upperBounds": "Upper Bounds"
83
+ }
84
+ },
85
+ "topAxis": {
86
+ "hasLine": false
87
+ },
88
+ "isLegendValue": false,
89
+ "barThickness": 0.35,
90
+ "barHeight": 25,
91
+ "barSpace": 15,
92
+ "heights": {
93
+ "vertical": 300,
94
+ "horizontal": 750
95
+ },
96
+ "xAxis": {
97
+ "sortDates": false,
98
+ "anchors": [],
99
+ "type": "date",
100
+ "showTargetLabel": true,
101
+ "targetLabel": "Target",
102
+ "hideAxis": false,
103
+ "hideLabel": false,
104
+ "hideTicks": false,
105
+ "size": 75,
106
+ "tickRotation": 0,
107
+ "min": "",
108
+ "max": "",
109
+ "labelColor": "#333",
110
+ "tickLabelColor": "#333",
111
+ "tickColor": "#333",
112
+ "numTicks": "",
113
+ "labelOffset": 65,
114
+ "axisPadding": 0,
115
+ "target": 0,
116
+ "maxTickRotation": 0,
117
+ "dataKey": "Date",
118
+ "dateParseFormat": "%m/%d/%Y",
119
+ "dateDisplayFormat": "%m/%Y",
120
+ "tickWidthMax": 66
121
+ },
122
+ "table": {
123
+ "label": "Data Table",
124
+ "expanded": true,
125
+ "limitHeight": false,
126
+ "height": "",
127
+ "caption": "",
128
+ "showDownloadUrl": false,
129
+ "showDataTableLink": true,
130
+ "indexLabel": "",
131
+ "download": false,
132
+ "showVertical": true,
133
+ "show": true
134
+ },
135
+ "orientation": "vertical",
136
+ "color": "pinkpurple",
137
+ "columns": {},
138
+ "legend": {
139
+ "hide": false,
140
+ "behavior": "isolate",
141
+ "singleRow": false,
142
+ "colorCode": "",
143
+ "reverseLabelOrder": false,
144
+ "description": "",
145
+ "dynamicLegend": false,
146
+ "dynamicLegendDefaultText": "Show All",
147
+ "dynamicLegendItemLimit": 5,
148
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
149
+ "dynamicLegendChartMessage": "Select Options from the Legend",
150
+ "lineMode": false,
151
+ "verticalSorted": false
152
+ },
153
+ "brush": {
154
+ "height": 25,
155
+ "data": [
156
+ {
157
+ "Date": "1/15/2022",
158
+ "New Participants": "90",
159
+ "Outreach Costs": "252000"
160
+ },
161
+ {
162
+ "Date": "2/15/2022",
163
+ "New Participants": "150",
164
+ "Outreach Costs": "410000"
165
+ },
166
+ {
167
+ "Date": "3/15/2022",
168
+ "New Participants": "80",
169
+ "Outreach Costs": "275000"
170
+ },
171
+ {
172
+ "Date": "4/15/2022",
173
+ "New Participants": "146",
174
+ "Outreach Costs": "480000"
175
+ },
176
+ {
177
+ "Date": "5/15/2022",
178
+ "New Participants": "70",
179
+ "Outreach Costs": "160000"
180
+ },
181
+ {
182
+ "Date": "6/15/2022",
183
+ "New Participants": "100",
184
+ "Outreach Costs": "190000"
185
+ },
186
+ {
187
+ "Date": "7/15/2022",
188
+ "New Participants": "132",
189
+ "Outreach Costs": "380000"
190
+ },
191
+ {
192
+ "Date": "8/15/2022",
193
+ "New Participants": "75",
194
+ "Outreach Costs": "170000"
195
+ },
196
+ {
197
+ "Date": "9/15/2022",
198
+ "New Participants": "120",
199
+ "Outreach Costs": "368000"
200
+ }
201
+ ],
202
+ "active": false
203
+ },
204
+ "exclusions": {
205
+ "active": false,
206
+ "keys": []
207
+ },
208
+ "palette": "qualitative-bold",
209
+ "isPaletteReversed": false,
210
+ "twoColor": {
211
+ "palette": "monochrome-1",
212
+ "isPaletteReversed": false
213
+ },
214
+ "labels": false,
215
+ "dataFormat": {
216
+ "commas": false,
217
+ "prefix": "",
218
+ "suffix": "",
219
+ "abbreviated": false,
220
+ "bottomSuffix": "",
221
+ "bottomPrefix": "",
222
+ "bottomAbbreviated": false,
223
+ "useCommas": false,
224
+ "roundToPlace": ""
225
+ },
226
+ "confidenceKeys": {},
227
+ "visual": {
228
+ "border": true,
229
+ "accent": true,
230
+ "background": true,
231
+ "verticalHoverLine": false,
232
+ "horizontalHoverLine": false
233
+ },
234
+ "useLogScale": false,
235
+ "filterBehavior": "Filter Change",
236
+ "highlightedBarValues": [],
237
+ "series": [
238
+ {
239
+ "dataKey": "New Participants",
240
+ "type": "Bar",
241
+ "axis": "Left",
242
+ "tooltip": true
243
+ },
244
+ {
245
+ "dataKey": "Outreach Costs",
246
+ "type": "Line",
247
+ "axis": "Right",
248
+ "tooltip": true
249
+ }
250
+ ],
251
+ "tooltips": {
252
+ "opacity": 90
253
+ },
254
+ "forestPlot": {
255
+ "startAt": 0,
256
+ "width": "auto",
257
+ "colors": {
258
+ "line": "",
259
+ "shape": ""
260
+ },
261
+ "estimateField": "",
262
+ "estimateRadius": "",
263
+ "lowerCiField": "",
264
+ "upperCiField": "",
265
+ "shape": "",
266
+ "rowHeight": 20,
267
+ "showZeroLine": false,
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": 1,
280
+ "max": 8,
281
+ "scalingColumn": ""
282
+ },
283
+ "regression": {
284
+ "lower": 0,
285
+ "upper": 0,
286
+ "estimateField": 0
287
+ },
288
+ "leftWidthOffset": 0,
289
+ "rightWidthOffset": 0
290
+ },
291
+ "area": {
292
+ "isStacked": false
293
+ },
294
+ "datasets": {},
295
+ "visualizationType": "Combo",
296
+ "data": [
297
+ {
298
+ "Date": "1/15/2022",
299
+ "New Participants": "90",
300
+ "Outreach Costs": "252000"
301
+ },
302
+ {
303
+ "Date": "2/15/2022",
304
+ "New Participants": "150",
305
+ "Outreach Costs": "410000"
306
+ },
307
+ {
308
+ "Date": "3/15/2022",
309
+ "New Participants": "80",
310
+ "Outreach Costs": "275000"
311
+ },
312
+ {
313
+ "Date": "4/15/2022",
314
+ "New Participants": "146",
315
+ "Outreach Costs": "480000"
316
+ },
317
+ {
318
+ "Date": "5/15/2022",
319
+ "New Participants": "70",
320
+ "Outreach Costs": "160000"
321
+ },
322
+ {
323
+ "Date": "6/15/2022",
324
+ "New Participants": "100",
325
+ "Outreach Costs": "190000"
326
+ },
327
+ {
328
+ "Date": "7/15/2022",
329
+ "New Participants": "132",
330
+ "Outreach Costs": "380000"
331
+ },
332
+ {
333
+ "Date": "8/15/2022",
334
+ "New Participants": "75",
335
+ "Outreach Costs": "170000"
336
+ },
337
+ {
338
+ "Date": "9/15/2022",
339
+ "New Participants": "120",
340
+ "Outreach Costs": "368000"
341
+ }
342
+ ],
343
+ "dataFileName": "bar-line-combo-chart3.csv",
344
+ "dataFileSourceType": "file",
345
+ "formattedData": [
346
+ {
347
+ "Date": "1/15/2022",
348
+ "New Participants": "90",
349
+ "Outreach Costs": "252000"
350
+ },
351
+ {
352
+ "Date": "2/15/2022",
353
+ "New Participants": "150",
354
+ "Outreach Costs": "410000"
355
+ },
356
+ {
357
+ "Date": "3/15/2022",
358
+ "New Participants": "80",
359
+ "Outreach Costs": "275000"
360
+ },
361
+ {
362
+ "Date": "4/15/2022",
363
+ "New Participants": "146",
364
+ "Outreach Costs": "480000"
365
+ },
366
+ {
367
+ "Date": "5/15/2022",
368
+ "New Participants": "70",
369
+ "Outreach Costs": "160000"
370
+ },
371
+ {
372
+ "Date": "6/15/2022",
373
+ "New Participants": "100",
374
+ "Outreach Costs": "190000"
375
+ },
376
+ {
377
+ "Date": "7/15/2022",
378
+ "New Participants": "132",
379
+ "Outreach Costs": "380000"
380
+ },
381
+ {
382
+ "Date": "8/15/2022",
383
+ "New Participants": "75",
384
+ "Outreach Costs": "170000"
385
+ },
386
+ {
387
+ "Date": "9/15/2022",
388
+ "New Participants": "120",
389
+ "Outreach Costs": "368000"
390
+ }
391
+ ],
392
+ "dataDescription": {
393
+ "horizontal": false,
394
+ "series": true,
395
+ "singleRow": true
396
+ },
397
+ "validated": 4.23,
398
+ "dynamicMarginTop": 0
399
+ }
@@ -1,10 +1,12 @@
1
1
  {
2
2
  "type": "chart",
3
3
  "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
4
7
  "title": "",
5
8
  "showTitle": true,
6
9
  "showDownloadMediaButton": false,
7
- "showChartBrush": false,
8
10
  "theme": "theme-blue",
9
11
  "animate": false,
10
12
  "fontSize": "medium",
@@ -25,6 +27,7 @@
25
27
  "left": 5,
26
28
  "right": 5
27
29
  },
30
+ "suppressedData": [],
28
31
  "yAxis": {
29
32
  "hideAxis": false,
30
33
  "displayNumbersOnBar": false,
@@ -48,7 +51,8 @@
48
51
  "numTicks": "",
49
52
  "axisPadding": 0,
50
53
  "tickRotation": 0,
51
- "anchors": []
54
+ "anchors": [],
55
+ "type": "Linear"
52
56
  },
53
57
  "boxplot": {
54
58
  "plots": [],
@@ -92,6 +96,7 @@
92
96
  "horizontal": 750
93
97
  },
94
98
  "xAxis": {
99
+ "sortDates": false,
95
100
  "anchors": [],
96
101
  "type": "categorical",
97
102
  "showTargetLabel": true,
@@ -111,7 +116,8 @@
111
116
  "axisPadding": 0,
112
117
  "target": 0,
113
118
  "maxTickRotation": 0,
114
- "dataKey": "Author(s) and Year"
119
+ "dataKey": "Author(s) and Year",
120
+ "tickWidthMax": null
115
121
  },
116
122
  "table": {
117
123
  "label": "Data Table",
@@ -128,8 +134,21 @@
128
134
  },
129
135
  "orientation": "horizontal",
130
136
  "color": "pinkpurple",
131
- "columns": {},
137
+ "columns": {
138
+ "additionalColumn1": {
139
+ "label": "Estimate Field",
140
+ "dataTable": true,
141
+ "tooltips": false,
142
+ "prefix": "",
143
+ "suffix": "",
144
+ "forestPlot": false,
145
+ "startingPoint": "0",
146
+ "forestPlotAlignRight": false,
147
+ "name": "Estimate"
148
+ }
149
+ },
132
150
  "legend": {
151
+ "hide": true,
133
152
  "behavior": "isolate",
134
153
  "singleRow": false,
135
154
  "colorCode": "",
@@ -140,7 +159,15 @@
140
159
  "dynamicLegendItemLimit": 5,
141
160
  "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
142
161
  "dynamicLegendChartMessage": "Select Options from the Legend",
143
- "hide": true
162
+ "lineMode": false,
163
+ "verticalSorted": false
164
+ },
165
+ "brush": {
166
+ "height": 25,
167
+ "data": [],
168
+ "active": false,
169
+ "pattern_id": "brush_pattern",
170
+ "accent_color": "#ddd"
144
171
  },
145
172
  "exclusions": {
146
173
  "active": false,
@@ -177,52 +204,10 @@
177
204
  "tooltips": {
178
205
  "opacity": 90
179
206
  },
180
- "forestPlot": {
181
- "startAt": 0,
182
- "width": "auto",
183
- "colors": {
184
- "line": "",
185
- "shape": ""
186
- },
187
- "estimateField": "Estimate",
188
- "estimateRadius": "",
189
- "lowerCiField": "",
190
- "upperCiField": "",
191
- "shape": "circle",
192
- "rowHeight": 20,
193
- "showZeroLine": false,
194
- "description": {
195
- "show": true,
196
- "text": "description",
197
- "location": 0
198
- },
199
- "result": {
200
- "show": true,
201
- "text": "result",
202
- "location": 100
203
- },
204
- "radius": {
205
- "min": 1,
206
- "max": 8,
207
- "scalingColumn": ""
208
- },
209
- "regression": {
210
- "lower": 0,
211
- "upper": 0,
212
- "estimateField": 0
213
- },
214
- "leftWidthOffset": "17",
215
- "rightWidthOffset": "30",
216
- "lower": "Lower",
217
- "upper": "Upper",
218
- "rightWidthOffsetMobile": "0",
219
- "title": "test",
220
- "leftWidthOffsetMobile": "51"
221
- },
222
- "brush": {
223
- "pattern_id": "brush_pattern",
224
- "accent_color": "#ddd"
207
+ "area": {
208
+ "isStacked": false
225
209
  },
210
+ "showChartBrush": false,
226
211
  "datasets": {},
227
212
  "visualizationType": "Forest Plot",
228
213
  "data": [
@@ -455,6 +440,16 @@
455
440
  "Lower": "-168.5",
456
441
  "Upper": "196.5",
457
442
  "Result": "14 [-168.5, 196.5]"
443
+ },
444
+ {
445
+ "Author(s) and Year": "Total",
446
+ "Confidence": "L",
447
+ "Timing": "B",
448
+ "N": "1880",
449
+ "Estimate": "-20",
450
+ "Lower": "-30",
451
+ "Upper": "-10",
452
+ "Result": "14 [-168.5, 196.5]"
458
453
  }
459
454
  ],
460
455
  "dataFileName": "valid-forest-plot-data.csv",
@@ -689,6 +684,16 @@
689
684
  "Lower": "-168.5",
690
685
  "Upper": "196.5",
691
686
  "Result": "14 [-168.5, 196.5]"
687
+ },
688
+ {
689
+ "Author(s) and Year": "Total",
690
+ "Confidence": "L",
691
+ "Timing": "B",
692
+ "N": "1880",
693
+ "Estimate": "14",
694
+ "Lower": "-10",
695
+ "Upper": "10",
696
+ "Result": "14 [-168.5, 196.5]"
692
697
  }
693
698
  ],
694
699
  "dataDescription": {