@cdc/dashboard 4.24.3 → 4.24.5

package/src/components/Widget.tsx

@@ -1,17 +1,16 @@
-import React, { useContext, useRef, useEffect } from 'react'
+import { useContext } from 'react'
 import { useDrag } from 'react-dnd'
 
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
-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 '@cdc/core/types/Visualization'
 import { iconHash } from '../helpers/iconHash'
+import _ from 'lodash'
+import { DataDesignerModal } from './DataDesignerModal'
 
 const labelHash = {
   'data-bite': 'Data Bite',
@@ -45,8 +44,6 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
   const visualizations = config.visualizations
   const dispatch = useContext(DashboardDispatchContext)
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
-  const dataRef = useRef<WidgetData>()
-  dataRef.current = data
 
   const transform = new DataTransform()
 
@@ -58,14 +55,14 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     const { rowIdx, colIdx } = result
 
     if (undefined !== data?.rowIdx) {
-      rows[data.rowIdx][data.colIdx].widget = null // Wipe from old position
+      rows[data.rowIdx].columns[data.colIdx].widget = null // Wipe from old position
 
-      rows[rowIdx][colIdx].widget = data.uid // Add to new row and col
+      rows[rowIdx].columns[colIdx].widget = data.uid // Add to new row and col
     } else if (!!addVisualization) {
       // Item does not exist, instantiate a new one
       const newViz = addVisualization()
       visualizations[newViz.uid] = newViz // Add to widgets collection
-      rows[rowIdx][colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
+      rows[rowIdx].columns[colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
     }
 
     updateConfig({ ...config, rows, visualizations })
@@ -84,7 +81,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
 
   const deleteWidget = () => {
     if (!data) return
-    rows[data.rowIdx][data.colIdx].widget = null
+    rows[data.rowIdx].columns[data.colIdx].widget = null
 
     delete visualizations[data.uid]
 
@@ -106,78 +103,6 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     updateConfig({ ...config, visualizations })
   }
 
-  const changeDataset = (uid, value) => {
-    visualizations[uid].dataDescription = {}
-    visualizations[uid].formattedData = undefined
-
-    visualizations[uid].dataKey = value
-
-    updateConfig({ ...config, visualizations })
-  }
-
-  const updateDescriptionProp = async (visualizationKey, datasetKey, key, value) => {
-    let dataDescription = { ...(dataRef.current?.dataDescription as Object), [key]: value }
-
-    let newData
-    if (!config.datasets[datasetKey].data && config.datasets[datasetKey].dataUrl) {
-      newData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
-      newData = transform.autoStandardize(newData)
-    } else {
-      newData = config.datasets[datasetKey].data
-    }
-
-    let formattedData = transform.developerStandardize(newData, dataDescription)
-
-    let newVisualizations = { ...config.visualizations }
-    newVisualizations[visualizationKey] = { ...newVisualizations[visualizationKey], data: newData, dataDescription, formattedData }
-
-    updateConfig({ ...config, visualizations: newVisualizations })
-
-    overlay?.actions.openOverlay(dataDesignerModal(newVisualizations[visualizationKey]))
-  }
-
-  const dataDesignerModal = (configureData, dataKeyOverride?) => {
-    const dataKey = !dataKeyOverride && dataKeyOverride !== '' ? data?.dataKey || dataRef.current?.dataKey : dataKeyOverride
-
-    overlay?.actions.toggleOverlay()
-
-    return (
-      <Modal>
-        <Modal.Content>
-          <div className='dataset-selector-container'>
-            Select a dataset:&nbsp;
-            <select
-              className='dataset-selector'
-              defaultValue={dataKey}
-              onChange={e => {
-                changeDataset(data?.uid, e.target.value)
-                overlay?.actions.openOverlay(dataDesignerModal(data, e.target.value || ''))
-              }}
-            >
-              <option value=''>Select a dataset</option>
-              {config.datasets && Object.keys(config.datasets).map(datasetKey => <option key={datasetKey}>{datasetKey}</option>)}
-            </select>
-          </div>
-          {dataKey && (
-            <DataDesigner
-              {...{
-                configureData,
-                visualizationKey: data?.uid,
-                dataKey: dataKey,
-                updateDescriptionProp
-              }}
-            />
-          )}
-          {configureData.formattedData && (
-            <button style={{ margin: '1em' }} className='cove-button' onClick={() => overlay?.actions.toggleOverlay()}>
-              Continue
-            </button>
-          )}
-        </Modal.Content>
-      </Modal>
-    )
-  }
-
   const FilterHideModal = configureData => {
     const currentVizKey = Object.keys(visualizations).find(vizKey => vizKey === configureData.uid) || ''
     const currentViz = config.visualizations && config.visualizations[currentVizKey]
@@ -208,8 +133,6 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
       }
     }
 
-    overlay?.actions.toggleOverlay()
-
     const showAutoLoadCheckbox = !vizWithAutoLoad || vizWithAutoLoad === currentVizKey
     return (
       <Modal>
@@ -243,29 +166,24 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     )
   }
 
-  useEffect(() => {
-    if (data?.openModal) {
-      overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(dataRef.current) : dataDesignerModal(dataRef.current))
-
-      visualizations[data.uid].openModal = false
-
-      updateConfig({ ...config, visualizations })
-    }
-  }, [data?.openModal])
-
   let isConfigurationReady = false
-  if (type === 'markup-include' || type === 'filter-dropdowns') {
-    isConfigurationReady = true
-  } else if (data && data.formattedData) {
+  const dataConfiguredForRow = !!rows[data?.rowIdx]?.dataKey
+  if (dataConfiguredForRow || ['filter-dropdowns', 'markup-include'].includes(type)) {
     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) {
+  } else {
+    if (data?.formattedData) {
       isConfigurationReady = true
+    } else if (data?.dataKey && data?.dataDescription && config.datasets[data.dataKey]) {
+      const formattedDataAttempt = transform.autoStandardize(config.datasets[data.dataKey].data)
+      const canFormatData = !!transform.developerStandardize(formattedDataAttempt, data.dataDescription)
+      if (canFormatData) {
+        isConfigurationReady = true
+      }
     }
   }
 
+  const needsDataConfiguration = !dataConfiguredForRow
+
   return (
     <>
       <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
@@ -278,12 +196,12 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
                   {iconHash['tools']}
                 </button>
               )}
-              {type !== 'markup-include' && (
+              {needsDataConfiguration && (
                 <button
                   title='Configure Data'
                   className='btn btn-configure'
                   onClick={() => {
-                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(data) : dataDesignerModal(data))
+                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(data) : <DataDesignerModal rowIndex={data.rowIdx} vizKey={data.uid} />)
                   }}
                 >
                   {iconHash['gear']}

package/src/helpers/filterData.ts

@@ -66,7 +66,7 @@ const pivotData = (data, pivotFilter: SharedFilter) => {
       const row = newData[index] || {}
       if (!inactive.includes(key)) row[key] = val[valueColumn]
       const toAdd = _.omit(val, [pivotColumn, valueColumn, ...inactive])
-      newData[index] = { ...row, ...toAdd }
+      newData[index] = { ...toAdd, ...row }
     })
   }
   return newData

package/src/helpers/getFilteredData.ts

@@ -0,0 +1,39 @@
+import { DashboardState } from '../store/dashboard.reducer'
+import { Dashboard } from '../types/Dashboard'
+import { SharedFilter } from '../types/SharedFilter'
+import { filterData } from './filterData'
+import { getFormattedData } from './getFormattedData'
+import { getVizKeys } from './getVizKeys'
+
+export const getApplicableFilters = (dashboard: Dashboard, key: string | number): false | SharedFilter[] => {
+  const c = dashboard.sharedFilters?.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(`${key}`) !== -1)
+  return c?.length > 0 ? c : false
+}
+
+export const getFilteredData = (state: DashboardState, initialFilteredData = {}, dataOverride?: Object) => {
+  const newFilteredData = initialFilteredData
+  const { config } = state
+  getVizKeys(config).forEach(key => {
+    const applicableFilters = getApplicableFilters(config.dashboard, key)
+    if (applicableFilters) {
+      const { dataKey, data, dataDescription } = config.visualizations[key]
+      const _data = state.data[dataKey] || data
+      const formattedData = dataOverride?.[dataKey] || (dataDescription ? getFormattedData(_data, dataDescription) : _data)
+
+      newFilteredData[key] = filterData(applicableFilters, formattedData)
+    }
+  })
+  config.rows.forEach((row, index) => {
+    if (row.dataKey) {
+      const applicableFilters = getApplicableFilters(config.dashboard, index)
+      if (applicableFilters) {
+        const { dataKey, data, dataDescription } = row
+        const _data = state.data[dataKey] || data
+        const formattedData = dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
+
+        newFilteredData[index] = filterData(applicableFilters, formattedData)
+      }
+    }
+  })
+  return newFilteredData
+}

package/src/helpers/getUpdateConfig.ts

@@ -4,6 +4,7 @@ import { filterData } from './filterData'
 import { generateValuesForFilter } from './generateValuesForFilter'
 import { getFormattedData } from './getFormattedData'
 import { getVizKeys } from './getVizKeys'
+import { getVizRowColumnLocator } from './getVizRowColumnLocator'
 
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 
@@ -17,6 +18,8 @@ export const getUpdateConfig =
     let newFilteredData = {}
     let visualizationKeys = getVizKeys(newConfig)
 
+    const vizRowColumnLocator = getVizRowColumnLocator(newConfig.rows)
+
     if (newConfig.dashboard.sharedFilters) {
       newConfig.dashboard.sharedFilters.forEach((filter, i) => {
         const filterIsSetByVizData = !!visualizationKeys.find(key => key === filter.setBy)
@@ -52,6 +55,8 @@ export const getUpdateConfig =
       })
 
       visualizationKeys.forEach(visualizationKey => {
+        const row = vizRowColumnLocator[visualizationKey]
+        if (newConfig.rows[row]?.datakey) return // data configured on the row level
         const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
 
         if (applicableFilters.length > 0) {
@@ -62,6 +67,16 @@ export const getUpdateConfig =
           newFilteredData[visualizationKey] = filterData(applicableFilters, _data)
         }
       })
+
+      newConfig.rows.forEach((row, rowIndex) => {
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(rowIndex) !== -1)
+
+        if (applicableFilters.length > 0) {
+          const formattedData = getFormattedData(row.data, row.dataDescription)
+          const _data = formattedData || (dataOverride || state.data)[rowIndex]
+          newFilteredData[rowIndex] = filterData(applicableFilters, _data)
+        }
+      })
     }
     //Enforce default values that need to be calculated at runtime
     newConfig.runtime = {}

package/src/helpers/getVizConfig.ts

@@ -0,0 +1,31 @@
+import _ from 'lodash'
+import { MultiDashboardConfig } from '../types/MultiDashboard'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+
+const transform = new DataTransform()
+
+export const getVizConfig = (visualizationKey: string, rowNumber: number, config: MultiDashboardConfig, data: Object, filteredData?: Object) => {
+  const visualizationConfig = _.cloneDeep(config.visualizations[visualizationKey])
+  const rowData = config.rows[rowNumber]
+  if (rowData?.dataKey) {
+    // data configured on the row
+    Object.assign(visualizationConfig, _.pick(rowData, ['dataKey', 'dataDescription', 'formattedData', 'data']))
+  }
+
+  if (visualizationConfig.formattedData) visualizationConfig.originalFormattedData = visualizationConfig.formattedData
+  const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
+
+  if (filteredVizData) {
+    visualizationConfig.data = filteredVizData
+    if (visualizationConfig.formattedData) {
+      visualizationConfig.formattedData = visualizationConfig.data
+    }
+  } else {
+    const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
+    visualizationConfig.data = data[dataKey]
+    if (visualizationConfig.formattedData) {
+      visualizationConfig.formattedData = transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) || visualizationConfig.data
+    }
+  }
+  return visualizationConfig
+}

package/src/helpers/getVizRowColumnLocator.ts

@@ -0,0 +1,9 @@
+import { ConfigRow } from '../types/ConfigRow'
+
+export const getVizRowColumnLocator = (rows: ConfigRow[]) =>
+  rows.reduce((acc, curr, index) => {
+    curr.columns?.forEach((column, columnIndex) => {
+      if (column.widget !== undefined) acc[column.widget] = { row: index, column: columnIndex }
+    })
+    return acc
+  }, {})

package/src/scss/grid.scss

@@ -35,8 +35,7 @@ $red: #f74242;
   flex-flow: row;
   width: 100%;
   position: relative;
-  top: 0;
-  padding: 1em;
+  padding: 2em 1em 1em;
   border: 1px solid #c2c2c2;
   transition: border 300ms cubic-bezier(0.16, 1, 0.3, 1);
   background-color: #f2f2f2;
@@ -330,6 +329,14 @@ $red: #f74242;
 .builder-row {
   position: relative;
 
+  .btn-configure-row {
+    background: none;
+    display: block;
+    position: absolute;
+    right: 1em;
+    top: 0;
+  }
+
   .widget__content {
     padding: 0 2em;
 

package/src/scss/main.scss

@@ -10,6 +10,11 @@
     margin-top: 20%;
   }
 
+  > .cove-editor__content {
+    width: 100% !important;
+    left: 0px;
+  }
+
   .editor-heading {
     background-color: #ddd;
     border-bottom: #c7c7c7 1px solid;

package/src/store/dashboard.actions.ts

@@ -1,6 +1,8 @@
 import type { DashboardConfig as Config } from '../types/DashboardConfig'
 import { type Action } from '@cdc/core/types/Action'
 import { Tab } from '../types/Tab'
+import { ConfigureData } from '@cdc/core/types/ConfigureData'
+import { ConfigRow } from '../types/ConfigRow'
 
 type SET_CONFIG = Action<'SET_CONFIG', Config>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
@@ -17,6 +19,8 @@ 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 TOGGLE_ROW = Action<'TOGGLE_ROW', { rowIndex: number; colIndex: number }>
+type UPDATE_VISUALIZATION = Action<'UPDATE_VISUALIZATION', { vizKey: string; configureData: Partial<ConfigureData> }>
+type UPDATE_ROW = Action<'UPDATE_ROW', { rowIndex: number; rowData: Partial<ConfigRow> }>
 
 type DashboardActions =
   | ADD_NEW_DASHBOARD
@@ -34,4 +38,6 @@ type DashboardActions =
   | SWITCH_CONFIG
   | INITIALIZE_MULTIDASHBOARDS
   | TOGGLE_ROW
+  | UPDATE_VISUALIZATION
+  | UPDATE_ROW
 export default DashboardActions

package/src/store/dashboard.reducer.ts

@@ -1,19 +1,26 @@
 import _ from 'lodash'
 import { getUpdateConfig } from '../helpers/getUpdateConfig'
-import { MultiDashboardConfig } from '../types/MultiDashboard'
+import { MultiDashboard, 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 { ConfigRow } from '../types/ConfigRow'
 
-const createBlankDashboard = () => ({
-  dashboard: {
-    theme: 'theme-blue'
-  },
-  rows: [[{ width: 12 }, {}, {}]],
+type BlankMultiConfig = {
+  dashboard: Partial<DashboardConfig>
+  rows: Partial<ConfigRow>[]
+  visualizations: Record<string, Object>
+  table: Object
+}
+
+const createBlankDashboard: () => BlankMultiConfig = () => ({
+  dashboard: {},
+  rows: [{ columns: [{ width: 12 }] }],
   visualizations: {},
   table: {
     label: 'Data Table',
-    show: true,
+    show: false,
     showDownloadUrl: false,
     showVertical: true
   }
@@ -107,7 +114,25 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'TOGGLE_ROW': {
       const { rowIndex, colIndex } = action.payload
       const newRows = state.config.rows.map((row, index) => {
-        return index === rowIndex ? row.map((col, i) => ({ ...col, hide: i !== colIndex })) : row
+        if (index === rowIndex) {
+          const newColumns = row.columns.map((col, i) => ({ ...col, hide: i === colIndex }))
+          return { ...row, columns: newColumns }
+        }
+        return row
+      })
+      return { ...state, config: { ...state.config, rows: newRows } }
+    }
+    case 'UPDATE_VISUALIZATION': {
+      const { vizKey, configureData } = action.payload
+      return { ...state, config: { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: { ...state.config.visualizations[vizKey], ...configureData } } } }
+    }
+    case 'UPDATE_ROW': {
+      const { rowIndex, rowData } = action.payload
+      const newRows = state.config.rows.map((row, index) => {
+        if (index === rowIndex) {
+          return { ...row, ...rowData }
+        }
+        return row
       })
       return { ...state, config: { ...state.config, rows: newRows } }
     }

package/src/types/ConfigRow.ts

@@ -1,8 +1,17 @@
-export type ConfigRow = {
+import { ConfigureData } from '@cdc/core/types/ConfigureData'
+
+type Col = {
   equalHeight?: boolean
   width: number | null
-  toggle?: boolean
   hide?: boolean
   widget?: string
   uuid?: string | number
-}[] & { uuid?: string | number }
+}
+
+export type ConfigRow = {
+  columns: Col[]
+  uuid?: string | number
+  toggle?: boolean
+  equalHeight?: boolean
+  multiVizColumn?: string
+} & ConfigureData

package/src/types/DataSet.ts

@@ -1,8 +1,11 @@
-export type DataSet = {
-  data: Object[]
-  dataDescription: {}
-  dataUrl: string
-  runtimeDataUrl: string
-  dataFileSourceType: string
-  formattedData: Object[]
-}
+import { ConfigureData } from '@cdc/core/types/ConfigureData'
+
+export type DataSet = ConfigureData & {
+  dataFileFormat?: string
+  dataFileName?: string
+  dataFileSize?: number
+  preview?: boolean
+  dataUrl: string
+  runtimeDataUrl: string
+  dataFileSourceType: string
+}

package/src/types/SharedFilter.ts

@@ -7,7 +7,7 @@ export type SharedFilter = {
   setByQueryParameter?: string
   active?: string | string[]
   queuedActive?: string
-  usedBy?: string[]
+  usedBy?: (string | number)[] // if number used by whole row, else used by specific viz
   parents?: string[]
   pivot?: string
   setBy?: string

package/src/components/EditorWrapper/EditorWrapper.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { Accordion } from 'react-accessible-accordion'
-import Header from '../Header'
-import { Visualization } from '@cdc/core/types/Visualization'
-import { ViewPort } from '@cdc/core/types/ViewPort'
-import './editor-wrapper.style.css'
-
-type StandAloneComponentProps = {
-  visualizationKey: string
-  config: Visualization
-  isEditor: boolean
-  setConfig: Function
-  isDashboard: boolean
-  configUrl: string
-  setEditing: Function
-  hostname: string
-  viewport?: ViewPort
-}
-
-type EditorProps = {
-  component: React.JSXElementConstructor<StandAloneComponentProps>
-  type: string
-  visualizationKey: string
-  visualizationConfig: Visualization
-  updateConfig: Function
-  viewport?: ViewPort
-}
-
-const EditorWrapper: React.FC<React.PropsWithChildren<EditorProps>> = ({ children, visualizationKey, visualizationConfig, type, component: Component, updateConfig, viewport }) => {
-  const [displayPanel, setDisplayPanel] = React.useState(true)
-  return (
-    <>
-      <Header visualizationKey={visualizationKey} subEditor={type} />
-      <div className='editor-wrapper'>
-        <button className={`editor-toggle ${displayPanel ? '' : 'collapsed'}`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={() => setDisplayPanel(!displayPanel)} />
-        <section className={`${displayPanel ? '' : 'hidden'} editor-panel cove`}>
-          <div aria-level={2} role='heading' className='heading-2'>
-            Configure {type}
-          </div>
-          <form>
-            <Accordion allowZeroExpanded={true}>{children}</Accordion>
-          </form>
-        </section>
-        <div className='preview-wrapper'>
-          <Component visualizationKey={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} configUrl={undefined} setEditing={undefined} hostname={undefined} viewport={viewport} />
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default EditorWrapper

package/src/components/EditorWrapper/editor-wrapper.style.css

@@ -1,13 +0,0 @@
-.editor-wrapper {
-  --editorPanelWidth: 350px;
-  position: relative;
-  .editor-panel {
-    :is(form) {
-      border-right: var(--lightGray) 1px solid;
-      flex-grow: 1;
-    }
-  }
-  .preview-wrapper {
-    padding-left: var(--editorPanelWidth);
-  }
-}