@cdc/dashboard 4.26.2 → 4.26.4

package/examples/sankey.json

@@ -4238,7 +4238,7 @@
         }
       ],
       "dataFileSize": 72,
-      "dataFileName": "data.json",
+      "dataFileName": "__data__/data.json",
       "dataFileSourceType": "file",
       "dataFileFormat": "JSON",
       "preview": false
@@ -4251,7 +4251,7 @@
         }
       ],
       "dataFileSize": 59,
-      "dataFileName": "data-2.json",
+      "dataFileName": "__data__/data-2.json",
       "dataFileSourceType": "file",
       "dataFileFormat": "JSON",
       "preview": false
@@ -5215,4 +5215,4 @@
   "type": "dashboard",
   "uuid": 1707343065225,
   "runtime": {}
-}
+}

package/examples/test-api-filter-reset.json

@@ -7,7 +7,7 @@
         "type": "urlfilter",
         "columnName": "category",
         "apiFilter": {
-          "apiEndpoint": "/examples/api-test/categories.json",
+          "apiEndpoint": "/examples/api-test/__data__/categories.json",
           "valueSelector": "category",
           "textSelector": "category"
         },
@@ -24,7 +24,7 @@
         "type": "urlfilter",
         "columnName": "topic",
         "apiFilter": {
-          "apiEndpoint": "/examples/api-test/topics.json",
+          "apiEndpoint": "/examples/api-test/__data__/topics.json",
           "valueSelector": "topic",
           "textSelector": "topic"
         },
@@ -43,7 +43,7 @@
         "type": "urlfilter",
         "columnName": "year",
         "apiFilter": {
-          "apiEndpoint": "/examples/api-test/years.json",
+          "apiEndpoint": "/examples/api-test/__data__/years.json",
           "valueSelector": "year",
           "textSelector": "year"
         },
@@ -128,7 +128,7 @@
   },
   "datasets": {
     "chartData": {
-      "dataUrl": "http://localhost:8080/examples/api-test/chart-data.json"
+      "dataUrl": "http://localhost:8080/examples/api-test/__data__/chart-data.json"
     }
   },
   "filterBehavior": "Apply Button",

package/examples/tp5-test.json

@@ -40,13 +40,23 @@
       { "width": 4, "widget": "gauge1" },
       { "width": 4, "widget": "gauge2" },
       { "width": 4, "widget": "gauge3" }
+    ],
+    [
+      { "width": 4, "widget": "markup1" },
+      { "width": 4, "widget": "markup2" },
+      { "width": 4, "widget": "markup3" }
+    ],
+    [
+      { "width": 4, "widget": "waffle2" },
+      { "width": 4, "widget": "bite3" },
+      { "width": 4, "widget": "markup2" }
     ]
   ],
   "visualizations": {
     "waffle1": {
       "uid": "waffle1",
       "type": "waffle-chart",
-      "title": "Vaccination Coverage",
+      "title": "Vaccination",
       "visualizationType": "TP5 Waffle",
       "visualizationSubType": "linear",
       "showPercent": true,
@@ -71,7 +81,7 @@
     "waffle2": {
       "uid": "waffle2",
       "type": "waffle-chart",
-      "title": "Health Insurance Coverage Rate",
+      "title": "Health",
       "visualizationType": "TP5 Waffle",
       "visualizationSubType": "linear",
       "showPercent": true,
@@ -96,7 +106,7 @@
     "waffle3": {
       "uid": "waffle3",
       "type": "waffle-chart",
-      "title": "Cancer Screening Completion",
+      "title": "Cancer",
       "visualizationType": "TP5 Waffle",
       "visualizationSubType": "linear",
       "showPercent": true,
@@ -245,7 +255,7 @@
     "bite3": {
       "uid": "bite3",
       "type": "data-bite",
-      "title": "Cancer Screening Completion",
+      "title": "Cancer Screening Completion, and a little something else to make the title taller",
       "biteStyle": "tp5",
       "dataColumn": "Screening Rate",
       "dataFunction": "Mean (Average)",
@@ -261,6 +271,78 @@
       "visual": {
         "hideBackgroundColor": false
       }
+    },
+    "markup1": {
+      "uid": "markup1",
+      "type": "markup-include",
+      "title": "",
+      "theme": "theme-blue",
+      "contentEditor": {
+        "style": "tp5",
+        "title": "TP5 Markup Include",
+        "titleStyle": "small",
+        "useInlineHTML": true,
+        "inlineHTML": "<p><strong>68.5%</strong> of adults were vaccinated against seasonal flu in this sample dataset.</p>",
+        "srcUrl": "#example",
+        "showHeader": true,
+        "showNoDataMessage": false,
+        "noDataMessageText": "No Data Available"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "whiteBackground": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      }
+    },
+    "markup2": {
+      "uid": "markup2",
+      "type": "markup-include",
+      "title": "",
+      "theme": "theme-teal",
+      "contentEditor": {
+        "style": "tp5",
+        "title": "White Background TP5",
+        "titleStyle": "small",
+        "useInlineHTML": true,
+        "inlineHTML": "<p>This TP5 markup include uses white-background styling with border enabled for comparison.</p>",
+        "srcUrl": "#example",
+        "showHeader": true,
+        "showNoDataMessage": false,
+        "noDataMessageText": "No Data Available"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "whiteBackground": true,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      }
+    },
+    "markup3": {
+      "uid": "markup3",
+      "type": "markup-include",
+      "title": "",
+      "theme": "theme-purple",
+      "contentEditor": {
+        "style": "tp5",
+        "title": "TP5 Markup Include (No White BG)",
+        "titleStyle": "small",
+        "useInlineHTML": true,
+        "inlineHTML": "<p>This TP5 markup include uses the standard background and border settings for side-by-side alignment testing.</p>",
+        "srcUrl": "#example",
+        "showHeader": true,
+        "showNoDataMessage": false,
+        "noDataMessageText": "No Data Available"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "whiteBackground": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      }
     }
   }
 }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.26.2",
+  "version": "4.26.4",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "license": "Apache-2.0",
   "author": "Matthew Pallansch <mpallansch@adittech.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/chart": "^4.26.2",
-    "@cdc/core": "^4.26.2",
-    "@cdc/data-bite": "^4.26.2",
-    "@cdc/filtered-text": "^4.26.2",
-    "@cdc/map": "^4.26.2",
-    "@cdc/markup-include": "^4.26.2",
-    "@cdc/waffle-chart": "^4.26.2",
+    "@cdc/chart": "^4.26.4",
+    "@cdc/core": "^4.26.4",
+    "@cdc/data-bite": "^4.26.4",
+    "@cdc/filtered-text": "^4.26.4",
+    "@cdc/map": "^4.26.4",
+    "@cdc/markup-include": "^4.26.4",
+    "@cdc/waffle-chart": "^4.26.4",
     "js-base64": "^2.5.2",
     "react-accessible-accordion": "^5.0.1",
     "react-dnd": "^16.0.1",
@@ -26,7 +26,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
   "main": "dist/cdcdashboard",
   "moduleName": "CdcDashboard",
   "peerDependencies": {

package/src/CdcDashboard.tsx

@@ -91,11 +91,12 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
       return prepareDatasets(newConfig)
     } else {
       const dataKey = newConfig.dataFileName || 'backwards-compatibility'
-      const data = await processDataLegacy(config)
+      const { data, dataMetadata } = await processDataLegacy(config)
 
       const datasetsFull = {}
       datasetsFull[dataKey] = {
         data,
+        dataMetadata,
         dataDescription: newConfig.dataDescription
       }
       newConfig.datasets = datasetsFull

package/src/CdcDashboardComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo, useReducer, useContext } from 'react'
+import React, { useState, useEffect, useCallback, useMemo, useReducer, useContext, useRef } from 'react'
 import 'whatwg-fetch'
 import ResizeObserver from 'resize-observer-polyfill'
 
@@ -39,7 +39,9 @@ import { type SharedFilter } from './types/SharedFilter'
 import { type WCMSProps } from '@cdc/core/types/WCMSProps'
 import { type InitialState } from './types/InitialState'
 import MultiTabs from './components/MultiConfigTabs'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import pick from 'lodash/pick'
+import pickBy from 'lodash/pickBy'
 import EditorContext from '@cdc/core/contexts/EditorContext'
 import { APIFilterDropdowns } from './components/DashboardFilters'
 import { ViewPort } from '@cdc/core/types/ViewPort'
@@ -47,7 +49,7 @@ import VisualizationRow from './components/VisualizationRow'
 import { getVizConfig } from './helpers/getVizConfig'
 import { getFilteredData } from './helpers/getFilteredData'
 import { getVizRowColumnLocator } from './helpers/getVizRowColumnLocator'
-import Layout from '@cdc/core/components/Layout'
+import { Responsive, VisualizationContainer } from '@cdc/core/components/Layout'
 import * as reloadURLHelpers from './helpers/reloadURLHelpers'
 import { addValuesToDashboardFilters } from './helpers/addValuesToDashboardFilters'
 import { DashboardFilters } from './types/DashboardFilters'
@@ -207,9 +209,9 @@ export default function CdcDashboard({
 
           setAPILoading(true)
           await fetchRemoteData(dataUrlFinal)
-            .then(responseData => {
-              let data: any[] = responseData
-              if (responseData && dataset.dataDescription) {
+            .then(({ data: fetchedData, dataMetadata }) => {
+              let data: any[] = fetchedData
+              if (data && dataset.dataDescription) {
                 try {
                   data = transform.autoStandardize(data)
                   data = transform.developerStandardize(data, dataset.dataDescription)
@@ -219,6 +221,7 @@ export default function CdcDashboard({
                 }
               }
               newDatasets[datasetKey].data = data
+              newDatasets[datasetKey].dataMetadata = dataMetadata
               newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
               newData[datasetKey] = data
             })
@@ -236,7 +239,7 @@ export default function CdcDashboard({
       }
     }
 
-    const datasetsWithFiles = _.pickBy(newDatasets, dataset => !dataset.dataUrl)
+    const datasetsWithFiles = pickBy(newDatasets, dataset => !dataset.dataUrl)
 
     if (dataWasFetched || Object.keys(datasetsWithFiles).length) {
       const dataFiles = Object.keys(datasetsWithFiles).reduce((acc, key) => {
@@ -291,7 +294,7 @@ export default function CdcDashboard({
   }
 
   const setSharedFilter = (key, datum) => {
-    const { config: newConfig, filteredData } = _.cloneDeep(state)
+    const { config: newConfig, filteredData } = cloneDeep(state)
 
     for (let i = 0; i < newConfig.dashboard.sharedFilters.length; i++) {
       const filter = newConfig.dashboard.sharedFilters[i]
@@ -319,7 +322,7 @@ export default function CdcDashboard({
         return acc
       }, {})
       const newConfig = { ...state, data: { ...data, ...newDatasets } }
-      const newFilteredData = getFilteredData(newConfig, _.cloneDeep(filteredData))
+      const newFilteredData = getFilteredData(newConfig, cloneDeep(filteredData))
       dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
       dispatch({ type: 'SET_DATA', payload: { ...data, ...newDatasets } })
     } catch (e) {
@@ -375,14 +378,14 @@ export default function CdcDashboard({
 
   const updateChildConfig = (visualizationKey, newConfig) => {
     const config = cloneConfig(state.config)
-    const updatedConfig = _.pick(config, ['visualizations', 'multiDashboards'])
+    const updatedConfig = pick(config, ['visualizations', 'multiDashboards'])
     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']) }
+      const toSave = { label, visualizations: updatedConfig.visualizations, ...pick(config, ['dashboard', 'rows']) }
       multiDashboards[activeDashboard] = toSave
       updatedConfig.multiDashboards = multiDashboards
     }
@@ -394,17 +397,31 @@ export default function CdcDashboard({
     }
   }
 
-  const resizeObserver = new ResizeObserver(entries => {
-    for (let entry of entries) {
-      let newViewport = getViewport(entry.contentRect.width)
+  const resizeObserverRef = useRef<ResizeObserver | null>(null)
 
-      setCurrentViewport(newViewport)
+  const outerContainerRef = useCallback(node => {
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect()
+      resizeObserverRef.current = null
     }
-  })
 
-  const outerContainerRef = useCallback(node => {
     if (node !== null) {
-      resizeObserver.observe(node)
+      resizeObserverRef.current = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          const newViewport = getViewport(entry.contentRect.width)
+          setCurrentViewport(newViewport)
+        }
+      })
+      resizeObserverRef.current.observe(node)
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect()
+        resizeObserverRef.current = null
+      }
     }
   }, [])
 
@@ -497,7 +514,7 @@ export default function CdcDashboard({
             autoDismiss={true}
           />
         ))}
-        <Layout.Responsive isEditor={isEditor}>
+        <Responsive isEditor={isEditor}>
           <div className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''}`}>
             <Title
               title={title}
@@ -506,7 +523,7 @@ export default function CdcDashboard({
               classes={[`dashboard-title`, `${config.dashboard.theme ?? 'theme-blue'}`]}
             />
             {/* Description */}
-            {description && <div className='subtext mb-4'>{parse(description)}</div>}
+            {description && <div className='subtext cove-prose mb-4'>{parse(description)}</div>}
             {/* Visualizations */}
             {filteredRows?.map((row, index) => (
               <VisualizationRow
@@ -640,16 +657,11 @@ export default function CdcDashboard({
                 })
                 .filter(Boolean)}
           </div>
-        </Layout.Responsive>
+        </Responsive>
       </>
     )
   }
 
-  const dashboardContainerClasses = ['cdc-open-viz-module', 'type-dashboard', `${currentViewport}`]
-  if (isEditor) {
-    dashboardContainerClasses.push('isDashboardEditor')
-  }
-
   return (
     <GlobalContextProvider>
       <DashboardContext.Provider
@@ -666,9 +678,17 @@ export default function CdcDashboard({
         }}
       >
         <DashboardDispatchContext.Provider value={dispatch}>
-          <div className={dashboardContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
+          <VisualizationContainer
+            className={isEditor ? 'is-dashboard-editor' : undefined}
+            config={state.config}
+            currentViewport={currentViewport}
+            imageId={imageId}
+            isEditor={false}
+            ref={outerContainerRef}
+            renderResponsive={false}
+          >
             {body}
-          </div>
+          </VisualizationContainer>
           <OverlayFrame />
         </DashboardDispatchContext.Provider>
       </DashboardContext.Provider>

package/src/_stories/Dashboard.DataSetup.stories.tsx

@@ -159,7 +159,12 @@ export const MultiVizConfigurationWorkflow: Story = {
     // ========================================================================
     // STEP 11: Click "Vertical Values for map" button
     // ========================================================================
-    await sleep(500)
+    await waitFor(
+      () => {
+        expect(canvas.getByRole('button', { name: /vertical values for map/i })).toBeTruthy()
+      },
+      { timeout: 5000 }
+    )
 
     const verticalValuesButton = canvas.getByRole('button', { name: /vertical values for map/i })
     await user.click(verticalValuesButton)

package/src/_stories/Dashboard.Pages.smoke.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import Dashboard from '../CdcDashboard'
+
+const meta: Meta<typeof Dashboard> = {
+  title: 'Pages/NWSS',
+  component: Dashboard
+}
+
+export default meta
+type Story = StoryObj<typeof Dashboard>
+
+export const FluA_Top_Modules: Story = {
+  name: 'FluA Top Modules',
+  args: {
+    configUrl: 'https://www.cdc.gov/nwss/rv/modules/flua/flua-top-modules.json',
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}

package/src/_stories/Dashboard.smoke.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import Dashboard from '../CdcDashboard'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
+
+const meta: Meta<typeof Dashboard> = {
+  title: 'Components/Pages/Dashboard',
+  component: Dashboard
+}
+
+export default meta
+type Story = StoryObj<typeof Dashboard>
+
+export const Dashboard_Minimal_Config: Story = {
+  args: {
+    config: MinimalExampleConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Minimum working consumer config. This story validates the source-of-truth minimal example used by the package README and CONFIG reference.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.textContent).toContain('Dashboard Example')
+    expect(canvasElement.textContent).toContain('Minimal dashboard example')
+  }
+}