@cdc/dashboard 4.24.5 → 4.24.9-1

package/src/scss/variables.scss

@@ -1 +1,5 @@
 $editorWidth: 350px;
+
+:root {
+  --editorWidth: #{$editorWidth};
+}

package/src/store/dashboard.actions.ts

@@ -1,15 +1,20 @@
 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'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import Footnotes from '@cdc/core/types/Footnotes'
+import { SharedFilter } from '../types/SharedFilter'
 
-type SET_CONFIG = Action<'SET_CONFIG', Config>
+type ADD_FOOTNOTE = Action<'ADD_FOOTNOTE', { id: string; rowIndex: number; config: Footnotes }>
+type APPLY_CONFIG = Action<'APPLY_CONFIG', [Config, Object?]>
+type SET_CONFIG = Action<'SET_CONFIG', Partial<Config>>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
-type SET_DATA = Action<'SET_DATA', Object>
+type SET_DATA = Action<'SET_DATA', Record<string, any[]>>
 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_SHARED_FILTERS = Action<'SET_SHARED_FILTERS', SharedFilter[]>
 type SET_TAB_SELECTED = Action<'SET_TAB_SELECTED', Tab>
 type RENAME_DASHBOARD_TAB = Action<'RENAME_DASHBOARD_TAB', { current: string; new: string }>
 type INITIALIZE_MULTIDASHBOARDS = Action<'INITIALIZE_MULTIDASHBOARDS', undefined>
@@ -19,10 +24,12 @@ 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_VISUALIZATION = Action<'UPDATE_VISUALIZATION', { vizKey: string; configureData: Partial<AnyVisualization> }>
 type UPDATE_ROW = Action<'UPDATE_ROW', { rowIndex: number; rowData: Partial<ConfigRow> }>
 
 type DashboardActions =
+  | ADD_FOOTNOTE
+  | APPLY_CONFIG
   | ADD_NEW_DASHBOARD
   | SET_CONFIG
   | UPDATE_CONFIG
@@ -34,6 +41,7 @@ type DashboardActions =
   | SET_LOADING
   | SET_PREVIEW
   | SET_FILTERED_DATA
+  | SET_SHARED_FILTERS
   | SET_TAB_SELECTED
   | SWITCH_CONFIG
   | INITIALIZE_MULTIDASHBOARDS

package/src/store/dashboard.reducer.ts

@@ -1,11 +1,13 @@
 import _ from 'lodash'
 import { getUpdateConfig } from '../helpers/getUpdateConfig'
-import { MultiDashboard, MultiDashboardConfig } from '../types/MultiDashboard'
+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 { ConfigRow } from '../types/ConfigRow'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { initialState } from '../DashboardContext'
 
 type BlankMultiConfig = {
   dashboard: Partial<DashboardConfig>
@@ -28,7 +30,7 @@ const createBlankDashboard: () => BlankMultiConfig = () => ({
 
 export type DashboardState = {
   config: MultiDashboardConfig
-  data: Object
+  data: Record<string, any[]>
   filteredData: Object
   loading: boolean
   preview: boolean
@@ -37,6 +39,11 @@ export type DashboardState = {
 
 const reducer = (state: DashboardState, action: DashboardActions): DashboardState => {
   switch (action.type) {
+    case 'ADD_FOOTNOTE': {
+      const { id, rowIndex, config } = action.payload
+      const newRows = state.config.rows.map((row, i) => (i === rowIndex ? { ...row, footnotesId: id } : row))
+      return { ...state, config: { ...state.config, rows: newRows, visualizations: { ...state.config.visualizations, [id]: config } } }
+    }
     case 'ADD_NEW_DASHBOARD': {
       const currentMultiDashboards = state.config.multiDashboards
       const label = 'New Dashboard ' + (currentMultiDashboards.length + 1)
@@ -47,8 +54,21 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       const [config, filteredData] = getUpdateConfig(state)(...action.payload)
       return { ...state, config, filteredData }
     }
+    case 'APPLY_CONFIG': {
+      // using advanced editor. Wipe all existing data and apply new config
+      const [config, filteredData] = getUpdateConfig(state)(...action.payload)
+      // get the default data state
+      const data = [...Object.values(config.visualizations), ...config.rows]
+        .map(viz => viz.dataKey)
+        .reduce((acc, key) => {
+          const data = state.data[key] || state.config.datasets[key]?.data
+          if (data) acc[key] = data
+          return acc
+        }, {})
+      return { ...initialState, config, filteredData, data }
+    }
     case 'SET_CONFIG': {
-      return { ...state, config: action.payload }
+      return { ...state, config: { ...state.config, ...action.payload } }
     }
     case 'SET_DATA': {
       return { ...state, data: action.payload }
@@ -62,6 +82,11 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'SET_PREVIEW': {
       return { ...state, preview: action.payload }
     }
+    case 'SET_SHARED_FILTERS': {
+      const newSharedFilters = action.payload
+      const newDashboardConfig = { ...state.config.dashboard, sharedFilters: newSharedFilters }
+      return { ...state, config: { ...state.config, dashboard: newDashboardConfig } }
+    }
     case 'SET_TAB_SELECTED': {
       return { ...state, tabSelected: action.payload }
     }
@@ -124,7 +149,8 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     }
     case 'UPDATE_VISUALIZATION': {
       const { vizKey, configureData } = action.payload
-      return { ...state, config: { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: { ...state.config.visualizations[vizKey], ...configureData } } } }
+      const updatedViz = { ...state.config.visualizations[vizKey], ...configureData } as AnyVisualization
+      return { ...state, config: { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: updatedViz } } }
     }
     case 'UPDATE_ROW': {
       const { rowIndex, rowData } = action.payload

package/src/types/APIFilter.ts

@@ -1,5 +1 @@
-export type APIFilter = Record<'apiEndpoint'|'valueSelector'|'textSelector', string> & {
-    heirarchyLookup?: string
-    autoLoad?: boolean
-    defaultValue?: string
-}
+export type APIFilter = Record<'apiEndpoint' | 'valueSelector' | 'textSelector', string>

package/src/types/ConfigRow.ts

@@ -10,8 +10,10 @@ type Col = {
 
 export type ConfigRow = {
   columns: Col[]
+  expandCollapseAllButtons: boolean
   uuid?: string | number
   toggle?: boolean
   equalHeight?: boolean
   multiVizColumn?: string
+  footnotesId?: string // id for the footnotes in the vizConfig section
 } & ConfigureData

package/src/types/Dashboard.ts

@@ -7,5 +7,5 @@ export type Dashboard = {
   description: any
   title: any
   theme: any
-  filters: any
+  filters: any // deprecate
 }

package/src/types/DashboardConfig.ts

@@ -2,21 +2,19 @@ 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 { AnyVisualization } 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>
+  visualizations: Record<string, AnyVisualization>
   series: Series
   datasets: Record<string, DataSet>
   dataFileName: string
   table: Table
   rows: ConfigRow[]
-  filterBehavior: FilterBehavior
   runtime: Runtime
   downloadImageButton: boolean
   downloadPdfButton: boolean

package/src/types/DashboardFilters.ts

@@ -0,0 +1,7 @@
+import { CommonVisualizationProperties } from '@cdc/core/types/Visualization'
+
+export type DashboardFilters = {
+  sharedFilterIndexes: number[]
+  autoLoad?: boolean
+  type: 'dashboardFilters'
+} & CommonVisualizationProperties

package/src/types/InitialState.ts

@@ -3,7 +3,7 @@ import { Tab } from './Tab'
 
 export type InitialState = {
   config: DashboardConfig
-  data: Object
+  data: Record<string, any[]>
   loading: boolean
   filteredData: Object
   preview: boolean

package/src/types/MultiDashboard.ts

@@ -1,9 +1,9 @@
-import { Visualization } from '@cdc/core/types/Visualization'
+import { AnyVisualization } 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 MultiDashboard = { dashboard: Dashboard; rows: ConfigRow[]; visualizations: Record<string, AnyVisualization>; label: string }
 
 export type MultiDashboardConfig = DashboardConfig & {
   multiDashboards?: MultiDashboard[]

package/src/types/SharedFilter.ts

@@ -1,23 +1,21 @@
+import { FilterBase } from '@cdc/core/types/VizFilter'
 import { APIFilter } from './APIFilter'
-export type SharedFilter = {
+export type SharedFilter = FilterBase & {
   type?: 'urlfilter' | 'datafilter' | ''
   fileName?: string
   filterBy?: 'Query String' | 'File Name'
   queryParameter?: string
   setByQueryParameter?: string
   active?: string | string[]
-  queuedActive?: string
+  queuedActive?: string | string[]
   usedBy?: (string | number)[] // if number used by whole row, else used by specific viz
   parents?: string[]
-  pivot?: string
   setBy?: string
   selectLimit?: number
-  columnName?: string
   resetLabel?: string
-  showDropdown?: boolean
   labels?: Record<string, any>
+  multiSelect?: boolean
   key: string
-  values?: string[]
   apiFilter?: APIFilter
   datasetKey?: string
   tier?: number

package/src/types/Tab.ts

@@ -1 +1 @@
-export type Tab = 'Dashboard Description' | 'Dashboard Filters' | 'Data Table Settings' | 'Dashboard Preview'
+export type Tab = 'Dashboard Description' | 'Data Table Settings' | 'Dashboard Preview'

package/src/components/Filters.tsx

@@ -1,88 +0,0 @@
-import MultiSelect from '@cdc/core/components/MultiSelect'
-import { getApiFilterKey } from '../helpers/getApiFilterKey'
-import { SharedFilter } from '../types/SharedFilter'
-
-export type DropdownOptions = Record<'value' | 'text', string>[]
-
-export type APIFilterDropdowns = {
-  // null means still loading
-  [filtername: string]: null | DropdownOptions
-}
-
-type FilterProps = {
-  hide?: number[]
-  filters: SharedFilter[]
-  apiFilterDropdowns: APIFilterDropdowns
-  handleOnChange: Function
-}
-
-const Filters: React.FC<FilterProps> = ({ hide, filters, apiFilterDropdowns, handleOnChange }) => {
-  const updateField = (_section, _subsection, fieldName, value) => {
-    handleOnChange(fieldName, value)
-  }
-  return (
-    <>
-      {filters.map((singleFilter, filterIndex) => {
-        if ((singleFilter.type !== 'urlfilter' && !singleFilter.showDropdown) || (hide && hide.indexOf(filterIndex) !== -1)) return <></>
-        const values: JSX.Element[] = []
-        const multiValues = []
-        if (singleFilter.resetLabel) {
-          values.push(
-            <option key={`${singleFilter.resetLabel}-option`} value={singleFilter.resetLabel}>
-              {singleFilter.resetLabel}
-            </option>
-          )
-        }
-        const _key = singleFilter.apiFilter ? getApiFilterKey(singleFilter.apiFilter) : undefined
-        if (_key && apiFilterDropdowns[_key]) {
-          // URL Filter
-          apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
-            values.push(
-              <option key={`${value}-option-${index}`} value={value}>
-                {text}
-              </option>
-            )
-          })
-        } else {
-          // Data Filter
-          singleFilter.values?.forEach((filterOption, index) => {
-            const labeledOpt = singleFilter.labels && singleFilter.labels[filterOption]
-            values.push(
-              <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
-                {labeledOpt || filterOption}
-              </option>
-            )
-            multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
-          })
-        }
-
-        return (
-          <div className='cove-dashboard-filters' key={`${singleFilter.key}-filtersection-${filterIndex}`}>
-            <section className='dashboard-filters-section'>
-              {!singleFilter.pivot ? (
-                <>
-                  <label htmlFor={`filter-${filterIndex}`}>{singleFilter.key}</label>
-                  <select
-                    id={`filter-${filterIndex}`}
-                    className='filter-select'
-                    data-index='0'
-                    value={singleFilter.queuedActive || singleFilter.active}
-                    onChange={val => {
-                      handleOnChange(filterIndex, val.target.value)
-                    }}
-                  >
-                    {values}
-                  </select>
-                </>
-              ) : (
-                <MultiSelect label={singleFilter.key} options={multiValues} fieldName={filterIndex} updateField={updateField} selected={singleFilter.active as string[]} limit={singleFilter.selectLimit || 5} />
-              )}
-            </section>
-          </div>
-        )
-      })}
-    </>
-  )
-}
-
-export default Filters