@cdc/dashboard 4.24.2 → 4.24.4

package/src/DashboardContext.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, createContext } from 'react'
 import { DashboardState } from './store/dashboard.reducer'
 import DashboardActions from './store/dashboard.actions'
+import { Tab } from './types/Tab'
 
 type ConfigCTX = DashboardState & {
   outerContainerRef: (node: any) => void
@@ -8,12 +9,14 @@ type ConfigCTX = DashboardState & {
   isDebug: boolean
 }
 
+const firstTab: Tab = 'Dashboard Description'
+
 export const initialState = {
   data: {},
   loading: false,
   filteredData: {},
   preview: false,
-  tabSelected: 0
+  tabSelected: firstTab
 }
 
 const initialContext: ConfigCTX = {

package/src/_stories/Dashboard.stories.tsx

@@ -1,13 +1,19 @@
 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 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 Dashboard_Filter from './_mock/dashboard-filter.json'
-import Dashboard from '../CdcDashboardComponent'
+import MultiVizConfig from './_mock/multi-viz.json'
+import Dashboard from '../CdcDashboard'
+import StandaloneTable from './_mock/standalone-table.json'
+import PivotFitlerConfig from './_mock/pivot-filter.json'
 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'
 
 const meta: Meta<typeof Dashboard> = {
   title: 'Components/Pages/Dashboard',
@@ -18,25 +24,78 @@ type Story = StoryObj<typeof Dashboard>
 
 export const Example_1: Story = {
   args: {
-    config: ExampleConfig_1 as unknown as Config
+    config: ExampleConfig_1,
+    isEditor: false
   }
 }
 
 export const Example_2: Story = {
   args: {
-    config: ExampleConfig_2 as unknown as Config
+    config: ExampleConfig_2,
+    isEditor: false
   }
 }
 
 export const Example_3: Story = {
   args: {
-    config: ExampleConfig_3 as unknown as Config
+    config: ExampleConfig_3,
+    isEditor: false
   }
 }
 
 export const Dashboard_Filters: Story = {
   args: {
-    config: Dashboard_Filter as unknown as Config
+    config: Dashboard_Filter,
+    isEditor: false
+  }
+}
+
+export const StandAloneTable: Story = {
+  args: {
+    config: StandaloneTable,
+    isEditor: false
+  }
+}
+
+export const ToggleExample: Story = {
+  args: {
+    config: ToggleExampleConfig,
+    isEditor: false
+  }
+}
+
+export const PivotFilter: Story = {
+  args: {
+    config: PivotFitlerConfig,
+    isEditor: false
+  }
+}
+
+faker.seed(123)
+
+const countries = _.times(5, faker.location.country)
+const categories = _.times(3, val => `category-${val + 1}`)
+
+const data = []
+countries.forEach((country, i) => {
+  categories.forEach((category, j) => {
+    if ((i + j) % 3 === 0) return
+    data.push({
+      Country: country,
+      'Sample Categories': category,
+      Data: faker.number.int({ min: 5, max: 50 })
+    })
+  })
+})
+
+const multiVizData = {
+  'valid-world-data.json': { data }
+}
+
+export const MultiVisualization: Story = {
+  args: {
+    config: { ...MultiVizConfig, datasets: multiVizData },
+    isEditor: false
   }
 }
 
@@ -66,35 +125,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',
@@ -163,11 +205,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, ['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!'))
   }
 }
@@ -193,8 +235,9 @@ 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, ['1999'])
+    await user.selectOptions(yearFilter, ['Some Year 1'])
   }
 }
 

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": ["chart1"],
         "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
-}
+}