npm - @cdc/dashboard - Versions diffs - 4.24.4 → 4.24.5 - Mend

@cdc/dashboard 4.24.4 → 4.24.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/cdcdashboard.js +131937 -104935
package/index.html +3 -3
package/package.json +9 -9
package/src/CdcDashboardComponent.tsx +73 -110
package/src/_stories/Dashboard.stories.tsx +39 -15
package/src/_stories/_mock/api-filter-chart.json +35 -11
package/src/_stories/_mock/api-filter-map.json +31 -17
package/src/_stories/_mock/dashboard-gallery.json +534 -523
package/src/_stories/_mock/markup-include.json +78 -0
package/src/_stories/_mock/multi-dashboards.json +914 -0
package/src/_stories/_mock/pivot-filter.json +2 -0
package/src/_stories/_mock/standalone-table.json +2 -0
package/src/components/Header/FilterModal.tsx +14 -10
package/src/components/MultiConfigTabs/MultiTabs.tsx +3 -2
package/src/components/VisualizationRow.tsx +14 -5
package/src/components/VisualizationsPanel.tsx +26 -3
package/src/components/Widget.tsx +2 -2
package/src/helpers/filterData.ts +15 -17
package/src/store/dashboard.actions.ts +1 -10
package/src/store/dashboard.reducer.ts +15 -13
package/src/types/APIFilter.ts +5 -4
package/src/components/EditorWrapper/EditorWrapper.tsx +0 -52
package/src/components/EditorWrapper/editor-wrapper.style.css +0 -13

package/index.html CHANGED Viewed

@@ -21,12 +21,12 @@
   </head>
   <body>
-    <!-- <div class="react-container" data-config="/examples/full-dashboard.json"></div> -->
+    <div class="react-container" data-config="/examples/full-dashboard.json"></div>
     <!-- <div class="react-container" data-config="/examples/dashboard-gallery.json"></div> -->
-    <div class="react-container" data-config="/examples/filtered-dash.json"></div>
+    <!-- <div class="react-container" data-config="/examples/filtered-dash.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/all-components.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/sankey.json"></div> -->
-    <div class="react-container" data-config="/examples/DEV-6574.json"></div>
+    <!-- <div class="react-container" data-config="/examples/DEV-6574.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/default-multi-dataset-2.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/default-multi-dataset.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/default-filter-control.json"></div> -->

package/package.json CHANGED Viewed

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

package/src/CdcDashboardComponent.tsx CHANGED Viewed

@@ -40,7 +40,6 @@ import { capitalizeSplitAndJoin } from '@cdc/core/helpers/cove/string'
 import VisualizationsPanel from './components/VisualizationsPanel'
 import dashboardReducer from './store/dashboard.reducer'
 import { filterData } from './helpers/filterData'
-import { getFormattedData } from './helpers/getFormattedData'
 import { getVizKeys } from './helpers/getVizKeys'
 import Title from '@cdc/core/components/ui/Title'
 import { type TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
@@ -56,13 +55,11 @@ import _ from 'lodash'
 import EditorContext from '../../editor/src/ConfigContext'
 import { getApiFilterKey } from './helpers/getApiFilterKey'
 import Filters, { APIFilterDropdowns, DropdownOptions } from './components/Filters'
-import EditorWrapper from './components/EditorWrapper/EditorWrapper'
-import DataTableEditorPanel from '@cdc/core/components/DataTable/components/DataTableEditorPanel'
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import VisualizationRow from './components/VisualizationRow'
 import { getVizConfig } from './helpers/getVizConfig'
-import { getApplicableFilters, getFilteredData } from './helpers/getFilteredData'
+import { getFilteredData } from './helpers/getFilteredData'
 import { getVizRowColumnLocator } from './helpers/getVizRowColumnLocator'
 import Layout from '@cdc/core/components/Layout'
@@ -103,7 +100,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   const transform = new DataTransform()
-  const setAutoLoadDefaultValue = (sharedFilterIndex: number, filterDropdowns: DropdownOptions, dashboardConfigOverride) => {
+  const setAutoLoadDefaultValue = (sharedFilterIndex: number, filterDropdowns: DropdownOptions) => {
     const autoLoadViz = getAutoLoadVisualization()
     if (!autoLoadViz) return // no autoLoading happening
     const notIncludedInAutoLoad = autoLoadViz.hide
@@ -111,22 +108,20 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       // we don't want to auto load it
       return
     } else {
-      const sharedFilters = dashboardConfigOverride.sharedFilters
-      const sharedFilter = sharedFilters[sharedFilterIndex]
+      const sharedFilter = state.config.dashboard.sharedFilters[sharedFilterIndex]
       if (sharedFilter.active) return // a value has already been selected.
-      const filterParents = sharedFilters.filter(f => sharedFilter.parents?.includes(f.key))
-      const notAllParentFiltersSelected = filterParents.some(p => !p.active && !p.queuedActive)
+      const filterParents = state.config.dashboard.sharedFilters.filter(f => sharedFilter.parents?.includes(f.key))
+      const notAllParentFiltersSelected = filterParents.some(p => !p.active)
       if (filterParents && notAllParentFiltersSelected) return
       const defaultFilterDropdown = filterDropdowns.find(({ value }) => value === sharedFilter.apiFilter!.defaultValue)
-      const defaultValue = defaultFilterDropdown?.value || filterDropdowns[0].value
-      sharedFilter.active = defaultValue
+      let defaultValue = defaultFilterDropdown?.value || filterDropdowns[0].value
+      changeFilterActive(sharedFilterIndex, defaultValue)
     }
   }
-  const loadAPIFilters = (dashboardConfigOverride = undefined) => {
-    const sharedFilters = (dashboardConfigOverride || state.config.dashboard).sharedFilters
-    if (sharedFilters) {
-      const sharedAPIFilters = sharedFilters.filter(f => f.apiFilter)
+  const loadAPIFilters = async () => {
+    if (state.config.dashboard.sharedFilters) {
+      const sharedAPIFilters = state.config.dashboard.sharedFilters.filter(f => f.apiFilter)
       const loadingFilterMemo: APIFilterDropdowns = sharedAPIFilters.reduce((acc, curr) => {
         const _key = getApiFilterKey(curr.apiFilter!)
         if (apiFilterDropdowns[_key] != null) return acc // don't overwrite fetched data.
@@ -138,69 +133,58 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       const getParentParams = (childFilter: SharedFilter): Record<'key' | 'value', string>[] | null => {
         const _parents = sharedAPIFilters.filter(parentFilter => childFilter.parents?.includes(parentFilter.key))
         if (!_parents.length) return null
-        return _parents.map(({ queryParameter, active, queuedActive }) => ({ key: queryParameter || '', value: active || queuedActive || '' }))
+        return _parents.map(({ queryParameter, queuedActive }) => ({ key: queryParameter || '', value: queuedActive || '' }))
       }
-      const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
-        const { textSelector, valueSelector } = apiFilter
+      const getFilterValues = (data: Object | Array<Object>, apiFilter: APIFilter): DropdownOptions => {
+        const { textSelector, valueSelector, heirarchyLookup } = apiFilter
+        if (heirarchyLookup) {
+          const heirarchy = heirarchyLookup!.split('.')
+          const selector = heirarchy.shift() // pop first element
+          return getFilterValues(selector ? data[selector] : data, { ...apiFilter, heirarchyLookup: heirarchy.join('.') })
+        }
+        if (!Array.isArray(data)) throw new Error('the filter data has requires a heirarchy path to access the filter values, This should be in the format key.subkey.subsubkey')
         return data.map(v => ({ text: v[textSelector], value: v[valueSelector] }))
       }
-      const toFetch = {}
-      sharedAPIFilters.forEach((filter, index) => {
+      state.config.dashboard.sharedFilters.forEach(async (filter, index) => {
+        if (!filter.apiFilter) return
         const baseEndpoint = filter.apiFilter.apiEndpoint
         const _key = getApiFilterKey(filter.apiFilter)
         const params = getParentParams(filter)
         const notAllParentsSelected = params?.some(({ value }) => value === '')
         if (notAllParentsSelected) return // don't send request for dependent children filter options
-        if (apiFilterDropdowns[_key] && !params) return // don't reload filter unless it's a child
-        const topLevelDataAlreadyLoaded = apiFilterDropdowns[_key] && !filter.parents
-        if (topLevelDataAlreadyLoaded) return // don't reload top level filters
+        if (apiFilterDropdowns[_key] && !params && filter.filterBy === 'Query String') return // don't reload filter unless it's a child
         const endpoint = baseEndpoint + (params ? gatherQueryParams(params) : '')
-        toFetch[endpoint] = [_key, index]
+        fetch(endpoint)
+          .then(resp => resp.json())
+          .then(data => {
+            const apiFilter = filterLookup.get(_key) as APIFilter
+            const _filterValues = getFilterValues(data, apiFilter)
+            setAPIFilterDropdowns(dropdowns => ({ ...dropdowns, [_key]: _filterValues }))
+            setAutoLoadDefaultValue(index, _filterValues)
+          })
       })
-      return Promise.all(
-        Object.keys(toFetch).map(
-          endpoint =>
-            new Promise<void>(resolve => {
-              fetch(endpoint)
-                .then(resp => resp.json())
-                .then(data => {
-                  const [_key, index] = toFetch[endpoint]
-                  if (!Array.isArray(data)) throw new Error('COVE only supports response data in the shape Array<Object>')
-                  const apiFilter = filterLookup.get(_key) as APIFilter
-                  const _filterValues = getFilterValues(data, apiFilter)
-                  setAPIFilterDropdowns(dropdowns => ({ ...dropdowns, [_key]: _filterValues }))
-                  setAutoLoadDefaultValue(index, _filterValues, dashboardConfigOverride)
-                })
-                .catch(console.error)
-                .finally(() => {
-                  resolve()
-                })
-            })
-        )
-      )
     }
   }
-  const reloadURLData = async (dashboardConfigOverride = undefined) => {
-    const config = _.cloneDeep(state.config)
+  const reloadURLData = async () => {
+    const { config } = state
     if (!config.datasets) return
     let newData = { ...state.data }
     let newDatasets = { ...config.datasets }
     let datasetsNeedsUpdate = false
     let datasetKeys = Object.keys(config.datasets)
     let newFileName = ''
-    const filters = (dashboardConfigOverride || config.dashboard)?.sharedFilters
     for (let i = 0; i < datasetKeys.length; i++) {
       const datasetKey = datasetKeys[i]
       const dataset = config.datasets[datasetKey]
+      const filters = config.dashboard?.sharedFilters
       if (dataset.dataUrl && filters) {
         const dataUrl = new URL(dataset.runtimeDataUrl || dataset.dataUrl, window.location.origin)
         let currentQSParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
         let updatedQSParams = {}
-        let isUpdateNeeded = !!dashboardConfigOverride
+        let isUpdateNeeded = false
         filters.forEach(filter => {
           // filter.active is always a string when filter.type is 'urlfilter'
@@ -272,10 +256,10 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     }
     if (datasetsNeedsUpdate) {
-      const dashboardConfig = dashboardConfigOverride || config.dashboard
       dispatch({ type: 'SET_DATA', payload: newData })
       const newFilteredData = getFilteredData(state, {}, newData)
       const visualizations = Object.keys(config.visualizations).reduce((acc, vizKey) => {
         const dataKey = config.visualizations[vizKey].dataKey
         if (newData[dataKey]) {
@@ -285,7 +269,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       }, _.cloneDeep(config.visualizations))
       dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-      dispatch({ type: 'SET_CONFIG', payload: { dashboard: dashboardConfig, datasets: newDatasets, visualizations } })
+      dispatch({ type: 'SET_CONFIG', payload: { ...config, datasets: newDatasets, visualizations } })
     }
   }
@@ -300,7 +284,8 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   }
   const setSharedFilter = (key, datum) => {
-    const { config: newConfig, filteredData } = _.cloneDeep(state)
+    const { config } = state
+    let newConfig = { ...config }
     for (let i = 0; i < newConfig.dashboard.sharedFilters.length; i++) {
       const filter = newConfig.dashboard.sharedFilters[i]
@@ -312,13 +297,14 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       }
     }
-    const newFilteredData = getFilteredData({ ...state, config: newConfig }, filteredData)
+    const newFilteredData = getFilteredData(state, _.cloneDeep(state.filteredData))
     dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-    dispatch({ type: 'SET_SHARED_FILTERS', payload: newConfig.dashboard.sharedFilters })
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
   }
   useEffect(() => {
+    if (state.tabSelected && state.tabSelected !== 'Dashboard Preview') return
     const { config } = state
     if (config.filterBehavior !== FilterBehavior.Apply) {
       reloadURLData()
@@ -327,16 +313,16 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   }, [])
   const updateChildConfig = (visualizationKey, newConfig) => {
-    const config = _.cloneDeep(state.config)
-    const updatedConfig = _.pick(config, ['visualizations', 'multiDashboards'])
+    const { config } = state
+    let updatedConfig = { ...config }
     updatedConfig.visualizations[visualizationKey] = newConfig
     updatedConfig.visualizations[visualizationKey].formattedData = config.visualizations[visualizationKey].formattedData
     if (config.multiDashboards) {
       const activeDashboard = config.activeDashboard
       const multiDashboards = [...config.multiDashboards]
       const label = multiDashboards[activeDashboard].label
-      const toSave = { label, visualizations: updatedConfig.visualizations, ..._.pick(config, ['dashboard', 'rows']) }
-      multiDashboards[activeDashboard] = toSave
+      const toSave = _.pick(updatedConfig, ['dashboard', 'visualizations', 'rows'])
+      multiDashboards[activeDashboard] = { ...toSave, label }
       updatedConfig.multiDashboards = multiDashboards
     }
@@ -348,22 +334,13 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   }
   const applyFilters = () => {
-    const dashboardConfig = _.cloneDeep(state.config.dashboard)
-    const autoLoadViz = getAutoLoadVisualization()
-    const nonAutoLoadFilterIndexes = autoLoadViz?.hide || []
-    const allRequiredFiltersSelected = !dashboardConfig.sharedFilters.some((filter, filterIndex) => {
-      if (nonAutoLoadFilterIndexes.includes(filterIndex)) {
-        !filter.active && !filter.queuedActive
-      } else {
-        // autoload filters don't need to be selected to apply filters
-        return false
-      }
-    })
-    if (allRequiredFiltersSelected) {
+    let dashboardConfig = state.config.dashboard
+    const allFiltersSelected = !state.config.dashboard.sharedFilters.some(filter => !filter.active && !filter.queuedActive)
+    if (allFiltersSelected) {
       if (state.config.filterBehavior === FilterBehavior.Apply) {
         const queryParams = getQueryParams()
         let needsQueryUpdate = false
-        dashboardConfig.sharedFilters.forEach((sharedFilter, index) => {
+        state.config.dashboard.sharedFilters.forEach((sharedFilter, index) => {
           if (sharedFilter.queuedActive) {
             dashboardConfig.sharedFilters[index].active = sharedFilter.queuedActive
             delete dashboardConfig.sharedFilters[index].queuedActive
@@ -380,28 +357,21 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         }
       }
-      dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
-      updateDataFilters()
-      loadAPIFilters(dashboardConfig)
-        .then(() => {
-          reloadURLData(dashboardConfig)
-        })
-        .catch(e => {
-          console.error(e)
-        })
+      dispatch({ type: 'SET_CONFIG', payload: { ...state.config, dashboard: dashboardConfig } })
+      dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(state) })
+      reloadURLData()
     } else {
       // TODO noftify of required fields
     }
   }
   const changeFilterActive = (index: number, value: string | string[]) => {
-    const sharedFilters = _.cloneDeep(state.config.dashboard.sharedFilters)
-    const filterActive = sharedFilters[index]
-    const nonAutoLoadFilterIndexes = getAutoLoadVisualization()?.hide
-    const isAutoLoad = nonAutoLoadFilterIndexes && !nonAutoLoadFilterIndexes.includes(index)
+    const { config } = state
+    let dashboardConfig = { ...config.dashboard }
+    let filterActive = dashboardConfig.sharedFilters[index]
-    if (state.config.filterBehavior !== FilterBehavior.Apply || isAutoLoad) {
-      sharedFilters[index].active = value
+    if (config.filterBehavior !== FilterBehavior.Apply) {
+      dashboardConfig.sharedFilters[index].active = value
       const queryParams = getQueryParams()
       if (filterActive.setByQueryParameter && queryParams[filterActive.setByQueryParameter] !== filterActive.active) {
@@ -410,35 +380,28 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       }
     } else {
       if (Array.isArray(value)) throw Error(`Cannot set active values on urlfilters. expected: ${JSON.stringify(value)} to be a single value.`)
-      sharedFilters[index].queuedActive = value
+      dashboardConfig.sharedFilters[index].queuedActive = value
     }
-    dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
-    if (state.config.filterBehavior !== FilterBehavior.Apply) {
-      updateDataFilters(sharedFilters)
+    dispatch({ type: 'SET_CONFIG', payload: { ...config, dashboard: dashboardConfig } })
+    if (config.filterBehavior !== FilterBehavior.Apply) {
+      dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(state) })
       reloadURLData()
     }
-    return sharedFilters
-  }
-  const updateDataFilters = (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 handleOnChange = (index: number, value: string | string[]) => {
-    const config = _.cloneDeep(state.config)
-    const newSharedFilters = changeFilterActive(index, value)
+    const { config } = state
+    changeFilterActive(index, value)
     if (config.filterBehavior === FilterBehavior.Apply) {
       const autoLoadViz = getAutoLoadVisualization()
-      const isAutoSelectFilter = !autoLoadViz?.hide.includes(index)
+      if (!autoLoadViz) return // nothing left to do for regular filter behavior.
+      const isAutoSelectFilter = !autoLoadViz.hide.includes(index)
       const missingFilterSelections = config.dashboard.sharedFilters.some(f => !f.active)
       if (isAutoSelectFilter && !missingFilterSelections) {
         // a dropdown has been selected that doesn't
         // require the Go Button
-        reloadURLData({ sharedFilters: newSharedFilters })
+        reloadURLData()
       } else {
         // A parent filter was selected, reset filters by:
         // set auto select filter dropdowns to null
@@ -460,12 +423,11 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           if (_isAutoSelectFilter) filter.active = ''
           return filter
         })
-        const _newConfig = { dashboard: { ...config.dashboard, sharedFilters: newSharedFilters } }
+        const _newConfig = { ...config, dashboard: { ...config.dashboard, sharedFilters: newSharedFilters } }
         dispatch({ type: 'SET_CONFIG', payload: _newConfig })
         // setData to empty object because we no longer have a data state.
         dispatch({ type: 'SET_DATA', payload: {} })
         dispatch({ type: 'SET_FILTERED_DATA', payload: {} })
-        loadAPIFilters(_newConfig.dashboard)
       }
     }
   }
@@ -604,9 +566,10 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             break
           case 'table':
             body = (
-              <EditorWrapper component={DataTableStandAlone} visualizationKey={visualizationKey} visualizationConfig={visualizationConfig} updateConfig={_updateConfig} type={'Table'} viewport={currentViewport}>
-                <DataTableEditorPanel key={visualizationKey} config={visualizationConfig} updateConfig={_updateConfig} />
-              </EditorWrapper>
+              <>
+                <Header visualizationKey={visualizationKey} subEditor='Table' />
+                <DataTableStandAlone visualizationKey={visualizationKey} config={visualizationConfig} isEditor={true} updateConfig={_updateConfig} />
+              </>
             )
             break
           default:

package/src/_stories/Dashboard.stories.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import ExampleConfig_2 from './_mock/dashboard-2.json'
 import ExampleConfig_3 from './_mock/dashboard_no_filter.json'
 import Dashboard_Filter from './_mock/dashboard-filter.json'
 import MultiVizConfig from './_mock/multi-viz.json'
+import MultiDashboardConfig from './_mock/multi-dashboards.json'
 import Dashboard from '../CdcDashboard'
 import StandaloneTable from './_mock/standalone-table.json'
 import PivotFitlerConfig from './_mock/pivot-filter.json'
@@ -99,6 +100,13 @@ export const MultiVisualization: Story = {
   }
 }
+export const MultiDashboard: Story = {
+  args: {
+    config: MultiDashboardConfig,
+    isEditor: false
+  }
+}
 const sleep = ms => {
   return new Promise(r => setTimeout(r, ms))
 }
@@ -125,18 +133,35 @@ const fetchMock = {
         body: [{ IndicatorID: 'indicatorID', Indicator: 'Some Indicator' }]
       }
     },
-    ...['Year', 'DataValueType', 'StratificationCategory', 'Stratification'].map(filter => {
-      return {
-        matcher: {
-          name: 'filters' + filter,
-          url: 'path:/api/POC/Filters/' + filter
-        },
-        response: {
-          status: 200,
-          body: _.times(5, i => ({ [filter]: `Some ${filter} ${i}` }))
+    {
+      matcher: {
+        name: 'filters',
+        url: 'path:/api/POC/Filters'
+      },
+      response: {
+        status: 200,
+        body: {
+          Years: [{ Year: 1999 }],
+          DataValueTypes: [{ DataValueType: 'Some Data Value Type', DataValueTypeId: 'dataValueTypeId' }],
+          StratificationCategories: [{ StratificationCategoryId: 'stratCategoryId', StratificationCategory: 'Some Strat Category' }]
         }
       }
-    }),
+    },
+    {
+      matcher: {
+        name: 'stratifications',
+        url: 'path:/api/POC/stratifications'
+      },
+      response: {
+        status: 200,
+        body: [
+          {
+            StratificationId: 'stratId',
+            Stratification: 'Some Strat'
+          }
+        ]
+      }
+    },
     {
       matcher: {
         name: 'locations',
@@ -205,11 +230,11 @@ export const APIFiltersMap: Story = {
     const indicatorsFilter = canvas.getByLabelText('Indicator', { selector: 'select' })
     await user.selectOptions(indicatorsFilter, ['indicatorID'])
     const yearsFilter = canvas.getByLabelText('Year', { selector: 'select' })
-    await user.selectOptions(yearsFilter, ['Some Year 0'])
+    await user.selectOptions(yearsFilter, ['1999'])
     const stratCategoryFilter = canvas.getByLabelText('View By', { selector: 'select' })
-    await user.selectOptions(stratCategoryFilter, ['Some StratificationCategory 0'])
+    await user.selectOptions(stratCategoryFilter, ['stratCategoryId'])
     const stratFilter = canvas.getByLabelText('Stratification', { selector: 'select' })
-    await user.selectOptions(stratFilter, ['Some Stratification 0'])
+    await user.selectOptions(stratFilter, ['stratId'])
     await user.click(canvas.getByText('GO!'))
   }
 }
@@ -235,9 +260,8 @@ export const APIFiltersChart: Story = {
     const indicatorsFilter = canvas.getByLabelText('Indicator', { selector: 'select' })
     await user.selectOptions(indicatorsFilter, ['indicatorID'])
     await user.click(canvas.getByText('GO!'))
-    await sleep(1000)
     const yearFilter = canvas.getByLabelText('Year', { selector: 'select' })
-    await user.selectOptions(yearFilter, ['Some Year 1'])
+    await user.selectOptions(yearFilter, ['1999'])
   }
 }

package/src/_stories/_mock/api-filter-chart.json CHANGED Viewed

@@ -4,6 +4,9 @@
     "sharedFilters": [
       {
         "key": "Location",
+        "usedBy": [
+          "chart1"
+        ],
         "type": "urlfilter",
         "apiFilter": {
           "apiEndpoint": "http://test.gov/api/poc/locations",
@@ -16,6 +19,9 @@
       },
       {
         "key": "Category",
+        "usedBy": [
+          "chart1"
+        ],
         "type": "urlfilter",
         "apiFilter": {
           "apiEndpoint": "http://test.gov/api/poc/topics",
@@ -28,6 +34,9 @@
       },
       {
         "key": "Indicator",
+        "usedBy": [
+          "chart1"
+        ],
         "type": "urlfilter",
         "apiFilter": {
           "apiEndpoint": "http://test.gov/api/poc/indicators",
@@ -41,11 +50,15 @@
       },
       {
         "key": "Year",
+        "usedBy": [
+          "chart1"
+        ],
         "type": "urlfilter",
         "apiFilter": {
-          "apiEndpoint": "http://test.gov/api/POC/Filters/Year",
+          "apiEndpoint": "http://test.gov/api/POC/Filters",
           "valueSelector": "Year",
-          "textSelector": "Year"
+          "textSelector": "Year",
+          "heirarchyLookup": "Years"
         },
         "queryParameter": "year",
         "showDropdown": true,
@@ -53,11 +66,15 @@
       },
       {
         "key": "View By",
+        "usedBy": [
+          "chart1"
+        ],
         "type": "urlfilter",
         "apiFilter": {
-          "apiEndpoint": "http://test.gov/api/POC/Filters/StratificationCategory",
-          "valueSelector": "StratificationCategory",
+          "apiEndpoint": "http://test.gov/api/POC/Filters",
+          "valueSelector": "StratificationCategoryId",
           "textSelector": "StratificationCategory",
+          "heirarchyLookup": "StratificationCategories",
           "defaultValue": "AGE"
         },
         "queryParameter": "stratificationcategoryid",
@@ -66,11 +83,16 @@
       },
       {
         "key": "Data Type",
+        "usedBy": [
+          "chart1"
+        ],
         "type": "urlfilter",
         "apiFilter": {
-          "apiEndpoint": "http://test.gov/api/POC/Filters/DataValueType",
-          "valueSelector": "DataValueType",
-          "textSelector": "DataValueType"
+          "apiEndpoint": "http://test.gov/api/POC/Filters",
+          "valueSelector": "DataValueTypeId",
+          "textSelector": "DataValueType",
+          "heirarchyLookup": "DataValueTypes"
         },
         "queryParameter": "datavaluetypeid",
         "showDropdown": true,
@@ -108,7 +130,7 @@
     "filters": {
       "type": "filter-dropdowns",
       "visualizationType": "filter-dropdowns",
-      "hide": [3, 4, 5]
+      "hide": [ 3, 4, 5 ]
     },
     "header": {
       "type": "markup-include",
@@ -119,7 +141,7 @@
     "subfilters": {
       "type": "filter-dropdowns",
       "visualizationType": "filter-dropdowns",
-      "hide": [0, 1, 2],
+      "hide": [ 0, 1, 2 ],
       "autoLoad": true
     },
     "chart1": {
@@ -319,7 +341,9 @@
       },
       "validated": 4.23,
       "dynamicMarginTop": 0,
-      "regions": [{}]
+      "regions": [
+        {}
+      ]
     }
   },
   "type": "dashboard",
@@ -331,4 +355,4 @@
   "filterBehavior": "Apply Button",
   "runtime": {},
   "uuid": 1684783370106
-}
+}