@cdc/dashboard 4.24.10 → 4.24.12-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.24.10",
+  "version": "4.24.12-2",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -27,13 +27,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.24.10",
-    "@cdc/core": "^4.24.10",
-    "@cdc/data-bite": "^4.24.10",
-    "@cdc/filtered-text": "^4.24.10",
-    "@cdc/map": "^4.24.10",
-    "@cdc/markup-include": "^4.24.10",
-    "@cdc/waffle-chart": "^4.24.10",
+    "@cdc/chart": "^4.24.12-2",
+    "@cdc/core": "^4.24.12-2",
+    "@cdc/data-bite": "^4.24.12-2",
+    "@cdc/filtered-text": "^4.24.12-2",
+    "@cdc/map": "^4.24.12-2",
+    "@cdc/markup-include": "^4.24.12-2",
+    "@cdc/waffle-chart": "^4.24.12-2",
     "html-react-parser": "^3.0.8",
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
@@ -49,5 +49,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "a4d88d1bc91f596e1b0307d8e25c57ad8c668b75"
+  "gitHead": "a60edf1148396309eb473ac9f65426ee40797ddf"
 }

package/src/CdcDashboard.tsx

@@ -3,7 +3,6 @@ import CdcDashboard from './CdcDashboardComponent'
 import { MultiDashboardConfig } from './types/MultiDashboard'
 import Loading from '@cdc/core/components/Loading'
 import defaults from './data/initial-state'
-import { processData } from './helpers/processData'
 import { getVizKeys } from './helpers/getVizKeys'
 import { processDataLegacy } from './helpers/processDataLegacy'
 import { WCMSProps } from '@cdc/core/types/WCMSProps'
@@ -13,40 +12,47 @@ import { InitialState } from './types/InitialState'
 import { DashboardConfig } from './types/DashboardConfig'
 import { coveUpdateWorker } from '@cdc/core/helpers/coveUpdateWorker'
 import _ from 'lodash'
-import { hasDashboardApplyBehavior } from './helpers/hasDashboardApplyBehavior'
+import { getQueryParams } from '@cdc/core/helpers/queryStringUtils'
 
 type MultiDashboardProps = Omit<WCMSProps, 'configUrl'> & {
   configUrl?: string
   config?: MultiDashboardConfig
 }
 
-const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, config: editorConfig, isEditor, isDebug }) => {
+const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
+  configUrl,
+  config: editorConfig,
+  isEditor,
+  isDebug
+}) => {
   const [initial, setInitial] = useState<InitialState>(undefined)
 
-  const getSelectedConfig = (config: MultiDashboardConfig, selectedConfig?: string): number | null => {
+  const getSelectedConfig = (config: MultiDashboardConfig): number | null => {
     if (!config.multiDashboards) return null
-    // TODO: if query parameter select based on query parameter
-    if (selectedConfig) {
-      const foundConfig = Object.values(config.multiDashboards).findIndex(({ label }) => {
-        return label === selectedConfig
-      })
-      if (foundConfig > -1) return foundConfig
+    // if query parameter, select based on query parameter
+    const selectedConfig = getQueryParams()['cove-tab']
+    if (selectedConfig !== undefined && Number(selectedConfig) < config.multiDashboards.length) {
+      return Number(selectedConfig)
     }
     // else select the first available
     return 0
   }
 
-  const formatInitialState = (newConfig: MultiDashboardConfig | DashboardConfig, datasets: Record<string, Object[]>) => {
+  const formatInitialState = (
+    newConfig: MultiDashboardConfig | DashboardConfig,
+    datasets: Record<string, Object[]>
+  ) => {
     const [config, filteredData] = getUpdateConfig(initialState)(newConfig, datasets)
     const versionedConfig = coveUpdateWorker(config)
     return { ...initialState, config: versionedConfig, filteredData, data: datasets }
   }
 
-  const loadConfig = async (selectedConfig?: string) => {
+  const loadConfig = async () => {
     const _config: MultiDashboardConfig = editorConfig || (await (await fetch(configUrl)).json())
-    const selected = getSelectedConfig(_config, selectedConfig)
+    const selected = getSelectedConfig(_config)
 
-    const { newConfig, datasets } = selected !== null ? await loadMultiDashboard(_config, selected) : await loadSingleDashboard(_config)
+    const { newConfig, datasets } =
+      selected !== null ? await loadMultiDashboard(_config, selected) : await loadSingleDashboard(_config)
     setInitial(formatInitialState(newConfig, datasets))
   }
 
@@ -54,18 +60,13 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, confi
     loadConfig()
   }, [])
 
-  const loadData = async (initialConfig: DashboardConfig | MultiDashboardConfig) => {
+  const prepareDatasets = (initialConfig: DashboardConfig | MultiDashboardConfig) => {
     let newConfig = { ...initialConfig }
-    let datasets: Record<string, Object[]> = {}
-    await Promise.all(
-      Object.keys(initialConfig.datasets).map(async key => {
-        const legacySupportApply = (initialConfig as any).filterBehavior === 'Apply Button'
-        const hasApplyBehavior = hasDashboardApplyBehavior(initialConfig.visualizations) || legacySupportApply
-        const data = await processData(initialConfig.datasets[key], !hasApplyBehavior)
-        datasets[key] = data || []
-      })
-    )
-
+    const datasets: Record<string, Object[]> = Object.keys(initialConfig.datasets).reduce((acc, key) => {
+      const dataset = initialConfig.datasets[key]
+      acc[key] = dataset.formattedData || dataset.data
+      return acc
+    }, {})
     getVizKeys(newConfig).forEach(vizKey => {
       const formattedData = datasets[newConfig.visualizations[vizKey].dataKey]
       if (formattedData) {
@@ -84,7 +85,7 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, confi
     let newConfig = { ...defaults, ...config } as DashboardConfig
 
     if (config.datasets) {
-      return await loadData(newConfig)
+      return prepareDatasets(newConfig)
     } else {
       const dataKey = newConfig.dataFileName || 'backwards-compatibility'
       const data = await processDataLegacy(config)
@@ -101,7 +102,14 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, confi
         newConfig.visualizations[vizKey] = { ...newConfig.visualizations[vizKey], ...newData }
       })
 
-      const blankFields = { data: [], dataUrl: '', dataFileName: '', dataFileSourceType: '', dataDescription: {}, formattedData: [] }
+      const blankFields = {
+        data: [],
+        dataUrl: '',
+        dataFileName: '',
+        dataFileSourceType: '',
+        dataDescription: {},
+        formattedData: []
+      }
       newConfig = { ...newConfig, ...blankFields }
 
       if (newConfig.dashboard.filters) {
@@ -122,8 +130,14 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, confi
 
   const loadMultiDashboard = async (multiConfig: MultiDashboardConfig, selectedConfig: number) => {
     const selectedDashboard = multiConfig.multiDashboards[selectedConfig]
-    let newConfig = { ...defaults, ...multiConfig, ...selectedDashboard, multiDashboards: multiConfig.multiDashboards, activeDashboard: selectedConfig } as MultiDashboardConfig
-    return await loadData(newConfig)
+    const newConfig = {
+      ...defaults,
+      ...multiConfig,
+      ...selectedDashboard,
+      multiDashboards: multiConfig.multiDashboards,
+      activeDashboard: selectedConfig
+    } as MultiDashboardConfig
+    return prepareDatasets(newConfig)
   }
 
   if (!initial) return <Loading />

package/src/CdcDashboardComponent.tsx

@@ -35,6 +35,7 @@ import './scss/main.scss'
 
 import VisualizationsPanel from './components/VisualizationsPanel'
 import dashboardReducer from './store/dashboard.reducer'
+import errorMessagesReducer from './store/errorMessage/errorMessage.reducer'
 import { filterData } from './helpers/filterData'
 import { getVizKeys } from './helpers/getVizKeys'
 import Title from '@cdc/core/components/ui/Title'
@@ -42,13 +43,12 @@ import { type TableConfig } from '@cdc/core/components/DataTable/types/TableConf
 
 // types
 import { type SharedFilter } from './types/SharedFilter'
-import { type APIFilter } from './types/APIFilter'
 import { type WCMSProps } from '@cdc/core/types/WCMSProps'
 import { type InitialState } from './types/InitialState'
 import MultiTabs from './components/MultiConfigTabs'
 import _ from 'lodash'
 import EditorContext from '../../editor/src/ConfigContext'
-import { APIFilterDropdowns, DropdownOptions } from './components/DashboardFilters'
+import { APIFilterDropdowns } from './components/DashboardFilters'
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import VisualizationRow from './components/VisualizationRow'
@@ -62,9 +62,10 @@ import { addValuesToDashboardFilters } from './helpers/addValuesToDashboardFilte
 import { DashboardFilters } from './types/DashboardFilters'
 import DashboardSharedFilters from './components/DashboardFilters'
 import ExpandCollapseButtons from './components/ExpandCollapseButtons'
-import { hasDashboardApplyBehavior } from './helpers/hasDashboardApplyBehavior'
 import { loadAPIFiltersFactory } from './helpers/loadAPIFilters'
 import Loader from '@cdc/core/components/Loader'
+import Alert from '@cdc/core/components/Alert'
+import { shouldLoadAllFilters } from './helpers/shouldLoadAllFilters'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -72,6 +73,7 @@ type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
 
 export default function CdcDashboard({ initialState, isEditor = false, isDebug = false }: DashboardProps) {
   const [state, dispatch] = useReducer(dashboardReducer, initialState)
+  const [errorMessages, dispatchErrorMessages] = useReducer(errorMessagesReducer, [])
   const editorContext = useContext(EditorContext)
   const [apiFilterDropdowns, setAPIFilterDropdowns] = useState<APIFilterDropdowns>({})
   const [currentViewport, setCurrentViewport] = useState<ViewPort>('lg')
@@ -82,7 +84,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   const isPreview = state.tabSelected === 'Dashboard Preview'
 
   const inNoDataState = useMemo(() => {
-    const vals = Object.values(state.data)
+    const vals = reloadURLHelpers.getDatasetKeys(state.config).map(key => state.data[key])
     if (!vals.length) return true
     return vals.some(val => val === undefined)
   }, [state.data])
@@ -97,7 +99,12 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       .reduce((acc, viz: DashboardFilters) => (viz.autoLoad ? [...acc, ...viz.sharedFilterIndexes] : acc), [])
   }, [state.config.visualizations])
 
-  const loadAPIFilters = loadAPIFiltersFactory(dispatch, setAPIFilterDropdowns, autoLoadFilterIndexes)
+  const loadAPIFilters = loadAPIFiltersFactory(
+    dispatch,
+    dispatchErrorMessages,
+    setAPIFilterDropdowns,
+    autoLoadFilterIndexes
+  )
 
   const reloadURLData = async (newFilters?: SharedFilter[]) => {
     const config = _.cloneDeep(state.config)
@@ -121,7 +128,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         filters.forEach(filter => {
           if (
             filter.type === 'urlfilter' &&
-            reloadURLHelpers.filterUsedByDataUrl(filter, datasetKey, config.visualizations)
+            reloadURLHelpers.filterUsedByDataUrl(filter, datasetKey, config.visualizations, config.rows)
           ) {
             if (filter.filterBy === 'File Name') {
               newFileName = reloadURLHelpers.getNewFileName(newFileName, filter, datasetKey)
@@ -138,10 +145,9 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             if (!!filter.setByQueryParameter) {
               const windowQueryParams = Object.fromEntries(new URLSearchParams(window.location.search))
               const filterValue = windowQueryParams[filter.setByQueryParameter]
-              if (filter.apiFilter) {
-                updatedQSParams[filter.apiFilter.valueSelector] = filterValue
-              } else {
-                updatedQSParams[filter.setByQueryParameter] = filterValue
+              const queryParam = filter.apiFilter?.valueSelector || filter.setByQueryParameter
+              if (filterValue) {
+                updatedQSParams[queryParam] = filterValue
               }
             }
 
@@ -154,7 +160,9 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           }
         })
 
-        if (!!newFilters || reloadURLHelpers.isUpdateNeeded(filters, currentQSParams, updatedQSParams)) {
+        const dataNeedsUpdate = reloadURLHelpers.isUpdateNeeded(filters, currentQSParams, updatedQSParams)
+
+        if (!!newFilters || dataNeedsUpdate) {
           dataWasFetched = true
           const dataUrlFinal = reloadURLHelpers.getDataURL(
             { ...currentQSParams, ...updatedQSParams },
@@ -163,34 +171,60 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           )
 
           setAPILoading(true)
-          await fetchRemoteData(dataUrlFinal).then(responseData => {
-            let data: any[] = responseData
-            if (responseData && dataset.dataDescription) {
-              try {
-                data = transform.autoStandardize(data)
-                data = transform.developerStandardize(data, dataset.dataDescription)
-              } catch (e) {
-                //Data not able to be standardized, leave as is
+          await fetchRemoteData(dataUrlFinal)
+            .then(responseData => {
+              let data: any[] = responseData
+              if (responseData && dataset.dataDescription) {
+                try {
+                  data = transform.autoStandardize(data)
+                  data = transform.developerStandardize(data, dataset.dataDescription)
+                } catch (e) {
+                  //Data not able to be standardized, leave as is
+                  console.error('Error standardizing data:', e)
+                }
               }
-            }
-            newDatasets[datasetKey].data = data
-            newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
-            newData[datasetKey] = data
-          })
+              newDatasets[datasetKey].data = data
+              newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
+              newData[datasetKey] = data
+            })
+            .catch(e => {
+              console.error(e)
+              dispatchErrorMessages({
+                type: 'ADD_ERROR_MESSAGE',
+                payload: 'There was a problem returning data. Please try again.'
+              })
+              newDatasets[datasetKey].data = []
+              newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
+              newData[datasetKey] = []
+            })
         }
       }
     }
 
-    if (dataWasFetched) {
-      dispatch({ type: 'SET_DATA', payload: newData })
-      const filtersWithNewValues = addValuesToDashboardFilters(filters, newData)
-      const dashboardConfig = newFilters
-        ? { ...config.dashboard, sharedFilters: filtersWithNewValues }
-        : config.dashboard
+    const datasetsWithFiles = _.pickBy(newDatasets, dataset => !dataset.dataUrl)
+
+    if (dataWasFetched || Object.keys(datasetsWithFiles).length) {
+      const dataFiles = Object.keys(datasetsWithFiles).reduce((acc, key) => {
+        acc[key] = datasetsWithFiles[key].data
+        return acc
+      }, {})
+      const _newData = { ...newData, ...dataFiles }
+      dispatch({ type: 'SET_DATA', payload: _newData })
+      const dataFilterIndexes = config.dashboard.sharedFilters.reduce((acc, filter, index) => {
+        if (filter.type === 'datafilter') acc.push(index)
+        return acc
+      }, [])
+      const appliedFilterIndexes = Object.values(config.visualizations)
+        .filter(viz => viz.type === 'dashboardFilters')
+        .flatMap(viz => viz.sharedFilterIndexes)
+        .filter(index => !dataFilterIndexes.includes(index))
+      const filtersWithNewValues = addValuesToDashboardFilters(filters, _newData, appliedFilterIndexes)
+
+      const dashboardConfig = { ...config.dashboard, sharedFilters: filtersWithNewValues }
       const filteredData = getFilteredData(
         { ...state, config: { ...state.config, dashboard: dashboardConfig } },
         {},
-        newData
+        _newData
       )
       dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
       const visualizations = reloadURLHelpers.getVisualizationsWithFormattedData(config.visualizations, newData)
@@ -230,15 +264,16 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   }
 
   useEffect(() => {
-    if (isEditor && !isPreview) return
     const { config } = state
-    if (!hasDashboardApplyBehavior(config.visualizations)) {
-      reloadURLData()
-    }
-
+    const loadAllFilters = shouldLoadAllFilters(config, isEditor && !isPreview)
     const sharedFiltersWithValues = addValuesToDashboardFilters(config.dashboard.sharedFilters, state.data)
-    loadAPIFilters(sharedFiltersWithValues, apiFilterDropdowns)
-    updateFilteredData(sharedFiltersWithValues)
+
+    loadAPIFilters(sharedFiltersWithValues, apiFilterDropdowns, loadAllFilters).then(newFilters => {
+      const allValuesSelected = newFilters.every(filter => {
+        return filter.type === 'datafilter' || filter.active
+      })
+      if (allValuesSelected) reloadURLData(newFilters)
+    })
   }, [isEditor, isPreview, state.config?.activeDashboard])
 
   const updateChildConfig = (visualizationKey, newConfig) => {
@@ -262,13 +297,6 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     }
   }
 
-  const updateFilteredData = (sharedFilters = undefined) => {
-    const clonedState = _.cloneDeep(state)
-    if (sharedFilters) clonedState.config.dashboard.sharedFilters = sharedFilters
-    const newFilteredData = getFilteredData(clonedState)
-    dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-  }
-
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let newViewport = getViewport(entry.contentRect.width)
@@ -421,8 +449,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             )
             break
           case 'dashboardFilters':
-            const hideFilter = visualizationConfig.autoLoad && inNoDataState
-            body = !hideFilter ? (
+            body = (
               <>
                 <Header visualizationKey={visualizationKey} subEditor='Filter Dropdowns' />
                 <DashboardSharedFilters
@@ -432,8 +459,6 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                   setConfig={_updateConfig}
                 />
               </>
-            ) : (
-              <></>
             )
             break
           case 'table':
@@ -453,11 +478,12 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             body = (
               <>
                 <Header visualizationKey={visualizationKey} subEditor='Footnotes' />
+                {/* Datasets are passed in just for reference and need to be removed */}
                 <FootnotesStandAlone
                   visualizationKey={visualizationKey}
                   config={{ ...visualizationConfig, datasets: state.config.datasets }}
                   isEditor={true}
-                  updateConfig={_updateConfig}
+                  updateConfig={conf => _updateConfig(_.omit(conf, 'datasets'))}
                 />
               </>
             )
@@ -492,6 +518,14 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         {isEditor && <Header />}
         {apiLoading && <Loader fullScreen={true} />}
         <MultiTabs isEditor={isEditor && !isPreview} />
+        {errorMessages.map((message, index) => (
+          <Alert
+            type='danger'
+            onDismiss={() => dispatchErrorMessages({ type: 'DISMISS_ERROR_MESSAGE', payload: index })}
+            message={message}
+            autoDismiss={true}
+          />
+        ))}
         <Layout.Responsive isEditor={isEditor}>
           <div className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''}`}>
             <Title
@@ -518,7 +552,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                     return (
                       <>
                         {/* Expand/Collapse All */}
-                        {row.expandCollapseAllButtons === true && (
+                        {!inNoDataState && row.expandCollapseAllButtons === true && (
                           <ExpandCollapseButtons setAllExpanded={setAllExpanded} />
                         )}
                         {Object.keys(dataGroups).map(groupName => {
@@ -535,6 +569,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                               updateChildConfig={updateChildConfig}
                               apiFilterDropdowns={apiFilterDropdowns}
                               currentViewport={currentViewport}
+                              inNoDataState={inNoDataState}
                             />
                           )
                         })}
@@ -552,11 +587,14 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                         updateChildConfig={updateChildConfig}
                         apiFilterDropdowns={apiFilterDropdowns}
                         currentViewport={currentViewport}
+                        inNoDataState={inNoDataState}
                       />
                     )
                   }
                 })}
 
+            {inNoDataState ? <div className='mt-5'>Please complete your selection to continue.</div> : <></>}
+
             {/* Image or PDF Inserts */}
             <section className='download-buttons'>
               {config.table?.downloadImageButton && (
@@ -667,7 +705,8 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           isDebug,
           loadAPIFilters,
           setAPIFilterDropdowns,
-          reloadURLData
+          reloadURLData,
+          setAPILoading
         }}
       >
         <DashboardDispatchContext.Provider value={dispatch}>

package/src/DashboardContext.tsx

@@ -17,6 +17,7 @@ type ConfigCTX = DashboardState & {
     recursiveLimit?: number
   ) => Promise<SharedFilter[]>
   setAPIFilterDropdowns: (dropdowns: APIFilterDropdowns) => void
+  setAPILoading: (loading: boolean) => void
 }
 
 const firstTab: Tab = 'Dashboard Description'
@@ -33,6 +34,7 @@ const initialContext: ConfigCTX = {
   outerContainerRef: () => {},
   setParentConfig: () => {},
   setAPIFilterDropdowns: () => {},
+  setAPILoading: () => {},
   reloadURLData: () => {},
   loadAPIFilters: () => Promise.resolve([]),
   isDebug: false,

package/src/_stories/Dashboard.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { faker } from '@faker-js/faker'
 import APIFiltersMapData from './_mock/api-filter-map.json'
 import APIFiltersChartData from './_mock/api-filter-chart.json'
+import APIFilterErrorConfig from './_mock/api-filter-error.json'
 import ExampleConfig_1 from './_mock/dashboard-gallery.json'
 import ExampleConfig_2 from './_mock/dashboard-2.json'
 import ExampleConfig_3 from './_mock/dashboard_no_filter.json'
@@ -66,6 +67,13 @@ export const Dashboard_Filters: Story = {
   }
 }
 
+export const API_Filter_Error: Story = {
+  args: {
+    config: APIFilterErrorConfig,
+    isEditor: false
+  }
+}
+
 export const StandAloneTable: Story = {
   args: {
     config: StandaloneTable,

package/src/_stories/_mock/api-filter-error.json

@@ -0,0 +1,55 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "New Dashboard Filter 1",
+        "showDropdown": true,
+        "type": "urlfilter",
+        "apiFilter": {
+          "apiEndpoint": "https://nccd-cove-public-api.apps.ecpaas-dev.cdc.gov/od-public?$datakey=brfss_prevalence_cove_explore_by_t",
+          "valueSelector": "",
+          "textSelector": ""
+        },
+        "tier": 1
+      }
+    ]
+  },
+  "rows": [{ "columns": [{ "width": 12, "widget": "dashboardFilters1730831317688" }, {}, {}] }],
+  "visualizations": {
+    "dashboardFilters1730831317688": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": true,
+      "openModal": true,
+      "uid": "dashboardFilters1730831317688",
+      "type": "dashboardFilters",
+      "sharedFilterIndexes": [0],
+      "visualizationType": "dashboardFilters"
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showDownloadLinkBelow": true,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {
+    "https://nccd-cove-public-api.apps.ecpaas-dev.cdc.gov/od-public?$datakey=brfss_prevalence_cove_explore_by_topic": {
+      "dataFileSize": 35061,
+      "dataFileName": "https://nccd-cove-public-api.apps.ecpaas-dev.cdc.gov/od-public?$datakey=brfss_prevalence_cove_explore_by_topic",
+      "dataFileSourceType": "url",
+      "dataFileFormat": "JSON",
+      "preview": true,
+      "dataUrl": "https://nccd-cove-public-api.apps.ecpaas-dev.cdc.gov/od-public?$datakey=brfss_prevalence_cove_explore_by_topic"
+    }
+  },
+  "isResponsiveTicks": false,
+  "type": "dashboard",
+  "barThickness": "0.37",
+  "xAxis": { "type": "categorical", "size": 75, "maxTickRotation": 45, "labelOffset": 0 },
+  "runtime": {},
+  "version": "4.24.10"
+}

package/src/_stories/_mock/group-pivot-filter.json

@@ -30,7 +30,12 @@
           "valueColumns": ["age", "color"]
         }
       },
-      "columns": {},
+      "columns": {
+        "other": {
+          "name": "other",
+          "dataTable": false
+        }
+      },
       "dataFormat": {},
       "visualizationType": "table",
       "dataDescription": {
@@ -59,10 +64,10 @@
   "datasets": {
     "valid-data-chart.csv": {
       "data": [
-        { "name": "John", "age": 25, "color": "blue", "city": "New York" },
-        { "name": "Jane", "age": 27, "color": "red", "city": "New York" },
-        { "name": "Jane", "age": 30, "color": "yellow", "city": "San Francisco" },
-        { "name": "John", "age": 31, "color": "green", "city": "San Francisco" }
+        { "name": "John", "age": 25, "color": "blue", "other": "no", "city": "New York" },
+        { "name": "Jane", "age": 27, "color": "red", "other": "yes", "city": "New York" },
+        { "name": "Jane", "age": 30, "color": "yellow", "other": "no", "city": "San Francisco" },
+        { "name": "John", "age": 31, "color": "green", "other": "yes", "city": "San Francisco" }
       ],
       "dataFileSize": 178,
       "dataFileName": "valid-data-chart.csv",

package/src/components/CollapsibleVisualizationRow.tsx

@@ -8,10 +8,16 @@ type CollapsableVizRow = {
   groupName: string
   currentViewport: string
 }
-const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({ allExpanded, fontSize, groupName, currentViewport, children }) => {
+const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
+  allExpanded,
+  fontSize,
+  groupName,
+  currentViewport,
+  children
+}) => {
   const [isExpanded, setIsExpanded] = useState(allExpanded)
   const fontSizes = { small: 16, medium: 18, large: 20 }
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? '13px' : `${fontSizes[fontSize]}px`
+  const titleFontSize = ['xs', 'xxs'].includes(currentViewport) ? '13px' : `${fontSizes[fontSize]}px`
 
   useEffect(() => {
     setIsExpanded(allExpanded)