@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/private/line-test-two.json CHANGED
@@ -1,216 +1,210 @@
1
1
  {
2
- "type": "chart",
3
- "title": "Planet Radius (Bar Example)",
4
- "theme": "theme-blue",
5
- "fontSize": "medium",
6
- "lineDatapointStyle": "always show",
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": "always show",
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
- }
2
+ "type": "chart",
3
+ "title": "Planet Radius (Bar Example)",
4
+ "theme": "theme-blue",
5
+ "fontSize": "medium",
6
+ "lineDatapointStyle": "always show",
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": "always show",
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": ["Radius", "Diameter"],
114
+ "originalXAxis": {
115
+ "type": "categorical",
116
+ "hideAxis": false,
117
+ "hideLabel": false,
118
+ "hideTicks": false,
119
+ "size": 75,
120
+ "tickRotation": 30,
121
+ "min": "",
122
+ "max": "",
123
+ "label": "Planet",
124
+ "dataKey": "name"
125
+ },
126
+ "seriesKeys": ["Radius", "Diameter"],
127
+ "xAxis": {
128
+ "hideAxis": false,
129
+ "displayNumbersOnBar": false,
130
+ "hideLabel": false,
131
+ "hideTicks": false,
132
+ "size": 50,
133
+ "gridLines": false,
134
+ "min": "",
135
+ "max": "",
136
+ "label": "Measurement (1000km)"
137
+ },
138
+ "yAxis": {
139
+ "type": "categorical",
140
+ "hideAxis": false,
141
+ "hideLabel": false,
142
+ "hideTicks": false,
143
+ "size": 75,
144
+ "tickRotation": 30,
145
+ "min": "",
146
+ "max": "",
147
+ "label": "Planet",
148
+ "dataKey": "name"
149
+ },
150
+ "horizontal": true,
151
+ "uniqueId": 1663785202233,
152
+ "editorErrorMessage": ""
153
+ },
154
+ "barPadding": 40,
155
+ "labelPlacement": "Below Bar"
156
+ },
157
+ "barThickness": 0.35,
158
+ "barHeight": 25,
159
+ "height": 585,
160
+ "xAxis": {
161
+ "type": "categorical",
162
+ "hideAxis": false,
163
+ "hideLabel": false,
164
+ "hideTicks": false,
165
+ "size": 75,
166
+ "tickRotation": 30,
167
+ "min": "",
168
+ "max": "",
169
+ "label": "Planet",
170
+ "dataKey": "name"
171
+ },
172
+ "table": {
173
+ "label": "Data Table",
174
+ "expanded": false,
175
+ "show": true
176
+ },
177
+ "orientation": "horizontal",
178
+ "legend": {
179
+ "behavior": "isolate",
180
+ "position": "right",
181
+ "reverseLabelOrder": false,
182
+ "hide": false
183
+ },
184
+ "exclusions": {
185
+ "active": false,
186
+ "keys": []
187
+ },
188
+ "palette": "qualitative-bold",
189
+ "isPaletteReversed": false,
190
+ "labels": false,
191
+ "dataFormat": {
192
+ "commas": false,
193
+ "prefix": "",
194
+ "suffix": "km",
195
+ "roundTo": 1
196
+ },
197
+ "confidenceKeys": {},
198
+ "dataUrl": "/examples/planet-example-data.json",
199
+ "visualizationType": "Line",
200
+ "series": [
201
+ {
202
+ "dataKey": "Radius"
203
+ },
204
+ {
205
+ "dataKey": "Diameter"
206
+ }
207
+ ],
208
+ "dataCutoff": "0.5",
209
+ "barPadding": 40
210
+ }
package/examples/private/line-test.json CHANGED
@@ -1,102 +1,102 @@
1
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
- }
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
+ }