@cdc/dashboard 4.25.5-1 → 4.25.6-1

package/src/helpers/getVizConfig.ts

@@ -1,80 +1,93 @@
-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 { filterData } from './filterData'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+
+const transform = new DataTransform()
+
+export const getFootnotesVizConfig = (vizConfig: AnyVisualization, config: MultiDashboardConfig) => {
+  if (!vizConfig?.footnotes) return vizConfig
+
+  const data = config.datasets[vizConfig.footnotes.dataKey]?.data ?? []
+
+  const filters = config?.dashboard?.sharedFilters
+  if (filters.length === 0) return vizConfig
+  vizConfig.footnotes.data = filters.length ? filterData(filters, data) : data
+
+  return vizConfig
+}
+
+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) {
+    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.footnotes) {
+    const visConfigWithFootnotes = getFootnotesVizConfig(visualizationConfig, 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)
+      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

@@ -1,64 +1,61 @@
-import type { DashboardConfig as Config } from '../types/DashboardConfig'
-import { type Action } from '@cdc/core/types/Action'
-import { Tab } from '../types/Tab'
-import { ConfigRow } from '../types/ConfigRow'
-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 }>
-type MOVE_VISUALIZATION = Action<
-  'MOVE_VISUALIZATION',
-  { rowIdx: number; colIdx: number; widget: AnyVisualization & { rowIdx: number; colIdx: number } }
->
-type SET_CONFIG = Action<'SET_CONFIG', Partial<Config> & { activeDashboard?: number }>
-type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
-type SET_DATA = Action<'SET_DATA', Record<string, any[]>>
-type SET_LOADING = Action<'SET_LOADING', boolean>
-type SET_PREVIEW = Action<'SET_PREVIEW', boolean>
-type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', Object>
-type SET_SHARED_FILTERS = Action<'SET_SHARED_FILTERS', SharedFilter[]>
-type SET_TAB_SELECTED = Action<'SET_TAB_SELECTED', Tab>
-type RENAME_DASHBOARD_TAB = Action<'RENAME_DASHBOARD_TAB', { current: string; new: string }>
-type INITIALIZE_MULTIDASHBOARDS = Action<'INITIALIZE_MULTIDASHBOARDS', undefined>
-type REMOVE_MULTIDASHBOARD_AT_INDEX = Action<'REMOVE_MULTIDASHBOARD_AT_INDEX', number>
-type REORDER_MULTIDASHBOARDS = Action<'REORDER_MULTIDASHBOARDS', { currentIndex: number; newIndex: number }>
-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
-  | DELETE_WIDGET
-  | MOVE_VISUALIZATION
-  | SET_CONFIG
-  | UPDATE_CONFIG
-  | REMOVE_MULTIDASHBOARD_AT_INDEX
-  | RENAME_DASHBOARD_TAB
-  | REORDER_MULTIDASHBOARDS
-  | SAVE_CURRENT_CHANGES
-  | SET_DATA
-  | SET_LOADING
-  | SET_PREVIEW
-  | SET_FILTERED_DATA
-  | SET_SHARED_FILTERS
-  | SET_TAB_SELECTED
-  | SWITCH_CONFIG
-  | INITIALIZE_MULTIDASHBOARDS
-  | TOGGLE_ROW
-  | RESET_VISUALIZATION
-  | UPDATE_VISUALIZATION
-  | UPDATE_ROW
-  | UPDATE_TOGGLE_NAME
-export default DashboardActions
+import type { DashboardConfig as Config } from '../types/DashboardConfig'
+import { type Action } from '@cdc/core/types/Action'
+import { Tab } from '../types/Tab'
+import { ConfigRow } from '../types/ConfigRow'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { SharedFilter } from '../types/SharedFilter'
+
+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 }>
+type MOVE_VISUALIZATION = Action<
+  'MOVE_VISUALIZATION',
+  { rowIdx: number; colIdx: number; widget: AnyVisualization & { rowIdx: number; colIdx: number } }
+>
+type SET_CONFIG = Action<'SET_CONFIG', Partial<Config> & { activeDashboard?: number }>
+type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
+type SET_DATA = Action<'SET_DATA', Record<string, any[]>>
+type SET_LOADING = Action<'SET_LOADING', boolean>
+type SET_PREVIEW = Action<'SET_PREVIEW', boolean>
+type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', Object>
+type SET_SHARED_FILTERS = Action<'SET_SHARED_FILTERS', SharedFilter[]>
+type SET_TAB_SELECTED = Action<'SET_TAB_SELECTED', Tab>
+type RENAME_DASHBOARD_TAB = Action<'RENAME_DASHBOARD_TAB', { current: string; new: string }>
+type INITIALIZE_MULTIDASHBOARDS = Action<'INITIALIZE_MULTIDASHBOARDS', undefined>
+type REMOVE_MULTIDASHBOARD_AT_INDEX = Action<'REMOVE_MULTIDASHBOARD_AT_INDEX', number>
+type REORDER_MULTIDASHBOARDS = Action<'REORDER_MULTIDASHBOARDS', { currentIndex: number; newIndex: number }>
+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_VISUALIZATION
+  | APPLY_CONFIG
+  | ADD_NEW_DASHBOARD
+  | DELETE_WIDGET
+  | MOVE_VISUALIZATION
+  | SET_CONFIG
+  | UPDATE_CONFIG
+  | REMOVE_MULTIDASHBOARD_AT_INDEX
+  | RENAME_DASHBOARD_TAB
+  | REORDER_MULTIDASHBOARDS
+  | SAVE_CURRENT_CHANGES
+  | SET_DATA
+  | SET_LOADING
+  | SET_PREVIEW
+  | SET_FILTERED_DATA
+  | SET_SHARED_FILTERS
+  | SET_TAB_SELECTED
+  | SWITCH_CONFIG
+  | INITIALIZE_MULTIDASHBOARDS
+  | TOGGLE_ROW
+  | RESET_VISUALIZATION
+  | UPDATE_VISUALIZATION
+  | UPDATE_ROW
+  | UPDATE_TOGGLE_NAME
+export default DashboardActions

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.
-}