@cdc/chart 4.25.10 → 4.25.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 (85) hide show
  1. package/dist/{cdcchart-1a1724a1.es.js → cdcchart-dgT_1dIT.es.js} +136 -151
  2. package/dist/cdcchart.js +36258 -34658
  3. package/examples/feature/__data__/planet-example-data.json +1 -1
  4. package/examples/feature/boxplot/valid-boxplot.csv +38 -17
  5. package/examples/private/DEV-11825.json +573 -0
  6. package/examples/private/na.json +913 -0
  7. package/examples/private/test-data.csv +28 -0
  8. package/index.html +2 -121
  9. package/package.json +4 -4
  10. package/src/CdcChart.tsx +8 -11
  11. package/src/CdcChartComponent.tsx +256 -87
  12. package/src/_stories/Chart.Combo.stories.tsx +18 -0
  13. package/src/_stories/Chart.Forecast.stories.tsx +36 -0
  14. package/src/_stories/Chart.HTMLInDataTable.stories.tsx +520 -0
  15. package/src/_stories/Chart.Patterns.stories.tsx +2 -1
  16. package/src/_stories/Chart.PreserveDecimals.stories.tsx +220 -0
  17. package/src/_stories/Chart.SmallMultiples.stories.tsx +47 -0
  18. package/src/_stories/ChartAnnotation.stories.tsx +6 -3
  19. package/src/_stories/ChartBar.Editor.stories.tsx +3580 -0
  20. package/src/_stories/ChartEditor.Editor.stories.tsx +658 -0
  21. package/src/_stories/ChartEditor.stories.tsx +1 -2
  22. package/src/_stories/_mock/combo.json +451 -0
  23. package/src/_stories/_mock/editor-test-configs.json +376 -0
  24. package/src/_stories/_mock/editor-test-datasets.json +477 -0
  25. package/src/_stories/_mock/editor-tests/bar-chart-editor-test.json +255 -0
  26. package/src/_stories/_mock/editor-tests/bar-chart-general-test.json +267 -0
  27. package/src/_stories/_mock/editor-tests/bar-chart-test.json +237 -0
  28. package/src/_stories/_mock/forecast_combo_with_gaps.json +913 -0
  29. package/src/_stories/_mock/pie_config.json +257 -62
  30. package/src/_stories/_mock/small_multiples/small_multiples_bars.json +1944 -0
  31. package/src/_stories/_mock/small_multiples/small_multiples_big_data_bars.json +1114 -0
  32. package/src/_stories/_mock/small_multiples/small_multiples_lines.json +2646 -0
  33. package/src/_stories/_mock/small_multiples/small_multiples_lines_colors.json +1305 -0
  34. package/src/_stories/_mock/small_multiples/small_multiples_stacked_bars.json +1936 -0
  35. package/src/components/Annotations/components/findNearestDatum.ts +6 -41
  36. package/src/components/AreaChart/components/AreaChart.Stacked.jsx +10 -6
  37. package/src/components/AreaChart/index.tsx +1 -2
  38. package/src/components/BarChart/components/BarChart.Horizontal.tsx +4 -4
  39. package/src/components/BarChart/components/BarChart.Vertical.tsx +3 -2
  40. package/src/components/BoxPlot/helpers/index.ts +3 -3
  41. package/src/components/Brush/BrushChart.tsx +1 -1
  42. package/src/components/EditorPanel/EditorPanel.tsx +199 -190
  43. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +96 -111
  44. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +19 -1
  45. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +102 -55
  46. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +54 -49
  47. package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx +422 -0
  48. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +75 -21
  49. package/src/components/EditorPanel/components/Panels/index.tsx +3 -1
  50. package/src/components/EditorPanel/editor-panel.scss +0 -20
  51. package/src/components/EditorPanel/useEditorPermissions.ts +7 -15
  52. package/src/components/Forecasting/Forecasting.tsx +139 -21
  53. package/src/components/Legend/Legend.Component.tsx +16 -9
  54. package/src/components/Legend/helpers/createFormatLabels.tsx +181 -181
  55. package/src/components/Legend/helpers/getLegendClasses.ts +0 -1
  56. package/src/components/LineChart/LineChartProps.ts +0 -3
  57. package/src/components/LineChart/helpers.ts +1 -1
  58. package/src/components/LineChart/index.tsx +36 -13
  59. package/src/components/LinearChart.tsx +75 -80
  60. package/src/components/Regions/components/Regions.tsx +3 -24
  61. package/src/components/Sankey/types/index.ts +1 -1
  62. package/src/components/SmallMultiples/SmallMultipleTile.tsx +198 -0
  63. package/src/components/SmallMultiples/SmallMultiples.css +32 -0
  64. package/src/components/SmallMultiples/SmallMultiples.tsx +271 -0
  65. package/src/components/SmallMultiples/index.ts +2 -0
  66. package/src/data/initial-state.js +13 -1
  67. package/src/helpers/buildForecastPaletteOptions.ts +0 -38
  68. package/src/helpers/getColorScale.ts +10 -0
  69. package/src/{hooks/useMinMax.ts → helpers/getMinMax.ts} +14 -7
  70. package/src/helpers/getYAxisAutoPadding.ts +53 -0
  71. package/src/helpers/smallMultiplesHelpers.ts +529 -0
  72. package/src/hooks/useProgrammaticTooltip.ts +96 -0
  73. package/src/hooks/useScales.ts +88 -34
  74. package/src/hooks/useSmallMultipleSynchronization.ts +59 -0
  75. package/src/hooks/useTooltip.tsx +60 -15
  76. package/src/scss/main.scss +1 -80
  77. package/src/store/chart.actions.ts +2 -0
  78. package/src/store/chart.reducer.ts +4 -0
  79. package/src/types/ChartConfig.ts +24 -6
  80. package/src/types/ChartContext.ts +3 -0
  81. package/src/_stories/_mock/pie_data.json +0 -218
  82. package/src/components/AreaChart/components/AreaChart.jsx +0 -109
  83. package/src/helpers/sort.ts +0 -7
  84. package/src/hooks/useActiveElement.js +0 -19
  85. package/src/hooks/useChartClasses.js +0 -41
@@ -1,18 +1,19 @@
1
1
  {
2
+ "annotations": [],
3
+ "allowLineToBarGraph": "__​undefined__",
2
4
  "type": "chart",
3
5
  "debugSvg": false,
4
6
  "chartMessage": {
5
7
  "noData": "No Data Available"
6
8
  },
7
- "title": "ARDI",
9
+ "title": "",
8
10
  "showTitle": true,
9
11
  "showDownloadMediaButton": false,
10
12
  "theme": "theme-blue",
11
13
  "animate": false,
12
- "fontSize": "medium",
13
14
  "lineDatapointStyle": "hover",
14
15
  "lineDatapointColor": "Same as Line",
15
- "barHasBorder": "false",
16
+ "barHasBorder": "true",
16
17
  "isLollipopChart": false,
17
18
  "lollipopShape": "circle",
18
19
  "lollipopColorStyle": "two-tone",
@@ -22,13 +23,22 @@
22
23
  "tipRounding": "top",
23
24
  "isResponsiveTicks": false,
24
25
  "general": {
25
- "showDownloadButton": false
26
+ "annotationDropdownText": "Annotations",
27
+ "showMissingDataLabel": true,
28
+ "showSuppressedSymbol": true,
29
+ "showZeroValueData": true,
30
+ "hideNullValue": true,
31
+ "palette": {
32
+ "isReversed": true,
33
+ "version": "2.0",
34
+ "name": "sequential_bluereverse"
35
+ }
26
36
  },
27
37
  "padding": {
28
38
  "left": 5,
29
39
  "right": 5
30
40
  },
31
- "suppressedData": [],
41
+ "preliminaryData": [],
32
42
  "yAxis": {
33
43
  "hideAxis": false,
34
44
  "displayNumbersOnBar": false,
@@ -39,21 +49,48 @@
39
49
  "enablePadding": false,
40
50
  "min": "",
41
51
  "max": "",
42
- "labelColor": "#333",
43
- "tickLabelColor": "#333",
44
- "tickColor": "#333",
45
- "rightHideAxis": true,
52
+ "labelColor": "#1c1d1f",
53
+ "tickLabelColor": "#1c1d1f",
54
+ "tickColor": "#1c1d1f",
55
+ "rightHideAxis": false,
46
56
  "rightAxisSize": 0,
47
57
  "rightLabel": "",
48
58
  "rightLabelOffsetSize": 0,
49
- "rightAxisLabelColor": "#333",
50
- "rightAxisTickLabelColor": "#333",
51
- "rightAxisTickColor": "#333",
59
+ "rightAxisLabelColor": "#1c1d1f",
60
+ "rightAxisTickLabelColor": "#1c1d1f",
61
+ "rightAxisTickColor": "#1c1d1f",
52
62
  "numTicks": "",
53
63
  "axisPadding": 0,
64
+ "scalePadding": 10,
54
65
  "tickRotation": 0,
55
66
  "anchors": [],
56
- "dataKey": "males"
67
+ "shoMissingDataLabel": true,
68
+ "showMissingDataLine": true,
69
+ "categories": [],
70
+ "dataKey": "Age-adjusted rate"
71
+ },
72
+ "boxplot": {
73
+ "plots": [],
74
+ "borders": "true",
75
+ "plotOutlierValues": false,
76
+ "plotNonOutlierValues": true,
77
+ "labels": {
78
+ "q1": "Lower Quartile",
79
+ "q2": "q2",
80
+ "q3": "Upper Quartile",
81
+ "q4": "q4",
82
+ "minimum": "Minimum",
83
+ "maximum": "Maximum",
84
+ "mean": "Mean",
85
+ "median": "Median",
86
+ "sd": "Standard Deviation",
87
+ "iqr": "Interquartile Range",
88
+ "count": "Count",
89
+ "outliers": "Outliers",
90
+ "values": "Values",
91
+ "lowerBounds": "Lower Bounds",
92
+ "upperBounds": "Upper Bounds"
93
+ }
57
94
  },
58
95
  "topAxis": {
59
96
  "hasLine": false
@@ -79,15 +116,19 @@
79
116
  "tickRotation": 0,
80
117
  "min": "",
81
118
  "max": "",
82
- "labelColor": "#333",
83
- "tickLabelColor": "#333",
84
- "tickColor": "#333",
119
+ "labelColor": "#1c1d1f",
120
+ "tickLabelColor": "#1c1d1f",
121
+ "tickColor": "#1c1d1f",
85
122
  "numTicks": "",
86
- "labelOffset": 65,
87
- "axisPadding": 0,
123
+ "labelOffset": 0,
124
+ "axisPadding": 200,
88
125
  "target": 0,
89
126
  "maxTickRotation": 0,
90
- "dataKey": "cause_type"
127
+ "padding": 5,
128
+ "showYearsOnce": false,
129
+ "sortByRecentDate": false,
130
+ "brushActive": false,
131
+ "dataKey": "Race"
91
132
  },
92
133
  "table": {
93
134
  "label": "Data Table",
@@ -97,20 +138,23 @@
97
138
  "caption": "",
98
139
  "showDownloadUrl": false,
99
140
  "showDataTableLink": true,
100
- "indexLabel": "Cause Type",
101
- "download": false,
141
+ "showDownloadLinkBelow": true,
142
+ "indexLabel": "",
143
+ "download": true,
102
144
  "showVertical": true,
103
- "show": true,
104
- "customTableConfig": true,
105
- "excludeColumns": ["location", "age", "use", "data_group", "data_sub_group", "cause_category"]
145
+ "dateDisplayFormat": "",
146
+ "showMissingDataLabel": true,
147
+ "showSuppressedSymbol": true,
148
+ "collapsible": true,
149
+ "show": true
106
150
  },
107
- "orientation": "vertical",
108
- "color": "pinkpurple",
151
+ "orientation": "Pie",
109
152
  "columns": {},
110
153
  "legend": {
111
154
  "hide": false,
112
155
  "behavior": "isolate",
113
- "singleRow": false,
156
+ "axisAlign": true,
157
+ "singleRow": true,
114
158
  "colorCode": "",
115
159
  "reverseLabelOrder": false,
116
160
  "description": "",
@@ -119,21 +163,33 @@
119
163
  "dynamicLegendItemLimit": 5,
120
164
  "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
121
165
  "dynamicLegendChartMessage": "Select Options from the Legend",
166
+ "label": "",
122
167
  "lineMode": false,
123
168
  "verticalSorted": false,
124
- "highlightOnHover": false
125
- },
126
- "brush": {
127
- "height": 25,
128
- "data": [],
129
- "active": false
169
+ "highlightOnHover": false,
170
+ "hideSuppressedLabels": false,
171
+ "hideSuppressionLink": false,
172
+ "seriesHighlight": [],
173
+ "style": "circles",
174
+ "subStyle": "linear blocks",
175
+ "groupBy": "",
176
+ "shape": "circle",
177
+ "tickRotation": "",
178
+ "order": "dataColumn",
179
+ "hideBorder": {
180
+ "side": false,
181
+ "topBottom": true
182
+ },
183
+ "position": "right",
184
+ "orderedValues": [],
185
+ "patterns": {},
186
+ "patternField": "",
187
+ "unified": true
130
188
  },
131
189
  "exclusions": {
132
- "active": true,
133
- "keys": ["all_causes"]
190
+ "active": false,
191
+ "keys": []
134
192
  },
135
- "palette": "qualitative-soft",
136
- "isPaletteReversed": false,
137
193
  "twoColor": {
138
194
  "palette": "monochrome-1",
139
195
  "isPaletteReversed": false
@@ -146,47 +202,186 @@
146
202
  "abbreviated": false,
147
203
  "bottomSuffix": "",
148
204
  "bottomPrefix": "",
149
- "bottomAbbreviated": false,
150
- "roundTo": 1
205
+ "bottomAbbreviated": false
151
206
  },
207
+ "filters": [],
152
208
  "confidenceKeys": {},
153
209
  "visual": {
154
210
  "border": true,
155
211
  "accent": true,
156
212
  "background": true,
157
213
  "verticalHoverLine": false,
158
- "horizontalHoverLine": false
214
+ "horizontalHoverLine": false,
215
+ "lineDatapointSymbol": "none",
216
+ "maximumShapeAmount": 7
159
217
  },
160
218
  "useLogScale": false,
161
219
  "filterBehavior": "Filter Change",
162
220
  "highlightedBarValues": [],
163
- "series": [
164
- {
165
- "dataKey": "males",
166
- "axis": "Left",
167
- "tooltip": true
168
- }
169
- ],
221
+ "series": [],
170
222
  "tooltips": {
171
223
  "opacity": 90,
172
- "singleSeries": false
224
+ "singleSeries": false,
225
+ "dateDisplayFormat": ""
226
+ },
227
+ "forestPlot": {
228
+ "startAt": 0,
229
+ "colors": {
230
+ "line": "",
231
+ "shape": ""
232
+ },
233
+ "lineOfNoEffect": {
234
+ "show": true
235
+ },
236
+ "type": "",
237
+ "pooledResult": {
238
+ "diamondHeight": 5,
239
+ "column": ""
240
+ },
241
+ "estimateField": "",
242
+ "estimateRadius": "",
243
+ "shape": "square",
244
+ "rowHeight": 20,
245
+ "description": {
246
+ "show": true,
247
+ "text": "description",
248
+ "location": 0
249
+ },
250
+ "result": {
251
+ "show": true,
252
+ "text": "result",
253
+ "location": 100
254
+ },
255
+ "radius": {
256
+ "min": 2,
257
+ "max": 10,
258
+ "scalingColumn": ""
259
+ },
260
+ "regression": {
261
+ "lower": 0,
262
+ "upper": 0,
263
+ "estimateField": 0
264
+ },
265
+ "leftWidthOffset": 0,
266
+ "rightWidthOffset": 0,
267
+ "showZeroLine": false,
268
+ "leftLabel": "",
269
+ "rightLabel": ""
270
+ },
271
+ "area": {
272
+ "isStacked": false
173
273
  },
174
- "dashboard": {
175
- "theme": "theme-blue",
176
- "title": "ARDI"
274
+ "sankey": {
275
+ "title": {
276
+ "defaultColor": "black"
277
+ },
278
+ "iterations": 1,
279
+ "rxValue": 0.9,
280
+ "overallSize": {
281
+ "width": 900,
282
+ "height": 700
283
+ },
284
+ "margin": {
285
+ "margin_y": 25,
286
+ "margin_x": 0
287
+ },
288
+ "nodeSize": {
289
+ "nodeWidth": 26,
290
+ "nodeHeight": 40
291
+ },
292
+ "nodePadding": 55,
293
+ "nodeFontColor": "black",
294
+ "nodeColor": {
295
+ "default": "#ff8500",
296
+ "inactive": "#808080"
297
+ },
298
+ "linkColor": {
299
+ "default": "#ffc900",
300
+ "inactive": "#D3D3D3"
301
+ },
302
+ "opacity": {
303
+ "nodeOpacityDefault": 1,
304
+ "nodeOpacityInactive": 0.1,
305
+ "LinkOpacityDefault": 1,
306
+ "LinkOpacityInactive": 0.1
307
+ },
308
+ "storyNodeFontColor": "#006778",
309
+ "storyNodeText": [],
310
+ "nodeValueStyle": {
311
+ "textBefore": "(",
312
+ "textAfter": ")"
313
+ },
314
+ "data": []
177
315
  },
178
- "animateReplay": true,
179
- "aspectRatio": 1,
180
- "validated": 4.23,
316
+ "errors": [],
317
+ "currentViewport": "lg",
318
+ "id": 13,
319
+ "category": "Charts",
320
+ "label": "Pie",
321
+ "subType": "Pie",
322
+ "icon": {
323
+ "key": null,
324
+ "ref": null,
325
+ "props": {},
326
+ "_owner": null,
327
+ "_store": {}
328
+ },
329
+ "content": "Present the numerical proportions of a data series.",
181
330
  "visualizationType": "Pie",
182
- "pieType": "Donut",
183
- "filters": [
331
+ "activeVizButtonID": 13,
332
+ "dataFileName": "valid-data-chart.csv",
333
+ "dataFileSourceType": "file",
334
+ "dataDescription": {
335
+ "horizontal": false,
336
+ "series": false
337
+ },
338
+ "version": "4.25.9",
339
+ "migrations": {
340
+ "addColorMigration": true
341
+ },
342
+ "data": [
184
343
  {
185
- "values": ["age", "sex"],
186
- "active": "sex",
187
- "filterStyle": "dropdown",
188
- "order": "asc",
189
- "columnName": "data_group"
344
+ "Race": "Hispanic or Latino",
345
+ "Age-adjusted rate": "644.2"
346
+ },
347
+ {
348
+ "Race": "Non-Hispanic American Indian",
349
+ "Age-adjusted rate": "636.1"
350
+ },
351
+ {
352
+ "Race": "Non-Hispanic Black",
353
+ "Age-adjusted rate": "563.7"
354
+ },
355
+ {
356
+ "Race": "Non-Hispanic Asian or Pacific Islander",
357
+ "Age-adjusted rate": "202.5"
358
+ },
359
+ {
360
+ "Race": "Non-Hispanic White",
361
+ "Age-adjusted rate": "183.6"
362
+ }
363
+ ],
364
+ "formattedData": [
365
+ {
366
+ "Race": "Hispanic or Latino",
367
+ "Age-adjusted rate": "644.2"
368
+ },
369
+ {
370
+ "Race": "Non-Hispanic American Indian",
371
+ "Age-adjusted rate": "636.1"
372
+ },
373
+ {
374
+ "Race": "Non-Hispanic Black",
375
+ "Age-adjusted rate": "563.7"
376
+ },
377
+ {
378
+ "Race": "Non-Hispanic Asian or Pacific Islander",
379
+ "Age-adjusted rate": "202.5"
380
+ },
381
+ {
382
+ "Race": "Non-Hispanic White",
383
+ "Age-adjusted rate": "183.6"
190
384
  }
191
- ]
385
+ ],
386
+ "datasets": {}
192
387
  }