@cdc/dashboard 4.25.2-25 → 4.25.3-6
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.
- package/dist/cdcdashboard.js +6371 -6378
- package/examples/private/DEV-10527.json +777 -496
- package/examples/private/DEV-9932.json +95 -0
- package/examples/private/markup.json +115 -0
- package/package.json +9 -9
- package/src/components/VisualizationRow.tsx +17 -13
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{
|
|
2
|
+
"dashboard": {
|
|
3
|
+
"theme": "theme-blue",
|
|
4
|
+
"sharedFilters": []
|
|
5
|
+
},
|
|
6
|
+
"rows": [
|
|
7
|
+
{
|
|
8
|
+
"columns": [
|
|
9
|
+
{
|
|
10
|
+
"width": 12,
|
|
11
|
+
"widget": "table1707840146431"
|
|
12
|
+
},
|
|
13
|
+
{},
|
|
14
|
+
{}
|
|
15
|
+
],
|
|
16
|
+
"dataDescription": {
|
|
17
|
+
"horizontal": false,
|
|
18
|
+
"series": false
|
|
19
|
+
},
|
|
20
|
+
"dataKey": "valid-data-chart.csv",
|
|
21
|
+
"multiVizColumn": "Race",
|
|
22
|
+
"expandCollapseAllButtons": true
|
|
23
|
+
}
|
|
24
|
+
],
|
|
25
|
+
"visualizations": {
|
|
26
|
+
"table1707840146431": {
|
|
27
|
+
"newViz": true,
|
|
28
|
+
"openModal": false,
|
|
29
|
+
"uid": "table1707840146431",
|
|
30
|
+
"filters": [],
|
|
31
|
+
"filterBehavior": "Filter Change",
|
|
32
|
+
"table": {
|
|
33
|
+
"label": "Data Table",
|
|
34
|
+
"show": true,
|
|
35
|
+
"showDownloadUrl": false,
|
|
36
|
+
"showVertical": true,
|
|
37
|
+
"expanded": true,
|
|
38
|
+
"groupBy": "Age-adjusted rate"
|
|
39
|
+
},
|
|
40
|
+
"type": "table",
|
|
41
|
+
"visualizationType": "table",
|
|
42
|
+
"dataDescription": {
|
|
43
|
+
"horizontal": false,
|
|
44
|
+
"series": false
|
|
45
|
+
},
|
|
46
|
+
"columns": {},
|
|
47
|
+
"dataFormat": {},
|
|
48
|
+
"dataKey": "valid-data-chart.csv"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
"table": {
|
|
52
|
+
"label": "Data Table",
|
|
53
|
+
"show": false,
|
|
54
|
+
"showDownloadUrl": false,
|
|
55
|
+
"showVertical": true
|
|
56
|
+
},
|
|
57
|
+
"newViz": true,
|
|
58
|
+
"datasets": {
|
|
59
|
+
"valid-data-chart.csv": {
|
|
60
|
+
"data": [
|
|
61
|
+
{
|
|
62
|
+
"Race": "Non-Hispanic American Indian",
|
|
63
|
+
"Age-adjusted rate": "6360.1"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"Race": "Non-Hispanic Black",
|
|
67
|
+
"Age-adjusted rate": "563.7"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
71
|
+
"Age-adjusted rate": "202.5"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"Race": "Non-Hispanic White",
|
|
75
|
+
"Age-adjusted rate": "183.6"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"Race": "Hispanic or Latino",
|
|
79
|
+
"Age-adjusted rate": "644.2"
|
|
80
|
+
}
|
|
81
|
+
],
|
|
82
|
+
"dataFileSize": 178,
|
|
83
|
+
"dataFileName": "valid-data-chart.csv",
|
|
84
|
+
"dataFileSourceType": "file",
|
|
85
|
+
"dataFileFormat": "CSV",
|
|
86
|
+
"preview": true
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
"type": "dashboard",
|
|
90
|
+
"runtime": {},
|
|
91
|
+
"version": "4.25.1",
|
|
92
|
+
"migrations": {
|
|
93
|
+
"addColorMigration": true
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
{
|
|
2
|
+
"dashboard": {
|
|
3
|
+
"theme": "theme-blue",
|
|
4
|
+
"sharedFilters": []
|
|
5
|
+
},
|
|
6
|
+
"rows": [
|
|
7
|
+
{
|
|
8
|
+
"columns": [
|
|
9
|
+
{
|
|
10
|
+
"width": 12,
|
|
11
|
+
"widget": "markup-include1741277548423"
|
|
12
|
+
},
|
|
13
|
+
{},
|
|
14
|
+
{}
|
|
15
|
+
]
|
|
16
|
+
}
|
|
17
|
+
],
|
|
18
|
+
"visualizations": {
|
|
19
|
+
"markup-include1741277548423": {
|
|
20
|
+
"filters": [],
|
|
21
|
+
"filterBehavior": "Filter Change",
|
|
22
|
+
"openModal": false,
|
|
23
|
+
"uid": "markup-include1741277548423",
|
|
24
|
+
"type": "markup-include",
|
|
25
|
+
"contentEditor": {
|
|
26
|
+
"inlineHTML": "<h2>Inline HTML</h2>",
|
|
27
|
+
"markupVariables": [],
|
|
28
|
+
"showHeader": true,
|
|
29
|
+
"srcUrl": "#example",
|
|
30
|
+
"title": "Markup Include",
|
|
31
|
+
"useInlineHTML": true
|
|
32
|
+
},
|
|
33
|
+
"theme": "theme-purple",
|
|
34
|
+
"visual": {
|
|
35
|
+
"border": false,
|
|
36
|
+
"accent": false,
|
|
37
|
+
"background": false,
|
|
38
|
+
"hideBackgroundColor": false,
|
|
39
|
+
"borderColorTheme": false
|
|
40
|
+
},
|
|
41
|
+
"showEditorPanel": true,
|
|
42
|
+
"visualizationType": "markup-include",
|
|
43
|
+
"dataDescription": {
|
|
44
|
+
"horizontal": false,
|
|
45
|
+
"series": false
|
|
46
|
+
},
|
|
47
|
+
"dataKey": "valid-data-chart.csv",
|
|
48
|
+
"version": "4.25.1",
|
|
49
|
+
"migrations": {
|
|
50
|
+
"addColorMigration": true
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"table": {
|
|
55
|
+
"label": "Data Table",
|
|
56
|
+
"show": true,
|
|
57
|
+
"showDownloadUrl": false,
|
|
58
|
+
"showDownloadLinkBelow": true,
|
|
59
|
+
"showVertical": true
|
|
60
|
+
},
|
|
61
|
+
"errors": [],
|
|
62
|
+
"currentViewport": "lg",
|
|
63
|
+
"id": 15,
|
|
64
|
+
"category": "General",
|
|
65
|
+
"label": "Dashboard",
|
|
66
|
+
"type": "dashboard",
|
|
67
|
+
"subType": null,
|
|
68
|
+
"orientation": null,
|
|
69
|
+
"icon": {
|
|
70
|
+
"key": null,
|
|
71
|
+
"ref": null,
|
|
72
|
+
"props": {},
|
|
73
|
+
"_owner": null,
|
|
74
|
+
"_store": {}
|
|
75
|
+
},
|
|
76
|
+
"content": "Present multiple data visualizations with shared filter controls.",
|
|
77
|
+
"datasets": {
|
|
78
|
+
"valid-data-chart.csv": {
|
|
79
|
+
"data": [
|
|
80
|
+
{
|
|
81
|
+
"Race": "Hispanic or Latino",
|
|
82
|
+
"Age-adjusted rate": "644.2"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"Race": "Non-Hispanic American Indian",
|
|
86
|
+
"Age-adjusted rate": "636.1"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"Race": "Non-Hispanic Black",
|
|
90
|
+
"Age-adjusted rate": "563.7"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
94
|
+
"Age-adjusted rate": "202.5"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"Race": "Non-Hispanic White",
|
|
98
|
+
"Age-adjusted rate": "183.6"
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
"dataFileSize": 178,
|
|
102
|
+
"dataFileName": "valid-data-chart.csv",
|
|
103
|
+
"dataFileSourceType": "file",
|
|
104
|
+
"dataFileFormat": "CSV",
|
|
105
|
+
"preview": true
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
"visualizationType": null,
|
|
109
|
+
"activeVizButtonID": 15,
|
|
110
|
+
"version": "4.25.1",
|
|
111
|
+
"migrations": {
|
|
112
|
+
"addColorMigration": true
|
|
113
|
+
},
|
|
114
|
+
"runtime": {}
|
|
115
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/dashboard",
|
|
3
|
-
"version": "4.25.
|
|
3
|
+
"version": "4.25.3-6",
|
|
4
4
|
"description": "React component for combining multiple visualizations into a single dashboard",
|
|
5
5
|
"moduleName": "CdcDashboard",
|
|
6
6
|
"main": "dist/cdcdashboard",
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
},
|
|
28
28
|
"license": "Apache-2.0",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@cdc/chart": "^4.25.
|
|
31
|
-
"@cdc/core": "^4.25.
|
|
32
|
-
"@cdc/data-bite": "^4.25.
|
|
33
|
-
"@cdc/filtered-text": "^4.25.
|
|
34
|
-
"@cdc/map": "^4.25.
|
|
35
|
-
"@cdc/markup-include": "^4.25.
|
|
36
|
-
"@cdc/waffle-chart": "^4.25.
|
|
30
|
+
"@cdc/chart": "^4.25.3-6",
|
|
31
|
+
"@cdc/core": "^4.25.3-6",
|
|
32
|
+
"@cdc/data-bite": "^4.25.3-6",
|
|
33
|
+
"@cdc/filtered-text": "^4.25.3-6",
|
|
34
|
+
"@cdc/map": "^4.25.3-6",
|
|
35
|
+
"@cdc/markup-include": "^4.25.3-6",
|
|
36
|
+
"@cdc/waffle-chart": "^4.25.3-6",
|
|
37
37
|
"html-react-parser": "^3.0.8",
|
|
38
38
|
"js-base64": "^2.5.2",
|
|
39
39
|
"papaparse": "^5.3.0",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"react": "^18.2.0",
|
|
50
50
|
"react-dom": "^18.2.0"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "d83d8555c1500ff0cad9d2c5c3486324afa15ec6"
|
|
53
53
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
|
|
2
|
-
import React, { useContext, useMemo } from 'react'
|
|
2
|
+
import React, { useContext, useEffect, useMemo, useState } from 'react'
|
|
3
3
|
import Toggle from './Toggle'
|
|
4
4
|
import _ from 'lodash'
|
|
5
5
|
import { ConfigRow } from '../types/ConfigRow'
|
|
@@ -85,10 +85,19 @@ const VisualizationRow: React.FC<VizRowProps> = ({
|
|
|
85
85
|
isLastRow
|
|
86
86
|
}) => {
|
|
87
87
|
const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
|
|
88
|
-
const [
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
const [toggledRow, setToggled] = React.useState<number>(0)
|
|
89
|
+
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
if (row.toggle) setToggled(0)
|
|
92
|
+
}, [config.activeDashboard, index])
|
|
93
|
+
|
|
94
|
+
const show = useMemo(() => {
|
|
95
|
+
if (row.toggle) {
|
|
96
|
+
return row.columns.map((col, i) => i === toggledRow)
|
|
97
|
+
} else {
|
|
98
|
+
return row.columns.map((col, i) => true)
|
|
99
|
+
}
|
|
100
|
+
}, [config.activeDashboard, toggledRow])
|
|
92
101
|
|
|
93
102
|
const footnotesConfig = useMemo(() => {
|
|
94
103
|
if (row.footnotesId) {
|
|
@@ -127,6 +136,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({
|
|
|
127
136
|
}
|
|
128
137
|
return (
|
|
129
138
|
<div className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`} key={`row__${index}`}>
|
|
139
|
+
{row.toggle && !inNoDataState && (
|
|
140
|
+
<Toggle row={row} visualizations={config.visualizations} active={toggledRow} setToggled={setToggled} />
|
|
141
|
+
)}
|
|
130
142
|
{row.columns.map((col, colIndex) => {
|
|
131
143
|
if (col.width) {
|
|
132
144
|
if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`col col-${col.width}`}></div>
|
|
@@ -173,14 +185,6 @@ const VisualizationRow: React.FC<VizRowProps> = ({
|
|
|
173
185
|
hideVisualization ? ' hide-parent-visualization' : hasMarginBottom ? ' mb-4' : ''
|
|
174
186
|
}`}
|
|
175
187
|
>
|
|
176
|
-
{row.toggle && !hideVisualization && (
|
|
177
|
-
<Toggle
|
|
178
|
-
row={row}
|
|
179
|
-
visualizations={config.visualizations}
|
|
180
|
-
active={show.indexOf(true)}
|
|
181
|
-
setToggled={setToggled}
|
|
182
|
-
/>
|
|
183
|
-
)}
|
|
184
188
|
<VisualizationWrapper
|
|
185
189
|
allExpanded={allExpanded}
|
|
186
190
|
currentViewport={currentViewport}
|