@cdc/dashboard 4.24.5 → 4.24.7

package/src/helpers/processData.ts

@@ -1,10 +1,9 @@
-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) {
+export const processData = async (dataSet: DataSet, hasFilterChangeBehavior: boolean) => {
+  if (dataSet.dataUrl && hasFilterChangeBehavior) {
     const dataset = await fetchRemoteData(`${dataSet.dataUrl}`)
     return getFormattedData(dataset, dataSet.dataDescription)
   }

package/src/helpers/reloadURLHelpers.ts

@@ -0,0 +1,68 @@
+import { gatherQueryParams } from '@cdc/core/helpers/gatherQueryParams'
+import { SharedFilter } from '../types/SharedFilter'
+import { capitalizeSplitAndJoin } from '@cdc/core/helpers/cove/string'
+import { Visualization } from '@cdc/core/types/Visualization'
+import _ from 'lodash'
+
+export const isUpdateNeeded = (filters: SharedFilter[], currentQueryParams: Record<string, string>, newQueryParams: Record<string, string>): boolean => {
+  let needsUpdate = false
+  filters.find(filter => {
+    if (filter.type === 'urlfilter' && !Array.isArray(filter.active) && filter.filterBy === 'File Name') {
+      needsUpdate = true
+      return true
+    }
+  })
+  Object.keys(newQueryParams).forEach(updatedParam => {
+    if (decodeURIComponent(newQueryParams[updatedParam]) !== currentQueryParams[updatedParam]) {
+      needsUpdate = true
+    }
+  })
+  return needsUpdate
+}
+
+export const getDataURL = (updatedQSParams: Record<string, string>, dataUrl: URL, newFileName: string) => {
+  const _params = Object.keys(updatedQSParams).map(key => ({ key, value: updatedQSParams[key] }))
+  const baseURL = dataUrl.origin + dataUrl.pathname
+  let dataUrlFinal = `${baseURL}${gatherQueryParams(baseURL, _params)}`
+
+  if (newFileName !== '') {
+    const fileExtension = dataUrl.pathname.split('.').pop()
+    const pathWithoutFilename = dataUrl.pathname.substring(0, dataUrl.pathname.lastIndexOf('/'))
+    dataUrlFinal = `${dataUrl.origin}${pathWithoutFilename}/${newFileName}.${fileExtension}${gatherQueryParams(baseURL, _params)}`
+  }
+  return dataUrlFinal
+}
+
+export const getNewFileName = (newFileName: string, filter: SharedFilter, datasetKey: string) => {
+  const replacements = {
+    'Remove Spaces': '',
+    'Keep Spaces': ' ',
+    'Replace With Underscore': '_'
+  }
+  let fileName = newFileName
+  if (filter.datasetKey === datasetKey) {
+    if (filter.fileName) {
+      // if a file name is found, ie, state_${query}, use that, ie. state_activeFilter.json
+      fileName = capitalizeSplitAndJoin.call(String(filter.fileName), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces'])
+    } else {
+      // if no file name is entered use the default active filter. ie. /activeFilter.json
+      fileName = filter.active as string
+    }
+  }
+
+  if (fileName?.includes('${query}')) {
+    fileName = fileName.replace('${query}', capitalizeSplitAndJoin.call(String(filter.active), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces']))
+  }
+
+  return fileName
+}
+
+export const getVisualizationsWithFormattedData = (visualizations: Record<string, Visualization>, newData: Object) => {
+  return Object.keys(visualizations).reduce((acc, vizKey) => {
+    const dataKey = visualizations[vizKey].dataKey
+    if (newData[dataKey]) {
+      acc[vizKey].formattedData = newData[dataKey]
+    }
+    return acc
+  }, _.cloneDeep(visualizations))
+}

package/src/helpers/tests/filterData.test.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import { SharedFilter } from '../../types/SharedFilter'
 import { filterData } from '../filterData'
 
@@ -36,48 +37,6 @@ describe('filterData', () => {
     expect(result).toEqual([{ name: 'John', age: 30 }])
   })
 
-  it('causes sideEffects to filters', () => {
-    // the side effect is not desired, but current functionality depends on the sideEffect.
-    // hopefully the side effect will be refactored in the future to be a returned value.
-    const filters = [
-      { columnName: 'name', active: 'John', queuedActive: 'John', fileName: 'abc', key: 'name' },
-      { columnName: 'age', fileName: 'abc', key: 'age' },
-      { columnName: 'color', fileName: 'abc', key: 'color', parents: ['age'] }
-    ] as SharedFilter[]
-    const data = [
-      { name: 'John', age: 30, color: 'blue' },
-      { name: 'Jane', age: 25, color: 'red' },
-      { name: 'John', age: 35, color: 'yellow' },
-      { name: 'Jane', age: 30, color: 'green' }
-    ]
-
-    const result = filterData(filters, data)
-
-    expect(result).toEqual([{ name: 'John', age: 30, color: 'blue' }])
-
-    const sideEffectOfFiltering = [
-      {
-        columnName: 'name',
-        active: 'John',
-        queuedActive: 'John',
-        fileName: 'abc',
-        key: 'name',
-        tier: 1
-      },
-      { columnName: 'age', fileName: 'abc', key: 'age', tier: 1 },
-      {
-        columnName: 'color',
-        fileName: 'abc',
-        key: 'color',
-        parents: ['age'],
-        tier: 2,
-        values: ['blue', 'yellow'],
-        active: 'blue'
-      }
-    ]
-    expect(filters).toEqual(sideEffectOfFiltering)
-  })
-
   it('should not include data that does not meet the filter criteria', () => {
     const filters = [
       //{ columnName: 'apple', fileName: 'abc', key: 'banana' },
@@ -95,55 +54,4 @@ describe('filterData', () => {
     const result = filterData(filters, data)
     expect(result).toEqual([{ name: 'John', age: 25, color: 'red' }])
   })
-
-  it('should pivot data based on the provided filters', () => {
-    const filters = [{ key: 'Race', type: 'datafilter', showDropdown: true, columnName: 'Race', pivot: 'Age-adjusted rate', usedBy: ['table1707935263149'] }] as SharedFilter[]
-    const data = [
-      {
-        Race: 'Hispanic or Latino',
-        'Age-adjusted rate': '644.2',
-        Year: '2016'
-      },
-      {
-        Race: 'Non-Hispanic American Indian',
-        'Age-adjusted rate': '636.1',
-        Year: '2016'
-      },
-      {
-        Race: 'Non-Hispanic Black',
-        'Age-adjusted rate': '563.7',
-        Year: '2016'
-      },
-      {
-        Race: 'Hispanic or Latino',
-        'Age-adjusted rate': '644.2',
-        Year: '2017'
-      },
-      {
-        Race: 'Non-Hispanic American Indian',
-        'Age-adjusted rate': '636.1',
-        Year: '2017'
-      },
-      {
-        Race: 'Non-Hispanic Black',
-        'Age-adjusted rate': '563.7',
-        Year: '2017'
-      }
-    ]
-
-    expect(filterData(filters, data)).toEqual([
-      {
-        'Hispanic or Latino': '644.2',
-        'Non-Hispanic American Indian': '636.1',
-        'Non-Hispanic Black': '563.7',
-        Year: '2016'
-      },
-      {
-        'Hispanic or Latino': '644.2',
-        'Non-Hispanic American Indian': '636.1',
-        'Non-Hispanic Black': '563.7',
-        Year: '2017'
-      }
-    ])
-  })
 })

package/src/scss/editor-panel.scss

@@ -249,7 +249,7 @@
     }
     &.checkbox {
       display: flex;
-      span {
+      span:not(.cove-icon) {
         display: inline;
       }
       input {

package/src/scss/grid.scss

@@ -7,15 +7,6 @@ $red: #f74242;
   margin-left: calc($editorWidth + 1em);
 }
 
-.visualizations-panel {
-  background-color: #fff;
-  padding: 1em;
-  width: $editorWidth;
-  border-right: #c7c7c7 1px solid;
-  z-index: 1;
-  overflow-y: scroll;
-}
-
 .hidden.editor-panel + .builder-grid {
   margin-left: 0 !important;
 }
@@ -30,30 +21,16 @@ $red: #f74242;
   padding: 5em 3em 3em;
 }
 
-.column-container {
-  display: flex;
-  flex-flow: row;
-  width: 100%;
-  position: relative;
-  padding: 2em 1em 1em;
-  border: 1px solid #c2c2c2;
-  transition: border 300ms cubic-bezier(0.16, 1, 0.3, 1);
-  background-color: #f2f2f2;
-  user-select: none;
-
-  &.can-drop {
-    border-color: $blue-light;
-  }
-}
-
 .row-menu {
   display: flex;
   align-items: flex-start;
   transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
   user-select: none;
-  position: relative;
+  position: absolute;
   z-index: 1;
-  bottom: -1px;
+  top: -27px;
+  width: 100%;
+  left: 0;
 
   > li:not(.spacer) + li:not(.spacer) {
     margin-left: 0.3em;
@@ -337,6 +314,35 @@ $red: #f74242;
     top: 0;
   }
 
+  .footnotes {
+    margin: 0.5rem;
+    margin-bottom: 0;
+    width: calc(100% - 1rem);
+    border: 1px solid #c2c2c2;
+    transition: background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
+    background-color: #c2c2c2;
+    &:hover {
+      border-color: $blue;
+      background-color: $blue;
+    }
+  }
+  
+  padding: 2em 1em 1em;
+  border: 1px solid #c2c2c2;
+  transition: border 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  background-color: #f2f2f2;
+  user-select: none;
+
+  &.can-drop {
+    border-color: $blue-light;
+  }
+
+  .column-container {
+    display: flex;
+    flex-flow: row;
+    width: 100%;
+  }
+
   .widget__content {
     padding: 0 2em;
 
@@ -369,5 +375,6 @@ $red: #f74242;
     .column-container {
       border-color: $blue;
     }
+    border-color: $blue;
   }
 }

package/src/scss/main.scss

@@ -156,6 +156,13 @@
       z-index: -1;
       position: relative;
     }
+
+    // Expand and Collapse Buttons for Multiviz Dashboard
+    &.expand-collapse-buttons {
+      background-color: var(--lightestGray);
+      border: 1px var(--lightGray) solid;
+      color: black;
+    }
   }
 
   .warning-icon {
@@ -181,6 +188,40 @@
     }
   }
 
+  .collapsable-multiviz-container {
+    position: relative;
+    border: $lightGray 1px solid;
+    clear: both;
+    margin-bottom: 20px;
+    .multi-visualiation-heading {
+      position: relative;
+      background: var(--lightestGray);
+      padding: 0.5em 0.7em;
+      cursor: pointer;
+      svg {
+        position: absolute;
+        height: 100%;
+        width: 15px;
+        top: 0;
+        right: 1em;
+      }
+
+      &:focus {
+        z-index: 2;
+        position: relative;
+      }
+      @include breakpoint(xs) {
+        font-size: $font-small + 0.2em;
+      }
+    }
+    .data-table-heading {
+      display: none;
+    }
+    .table-container {
+      margin: 0 1em;
+    }
+  }
+
   .dashboard-download-link {
     font-size: 14px;
   }
@@ -205,9 +246,6 @@
       margin-left: 0;
       margin-right: 0;
     }
-    &.hidden-toggle {
-      display: none;
-    }
   }
 
   .dashboard-col-12 {

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,5 +1,6 @@
+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'
@@ -9,15 +10,11 @@ export type SharedFilter = {
   queuedActive?: 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>
   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'