@cdc/dashboard 4.26.3 → 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.3",
+  "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.3",
-    "@cdc/core": "^4.26.3",
-    "@cdc/data-bite": "^4.26.3",
-    "@cdc/filtered-text": "^4.26.3",
-    "@cdc/map": "^4.26.3",
-    "@cdc/markup-include": "^4.26.3",
-    "@cdc/waffle-chart": "^4.26.3",
+    "@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": "d50e45a074fbefa56cac904917e707d57f237737",
+  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
   "main": "dist/cdcdashboard",
   "moduleName": "CdcDashboard",
   "peerDependencies": {

package/src/CdcDashboardComponent.tsx

@@ -523,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

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')
+  }
+}

package/src/_stories/Dashboard.stories.tsx

@@ -44,13 +44,16 @@ import GalleryDataBiteDashboard from './_mock/gallery-data-bite-dashboard.json'
 import TP5TestConfig from './_mock/tp5-test.json'
 import LineChartAnglesConfig from './_mock/dashboard-line-chart-angles.json'
 import TabSimpleFilterConfig from './_mock/tab-simple-filter.json'
+import DataDrivenColorsConfig from './_mock/dashboard-data-driven-colors.json'
 
 // Dashboard Filter Updates for Ascending, Descending, and Custom Order
 import DashboardFilterAsc from './_mock/dashboard-filter-asc.json'
 const DashboardFilterDesc = cloneDeep(DashboardFilterAsc)
 const DashboardFilterCust = cloneDeep(DashboardFilterAsc)
+const NestedParentChildFiltersSubgroupOnly = cloneDeep(NestedParentChildFilters)
 DashboardFilterDesc.dashboard.sharedFilters[0].order = 'desc'
 DashboardFilterCust.dashboard.sharedFilters[0].order = 'cust'
+NestedParentChildFiltersSubgroupOnly.dashboard.sharedFilters[1].displaySubgroupingOnly = true
 
 // On DashboardFilterCust change the sharedFilters[0].values and orderedValues to be in a custom order
 const customOrder = ['American Samoa', 'Alaska', 'Alabama', 'Arizona', 'Arkansas']
@@ -119,6 +122,20 @@ export const TP5_Test_Dashboard: Story = {
   }
 }
 
+export const DataDrivenColors: Story = {
+  args: {
+    config: DataDrivenColorsConfig as unknown as Config,
+    isEditor: false
+  }
+}
+
+export const DataDrivenColors_Editor: Story = {
+  args: {
+    config: DataDrivenColorsConfig as unknown as Config,
+    isEditor: true
+  }
+}
+
 export const Line_Chart_Angles: Story = {
   args: {
     config: LineChartAnglesConfig,
@@ -4788,8 +4805,7 @@ export const Nested_Dropdown_With_Parent_Child: Story = {
 
     // Verify defaultValue is applied on initial load (North region, 2023 Q2)
     expect(initialState.regionSelected).toBe('North')
-    expect(initialState.yearQuarterSelected).toContain('2023')
-    expect(initialState.yearQuarterSelected).toContain('Q2')
+    expect(initialState.yearQuarterSelected).toBe('2023 - Q2')
     expect(initialState.chartRendered).toBe(true)
 
     // Test 1: Change region to South → year options should update based on available data
@@ -4846,6 +4862,31 @@ export const Nested_Dropdown_With_Parent_Child: Story = {
   }
 }
 
+export const Nested_Dropdown_With_Parent_Child_Subgroup_Only: Story = {
+  args: {
+    config: NestedParentChildFiltersSubgroupOnly as unknown as Config,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays only the selected subgroup in the closed nested dropdown input while preserving the same filter behavior.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const regionFilter = (await canvas.findByLabelText('Region', { selector: 'select' })) as HTMLSelectElement
+    const yearQuarterInput = canvasElement.querySelector('.nested-dropdown input') as HTMLInputElement
+
+    await waitForOptionsToPopulate(regionFilter, 4)
+
+    expect(regionFilter.value).toBe('North')
+    expect(yearQuarterInput.value).toBe('Q2')
+  }
+}
+
 export const Metadata_In_Dashboard: Story = {
   args: {
     configUrl: '/packages/dashboard/tests/fixtures/dashboard-config-with-metadata.json'

package/src/_stories/_mock/dashboard-data-driven-colors.json

@@ -0,0 +1,171 @@
+{
+  "type": "dashboard",
+  "title": "COVID-19 County Case Tracker",
+  "description": "Select a state to view COVID-19 case counts by county. Background colors reflect the current alert status.",
+  "datasets": {
+    "covid-counties": {
+      "data": [
+        {
+          "State": "California",
+          "County1": "Los Angeles", "Cases1": "12847", "Status1": "Critical",
+          "County2": "San Diego", "Cases2": "4521", "Status2": "High",
+          "County3": "Sacramento", "Cases3": "1893", "Status3": "Medium"
+        },
+        {
+          "State": "Texas",
+          "County1": "Harris", "Cases1": "9734", "Status1": "High",
+          "County2": "Dallas", "Cases2": "7218", "Status2": "High",
+          "County3": "Travis", "Cases3": "2105", "Status3": "Medium"
+        },
+        {
+          "State": "New York",
+          "County1": "Kings", "Cases1": "3842", "Status1": "Medium",
+          "County2": "Queens", "Cases2": "3156", "Status2": "Medium",
+          "County3": "Erie", "Cases3": "987", "Status3": "Low"
+        },
+        {
+          "State": "Florida",
+          "County1": "Miami-Dade", "Cases1": "11203", "Status1": "Critical",
+          "County2": "Broward", "Cases2": "6890", "Status2": "High",
+          "County3": "Hillsborough", "Cases3": "3214", "Status3": "Medium"
+        },
+        {
+          "State": "Ohio",
+          "County1": "Franklin", "Cases1": "1542", "Status1": "Low",
+          "County2": "Cuyahoga", "Cases2": "1321", "Status2": "Low",
+          "County3": "Hamilton", "Cases3": "876", "Status3": "Low"
+        }
+      ]
+    }
+  },
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "State Filter",
+        "label": "Select State",
+        "columnName": "State",
+        "showDropdown": true,
+        "active": "California",
+        "values": ["California", "Florida", "New York", "Ohio", "Texas"],
+        "usedBy": ["bite-county-1", "bite-county-2", "bite-county-3"],
+        "tier": 1,
+        "type": "datafilter"
+      }
+    ]
+  },
+  "rows": [
+    [
+      { "width": 4, "widget": "bite-county-1" },
+      { "width": 4, "widget": "bite-county-2" },
+      { "width": 4, "widget": "bite-county-3" }
+    ]
+  ],
+  "visualizations": {
+    "bite-county-1": {
+      "uid": "bite-county-1",
+      "type": "data-bite",
+      "title": "County 1",
+      "biteStyle": "tp5",
+      "dataKey": "covid-counties",
+      "dataColumn": "Cases1",
+      "dataFunction": "Pass Through",
+      "biteBody": "confirmed cases",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "filters": [],
+      "theme": "theme-blue",
+      "visual": {
+        "border": false,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      },
+      "dataColors": {
+        "column": "Status1",
+        "mappings": [
+          { "sourceValue": "Low", "color": "#d7f2ed" },
+          { "sourceValue": "Medium", "color": "#b8e5ac" },
+          { "sourceValue": "High", "color": "#fea82f" },
+          { "sourceValue": "Critical", "color": "#a03169" }
+        ]
+      }
+    },
+    "bite-county-2": {
+      "uid": "bite-county-2",
+      "type": "data-bite",
+      "title": "County 2",
+      "biteStyle": "tp5",
+      "dataKey": "covid-counties",
+      "dataColumn": "Cases2",
+      "dataFunction": "Pass Through",
+      "biteBody": "confirmed cases",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "filters": [],
+      "theme": "theme-blue",
+      "visual": {
+        "border": false,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      },
+      "dataColors": {
+        "column": "Status2",
+        "mappings": [
+          { "sourceValue": "Low", "color": "#d7f2ed" },
+          { "sourceValue": "Medium", "color": "#b8e5ac" },
+          { "sourceValue": "High", "color": "#fea82f" },
+          { "sourceValue": "Critical", "color": "#a03169" }
+        ]
+      }
+    },
+    "bite-county-3": {
+      "uid": "bite-county-3",
+      "type": "data-bite",
+      "title": "County 3",
+      "biteStyle": "tp5",
+      "dataKey": "covid-counties",
+      "dataColumn": "Cases3",
+      "dataFunction": "Pass Through",
+      "biteBody": "confirmed cases",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "filters": [],
+      "theme": "theme-blue",
+      "visual": {
+        "border": false,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      },
+      "dataColors": {
+        "column": "Status3",
+        "mappings": [
+          { "sourceValue": "Low", "color": "#d7f2ed" },
+          { "sourceValue": "Medium", "color": "#b8e5ac" },
+          { "sourceValue": "High", "color": "#fea82f" },
+          { "sourceValue": "Critical", "color": "#a03169" }
+        ]
+      }
+    }
+  }
+}

package/src/_stories/_mock/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,7 +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
+      }
     }
   }
 }
-