@cdc/dashboard 4.24.5 → 4.24.7

package/src/DashboardContext.tsx

@@ -2,17 +2,22 @@ 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[]>
 }
 
 const firstTab: Tab = 'Dashboard Description'
 
 export const initialState = {
-  data: {},
+  data: {} as Record<string, any[]>,
   loading: false,
   filteredData: {},
   preview: false,
@@ -22,7 +27,10 @@ export const initialState = {
 const initialContext: ConfigCTX = {
   outerContainerRef: () => {},
   setParentConfig: () => {},
+  reloadURLData: () => {},
+  loadAPIFilters: () => Promise.resolve([]),
   isDebug: false,
+  config: {} as MultiDashboardConfig,
   ...initialState
 }
 

package/src/_stories/Dashboard.stories.tsx

@@ -15,6 +15,9 @@ 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'
 
 const meta: Meta<typeof Dashboard> = {
   title: 'Components/Pages/Dashboard',
@@ -89,8 +92,13 @@ 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 = {
@@ -107,6 +115,16 @@ 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: { ...MultiVizConfig, datasets: multiVizData, rows: FNrows, visualizations: FNViz },
+    isEditor: false
+  }
+}
+
 const sleep = ms => {
   return new Promise(r => setTimeout(r, ms))
 }
@@ -133,35 +151,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',
@@ -213,7 +214,8 @@ const fetchMock = {
 
 export const APIFiltersMap: Story = {
   args: {
-    config: APIFiltersMapData as unknown as Config
+    config: APIFiltersMapData as unknown as Config,
+    isEditor: false
   },
   parameters: {
     fetchMock
@@ -230,18 +232,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 = {
   args: {
-    config: APIFiltersChartData as unknown as Config
+    config: APIFiltersChartData as unknown as Config,
+    isEditor: false
   },
   parameters: {
     fetchMock
@@ -260,8 +263,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
-}
+}

package/src/_stories/_mock/multi-viz.json

@@ -164,7 +164,7 @@
       },
       "table": {
         "label": "Data Table",
-        "expanded": true,
+        "expanded": false,
         "limitHeight": false,
         "height": "",
         "caption": "",
@@ -366,11 +366,10 @@
   },
   "table": {
     "label": "Data Table",
-    "show": true,
+    "show": false,
     "showDownloadUrl": false,
     "showVertical": true
   },
-  "newViz": true,
   "datasets": {},
   "type": "dashboard",
   "runtime": {},

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

@@ -1,16 +1,7 @@
 {
   "dashboard": {
     "theme": "theme-blue",
-    "sharedFilters": [
-      {
-        "key": "Race",
-        "type": "datafilter",
-        "showDropdown": true,
-        "columnName": "Race",
-        "pivot": "Age-adjusted rate",
-        "usedBy": ["table1707935263149"]
-      }
-    ]
+    "sharedFilters": []
   },
   "rows": [
     [
@@ -32,7 +23,11 @@
         "show": true,
         "showDownloadUrl": false,
         "showVertical": true,
-        "expanded": true
+        "expanded": true,
+        "pivot": {
+          "columnName": "Race",
+          "valueColumn": "Age-adjusted rate"
+        }
       },
       "columns": {},
       "dataFormat": {},
@@ -41,7 +36,14 @@
         "horizontal": false,
         "series": false
       },
-      "filters": [],
+      "filters": [
+        {
+          "filterStyle": "multi-select",
+          "label": "Race",
+          "columnName": "Race",
+          "showDropdown": true
+        }
+      ],
       "filterBehavior": "Filter Change",
       "formattedData": [
         {

package/src/components/CollapsibleVisualizationRow.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react'
+import Icon from '../../../core/components/ui/Icon'
+
+type CollapsableVizRow = {
+  allExpanded: boolean
+  children: React.ReactNode
+  fontSize: string
+  groupName: string
+  currentViewport: string
+}
+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`
+
+  useEffect(() => {
+    setIsExpanded(allExpanded)
+  }, [allExpanded])
+
+  return (
+    <>
+      <div
+        style={{ fontSize: titleFontSize }}
+        role='button'
+        className={`multi-visualiation-heading${isExpanded ? '' : ' collapsed'} h4`}
+        onClick={() => {
+          setIsExpanded(!isExpanded)
+        }}
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.keyCode === 13) {
+            setIsExpanded(!isExpanded)
+          }
+        }}
+      >
+        <Icon display={isExpanded ? 'minus' : 'plus'} base />
+        {groupName}
+      </div>
+      {isExpanded && children}
+    </>
+  )
+}
+
+export default CollapsibleVisualizationRow

package/src/components/Column.tsx

@@ -40,7 +40,7 @@ const Column = ({ data, rowIdx, colIdx }) => {
   return (
     <div className={classNames.join(' ')} ref={drop}>
       {widget ? (
-        <Widget data={{ rowIdx, colIdx, ...widget }} type={widget.visualizationType ?? widget.general?.geoType} />
+        <Widget widgetConfig={{ rowIdx, colIdx, ...widget }} type={widget.visualizationType ?? widget.general?.geoType} />
       ) : (
         <p className='builder-column__text'>
           Drag and drop <br /> visualization

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -0,0 +1,80 @@
+import { SharedFilter } from '../../types/SharedFilter'
+import { APIFilterDropdowns } from './DashboardFiltersWrapper'
+
+type DashboardFilterProps = {
+  show: number[]
+  filters: SharedFilter[]
+  apiFilterDropdowns: APIFilterDropdowns
+  handleOnChange: Function
+}
+
+const DashboardFilters: React.FC<DashboardFilterProps> = ({ show, filters, apiFilterDropdowns, handleOnChange }) => {
+  const nullVal = (singleFilter: SharedFilter) => {
+    const val = singleFilter.queuedActive || singleFilter.active
+    return val === null || val === undefined || val === ''
+  }
+  return (
+    <>
+      {filters.map((singleFilter, filterIndex) => {
+        if ((singleFilter.type !== 'urlfilter' && !singleFilter.showDropdown) || (show && !show.includes(filterIndex))) return <></>
+        const values: JSX.Element[] = []
+        const multiValues = []
+        if (singleFilter.resetLabel) {
+          values.push(
+            <option key={`${singleFilter.resetLabel}-option`} value={singleFilter.resetLabel}>
+              {singleFilter.resetLabel}
+            </option>
+          )
+        }
+        const _key = singleFilter.apiFilter?.apiEndpoint
+        if (_key && apiFilterDropdowns[_key]) {
+          // URL Filter
+          apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
+            values.push(
+              <option key={`${value}-option-${index}`} value={value}>
+                {text}
+              </option>
+            )
+          })
+        } else {
+          // Data Filter
+          singleFilter.values?.forEach((filterOption, index) => {
+            const labeledOpt = singleFilter.labels && singleFilter.labels[filterOption]
+            values.push(
+              <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
+                {labeledOpt || filterOption}
+              </option>
+            )
+            multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
+          })
+        }
+
+        return (
+          <div className='cove-dashboard-filters' key={`${singleFilter.key}-filtersection-${filterIndex}`}>
+            <section className='dashboard-filters-section'>
+              <label htmlFor={`filter-${filterIndex}`}>{singleFilter.key}</label>
+              <select
+                id={`filter-${filterIndex}`}
+                className='filter-select'
+                data-index='0'
+                value={singleFilter.queuedActive || singleFilter.active}
+                onChange={val => {
+                  handleOnChange(filterIndex, val.target.value)
+                }}
+              >
+                {nullVal(singleFilter) && !singleFilter.resetLabel && (
+                  <option value='' key='select'>
+                    {'-Select-'}
+                  </option>
+                )}
+                {values}
+              </select>
+            </section>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default DashboardFilters