@cdc/dashboard 4.25.5-1 → 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

@@ -31,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))
 }
 
@@ -111,17 +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
-  const vizRowLookup = getVizRowColumnLocator(rows) // ensure we have the footnotesId in the rows
-  filter.usedBy?.forEach(vizOrRowKey => {
-    const vizLookup = vizRowLookup[vizOrRowKey] // if found vizOrRowKey is a viz key
-    const row = rows[vizLookup?.row || vizOrRowKey]
-    if (row?.footnotesId) {
-      // if the widget is using the filter and the widget is on this row and the row has a footnoteId
-      // then the footnote's endpoint should be filtered by the filter
-      vizUsingFilters.push(visualizations[row.footnotesId])
-    }
-  })
 
-  return vizUsingFilters?.some(viz => viz?.dataKey === datasetKey)
+  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
+  })
 }

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 }>
@@ -36,7 +35,6 @@ type UPDATE_ROW = Action<'UPDATE_ROW', { rowIndex: number; rowData: Partial<Conf
 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

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)

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/DataSet.ts

@@ -1,12 +0,0 @@
-import { ConfigureData } from '@cdc/core/types/ConfigureData'
-
-export type DataSet = ConfigureData & {
-  dataFileFormat?: string
-  dataFileName?: string
-  dataFileSize?: number
-  preview?: boolean
-  dataUrl: string
-  runtimeDataUrl: string
-  dataFileSourceType: string
-  loadQueryParam?: string // fetched from the browser's query string and appended to the dataUrl on load.
-}