@cdc/dashboard 4.24.12-2 → 4.25.1

package/src/components/Column.tsx

@@ -37,10 +37,21 @@ const Column = ({ data, rowIdx, colIdx }) => {
     classNames.push('column--populated')
   }
 
+  const handleTitle = config => {
+    if (!config) return
+    if (config.type === 'map') return config.general.title
+    if (config.type === 'markup-include') return config.contentEditor?.title
+    return config.title
+  }
+
   return (
     <div className={classNames.join(' ')} ref={drop}>
       {widget ? (
-        <Widget widgetConfig={{ rowIdx, colIdx, ...widget }} type={widget.visualizationType ?? widget.general?.geoType} />
+        <Widget
+          title={handleTitle(widget)}
+          widgetConfig={{ rowIdx, colIdx, ...widget }}
+          type={widget.visualizationType ?? widget.general?.geoType}
+        />
       ) : (
         <p className='builder-column__text'>
           Drag and drop <br /> visualization

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -122,12 +122,12 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           )
         }
 
-        const formGroupClass = `form-group mr-3 mb-1${loading ? ' loading-filter' : ''}`
+        const formGroupClass = `form-group me-4 mb-1${loading ? ' loading-filter' : ''}`
 
         return (
           <div className={formGroupClass} key={`${label}-filtersection-${filterIndex}`}>
             {label && (
-              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${filterIndex}`}>
+              <label className='font-weight-bold mb-2' htmlFor={`filter-${filterIndex}`}>
                 {label}
               </label>
             )}
@@ -143,8 +143,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
               />
             ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
               <NestedDropdown
-                activeGroup={filter.active as string}
-                activeSubGroup={_key ? filter.subGrouping?.active : activeSubGroupValue}
+                activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
+                activeSubGroup={_key ? filter.queuedActive?.[1] || filter.subGrouping?.active : activeSubGroupValue}
                 filterIndex={filterIndex}
                 options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
                 listLabel={label}

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

@@ -40,7 +40,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
       Number
     )
     return config.dashboard.sharedFilters
-      .map<[number, string]>(({ key }, i) => [i, key])
+      ?.map<[number, string]>(({ key }, i) => [i, key])
       .filter(([filterIndex]) => !sharedFilterIndexes.includes(filterIndex)) // filter out already added filters
       .map(([filterIndex, filterName]) => (
         <option key={filterIndex} value={filterIndex}>{`${filterIndex} - ${filterName}`}</option>
@@ -274,9 +274,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               </select>
             </label>
           ) : (
-
             <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>
-
               Add Existing Dashboard Filter
             </button>
           )}

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

@@ -226,7 +226,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
           </label>
           {filter.filterStyle === FILTER_STYLE.dropdown && (
             <label>
-              <span className='mr-1'>Show Dropdown</span>
+              <span className='me-1'>Show Dropdown</span>
               <input
                 type='checkbox'
                 checked={filter.showDropdown}

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

@@ -2,6 +2,8 @@
   :is(label) {
     margin-bottom: 0;
     margin-top: 0.5rem;
+    font-size: var(--filter-label-font-size);
+    font-weight: 700;
   }
   .btn {
     /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */

package/src/components/ExpandCollapseButtons.tsx

@@ -9,7 +9,7 @@ const ExpandCollapseButtons: React.FC<ExpandCollapseButtonsProps> = ({ setAllExp
         <button className='btn expand-collapse-buttons' onClick={() => setAllExpanded(false)}>
           - Collapse All
         </button>
-        <button className='btn expand-collapse-buttons mr-2' onClick={() => setAllExpanded(true)}>
+        <button className='btn expand-collapse-buttons me-2' onClick={() => setAllExpanded(true)}>
           + Expand All
         </button>
       </div>

package/src/components/Header/Header.tsx

@@ -6,7 +6,6 @@ import './index.scss'
 import MultiConfigTabs from '../MultiConfigTabs'
 import { Tab } from '../../types/Tab'
 import _ from 'lodash'
-import { getVizRowColumnLocator } from '../../helpers/getVizRowColumnLocator'
 
 type HeaderProps = {
   back?: any
@@ -29,7 +28,7 @@ const Header = (props: HeaderProps) => {
     // the Widget component will do a data fetch if no data is available for the visualization
     // this is intended to help visualization developers.
     type SampleData = Record<string, { sample: boolean }> & Object[]
-    if (Object.values(data).some((d: SampleData) => d.sample)) {
+    if (Object.values(data).some((d: SampleData) => d?.sample)) {
       const sampleDataRemoved = Object.keys(data).reduce((acc, key) => {
         if ((data[key] as SampleData).sample) {
           acc[key] = []

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -86,7 +86,7 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
         ) : (
           <>
             {name}
-            <button className='btn btn-danger border-0 ml-1' onClick={handleRemove}>
+            <button className='btn btn-danger border-0 ms-1' onClick={handleRemove}>
               X
             </button>
           </>
@@ -117,7 +117,7 @@ const MultiConfigTabs = () => {
 
   if (!config.multiDashboards) return null
   return (
-    <ul className='nav nav-tabs multi-config-tabs'>
+    <ul className='nav nav-tabs multi-config-tabs mb-4'>
       {tabs.map((tab, index) => (
         <Tab
           key={tab + index}

package/src/components/MultiConfigTabs/MultiTabs.tsx

@@ -21,7 +21,7 @@ const MultiTabs = () => {
 
   if (!config.multiDashboards) return null
   return (
-    <ul className='nav nav-tabs multi-config-tabs'>
+    <ul className='nav nav-tabs multi-config-tabs mb-4'>
       {tabs.map((tab, index) => (
         <li key={tab + index} className='nav-item'>
           <a

package/src/components/VisualizationRow.tsx

@@ -3,7 +3,6 @@ import React, { useContext, useMemo } from 'react'
 import Toggle from './Toggle'
 import _ from 'lodash'
 import { ConfigRow } from '../types/ConfigRow'
-import CdcChart from '@cdc/chart/src/CdcChart'
 import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
 import CdcMap from '@cdc/map/src/CdcMap'
 import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
@@ -18,6 +17,7 @@ import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAl
 import CollapsibleVisualizationRow from './CollapsibleVisualizationRow'
 import { DashboardFilters } from '../types/DashboardFilters'
 import { hasDashboardApplyBehavior } from '../helpers/hasDashboardApplyBehavior'
+import CdcChart from '@cdc/chart/src/CdcChartComponent'
 
 type VisualizationWrapperProps = {
   allExpanded: boolean
@@ -160,7 +160,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             <div
               key={`vis__${index}__${colIndex}`}
               className={`col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
-                hideVisualization ? ' hide-parent-visualization' : ' mt-5 p-1'
+                hideVisualization ? ' hide-parent-visualization' : ' mb-4'
               }`}
             >
               {row.toggle && !hideVisualization && (

package/src/components/Widget.tsx

@@ -33,12 +33,13 @@ const labelHash = {
 
 type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number }
 type WidgetProps = {
+  title: string
   widgetConfig?: WidgetConfig
   addVisualization?: Function
   type: string
 }
 
-const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
+const Widget = ({ title, widgetConfig, addVisualization, type }: WidgetProps) => {
   const { overlay } = useGlobalContext()
   const { config, data } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
@@ -74,9 +75,10 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
 
   const deleteWidget = () => {
     if (!widgetConfig) return
+
     dispatch({
       type: 'DELETE_WIDGET',
-      payload: { rowIdx: widgetConfig.rowIdx, colIdx: widgetConfig.colIdx, uid: widgetConfig.uid }
+      payload: { uid: widgetConfig.uid as string }
     })
   }
 
@@ -102,7 +104,10 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
 
   const editWidget = () => {
     if (!widgetConfig) return
-    dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: widgetConfig.uid, configureData: { editing: true } } })
+    dispatch({
+      type: 'UPDATE_VISUALIZATION',
+      payload: { vizKey: widgetConfig.uid as string, configureData: { editing: true } }
+    })
     loadSampleData()
   }
 
@@ -156,6 +161,7 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
           )}
           {iconHash[type]}
           <span>{labelHash[type]}</span>
+          <span>{title}</span>
           {widgetConfig?.newViz && type !== 'dashboardFilters' && (
             <span onClick={editWidget} className='config-needed'>
               Configuration needed

package/src/helpers/apiFilterHelpers.ts

@@ -152,7 +152,7 @@ export const setAutoLoadDefaultValue = (
       if (!sharedFilter.active) {
         sharedFilter.active = defaultQueryParamValue || defaultValue
       } else {
-        const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
+        const currentOption = dropdownOptions.find(option => option.value == sharedFilter.active) // loose equality required: 2017 should equal '2017'
         sharedFilter.active = currentOption ? currentOption.value : defaultValue
       }
     }

package/src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import MultiDashboardWrapper from './CdcDashboard'
+import '@cdc/core/styles/cove-main.scss'
 import './coreStyles_dashboard.scss'
 
 let isEditor = window.location.href.includes('editor=true')

package/src/scss/main.scss

@@ -138,7 +138,6 @@
   }
 
   .btn {
-
     // Expand and Collapse Buttons for Multiviz Dashboard
     &.expand-collapse-buttons {
       background-color: var(--lightestGray);
@@ -163,13 +162,6 @@
     margin: 15px 0 0;
   }
 
-  .data-table-container {
-    margin: 20px 0 0;
-    &.download-link-above {
-      margin: 0;
-    }
-  }
-
   .collapsable-multiviz-container {
     position: relative;
     border: var(--lightGray) 1px solid;
@@ -193,8 +185,7 @@
         position: relative;
       }
       @include breakpoint(xs) {
-        $font-small: 0.7em;
-        font-size: $font-small + 0.2em;
+        font-size: 0.9em;
       }
     }
     .data-table-heading {
@@ -283,8 +274,6 @@
   }
 
   .cdc-dashboard-inner-container {
-    margin: 1em;
-
     &.is-editor {
       margin-top: 7em;
     }

package/src/store/dashboard.actions.ts

@@ -9,12 +9,12 @@ import { SharedFilter } from '../types/SharedFilter'
 type ADD_FOOTNOTE = Action<'ADD_FOOTNOTE', { id: string; rowIndex: number; config: Footnotes }>
 type ADD_VISUALIZATION = Action<'ADD_VISUALIZATION', { rowIdx: number; colIdx: number; newViz: AnyVisualization }>
 type APPLY_CONFIG = Action<'APPLY_CONFIG', [Config, Object?]>
-type DELETE_WIDGET = Action<'DELETE_WIDGET', { rowIdx: number; colIdx: number; uid: string }>
+type DELETE_WIDGET = Action<'DELETE_WIDGET', { uid: string }>
 type MOVE_VISUALIZATION = Action<
   'MOVE_VISUALIZATION',
   { rowIdx: number; colIdx: number; widget: AnyVisualization & { rowIdx: number; colIdx: number } }
 >
-type SET_CONFIG = Action<'SET_CONFIG', Partial<Config>>
+type SET_CONFIG = Action<'SET_CONFIG', Partial<Config> & { activeDashboard?: number }>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
 type SET_DATA = Action<'SET_DATA', Record<string, any[]>>
 type SET_LOADING = Action<'SET_LOADING', boolean>

package/src/store/dashboard.reducer.ts

@@ -4,20 +4,20 @@ import { MultiDashboardConfig } from '../types/MultiDashboard'
 import DashboardActions from './dashboard.actions'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
 import { Tab } from '../types/Tab'
-import { DashboardConfig } from '../types/DashboardConfig'
+import { Dashboard } from '../types/Dashboard'
 import { ConfigRow } from '../types/ConfigRow'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { initialState } from '../DashboardContext'
 
 type BlankMultiConfig = {
-  dashboard: Partial<DashboardConfig>
+  dashboard: Partial<Dashboard>
   rows: Partial<ConfigRow>[]
   visualizations: Record<string, Object>
   table: Object
 }
 
 const createBlankDashboard: () => BlankMultiConfig = () => ({
-  dashboard: {},
+  dashboard: { sharedFilters: [] },
   rows: [{ columns: [{ width: 12 }] }],
   visualizations: {},
   table: {
@@ -71,7 +71,12 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       return { ...initialState, config, filteredData, data }
     }
     case 'SET_CONFIG': {
-      return { ...state, config: { ...state.config, ...action.payload } }
+      if (
+        action.payload.activeDashboard === undefined ||
+        state.config.activeDashboard === action.payload.activeDashboard
+      ) {
+        return { ...state, config: { ...state.config, ...action.payload } }
+      } else return state // ignore SET_CONFIG calls that have the wrong activeDashboard due to async api fetching
     }
     case 'SET_DATA': {
       return { ...state, data: action.payload }
@@ -203,11 +208,9 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       return { ...state, config: { ...state.config, rows: newRows } }
     }
     case 'DELETE_WIDGET': {
-      const { rowIdx, colIdx, uid } = action.payload
+      const { uid } = action.payload
       const newRows = _.cloneDeep(state.config.rows)
-      newRows[rowIdx].columns[colIdx].widget = null
       const newVisualizations = _.cloneDeep(state.config.visualizations)
-      delete newVisualizations[uid]
       const newSharedFilters = _.cloneDeep(state.config.dashboard.sharedFilters)
       if (newSharedFilters && newSharedFilters.length > 0) {
         newSharedFilters.forEach(sharedFilter => {
@@ -216,13 +219,19 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
           }
         })
       }
+
+      const filteredRows = _.map(newRows, row => ({
+        ...row,
+        columns: _.filter(row.columns, column => column.widget !== uid)
+      }))
+
       return {
         ...state,
         config: {
           ...state.config,
           dashboard: { ...state.config.dashboard, sharedFilters: newSharedFilters },
           visualizations: newVisualizations,
-          rows: newRows
+          rows: filteredRows
         }
       }
     }

package/src/types/DashboardConfig.ts

@@ -5,6 +5,7 @@ import { ConfigRow } from './ConfigRow'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { Table } from '@cdc/core/types/Table'
 import { Dashboard } from './Dashboard'
+import { Version } from '@cdc/core/types/Version'
 
 export type DashboardConfig = DataSet & {
   dashboard: Dashboard
@@ -18,4 +19,5 @@ export type DashboardConfig = DataSet & {
   runtime: Runtime
   downloadImageButton: boolean
   downloadPdfButton: boolean
+  version: Version
 }