@cdc/dashboard 4.25.11 → 4.26.2

package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx

@@ -1,21 +1,26 @@
 import { DashboardConfig } from '../../../../types/DashboardConfig'
 import { SharedFilter } from '../../../../types/SharedFilter'
 import _ from 'lodash'
-import { SubGrouping } from '@cdc/core/types/VizFilter'
+import { SubGrouping, OrderBy } from '@cdc/core/types/VizFilter'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
+import { handleSorting } from '@cdc/core/components/Filters/helpers/handleSorting'
+import { filterOrderOptions } from '@cdc/core/helpers/filterOrderOptions'
+import FilterOrder from '@cdc/core/components/EditorPanel/VizFilterEditor/components/FilterOrder'
 
 type NestedDropDownEditorDashboardProps = {
   config: DashboardConfig
   filter: SharedFilter
   isDashboard: boolean
   updateFilterProp: Function
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   filter,
   config,
   isDashboard = false,
-  updateFilterProp
+  updateFilterProp,
+  onNestedDragAreaHover
 }) => {
   const subGrouping = filter?.subGrouping
 
@@ -50,12 +55,10 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   const handleFitlerGroupColumnNameChange = (value: string) => {
     if (!value) {
       updateFilterProp('columnName', '')
-      updateFilterProp('defaultValue', '')
       return
     }
     const [newColumnName, selectedOptionDatasetName] = value.split('|')
     updateFilterProp('columnName', newColumnName)
-    updateFilterProp('defaultValue', '') // Reset default value when column changes
     populateSubGroupingOptions(selectedOptionDatasetName, newColumnName)
   }
 
@@ -66,18 +69,23 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
     }
     const [newColumnName, selectedOptionDatasetName] = value.split('|')
 
+    const order = subGrouping?.order || 'asc'
+
     const valuesLookup = filter.values.reduce((acc, groupName) => {
-      const values: string[] = _.uniq(
+      const rawValues: string[] = _.uniq(
         config.datasets[selectedOptionDatasetName].data
           .map(d => {
             return d[filter.columnName] === groupName ? d[newColumnName] : ''
           })
           .filter(value => value !== '')
-      ).sort()
+      )
+
+      // Sort values according to the order setting
+      const { values: sortedValues } = handleSorting({ values: rawValues, order })
 
       acc[groupName] = {
-        values,
-        orderedValues: values
+        values: sortedValues,
+        orderedValues: sortedValues
       }
       return acc
     }, {})
@@ -86,12 +94,94 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
       ...subGrouping,
       columnName: newColumnName,
       valuesLookup,
+      order,
       defaultValue: '' // Reset default value when column changes
     }
 
     updateFilterProp('subGrouping', newSubGrouping)
   }
 
+  // Handle group order change (asc/desc/cust)
+  const handleGroupingOrderBy = (order: OrderBy) => {
+    const groupSortObject = {
+      values: _.cloneDeep(filter.values),
+      order
+    }
+    const { values: newOrderedValues } = handleSorting(groupSortObject)
+
+    const updates: Partial<SharedFilter> = {
+      values: newOrderedValues,
+      order
+    }
+
+    if (order === 'cust') {
+      updates.orderedValues = newOrderedValues
+    } else {
+      updates.orderedValues = undefined
+    }
+
+    // Update filter with new order and values
+    updateFilterProp('order', order)
+  }
+
+  // Handle drag-drop reorder for group values
+  const handleGroupingCustomOrder = (sourceIndex: number, destinationIndex: number) => {
+    if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
+
+    const orderedValues = _.cloneDeep(filter.orderedValues || filter.values)
+    const [movedItem] = orderedValues.splice(sourceIndex, 1)
+    orderedValues.splice(destinationIndex, 0, movedItem)
+
+    // Update both values and orderedValues, and ensure order is 'cust'
+    updateFilterProp('orderedValues', orderedValues)
+    if (filter.order !== 'cust') {
+      updateFilterProp('order', 'cust')
+    }
+  }
+
+  // Handle subgroup order change (asc/desc/cust)
+  const handleSubGroupingOrderBy = (order: OrderBy) => {
+    const newValuesLookup = Object.keys(subGrouping.valuesLookup).reduce((acc, groupName) => {
+      const subGroup = subGrouping.valuesLookup[groupName]
+      const { values: sortedValues } = handleSorting({ values: _.cloneDeep(subGroup.values), order })
+
+      acc[groupName] = {
+        values: sortedValues,
+        orderedValues: order === 'cust' ? sortedValues : undefined
+      }
+      return acc
+    }, {})
+
+    const newSubGrouping: SubGrouping = {
+      ...subGrouping,
+      order,
+      valuesLookup: newValuesLookup
+    }
+
+    updateFilterProp('subGrouping', newSubGrouping)
+  }
+
+  // Handle drag-drop reorder for subgroup values within a specific group
+  const handleSubGroupingCustomOrder = (
+    sourceIndex: number,
+    destinationIndex: number,
+    currentOrderedValues: string[],
+    groupName: string
+  ) => {
+    if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
+
+    const updatedGroupOrderedValues = _.cloneDeep(currentOrderedValues)
+    const [movedItem] = updatedGroupOrderedValues.splice(sourceIndex, 1)
+    updatedGroupOrderedValues.splice(destinationIndex, 0, movedItem)
+
+    const newSubGrouping = _.cloneDeep(subGrouping)
+    newSubGrouping.valuesLookup[groupName].values = updatedGroupOrderedValues
+    newSubGrouping.valuesLookup[groupName].orderedValues = updatedGroupOrderedValues
+    newSubGrouping.order = 'cust'
+
+    updateFilterProp('subGrouping', newSubGrouping)
+  }
+
   return (
     <div className='nesteddropdown-editor'>
       {!isDashboard && (
@@ -144,7 +234,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
       {filter.columnName && filter.values && filter.values.length > 0 && (
         <Select
           value={filter.defaultValue}
-          options={filter.values}
+          options={filter.orderedValues || filter.values}
           updateField={(_section, _subSection, _key, value) => updateFilterProp('defaultValue', value)}
           label={'Group Default Value'}
           initial={'Select'}
@@ -157,7 +247,8 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
           value={subGrouping.defaultValue}
           options={(() => {
             const groupKey = filter.defaultValue || (Array.isArray(filter.active) ? filter.active[0] : filter.active)
-            return subGrouping.valuesLookup[groupKey as string]?.values || []
+            const lookup = subGrouping.valuesLookup[groupKey as string]
+            return lookup?.orderedValues || lookup?.values || []
           })()}
           updateField={(_section, _subSection, _key, value) => {
             const newSubGrouping = { ...subGrouping, defaultValue: value }
@@ -167,6 +258,56 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
           initial={'Select'}
         />
       )}
+
+      {/* Group Order */}
+      {filter.columnName && filter.values && filter.values.length > 0 && (
+        <div className='mt-2'>
+          <Select
+            label='Group Order'
+            value={filter.order || 'asc'}
+            options={filterOrderOptions}
+            onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}
+          />
+          {filter.order === 'cust' && (
+            <FilterOrder
+              orderedValues={filter.orderedValues || filter.values}
+              handleFilterOrder={handleGroupingCustomOrder}
+              onNestedDragAreaHover={onNestedDragAreaHover}
+            />
+          )}
+        </div>
+      )}
+
+      {/* SubGrouping Order */}
+      {subGrouping?.columnName && subGrouping.valuesLookup && Object.keys(subGrouping.valuesLookup).length > 0 && (
+        <div className='mt-2'>
+          <Select
+            label='SubGrouping Order'
+            value={subGrouping.order || 'asc'}
+            options={filterOrderOptions}
+            onChange={e => handleSubGroupingOrderBy(e.target.value as OrderBy)}
+          />
+          {subGrouping.order === 'cust' &&
+            (filter.orderedValues || filter.values)?.map((groupName, i) => {
+              const lookup = subGrouping.valuesLookup[groupName]
+              if (!lookup) return null
+              const orderedSubGroupValues = lookup.orderedValues || lookup.values
+              return (
+                <div key={`group-subgroup-values-${groupName}-${i}`}>
+                  <span className='font-weight-bold fw-bold'>{groupName}</span>
+                  <FilterOrder
+                    key={`subgroup-values-${groupName}-${i}`}
+                    orderedValues={orderedSubGroupValues}
+                    handleFilterOrder={(sourceIndex, destinationIndex) => {
+                      handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
+                    }}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
+                  />
+                </div>
+              )
+            })}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -177,15 +177,18 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
     // Reset filtersApplied state to false when clearing filters
     dispatch({ type: 'SET_FILTERS_APPLIED', payload: false })
 
+    // Update child filter values before filtering data
+    const updatedFilters = updateChildFilters(dashboardConfig.sharedFilters, state.data)
+
     // Update filtered data immediately after resetting filters
-    // Use the updated dashboardConfig filters instead of state
+    // Use the updated filters instead of state
     const clonedState = {
       ...state,
       config: {
         ...state.config,
         dashboard: {
           ...state.config.dashboard,
-          sharedFilters: dashboardConfig.sharedFilters
+          sharedFilters: updatedFilters
         }
       }
     }
@@ -262,8 +265,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         loadAPIFilters(newSharedFilters, loadingFilterMemo, undefined, undefined, isStale)
       }
     } else {
+      const updatedFilters = updateChildFilters(newSharedFilters, state.data)
       if (newSharedFilters[index].type === 'urlfilter' && newSharedFilters[index].apiFilter) {
-        reloadURLData(newSharedFilters)
+        reloadURLData(updatedFilters)
       } else {
         const clonedState = {
           ...state,
@@ -271,13 +275,13 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
             ...state.config,
             dashboard: {
               ...state.config.dashboard,
-              sharedFilters: newSharedFilters
+              sharedFilters: updatedFilters
             }
           }
         }
         const newFilteredData = getFilteredData(clonedState)
         dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-        dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: updatedFilters })
       }
     }
   }
@@ -293,9 +297,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   // if all of the filters are hidden filters don't display the VisualizationWrapper
   const filters = visualizationConfig?.sharedFilterIndexes
     ?.map(Number)
-    .map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
+    ?.map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
 
-  const displayNone = filters.length ? filters.every(filter => filter.showDropdown === false) : false
+  const displayNone = filters?.length ? filters.every(filter => filter.showDropdown === false) : false
   if (displayNone && !isEditor) return <></>
   return (
     <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>

package/src/components/DataDesignerModal.tsx

@@ -194,7 +194,12 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
           ) : (
             <>
               <Select
-                options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})}
+                options={Object.keys(
+                  config.rows[rowIndex]?.data?.[0] ||
+                    configureData.data?.[0] ||
+                    config.datasets[configureData.dataKey]?.data?.[0] ||
+                    {}
+                )}
                 value={config.rows[rowIndex].multiVizColumn}
                 label='Multi-Visualization Column'
                 initial='--Select--'

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react'
+import { useContext, useRef, useEffect } from 'react'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
@@ -20,8 +20,22 @@ const Header = (props: HeaderProps) => {
   const dispatch = useContext(DashboardDispatchContext)
   const back = () => {
     if (!visualizationKey) return
+
     const newConfig = cloneConfig(config)
-    newConfig.visualizations[visualizationKey].editing = false
+
+    // Ensure visualizations object exists
+    if (!newConfig.visualizations || !newConfig.visualizations[visualizationKey]) {
+      console.error(`Visualization ${visualizationKey} not found in config`)
+      return
+    }
+
+    // Explicitly set editing to false
+    newConfig.visualizations[visualizationKey] = {
+      ...newConfig.visualizations[visualizationKey],
+      editing: false,
+      showEditorPanel: false
+    }
+
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
 
     // the Widget component will do a data fetch if no data is available for the visualization
@@ -59,19 +73,21 @@ const Header = (props: HeaderProps) => {
   const configStringRef = useRef<string>()
 
   // Only update parent when config content actually changes (not just reference)
-  const configString = JSON.stringify(convertStateToConfig())
-  if (configStringRef.current !== configString) {
-    configStringRef.current = configString
-
-    // Emit the data in a regular JS event so it can be consumed by anything.
-    const event = new CustomEvent('updateVizConfig', { detail: configString })
-    window.dispatchEvent(event)
-
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      setParentConfig(JSON.parse(configString))
+  useEffect(() => {
+    const configString = JSON.stringify(convertStateToConfig())
+    if (configStringRef.current !== configString) {
+      configStringRef.current = configString
+
+      // Emit the data in a regular JS event so it can be consumed by anything.
+      const event = new CustomEvent('updateVizConfig', { detail: configString })
+      window.dispatchEvent(event)
+
+      // Pass up to Editor if needed
+      if (setParentConfig) {
+        setParentConfig(JSON.parse(configString))
+      }
     }
-  }
+  }, [config, setParentConfig])
 
   const handleCheck = e => {
     const { checked } = e.currentTarget
@@ -97,12 +113,27 @@ const Header = (props: HeaderProps) => {
             multidashboard
           </span>
           <br />
-          <input
-            type='text'
-            placeholder='Enter Dashboard Name Here'
-            defaultValue={config.dashboard?.title}
-            onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
-          />
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '10px' }}>
+            <input
+              type='text'
+              placeholder='Enter Dashboard Name Here'
+              defaultValue={config.dashboard?.title}
+              onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
+              style={{ flex: 1 }}
+            />
+            <label style={{ display: 'flex', flexDirection: 'column', gap: '3px', fontSize: '0.85em' }}>
+              <span style={{ fontSize: '0.8em' }}>Title Style</span>
+              <select
+                value={config.dashboard.titleStyle}
+                onChange={e => changeConfigValue('dashboard', 'titleStyle', e.target.value)}
+                style={{ fontSize: '0.9em' }}
+              >
+                <option value='small'>Small</option>
+                <option value='large'>Large</option>
+                <option value='legacy'>Legacy</option>
+              </select>
+            </label>
+          </div>
         </div>
       )}
       {!subEditor && (

package/src/components/VisualizationRow.tsx

@@ -93,6 +93,68 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     if (row.toggle) setToggled(0)
   }, [config.activeDashboard, index])
 
+  useEffect(() => {
+    // Trigger window resize event when tab changes to force chart re-render
+    if (row.toggle && toggledRow !== undefined) {
+      // Use setTimeout to ensure the d-none class has been removed first
+      setTimeout(() => {
+        window.dispatchEvent(new Event('resize'))
+      }, 50)
+    }
+  }, [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 equalizeHeights = () => {
+      items.forEach(item => {
+        item.style.minHeight = ''
+      })
+
+      let maxHeight = 0
+      items.forEach(item => {
+        const height = item.offsetHeight
+        if (height > maxHeight) maxHeight = height
+      })
+
+      if (maxHeight > 0) {
+        items.forEach(item => {
+          item.style.minHeight = `${maxHeight}px`
+        })
+      }
+    }
+
+    equalizeHeights()
+
+    const resizeObserver = new ResizeObserver(() => {
+      equalizeHeights()
+    })
+
+    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(() => {
+    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 () => {
+      cleanups.forEach(cleanup => cleanup())
+    }
+  }, [index, row, config, filteredDataOverride])
+
   const show = useMemo(() => {
     if (row.toggle) {
       return row.columns.map((col, i) => i === toggledRow)
@@ -166,13 +228,18 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   }
 
   return (
-    <div className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`} key={`row__${index}`}>
+    <div
+      className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
+      key={`row__${index}`}
+      data-row-index={index}
+    >
       {row.toggle && !inNoDataState && (
         <Toggle row={row} visualizations={config.visualizations} active={toggledRow} setToggled={setToggled} />
       )}
       {row.columns.map((col, colIndex) => {
         if (col.width) {
-          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`col col-${col.width}`}></div>
+          if (!col.widget)
+            return <div key={`row__${index}__col__${colIndex}`} className={`col-12 col-md-${col.width}`}></div>
 
           const visualizationConfig = getVizConfig(
             col.widget,
@@ -212,9 +279,14 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             </a>
           )
 
+          // Markup-includes with external URLs don't depend on dashboard data
+          const isMarkupIncludeWithoutDataDependency =
+            type === 'markup-include' && !visualizationConfig.dataKey && !visualizationConfig.data?.length
+
           const hideVisualization =
             inNoDataState &&
             filterBehavior !== 'Apply Button' &&
+            !isMarkupIncludeWithoutDataDependency &&
             (type !== 'dashboardFilters' || applyButtonNotClicked(visualizationConfig))
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
@@ -224,11 +296,10 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             sharedFilterIndexes &&
             sharedFilterIndexes.filter(idx => config.dashboard.sharedFilters?.[idx]?.showDropdown === false).length ===
               sharedFilterIndexes.length
-          const hasMarginBottom = !isLastRow && !hiddenDashboardFilters
 
           const vizWrapperClass = `col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
-            hideVisualization ? ' hide-parent-visualization' : hasMarginBottom ? ' mb-4' : ''
-          }`
+            hideVisualization ? ' hide-parent-visualization' : ''
+          }${hiddenDashboardFilters ? ' hidden-dashboard-filters' : ''}`
           const link =
             config.table && config.table.show && config.datasets && table && table.showDataTableLink
               ? tableLink

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -46,25 +46,7 @@ const addVisualization = (type, subType) => {
       newVisualizationConfig.visualizationType = type
       break
     case 'markup-include':
-      newVisualizationConfig.contentEditor = {
-        inlineHTML: '<h2>Inline HTML</h2>',
-        markupVariables: [],
-        showHeader: true,
-        srcUrl: '#example',
-        title: 'Markup Include',
-        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 = []
@@ -81,7 +63,7 @@ const addVisualization = (type, subType) => {
 
 const VisualizationsPanel = () => {
   const [advancedEditing, setAdvancedEditing] = useState(false)
-  const { config } = useContext(DashboardContext)
+  const { config, isEditor } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
   const loadConfig = incomingConfig => {
     const newConfig = !incomingConfig.multiDashboards
@@ -124,7 +106,7 @@ const VisualizationsPanel = () => {
         loadConfig={loadConfig}
         config={config}
         convertStateToConfig={() => undefined}
-        stripConfig={stripConfig}
+        stripConfig={cfg => stripConfig(cfg, isEditor)}
         onExpandCollapse={() => {
           setAdvancedEditing(!advancedEditing)
         }}

package/src/components/Widget/Widget.tsx

@@ -123,7 +123,7 @@ const Widget = ({
     if (!widgetConfig) return
     dispatch({
       type: 'UPDATE_VISUALIZATION',
-      payload: { vizKey: widgetConfig.uid as string, configureData: { editing: true } }
+      payload: { vizKey: widgetConfig.uid as string, configureData: { editing: true, showEditorPanel: true } }
     })
     loadSampleData()
   }

package/src/data/initial-state.js

@@ -1,6 +1,7 @@
 export default {
   dashboard: {
     theme: 'theme-blue',
+    titleStyle: 'small',
     sharedFilters: []
   },
   rows: [[{ width: 12 }, {}, {}]],