@cdc/dashboard 4.25.11 → 4.26.2

package/examples/tp5-gauges.json

@@ -0,0 +1,196 @@
+{
+  "type": "dashboard",
+  "title": "TP5 Gauge Dashboard Example",
+  "description": "Three TP5 Gauge charts displaying health metrics",
+  "data": [
+    {
+      "Category": "Adults",
+      "Vaccination Rate": "68.5",
+      "Insured Rate": "87.2",
+      "Screening Rate": "72.8"
+    },
+    {
+      "Category": "Seniors",
+      "Vaccination Rate": "82.3",
+      "Insured Rate": "95.1",
+      "Screening Rate": "84.6"
+    },
+    {
+      "Category": "Youth",
+      "Vaccination Rate": "54.2",
+      "Insured Rate": "92.4",
+      "Screening Rate": "65.3"
+    }
+  ],
+  "dashboard": {
+    "filters": []
+  },
+  "rows": [
+    [
+      { "width": 4, "widget": "gauge1" },
+      { "width": 4, "widget": "gauge2" },
+      { "width": 4, "widget": "gauge3" }
+    ]
+  ],
+  "visualizations": {
+    "gauge1": {
+      "uid": "gauge1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "dataConditionalColumn": "",
+      "dataConditionalOperator": "",
+      "dataConditionalComparate": "",
+      "invalidComparate": false,
+      "customDenom": false,
+      "dataDenom": "100",
+      "dataDenomColumn": "",
+      "dataDenomFunction": "",
+      "prefix": "",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false,
+        "whiteBackground": false,
+        "colors": {
+          "theme-blue": "#005eaa",
+          "theme-purple": "#712177",
+          "theme-brown": "#705043",
+          "theme-teal": "#00695c",
+          "theme-pink": "#af4448",
+          "theme-orange": "#bb4d00",
+          "theme-slate": "#29434e",
+          "theme-indigo": "#26418f",
+          "theme-cyan": "#006778",
+          "theme-green": "#4b830d",
+          "theme-amber": "#fbab18"
+        }
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge2": {
+      "uid": "gauge2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "dataConditionalColumn": "",
+      "dataConditionalOperator": "",
+      "dataConditionalComparate": "",
+      "invalidComparate": false,
+      "customDenom": false,
+      "dataDenom": "100",
+      "dataDenomColumn": "",
+      "dataDenomFunction": "",
+      "prefix": "",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false,
+        "whiteBackground": false,
+        "colors": {
+          "theme-blue": "#005eaa",
+          "theme-purple": "#712177",
+          "theme-brown": "#705043",
+          "theme-teal": "#00695c",
+          "theme-pink": "#af4448",
+          "theme-orange": "#bb4d00",
+          "theme-slate": "#29434e",
+          "theme-indigo": "#26418f",
+          "theme-cyan": "#006778",
+          "theme-green": "#4b830d",
+          "theme-amber": "#fbab18"
+        }
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge3": {
+      "uid": "gauge3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "dataConditionalColumn": "",
+      "dataConditionalOperator": "",
+      "dataConditionalComparate": "",
+      "invalidComparate": false,
+      "customDenom": false,
+      "dataDenom": "100",
+      "dataDenomColumn": "",
+      "dataDenomFunction": "",
+      "prefix": "",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false,
+        "whiteBackground": false,
+        "colors": {
+          "theme-blue": "#005eaa",
+          "theme-purple": "#712177",
+          "theme-brown": "#705043",
+          "theme-teal": "#00695c",
+          "theme-pink": "#af4448",
+          "theme-orange": "#bb4d00",
+          "theme-slate": "#29434e",
+          "theme-indigo": "#26418f",
+          "theme-cyan": "#006778",
+          "theme-green": "#4b830d",
+          "theme-amber": "#fbab18"
+        }
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    }
+  }
+}

package/examples/tp5-test.json

@@ -0,0 +1,266 @@
+{
+  "type": "dashboard",
+  "title": "TP5 Alignment Test Dashboard",
+  "description": "Testing alignment of TP5 Waffles, Data Bites, and Gauges",
+  "data": [
+    {
+      "Category": "Adults",
+      "Vaccination Rate": "68.5",
+      "Insured Rate": "87.2",
+      "Screening Rate": "72.8"
+    },
+    {
+      "Category": "Seniors",
+      "Vaccination Rate": "82.3",
+      "Insured Rate": "95.1",
+      "Screening Rate": "84.6"
+    },
+    {
+      "Category": "Youth",
+      "Vaccination Rate": "54.2",
+      "Insured Rate": "92.4",
+      "Screening Rate": "65.3"
+    }
+  ],
+  "dashboard": {
+    "filters": []
+  },
+  "rows": [
+    [
+      { "width": 4, "widget": "waffle1" },
+      { "width": 4, "widget": "waffle2" },
+      { "width": 4, "widget": "waffle3" }
+    ],
+    [
+      { "width": 4, "widget": "bite1" },
+      { "width": 4, "widget": "bite2" },
+      { "width": 4, "widget": "bite3" }
+    ],
+    [
+      { "width": 4, "widget": "gauge1" },
+      { "width": 4, "widget": "gauge2" },
+      { "width": 4, "widget": "gauge3" }
+    ]
+  ],
+  "visualizations": {
+    "waffle1": {
+      "uid": "waffle1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "shape": "square",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "waffle2": {
+      "uid": "waffle2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "shape": "person",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "waffle3": {
+      "uid": "waffle3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "shape": "circle",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge1": {
+      "uid": "gauge1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge2": {
+      "uid": "gauge2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge3": {
+      "uid": "gauge3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "bite1": {
+      "uid": "bite1",
+      "type": "data-bite",
+      "title": "Vaccination Coverage",
+      "biteStyle": "tp5",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-blue",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    },
+    "bite2": {
+      "uid": "bite2",
+      "type": "data-bite",
+      "title": "Health Insurance Coverage Rate",
+      "biteStyle": "tp5",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-teal",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    },
+    "bite3": {
+      "uid": "bite3",
+      "type": "data-bite",
+      "title": "Cancer Screening Completion",
+      "biteStyle": "tp5",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-purple",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    }
+  }
+}

package/index.html

@@ -1,30 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <style>
-    body {
-      margin: 0 auto !important;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      min-height: unset !important;
-    }
-
-    .react-container+.react-container {
-      margin-top: 3rem;
-    }
-  </style>
-  <link rel="stylesheet prefetch" href="examples/custom/css/respiratory.css" />
-  <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
-</head>
-
-<body>
-  <div class="react-container" data-config="/examples/markup-axis-label.json"></div>
-  <script src="https://www.cdc.gov/TemplatePackage/contrib/libs/jquery/latest/jquery.min.js?_=91329"></script>
-  <script type="module" src="./src/index.tsx"></script>
-</body>
-
-</html>
+<!-- index.html is generated by @cdc/core/generateViteConfig.js using the files in @cdc/core/devTemplate/ -->

package/package.json

@@ -1,54 +1,53 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.25.11",
+  "version": "4.26.2",
   "description": "React component for combining multiple visualizations into a single dashboard",
-  "moduleName": "CdcDashboard",
-  "main": "dist/cdcdashboard",
-  "type": "module",
-  "scripts": {
-    "start": "vite --open",
-    "build": "vite build",
-    "preview": "vite preview",
-    "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/dashboard build",
-    "test": "vitest run --reporter verbose",
-    "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui",
-    "coverage": "vitest run --coverage"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz",
-    "directory": "packages/dashboard"
-  },
-  "author": "Matthew Pallansch <mpallansch@adittech.com>",
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
+  "author": "Matthew Pallansch <mpallansch@adittech.com>",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/chart": "^4.25.11",
-    "@cdc/core": "^4.25.11",
-    "@cdc/data-bite": "^4.25.11",
-    "@cdc/filtered-text": "^4.25.11",
-    "@cdc/map": "^4.25.11",
-    "@cdc/markup-include": "^4.25.11",
-    "@cdc/waffle-chart": "^4.25.11",
+    "@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",
     "js-base64": "^2.5.2",
     "react-accessible-accordion": "^5.0.1",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
-    "use-debounce": "^6.0.1"
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "use-debounce": "^10.1.0"
   },
+  "devDependencies": {
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@vitejs/plugin-react": "^5.1.2",
+    "sass": "^1.89.2",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "main": "dist/cdcdashboard",
+  "moduleName": "CdcDashboard",
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^4.4.11",
-    "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vite-plugin-svgr": "^2.4.0"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CDCgov/cdc-open-viz",
+    "directory": "packages/dashboard"
+  },
+  "scripts": {
+    "build": "vite build",
+    "coverage": "vitest run --coverage",
+    "graph": "nx graph",
+    "prepublishOnly": "lerna run --scope @cdc/dashboard build",
+    "preview": "vite preview",
+    "start": "vite --open",
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
   },
-  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
+  "type": "module"
 }

package/src/CdcDashboardComponent.tsx

@@ -1,7 +1,4 @@
 import React, { useState, useEffect, useCallback, useMemo, useReducer, useContext } from 'react'
-
-// IE11
-// import 'core-js/stable'
 import 'whatwg-fetch'
 import ResizeObserver from 'resize-observer-polyfill'
 
@@ -60,6 +57,7 @@ import Alert from '@cdc/core/components/Alert'
 import { shouldLoadAllFilters } from './helpers/shouldLoadAllFilters'
 import { subscribe, unsubscribe } from '@cdc/core/helpers/events'
 import DashboardEditors from './components/DashboardEditors'
+import { updateChildFilters } from './helpers/updateChildFilters'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -97,6 +95,16 @@ export default function CdcDashboard({
     }
 
     const vals = reloadURLHelpers.getDatasetKeys(state.config).map(key => state.data[key])
+
+    // Check if there are any visualizations that actually need data
+    // Markup-includes without dataKey don't require dashboard data
+    const visualizationsNeedingData = Object.values(state.config.visualizations).filter(viz => {
+      return viz.type !== 'markup-include' || viz.dataKey
+    })
+
+    // If no visualizations need data, don't show no-data state
+    if (!vals.length && visualizationsNeedingData.length === 0) return false
+
     if (!vals.length) return true
     return vals.some(val => val === undefined)
   }, [state.data, state.config.visualizations, state.config.dashboard?.sharedFilters, state.filtersApplied])
@@ -330,7 +338,8 @@ export default function CdcDashboard({
   useEffect(() => {
     const { config } = state
     const loadAllFilters = shouldLoadAllFilters(config, isEditor && !isPreview)
-    const sharedFiltersWithValues = addValuesToDashboardFilters(config.dashboard.sharedFilters, state.data)
+    let sharedFiltersWithValues = addValuesToDashboardFilters(config.dashboard.sharedFilters, state.data)
+    sharedFiltersWithValues = updateChildFilters(sharedFiltersWithValues, state.data)
     setAPILoading(true)
     loadAPIFilters(sharedFiltersWithValues, apiFilterDropdowns, loadAllFilters)?.then(newFilters => {
       const allValuesSelected = newFilters.every(filter => {
@@ -493,10 +502,11 @@ export default function CdcDashboard({
             <Title
               title={title}
               isDashboard={true}
+              titleStyle={config.dashboard.titleStyle}
               classes={[`dashboard-title`, `${config.dashboard.theme ?? 'theme-blue'}`]}
             />
             {/* Description */}
-            {description && <div className='subtext mb-3'>{parse(description)}</div>}
+            {description && <div className='subtext mb-4'>{parse(description)}</div>}
             {/* Visualizations */}
             {filteredRows?.map((row, index) => (
               <VisualizationRow
@@ -636,6 +646,9 @@ export default function CdcDashboard({
   }
 
   const dashboardContainerClasses = ['cdc-open-viz-module', 'type-dashboard', `${currentViewport}`]
+  if (isEditor) {
+    dashboardContainerClasses.push('isDashboardEditor')
+  }
 
   return (
     <GlobalContextProvider>