@cdc/chart 4.22.10 → 4.23.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 (80) hide show
  1. package/README.md +5 -5
  2. package/dist/495.js +3 -0
  3. package/dist/703.js +1 -0
  4. package/dist/cdcchart.js +723 -6
  5. package/examples/age-adjusted-rates.json +1486 -1218
  6. package/examples/box-plot-data.json +71 -0
  7. package/examples/box-plot.csv +5 -0
  8. package/examples/{private/yaxis-test.json → box-plot.json} +46 -54
  9. package/examples/case-rate-example-config.json +1 -1
  10. package/examples/covid-confidence-example-config.json +33 -33
  11. package/examples/covid-example-config.json +34 -34
  12. package/examples/covid-example-data-confidence.json +30 -30
  13. package/examples/covid-example-data.json +20 -20
  14. package/examples/cutoff-example-config.json +36 -36
  15. package/examples/cutoff-example-data.json +36 -36
  16. package/examples/date-exclusions-config.json +1 -1
  17. package/examples/dynamic-legends.json +124 -124
  18. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +191 -197
  19. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +230 -240
  20. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +239 -247
  21. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +138 -136
  22. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +79 -79
  23. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +80 -80
  24. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +67 -67
  25. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +179 -110
  26. package/examples/gallery/lollipop/lollipop-style-horizontal.json +215 -219
  27. package/examples/gallery/paired-bar/paired-bar-chart.json +195 -195
  28. package/examples/horizontal-chart.json +35 -35
  29. package/examples/horizontal-stacked-bar-chart.json +34 -34
  30. package/examples/line-chart.json +75 -75
  31. package/examples/new-data.csv +17 -0
  32. package/examples/newdata.json +90 -0
  33. package/examples/paired-bar-data.json +16 -14
  34. package/examples/paired-bar-example.json +48 -48
  35. package/examples/paired-bar-formatted.json +36 -36
  36. package/examples/planet-chart-horizontal-example-config.json +33 -33
  37. package/examples/planet-combo-example-config.json +34 -31
  38. package/examples/planet-example-config.json +35 -33
  39. package/examples/planet-example-data.json +56 -56
  40. package/examples/planet-pie-example-config.json +28 -28
  41. package/examples/stacked-vertical-bar-example.json +1 -1
  42. package/examples/temp-example-config.json +61 -54
  43. package/examples/temp-example-data.json +1 -1
  44. package/package.json +3 -2
  45. package/src/CdcChart.tsx +449 -434
  46. package/src/components/BarChart.tsx +383 -497
  47. package/src/components/BoxPlot.js +92 -0
  48. package/src/components/DataTable.tsx +182 -197
  49. package/src/components/EditorPanel.js +1068 -722
  50. package/src/components/Filters.js +131 -0
  51. package/src/components/Legend.js +286 -329
  52. package/src/components/LineChart.tsx +143 -81
  53. package/src/components/LinearChart.tsx +432 -451
  54. package/src/components/PairedBarChart.tsx +197 -213
  55. package/src/components/PieChart.tsx +105 -151
  56. package/src/components/SparkLine.js +179 -201
  57. package/src/components/useIntersectionObserver.tsx +19 -20
  58. package/src/context.tsx +3 -3
  59. package/src/data/initial-state.js +44 -17
  60. package/src/hooks/useActiveElement.js +13 -13
  61. package/src/hooks/useChartClasses.js +34 -28
  62. package/src/hooks/useColorPalette.ts +56 -63
  63. package/src/hooks/useLegendClasses.js +18 -10
  64. package/src/hooks/useReduceData.ts +64 -77
  65. package/src/hooks/useRightAxis.js +25 -0
  66. package/src/hooks/useTopAxis.js +6 -0
  67. package/src/index.html +19 -19
  68. package/src/index.tsx +13 -16
  69. package/src/scss/DataTable.scss +6 -5
  70. package/src/scss/editor-panel.scss +71 -69
  71. package/src/scss/main.scss +188 -114
  72. package/src/scss/variables.scss +1 -1
  73. package/examples/private/line-test-data.json +0 -22
  74. package/examples/private/line-test-two.json +0 -216
  75. package/examples/private/line-test.json +0 -102
  76. package/examples/private/newtest.csv +0 -101
  77. package/examples/private/shawn.json +0 -1296
  78. package/examples/private/test.json +0 -10124
  79. package/examples/private/yaxis-testing.csv +0 -27
  80. package/examples/private/yaxis.json +0 -28
package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json CHANGED
@@ -1,248 +1,240 @@
1
1
  {
2
- "type": "chart",
3
- "title": "Example Stacked Horizontal Bar Chart",
4
- "theme": "theme-blue",
5
- "fontSize": "small",
6
- "lineDatapointStyle": "hover",
7
- "barHasBorder": "true",
8
- "isLollipopChart": false,
9
- "lollipopShape": "circle",
10
- "lollipopColorStyle": "two-tone",
11
- "visualizationSubType": "stacked",
12
- "padding": {
13
- "left": 5,
14
- "right": 5
15
- },
16
- "yAxis": {
17
- "hideAxis": true,
18
- "hideLabel": false,
19
- "hideTicks": false,
20
- "size": "13",
21
- "gridLines": false,
22
- "type": "chart",
23
- "title": "",
24
- "theme": "theme-blue",
25
- "fontSize": "medium",
26
- "lineDatapointStyle": "hover",
27
- "barHasBorder": "false",
28
- "isLollipopChart": false,
29
- "lollipopShape": "circle",
30
- "lollipopColorStyle": "two-tone",
31
- "visualizationSubType": "stacked",
32
- "padding": {
33
- "left": 5,
34
- "right": 5
35
- },
36
- "yAxis": {
37
- "hideAxis": false,
38
- "hideLabel": false,
39
- "hideTicks": false,
40
- "size": 50,
41
- "gridLines": false
42
- },
43
- "barThickness": 0.35,
44
- "height": 260,
45
- "xAxis": {
46
- "type": "categorical",
47
- "hideAxis": false,
48
- "hideLabel": false,
49
- "hideTicks": false,
50
- "size": 75,
51
- "tickRotation": 0,
52
- "dataKey": "Year"
53
- },
54
- "table": {
55
- "label": "Data Table",
56
- "expanded": true,
57
- "show": true
58
- },
59
- "orientation": "horizontal",
60
- "legend": {
61
- "behavior": "isolate",
62
- "position": "right"
63
- },
64
- "exclusions": {
65
- "active": false,
66
- "keys": []
67
- },
68
- "palette": "qualitative-bold",
69
- "isPaletteReversed": false,
70
- "labels": false,
71
- "dataFormat": {},
72
- "confidenceKeys": {},
73
- "data": [
74
- {
75
- "Year": "2015",
76
- "Data 1": "25",
77
- "Data 2": "20",
78
- "Data 3": "55"
79
- },
80
- {
81
- "Year": "2016",
82
- "Data 1": "35",
83
- "Data 2": "30",
84
- "Data 3": "35"
85
- },
86
- {
87
- "Year": "2017",
88
- "Data 1": "22",
89
- "Data 2": "38",
90
- "Data 3": "40"
91
- },
92
- {
93
- "Year": "2018",
94
- "Data 1": "40",
95
- "Data 2": "40",
96
- "Data 3": "20"
97
- }
98
- ],
99
- "dataFileName": "JSON_Source_Data_Example_Viz_Stacked.json",
100
- "dataFileSourceType": "file",
101
- "visualizationType": "Bar",
102
- "runtime": {
103
- "seriesLabels": {
104
- "Data 1": "Data 1",
105
- "Data 2": "Data 2",
106
- "Data 3": "Data 3"
107
- },
108
- "seriesLabelsAll": [
109
- "Data 1",
110
- "Data 2",
111
- "Data 3"
112
- ],
113
- "originalXAxis": {
114
- "type": "categorical",
115
- "hideAxis": false,
116
- "hideLabel": false,
117
- "hideTicks": false,
118
- "size": 75,
119
- "tickRotation": 0,
120
- "dataKey": "Year"
121
- },
122
- "seriesKeys": [
123
- "Data 1",
124
- "Data 2",
125
- "Data 3"
126
- ],
127
- "xAxis": {
128
- "hideAxis": false,
129
- "hideLabel": false,
130
- "hideTicks": false,
131
- "size": 50,
132
- "gridLines": false
133
- },
134
- "yAxis": {
135
- "type": "categorical",
136
- "hideAxis": false,
137
- "hideLabel": false,
138
- "hideTicks": false,
139
- "size": 75,
140
- "tickRotation": 0,
141
- "dataKey": "Year"
142
- },
143
- "horizontal": true,
144
- "uniqueId": 1654259674387,
145
- "editorErrorMessage": ""
146
- },
147
- "series": [
148
- {
149
- "dataKey": "Data 1",
150
- "type": "Bar"
151
- },
152
- {
153
- "dataKey": "Data 2",
154
- "type": "Bar"
155
- },
156
- {
157
- "dataKey": "Data 3",
158
- "type": "Bar"
159
- }
160
- ],
161
- "barHeight": 25,
162
- "barPadding": 40,
163
- "labelPlacement": "Below Bar",
164
- "displayNumbersOnBar": true,
165
- "label": ""
166
- },
167
- "barThickness": 0.35,
168
- "height": 288,
169
- "xAxis": {
170
- "type": "categorical",
171
- "hideAxis": true,
172
- "hideLabel": true,
173
- "hideTicks": true,
174
- "size": "45",
175
- "tickRotation": 0,
176
- "dataKey": "Year",
177
- "label": "Year"
178
- },
179
- "table": {
180
- "label": "Data Table",
181
- "expanded": false,
182
- "show": true,
183
- "indexLabel": "Data Type"
184
- },
185
- "orientation": "horizontal",
186
- "legend": {
187
- "behavior": "isolate",
188
- "position": "right",
189
- "reverseLabelOrder": false
190
- },
191
- "exclusions": {
192
- "active": false,
193
- "keys": []
194
- },
195
- "palette": "qualitative-soft",
196
- "isPaletteReversed": false,
197
- "labels": false,
198
- "dataFormat": {
199
- "suffix": "%"
200
- },
201
- "confidenceKeys": {},
202
- "data": [
203
- {
204
- "Year": "2015",
205
- "Data 1": "25",
206
- "Data 2": "20",
207
- "Data 3": "55"
208
- },
209
- {
210
- "Year": "2016",
211
- "Data 1": "35",
212
- "Data 2": "30",
213
- "Data 3": "35"
214
- },
215
- {
216
- "Year": "2017",
217
- "Data 1": "22",
218
- "Data 2": "38",
219
- "Data 3": "40"
220
- },
221
- {
222
- "Year": "2018",
223
- "Data 1": "40",
224
- "Data 2": "40",
225
- "Data 3": "20"
226
- }
227
- ],
228
- "dataFileName": "JSON_Source_Data_Example_Viz_Stacked.json",
229
- "dataFileSourceType": "file",
230
- "visualizationType": "Bar",
231
- "series": [
232
- {
233
- "dataKey": "Data 1",
234
- "type": "Bar"
235
- },
236
- {
237
- "dataKey": "Data 2",
238
- "type": "Bar"
239
- },
240
- {
241
- "dataKey": "Data 3",
242
- "type": "Bar"
243
- }
244
- ],
245
- "barHeight": 32,
246
- "barPadding": 40,
247
- "description": "Subtext"
248
- }
2
+ "type": "chart",
3
+ "title": "Example Stacked Horizontal Bar Chart",
4
+ "theme": "theme-blue",
5
+ "fontSize": "small",
6
+ "lineDatapointStyle": "hover",
7
+ "barHasBorder": "true",
8
+ "isLollipopChart": false,
9
+ "lollipopShape": "circle",
10
+ "lollipopColorStyle": "two-tone",
11
+ "visualizationSubType": "stacked",
12
+ "padding": {
13
+ "left": 5,
14
+ "right": 5
15
+ },
16
+ "yAxis": {
17
+ "hideAxis": true,
18
+ "hideLabel": false,
19
+ "hideTicks": false,
20
+ "size": "13",
21
+ "gridLines": false,
22
+ "type": "chart",
23
+ "title": "",
24
+ "theme": "theme-blue",
25
+ "fontSize": "medium",
26
+ "lineDatapointStyle": "hover",
27
+ "barHasBorder": "false",
28
+ "isLollipopChart": false,
29
+ "lollipopShape": "circle",
30
+ "lollipopColorStyle": "two-tone",
31
+ "visualizationSubType": "stacked",
32
+ "padding": {
33
+ "left": 5,
34
+ "right": 5
35
+ },
36
+ "yAxis": {
37
+ "hideAxis": false,
38
+ "hideLabel": false,
39
+ "hideTicks": false,
40
+ "size": 50,
41
+ "gridLines": false
42
+ },
43
+ "barThickness": 0.35,
44
+ "height": 260,
45
+ "xAxis": {
46
+ "type": "categorical",
47
+ "hideAxis": false,
48
+ "hideLabel": false,
49
+ "hideTicks": false,
50
+ "size": 75,
51
+ "tickRotation": 0,
52
+ "dataKey": "Year"
53
+ },
54
+ "table": {
55
+ "label": "Data Table",
56
+ "expanded": true,
57
+ "show": true
58
+ },
59
+ "orientation": "horizontal",
60
+ "legend": {
61
+ "behavior": "isolate",
62
+ "position": "right"
63
+ },
64
+ "exclusions": {
65
+ "active": false,
66
+ "keys": []
67
+ },
68
+ "palette": "qualitative-bold",
69
+ "isPaletteReversed": false,
70
+ "labels": false,
71
+ "dataFormat": {},
72
+ "confidenceKeys": {},
73
+ "data": [
74
+ {
75
+ "Year": "2015",
76
+ "Data 1": "25",
77
+ "Data 2": "20",
78
+ "Data 3": "55"
79
+ },
80
+ {
81
+ "Year": "2016",
82
+ "Data 1": "35",
83
+ "Data 2": "30",
84
+ "Data 3": "35"
85
+ },
86
+ {
87
+ "Year": "2017",
88
+ "Data 1": "22",
89
+ "Data 2": "38",
90
+ "Data 3": "40"
91
+ },
92
+ {
93
+ "Year": "2018",
94
+ "Data 1": "40",
95
+ "Data 2": "40",
96
+ "Data 3": "20"
97
+ }
98
+ ],
99
+ "dataFileName": "JSON_Source_Data_Example_Viz_Stacked.json",
100
+ "dataFileSourceType": "file",
101
+ "visualizationType": "Bar",
102
+ "runtime": {
103
+ "seriesLabels": {
104
+ "Data 1": "Data 1",
105
+ "Data 2": "Data 2",
106
+ "Data 3": "Data 3"
107
+ },
108
+ "seriesLabelsAll": ["Data 1", "Data 2", "Data 3"],
109
+ "originalXAxis": {
110
+ "type": "categorical",
111
+ "hideAxis": false,
112
+ "hideLabel": false,
113
+ "hideTicks": false,
114
+ "size": 75,
115
+ "tickRotation": 0,
116
+ "dataKey": "Year"
117
+ },
118
+ "seriesKeys": ["Data 1", "Data 2", "Data 3"],
119
+ "xAxis": {
120
+ "hideAxis": false,
121
+ "hideLabel": false,
122
+ "hideTicks": false,
123
+ "size": 50,
124
+ "gridLines": false
125
+ },
126
+ "yAxis": {
127
+ "type": "categorical",
128
+ "hideAxis": false,
129
+ "hideLabel": false,
130
+ "hideTicks": false,
131
+ "size": 75,
132
+ "tickRotation": 0,
133
+ "dataKey": "Year"
134
+ },
135
+ "horizontal": true,
136
+ "uniqueId": 1654259674387,
137
+ "editorErrorMessage": ""
138
+ },
139
+ "series": [
140
+ {
141
+ "dataKey": "Data 1",
142
+ "type": "Bar"
143
+ },
144
+ {
145
+ "dataKey": "Data 2",
146
+ "type": "Bar"
147
+ },
148
+ {
149
+ "dataKey": "Data 3",
150
+ "type": "Bar"
151
+ }
152
+ ],
153
+ "barHeight": 25,
154
+ "barPadding": 40,
155
+ "labelPlacement": "Below Bar",
156
+ "displayNumbersOnBar": true,
157
+ "label": ""
158
+ },
159
+ "barThickness": 0.35,
160
+ "height": 288,
161
+ "xAxis": {
162
+ "type": "categorical",
163
+ "hideAxis": true,
164
+ "hideLabel": true,
165
+ "hideTicks": true,
166
+ "size": "45",
167
+ "tickRotation": 0,
168
+ "dataKey": "Year",
169
+ "label": "Year"
170
+ },
171
+ "table": {
172
+ "label": "Data Table",
173
+ "expanded": false,
174
+ "show": true,
175
+ "indexLabel": "Data Type"
176
+ },
177
+ "orientation": "horizontal",
178
+ "legend": {
179
+ "behavior": "isolate",
180
+ "position": "right",
181
+ "reverseLabelOrder": false
182
+ },
183
+ "exclusions": {
184
+ "active": false,
185
+ "keys": []
186
+ },
187
+ "palette": "qualitative-soft",
188
+ "isPaletteReversed": false,
189
+ "labels": false,
190
+ "dataFormat": {
191
+ "suffix": "%"
192
+ },
193
+ "confidenceKeys": {},
194
+ "data": [
195
+ {
196
+ "Year": "2015",
197
+ "Data 1": "25",
198
+ "Data 2": "20",
199
+ "Data 3": "55"
200
+ },
201
+ {
202
+ "Year": "2016",
203
+ "Data 1": "35",
204
+ "Data 2": "30",
205
+ "Data 3": "35"
206
+ },
207
+ {
208
+ "Year": "2017",
209
+ "Data 1": "22",
210
+ "Data 2": "38",
211
+ "Data 3": "40"
212
+ },
213
+ {
214
+ "Year": "2018",
215
+ "Data 1": "40",
216
+ "Data 2": "40",
217
+ "Data 3": "20"
218
+ }
219
+ ],
220
+ "dataFileName": "JSON_Source_Data_Example_Viz_Stacked.json",
221
+ "dataFileSourceType": "file",
222
+ "visualizationType": "Bar",
223
+ "series": [
224
+ {
225
+ "dataKey": "Data 1",
226
+ "type": "Bar"
227
+ },
228
+ {
229
+ "dataKey": "Data 2",
230
+ "type": "Bar"
231
+ },
232
+ {
233
+ "dataKey": "Data 3",
234
+ "type": "Bar"
235
+ }
236
+ ],
237
+ "barHeight": 32,
238
+ "barPadding": 40,
239
+ "description": "Subtext"
240
+ }