@cdc/dashboard 4.26.3 → 4.26.5

package/src/store/dashboard.reducer.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import { getUpdateConfig } from '../helpers/getUpdateConfig'
+import { getFilteredData } from '../helpers/getFilteredData'
 import { MultiDashboard, MultiDashboardConfig } from '../types/MultiDashboard'
 import DashboardActions from './dashboard.actions'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
@@ -8,6 +9,8 @@ import { Dashboard } from '../types/Dashboard'
 import { ConfigRow } from '../types/ConfigRow'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { initialState } from '../DashboardContext'
+import { hasConditionalWidgets, normalizeConditionalColumn } from '../helpers/dashboardColumnWidgets'
+import { cloneDashboardWidget } from '../helpers/cloneDashboardWidget'
 
 type BlankMultiConfig = {
   dashboard: Partial<Dashboard>
@@ -24,6 +27,7 @@ const createBlankDashboard: () => BlankMultiConfig = () => ({
     label: 'Data Table',
     show: false,
     showDownloadUrl: false,
+    downloadUrlLabel: '',
     showVertical: true
   }
 })
@@ -75,10 +79,22 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       } else return state // ignore SET_CONFIG calls that have the wrong activeDashboard due to async api fetching
     }
     case 'SET_DATA': {
-      return { ...state, data: action.payload }
+      if (
+        action.payload.activeDashboard !== undefined &&
+        state.config.activeDashboard !== action.payload.activeDashboard
+      ) {
+        return state
+      }
+      return { ...state, data: action.payload.data }
     }
     case 'SET_FILTERED_DATA': {
-      return { ...state, filteredData: action.payload }
+      if (
+        action.payload.activeDashboard !== undefined &&
+        state.config.activeDashboard !== action.payload.activeDashboard
+      ) {
+        return state
+      }
+      return { ...state, filteredData: action.payload.filteredData }
     }
     case 'SET_LOADING': {
       return { ...state, loading: action.payload }
@@ -89,9 +105,15 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'SET_SHARED_FILTERS': {
       const newSharedFilters = action.payload
       const newDashboardConfig = { ...state.config.dashboard, sharedFilters: newSharedFilters }
+      const nextConfig = saveMultiChanges(
+        { ...state.config, dashboard: newDashboardConfig },
+        state.config.activeDashboard
+      )
+      const filteredData = getFilteredData({ ...state, config: nextConfig })
       return {
         ...state,
-        config: saveMultiChanges({ ...state.config, dashboard: newDashboardConfig }, state.config.activeDashboard)
+        config: nextConfig,
+        filteredData
       }
     }
     case 'SET_TAB_SELECTED': {
@@ -114,12 +136,12 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'RENAME_DASHBOARD_TAB': {
       const newMultiDashboards = state.config.multiDashboards.map(dashboard => {
         if (dashboard.label === action.payload.current) {
-          dashboard.label = action.payload.new
+          return { ...dashboard, label: action.payload.new }
         }
         return dashboard
       })
       const newConfig = { ...state.config, label: action.payload.new } // make sure active label is updated
-      return applyMultiDashboards({ ...state, newConfig }, newMultiDashboards)
+      return applyMultiDashboards({ ...state, config: newConfig }, newMultiDashboards)
     }
     case 'REORDER_MULTIDASHBOARDS': {
       const { newIndex, currentIndex } = action.payload
@@ -163,10 +185,24 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       return { ...state, config: { ...state.config, rows: newRows } }
     }
     case 'ADD_VISUALIZATION': {
-      const { newViz, rowIdx, colIdx } = action.payload
+      const { newViz, rowIdx, colIdx, entryIdx } = action.payload
       const vizKey = newViz.uid
       const newRows = _.cloneDeep(state.config.rows)
-      newRows[rowIdx].columns[colIdx].widget = vizKey
+      const column = newRows[rowIdx].columns[colIdx]
+
+      if (entryIdx !== undefined || hasConditionalWidgets(column)) {
+        const nextConditionalWidgets = [...(column.conditionalWidgets || [])]
+        const targetEntryIndex = entryIdx ?? nextConditionalWidgets.length
+        nextConditionalWidgets[targetEntryIndex] = { widget: vizKey }
+        newRows[rowIdx].columns[colIdx] = normalizeConditionalColumn({
+          ...column,
+          widget: undefined,
+          conditionalWidgets: nextConditionalWidgets.filter(entry => !!entry?.widget)
+        })
+      } else {
+        newRows[rowIdx].columns[colIdx].widget = vizKey
+      }
+
       return {
         ...state,
         config: saveMultiChanges(
@@ -175,14 +211,73 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
         )
       }
     }
+    case 'CLONE_VISUALIZATION': {
+      const { sourceWidgetKey, rowIdx, colIdx, entryIdx } = action.payload
+      const nextConfig = cloneDashboardWidget(state.config, sourceWidgetKey, { rowIdx, colIdx, entryIdx })
+
+      if (nextConfig === state.config) return state
+
+      const config = saveMultiChanges(nextConfig, state.config.activeDashboard)
+      const filteredData = getFilteredData({ ...state, config })
+
+      return {
+        ...state,
+        config,
+        filteredData
+      }
+    }
     case 'MOVE_VISUALIZATION': {
-      const { rowIdx, colIdx, widget } = action.payload
+      const { rowIdx, colIdx, entryIdx, widget } = action.payload
       const newRows = _.cloneDeep(state.config.rows)
-      newRows[widget.rowIdx].columns[widget.colIdx].widget = null
-      newRows[rowIdx].columns[colIdx].widget = widget.uid
+      const sourceColumn = newRows[widget.rowIdx].columns[widget.colIdx]
+      let widgetEntry
+
+      if (hasConditionalWidgets(sourceColumn)) {
+        widgetEntry =
+          widget.entryIdx !== undefined
+            ? sourceColumn.conditionalWidgets[widget.entryIdx]
+            : sourceColumn.conditionalWidgets.find(entry => entry.widget === widget.uid)
+      } else if (sourceColumn.widget === widget.uid) {
+        widgetEntry = { widget: widget.uid }
+      }
+
+      if (!widgetEntry) {
+        return state
+      }
+
+      if (hasConditionalWidgets(sourceColumn)) {
+        newRows[widget.rowIdx].columns[widget.colIdx] = normalizeConditionalColumn({
+          ...sourceColumn,
+          conditionalWidgets: sourceColumn.conditionalWidgets.filter((entry, index) => {
+            if (widget.entryIdx !== undefined) return index !== widget.entryIdx
+            return entry.widget !== widget.uid
+          })
+        })
+      } else {
+        newRows[widget.rowIdx].columns[widget.colIdx].widget = undefined
+      }
+
+      const targetColumn = newRows[rowIdx].columns[colIdx]
+      if (entryIdx !== undefined || hasConditionalWidgets(targetColumn)) {
+        const nextConditionalWidgets = [...(targetColumn.conditionalWidgets || [])]
+        const targetEntryIndex = entryIdx ?? nextConditionalWidgets.length
+        nextConditionalWidgets[targetEntryIndex] = widgetEntry
+        newRows[rowIdx].columns[colIdx] = normalizeConditionalColumn({
+          ...targetColumn,
+          widget: undefined,
+          conditionalWidgets: nextConditionalWidgets.filter(entry => !!entry?.widget)
+        })
+      } else {
+        newRows[rowIdx].columns[colIdx].widget = widgetEntry.widget
+      }
+
+      const nextConfig = saveMultiChanges({ ...state.config, rows: newRows }, state.config.activeDashboard)
+      const filteredData = getFilteredData({ ...state, config: nextConfig })
+
       return {
         ...state,
-        config: saveMultiChanges({ ...state.config, rows: newRows }, state.config.activeDashboard)
+        config: nextConfig,
+        filteredData
       }
     }
     case 'RESET_VISUALIZATION': {
@@ -219,7 +314,15 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
         }
         return row
       })
-      return { ...state, config: saveMultiChanges({ ...state.config, rows: newRows }, state.config.activeDashboard) }
+      const nextConfig = {
+        ...state.config,
+        rows: newRows
+      }
+
+      return {
+        ...state,
+        config: saveMultiChanges(nextConfig, state.config.activeDashboard)
+      }
     }
     case 'DELETE_WIDGET': {
       const { uid } = action.payload
@@ -237,20 +340,31 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
 
       const filteredRows = _.map(newRows, row => ({
         ...row,
-        columns: row.columns.map(column => (column.widget === uid ? _.omit(column, 'widget') : column))
+        columns: row.columns.map(column => {
+          if (hasConditionalWidgets(column)) {
+            return normalizeConditionalColumn({
+              ...column,
+              conditionalWidgets: column.conditionalWidgets.filter(entry => entry.widget !== uid)
+            })
+          }
+
+          return column.widget === uid ? _.omit(column, 'widget') : column
+        })
       }))
 
+      const nextConfig = {
+        ...state.config,
+        dashboard: {
+          ...state.config.dashboard,
+          sharedFilters: newSharedFilters
+        },
+        visualizations: newVisualizations,
+        rows: filteredRows
+      }
+
       return {
         ...state,
-        config: saveMultiChanges(
-          {
-            ...state.config,
-            dashboard: { ...state.config.dashboard, sharedFilters: newSharedFilters },
-            visualizations: newVisualizations,
-            rows: filteredRows
-          },
-          state.config.activeDashboard
-        )
+        config: saveMultiChanges(nextConfig, state.config.activeDashboard)
       }
     }
     case 'UPDATE_TOGGLE_NAME': {

package/src/test/CdcDashboard.test.jsx

@@ -1,11 +1,35 @@
 import path from 'node:path'
+import fs from 'node:fs'
+import vm from 'node:vm'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
+const extractMarkedExampleConfig = (content, label) => {
+  const match = content.match(
+    /<!-- README_EXAMPLE_CONFIG_START -->\s*```jsx\s*([\s\S]*?)\s*```\s*<!-- README_EXAMPLE_CONFIG_END -->/
+  )
+  expect(match, `${label} should contain a marked README example block`).toBeTruthy()
+  const configMatch = match[1].match(/const config = (\{[\s\S]*?\})\n\nfunction App\(\)/)
+  expect(configMatch, `${label} should define const config before function App()`).toBeTruthy()
+  return vm.runInNewContext(`(${configMatch[1]})`)
+}
+
 describe('Dashboard', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
     const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
+
+  it('keeps the minimal example in sync with the README docs', () => {
+    const pkgRoot = path.join(__dirname, '..', '..')
+    const minimalExamplePath = path.join(pkgRoot, 'examples', 'minimal-example.json')
+    const readmePath = path.join(pkgRoot, 'README.md')
+
+    const minimalExample = JSON.parse(fs.readFileSync(minimalExamplePath, 'utf8'))
+    const readmeBlock = extractMarkedExampleConfig(fs.readFileSync(readmePath, 'utf8'), 'README.md')
+
+    expect(readmeBlock).toEqual(minimalExample)
+    expect(minimalExample.version).toBeTruthy()
+  })
 })

package/src/test/CdcDashboard.test.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import CdcDashboard from '../CdcDashboard'
+
+vi.mock('resize-observer-polyfill', () => ({
+  default: vi.fn(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn()
+  }))
+}))
+
+const createDashboardConfig = () => ({
+  type: 'dashboard',
+  dashboard: {
+    theme: 'theme-blue',
+    titleStyle: 'small',
+    sharedFilters: [
+      {
+        key: 'Year',
+        showDropdown: true,
+        values: ['2024', '2025'],
+        orderedValues: ['2024', '2025'],
+        type: 'datafilter',
+        filterStyle: 'dropdown',
+        columnName: 'year',
+        defaultValue: '2025',
+        active: '2025',
+        usedBy: ['waffle']
+      }
+    ]
+  },
+  rows: [{ columns: [{ width: 12, widget: 'filters' }] }, { columns: [{ width: 12, widget: 'waffle' }] }],
+  visualizations: {
+    filters: {
+      type: 'dashboardFilters',
+      visualizationType: 'dashboardFilters',
+      filterBehavior: 'Filter Change',
+      sharedFilterIndexes: [0],
+      uid: 'filters'
+    },
+    waffle: {
+      type: 'waffle-chart',
+      uid: 'waffle',
+      title: 'Year Waffle',
+      showTitle: false,
+      visualizationType: 'Waffle',
+      visualizationSubType: 'linear',
+      showPercent: false,
+      showDenominator: false,
+      valueDescription: 'out of 100',
+      content: 'during {{year}}',
+      subtext: '',
+      orientation: 'horizontal',
+      filters: [],
+      fontSize: '',
+      overallFontSize: 'medium',
+      dataColumn: 'value',
+      dataFunction: 'Max',
+      dataConditionalColumn: '',
+      dataConditionalOperator: '',
+      dataConditionalComparate: '',
+      invalidComparate: false,
+      customDenom: false,
+      dataDenom: '100',
+      dataDenomColumn: '',
+      dataDenomFunction: '',
+      suffix: '',
+      roundToPlace: '0',
+      shape: 'circle',
+      nodeWidth: '10',
+      nodeSpacer: '2',
+      theme: 'theme-blue',
+      gauge: {
+        height: 35,
+        width: '100%'
+      },
+      visual: {
+        border: true,
+        accent: false,
+        background: false,
+        useWrap: false,
+        hideBackgroundColor: false,
+        borderColorTheme: false,
+        colors: {
+          'theme-blue': '#005eaa'
+        }
+      },
+      markupVariables: [
+        {
+          sourceType: 'column',
+          name: 'year',
+          tag: '{{year}}',
+          columnName: 'year',
+          conditions: [],
+          addCommas: false,
+          hideOnNull: false,
+          outputType: 'value'
+        }
+      ],
+      enableMarkupVariables: true,
+      filterBehavior: 'Filter Change',
+      dataKey: 'waffle-data.json',
+      version: '4.26.4-1'
+    }
+  },
+  datasets: {
+    'waffle-data.json': {
+      data: [
+        { year: '2024', value: 24 },
+        { year: '2025', value: 25 }
+      ]
+    }
+  },
+  table: {
+    show: false
+  }
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+})
+
+describe('CdcDashboard', () => {
+  it('updates waffle chart markup when a dashboard loaded through configUrl changes data filters', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      json: vi.fn().mockResolvedValue(createDashboardConfig())
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    render(<CdcDashboard configUrl='/dashboard-with-waffle.json' interactionLabel='dashboard-test' />)
+
+    await waitFor(() => {
+      expect(screen.getByText(/during 2025/)).toBeInTheDocument()
+    })
+
+    await userEvent.selectOptions(screen.getByLabelText('Year'), '2024')
+
+    await waitFor(() => {
+      expect(screen.getByText(/during 2024/)).toBeInTheDocument()
+    })
+
+    expect(screen.queryByText(/during 2025/)).not.toBeInTheDocument()
+  })
+})