@cdc/dashboard 4.24.5 → 4.24.9-1

package/src/DashboardContext.tsx

@@ -2,17 +2,27 @@ import { Dispatch, createContext } from 'react'
 import { DashboardState } from './store/dashboard.reducer'
 import DashboardActions from './store/dashboard.actions'
 import { Tab } from './types/Tab'
+import { MultiDashboardConfig } from './types/MultiDashboard'
+import { SharedFilter } from './types/SharedFilter'
+import { APIFilterDropdowns } from './components/DashboardFilters'
 
 type ConfigCTX = DashboardState & {
   outerContainerRef: (node: any) => void
   setParentConfig: any
   isDebug: boolean
+  reloadURLData: (newFilters?: SharedFilter[]) => void
+  loadAPIFilters: (
+    sharedFilters: SharedFilter[],
+    dropdowns: APIFilterDropdowns,
+    recursiveLimit?: number
+  ) => Promise<SharedFilter[]>
+  setAPIFilterDropdowns: (dropdowns: APIFilterDropdowns) => void
 }
 
 const firstTab: Tab = 'Dashboard Description'
 
 export const initialState = {
-  data: {},
+  data: {} as Record<string, any[]>,
   loading: false,
   filteredData: {},
   preview: false,
@@ -22,7 +32,11 @@ export const initialState = {
 const initialContext: ConfigCTX = {
   outerContainerRef: () => {},
   setParentConfig: () => {},
+  setAPIFilterDropdowns: () => {},
+  reloadURLData: () => {},
+  loadAPIFilters: () => Promise.resolve([]),
   isDebug: false,
+  config: {} as MultiDashboardConfig,
   ...initialState
 }
 

package/src/_stories/Dashboard.stories.tsx

@@ -5,6 +5,7 @@ import APIFiltersChartData from './_mock/api-filter-chart.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'
+import SingleStateDashboardFilters from './_mock/single-state-dashboard-filters.json'
 import Dashboard_Filter from './_mock/dashboard-filter.json'
 import MultiVizConfig from './_mock/multi-viz.json'
 import MultiDashboardConfig from './_mock/multi-dashboards.json'
@@ -15,6 +16,12 @@ import { type DashboardConfig as Config } from '../types/DashboardConfig'
 import { userEvent, within } from '@storybook/testing-library'
 import ToggleExampleConfig from './_mock/toggle-example.json'
 import _ from 'lodash'
+import { footnotesSymbols } from '@cdc/core/helpers/footnoteSymbols'
+import FootnotesConfig from '@cdc/core/types/Footnotes'
+import { ConfigRow } from '../types/ConfigRow'
+import BumpChartConfig from './_mock/bump-chart.json'
+import MethodologyConfig from './_mock/methodology.json'
+import methodologyAPI from './_mock/methodologyAPI'
 
 const meta: Meta<typeof Dashboard> = {
   title: 'Components/Pages/Dashboard',
@@ -44,6 +51,13 @@ export const Example_3: Story = {
   }
 }
 
+export const Bump_Chart_Dashboard: Story = {
+  args: {
+    config: BumpChartConfig,
+    isEditor: false
+  }
+}
+
 export const Dashboard_Filters: Story = {
   args: {
     config: Dashboard_Filter,
@@ -72,6 +86,13 @@ export const PivotFilter: Story = {
   }
 }
 
+export const SingleStateDashboardWithFilters: Story = {
+  args: {
+    config: SingleStateDashboardFilters,
+    isEditor: false
+  }
+}
+
 faker.seed(123)
 
 const countries = _.times(5, faker.location.country)
@@ -89,20 +110,28 @@ countries.forEach((country, i) => {
   })
 })
 
+const footnoteData = countries.map((country, i) => {
+  return { Country: country, symbol: footnotesSymbols[i][0], text: faker.lorem.sentence() }
+})
+
 const multiVizData = {
-  'valid-world-data.json': { data }
+  'valid-world-data.json': { data },
+  'footnote-data.json': { data: footnoteData }
 }
 
-export const MultiVisualization: Story = {
+export const MultiDashboard: Story = {
   args: {
-    config: { ...MultiVizConfig, datasets: multiVizData },
+    config: MultiDashboardConfig,
     isEditor: false
   }
 }
 
-export const MultiDashboard: Story = {
+const FNrows: ConfigRow[] = [{ ...MultiVizConfig.rows[0], footnotesId: 'footnote123' }]
+const footnoteConfig: Partial<FootnotesConfig> = { dataKey: 'footnote-data.json', dynamicFootnotes: { symbolColumn: 'symbol', textColumn: 'text' }, staticFootnotes: [{ symbol: '**', text: 'This is a static Footnote' }] }
+const FNViz = { ...MultiVizConfig.visualizations, footnote123: footnoteConfig }
+export const Footnotes: Story = {
   args: {
-    config: MultiDashboardConfig,
+    config: { ...MultiVizConfig, datasets: multiVizData, rows: FNrows, visualizations: FNViz },
     isEditor: false
   }
 }
@@ -112,6 +141,7 @@ const sleep = ms => {
 }
 
 const fetchMock = {
+  debug: true,
   mocks: [
     {
       matcher: {
@@ -133,35 +163,18 @@ const fetchMock = {
         body: [{ IndicatorID: 'indicatorID', Indicator: 'Some Indicator' }]
       }
     },
-    {
-      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' }]
+    ...['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: 'stratifications',
-        url: 'path:/api/POC/stratifications'
-      },
-      response: {
-        status: 200,
-        body: [
-          {
-            StratificationId: 'stratId',
-            Stratification: 'Some Strat'
-          }
-        ]
-      }
-    },
+    }),
     {
       matcher: {
         name: 'locations',
@@ -207,13 +220,58 @@ const fetchMock = {
           }
         ]
       }
-    }
+    },
+    {
+      matcher: {
+        name: 'methodologyYear',
+        url: 'path:/methodology',
+        query: {
+          $select: 'distinct year'
+        }
+      },
+      response: {
+        status: 200,
+        body: methodologyAPI('distinct year')
+      }
+    },
+    ...['a', 'b'].map(methodology => {
+      return {
+        matcher: {
+          name: 'methodology' + methodology,
+          url: 'path:/methodology',
+          query: {
+            methodology: `"${methodology}"`
+          }
+        },
+        response: {
+          status: 200,
+          body: methodologyAPI('*', ['methodology', methodology])
+        }
+      }
+    }),
+    ...[1999, 2000, 2012, 2013].map(year => {
+      return {
+        matcher: {
+          name: 'methodology' + year,
+          url: 'path:/methodology',
+          query: {
+            $select: 'distinct methodology',
+            year
+          }
+        },
+        response: {
+          status: 200,
+          body: methodologyAPI('distinct methodology', ['year', year])
+        }
+      }
+    })
   ]
 }
 
-export const APIFiltersMap: Story = {
+export const RegressionAPIFiltersMap: Story = {
   args: {
-    config: APIFiltersMapData as unknown as Config
+    config: APIFiltersMapData as unknown as Config,
+    isEditor: false
   },
   parameters: {
     fetchMock
@@ -230,18 +288,19 @@ 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, ['1999'])
+    await user.selectOptions(yearsFilter, ['Some Year 0'])
     const stratCategoryFilter = canvas.getByLabelText('View By', { selector: 'select' })
-    await user.selectOptions(stratCategoryFilter, ['stratCategoryId'])
+    await user.selectOptions(stratCategoryFilter, ['Some StratificationCategory 0'])
     const stratFilter = canvas.getByLabelText('Stratification', { selector: 'select' })
-    await user.selectOptions(stratFilter, ['stratId'])
+    await user.selectOptions(stratFilter, ['Some Stratification 0'])
     await user.click(canvas.getByText('GO!'))
   }
 }
 
-export const APIFiltersChart: Story = {
+export const RegressionAPIFiltersChart: Story = {
   args: {
-    config: APIFiltersChartData as unknown as Config
+    config: APIFiltersChartData as unknown as Config,
+    isEditor: false
   },
   parameters: {
     fetchMock
@@ -260,8 +319,67 @@ 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'])
+  }
+}
+
+export const RegressionHiddenFilter: Story = {
+  args: {
+    config: MethodologyConfig,
+    isEditor: false
+  },
+  parameters: {
+    fetchMock
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+    // play is running before full rendering is complete so sleep function
+    // is needed to delay the execution.
+    // possible related bug: https://github.com/storybookjs/storybook/issues/18258
+    await sleep(1000)
     const yearFilter = canvas.getByLabelText('Year', { selector: 'select' })
     await user.selectOptions(yearFilter, ['1999'])
+    await user.click(canvas.getByText('GO!'))
+    await sleep(500)
+    canvas.getAllByText('alabama')
+    canvas.getAllByText('alaska')
+    canvas.getAllByText('arizona')
+    await user.selectOptions(yearFilter, ['2012'])
+    await user.click(canvas.getByText('GO!'))
+    await sleep(500)
+    canvas.getAllByText('new york')
+    canvas.getAllByText('new jersey')
+    canvas.getAllByText('new mexico')
+  }
+}
+
+export const RegressionMultiVisualization: Story = {
+  args: {
+    config: { ...MultiVizConfig, datasets: multiVizData },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+    // play is running before full rendering is complete so sleep function
+    // is needed to delay the execution.
+    // possible related bug: https://github.com/storybookjs/storybook/issues/18258
+    await sleep(1000)
+    const categoryFilter = canvas.getByLabelText('Category', { selector: 'select' })
+    canvas.getAllByText('Paraguay')
+    canvas.getAllByText('Poland')
+    canvas.getAllByText('Iraq')
+    await user.selectOptions(categoryFilter, ['category-3'])
+    canvas.getAllByText('Paraguay')
+    canvas.getAllByText('Ethiopia')
+    canvas.getAllByText('Iraq')
+    await user.selectOptions(categoryFilter, ['category-1'])
+    canvas.getAllByText('Poland')
+    canvas.getAllByText('Ethiopia')
+    canvas.getAllByText('Curacao')
   }
 }
 

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

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

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

@@ -3,9 +3,7 @@
     "sharedFilters": [
       {
         "key": "Category",
-        "usedBy": [
-          "map1"
-        ],
+        "usedBy": ["map1"],
         "type": "urlfilter",
         "apiFilter": {
           "apiEndpoint": "http://test.gov/api/poc/topics",
@@ -18,9 +16,7 @@
       },
       {
         "key": "Indicator",
-        "usedBy": [
-          "chart1"
-        ],
+        "usedBy": ["map1"],
         "type": "urlfilter",
         "apiFilter": {
           "apiEndpoint": "http://test.gov/api/poc/indicators",
@@ -34,15 +30,12 @@
       },
       {
         "key": "Year",
-        "usedBy": [
-          "map1"
-        ],
+        "usedBy": ["map1"],
         "type": "urlfilter",
         "apiFilter": {
-          "apiEndpoint": "http://test.gov/api/POC/Filters",
+          "apiEndpoint": "http://test.gov/api/POC/Filters/Year",
           "valueSelector": "Year",
-          "textSelector": "Year",
-          "heirarchyLookup": "Years"
+          "textSelector": "Year"
         },
         "queryParameter": "year",
         "resetLabel": "- Select -",
@@ -51,15 +44,12 @@
       },
       {
         "key": "View By",
-        "usedBy": [
-          "map1"
-        ],
+        "usedBy": ["map1"],
         "type": "urlfilter",
         "apiFilter": {
-          "apiEndpoint": "http://test.gov/api/POC/Filters",
-          "valueSelector": "StratificationCategoryId",
-          "textSelector": "StratificationCategory",
-          "heirarchyLookup": "StratificationCategories"
+          "apiEndpoint": "http://test.gov/api/POC/Filters/StratificationCategory",
+          "valueSelector": "StratificationCategory",
+          "textSelector": "StratificationCategory"
         },
         "resetLabel": "- Select -",
         "queryParameter": "stratificationcategoryid",
@@ -68,13 +58,11 @@
       },
       {
         "key": "Stratification",
-        "usedBy": [
-          "map1"
-        ],
+        "usedBy": ["map1"],
         "type": "urlfilter",
         "apiFilter": {
-          "apiEndpoint": "http://test.gov/api/POC/stratifications",
-          "valueSelector": "StratificationId",
+          "apiEndpoint": "http://test.gov/api/POC/Filters/Stratification",
+          "valueSelector": "Stratification",
           "textSelector": "Stratification"
         },
         "resetLabel": "- Select -",
@@ -149,8 +137,8 @@
           "suffix": "%",
           "name": "LowConfidenceLimit",
           "tooltip": true
-      },
-      "additionalColumn2": {
+        },
+        "additionalColumn2": {
           "label": "High Confidence Limit",
           "dataTable": true,
           "tooltips": false,
@@ -158,7 +146,7 @@
           "suffix": "%",
           "name": "HighConfidenceLimit",
           "tooltip": true
-      },
+        },
         "navigate": {
           "name": "link",
           "tooltip": false,
@@ -173,9 +161,7 @@
       },
       "legend": {
         "descriptions": {},
-        "specialClasses": [
-            "NA"
-        ],
+        "specialClasses": ["NA"],
         "unified": false,
         "singleColumn": false,
         "dynamicDescription": false,
@@ -196,4 +182,4 @@
   "filterBehavior": "Apply Button",
   "runtime": {},
   "uuid": 1684783370106
-}
+}