@cdc/dashboard 4.25.1 → 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.
Files changed (38) hide show
  1. package/dist/cdcdashboard.js +53114 -52737
  2. package/examples/all-components.json +529 -4607
  3. package/examples/dashboard-gallery.json +397 -397
  4. package/examples/private/DEV-10527.json +845 -0
  5. package/examples/private/DEV-10586.json +54319 -0
  6. package/examples/private/DEV-10856.json +54319 -0
  7. package/examples/private/DEV-9932.json +95 -0
  8. package/examples/private/dashboard-map-filter.json +815 -0
  9. package/examples/private/dev-10856-2.json +1348 -0
  10. package/examples/private/feelings.json +1 -0
  11. package/examples/private/markup.json +115 -0
  12. package/examples/private/nhis.json +1792 -0
  13. package/index.html +4 -3
  14. package/package.json +9 -9
  15. package/src/CdcDashboard.tsx +5 -8
  16. package/src/CdcDashboardComponent.tsx +58 -56
  17. package/src/_stories/Dashboard.stories.tsx +31 -0
  18. package/src/_stories/_mock/dashboard-filter-asc.json +551 -0
  19. package/src/components/CollapsibleVisualizationRow.tsx +1 -1
  20. package/src/components/DashboardFilters/DashboardFilters.tsx +10 -5
  21. package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx +22 -5
  22. package/src/components/DashboardFilters/DashboardFiltersEditor/components/DeleteFilterModal.tsx +13 -3
  23. package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx +129 -40
  24. package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx +10 -7
  25. package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx +11 -12
  26. package/src/components/DashboardFilters/dashboardfilter.styles.css +0 -2
  27. package/src/components/VisualizationRow.tsx +29 -15
  28. package/src/helpers/addValuesToDashboardFilters.ts +6 -5
  29. package/src/helpers/apiFilterHelpers.ts +10 -5
  30. package/src/helpers/changeFilterActive.ts +17 -4
  31. package/src/helpers/getFilteredData.ts +13 -4
  32. package/src/helpers/getUpdateConfig.ts +11 -4
  33. package/src/helpers/loadAPIFilters.ts +6 -4
  34. package/src/helpers/tests/updatesChildFilters.test.ts +56 -0
  35. package/src/helpers/updateChildFilters.ts +50 -0
  36. package/src/scss/main.scss +0 -3
  37. package/src/store/dashboard.reducer.ts +46 -24
  38. package/src/types/SharedFilter.ts +1 -1
package/index.html CHANGED
@@ -21,16 +21,17 @@
21
21
  </head>
22
22
 
23
23
  <body>
24
- <!-- <div class="react-container" data-config="/examples/chart-data-2.json"></div> -->
24
+ <div class="react-container" data-config="/examples/private/nhis.json"></div>
25
+ <!-- <div class="react-container" data-config="/examples/private/bird-flu.json"></div> -->
25
26
  <!-- <div class="react-container" data-config="/examples/bump-chart.json"></div> -->
26
27
  <!-- <div class="react-container" data-config="/examples/full-dashboard.json"></div> -->
27
- <!-- <div class="react-container" data-config="/examples/dashboard-gallery.json"></div> -->
28
+ <div class="react-container" data-config="/examples/dashboard-gallery.json"></div>
28
29
  <!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
29
30
  <!-- <div class="react-container" data-config="/examples/default-multi-dataset.json"></div> -->
30
31
  <!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
31
32
  <!-- <div class="react-container" data-config="/examples/dashboard-gallery.json"></div> -->
32
33
  <!-- <div class="react-container" data-config="/examples/filtered-dash.json"></div> -->
33
- <div class="react-container" data-config="/examples/private/art-dashboard.json"></div>
34
+ <!-- <div class="react-container" data-config="/examples/private/art-dashboard.json"></div> -->
34
35
  <!-- <div class="react-container" data-config="/examples/sankey.json"></div> -->
35
36
  <!-- <div class="react-container" data-config="/examples/DEV-6574.json"></div> -->
36
37
  <!-- <div class="react-container" data-config="/examples/default-multi-dataset-2.json"></div> -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/dashboard",
3
- "version": "4.25.1",
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.1",
31
- "@cdc/core": "^4.25.1",
32
- "@cdc/data-bite": "^4.25.1",
33
- "@cdc/filtered-text": "^4.25.1",
34
- "@cdc/map": "^4.25.1",
35
- "@cdc/markup-include": "^4.25.1",
36
- "@cdc/waffle-chart": "^4.25.1",
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": "c32d727f516fe3525178e3a6480abbe70b2a20d6"
52
+ "gitHead": "d83d8555c1500ff0cad9d2c5c3486324afa15ec6"
53
53
  }
package/src/CdcDashboard.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { useEffect, useState } from 'react'
1
+ import { useContext, useEffect, useState } from 'react'
2
2
  import CdcDashboard from './CdcDashboardComponent'
3
3
  import { MultiDashboardConfig } from './types/MultiDashboard'
4
4
  import Loading from '@cdc/core/components/Loading'
@@ -13,19 +13,16 @@ 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 '../../editor/src/ConfigContext'
16
17
 
17
18
  type MultiDashboardProps = Omit<WCMSProps, 'configUrl'> & {
18
19
  configUrl?: string
19
20
  config?: MultiDashboardConfig
20
21
  }
21
22
 
22
- const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
23
- configUrl,
24
- config: editorConfig,
25
- isEditor,
26
- isDebug
27
- }) => {
23
+ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, isEditor, isDebug, config }) => {
28
24
  const [initial, setInitial] = useState<InitialState>(undefined)
25
+ const editorContext = useContext(EditorContext)
29
26
 
30
27
  const getSelectedConfig = (config: MultiDashboardConfig): number | null => {
31
28
  if (!config.multiDashboards) return null
@@ -48,7 +45,7 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
48
45
  }
49
46
 
50
47
  const loadConfig = async () => {
51
- const _config: MultiDashboardConfig = editorConfig || (await (await fetch(configUrl)).json())
48
+ const _config: MultiDashboardConfig = config || editorContext.config || (await (await fetch(configUrl)).json())
52
49
  const selected = getSelectedConfig(_config)
53
50
 
54
51
  const { newConfig, datasets } =
package/src/CdcDashboardComponent.tsx CHANGED
@@ -521,6 +521,8 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
521
521
  const { config } = state
522
522
  const { title, description } = config.dashboard || {}
523
523
 
524
+ const filteredRows = config.rows && config.rows.filter(row => row.columns.filter(col => col.widget).length !== 0)
525
+
524
526
  body = (
525
527
  <>
526
528
  {isEditor && <Header />}
@@ -544,62 +546,62 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
544
546
  {/* Description */}
545
547
  {description && <div className='subtext mb-3'>{parse(description)}</div>}
546
548
  {/* Visualizations */}
547
- {config.rows &&
548
- config.rows
549
- .filter(row => row.columns.filter(col => col.widget).length !== 0)
550
- .map((row, index) => {
551
- if (row.multiVizColumn && (isPreview || !isEditor)) {
552
- const filteredData = getFilteredData(state, _.cloneDeep(state.data))
553
- const data = filteredData[index] ?? row.formattedData
554
- const dataGroups = {}
555
- data.forEach(d => {
556
- const groupKey = d[row.multiVizColumn]
557
- if (!dataGroups[groupKey]) dataGroups[groupKey] = []
558
- dataGroups[groupKey].push(d)
559
- })
560
- return (
561
- <>
562
- {/* Expand/Collapse All */}
563
- {!inNoDataState && row.expandCollapseAllButtons === true && (
564
- <ExpandCollapseButtons setAllExpanded={setAllExpanded} />
565
- )}
566
- {Object.keys(dataGroups).map(groupName => {
567
- const dataValue = dataGroups[groupName]
568
- return (
569
- <VisualizationRow
570
- key={`row__${index}__${groupName}`}
571
- allExpanded={allExpanded}
572
- filteredDataOverride={dataValue}
573
- groupName={groupName}
574
- row={row}
575
- rowIndex={index}
576
- setSharedFilter={setSharedFilter}
577
- updateChildConfig={updateChildConfig}
578
- apiFilterDropdowns={apiFilterDropdowns}
579
- currentViewport={currentViewport}
580
- inNoDataState={inNoDataState}
581
- />
582
- )
583
- })}
584
- </>
585
- )
586
- } else {
587
- return (
588
- <VisualizationRow
589
- key={`row__${index}`}
590
- allExpanded={false}
591
- groupName={''}
592
- row={row}
593
- rowIndex={index}
594
- setSharedFilter={setSharedFilter}
595
- updateChildConfig={updateChildConfig}
596
- apiFilterDropdowns={apiFilterDropdowns}
597
- currentViewport={currentViewport}
598
- inNoDataState={inNoDataState}
599
- />
600
- )
601
- }
602
- })}
549
+ {filteredRows &&
550
+ filteredRows.map((row, index) => {
551
+ if (row.multiVizColumn && (isPreview || !isEditor)) {
552
+ const filteredData = getFilteredData(state, _.cloneDeep(state.data))
553
+ const data = filteredData[index] ?? row.formattedData
554
+ const dataGroups = {}
555
+ data.forEach(d => {
556
+ const groupKey = d[row.multiVizColumn]
557
+ if (!dataGroups[groupKey]) dataGroups[groupKey] = []
558
+ dataGroups[groupKey].push(d)
559
+ })
560
+ return (
561
+ <>
562
+ {/* Expand/Collapse All */}
563
+ {!inNoDataState && row.expandCollapseAllButtons === true && (
564
+ <ExpandCollapseButtons setAllExpanded={setAllExpanded} />
565
+ )}
566
+ {Object.keys(dataGroups).map(groupName => {
567
+ const dataValue = dataGroups[groupName]
568
+ return (
569
+ <VisualizationRow
570
+ key={`row__${index}__${groupName}`}
571
+ allExpanded={allExpanded}
572
+ filteredDataOverride={dataValue}
573
+ groupName={groupName}
574
+ row={row}
575
+ rowIndex={index}
576
+ setSharedFilter={setSharedFilter}
577
+ updateChildConfig={updateChildConfig}
578
+ apiFilterDropdowns={apiFilterDropdowns}
579
+ currentViewport={currentViewport}
580
+ inNoDataState={inNoDataState}
581
+ isLastRow={index === filteredRows.length - 1}
582
+ />
583
+ )
584
+ })}
585
+ </>
586
+ )
587
+ } else {
588
+ return (
589
+ <VisualizationRow
590
+ key={`row__${index}`}
591
+ allExpanded={false}
592
+ groupName={''}
593
+ row={row}
594
+ rowIndex={index}
595
+ setSharedFilter={setSharedFilter}
596
+ updateChildConfig={updateChildConfig}
597
+ apiFilterDropdowns={apiFilterDropdowns}
598
+ currentViewport={currentViewport}
599
+ inNoDataState={inNoDataState}
600
+ isLastRow={index === filteredRows.length - 1}
601
+ />
602
+ )
603
+ }
604
+ })}
603
605
 
604
606
  {inNoDataState ? <div className='mt-5'>Please complete your selection to continue.</div> : <></>}
605
607
 
package/src/_stories/Dashboard.stories.tsx CHANGED
@@ -29,6 +29,16 @@ import TopSpacing_2 from './_mock/data-bite-dash-test_1.json'
29
29
  import TopSpacing_3 from './_mock/data-bite-dash-test_1_1.json'
30
30
  import TopSpacing_4 from './_mock/data-bite-dash-test_1_1_1.json'
31
31
 
32
+ // Dashboard Filter Updates for Ascending, Descending, and Custom Order
33
+ import DashboardFilterAsc from './_mock/dashboard-filter-asc.json'
34
+ const DashboardFilterDesc = _.cloneDeep(DashboardFilterAsc)
35
+ const DashboardFilterCust = _.cloneDeep(DashboardFilterAsc)
36
+ DashboardFilterDesc.dashboard.sharedFilters[0].order = 'desc'
37
+ DashboardFilterCust.dashboard.sharedFilters[0].order = 'cust'
38
+
39
+ // On DashboardFilterCust change the sharedFilters[0].values and orderedValues to be in a custom order
40
+ const customOrder = ['American Samoa', 'Alaska', 'Alabama', 'Arizona', 'Arkansas']
41
+
32
42
  const meta: Meta<typeof Dashboard> = {
33
43
  title: 'Components/Pages/Dashboard',
34
44
  component: Dashboard
@@ -36,6 +46,27 @@ const meta: Meta<typeof Dashboard> = {
36
46
 
37
47
  type Story = StoryObj<typeof Dashboard>
38
48
 
49
+ export const Dashboard_Filter_Asc: Story = {
50
+ args: {
51
+ config: DashboardFilterAsc,
52
+ isEditor: false
53
+ }
54
+ }
55
+
56
+ export const Dashboard_Filter_Desc: Story = {
57
+ args: {
58
+ config: DashboardFilterDesc,
59
+ isEditor: false
60
+ }
61
+ }
62
+
63
+ export const Dashboard_Filter_Cust: Story = {
64
+ args: {
65
+ config: DashboardFilterCust,
66
+ isEditor: false
67
+ }
68
+ }
69
+
39
70
  export const Example_1: Story = {
40
71
  args: {
41
72
  config: ExampleConfig_1,