@cdc/dashboard 4.26.3 → 4.26.4

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -1,140 +1,141 @@
-import { createRef, useContext, useMemo, useState } from 'react'
-import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
-import Modal from '@cdc/core/components/ui/Modal'
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-import './multiconfigtabs.styles.css'
-
-const AreYouSure = deleteCallback => {
-  return (
-    <Modal>
-      <Modal.Content>
-        <p>Are you sure you want to delete this dashboard? </p>
-        <button className='btn btn-danger' onClick={deleteCallback}>
-          DELETE
-        </button>
-      </Modal.Content>
-    </Modal>
-  )
-}
-
-const Tab = ({ name, handleClick, tabs, index, active }) => {
-  const [editing, setEditing] = useState(false)
-  const dispatch = useContext(DashboardDispatchContext)
-  const { overlay } = useGlobalContext()
-  const inputRef = createRef<HTMLInputElement>()
-
-  const saveName = e => {
-    e.stopPropagation()
-    const newVal = inputRef.current.value
-    const sameName = newVal === name
-    const blankName = !newVal
-    const duplicateName = tabs.includes(newVal)
-    if (!sameName && !blankName && !duplicateName) {
-      dispatch({ type: 'RENAME_DASHBOARD_TAB', payload: { current: name, new: newVal } })
-    }
-    setEditing(false)
-  }
-
-  const onClick = e => {
-    // ignore click on delete button
-    if (e.target.className === 'remove') return
-    if (active) {
-      setEditing(true)
-    } else {
-      handleClick()
-    }
-  }
-
-  const handleRemove = () => {
-    const deleteCallback = () => {
-      dispatch({ type: 'REMOVE_MULTIDASHBOARD_AT_INDEX', payload: index })
-      overlay?.actions.toggleOverlay(false)
-    }
-    overlay?.actions.openOverlay(AreYouSure(deleteCallback))
-  }
-
-  const handleReorder = (index: number, moveTo: -1 | 1) => {
-    const newIndex = index + moveTo
-    const inbounds = newIndex > -1 && newIndex <= tabs.length - 1
-    if (inbounds) {
-      dispatch({ type: 'REORDER_MULTIDASHBOARDS', payload: { currentIndex: index, newIndex: index + moveTo } })
-    }
-  }
-
-  const canMoveLeft = index !== 0
-  const canMoveRight = index <= tabs.length - 2
-
-  return (
-    <li className='nav-item d-flex mt-0'>
-      {canMoveLeft && editing && (
-        <button className='border-0' onClick={() => handleReorder(index, -1)}>
-          {'<'}
-        </button>
-      )}
-      <div
-        className={`edit nav-link${active ? ' active' : ''}`}
-        aria-current={active ? 'page' : null}
-        onClick={onClick}
-      >
-        {editing ? (
-          <div className='d-flex'>
-            <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
-            <button className='btn btn-link save' onClick={saveName}>
-              save
-            </button>
-          </div>
-        ) : (
-          <>
-            {name}
-            <button className='btn btn-danger border-0 ms-1' onClick={handleRemove}>
-              X
-            </button>
-          </>
-        )}
-      </div>
-      {canMoveRight && editing && (
-        <button className='border-0' onClick={() => handleReorder(index, 1)}>
-          {'>'}
-        </button>
-      )}
-    </li>
-  )
-}
-
-const MultiConfigTabs = () => {
-  const { config } = useContext(DashboardContext)
-  const dispatch = useContext(DashboardDispatchContext)
-  const tabs = useMemo<string[]>(
-    () => (config.multiDashboards || []).map(({ label }) => label),
-    [config.multiDashboards]
-  )
-  const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
-
-  const saveAndLoad = (indexToSwitchTo: number) => {
-    dispatch({ type: 'SAVE_CURRENT_CHANGES' })
-    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
-  }
-
-  if (!config.multiDashboards) return null
-  return (
-    <ul className='nav nav-tabs multi-config-tabs mb-4'>
-      {tabs.map((tab, index) => (
-        <Tab
-          key={tab + index}
-          name={tab}
-          tabs={tabs}
-          index={index}
-          handleClick={() => saveAndLoad(index)}
-          active={index === activeTab}
-        />
-      ))}
-      <li className='nav-item'>
-        <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
-          +
-        </button>
-      </li>
-    </ul>
-  )
-}
-
-export default MultiConfigTabs
+import { createRef, useContext, useMemo, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Button from '@cdc/core/components/elements/Button'
+import './multiconfigtabs.styles.css'
+
+const AreYouSure = deleteCallback => {
+  return (
+    <Modal>
+      <Modal.Content>
+        <p>Are you sure you want to delete this dashboard? </p>
+        <Button variant='danger' onClick={deleteCallback}>
+          DELETE
+        </Button>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+const Tab = ({ name, handleClick, tabs, index, active }) => {
+  const [editing, setEditing] = useState(false)
+  const dispatch = useContext(DashboardDispatchContext)
+  const { overlay } = useGlobalContext()
+  const inputRef = createRef<HTMLInputElement>()
+
+  const saveName = e => {
+    e.stopPropagation()
+    const newVal = inputRef.current.value
+    const sameName = newVal === name
+    const blankName = !newVal
+    const duplicateName = tabs.includes(newVal)
+    if (!sameName && !blankName && !duplicateName) {
+      dispatch({ type: 'RENAME_DASHBOARD_TAB', payload: { current: name, new: newVal } })
+    }
+    setEditing(false)
+  }
+
+  const onClick = e => {
+    // ignore click on delete button
+    if (e.target.className === 'remove') return
+    if (active) {
+      setEditing(true)
+    } else {
+      handleClick()
+    }
+  }
+
+  const handleRemove = () => {
+    const deleteCallback = () => {
+      dispatch({ type: 'REMOVE_MULTIDASHBOARD_AT_INDEX', payload: index })
+      overlay?.actions.toggleOverlay(false)
+    }
+    overlay?.actions.openOverlay(AreYouSure(deleteCallback))
+  }
+
+  const handleReorder = (index: number, moveTo: -1 | 1) => {
+    const newIndex = index + moveTo
+    const inbounds = newIndex > -1 && newIndex <= tabs.length - 1
+    if (inbounds) {
+      dispatch({ type: 'REORDER_MULTIDASHBOARDS', payload: { currentIndex: index, newIndex: index + moveTo } })
+    }
+  }
+
+  const canMoveLeft = index !== 0
+  const canMoveRight = index <= tabs.length - 2
+
+  return (
+    <li className='nav-item d-flex mt-0'>
+      {canMoveLeft && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, -1)}>
+          {'<'}
+        </button>
+      )}
+      <div
+        className={`edit nav-link${active ? ' active' : ''}`}
+        aria-current={active ? 'page' : null}
+        onClick={onClick}
+      >
+        {editing ? (
+          <div className='d-flex'>
+            <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
+            <Button variant='link' className='save' onClick={saveName}>
+              save
+            </Button>
+          </div>
+        ) : (
+          <>
+            {name}
+            <Button variant='danger' className='border-0 ms-1' onClick={handleRemove}>
+              X
+            </Button>
+          </>
+        )}
+      </div>
+      {canMoveRight && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, 1)}>
+          {'>'}
+        </button>
+      )}
+    </li>
+  )
+}
+
+const MultiConfigTabs = () => {
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const tabs = useMemo<string[]>(
+    () => (config.multiDashboards || []).map(({ label }) => label),
+    [config.multiDashboards]
+  )
+  const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
+
+  const saveAndLoad = (indexToSwitchTo: number) => {
+    dispatch({ type: 'SAVE_CURRENT_CHANGES' })
+    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
+  }
+
+  if (!config.multiDashboards) return null
+  return (
+    <ul className='nav nav-tabs multi-config-tabs mb-4'>
+      {tabs.map((tab, index) => (
+        <Tab
+          key={tab + index}
+          name={tab}
+          tabs={tabs}
+          index={index}
+          handleClick={() => saveAndLoad(index)}
+          active={index === activeTab}
+        />
+      ))}
+      <li className='nav-item'>
+        <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
+          +
+        </button>
+      </li>
+    </ul>
+  )
+}
+
+export default MultiConfigTabs

package/src/components/Row.tsx

@@ -15,6 +15,7 @@ import ToggleIcon from '../images/icon-toggle.svg'
 import { ConfigRow } from '../types/ConfigRow'
 import { DataDesignerModal } from './DataDesignerModal'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Button from '@cdc/core/components/elements/Button'
 import { iconHash } from '../helpers/iconHash'
 import _ from 'lodash'
 import { Visualization } from '@cdc/core/types/Visualization'
@@ -191,7 +192,7 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     <nav className='row-menu'>
       <ul className='row-menu__flyout'>{layoutList}</ul>
       {isMultiColumn && (
-        <button
+        <Button
           className={`btn row-menu__btn border-0${row.equalHeight ? ' btn-primary' : ''}`}
           title={row.equalHeight ? 'Disable Equal Height Rows' : 'Enable Equal Height Rows'}
           onClick={toggleEqualHeight}
@@ -201,33 +202,33 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
             <rect x='14' y='2' width='9' height='14' rx='1' />
             <line x1='0' y1='19' x2='24' y2='19' stroke='#fff' strokeWidth='2' strokeDasharray='3 2' />
           </svg>
-        </button>
+        </Button>
       )}
       <div className='spacer'></div>
-      <button
+      <Button
         className={`btn btn-primary row-menu__btn border-0`}
         title='Move Row Up'
         onClick={() => moveRow('up')}
         disabled={rowIdx === 0}
       >
         <Icon display='caretUp' color='#fff' size={25} />
-      </button>
-      <button
+      </Button>
+      <Button
         className={'btn btn-primary row-menu__btn border-0'}
         title='Move Row Down'
         onClick={() => moveRow('down')}
         disabled={rowIdx + 1 === rows.length}
       >
         <Icon display='caretDown' color='#fff' size={25} />
-      </button>
-      <button
+      </Button>
+      <Button
         className={'btn btn-danger row-menu__btn row-menu__btn--remove border-0'}
         title='Delete Row'
         onClick={deleteRow}
         disabled={rowIdx === 0 && rows.length === 1}
       >
         <Icon display='close' color='#fff' size={25} />
-      </button>
+      </Button>
     </nav>
   )
 }
@@ -241,7 +242,7 @@ const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
       <div className='builder-row' data-row-id={rowIdx}>
         <RowMenu rowIdx={rowIdx} />
         <span className='ms-2 mt-n3'>Row - {rowIdx + 1}</span>
-        <button
+        <Button
           title='Configure Data'
           className='btn btn-configure-row'
           onClick={() => {
@@ -249,7 +250,7 @@ const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
           }}
         >
           {iconHash['gearMulti']}
-        </button>
+        </Button>
         <div className='column-container'>
           {row.columns
             .filter(column => column.width)

package/src/components/VisualizationRow.tsx

@@ -1,5 +1,5 @@
 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 cloneDeep from 'lodash/cloneDeep'
 import { ConfigRow } from '../types/ConfigRow'
@@ -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,42 +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(() => {
-    if (!row.equalHeight) return
+    if (!shouldEqualizeRow) return
 
-    const rowElement = document.querySelector(`[data-row-index="${index}"]`)
+    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 = !!row.equalHeight && !isFilterRow
+  const needsEqualHeight = shouldEqualizeRow && !isFilterRow
 
   const show = useMemo(() => {
     if (row.toggle) {
@@ -236,6 +284,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
   return (
     <div
+      ref={rowRef}
       className={`row${needsEqualHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
       key={`row__${index}`}
       data-row-index={index}
@@ -355,6 +404,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                 <CdcDataBite
                   key={col.widget}
                   config={visualizationConfig}
+                  rawData={rawData?.[visualizationConfig.dataKey] || []}
                   setConfig={newConfig => {
                     updateChildConfig(col.widget, newConfig)
                   }}
@@ -367,6 +417,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                 <CdcWaffleChart
                   key={col.widget}
                   config={visualizationConfig}
+                  rawData={rawData?.[visualizationConfig.dataKey] || []}
                   setConfig={newConfig => {
                     updateChildConfig(col.widget, newConfig)
                   }}

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -43,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/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'
@@ -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

@@ -33,25 +33,56 @@
 .widget-menu {
   align-items: center;
   display: flex;
-  justify-content: space-between;
+  gap: 6px;
+  justify-content: flex-end;
+  padding: 2px;
 }
 
-.btn-configure {
-  background: none;
-  height: 20px;
-  margin: 0 5px;
-  padding: 0;
-  width: 20px;
+.widget-menu .cove-button.btn-configure {
+  align-items: center;
+  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;
+}
+
+.widget-menu .cove-button.btn-configure svg {
+  margin-bottom: 0;
+  top: 0;
+  vertical-align: middle;
 }
 
 .widget-menu-item {
+  align-items: center;
   cursor: pointer;
-  display: block;
-  height: 20px;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  line-height: 1;
+  padding: 4px;
   user-select: none;
-  width: 20px;
+  width: 28px;
 }
 
 .widget-menu-item svg {
   fill: var(--mediumGray);
+  margin-bottom: 0;
+  top: 0;
+  vertical-align: middle;
 }

package/src/data/initial-state.js

@@ -10,6 +10,7 @@ export default {
     label: 'Data Table',
     show: true,
     showDownloadUrl: false,
+    downloadUrlLabel: '',
     showDownloadLinkBelow: true,
     showVertical: true
   }

package/src/helpers/addVisualization.ts

@@ -35,10 +35,12 @@ export const addVisualization = (type, subType) => {
       }
       break
     case 'data-bite':
-    case 'waffle-chart':
     case 'filtered-text':
       newVisualizationConfig.visualizationType = type
       break
+    case 'waffle-chart':
+      newVisualizationConfig.visualizationType = subType
+      break
     case 'table': {
       const tableConfig: Table = {
         label: 'Data Table',