@cdc/dashboard 4.24.5 → 4.24.7

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -0,0 +1,116 @@
+import { useContext, useState } from 'react'
+import type { AnyVisualization } from '@cdc/core/types/Visualization'
+import Widget from '../Widget'
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
+import { Table } from '@cdc/core/types/Table'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import { mapDataToConfig } from '../../helpers/mapDataToConfig'
+import './visualizations-panel-styles.css'
+
+const addVisualization = (type, subType) => {
+  const modalWillOpen = type !== 'markup-include'
+  const newVisualizationConfig: Partial<AnyVisualization> = {
+    filters: [],
+    filterBehavior: 'Filter Change',
+    newViz: type !== 'table',
+    openModal: modalWillOpen,
+    uid: type + Date.now(),
+    type
+  }
+
+  switch (type) {
+    case 'chart':
+      newVisualizationConfig.visualizationType = subType
+      break
+    case 'map':
+      newVisualizationConfig.general = {}
+      newVisualizationConfig.general.geoType = subType
+      break
+    case 'data-bite' || 'waffle-chart' || 'filtered-text':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'table':
+      const tableConfig: Table = { label: 'Data Table', show: true, showDownloadUrl: false, showVertical: true, expanded: true, collapsible: true }
+      newVisualizationConfig.table = tableConfig
+      newVisualizationConfig.columns = {}
+      newVisualizationConfig.dataFormat = {}
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'markup-include':
+      newVisualizationConfig.contentEditor = {
+        inlineHTML: '<h2>Inline HTML</h2>',
+        markupVariables: [],
+        showHeader: true,
+        srcUrl: '#example',
+        title: 'Markup Include',
+        useInlineHTML: true
+      }
+      newVisualizationConfig.theme = 'theme-blue'
+      newVisualizationConfig.visual = {
+        border: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false,
+        borderColorTheme: false
+      }
+      newVisualizationConfig.showEditorPanel = true
+      newVisualizationConfig.visualizationType = type
+
+      break
+    case 'dashboardFilters': {
+      newVisualizationConfig.sharedFilterIndexes = []
+      newVisualizationConfig.visualizationType = type
+      break
+    }
+    default:
+      newVisualizationConfig.visualizationType = type
+      break
+  }
+
+  return newVisualizationConfig
+}
+
+const VisualizationsPanel = () => {
+  const [advancedEditing, setAdvancedEditing] = useState(false)
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const loadConfig = newConfig => dispatch({ type: 'APPLY_CONFIG', payload: [mapDataToConfig(newConfig)] })
+  return (
+    <div className={`visualizations-panel${advancedEditing ? ' advanced-editor' : ''}`}>
+      <p style={{ fontSize: '14px' }}>Click and drag an item onto the grid to add it to your dashboard.</p>
+      <span className='subheading-3'>Chart</span>
+      <div className='drag-grid'>
+        <Widget addVisualization={() => addVisualization('chart', 'Bar')} type='Bar' />
+        <Widget addVisualization={() => addVisualization('chart', 'Line')} type='Line' />
+        <Widget addVisualization={() => addVisualization('chart', 'Pie')} type='Pie' />
+        <Widget addVisualization={() => addVisualization('chart', 'Sankey')} type='Sankey' />
+      </div>
+      <span className='subheading-3'>Map</span>
+      <div className='drag-grid'>
+        <Widget addVisualization={() => addVisualization('map', 'us')} type='us' />
+        <Widget addVisualization={() => addVisualization('map', 'world')} type='world' />
+        <Widget addVisualization={() => addVisualization('map', 'single-state')} type='single-state' />
+      </div>
+      <span className='subheading-3'>Misc.</span>
+      <div className='drag-grid'>
+        <Widget addVisualization={() => addVisualization('data-bite', '')} type='data-bite' />
+        <Widget addVisualization={() => addVisualization('waffle-chart', '')} type='waffle-chart' />
+        <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
+        <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
+        <Widget addVisualization={() => addVisualization('dashboardFilters', '')} type='dashboardFilters' />
+        <Widget addVisualization={() => addVisualization('table', '')} type='table' />
+      </div>
+      <span className='subheading-3'>Advanced</span>
+      <AdvancedEditor
+        loadConfig={loadConfig}
+        config={config}
+        convertStateToConfig={() => undefined}
+        onExpandCollapse={() => {
+          setAdvancedEditing(!advancedEditing)
+        }}
+      />
+    </div>
+  )
+}
+
+export default VisualizationsPanel

package/src/components/VisualizationsPanel/index.ts

@@ -0,0 +1 @@
+export { default } from './VisualizationsPanel'

package/src/components/VisualizationsPanel/visualizations-panel-styles.css

@@ -0,0 +1,12 @@
+.visualizations-panel {
+  background-color: #fff;
+  padding: 1em;
+  width: var(--editorWidth);
+  border-right: #c7c7c7 1px solid;
+  z-index: 1;
+  overflow-y: scroll;
+
+  &.advanced-editor {
+    width: 50vw;
+  }
+}

package/src/components/Widget.tsx

@@ -6,8 +6,7 @@ import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import Icon from '@cdc/core/components/ui/Icon'
-import Modal from '@cdc/core/components/ui/Modal'
-import { Visualization } from '@cdc/core/types/Visualization'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { iconHash } from '../helpers/iconHash'
 import _ from 'lodash'
 import { DataDesignerModal } from './DataDesignerModal'
@@ -25,19 +24,19 @@ const labelHash = {
   world: 'World',
   'single-state': 'U.S. State',
   'filtered-text': 'Filtered Text',
-  'filter-dropdowns': 'Filter Dropdowns',
+  dashboardFilters: 'Filter Dropdowns',
   Sankey: 'Sankey Chart',
   table: 'Table'
 }
 
-type WidgetData = Visualization & { rowIdx: number; colIdx: number }
+type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number }
 type WidgetProps = {
-  data?: WidgetData
+  widgetConfig?: WidgetConfig
   addVisualization?: Function
   type: string
 }
 
-const Widget = ({ data, addVisualization, type }: WidgetProps) => {
+const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
   const { overlay } = useGlobalContext()
   const { config } = useContext(DashboardContext)
   const rows = config.rows
@@ -54,10 +53,10 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
 
     const { rowIdx, colIdx } = result
 
-    if (undefined !== data?.rowIdx) {
-      rows[data.rowIdx].columns[data.colIdx].widget = null // Wipe from old position
+    if (undefined !== widgetConfig?.rowIdx) {
+      rows[widgetConfig.rowIdx].columns[widgetConfig.colIdx].widget = null // Wipe from old position
 
-      rows[rowIdx].columns[colIdx].widget = data.uid // Add to new row and col
+      rows[rowIdx].columns[colIdx].widget = widgetConfig.uid // Add to new row and col
     } else if (!!addVisualization) {
       // Item does not exist, instantiate a new one
       const newViz = addVisualization()
@@ -76,19 +75,19 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
         isDragging: monitor.isDragging()
       })
     },
-    [config.activeDashboard, config.rows]
+    [config.activeDashboard, config.rows, config.dashboard.sharedFilters]
   )
 
   const deleteWidget = () => {
-    if (!data) return
-    rows[data.rowIdx].columns[data.colIdx].widget = null
+    if (!widgetConfig) return
+    rows[widgetConfig.rowIdx].columns[widgetConfig.colIdx].widget = null
 
-    delete visualizations[data.uid]
+    delete visualizations[widgetConfig.uid]
 
     if (config.dashboard.sharedFilters && config.dashboard.sharedFilters.length > 0) {
       config.dashboard.sharedFilters.forEach(sharedFilter => {
-        if (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(data.uid) !== -1) {
-          sharedFilter.usedBy.splice(sharedFilter.usedBy.indexOf(data.uid), 1)
+        if (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(widgetConfig.uid) !== -1) {
+          sharedFilter.usedBy.splice(sharedFilter.usedBy.indexOf(widgetConfig.uid), 1)
         }
       })
     }
@@ -97,99 +96,36 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
   }
 
   const editWidget = () => {
-    if (!data) return
-    visualizations[data.uid].editing = true
+    if (!widgetConfig) return
+    visualizations[widgetConfig.uid].editing = true
 
     updateConfig({ ...config, visualizations })
   }
 
-  const FilterHideModal = configureData => {
-    const currentVizKey = Object.keys(visualizations).find(vizKey => vizKey === configureData.uid) || ''
-    const currentViz = config.visualizations && config.visualizations[currentVizKey]
-    const onFilterHideChange = (e, index) => {
-      const visualizations = { ...config.visualizations }
-
-      if (currentVizKey) {
-        const currentVizConfig = visualizations[currentVizKey]
-
-        if (currentVizConfig) {
-          if (!currentVizConfig.hide) currentVizConfig.hide = []
-          if (!e.target.checked && currentVizConfig.hide.indexOf(index) === -1) {
-            visualizations[currentVizKey].hide.push(index)
-          } else if (e.target.checked && currentVizConfig.hide.indexOf(index) !== -1) {
-            visualizations[currentVizKey].hide.splice(currentVizConfig.hide.indexOf(index), 1)
-          }
-        }
-      }
-
-      updateConfig({ ...config, visualizations })
-    }
-
-    const vizWithAutoLoad = Object.keys(config.visualizations).find(vizKey => config.visualizations[vizKey].autoLoad)
-    const onToggleAutoLoad = e => {
-      if (currentViz) {
-        currentViz.autoLoad = e.target.checked
-        updateConfig({ ...config, visualizations: { ...visualizations, [currentVizKey]: currentViz } })
-      }
-    }
-
-    const showAutoLoadCheckbox = !vizWithAutoLoad || vizWithAutoLoad === currentVizKey
-    return (
-      <Modal>
-        <Modal.Content>
-          <div>Choose which filters to display:</div>
-
-          {config.dashboard.sharedFilters &&
-            config.dashboard.sharedFilters.length > 0 &&
-            config.dashboard.sharedFilters.map((sharedFilter, index) => (
-              <label>
-                <input type='checkbox' defaultChecked={!configureData.hide || configureData.hide.indexOf(index) === -1} onChange={e => onFilterHideChange(e, index)} />
-                {sharedFilter.key}
-              </label>
-            ))}
-
-          {(!config.dashboard.sharedFilters || config.dashboard.sharedFilters.length === 0) && <>No dashboard filters added yet.</>}
-
-          {showAutoLoadCheckbox && (
-            <label>
-              Make Autoload:
-              <input type='checkbox' defaultChecked={currentViz?.autoLoad} onChange={onToggleAutoLoad} />
-            </label>
-          )}
-          <div>
-            <button style={{ margin: '1em' }} className='cove-button' onClick={() => overlay?.actions.toggleOverlay()}>
-              Continue
-            </button>
-          </div>
-        </Modal.Content>
-      </Modal>
-    )
-  }
-
   let isConfigurationReady = false
-  const dataConfiguredForRow = !!rows[data?.rowIdx]?.dataKey
-  if (dataConfiguredForRow || ['filter-dropdowns', 'markup-include'].includes(type)) {
+  const dataConfiguredForRow = !!rows[widgetConfig?.rowIdx]?.dataKey
+  if (dataConfiguredForRow || ['dashboardFilters', 'markup-include'].includes(type)) {
     isConfigurationReady = true
   } else {
-    if (data?.formattedData) {
+    if (widgetConfig?.formattedData) {
       isConfigurationReady = true
-    } else if (data?.dataKey && data?.dataDescription && config.datasets[data.dataKey]) {
-      const formattedDataAttempt = transform.autoStandardize(config.datasets[data.dataKey].data)
-      const canFormatData = !!transform.developerStandardize(formattedDataAttempt, data.dataDescription)
+    } else if (widgetConfig?.dataKey && widgetConfig?.dataDescription && config.datasets[widgetConfig.dataKey]) {
+      const formattedDataAttempt = transform.autoStandardize(config.datasets[widgetConfig.dataKey].data)
+      const canFormatData = !!transform.developerStandardize(formattedDataAttempt, widgetConfig.dataDescription)
       if (canFormatData) {
         isConfigurationReady = true
       }
     }
   }
 
-  const needsDataConfiguration = !dataConfiguredForRow
+  const needsDataConfiguration = !dataConfiguredForRow && widgetConfig?.type !== 'dashboardFilters'
 
   return (
     <>
       <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
         <Icon display='move' className='drag-icon' />
         <div className='widget__content'>
-          {data?.rowIdx !== undefined && (
+          {widgetConfig?.rowIdx !== undefined && (
             <div className='widget-menu'>
               {isConfigurationReady && (
                 <button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
@@ -201,7 +137,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
                   title='Configure Data'
                   className='btn btn-configure'
                   onClick={() => {
-                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(data) : <DataDesignerModal rowIndex={data.rowIdx} vizKey={data.uid} />)
+                    overlay?.actions.openOverlay(<DataDesignerModal rowIndex={widgetConfig.rowIdx} vizKey={widgetConfig.uid} />)
                   }}
                 >
                   {iconHash['gear']}
@@ -214,7 +150,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
           )}
           {iconHash[type]}
           <span>{labelHash[type]}</span>
-          {data?.newViz && type !== 'filter-dropdowns' && (
+          {widgetConfig?.newViz && type !== 'dashboardFilters' && (
             <span onClick={editWidget} className='config-needed'>
               Configuration needed
             </span>

package/src/helpers/apiFilterHelpers.ts

@@ -0,0 +1,51 @@
+import { gatherQueryParams } from '@cdc/core/helpers/gatherQueryParams'
+import { APIFilterDropdowns, DropdownOptions } from '../components/DashboardFilters'
+import { APIFilter } from '../types/APIFilter'
+import { SharedFilter } from '../types/SharedFilter'
+
+export const getLoadingFilterMemo = (sharedAPIFilters, apiFilterDropdowns): APIFilterDropdowns =>
+  sharedAPIFilters.reduce((acc, curr) => {
+    const _key = curr.apiFilter.apiEndpoint
+    if (apiFilterDropdowns[_key] != null) return acc // don't overwrite fetched data.
+    acc[_key] = null
+    return acc
+  }, {})
+
+const getParentParams = (childFilter: SharedFilter, sharedAPIFilters: SharedFilter[]): Record<'key' | 'value', string>[] | null => {
+  const _parents = sharedAPIFilters.filter(parentFilter => childFilter.parents?.includes(parentFilter.key))
+  if (!_parents.length) return null
+
+  return _parents.flatMap(filter => {
+    const key = filter.queryParameter || filter.apiFilter.valueSelector || ''
+    const value = filter.queuedActive || filter.active || ''
+    if (Array.isArray(value)) {
+      return value.map(_value => ({ key, value: _value }))
+    }
+    return [{ key, value }]
+  })
+}
+
+export const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
+  const { textSelector, valueSelector } = apiFilter
+  return data.map(v => ({ text: v[textSelector || valueSelector], value: v[valueSelector] }))
+}
+
+export const getToFetch = (sharedAPIFilters: SharedFilter[], apiFilterDropdowns: APIFilterDropdowns): Record<string, [string, number]> => {
+  const toFetch = {}
+  sharedAPIFilters.forEach((filter, index) => {
+    const baseEndpoint = filter.apiFilter.apiEndpoint
+    const _key = baseEndpoint
+    const isAPIFilter = apiFilterDropdowns[_key]
+    const parentParams = getParentParams(filter, sharedAPIFilters)
+    const notAllParentsSelected = parentParams?.some(({ value }) => value === '')
+
+    if (notAllParentsSelected) return // don't send request for dependent children filter options
+    if (isAPIFilter && !parentParams) return // don't reload filter unless it's a child
+    const topLevelDataAlreadyLoaded = isAPIFilter && !filter.parents
+    if (topLevelDataAlreadyLoaded) return // don't reload top level filters
+
+    const endpoint = baseEndpoint + (parentParams ? gatherQueryParams(baseEndpoint, parentParams) : '')
+    toFetch[endpoint] = [_key, index]
+  })
+  return toFetch
+}

package/src/helpers/changeFilterActive.ts

@@ -0,0 +1,30 @@
+import _ from 'lodash'
+import { FilterBehavior } from '../components/Header/Header'
+import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+import { SharedFilter } from '../types/SharedFilter'
+import { DashboardFilters } from '../types/DashboardFilters'
+
+const handleChildren = (sharedFilters: SharedFilter[], parentIndex: number) => {
+  const parentKey = sharedFilters[parentIndex].key
+  const childIndex = sharedFilters.findIndex(filter => filter.parents?.includes(parentKey))
+  if (childIndex !== -1) {
+    sharedFilters[childIndex].active = ''
+  }
+}
+
+export const changeFilterActive = (filterIndex: number, value: string | string[], sharedFilters: SharedFilter[], vizConfig: DashboardFilters): SharedFilter[] => {
+  const sharedFiltersCopy = _.cloneDeep(sharedFilters)
+  const currentFilter = sharedFilters[filterIndex]
+  if (vizConfig.filterBehavior !== FilterBehavior.Apply || vizConfig.autoLoad) {
+    sharedFiltersCopy[filterIndex].active = value
+    handleChildren(sharedFiltersCopy, filterIndex)
+    const queryParams = getQueryParams()
+    if (currentFilter.setByQueryParameter && queryParams[currentFilter.setByQueryParameter] !== currentFilter.active) {
+      queryParams[currentFilter.setByQueryParameter] = currentFilter.active
+      updateQueryString(queryParams)
+    }
+  } else {
+    sharedFiltersCopy[filterIndex].queuedActive = value
+  }
+  return sharedFiltersCopy
+}

package/src/helpers/filterData.ts

@@ -22,58 +22,26 @@ function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
   return maxTier
 }
 
-function filter(data, filters, condition) {
-  return data ? data.filter(row => {
-    const found = filters.find(filter => {
-      if (filter.pivot) return false
+function filter(data = [], filters: SharedFilter[], condition) {
+  return data.filter(row => {
+    const foundMatchingFilter = filters.find(filter => {
       const currentValue = row[filter.columnName]
       const selectedValue = filter.queuedActive || filter.active
-      const isNotTheSelectedValue = selectedValue && currentValue != selectedValue
+      let isNotTheSelectedValue = true
+      if (Array.isArray(selectedValue)) {
+        isNotTheSelectedValue = !selectedValue.includes(currentValue)
+      } else {
+        isNotTheSelectedValue = selectedValue && currentValue != selectedValue
+      }
       const isFirstOccurrenceOfTier = filter.tier === condition
       if (filter.type !== 'urlfilter' && isFirstOccurrenceOfTier && isNotTheSelectedValue) {
         return true
       }
     })
-    return !found
-  })  : []
-}
-
-function setFilterValuesAndActiveFilter(filters: SharedFilter[], filteredData: Object[], i: number) {
-  filters.forEach(sharedFilter => {
-    if (sharedFilter.pivot) {
-      sharedFilter.values = _.uniq(filteredData.map(row => row[sharedFilter.columnName]))
-    } else if (sharedFilter.tier === i + 2 && !Array.isArray(sharedFilter.active)) {
-      sharedFilter.values = _.uniq(filteredData.map(row => row[sharedFilter.columnName]))
-      const valueAlreadySelected = sharedFilter.values.includes(sharedFilter.active)
-      if (!valueAlreadySelected && sharedFilter.values.length > 0) {
-        sharedFilter.active = sharedFilter.values[0]
-      }
-    }
+    return !foundMatchingFilter
   })
 }
 
-const pivotData = (data, pivotFilter: SharedFilter) => {
-  const pivotActive = pivotFilter.active as string[]
-  const inactive = pivotFilter.values.filter(value => !pivotActive.includes(value))
-  const pivotColumn = pivotFilter.columnName
-  const valueColumn = pivotFilter.pivot
-  const grouped = _.groupBy(data, val => val[pivotColumn])
-  const newData = []
-  for (const key in grouped) {
-    const group = grouped[key]
-
-    group.forEach((val, index) => {
-      const row = newData[index] || {}
-      if (!inactive.includes(key)) row[key] = val[valueColumn]
-      const toAdd = _.omit(val, [pivotColumn, valueColumn, ...inactive])
-      newData[index] = { ...toAdd, ...row }
-    })
-  }
-  return newData
-}
-
-/** This function returns filtered data.
- * It also manipulates the filters by adding: tiers, filterOptions, and default selections */
 export const filterData = (filters: SharedFilter[], _data: Object[]): Object[] => {
   const maxTier = getMaxTierAndSetFilterTiers(filters)
 
@@ -82,13 +50,7 @@ export const filterData = (filters: SharedFilter[], _data: Object[]): Object[] =
 
     const filteredData = filter(_data, filters, i + 1)
 
-    setFilterValuesAndActiveFilter(filters, filteredData, i)
-
     if (lastIteration) {
-      const pivotFilter = filters.find(filter => filter.pivot)
-      if (pivotFilter) {
-        return pivotData(filteredData, pivotFilter)
-      }
       // not sure if this last run of filter() function is necessary.
       return filter(filteredData, filters, maxTier - 1)
     }

package/src/helpers/generateValuesForFilter.ts

@@ -5,7 +5,7 @@ export const generateValuesForFilter = (columnName, _data) => {
   Object.keys(_data).forEach(key => {
     _data[key]?.forEach(row => {
       const value = row[columnName]
-      if (!values.includes(value)) {
+      if (value && !values.includes(value)) {
         values.push(value)
       }
     })

package/src/helpers/getAutoLoadVisualization.ts

@@ -0,0 +1,11 @@
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { DashboardFilters } from '../types/DashboardFilters'
+
+export const getAutoLoadVisualization = (visualizations: Record<string, AnyVisualization>): DashboardFilters | undefined => {
+  const autoLoadViz = Object.values(visualizations).filter(vis => {
+    return vis.type === 'dashboardFilters' && vis.autoLoad
+  }) as DashboardFilters[]
+  if (autoLoadViz.length === 0) return
+  if (autoLoadViz.length > 1) throw new Error('Only one filter row can be autoloaded')
+  return autoLoadViz[0]
+}

package/src/helpers/getFilteredData.ts

@@ -26,12 +26,14 @@ export const getFilteredData = (state: DashboardState, initialFilteredData = {},
   config.rows.forEach((row, index) => {
     if (row.dataKey) {
       const applicableFilters = getApplicableFilters(config.dashboard, index)
+      const { dataKey, data, dataDescription } = row
+      const _data = state.data[dataKey] || data
       if (applicableFilters) {
-        const { dataKey, data, dataDescription } = row
-        const _data = state.data[dataKey] || data
         const formattedData = dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
 
         newFilteredData[index] = filterData(applicableFilters, formattedData)
+      } else {
+        newFilteredData[index] = _data || []
       }
     }
   })

package/src/helpers/getVizConfig.ts

@@ -1,12 +1,33 @@
 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']))
@@ -16,13 +37,13 @@ export const getVizConfig = (visualizationKey: string, rowNumber: number, config
   const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
 
   if (filteredVizData) {
-    visualizationConfig.data = filteredVizData
+    visualizationConfig.data = filteredVizData || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData = visualizationConfig.data
     }
   } else {
     const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-    visualizationConfig.data = data[dataKey]
+    visualizationConfig.data = data[dataKey] || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData = transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) || visualizationConfig.data
     }

package/src/helpers/getVizRowColumnLocator.ts

@@ -1,9 +1,10 @@
 import { ConfigRow } from '../types/ConfigRow'
 
-export const getVizRowColumnLocator = (rows: ConfigRow[]) =>
+export const getVizRowColumnLocator = (rows: ConfigRow[]): Record<string, { row: number; column: number }> =>
   rows.reduce((acc, curr, index) => {
     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/hasDashboardApplyBehavior.ts

@@ -0,0 +1,5 @@
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+
+export const hasDashboardApplyBehavior = (visualizations: Record<string, AnyVisualization>) => {
+  return Object.values(visualizations).some(v => v.filterBehavior === 'Apply Button' && v.type === 'dashboardFilters')
+}

package/src/helpers/iconHash.tsx

@@ -1,5 +1,5 @@
 import Icon from '@cdc/core/components/ui/Icon'
-import { Visualization } from '@cdc/core/types/Visualization'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
 
 export const iconHash = {
   'data-bite': <Icon display='databite' base />,
@@ -16,12 +16,12 @@ export const iconHash = {
   gear: <Icon display='gear' base />,
   tools: <Icon display='tools' base />,
   'filtered-text': <Icon display='filtered-text' base />,
-  'filter-dropdowns': <Icon display='filter-dropdowns' base />,
+  dashboardFilters: <Icon display='dashboardFilters' base />,
   table: <Icon display='table' base />,
   Sankey: <Icon display='sankey' base />
 }
 
-export const getIcon = (visualization: Visualization) => {
+export const getIcon = (visualization: AnyVisualization) => {
   const { type, visualizationType, general } = visualization
   if (visualizationType) return iconHash[visualizationType]
   if (general?.geoType) {

package/src/helpers/mapDataToConfig.ts

@@ -0,0 +1,29 @@
+import { getFormattedData } from './getFormattedData'
+import { DashboardConfig } from '../types/DashboardConfig'
+
+const mapDataToVisualizations = (config: DashboardConfig) => {
+  Object.keys(config.visualizations).forEach((vizKey, i) => {
+    const viz = config.visualizations[vizKey]
+    if (viz.dataKey && !viz.data) {
+      const data = config.datasets[viz.dataKey].data
+      config.visualizations[vizKey].data = data
+      config.visualizations[vizKey].formattedData = getFormattedData(data, viz.dataDescription)
+    }
+  })
+}
+
+const mapDataToRows = (config: DashboardConfig) => {
+  config.rows.forEach((row, i) => {
+    if (row.dataKey && !row.data) {
+      const data = config.datasets[row.dataKey].data
+      config.rows[i].data = data
+      config.rows[i].formattedData = getFormattedData(data, row.dataDescription)
+    }
+  })
+}
+
+export const mapDataToConfig = (config: DashboardConfig) => {
+  mapDataToVisualizations(config)
+  mapDataToRows(config)
+  return config
+}