FIX: [dev-8332][dev-7696] chart filter columns and footnotes

packages/core/components/DataTable/helpers/chartCellMatrix.tsx

@@ -6,6 +6,7 @@ import { getChartCellValue } from './getChartCellValue'
 import { getDataSeriesColumns } from './getDataSeriesColumns'
 import { ReactNode } from 'react'
 import { CellMatrix, GroupCellMatrix } from '../../Table/types/CellMatrix'
+import { getRowType } from './getRowType'
 
 type ChartRowsProps = DataTableProps & {
  rows: string[]
@@ -58,15 +59,8 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
  } else {
  return rows.map(row => {
  if (hasRowType) {
- let rowType
- let rowValues = []
- dataSeriesColumns.forEach((column, j) => {
- if (column.match(/row[_-]?type/i)) {
- rowType = getChartCellValue(row, column, config, runtimeData)
- } else {
- rowValues.push(getChartCellValue(row, column, config, runtimeData))
- }
- })
+ const rowType = getRowType(runtimeData[row])
+ const rowValues = dataSeriesColumns.map(column => getChartCellValue(row, column, config, runtimeData))
  return [rowType, ...rowValues]
  } else {
  return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))

packages/core/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -4,8 +4,7 @@ import { Column } from '../../../types/Column'
 
 export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, runtimeData: Object[]): string[] => {
  if (config.visualizationType === 'Sankey') return Object.keys(config?.data?.[0]?.tableData[0])
-
- const configColumns: Record<string, Column> = _.cloneDeep(config.columns) || {}
+ const configColumns = _.cloneDeep(config.columns) || ({} as Record<string, Column>)
  const excludeColumns = Object.values(configColumns)
  .filter(column => column.dataTable === false)
  .map(column => column.name)
@@ -23,12 +22,15 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
  tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey, config.yAxis?.dataKey] : [config.yAxis?.dataKey]
  }
 
+ const dataColumns = Object.keys(runtimeData[0] || {})
+
  // then add the additional Columns
- Object.keys(configColumns).forEach(function (key) {
- var value = configColumns[key]
+ Object.values(configColumns).forEach(function (value) {
+ if (!value.name) return
  // add if not the index AND it is enabled to be added to data table
  const alreadyAdded = tmpSeriesColumns.includes(value.name)
- if (value.name !== config.xAxis?.dataKey && value.dataTable === true && !alreadyAdded) {
+ const columnIsInData = dataColumns.includes(value.name) // null columns are excluded from data
+ if (value.name !== config.xAxis?.dataKey && value.dataTable === true && !alreadyAdded && columnIsInData) {
  tmpSeriesColumns.push(value.name)
  }
  })
@@ -55,6 +57,5 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
  })
 
  tmpSeriesColumns.sort((a, b) => columnOrderingHash[a] - columnOrderingHash[b])
-
  return tmpSeriesColumns
 }

packages/core/components/DataTable/helpers/getRowType.ts

@@ -0,0 +1,6 @@
+import { RowType } from '../../Table/types/RowType'
+
+export const getRowType = (row: Record<string, any>): RowType => {
+ const rowTypeKey = Object.keys(row).find(key => key.match(/row[_-]?type/i))
+ return row[rowTypeKey]
+}

packages/dashboard/src/CdcDashboardComponent.tsx

@@ -404,7 +404,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
  getVizKeys(state.config).forEach(visualizationKey => {
  const rowNumber = vizRowColumnLocator[visualizationKey]?.row
  const visualizationConfig = getVizConfig(visualizationKey, rowNumber, state.config, state.data, state.filteredData)
-
+ if (visualizationConfig.type === 'footnotes') visualizationConfig.formattedData = undefined
  const setsSharedFilter = state.config.dashboard.sharedFilters && state.config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === visualizationKey).length > 0
  const setSharedFilterValue = setsSharedFilter ? state.config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === visualizationKey)[0].active : undefined
 
@@ -566,7 +566,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
  .filter(row => row.columns.filter(col => col.widget).length !== 0)
  .map((row, index) => {
  if (row.multiVizColumn && (isPreview || !isEditor)) {
- const filteredData = getFilteredData(state)
+ const filteredData = getFilteredData(state, state.data)
  const data = filteredData[index] ?? row.formattedData
  const dataGroups = {}
  data.forEach(d => {

packages/dashboard/src/components/Header/FilterModal.tsx

@@ -37,9 +37,11 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
  const nameLookup = {}
  const vizOptions = Object.keys(config.visualizations)
  .filter(vizKey => {
+ const viz = vizRowColumnLocator[vizKey]
+ if (!viz) return false
  const notAdded = !filter.usedBy || filter.usedBy.indexOf(vizKey) === -1
  const usesSharedFilter = config.visualizations[vizKey].usesSharedFilter
- const row = vizRowColumnLocator[vizKey].row
+ const row = viz.row
  const dataConfiguredOnRow = config.rows[row].dataKey
  return filter.setBy !== vizKey && notAdded && !usesSharedFilter && !dataConfiguredOnRow
  })

packages/dashboard/src/helpers/getFilteredData.ts

@@ -32,6 +32,8 @@ export const getFilteredData = (state: DashboardState, initialFilteredData = {},
  const formattedData = dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
 
  newFilteredData[index] = filterData(applicableFilters, formattedData)
+ } else {
+ newFilteredData[index] = state.data[row.dataKey] || row.data
  }
  }
  })

packages/dashboard/src/helpers/getVizConfig.ts

@@ -9,24 +9,25 @@ const transform = new DataTransform()
 export const getFootnotesVizConfig = (vizKey: string, rowNumber: number, config: MultiDashboardConfig) => {
  const visualizationConfig = _.cloneDeep(config.visualizations[vizKey])
 
- const data = config.datasets[visualizationConfig.dataKey]?.data || []
- const dataColumns = Object.keys(data[0])
+ const data = config.datasets[visualizationConfig.dataKey]?.data
+ const dataColumns = data?.length ? Object.keys(data[0]) : []
  const filters = (getApplicableFilters(config.dashboard, rowNumber) || []).filter(filter => dataColumns.includes(filter.columnName))
  if (filters.length) {
  visualizationConfig.formattedData = filterData(filters, data)
  }
+ visualizationConfig.data = data
  return visualizationConfig
 }
 
 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.footnotesId && rowData.footnotesId === visualizationKey) {
+ // return the footnotes visualization config with filtered data
+ return getFootnotesVizConfig(visualizationKey, rowNumber, config)
+ }
  if (rowData?.dataKey) {
  // data configured on the row
- if (rowData.footnotesId && rowData.footnotesId === visualizationKey) {
- // return the footnotes visualization config with filtered data
- return getFootnotesVizConfig(visualizationKey, rowNumber, config)
- }
  Object.assign(visualizationConfig, _.pick(rowData, ['dataKey', 'dataDescription', 'formattedData', 'data']))
  }