@cdc/dashboard 4.23.11 → 4.24.2

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -0,0 +1,106 @@
+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 onBlur = () => {
+    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'>
+      <a className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} href='#' onClick={onClick}>
+        {canMoveLeft && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
+        {editing ? <input type='text' defaultValue={name} onBlur={onBlur} ref={inputRef} /> : <>{name}</>}
+        {canMoveRight && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
+        <button className='remove' onClick={handleRemove}>
+          X
+        </button>
+      </a>
+    </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'>
+      {tabs.map((tab, index) => (
+        <Tab key={tab + index} name={tab} tabs={tabs} index={index} handleClick={() => saveAndLoad(index)} active={index === activeTab} />
+      ))}
+      <li className='nav-item'>
+        <a className='nav-link add' href='#' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
+          +
+        </a>
+      </li>
+    </ul>
+  )
+}
+
+export default MultiConfigTabs

package/src/components/MultiConfigTabs/MultiTabs.tsx

@@ -0,0 +1,30 @@
+import { useContext, useMemo } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+
+import './multiconfigtabs.styles.css'
+
+const MultiTabs = () => {
+  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 load = (indexToSwitchTo: number) => {
+    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
+  }
+
+  if (!config.multiDashboards) return null
+  return (
+    <ul className='nav nav-tabs multi-config-tabs'>
+      {tabs.map((tab, index) => (
+        <li className='nav-item'>
+          <a className={`nav-link${activeTab === index ? ' active' : ''}`} aria-current={activeTab === index ? 'page' : null} href='#' onClick={() => load(index)}>
+            {tab}
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default MultiTabs

package/src/components/MultiConfigTabs/index.tsx

@@ -0,0 +1,8 @@
+import MultiConfigTabs from './MultiConfigTabs'
+import MultiTabs from './MultiTabs'
+
+const Tabs: React.FC<{ isEditor: boolean }> = ({ isEditor = false }) => {
+  return isEditor ? <MultiConfigTabs /> : <MultiTabs />
+}
+
+export default Tabs

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

@@ -0,0 +1,32 @@
+.multi-config-tabs {
+  .nav-link {
+    font-weight: 400;
+    display: block;
+    padding: 0.5rem 1rem;
+    :is(button) {
+      display: none;
+      background: none;
+    }
+    &:hover {
+      :is(button) {
+        display: inline-block;
+        color: var(--gray);
+        &:hover {
+          color: var(--black);
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .remove {
+    color: var(--gray);
+    &:hover {
+      color: var(--black);
+      font-weight: bold;
+    }
+  }
+  .add {
+    font-weight: 800;
+    padding: 0.5rem 1rem;
+  }
+}

package/src/components/Widget.tsx

@@ -10,7 +10,7 @@ import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataDesigner from '@cdc/core/components/managers/DataDesigner'
 import Icon from '@cdc/core/components/ui/Icon'
 import Modal from '@cdc/core/components/ui/Modal'
-import { Visualization } from '../types/Config'
+import { Visualization } from '@cdc/core/types/Visualization'
 
 const iconHash = {
   'data-bite': <Icon display='databite' base />,
@@ -87,13 +87,16 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     updateConfig({ ...config, rows, visualizations })
   }
 
-  const [{ isDragging, ...collected }, drag] = useDrag({
-    type: 'vis-widget',
-    end: handleWidgetMove,
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    })
-  })
+  const [{ isDragging, ...collected }, drag] = useDrag(
+    {
+      type: 'vis-widget',
+      end: handleWidgetMove,
+      collect: monitor => ({
+        isDragging: monitor.isDragging()
+      })
+    },
+    [config.activeDashboard, config.rows]
+  )
 
   const deleteWidget = () => {
     if (!data) return
@@ -266,6 +269,19 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     }
   }, [data?.openModal])
 
+  let isConfigurationReady = false;
+  if(type === 'markup-include' || type === 'filter-dropdowns'){
+    isConfigurationReady = true;
+  } else if(data && data.formattedData) {
+    isConfigurationReady = true;
+  } else if(data && data.dataKey && data.dataDescription && config.datasets[data.dataKey]){
+    let formattedDataAttempt = transform.autoStandardize(config.datasets[data.dataKey].data);
+    formattedDataAttempt = transform.developerStandardize(formattedDataAttempt, data.dataDescription);
+    if(formattedDataAttempt){
+      isConfigurationReady = true;
+    }
+  }
+
   return (
     <>
       <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
@@ -273,7 +289,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
         <div className='widget__content'>
           {data?.rowIdx !== undefined && (
             <div className='widget-menu'>
-              {((data.dataKey && data.dataDescription && (data.formattedData || (config.datasets[data.dataKey] && transform.autoStandardize(config.datasets[data.dataKey].data)))) || type === 'markup-include') && type !== 'filter-dropdowns' && (
+              {isConfigurationReady && (
                 <button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
                   {iconHash['tools']}
                 </button>

package/src/helpers/filterData.ts

@@ -1,73 +1,73 @@
-import { SharedFilter } from '../types/SharedFilter'
-import { generateValuesForFilter } from './generateValuesForFilter'
-
-const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) => {
-  if (!sharedFilter.parents?.length) {
-    return 1
-  } else {
-    let parent = filters.find(filter => sharedFilter.parents!.includes(filter.key))
-    if (!parent) return 1
-    return 1 + findFilterTier(filters, parent)
-  }
-}
-
-export const filterData = (filters: SharedFilter[], _data: Object[], filterBehavior) => {
-  if (_data) {
-    let maxTier = 1
-    filters.forEach(sharedFilter => {
-      sharedFilter.tier = findFilterTier(filters, sharedFilter)
-    })
-
-    filters.forEach(sharedFilter => {
-      if (sharedFilter.tier && sharedFilter.tier > maxTier) {
-        maxTier = sharedFilter.tier
-      }
-    })
-
-    let filteredData = _data
-    // TODO triple loop??
-    for (let i = 0; i < maxTier; i++) {
-      let filteredDataSubTier: any[] = []
-
-      filteredData.forEach(row => {
-        let add = true
-
-        filters.forEach(filter => {
-          // eslint-disable-next-line eqeqeq
-          if (filter.type !== 'urlfilter' && ((!filter.tier && i === 0) || filter.tier === i + 1) && filter.active && row[filter.columnName!] != filter.active) {
-            add = false
-          }
-        })
-
-        if (add) filteredDataSubTier.push(row)
-      })
-
-      filters.forEach(sharedFilter => {
-        if (sharedFilter.tier && sharedFilter.tier === i + 2) {
-          sharedFilter.values = generateValuesForFilter(sharedFilter.columnName, { data: filteredDataSubTier }, filterBehavior)
-          if (sharedFilter.values.length > 0 && (!sharedFilter.active || sharedFilter.values.indexOf(sharedFilter.active) === -1)) {
-            sharedFilter.active = sharedFilter.values[0]
-          }
-        }
-      })
-
-      filteredData = filteredDataSubTier
-    }
-
-    let filteredDataSubTier: any[] = []
-    filteredData.forEach(row => {
-      let add = true
-
-      filters.forEach(filter => {
-        // eslint-disable-next-line eqeqeq
-        if (filter.type !== 'urlfilter' && filter.tier && filter.tier === maxTier - 1 && filter.active && row[filter.columnName!] != filter.active) {
-          add = false
-        }
-      })
-
-      if (add) filteredDataSubTier.push(row)
-    })
-
-    return filteredDataSubTier
-  }
-}
+import { SharedFilter } from '../types/SharedFilter'
+import { generateValuesForFilter } from './generateValuesForFilter'
+
+const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) => {
+  if (!sharedFilter.parents?.length) {
+    return 1
+  } else {
+    let parent = filters.find(filter => sharedFilter.parents!.includes(filter.key))
+    if (!parent) return 1
+    return 1 + findFilterTier(filters, parent)
+  }
+}
+
+export const filterData = (filters: SharedFilter[], _data: Object[], filterBehavior) => {
+  if (_data) {
+    let maxTier = 1
+    filters.forEach(sharedFilter => {
+      sharedFilter.tier = findFilterTier(filters, sharedFilter)
+    })
+
+    filters.forEach(sharedFilter => {
+      if (sharedFilter.tier && sharedFilter.tier > maxTier) {
+        maxTier = sharedFilter.tier
+      }
+    })
+
+    let filteredData = _data
+    // TODO triple loop??
+    for (let i = 0; i < maxTier; i++) {
+      let filteredDataSubTier: any[] = []
+
+      filteredData.forEach(row => {
+        let add = true
+
+        filters.forEach(filter => {
+          // eslint-disable-next-line eqeqeq
+          if (filter.type !== 'urlfilter' && ((!filter.tier && i === 0) || filter.tier === i + 1) && (filter.queuedActive || filter.active) && row[filter.columnName!] != (filter.queuedActive || filter.active)) {
+            add = false
+          }
+        })
+
+        if (add) filteredDataSubTier.push(row)
+      })
+
+      filters.forEach(sharedFilter => {
+        if (sharedFilter.tier && sharedFilter.tier === i + 2) {
+          sharedFilter.values = generateValuesForFilter(sharedFilter.columnName, { data: filteredDataSubTier }, filterBehavior)
+          if (sharedFilter.values.length > 0 && (!sharedFilter.active || sharedFilter.values.indexOf(sharedFilter.active) === -1)) {
+            sharedFilter.active = sharedFilter.values[0]
+          }
+        }
+      })
+
+      filteredData = filteredDataSubTier
+    }
+
+    let filteredDataSubTier: any[] = []
+    filteredData.forEach(row => {
+      let add = true
+
+      filters.forEach(filter => {
+        // eslint-disable-next-line eqeqeq
+        if (filter.type !== 'urlfilter' && filter.tier && filter.tier === maxTier - 1 && (filter.queuedActive || filter.active) && row[filter.columnName!] != (filter.queuedActive || filter.active)) {
+          add = false
+        }
+      })
+
+      if (add) filteredDataSubTier.push(row)
+    })
+
+    return filteredDataSubTier
+  }
+}

package/src/helpers/generateValuesForFilter.ts

@@ -1,29 +1,25 @@
-import { FilterBehavior } from '../components/Header'
-
-// Gets filter values from API response
-export const generateValuesForAPIFilter = (columnName, _data): string[] => {
-  type Row = { [key: string]: any }
-  return Object.values(_data)
-    .filter(row => row && !!(row as Row)[columnName])
-    .map(row => (row as Row)[columnName])
-}
-
-// Gets filter values from dataset
-export const generateValuesForFilter = (columnName, _data, filterBehavior) => {
-  if (filterBehavior === FilterBehavior.Apply) {
-    return generateValuesForAPIFilter(columnName, _data)
-  }
-
-  const values: string[] = []
-
-  Object.keys(_data).forEach(key => {
-    _data[key].forEach(row => {
-      const value = row[columnName]
-      if (value && false === values.includes(value)) {
-        values.push(value)
-      }
-    })
-  })
-
-  return values
-}
+import { FilterBehavior } from '../components/Header/Header'
+
+// Gets filter values from API response
+export const generateValuesForAPIFilter = (columnName, _data): string[] => {
+  type Row = { [key: string]: any }
+  return Object.values(_data)
+    .filter(row => row && !!(row as Row)[columnName])
+    .map(row => (row as Row)[columnName])
+}
+
+// Gets filter values from dataset
+export const generateValuesForFilter = (columnName, _data, filterBehavior) => {
+  const values: string[] = []
+
+  Object.keys(_data).forEach(key => {
+    _data[key]?.forEach(row => {
+      const value = row[columnName]
+      if (value && false === values.includes(value)) {
+        values.push(value)
+      }
+    })
+  })
+
+  return values
+}

package/src/helpers/getUpdateConfig.ts

@@ -1,12 +1,16 @@
 import { DashboardState } from '../store/dashboard.reducer'
-import { Config } from '../types/Config'
+import { DashboardConfig as Config, DashboardConfig } from '../types/DashboardConfig'
 import { filterData } from './filterData'
 import { generateValuesForFilter } from './generateValuesForFilter'
 import { getFormattedData } from './getFormattedData'
 import { getVizKeys } from './getVizKeys'
 
+type UpdateState = Omit<DashboardState, 'config'> & {
+  config?: DashboardConfig
+}
+
 export const getUpdateConfig =
-  (state: DashboardState) =>
+  (state: UpdateState) =>
   (newConfig, dataOverride?: Object): [Config, Object] => {
     let newFilteredData = {}
     let visualizationKeys = getVizKeys(newConfig)

package/src/helpers/processData.ts

@@ -0,0 +1,13 @@
+import { FilterBehavior } from '../components/Header/Header'
+import { DataSet } from '../types/DataSet'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { getFormattedData } from './getFormattedData'
+
+export const processData = async (dataSet: DataSet, filterBehavior) => {
+  if (dataSet.dataUrl && filterBehavior !== FilterBehavior.Apply) {
+    const dataset = await fetchRemoteData(`${dataSet.dataUrl}`)
+    return getFormattedData(dataset, dataSet.dataDescription)
+  }
+
+  return dataSet.formattedData || dataSet.data
+}

package/src/helpers/processDataLegacy.ts

@@ -0,0 +1,14 @@
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { getFormattedData } from './getFormattedData'
+
+export const processDataLegacy = async (response: any) => {
+  let dataset = response.formattedData || response.data
+
+  if (response.dataUrl) {
+    dataset = await fetchRemoteData(`${response.dataUrl}`)
+
+    dataset = getFormattedData(dataset, response.dataDescription)
+  }
+
+  return dataset
+}

package/src/{index.jsx → index.tsx}

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import CdcDashboard from './CdcDashboard'
+import MultiDashboardWrapper from './CdcDashboard'
 
 let isEditor = window.location.href.includes('editor=true')
 let isDebug = window.location.href.includes('debug=true')
@@ -10,6 +10,6 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcDashboard configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
+    <MultiDashboardWrapper configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
   </React.StrictMode>
 )

package/src/scss/editor-panel.scss

@@ -3,13 +3,17 @@
 .editor-panel + .cdc-dashboard-inner-container,
 .editor-heading + .cdc-open-viz-module {
   position: relative;
-  top: 3em;
-  .editor-panel {
-    top: 3em;
-  }
-  .editor-toggle {
-    top: 3.5em;
-  }
+  min-height: 80vh;
+}
+
+.header-container {
+  display: flex;
+  position: sticky;
+  top: 0;
+  flex-direction: column;
+  width: calc(350px + 1em);
+  max-height: 95vh;
+  z-index: 3;
 }
 
 .editor-panel {
@@ -83,12 +87,12 @@
   background: #fff;
   width: $editorWidth;
   overflow-y: overlay;
-  position: fixed;
+  position: absolute;
   z-index: 8;
   display: flex;
   flex-direction: column;
   left: 0;
-  top: 48px;
+  top: 0;
   bottom: 0;
   .accordion__heading {
     background: $lightestGray;
@@ -587,14 +591,13 @@
   color: #000;
   font-size: 1em;
   border: 0;
-  position: fixed;
+  position: absolute;
   z-index: 99;
   transition: 0.1s background;
   cursor: pointer;
   width: 25px;
   height: 25px;
   left: 307px;
-  top: calc(3em + 10px);
   box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
   &:before {
     top: 43%;

package/src/scss/grid.scss

@@ -3,18 +3,17 @@ $red: #f74242;
 
 .layout-container {
   display: flex;
+  margin-top: -80vh;
+  margin-left: calc($editorWidth + 1em);
 }
 
 .visualizations-panel {
   background-color: #fff;
   padding: 1em;
-  width: 350px;
+  width: $editorWidth;
   border-right: #c7c7c7 1px solid;
-  position: fixed;
-  top: 6em;
-  bottom: 0;
   z-index: 1;
-  overflow-y: auto;
+  overflow-y: scroll;
 }
 
 .hidden.editor-panel + .builder-grid {
@@ -29,7 +28,6 @@ $red: #f74242;
 .builder-grid {
   flex-grow: 1;
   padding: 5em 3em 3em;
-  margin-left: calc(350px + 1em);
 }
 
 .column-container {

package/src/scss/main.scss

@@ -15,11 +15,8 @@
     border-bottom: #c7c7c7 1px solid;
     padding: 0 1em;
     display: flex;
-    height: 6em;
-    position: fixed;
-    width: 100%;
-    z-index: 19;
-    top: 0;
+    width: 100vw;
+    z-index: 5;
     &.sub-dashboard-viz {
       height: 3em;
     }
@@ -285,9 +282,6 @@
     .editor-panel {
       top: 40px;
     }
-    .editor-toggle {
-      top: 3em;
-    }
   }
 }
 

package/src/store/dashboard.actions.ts

@@ -1,6 +1,5 @@
-import type { Config } from '../types/Config'
-
-type Action<T, P> = { type: T; payload: P }
+import type { DashboardConfig as Config } from '../types/DashboardConfig'
+import { type Action } from '@cdc/core/types/Action'
 
 type SET_CONFIG = Action<'SET_CONFIG', Config>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
@@ -9,6 +8,13 @@ type SET_LOADING = Action<'SET_LOADING', boolean>
 type SET_PREVIEW = Action<'SET_PREVIEW', boolean>
 type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', Object>
 type SET_TAB_SELECTED = Action<'SET_TAB_SELECTED', number>
+type RENAME_DASHBOARD_TAB = Action<'RENAME_DASHBOARD_TAB', { current: string; new: string }>
+type INITIALIZE_MULTIDASHBOARDS = Action<'INITIALIZE_MULTIDASHBOARDS', undefined>
+type REMOVE_MULTIDASHBOARD_AT_INDEX = Action<'REMOVE_MULTIDASHBOARD_AT_INDEX', number>
+type REORDER_MULTIDASHBOARDS = Action<'REORDER_MULTIDASHBOARDS', { currentIndex: number; newIndex: number }>
+type ADD_NEW_DASHBOARD = Action<'ADD_NEW_DASHBOARD', undefined>
+type SAVE_CURRENT_CHANGES = Action<'SAVE_CURRENT_CHANGES', undefined>
+type SWITCH_CONFIG = Action<'SWITCH_CONFIG', number>
 
-type DashboardActions = SET_CONFIG | UPDATE_CONFIG | SET_DATA | SET_LOADING | SET_PREVIEW | SET_FILTERED_DATA | SET_TAB_SELECTED
+type DashboardActions = ADD_NEW_DASHBOARD | SET_CONFIG | UPDATE_CONFIG | REMOVE_MULTIDASHBOARD_AT_INDEX | RENAME_DASHBOARD_TAB | REORDER_MULTIDASHBOARDS | SAVE_CURRENT_CHANGES | SET_DATA | SET_LOADING | SET_PREVIEW | SET_FILTERED_DATA | SET_TAB_SELECTED | SWITCH_CONFIG | INITIALIZE_MULTIDASHBOARDS
 export default DashboardActions