@cdc/dashboard 4.24.2 → 4.24.3

package/src/components/Toggle/toggle-style.css

@@ -0,0 +1,34 @@
+.cdc-open-viz-module {
+  --border: 1px solid var(--lightGray);
+  .toggle-component {
+    display: flex;
+    justify-content: right;
+    width: 100%;
+    margin-bottom: 15px;
+    :first-child:is(div) {
+      border: var(--border);
+      border-radius: 5px 0 0 5px;
+    }
+    :last-child:is(div) {
+      border: var(--border);
+      border-radius: 0 5px 5px 0;
+    }
+    :is(div) {
+      border-top: var(--border);
+      border-bottom: var(--border);
+      padding: 7px 15px;
+      display: inline;
+      float: right;
+      cursor: pointer;
+      &.selected {
+        background-color: var(--primary);
+        color: white;
+      }
+      background-color: var(--white);
+      color: var(--primary);
+      :is(svg) {
+        height: 25px;
+      }
+    }
+  }
+}

package/src/components/VisualizationsPanel.tsx

@@ -2,11 +2,12 @@ import React from 'react'
 import type { Visualization } from '@cdc/core/types/Visualization'
 import Widget from './Widget'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
+import { Table } from '@cdc/core/types/Table'
 
 const addVisualization = (type, subType) => {
-  let modalWillOpen = type !== 'markup-include'
-  let newVisualizationConfig: Partial<Visualization> = {
-    newViz: true,
+  const modalWillOpen = type !== 'markup-include'
+  const newVisualizationConfig: Partial<Visualization> = {
+    newViz: type !== 'table',
     openModal: modalWillOpen,
     uid: type + Date.now(),
     type
@@ -23,6 +24,13 @@ const addVisualization = (type, subType) => {
     case 'data-bite' || 'waffle-chart' || 'markup-include' || 'filtered-text':
       newVisualizationConfig.visualizationType = type
       break
+    case 'table':
+      const tableConfig: Table = { label: 'Data Table', show: true, showDownloadUrl: false, showVertical: true, expanded: true }
+      newVisualizationConfig.table = tableConfig
+      newVisualizationConfig.columns = {}
+      newVisualizationConfig.dataFormat = {}
+      newVisualizationConfig.visualizationType = type
+      break
     default:
       newVisualizationConfig.visualizationType = type
       break
@@ -39,6 +47,7 @@ const VisualizationsPanel = ({ loadConfig, config }) => (
       <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'>
@@ -53,6 +62,7 @@ const VisualizationsPanel = ({ loadConfig, config }) => (
       <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
       <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
       <Widget addVisualization={() => addVisualization('filter-dropdowns', '')} type='filter-dropdowns' />
+      <Widget addVisualization={() => addVisualization('table', '')} type='table' />
     </div>
     <span className='subheading-3'>Advanced</span>
     <AdvancedEditor loadConfig={loadConfig} state={config} convertStateToConfig={undefined} />

package/src/components/Widget.tsx

@@ -11,24 +11,7 @@ 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'
-
-const iconHash = {
-  'data-bite': <Icon display='databite' base />,
-  Bar: <Icon display='chartBar' base />,
-  'Spark Line': <Icon display='chartLine' />,
-  'waffle-chart': <Icon display='grid' base />,
-  'markup-include': <Icon display='code' base />,
-  Line: <Icon display='chartLine' base />,
-  Pie: <Icon display='chartPie' base />,
-  us: <Icon display='mapUsa' base />,
-  'us-county': <Icon display='mapUsa' base />,
-  world: <Icon display='mapWorld' base />,
-  'single-state': <Icon display='mapAl' base />,
-  gear: <Icon display='gear' base />,
-  tools: <Icon display='tools' base />,
-  'filtered-text': <Icon display='filtered-text' base />,
-  'filter-dropdowns': <Icon display='filter-dropdowns' base />
-}
+import { iconHash } from '../helpers/iconHash'
 
 const labelHash = {
   'data-bite': 'Data Bite',
@@ -43,7 +26,9 @@ const labelHash = {
   world: 'World',
   'single-state': 'U.S. State',
   'filtered-text': 'Filtered Text',
-  'filter-dropdowns': 'Filter Dropdowns'
+  'filter-dropdowns': 'Filter Dropdowns',
+  Sankey: 'Sankey Chart',
+  table: 'Table'
 }
 
 type WidgetData = Visualization & { rowIdx: number; colIdx: number }
@@ -56,7 +41,6 @@ type WidgetProps = {
 const Widget = ({ data, addVisualization, type }: WidgetProps) => {
   const { overlay } = useGlobalContext()
   const { config } = useContext(DashboardContext)
-  if (!config) return null
   const rows = config.rows
   const visualizations = config.visualizations
   const dispatch = useContext(DashboardDispatchContext)
@@ -269,16 +253,16 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     }
   }, [data?.openModal])
 
-  let isConfigurationReady = false;
-  if(type === 'markup-include' || type === 'filter-dropdowns'){
-    isConfigurationReady = true;
-  } else if(data && data.formattedData) {
-    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){
-      isConfigurationReady = true;
+  let isConfigurationReady = false
+  if (type === 'markup-include' || type === 'filter-dropdowns') {
+    isConfigurationReady = true
+  } else if (data && data.formattedData) {
+    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) {
+      isConfigurationReady = true
     }
   }
 

package/src/helpers/filterData.ts

@@ -1,73 +1,96 @@
+import _ from 'lodash'
 import { SharedFilter } from '../types/SharedFilter'
-import { generateValuesForFilter } from './generateValuesForFilter'
 
 const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) => {
   if (!sharedFilter.parents?.length) {
     return 1
   } else {
-    let parent = filters.find(filter => sharedFilter.parents!.includes(filter.key))
+    const parent = filters.find(filter => sharedFilter.parents!.includes(filter.key))
     if (!parent) return 1
     return 1 + findFilterTier(filters, parent)
   }
 }
 
-export const filterData = (filters: SharedFilter[], _data: Object[], filterBehavior) => {
-  if (_data) {
-    let maxTier = 1
-    filters.forEach(sharedFilter => {
-      sharedFilter.tier = findFilterTier(filters, sharedFilter)
-    })
+function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
+  let maxTier = 1
+  filters.forEach(sharedFilter => {
+    sharedFilter.tier = findFilterTier(filters, sharedFilter)
+    if (sharedFilter.tier > maxTier) {
+      maxTier = sharedFilter.tier
+    }
+  })
+  return maxTier
+}
 
-    filters.forEach(sharedFilter => {
-      if (sharedFilter.tier && sharedFilter.tier > maxTier) {
-        maxTier = sharedFilter.tier
+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
+  })  : []
+}
 
-    let filteredData = _data
-    // TODO triple loop??
-    for (let i = 0; i < maxTier; i++) {
-      let filteredDataSubTier: any[] = []
-
-      filteredData.forEach(row => {
-        let add = true
-
-        filters.forEach(filter => {
-          // eslint-disable-next-line eqeqeq
-          if (filter.type !== 'urlfilter' && ((!filter.tier && i === 0) || filter.tier === i + 1) && (filter.queuedActive || filter.active) && row[filter.columnName!] != (filter.queuedActive || filter.active)) {
-            add = false
-          }
-        })
+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]
+      }
+    }
+  })
+}
 
-        if (add) filteredDataSubTier.push(row)
-      })
+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]
 
-      filters.forEach(sharedFilter => {
-        if (sharedFilter.tier && sharedFilter.tier === i + 2) {
-          sharedFilter.values = generateValuesForFilter(sharedFilter.columnName, { data: filteredDataSubTier }, filterBehavior)
-          if (sharedFilter.values.length > 0 && (!sharedFilter.active || sharedFilter.values.indexOf(sharedFilter.active) === -1)) {
-            sharedFilter.active = sharedFilter.values[0]
-          }
-        }
-      })
+    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] = { ...row, ...toAdd }
+    })
+  }
+  return newData
+}
 
-      filteredData = filteredDataSubTier
-    }
+/** 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)
 
-    let filteredDataSubTier: any[] = []
-    filteredData.forEach(row => {
-      let add = true
+  for (let i = 0; i < maxTier; i++) {
+    const lastIteration = i === maxTier - 1
 
-      filters.forEach(filter => {
-        // eslint-disable-next-line eqeqeq
-        if (filter.type !== 'urlfilter' && filter.tier && filter.tier === maxTier - 1 && (filter.queuedActive || filter.active) && row[filter.columnName!] != (filter.queuedActive || filter.active)) {
-          add = false
-        }
-      })
+    const filteredData = filter(_data, filters, i + 1)
 
-      if (add) filteredDataSubTier.push(row)
-    })
+    setFilterValuesAndActiveFilter(filters, filteredData, i)
 
-    return filteredDataSubTier
+    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

@@ -1,21 +1,11 @@
-import { FilterBehavior } from '../components/Header/Header'
-
-// Gets filter values from API response
-export const generateValuesForAPIFilter = (columnName, _data): string[] => {
-  type Row = { [key: string]: any }
-  return Object.values(_data)
-    .filter(row => row && !!(row as Row)[columnName])
-    .map(row => (row as Row)[columnName])
-}
-
 // Gets filter values from dataset
-export const generateValuesForFilter = (columnName, _data, filterBehavior) => {
+export const generateValuesForFilter = (columnName, _data) => {
   const values: string[] = []
 
   Object.keys(_data).forEach(key => {
     _data[key]?.forEach(row => {
       const value = row[columnName]
-      if (value && false === values.includes(value)) {
+      if (!values.includes(value)) {
         values.push(value)
       }
     })

package/src/helpers/getApiFilterKey.ts

@@ -0,0 +1,5 @@
+import { APIFilter } from '../types/APIFilter'
+
+export const getApiFilterKey = ({ apiEndpoint, heirarchyLookup }: APIFilter) => {
+  return apiEndpoint + (heirarchyLookup || '')
+}

package/src/helpers/getUpdateConfig.ts

@@ -5,6 +5,8 @@ import { generateValuesForFilter } from './generateValuesForFilter'
 import { getFormattedData } from './getFormattedData'
 import { getVizKeys } from './getVizKeys'
 
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+
 type UpdateState = Omit<DashboardState, 'config'> & {
   config?: DashboardConfig
 }
@@ -14,17 +16,28 @@ export const getUpdateConfig =
   (newConfig, dataOverride?: Object): [Config, Object] => {
     let newFilteredData = {}
     let visualizationKeys = getVizKeys(newConfig)
-    const setFilter = (filterIndex: number, key: string, value: any) => {
-      newConfig.dashboard.sharedFilters[filterIndex][key] = value
-    }
+
     if (newConfig.dashboard.sharedFilters) {
       newConfig.dashboard.sharedFilters.forEach((filter, i) => {
         const filterIsSetByVizData = !!visualizationKeys.find(key => key === filter.setBy)
-        let _filter = newConfig.dashboard.sharedFilters[i]
+        const _filter = newConfig.dashboard.sharedFilters[i]
 
-        if (filterIsSetByVizData) {
-          const filterValues = generateValuesForFilter(filter.columnName, dataOverride || state.data, state.config?.filterBehavior)
+        const setValuesAndActive = filterValues => {
+          _filter.values = filterValues
+          if (filterValues.length > 0) {
+            const defaultValues = _filter.pivot ? _filter.values : _filter.values[0]
+
+            const queryStringFilterValue = getQueryStringFilterValue(_filter)
+            if(queryStringFilterValue){
+              _filter.active = queryStringFilterValue
+            } else {
+              _filter.active = _filter.active || defaultValues
+            }
+          }
+        }
 
+        const filterValues = generateValuesForFilter(filter.columnName, dataOverride || state.data)
+        if (filterIsSetByVizData) {
           if (_filter.order === 'asc') {
             filterValues.sort()
           }
@@ -32,32 +45,21 @@ export const getUpdateConfig =
             filterValues.sort().reverse()
           }
 
-          setFilter(i, 'values', filterValues)
-          _filter = newConfig.dashboard.sharedFilters[i]
-          if (filterValues.length > 0) {
-            setFilter(i, 'active', _filter.active || _filter.values[0])
-          }
-        }
-
-        if ((!filter.values || filter.values.length === 0) && filter.showDropdown) {
-          const generatedValues = generateValuesForFilter(filter.columnName, dataOverride || state.data, state.config?.filterBehavior)
-          setFilter(i, 'values', generatedValues)
-          const _filter = newConfig.dashboard.sharedFilters[i]
-          if (_filter.values.length > 0) {
-            setFilter(i, 'active', filter.active || _filter.values[0])
-          }
+          setValuesAndActive(filterValues)
+        } else if ((!filter.values || filter.values.length === 0) && filter.showDropdown) {
+          setValuesAndActive(filterValues)
         }
       })
 
       visualizationKeys.forEach(visualizationKey => {
-        let applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
 
         if (applicableFilters.length > 0) {
           const visualization = newConfig.visualizations[visualizationKey]
           const _newConfigDataSet = newConfig.datasets[visualization.dataKey]
           const formattedData = getFormattedData(_newConfigDataSet?.data || visualization.data, visualization.dataDescription)
           const _data = formattedData || (dataOverride || state.data)[visualization.dataKey]
-          newFilteredData[visualizationKey] = filterData(applicableFilters, _data, state.config?.filterBehavior)
+          newFilteredData[visualizationKey] = filterData(applicableFilters, _data)
         }
       })
     }

package/src/helpers/iconHash.tsx

@@ -0,0 +1,34 @@
+import Icon from '@cdc/core/components/ui/Icon'
+import { Visualization } from '@cdc/core/types/Visualization'
+
+export const iconHash = {
+  'data-bite': <Icon display='databite' base />,
+  Bar: <Icon display='chartBar' base />,
+  'Spark Line': <Icon display='chartLine' />,
+  'waffle-chart': <Icon display='grid' base />,
+  'markup-include': <Icon display='code' base />,
+  Line: <Icon display='chartLine' base />,
+  Pie: <Icon display='chartPie' base />,
+  us: <Icon display='mapUsa' base />,
+  'us-county': <Icon display='mapUsa' base />,
+  world: <Icon display='mapWorld' base />,
+  'single-state': <Icon display='mapAl' base />,
+  gear: <Icon display='gear' base />,
+  tools: <Icon display='tools' base />,
+  'filtered-text': <Icon display='filtered-text' base />,
+  'filter-dropdowns': <Icon display='filter-dropdowns' base />,
+  table: <Icon display='table' base />,
+  Sankey: <Icon display='sankey' base />
+}
+
+export const getIcon = (visualization: Visualization) => {
+  const { type, visualizationType, general } = visualization
+  if (visualizationType) return iconHash[visualizationType]
+  if (general?.geoType) {
+    // for visualizations, mismatching state and state icon is not desired
+    // so instead of showing alabama as the default state icon we show the US icon.
+    if (general.geoType === 'single-state') return iconHash['us']
+    return iconHash[general.geoType]
+  }
+  return iconHash[type]
+}

package/src/helpers/tests/filterData.test.ts

@@ -0,0 +1,149 @@
+import { SharedFilter } from '../../types/SharedFilter'
+import { filterData } from '../filterData'
+
+describe('filterData', () => {
+  it('should filter data based on the provided filters', () => {
+    const filters = [
+      { tier: 1, columnName: 'name', active: 'John', queuedActive: 'John', fileName: 'abc', key: 'abc' },
+      { tier: 2, columnName: 'age', active: 30, queuedActive: 30, fileName: 'abc', key: 'abc' }
+    ] as SharedFilter[]
+    const data = [
+      { name: 'John', age: 30 },
+      { name: 'Jane', age: 25 },
+      { name: 'John', age: 35 },
+      { name: 'Jane', age: 30 }
+    ]
+
+    const result = filterData(filters, data)
+
+    expect(result).toEqual([{ name: 'John', age: 30 }])
+  })
+
+  it('filters with parents', () => {
+    const filters = [
+      { columnName: 'name', active: 'John', queuedActive: 'John', fileName: 'abc', key: 'abc' },
+      { columnName: 'age', active: 30, queuedActive: 30, fileName: 'abc', key: 'abc', parents: ['name'] }
+    ] as SharedFilter[]
+    const data = [
+      { name: 'John', age: 30 },
+      { name: 'Jane', age: 25 },
+      { name: 'John', age: 35 },
+      { name: 'Jane', age: 30 }
+    ]
+
+    const result = filterData(filters, data)
+
+    expect(result).toEqual([{ name: 'John', age: 30 }])
+  })
+
+  it('causes sideEffects to filters', () => {
+    // the side effect is not desired, but current functionality depends on the sideEffect.
+    // hopefully the side effect will be refactored in the future to be a returned value.
+    const filters = [
+      { columnName: 'name', active: 'John', queuedActive: 'John', fileName: 'abc', key: 'name' },
+      { columnName: 'age', fileName: 'abc', key: 'age' },
+      { columnName: 'color', fileName: 'abc', key: 'color', parents: ['age'] }
+    ] as SharedFilter[]
+    const data = [
+      { name: 'John', age: 30, color: 'blue' },
+      { name: 'Jane', age: 25, color: 'red' },
+      { name: 'John', age: 35, color: 'yellow' },
+      { name: 'Jane', age: 30, color: 'green' }
+    ]
+
+    const result = filterData(filters, data)
+
+    expect(result).toEqual([{ name: 'John', age: 30, color: 'blue' }])
+
+    const sideEffectOfFiltering = [
+      {
+        columnName: 'name',
+        active: 'John',
+        queuedActive: 'John',
+        fileName: 'abc',
+        key: 'name',
+        tier: 1
+      },
+      { columnName: 'age', fileName: 'abc', key: 'age', tier: 1 },
+      {
+        columnName: 'color',
+        fileName: 'abc',
+        key: 'color',
+        parents: ['age'],
+        tier: 2,
+        values: ['blue', 'yellow'],
+        active: 'blue'
+      }
+    ]
+    expect(filters).toEqual(sideEffectOfFiltering)
+  })
+
+  it('should not include data that does not meet the filter criteria', () => {
+    const filters = [
+      //{ columnName: 'apple', fileName: 'abc', key: 'banana' },
+      { columnName: 'color', active: 'red', queuedActive: 'red', fileName: 'abc', key: 'color' },
+      { columnName: 'name', fileName: 'abc', key: 'name' },
+      { columnName: 'age', fileName: 'abc', key: 'age', parents: ['name'] }
+    ] as SharedFilter[]
+    const data = [
+      { name: 'Jane', age: 30, color: 'blue' },
+      { name: 'John', age: 25, color: 'red' },
+      { name: 'John', age: 25, color: 'green' }
+      //{ name: 'John', age: 25, color: 'red', apple: 'banana' }
+    ]
+
+    const result = filterData(filters, data)
+    expect(result).toEqual([{ name: 'John', age: 25, color: 'red' }])
+  })
+
+  it('should pivot data based on the provided filters', () => {
+    const filters = [{ key: 'Race', type: 'datafilter', showDropdown: true, columnName: 'Race', pivot: 'Age-adjusted rate', usedBy: ['table1707935263149'] }] as SharedFilter[]
+    const data = [
+      {
+        Race: 'Hispanic or Latino',
+        'Age-adjusted rate': '644.2',
+        Year: '2016'
+      },
+      {
+        Race: 'Non-Hispanic American Indian',
+        'Age-adjusted rate': '636.1',
+        Year: '2016'
+      },
+      {
+        Race: 'Non-Hispanic Black',
+        'Age-adjusted rate': '563.7',
+        Year: '2016'
+      },
+      {
+        Race: 'Hispanic or Latino',
+        'Age-adjusted rate': '644.2',
+        Year: '2017'
+      },
+      {
+        Race: 'Non-Hispanic American Indian',
+        'Age-adjusted rate': '636.1',
+        Year: '2017'
+      },
+      {
+        Race: 'Non-Hispanic Black',
+        'Age-adjusted rate': '563.7',
+        Year: '2017'
+      }
+    ]
+
+    expect(filterData(filters, data)).toEqual([
+      {
+        'Hispanic or Latino': '644.2',
+        'Non-Hispanic American Indian': '636.1',
+        'Non-Hispanic Black': '563.7',
+        Year: '2016'
+      },
+      {
+        'Hispanic or Latino': '644.2',
+        'Non-Hispanic American Indian': '636.1',
+        'Non-Hispanic Black': '563.7',
+        Year: '2017'
+      }
+    ])
+  })
+})

package/src/images/icon-toggle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zm192 96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>

package/src/scss/grid.scss

@@ -77,7 +77,7 @@ $red: #f74242;
 
 .row-menu__btn:hover .row-menu__flyout {
   transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  width: 144px;
+  width: 180px;
 
   li {
     display: flex;

package/src/scss/main.scss

@@ -187,6 +187,9 @@
   .dashboard-row {
     display: flex;
     flex-direction: column;
+    &.toggle {
+      display: block;
+    }
   }
 
   .dashboard-col {
@@ -197,6 +200,9 @@
       margin-left: 0;
       margin-right: 0;
     }
+    &.hidden-toggle {
+      display: none;
+    }
   }
 
   .dashboard-col-12 {