@cdc/chart 4.23.2 → 4.23.3

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 (48) hide show
  1. package/dist/cdcchart.js +41198 -39447
  2. package/examples/area-chart.json +187 -0
  3. package/examples/big-small-test-bar.json +328 -0
  4. package/examples/big-small-test-line.json +328 -0
  5. package/examples/big-small-test-negative.json +328 -0
  6. package/examples/box-plot.json +0 -1
  7. package/examples/example-bar-chart.json +4 -1
  8. package/examples/example-sparkline.json +76 -0
  9. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +31 -172
  10. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json +1 -0
  11. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +96 -14
  12. package/examples/gallery/line/line.json +1 -0
  13. package/examples/horizontal-chart-max-increase.json +38 -0
  14. package/examples/line-chart-max-increase.json +32 -0
  15. package/examples/line-chart-nonnumeric.json +5 -5
  16. package/examples/line-chart.json +6 -6
  17. package/examples/planet-deviation-config.json +168 -0
  18. package/examples/planet-deviation-data.json +38 -0
  19. package/examples/planet-example-config.json +139 -20
  20. package/examples/planet-example-data-max-increase.json +56 -0
  21. package/examples/planet-example-data.json +10 -10
  22. package/examples/scatterplot-continuous.csv +3 -3
  23. package/examples/scatterplot.json +2 -2
  24. package/examples/sparkline-chart-nonnumeric.json +3 -3
  25. package/index.html +26 -9
  26. package/package.json +6 -3
  27. package/src/CdcChart.jsx +146 -92
  28. package/src/components/AreaChart.jsx +198 -0
  29. package/src/components/BarChart.jsx +58 -34
  30. package/src/components/BoxPlot.jsx +28 -15
  31. package/src/components/DataTable.jsx +21 -17
  32. package/src/components/DeviationBar.jsx +191 -0
  33. package/src/components/EditorPanel.jsx +473 -168
  34. package/src/components/Filters.jsx +3 -2
  35. package/src/components/Legend.jsx +59 -46
  36. package/src/components/LineChart.jsx +3 -21
  37. package/src/components/LinearChart.jsx +158 -55
  38. package/src/components/PairedBarChart.jsx +0 -1
  39. package/src/components/PieChart.jsx +11 -14
  40. package/src/components/ScatterPlot.jsx +19 -16
  41. package/src/components/SparkLine.jsx +87 -85
  42. package/src/components/useIntersectionObserver.jsx +1 -1
  43. package/src/data/initial-state.js +20 -4
  44. package/src/hooks/useColorPalette.js +58 -48
  45. package/src/hooks/useReduceData.js +3 -4
  46. package/src/index.jsx +1 -1
  47. package/src/scss/editor-panel.scss +5 -0
  48. package/src/test/CdcChart.test.jsx +6 -0
package/examples/big-small-test-line.json ADDED
@@ -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": "500000",
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": "0.8",
192
+ "Filter": "Small"
193
+ },
194
+ {
195
+ "Category": "3",
196
+ "Values": "1",
197
+ "Filter": "Small"
198
+ },
199
+ {
200
+ "Category": "4",
201
+ "Values": "2.1",
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": "1",
271
+ "Filter": "Small"
272
+ },
273
+ {
274
+ "Category": "2",
275
+ "Values": "1",
276
+ "Filter": "Small"
277
+ },
278
+ {
279
+ "Category": "3",
280
+ "Values": "0.8",
281
+ "Filter": "Small"
282
+ },
283
+ {
284
+ "Category": "4",
285
+ "Values": "2",
286
+ "Filter": "Small"
287
+ },
288
+ {
289
+ "Category": "5",
290
+ "Values": "2.1",
291
+ "Filter": "Small"
292
+ },
293
+ {
294
+ "Category": "6",
295
+ "Values": "2",
296
+ "Filter": "Small"
297
+ },
298
+ {
299
+ "Category": "7",
300
+ "Values": "1",
301
+ "Filter": "Small"
302
+ },
303
+ {
304
+ "Category": "8",
305
+ "Values": "1",
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
+ }
package/examples/big-small-test-negative.json ADDED
@@ -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
+ }
package/examples/box-plot.json CHANGED
@@ -79,7 +79,6 @@
79
79
  "colorCode": "",
80
80
  "reverseLabelOrder": false,
81
81
  "description": "",
82
- "hide": true,
83
82
  "dynamicLegend": false,
84
83
  "dynamicLegendDefaultText": "Show All",
85
84
  "dynamicLegendItemLimit": 5,
package/examples/example-bar-chart.json CHANGED
@@ -26,7 +26,10 @@
26
26
  "series": [
27
27
  { "dataKey": "Data 1", "type": "Bar" },
28
28
  { "dataKey": "Data 2", "type": "Bar" },
29
- { "dataKey": "Data 3", "type": "Bar" }
29
+ { "dataKey": "Data 3", "type": "Bar" },
30
+ { "dataKey": "Data 4", "type": "Bar" },
31
+ { "dataKey": "Data 5", "type": "Bar" },
32
+ { "dataKey": "Data 6", "type": "Bar" }
30
33
  ],
31
34
  "description": "This example shows a bar chart created in the visualization editor in WCMS",
32
35
  "dataCutoff": "0"