@cdc/chart 4.23.8 → 4.23.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 (34) hide show
  1. package/dist/cdcchart.js +44114 -44410
  2. package/examples/feature/__data__/area-chart-date-apple.json +1 -5073
  3. package/examples/feature/area/area-chart-date-apple.json +73 -10316
  4. package/examples/feature/area/area-chart-date-city-temperature.json +204 -80
  5. package/examples/{private/confidence_interval_test.json → feature/area/area-chart-stacked.json} +65 -74
  6. package/examples/feature/filters/bar-filter.json +5027 -0
  7. package/examples/feature/legend-highlights/highlights.json +567 -0
  8. package/index.html +28 -7
  9. package/package.json +3 -2
  10. package/src/{CdcChart.jsx → CdcChart.tsx} +77 -71
  11. package/src/components/AreaChart.Stacked.jsx +73 -0
  12. package/src/components/AreaChart.jsx +24 -26
  13. package/src/components/BarChart.StackedVertical.jsx +2 -0
  14. package/src/components/DeviationBar.jsx +67 -13
  15. package/src/components/EditorPanel.jsx +493 -454
  16. package/src/components/Forecasting.jsx +5 -5
  17. package/src/components/Legend.jsx +17 -8
  18. package/src/components/LineChart.Circle.tsx +108 -0
  19. package/src/components/{LineChart.jsx → LineChart.tsx} +10 -42
  20. package/src/components/LinearChart.jsx +460 -443
  21. package/src/components/PieChart.jsx +54 -25
  22. package/src/components/Series.jsx +63 -17
  23. package/src/components/SparkLine.jsx +7 -19
  24. package/src/data/initial-state.js +10 -1
  25. package/src/hooks/useEditorPermissions.js +87 -24
  26. package/src/hooks/useLegendClasses.js +14 -11
  27. package/src/hooks/useReduceData.js +6 -1
  28. package/src/hooks/useScales.js +2 -2
  29. package/src/hooks/useTooltip.jsx +21 -8
  30. package/src/scss/legend.scss +206 -0
  31. package/src/scss/main.scss +25 -24
  32. package/examples/private/tooltip-issue.json +0 -45275
  33. package/src/components/DataTable.jsx +0 -374
  34. /package/src/{components → hooks}/useIntersectionObserver.jsx +0 -0
@@ -1,6 +1,10 @@
1
1
  {
2
2
  "type": "chart",
3
+ "debugSvg": false,
3
4
  "title": "Example Area Chart - City Temperature Data",
5
+ "showTitle": true,
6
+ "showDownloadMediaButton": false,
7
+ "showChartBrush": false,
4
8
  "theme": "theme-blue",
5
9
  "animate": false,
6
10
  "fontSize": "medium",
@@ -13,6 +17,10 @@
13
17
  "barStyle": "",
14
18
  "roundingStyle": "standard",
15
19
  "tipRounding": "top",
20
+ "isResponsiveTicks": false,
21
+ "general": {
22
+ "showDownloadButton": false
23
+ },
16
24
  "padding": {
17
25
  "left": 5,
18
26
  "right": 5
@@ -24,6 +32,7 @@
24
32
  "hideTicks": false,
25
33
  "size": "150",
26
34
  "gridLines": false,
35
+ "enablePadding": false,
27
36
  "min": "",
28
37
  "max": "",
29
38
  "labelColor": "#333",
@@ -31,24 +40,213 @@
31
40
  "tickColor": "#333",
32
41
  "rightHideAxis": true,
33
42
  "rightAxisSize": 0,
43
+ "rightLabel": "",
34
44
  "rightLabelOffsetSize": 0,
35
45
  "rightAxisLabelColor": "#333",
36
46
  "rightAxisTickLabelColor": "#333",
37
47
  "rightAxisTickColor": "#333",
38
- "isLegendValue": false,
39
48
  "numTicks": "",
49
+ "axisPadding": 0,
50
+ "tickRotation": 0,
51
+ "anchors": [],
52
+ "isLegendValue": false,
40
53
  "label": "Y Axis - Temperature"
41
54
  },
55
+ "boxplot": {
56
+ "plots": [],
57
+ "borders": "true",
58
+ "firstQuartilePercentage": 25,
59
+ "thirdQuartilePercentage": 75,
60
+ "boxWidthPercentage": 40,
61
+ "plotOutlierValues": false,
62
+ "plotNonOutlierValues": true,
63
+ "legend": {
64
+ "showHowToReadText": false,
65
+ "howToReadText": ""
66
+ },
67
+ "labels": {
68
+ "q1": "Lower Quartile",
69
+ "q2": "q2",
70
+ "q3": "Upper Quartile",
71
+ "q4": "q4",
72
+ "minimum": "Minimum",
73
+ "maximum": "Maximum",
74
+ "mean": "Mean",
75
+ "median": "Median",
76
+ "sd": "Standard Deviation",
77
+ "iqr": "Interquartile Range",
78
+ "total": "Total",
79
+ "outliers": "Outliers",
80
+ "values": "Values",
81
+ "lowerBounds": "Lower Bounds",
82
+ "upperBounds": "Upper Bounds"
83
+ }
84
+ },
42
85
  "topAxis": {
43
86
  "hasLine": false
44
87
  },
88
+ "isLegendValue": false,
89
+ "barThickness": 0.35,
90
+ "barHeight": 25,
91
+ "barSpace": 20,
92
+ "heights": {
93
+ "vertical": 300,
94
+ "horizontal": 750
95
+ },
96
+ "xAxis": {
97
+ "anchors": [],
98
+ "type": "date",
99
+ "showTargetLabel": true,
100
+ "targetLabel": "Target",
101
+ "hideAxis": false,
102
+ "hideLabel": false,
103
+ "hideTicks": false,
104
+ "size": "50",
105
+ "tickRotation": 30,
106
+ "min": "",
107
+ "max": "",
108
+ "labelColor": "#333",
109
+ "tickLabelColor": "#333",
110
+ "tickColor": "#333",
111
+ "numTicks": "6",
112
+ "labelOffset": 65,
113
+ "axisPadding": 0,
114
+ "target": 0,
115
+ "maxTickRotation": 0,
116
+ "isLegendValue": false,
117
+ "dataKey": "Date",
118
+ "label": "X Axis Example Label",
119
+ "dateParseFormat": "%Y-%m-%d",
120
+ "dateDisplayFormat": "%m/%d/%Y"
121
+ },
122
+ "table": {
123
+ "label": "Data Type by Date",
124
+ "expanded": false,
125
+ "limitHeight": false,
126
+ "height": "",
127
+ "caption": "",
128
+ "showDownloadUrl": true,
129
+ "showDataTableLink": true,
130
+ "indexLabel": "",
131
+ "download": true,
132
+ "showVertical": false,
133
+ "show": true
134
+ },
135
+ "orientation": "vertical",
136
+ "color": "pinkpurple",
137
+ "columns": {},
138
+ "legend": {
139
+ "behavior": "isolate",
140
+ "singleRow": false,
141
+ "colorCode": "",
142
+ "reverseLabelOrder": false,
143
+ "description": "",
144
+ "dynamicLegend": false,
145
+ "dynamicLegendDefaultText": "Show All",
146
+ "dynamicLegendItemLimit": 5,
147
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
148
+ "dynamicLegendChartMessage": "Select Options from the Legend",
149
+ "position": "right",
150
+ "label": "Type of Data"
151
+ },
152
+ "exclusions": {
153
+ "active": true,
154
+ "keys": []
155
+ },
156
+ "palette": "qualitative-bold",
157
+ "isPaletteReversed": false,
158
+ "twoColor": {
159
+ "palette": "monochrome-1",
160
+ "isPaletteReversed": false
161
+ },
162
+ "labels": false,
163
+ "dataFormat": {
164
+ "commas": true,
165
+ "prefix": "",
166
+ "suffix": "",
167
+ "abbreviated": true,
168
+ "bottomSuffix": "",
169
+ "bottomPrefix": "",
170
+ "bottomAbbreviated": false,
171
+ "useFormat": true
172
+ },
173
+ "confidenceKeys": {},
174
+ "visual": {
175
+ "border": true,
176
+ "accent": true,
177
+ "background": true,
178
+ "verticalHoverLine": false,
179
+ "horizontalHoverLine": false
180
+ },
181
+ "useLogScale": false,
182
+ "filterBehavior": "dropdown",
183
+ "highlightedBarValues": [],
184
+ "series": [
185
+ {
186
+ "dataKey": "Austin",
187
+ "type": "Area Chart",
188
+ "tooltip": true
189
+ },
190
+ {
191
+ "dataKey": "San Francisco",
192
+ "type": "Area Chart",
193
+ "axis": "Left",
194
+ "tooltip": true
195
+ }
196
+ ],
197
+ "tooltips": {
198
+ "opacity": 90
199
+ },
200
+ "forestPlot": {
201
+ "startAt": 0,
202
+ "width": "auto",
203
+ "colors": {
204
+ "line": "",
205
+ "shape": ""
206
+ },
207
+ "estimateField": "",
208
+ "estimateRadius": "",
209
+ "lowerCiField": "",
210
+ "upperCiField": "",
211
+ "shape": "",
212
+ "rowHeight": 20,
213
+ "showZeroLine": false,
214
+ "description": {
215
+ "show": true,
216
+ "text": "description",
217
+ "location": 0
218
+ },
219
+ "result": {
220
+ "show": true,
221
+ "text": "result",
222
+ "location": 100
223
+ },
224
+ "radius": {
225
+ "min": 1,
226
+ "max": 8,
227
+ "scalingColumn": ""
228
+ },
229
+ "regression": {
230
+ "lower": 0,
231
+ "upper": 0,
232
+ "estimateField": 0
233
+ },
234
+ "leftWidthOffset": 0,
235
+ "rightWidthOffset": 0
236
+ },
237
+ "brush": {
238
+ "pattern_id": "brush_pattern",
239
+ "accent_color": "#ddd"
240
+ },
241
+ "area": {
242
+ "isStacked": true
243
+ },
45
244
  "dataDescription": {
46
245
  "horizontal": false,
47
246
  "series": false
48
247
  },
49
248
  "dataFileName": "valid-area-chart.json",
50
249
  "dataFileSourceType": "file",
51
- "filterBehavior": "dropdown",
52
250
  "formattedData": [
53
251
  {
54
252
  "Date": "2011-10-01",
@@ -2247,77 +2445,7 @@
2247
2445
  "Austin": "71.9"
2248
2446
  }
2249
2447
  ],
2250
- "heights": {
2251
- "horizontal": 750,
2252
- "vertical": 300
2253
- },
2254
- "barHeight": 25,
2255
- "barSpace": 20,
2256
2448
  "height": 300,
2257
- "xAxis": {
2258
- "type": "date",
2259
- "hideAxis": false,
2260
- "hideLabel": false,
2261
- "hideTicks": false,
2262
- "size": "50",
2263
- "tickRotation": 30,
2264
- "min": "",
2265
- "max": "",
2266
- "labelColor": "#333",
2267
- "tickLabelColor": "#333",
2268
- "tickColor": "#333",
2269
- "isLegendValue": false,
2270
- "numTicks": "6",
2271
- "dataKey": "Date",
2272
- "label": "X Axis Example Label",
2273
- "dateParseFormat": "%Y-%m-%d",
2274
- "dateDisplayFormat": "%m/%d/%Y"
2275
- },
2276
- "table": {
2277
- "label": "Data Type by Date",
2278
- "expanded": false,
2279
- "limitHeight": false,
2280
- "height": "",
2281
- "caption": "",
2282
- "showDownloadUrl": true,
2283
- "show": true,
2284
- "download": true
2285
- },
2286
- "orientation": "vertical",
2287
- "legend": {
2288
- "behavior": "isolate",
2289
- "position": "right",
2290
- "singleRow": false,
2291
- "colorCode": "",
2292
- "reverseLabelOrder": false,
2293
- "description": "",
2294
- "dynamicLegend": false,
2295
- "dynamicLegendDefaultText": "Show All",
2296
- "dynamicLegendItemLimit": 5,
2297
- "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
2298
- "dynamicLegendChartMessage": "Select Options from the Legend",
2299
- "label": "Type of Data"
2300
- },
2301
- "exclusions": {
2302
- "active": true,
2303
- "keys": []
2304
- },
2305
- "palette": "qualitative-bold",
2306
- "isPaletteReversed": false,
2307
- "labels": false,
2308
- "dataFormat": {
2309
- "abbreviated": true,
2310
- "commas": true,
2311
- "prefix": "",
2312
- "suffix": "",
2313
- "useFormat": true
2314
- },
2315
- "confidenceKeys": {},
2316
- "visual": {
2317
- "border": true,
2318
- "accent": true,
2319
- "background": true
2320
- },
2321
2449
  "data": [
2322
2450
  {
2323
2451
  "Date": "2011-10-01",
@@ -4517,12 +4645,8 @@
4517
4645
  }
4518
4646
  ],
4519
4647
  "visualizationType": "Area Chart",
4520
- "series": [
4521
- {
4522
- "dataKey": "Austin",
4523
- "type": "Area Chart"
4524
- }
4525
- ],
4526
4648
  "description": "This example shows a bar chart created in the visualization editor in WCMS",
4527
- "dataCutoff": "0"
4528
- }
4649
+ "dataCutoff": "0",
4650
+ "validated": 4.23,
4651
+ "dynamicMarginTop": 0
4652
+ }
@@ -1,17 +1,19 @@
1
1
  {
2
2
  "type": "chart",
3
- "title": "",
3
+ "debugSvg": false,
4
+ "title": "Planet Radius (Combo Example)",
4
5
  "showTitle": true,
5
6
  "showDownloadMediaButton": false,
7
+ "showChartBrush": false,
6
8
  "theme": "theme-blue",
7
- "animate": false,
8
- "fontSize": "medium",
9
+ "animate": true,
10
+ "fontSize": "small",
9
11
  "lineDatapointStyle": "hover",
10
- "barHasBorder": "false",
12
+ "barHasBorder": "true",
11
13
  "isLollipopChart": false,
12
14
  "lollipopShape": "circle",
13
15
  "lollipopColorStyle": "two-tone",
14
- "visualizationSubType": "regular",
16
+ "visualizationSubType": "horizontal",
15
17
  "barStyle": "",
16
18
  "roundingStyle": "standard",
17
19
  "tipRounding": "top",
@@ -20,8 +22,8 @@
20
22
  "showDownloadButton": false
21
23
  },
22
24
  "padding": {
23
- "left": 5,
24
- "right": 5
25
+ "left": 0,
26
+ "right": 0
25
27
  },
26
28
  "yAxis": {
27
29
  "hideAxis": false,
@@ -46,7 +48,9 @@
46
48
  "numTicks": "",
47
49
  "axisPadding": 0,
48
50
  "tickRotation": 0,
49
- "anchors": []
51
+ "anchors": [],
52
+ "label": "Measurement (1000km)",
53
+ "labelPlacement": "On Date/Category Axis"
50
54
  },
51
55
  "boxplot": {
52
56
  "plots": [],
@@ -109,11 +113,12 @@
109
113
  "axisPadding": 0,
110
114
  "target": 0,
111
115
  "maxTickRotation": 0,
112
- "dataKey": "date"
116
+ "label": "Planet",
117
+ "dataKey": "name"
113
118
  },
114
119
  "table": {
115
120
  "label": "Data Table",
116
- "expanded": true,
121
+ "expanded": false,
117
122
  "limitHeight": false,
118
123
  "height": "",
119
124
  "caption": "",
@@ -121,7 +126,7 @@
121
126
  "showDataTableLink": true,
122
127
  "indexLabel": "",
123
128
  "download": false,
124
- "showVertical": true,
129
+ "showVertical": false,
125
130
  "show": true
126
131
  },
127
132
  "orientation": "vertical",
@@ -153,16 +158,14 @@
153
158
  "dataFormat": {
154
159
  "commas": false,
155
160
  "prefix": "",
156
- "suffix": "",
161
+ "suffix": "km",
157
162
  "abbreviated": false,
158
163
  "bottomSuffix": "",
159
164
  "bottomPrefix": "",
160
- "bottomAbbreviated": false
161
- },
162
- "confidenceKeys": {
163
- "upper": "upper",
164
- "lower": "lower"
165
+ "bottomAbbreviated": false,
166
+ "roundTo": 1
165
167
  },
168
+ "confidenceKeys": {},
166
169
  "visual": {
167
170
  "border": true,
168
171
  "accent": true,
@@ -175,74 +178,62 @@
175
178
  "highlightedBarValues": [],
176
179
  "series": [
177
180
  {
178
- "dataKey": "value",
179
- "type": "Bar",
180
- "axis": "Left",
181
- "tooltip": true
181
+ "dataKey": "Radius",
182
+ "tooltip": true,
183
+ "type": "Area Chart",
184
+ "axis": "Left"
182
185
  }
183
186
  ],
184
187
  "tooltips": {
185
188
  "opacity": 90
186
189
  },
187
- "visualizationType": "Bar",
188
- "data": [
189
- {
190
- "date": "1/1/2022",
191
- "value": "100",
192
- "upper": "150",
193
- "lower": "50"
190
+ "forestPlot": {
191
+ "startAt": 0,
192
+ "width": "auto",
193
+ "colors": {
194
+ "line": "",
195
+ "shape": ""
194
196
  },
195
- {
196
- "date": "2/1/2022",
197
- "value": "135",
198
- "upper": "200",
199
- "lower": "-50"
197
+ "estimateField": "",
198
+ "estimateRadius": "",
199
+ "lowerCiField": "",
200
+ "upperCiField": "",
201
+ "shape": "",
202
+ "rowHeight": 20,
203
+ "showZeroLine": false,
204
+ "description": {
205
+ "show": true,
206
+ "text": "description",
207
+ "location": 0
200
208
  },
201
- {
202
- "date": "3/1/2022",
203
- "value": "80",
204
- "upper": "175",
205
- "lower": "5"
209
+ "result": {
210
+ "show": true,
211
+ "text": "result",
212
+ "location": 100
206
213
  },
207
- {
208
- "date": "4/1/2022",
209
- "value": "225",
210
- "upper": "330",
211
- "lower": "-75"
212
- }
213
- ],
214
- "dataFileName": "negative_ci.csv",
215
- "dataFileSourceType": "file",
216
- "formattedData": [
217
- {
218
- "date": "1/1/2022",
219
- "value": "100",
220
- "upper": "150",
221
- "lower": "50"
214
+ "radius": {
215
+ "min": 1,
216
+ "max": 8,
217
+ "scalingColumn": ""
222
218
  },
223
- {
224
- "date": "2/1/2022",
225
- "value": "135",
226
- "upper": "200",
227
- "lower": "-50"
228
- },
229
- {
230
- "date": "3/1/2022",
231
- "value": "80",
232
- "upper": "175",
233
- "lower": "5"
219
+ "regression": {
220
+ "lower": 0,
221
+ "upper": 0,
222
+ "estimateField": 0
234
223
  },
235
- {
236
- "date": "4/1/2022",
237
- "value": "225",
238
- "upper": "330",
239
- "lower": "-75"
240
- }
241
- ],
242
- "dataDescription": {
243
- "horizontal": false,
244
- "series": false
224
+ "leftWidthOffset": 0,
225
+ "rightWidthOffset": 0
226
+ },
227
+ "brush": {
228
+ "pattern_id": "brush_pattern",
229
+ "accent_color": "#ddd"
230
+ },
231
+ "area": {
232
+ "isStacked": true
245
233
  },
234
+ "dataUrl": "/examples/feature/__data__/planet-example-data.json",
235
+ "animateReplay": true,
236
+ "visualizationType": "Area Chart",
246
237
  "validated": 4.23,
247
238
  "dynamicMarginTop": 0
248
239
  }