@cdc/dashboard 4.24.5 → 4.24.9

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'
@@ -19,25 +18,26 @@ const labelHash = {
   Bar: 'Bar',
   Line: 'Line',
   'Spark Line': 'Spark Line',
+  'Bump Chart': 'Bump Chart',
   Pie: 'Pie',
   us: 'United States (State- or County-Level)',
   'us-county': 'United States (State- or County-Level)',
   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 +54,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 +76,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 +97,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 +138,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 +151,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/FilterBehavior.ts

@@ -0,0 +1,4 @@
+export const FilterBehavior = {
+  Apply: 'Apply Button',
+  OnChange: 'Filter Change'
+}

package/src/helpers/addValuesToDashboardFilters.ts

@@ -0,0 +1,49 @@
+import _ from 'lodash'
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+import { SharedFilter } from '../types/SharedFilter'
+
+// Gets filter values from dataset
+const generateValuesForFilter = (columnName, data: Record<string, any[]>) => {
+  const values: string[] = []
+  // data is a dataset this loops through ALL datasets to find matching values
+  // not sure if this is desired behavior
+
+  const d = Object.values(data) || []
+  d.forEach((rows: any[]) => {
+    rows?.forEach(row => {
+      const value = row[columnName]
+      if (value !== undefined && !values.includes(value)) {
+        values.push(String(value))
+      }
+    })
+  })
+  return values
+}
+
+const getSelector = (filter: SharedFilter) => {
+  return filter.type === 'urlfilter' ? filter.apiFilter?.valueSelector : filter.columnName
+}
+
+export const addValuesToDashboardFilters = (filters: SharedFilter[], data: Record<string, any[]>): Array<SharedFilter> => {
+  return filters?.map(filter => {
+    if (filter.type === 'urlfilter') return filter
+    const filterCopy = _.cloneDeep(filter)
+    const filterValues = generateValuesForFilter(getSelector(filter), data)
+    filterCopy.values = filterValues
+    if (filterValues.length > 0) {
+      const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
+      if (queryStringFilterValue) {
+        filterCopy.active = queryStringFilterValue
+      } else if (filter.multiSelect) {
+        const defaultValues = filterCopy.values
+        const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
+        filterCopy.active = active.filter(val => defaultValues.includes(val))
+      } else {
+        const defaultValue = filterCopy.values[0] || filterCopy.active
+        const active = Array.isArray(filterCopy.active) ? filterCopy.active[0] : filterCopy.active
+        filterCopy.active = filterCopy.values.includes(active) ? active : defaultValue
+      }
+    }
+    return filterCopy
+  })
+}

package/src/helpers/apiFilterHelpers.ts

@@ -0,0 +1,102 @@
+import { gatherQueryParams } from '@cdc/core/helpers/gatherQueryParams'
+import { APIFilterDropdowns, DropdownOptions } from '../components/DashboardFilters'
+import { APIFilter } from '../types/APIFilter'
+import { SharedFilter } from '../types/SharedFilter'
+import _ from 'lodash'
+import { getQueryParams } from '@cdc/core/helpers/queryStringUtils'
+
+/** key for the dropdowns object */
+type DropdownsKey = string
+
+export const getLoadingFilterMemo = (
+  apiFiltersEndpoints: string[],
+  apiFilterDropdowns,
+  changedChildFilterIndexes = []
+): APIFilterDropdowns =>
+  apiFiltersEndpoints.reduce((acc, endpoint, currIndex) => {
+    const _key: DropdownsKey = endpoint
+    const hasChanged = changedChildFilterIndexes.includes(currIndex)
+    if (apiFilterDropdowns[_key] != null && !hasChanged) {
+      acc[_key] = apiFilterDropdowns[_key]
+    } else {
+      acc[_key] = null
+    }
+    return acc
+  }, {})
+
+const getParentParams = (
+  childFilter: SharedFilter,
+  sharedFilters: SharedFilter[]
+): Record<'key' | 'value', string>[] | null => {
+  const _parents = sharedFilters.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.toString() }))
+    }
+    return [{ key, value: value.toString() }]
+  })
+}
+
+export const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
+  const { textSelector, valueSelector } = apiFilter
+  return data.map(v => ({ text: v[textSelector || valueSelector], value: v[valueSelector] }))
+}
+
+/** API endpoint to fetch */
+type Endpoint = string
+type SharedFilterIndex = number
+export const getToFetch = (
+  sharedFilters: SharedFilter[],
+  apiFilterDropdowns: APIFilterDropdowns
+): Record<Endpoint, [DropdownsKey, SharedFilterIndex]> => {
+  const toFetch = {}
+  sharedFilters.forEach((filter, index) => {
+    const baseEndpoint = filter.apiFilter?.apiEndpoint
+    if (!baseEndpoint) return
+    const _key = baseEndpoint
+    if (apiFilterDropdowns[_key]) return // don't reload cached filter
+    const parentParams = getParentParams(filter, sharedFilters)
+    const notAllParentsSelected = parentParams?.some(({ value }) => value === '')
+
+    if (notAllParentsSelected) return // don't send request for dependent children filter options
+
+    const endpoint = baseEndpoint + (parentParams ? gatherQueryParams(baseEndpoint, parentParams) : '')
+    toFetch[endpoint] = [_key, index]
+  })
+  return toFetch
+}
+
+export const setAutoLoadDefaultValue = (
+  sharedFilterIndex: number,
+  dropdownOptions: DropdownOptions,
+  sharedFilters,
+  autoLoadFilterIndexes: number[]
+): SharedFilter => {
+  const sharedFiltersCopy = _.cloneDeep(sharedFilters)
+  const sharedFilter = _.cloneDeep(sharedFiltersCopy[sharedFilterIndex])
+  if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) return sharedFilter // no autoLoading happening
+  if (autoLoadFilterIndexes.includes(sharedFilterIndex)) {
+    const filterParents = sharedFiltersCopy.filter(f => sharedFilter.parents?.includes(f.key))
+    const notAllParentFiltersSelected = filterParents.some(p => !(p.active || p.queuedActive))
+    if (filterParents && notAllParentFiltersSelected) return sharedFilter
+    const defaultValue = sharedFilter.multiSelect ? [dropdownOptions[0]?.value] : dropdownOptions[0]?.value
+    if (!sharedFilter.active) {
+      const queryParams = getQueryParams()
+      const defaultQueryParamValue = queryParams[sharedFilter?.queryParameter]
+      sharedFilter.active = defaultQueryParamValue || defaultValue
+    } else if (sharedFilter.multiSelect) {
+      const currentOption = sharedFilter.active.filter(activeVal =>
+        dropdownOptions.find(option => option.value === activeVal)
+      )
+      sharedFilter.active = currentOption.length ? currentOption : defaultValue
+    } else {
+      const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
+      sharedFilter.active = currentOption ? currentOption.value : defaultValue
+    }
+  }
+  return sharedFilter
+}

package/src/helpers/changeFilterActive.ts

@@ -0,0 +1,39 @@
+import _ from 'lodash'
+import { FilterBehavior } from '../helpers/FilterBehavior'
+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 childFilterIndexes = sharedFilters
+    .map((filter, index) => (filter.parents?.includes(parentKey) ? index : null))
+    .filter(i => i !== null)
+  if (childFilterIndexes.length) {
+    childFilterIndexes.forEach(filterIndex => {
+      sharedFilters[filterIndex].active = ''
+    })
+  }
+  return childFilterIndexes
+}
+
+export const changeFilterActive = (
+  filterIndex: number,
+  value: string | string[],
+  sharedFilters: SharedFilter[],
+  vizConfig: DashboardFilters
+): [SharedFilter[], number[]] => {
+  const sharedFiltersCopy = _.cloneDeep(sharedFilters)
+  const currentFilter = sharedFilters[filterIndex]
+  if (vizConfig.filterBehavior !== FilterBehavior.Apply || vizConfig.autoLoad) {
+    sharedFiltersCopy[filterIndex].active = value
+    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, handleChildren(sharedFiltersCopy, filterIndex)]
+}

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]
+}