@cdc/dashboard 4.25.3 → 4.25.6

package/src/helpers/getVizConfig.ts

@@ -1,80 +1,108 @@
-import _ from 'lodash'
-import { MultiDashboardConfig } from '../types/MultiDashboard'
-import DataTransform from '@cdc/core/helpers/DataTransform'
-import { getApplicableFilters } from './getFilteredData'
-import { filterData } from './filterData'
-import Footnotes from '@cdc/core/types/Footnotes'
-
-const transform = new DataTransform()
-
-export const getFootnotesVizConfig = (vizKey: string, rowNumber: number, config: MultiDashboardConfig) => {
-  const visualizationConfig = _.cloneDeep(config.visualizations[vizKey])
-
-  const data = config.datasets[visualizationConfig.dataKey]?.data
-  const dataColumns = data?.length ? Object.keys(data[0]) : []
-  const filters = (getApplicableFilters(config.dashboard, rowNumber) || []).filter(filter =>
-    dataColumns.includes(filter.columnName)
-  )
-  if (filters.length) {
-    visualizationConfig.formattedData = filterData(filters, data)
-  }
-  visualizationConfig.data = data
-  return visualizationConfig as Footnotes
-}
-
-export const getVizConfig = (
-  visualizationKey: string,
-  rowNumber: number,
-  config: MultiDashboardConfig,
-  data: Object,
-  filteredData?: Object
-) => {
-  if (rowNumber === undefined) return {}
-  const visualizationConfig = _.cloneDeep(config.visualizations[visualizationKey])
-  const rowData = config.rows[rowNumber]
-  if (rowData.footnotesId && rowData.footnotesId === visualizationKey) {
-    // return the footnotes visualization config with filtered data
-    return getFootnotesVizConfig(visualizationKey, rowNumber, config)
-  }
-  if (rowData?.dataKey) {
-    // data configured on the row
-    Object.assign(visualizationConfig, _.pick(rowData, ['dataKey', 'dataDescription', 'formattedData', 'data']))
-  }
-
-  if (visualizationConfig.table && config.dashboard.sharedFilters.length) {
-    // Download CSV button needs to know to include shared filter columns
-    const sharedFilterColumns = config.dashboard.sharedFilters.reduce((acc, filter) => {
-      if (!filter.usedBy?.length || filter.usedBy?.includes(visualizationKey)) {
-        const apiFilter = filter.apiFilter
-        const colName = apiFilter?.textSelector || apiFilter?.valueSelector || filter.columnName
-        acc.push(colName)
-        const subGrouping =
-          apiFilter?.subgroupTextSelector || apiFilter?.subgroupValueSelector || filter.subGrouping?.columnName
-        if (subGrouping) {
-          acc.push(subGrouping)
-        }
-      }
-      return acc
-    }, [])
-    visualizationConfig.table.sharedFilterColumns = sharedFilterColumns
-  }
-
-  if (visualizationConfig.formattedData) visualizationConfig.originalFormattedData = visualizationConfig.formattedData
-  const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
-
-  if (filteredVizData) {
-    visualizationConfig.data = filteredVizData || []
-    if (visualizationConfig.formattedData) {
-      visualizationConfig.formattedData = visualizationConfig.data
-    }
-  } else {
-    const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-    visualizationConfig.data = data[dataKey] || []
-    if (visualizationConfig.formattedData) {
-      visualizationConfig.formattedData =
-        transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) ||
-        visualizationConfig.data
-    }
-  }
-  return visualizationConfig
-}
+import _ from 'lodash'
+import { MultiDashboardConfig } from '../types/MultiDashboard'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import { getApplicableFilters } from './getFilteredData'
+import { filterData } from './filterData'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+
+const transform = new DataTransform()
+
+export const getFootnotesVizConfig = (
+  visualizationConfig: AnyVisualization,
+  rowNumber: number,
+  config: MultiDashboardConfig
+) => {
+  if (!visualizationConfig?.footnotes) return visualizationConfig
+  const data = _.cloneDeep(config.datasets[visualizationConfig.footnotes.dataKey]?.data)
+  const dataColumns = data?.length ? Object.keys(data[0]) : []
+  const filters = (getApplicableFilters(config.dashboard, rowNumber) || []).filter(filter =>
+    dataColumns.includes(filter.columnName)
+  )
+
+  const newConfig = _.cloneDeep(visualizationConfig)
+
+  if (filters.length) {
+    _.set(newConfig, 'footnotes.data', filterData(filters, data))
+  } else {
+    _.set(newConfig, 'footnotes.data', data)
+  }
+
+  return newConfig
+}
+
+export const getVizConfig = (
+  visualizationKey: string,
+  rowNumber: number,
+  config: MultiDashboardConfig,
+  data: Object,
+  filteredData?: Object,
+  filteredDataOverride?: Object[],
+  multiVizColumn?: string
+): AnyVisualization => {
+  if (rowNumber === undefined) return {} as AnyVisualization
+  const visualizationConfig = _.cloneDeep(config.visualizations[visualizationKey])
+  const rowData = config.rows[rowNumber]
+  if (visualizationConfig.footnotes?.dataKey) {
+    _.set(visualizationConfig, 'footnotes.data', config.datasets[visualizationConfig.footnotes.dataKey]?.data)
+  }
+  if (rowData?.dataKey) {
+    // data configured on the row
+    Object.assign(visualizationConfig, _.pick(rowData, ['dataKey', 'dataDescription', 'formattedData', 'data']))
+  }
+
+  if (visualizationConfig.table && config.dashboard.sharedFilters.length) {
+    // Download CSV button needs to know to include shared filter columns
+    const sharedFilterColumns = config.dashboard.sharedFilters.reduce((acc, filter) => {
+      if (!filter.usedBy?.length || filter.usedBy?.includes(visualizationKey)) {
+        const apiFilter = filter.apiFilter
+        const colName = apiFilter?.textSelector || apiFilter?.valueSelector || filter.columnName
+        acc.push(colName)
+        const subGrouping =
+          apiFilter?.subgroupTextSelector || apiFilter?.subgroupValueSelector || filter.subGrouping?.columnName
+        if (subGrouping) {
+          acc.push(subGrouping)
+        }
+      }
+      return acc
+    }, [])
+    visualizationConfig.table.sharedFilterColumns = sharedFilterColumns
+  }
+
+  if (visualizationConfig.formattedData) visualizationConfig.originalFormattedData = visualizationConfig.formattedData
+  const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
+
+  if (filteredVizData) {
+    visualizationConfig.data = filteredVizData || []
+    if (visualizationConfig.formattedData) {
+      visualizationConfig.formattedData = visualizationConfig.data
+    }
+  } else {
+    const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
+    visualizationConfig.data = data[dataKey] || []
+    if (visualizationConfig.formattedData) {
+      visualizationConfig.formattedData =
+        transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) ||
+        visualizationConfig.data
+    }
+  }
+
+  if (filteredDataOverride) {
+    visualizationConfig.data = filteredDataOverride
+    if (visualizationConfig.formattedData) {
+      visualizationConfig.formattedData = filteredDataOverride
+    }
+  }
+  if (visualizationConfig.footnotes) {
+    const visConfigWithFootnotes = getFootnotesVizConfig(visualizationConfig, rowNumber, config)
+    if (multiVizColumn && filteredDataOverride) {
+      const vizCategory = filteredDataOverride[0][multiVizColumn]
+      // the multiViz filtering filtering is applied after the dashboard filters
+
+      const categoryFootnote = visConfigWithFootnotes.footnotes.data.filter(d => d[multiVizColumn] === vizCategory)
+      _.set(visConfigWithFootnotes, 'footnotes.data', categoryFootnote)
+    }
+    return visConfigWithFootnotes
+  }
+
+  return visualizationConfig as AnyVisualization
+}

package/src/helpers/getVizRowColumnLocator.ts

@@ -6,6 +6,5 @@ export const getVizRowColumnLocator = (rows: ConfigRow[]): Record<string, { row:
     curr.columns?.forEach((column, columnIndex) => {
       if (column.widget !== undefined) acc[column.widget] = { row: index, column: columnIndex }
     })
-    if (curr.footnotesId) acc[curr.footnotesId] = { row: index, column: 0 }
     return acc
   }, {})

package/src/helpers/reloadURLHelpers.ts

@@ -5,6 +5,7 @@ import { AnyVisualization, Visualization } from '@cdc/core/types/Visualization'
 import _ from 'lodash'
 import { DashboardConfig } from '../types/DashboardConfig'
 import { ConfigRow } from '../types/ConfigRow'
+import { getVizRowColumnLocator } from './getVizRowColumnLocator'
 
 export const isUpdateNeeded = (
   filters: SharedFilter[],
@@ -30,8 +31,11 @@ type GetDatasetKeysParams = Pick<DashboardConfig, 'visualizations' | 'datasets'
 export const getDatasetKeys = ({ visualizations, datasets, rows }: GetDatasetKeysParams): string[] => {
   const vizDataKeys = Object.values(visualizations).map(viz => viz.dataKey)
   const rowDataKeys = rows.map(row => row.dataKey)
+  const footnoteDataKeys = Object.values(visualizations)
+    .map(viz => viz.footnotes?.dataKey)
+    .filter(Boolean)
   // ensure to only load datasets for the specific dashboard tab.
-  const datasetsUsedByDashboard = _.uniq([...vizDataKeys, ...rowDataKeys])
+  const datasetsUsedByDashboard = _.uniq([...vizDataKeys, ...rowDataKeys, ...footnoteDataKeys])
   return Object.keys(datasets).filter(datasetKey => datasetsUsedByDashboard.includes(datasetKey))
 }
 
@@ -110,10 +114,11 @@ export const filterUsedByDataUrl = (
 ) => {
   if (!filter.usedBy || !filter.usedBy.length) return true
   const vizUsingFilters = filter.usedBy?.map(vizOrRowKey => visualizations[vizOrRowKey] || rows[vizOrRowKey])
-  // push any footnotes which are using the filter also
-  filter.usedBy?.forEach(vizOrRowKey => {
-    if (rows[vizOrRowKey] && rows[vizOrRowKey].footnotesId)
-      return vizUsingFilters.push(visualizations[rows[vizOrRowKey].footnotesId])
+
+  return vizUsingFilters?.some(viz => {
+    const usedByViz = viz?.dataKey === datasetKey
+    // datasetKey might be a key to a dynamic footnotes URL
+    const usedByVizFootnote = viz?.footnotes?.dataKey === datasetKey
+    return usedByViz || usedByVizFootnote
   })
-  return vizUsingFilters?.some(viz => viz?.dataKey === datasetKey)
 }

package/src/helpers/shouldLoadAllFilters.ts

@@ -1,30 +1,30 @@
-import { getQueryParam } from '@cdc/core/helpers/queryStringUtils'
-import { Visualization } from '@cdc/core/types/Visualization'
-
-export const shouldLoadAllFilters = (config, isEditorPanel): boolean => {
-  const autoLoad = Boolean(getQueryParam('cove-auto-load'))
-  const activeConfig = config.multiDashboards ? config.multiDashboards[config.activeDashboard] : config
-  const hasFilterByFileNameFunctionality = activeConfig.dashboard.sharedFilters?.some(
-    filter => filter.filterBy === 'File Name'
-  )
-  const isAutoLoadTab = Object.values(activeConfig.visualizations).reduce((acc, viz: Visualization) => {
-    if (acc === false) return acc
-    if (viz.visualizationType === 'dashboardFilters') {
-      if (viz.filterBehavior === 'Apply Button') return false
-      if (viz.autoLoad) {
-        return true
-      }
-    }
-    return acc
-  }, undefined)
-  if (autoLoad || isAutoLoadTab || hasFilterByFileNameFunctionality || isEditorPanel) {
-    const rowDataSetKeys = activeConfig.rows.map(row => row.dataKey).filter(Boolean)
-    const dataKeys = Object.values(activeConfig.visualizations)
-      .map((visualization: Visualization) => visualization.dataKey)
-      .filter(Boolean)
-      .concat(rowDataSetKeys)
-    const missingData = dataKeys.find(dataset => !config.datasets[dataset].data?.length)
-    return Boolean(missingData)
-  }
-  return false
-}
+import { getQueryParam } from '@cdc/core/helpers/queryStringUtils'
+import { Visualization } from '@cdc/core/types/Visualization'
+
+export const shouldLoadAllFilters = (config, isEditorPanel): boolean => {
+  const autoLoad = Boolean(getQueryParam('cove-auto-load'))
+  const activeConfig = config.multiDashboards ? config.multiDashboards[config.activeDashboard] : config
+  const hasFilterByFileNameFunctionality = activeConfig.dashboard.sharedFilters?.some(
+    filter => filter.filterBy === 'File Name'
+  )
+  const isAutoLoadTab = Object.values(activeConfig.visualizations).reduce((acc, viz: Visualization) => {
+    if (acc === false) return acc
+    if (viz.visualizationType === 'dashboardFilters') {
+      if (viz.filterBehavior === 'Apply Button') return false
+      if (viz.autoLoad) {
+        return true
+      }
+    }
+    return acc
+  }, undefined)
+  if (autoLoad || isAutoLoadTab || hasFilterByFileNameFunctionality || isEditorPanel) {
+    const rowDataSetKeys = activeConfig.rows.map(row => row.dataKey).filter(Boolean)
+    const dataKeys = Object.values(activeConfig.visualizations)
+      .map((visualization: Visualization) => visualization.dataKey)
+      .filter(Boolean)
+      .concat(rowDataSetKeys)
+    const missingData = dataKeys.find(dataset => !config.datasets[dataset]?.data?.length)
+    return Boolean(missingData)
+  }
+  return false
+}

package/src/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import MultiDashboardWrapper from './CdcDashboard'
 import '@cdc/core/styles/cove-main.scss'
 import './coreStyles_dashboard.scss'
 
+import MultiDashboardWrapper from './CdcDashboard'
+
 let isEditor = window.location.href.includes('editor=true')
 let isDebug = window.location.href.includes('debug=true')
 

package/src/scss/main.scss

@@ -121,11 +121,6 @@
     }
   }
 
-  .visually-hidden {
-    position: fixed;
-    left: -10000px;
-  }
-
   .loader {
     width: 100%;
     text-align: center;

package/src/store/dashboard.actions.ts

@@ -6,7 +6,6 @@ import { AnyVisualization } from '@cdc/core/types/Visualization'
 import Footnotes from '@cdc/core/types/Footnotes'
 import { SharedFilter } from '../types/SharedFilter'
 
-type ADD_FOOTNOTE = Action<'ADD_FOOTNOTE', { id: string; rowIndex: number; config: Footnotes }>
 type ADD_VISUALIZATION = Action<'ADD_VISUALIZATION', { rowIdx: number; colIdx: number; newViz: AnyVisualization }>
 type APPLY_CONFIG = Action<'APPLY_CONFIG', [Config, Object?]>
 type DELETE_WIDGET = Action<'DELETE_WIDGET', { uid: string }>
@@ -30,12 +29,12 @@ type ADD_NEW_DASHBOARD = Action<'ADD_NEW_DASHBOARD', undefined>
 type SAVE_CURRENT_CHANGES = Action<'SAVE_CURRENT_CHANGES', undefined>
 type SWITCH_CONFIG = Action<'SWITCH_CONFIG', number>
 type TOGGLE_ROW = Action<'TOGGLE_ROW', { rowIndex: number; colIndex: number }>
+type RESET_VISUALIZATION = Action<'RESET_VISUALIZATION', { vizKey: string }>
 type UPDATE_VISUALIZATION = Action<'UPDATE_VISUALIZATION', { vizKey: string; configureData: Partial<AnyVisualization> }>
 type UPDATE_ROW = Action<'UPDATE_ROW', { rowIndex: number; rowData: Partial<ConfigRow> }>
 type UPDATE_TOGGLE_NAME = Action<'UPDATE_TOGGLE_NAME', { rowIndex: number; columnIndex: number; toggleName: string }>
 
 type DashboardActions =
-  | ADD_FOOTNOTE
   | ADD_VISUALIZATION
   | APPLY_CONFIG
   | ADD_NEW_DASHBOARD
@@ -56,6 +55,7 @@ type DashboardActions =
   | SWITCH_CONFIG
   | INITIALIZE_MULTIDASHBOARDS
   | TOGGLE_ROW
+  | RESET_VISUALIZATION
   | UPDATE_VISUALIZATION
   | UPDATE_ROW
   | UPDATE_TOGGLE_NAME

package/src/store/dashboard.reducer.ts

@@ -39,17 +39,6 @@ export type DashboardState = {
 
 const reducer = (state: DashboardState, action: DashboardActions): DashboardState => {
   switch (action.type) {
-    case 'ADD_FOOTNOTE': {
-      const { id, rowIndex, config } = action.payload
-      const newRows = state.config.rows.map((row, i) => (i === rowIndex ? { ...row, footnotesId: id } : row))
-      return {
-        ...state,
-        config: saveMultiChanges(
-          { ...state.config, rows: newRows, visualizations: { ...state.config.visualizations, [id]: config } },
-          state.config.activeDashboard
-        )
-      }
-    }
     case 'ADD_NEW_DASHBOARD': {
       const currentMultiDashboards = state.config.multiDashboards
       const label = 'New Dashboard ' + (currentMultiDashboards.length + 1)
@@ -195,6 +184,21 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
         config: saveMultiChanges({ ...state.config, rows: newRows }, state.config.activeDashboard)
       }
     }
+    case 'RESET_VISUALIZATION': {
+      const { vizKey } = action.payload
+      const updatedViz = { ...state.config.visualizations[vizKey] } as AnyVisualization
+      delete updatedViz.data
+      delete updatedViz.dataKey
+      delete updatedViz.dataDescription
+      delete updatedViz.formattedData
+      return {
+        ...state,
+        config: saveMultiChanges(
+          { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: updatedViz } },
+          state.config.activeDashboard
+        )
+      }
+    }
     case 'UPDATE_VISUALIZATION': {
       const { vizKey, configureData } = action.payload
       const updatedViz = { ...state.config.visualizations[vizKey], ...configureData } as AnyVisualization

package/src/types/ConfigRow.ts

@@ -16,5 +16,4 @@ export type ConfigRow = {
   toggle?: boolean
   equalHeight?: boolean
   multiVizColumn?: string
-  footnotesId?: string // id for the footnotes in the vizConfig section
 } & ConfigureData

package/src/types/Dashboard.ts

@@ -1,4 +1,4 @@
-import { DataSet } from './DataSet'
+import { DataSet } from '@cdc/core/types/DataSet'
 import { SharedFilter } from './SharedFilter'
 
 export type Dashboard = {

package/src/types/DashboardConfig.ts

@@ -1,6 +1,6 @@
 import { Series } from '@cdc/core/types/Series'
 import { Runtime } from '@cdc/core/types/Runtime'
-import { DataSet } from './DataSet'
+import { DataSet } from '@cdc/core/types/DataSet'
 import { ConfigRow } from './ConfigRow'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { Table } from '@cdc/core/types/Table'

package/src/types/SharedFilter.ts

@@ -22,6 +22,8 @@ export type SharedFilter = FilterBase & {
   datasetKey?: string
   subGrouping: SubGrouping
   tier?: number
+  // value to use when the filter loads
+  defaultValue?: string
   /**
    * How to format the end file name when filter.filterBy is set to "File Name"
    *