@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
@@ -0,0 +1,369 @@
1
+ {
2
+ "type": "chart",
3
+ "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
7
+ "title": "<em>Combo</em> Chart",
8
+ "showTitle": true,
9
+ "showDownloadMediaButton": false,
10
+ "theme": "theme-blue",
11
+ "animate": false,
12
+ "fontSize": "medium",
13
+ "lineDatapointStyle": "hover",
14
+ "lineDatapointColor": "Lighter than Line",
15
+ "barHasBorder": "true",
16
+ "isLollipopChart": false,
17
+ "lollipopShape": "circle",
18
+ "lollipopColorStyle": "two-tone",
19
+ "visualizationSubType": "regular",
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
+ "yAxis": {
34
+ "hideAxis": false,
35
+ "displayNumbersOnBar": false,
36
+ "hideLabel": false,
37
+ "hideTicks": false,
38
+ "size": "75",
39
+ "gridLines": false,
40
+ "enablePadding": true,
41
+ "min": "",
42
+ "max": "",
43
+ "labelColor": "#333",
44
+ "tickLabelColor": "#333",
45
+ "tickColor": "#333",
46
+ "rightHideAxis": true,
47
+ "rightAxisSize": "75",
48
+ "rightLabel": "New Participants",
49
+ "rightLabelOffsetSize": "50",
50
+ "rightAxisLabelColor": "#333",
51
+ "rightAxisTickLabelColor": "#333",
52
+ "rightAxisTickColor": "#333",
53
+ "numTicks": "",
54
+ "axisPadding": 0,
55
+ "tickRotation": 0,
56
+ "anchors": [],
57
+ "label": "Outreach Costs"
58
+ },
59
+ "boxplot": {
60
+ "plots": [],
61
+ "borders": "true",
62
+ "firstQuartilePercentage": 25,
63
+ "thirdQuartilePercentage": 75,
64
+ "boxWidthPercentage": 40,
65
+ "plotOutlierValues": false,
66
+ "plotNonOutlierValues": true,
67
+ "legend": {
68
+ "showHowToReadText": false,
69
+ "howToReadText": ""
70
+ },
71
+ "labels": {
72
+ "q1": "Lower Quartile",
73
+ "q2": "q2",
74
+ "q3": "Upper Quartile",
75
+ "q4": "q4",
76
+ "minimum": "Minimum",
77
+ "maximum": "Maximum",
78
+ "mean": "Mean",
79
+ "median": "Median",
80
+ "sd": "Standard Deviation",
81
+ "iqr": "Interquartile Range",
82
+ "total": "Total",
83
+ "outliers": "Outliers",
84
+ "values": "Values",
85
+ "lowerBounds": "Lower Bounds",
86
+ "upperBounds": "Upper Bounds"
87
+ }
88
+ },
89
+ "topAxis": {
90
+ "hasLine": false
91
+ },
92
+ "isLegendValue": false,
93
+ "barThickness": 0.35,
94
+ "barHeight": 25,
95
+ "barSpace": 15,
96
+ "heights": {
97
+ "vertical": 300,
98
+ "horizontal": 750
99
+ },
100
+ "xAxis": {
101
+ "sortDates": false,
102
+ "anchors": [],
103
+ "type": "date",
104
+ "showTargetLabel": true,
105
+ "targetLabel": "Target",
106
+ "hideAxis": false,
107
+ "hideLabel": false,
108
+ "hideTicks": false,
109
+ "size": 75,
110
+ "tickRotation": 0,
111
+ "min": "",
112
+ "max": "",
113
+ "labelColor": "#333",
114
+ "tickLabelColor": "#333",
115
+ "tickColor": "#333",
116
+ "numTicks": "",
117
+ "labelOffset": 65,
118
+ "axisPadding": 0,
119
+ "target": 0,
120
+ "maxTickRotation": 0,
121
+ "dataKey": "Date",
122
+ "label": "Date",
123
+ "dateParseFormat": "%m/%d/%Y",
124
+ "dateDisplayFormat": "%m/%Y",
125
+ "tickWidthMax": 66
126
+ },
127
+ "table": {
128
+ "label": "Data Table",
129
+ "expanded": false,
130
+ "limitHeight": false,
131
+ "height": "",
132
+ "caption": "",
133
+ "showDownloadUrl": false,
134
+ "showDataTableLink": true,
135
+ "indexLabel": "Date",
136
+ "download": false,
137
+ "showVertical": true,
138
+ "show": true
139
+ },
140
+ "orientation": "vertical",
141
+ "color": "pinkpurple",
142
+ "columns": {},
143
+ "legend": {
144
+ "hide": false,
145
+ "behavior": "isolate",
146
+ "singleRow": false,
147
+ "colorCode": "",
148
+ "reverseLabelOrder": false,
149
+ "description": "Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et <strong>dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup> 40</sup>",
150
+ "dynamicLegend": false,
151
+ "dynamicLegendDefaultText": "Show All",
152
+ "dynamicLegendItemLimit": 5,
153
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
154
+ "dynamicLegendChartMessage": "Select Options from the Legend",
155
+ "lineMode": false,
156
+ "verticalSorted": false,
157
+ "highlightOnHover": false,
158
+ "label": "Lorem <em>ipsum dolor</em> sit amet"
159
+ },
160
+ "brush": {
161
+ "height": 25,
162
+ "data": [
163
+ {
164
+ "Date": "5/15/2022",
165
+ "New Participants": "70",
166
+ "Outreach Costs": "160000"
167
+ },
168
+ {
169
+ "Date": "8/15/2022",
170
+ "New Participants": "75",
171
+ "Outreach Costs": "170000"
172
+ },
173
+ {
174
+ "Date": "3/15/2022",
175
+ "New Participants": "80",
176
+ "Outreach Costs": "238000"
177
+ },
178
+ {
179
+ "Date": "1/15/2022",
180
+ "New Participants": "90",
181
+ "Outreach Costs": "252000"
182
+ },
183
+ {
184
+ "Date": "6/15/2022",
185
+ "New Participants": "100",
186
+ "Outreach Costs": "280000"
187
+ },
188
+ {
189
+ "Date": "9/15/2022",
190
+ "New Participants": "120",
191
+ "Outreach Costs": "368000"
192
+ },
193
+ {
194
+ "Date": "7/15/2022",
195
+ "New Participants": "132",
196
+ "Outreach Costs": "380000"
197
+ },
198
+ {
199
+ "Date": "4/15/2022",
200
+ "New Participants": "146",
201
+ "Outreach Costs": "480000"
202
+ },
203
+ {
204
+ "Date": "2/15/2022",
205
+ "New Participants": "150",
206
+ "Outreach Costs": "410000"
207
+ }
208
+ ],
209
+ "active": false
210
+ },
211
+ "exclusions": {
212
+ "active": false,
213
+ "keys": []
214
+ },
215
+ "palette": "qualitative3",
216
+ "isPaletteReversed": false,
217
+ "twoColor": {
218
+ "palette": "monochrome-1",
219
+ "isPaletteReversed": false
220
+ },
221
+ "labels": false,
222
+ "dataFormat": {
223
+ "commas": true,
224
+ "prefix": "",
225
+ "suffix": "",
226
+ "abbreviated": true,
227
+ "bottomSuffix": "",
228
+ "bottomPrefix": "",
229
+ "bottomAbbreviated": false
230
+ },
231
+ "confidenceKeys": {},
232
+ "visual": {
233
+ "border": true,
234
+ "accent": true,
235
+ "background": true,
236
+ "verticalHoverLine": false,
237
+ "horizontalHoverLine": false
238
+ },
239
+ "useLogScale": false,
240
+ "filterBehavior": "Filter Change",
241
+ "highlightedBarValues": [],
242
+ "series": [
243
+ {
244
+ "dataKey": "New Participants",
245
+ "type": "dashed-md",
246
+ "axis": "Right",
247
+ "tooltip": true
248
+ },
249
+ {
250
+ "dataKey": "Outreach Costs",
251
+ "type": "Bar",
252
+ "axis": "Left",
253
+ "tooltip": true
254
+ }
255
+ ],
256
+ "tooltips": {
257
+ "opacity": 90,
258
+ "singleSeries": false
259
+ },
260
+ "forestPlot": {
261
+ "startAt": 0,
262
+ "colors": {
263
+ "line": "",
264
+ "shape": ""
265
+ },
266
+ "lineOfNoEffect": {
267
+ "show": true
268
+ },
269
+ "type": "",
270
+ "pooledResult": {
271
+ "diamondHeight": 5,
272
+ "column": ""
273
+ },
274
+ "estimateField": "",
275
+ "estimateRadius": "",
276
+ "shape": "circle",
277
+ "rowHeight": 20,
278
+ "description": {
279
+ "show": true,
280
+ "text": "description",
281
+ "location": 0
282
+ },
283
+ "result": {
284
+ "show": true,
285
+ "text": "result",
286
+ "location": 100
287
+ },
288
+ "radius": {
289
+ "min": 2,
290
+ "max": 10,
291
+ "scalingColumn": ""
292
+ },
293
+ "regression": {
294
+ "lower": 0,
295
+ "upper": 0,
296
+ "estimateField": 0
297
+ },
298
+ "leftWidthOffset": 0,
299
+ "rightWidthOffset": 0,
300
+ "showZeroLine": false,
301
+ "leftLabel": "",
302
+ "rightLabel": ""
303
+ },
304
+ "area": {
305
+ "isStacked": false
306
+ },
307
+ "datasets": {},
308
+ "visualizationType": "Combo",
309
+ "data": [
310
+ {
311
+ "Date": "5/15/2022",
312
+ "New Participants": "70",
313
+ "Outreach Costs": "160000"
314
+ },
315
+ {
316
+ "Date": "8/15/2022",
317
+ "New Participants": "75",
318
+ "Outreach Costs": "170000"
319
+ },
320
+ {
321
+ "Date": "3/15/2022",
322
+ "New Participants": "80",
323
+ "Outreach Costs": "238000"
324
+ },
325
+ {
326
+ "Date": "1/15/2022",
327
+ "New Participants": "90",
328
+ "Outreach Costs": "252000"
329
+ },
330
+ {
331
+ "Date": "6/15/2022",
332
+ "New Participants": "100",
333
+ "Outreach Costs": "280000"
334
+ },
335
+ {
336
+ "Date": "9/15/2022",
337
+ "New Participants": "120",
338
+ "Outreach Costs": "368000"
339
+ },
340
+ {
341
+ "Date": "7/15/2022",
342
+ "New Participants": "132",
343
+ "Outreach Costs": "380000"
344
+ },
345
+ {
346
+ "Date": "4/15/2022",
347
+ "New Participants": "146",
348
+ "Outreach Costs": "480000"
349
+ },
350
+ {
351
+ "Date": "2/15/2022",
352
+ "New Participants": "150",
353
+ "Outreach Costs": "410000"
354
+ }
355
+ ],
356
+ "dataFileName": "https://wwwdev.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data/indexed-data-files/61-bar-line-combo-2-value-axes.csv",
357
+ "dataFileSourceType": "url",
358
+ "dataDescription": {
359
+ "horizontal": false,
360
+ "series": true,
361
+ "singleRow": true
362
+ },
363
+ "validated": 4.23,
364
+ "superTitle": "<sup>super</sup> title",
365
+ "introText": "Message: Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et <strong>dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup> 40</sup>",
366
+ "description": "Sub: Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et <strong>dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup> 40</sup>",
367
+ "footnotes": "Foot: Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et <strong>dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup> 40</sup>",
368
+ "dynamicMarginTop": 0
369
+ }
@@ -0,0 +1,13 @@
1
+ Population,Subgroup,Estimate
2
+ Age group (years),18-44,"1,161,000"
3
+ Age group (years),45-64,"1,061,000"
4
+ Age group (years),>=65,"643,000"
5
+ Sex,Men,"1,214,000"
6
+ Sex,Women,"1,651,000"
7
+ Race/Ethnicity,Hispanic,"382,000"
8
+ Race/Ethnicity,Non-Hispanic White,"1,870,000"
9
+ Race/Ethnicity,Non-Hispanic Black,"473,000"
10
+ Race/Ethnicity,Non-Hispanic other,"140,000"
11
+ Educational level,<High School or GED*,"448,000"
12
+ Educational level,High School or GED*,"1,020,000"
13
+ Educational level,>= some college,"1,366,000"
@@ -0,0 +1,62 @@
1
+ [
2
+ {
3
+ "Population": "Age group (years)",
4
+ "Subgroup": "18-44",
5
+ "Estimate": "1,161,000"
6
+ },
7
+ {
8
+ "Population": "Age group (years)",
9
+ "Subgroup": "45-64",
10
+ "Estimate": "1,061,000"
11
+ },
12
+ {
13
+ "Population": "Age group (years)",
14
+ "Subgroup": ">=65",
15
+ "Estimate": "643,000"
16
+ },
17
+ {
18
+ "Population": "Sex",
19
+ "Subgroup": "Men",
20
+ "Estimate": "1,214,000"
21
+ },
22
+ {
23
+ "Population": "Sex",
24
+ "Subgroup": "Women",
25
+ "Estimate": "1,651,000"
26
+ },
27
+ {
28
+ "Population": "Race/Ethnicity",
29
+ "Subgroup": "Hispanic",
30
+ "Estimate": "382,000"
31
+ },
32
+ {
33
+ "Population": "Race/Ethnicity",
34
+ "Subgroup": "Non-Hispanic White",
35
+ "Estimate": "1,870,000"
36
+ },
37
+ {
38
+ "Population": "Race/Ethnicity",
39
+ "Subgroup": "Non-Hispanic Black",
40
+ "Estimate": "473,000"
41
+ },
42
+ {
43
+ "Population": "Race/Ethnicity",
44
+ "Subgroup": "Non-Hispanic other",
45
+ "Estimate": "140,000"
46
+ },
47
+ {
48
+ "Population": "Educational level",
49
+ "Subgroup": "<High School or GED*",
50
+ "Estimate": "448,000"
51
+ },
52
+ {
53
+ "Population": "Educational level",
54
+ "Subgroup": "High School or GED*",
55
+ "Estimate": "1,020,000"
56
+ },
57
+ {
58
+ "Population": "Educational level",
59
+ "Subgroup": ">= some college",
60
+ "Estimate": "1,366,000"
61
+ }
62
+ ]