@cdc/dashboard 4.24.3 → 4.24.4

package/src/components/Row.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
@@ -13,41 +13,53 @@ import FourEightColIcon from '../images/icon-col-4-8.svg'
 import EightFourColIcon from '../images/icon-col-8-4.svg'
 import ToggleIcon from '../images/icon-toggle.svg'
 import { ConfigRow } from '../types/ConfigRow'
+import { DataDesignerModal } from './DataDesignerModal'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import { iconHash } from '../helpers/iconHash'
+import _ from 'lodash'
 
 type RowMenuProps = {
   rowIdx: number
-  row: ConfigRow
 }
 
-const RowMenu: React.FC<RowMenuProps> = ({ rowIdx, row }) => {
+const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   const { config } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
-  const { rows } = config
+  const rows = _.cloneDeep(config.rows)
+  const row = config.rows[rowIdx]
 
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
-  const getCurr = () => {
-    if (row[0].toggle) return 'toggle'
-    return row.reduce((acc, curr) => {
+  const curr = useMemo(() => {
+    if (row.toggle) return 'toggle'
+    return row.columns.reduce((acc, curr) => {
       if (curr.width) {
         acc += curr.width
       }
       return acc
     }, '')
-  }
-
-  const [curr, setCurr] = useState(getCurr())
+  }, [row])
 
   const setRowLayout = (layout: number[], toggle = undefined) => {
-    const newRows = [...rows]
-    const row = newRows[rowIdx]
-
-    row.forEach((col, i) => {
-      col.width = layout[i] ?? null
-      col.toggle = toggle
-      if (!toggle) col.hide = undefined
-    })
+    const newRows = _.cloneDeep(rows)
+    newRows[rowIdx].toggle = toggle
+    const rowColumns = newRows[rowIdx].columns
+    const columnsWithWidgets = rowColumns.filter(c => c.widget)
+
+    const totalWidgets = columnsWithWidgets.length
+    if (totalWidgets > layout.length) {
+      // don't let them change to a smaller layout and lose viz config work
+      return
+    } else {
+      // a 3 column becoming a 2 column with only a VizConfig in the second column will maintain order
+      // a 2 column becoming a 1 column with only a VizConfig in the second column will move the VizConfig to the first column
+      const mapRow = rowColumns.length > layout.length ? columnsWithWidgets : rowColumns
+      newRows[rowIdx].columns = layout.map((width, colIndex) => {
+        const col = mapRow[colIndex]
+        return col ? { ...col, width } : { width }
+      })
+    }
+
     updateConfig({ ...config, rows: newRows })
-    setCurr(toggle ? 'toggle' : layout.join(''))
   }
 
   const moveRow = (dir = 'down') => {
@@ -138,15 +150,28 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx, row }) => {
 }
 
 const Row = ({ row, idx: rowIdx, uuid }) => {
+  const { overlay } = useGlobalContext()
   return (
     <div className='builder-row' data-row-id={rowIdx}>
-      <RowMenu rowIdx={rowIdx} row={row} />
+      <RowMenu rowIdx={rowIdx} />
       <div className='column-container'>
-        {row
-          .filter(column => column.width)
-          .map((column, colIdx) => (
-            <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
-          ))}
+        <>
+          <button
+            title='Configure Data'
+            className='btn btn-configure-row'
+            onClick={() => {
+              overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
+            }}
+          >
+            {iconHash['gear']}
+          </button>
+
+          {row.columns
+            .filter(column => column.width)
+            .map((column, colIdx) => (
+              <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
+            ))}
+        </>
       </div>
     </div>
   )

package/src/components/Toggle/Toggle.tsx

@@ -7,23 +7,22 @@ import './toggle-style.css'
 import _ from 'lodash'
 
 type ToggleProps = {
+  active: number
   row: ConfigRow
-  rowIndex: number
   visualizations: Record<string, Visualization>
+  setToggled: (colIndex: number) => void
 }
-const Toggle: React.FC<ToggleProps> = ({ row, rowIndex, visualizations }) => {
-  const dispatch = useContext(DashboardDispatchContext)
-
+const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled }) => {
   const selectItem = (colIndex, e = null) => {
     if (e?.key && e.key !== 'Enter') return
-    dispatch({ type: 'TOGGLE_ROW', payload: { rowIndex, colIndex } })
+    setToggled(colIndex)
   }
   return (
     <div className='toggle-component'>
-      {row.map((col, colIndex) => {
+      {row.columns.map((col, colIndex) => {
         if (!col.widget) return null
         const type = visualizations[col.widget].type
-        const selected = col.hide !== undefined ? col.hide : colIndex === 0
+        const selected = colIndex === active
         return (
           <div role='radio' className={selected ? 'selected' : ''} key={colIndex} onClick={() => selectItem(colIndex)} onKeyUp={e => selectItem(colIndex, e)} aria-checked={selected} tabIndex={0} aria-label={`Toggle ${type}`}>
             {getIcon(visualizations[col.widget])} <span>{_.capitalize(type)}</span>

package/src/components/VisualizationRow.tsx

@@ -0,0 +1,174 @@
+import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
+import React, { MouseEventHandler, useContext, useMemo } from 'react'
+import Toggle from './Toggle'
+import _ from 'lodash'
+import { DashboardConfig } from '../types/DashboardConfig'
+import { ConfigRow } from '../types/ConfigRow'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import CdcMap from '@cdc/map'
+import CdcChart from '@cdc/chart'
+import CdcDataBite from '@cdc/data-bite'
+import CdcWaffleChart from '@cdc/waffle-chart'
+import CdcMarkupInclude from '@cdc/markup-include'
+import CdcFilteredText from '@cdc/filtered-text'
+import Filters, { APIFilterDropdowns } from './Filters'
+import { FilterBehavior } from './Header/Header'
+import { DashboardContext } from '../DashboardContext'
+import { ViewPort } from '@cdc/core/types/ViewPort'
+import { getVizConfig } from '../helpers/getVizConfig'
+
+type VizRowProps = {
+  filteredDataOverride?: Object[]
+  row: ConfigRow
+  rowIndex: number
+  setSharedFilter: Function
+  updateChildConfig: Function
+  applyFilters: MouseEventHandler<HTMLButtonElement>
+  apiFilterDropdowns: APIFilterDropdowns
+  handleOnChange: Function
+  currentViewport: ViewPort
+}
+
+const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, rowIndex: index, setSharedFilter, updateChildConfig, applyFilters, apiFilterDropdowns, handleOnChange, currentViewport }) => {
+  const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
+  const [show, setShow] = React.useState(row.columns.map((col, i) => i === 0))
+  const setToggled = (colIndex: number) => {
+    setShow(show.map((_, i) => i === colIndex))
+  }
+  const inNoDataState = useMemo(() => {
+    const vals = Object.values(rawData)
+    if (!vals.length) return true
+    return vals.some(val => val === undefined)
+  }, [rawData])
+  const GoButton = ({ autoLoad }: { autoLoad?: boolean }) => {
+    if (config.filterBehavior === FilterBehavior.Apply && !autoLoad) {
+      return <button onClick={applyFilters}>GO!</button>
+    }
+    return null
+  }
+  return (
+    <div className={`dashboard-row ${row.equalHeight ? 'equal-height' : ''} ${row.toggle ? 'toggle' : ''}`} key={`row__${index}`}>
+      {row.toggle && <Toggle row={row} visualizations={config.visualizations} active={show.indexOf(true)} setToggled={setToggled} />}
+      {row.columns.map((col, colIndex) => {
+        if (col.width) {
+          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`dashboard-col dashboard-col-${col.width}`}></div>
+
+          const visualizationConfig = getVizConfig(col.widget, index, config, rawData, dashboardFilteredData)
+          if (filteredDataOverride) {
+            visualizationConfig.data = filteredDataOverride
+            if (visualizationConfig.formattedData) {
+              visualizationConfig.formattedData = filteredDataOverride
+            }
+          }
+
+          const setsSharedFilter = config.dashboard.sharedFilters && config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0
+          const setSharedFilterValue = setsSharedFilter ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active : undefined
+          const tableLink = (
+            <a href={`#data-table-${visualizationConfig.dataKey}`} className='margin-left-href'>
+              {visualizationConfig.dataKey} (Go to Table)
+            </a>
+          )
+          const hideFilter = visualizationConfig.autoLoad && inNoDataState
+
+          const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
+          return (
+            <React.Fragment key={`vis__${index}__${colIndex}`}>
+              <div className={`dashboard-col dashboard-col-${col.width} ${!shouldShow ? 'hidden-toggle' : ''}`}>
+                {visualizationConfig.type === 'chart' && (
+                  <CdcChart
+                    key={col.widget}
+                    config={visualizationConfig}
+                    dashboardConfig={config}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+                    isDashboard={true}
+                    link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                    configUrl={undefined}
+                    setEditing={undefined}
+                    hostname={undefined}
+                    setSharedFilterValue={undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'map' && (
+                  <CdcMap
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    showLoader={false}
+                    setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+                    setSharedFilterValue={setSharedFilterValue}
+                    isDashboard={true}
+                    link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'data-bite' && (
+                  <CdcDataBite
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                  />
+                )}
+                {visualizationConfig.type === 'waffle-chart' && (
+                  <CdcWaffleChart
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                    configUrl={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'markup-include' && (
+                  <CdcMarkupInclude
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                    configUrl={undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'filtered-text' && (
+                  <CdcFilteredText
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                    configUrl={undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'filter-dropdowns' && !hideFilter && (
+                  <React.Fragment key={col.widget}>
+                    <Filters hide={visualizationConfig.hide} filters={config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
+                    <GoButton autoLoad={visualizationConfig.autoLoad} />
+                  </React.Fragment>
+                )}
+                {visualizationConfig.type === 'table' && <DataTableStandAlone key={col.widget} visualizationKey={col.widget} config={visualizationConfig} viewport={currentViewport} />}
+              </div>
+            </React.Fragment>
+          )
+        }
+        return <React.Fragment key={`vis__${index}__${colIndex}`}></React.Fragment>
+      })}
+    </div>
+  )
+}
+
+export default VisualizationRow

package/src/components/Widget.tsx

@@ -1,17 +1,16 @@
-import React, { useContext, useRef, useEffect } from 'react'
+import { useContext } from 'react'
 import { useDrag } from 'react-dnd'
 
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
-import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-
-import DataDesigner from '@cdc/core/components/managers/DataDesigner'
 import Icon from '@cdc/core/components/ui/Icon'
 import Modal from '@cdc/core/components/ui/Modal'
 import { Visualization } from '@cdc/core/types/Visualization'
 import { iconHash } from '../helpers/iconHash'
+import _ from 'lodash'
+import { DataDesignerModal } from './DataDesignerModal'
 
 const labelHash = {
   'data-bite': 'Data Bite',
@@ -45,8 +44,6 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
   const visualizations = config.visualizations
   const dispatch = useContext(DashboardDispatchContext)
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
-  const dataRef = useRef<WidgetData>()
-  dataRef.current = data
 
   const transform = new DataTransform()
 
@@ -58,14 +55,14 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     const { rowIdx, colIdx } = result
 
     if (undefined !== data?.rowIdx) {
-      rows[data.rowIdx][data.colIdx].widget = null // Wipe from old position
+      rows[data.rowIdx].columns[data.colIdx].widget = null // Wipe from old position
 
-      rows[rowIdx][colIdx].widget = data.uid // Add to new row and col
+      rows[rowIdx].columns[colIdx].widget = data.uid // Add to new row and col
     } else if (!!addVisualization) {
       // Item does not exist, instantiate a new one
       const newViz = addVisualization()
       visualizations[newViz.uid] = newViz // Add to widgets collection
-      rows[rowIdx][colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
+      rows[rowIdx].columns[colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
     }
 
     updateConfig({ ...config, rows, visualizations })
@@ -84,7 +81,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
 
   const deleteWidget = () => {
     if (!data) return
-    rows[data.rowIdx][data.colIdx].widget = null
+    rows[data.rowIdx].columns[data.colIdx].widget = null
 
     delete visualizations[data.uid]
 
@@ -106,78 +103,6 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     updateConfig({ ...config, visualizations })
   }
 
-  const changeDataset = (uid, value) => {
-    visualizations[uid].dataDescription = {}
-    visualizations[uid].formattedData = undefined
-
-    visualizations[uid].dataKey = value
-
-    updateConfig({ ...config, visualizations })
-  }
-
-  const updateDescriptionProp = async (visualizationKey, datasetKey, key, value) => {
-    let dataDescription = { ...(dataRef.current?.dataDescription as Object), [key]: value }
-
-    let newData
-    if (!config.datasets[datasetKey].data && config.datasets[datasetKey].dataUrl) {
-      newData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
-      newData = transform.autoStandardize(newData)
-    } else {
-      newData = config.datasets[datasetKey].data
-    }
-
-    let formattedData = transform.developerStandardize(newData, dataDescription)
-
-    let newVisualizations = { ...config.visualizations }
-    newVisualizations[visualizationKey] = { ...newVisualizations[visualizationKey], data: newData, dataDescription, formattedData }
-
-    updateConfig({ ...config, visualizations: newVisualizations })
-
-    overlay?.actions.openOverlay(dataDesignerModal(newVisualizations[visualizationKey]))
-  }
-
-  const dataDesignerModal = (configureData, dataKeyOverride?) => {
-    const dataKey = !dataKeyOverride && dataKeyOverride !== '' ? data?.dataKey || dataRef.current?.dataKey : dataKeyOverride
-
-    overlay?.actions.toggleOverlay()
-
-    return (
-      <Modal>
-        <Modal.Content>
-          <div className='dataset-selector-container'>
-            Select a dataset:&nbsp;
-            <select
-              className='dataset-selector'
-              defaultValue={dataKey}
-              onChange={e => {
-                changeDataset(data?.uid, e.target.value)
-                overlay?.actions.openOverlay(dataDesignerModal(data, e.target.value || ''))
-              }}
-            >
-              <option value=''>Select a dataset</option>
-              {config.datasets && Object.keys(config.datasets).map(datasetKey => <option key={datasetKey}>{datasetKey}</option>)}
-            </select>
-          </div>
-          {dataKey && (
-            <DataDesigner
-              {...{
-                configureData,
-                visualizationKey: data?.uid,
-                dataKey: dataKey,
-                updateDescriptionProp
-              }}
-            />
-          )}
-          {configureData.formattedData && (
-            <button style={{ margin: '1em' }} className='cove-button' onClick={() => overlay?.actions.toggleOverlay()}>
-              Continue
-            </button>
-          )}
-        </Modal.Content>
-      </Modal>
-    )
-  }
-
   const FilterHideModal = configureData => {
     const currentVizKey = Object.keys(visualizations).find(vizKey => vizKey === configureData.uid) || ''
     const currentViz = config.visualizations && config.visualizations[currentVizKey]
@@ -208,8 +133,6 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
       }
     }
 
-    overlay?.actions.toggleOverlay()
-
     const showAutoLoadCheckbox = !vizWithAutoLoad || vizWithAutoLoad === currentVizKey
     return (
       <Modal>
@@ -243,29 +166,24 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     )
   }
 
-  useEffect(() => {
-    if (data?.openModal) {
-      overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(dataRef.current) : dataDesignerModal(dataRef.current))
-
-      visualizations[data.uid].openModal = false
-
-      updateConfig({ ...config, visualizations })
-    }
-  }, [data?.openModal])
-
   let isConfigurationReady = false
-  if (type === 'markup-include' || type === 'filter-dropdowns') {
-    isConfigurationReady = true
-  } else if (data && data.formattedData) {
+  const dataConfiguredForRow = !!rows[data?.rowIdx]?.dataKey
+  if (dataConfiguredForRow || ['markup-include', 'filter-dropdowns'].includes(type)) {
     isConfigurationReady = true
-  } else if (data && data.dataKey && data.dataDescription && config.datasets[data.dataKey]) {
-    let formattedDataAttempt = transform.autoStandardize(config.datasets[data.dataKey].data)
-    formattedDataAttempt = transform.developerStandardize(formattedDataAttempt, data.dataDescription)
-    if (formattedDataAttempt) {
+  } else {
+    if (data?.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)
+      if (canFormatData) {
+        isConfigurationReady = true
+      }
     }
   }
 
+  const needsDataConfiguration = !dataConfiguredForRow && type !== 'markup-include'
+
   return (
     <>
       <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
@@ -278,12 +196,12 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
                   {iconHash['tools']}
                 </button>
               )}
-              {type !== 'markup-include' && (
+              {needsDataConfiguration && (
                 <button
                   title='Configure Data'
                   className='btn btn-configure'
                   onClick={() => {
-                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(data) : dataDesignerModal(data))
+                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(data) : <DataDesignerModal rowIndex={data.rowIdx} vizKey={data.uid} />)
                   }}
                 >
                   {iconHash['gear']}

package/src/helpers/filterData.ts

@@ -23,19 +23,21 @@ function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
 }
 
 function filter(data, filters, condition) {
-  return data ? data.filter(row => {
-    const found = filters.find(filter => {
-      if (filter.pivot) return false
-      const currentValue = row[filter.columnName]
-      const selectedValue = filter.queuedActive || filter.active
-      const isNotTheSelectedValue = selectedValue && currentValue != selectedValue
-      const isFirstOccurrenceOfTier = filter.tier === condition
-      if (filter.type !== 'urlfilter' && isFirstOccurrenceOfTier && isNotTheSelectedValue) {
-        return true
-      }
-    })
-    return !found
-  })  : []
+  return data
+    ? data.filter(row => {
+        const found = filters.find(filter => {
+          if (filter.pivot) return false
+          const currentValue = row[filter.columnName]
+          const selectedValue = filter.queuedActive || filter.active
+          const 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) {
@@ -82,7 +84,7 @@ export const filterData = (filters: SharedFilter[], _data: Object[]): Object[] =
 
     const filteredData = filter(_data, filters, i + 1)
 
-    setFilterValuesAndActiveFilter(filters, filteredData, i)
+    setFilterValuesAndActiveFilter(_.cloneDeep(filters), filteredData, i)
 
     if (lastIteration) {
       const pivotFilter = filters.find(filter => filter.pivot)

package/src/helpers/getFilteredData.ts

@@ -0,0 +1,39 @@
+import { DashboardState } from '../store/dashboard.reducer'
+import { Dashboard } from '../types/Dashboard'
+import { SharedFilter } from '../types/SharedFilter'
+import { filterData } from './filterData'
+import { getFormattedData } from './getFormattedData'
+import { getVizKeys } from './getVizKeys'
+
+export const getApplicableFilters = (dashboard: Dashboard, key: string | number): false | SharedFilter[] => {
+  const c = dashboard.sharedFilters?.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(`${key}`) !== -1)
+  return c?.length > 0 ? c : false
+}
+
+export const getFilteredData = (state: DashboardState, initialFilteredData = {}, dataOverride?: Object) => {
+  const newFilteredData = initialFilteredData
+  const { config } = state
+  getVizKeys(config).forEach(key => {
+    const applicableFilters = getApplicableFilters(config.dashboard, key)
+    if (applicableFilters) {
+      const { dataKey, data, dataDescription } = config.visualizations[key]
+      const _data = state.data[dataKey] || data
+      const formattedData = dataOverride?.[dataKey] || (dataDescription ? getFormattedData(_data, dataDescription) : _data)
+
+      newFilteredData[key] = filterData(applicableFilters, formattedData)
+    }
+  })
+  config.rows.forEach((row, index) => {
+    if (row.dataKey) {
+      const applicableFilters = getApplicableFilters(config.dashboard, index)
+      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)
+      }
+    }
+  })
+  return newFilteredData
+}

package/src/helpers/getUpdateConfig.ts

@@ -4,6 +4,7 @@ import { filterData } from './filterData'
 import { generateValuesForFilter } from './generateValuesForFilter'
 import { getFormattedData } from './getFormattedData'
 import { getVizKeys } from './getVizKeys'
+import { getVizRowColumnLocator } from './getVizRowColumnLocator'
 
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 
@@ -17,6 +18,8 @@ export const getUpdateConfig =
     let newFilteredData = {}
     let visualizationKeys = getVizKeys(newConfig)
 
+    const vizRowColumnLocator = getVizRowColumnLocator(newConfig.rows)
+
     if (newConfig.dashboard.sharedFilters) {
       newConfig.dashboard.sharedFilters.forEach((filter, i) => {
         const filterIsSetByVizData = !!visualizationKeys.find(key => key === filter.setBy)
@@ -52,6 +55,8 @@ export const getUpdateConfig =
       })
 
       visualizationKeys.forEach(visualizationKey => {
+        const row = vizRowColumnLocator[visualizationKey]
+        if (newConfig.rows[row]?.datakey) return // data configured on the row level
         const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
 
         if (applicableFilters.length > 0) {
@@ -62,6 +67,16 @@ export const getUpdateConfig =
           newFilteredData[visualizationKey] = filterData(applicableFilters, _data)
         }
       })
+
+      newConfig.rows.forEach((row, rowIndex) => {
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(rowIndex) !== -1)
+
+        if (applicableFilters.length > 0) {
+          const formattedData = getFormattedData(row.data, row.dataDescription)
+          const _data = formattedData || (dataOverride || state.data)[rowIndex]
+          newFilteredData[rowIndex] = filterData(applicableFilters, _data)
+        }
+      })
     }
     //Enforce default values that need to be calculated at runtime
     newConfig.runtime = {}