@cdc/chart 4.23.11 → 4.24.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 (103) hide show
  1. package/dist/cdcchart.js +30220 -29764
  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 +346 -0
  9. package/examples/feature/scatterplot/scatterplot.json +272 -33
  10. package/examples/private/chart-t.json +3740 -0
  11. package/examples/private/combo.json +369 -0
  12. package/examples/private/epi-data.csv +13 -0
  13. package/examples/private/epi-data.json +62 -0
  14. package/examples/private/epi.json +403 -0
  15. package/examples/private/occupancy.json +109283 -0
  16. package/examples/private/prod-line-config.json +401 -0
  17. package/examples/private/region-data.json +822 -0
  18. package/examples/private/region-testing.json +312 -0
  19. package/examples/private/scaling.json +45325 -0
  20. package/examples/private/testing-data.json +1739 -0
  21. package/examples/private/testing.json +816 -0
  22. package/index.html +7 -7
  23. package/package.json +2 -2
  24. package/src/CdcChart.tsx +29 -210
  25. package/src/ConfigContext.tsx +6 -0
  26. package/src/_stories/ChartEditor.stories.tsx +22 -0
  27. package/src/_stories/ChartLine.preliminary.tsx +19 -0
  28. package/src/_stories/_mock/pie_config.json +191 -0
  29. package/src/_stories/_mock/pie_data.json +218 -0
  30. package/src/_stories/_mock/preliminary_mock.json +346 -0
  31. package/src/components/{AreaChart.Stacked.jsx → AreaChart/components/AreaChart.Stacked.jsx} +2 -2
  32. package/src/components/{AreaChart.jsx → AreaChart/components/AreaChart.jsx} +1 -1
  33. package/src/components/AreaChart/index.tsx +4 -0
  34. package/src/components/{BarChart.Horizontal.tsx → BarChart/components/BarChart.Horizontal.tsx} +8 -8
  35. package/src/components/{BarChart.StackedHorizontal.tsx → BarChart/components/BarChart.StackedHorizontal.tsx} +37 -7
  36. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +106 -0
  37. package/src/components/{BarChart.Vertical.tsx → BarChart/components/BarChart.Vertical.tsx} +41 -57
  38. package/src/components/BarChart/components/BarChart.jsx +39 -0
  39. package/src/components/{BarChartType.jsx → BarChart/components/BarChartType.jsx} +0 -2
  40. package/src/components/BarChart/components/context.tsx +13 -0
  41. package/src/components/BarChart/index.tsx +3 -0
  42. package/src/components/{BoxPlot.jsx → BoxPlot/BoxPlot.jsx} +1 -1
  43. package/src/components/BoxPlot/index.tsx +3 -0
  44. package/src/components/{EditorPanel.jsx → EditorPanel/EditorPanel.tsx} +667 -851
  45. package/src/components/EditorPanel/components/Panel.DateHighlighting.tsx +109 -0
  46. package/src/components/{ForestPlotSettings.jsx → EditorPanel/components/Panel.ForestPlotSettings.tsx} +87 -166
  47. package/src/components/EditorPanel/components/Panel.Regions.tsx +168 -0
  48. package/src/components/{Series.jsx → EditorPanel/components/Panel.Series.tsx} +1 -1
  49. package/src/components/EditorPanel/components/PanelProps.ts +3 -0
  50. package/src/components/EditorPanel/components/Panels.tsx +13 -0
  51. package/src/components/EditorPanel/components/panels.scss +72 -0
  52. package/src/components/EditorPanel/editor-panel.scss +751 -0
  53. package/src/components/EditorPanel/index.tsx +3 -0
  54. package/src/{hooks → components/EditorPanel}/useEditorPermissions.js +29 -2
  55. package/src/components/{Forecasting.jsx → Forecasting/Forecasting.jsx} +1 -1
  56. package/src/components/Forecasting/index.tsx +3 -0
  57. package/src/components/ForestPlot/ForestPlot.tsx +254 -0
  58. package/src/components/ForestPlot/ForestPlotProps.ts +7 -0
  59. package/src/components/ForestPlot/index.tsx +1 -209
  60. package/src/components/{Legend.jsx → Legend/Legend.tsx} +150 -113
  61. package/src/components/Legend/index.tsx +3 -0
  62. package/src/components/LineChart/LineChartProps.ts +29 -0
  63. package/src/components/LineChart/{LineChart.Circle.tsx → components/LineChart.Circle.tsx} +12 -3
  64. package/src/components/LineChart/helpers.ts +45 -0
  65. package/src/components/LineChart/index.tsx +20 -8
  66. package/src/components/LinearChart.jsx +52 -69
  67. package/src/components/{PieChart.jsx → PieChart/PieChart.tsx} +16 -7
  68. package/src/components/PieChart/index.tsx +3 -0
  69. package/src/components/Regions/components/Regions.tsx +135 -0
  70. package/src/components/Regions/index.tsx +3 -0
  71. package/src/components/{ScatterPlot.jsx → ScatterPlot/ScatterPlot.jsx} +3 -3
  72. package/src/components/ScatterPlot/index.tsx +3 -0
  73. package/src/components/{SparkLine.jsx → Sparkline/SparkLine.jsx} +2 -2
  74. package/src/components/Sparkline/index.tsx +3 -0
  75. package/src/data/initial-state.js +5 -6
  76. package/src/helpers/abbreviateNumber.ts +17 -0
  77. package/src/helpers/computeMarginBottom.ts +55 -0
  78. package/src/helpers/filterData.ts +18 -0
  79. package/src/helpers/generateColorsArray.ts +8 -0
  80. package/src/helpers/getQuartiles.ts +30 -0
  81. package/src/helpers/handleChartAriaLabels.ts +19 -0
  82. package/src/helpers/handleLineType.ts +18 -0
  83. package/src/helpers/lineOptions.ts +18 -0
  84. package/src/helpers/sort.ts +7 -0
  85. package/src/helpers/tests/computeMarginBottom.test.ts +20 -0
  86. package/src/hooks/useBarChart.js +7 -6
  87. package/src/hooks/useScales.ts +1 -1
  88. package/src/hooks/{useTooltip.jsx → useTooltip.tsx} +23 -21
  89. package/src/scss/main.scss +67 -3
  90. package/src/types/ChartConfig.ts +158 -23
  91. package/src/types/ChartContext.ts +26 -10
  92. package/src/types/ForestPlot.ts +7 -14
  93. package/examples/feature/scatterplot/scatterplot-continuous.csv +0 -17
  94. package/src/ConfigContext.jsx +0 -5
  95. package/src/components/BarChart.StackedVertical.tsx +0 -91
  96. package/src/components/BarChart.jsx +0 -30
  97. package/src/components/ForestPlot/Readme.md +0 -0
  98. package/src/scss/LinearChart.scss +0 -0
  99. package/src/scss/editor-panel.scss +0 -745
  100. package/src/scss/legend.scss +0 -206
  101. package/src/scss/mixins.scss +0 -0
  102. package/src/scss/variables.scss +0 -1
  103. package/src/types/ChartProps.ts +0 -7
@@ -1,10 +1,17 @@
1
1
  {
2
2
  "type": "chart",
3
- "title": "Scatter Plot",
3
+ "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
7
+ "title": "",
8
+ "showTitle": true,
9
+ "showDownloadMediaButton": false,
4
10
  "theme": "theme-blue",
5
11
  "animate": false,
6
12
  "fontSize": "medium",
7
13
  "lineDatapointStyle": "hover",
14
+ "lineDatapointColor": "Same as Line",
8
15
  "barHasBorder": "false",
9
16
  "isLollipopChart": false,
10
17
  "lollipopShape": "circle",
@@ -13,42 +20,87 @@
13
20
  "barStyle": "",
14
21
  "roundingStyle": "standard",
15
22
  "tipRounding": "top",
23
+ "isResponsiveTicks": false,
24
+ "general": {
25
+ "showDownloadButton": false
26
+ },
16
27
  "padding": {
17
28
  "left": 5,
18
29
  "right": 5
19
30
  },
31
+ "suppressedData": [],
20
32
  "yAxis": {
21
- "dataKey": "y",
22
33
  "hideAxis": false,
23
34
  "displayNumbersOnBar": false,
24
35
  "hideLabel": false,
25
36
  "hideTicks": false,
26
37
  "size": 50,
27
- "gridLines": true,
38
+ "gridLines": false,
39
+ "enablePadding": false,
28
40
  "min": "",
29
41
  "max": "",
30
42
  "labelColor": "#333",
31
43
  "tickLabelColor": "#333",
32
44
  "tickColor": "#333",
33
45
  "rightHideAxis": true,
34
- "rightAxisSize": 50,
46
+ "rightAxisSize": 0,
47
+ "rightLabel": "",
35
48
  "rightLabelOffsetSize": 0,
36
49
  "rightAxisLabelColor": "#333",
37
50
  "rightAxisTickLabelColor": "#333",
38
51
  "rightAxisTickColor": "#333",
39
- "isLegendValue": false,
40
52
  "numTicks": "",
41
- "label": "Y Axis"
53
+ "axisPadding": 0,
54
+ "tickRotation": 0,
55
+ "anchors": []
56
+ },
57
+ "boxplot": {
58
+ "plots": [],
59
+ "borders": "true",
60
+ "firstQuartilePercentage": 25,
61
+ "thirdQuartilePercentage": 75,
62
+ "boxWidthPercentage": 40,
63
+ "plotOutlierValues": false,
64
+ "plotNonOutlierValues": true,
65
+ "legend": {
66
+ "showHowToReadText": false,
67
+ "howToReadText": ""
68
+ },
69
+ "labels": {
70
+ "q1": "Lower Quartile",
71
+ "q2": "q2",
72
+ "q3": "Upper Quartile",
73
+ "q4": "q4",
74
+ "minimum": "Minimum",
75
+ "maximum": "Maximum",
76
+ "mean": "Mean",
77
+ "median": "Median",
78
+ "sd": "Standard Deviation",
79
+ "iqr": "Interquartile Range",
80
+ "total": "Total",
81
+ "outliers": "Outliers",
82
+ "values": "Values",
83
+ "lowerBounds": "Lower Bounds",
84
+ "upperBounds": "Upper Bounds"
85
+ }
42
86
  },
43
- "boxplot": [],
44
87
  "topAxis": {
45
88
  "hasLine": false
46
89
  },
90
+ "isLegendValue": false,
47
91
  "barThickness": 0.35,
48
92
  "barHeight": 25,
49
- "height": 300,
93
+ "barSpace": 15,
94
+ "heights": {
95
+ "vertical": 300,
96
+ "horizontal": 750
97
+ },
50
98
  "xAxis": {
51
- "type": "",
99
+ "sortDates": false,
100
+ "anchors": [],
101
+ "type": "continuous",
102
+ "showTargetLabel": true,
103
+ "targetLabel": "Target",
52
104
  "hideAxis": false,
53
105
  "hideLabel": false,
54
106
  "hideTicks": false,
@@ -59,10 +111,13 @@
59
111
  "labelColor": "#333",
60
112
  "tickLabelColor": "#333",
61
113
  "tickColor": "#333",
62
- "isLegendValue": false,
63
114
  "numTicks": "",
115
+ "labelOffset": 65,
116
+ "axisPadding": 0,
117
+ "target": 0,
118
+ "maxTickRotation": 0,
64
119
  "dataKey": "x",
65
- "label": "X Axis"
120
+ "tickWidthMax": 21
66
121
  },
67
122
  "table": {
68
123
  "label": "Data Table",
@@ -70,12 +125,19 @@
70
125
  "limitHeight": false,
71
126
  "height": "",
72
127
  "caption": "",
128
+ "showDownloadUrl": false,
129
+ "showDataTableLink": true,
130
+ "indexLabel": "",
131
+ "download": false,
132
+ "showVertical": true,
73
133
  "show": true
74
134
  },
75
135
  "orientation": "vertical",
136
+ "color": "pinkpurple",
137
+ "columns": {},
76
138
  "legend": {
139
+ "hide": false,
77
140
  "behavior": "isolate",
78
- "position": "right",
79
141
  "singleRow": false,
80
142
  "colorCode": "",
81
143
  "reverseLabelOrder": false,
@@ -84,53 +146,230 @@
84
146
  "dynamicLegendDefaultText": "Show All",
85
147
  "dynamicLegendItemLimit": 5,
86
148
  "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
87
- "dynamicLegendChartMessage": "Select Options from the Legend"
149
+ "dynamicLegendChartMessage": "Select Options from the Legend",
150
+ "lineMode": false,
151
+ "verticalSorted": false,
152
+ "highlightOnHover": false
153
+ },
154
+ "brush": {
155
+ "height": 25,
156
+ "data": [],
157
+ "active": false
88
158
  },
89
159
  "exclusions": {
90
160
  "active": false,
91
161
  "keys": []
92
162
  },
93
- "palette": "qualitative1",
163
+ "palette": "qualitative-bold",
94
164
  "isPaletteReversed": false,
165
+ "twoColor": {
166
+ "palette": "monochrome-1",
167
+ "isPaletteReversed": false
168
+ },
95
169
  "labels": false,
96
170
  "dataFormat": {
97
171
  "commas": false,
98
172
  "prefix": "",
99
173
  "suffix": "",
100
- "useFormat": false
174
+ "abbreviated": false,
175
+ "bottomSuffix": "",
176
+ "bottomPrefix": "",
177
+ "bottomAbbreviated": false
101
178
  },
102
179
  "confidenceKeys": {},
103
180
  "visual": {
104
181
  "border": true,
105
182
  "accent": true,
106
- "background": true
107
- },
108
- "dataUrl": "/examples/feature/scatterplot/scatterplot-continuous.csv",
109
- "visualizationType": "Scatter Plot",
110
- "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.",
111
- "dataDescription": {
112
- "horizontal": false,
113
- "series": false,
114
- "singleRow": false,
115
- "xKey": "Group_Category",
116
- "valueKey": "Value"
183
+ "background": true,
184
+ "verticalHoverLine": false,
185
+ "horizontalHoverLine": false
117
186
  },
187
+ "useLogScale": false,
188
+ "filterBehavior": "Filter Change",
189
+ "highlightedBarValues": [],
118
190
  "series": [
119
191
  {
120
192
  "dataKey": "y1",
121
- "type": "Bar"
193
+ "type": "Scatter Plot",
194
+ "axis": "Left",
195
+ "tooltip": true
122
196
  },
123
197
  {
124
198
  "dataKey": "y2",
125
- "type": "Bar"
199
+ "type": "Scatter Plot",
200
+ "axis": "Left",
201
+ "tooltip": true
202
+ }
203
+ ],
204
+ "tooltips": {
205
+ "opacity": 90,
206
+ "singleSeries": false
207
+ },
208
+ "forestPlot": {
209
+ "startAt": 0,
210
+ "colors": {
211
+ "line": "",
212
+ "shape": ""
213
+ },
214
+ "lineOfNoEffect": {
215
+ "show": true
216
+ },
217
+ "type": "",
218
+ "pooledResult": {
219
+ "diamondHeight": 5,
220
+ "column": ""
221
+ },
222
+ "estimateField": "",
223
+ "estimateRadius": "",
224
+ "shape": "circle",
225
+ "rowHeight": 20,
226
+ "description": {
227
+ "show": true,
228
+ "text": "description",
229
+ "location": 0
230
+ },
231
+ "result": {
232
+ "show": true,
233
+ "text": "result",
234
+ "location": 100
235
+ },
236
+ "radius": {
237
+ "min": 2,
238
+ "max": 10,
239
+ "scalingColumn": ""
240
+ },
241
+ "regression": {
242
+ "lower": 0,
243
+ "upper": 0,
244
+ "estimateField": 0
245
+ },
246
+ "leftWidthOffset": 0,
247
+ "rightWidthOffset": 0,
248
+ "showZeroLine": false,
249
+ "leftLabel": "",
250
+ "rightLabel": ""
251
+ },
252
+ "area": {
253
+ "isStacked": false
254
+ },
255
+ "datasets": {},
256
+ "visualizationType": "Scatter Plot",
257
+ "data": [
258
+ {
259
+ "x": "1",
260
+ "y1": "8",
261
+ "y2": "37",
262
+ "y3": "72",
263
+ "y4": "82"
264
+ },
265
+ {
266
+ "x": "2",
267
+ "y1": "2",
268
+ "y2": "30",
269
+ "y3": "75",
270
+ "y4": "83"
271
+ },
272
+ {
273
+ "x": "3",
274
+ "y1": "15",
275
+ "y2": "42",
276
+ "y3": "51",
277
+ "y4": "95"
278
+ },
279
+ {
280
+ "x": "4",
281
+ "y1": "10",
282
+ "y2": "38",
283
+ "y3": "61",
284
+ "y4": "96"
285
+ },
286
+ {
287
+ "x": "5",
288
+ "y1": "1",
289
+ "y2": "38",
290
+ "y3": "66",
291
+ "y4": "86"
292
+ },
293
+ {
294
+ "x": "60",
295
+ "y1": "6",
296
+ "y2": "37",
297
+ "y3": "70",
298
+ "y4": "85"
299
+ },
300
+ {
301
+ "x": "10",
302
+ "y1": "19",
303
+ "y2": "47",
304
+ "y3": "59",
305
+ "y4": "91"
306
+ },
307
+ {
308
+ "x": "24",
309
+ "y1": "18",
310
+ "y2": "32",
311
+ "y3": "68",
312
+ "y4": "89"
313
+ },
314
+ {
315
+ "x": "3",
316
+ "y1": "7",
317
+ "y2": "38",
318
+ "y3": "74",
319
+ "y4": "89"
320
+ },
321
+ {
322
+ "x": "26",
323
+ "y1": "10",
324
+ "y2": "39",
325
+ "y3": "56",
326
+ "y4": "91"
327
+ },
328
+ {
329
+ "x": "42",
330
+ "y1": "16",
331
+ "y2": "38",
332
+ "y3": "55",
333
+ "y4": "76"
334
+ },
335
+ {
336
+ "x": "32",
337
+ "y1": "20",
338
+ "y2": "46",
339
+ "y3": "52",
340
+ "y4": "94"
341
+ },
342
+ {
343
+ "x": "11",
344
+ "y1": "9",
345
+ "y2": "41",
346
+ "y3": "57",
347
+ "y4": "86"
348
+ },
349
+ {
350
+ "x": "22",
351
+ "y1": "10",
352
+ "y2": "47",
353
+ "y3": "56",
354
+ "y4": "80"
126
355
  },
127
356
  {
128
- "dataKey": "y3",
129
- "type": "Bar"
357
+ "x": "73",
358
+ "y1": "1",
359
+ "y2": "36",
360
+ "y3": "71",
361
+ "y4": "94"
130
362
  },
131
363
  {
132
- "dataKey": "y4",
133
- "type": "Bar"
364
+ "x": "23",
365
+ "y1": "13",
366
+ "y2": "30",
367
+ "y3": "66",
368
+ "y4": "78"
134
369
  }
135
- ]
370
+ ],
371
+ "dataFileName": "valid-scatterplot.csv",
372
+ "dataFileSourceType": "file",
373
+ "validated": 4.23,
374
+ "dynamicMarginTop": 0
136
375
  }