@cdc/dashboard 4.26.1 → 4.26.3

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -7,7 +7,7 @@ import { FilterBehavior } from '../../helpers/FilterBehavior'
 import { getFilteredData } from '../../helpers/getFilteredData'
 import { DashboardFilters } from '../../types/DashboardFilters'
 import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationWrapper, Sidebar, Responsive } from '@cdc/core/components/Layout'
 import DashboardFiltersEditor from './DashboardFiltersEditor'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
@@ -302,24 +302,24 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   const displayNone = filters?.length ? filters.every(filter => filter.showDropdown === false) : false
   if (displayNone && !isEditor) return <></>
   return (
-    <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
+    <VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
       {isEditor && (
-        <Layout.Sidebar
+        <Sidebar
           displayPanel={displayPanel}
           isDashboard={true}
           title={'Configure Dashboard Filters'}
           onBackClick={onBackClick}
         >
           <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={visualizationConfig} />
-        </Layout.Sidebar>
+        </Sidebar>
       )}
 
       {!displayNone && (
-        <Layout.Responsive isEditor={isEditor}>
+        <Responsive isEditor={isEditor}>
           <div
             className={`${
               isEditor ? ' is-editor' : ''
-            } cove-component__content col-12 cove-dashboard-filters-container`}
+            } cove-visualization__inner cove-visualization__body col-12 cove-dashboard-filters-container`}
           >
             <Filters
               show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
@@ -337,9 +337,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
               }
             />
           </div>
-        </Layout.Responsive>
+        </Responsive>
       )}
-    </Layout.VisualizationWrapper>
+    </VisualizationWrapper>
   )
 }
 

package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof DashboardFilters> = {
   component: DashboardFilters,
   decorators: [
     Story => (
-      <div className='cdc-open-viz-module type-dashboard'>
+      <div className='cove-visualization type-dashboard'>
         <Story />
       </div>
     )

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -4,18 +4,18 @@
     font-weight: 700;
   }
   .btn {
+    align-self: flex-end;
     /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
     height: calc(1.5em + 0.75rem + 2px);
-    align-self: flex-end;
   }
   .loading-filter {
     position: relative;
     .spinner-border {
+      height: 1.5rem;
       position: absolute;
-      top: 55%;
       right: 10%;
+      top: 55%;
       width: 1.5rem;
-      height: 1.5rem;
     }
   }
   :is(select):disabled {

package/src/components/DataDesignerModal.tsx

@@ -59,8 +59,8 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
     if (dataSetChanged || noCachedData) {
       setLoadingAPIData(true)
       try {
-        newData = await fetchRemoteData(dataUrl)
-        newData = transform.autoStandardize(newData)
+        const result = await fetchRemoteData(dataUrl)
+        newData = transform.autoStandardize(result.data)
       } catch (e) {
         setErrorMessage('There was an issue loading the data source. Please check the datasource URL and try again.')
       }

package/src/components/Header/Header.tsx

@@ -176,7 +176,6 @@ const Header = (props: HeaderProps) => {
                     Show Data Table(s)
                   </label>
                   <br />
-
                   <label>
                     <input
                       type='checkbox'
@@ -185,7 +184,6 @@ const Header = (props: HeaderProps) => {
                     />
                     Expanded by Default
                   </label>
-                  <br />
                 </div>
 
                 <div className='wrap'>
@@ -206,9 +204,6 @@ const Header = (props: HeaderProps) => {
                       onChange={e => changeConfigValue('table', 'height', e.target.value)}
                     />
                   )}
-                </div>
-
-                <div className='wrap'>
                   <label>
                     <input
                       type='checkbox'
@@ -217,6 +212,17 @@ const Header = (props: HeaderProps) => {
                     />
                     Show Download CSV Link
                   </label>
+                  {config.table.download && (
+                    <input
+                      type='text'
+                      placeholder='Customize label'
+                      defaultValue={config.table.downloadDataLabel}
+                      onChange={e => changeConfigValue('table', 'downloadDataLabel', e.target.value)}
+                    />
+                  )}
+                </div>
+
+                <div className='wrap'>
                   <label>
                     <input
                       type='checkbox'
@@ -225,6 +231,22 @@ const Header = (props: HeaderProps) => {
                     />
                     Show URL to Automatically Updated Data
                   </label>
+                  <label>
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.downloadImageButton}
+                      onChange={e => changeConfigValue('table', 'downloadImageButton', e.target.checked)}
+                    />
+                    Show Download Image Button
+                  </label>
+                  {config.table.downloadImageButton && (
+                    <input
+                      type='text'
+                      placeholder='Customize label'
+                      defaultValue={config.table.downloadImageLabel}
+                      onChange={e => changeConfigValue('table', 'downloadImageLabel', e.target.value)}
+                    />
+                  )}
                 </div>
               </>
             )}

package/src/components/Header/index.scss

@@ -1,4 +1,4 @@
-.cdc-open-viz-module .shared-filter-modal,
+.cove-visualization .shared-filter-modal,
 .cove .shared-filter-modal,
 .shared-filter-modal {
   &__title {

package/src/components/MultiConfigTabs/multiconfigtabs.styles.css

@@ -1,17 +1,17 @@
 .multi-config-tabs {
   .nav-link {
+    border-color: var(--lightGray);
     border-radius: 6px 6px 0 0;
-    font-weight: 400;
+    color: var(--primary);
     display: block;
+    font-weight: 400;
     padding: 0.5rem 1rem;
     @media (max-width: 480px) {
       padding: 0.5rem 0.8rem;
     }
-    color: var(--primary);
-    border-color: var(--lightGray);
     :is(button) {
-      display: none;
       background: none;
+      display: none;
     }
     &:hover {
       :is(button) {
@@ -31,9 +31,9 @@
       font-weight: bold;
     }
     .btn-danger {
-      text-decoration: none;
-      padding: 0px 5px;
       font-size: inherit;
+      padding: 0px 5px;
+      text-decoration: none;
     }
   }
   .add {

package/src/components/Row.tsx

@@ -70,6 +70,12 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     updateConfig({ ...config, rows: newRows })
   }
 
+  const toggleEqualHeight = () => {
+    const newRows = _.cloneDeep(rows)
+    newRows[rowIdx].equalHeight = !newRows[rowIdx].equalHeight
+    updateConfig({ ...config, rows: newRows })
+  }
+
   const moveRow = (dir = 'down') => {
     if (rowIdx === rows.length - 1 && dir === 'down') return
 
@@ -179,9 +185,24 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     </li>
   ]
 
+  const isMultiColumn = curr !== '12' && curr !== 'toggle'
+
   return (
     <nav className='row-menu'>
       <ul className='row-menu__flyout'>{layoutList}</ul>
+      {isMultiColumn && (
+        <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}
+        >
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='25' height='20' fill='#fff'>
+            <rect x='1' y='2' width='9' height='14' rx='1' />
+            <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>
+      )}
       <div className='spacer'></div>
       <button
         className={`btn btn-primary row-menu__btn border-0`}

package/src/components/Toggle/toggle-style.css

@@ -1,10 +1,10 @@
-.cdc-open-viz-module {
+.cove-visualization {
   --border: 1px solid var(--lightGray);
   .toggle-component {
     display: flex;
     justify-content: right;
-    width: 100%;
     margin-bottom: 15px;
+    width: 100%;
     :first-child:is(div) {
       border: var(--border);
       border-radius: 5px 0 0 5px;
@@ -14,18 +14,18 @@
       border-radius: 0 5px 5px 0;
     }
     :is(div) {
-      border-top: var(--border);
+      background-color: var(--white);
       border-bottom: var(--border);
-      padding: 7px 15px;
+      border-top: var(--border);
+      color: var(--primary);
+      cursor: pointer;
       display: inline;
       float: right;
-      cursor: pointer;
+      padding: 7px 15px;
       &.selected {
         background-color: var(--primary);
         color: white;
       }
-      background-color: var(--white);
-      color: var(--primary);
       :is(svg) {
         height: 25px;
       }

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 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'
@@ -103,53 +103,65 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     }
   }, [toggledRow, row.toggle])
 
-  // Equalize TP5 data bite title heights in the same row
-  useEffect(() => {
-    const rowElement = document.querySelector(`[data-row-index="${index}"]`)
-    if (!rowElement) return
-
-    const tp5Titles = Array.from(rowElement.querySelectorAll('.bite__style--tp5 .cdc-callout__heading'))
-    if (tp5Titles.length <= 1) return // No need to equalize if there's only one or none
+  const setupTP5MinHeightEqualizer = (rowElement: Element, itemSelector: string) => {
+    const items = Array.from(rowElement.querySelectorAll(itemSelector)) as HTMLElement[]
+    if (items.length <= 1) return undefined
 
-    const equalizeTP5Titles = () => {
-      // Reset heights first
-      tp5Titles.forEach((title: HTMLElement) => {
-        title.style.minHeight = ''
+    const equalizeHeights = () => {
+      items.forEach(item => {
+        item.style.minHeight = ''
       })
 
-      // Calculate max height after reset
       let maxHeight = 0
-      tp5Titles.forEach((title: HTMLElement) => {
-        const height = title.offsetHeight
+      items.forEach(item => {
+        const height = item.offsetHeight
         if (height > maxHeight) maxHeight = height
       })
 
-      // Apply max height to all titles
       if (maxHeight > 0) {
-        tp5Titles.forEach((title: HTMLElement) => {
-          title.style.minHeight = `${maxHeight}px`
+        items.forEach(item => {
+          item.style.minHeight = `${maxHeight}px`
         })
       }
     }
 
-    // Initial equalization
-    equalizeTP5Titles()
+    equalizeHeights()
 
-    // Use ResizeObserver to watch for size changes in any of the titles
     const resizeObserver = new ResizeObserver(() => {
-      equalizeTP5Titles()
+      equalizeHeights()
     })
 
-    // Observe all titles
-    tp5Titles.forEach(title => {
-      resizeObserver.observe(title as Element)
+    items.forEach(item => {
+      resizeObserver.observe(item)
     })
 
+    return () => resizeObserver.disconnect()
+  }
+
+  // Equalize TP5 callout title heights and TP5 gauge message blocks for like visualizations in the same row
+  useEffect(() => {
+    if (!row.equalHeight) return
+
+    const rowElement = document.querySelector(`[data-row-index="${index}"]`)
+    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>
+
     return () => {
-      resizeObserver.disconnect()
+      cleanups.forEach(cleanup => cleanup())
     }
   }, [index, row, config, filteredDataOverride])
 
+  const isFilterRow = row.columns.some(
+    col => col.widget && config.visualizations[col.widget]?.type === 'dashboardFilters'
+  )
+  const needsEqualHeight = !!row.equalHeight && !isFilterRow
+
   const show = useMemo(() => {
     if (row.toggle) {
       return row.columns.map((col, i) => i === toggledRow)
@@ -196,7 +208,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
@@ -224,7 +236,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
   return (
     <div
-      className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
+      className={`row${needsEqualHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
       key={`row__${index}`}
       data-row-index={index}
     >
@@ -347,6 +359,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                     updateChildConfig(col.widget, newConfig)
                   }}
                   isDashboard={true}
+                  isEditor={config.editing === true}
                   interactionLabel={interactionLabel}
                 />
               )}
@@ -358,7 +371,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                     updateChildConfig(col.widget, newConfig)
                   }}
                   isDashboard={true}
-                  interactionLabel={link}
+                  interactionLabel={interactionLabel}
                 />
               )}
               {type === 'markup-include' && (

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -1,83 +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.contentEditor = {
-        inlineHTML: '<h2>Inline HTML</h2>',
-        markupVariables: [],
-        showHeader: true,
-        srcUrl: '#example',
-        useInlineHTML: true
-      }
-      newVisualizationConfig.theme = 'theme-blue'
-      newVisualizationConfig.visual = {
-        border: false,
-        accent: false,
-        background: false,
-        hideBackgroundColor: false,
-        borderColorTheme: false
-      }
-      newVisualizationConfig.showEditorPanel = true
-      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)

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

@@ -105,11 +105,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 => {

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,37 +19,37 @@
 }
 
 .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 {
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: space-between;
 }
 
 .btn-configure {
   background: none;
-  width: 20px;
   height: 20px;
-  padding: 0;
   margin: 0 5px;
+  padding: 0;
+  width: 20px;
 }
 
 .widget-menu-item {
+  cursor: pointer;
   display: block;
-  width: 20px;
   height: 20px;
-  cursor: pointer;
   user-select: none;
+  width: 20px;
 }
 
 .widget-menu-item svg {

package/src/data/initial-state.js

@@ -4,7 +4,7 @@ export default {
     titleStyle: 'small',
     sharedFilters: []
   },
-  rows: [[{ width: 12 }, {}, {}]],
+  rows: [{ columns: [{ width: 12 }] }],
   visualizations: {},
   table: {
     label: 'Data Table',

package/src/helpers/addValuesToDashboardFilters.ts

@@ -58,8 +58,7 @@ export const addValuesToDashboardFilters = (
         const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
         filterCopy.active = active.filter(val => defaultValues.includes(val))
       } else {
-        // Initialize active from defaultValue if not already set
-        // OR if defaultValue exists, always use it (overrides stale active from saved config)
+        // Use defaultValue if set, otherwise keep existing active or use first value
         if (filterCopy.defaultValue) {
           filterCopy.active = filterCopy.defaultValue
         } else if (!filterCopy.active) {
@@ -82,17 +81,24 @@ export const addValuesToDashboardFilters = (
       }
       const queryStringFilterValue = getQueryStringFilterValue(subGroupingFilter)
       const groupActive = groupName || filterCopy.values[0]
-      const defaultSubValue = filterCopy.subGrouping.valuesLookup[groupActive as string]?.values[0]
+      const currentGroupValues = filterCopy.subGrouping.valuesLookup[groupActive as string]?.values || []
+      const defaultSubValue = currentGroupValues[0]
 
-      // Priority order: query string > existing active > configured default > first available value
-      let activeValue = queryStringFilterValue || filterCopy.subGrouping.active
+      // Priority order: query string > configured default > existing active > first available value
+      let activeValue: string | undefined
 
-      // If we have a configured default value and it exists in the current group's options, use it
-      if (!activeValue && filterCopy.subGrouping.defaultValue) {
-        const currentGroupValues = filterCopy.subGrouping.valuesLookup[groupActive as string]?.values || []
-        if (currentGroupValues.includes(filterCopy.subGrouping.defaultValue)) {
-          activeValue = filterCopy.subGrouping.defaultValue
-        }
+      if (queryStringFilterValue && currentGroupValues.includes(queryStringFilterValue)) {
+        // 1. Query string parameter takes highest priority (only if valid for the current group)
+        activeValue = queryStringFilterValue
+      } else if (
+        filterCopy.subGrouping.defaultValue &&
+        currentGroupValues.includes(filterCopy.subGrouping.defaultValue)
+      ) {
+        // 2. Use configured defaultValue if it exists and is valid for the current group
+        activeValue = filterCopy.subGrouping.defaultValue
+      } else if (filterCopy.subGrouping.active && currentGroupValues.includes(filterCopy.subGrouping.active)) {
+        // 3. Keep existing active value if it's valid for the current group
+        activeValue = filterCopy.subGrouping.active
       }
 
       filterCopy.subGrouping.active = activeValue || defaultSubValue