@cdc/chart 1.3.3 → 9.22.9

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 (42) hide show
  1. package/dist/cdcchart.js +6 -6
  2. package/examples/cutoff-example-config.json +2 -0
  3. package/examples/cutoff-example-data.json +1 -1
  4. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +198 -0
  5. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +241 -0
  6. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +248 -0
  7. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +137 -0
  8. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +80 -0
  9. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +81 -0
  10. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +68 -0
  11. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +111 -0
  12. package/examples/gallery/lollipop/lollipop-style-horizontal.json +220 -0
  13. package/examples/gallery/paired-bar/paired-bar-chart.json +196 -0
  14. package/examples/horizontal-chart.json +3 -0
  15. package/examples/paired-bar-data.json +1 -1
  16. package/examples/paired-bar-example.json +2 -0
  17. package/examples/planet-combo-example-config.json +2 -0
  18. package/examples/planet-example-config.json +2 -2
  19. package/examples/planet-example-data.json +1 -1
  20. package/examples/planet-pie-example-config.json +2 -0
  21. package/examples/private/line-test-data.json +22 -0
  22. package/examples/private/line-test-two.json +216 -0
  23. package/examples/private/line-test.json +102 -0
  24. package/examples/stacked-vertical-bar-example.json +228 -0
  25. package/package.json +3 -3
  26. package/src/CdcChart.tsx +79 -47
  27. package/src/components/BarChart.tsx +82 -39
  28. package/src/components/DataTable.tsx +17 -10
  29. package/src/components/EditorPanel.js +233 -169
  30. package/src/components/LineChart.tsx +3 -0
  31. package/src/components/LinearChart.tsx +171 -77
  32. package/src/components/PairedBarChart.tsx +139 -42
  33. package/src/components/PieChart.tsx +31 -6
  34. package/src/components/SparkLine.js +4 -1
  35. package/src/components/useIntersectionObserver.tsx +32 -0
  36. package/src/data/initial-state.js +17 -7
  37. package/src/hooks/useReduceData.ts +50 -23
  38. package/src/index.html +5 -9
  39. package/src/scss/editor-panel.scss +34 -4
  40. package/src/scss/main.scss +165 -5
  41. package/LICENSE +0 -201
  42. package/src/components/BarStackVertical.js +0 -0
package/examples/gallery/paired-bar/paired-bar-chart.json ADDED
@@ -0,0 +1,196 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Paired Bar Chart",
4
+ "theme": "theme-slate",
5
+ "fontSize": "small",
6
+ "lineDatapointStyle": "hover",
7
+ "barHasBorder": "false",
8
+ "isLollipopChart": false,
9
+ "lollipopShape": "circle",
10
+ "lollipopColorStyle": "two-tone",
11
+ "visualizationSubType": null,
12
+ "padding": {
13
+ "left": 5,
14
+ "right": 5
15
+ },
16
+ "yAxis": {
17
+ "hideAxis": true,
18
+ "hideLabel": false,
19
+ "hideTicks": false,
20
+ "size": "75",
21
+ "gridLines": false,
22
+ "label": "Value Axis",
23
+ "numTicks": "6"
24
+ },
25
+ "barThickness": 0.35,
26
+ "height": "400",
27
+ "xAxis": {
28
+ "type": "categorical",
29
+ "hideAxis": false,
30
+ "hideLabel": false,
31
+ "hideTicks": false,
32
+ "size": "56",
33
+ "tickRotation": "0",
34
+ "max": "15000",
35
+ "dataKey": "Age Group",
36
+ "label": "Age Group"
37
+ },
38
+ "table": {
39
+ "label": "Data Table",
40
+ "expanded": false,
41
+ "show": true,
42
+ "indexLabel": "Region"
43
+ },
44
+ "orientation": "horizontal",
45
+ "legend": {
46
+ "behavior": "isolate",
47
+ "position": "right",
48
+ "reverseLabelOrder": false,
49
+ "hide": false,
50
+ "label": "Region "
51
+ },
52
+ "exclusions": {
53
+ "active": false,
54
+ "keys": []
55
+ },
56
+ "palette": "qualitative-soft",
57
+ "isPaletteReversed": false,
58
+ "labels": false,
59
+ "dataFormat": {
60
+ "commas": true,
61
+ "suffix": " per 100k"
62
+ },
63
+ "confidenceKeys": {},
64
+ "data": [
65
+ {
66
+ "Region": "West Coast",
67
+ "Age Group": "<15",
68
+ "Cases Per 100K": "7428"
69
+ },
70
+ {
71
+ "Region": "West Coast",
72
+ "Age Group": "15-24",
73
+ "Cases Per 100K": "5176"
74
+ },
75
+ {
76
+ "Region": "West Coast",
77
+ "Age Group": "25-34",
78
+ "Cases Per 100K": "5624"
79
+ },
80
+ {
81
+ "Region": "West Coast",
82
+ "Age Group": "35-44",
83
+ "Cases Per 100K": "10756"
84
+ },
85
+ {
86
+ "Region": "West Coast",
87
+ "Age Group": "45-54",
88
+ "Cases Per 100K": "8256"
89
+ },
90
+ {
91
+ "Region": "West Coast",
92
+ "Age Group": "55-64",
93
+ "Cases Per 100K": "1235"
94
+ },
95
+ {
96
+ "Region": "West Coast",
97
+ "Age Group": "65+",
98
+ "Cases Per 100K": "730"
99
+ },
100
+ {
101
+ "Region": "East Coast",
102
+ "Age Group": "<15",
103
+ "Cases Per 100K": "5714"
104
+ },
105
+ {
106
+ "Region": "East Coast",
107
+ "Age Group": "15-24",
108
+ "Cases Per 100K": "3588"
109
+ },
110
+ {
111
+ "Region": "East Coast",
112
+ "Age Group": "25-34",
113
+ "Cases Per 100K": "3410"
114
+ },
115
+ {
116
+ "Region": "East Coast",
117
+ "Age Group": "35-44",
118
+ "Cases Per 100K": "7478"
119
+ },
120
+ {
121
+ "Region": "East Coast",
122
+ "Age Group": "45-54",
123
+ "Cases Per 100K": "5633"
124
+ },
125
+ {
126
+ "Region": "East Coast",
127
+ "Age Group": "55-64",
128
+ "Cases Per 100K": "810"
129
+ },
130
+ {
131
+ "Region": "East Coast",
132
+ "Age Group": "65+",
133
+ "Cases Per 100K": "402"
134
+ }
135
+ ],
136
+ "dataFileName": "Paired-Bar-Chart-Example-Data.csv",
137
+ "dataFileSourceType": "file",
138
+ "dataDescription": {
139
+ "horizontal": false,
140
+ "series": true,
141
+ "singleRow": false,
142
+ "seriesKey": "Region",
143
+ "xKey": "Age Group",
144
+ "valueKey": "Cases Per 100K"
145
+ },
146
+ "formattedData": [
147
+ {
148
+ "Age Group": "<15",
149
+ "West Coast": "7428",
150
+ "East Coast": "5714"
151
+ },
152
+ {
153
+ "Age Group": "15-24",
154
+ "West Coast": "5176",
155
+ "East Coast": "3588"
156
+ },
157
+ {
158
+ "Age Group": "25-34",
159
+ "West Coast": "5624",
160
+ "East Coast": "3410"
161
+ },
162
+ {
163
+ "Age Group": "35-44",
164
+ "West Coast": "10756",
165
+ "East Coast": "7478"
166
+ },
167
+ {
168
+ "Age Group": "45-54",
169
+ "West Coast": "8256",
170
+ "East Coast": "5633"
171
+ },
172
+ {
173
+ "Age Group": "55-64",
174
+ "West Coast": "1235",
175
+ "East Coast": "810"
176
+ },
177
+ {
178
+ "Age Group": "65+",
179
+ "West Coast": "730",
180
+ "East Coast": "402"
181
+ }
182
+ ],
183
+ "visualizationType": "Paired Bar",
184
+ "series": [
185
+ {
186
+ "dataKey": "West Coast",
187
+ "type": "Bar"
188
+ },
189
+ {
190
+ "dataKey": "East Coast",
191
+ "type": "Bar"
192
+ }
193
+ ],
194
+ "filters": [],
195
+ "barHeight": "23"
196
+ }
package/examples/horizontal-chart.json CHANGED
@@ -1,6 +1,9 @@
1
1
  {
2
2
  "title": "Planet Radius (Combo Example)",
3
3
  "dataUrl": "/examples/planet-example-data.json",
4
+ "animate": true,
5
+ "animateReplay": true,
6
+
4
7
  "visualizationType": "Bar",
5
8
  "visualizationSubType": "horizontal",
6
9
  "isLollipopChart": false,
package/examples/paired-bar-data.json CHANGED
@@ -1,7 +1,7 @@
1
1
  [{"Sex":"Male","Age Group":"<15","Cases per 100K":"7428"},
2
2
  {"Sex":"Male","Age Group":"15-24","Cases per 100K":"5176"},
3
3
  {"Sex":"Male","Age Group":"25-34","Cases per 100K":"5624"},
4
- {"Sex":"Male","Age Group":"35-44","Cases per 100K":"10756"},
4
+ {"Sex":"Male","Age Group":"35-44","Cases per 100K":"10756.75"},
5
5
  {"Sex":"Male","Age Group":"45-54","Cases per 100K":"8259"},
6
6
  {"Sex":"Male","Age Group":"55-64","Cases per 100K":"1235"},
7
7
  {"Sex":"Male","Age Group":"65","Cases per 100K":"730"},
package/examples/paired-bar-example.json CHANGED
@@ -1,6 +1,8 @@
1
1
  {
2
2
  "title": "Paired Bar Chart Example",
3
3
  "dataUrl": "/examples/paired-bar-data.json",
4
+ "animate": true,
5
+ "animateReplay": true,
4
6
  "visualizationType": "Paired Bar",
5
7
  "series": [
6
8
  {"dataKey": "Male","type": "Paired Bar"},
package/examples/planet-combo-example-config.json CHANGED
@@ -1,6 +1,8 @@
1
1
  {
2
2
  "title": "Planet Radius (Combo Example)",
3
3
  "dataUrl": "/examples/planet-example-data.json",
4
+ "animate": true,
5
+ "animateReplay": true,
4
6
  "visualizationType": "Combo",
5
7
  "series": [{"dataKey":"Radius", "type":"Line"}, {"dataKey":"Diameter", "type":"Bar"}],
6
8
  "dataFormat": {
package/examples/planet-example-config.json CHANGED
@@ -2,8 +2,8 @@
2
2
  "title": "Planet Radius (Bar Example)",
3
3
  "dataUrl": "/examples/planet-example-data.json",
4
4
  "visualizationType": "Bar",
5
- "visualizationSubType": "stacked",
6
- "series": [{"dataKey": "Radius"}, {"dataKey": "Diameter"}],
5
+ "visualizationSubType": "regular",
6
+ "series": [{"dataKey": "Radius"}],
7
7
  "fontSize": "medium",
8
8
  "dataCutoff": "0.5",
9
9
  "orientation": "horizontal",
package/examples/planet-example-data.json CHANGED
@@ -13,7 +13,7 @@
13
13
  },
14
14
  {
15
15
  "name": "Uranus",
16
- "Radius": "3.98",
16
+ "Radius": "",
17
17
  "Diameter": "8",
18
18
  "distance": "0"
19
19
  },
package/examples/planet-pie-example-config.json CHANGED
@@ -1,6 +1,8 @@
1
1
  {
2
2
  "title": "Planet Radius (Pie Example)",
3
3
  "dataUrl": "/examples/planet-example-data.json",
4
+ "animate": true,
5
+ "animateReplay": true,
4
6
  "visualizationType": "Pie",
5
7
  "palette": "qualitative-soft",
6
8
  "aspectRatio": 1,
package/examples/private/line-test-data.json ADDED
@@ -0,0 +1,22 @@
1
+ [
2
+ {
3
+ "Number": "11.0",
4
+ "Date": "9/1/2022"
5
+ },
6
+ {
7
+ "Number": "12.2",
8
+ "Date": "9/2/2022"
9
+ },
10
+ {
11
+ "Number": "13.6",
12
+ "Date": "9/4/2022"
13
+ },
14
+ {
15
+ "Number": "",
16
+ "Date": "9/5/2022"
17
+ },
18
+ {
19
+ "Number": "6.4",
20
+ "Date": "9/6/2022"
21
+ }
22
+ ]
package/examples/private/line-test-two.json ADDED
@@ -0,0 +1,216 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Planet Radius (Bar Example)",
4
+ "theme": "theme-blue",
5
+ "fontSize": "medium",
6
+ "lineDatapointStyle": "hover",
7
+ "barHasBorder": "false",
8
+ "isLollipopChart": false,
9
+ "lollipopShape": "circle",
10
+ "lollipopColorStyle": "two-tone",
11
+ "visualizationSubType": "stacked",
12
+ "barStyle": "",
13
+ "roundingStyle": "standard",
14
+ "tipRounding": "top",
15
+ "padding": {
16
+ "left": 5,
17
+ "right": 5
18
+ },
19
+ "yAxis": {
20
+ "hideAxis": false,
21
+ "displayNumbersOnBar": false,
22
+ "hideLabel": false,
23
+ "hideTicks": false,
24
+ "size": 50,
25
+ "gridLines": false,
26
+ "min": "",
27
+ "max": "",
28
+ "type": "chart",
29
+ "title": "Planet Radius (Bar Example)",
30
+ "theme": "theme-blue",
31
+ "fontSize": "medium",
32
+ "lineDatapointStyle": "hover",
33
+ "barHasBorder": "false",
34
+ "isLollipopChart": false,
35
+ "lollipopShape": "circle",
36
+ "lollipopColorStyle": "two-tone",
37
+ "visualizationSubType": "stacked",
38
+ "barStyle": "",
39
+ "roundingStyle": "standard",
40
+ "tipRounding": "top",
41
+ "padding": {
42
+ "left": 5,
43
+ "right": 5
44
+ },
45
+ "yAxis": {
46
+ "hideAxis": false,
47
+ "displayNumbersOnBar": false,
48
+ "hideLabel": false,
49
+ "hideTicks": false,
50
+ "size": 50,
51
+ "gridLines": false,
52
+ "min": "",
53
+ "max": "",
54
+ "label": "Measurement (1000km)"
55
+ },
56
+ "barThickness": 0.35,
57
+ "barHeight": 25,
58
+ "height": 585,
59
+ "xAxis": {
60
+ "type": "categorical",
61
+ "hideAxis": false,
62
+ "hideLabel": false,
63
+ "hideTicks": false,
64
+ "size": 75,
65
+ "tickRotation": 30,
66
+ "min": "",
67
+ "max": "",
68
+ "label": "Planet",
69
+ "dataKey": "name"
70
+ },
71
+ "table": {
72
+ "label": "Data Table",
73
+ "expanded": false,
74
+ "show": true
75
+ },
76
+ "orientation": "horizontal",
77
+ "legend": {
78
+ "behavior": "isolate",
79
+ "position": "right",
80
+ "reverseLabelOrder": false,
81
+ "hide": false
82
+ },
83
+ "exclusions": {
84
+ "active": false,
85
+ "keys": []
86
+ },
87
+ "palette": "qualitative-bold",
88
+ "isPaletteReversed": false,
89
+ "labels": false,
90
+ "dataFormat": {
91
+ "commas": false,
92
+ "prefix": "",
93
+ "suffix": "km",
94
+ "roundTo": 1
95
+ },
96
+ "confidenceKeys": {},
97
+ "dataUrl": "/examples/planet-example-data.json",
98
+ "visualizationType": "Bar",
99
+ "series": [
100
+ {
101
+ "dataKey": "Radius"
102
+ },
103
+ {
104
+ "dataKey": "Diameter"
105
+ }
106
+ ],
107
+ "dataCutoff": "0.5",
108
+ "runtime": {
109
+ "seriesLabels": {
110
+ "Radius": "Radius",
111
+ "Diameter": "Diameter"
112
+ },
113
+ "seriesLabelsAll": [
114
+ "Radius",
115
+ "Diameter"
116
+ ],
117
+ "originalXAxis": {
118
+ "type": "categorical",
119
+ "hideAxis": false,
120
+ "hideLabel": false,
121
+ "hideTicks": false,
122
+ "size": 75,
123
+ "tickRotation": 30,
124
+ "min": "",
125
+ "max": "",
126
+ "label": "Planet",
127
+ "dataKey": "name"
128
+ },
129
+ "seriesKeys": [
130
+ "Radius",
131
+ "Diameter"
132
+ ],
133
+ "xAxis": {
134
+ "hideAxis": false,
135
+ "displayNumbersOnBar": false,
136
+ "hideLabel": false,
137
+ "hideTicks": false,
138
+ "size": 50,
139
+ "gridLines": false,
140
+ "min": "",
141
+ "max": "",
142
+ "label": "Measurement (1000km)"
143
+ },
144
+ "yAxis": {
145
+ "type": "categorical",
146
+ "hideAxis": false,
147
+ "hideLabel": false,
148
+ "hideTicks": false,
149
+ "size": 75,
150
+ "tickRotation": 30,
151
+ "min": "",
152
+ "max": "",
153
+ "label": "Planet",
154
+ "dataKey": "name"
155
+ },
156
+ "horizontal": true,
157
+ "uniqueId": 1663785202233,
158
+ "editorErrorMessage": ""
159
+ },
160
+ "barPadding": 40,
161
+ "labelPlacement": "Below Bar"
162
+ },
163
+ "barThickness": 0.35,
164
+ "barHeight": 25,
165
+ "height": 585,
166
+ "xAxis": {
167
+ "type": "categorical",
168
+ "hideAxis": false,
169
+ "hideLabel": false,
170
+ "hideTicks": false,
171
+ "size": 75,
172
+ "tickRotation": 30,
173
+ "min": "",
174
+ "max": "",
175
+ "label": "Planet",
176
+ "dataKey": "name"
177
+ },
178
+ "table": {
179
+ "label": "Data Table",
180
+ "expanded": false,
181
+ "show": true
182
+ },
183
+ "orientation": "horizontal",
184
+ "legend": {
185
+ "behavior": "isolate",
186
+ "position": "right",
187
+ "reverseLabelOrder": false,
188
+ "hide": false
189
+ },
190
+ "exclusions": {
191
+ "active": false,
192
+ "keys": []
193
+ },
194
+ "palette": "qualitative-bold",
195
+ "isPaletteReversed": false,
196
+ "labels": false,
197
+ "dataFormat": {
198
+ "commas": false,
199
+ "prefix": "",
200
+ "suffix": "km",
201
+ "roundTo": 1
202
+ },
203
+ "confidenceKeys": {},
204
+ "dataUrl": "/examples/planet-example-data.json",
205
+ "visualizationType": "Line",
206
+ "series": [
207
+ {
208
+ "dataKey": "Radius"
209
+ },
210
+ {
211
+ "dataKey": "Diameter"
212
+ }
213
+ ],
214
+ "dataCutoff": "0.5",
215
+ "barPadding": 40
216
+ }
package/examples/private/line-test.json ADDED
@@ -0,0 +1,102 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "",
4
+ "theme": "theme-blue",
5
+ "fontSize": "medium",
6
+ "lineDatapointStyle": "hover",
7
+ "barHasBorder": "false",
8
+ "isLollipopChart": false,
9
+ "lollipopShape": "circle",
10
+ "lollipopColorStyle": "two-tone",
11
+ "visualizationSubType": "regular",
12
+ "barStyle": "",
13
+ "roundingStyle": "standard",
14
+ "tipRounding": "top",
15
+ "padding": {
16
+ "left": 5,
17
+ "right": 5
18
+ },
19
+ "yAxis": {
20
+ "hideAxis": false,
21
+ "displayNumbersOnBar": false,
22
+ "hideLabel": false,
23
+ "hideTicks": false,
24
+ "size": 50,
25
+ "gridLines": false,
26
+ "min": "",
27
+ "max": "",
28
+ "label": "Number"
29
+ },
30
+ "barThickness": 0.35,
31
+ "barHeight": 25,
32
+ "height": 300,
33
+ "xAxis": {
34
+ "type": "date",
35
+ "hideAxis": false,
36
+ "hideLabel": false,
37
+ "hideTicks": false,
38
+ "size": 75,
39
+ "tickRotation": 0,
40
+ "min": "",
41
+ "max": "",
42
+ "dataKey": "Date",
43
+ "dateParseFormat": "%m/%d/%Y",
44
+ "dateDisplayFormat": "%m/%d/%Y"
45
+ },
46
+ "table": {
47
+ "label": "Data Table",
48
+ "expanded": true,
49
+ "limitHeight": false,
50
+ "height": "",
51
+ "show": true
52
+ },
53
+ "orientation": "vertical",
54
+ "legend": {
55
+ "behavior": "isolate",
56
+ "position": "right",
57
+ "reverseLabelOrder": false
58
+ },
59
+ "exclusions": {
60
+ "active": false,
61
+ "keys": []
62
+ },
63
+ "palette": "qualitative-bold",
64
+ "isPaletteReversed": false,
65
+ "labels": false,
66
+ "dataFormat": {
67
+ "commas": false,
68
+ "prefix": "",
69
+ "suffix": ""
70
+ },
71
+ "confidenceKeys": {},
72
+ "datasets": {},
73
+ "visualizationType": "Line",
74
+ "data": [
75
+ {
76
+ "Number": "11.0",
77
+ "Date": "9/1/2022"
78
+ },
79
+ {
80
+ "Number": "12.2",
81
+ "Date": "9/2/2022"
82
+ },
83
+ {
84
+ "Number": "13.6",
85
+ "Date": "9/4/2022"
86
+ },
87
+ {
88
+ "Number": "",
89
+ "Date": "9/5/2022"
90
+ },
91
+ {
92
+ "Number": "6.4",
93
+ "Date": "9/6/2022"
94
+ }
95
+ ],
96
+ "series": [
97
+ {
98
+ "dataKey": "Number",
99
+ "type": "Bar"
100
+ }
101
+ ]
102
+ }