@cdc/dashboard 4.24.2 → 4.24.4

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 (52) hide show
  1. package/dist/cdcdashboard.js +128512 -99417
  2. package/examples/chart-data.json +5409 -0
  3. package/examples/full-dash-test.json +14643 -0
  4. package/examples/full-dashboard.json +10036 -0
  5. package/examples/sankey.json +5218 -0
  6. package/index.html +4 -3
  7. package/package.json +11 -10
  8. package/src/CdcDashboard.tsx +129 -124
  9. package/src/CdcDashboardComponent.tsx +316 -441
  10. package/src/DashboardContext.tsx +4 -1
  11. package/src/_stories/Dashboard.stories.tsx +79 -36
  12. package/src/_stories/_mock/api-filter-chart.json +11 -35
  13. package/src/_stories/_mock/api-filter-map.json +17 -31
  14. package/src/_stories/_mock/dashboard-gallery.json +523 -534
  15. package/src/_stories/_mock/multi-viz.json +378 -0
  16. package/src/_stories/_mock/pivot-filter.json +161 -0
  17. package/src/_stories/_mock/standalone-table.json +122 -0
  18. package/src/_stories/_mock/toggle-example.json +4035 -0
  19. package/src/components/DataDesignerModal.tsx +145 -0
  20. package/src/components/EditorWrapper/EditorWrapper.tsx +52 -0
  21. package/src/components/EditorWrapper/editor-wrapper.style.css +13 -0
  22. package/src/components/Filters.tsx +88 -0
  23. package/src/components/Grid.tsx +3 -1
  24. package/src/components/Header/FilterModal.tsx +506 -0
  25. package/src/components/Header/Header.tsx +25 -465
  26. package/src/components/Row.tsx +65 -29
  27. package/src/components/Toggle/Toggle.tsx +36 -0
  28. package/src/components/Toggle/index.tsx +1 -0
  29. package/src/components/Toggle/toggle-style.css +34 -0
  30. package/src/components/VisualizationRow.tsx +174 -0
  31. package/src/components/VisualizationsPanel.tsx +13 -3
  32. package/src/components/Widget.tsx +28 -126
  33. package/src/helpers/filterData.ts +75 -50
  34. package/src/helpers/generateValuesForFilter.ts +2 -12
  35. package/src/helpers/getApiFilterKey.ts +5 -0
  36. package/src/helpers/getFilteredData.ts +39 -0
  37. package/src/helpers/getUpdateConfig.ts +39 -22
  38. package/src/helpers/getVizConfig.ts +31 -0
  39. package/src/helpers/getVizRowColumnLocator.ts +9 -0
  40. package/src/helpers/iconHash.tsx +34 -0
  41. package/src/helpers/tests/filterData.test.ts +149 -0
  42. package/src/images/icon-toggle.svg +1 -0
  43. package/src/scss/grid.scss +10 -3
  44. package/src/scss/main.scss +11 -0
  45. package/src/store/dashboard.actions.ts +35 -3
  46. package/src/store/dashboard.reducer.ts +33 -2
  47. package/src/types/APIFilter.ts +4 -5
  48. package/src/types/ConfigRow.ts +13 -2
  49. package/src/types/DataSet.ts +11 -8
  50. package/src/types/InitialState.ts +2 -1
  51. package/src/types/SharedFilter.ts +6 -3
  52. package/src/types/Tab.ts +1 -0
@@ -0,0 +1,378 @@
1
+ {
2
+ "dashboard": {
3
+ "theme": "theme-blue",
4
+ "sharedFilters": [
5
+ {
6
+ "key": "Dashboard Filter 1",
7
+ "type": "datafilter",
8
+ "columnName": "Sample Categories",
9
+ "showDropdown": true,
10
+ "usedBy": ["0"],
11
+ "tier": 1
12
+ }
13
+ ]
14
+ },
15
+ "rows": [
16
+ {
17
+ "toggle": true,
18
+ "columns": [
19
+ {
20
+ "width": 12,
21
+ "widget": "chart1711646813542"
22
+ },
23
+ {
24
+ "width": 12,
25
+ "widget": "table1711646820983"
26
+ },
27
+ {
28
+ "width": 12
29
+ }
30
+ ],
31
+ "dataDescription": {
32
+ "horizontal": false,
33
+ "series": false
34
+ },
35
+
36
+ "dataKey": "valid-world-data.json",
37
+
38
+ "multiVizColumn": "Country"
39
+ }
40
+ ],
41
+ "visualizations": {
42
+ "chart1711646813542": {
43
+ "type": "chart",
44
+ "debugSvg": false,
45
+ "chartMessage": {
46
+ "noData": "No Data Available"
47
+ },
48
+ "title": "",
49
+ "showTitle": true,
50
+ "showDownloadMediaButton": false,
51
+ "theme": "theme-blue",
52
+ "animate": false,
53
+ "fontSize": "medium",
54
+ "lineDatapointStyle": "hover",
55
+ "lineDatapointColor": "Same as Line",
56
+ "barHasBorder": "false",
57
+ "isLollipopChart": false,
58
+ "lollipopShape": "circle",
59
+ "lollipopColorStyle": "two-tone",
60
+ "visualizationSubType": "regular",
61
+ "barStyle": "",
62
+ "roundingStyle": "standard",
63
+ "tipRounding": "top",
64
+ "isResponsiveTicks": false,
65
+ "general": {
66
+ "showDownloadButton": false
67
+ },
68
+ "padding": {
69
+ "left": 5,
70
+ "right": 5
71
+ },
72
+ "suppressedData": [],
73
+ "preliminaryData": [],
74
+ "yAxis": {
75
+ "hideAxis": false,
76
+ "displayNumbersOnBar": false,
77
+ "hideLabel": false,
78
+ "hideTicks": false,
79
+ "size": 50,
80
+ "gridLines": false,
81
+ "enablePadding": false,
82
+ "min": "",
83
+ "max": "",
84
+ "labelColor": "#333",
85
+ "tickLabelColor": "#333",
86
+ "tickColor": "#333",
87
+ "rightHideAxis": true,
88
+ "rightAxisSize": 0,
89
+ "rightLabel": "",
90
+ "rightLabelOffsetSize": 0,
91
+ "rightAxisLabelColor": "#333",
92
+ "rightAxisTickLabelColor": "#333",
93
+ "rightAxisTickColor": "#333",
94
+ "numTicks": "",
95
+ "axisPadding": 0,
96
+ "scalePadding": 10,
97
+ "tickRotation": 0,
98
+ "anchors": []
99
+ },
100
+ "boxplot": {
101
+ "plots": [],
102
+ "borders": "true",
103
+ "firstQuartilePercentage": 25,
104
+ "thirdQuartilePercentage": 75,
105
+ "boxWidthPercentage": 40,
106
+ "plotOutlierValues": false,
107
+ "plotNonOutlierValues": true,
108
+ "legend": {
109
+ "showHowToReadText": false,
110
+ "howToReadText": ""
111
+ },
112
+ "labels": {
113
+ "q1": "Lower Quartile",
114
+ "q2": "q2",
115
+ "q3": "Upper Quartile",
116
+ "q4": "q4",
117
+ "minimum": "Minimum",
118
+ "maximum": "Maximum",
119
+ "mean": "Mean",
120
+ "median": "Median",
121
+ "sd": "Standard Deviation",
122
+ "iqr": "Interquartile Range",
123
+ "total": "Total",
124
+ "outliers": "Outliers",
125
+ "values": "Values",
126
+ "lowerBounds": "Lower Bounds",
127
+ "upperBounds": "Upper Bounds"
128
+ }
129
+ },
130
+ "topAxis": {
131
+ "hasLine": false
132
+ },
133
+ "isLegendValue": false,
134
+ "barThickness": 0.35,
135
+ "barHeight": 25,
136
+ "barSpace": 15,
137
+ "heights": {
138
+ "vertical": 300,
139
+ "horizontal": 750
140
+ },
141
+ "xAxis": {
142
+ "sortDates": false,
143
+ "anchors": [],
144
+ "type": "categorical",
145
+ "showTargetLabel": true,
146
+ "targetLabel": "Target",
147
+ "hideAxis": false,
148
+ "hideLabel": false,
149
+ "hideTicks": false,
150
+ "size": 75,
151
+ "tickRotation": 0,
152
+ "min": "",
153
+ "max": "",
154
+ "labelColor": "#333",
155
+ "tickLabelColor": "#333",
156
+ "tickColor": "#333",
157
+ "numTicks": "",
158
+ "labelOffset": 65,
159
+ "axisPadding": 0,
160
+ "target": 0,
161
+ "maxTickRotation": 0,
162
+ "dataKey": "Sample Categories",
163
+ "tickWidthMax": 89
164
+ },
165
+ "table": {
166
+ "label": "Data Table",
167
+ "expanded": true,
168
+ "limitHeight": false,
169
+ "height": "",
170
+ "caption": "",
171
+ "showDownloadUrl": false,
172
+ "showDataTableLink": false,
173
+ "indexLabel": "",
174
+ "download": false,
175
+ "showVertical": true,
176
+ "dateDisplayFormat": "",
177
+ "show": false
178
+ },
179
+ "orientation": "vertical",
180
+ "color": "pinkpurple",
181
+ "columns": {},
182
+ "legend": {
183
+ "hide": false,
184
+ "behavior": "isolate",
185
+ "singleRow": true,
186
+ "colorCode": "",
187
+ "reverseLabelOrder": false,
188
+ "description": "",
189
+ "dynamicLegend": false,
190
+ "dynamicLegendDefaultText": "Show All",
191
+ "dynamicLegendItemLimit": 5,
192
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
193
+ "dynamicLegendChartMessage": "Select Options from the Legend",
194
+ "lineMode": false,
195
+ "verticalSorted": false,
196
+ "highlightOnHover": false,
197
+ "seriesHighlight": []
198
+ },
199
+ "brush": {
200
+ "height": 25,
201
+ "active": false
202
+ },
203
+ "exclusions": {
204
+ "active": false,
205
+ "keys": []
206
+ },
207
+ "palette": "qualitative-bold",
208
+ "isPaletteReversed": false,
209
+ "twoColor": {
210
+ "palette": "monochrome-1",
211
+ "isPaletteReversed": false
212
+ },
213
+ "labels": false,
214
+ "dataFormat": {
215
+ "commas": false,
216
+ "prefix": "",
217
+ "suffix": "",
218
+ "abbreviated": false,
219
+ "bottomSuffix": "",
220
+ "bottomPrefix": "",
221
+ "bottomAbbreviated": false
222
+ },
223
+ "confidenceKeys": {},
224
+ "visual": {
225
+ "border": true,
226
+ "accent": true,
227
+ "background": true,
228
+ "verticalHoverLine": false,
229
+ "horizontalHoverLine": false
230
+ },
231
+ "useLogScale": false,
232
+ "filterBehavior": "Filter Change",
233
+ "highlightedBarValues": [],
234
+ "series": [
235
+ {
236
+ "dataKey": "Data",
237
+ "type": "Bar",
238
+ "axis": "Left",
239
+ "tooltip": true
240
+ }
241
+ ],
242
+ "tooltips": {
243
+ "opacity": 90,
244
+ "singleSeries": false,
245
+ "dateDisplayFormat": ""
246
+ },
247
+ "forestPlot": {
248
+ "startAt": 0,
249
+ "colors": {
250
+ "line": "",
251
+ "shape": ""
252
+ },
253
+ "lineOfNoEffect": {
254
+ "show": true
255
+ },
256
+ "type": "",
257
+ "pooledResult": {
258
+ "diamondHeight": 5,
259
+ "column": ""
260
+ },
261
+ "estimateField": "",
262
+ "estimateRadius": "",
263
+ "shape": "square",
264
+ "rowHeight": 20,
265
+ "description": {
266
+ "show": true,
267
+ "text": "description",
268
+ "location": 0
269
+ },
270
+ "result": {
271
+ "show": true,
272
+ "text": "result",
273
+ "location": 100
274
+ },
275
+ "radius": {
276
+ "min": 2,
277
+ "max": 10,
278
+ "scalingColumn": ""
279
+ },
280
+ "regression": {
281
+ "lower": 0,
282
+ "upper": 0,
283
+ "estimateField": 0
284
+ },
285
+ "leftWidthOffset": 0,
286
+ "rightWidthOffset": 0,
287
+ "showZeroLine": false,
288
+ "leftLabel": "",
289
+ "rightLabel": ""
290
+ },
291
+ "area": {
292
+ "isStacked": false
293
+ },
294
+ "sankey": {
295
+ "title": {
296
+ "defaultColor": "black"
297
+ },
298
+ "iterations": 1,
299
+ "rxValue": 0.9,
300
+ "overallSize": {
301
+ "width": 900,
302
+ "height": 700
303
+ },
304
+ "margin": {
305
+ "margin_y": 25,
306
+ "margin_x": 0
307
+ },
308
+ "nodeSize": {
309
+ "nodeWidth": 26,
310
+ "nodeHeight": 40
311
+ },
312
+ "nodePadding": 55,
313
+ "nodeFontColor": "black",
314
+ "nodeColor": {
315
+ "default": "#ff8500",
316
+ "inactive": "#808080"
317
+ },
318
+ "linkColor": {
319
+ "default": "#ffc900",
320
+ "inactive": "#D3D3D3"
321
+ },
322
+ "opacity": {
323
+ "nodeOpacityDefault": 1,
324
+ "nodeOpacityInactive": 0.1,
325
+ "LinkOpacityDefault": 1,
326
+ "LinkOpacityInactive": 0.1
327
+ },
328
+ "storyNodeFontColor": "#006778",
329
+ "storyNodeText": [],
330
+ "nodeValueStyle": {
331
+ "textBefore": "(",
332
+ "textAfter": ")"
333
+ },
334
+ "data": []
335
+ },
336
+ "openModal": true,
337
+ "uid": "chart1711646813542",
338
+ "visualizationType": "Bar",
339
+ "editing": false,
340
+ "dataKey": "valid-world-data.json",
341
+ "dataDescription": {
342
+ "horizontal": false,
343
+ "series": false
344
+ },
345
+ "version": "4.23",
346
+ "dynamicMarginTop": 0
347
+ },
348
+ "table1711646820983": {
349
+ "newViz": false,
350
+ "openModal": true,
351
+ "uid": "table1711646820983",
352
+ "type": "table",
353
+ "formattedData": {},
354
+ "table": {
355
+ "label": "Data Table",
356
+ "show": true,
357
+ "showDownloadUrl": false,
358
+ "showVertical": true,
359
+ "expanded": true
360
+ },
361
+ "columns": {},
362
+ "dataFormat": {},
363
+ "visualizationType": "table",
364
+ "editing": false
365
+ }
366
+ },
367
+ "table": {
368
+ "label": "Data Table",
369
+ "show": true,
370
+ "showDownloadUrl": false,
371
+ "showVertical": true
372
+ },
373
+ "newViz": true,
374
+ "datasets": {},
375
+ "type": "dashboard",
376
+ "runtime": {},
377
+ "version": "4.23"
378
+ }
@@ -0,0 +1,161 @@
1
+ {
2
+ "dashboard": {
3
+ "theme": "theme-blue",
4
+ "sharedFilters": [
5
+ {
6
+ "key": "Race",
7
+ "type": "datafilter",
8
+ "showDropdown": true,
9
+ "columnName": "Race",
10
+ "pivot": "Age-adjusted rate",
11
+ "usedBy": ["table1707935263149"]
12
+ }
13
+ ]
14
+ },
15
+ "rows": [
16
+ [
17
+ {
18
+ "width": 12,
19
+ "widget": "table1707935263149"
20
+ },
21
+ {},
22
+ {}
23
+ ]
24
+ ],
25
+ "visualizations": {
26
+ "table1707935263149": {
27
+ "openModal": false,
28
+ "uid": "table1707935263149",
29
+ "type": "table",
30
+ "table": {
31
+ "label": "Data Table",
32
+ "show": true,
33
+ "showDownloadUrl": false,
34
+ "showVertical": true,
35
+ "expanded": true
36
+ },
37
+ "columns": {},
38
+ "dataFormat": {},
39
+ "visualizationType": "table",
40
+ "dataDescription": {
41
+ "horizontal": false,
42
+ "series": false
43
+ },
44
+ "formattedData": [
45
+ {
46
+ "Race": "Hispanic or Latino",
47
+ "Age-adjusted rate": "644.2",
48
+ "Year": "2016"
49
+ },
50
+ {
51
+ "Race": "Non-Hispanic American Indian",
52
+ "Age-adjusted rate": "636.1",
53
+ "Year": "2016"
54
+ },
55
+ {
56
+ "Race": "Non-Hispanic Black",
57
+ "Age-adjusted rate": "563.7",
58
+ "Year": "2016"
59
+ },
60
+ {
61
+ "Race": "Hispanic or Latino",
62
+ "Age-adjusted rate": "644.2",
63
+ "Year": "2017"
64
+ },
65
+ {
66
+ "Race": "Non-Hispanic American Indian",
67
+ "Age-adjusted rate": "636.1",
68
+ "Year": "2017"
69
+ },
70
+ {
71
+ "Race": "Non-Hispanic Black",
72
+ "Age-adjusted rate": "563.7",
73
+ "Year": "2017"
74
+ }
75
+ ],
76
+ "dataKey": "valid-data-chart.csv",
77
+ "data": [
78
+ {
79
+ "Race": "Hispanic or Latino",
80
+ "Age-adjusted rate": "644.2",
81
+ "Year": "2016"
82
+ },
83
+ {
84
+ "Race": "Non-Hispanic American Indian",
85
+ "Age-adjusted rate": "636.1",
86
+ "Year": "2016"
87
+ },
88
+ {
89
+ "Race": "Non-Hispanic Black",
90
+ "Age-adjusted rate": "563.7",
91
+ "Year": "2016"
92
+ },
93
+ {
94
+ "Race": "Hispanic or Latino",
95
+ "Age-adjusted rate": "644.2",
96
+ "Year": "2017"
97
+ },
98
+ {
99
+ "Race": "Non-Hispanic American Indian",
100
+ "Age-adjusted rate": "636.1",
101
+ "Year": "2017"
102
+ },
103
+ {
104
+ "Race": "Non-Hispanic Black",
105
+ "Age-adjusted rate": "563.7",
106
+ "Year": "2017"
107
+ }
108
+ ]
109
+ }
110
+ },
111
+ "table": {
112
+ "label": "Data Table",
113
+ "show": false,
114
+ "showDownloadUrl": false,
115
+ "showVertical": true
116
+ },
117
+ "datasets": {
118
+ "valid-data-chart.csv": {
119
+ "data": [
120
+ {
121
+ "Race": "Hispanic or Latino",
122
+ "Age-adjusted rate": "644.2",
123
+ "Year": "2016"
124
+ },
125
+ {
126
+ "Race": "Non-Hispanic American Indian",
127
+ "Age-adjusted rate": "636.1",
128
+ "Year": "2016"
129
+ },
130
+ {
131
+ "Race": "Non-Hispanic Black",
132
+ "Age-adjusted rate": "563.7",
133
+ "Year": "2016"
134
+ },
135
+ {
136
+ "Race": "Hispanic or Latino",
137
+ "Age-adjusted rate": "644.2",
138
+ "Year": "2017"
139
+ },
140
+ {
141
+ "Race": "Non-Hispanic American Indian",
142
+ "Age-adjusted rate": "636.1",
143
+ "Year": "2017"
144
+ },
145
+ {
146
+ "Race": "Non-Hispanic Black",
147
+ "Age-adjusted rate": "563.7",
148
+ "Year": "2017"
149
+ }
150
+ ],
151
+ "dataFileSize": 178,
152
+ "dataFileName": "valid-data-chart.csv",
153
+ "dataFileSourceType": "file",
154
+ "dataFileFormat": "CSV",
155
+ "preview": true
156
+ }
157
+ },
158
+ "type": "dashboard",
159
+ "runtime": {},
160
+ "data": [1, 2, 3]
161
+ }
@@ -0,0 +1,122 @@
1
+ {
2
+ "dashboard": {
3
+ "theme": "theme-blue"
4
+ },
5
+ "rows": [
6
+ [
7
+ {
8
+ "width": 12,
9
+ "widget": "table1707840146431"
10
+ },
11
+ {},
12
+ {}
13
+ ]
14
+ ],
15
+ "visualizations": {
16
+ "table1707840146431": {
17
+ "newViz": true,
18
+ "openModal": false,
19
+ "uid": "table1707840146431",
20
+ "table": {
21
+ "label": "Data Table",
22
+ "show": true,
23
+ "showDownloadUrl": false,
24
+ "showVertical": true,
25
+ "expanded": true
26
+ },
27
+ "type": "table",
28
+ "visualizationType": "table",
29
+ "dataDescription": {
30
+ "horizontal": false,
31
+ "series": false
32
+ },
33
+ "columns": {},
34
+ "dataFormat": {},
35
+ "formattedData": [
36
+ {
37
+ "Race": "Hispanic or Latino",
38
+ "Age-adjusted rate": "644.2"
39
+ },
40
+ {
41
+ "Race": "Non-Hispanic American Indian",
42
+ "Age-adjusted rate": "6360.1"
43
+ },
44
+ {
45
+ "Race": "Non-Hispanic Black",
46
+ "Age-adjusted rate": "563.7"
47
+ },
48
+ {
49
+ "Race": "Non-Hispanic Asian or Pacific Islander",
50
+ "Age-adjusted rate": "202.5"
51
+ },
52
+ {
53
+ "Race": "Non-Hispanic White",
54
+ "Age-adjusted rate": "183.6"
55
+ }
56
+ ],
57
+ "dataKey": "valid-data-chart.csv",
58
+ "data": [
59
+ {
60
+ "Race": "Hispanic or Latino",
61
+ "Age-adjusted rate": "644.2"
62
+ },
63
+ {
64
+ "Race": "Non-Hispanic American Indian",
65
+ "Age-adjusted rate": "6360.1"
66
+ },
67
+ {
68
+ "Race": "Non-Hispanic Black",
69
+ "Age-adjusted rate": "563.7"
70
+ },
71
+ {
72
+ "Race": "Non-Hispanic Asian or Pacific Islander",
73
+ "Age-adjusted rate": "202.5"
74
+ },
75
+ {
76
+ "Race": "Non-Hispanic White",
77
+ "Age-adjusted rate": "183.6"
78
+ }
79
+ ]
80
+ }
81
+ },
82
+ "table": {
83
+ "label": "Data Table",
84
+ "show": false,
85
+ "showDownloadUrl": false,
86
+ "showVertical": true
87
+ },
88
+ "newViz": true,
89
+ "datasets": {
90
+ "valid-data-chart.csv": {
91
+ "data": [
92
+ {
93
+ "Race": "Hispanic or Latino",
94
+ "Age-adjusted rate": "644.2"
95
+ },
96
+ {
97
+ "Race": "Non-Hispanic American Indian",
98
+ "Age-adjusted rate": "6360.1"
99
+ },
100
+ {
101
+ "Race": "Non-Hispanic Black",
102
+ "Age-adjusted rate": "563.7"
103
+ },
104
+ {
105
+ "Race": "Non-Hispanic Asian or Pacific Islander",
106
+ "Age-adjusted rate": "202.5"
107
+ },
108
+ {
109
+ "Race": "Non-Hispanic White",
110
+ "Age-adjusted rate": "183.6"
111
+ }
112
+ ],
113
+ "dataFileSize": 178,
114
+ "dataFileName": "valid-data-chart.csv",
115
+ "dataFileSourceType": "file",
116
+ "dataFileFormat": "CSV",
117
+ "preview": true
118
+ }
119
+ },
120
+ "type": "dashboard",
121
+ "runtime": {}
122
+ }