@cdc/chart 4.26.4 → 4.26.5

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 (93) hide show
  1. package/CONFIG.md +349 -29
  2. package/LICENSE +201 -0
  3. package/dist/cdcchart.js +34247 -32805
  4. package/examples/feature/heatmap/average-age-categorical.json +313 -0
  5. package/examples/feature/heatmap/calendar-heatmap.json +134 -0
  6. package/examples/feature/heatmap/cell-values-bottom-axis.json +181 -0
  7. package/examples/feature/heatmap/sparse-aggregation.json +158 -0
  8. package/examples/private/bump-chart.json +1116 -0
  9. package/examples/private/test-123.json +624 -0
  10. package/package.json +4 -3
  11. package/src/CdcChartComponent.tsx +135 -54
  12. package/src/_stories/Chart.AltText.stories.tsx +136 -0
  13. package/src/_stories/Chart.HeatMap.stories.tsx +187 -0
  14. package/src/_stories/Chart.Sankey.smoke.stories.tsx +62 -0
  15. package/src/_stories/Chart.SmallMultiples.smoke.stories.tsx +29 -0
  16. package/src/_stories/ChartAxisTitles.smoke.stories.tsx +13 -0
  17. package/src/_stories/ChartBar.Editor.stories.tsx +63 -0
  18. package/src/_stories/ChartBrush.Interaction.stories.tsx +112 -0
  19. package/src/_stories/ChartBrush.smoke.stories.tsx +13 -4
  20. package/src/_stories/_mock/alt_text_metadata.json +38 -0
  21. package/src/_stories/_mock/heatmap-average-age-categorical.json +315 -0
  22. package/src/_stories/_mock/heatmap.json +156 -0
  23. package/src/_stories/_mock/reported_pertussis_cases.json +1643 -0
  24. package/src/_stories/_mock/sankey_mock.json +78 -0
  25. package/src/_stories/_mock/small_multiples/small_multiples_lines.json +1 -1
  26. package/src/components/Annotations/components/AnnotationDraggable.tsx +1 -1
  27. package/src/components/Annotations/components/AnnotationDropdown.tsx +5 -2
  28. package/src/components/Axis/LeftAxis.tsx +14 -11
  29. package/src/components/Axis/LeftAxisGridlines.tsx +14 -11
  30. package/src/components/Brush/BrushSelector.tsx +88 -187
  31. package/src/components/Brush/brushInteraction.ts +22 -0
  32. package/src/components/Brush/tests/brushInteraction.test.ts +38 -0
  33. package/src/components/EditorPanel/EditorPanel.tsx +310 -49
  34. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +13 -0
  35. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +105 -13
  36. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +1 -0
  37. package/src/components/EditorPanel/components/Panels/Panel.Regions.tsx +5 -0
  38. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +2 -2
  39. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +1 -1
  40. package/src/components/EditorPanel/helpers/getVisualizationTypeConfigUpdate.ts +57 -0
  41. package/src/components/EditorPanel/helpers/tests/getVisualizationTypeConfigUpdate.test.ts +56 -0
  42. package/src/components/EditorPanel/useEditorPermissions.test.tsx +70 -0
  43. package/src/components/EditorPanel/useEditorPermissions.ts +42 -22
  44. package/src/components/HeatMap/components/HeatMap.tsx +762 -0
  45. package/src/components/HeatMap/components/HeatMapGradientLegend.tsx +114 -0
  46. package/src/components/HeatMap/heatmap.constants.ts +13 -0
  47. package/src/components/HeatMap/heatmap.css +71 -0
  48. package/src/components/HeatMap/helpers/index.ts +261 -0
  49. package/src/components/HeatMap/index.tsx +5 -0
  50. package/src/components/HeatMap/tests/HeatMap.test.tsx +1040 -0
  51. package/src/components/HeatMap/tests/helpers.test.ts +167 -0
  52. package/src/components/LineChart/components/LineChart.BumpCircle.tsx +19 -22
  53. package/src/components/LineChart/helpers.test.ts +345 -0
  54. package/src/components/LineChart/helpers.ts +15 -5
  55. package/src/components/LineChart/index.tsx +7 -1
  56. package/src/components/LinearChart/tests/LinearChart.test.tsx +107 -33
  57. package/src/components/LinearChart/tests/mockConfigContext.ts +1 -0
  58. package/src/components/LinearChart.tsx +58 -37
  59. package/src/components/PieChart/PieChart.tsx +4 -1
  60. package/src/components/RadarChart/RadarChart.tsx +3 -1
  61. package/src/components/Regions/components/Regions.tsx +195 -41
  62. package/src/components/Sankey/components/Sankey.tsx +7 -3
  63. package/src/components/Sankey/helpers/getSankeyTooltip.tsx +7 -6
  64. package/src/components/SmallMultiples/SmallMultipleTile.tsx +30 -3
  65. package/src/components/SmallMultiples/SmallMultiples.css +12 -0
  66. package/src/components/SmallMultiples/SmallMultiples.tsx +15 -9
  67. package/src/components/SmallMultiples/tests/SmallMultipleTile.test.tsx +152 -0
  68. package/src/components/Sparkline/components/SparkLine.tsx +4 -9
  69. package/src/components/WarmingStripes/WarmingStripesGradientLegend.css +1 -1
  70. package/src/components/WarmingStripes/WarmingStripesGradientLegend.tsx +2 -2
  71. package/src/data/initial-state.js +11 -0
  72. package/src/helpers/axisLabelFontSize.ts +8 -0
  73. package/src/helpers/bumpChartTooltip.ts +54 -0
  74. package/src/helpers/calculateLeftYAxisWidth.ts +4 -0
  75. package/src/helpers/ensureSpecialChartAxisTypes.ts +11 -0
  76. package/src/helpers/getMinMax.ts +2 -3
  77. package/src/helpers/getYAxisAutoPadding.ts +8 -6
  78. package/src/helpers/getYAxisAutoPaddingMode.ts +17 -0
  79. package/src/helpers/handleChartAriaLabels.ts +23 -10
  80. package/src/helpers/seriesHighlight.ts +26 -0
  81. package/src/helpers/tests/axisLabelFontSize.test.ts +15 -0
  82. package/src/helpers/tests/bumpChartTooltip.test.ts +75 -0
  83. package/src/helpers/tests/ensureSpecialChartAxisTypes.test.ts +30 -0
  84. package/src/helpers/tests/getYAxisAutoPadding.test.ts +37 -0
  85. package/src/helpers/tests/getYAxisAutoPaddingMode.test.ts +90 -0
  86. package/src/helpers/tests/handleChartAriaLabels.test.ts +71 -0
  87. package/src/helpers/tests/seriesHighlight.test.ts +61 -0
  88. package/src/hooks/tests/useScales.test.tsx +105 -0
  89. package/src/hooks/useScales.ts +19 -9
  90. package/src/index.jsx +5 -2
  91. package/src/scss/main.scss +32 -49
  92. package/src/types/ChartConfig.ts +18 -0
  93. package/src/types/ChartContext.ts +2 -0
package/src/_stories/_mock/heatmap-average-age-categorical.json ADDED
@@ -0,0 +1,315 @@
1
+ {
2
+ "version": "4.26.6",
3
+ "type": "chart",
4
+ "visualizationType": "HeatMap",
5
+ "visualizationSubType": "regular",
6
+ "title": "Average Age by City and Community Type",
7
+ "showTitle": true,
8
+ "theme": "theme-blue",
9
+ "animate": false,
10
+ "data": [
11
+ {
12
+ "communityType": "Urban Core",
13
+ "Atlanta": 34,
14
+ "Boston": 35,
15
+ "Charlotte": 34,
16
+ "Chicago": 36,
17
+ "Dallas": 33,
18
+ "Denver": 37,
19
+ "Detroit": 39,
20
+ "Miami": 41,
21
+ "Nashville": 36,
22
+ "Phoenix": 38,
23
+ "Portland": 40,
24
+ "Seattle": 35,
25
+ "notes": "Dense city center"
26
+ },
27
+ {
28
+ "communityType": "Inner Suburb",
29
+ "Atlanta": 38,
30
+ "Boston": 39,
31
+ "Charlotte": 38,
32
+ "Chicago": 38,
33
+ "Dallas": 37,
34
+ "Denver": 40,
35
+ "Detroit": 42,
36
+ "Miami": 43,
37
+ "Nashville": 40,
38
+ "Phoenix": 41,
39
+ "Portland": 42,
40
+ "Seattle": 39,
41
+ "notes": "Near-city suburbs"
42
+ },
43
+ {
44
+ "communityType": "Outer Suburb",
45
+ "Atlanta": 41,
46
+ "Boston": 42,
47
+ "Charlotte": 42,
48
+ "Chicago": 39,
49
+ "Dallas": 40,
50
+ "Denver": 43,
51
+ "Detroit": 45,
52
+ "Miami": 44,
53
+ "Nashville": 43,
54
+ "Phoenix": 42,
55
+ "Portland": 44,
56
+ "Seattle": 41,
57
+ "notes": "Commuter belt"
58
+ },
59
+ {
60
+ "communityType": "Small Town",
61
+ "Atlanta": 44,
62
+ "Boston": 45,
63
+ "Charlotte": 46,
64
+ "Chicago": 43,
65
+ "Dallas": 42,
66
+ "Denver": 46,
67
+ "Detroit": 48,
68
+ "Miami": 47,
69
+ "Nashville": 45,
70
+ "Phoenix": 46,
71
+ "Portland": 45,
72
+ "Seattle": 44,
73
+ "notes": "Regional towns"
74
+ },
75
+ {
76
+ "communityType": "Rural",
77
+ "Atlanta": 46,
78
+ "Boston": 47,
79
+ "Charlotte": 48,
80
+ "Chicago": 44,
81
+ "Dallas": 45,
82
+ "Denver": 48,
83
+ "Detroit": 50,
84
+ "Miami": 49,
85
+ "Nashville": 47,
86
+ "Phoenix": 49,
87
+ "Portland": 46,
88
+ "Seattle": 45,
89
+ "notes": "Outer counties"
90
+ }
91
+ ],
92
+ "xAxis": {
93
+ "type": "categorical",
94
+ "dataKey": "communityType",
95
+ "label": "Community Type",
96
+ "tickRotation": 45,
97
+ "maxTickRotation": 45,
98
+ "hideAxis": false,
99
+ "hideLabel": false,
100
+ "hideTicks": false
101
+ },
102
+ "yAxis": {
103
+ "type": "categorical",
104
+ "label": "City",
105
+ "hideAxis": false,
106
+ "hideLabel": false,
107
+ "hideTicks": false,
108
+ "size": 105
109
+ },
110
+ "series": [
111
+ {
112
+ "dataKey": "Atlanta",
113
+ "name": "Atlanta",
114
+ "type": "HeatMap",
115
+ "axis": "Left",
116
+ "tooltip": true
117
+ },
118
+ {
119
+ "dataKey": "Boston",
120
+ "name": "Boston",
121
+ "type": "HeatMap",
122
+ "axis": "Left",
123
+ "tooltip": true
124
+ },
125
+ {
126
+ "dataKey": "Charlotte",
127
+ "name": "Charlotte",
128
+ "type": "HeatMap",
129
+ "axis": "Left",
130
+ "tooltip": true
131
+ },
132
+ {
133
+ "dataKey": "Chicago",
134
+ "name": "Chicago",
135
+ "type": "HeatMap",
136
+ "axis": "Left",
137
+ "tooltip": true
138
+ },
139
+ {
140
+ "dataKey": "Dallas",
141
+ "name": "Dallas",
142
+ "type": "HeatMap",
143
+ "axis": "Left",
144
+ "tooltip": true
145
+ },
146
+ {
147
+ "dataKey": "Denver",
148
+ "name": "Denver",
149
+ "type": "HeatMap",
150
+ "axis": "Left",
151
+ "tooltip": true
152
+ },
153
+ {
154
+ "dataKey": "Detroit",
155
+ "name": "Detroit",
156
+ "type": "HeatMap",
157
+ "axis": "Left",
158
+ "tooltip": true
159
+ },
160
+ {
161
+ "dataKey": "Miami",
162
+ "name": "Miami",
163
+ "type": "HeatMap",
164
+ "axis": "Left",
165
+ "tooltip": true
166
+ },
167
+ {
168
+ "dataKey": "Nashville",
169
+ "name": "Nashville",
170
+ "type": "HeatMap",
171
+ "axis": "Left",
172
+ "tooltip": true
173
+ },
174
+ {
175
+ "dataKey": "Phoenix",
176
+ "name": "Phoenix",
177
+ "type": "HeatMap",
178
+ "axis": "Left",
179
+ "tooltip": true
180
+ },
181
+ {
182
+ "dataKey": "Portland",
183
+ "name": "Portland",
184
+ "type": "HeatMap",
185
+ "axis": "Left",
186
+ "tooltip": true
187
+ },
188
+ {
189
+ "dataKey": "Seattle",
190
+ "name": "Seattle",
191
+ "type": "HeatMap",
192
+ "axis": "Left",
193
+ "tooltip": true
194
+ }
195
+ ],
196
+ "columns": {
197
+ "communityType": {
198
+ "name": "communityType",
199
+ "label": "Community Type",
200
+ "dataTable": true
201
+ },
202
+ "Atlanta": {
203
+ "name": "Atlanta",
204
+ "label": "Atlanta",
205
+ "dataTable": true
206
+ },
207
+ "Boston": {
208
+ "name": "Boston",
209
+ "label": "Boston",
210
+ "dataTable": true
211
+ },
212
+ "Charlotte": {
213
+ "name": "Charlotte",
214
+ "label": "Charlotte",
215
+ "dataTable": true
216
+ },
217
+ "Chicago": {
218
+ "name": "Chicago",
219
+ "label": "Chicago",
220
+ "dataTable": true
221
+ },
222
+ "Dallas": {
223
+ "name": "Dallas",
224
+ "label": "Dallas",
225
+ "dataTable": true
226
+ },
227
+ "Denver": {
228
+ "name": "Denver",
229
+ "label": "Denver",
230
+ "dataTable": true
231
+ },
232
+ "Detroit": {
233
+ "name": "Detroit",
234
+ "label": "Detroit",
235
+ "dataTable": true
236
+ },
237
+ "Miami": {
238
+ "name": "Miami",
239
+ "label": "Miami",
240
+ "dataTable": true
241
+ },
242
+ "Nashville": {
243
+ "name": "Nashville",
244
+ "label": "Nashville",
245
+ "dataTable": true
246
+ },
247
+ "Phoenix": {
248
+ "name": "Phoenix",
249
+ "label": "Phoenix",
250
+ "dataTable": true
251
+ },
252
+ "Portland": {
253
+ "name": "Portland",
254
+ "label": "Portland",
255
+ "dataTable": true
256
+ },
257
+ "Seattle": {
258
+ "name": "Seattle",
259
+ "label": "Seattle",
260
+ "dataTable": true
261
+ },
262
+ "notes": {
263
+ "name": "notes",
264
+ "label": "Notes",
265
+ "dataTable": true,
266
+ "tooltips": true
267
+ }
268
+ },
269
+ "heatmap": {
270
+ "cellPadding": 1,
271
+ "rowLabelGap": 32,
272
+ "columnLabelGap": 56,
273
+ "xAxisPosition": "top",
274
+ "showCellValues": false
275
+ },
276
+ "legend": {
277
+ "hide": false,
278
+ "position": "top",
279
+ "style": "gradient",
280
+ "subStyle": "smooth",
281
+ "label": "Average age",
282
+ "hideBorder": false
283
+ },
284
+ "general": {
285
+ "palette": {
286
+ "name": "sequential_blue",
287
+ "version": "2.0",
288
+ "isReversed": false
289
+ }
290
+ },
291
+ "tooltips": {
292
+ "opacity": 90,
293
+ "singleSeries": false
294
+ },
295
+ "dataFormat": {
296
+ "abbreviated": false,
297
+ "roundTo": 0,
298
+ "commas": true
299
+ },
300
+ "table": {
301
+ "showVertical": true,
302
+ "show": true,
303
+ "showDataTableLink": true,
304
+ "expanded": false
305
+ },
306
+ "heights": {
307
+ "vertical": 620,
308
+ "horizontal": 620,
309
+ "mobileVertical": 520
310
+ },
311
+ "filters": [],
312
+ "chartMessage": {
313
+ "noData": "No Data Available"
314
+ }
315
+ }
package/src/_stories/_mock/heatmap.json ADDED
@@ -0,0 +1,156 @@
1
+ {
2
+ "version": "4.26.6",
3
+ "type": "chart",
4
+ "visualizationType": "HeatMap",
5
+ "visualizationSubType": "regular",
6
+ "title": "HeatMap Series Rows Demo",
7
+ "showTitle": true,
8
+ "theme": "theme-blue",
9
+ "animate": false,
10
+ "data": [
11
+ {
12
+ "week": "2024-01-01",
13
+ "Northeast": 12,
14
+ "South": 30,
15
+ "West": 18,
16
+ "notes": "Baseline"
17
+ },
18
+ {
19
+ "week": "2024-02-01",
20
+ "Northeast": 18,
21
+ "South": 34,
22
+ "notes": "West missing"
23
+ },
24
+ {
25
+ "week": "2024-03-01",
26
+ "Northeast": 24,
27
+ "South": 29,
28
+ "West": 22,
29
+ "notes": "Stable"
30
+ },
31
+ {
32
+ "week": "2024-03-01",
33
+ "Northeast": 6,
34
+ "South": 7,
35
+ "West": 3,
36
+ "notes": "Late report"
37
+ }
38
+ ],
39
+ "xAxis": {
40
+ "type": "date",
41
+ "dataKey": "week",
42
+ "label": "Week",
43
+ "dateParseFormat": "%Y-%m-%d",
44
+ "dateDisplayFormat": "%b %-d",
45
+ "maxTickRotation": 45,
46
+ "hideAxis": false,
47
+ "hideLabel": false,
48
+ "hideTicks": false
49
+ },
50
+ "yAxis": {
51
+ "type": "categorical",
52
+ "label": "Region",
53
+ "hideAxis": false,
54
+ "hideLabel": false,
55
+ "hideTicks": false,
56
+ "size": 80
57
+ },
58
+ "series": [
59
+ {
60
+ "dataKey": "Northeast",
61
+ "name": "Northeast",
62
+ "type": "HeatMap",
63
+ "axis": "Left",
64
+ "tooltip": true
65
+ },
66
+ {
67
+ "dataKey": "South",
68
+ "name": "South",
69
+ "type": "HeatMap",
70
+ "axis": "Left",
71
+ "tooltip": true
72
+ },
73
+ {
74
+ "dataKey": "West",
75
+ "name": "West",
76
+ "type": "HeatMap",
77
+ "axis": "Left",
78
+ "tooltip": true
79
+ }
80
+ ],
81
+ "columns": {
82
+ "week": {
83
+ "name": "week",
84
+ "label": "Week",
85
+ "dataTable": true
86
+ },
87
+ "Northeast": {
88
+ "name": "Northeast",
89
+ "label": "Northeast",
90
+ "dataTable": true
91
+ },
92
+ "South": {
93
+ "name": "South",
94
+ "label": "South",
95
+ "dataTable": true
96
+ },
97
+ "West": {
98
+ "name": "West",
99
+ "label": "West",
100
+ "dataTable": true
101
+ },
102
+ "notes": {
103
+ "name": "notes",
104
+ "label": "Notes",
105
+ "dataTable": true,
106
+ "tooltips": true
107
+ }
108
+ },
109
+ "heatmap": {
110
+ "cellPadding": 1,
111
+ "rowLabelGap": 32,
112
+ "columnLabelGap": 56,
113
+ "xAxisPosition": "top",
114
+ "showCellValues": false
115
+ },
116
+ "legend": {
117
+ "hide": false,
118
+ "position": "top",
119
+ "style": "gradient",
120
+ "subStyle": "smooth",
121
+ "label": "Cases per 100,000",
122
+ "hideBorder": false
123
+ },
124
+ "general": {
125
+ "palette": {
126
+ "name": "sequential_blue",
127
+ "version": "2.0",
128
+ "isReversed": false
129
+ }
130
+ },
131
+ "tooltips": {
132
+ "opacity": 90,
133
+ "singleSeries": false,
134
+ "dateDisplayFormat": "%B %-d, %Y"
135
+ },
136
+ "dataFormat": {
137
+ "abbreviated": false,
138
+ "roundTo": 0,
139
+ "commas": true
140
+ },
141
+ "table": {
142
+ "showVertical": true,
143
+ "show": true,
144
+ "showDataTableLink": true,
145
+ "expanded": false
146
+ },
147
+ "heights": {
148
+ "vertical": 340,
149
+ "horizontal": 340,
150
+ "mobileVertical": 260
151
+ },
152
+ "filters": [],
153
+ "chartMessage": {
154
+ "noData": "No Data Available"
155
+ }
156
+ }