@cdc/dashboard 4.26.2 → 4.26.4

package/src/components/VisualizationRow.tsx

@@ -1,7 +1,7 @@
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
-import React, { useContext, useEffect, useMemo, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import Toggle from './Toggle'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import { ConfigRow } from '../types/ConfigRow'
 import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
 import CdcMap from '@cdc/map/src/CdcMapComponent'
@@ -88,6 +88,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 }) => {
   const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
   const [toggledRow, setToggled] = React.useState<number>(0)
+  const rowRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (row.toggle) setToggled(0)
@@ -103,15 +104,18 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     }
   }, [toggledRow, row.toggle])
 
-  const setupTP5MinHeightEqualizer = (rowElement: Element, itemSelector: string) => {
-    const items = Array.from(rowElement.querySelectorAll(itemSelector)) as HTMLElement[]
-    if (items.length <= 1) return undefined
+  const setupMinHeightEqualizer = (rowElement: HTMLElement, selectors: string[]) => {
+    let items: HTMLElement[] = []
+    const selector = selectors.join(', ')
+    const resizeObserver = new ResizeObserver(() => equalizeHeights())
 
     const equalizeHeights = () => {
       items.forEach(item => {
         item.style.minHeight = ''
       })
 
+      if (items.length <= 1) return
+
       let maxHeight = 0
       items.forEach(item => {
         const height = item.offsetHeight
@@ -125,35 +129,86 @@ const VisualizationRow: React.FC<VizRowProps> = ({
       }
     }
 
-    equalizeHeights()
+    const refreshItems = () => {
+      const nextItems = Array.from(rowElement.querySelectorAll(selector)) as HTMLElement[]
+      const nextSet = new Set(nextItems)
+
+      items.forEach(item => {
+        if (!nextSet.has(item)) {
+          resizeObserver.unobserve(item)
+          item.style.minHeight = ''
+        }
+      })
+
+      nextItems.forEach(item => {
+        if (!items.includes(item)) {
+          resizeObserver.observe(item)
+        }
+      })
 
-    const resizeObserver = new ResizeObserver(() => {
+      items = nextItems
       equalizeHeights()
-    })
+    }
 
-    items.forEach(item => {
-      resizeObserver.observe(item)
+    const mutationObserver = new MutationObserver(() => {
+      refreshItems()
     })
 
-    return () => resizeObserver.disconnect()
+    mutationObserver.observe(rowElement, { childList: true, subtree: true })
+    refreshItems()
+
+    return () => {
+      mutationObserver.disconnect()
+      resizeObserver.disconnect()
+      items.forEach(item => {
+        item.style.minHeight = ''
+      })
+    }
   }
 
-  // Equalize TP5 callout title heights and TP5 gauge message blocks for like visualizations in the same row
+  const tp5CountInRow = row.columns.reduce((count, col) => {
+    if (!col.widget) return count
+    const viz = config.visualizations[col.widget]
+    if (!viz) return count
+
+    const isTp5DataBite = viz.type === 'data-bite' && (viz as any).biteStyle === 'tp5'
+    const isTp5WaffleOrGauge =
+      viz.type === 'waffle-chart' && (viz.visualizationType === 'TP5 Waffle' || viz.visualizationType === 'TP5 Gauge')
+    const isTp5MarkupInclude = viz.type === 'markup-include' && (viz as any).contentEditor?.style === 'tp5'
+
+    return isTp5DataBite || isTp5WaffleOrGauge || isTp5MarkupInclude ? count + 1 : count
+  }, 0)
+  const needsTP5AutoEqualization = tp5CountInRow > 1
+  const shouldEqualizeRow = !!row.equalHeight || needsTP5AutoEqualization
+
+  // Layer TP5 equalization for row-level title consistency and same-type internals.
   useEffect(() => {
-    const rowElement = document.querySelector(`[data-row-index="${index}"]`)
+    if (!shouldEqualizeRow) return
+
+    const rowElement = rowRef.current
     if (!rowElement) return
 
     const cleanups = [
-      setupTP5MinHeightEqualizer(rowElement, '.bite__style--tp5 .cdc-callout__heading'),
-      setupTP5MinHeightEqualizer(rowElement, '.waffle__style--tp5 .cdc-callout__heading'),
-      setupTP5MinHeightEqualizer(rowElement, '.gauge__style--tp5 .cdc-callout__heading'),
-      setupTP5MinHeightEqualizer(rowElement, '.gauge__style--tp5 .cove-gauge-chart__content')
-    ].filter(Boolean) as Array<() => void>
+      // Cross-type TP5 title alignment in the row.
+      setupMinHeightEqualizer(rowElement, [
+        '.bite__style--tp5 .cdc-callout__heading',
+        '.waffle__style--tp5 .cdc-callout__heading',
+        '.gauge__style--tp5 .cdc-callout__heading',
+        '.markup-include__style--tp5 .cdc-callout__heading'
+      ]),
+      // Same-type gauge internals alignment so gauge meters line up despite content variance.
+      setupMinHeightEqualizer(rowElement, ['.gauge__style--tp5 .cove-gauge-chart__content'])
+    ]
 
     return () => {
       cleanups.forEach(cleanup => cleanup())
     }
-  }, [index, row, config, filteredDataOverride])
+  }, [shouldEqualizeRow, row.columns, config.activeDashboard, filteredDataOverride, dashboardFilteredData[index]])
+
+  const isFilterRow = row.columns.some(
+    col => col.widget && config.visualizations[col.widget]?.type === 'dashboardFilters'
+  )
+  const needsEqualHeight = shouldEqualizeRow && !isFilterRow
 
   const show = useMemo(() => {
     if (row.toggle) {
@@ -201,7 +256,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
         )}
         {Object.keys(dataGroups).map(groupName => {
           const dataValue = dataGroups[groupName]
-          const _row = _.cloneDeep(row) // clone the row to avoid mutating the original row
+          const _row = cloneDeep(row) // clone the row to avoid mutating the original row
           const originalMultiVizColumn = _row.multiVizColumn // store original value before clearing
           _row.multiVizColumn = undefined // reset the multiVizColumn to avoid passing it to the child components
           _row.originalMultiVizColumn = originalMultiVizColumn // store for footnote filtering
@@ -229,7 +284,8 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
   return (
     <div
-      className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
+      ref={rowRef}
+      className={`row${needsEqualHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
       key={`row__${index}`}
       data-row-index={index}
     >
@@ -348,10 +404,12 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                 <CdcDataBite
                   key={col.widget}
                   config={visualizationConfig}
+                  rawData={rawData?.[visualizationConfig.dataKey] || []}
                   setConfig={newConfig => {
                     updateChildConfig(col.widget, newConfig)
                   }}
                   isDashboard={true}
+                  isEditor={config.editing === true}
                   interactionLabel={interactionLabel}
                 />
               )}
@@ -359,11 +417,12 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                 <CdcWaffleChart
                   key={col.widget}
                   config={visualizationConfig}
+                  rawData={rawData?.[visualizationConfig.dataKey] || []}
                   setConfig={newConfig => {
                     updateChildConfig(col.widget, newConfig)
                   }}
                   isDashboard={true}
-                  interactionLabel={link}
+                  interactionLabel={interactionLabel}
                 />
               )}
               {type === 'markup-include' && (

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -1,66 +1,13 @@
 import { useContext, useState } from 'react'
-import type { AnyVisualization } from '@cdc/core/types/Visualization'
 import Widget from '../Widget/Widget'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
-import { Table } from '@cdc/core/types/Table'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import { addVisualization } from '../../helpers/addVisualization'
 import { mapDataToConfig } from '../../helpers/mapDataToConfig'
 import './visualizations-panel-styles.css'
 import { MultiDashboardConfig } from '../../types/MultiDashboard'
 import { stripConfig } from '../../helpers/formatConfigBeforeSave'
 
-const addVisualization = (type, subType) => {
-  const modalWillOpen = type !== 'markup-include'
-  const newVisualizationConfig: Partial<AnyVisualization> = {
-    filters: [],
-    filterBehavior: 'Filter Change',
-    newViz: type !== 'table',
-    openModal: modalWillOpen,
-    uid: type + Date.now(),
-    type
-  }
-
-  switch (type) {
-    case 'chart':
-      newVisualizationConfig.visualizationType = subType
-      break
-    case 'map':
-      newVisualizationConfig.general = {}
-      newVisualizationConfig.general.geoType = subType
-      break
-    case 'data-bite' || 'waffle-chart' || 'filtered-text':
-      newVisualizationConfig.visualizationType = type
-      break
-    case 'table':
-      const tableConfig: Table = {
-        label: 'Data Table',
-        show: true,
-        showDownloadUrl: false,
-        showVertical: true,
-        expanded: true,
-        collapsible: true
-      }
-      newVisualizationConfig.table = tableConfig
-      newVisualizationConfig.columns = {}
-      newVisualizationConfig.dataFormat = {}
-      newVisualizationConfig.visualizationType = type
-      break
-    case 'markup-include':
-      newVisualizationConfig.visualizationType = type
-      break
-    case 'dashboardFilters': {
-      newVisualizationConfig.sharedFilterIndexes = []
-      newVisualizationConfig.visualizationType = type
-      break
-    }
-    default:
-      newVisualizationConfig.visualizationType = type
-      break
-  }
-
-  return newVisualizationConfig
-}
-
 const VisualizationsPanel = () => {
   const [advancedEditing, setAdvancedEditing] = useState(false)
   const { config, isEditor } = useContext(DashboardContext)
@@ -96,7 +43,7 @@ const VisualizationsPanel = () => {
       <span className='subheading-3'>Misc.</span>
       <div className='drag-grid'>
         <Widget addVisualization={() => addVisualization('data-bite', '')} type='data-bite' />
-        <Widget addVisualization={() => addVisualization('waffle-chart', '')} type='waffle-chart' />
+        <Widget addVisualization={() => addVisualization('waffle-chart', 'Waffle')} type='waffle-chart' />
         <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
         <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
         <Widget addVisualization={() => addVisualization('dashboardFilters', '')} type='dashboardFilters' />

package/src/components/VisualizationsPanel/visualizations-panel-styles.css

@@ -1,10 +1,10 @@
 .visualizations-panel {
   background-color: #fff;
+  border-right: #c7c7c7 1px solid;
+  overflow-y: scroll;
   padding: 1em;
   width: var(--editorWidth);
-  border-right: #c7c7c7 1px solid;
   z-index: 1;
-  overflow-y: scroll;
 
   &.advanced-editor {
     width: 50vw;

package/src/components/Widget/Widget.tsx

@@ -5,6 +5,7 @@ import { DashboardContext, DashboardDispatchContext } from '../../DashboardConte
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import Icon from '@cdc/core/components/ui/Icon'
+import Button from '@cdc/core/components/elements/Button'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { iconHash } from '../../helpers/iconHash'
 import _ from 'lodash'
@@ -105,11 +106,11 @@ const Widget = ({
       const url = changeDataLimit(dataset.dataUrl, 100)
       if (url) {
         fetchRemoteData(url)
-          .then(responseData => {
+          .then(({ data: responseData }) => {
             // this sample data is temporary.
             // the HEADER component removes the data when you toggle to the main viz panel.
             // data will be cached only when it's loaded via dashboard preview.
-            responseData.sample = true
+            ;(responseData as any).sample = true
             dispatch({ type: 'SET_DATA', payload: { ...data, [dataKey]: responseData } })
           })
           .catch(error => {
@@ -167,12 +168,12 @@ const Widget = ({
         {widgetConfig?.rowIdx !== undefined && (
           <div className='widget-menu'>
             {isConfigurationReady && (
-              <button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
+              <Button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
                 {iconHash['tools']}
-              </button>
+              </Button>
             )}
             {needsDataConfiguration && (
-              <button
+              <Button
                 title='Configure Data'
                 className='btn btn-configure'
                 onClick={() => {
@@ -182,7 +183,7 @@ const Widget = ({
                 }}
               >
                 {iconHash['gear']}
-              </button>
+              </Button>
             )}
             <div className='widget-menu-item' onClick={deleteWidget}>
               <Icon display='close' base />

package/src/components/Widget/widget.styles.css

@@ -1,13 +1,13 @@
 .widget__toggle-title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 25%;
   background-color: #005eaa;
   color: white;
+  display: flex;
+  flex-direction: column;
+  height: 25%;
+  justify-content: center;
   padding: 5px;
+  width: 100%;
 }
 
 .widget__edit-title-icon {
@@ -19,39 +19,70 @@
 }
 
 .widget--toggle .widget__content .widget-menu + svg {
+  flex-grow: unset;
   height: 35px !important;
   width: 35px !important;
-  flex-grow: unset;
 }
 
 .widget-menu {
   position: absolute;
-  top: 6px;
   right: 6px;
+  top: 6px;
 }
 
 .widget-menu {
+  align-items: center;
   display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+  padding: 2px;
+}
+
+.widget-menu .cove-button.btn-configure {
   align-items: center;
-  justify-content: space-between;
+  background: transparent !important;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  color: var(--mediumGray);
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  margin: 0;
+  min-height: 28px;
+  padding: 4px;
+  transform: none;
+  width: 28px;
+}
+
+.widget-menu .cove-button.btn-configure:hover:not(:disabled),
+.widget-menu .cove-button.btn-configure:active:not(:disabled) {
+  background: transparent !important;
+  box-shadow: none;
+  transform: none;
 }
 
-.btn-configure {
-  background: none;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  margin: 0 5px;
+.widget-menu .cove-button.btn-configure svg {
+  margin-bottom: 0;
+  top: 0;
+  vertical-align: middle;
 }
 
 .widget-menu-item {
-  display: block;
-  width: 20px;
-  height: 20px;
+  align-items: center;
   cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  line-height: 1;
+  padding: 4px;
   user-select: none;
+  width: 28px;
 }
 
 .widget-menu-item svg {
   fill: var(--mediumGray);
+  margin-bottom: 0;
+  top: 0;
+  vertical-align: middle;
 }

package/src/data/initial-state.js

@@ -4,12 +4,13 @@ export default {
     titleStyle: 'small',
     sharedFilters: []
   },
-  rows: [[{ width: 12 }, {}, {}]],
+  rows: [{ columns: [{ width: 12 }] }],
   visualizations: {},
   table: {
     label: 'Data Table',
     show: true,
     showDownloadUrl: false,
+    downloadUrlLabel: '',
     showDownloadLinkBelow: true,
     showVertical: true
   }

package/src/helpers/addVisualization.ts

@@ -0,0 +1,73 @@
+import type { AnyVisualization } from '@cdc/core/types/Visualization'
+import type { Table } from '@cdc/core/types/Table'
+
+export const addVisualization = (type, subType) => {
+  const modalWillOpen = type !== 'markup-include'
+  const newVisualizationConfig: Partial<AnyVisualization> = {
+    filters: [],
+    filterBehavior: 'Filter Change',
+    newViz: type !== 'table',
+    openModal: modalWillOpen,
+    uid: type + Date.now(),
+    type
+  }
+
+  switch (type) {
+    case 'chart':
+      newVisualizationConfig.visual = {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+      newVisualizationConfig.visualizationType = subType
+      break
+    case 'map':
+      newVisualizationConfig.general = {}
+      newVisualizationConfig.general.geoType = subType
+      newVisualizationConfig.visual = {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+      break
+    case 'data-bite':
+    case 'filtered-text':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'waffle-chart':
+      newVisualizationConfig.visualizationType = subType
+      break
+    case 'table': {
+      const tableConfig: Table = {
+        label: 'Data Table',
+        show: true,
+        showDownloadUrl: false,
+        showVertical: true,
+        expanded: true,
+        collapsible: true
+      }
+      newVisualizationConfig.table = tableConfig
+      newVisualizationConfig.columns = {}
+      newVisualizationConfig.dataFormat = {}
+      newVisualizationConfig.visualizationType = type
+      break
+    }
+    case 'markup-include':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'dashboardFilters': {
+      newVisualizationConfig.sharedFilterIndexes = []
+      newVisualizationConfig.visualizationType = type
+      break
+    }
+    default:
+      newVisualizationConfig.visualizationType = type
+      break
+  }
+
+  return newVisualizationConfig
+}

package/src/helpers/formatConfigBeforeSave.ts

@@ -129,7 +129,7 @@ export const stripConfig = (configToStrip, isEditor = false) => {
   } else {
     delete strippedConfig.runtime
     delete strippedConfig.formattedData
-    if (strippedConfig.dataUrl) {
+    if (strippedConfig.dataUrl && !isEditor) {
       delete strippedConfig.data
     }
   }

package/src/helpers/getVizConfig.ts

@@ -90,6 +90,9 @@ export const getVizConfig = (
 
   if (visualizationConfig.formattedData) visualizationConfig.originalFormattedData = visualizationConfig.formattedData
   const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
+  const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
+
+  visualizationConfig.dataMetadata = config.datasets[dataKey]?.dataMetadata || {}
 
   if (filteredVizData) {
     visualizationConfig.data = filteredVizData || []
@@ -97,9 +100,16 @@ export const getVizConfig = (
       visualizationConfig.formattedData = visualizationConfig.data
     }
   } else {
-    const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-    // Markup-includes need data even when shared filters exist (for markup variables)
-    const shouldClearData = sharedFilterColumns.length && visualizationConfig.type !== 'markup-include'
+    // Clear data for charts/maps when shared filters exist but filtered data
+    // hasn't arrived yet — prevents rendering the full unfiltered dataset as DOM.
+    // Lighter types (data-bite, waffle-chart, filtered-text, markup-include) are
+    // excluded: they only compute scalars or single elements, and their editor
+    // panels need data to populate column dropdowns. Ideally data filters would
+    // apply synchronously before render, but they currently go through the same
+    // async loadAPIFilters pipeline as API filters, so filtered data isn't
+    // available on first render.
+    const heavyVizTypes = ['chart', 'map']
+    const shouldClearData = sharedFilterColumns.length && heavyVizTypes.includes(visualizationConfig.type)
     visualizationConfig.data = shouldClearData ? [] : data[dataKey] || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData =

package/src/helpers/iconHash.tsx

@@ -1,36 +1,45 @@
-import Icon from '@cdc/core/components/ui/Icon'
-import { AnyVisualization } from '@cdc/core/types/Visualization'
-
-export const iconHash = {
-  'data-bite': <Icon display='databite' base />,
-  Bar: <Icon display='chartBar' base />,
-  'Spark Line': <Icon display='chartLine' />,
-  'Bump Chart': <Icon display='chartLine' />,
-  'waffle-chart': <Icon display='grid' base />,
-  'markup-include': <Icon display='code' base />,
-  Line: <Icon display='chartLine' base />,
-  Pie: <Icon display='chartPie' base />,
-  us: <Icon display='mapUsa' base />,
-  'us-county': <Icon display='mapUsa' base />,
-  world: <Icon display='mapWorld' base />,
-  'single-state': <Icon display='mapAl' base />,
-  gear: <Icon display='gear' base />,
-  gearMulti: <Icon display='gearMulti' base />,
-  tools: <Icon display='tools' base />,
-  'filtered-text': <Icon display='filtered-text' base />,
-  dashboardFilters: <Icon display='dashboardFilters' base />,
-  table: <Icon display='table' base />,
-  Sankey: <Icon display='sankey' base />
-}
-
-export const getIcon = (visualization: AnyVisualization) => {
-  const { type, visualizationType, general } = visualization
-  if (visualizationType) return iconHash[visualizationType]
-  if (general?.geoType) {
-    // for visualizations, mismatching state and state icon is not desired
-    // so instead of showing alabama as the default state icon we show the US icon.
-    if (general.geoType === 'single-state') return iconHash['us']
-    return iconHash[general.geoType]
-  }
-  return iconHash[type]
-}
+import Icon from '@cdc/core/components/ui/Icon'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+
+export const iconHash = {
+  'data-bite': <Icon display='databite' base />,
+  Bar: <Icon display='chartBar' base />,
+  'Spark Line': <Icon display='chartLine' />,
+  'Bump Chart': <Icon display='chartLine' />,
+  'waffle-chart': <Icon display='grid' base />,
+  'markup-include': <Icon display='code' base />,
+  Line: <Icon display='chartLine' base />,
+  Pie: <Icon display='chartPie' base />,
+  us: <Icon display='mapUsa' base />,
+  'us-county': <Icon display='mapUsa' base />,
+  world: <Icon display='mapWorld' base />,
+  'single-state': <Icon display='mapAl' base />,
+  gear: <Icon display='gear' base />,
+  gearMulti: <Icon display='gearMulti' base />,
+  tools: <Icon display='tools' base />,
+  'filtered-text': <Icon display='filtered-text' base />,
+  dashboardFilters: <Icon display='dashboardFilters' base />,
+  table: <Icon display='table' base />,
+  Sankey: <Icon display='sankey' base />,
+  Combo: <Icon display='chartBar' base />,
+  'Scatter Plot': <Icon display='chartBar' base />,
+  'Area Chart': <Icon display='chartLine' base />,
+  'Deviation Bar': <Icon display='chartBar' base />,
+  'Paired Bar': <Icon display='chartBar' base />,
+  'Box Plot': <Icon display='chartBar' base />,
+  'Forest Plot': <Icon display='chartBar' base />,
+  Forecasting: <Icon display='chartLine' base />,
+  'Warming Stripes': <Icon display='chartBar' base />
+}
+
+export const getIcon = (visualization: AnyVisualization) => {
+  const { type, visualizationType, general } = visualization
+  if (visualizationType) return iconHash[visualizationType]
+  if (general?.geoType) {
+    // for visualizations, mismatching state and state icon is not desired
+    // so instead of showing alabama as the default state icon we show the US icon.
+    if (general.geoType === 'single-state') return iconHash['us']
+    return iconHash[general.geoType]
+  }
+  return iconHash[type]
+}