@cdc/dashboard 4.26.1 → 4.26.2

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

@@ -7,12 +7,14 @@
         "type": "urlfilter",
         "columnName": "category",
         "apiFilter": {
-          "apiEndpoint": "http://localhost:8080/examples/api-test/categories.json",
+          "apiEndpoint": "/examples/api-test/categories.json",
           "valueSelector": "category",
           "textSelector": "category"
         },
         "queryParameter": "category",
+        "setByQueryParameter": "category",
         "resetLabel": "- Select Category -",
+        "defaultValue": "Chronic Diseases",
         "showDropdown": true,
         "filterStyle": "dropdown",
         "usedBy": ["chart1"]
@@ -22,11 +24,12 @@
         "type": "urlfilter",
         "columnName": "topic",
         "apiFilter": {
-          "apiEndpoint": "http://localhost:8080/examples/api-test/topics.json",
+          "apiEndpoint": "/examples/api-test/topics.json",
           "valueSelector": "topic",
           "textSelector": "topic"
         },
         "queryParameter": "topic",
+        "setByQueryParameter": "topic",
         "resetLabel": "- Select Topic -",
         "showDropdown": true,
         "parents": [
@@ -40,11 +43,12 @@
         "type": "urlfilter",
         "columnName": "year",
         "apiFilter": {
-          "apiEndpoint": "http://localhost:8080/examples/api-test/years.json",
+          "apiEndpoint": "/examples/api-test/years.json",
           "valueSelector": "year",
           "textSelector": "year"
         },
         "queryParameter": "year",
+        "setByQueryParameter": "year",
         "resetLabel": "- Select -",
         "showDropdown": true,
         "parents": [
@@ -129,4 +133,4 @@
   },
   "filterBehavior": "Apply Button",
   "type": "dashboard"
-}
+}

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,29 +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;
-      }
-
-      /* Add 1rem padding to mimic DFE when editor is not visible */
-      .cdc-open-viz-module.type-dashboard:not(.isDashboardEditor) {
-        padding: 1rem;
-      }
-    </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/dashboard-gallery.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,55 +1,53 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.26.1",
+  "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.26.1",
-    "@cdc/core": "^4.26.1",
-    "@cdc/data-bite": "^4.26.1",
-    "@cdc/filtered-text": "^4.26.1",
-    "@cdc/map": "^4.26.1",
-    "@cdc/markup-include": "^4.26.1",
-    "@cdc/waffle-chart": "^4.26.1",
+    "@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"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "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": "^4.3.4",
+    "@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": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
+  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "main": "dist/cdcdashboard",
+  "moduleName": "CdcDashboard",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.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"
+  },
+  "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'
 

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

@@ -151,7 +151,8 @@ export const MultiVizConfigurationWorkflow: Story = {
     // ========================================================================
     await sleep(500)
 
-    const dataSourceSelect = canvas.getByRole('combobox')
+    const comboboxes = canvas.getAllByRole('combobox')
+    const dataSourceSelect = comboboxes[comboboxes.length - 1]
     await user.selectOptions(dataSourceSelect, 'Demo')
     await sleep(500)