@cdc/dashboard 4.25.11 → 4.26.1

package/examples/test-dashboard-simple.json

@@ -0,0 +1,503 @@
+{
+  "dashboard": {
+    "sharedFilters": [
+      {
+        "key": "Geography",
+        "type": "datafilter",
+        "columnName": "geography",
+        "showDropdown": true,
+        "filterStyle": "dropdown",
+        "defaultValue": "United States",
+        "usedBy": [
+          "chart1"
+        ]
+      },
+      {
+        "key": "Year",
+        "type": "datafilter",
+        "columnName": "year",
+        "showDropdown": true,
+        "filterStyle": "dropdown",
+        "defaultValue": "2023",
+        "usedBy": [
+          "chart1"
+        ]
+      }
+    ]
+  },
+  "rows": [
+    {
+      "uuid": "__​undefined__",
+      "toggle": "__​undefined__",
+      "equalHeight": "__​undefined__",
+      "columns": [
+        {
+          "width": 12,
+          "widget": "filters",
+          "toggleName": "Filter Dropdowns"
+        }
+      ]
+    },
+    {
+      "uuid": "__​undefined__",
+      "toggle": "__​undefined__",
+      "equalHeight": "__​undefined__",
+      "columns": [
+        {
+          "width": 12,
+          "widget": "chart1",
+          "toggleName": "Chart"
+        }
+      ]
+    }
+  ],
+  "visualizations": {
+    "filters": {
+      "type": "dashboardFilters",
+      "visualizationType": "dashboardFilters",
+      "uid": "filters",
+      "sharedFilterIndexes": [
+        0,
+        1
+      ],
+      "filterBehavior": "Apply Button",
+      "dashboardFilters": [
+        {
+          "columnName": "geography",
+          "active": "United States",
+          "values": [
+            "California",
+            "Texas",
+            "United States"
+          ]
+        },
+        {
+          "columnName": "year",
+          "active": "2021",
+          "values": [
+            "2021",
+            "2022",
+            "2023"
+          ]
+        }
+      ]
+    },
+    "chart1": {
+      "annotations": [],
+      "allowLineToBarGraph": "__​undefined__",
+      "type": "chart",
+      "debugSvg": false,
+      "chartMessage": {
+        "noData": "No Data Available"
+      },
+      "title": "Test Chart",
+      "showTitle": true,
+      "showDownloadMediaButton": false,
+      "theme": "theme-blue",
+      "animate": false,
+      "lineDatapointStyle": "hover",
+      "lineDatapointColor": "Same as Line",
+      "barHasBorder": "true",
+      "isLollipopChart": false,
+      "lollipopShape": "circle",
+      "lollipopColorStyle": "two-tone",
+      "visualizationSubType": "regular",
+      "barStyle": "",
+      "roundingStyle": "standard",
+      "tipRounding": "top",
+      "isResponsiveTicks": false,
+      "general": {
+        "annotationDropdownText": "Annotations",
+        "showMissingDataLabel": true,
+        "showSuppressedSymbol": true,
+        "showZeroValueData": true,
+        "hideNullValue": true,
+        "palette": {
+          "name": "sequential_blue",
+          "version": "2.0",
+          "isReversed": false
+        }
+      },
+      "padding": {
+        "left": 5,
+        "right": 5
+      },
+      "preliminaryData": [],
+      "yAxis": {
+        "hideAxis": false,
+        "displayNumbersOnBar": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 50,
+        "gridLines": false,
+        "enablePadding": false,
+        "min": "",
+        "max": "",
+        "labelColor": "#1c1d1f",
+        "tickLabelColor": "#1c1d1f",
+        "tickColor": "#1c1d1f",
+        "rightHideAxis": false,
+        "rightAxisSize": 0,
+        "rightLabel": "",
+        "rightLabelOffsetSize": 0,
+        "rightAxisLabelColor": "#1c1d1f",
+        "rightAxisTickLabelColor": "#1c1d1f",
+        "rightAxisTickColor": "#1c1d1f",
+        "numTicks": "",
+        "axisPadding": 0,
+        "scalePadding": 10,
+        "tickRotation": 0,
+        "anchors": [],
+        "shoMissingDataLabel": true,
+        "showMissingDataLine": true,
+        "categories": [],
+        "label": "Value"
+      },
+      "boxplot": {
+        "plots": [],
+        "borders": "true",
+        "plotOutlierValues": false,
+        "plotNonOutlierValues": true,
+        "labels": {
+          "q1": "Lower Quartile",
+          "q2": "q2",
+          "q3": "Upper Quartile",
+          "q4": "q4",
+          "minimum": "Minimum",
+          "maximum": "Maximum",
+          "mean": "Mean",
+          "median": "Median",
+          "sd": "Standard Deviation",
+          "iqr": "Interquartile Range",
+          "count": "Count",
+          "outliers": "Outliers",
+          "values": "Values",
+          "lowerBounds": "Lower Bounds",
+          "upperBounds": "Upper Bounds"
+        }
+      },
+      "topAxis": {
+        "hasLine": false
+      },
+      "isLegendValue": false,
+      "barThickness": 0.35,
+      "barHeight": 25,
+      "barSpace": 15,
+      "heights": {
+        "vertical": 300,
+        "horizontal": 750
+      },
+      "xAxis": {
+        "sortDates": false,
+        "anchors": [],
+        "type": "categorical",
+        "showTargetLabel": true,
+        "targetLabel": "Target",
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 75,
+        "tickRotation": 0,
+        "min": "",
+        "max": "",
+        "labelColor": "#1c1d1f",
+        "tickLabelColor": "#1c1d1f",
+        "tickColor": "#1c1d1f",
+        "numTicks": "",
+        "labelOffset": 0,
+        "axisPadding": 200,
+        "target": 0,
+        "maxTickRotation": 0,
+        "padding": 5,
+        "showYearsOnce": false,
+        "sortByRecentDate": false,
+        "brushActive": false,
+        "dataKey": "category",
+        "axisBBox": 29.360000610351562,
+        "tickWidthMax": 82
+      },
+      "table": {
+        "label": "Data Table",
+        "expanded": false,
+        "limitHeight": false,
+        "height": "",
+        "caption": "",
+        "showDownloadUrl": false,
+        "showDataTableLink": true,
+        "showDownloadLinkBelow": true,
+        "indexLabel": "",
+        "download": false,
+        "showVertical": false,
+        "dateDisplayFormat": "",
+        "showMissingDataLabel": true,
+        "showSuppressedSymbol": true,
+        "collapsible": true,
+        "sharedFilterColumns": [
+          "geography",
+          "year"
+        ],
+        "show": false
+      },
+      "orientation": "vertical",
+      "columns": {},
+      "legend": {
+        "hide": false,
+        "behavior": "isolate",
+        "axisAlign": true,
+        "singleRow": true,
+        "colorCode": "",
+        "reverseLabelOrder": false,
+        "description": "",
+        "dynamicLegend": false,
+        "dynamicLegendDefaultText": "Show All",
+        "dynamicLegendItemLimit": 5,
+        "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+        "dynamicLegendChartMessage": "Select Options from the Legend",
+        "label": "",
+        "lineMode": false,
+        "verticalSorted": false,
+        "highlightOnHover": false,
+        "hideSuppressedLabels": false,
+        "hideSuppressionLink": false,
+        "seriesHighlight": [],
+        "style": "circles",
+        "subStyle": "linear blocks",
+        "groupBy": "",
+        "shape": "circle",
+        "tickRotation": "",
+        "order": "dataColumn",
+        "hideBorder": {
+          "side": false,
+          "topBottom": true
+        },
+        "position": "right",
+        "orderedValues": [],
+        "patterns": {},
+        "patternField": "",
+        "unified": true
+      },
+      "smallMultiples": {
+        "mode": "",
+        "tileColumn": "",
+        "tilesPerRowDesktop": 3,
+        "tilesPerRowMobile": 1,
+        "tileOrder": [],
+        "tileOrderType": "asc",
+        "tileTitles": {},
+        "independentYAxis": false,
+        "colorMode": "same",
+        "synchronizedTooltips": true,
+        "showAreaUnderLine": true
+      },
+      "exclusions": {
+        "active": false,
+        "keys": []
+      },
+      "twoColor": {
+        "palette": "monochrome-1",
+        "isPaletteReversed": false
+      },
+      "labels": false,
+      "dataFormat": {
+        "commas": false,
+        "prefix": "",
+        "suffix": "",
+        "abbreviated": false,
+        "bottomSuffix": "",
+        "bottomPrefix": "",
+        "bottomAbbreviated": false
+      },
+      "filters": [],
+      "confidenceKeys": {},
+      "visual": {
+        "border": true,
+        "accent": true,
+        "background": true,
+        "verticalHoverLine": false,
+        "horizontalHoverLine": false,
+        "lineDatapointSymbol": "none",
+        "maximumShapeAmount": 7
+      },
+      "useLogScale": false,
+      "filterBehavior": "Filter Change",
+      "highlightedBarValues": [],
+      "series": [
+        {
+          "dataKey": "value",
+          "type": "Bar",
+          "axis": "Left",
+          "tooltip": true
+        }
+      ],
+      "tooltips": {
+        "opacity": 90,
+        "singleSeries": false,
+        "dateDisplayFormat": ""
+      },
+      "forestPlot": {
+        "startAt": 0,
+        "colors": {
+          "line": "",
+          "shape": ""
+        },
+        "lineOfNoEffect": {
+          "show": true
+        },
+        "type": "",
+        "pooledResult": {
+          "diamondHeight": 5,
+          "column": ""
+        },
+        "estimateField": "",
+        "estimateRadius": "",
+        "shape": "square",
+        "rowHeight": 20,
+        "description": {
+          "show": true,
+          "text": "description",
+          "location": 0
+        },
+        "result": {
+          "show": true,
+          "text": "result",
+          "location": 100
+        },
+        "radius": {
+          "min": 2,
+          "max": 10,
+          "scalingColumn": ""
+        },
+        "regression": {
+          "lower": 0,
+          "upper": 0,
+          "estimateField": 0
+        },
+        "leftWidthOffset": 0,
+        "rightWidthOffset": 0,
+        "showZeroLine": false,
+        "leftLabel": "",
+        "rightLabel": ""
+      },
+      "area": {
+        "isStacked": false
+      },
+      "sankey": {
+        "title": {
+          "defaultColor": "black"
+        },
+        "iterations": 1,
+        "rxValue": 0.9,
+        "overallSize": {
+          "width": 900,
+          "height": 700
+        },
+        "margin": {
+          "margin_y": 25,
+          "margin_x": 0
+        },
+        "nodeSize": {
+          "nodeWidth": 26,
+          "nodeHeight": 40
+        },
+        "nodePadding": 55,
+        "nodeFontColor": "black",
+        "nodeColor": {
+          "default": "#ff8500",
+          "inactive": "#808080"
+        },
+        "linkColor": {
+          "default": "#ffc900",
+          "inactive": "#D3D3D3"
+        },
+        "opacity": {
+          "nodeOpacityDefault": 1,
+          "nodeOpacityInactive": 0.1,
+          "LinkOpacityDefault": 1,
+          "LinkOpacityInactive": 0.1
+        },
+        "storyNodeFontColor": "#006778",
+        "storyNodeText": [],
+        "nodeValueStyle": {
+          "textBefore": "(",
+          "textAfter": ")"
+        },
+        "data": []
+      },
+      "markupVariables": [],
+      "enableMarkupVariables": false,
+      "uid": "chart1",
+      "visualizationType": "Bar",
+      "dataKey": "chartData",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "dashboardFilters": [
+        {
+          "columnName": "geography",
+          "active": "United States",
+          "values": [
+            "California",
+            "Texas",
+            "United States"
+          ]
+        },
+        {
+          "columnName": "year",
+          "active": "2021",
+          "values": [
+            "2021",
+            "2022",
+            "2023"
+          ]
+        }
+      ],
+      "dynamicMarginTop": 0
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showDownloadLinkBelow": true,
+    "showVertical": true
+  },
+  "type": "dashboard",
+  "runtime": {},
+  "version": "4.25.11",
+  "migrations": {
+    "addColorMigration": true
+  },
+  "general": {
+    "palette": {
+      "version": "1.0",
+      "backups": [
+        {
+          "name": "__​undefined__",
+          "version": "1.0",
+          "isReversed": "__​undefined__"
+        },
+        {
+          "name": "__​undefined__",
+          "version": "1.0",
+          "isReversed": "__​undefined__"
+        },
+        {
+          "name": "__​undefined__",
+          "version": "1.0",
+          "isReversed": "__​undefined__"
+        },
+        {
+          "name": "__​undefined__",
+          "version": "1.0",
+          "isReversed": "__​undefined__"
+        }
+      ]
+    }
+  },
+  "datasets": {
+    "chartData": {
+      "dataUrl": "http://localhost:8080/examples/api-dashboard-data.json"
+    }
+  }
+}

package/index.html

@@ -1,30 +1,29 @@
 <!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;
+      }
 
-<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>
+      /* 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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.25.11",
+  "version": "4.26.1",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -27,13 +27,13 @@
   },
   "license": "Apache-2.0",
   "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.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",
     "js-base64": "^2.5.2",
     "react-accessible-accordion": "^5.0.1",
     "react-dnd": "^14.0.2",
@@ -45,10 +45,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@rollup/plugin-dsv": "^3.0.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^4.4.11",
+    "sass": "^1.89.2",
     "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vite-plugin-svgr": "^2.4.0"
+    "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
+  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
 }

package/src/CdcDashboardComponent.tsx

@@ -60,6 +60,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 +98,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 +341,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 +505,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 +649,9 @@ export default function CdcDashboard({
   }
 
   const dashboardContainerClasses = ['cdc-open-viz-module', 'type-dashboard', `${currentViewport}`]
+  if (isEditor) {
+    dashboardContainerClasses.push('isDashboardEditor')
+  }
 
   return (
     <GlobalContextProvider>