@cdc/chart 4.23.9 → 4.23.10-alpha

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 (40) hide show
  1. package/LICENSE +201 -0
  2. package/dist/cdcchart.js +44124 -44458
  3. package/examples/feature/__data__/area-chart-date-apple.json +1 -5073
  4. package/examples/feature/area/area-chart-date-apple.json +73 -10316
  5. package/examples/feature/area/area-chart-date-city-temperature.json +204 -80
  6. package/examples/feature/area/area-chart-stacked.json +239 -0
  7. package/examples/feature/bar/lollipop.json +156 -0
  8. package/examples/feature/combo/planet-combo-example-config.json +99 -9
  9. package/examples/feature/filters/bar-filter.json +5027 -0
  10. package/examples/feature/legend-highlights/highlights.json +567 -0
  11. package/examples/private/TESTING.json +0 -0
  12. package/examples/private/forest-plot.json +356 -0
  13. package/examples/private/full.json +45324 -0
  14. package/examples/private/missing-color.json +333 -0
  15. package/index.html +11 -7
  16. package/package.json +3 -2
  17. package/src/{CdcChart.jsx → CdcChart.tsx} +81 -74
  18. package/src/_stories/Chart.stories.tsx +188 -0
  19. package/src/components/AreaChart.Stacked.jsx +73 -0
  20. package/src/components/AreaChart.jsx +24 -26
  21. package/src/components/DeviationBar.jsx +67 -13
  22. package/src/components/EditorPanel.jsx +483 -452
  23. package/src/components/Forecasting.jsx +5 -5
  24. package/src/components/ForestPlotSettings.jsx +5 -6
  25. package/src/components/Legend.jsx +7 -6
  26. package/src/components/LineChart.Circle.tsx +102 -0
  27. package/src/components/{LineChart.jsx → LineChart.tsx} +9 -48
  28. package/src/components/LinearChart.jsx +460 -443
  29. package/src/components/PieChart.jsx +54 -25
  30. package/src/components/Series.jsx +63 -17
  31. package/src/components/SparkLine.jsx +7 -19
  32. package/src/data/initial-state.js +6 -0
  33. package/src/hooks/useBarChart.js +1 -1
  34. package/src/hooks/useEditorPermissions.js +87 -24
  35. package/src/hooks/useReduceData.js +5 -0
  36. package/src/hooks/useScales.js +3 -3
  37. package/src/hooks/useTooltip.jsx +19 -6
  38. package/src/scss/main.scss +6 -12
  39. package/src/components/DataTable.jsx +0 -494
  40. /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
+ }
@@ -0,0 +1,239 @@
1
+ {
2
+ "type": "chart",
3
+ "debugSvg": false,
4
+ "title": "Planet Radius (Combo Example)",
5
+ "showTitle": true,
6
+ "showDownloadMediaButton": false,
7
+ "showChartBrush": false,
8
+ "theme": "theme-blue",
9
+ "animate": true,
10
+ "fontSize": "small",
11
+ "lineDatapointStyle": "hover",
12
+ "barHasBorder": "true",
13
+ "isLollipopChart": false,
14
+ "lollipopShape": "circle",
15
+ "lollipopColorStyle": "two-tone",
16
+ "visualizationSubType": "horizontal",
17
+ "barStyle": "",
18
+ "roundingStyle": "standard",
19
+ "tipRounding": "top",
20
+ "isResponsiveTicks": false,
21
+ "general": {
22
+ "showDownloadButton": false
23
+ },
24
+ "padding": {
25
+ "left": 0,
26
+ "right": 0
27
+ },
28
+ "yAxis": {
29
+ "hideAxis": false,
30
+ "displayNumbersOnBar": false,
31
+ "hideLabel": false,
32
+ "hideTicks": false,
33
+ "size": 50,
34
+ "gridLines": false,
35
+ "enablePadding": false,
36
+ "min": "",
37
+ "max": "",
38
+ "labelColor": "#333",
39
+ "tickLabelColor": "#333",
40
+ "tickColor": "#333",
41
+ "rightHideAxis": true,
42
+ "rightAxisSize": 0,
43
+ "rightLabel": "",
44
+ "rightLabelOffsetSize": 0,
45
+ "rightAxisLabelColor": "#333",
46
+ "rightAxisTickLabelColor": "#333",
47
+ "rightAxisTickColor": "#333",
48
+ "numTicks": "",
49
+ "axisPadding": 0,
50
+ "tickRotation": 0,
51
+ "anchors": [],
52
+ "label": "Measurement (1000km)",
53
+ "labelPlacement": "On Date/Category Axis"
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
+ },
85
+ "topAxis": {
86
+ "hasLine": false
87
+ },
88
+ "isLegendValue": false,
89
+ "barThickness": 0.35,
90
+ "barHeight": 25,
91
+ "barSpace": 15,
92
+ "heights": {
93
+ "vertical": 300,
94
+ "horizontal": 750
95
+ },
96
+ "xAxis": {
97
+ "anchors": [],
98
+ "type": "categorical",
99
+ "showTargetLabel": true,
100
+ "targetLabel": "Target",
101
+ "hideAxis": false,
102
+ "hideLabel": false,
103
+ "hideTicks": false,
104
+ "size": 75,
105
+ "tickRotation": 0,
106
+ "min": "",
107
+ "max": "",
108
+ "labelColor": "#333",
109
+ "tickLabelColor": "#333",
110
+ "tickColor": "#333",
111
+ "numTicks": "",
112
+ "labelOffset": 65,
113
+ "axisPadding": 0,
114
+ "target": 0,
115
+ "maxTickRotation": 0,
116
+ "label": "Planet",
117
+ "dataKey": "name"
118
+ },
119
+ "table": {
120
+ "label": "Data Table",
121
+ "expanded": false,
122
+ "limitHeight": false,
123
+ "height": "",
124
+ "caption": "",
125
+ "showDownloadUrl": false,
126
+ "showDataTableLink": true,
127
+ "indexLabel": "",
128
+ "download": false,
129
+ "showVertical": false,
130
+ "show": true
131
+ },
132
+ "orientation": "vertical",
133
+ "color": "pinkpurple",
134
+ "columns": {},
135
+ "legend": {
136
+ "behavior": "isolate",
137
+ "singleRow": false,
138
+ "colorCode": "",
139
+ "reverseLabelOrder": false,
140
+ "description": "",
141
+ "dynamicLegend": false,
142
+ "dynamicLegendDefaultText": "Show All",
143
+ "dynamicLegendItemLimit": 5,
144
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
145
+ "dynamicLegendChartMessage": "Select Options from the Legend"
146
+ },
147
+ "exclusions": {
148
+ "active": false,
149
+ "keys": []
150
+ },
151
+ "palette": "qualitative-bold",
152
+ "isPaletteReversed": false,
153
+ "twoColor": {
154
+ "palette": "monochrome-1",
155
+ "isPaletteReversed": false
156
+ },
157
+ "labels": false,
158
+ "dataFormat": {
159
+ "commas": false,
160
+ "prefix": "",
161
+ "suffix": "km",
162
+ "abbreviated": false,
163
+ "bottomSuffix": "",
164
+ "bottomPrefix": "",
165
+ "bottomAbbreviated": false,
166
+ "roundTo": 1
167
+ },
168
+ "confidenceKeys": {},
169
+ "visual": {
170
+ "border": true,
171
+ "accent": true,
172
+ "background": true,
173
+ "verticalHoverLine": false,
174
+ "horizontalHoverLine": false
175
+ },
176
+ "useLogScale": false,
177
+ "filterBehavior": "Filter Change",
178
+ "highlightedBarValues": [],
179
+ "series": [
180
+ {
181
+ "dataKey": "Radius",
182
+ "tooltip": true,
183
+ "type": "Area Chart",
184
+ "axis": "Left"
185
+ }
186
+ ],
187
+ "tooltips": {
188
+ "opacity": 90
189
+ },
190
+ "forestPlot": {
191
+ "startAt": 0,
192
+ "width": "auto",
193
+ "colors": {
194
+ "line": "",
195
+ "shape": ""
196
+ },
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
208
+ },
209
+ "result": {
210
+ "show": true,
211
+ "text": "result",
212
+ "location": 100
213
+ },
214
+ "radius": {
215
+ "min": 1,
216
+ "max": 8,
217
+ "scalingColumn": ""
218
+ },
219
+ "regression": {
220
+ "lower": 0,
221
+ "upper": 0,
222
+ "estimateField": 0
223
+ },
224
+ "leftWidthOffset": 0,
225
+ "rightWidthOffset": 0
226
+ },
227
+ "brush": {
228
+ "pattern_id": "brush_pattern",
229
+ "accent_color": "#ddd"
230
+ },
231
+ "area": {
232
+ "isStacked": true
233
+ },
234
+ "dataUrl": "/examples/feature/__data__/planet-example-data.json",
235
+ "animateReplay": true,
236
+ "visualizationType": "Area Chart",
237
+ "validated": 4.23,
238
+ "dynamicMarginTop": 0
239
+ }