@cdc/dashboard 4.25.7-2 → 4.25.8

package/src/components/VisualizationRow.tsx

@@ -19,6 +19,7 @@ import { hasDashboardApplyBehavior } from '../helpers/hasDashboardApplyBehavior'
 import CdcChart from '@cdc/chart/src/CdcChartComponent'
 import ExpandCollapseButtons from './ExpandCollapseButtons'
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 type VisualizationWrapperProps = {
   allExpanded: boolean
@@ -66,6 +67,7 @@ type VizRowProps = {
   currentViewport: ViewPort
   isLastRow: boolean
   setAllExpanded?: (expanded: boolean) => void
+  interactionLabel: string
 }
 
 const VisualizationRow: React.FC<VizRowProps> = ({
@@ -80,7 +82,8 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   apiFilterDropdowns,
   currentViewport,
   isLastRow,
-  setAllExpanded
+  setAllExpanded,
+  interactionLabel = ''
 }) => {
   const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
   const [toggledRow, setToggled] = React.useState<number>(0)
@@ -136,7 +139,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({
         {Object.keys(dataGroups).map(groupName => {
           const dataValue = dataGroups[groupName]
           const _row = _.cloneDeep(row) // clone the row to avoid mutating the original row
+          const originalMultiVizColumn = _row.multiVizColumn // store original value before clearing
           _row.multiVizColumn = undefined // reset the multiVizColumn to avoid passing it to the child components
+          _row.originalMultiVizColumn = originalMultiVizColumn // store for footnote filtering
           return (
             <VisualizationRow
               key={`row__${index}__${groupName}`}
@@ -151,6 +156,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               currentViewport={currentViewport}
               inNoDataState={inNoDataState}
               isLastRow={isLastRow}
+              interactionLabel={interactionLabel}
             />
           )
         })}
@@ -174,7 +180,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             rawData,
             dashboardFilteredData,
             filteredDataOverride,
-            row.multiVizColumn
+            row.multiVizColumn || row.originalMultiVizColumn
           )
 
           const { type, sharedFilterIndexes, filterBehavior, table, dataKey } = visualizationConfig
@@ -186,7 +192,18 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active
             : undefined
           const tableLink = (
-            <a href={`#data-table-${dataKey}`} className='margin-left-href'>
+            <a
+              href={`#data-table-${dataKey}`}
+              className='margin-left-href'
+              onClick={() => {
+                publishAnalyticsEvent(
+                  `link_to_data_table_click`,
+                  'click',
+                  `${interactionLabel}|#data-table-${dataKey}`,
+                  visualizationConfig.type
+                )
+              }}
+            >
               {dataKey} (Go to Table)
             </a>
           )
@@ -233,6 +250,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                   setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
                   isDashboard={true}
                   link={link}
+                  interactionLabel={interactionLabel}
                 />
               )}
               {type === 'map' && (
@@ -248,6 +266,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                   isDashboard={true}
                   link={link}
                   dataset={config.datasets}
+                  interactionLabel={interactionLabel}
                 />
               )}
               {type === 'data-bite' && (
@@ -268,7 +287,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                     updateChildConfig(col.widget, newConfig)
                   }}
                   isDashboard={true}
-                  configUrl={link}
+                  interactionLabel={link}
                 />
               )}
               {type === 'markup-include' && (
@@ -300,6 +319,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                   visualizationConfig={visualizationConfig as DashboardFilters}
                   apiFilterDropdowns={apiFilterDropdowns}
                   currentViewport={currentViewport}
+                  interactionLabel={interactionLabel}
                 />
               )}
               {type === 'table' && (
@@ -311,6 +331,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                   visualizationKey={col.widget}
                   config={visualizationConfig as TableConfig}
                   viewport={currentViewport}
+                  interactionLabel={interactionLabel}
                 />
               )}
             </VisualizationWrapper>

package/src/helpers/getFilteredData.ts

@@ -1,50 +1,49 @@
-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) || sharedFilter.usedBy?.indexOf(key) !== -1
-  )
-  return c?.length > 0 ? c : false
-}
-
-export const getFilteredData = (
-  state: DashboardState,
-  initialFilteredData?: Record<string, any>,
-  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 = (dataOverride || 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)
-      const { dataKey, data, dataDescription } = row
-      const _data = (dataOverride || state.data)[dataKey] || data
-      if (applicableFilters) {
-        const formattedData =
-          dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
-
-        newFilteredData[index] = filterData(applicableFilters, formattedData)
-      } else {
-        newFilteredData[index] = _data || []
-      }
-    }
-  })
-  return newFilteredData
-}
+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) || sharedFilter.usedBy?.indexOf(key) !== -1
+  )
+  return c?.length > 0 ? c : false
+}
+export const getFilteredData = (
+  state: DashboardState,
+  initialFilteredData?: Record<string, any>,
+  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 = (dataOverride || 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)
+      const { dataKey, data, dataDescription } = row
+      const _data = (dataOverride || state.data)[dataKey] || data
+      if (applicableFilters) {
+        const formattedData =
+          dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
+
+        newFilteredData[index] = filterData(applicableFilters, formattedData)
+      } else {
+        newFilteredData[index] = _data || []
+      }
+    }
+  })
+  return newFilteredData
+}

package/src/helpers/getVizConfig.ts

@@ -1,21 +1,37 @@
 import _ from 'lodash'
 import { MultiDashboardConfig } from '../types/MultiDashboard'
 import DataTransform from '@cdc/core/helpers/DataTransform'
+import { getApplicableFilters } from './getFilteredData'
 import { filterData } from './filterData'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 
 const transform = new DataTransform()
 
-export const getFootnotesVizConfig = (vizConfig: AnyVisualization, config: MultiDashboardConfig) => {
-  if (!vizConfig?.footnotes) return vizConfig
-
-  const data = config.datasets[vizConfig.footnotes.dataKey]?.data ?? []
+export const getFootnotesVizConfig = (
+  visualizationConfig: AnyVisualization,
+  rowNumber: number,
+  config: MultiDashboardConfig,
+  visualizationKey: string
+) => {
+  if (!visualizationConfig?.footnotes) return visualizationConfig
+  const data = _.cloneDeep(config.datasets[visualizationConfig.footnotes.dataKey]?.data)
+  const dataColumns = data?.length ? Object.keys(data[0]) : []
+  const filters = (getApplicableFilters(config.dashboard, rowNumber) || []).filter(filter =>
+    dataColumns.includes(filter.columnName)
+  )
+  // check if shared filters has viz key
+  const sharedFilters = config.dashboard.sharedFilters
+  const matchingFilters = sharedFilters.filter(f => f.usedBy?.includes(visualizationKey))
 
-  const filters = config?.dashboard?.sharedFilters
-  if (filters.length === 0) return vizConfig
-  vizConfig.footnotes.data = filters.length ? filterData(filters, data) : data
+  if (matchingFilters.length) {
+    visualizationConfig.footnotes.data = filterData(matchingFilters, data)
+  } else {
+    if (visualizationConfig.footnotes.data) {
+      visualizationConfig.footnotes.data = data
+    }
+  }
 
-  return vizConfig
+  return visualizationConfig
 }
 
 export const getVizConfig = (
@@ -76,16 +92,17 @@ export const getVizConfig = (
 
   if (filteredDataOverride) {
     visualizationConfig.data = filteredDataOverride
-    visualizationConfig.formattedData = filteredDataOverride
   }
 
   if (visualizationConfig.footnotes) {
-    const visConfigWithFootnotes = getFootnotesVizConfig(visualizationConfig, config)
-    if (multiVizColumn && filteredDataOverride) {
-      const vizCategory = filteredDataOverride[0][multiVizColumn]
-      // the multiViz filtering filtering is applied after the dashboard filters
-      const categoryFootnote = visConfigWithFootnotes.footnotes.data.filter(d => d[multiVizColumn] === vizCategory)
-      visConfigWithFootnotes.footnotes.data = categoryFootnote
+    const visConfigWithFootnotes = getFootnotesVizConfig(visualizationConfig, rowNumber, config, visualizationKey)
+    if (multiVizColumn && filteredDataOverride && filteredDataOverride.length > 0) {
+      const vizCategory = filteredDataOverride?.[0]?.[multiVizColumn]
+      // the multiViz filtering is applied after the dashboard filters
+      if (vizCategory !== undefined && visConfigWithFootnotes.footnotes.data) {
+        const categoryFootnote = visConfigWithFootnotes.footnotes.data.filter(d => d[multiVizColumn] === vizCategory)
+        visConfigWithFootnotes.footnotes.data = categoryFootnote
+      }
     }
     return visConfigWithFootnotes
   }

package/src/index.tsx

@@ -15,6 +15,7 @@ ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <MultiDashboardWrapper
       configUrl={domContainer.attributes['data-config'].value}
+      interactionLabel={domContainer.attributes['data-config'].value}
       isEditor={isEditor}
       isDebug={isDebug}
     />

package/src/store/dashboard.actions.ts

@@ -32,6 +32,7 @@ type RESET_VISUALIZATION = Action<'RESET_VISUALIZATION', { vizKey: string }>
 type UPDATE_VISUALIZATION = Action<'UPDATE_VISUALIZATION', { vizKey: string; configureData: Partial<AnyVisualization> }>
 type UPDATE_ROW = Action<'UPDATE_ROW', { rowIndex: number; rowData: Partial<ConfigRow> }>
 type UPDATE_TOGGLE_NAME = Action<'UPDATE_TOGGLE_NAME', { rowIndex: number; columnIndex: number; toggleName: string }>
+type SET_FILTERS_APPLIED = Action<'SET_FILTERS_APPLIED', boolean>
 
 type DashboardActions =
   | ADD_VISUALIZATION
@@ -58,4 +59,5 @@ type DashboardActions =
   | UPDATE_VISUALIZATION
   | UPDATE_ROW
   | UPDATE_TOGGLE_NAME
+  | SET_FILTERS_APPLIED
 export default DashboardActions

package/src/store/dashboard.reducer.ts

@@ -35,6 +35,7 @@ export type DashboardState = {
   loading: boolean
   preview: boolean
   tabSelected: Tab
+  filtersApplied: boolean
 }
 
 const reducer = (state: DashboardState, action: DashboardActions): DashboardState => {
@@ -266,6 +267,9 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       })
       return { ...state, config: { ...state.config, rows: newRows } }
     }
+    case 'SET_FILTERS_APPLIED': {
+      return { ...state, filtersApplied: action.payload }
+    }
     default:
       return state
   }

package/src/types/ConfigRow.ts

@@ -16,4 +16,5 @@ export type ConfigRow = {
   toggle?: boolean
   equalHeight?: boolean
   multiVizColumn?: string
+  originalMultiVizColumn?: string
 } & ConfigureData

package/src/types/InitialState.ts

@@ -8,4 +8,5 @@ export type InitialState = {
   filteredData: Object
   preview: boolean
   tabSelected: Tab
+  filtersApplied: boolean
 }