@cdc/dashboard 4.23.11 → 4.24.2

package/src/store/dashboard.reducer.ts

@@ -1,17 +1,40 @@
+import _ from 'lodash'
 import { getUpdateConfig } from '../helpers/getUpdateConfig'
-import { Config } from '../types/Config'
+import { MultiDashboardConfig } from '../types/MultiDashboard'
 import DashboardActions from './dashboard.actions'
+import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
+
+const createBlankDashboard = () => ({
+  dashboard: {
+    theme: 'theme-blue'
+  },
+  rows: [[{ width: 12 }, {}, {}]],
+  visualizations: {},
+  table: {
+    label: 'Data Table',
+    show: true,
+    showDownloadUrl: false,
+    showVertical: true
+  }
+})
 
 export type DashboardState = {
-  config?: Config
+  config: MultiDashboardConfig
   data: Object
   filteredData: Object
   loading: boolean
   preview: boolean
   tabSelected: number
 }
+
 const reducer = (state: DashboardState, action: DashboardActions): DashboardState => {
   switch (action.type) {
+    case 'ADD_NEW_DASHBOARD': {
+      const currentMultiDashboards = state.config.multiDashboards
+      const label = 'New Dashboard ' + (currentMultiDashboards.length + 1)
+      const newMultiDashboards = [...currentMultiDashboards, { ...createBlankDashboard(), label }]
+      return applyMultiDashboards(state, newMultiDashboards)
+    }
     case 'UPDATE_CONFIG': {
       const [config, filteredData] = getUpdateConfig(state)(...action.payload)
       return { ...state, config, filteredData }
@@ -34,9 +57,57 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'SET_TAB_SELECTED': {
       return { ...state, tabSelected: action.payload }
     }
+    case 'REMOVE_MULTIDASHBOARD_AT_INDEX': {
+      const newMultiDashboards = [...state.config.multiDashboards]
+      _.remove(newMultiDashboards, (_, index) => {
+        return index === action.payload
+      })
+      if (newMultiDashboards.length === 0) return { ...state, config: _.omit(state.config, 'multiDashboards') }
+      return applyMultiDashboards(state, newMultiDashboards)
+    }
+    case 'RENAME_DASHBOARD_TAB': {
+      const newMultiDashboards = state.config.multiDashboards.map(dashboard => {
+        if (dashboard.label === action.payload.current) {
+          dashboard.label = action.payload.new
+        }
+        return dashboard
+      })
+      const newConfig = { ...state.config, label: action.payload.new } // make sure active label is updated
+      return applyMultiDashboards({ ...state, newConfig }, newMultiDashboards)
+    }
+    case 'REORDER_MULTIDASHBOARDS': {
+      const { newIndex, currentIndex } = action.payload
+      const newMultiDashboards = [...state.config.multiDashboards]
+      newMultiDashboards.splice(newIndex, 0, newMultiDashboards.splice(currentIndex, 1)[0])
+      // set activeDashboard to newIndex
+      const config = { ...state.config, activeDashboard: newIndex }
+      return applyMultiDashboards({ ...state, config }, newMultiDashboards)
+    }
+    case 'SAVE_CURRENT_CHANGES': {
+      const saveSlot = state.config.activeDashboard
+      const newMultiDashboards = [...state.config.multiDashboards]
+      const label = newMultiDashboards[saveSlot].label
+      const toSave = _.pick(state.config, ['dashboard', 'visualizations', 'rows'])
+      newMultiDashboards[saveSlot] = { ...toSave, label }
+      return applyMultiDashboards(state, newMultiDashboards)
+    }
+    case 'INITIALIZE_MULTIDASHBOARDS': {
+      const label = 'New Dashboard 1'
+      const toSave = _.pick(state.config, ['dashboard', 'visualizations', 'rows'])
+      const newMultiDashboards = [{ ...toSave, label }]
+      const config = { ...state.config, activeDashboard: 0 }
+      return applyMultiDashboards({ ...state, config }, newMultiDashboards)
+    }
+    case 'SWITCH_CONFIG': {
+      const slot = action.payload
+      const newConfigFields = state.config.multiDashboards[slot]
+      return { ...state, config: { ...state.config, ...newConfigFields, activeDashboard: slot } }
+    }
     default:
       return state
   }
 }
 
-export default reducer
+const applyMultiDashboards = (state, newMultiDashboards) => ({ ...state, config: { ...state.config, multiDashboards: newMultiDashboards } })
+
+export default devToolsWrapper<DashboardState, DashboardActions>(reducer)

package/src/types/ConfigRow.ts

@@ -0,0 +1,6 @@
+export type ConfigRow = {
+  equalHeight?: boolean
+  width: number | null
+  widget?: string
+  uuid?: string | number
+}[] & { uuid?: string | number }

package/src/types/Dashboard.ts

@@ -0,0 +1,11 @@
+import { DataSet } from './DataSet'
+import { SharedFilter } from './SharedFilter'
+
+export type Dashboard = {
+  sharedFilters: SharedFilter[]
+  datasets: Record<string, DataSet>
+  description: any
+  title: any
+  theme: any
+  filters: any
+}

package/src/types/DashboardConfig.ts

@@ -0,0 +1,23 @@
+import { Series } from '@cdc/core/types/Series'
+import { Runtime } from '@cdc/core/types/Runtime'
+import { DataSet } from './DataSet'
+import { ConfigRow } from './ConfigRow'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { Table } from '@cdc/core/types/Table'
+import { FilterBehavior } from '@cdc/core/types/FilterBehavior'
+import { Dashboard } from './Dashboard'
+
+export type DashboardConfig = DataSet & {
+  dashboard: Dashboard
+  confidenceKeys: Record<string, any>
+  visualizations: Record<string, Visualization>
+  series: Series
+  datasets: Record<string, DataSet>
+  dataFileName: string
+  table: Table
+  rows: ConfigRow[]
+  filterBehavior: FilterBehavior
+  runtime: Runtime
+  downloadImageButton: boolean
+  downloadPdfButton: boolean
+}

package/src/types/InitialState.ts

@@ -0,0 +1,10 @@
+import { DashboardConfig } from './DashboardConfig'
+
+export type InitialState = {
+  config: DashboardConfig
+  data: Object
+  loading: boolean
+  filteredData: Object
+  preview: boolean
+  tabSelected: number
+}

package/src/types/MultiDashboard.ts

@@ -0,0 +1,11 @@
+import { Visualization } from '@cdc/core/types/Visualization'
+import { Dashboard } from './Dashboard'
+import { DashboardConfig } from './DashboardConfig'
+import { ConfigRow } from './ConfigRow'
+
+export type MultiDashboard = { dashboard: Dashboard; rows: ConfigRow[]; visualizations: Record<string, Visualization>; label: string }
+
+export type MultiDashboardConfig = DashboardConfig & {
+  multiDashboards?: MultiDashboard[]
+  activeDashboard?: number // index of the active MultiDashboard
+}

package/src/types/SharedFilter.ts

@@ -1,20 +1,31 @@
-import { APIFilter } from './APIFilter'
-export type SharedFilter = {
-  type?: 'urlfilter' | 'datafilter' | ''
-  fileName: string
-  filterBy?: 'Query String' | 'File Name'
-  queryParameter?: string
-  active?: string
-  usedBy?: string[]
-  parents?: string[]
-  setBy?: string
-  columnName?: string
-  resetLabel?: string
-  showDropdown?: boolean
-  labels?: Record<string, any>
-  key: string
-  values?: string[]
-  apiFilter?: APIFilter
-  datasetKey?: string
-  tier?: number
-}
+import { APIFilter } from './APIFilter'
+export type SharedFilter = {
+  type?: 'urlfilter' | 'datafilter' | ''
+  fileName: string
+  filterBy?: 'Query String' | 'File Name'
+  queryParameter?: string
+  active?: string
+  queuedActive?: string
+  usedBy?: string[]
+  parents?: string[]
+  setBy?: string
+  columnName?: string
+  resetLabel?: string
+  showDropdown?: boolean
+  labels?: Record<string, any>
+  key: string
+  values?: string[]
+  apiFilter?: APIFilter
+  datasetKey?: string
+  tier?: number
+  /**
+   * How to format the end file name when filter.filterBy is set to "File Name"
+   *
+   * @example * United States
+   *
+   *  Keep Spaces: United%20States.json
+   *  Remove Spaces: UnitedStates.json
+   *  Replace With Underscore: United_States.json
+   **/
+  whitespaceReplacement?: 'Keep Spaces' | 'Remove Spaces' | 'Replace With Underscore'
+}

package/src/types/Config.ts

@@ -1,27 +0,0 @@
-import { Series } from '@cdc/core/types/Series'
-import { Runtime } from '@cdc/core/types/Runtime'
-import { DataSet } from './DataSet'
-import { SharedFilter } from './SharedFilter'
-import { Visualization } from '@cdc/core/types/Visualization'
-
-export type Config = DataSet & {
-  dashboard: {
-    sharedFilters: SharedFilter[]
-    datasets: Record<string, DataSet>
-    description: any
-    title: any
-    theme: any
-    filters: any
-  }
-  confidenceKeys: Record<string, any>
-  visualizations: {
-    [vizKey: string]: Visualization
-  }
-  series: Series
-  datasets: Record<string, DataSet>
-  dataFileName: string
-  table: any
-  rows: any[]
-  filterBehavior: string
-  runtime: Runtime
-}