@cdc/chart 4.22.10 → 4.22.11

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 (72) hide show
  1. package/README.md +5 -5
  2. package/dist/cdcchart.js +4 -4
  3. package/examples/age-adjusted-rates.json +1486 -1218
  4. package/examples/case-rate-example-config.json +1 -1
  5. package/examples/covid-confidence-example-config.json +33 -33
  6. package/examples/covid-example-config.json +34 -34
  7. package/examples/covid-example-data-confidence.json +30 -30
  8. package/examples/covid-example-data.json +20 -20
  9. package/examples/cutoff-example-config.json +36 -36
  10. package/examples/cutoff-example-data.json +36 -36
  11. package/examples/date-exclusions-config.json +1 -1
  12. package/examples/dynamic-legends.json +124 -124
  13. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +191 -197
  14. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +230 -240
  15. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +239 -247
  16. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +136 -136
  17. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +79 -79
  18. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +80 -80
  19. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +67 -67
  20. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +110 -110
  21. package/examples/gallery/lollipop/lollipop-style-horizontal.json +215 -219
  22. package/examples/gallery/paired-bar/paired-bar-chart.json +195 -195
  23. package/examples/horizontal-chart.json +35 -35
  24. package/examples/horizontal-stacked-bar-chart.json +34 -34
  25. package/examples/line-chart.json +75 -75
  26. package/examples/paired-bar-data.json +16 -14
  27. package/examples/paired-bar-example.json +48 -48
  28. package/examples/paired-bar-formatted.json +36 -36
  29. package/examples/planet-chart-horizontal-example-config.json +33 -33
  30. package/examples/planet-combo-example-config.json +34 -31
  31. package/examples/planet-example-config.json +35 -33
  32. package/examples/planet-example-data.json +56 -56
  33. package/examples/planet-pie-example-config.json +28 -28
  34. package/examples/private/filters.json +170 -0
  35. package/examples/private/line-test-data.json +21 -21
  36. package/examples/private/line-test-two.json +209 -215
  37. package/examples/private/line-test.json +101 -101
  38. package/examples/private/new.json +48800 -0
  39. package/examples/private/shawn.json +1105 -1295
  40. package/examples/private/test.json +10123 -10123
  41. package/examples/private/yaxis-test.json +4 -3
  42. package/examples/private/yaxis.json +26 -26
  43. package/examples/stacked-vertical-bar-example.json +1 -1
  44. package/examples/temp-example-config.json +61 -54
  45. package/examples/temp-example-data.json +1 -1
  46. package/package.json +2 -2
  47. package/src/CdcChart.tsx +339 -380
  48. package/src/components/BarChart.tsx +425 -469
  49. package/src/components/DataTable.tsx +164 -195
  50. package/src/components/EditorPanel.js +1009 -710
  51. package/src/components/Legend.js +279 -329
  52. package/src/components/LineChart.tsx +90 -79
  53. package/src/components/LinearChart.tsx +376 -434
  54. package/src/components/PairedBarChart.tsx +197 -213
  55. package/src/components/PieChart.tsx +95 -151
  56. package/src/components/SparkLine.js +179 -201
  57. package/src/components/useIntersectionObserver.tsx +17 -20
  58. package/src/context.tsx +3 -3
  59. package/src/data/initial-state.js +37 -16
  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 +62 -78
  65. package/src/hooks/useRightAxis.js +25 -0
  66. package/src/hooks/useTopAxis.js +6 -0
  67. package/src/index.html +45 -45
  68. package/src/index.tsx +13 -16
  69. package/src/scss/DataTable.scss +5 -4
  70. package/src/scss/editor-panel.scss +71 -69
  71. package/src/scss/main.scss +157 -114
  72. package/src/scss/variables.scss +1 -1
package/examples/gallery/paired-bar/paired-bar-chart.json CHANGED
@@ -1,196 +1,196 @@
1
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
- }
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,38 +1,38 @@
1
1
  {
2
- "title": "Planet Radius (Combo Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
- "animate": true,
5
- "animateReplay": true,
2
+ "title": "Planet Radius (Combo Example)",
3
+ "dataUrl": "/examples/planet-example-data.json",
4
+ "animate": true,
5
+ "animateReplay": true,
6
6
 
7
- "visualizationType": "Bar",
8
- "visualizationSubType": "horizontal",
9
- "isLollipopChart": false,
10
- "barHasBorder": "true",
11
- "series": [{"dataKey":"Radius"}, {"dataKey": "Diameter"}],
12
- "fontSize": "small",
13
- "dataFormat": {
14
- "roundTo": 1,
15
- "commas": false,
16
- "prefix": "",
17
- "suffix": "km"
18
- },
19
- "padding": {
20
- "left": 0,
21
- "right": 0
22
- },
23
- "yAxis": {
24
- "label": "Measurement (1000km)",
25
- "displayNumbersOnBar": false,
26
- "labelPlacement": "On Date/Category Axis"
27
- },
28
- "xAxis": {
29
- "label": "Planet",
30
- "dataKey": "name",
31
- "size": 75
32
- },
33
- "table": {
34
- "label": "Data Table",
35
- "expanded": false
36
- },
37
- "lollipopShape": "circle"
7
+ "visualizationType": "Bar",
8
+ "visualizationSubType": "horizontal",
9
+ "isLollipopChart": false,
10
+ "barHasBorder": "true",
11
+ "series": [{ "dataKey": "Radius" }, { "dataKey": "Diameter" }],
12
+ "fontSize": "small",
13
+ "dataFormat": {
14
+ "roundTo": 1,
15
+ "commas": false,
16
+ "prefix": "",
17
+ "suffix": "km"
18
+ },
19
+ "padding": {
20
+ "left": 0,
21
+ "right": 0
22
+ },
23
+ "yAxis": {
24
+ "label": "Measurement (1000km)",
25
+ "displayNumbersOnBar": false,
26
+ "labelPlacement": "On Date/Category Axis"
27
+ },
28
+ "xAxis": {
29
+ "label": "Planet",
30
+ "dataKey": "name",
31
+ "size": 75
32
+ },
33
+ "table": {
34
+ "label": "Data Table",
35
+ "expanded": false
36
+ },
37
+ "lollipopShape": "circle"
38
38
  }
package/examples/horizontal-stacked-bar-chart.json CHANGED
@@ -1,36 +1,36 @@
1
1
  {
2
- "title": "Planet Radius (Bar Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
- "visualizationType": "Bar",
5
- "visualizationSubType": "stacked",
6
- "series": [{"dataKey": "Radius"}],
7
- "fontSize": "medium",
8
- "dataCutoff": "0.5",
9
- "orientation": "horizontal",
10
- "dataFormat": {
11
- "roundTo": 1,
12
- "commas": false,
13
- "prefix": "",
14
- "suffix": "km"
15
- },
16
- "padding": {
17
- "left": 5,
18
- "right": 5
19
- },
20
- "yAxis": {
21
- "label": "Measurement (1000km)"
22
- },
23
- "xAxis": {
24
- "label": "Planet",
25
- "dataKey": "name",
26
- "tickRotation": 30
27
- },
28
- "legend": {
29
- "hide": false
30
- },
31
- "table": {
32
- "label": "Data Table",
33
- "expanded": false
34
- },
35
- "displayNumbersOnBar": true
2
+ "title": "Planet Radius (Bar Example)",
3
+ "dataUrl": "/examples/planet-example-data.json",
4
+ "visualizationType": "Bar",
5
+ "visualizationSubType": "stacked",
6
+ "series": [{ "dataKey": "Radius" }],
7
+ "fontSize": "medium",
8
+ "dataCutoff": "0.5",
9
+ "orientation": "horizontal",
10
+ "dataFormat": {
11
+ "roundTo": 1,
12
+ "commas": false,
13
+ "prefix": "",
14
+ "suffix": "km"
15
+ },
16
+ "padding": {
17
+ "left": 5,
18
+ "right": 5
19
+ },
20
+ "yAxis": {
21
+ "label": "Measurement (1000km)"
22
+ },
23
+ "xAxis": {
24
+ "label": "Planet",
25
+ "dataKey": "name",
26
+ "tickRotation": 30
27
+ },
28
+ "legend": {
29
+ "hide": false
30
+ },
31
+ "table": {
32
+ "label": "Data Table",
33
+ "expanded": false
34
+ },
35
+ "displayNumbersOnBar": true
36
36
  }