@cdc/dashboard 4.26.2 → 4.26.3

package/src/scss/main.scss

@@ -1,13 +1,18 @@
-@import '@cdc/core/styles/v2/utils/breakpoints';
+@import '@cdc/core/styles/utils/breakpoints';
 
-.cdc-open-viz-module.type-dashboard {
+button.row-menu__btn[title*='Equal Height Rows'] {
+  margin-left: 15px;
+}
+
+.cove-visualization.type-dashboard {
   @import 'editor-panel';
   @import 'grid';
-  .loading > div.la-ball-beat {
+
+  .loading>div.la-ball-beat {
     margin-top: 20%;
   }
 
-  > .cove-editor__content {
+  >.cove-editor__content {
     width: 100% !important;
     left: 0px;
   }
@@ -19,22 +24,27 @@
     display: flex;
     width: 100vw;
     z-index: 5;
+
     &.sub-dashboard-viz {
       height: 3em;
     }
+
     .heading-1 {
       min-width: 335px;
       font-size: 1.2em;
       padding-right: 1em;
       margin: 0.5em 1em 0.5em 0;
       border-right: 1px solid black;
+
       &.back-to {
         display: flex;
+
         span {
           font-weight: bold;
           padding-right: 0.3em;
         }
       }
+
       input[type='text'] {
         width: 100%;
         margin-top: 10px;
@@ -43,6 +53,7 @@
 
     .heading-body {
       display: flex;
+      align-items: flex-start;
 
       .wrap {
         display: inline-flex;
@@ -83,6 +94,7 @@
       position: relative;
       bottom: -1px;
       border-bottom: #c7c7c7 1px solid;
+
       li {
         padding: 0.3em 1.5em;
         color: var(--mediumGray);
@@ -90,12 +102,14 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+
         &.active {
           border-bottom-color: var(--mediumGray);
           border-bottom-style: inherit;
           border-bottom-width: 5px;
           color: var(--darkGray);
         }
+
         &:hover {
           border-bottom-color: var(--darkGray);
           color: var(--darkGray);
@@ -122,6 +136,7 @@
   }
 
   .btn {
+
     // Expand and Collapse Buttons for Multiviz Dashboard
     &.expand-collapse-buttons {
       background-color: var(--lightestGray);
@@ -139,11 +154,13 @@
     border: var(--lightGray) 1px solid;
     clear: both;
     margin-bottom: 20px;
+
     .multi-visualiation-heading {
       position: relative;
       background: var(--lightestGray);
       padding: 0.5em 0.7em;
       cursor: pointer;
+
       svg {
         position: absolute;
         height: 100%;
@@ -156,10 +173,12 @@
         z-index: 2;
         position: relative;
       }
+
       @include breakpoint(xs) {
         font-size: 0.9em;
       }
     }
+
     .data-table-heading {
       display: none;
     }
@@ -181,10 +200,11 @@
     margin-bottom: 1.5rem;
 
     // Remove padding from first and last columns to keep content flush to edges
-    > [class*='col-']:first-child {
+    >[class*='col-']:first-child {
       padding-left: 0;
     }
-    > [class*='col-']:last-child {
+
+    >[class*='col-']:last-child {
       padding-right: 0;
     }
 
@@ -199,7 +219,7 @@
     .row {
       margin-bottom: 1.5rem;
 
-      > [class*='col-'] {
+      >[class*='col-'] {
         // Remove side padding when columns stack to full width
         padding-left: 0;
         padding-right: 0;
@@ -207,7 +227,7 @@
       }
 
       // Last column doesn't need margin (row margin handles gap to next row)
-      > [class*='col-']:last-child {
+      >[class*='col-']:last-child {
         margin-bottom: 0;
       }
 
@@ -221,6 +241,7 @@
   .dashboard-row {
     display: flex;
     flex-direction: column;
+
     &.toggle {
       display: block;
     }
@@ -228,9 +249,10 @@
 
   .dashboard-col {
     margin: 0;
+
     // Disable the module individual margin
     .map-container,
-    .cdc-chart-inner-container > * {
+    .cove-visualization.type-chart .cove-visualization__body>* {
       margin-left: 0;
       margin-right: 0;
     }
@@ -261,6 +283,7 @@
     .dashboard-col-8 {
       width: 66%;
     }
+
     .dashboard-col-6 {
       width: 50%;
     }
@@ -292,43 +315,148 @@
       padding: 1rem;
     }
 
-    // Ensure Bootstrap rows with data bites stretch columns to equal height
-    .row:has([class*='bite__style']) {
+    // User-configured equal height rows
+    .row.equal-height {
       display: flex !important;
       align-items: stretch !important;
 
-      // Ensure Bootstrap columns are flex containers
       [class*='col-'] {
-        display: flex !important;
+        display: flex;
         flex-direction: column !important;
+        flex: 1 1 auto !important;
+        align-items: stretch !important;
+        min-height: 0 !important;
 
-        > * {
+        >* {
           display: flex !important;
           flex-direction: column !important;
-          flex: 1 !important;
-          min-height: 0;
-          width: 100%;
+          flex: 1 1 auto !important;
+          align-items: stretch !important;
+          min-height: 0 !important;
+          width: 100% !important;
         }
-      }
-    }
 
-    // Ensure Bootstrap rows with TP5 waffle/gauge charts stretch columns to equal height
-    .row:has(.waffle__style--tp5),
-    .row:has(.gauge__style--tp5) {
-      display: flex !important;
-      align-items: stretch !important;
+        .collapsable-multiviz-container,
+        .cove-visualization {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          align-items: stretch !important;
+          min-height: 0 !important;
+          width: 100% !important;
+
+          >.cove-visualization__content,
+          >.cove-visualization__outer,
+          >.cove-visualization__inner,
+          >.cove-visualization__body {
+            display: flex !important;
+            flex-direction: column !important;
+            flex: 1 1 auto !important;
+            align-items: stretch !important;
+            min-height: 0 !important;
+            width: 100% !important;
+
+            >.cove-visualization__inner,
+            >.cove-visualization__body,
+            >.cove-visualization__body-wrap {
+              display: flex !important;
+              flex-direction: column !important;
+              flex: 1 1 auto !important;
+              align-items: stretch !important;
+              min-height: 0 !important;
+              width: 100% !important;
+            }
+          }
+
+          .cove-visualization__outer,
+          .cove-visualization__inner,
+          .cove-visualization__body,
+          .cove-visualization__body-wrap {
+            display: flex !important;
+            flex-direction: column !important;
+            flex: 1 1 auto !important;
+            align-items: stretch !important;
+            min-height: 0 !important;
+            width: 100% !important;
+          }
+        }
 
-      // Ensure Bootstrap columns are flex containers
-      [class*='col-'] {
-        display: flex !important;
-        flex-direction: column !important;
+        .bite,
+        .bite-content-container,
+        .bite-content,
+        .bite-content__text-wrap,
+        .cdc-callout,
+        .cdc-callout__content {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+        }
 
-        > * {
+        .cdc-callout__body {
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+        }
+
+        .cove-visualization .cove-visualization__body.bite__style--tp5>.cove-visualization__body-wrap {
           display: flex !important;
           flex-direction: column !important;
-          flex: 1 !important;
-          min-height: 0;
-          width: 100%;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+        }
+
+        .cove-visualization .cove-visualization__body.bite__style--tp5>.cove-visualization__body-wrap>.cove-visualization__content-section {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+          width: 100% !important;
+        }
+
+        .cove-visualization .cove-visualization__body.bite__style--tp5>.cove-visualization__body-wrap>.cove-visualization__content-section>.cdc-callout {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 100% !important;
+          width: 100% !important;
+        }
+
+        .cove-visualization.waffle__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap,
+        .cove-visualization.gauge__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+        }
+
+        .cove-visualization.waffle__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap>.cove-visualization__content-section,
+        .cove-visualization.gauge__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap>.cove-visualization__content-section {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+          width: 100% !important;
+        }
+
+        .cove-visualization.waffle__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap>.cove-visualization__content-section>.cdc-callout,
+        .cove-visualization.gauge__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap>.cove-visualization__content-section>.cdc-callout {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 100% !important;
+          width: 100% !important;
+        }
+
+        .cove-visualization .cove-visualization__body.bite__style--tp5 .cdc-callout__body {
+          display: flex !important;
+          flex: 1 1 auto !important;
+          align-items: stretch !important;
+          min-height: 0 !important;
+        }
+
+        .cove-visualization .cove-visualization__body.bite__style--tp5 .cdc-callout__content {
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
         }
       }
     }
@@ -350,14 +478,9 @@
     // TP5 Waffle/Gauge adjustments when there are 2+ in a row
     .row:has(.waffle__style--tp5):has([class*='col-'] ~ [class*='col-']),
     .row:has(.gauge__style--tp5):has([class*='col-'] ~ [class*='col-']) {
+
       .waffle__style--tp5,
       .gauge__style--tp5 {
-        // Enable flex stretching only in dashboard rows
-        .cove-component__content {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-        }
 
         .cdc-callout {
           flex: 1;
@@ -393,6 +516,7 @@
 
   .sub-editor {
     margin-top: 40px;
+
     .sub-editor-heading {
       display: flex;
       align-items: center;
@@ -404,6 +528,7 @@
       background-color: red;
       z-index: 101;
     }
+
     .editor-panel {
       top: 40px;
     }
@@ -417,4 +542,4 @@
     display: block;
     margin: 1em 0;
   }
-}
+}

package/src/store/dashboard.reducer.ts

@@ -237,7 +237,7 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
 
       const filteredRows = _.map(newRows, row => ({
         ...row,
-        columns: _.filter(row.columns, column => column.widget !== uid)
+        columns: row.columns.map(column => (column.widget === uid ? _.omit(column, 'widget') : column))
       }))
 
       return {

package/src/test/CdcDashboard.test.jsx

@@ -1,11 +1,11 @@
-import path from 'path'
+import path from 'node:path'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
 describe('Dashboard', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
-    const result = testStandaloneBuild(pkgDir)
+    const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
 })

package/src/test/CdcDashboardComponent.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import CdcDashboardComponent from '../CdcDashboardComponent'
+import type { InitialState } from '../types/InitialState'
+
+describe('CdcDashboardComponent', () => {
+  it('renders dashboard markup through the shared visualization shell', () => {
+    const initialState = {
+      config: {
+        type: 'dashboard',
+        dashboard: {
+          title: 'Dashboard Title',
+          titleStyle: 'small',
+          theme: 'theme-blue',
+          sharedFilters: []
+        },
+        visualizations: {},
+        rows: [],
+        datasets: {},
+        table: {}
+      },
+      data: {},
+      loading: false,
+      filteredData: {},
+      preview: false,
+      tabSelected: 'Dashboard Preview',
+      filtersApplied: true
+    } as InitialState
+
+    const { container } = render(
+      <CdcDashboardComponent initialState={initialState} interactionLabel='dashboard-test' isEditor={false} />
+    )
+
+    const shell = container.querySelector('.cove-visualization')
+
+    expect(shell).toHaveClass('type-dashboard')
+    expect(shell).toHaveAttribute('data-download-id')
+    expect(shell?.querySelector('.cove-visualization__outer')).toBeInTheDocument()
+  })
+
+  it('keeps the dashboard root out of the shared editor grid layout', () => {
+    const initialState = {
+      config: {
+        type: 'dashboard',
+        dashboard: {
+          title: 'Dashboard Title',
+          titleStyle: 'small',
+          theme: 'theme-blue',
+          sharedFilters: []
+        },
+        visualizations: {},
+        rows: [],
+        datasets: {},
+        table: {}
+      },
+      data: {},
+      loading: false,
+      filteredData: {},
+      preview: false,
+      tabSelected: 'Dashboard Preview',
+      filtersApplied: true
+    } as InitialState
+
+    const { container } = render(
+      <CdcDashboardComponent initialState={initialState} interactionLabel='dashboard-test' isEditor={true} />
+    )
+
+    const shell = container.querySelector('.cove-visualization')
+
+    expect(shell).toHaveClass('type-dashboard', 'is-dashboard-editor')
+    expect(shell).not.toHaveClass('is-editor')
+  })
+})

package/src/types/FilterStyles.ts

@@ -2,7 +2,8 @@ export const FILTER_STYLE = {
   combobox: 'combobox',
   dropdown: 'dropdown',
   multiSelect: 'multi-select',
-  nestedDropdown: 'nested-dropdown'
+  nestedDropdown: 'nested-dropdown',
+  tabSimple: 'tab-simple'
 } as const
 
 export type FilterStyle = (typeof FILTER_STYLE)[keyof typeof FILTER_STYLE]

package/tests/fixtures/dashboard-config-with-metadata.json

@@ -0,0 +1,89 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "title": "Metadata Test Dashboard",
+    "sharedFilters": [
+      {
+        "values": ["Alabama", "Alaska"],
+        "columnName": "Location",
+        "showDropdown": true,
+        "usedBy": ["chart-metadata-test", "databite-metadata-test"],
+        "tier": 1,
+        "type": "datafilter"
+      }
+    ]
+  },
+  "rows": [
+    {
+      "columns": [
+        { "width": 12, "widget": "legacySharedFilters" }
+      ]
+    },
+    {
+      "columns": [
+        { "width": 6, "widget": "chart-metadata-test" },
+        { "width": 6, "widget": "databite-metadata-test" }
+      ]
+    }
+  ],
+  "visualizations": {
+    "chart-metadata-test": {
+      "type": "chart",
+      "visualizationType": "Bar",
+      "uid": "chart-metadata-test",
+      "title": "Amount by Year",
+      "description": "Data last updated {{lastUpdated}}",
+      "enableMarkupVariables": true,
+      "markupVariables": [
+        {
+          "name": "Last Updated",
+          "tag": "{{lastUpdated}}",
+          "metadataKey": "lastUpdated",
+          "conditions": []
+        }
+      ],
+      "xAxis": { "dataKey": "Year" },
+      "series": [{ "dataKey": "Amount", "type": "Bar" }],
+      "dataKey": "metadata-test-data",
+      "theme": "theme-blue"
+    },
+    "databite-metadata-test": {
+      "type": "data-bite",
+      "visualizationType": "data-bite",
+      "uid": "databite-metadata-test",
+      "title": "",
+      "subtext": "Source: {{source}}",
+      "enableMarkupVariables": true,
+      "markupVariables": [
+        {
+          "name": "Source",
+          "tag": "{{source}}",
+          "metadataKey": "source",
+          "conditions": []
+        }
+      ],
+      "dataColumn": "Amount",
+      "dataFunction": "Sum",
+      "biteStyle": "title",
+      "bitePosition": "Left",
+      "biteFontSize": 24,
+      "fontSize": "medium",
+      "dataFormat": { "roundToPlace": 0, "commas": true },
+      "dataKey": "metadata-test-data",
+      "theme": "theme-orange"
+    },
+    "legacySharedFilters": {
+      "type": "dashboardFilters",
+      "visualizationType": "dashboardFilters",
+      "sharedFilterIndexes": [0],
+      "filterBehavior": "Filter Change",
+      "uid": "legacySharedFilters"
+    }
+  },
+  "table": { "label": "Data Table", "show": false },
+  "data": [],
+  "dataFileName": "metadata-test-data",
+  "dataFileSourceType": "",
+  "dataUrl": "/packages/dashboard/examples/data/data-with-metadata.json",
+  "type": "dashboard"
+}

package/vite.config.js

@@ -1,9 +1,9 @@
 import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
-// Dashboard uses isDashboardEditor instead of isEditor for the padding selector
+// Dashboard uses is-dashboard-editor instead of is-editor for the padding selector
 const dashboardCss = `
-      .cdc-open-viz-module.type-dashboard:not(.isDashboardEditor) {
+      .cove-visualization.type-dashboard:not(.is-dashboard-editor) {
         padding: 1rem;
       }`