@cdc/chart 1.3.3 → 4.22.10

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 (49) 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/dynamic-legends.json +125 -0
  5. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +198 -0
  6. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +241 -0
  7. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +248 -0
  8. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +137 -0
  9. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +80 -0
  10. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +81 -0
  11. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +68 -0
  12. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +111 -0
  13. package/examples/gallery/lollipop/lollipop-style-horizontal.json +220 -0
  14. package/examples/gallery/paired-bar/paired-bar-chart.json +196 -0
  15. package/examples/horizontal-chart.json +3 -0
  16. package/examples/paired-bar-data.json +1 -1
  17. package/examples/paired-bar-example.json +2 -0
  18. package/examples/planet-combo-example-config.json +2 -0
  19. package/examples/planet-example-config.json +2 -2
  20. package/examples/planet-example-data.json +1 -1
  21. package/examples/planet-pie-example-config.json +2 -0
  22. package/examples/private/line-test-data.json +22 -0
  23. package/examples/private/line-test-two.json +216 -0
  24. package/examples/private/line-test.json +102 -0
  25. package/examples/private/shawn.json +1296 -0
  26. package/examples/private/yaxis-test.json +132 -0
  27. package/examples/private/yaxis-testing.csv +27 -0
  28. package/examples/private/yaxis.json +28 -0
  29. package/examples/stacked-vertical-bar-example.json +228 -0
  30. package/package.json +3 -3
  31. package/src/CdcChart.tsx +121 -168
  32. package/src/components/BarChart.tsx +92 -40
  33. package/src/components/DataTable.tsx +28 -13
  34. package/src/components/EditorPanel.js +286 -182
  35. package/src/components/Legend.js +334 -0
  36. package/src/components/LineChart.tsx +57 -17
  37. package/src/components/LinearChart.tsx +171 -77
  38. package/src/components/PairedBarChart.tsx +139 -42
  39. package/src/components/PieChart.tsx +33 -6
  40. package/src/components/SparkLine.js +28 -27
  41. package/src/components/useIntersectionObserver.tsx +30 -0
  42. package/src/data/initial-state.js +23 -7
  43. package/src/hooks/useChartClasses.js +35 -0
  44. package/src/hooks/useLegendClasses.js +20 -0
  45. package/src/hooks/useReduceData.ts +72 -24
  46. package/src/index.html +29 -30
  47. package/src/scss/editor-panel.scss +34 -4
  48. package/src/scss/main.scss +201 -5
  49. package/src/components/BarStackVertical.js +0 -0
@@ -0,0 +1,132 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Combo Chart (With Right Axis)",
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": "100",
26
+ "gridLines": false,
27
+ "min": "",
28
+ "max": "",
29
+ "rightHideAxis": false,
30
+ "rightAxisSize": "88",
31
+ "rightLabelOffsetSize": "80",
32
+ "label": "Left Axis (Value)",
33
+ "rightSeries": "tot_tests_18_older",
34
+ "rightLabel": "Right Axis (Value)",
35
+ "rightHideLabel": false,
36
+ "rightHideTicks": false,
37
+ "rightNumTicks": "6",
38
+ "rightAxisLabelColor": "purple",
39
+ "rightAxisTickLabelColor": "purple",
40
+ "rightAxisTickColor": "purple",
41
+ "labelColor": "orange",
42
+ "tickLabelColor": "orange",
43
+ "tickColor": "orange"
44
+ },
45
+ "topAxis": {
46
+ "hasLine": true
47
+ },
48
+ "barThickness": 0.35,
49
+ "barHeight": 25,
50
+ "height": 300,
51
+ "xAxis": {
52
+ "type": "date",
53
+ "hideAxis": false,
54
+ "hideLabel": false,
55
+ "hideTicks": false,
56
+ "size": "100",
57
+ "tickRotation": 30,
58
+ "min": "",
59
+ "max": "",
60
+ "label": "Date/Category Axis",
61
+ "dataKey": "week",
62
+ "dateParseFormat": "%m/%d/%Y",
63
+ "dateDisplayFormat": "%m/%d/%Y",
64
+ "labelColor": "blue",
65
+ "tickLabelColor": "blue",
66
+ "tickColor": "blue"
67
+ },
68
+ "table": {
69
+ "label": "Data Table",
70
+ "expanded": false,
71
+ "limitHeight": false,
72
+ "height": "",
73
+ "caption": "",
74
+ "show": true
75
+ },
76
+ "orientation": "vertical",
77
+ "legend": {
78
+ "behavior": "isolate",
79
+ "position": "right",
80
+ "colorCode": "",
81
+ "reverseLabelOrder": false,
82
+ "description": "",
83
+ "dynamicLegend": false,
84
+ "dynamicLegendDefaultText": "Show All",
85
+ "dynamicLegendItemLimit": 5,
86
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
87
+ "dynamicLegendChartMessage": "Select Options from the Legend",
88
+ "hide": false
89
+ },
90
+ "exclusions": {
91
+ "active": false,
92
+ "keys": []
93
+ },
94
+ "palette": "qualitative-bold",
95
+ "isPaletteReversed": false,
96
+ "labels": false,
97
+ "dataFormat": {
98
+ "commas": false,
99
+ "prefix": "",
100
+ "suffix": "",
101
+ "roundTo": "0"
102
+ },
103
+ "confidenceKeys": {},
104
+ "visual": {
105
+ "border": true,
106
+ "accent": true,
107
+ "background": true
108
+ },
109
+ "dataUrl": "/examples/private/yaxis.json",
110
+ "visualizationType": "Combo",
111
+ "series": [
112
+ {
113
+ "dataKey": "tot_tests_0_12",
114
+ "type": "Bar"
115
+ },
116
+ {
117
+ "dataKey": "tot_tests_13_17",
118
+ "type": "Bar"
119
+ },
120
+ {
121
+ "dataKey": "tot_tests_18_older",
122
+ "type": "Line",
123
+ "axis": "Left"
124
+ },
125
+ {
126
+ "dataKey": "0_12_positivity_rate",
127
+ "type": "Line",
128
+ "axis": "Right"
129
+ }
130
+ ],
131
+ "dataCutoff": "0.5"
132
+ }
@@ -0,0 +1,27 @@
1
+ week,tot_tests_0_12,tot_tests_13_17,tot_tests_18_older,0_12_positivity_rate,13_17_positivity_rate,18_older_positivity_rate
2
+ 5/21/2022,0,0,3,,,100
3
+ 5/28/2022,0,0,31,,,33.3
4
+ 6/4/2022,7,0,53,0,,34
5
+ 6/11/2022,3,0,128,0,,23.5
6
+ 6/18/2022,3,0,153,0,,38.8
7
+ 6/25/2022,10,0,232,0,,43.4
8
+ 7/2/2022,16,5,530,8.3,20,53
9
+ 7/9/2022,14,3,734,7.1,0,53.6
10
+ 7/16/2022,38,20,2442,2.9,0,58.3
11
+ 7/23/2022,74,21,2962,4.2,5,54
12
+ 7/30/2022,215,72,4032,0.5,0,47.2
13
+ 8/6/2022,339,131,5236,0.6,0,36.6
14
+ 8/13/2022,590,153,6540,0.8,0,30.3
15
+ 8/20/2022,717,240,7696,1.8,5.5,28.5
16
+ 8/27/2022,548,202,5488,0.6,3.3,27.4
17
+ 9/3/2022,566,152,4612,0.2,2.1,26
18
+ 9/10/2022,432,139,3399,0.3,2.4,24.2
19
+ 9/17/2022,350,119,3065,1.3,2.9,25.8
20
+ 9/24/2022,307,102,2648,0,5.6,26.9
21
+ 10/1/2022,222,84,2002,0,6.8,24.9
22
+ 10/8/2022,143,59,1645,0,3.9,24.3
23
+ 10/15/2022,151,71,1528,0.8,0,27.1
24
+ 10/22/2022,106,48,1156,3.5,0,25.6
25
+ 10/29/2022,80,38,969,1.3,5.4,21
26
+ 11/5/2022,80,33,912,5.9,0,19
27
+ 11/12/2022,25,7,266,17.4,0,18.9
@@ -0,0 +1,28 @@
1
+ [
2
+ {"week":"5/21/2022","tot_tests_0_12":"0","tot_tests_13_17":"0","tot_tests_18_older":"3","0_12_positivity_rate":"","13_17_positivity_rate":"","18_older_positivity_rate":"100"},
3
+ {"week":"5/28/2022","tot_tests_0_12":"0","tot_tests_13_17":"0","tot_tests_18_older":"31","0_12_positivity_rate":"","13_17_positivity_rate":"","18_older_positivity_rate":"33.3"},
4
+ {"week":"6/4/2022","tot_tests_0_12":"7","tot_tests_13_17":"0","tot_tests_18_older":"53","0_12_positivity_rate":"0","13_17_positivity_rate":"","18_older_positivity_rate":"34"},
5
+ {"week":"6/11/2022","tot_tests_0_12":"3","tot_tests_13_17":"0","tot_tests_18_older":"128","0_12_positivity_rate":"0","13_17_positivity_rate":"","18_older_positivity_rate":"23.5"},
6
+ {"week":"6/18/2022","tot_tests_0_12":"3","tot_tests_13_17":"0","tot_tests_18_older":"153","0_12_positivity_rate":"0","13_17_positivity_rate":"","18_older_positivity_rate":"38.8"},
7
+ {"week":"6/25/2022","tot_tests_0_12":"10","tot_tests_13_17":"0","tot_tests_18_older":"232","0_12_positivity_rate":"0","13_17_positivity_rate":"","18_older_positivity_rate":"43.4"},
8
+ {"week":"7/2/2022","tot_tests_0_12":"16","tot_tests_13_17":"5","tot_tests_18_older":"530","0_12_positivity_rate":"8.3","13_17_positivity_rate":"20","18_older_positivity_rate":"53"},
9
+ {"week":"7/9/2022","tot_tests_0_12":"14","tot_tests_13_17":"3","tot_tests_18_older":"734","0_12_positivity_rate":"7.1","13_17_positivity_rate":"0","18_older_positivity_rate":"53.6"},
10
+ {"week":"7/16/2022","tot_tests_0_12":"38","tot_tests_13_17":"20","tot_tests_18_older":"2442","0_12_positivity_rate":"2.9","13_17_positivity_rate":"0","18_older_positivity_rate":"58.3"},
11
+ {"week":"7/23/2022","tot_tests_0_12":"74","tot_tests_13_17":"21","tot_tests_18_older":"2962","0_12_positivity_rate":"4.2","13_17_positivity_rate":"5","18_older_positivity_rate":"54"},
12
+ {"week":"7/30/2022","tot_tests_0_12":"215","tot_tests_13_17":"72","tot_tests_18_older":"4032","0_12_positivity_rate":"0.5","13_17_positivity_rate":"0","18_older_positivity_rate":"47.2"},
13
+ {"week":"8/6/2022","tot_tests_0_12":"339","tot_tests_13_17":"131","tot_tests_18_older":"5236","0_12_positivity_rate":"0.6","13_17_positivity_rate":"0","18_older_positivity_rate":"36.6"},
14
+ {"week":"8/13/2022","tot_tests_0_12":"590","tot_tests_13_17":"153","tot_tests_18_older":"6540","0_12_positivity_rate":"0.8","13_17_positivity_rate":"0","18_older_positivity_rate":"30.3"},
15
+ {"week":"8/20/2022","tot_tests_0_12":"717","tot_tests_13_17":"240","tot_tests_18_older":"7696","0_12_positivity_rate":"1.8","13_17_positivity_rate":"5.5","18_older_positivity_rate":"28.5"},
16
+ {"week":"8/27/2022","tot_tests_0_12":"548","tot_tests_13_17":"202","tot_tests_18_older":"5488","0_12_positivity_rate":"0.6","13_17_positivity_rate":"3.3","18_older_positivity_rate":"27.4"},
17
+ {"week":"9/3/2022","tot_tests_0_12":"566","tot_tests_13_17":"152","tot_tests_18_older":"4612","0_12_positivity_rate":"0.2","13_17_positivity_rate":"2.1","18_older_positivity_rate":"26"},
18
+ {"week":"9/10/2022","tot_tests_0_12":"432","tot_tests_13_17":"139","tot_tests_18_older":"3399","0_12_positivity_rate":"0.3","13_17_positivity_rate":"2.4","18_older_positivity_rate":"24.2"},
19
+ {"week":"9/17/2022","tot_tests_0_12":"350","tot_tests_13_17":"119","tot_tests_18_older":"3065","0_12_positivity_rate":"1.3","13_17_positivity_rate":"2.9","18_older_positivity_rate":"25.8"},
20
+ {"week":"9/24/2022","tot_tests_0_12":"307","tot_tests_13_17":"102","tot_tests_18_older":"2648","0_12_positivity_rate":"0","13_17_positivity_rate":"5.6","18_older_positivity_rate":"26.9"},
21
+ {"week":"10/1/2022","tot_tests_0_12":"222","tot_tests_13_17":"84","tot_tests_18_older":"2002","0_12_positivity_rate":"0","13_17_positivity_rate":"6.8","18_older_positivity_rate":"24.9"},
22
+ {"week":"10/8/2022","tot_tests_0_12":"143","tot_tests_13_17":"59","tot_tests_18_older":"1645","0_12_positivity_rate":"0","13_17_positivity_rate":"3.9","18_older_positivity_rate":"24.3"},
23
+ {"week":"10/15/2022","tot_tests_0_12":"151","tot_tests_13_17":"71","tot_tests_18_older":"1528","0_12_positivity_rate":"0.8","13_17_positivity_rate":"0","18_older_positivity_rate":"27.1"},
24
+ {"week":"10/22/2022","tot_tests_0_12":"106","tot_tests_13_17":"48","tot_tests_18_older":"1156","0_12_positivity_rate":"3.5","13_17_positivity_rate":"0","18_older_positivity_rate":"25.6"},
25
+ {"week":"10/29/2022","tot_tests_0_12":"80","tot_tests_13_17":"38","tot_tests_18_older":"969","0_12_positivity_rate":"1.3","13_17_positivity_rate":"5.4","18_older_positivity_rate":"21"},
26
+ {"week":"11/5/2022","tot_tests_0_12":"80","tot_tests_13_17":"33","tot_tests_18_older":"912","0_12_positivity_rate":"5.9","13_17_positivity_rate":"0","18_older_positivity_rate":"19"},
27
+ {"week":"11/12/2022","tot_tests_0_12":"25","tot_tests_13_17":"7","tot_tests_18_older":"266","0_12_positivity_rate":"17.4","13_17_positivity_rate":"0","18_older_positivity_rate":"18.9"}
28
+ ]
@@ -0,0 +1,228 @@
1
+ {
2
+ "title": "Example Stacked Vertical",
3
+ "visualizationType": "Bar",
4
+ "visualizationSubType": "stacked",
5
+ "orientation": "vertical",
6
+ "animate": true,
7
+ "animateReplay": true,
8
+ "yAxis": {
9
+ "hideAxis": false,
10
+ "hideLabel": false,
11
+ "hideTicks": false,
12
+ "size": 50,
13
+ "gridLines": false
14
+ },
15
+ "barThickness": 0.35,
16
+ "height": 300,
17
+ "xAxis": {
18
+ "type": "categorical",
19
+ "hideAxis": false,
20
+ "hideLabel": false,
21
+ "hideTicks": false,
22
+ "size": 75,
23
+ "tickRotation": 0,
24
+ "dataKey": "Date"
25
+ },
26
+ "table": {
27
+ "label": "Data Table",
28
+ "expanded": true,
29
+ "show": true
30
+ },
31
+ "legend": {
32
+ "behavior": "isolate",
33
+ "position": "right",
34
+ "reverseLabelOrder": false
35
+ },
36
+ "series": [
37
+ {
38
+ "dataKey": "Data 1",
39
+ "type": "Bar"
40
+ },
41
+ {
42
+ "dataKey": "Data 2",
43
+ "type": "Bar"
44
+ }
45
+ ],
46
+ "data": [
47
+ {
48
+ "Date": "1/15/2016",
49
+ "Data 1": "90",
50
+ "Data 2": "135",
51
+ "Data 3": "300",
52
+ "Data 4": "95",
53
+ "Data 5": "120",
54
+ "Data 6": "310",
55
+ "Data 7": "40",
56
+ "Data 8": "90",
57
+ "Data 9": "240",
58
+ "Data 10": "60",
59
+ "Data 11": "160",
60
+ "Data 12": "200"
61
+ },
62
+ {
63
+ "Date": "2/15/2016",
64
+ "Data 1": "40",
65
+ "Data 2": "90",
66
+ "Data 3": "240",
67
+ "Data 4": "60",
68
+ "Data 5": "160",
69
+ "Data 6": "200",
70
+ "Data 7": "40",
71
+ "Data 8": "90",
72
+ "Data 9": "240",
73
+ "Data 10": "60",
74
+ "Data 11": "160",
75
+ "Data 12": "200"
76
+ },
77
+ {
78
+ "Date": "3/15/2016",
79
+ "Data 1": "50",
80
+ "Data 2": "300",
81
+ "Data 3": "290",
82
+ "Data 4": "100",
83
+ "Data 5": "200",
84
+ "Data 6": "250",
85
+ "Data 7": "80",
86
+ "Data 8": "350",
87
+ "Data 9": "300",
88
+ "Data 10": "150",
89
+ "Data 11": "130",
90
+ "Data 12": "100"
91
+ },
92
+ {
93
+ "Date": "4/15/2016",
94
+ "Data 1": "120",
95
+ "Data 2": "160",
96
+ "Data 3": "230",
97
+ "Data 4": "180",
98
+ "Data 5": "160",
99
+ "Data 6": "220",
100
+ "Data 7": "40",
101
+ "Data 8": "90",
102
+ "Data 9": "240",
103
+ "Data 10": "60",
104
+ "Data 11": "160",
105
+ "Data 12": "200"
106
+ },
107
+ {
108
+ "Date": "5/15/2016",
109
+ "Data 1": "80",
110
+ "Data 2": "350",
111
+ "Data 3": "300",
112
+ "Data 4": "150",
113
+ "Data 5": "130",
114
+ "Data 6": "100",
115
+ "Data 7": "120",
116
+ "Data 8": "160",
117
+ "Data 9": "230",
118
+ "Data 10": "180",
119
+ "Data 11": "160",
120
+ "Data 12": "220"
121
+ },
122
+ {
123
+ "Date": "6/15/2016",
124
+ "Data 1": "90",
125
+ "Data 2": "220",
126
+ "Data 3": "320",
127
+ "Data 4": "100",
128
+ "Data 5": "220",
129
+ "Data 6": "300",
130
+ "Data 7": "40",
131
+ "Data 8": "90",
132
+ "Data 9": "240",
133
+ "Data 10": "60",
134
+ "Data 11": "160",
135
+ "Data 12": "200"
136
+ },
137
+ {
138
+ "Date": "7/15/2016",
139
+ "Data 1": "120",
140
+ "Data 2": "160",
141
+ "Data 3": "230",
142
+ "Data 4": "180",
143
+ "Data 5": "160",
144
+ "Data 6": "220",
145
+ "Data 7": "80",
146
+ "Data 8": "350",
147
+ "Data 9": "300",
148
+ "Data 10": "150",
149
+ "Data 11": "130",
150
+ "Data 12": "100"
151
+ },
152
+ {
153
+ "Date": "8/15/2016",
154
+ "Data 1": "40",
155
+ "Data 2": "90",
156
+ "Data 3": "240",
157
+ "Data 4": "60",
158
+ "Data 5": "160",
159
+ "Data 6": "200",
160
+ "Data 7": "90",
161
+ "Data 8": "135",
162
+ "Data 9": "300",
163
+ "Data 10": "95",
164
+ "Data 11": "120",
165
+ "Data 12": "310"
166
+ },
167
+ {
168
+ "Date": "9/15/2016",
169
+ "Data 1": "80",
170
+ "Data 2": "350",
171
+ "Data 3": "300",
172
+ "Data 4": "150",
173
+ "Data 5": "130",
174
+ "Data 6": "100",
175
+ "Data 7": "40",
176
+ "Data 8": "90",
177
+ "Data 9": "240",
178
+ "Data 10": "60",
179
+ "Data 11": "160",
180
+ "Data 12": "200"
181
+ },
182
+ {
183
+ "Date": "10/15/2016",
184
+ "Data 1": "80",
185
+ "Data 2": "350",
186
+ "Data 3": "300",
187
+ "Data 4": "150",
188
+ "Data 5": "130",
189
+ "Data 6": "100",
190
+ "Data 7": "90",
191
+ "Data 8": "135",
192
+ "Data 9": "300",
193
+ "Data 10": "95",
194
+ "Data 11": "120",
195
+ "Data 12": "310"
196
+ },
197
+ {
198
+ "Date": "11/15/2016",
199
+ "Data 1": "90",
200
+ "Data 2": "135",
201
+ "Data 3": "300",
202
+ "Data 4": "95",
203
+ "Data 5": "120",
204
+ "Data 6": "310",
205
+ "Data 7": "120",
206
+ "Data 8": "160",
207
+ "Data 9": "230",
208
+ "Data 10": "180",
209
+ "Data 11": "160",
210
+ "Data 12": "120"
211
+ },
212
+ {
213
+ "Date": "12/15/2016",
214
+ "Data 1": "120",
215
+ "Data 2": "160",
216
+ "Data 3": "230",
217
+ "Data 4": "180",
218
+ "Data 5": "160",
219
+ "Data 6": "220",
220
+ "Data 7": "40",
221
+ "Data 8": "90",
222
+ "Data 9": "240",
223
+ "Data 10": "60",
224
+ "Data 11": "160",
225
+ "Data 12": "200"
226
+ }
227
+ ]
228
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/chart",
3
- "version": "1.3.3",
3
+ "version": "4.22.10",
4
4
  "description": "React component for visualizing tabular data in various types of charts",
5
5
  "main": "dist/cdcchart",
6
6
  "scripts": {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  "license": "Apache-2.0",
21
21
  "dependencies": {
22
- "@cdc/core": "^1.1.3",
22
+ "@cdc/core": "^1.1.4",
23
23
  "@visx/axis": "^1.0.0",
24
24
  "@visx/curve": "^1.0.0",
25
25
  "@visx/gradient": "^1.0.0",
@@ -50,5 +50,5 @@
50
50
  "resolutions": {
51
51
  "@types/react": "17.x"
52
52
  },
53
- "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
53
+ "gitHead": "a7eb551a98c7363d3be58cb81dfc8bbc00522804"
54
54
  }