@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
@@ -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
+ }
@@ -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
  }
@@ -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
  }