@cdc/dashboard 4.26.2 → 4.26.4

package/src/scss/main.scss

@@ -1,8 +1,13 @@
-@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 {
     margin-top: 20%;
   }
@@ -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);
@@ -121,12 +135,15 @@
     }
   }
 
-  .btn {
-    // Expand and Collapse Buttons for Multiviz Dashboard
-    &.expand-collapse-buttons {
-      background-color: var(--lightestGray);
-      border: 1px var(--lightGray) solid;
-      color: black;
+  .dashboard-filters__actions {
+    align-items: flex-end;
+    display: flex;
+    flex: 0 0 auto;
+    width: auto;
+
+    > .cove-button {
+      flex: 0 0 auto;
+      width: auto;
     }
   }
 
@@ -139,11 +156,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 +175,12 @@
         z-index: 2;
         position: relative;
       }
+
       @include breakpoint(xs) {
         font-size: 0.9em;
       }
     }
+
     .data-table-heading {
       display: none;
     }
@@ -184,6 +205,7 @@
     > [class*='col-']:first-child {
       padding-left: 0;
     }
+
     > [class*='col-']:last-child {
       padding-right: 0;
     }
@@ -221,6 +243,7 @@
   .dashboard-row {
     display: flex;
     flex-direction: column;
+
     &.toggle {
       display: block;
     }
@@ -228,9 +251,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 +285,7 @@
     .dashboard-col-8 {
       width: 66%;
     }
+
     .dashboard-col-6 {
       width: 50%;
     }
@@ -292,43 +317,212 @@
       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,
+          .markup-include-tp5 {
+            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,
+        .cove-visualization.markup-include__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,
+        .cove-visualization.markup-include__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.markup-include__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .markup-include-tp5 {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 100% !important;
+          width: 100% !important;
+        }
+
+        .cove-visualization.markup-include__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .markup-include-tp5
+          > .cdc-callout__body,
+        .cove-visualization.markup-include__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .markup-include-tp5
+          > .cdc-callout__body
+          > .cdc-callout__content {
+          display: flex !important;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+        }
+
+        .cove-visualization.markup-include__style--tp5 .markup-include-component--tp5 {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+        }
+
+        .cove-visualization .cove-visualization__body.bite__style--tp5 .cdc-callout__body {
+          display: grid !important;
+          flex: 1 1 auto !important;
+          align-items: start !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;
         }
       }
     }
@@ -352,13 +546,6 @@
     .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;
         }
@@ -374,8 +561,6 @@
         }
 
         .cdc-callout__heading {
-          // Fixed minimum height to align titles - adjust based on design needs
-          min-height: 3em;
           display: flex;
           align-items: flex-start;
         }
@@ -387,12 +572,23 @@
       }
     }
 
+    // TP5 Markup Include adjustments when there are 2+ in a row
+    .row:has(.markup-include__style--tp5):has([class*='col-'] ~ [class*='col-']) {
+      .markup-include__style--tp5 {
+        .cdc-callout__heading {
+          display: flex;
+          align-items: flex-start;
+        }
+      }
+    }
+
     // Data bite alignment styles are now in packages/data-bite/src/scss/bite.scss
     // under .cdc-dashboard-inner-container to ensure proper specificity
   }
 
   .sub-editor {
     margin-top: 40px;
+
     .sub-editor-heading {
       display: flex;
       align-items: center;
@@ -404,6 +600,7 @@
       background-color: red;
       z-index: 101;
     }
+
     .editor-panel {
       top: 40px;
     }

package/src/store/dashboard.reducer.ts

@@ -24,6 +24,7 @@ const createBlankDashboard: () => BlankMultiConfig = () => ({
     label: 'Data Table',
     show: false,
     showDownloadUrl: false,
+    downloadUrlLabel: '',
     showVertical: true
   }
 })
@@ -237,7 +238,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,35 @@
-import path from 'path'
+import path from 'node:path'
+import fs from 'node:fs'
+import vm from 'node:vm'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
+const extractMarkedExampleConfig = (content, label) => {
+  const match = content.match(
+    /<!-- README_EXAMPLE_CONFIG_START -->\s*```jsx\s*([\s\S]*?)\s*```\s*<!-- README_EXAMPLE_CONFIG_END -->/
+  )
+  expect(match, `${label} should contain a marked README example block`).toBeTruthy()
+  const configMatch = match[1].match(/const config = (\{[\s\S]*?\})\n\nfunction App\(\)/)
+  expect(configMatch, `${label} should define const config before function App()`).toBeTruthy()
+  return vm.runInNewContext(`(${configMatch[1]})`)
+}
+
 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)
+
+  it('keeps the minimal example in sync with the README docs', () => {
+    const pkgRoot = path.join(__dirname, '..', '..')
+    const minimalExamplePath = path.join(pkgRoot, 'examples', 'minimal-example.json')
+    const readmePath = path.join(pkgRoot, 'README.md')
+
+    const minimalExample = JSON.parse(fs.readFileSync(minimalExamplePath, 'utf8'))
+    const readmeBlock = extractMarkedExampleConfig(fs.readFileSync(readmePath, 'utf8'), 'README.md')
+
+    expect(readmeBlock).toEqual(minimalExample)
+    expect(minimalExample.version).toBeTruthy()
+  })
 })

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/src/types/SharedFilter.ts

@@ -8,6 +8,7 @@ export type SharedFilter = FilterBase & {
   filterStyle: FilterStyle
   queryParameter?: string
   setByQueryParameter?: string
+  displaySubgroupingOnly?: boolean
   active?: string | string[]
   queuedActive?: string | string[]
   usedBy?: (string | number)[] // if number used by whole row, else used by specific viz

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;
       }`