@cdc/dashboard 4.25.8 → 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.
- package/dist/{cdcdashboard-fce76882.es.js → cdcdashboard-BnB1QM5d.es.js} +6 -13
- package/dist/{cdcdashboard-c55ac1ea.es.js → cdcdashboard-D6CG2-Hb.es.js} +5 -12
- package/dist/{cdcdashboard-31a33da1.es.js → cdcdashboard-MXgURbdZ.es.js} +6 -13
- package/dist/{cdcdashboard-1a1724a1.es.js → cdcdashboard-dgT_1dIT.es.js} +136 -151
- package/dist/cdcdashboard.js +80040 -75976
- package/examples/api-test/categories.json +18 -0
- package/examples/api-test/chart-data.json +602 -0
- package/examples/api-test/topics.json +47 -0
- package/examples/api-test/years.json +22 -0
- package/examples/markup-axis-label.json +4167 -0
- package/examples/private/DEV-10538.json +407 -0
- package/examples/private/DEV-11405.json +39112 -0
- package/examples/private/big-dashboard.json +39112 -0
- package/examples/private/brfs-2.json +1532 -0
- package/examples/private/brfs.json +2128 -2138
- package/examples/private/clade-2.json +430 -0
- package/examples/private/delete.json +32919 -0
- package/examples/private/diabetes.json +5582 -0
- package/examples/private/example-2.json +49796 -0
- package/examples/private/group-legend-test.json +328 -0
- package/examples/private/map.json +1211 -0
- package/examples/private/markup-footer/burden_toolkit_mortality_diabetes_attributable_deaths_data.csv +14041 -0
- package/examples/private/markup-footer/burden_toolkit_mortality_diabetes_attributable_deaths_per_100000_data.csv +14041 -0
- package/examples/private/markup-footer/burden_toolkit_mortality_qaly_data.csv +18721 -0
- package/examples/private/markup-footer/burden_toolkit_mortality_yll_data.csv +18721 -0
- package/examples/private/markup-footer/mortality-deaths-footnotes-age.csv +3 -0
- package/examples/private/markup-variables.json +1451 -0
- package/examples/private/markup.json +5471 -0
- package/examples/private/mpox.json +38128 -0
- package/examples/private/north-dakota.json +1132 -0
- package/examples/private/ophdst.json +38754 -0
- package/examples/private/pedro.json +1 -0
- package/examples/private/pivot.json +683 -0
- package/examples/private/reset.json +32920 -0
- package/examples/private/sewershed.json +435 -0
- package/examples/private/tobacco.json +1938 -0
- package/examples/test-api-filter-reset.json +132 -0
- package/index.html +2 -2
- package/package.json +16 -10
- package/src/CdcDashboard.tsx +1 -3
- package/src/CdcDashboardComponent.tsx +34 -16
- package/src/DashboardContext.tsx +5 -1
- package/src/_stories/Dashboard.API.stories.tsx +62 -0
- package/src/_stories/Dashboard.stories.tsx +492 -472
- package/src/_stories/_mock/api/cessation.json +1 -0
- package/src/_stories/_mock/api/data-explorer.json +1 -0
- package/src/_stories/_mock/api/explore-by-location.json +1 -0
- package/src/_stories/_mock/api/explore-by-topic.json +1 -0
- package/src/_stories/_mock/api/legislation.json +1 -0
- package/src/_stories/_mock/api/oral-health-data.json +1 -0
- package/src/_stories/_mock/custom-order-new-values.json +116 -0
- package/src/components/CollapsibleVisualizationRow.tsx +1 -1
- package/src/components/DashboardFilters/DashboardFilters.tsx +34 -23
- package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx +29 -12
- package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx +81 -112
- package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx +82 -52
- package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx +130 -31
- package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx +80 -21
- package/src/components/DataDesignerModal.tsx +227 -210
- package/src/components/Header/Header.tsx +13 -12
- package/src/components/Toggle/Toggle.tsx +48 -47
- package/src/components/VisualizationRow.tsx +13 -6
- package/src/components/VisualizationsPanel/VisualizationsPanel.tsx +2 -0
- package/src/components/Widget/Widget.tsx +47 -18
- package/src/helpers/addValuesToDashboardFilters.ts +111 -60
- package/src/helpers/apiFilterHelpers.ts +190 -166
- package/src/helpers/filterData.ts +52 -7
- package/src/helpers/filterResetHelpers.ts +102 -0
- package/src/helpers/formatConfigBeforeSave.ts +137 -0
- package/src/helpers/getVizConfig.ts +36 -18
- package/src/helpers/loadAPIFilters.ts +109 -99
- package/src/helpers/reloadURLHelpers.ts +1 -1
- package/src/helpers/tests/filterResetHelpers.test.ts +532 -0
- package/src/helpers/tests/formatConfigBeforeSave.test.ts +69 -0
- package/src/index.tsx +1 -1
- package/src/scss/editor-panel.scss +3 -431
- package/src/scss/grid.scss +7 -5
- package/src/scss/main.scss +1 -24
- package/src/store/errorMessage/errorMessage.reducer.ts +1 -1
- package/src/types/DashboardFilters.ts +9 -8
- package/src/types/InitialState.ts +12 -12
- package/vite.config.js +1 -1
- package/vitest.config.ts +16 -0
- package/src/coreStyles_dashboard.scss +0 -3
- package/src/helpers/getAutoLoadVisualization.ts +0 -11
- package/src/scss/mixins.scss +0 -47
- package/src/scss/variables.scss +0 -5
- /package/dist/{cdcdashboard-548642e6.es.js → cdcdashboard-Ct2SB0vL.es.js} +0 -0
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
{
|
|
2
|
+
"dashboard": {
|
|
3
|
+
"theme": "theme-blue",
|
|
4
|
+
"sharedFilters": [
|
|
5
|
+
{
|
|
6
|
+
"key": "Category",
|
|
7
|
+
"type": "urlfilter",
|
|
8
|
+
"columnName": "category",
|
|
9
|
+
"apiFilter": {
|
|
10
|
+
"apiEndpoint": "http://localhost:8080/examples/api-test/categories.json",
|
|
11
|
+
"valueSelector": "category",
|
|
12
|
+
"textSelector": "category"
|
|
13
|
+
},
|
|
14
|
+
"queryParameter": "category",
|
|
15
|
+
"resetLabel": "- Select Category -",
|
|
16
|
+
"showDropdown": true,
|
|
17
|
+
"filterStyle": "dropdown",
|
|
18
|
+
"usedBy": ["chart1"]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"key": "Topic",
|
|
22
|
+
"type": "urlfilter",
|
|
23
|
+
"columnName": "topic",
|
|
24
|
+
"apiFilter": {
|
|
25
|
+
"apiEndpoint": "http://localhost:8080/examples/api-test/topics.json",
|
|
26
|
+
"valueSelector": "topic",
|
|
27
|
+
"textSelector": "topic"
|
|
28
|
+
},
|
|
29
|
+
"queryParameter": "topic",
|
|
30
|
+
"resetLabel": "- Select Topic -",
|
|
31
|
+
"showDropdown": true,
|
|
32
|
+
"parents": [
|
|
33
|
+
"Category"
|
|
34
|
+
],
|
|
35
|
+
"filterStyle": "dropdown",
|
|
36
|
+
"usedBy": ["chart1"]
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"key": "Year",
|
|
40
|
+
"type": "urlfilter",
|
|
41
|
+
"columnName": "year",
|
|
42
|
+
"apiFilter": {
|
|
43
|
+
"apiEndpoint": "http://localhost:8080/examples/api-test/years.json",
|
|
44
|
+
"valueSelector": "year",
|
|
45
|
+
"textSelector": "year"
|
|
46
|
+
},
|
|
47
|
+
"queryParameter": "year",
|
|
48
|
+
"resetLabel": "- Select -",
|
|
49
|
+
"showDropdown": true,
|
|
50
|
+
"parents": [
|
|
51
|
+
"Category",
|
|
52
|
+
"Topic"
|
|
53
|
+
],
|
|
54
|
+
"filterStyle": "dropdown",
|
|
55
|
+
"usedBy": ["chart1"]
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
"rows": [
|
|
60
|
+
[
|
|
61
|
+
{
|
|
62
|
+
"width": 12,
|
|
63
|
+
"widget": "filters"
|
|
64
|
+
}
|
|
65
|
+
],
|
|
66
|
+
[
|
|
67
|
+
{
|
|
68
|
+
"width": 12,
|
|
69
|
+
"widget": "header"
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
[
|
|
73
|
+
{
|
|
74
|
+
"width": 12,
|
|
75
|
+
"widget": "chart1"
|
|
76
|
+
}
|
|
77
|
+
]
|
|
78
|
+
],
|
|
79
|
+
"visualizations": {
|
|
80
|
+
"filters": {
|
|
81
|
+
"type": "dashboardFilters",
|
|
82
|
+
"visualizationType": "dashboardFilters",
|
|
83
|
+
"sharedFilterIndexes": [
|
|
84
|
+
0,
|
|
85
|
+
1,
|
|
86
|
+
2
|
|
87
|
+
],
|
|
88
|
+
"filterBehavior": "Apply Button",
|
|
89
|
+
"applyFiltersButtonText": "Apply Filters"
|
|
90
|
+
},
|
|
91
|
+
"header": {
|
|
92
|
+
"type": "markup-include",
|
|
93
|
+
"title": "Test API Filter Reset",
|
|
94
|
+
"contentEditor": {
|
|
95
|
+
"inlineHTML": "<h2>API Filter Reset Test Dashboard</h2><p>This dashboard tests the 'Clear Filters' button functionality with API filters.</p><ul><li><strong>Category</strong>: Has resetLabel = '- Select Category -'</li><li><strong>Topic</strong>: Has resetLabel = '- Select Topic -' (depends on Category)</li><li><strong>Year</strong>: Has defaultValue = '2023' (depends on Category and Topic)</li></ul><h3>Testing Instructions:</h3><ol><li>Select values for all three filters</li><li>Click 'Apply Filters'</li><li>Click 'Clear Filters'</li><li>Expected behavior:<ul><li>Category and Topic should reset to '- Select Category -' and '- Select Topic -'</li><li>Year should reset to '2023' (its defaultValue)</li></ul></li></ol>",
|
|
96
|
+
"useInlineHTML": true
|
|
97
|
+
},
|
|
98
|
+
"theme": "theme-blue"
|
|
99
|
+
},
|
|
100
|
+
"chart1": {
|
|
101
|
+
"type": "chart",
|
|
102
|
+
"title": "Sample Chart",
|
|
103
|
+
"showTitle": true,
|
|
104
|
+
"theme": "theme-blue",
|
|
105
|
+
"visualizationType": "Line",
|
|
106
|
+
"dataKey": "chartData",
|
|
107
|
+
"xAxis": {
|
|
108
|
+
"dataKey": "state",
|
|
109
|
+
"type": "categorical"
|
|
110
|
+
},
|
|
111
|
+
"series": [
|
|
112
|
+
{
|
|
113
|
+
"dataKey": "value",
|
|
114
|
+
"type": "Line"
|
|
115
|
+
}
|
|
116
|
+
],
|
|
117
|
+
"general": {
|
|
118
|
+
"showDownloadButton": false
|
|
119
|
+
},
|
|
120
|
+
"table": {
|
|
121
|
+
"showTableButton": false
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
"datasets": {
|
|
126
|
+
"chartData": {
|
|
127
|
+
"dataUrl": "http://localhost:8080/examples/api-test/chart-data.json"
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
"filterBehavior": "Apply Button",
|
|
131
|
+
"type": "dashboard"
|
|
132
|
+
}
|
package/index.html
CHANGED
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
</head>
|
|
23
23
|
|
|
24
24
|
<body>
|
|
25
|
-
<div class="react-container" data-config="/examples/
|
|
25
|
+
<div class="react-container" data-config="/examples/markup-axis-label.json"></div>
|
|
26
26
|
<script src="https://www.cdc.gov/TemplatePackage/contrib/libs/jquery/latest/jquery.min.js?_=91329"></script>
|
|
27
27
|
<script type="module" src="./src/index.tsx"></script>
|
|
28
28
|
</body>
|
|
29
29
|
|
|
30
|
-
</html>
|
|
30
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/dashboard",
|
|
3
|
-
"version": "4.25.
|
|
3
|
+
"version": "4.25.11",
|
|
4
4
|
"description": "React component for combining multiple visualizations into a single dashboard",
|
|
5
5
|
"moduleName": "CdcDashboard",
|
|
6
6
|
"main": "dist/cdcdashboard",
|
|
@@ -27,15 +27,15 @@
|
|
|
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.11",
|
|
31
|
+
"@cdc/core": "^4.25.11",
|
|
32
|
+
"@cdc/data-bite": "^4.25.11",
|
|
33
|
+
"@cdc/filtered-text": "^4.25.11",
|
|
34
|
+
"@cdc/map": "^4.25.11",
|
|
35
|
+
"@cdc/markup-include": "^4.25.11",
|
|
36
|
+
"@cdc/waffle-chart": "^4.25.11",
|
|
37
37
|
"js-base64": "^2.5.2",
|
|
38
|
-
"react-accessible-accordion": "^
|
|
38
|
+
"react-accessible-accordion": "^5.0.1",
|
|
39
39
|
"react-dnd": "^14.0.2",
|
|
40
40
|
"react-dnd-html5-backend": "^14.0.0",
|
|
41
41
|
"use-debounce": "^6.0.1"
|
|
@@ -44,5 +44,11 @@
|
|
|
44
44
|
"react": "^18.2.0",
|
|
45
45
|
"react-dom": "^18.2.0"
|
|
46
46
|
},
|
|
47
|
-
"
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
49
|
+
"vite": "^4.4.11",
|
|
50
|
+
"vite-plugin-css-injected-by-js": "^2.4.0",
|
|
51
|
+
"vite-plugin-svgr": "^2.4.0"
|
|
52
|
+
},
|
|
53
|
+
"gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
|
|
48
54
|
}
|
package/src/CdcDashboard.tsx
CHANGED
|
@@ -13,8 +13,7 @@ import { DashboardConfig } from './types/DashboardConfig'
|
|
|
13
13
|
import { coveUpdateWorker } from '@cdc/core/helpers/coveUpdateWorker'
|
|
14
14
|
import _ from 'lodash'
|
|
15
15
|
import { getQueryParams } from '@cdc/core/helpers/queryStringUtils'
|
|
16
|
-
import EditorContext from '
|
|
17
|
-
import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
|
|
16
|
+
import EditorContext from '@cdc/core/contexts/EditorContext'
|
|
18
17
|
|
|
19
18
|
type MultiDashboardProps = Omit<WCMSProps, 'configUrl'> & {
|
|
20
19
|
configUrl?: string
|
|
@@ -58,7 +57,6 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
|
|
|
58
57
|
const { newConfig, datasets } =
|
|
59
58
|
selected !== null ? await loadMultiDashboard(_config, selected) : await loadSingleDashboard(_config)
|
|
60
59
|
setInitial(formatInitialState(newConfig, datasets))
|
|
61
|
-
publishAnalyticsEvent('dashboard_loaded', 'load', interactionLabel, 'dashboard')
|
|
62
60
|
}
|
|
63
61
|
|
|
64
62
|
useEffect(() => {
|
|
@@ -11,6 +11,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend'
|
|
|
11
11
|
import parse from 'html-react-parser'
|
|
12
12
|
|
|
13
13
|
import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
|
|
14
|
+
import cloneConfig from '@cdc/core/helpers/cloneConfig'
|
|
14
15
|
import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
|
|
15
16
|
import { DashboardContext, DashboardDispatchContext } from './DashboardContext'
|
|
16
17
|
import { Visualization } from '@cdc/core/types/Visualization'
|
|
@@ -22,7 +23,7 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
|
|
|
22
23
|
import getViewport from '@cdc/core/helpers/getViewport'
|
|
23
24
|
|
|
24
25
|
import Grid from './components/Grid'
|
|
25
|
-
import Header from './components/Header
|
|
26
|
+
import Header from './components/Header'
|
|
26
27
|
import DataTable from '@cdc/core/components/DataTable'
|
|
27
28
|
import MediaControls from '@cdc/core/components/MediaControls'
|
|
28
29
|
|
|
@@ -31,7 +32,7 @@ import './scss/main.scss'
|
|
|
31
32
|
import VisualizationsPanel from './components/VisualizationsPanel'
|
|
32
33
|
import dashboardReducer from './store/dashboard.reducer'
|
|
33
34
|
import errorMessagesReducer from './store/errorMessage/errorMessage.reducer'
|
|
34
|
-
import { filterData } from './helpers/filterData'
|
|
35
|
+
import { filterData, isFilterAtResetState } from './helpers/filterData'
|
|
35
36
|
import { getVizKeys } from './helpers/getVizKeys'
|
|
36
37
|
import Title from '@cdc/core/components/ui/Title'
|
|
37
38
|
import { type TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
|
|
@@ -42,7 +43,7 @@ import { type WCMSProps } from '@cdc/core/types/WCMSProps'
|
|
|
42
43
|
import { type InitialState } from './types/InitialState'
|
|
43
44
|
import MultiTabs from './components/MultiConfigTabs'
|
|
44
45
|
import _ from 'lodash'
|
|
45
|
-
import EditorContext from '
|
|
46
|
+
import EditorContext from '@cdc/core/contexts/EditorContext'
|
|
46
47
|
import { APIFilterDropdowns } from './components/DashboardFilters'
|
|
47
48
|
import { ViewPort } from '@cdc/core/types/ViewPort'
|
|
48
49
|
import VisualizationRow from './components/VisualizationRow'
|
|
@@ -83,15 +84,22 @@ export default function CdcDashboard({
|
|
|
83
84
|
|
|
84
85
|
const inNoDataState = useMemo(() => {
|
|
85
86
|
const hasApplyBehavior = hasDashboardApplyBehavior(state.config.visualizations)
|
|
86
|
-
|
|
87
|
+
|
|
87
88
|
if (hasApplyBehavior && !state.filtersApplied) {
|
|
88
89
|
return true
|
|
89
90
|
}
|
|
90
|
-
|
|
91
|
+
|
|
92
|
+
// Check if any filters are at their reset state (incomplete)
|
|
93
|
+
const sharedFilters = state.config.dashboard?.sharedFilters || []
|
|
94
|
+
const hasResetFilters = sharedFilters.some(isFilterAtResetState)
|
|
95
|
+
if (hasResetFilters) {
|
|
96
|
+
return true
|
|
97
|
+
}
|
|
98
|
+
|
|
91
99
|
const vals = reloadURLHelpers.getDatasetKeys(state.config).map(key => state.data[key])
|
|
92
100
|
if (!vals.length) return true
|
|
93
101
|
return vals.some(val => val === undefined)
|
|
94
|
-
}, [state.data, state.config.visualizations, state.filtersApplied])
|
|
102
|
+
}, [state.data, state.config.visualizations, state.config.dashboard?.sharedFilters, state.filtersApplied])
|
|
95
103
|
|
|
96
104
|
const vizRowColumnLocator = getVizRowColumnLocator(state.config.rows)
|
|
97
105
|
|
|
@@ -111,7 +119,7 @@ export default function CdcDashboard({
|
|
|
111
119
|
)
|
|
112
120
|
|
|
113
121
|
const reloadURLData = async (newFilters?: SharedFilter[]) => {
|
|
114
|
-
const config =
|
|
122
|
+
const config = cloneConfig(state.config)
|
|
115
123
|
if (!config.datasets) return
|
|
116
124
|
const filters = newFilters || config.dashboard.sharedFilters
|
|
117
125
|
const datasetKeys = reloadURLHelpers.getDatasetKeys(config)
|
|
@@ -122,7 +130,7 @@ export default function CdcDashboard({
|
|
|
122
130
|
dispatch({ type: 'SET_FILTERED_DATA', payload: emptyFilteredData })
|
|
123
131
|
|
|
124
132
|
const newData = {} // Start with empty object instead of cloning existing data
|
|
125
|
-
const newDatasets =
|
|
133
|
+
const newDatasets = config.datasets
|
|
126
134
|
let dataWasFetched = false
|
|
127
135
|
let newFileName = ''
|
|
128
136
|
|
|
@@ -164,9 +172,13 @@ export default function CdcDashboard({
|
|
|
164
172
|
}
|
|
165
173
|
|
|
166
174
|
if (filter.apiFilter && filter.active) {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
175
|
+
// Don't add filter to query params if it's set to its resetLabel
|
|
176
|
+
const isResetLabel = filter.resetLabel && filter.active === filter.resetLabel
|
|
177
|
+
if (!isResetLabel) {
|
|
178
|
+
updatedQSParams[filter.apiFilter.valueSelector] = filter.active
|
|
179
|
+
if (filter.apiFilter.subgroupValueSelector && filter.subGrouping.active) {
|
|
180
|
+
updatedQSParams[filter.apiFilter.subgroupValueSelector] = filter.subGrouping.active
|
|
181
|
+
}
|
|
170
182
|
}
|
|
171
183
|
}
|
|
172
184
|
}
|
|
@@ -255,8 +267,9 @@ export default function CdcDashboard({
|
|
|
255
267
|
activeDashboard: config.activeDashboard
|
|
256
268
|
}
|
|
257
269
|
})
|
|
258
|
-
setAPILoading(false)
|
|
259
270
|
}
|
|
271
|
+
|
|
272
|
+
setAPILoading(false)
|
|
260
273
|
}
|
|
261
274
|
|
|
262
275
|
const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) => {
|
|
@@ -290,8 +303,6 @@ export default function CdcDashboard({
|
|
|
290
303
|
}
|
|
291
304
|
|
|
292
305
|
const setEventData = ({ detail }, data, filteredData) => {
|
|
293
|
-
// eslint-disable-next-line no-console
|
|
294
|
-
console.log('Event: cove_set_data', detail)
|
|
295
306
|
try {
|
|
296
307
|
const newDatasets = Object.keys(detail).reduce((acc, key) => {
|
|
297
308
|
if (data[key] !== undefined) {
|
|
@@ -354,7 +365,7 @@ export default function CdcDashboard({
|
|
|
354
365
|
}, [])
|
|
355
366
|
|
|
356
367
|
const updateChildConfig = (visualizationKey, newConfig) => {
|
|
357
|
-
const config =
|
|
368
|
+
const config = cloneConfig(state.config)
|
|
358
369
|
const updatedConfig = _.pick(config, ['visualizations', 'multiDashboards'])
|
|
359
370
|
updatedConfig.visualizations[visualizationKey] = newConfig
|
|
360
371
|
updatedConfig.visualizations[visualizationKey].formattedData = config.visualizations[visualizationKey].formattedData
|
|
@@ -582,10 +593,16 @@ export default function CdcDashboard({
|
|
|
582
593
|
})
|
|
583
594
|
|
|
584
595
|
//Applys any applicable filters to the Table
|
|
585
|
-
|
|
596
|
+
let filteredTableData =
|
|
586
597
|
applicableFilters.length > 0
|
|
587
598
|
? filterData(applicableFilters, config.datasets[datasetKey].data)
|
|
588
599
|
: undefined
|
|
600
|
+
|
|
601
|
+
// Filters are not set on first component render, don't render full dataset
|
|
602
|
+
if (applicableFilters.length > 0 && !applicableFilters.some(filter => filter.active)) {
|
|
603
|
+
filteredTableData = []
|
|
604
|
+
}
|
|
605
|
+
|
|
589
606
|
return (
|
|
590
607
|
<div
|
|
591
608
|
className='multi-table-container'
|
|
@@ -628,6 +645,7 @@ export default function CdcDashboard({
|
|
|
628
645
|
setParentConfig: editorContext.setTempConfig,
|
|
629
646
|
outerContainerRef,
|
|
630
647
|
isDebug,
|
|
648
|
+
isEditor: isEditor && !isPreview,
|
|
631
649
|
loadAPIFilters,
|
|
632
650
|
setAPIFilterDropdowns,
|
|
633
651
|
reloadURLData,
|
package/src/DashboardContext.tsx
CHANGED
|
@@ -10,11 +10,14 @@ type ConfigCTX = DashboardState & {
|
|
|
10
10
|
outerContainerRef: (node: any) => void
|
|
11
11
|
setParentConfig: any
|
|
12
12
|
isDebug: boolean
|
|
13
|
+
isEditor: boolean
|
|
13
14
|
reloadURLData: (newFilters?: SharedFilter[]) => void
|
|
14
15
|
loadAPIFilters: (
|
|
15
16
|
sharedFilters: SharedFilter[],
|
|
16
17
|
dropdowns: APIFilterDropdowns,
|
|
17
|
-
|
|
18
|
+
loadAll?: boolean,
|
|
19
|
+
recursiveLimit?: number,
|
|
20
|
+
isStale?: () => boolean
|
|
18
21
|
) => Promise<SharedFilter[]>
|
|
19
22
|
setAPIFilterDropdowns: (dropdowns: APIFilterDropdowns) => void
|
|
20
23
|
setAPILoading: (loading: boolean) => void
|
|
@@ -39,6 +42,7 @@ const initialContext: ConfigCTX = {
|
|
|
39
42
|
reloadURLData: () => {},
|
|
40
43
|
loadAPIFilters: () => Promise.resolve([]),
|
|
41
44
|
isDebug: false,
|
|
45
|
+
isEditor: false,
|
|
42
46
|
config: {} as MultiDashboardConfig,
|
|
43
47
|
...initialState
|
|
44
48
|
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
|
+
import Dashboard from '../CdcDashboard'
|
|
3
|
+
import { type DashboardConfig as Config } from '../types/DashboardConfig'
|
|
4
|
+
|
|
5
|
+
// API Dashboard Configs
|
|
6
|
+
import APICessationConfig from './_mock/api/cessation.json'
|
|
7
|
+
import APIDataExplorerConfig from './_mock/api/data-explorer.json'
|
|
8
|
+
import APIExploreByLocationConfig from './_mock/api/explore-by-location.json'
|
|
9
|
+
import APIExploreByTopicConfig from './_mock/api/explore-by-topic.json'
|
|
10
|
+
import APILegislationConfig from './_mock/api/legislation.json'
|
|
11
|
+
import APIOralHealthDataConfig from './_mock/api/oral-health-data.json'
|
|
12
|
+
|
|
13
|
+
const meta: Meta<typeof Dashboard> = {
|
|
14
|
+
title: 'Components/Pages/Dashboard/API',
|
|
15
|
+
component: Dashboard
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
type Story = StoryObj<typeof Dashboard>
|
|
19
|
+
|
|
20
|
+
export const Cessation: Story = {
|
|
21
|
+
args: {
|
|
22
|
+
config: APICessationConfig as unknown as Config,
|
|
23
|
+
isEditor: false
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export const Data_Explorer: Story = {
|
|
28
|
+
args: {
|
|
29
|
+
config: APIDataExplorerConfig as unknown as Config,
|
|
30
|
+
isEditor: false
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export const Explore_By_Location: Story = {
|
|
35
|
+
args: {
|
|
36
|
+
config: APIExploreByLocationConfig as unknown as Config,
|
|
37
|
+
isEditor: false
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export const Explore_By_Topic: Story = {
|
|
42
|
+
args: {
|
|
43
|
+
config: APIExploreByTopicConfig as unknown as Config,
|
|
44
|
+
isEditor: false
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export const Legislation: Story = {
|
|
49
|
+
args: {
|
|
50
|
+
config: APILegislationConfig as unknown as Config,
|
|
51
|
+
isEditor: false
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export const Oral_Health_Data: Story = {
|
|
56
|
+
args: {
|
|
57
|
+
config: APIOralHealthDataConfig as unknown as Config,
|
|
58
|
+
isEditor: false
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export default meta
|