@cdc/chart 4.23.11 → 4.24.2

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 (104) hide show
  1. package/dist/cdcchart.js +35740 -35027
  2. package/examples/feature/bar/additional-column-tooltip.json +446 -0
  3. package/examples/feature/bar/tall-data.json +98 -0
  4. package/examples/feature/forest-plot/forest-plot.json +63 -19
  5. package/examples/feature/forest-plot/linear.json +52 -3
  6. package/examples/feature/forest-plot/log.json +26 -0
  7. package/examples/feature/forest-plot/logarithmic.json +0 -35
  8. package/examples/feature/line/line-chart-preliminary.json +393 -0
  9. package/examples/feature/regions/index.json +9 -5
  10. package/examples/feature/scatterplot/scatterplot.json +272 -33
  11. package/index.html +10 -8
  12. package/package.json +2 -2
  13. package/src/CdcChart.tsx +70 -234
  14. package/src/ConfigContext.tsx +6 -0
  15. package/src/_stories/ChartEditor.stories.tsx +22 -0
  16. package/src/_stories/ChartLine.preliminary.tsx +19 -0
  17. package/src/_stories/_mock/pie_config.json +192 -0
  18. package/src/_stories/_mock/pie_data.json +218 -0
  19. package/src/_stories/_mock/preliminary_mock.json +346 -0
  20. package/src/components/{AreaChart.Stacked.jsx → AreaChart/components/AreaChart.Stacked.jsx} +2 -2
  21. package/src/components/{AreaChart.jsx → AreaChart/components/AreaChart.jsx} +2 -26
  22. package/src/components/AreaChart/index.tsx +4 -0
  23. package/src/components/{BarChart.Horizontal.tsx → BarChart/components/BarChart.Horizontal.tsx} +8 -8
  24. package/src/components/{BarChart.StackedHorizontal.tsx → BarChart/components/BarChart.StackedHorizontal.tsx} +37 -7
  25. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +108 -0
  26. package/src/components/{BarChart.Vertical.tsx → BarChart/components/BarChart.Vertical.tsx} +53 -70
  27. package/src/components/BarChart/components/BarChart.jsx +39 -0
  28. package/src/components/{BarChartType.jsx → BarChart/components/BarChartType.jsx} +0 -2
  29. package/src/components/BarChart/components/context.tsx +13 -0
  30. package/src/components/BarChart/index.tsx +3 -0
  31. package/src/components/{BoxPlot.jsx → BoxPlot/BoxPlot.jsx} +10 -9
  32. package/src/components/BoxPlot/index.tsx +3 -0
  33. package/src/components/EditorPanel/EditorPanel.tsx +2776 -0
  34. package/src/components/EditorPanel/EditorPanelContext.ts +40 -0
  35. package/src/components/EditorPanel/components/PanelProps.ts +3 -0
  36. package/src/components/EditorPanel/components/Panels/Panel.BoxPlot.tsx +148 -0
  37. package/src/components/{ForestPlotSettings.jsx → EditorPanel/components/Panels/Panel.ForestPlotSettings.tsx} +97 -167
  38. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +160 -0
  39. package/src/components/EditorPanel/components/Panels/Panel.Regions.tsx +168 -0
  40. package/src/components/{Series.jsx → EditorPanel/components/Panels/Panel.Series.tsx} +4 -4
  41. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +297 -0
  42. package/src/components/EditorPanel/components/Panels/index.tsx +17 -0
  43. package/src/components/EditorPanel/components/panels.scss +72 -0
  44. package/src/components/EditorPanel/editor-panel.scss +739 -0
  45. package/src/components/EditorPanel/index.tsx +3 -0
  46. package/src/{hooks → components/EditorPanel}/useEditorPermissions.js +34 -2
  47. package/src/components/{Forecasting.jsx → Forecasting/Forecasting.jsx} +1 -1
  48. package/src/components/Forecasting/index.tsx +3 -0
  49. package/src/components/ForestPlot/ForestPlot.tsx +254 -0
  50. package/src/components/ForestPlot/ForestPlotProps.ts +7 -0
  51. package/src/components/ForestPlot/index.tsx +1 -209
  52. package/src/components/Legend/Legend.Component.tsx +199 -0
  53. package/src/components/Legend/Legend.tsx +28 -0
  54. package/src/components/Legend/helpers/createFormatLabels.tsx +140 -0
  55. package/src/components/Legend/index.tsx +3 -0
  56. package/src/components/LineChart/LineChartProps.ts +29 -0
  57. package/src/components/LineChart/components/LineChart.Circle.tsx +147 -0
  58. package/src/components/LineChart/helpers.ts +45 -0
  59. package/src/components/LineChart/index.tsx +111 -23
  60. package/src/components/LinearChart.jsx +55 -72
  61. package/src/components/PairedBarChart.jsx +4 -2
  62. package/src/components/{PieChart.jsx → PieChart/PieChart.tsx} +93 -31
  63. package/src/components/PieChart/index.tsx +3 -0
  64. package/src/components/Regions/components/Regions.tsx +144 -0
  65. package/src/components/Regions/index.tsx +3 -0
  66. package/src/components/{ScatterPlot.jsx → ScatterPlot/ScatterPlot.jsx} +3 -3
  67. package/src/components/ScatterPlot/index.tsx +3 -0
  68. package/src/components/{SparkLine.jsx → Sparkline/SparkLine.jsx} +2 -2
  69. package/src/components/Sparkline/index.tsx +3 -0
  70. package/src/data/initial-state.js +10 -8
  71. package/src/helpers/abbreviateNumber.ts +17 -0
  72. package/src/helpers/computeMarginBottom.ts +55 -0
  73. package/src/helpers/filterData.ts +18 -0
  74. package/src/helpers/generateColorsArray.ts +8 -0
  75. package/src/helpers/getQuartiles.ts +30 -0
  76. package/src/helpers/handleChartAriaLabels.ts +19 -0
  77. package/src/helpers/handleLineType.ts +18 -0
  78. package/src/helpers/lineOptions.ts +18 -0
  79. package/src/helpers/sort.ts +7 -0
  80. package/src/helpers/tests/computeMarginBottom.test.ts +20 -0
  81. package/src/hooks/useBarChart.js +7 -6
  82. package/src/hooks/useHighlightedBars.js +1 -1
  83. package/src/hooks/useMinMax.ts +3 -3
  84. package/src/hooks/useScales.ts +19 -6
  85. package/src/hooks/{useTooltip.jsx → useTooltip.tsx} +31 -25
  86. package/src/scss/main.scss +0 -3
  87. package/src/types/ChartConfig.ts +167 -23
  88. package/src/types/ChartContext.ts +34 -12
  89. package/src/types/ForestPlot.ts +7 -14
  90. package/src/types/Label.ts +7 -0
  91. package/examples/feature/scatterplot/scatterplot-continuous.csv +0 -17
  92. package/src/ConfigContext.jsx +0 -5
  93. package/src/components/BarChart.StackedVertical.tsx +0 -91
  94. package/src/components/BarChart.jsx +0 -30
  95. package/src/components/EditorPanel.jsx +0 -3356
  96. package/src/components/ForestPlot/Readme.md +0 -0
  97. package/src/components/Legend.jsx +0 -310
  98. package/src/components/LineChart/LineChart.Circle.tsx +0 -105
  99. package/src/scss/LinearChart.scss +0 -0
  100. package/src/scss/editor-panel.scss +0 -745
  101. package/src/scss/legend.scss +0 -206
  102. package/src/scss/mixins.scss +0 -0
  103. package/src/scss/variables.scss +0 -1
  104. package/src/types/ChartProps.ts +0 -7
@@ -0,0 +1,393 @@
1
+ {
2
+ "type": "chart",
3
+ "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
7
+ "title": "Example Stacked Bar Chart",
8
+ "showTitle": true,
9
+ "showDownloadMediaButton": false,
10
+ "theme": "theme-orange",
11
+ "animate": false,
12
+ "fontSize": "medium",
13
+ "lineDatapointStyle": "always show",
14
+ "lineDatapointColor": "Same as Line",
15
+ "barHasBorder": "false",
16
+ "isLollipopChart": false,
17
+ "lollipopShape": "circle",
18
+ "lollipopColorStyle": "two-tone",
19
+ "visualizationSubType": "stacked",
20
+ "barStyle": "",
21
+ "roundingStyle": "standard",
22
+ "tipRounding": "top",
23
+ "isResponsiveTicks": false,
24
+ "general": {
25
+ "showDownloadButton": false
26
+ },
27
+ "padding": {
28
+ "left": 5,
29
+ "right": 5
30
+ },
31
+ "suppressedData": [],
32
+ "preliminaryData": [
33
+ {
34
+ "type": "effect",
35
+ "label": "dashed",
36
+ "column": "Data 2",
37
+ "value": "38",
38
+ "style": "Dashed Medium",
39
+ "seriesKey": "Data 1"
40
+ }
41
+ ],
42
+ "yAxis": {
43
+ "hideAxis": false,
44
+ "displayNumbersOnBar": false,
45
+ "hideLabel": false,
46
+ "hideTicks": false,
47
+ "size": "64",
48
+ "gridLines": false,
49
+ "enablePadding": false,
50
+ "min": "",
51
+ "max": "",
52
+ "labelColor": "#333",
53
+ "tickLabelColor": "#333",
54
+ "tickColor": "#333",
55
+ "rightHideAxis": true,
56
+ "rightAxisSize": 0,
57
+ "rightLabel": "",
58
+ "rightLabelOffsetSize": 0,
59
+ "rightAxisLabelColor": "#333",
60
+ "rightAxisTickLabelColor": "#333",
61
+ "rightAxisTickColor": "#333",
62
+ "numTicks": "",
63
+ "axisPadding": 0,
64
+ "scalePadding": 10,
65
+ "tickRotation": 0,
66
+ "anchors": [],
67
+ "label": "Y-Axis Label Example"
68
+ },
69
+ "boxplot": {
70
+ "plots": [],
71
+ "borders": "true",
72
+ "firstQuartilePercentage": 25,
73
+ "thirdQuartilePercentage": 75,
74
+ "boxWidthPercentage": 40,
75
+ "plotOutlierValues": false,
76
+ "plotNonOutlierValues": true,
77
+ "legend": {
78
+ "showHowToReadText": false,
79
+ "howToReadText": ""
80
+ },
81
+ "labels": {
82
+ "q1": "Lower Quartile",
83
+ "q2": "q2",
84
+ "q3": "Upper Quartile",
85
+ "q4": "q4",
86
+ "minimum": "Minimum",
87
+ "maximum": "Maximum",
88
+ "mean": "Mean",
89
+ "median": "Median",
90
+ "sd": "Standard Deviation",
91
+ "iqr": "Interquartile Range",
92
+ "total": "Total",
93
+ "outliers": "Outliers",
94
+ "values": "Values",
95
+ "lowerBounds": "Lower Bounds",
96
+ "upperBounds": "Upper Bounds"
97
+ }
98
+ },
99
+ "topAxis": {
100
+ "hasLine": false
101
+ },
102
+ "isLegendValue": false,
103
+ "barThickness": 0.35,
104
+ "barHeight": 25,
105
+ "barSpace": 15,
106
+ "heights": {
107
+ "vertical": 300,
108
+ "horizontal": 750
109
+ },
110
+ "xAxis": {
111
+ "sortDates": false,
112
+ "anchors": [],
113
+ "type": "categorical",
114
+ "showTargetLabel": true,
115
+ "targetLabel": "Target",
116
+ "hideAxis": false,
117
+ "hideLabel": false,
118
+ "hideTicks": false,
119
+ "size": "67",
120
+ "tickRotation": "25",
121
+ "min": "",
122
+ "max": "",
123
+ "labelColor": "#333",
124
+ "tickLabelColor": "#333",
125
+ "tickColor": "#333",
126
+ "numTicks": "",
127
+ "labelOffset": 65,
128
+ "axisPadding": 0,
129
+ "target": 0,
130
+ "maxTickRotation": 0,
131
+ "dataKey": "Year",
132
+ "label": "X-Axis Label Example",
133
+ "tickWidthMax": 41
134
+ },
135
+ "table": {
136
+ "label": "Data Table",
137
+ "expanded": true,
138
+ "limitHeight": false,
139
+ "height": "",
140
+ "caption": "",
141
+ "showDownloadUrl": false,
142
+ "showDataTableLink": true,
143
+ "indexLabel": "",
144
+ "download": true,
145
+ "showVertical": false,
146
+ "dateDisplayFormat": "",
147
+ "show": true
148
+ },
149
+ "orientation": "vertical",
150
+ "color": "pinkpurple",
151
+ "columns": {},
152
+ "legend": {
153
+ "hide": false,
154
+ "behavior": "isolate",
155
+ "singleRow": false,
156
+ "colorCode": "",
157
+ "reverseLabelOrder": false,
158
+ "description": "",
159
+ "dynamicLegend": false,
160
+ "dynamicLegendDefaultText": "Show All",
161
+ "dynamicLegendItemLimit": 5,
162
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
163
+ "dynamicLegendChartMessage": "Select Options from the Legend",
164
+ "lineMode": false,
165
+ "verticalSorted": false,
166
+ "highlightOnHover": false,
167
+ "position": "right",
168
+ "label": "Data Type"
169
+ },
170
+ "brush": {
171
+ "height": 25,
172
+ "data": [
173
+ {
174
+ "Year": "2015",
175
+ "Data 1": "44",
176
+ "Data 2": "20",
177
+ "Data 3": "55"
178
+ },
179
+ {
180
+ "Year": "2016",
181
+ "Data 1": "",
182
+ "Data 2": "30",
183
+ "Data 3": "35"
184
+ },
185
+ {
186
+ "Year": "2017",
187
+ "Data 1": "133",
188
+ "Data 2": "38",
189
+ "Data 3": ""
190
+ },
191
+ {
192
+ "Year": "2018",
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",
224
+ "Data 2": "40",
225
+ "Data 3": "20"
226
+ }
227
+ ],
228
+ "active": false
229
+ },
230
+ "exclusions": {
231
+ "active": false,
232
+ "keys": []
233
+ },
234
+ "palette": "qualitative-bold",
235
+ "isPaletteReversed": false,
236
+ "twoColor": {
237
+ "palette": "monochrome-1",
238
+ "isPaletteReversed": false
239
+ },
240
+ "labels": false,
241
+ "dataFormat": {
242
+ "commas": false,
243
+ "prefix": "",
244
+ "suffix": "%",
245
+ "abbreviated": false,
246
+ "bottomSuffix": "",
247
+ "bottomPrefix": "",
248
+ "bottomAbbreviated": false
249
+ },
250
+ "confidenceKeys": {},
251
+ "visual": {
252
+ "border": true,
253
+ "accent": true,
254
+ "background": true,
255
+ "verticalHoverLine": false,
256
+ "horizontalHoverLine": false
257
+ },
258
+ "useLogScale": false,
259
+ "filterBehavior": "Filter Change",
260
+ "highlightedBarValues": [],
261
+ "series": [
262
+ {
263
+ "dataKey": "Data 1",
264
+ "type": "Bar",
265
+ "tooltip": true,
266
+ "axis": "Left"
267
+ },
268
+ {
269
+ "dataKey": "Data 2",
270
+ "type": "Line",
271
+ "axis": "Left",
272
+ "tooltip": true
273
+ },
274
+ {
275
+ "dataKey": "Data 3",
276
+ "type": "Line",
277
+ "axis": "Left",
278
+ "tooltip": true
279
+ }
280
+ ],
281
+ "tooltips": {
282
+ "opacity": 90,
283
+ "singleSeries": false,
284
+ "dateDisplayFormat": ""
285
+ },
286
+ "forestPlot": {
287
+ "startAt": 0,
288
+ "colors": {
289
+ "line": "",
290
+ "shape": ""
291
+ },
292
+ "lineOfNoEffect": {
293
+ "show": true
294
+ },
295
+ "type": "",
296
+ "pooledResult": {
297
+ "diamondHeight": 5,
298
+ "column": ""
299
+ },
300
+ "estimateField": "",
301
+ "estimateRadius": "",
302
+ "shape": "square",
303
+ "rowHeight": 20,
304
+ "description": {
305
+ "show": true,
306
+ "text": "description",
307
+ "location": 0
308
+ },
309
+ "result": {
310
+ "show": true,
311
+ "text": "result",
312
+ "location": 100
313
+ },
314
+ "radius": {
315
+ "min": 2,
316
+ "max": 10,
317
+ "scalingColumn": ""
318
+ },
319
+ "regression": {
320
+ "lower": 0,
321
+ "upper": 0,
322
+ "estimateField": 0
323
+ },
324
+ "leftWidthOffset": 0,
325
+ "rightWidthOffset": 0,
326
+ "showZeroLine": false,
327
+ "leftLabel": "",
328
+ "rightLabel": ""
329
+ },
330
+ "area": {
331
+ "isStacked": false
332
+ },
333
+ "height": "375",
334
+ "data": [
335
+ {
336
+ "Year": "2015",
337
+ "Data 1": "44",
338
+ "Data 2": "20",
339
+ "Data 3": "55"
340
+ },
341
+ {
342
+ "Year": "2016",
343
+ "Data 1": "",
344
+ "Data 2": "30",
345
+ "Data 3": "35"
346
+ },
347
+ {
348
+ "Year": "2017",
349
+ "Data 1": "133",
350
+ "Data 2": "38",
351
+ "Data 3": ""
352
+ },
353
+ {
354
+ "Year": "2018",
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",
386
+ "Data 2": "40",
387
+ "Data 3": "20"
388
+ }
389
+ ],
390
+ "visualizationType": "Line",
391
+ "validated": 4.23,
392
+ "dynamicMarginTop": 0
393
+ }
@@ -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,
@@ -97,7 +98,7 @@
97
98
  "horizontal": 750
98
99
  },
99
100
  "xAxis": {
100
- "sortDates": false,
101
+ "sortDates": true,
101
102
  "anchors": [],
102
103
  "type": "date",
103
104
  "showTargetLabel": true,
@@ -153,6 +154,7 @@
153
154
  "dynamicLegendChartMessage": "Select Options from the Legend",
154
155
  "lineMode": false,
155
156
  "verticalSorted": false,
157
+ "highlightOnHover": false,
156
158
  "position": "right",
157
159
  "label": "Type of Data"
158
160
  },
@@ -276,7 +278,8 @@
276
278
  }
277
279
  ],
278
280
  "tooltips": {
279
- "opacity": 90
281
+ "opacity": 90,
282
+ "singleSeries": false
280
283
  },
281
284
  "forestPlot": {
282
285
  "startAt": 0,
@@ -319,9 +322,9 @@
319
322
  "leftWidthOffset": 0,
320
323
  "rightWidthOffset": 0,
321
324
  "showZeroLine": false,
322
- "hideDateCategoryCol": false,
323
325
  "leftLabel": "",
324
326
  "rightLabel": "",
327
+ "hideDateCategoryCol": false,
325
328
  "width": "auto",
326
329
  "lowerCiField": "",
327
330
  "upperCiField": ""
@@ -387,14 +390,15 @@
387
390
  "Data 6": "300"
388
391
  }
389
392
  ],
390
- "visualizationType": "Bar",
393
+ "visualizationType": "Line",
391
394
  "regions": [
392
395
  {
393
396
  "from": "03/15/2016",
394
397
  "to": "05/15/2016",
395
398
  "label": "Region Applied to Timeline",
396
399
  "color": "Black",
397
- "background": "Grey"
400
+ "background": "Grey",
401
+ "fromType": "Previous Days"
398
402
  }
399
403
  ],
400
404
  "validated": 4.23,