@cdc/chart 4.23.2 → 4.23.4

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 (94) hide show
  1. package/dist/cdcchart.js +42292 -40337
  2. package/examples/feature/__data__/area-chart.json +56 -0
  3. package/examples/{planet-example-data.json → feature/__data__/planet-example-data-max-increase.json} +4 -4
  4. package/examples/feature/__data__/planet-example-data.json +68 -0
  5. package/examples/feature/area/area-chart.json +244 -0
  6. package/examples/{example-bar-chart.json → feature/bar/example-bar-chart.json} +4 -1
  7. package/examples/feature/bar/horizontal-chart-max-increase.json +44 -0
  8. package/examples/{horizontal-chart.json → feature/bar/horizontal-chart.json} +10 -4
  9. package/examples/{horizontal-stacked-bar-chart.json → feature/bar/horizontal-stacked-bar-chart.json} +7 -3
  10. package/examples/{planet-chart-horizontal-example-config.json → feature/bar/planet-chart-horizontal-example-config.json} +8 -3
  11. package/examples/feature/bar/planet-example-config.json +156 -0
  12. package/examples/{box-plot.json → feature/boxplot/boxplot.json} +7 -8
  13. package/examples/feature/boxplot/testing.csv +38 -0
  14. package/examples/feature/combo/combochart-categories_are_numbers .json +18 -0
  15. package/examples/{planet-combo-example-config.json → feature/combo/planet-combo-example-config.json} +1 -1
  16. package/examples/feature/deviation/planet-deviation-config.json +168 -0
  17. package/examples/feature/deviation/planet-deviation-data.json +38 -0
  18. package/examples/feature/filters/filter-testing.json +178 -0
  19. package/examples/feature/forecasting/case_date_example.csv +130 -0
  20. package/examples/feature/forecasting/effective_reproduction.json +202 -0
  21. package/examples/feature/forecasting/r_data.csv +130 -0
  22. package/examples/feature/line/line-chart-max-increase.json +32 -0
  23. package/examples/feature/line/line-chart.json +124 -0
  24. package/examples/{paired-bar-example.json → feature/paired-bar/paired-bar-example.json} +10 -4
  25. package/examples/{planet-pie-example-config.json → feature/pie/planet-pie-example-config.json} +2 -2
  26. package/examples/{scatterplot-continuous.csv → feature/scatterplot/scatterplot-continuous.csv} +3 -3
  27. package/examples/{scatterplot.json → feature/scatterplot/scatterplot.json} +3 -3
  28. package/examples/feature/sparkline/example-sparkline.json +76 -0
  29. package/examples/feature/tests-big-small/big-small-test-bar.json +328 -0
  30. package/examples/feature/tests-big-small/big-small-test-line.json +328 -0
  31. package/examples/feature/tests-big-small/big-small-test-negative.json +328 -0
  32. package/examples/{case-rate-example-config.json → feature/tests-case-rate/case-rate-example-config.json} +2 -2
  33. package/examples/{covid-confidence-example-config.json → feature/tests-covid/covid-confidence-example-config.json} +8 -3
  34. package/examples/{covid-example-config.json → feature/tests-covid/covid-example-config.json} +7 -3
  35. package/examples/{cutoff-example-config.json → feature/tests-cutoff/cutoff-example-config.json} +7 -3
  36. package/examples/{date-exclusions-config.json → feature/tests-date-exclusions/date-exclusions-config.json} +2 -2
  37. package/examples/{example-bar-chart-nonnumeric.json → feature/tests-non-numerics/example-bar-chart-nonnumeric.json} +1 -1
  38. package/examples/{line-chart-nonnumeric.json → feature/tests-non-numerics/line-chart-nonnumeric.json} +5 -5
  39. package/examples/{planet-pie-example-config-nonnumeric.json → feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json} +2 -2
  40. package/examples/{sparkline-chart-nonnumeric.json → feature/tests-non-numerics/sparkline-chart-nonnumeric.json} +2 -2
  41. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +31 -172
  42. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +145 -7
  43. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json +1 -0
  44. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +96 -14
  45. package/examples/gallery/line/line.json +1 -0
  46. package/examples/gallery/paired-bar/paired-bar-chart.json +1 -0
  47. package/index.html +76 -35
  48. package/package.json +6 -3
  49. package/src/CdcChart.jsx +245 -106
  50. package/src/components/AreaChart.jsx +233 -0
  51. package/src/components/BarChart.jsx +103 -62
  52. package/src/components/BoxPlot.jsx +39 -18
  53. package/src/components/DataTable.jsx +26 -21
  54. package/src/components/DeviationBar.jsx +191 -0
  55. package/src/components/EditorPanel.jsx +662 -298
  56. package/src/components/Legend.jsx +59 -46
  57. package/src/components/LineChart.jsx +12 -36
  58. package/src/components/LinearChart.jsx +163 -64
  59. package/src/components/PairedBarChart.jsx +6 -7
  60. package/src/components/PieChart.jsx +12 -17
  61. package/src/components/ScatterPlot.jsx +19 -16
  62. package/src/components/SparkLine.jsx +84 -118
  63. package/src/components/useIntersectionObserver.jsx +1 -1
  64. package/src/data/initial-state.js +27 -7
  65. package/src/hooks/useColorPalette.js +58 -48
  66. package/src/hooks/useReduceData.js +3 -4
  67. package/src/index.jsx +3 -2
  68. package/src/scss/editor-panel.scss +20 -0
  69. package/src/scss/main.scss +8 -6
  70. package/src/test/CdcChart.test.jsx +6 -0
  71. package/examples/box-plot.csv +0 -5
  72. package/examples/dynamic-legends.json +0 -125
  73. package/examples/line-chart.json +0 -34
  74. package/examples/planet-example-config.json +0 -37
  75. package/examples/temp-example-config.json +0 -64
  76. package/examples/temp-example-data.json +0 -130
  77. package/src/components/Filters.jsx +0 -125
  78. /package/examples/{age-adjusted-rates.json → feature/__data__/age-adjusted-rates.json} +0 -0
  79. /package/examples/{new-data.csv → feature/__data__/new-data.csv} +0 -0
  80. /package/examples/{Barchart_with_negative.json → feature/bar/Barchart_with_negative.json} +0 -0
  81. /package/examples/{stacked-vertical-bar-example-negative.json → feature/bar/stacked-vertical-bar-example-negative.json} +0 -0
  82. /package/examples/{stacked-vertical-bar-example.json → feature/bar/stacked-vertical-bar-example.json} +0 -0
  83. /package/examples/{box-plot-data.json → feature/boxplot/box-plot-data.json} +0 -0
  84. /package/examples/{newdata.json → feature/boxplot/boxplot-data.json} +0 -0
  85. /package/examples/{paired-bar-data.json → feature/paired-bar/paired-bar-data.json} +0 -0
  86. /package/examples/{paired-bar-formatted.json → feature/paired-bar/paired-bar-formatted.json} +0 -0
  87. /package/examples/{case-rate-example-data.json → feature/tests-case-rate/case-rate-example-data.json} +0 -0
  88. /package/examples/{covid-example-data-confidence.json → feature/tests-covid/covid-example-data-confidence.json} +0 -0
  89. /package/examples/{covid-example-data.json → feature/tests-covid/covid-example-data.json} +0 -0
  90. /package/examples/{cutoff-example-data.json → feature/tests-cutoff/cutoff-example-data.json} +0 -0
  91. /package/examples/{date-exclusions-data.json → feature/tests-date-exclusions/date-exclusions-data.json} +0 -0
  92. /package/examples/{example-combo-bar-nonnumeric.json → feature/tests-non-numerics/example-combo-bar-nonnumeric.json} +0 -0
  93. /package/examples/{planet-example-data-nonnumeric.json → feature/tests-non-numerics/planet-example-data-nonnumeric.json} +0 -0
  94. /package/examples/{stacked-vertical-bar-example-nonnumerics.json → feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json} +0 -0
@@ -0,0 +1,328 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "",
4
+ "theme": "theme-blue",
5
+ "animate": false,
6
+ "fontSize": "medium",
7
+ "lineDatapointStyle": "hover",
8
+ "barHasBorder": "false",
9
+ "isLollipopChart": false,
10
+ "lollipopShape": "circle",
11
+ "lollipopColorStyle": "two-tone",
12
+ "visualizationSubType": "regular",
13
+ "barStyle": "",
14
+ "roundingStyle": "standard",
15
+ "tipRounding": "top",
16
+ "padding": {
17
+ "left": 5,
18
+ "right": 5
19
+ },
20
+ "yAxis": {
21
+ "hideAxis": false,
22
+ "displayNumbersOnBar": false,
23
+ "hideLabel": false,
24
+ "hideTicks": false,
25
+ "size": "110",
26
+ "gridLines": false,
27
+ "min": "0",
28
+ "max": "",
29
+ "labelColor": "#333",
30
+ "tickLabelColor": "#333",
31
+ "tickColor": "#333",
32
+ "rightHideAxis": true,
33
+ "rightAxisSize": 50,
34
+ "rightLabel": "",
35
+ "rightLabelOffsetSize": 0,
36
+ "rightAxisLabelColor": "#333",
37
+ "rightAxisTickLabelColor": "#333",
38
+ "rightAxisTickColor": "#333",
39
+ "numTicks": "4",
40
+ "axisPadding": 0,
41
+ "tickRotation": 0
42
+ },
43
+ "boxplot": {
44
+ "plots": [],
45
+ "borders": "true",
46
+ "firstQuartilePercentage": 25,
47
+ "thirdQuartilePercentage": 75,
48
+ "boxWidthPercentage": 40,
49
+ "plotOutlierValues": false,
50
+ "plotNonOutlierValues": true,
51
+ "legend": {
52
+ "showHowToReadText": false,
53
+ "howToReadText": ""
54
+ },
55
+ "labels": {
56
+ "q1": "Lower Quartile",
57
+ "q2": "q2",
58
+ "q3": "Upper Quartile",
59
+ "q4": "q4",
60
+ "minimum": "Minimum",
61
+ "maximum": "Maximum",
62
+ "mean": "Mean",
63
+ "median": "Median",
64
+ "sd": "Standard Deviation",
65
+ "iqr": "Interquartile Range",
66
+ "count": "Count",
67
+ "outliers": "Outliers",
68
+ "values": "Values"
69
+ }
70
+ },
71
+ "topAxis": {
72
+ "hasLine": false
73
+ },
74
+ "isLegendValue": false,
75
+ "barThickness": 0.35,
76
+ "barHeight": 25,
77
+ "barSpace": 15,
78
+ "heights": {
79
+ "vertical": 300,
80
+ "horizontal": 750
81
+ },
82
+ "xAxis": {
83
+ "type": "categorical",
84
+ "hideAxis": false,
85
+ "hideLabel": false,
86
+ "hideTicks": false,
87
+ "size": 75,
88
+ "tickRotation": 0,
89
+ "min": "",
90
+ "max": "",
91
+ "labelColor": "#333",
92
+ "tickLabelColor": "#333",
93
+ "tickColor": "#333",
94
+ "numTicks": "",
95
+ "labelOffset": 65,
96
+ "axisPadding": 0,
97
+ "dataKey": "Category"
98
+ },
99
+ "table": {
100
+ "label": "Data Table",
101
+ "expanded": true,
102
+ "limitHeight": false,
103
+ "height": "",
104
+ "caption": "",
105
+ "showDownloadUrl": false,
106
+ "show": true
107
+ },
108
+ "orientation": "vertical",
109
+ "legend": {
110
+ "behavior": "isolate",
111
+ "position": "right",
112
+ "singleRow": false,
113
+ "colorCode": "",
114
+ "reverseLabelOrder": false,
115
+ "description": "",
116
+ "dynamicLegend": false,
117
+ "dynamicLegendDefaultText": "Show All",
118
+ "dynamicLegendItemLimit": 5,
119
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
120
+ "dynamicLegendChartMessage": "Select Options from the Legend"
121
+ },
122
+ "exclusions": {
123
+ "active": false,
124
+ "keys": []
125
+ },
126
+ "palette": "qualitative-bold",
127
+ "isPaletteReversed": false,
128
+ "labels": false,
129
+ "dataFormat": {
130
+ "commas": true,
131
+ "prefix": "",
132
+ "suffix": "",
133
+ "abbreviated": false
134
+ },
135
+ "confidenceKeys": {},
136
+ "visual": {
137
+ "border": true,
138
+ "accent": true,
139
+ "background": true
140
+ },
141
+ "datasets": {},
142
+ "visualizationType": "Line",
143
+ "data": [
144
+ {
145
+ "Category": "1",
146
+ "Values": "-100000",
147
+ "Filter": "Big"
148
+ },
149
+ {
150
+ "Category": "2",
151
+ "Values": "-80000",
152
+ "Filter": "Big"
153
+ },
154
+ {
155
+ "Category": "3",
156
+ "Values": "-1000000",
157
+ "Filter": "Big"
158
+ },
159
+ {
160
+ "Category": "4",
161
+ "Values": "5000000",
162
+ "Filter": "Big"
163
+ },
164
+ {
165
+ "Category": "5",
166
+ "Values": "7000000",
167
+ "Filter": "Big"
168
+ },
169
+ {
170
+ "Category": "6",
171
+ "Values": "10000000",
172
+ "Filter": "Big"
173
+ },
174
+ {
175
+ "Category": "7",
176
+ "Values": "88888888",
177
+ "Filter": "Big"
178
+ },
179
+ {
180
+ "Category": "8",
181
+ "Values": "7654321",
182
+ "Filter": "Big"
183
+ },
184
+ {
185
+ "Category": "1",
186
+ "Values": "1",
187
+ "Filter": "Small"
188
+ },
189
+ {
190
+ "Category": "2",
191
+ "Values": "1",
192
+ "Filter": "Small"
193
+ },
194
+ {
195
+ "Category": "3",
196
+ "Values": "1",
197
+ "Filter": "Small"
198
+ },
199
+ {
200
+ "Category": "4",
201
+ "Values": "2",
202
+ "Filter": "Small"
203
+ },
204
+ {
205
+ "Category": "5",
206
+ "Values": "2",
207
+ "Filter": "Small"
208
+ },
209
+ {
210
+ "Category": "6",
211
+ "Values": "2",
212
+ "Filter": "Small"
213
+ },
214
+ {
215
+ "Category": "7",
216
+ "Values": "1",
217
+ "Filter": "Small"
218
+ },
219
+ {
220
+ "Category": "8",
221
+ "Values": "1",
222
+ "Filter": "Small"
223
+ }
224
+ ],
225
+ "dataFileName": "Small_and_large.csv",
226
+ "dataFileSourceType": "file",
227
+ "formattedData": [
228
+ {
229
+ "Category": "1",
230
+ "Values": "100000",
231
+ "Filter": "Big"
232
+ },
233
+ {
234
+ "Category": "2",
235
+ "Values": "500000",
236
+ "Filter": "Big"
237
+ },
238
+ {
239
+ "Category": "3",
240
+ "Values": "1000000",
241
+ "Filter": "Big"
242
+ },
243
+ {
244
+ "Category": "4",
245
+ "Values": "5000000",
246
+ "Filter": "Big"
247
+ },
248
+ {
249
+ "Category": "5",
250
+ "Values": "7000000",
251
+ "Filter": "Big"
252
+ },
253
+ {
254
+ "Category": "6",
255
+ "Values": "10000000",
256
+ "Filter": "Big"
257
+ },
258
+ {
259
+ "Category": "7",
260
+ "Values": "88888888",
261
+ "Filter": "Big"
262
+ },
263
+ {
264
+ "Category": "8",
265
+ "Values": "7654321",
266
+ "Filter": "Big"
267
+ },
268
+ {
269
+ "Category": "1",
270
+ "Values": "0.5",
271
+ "Filter": "Small"
272
+ },
273
+ {
274
+ "Category": "2",
275
+ "Values": "1",
276
+ "Filter": "Small"
277
+ },
278
+ {
279
+ "Category": "3",
280
+ "Values": "2.5",
281
+ "Filter": "Small"
282
+ },
283
+ {
284
+ "Category": "4",
285
+ "Values": "-2",
286
+ "Filter": "Small"
287
+ },
288
+ {
289
+ "Category": "5",
290
+ "Values": "1.5",
291
+ "Filter": "Small"
292
+ },
293
+ {
294
+ "Category": "6",
295
+ "Values": "-1.8",
296
+ "Filter": "Small"
297
+ },
298
+ {
299
+ "Category": "7",
300
+ "Values": "1",
301
+ "Filter": "Small"
302
+ },
303
+ {
304
+ "Category": "8",
305
+ "Values": "-1.3",
306
+ "Filter": "Small"
307
+ }
308
+ ],
309
+ "dataDescription": {
310
+ "horizontal": false,
311
+ "series": false
312
+ },
313
+ "series": [
314
+ {
315
+ "dataKey": "Values",
316
+ "type": "Line"
317
+ }
318
+ ],
319
+ "filters": [
320
+ {
321
+ "values": ["Big", "Small"],
322
+ "active": "Big",
323
+ "columnName": "Filter",
324
+ "label": "Size",
325
+ "order": "asc"
326
+ }
327
+ ]
328
+ }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "title": "Case Rate Data",
3
3
  "theme": "theme-blue",
4
- "dataUrl": "/examples/case-rate-example-data.json",
4
+ "dataUrl": "/examples/feature/tests-case-rate/case-rate-example-data.json",
5
5
  "visualizationType": "Bar",
6
6
  "visualizationSubType": "horizontal",
7
7
  "series": [],
@@ -33,4 +33,4 @@
33
33
  "expanded": true,
34
34
  "download": true
35
35
  }
36
- }
36
+ }
@@ -1,9 +1,14 @@
1
1
  {
2
2
  "title": "Confidence Age-adjusted COVID-19-associated hospitalization rates by race and ethnicity — COVID-NET, March 1–December 26, 2020",
3
- "dataUrl": "/examples/covid-example-data-confidence.json",
3
+ "dataUrl": "/examples/feature/tests-covid/covid-example-data-confidence.json",
4
4
  "visualizationType": "Bar",
5
5
  "fontSize": "small",
6
- "series": [{ "dataKey": "Age-adjusted rate", "label": "Rate" }],
6
+ "series": [
7
+ {
8
+ "dataKey": "Age-adjusted rate",
9
+ "label": "Rate"
10
+ }
11
+ ],
7
12
  "confidenceKeys": {
8
13
  "lower": "Lower",
9
14
  "upper": "Upper"
@@ -32,4 +37,4 @@
32
37
  "label": "Age-adjusted COVID-19-associated hospitalization rates by race and ethnicity",
33
38
  "expanded": true
34
39
  }
35
- }
40
+ }
@@ -1,10 +1,14 @@
1
1
  {
2
2
  "title": "Non Configdence Age-adjusted COVID-19-associated hospitalization rates by race and ethnicity — COVID-NET, March 1–December 26, 2020",
3
3
  "theme": "theme-brown",
4
- "dataUrl": "/examples/covid-example-data.json",
4
+ "dataUrl": "/examples/feature/tests-covid/covid-example-data.json",
5
5
  "visualizationType": "Bar",
6
6
  "visualizationSubType": "horizontal",
7
- "series": [{ "dataKey": "Age-adjusted rate" }],
7
+ "series": [
8
+ {
9
+ "dataKey": "Age-adjusted rate"
10
+ }
11
+ ],
8
12
  "barThickness": 0.3,
9
13
  "height": 300,
10
14
  "dataFormat": {
@@ -33,4 +37,4 @@
33
37
  "expanded": true,
34
38
  "download": true
35
39
  }
36
- }
40
+ }
@@ -1,11 +1,15 @@
1
1
  {
2
2
  "title": "Data Cutoff Example (< 0.1)",
3
3
  "theme": "theme-blue",
4
- "dataUrl": "/examples/cutoff-example-data.json",
4
+ "dataUrl": "/examples/feature/tests-cutoff/cutoff-example-data.json",
5
5
  "animate": true,
6
6
  "animateReplay": true,
7
7
  "visualizationType": "Line",
8
- "series": [{ "dataKey": "Value" }],
8
+ "series": [
9
+ {
10
+ "dataKey": "Value"
11
+ }
12
+ ],
9
13
  "barThickness": 0.3,
10
14
  "height": 300,
11
15
  "dataCutoff": "0.1",
@@ -35,4 +39,4 @@
35
39
  "expanded": true,
36
40
  "download": true
37
41
  }
38
- }
42
+ }
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "title": "",
3
- "dataUrl": "/examples/date-exclusions-data.json",
3
+ "dataUrl": "/examples/feature/tests-date-exclusions/date-exclusions-data.json",
4
4
  "type": "chart",
5
5
  "theme": "theme-blue",
6
6
  "fontSize": "medium",
@@ -59,4 +59,4 @@
59
59
  "type": "Bar"
60
60
  }
61
61
  ]
62
- }
62
+ }
@@ -15,7 +15,7 @@
15
15
  "dataFormat": { "suffix": " units" },
16
16
  "confidenceKeys": {},
17
17
  "data": [
18
- { "Date": "1/15/2016", "Data 1": "90", "Data 2": "1323.5", "Data 3": "1000", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
18
+ { "Date": "1/15/2016", "Data 1": "90", "Data 2": "1323.5", "Data 3": "$1,000", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
19
19
  { "Date": "2/15/2016", "Data 1": "NA", "Data 2": "90.3", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
20
20
  { "Date": "3/15/2016", "Data 1": "50", "Data 2": "booo", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
21
21
  { "Date": "4/15/2016", "Data 1": "", "Data 2": "160", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },
@@ -23,10 +23,10 @@
23
23
  ],
24
24
  "visualizationType": "Line",
25
25
  "series": [
26
- { "dataKey": "Data 1", "type": "Bar" },
27
- { "dataKey": "Data 2", "type": "Bar" },
28
- { "dataKey": "Data 3", "type": "Bar" },
29
- { "dataKey": "Data 4", "type": "Bar" },
30
- { "dataKey": "Data 5", "type": "Bar" }
26
+ { "dataKey": "Data 1", "type": "Line" },
27
+ { "dataKey": "Data 2", "type": "Line" },
28
+ { "dataKey": "Data 3", "type": "Line" },
29
+ { "dataKey": "Data 4", "type": "Line" },
30
+ { "dataKey": "Data 5", "type": "Line" }
31
31
  ]
32
32
  }
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "title": "Planet Radius (Pie Example)",
3
- "dataUrl": "/examples/planet-example-data-nonnumeric.json",
3
+ "dataUrl": "/examples/feature/tests-non-numerics/planet-example-data-nonnumeric.json",
4
4
  "animate": true,
5
5
  "animateReplay": true,
6
6
  "visualizationType": "Pie",
@@ -27,4 +27,4 @@
27
27
  "label": "Data Table",
28
28
  "expanded": false
29
29
  }
30
- }
30
+ }
@@ -50,7 +50,7 @@
50
50
  },
51
51
  {
52
52
  "Date": "3/15/2016",
53
- "Data 1": "NA"
53
+ "Data 1": "40"
54
54
  },
55
55
  {
56
56
  "Date": "4/15/2016",
@@ -69,7 +69,7 @@
69
69
  "series": [
70
70
  {
71
71
  "dataKey": "Data 1",
72
- "type": "Bar"
72
+ "type": "Line"
73
73
  }
74
74
  ],
75
75
  "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."