@cdc/core 4.24.4 → 4.24.5

package/components/DataTable/DataTable.tsx

@@ -16,7 +16,7 @@ import Table from '../Table'
 import chartCellMatrix from './helpers/chartCellMatrix'
 import regionCellMatrix from './helpers/regionCellMatrix'
 import boxplotCellMatrix from './helpers/boxplotCellMatrix'
-import customColumns from './helpers/customColumns'
+import removeNullColumns from './helpers/removeNullColumns'
 import { TableConfig } from './types/TableConfig'
 import { Column } from '../../types/Column'
 
@@ -52,7 +52,8 @@ export type DataTableProps = {
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
-  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
+  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData: parentRuntimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
+  const runtimeData = removeNullColumns(parentRuntimeData)
   const [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
@@ -98,25 +99,23 @@ const DataTable = (props: DataTableProps) => {
       break
   }
 
-  const _runtimeData = config.table.customTableConfig ? customColumns(rawData, config.table.excludeColumns) : runtimeData
-
-  const rawRows = Object.keys(_runtimeData).filter(column => column != 'columns')
+  const rawRows = Object.keys(runtimeData).filter(column => column != 'columns')
   const rows = isVertical
     ? rawRows.sort((a, b) => {
         let dataA
         let dataB
         if (config.type === 'map' && config.columns) {
           const sortByColName = config.columns[sortBy.column].name
-          dataA = _runtimeData[a][sortByColName]
-          dataB = _runtimeData[b][sortByColName]
+          dataA = runtimeData[a][sortByColName]
+          dataB = runtimeData[b][sortByColName]
         }
         if (config.type === 'chart' || config.type === 'dashboard') {
-          dataA = _runtimeData[a][sortBy.column]
-          dataB = _runtimeData[b][sortBy.column]
+          dataA = runtimeData[a][sortBy.column]
+          dataB = runtimeData[b][sortBy.column]
         }
         if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
-          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(_runtimeData[a][config.xAxis.dataKey])
-          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(_runtimeData[b][config.xAxis.dataKey])
+          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
+          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
         }
         return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
       })
@@ -185,17 +184,17 @@ const DataTable = (props: DataTableProps) => {
         </MediaControls.Section>
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
-          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} fontSize={config.fontSize} viewport={viewport} />
+          {config.table.collapsible !== false && <ExpandCollapse expanded={expanded} setExpanded={setExpanded} fontSize={config.fontSize} tableTitle={tableTitle} viewport={viewport} />}
           <div className='table-container' style={limitHeight}>
             <Table
               viewport={viewport}
               wrapColumns={wrapColumns}
-              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData: _runtimeData, viewport }) : chartCellMatrix({ rows, ...props, runtimeData: _runtimeData, isVertical, sortBy, hasRowType, viewport })}
+              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport }) : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })}
               tableName={config.type}
               caption={caption}
               stickyHeader
               hasRowType={hasRowType}
-              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={_runtimeData} {...props} hasRowType={hasRowType} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
+              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={runtimeData} {...props} hasRowType={hasRowType} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
               tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${isVertical ? '' : ' horizontal'}`, 'aria-live': 'assertive', 'aria-rowcount': config?.data?.length ? config.data.length : -1, hidden: !expanded }}
               fontSize={config.fontSize}
             />

package/components/DataTable/DataTableStandAlone.tsx

@@ -1,15 +1,62 @@
+import { useEffect, useState } from 'react'
 import { ViewPort } from '../../types/ViewPort'
-import { Visualization } from '../../types/Visualization'
+import EditorWrapper from '../EditorWrapper/EditorWrapper'
 import DataTable from './DataTable'
+import DataTableEditorPanel from './components/DataTableEditorPanel'
+import Filters from '../Filters'
+import { TableConfig } from './types/TableConfig'
 
 type StandAloneProps = {
   visualizationKey: string
-  config: Visualization
+  config: TableConfig
   viewport?: ViewPort
+  isEditor?: boolean
+  updateConfig?: (Visualization) => void
 }
 
-const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, viewport }) => {
-  return <DataTable expandDataTable={true} config={config} rawData={config.data} runtimeData={config.formattedData} tabbingId={visualizationKey} tableTitle={config.table.label} viewport={viewport || 'lg'} />
+// filterData is copied from ./packages/chart/src/helpers/filterData.ts
+// consider moving this to a shared location
+const filterData = (filters, data) => {
+  if (!filters) return data
+  const filteredData: any[] = []
+
+  data.forEach(row => {
+    let add = true
+    filters
+      .filter(filter => filter.type !== 'url')
+      .forEach(filter => {
+        if (row[filter.columnName] != filter.active) {
+          add = false
+        }
+      })
+
+    if (add) filteredData.push(row)
+  })
+
+  return filteredData
+}
+
+const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, updateConfig, viewport, isEditor }) => {
+  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(filterData(config.filters, config.formattedData))
+
+  useEffect(() => {
+    // when using editor changes to filter should update the data
+    setFilteredData(filterData(config.filters, config.formattedData))
+  }, [config.filters])
+
+  if (isEditor)
+    return (
+      <EditorWrapper component={DataTableStandAlone} visualizationKey={visualizationKey} visualizationConfig={config} updateConfig={updateConfig} type={'Table'} viewport={viewport}>
+        <DataTableEditorPanel key={visualizationKey} config={config} updateConfig={updateConfig} />
+      </EditorWrapper>
+    )
+
+  return (
+    <>
+      <Filters config={config} setConfig={updateConfig} setFilteredData={setFilteredData} filterData={filterData} filteredData={filteredData} excludedData={config.formattedData} />
+      <DataTable expandDataTable={true} config={config} rawData={config.data} runtimeData={filteredData} tabbingId={visualizationKey} tableTitle={config.table.label} viewport={viewport || 'lg'} />
+    </>
+  )
 }
 
 export default DataTableStandAlone

package/components/DataTable/components/ChartHeader.tsx

@@ -4,9 +4,10 @@ import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
 import { DownIcon, UpIcon } from './Icons'
 import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 
-type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; groupBy?; hasRowType? }
+type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType? }
 
-const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, hasRowType }: ChartHeaderProps) => {
+const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }: ChartHeaderProps) => {
+  const groupBy = config.table?.groupBy
   if (!data) return
   let dataSeriesColumns = getDataSeriesColumns(config, isVertical, data)
   if (groupBy) {

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -4,6 +4,8 @@ import { Visualization } from '@cdc/core/types/Visualization'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { useMemo } from 'react'
 import ColumnsEditor from '../../EditorPanel/ColumnsEditor'
+import VizFilterEditor from '../../EditorPanel/VizFilterEditor'
+import _ from 'lodash'
 
 type DataTableEditorProps = {
   config: Visualization
@@ -13,7 +15,7 @@ type DataTableEditorProps = {
 const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateConfig }) => {
   const updateField = useMemo(() => updateFieldFactory(config, updateConfig), [JSON.stringify(config)])
   const deleteColumn = columnName => {
-    const newColumns = config.columns
+    const newColumns = _.cloneDeep(config.columns)
 
     delete newColumns[columnName]
 
@@ -23,10 +25,25 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
     })
   }
 
-  const columns = Object.keys(config.columns || {})
+  const columns = Object.keys(config.originalFormattedData[0] || {})
   return (
     <>
-      <ColumnsEditor config={config} updateField={updateField} deleteColumn={deleteColumn} />
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Filters</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <VizFilterEditor config={config} updateField={updateField} rawData={config.originalFormattedData} />
+        </AccordionItemPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Columns</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <ColumnsEditor config={config} updateField={updateField} deleteColumn={deleteColumn} />
+        </AccordionItemPanel>
+      </AccordionItem>
       <AccordionItem>
         <AccordionItemHeading>
           <AccordionItemButton>Data Table</AccordionItemButton>

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -15,7 +15,8 @@ type ChartRowsProps = DataTableProps & {
   hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy, hasRowType, viewport }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, hasRowType, viewport }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+  const groupBy = config.table?.groupBy
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
   const dataSeriesColumnsSorted = () => {

package/components/DataTable/helpers/getChartCellValue.ts

@@ -25,7 +25,7 @@ const isAdditionalColumn = (column, config) => {
 }
 
 export const getChartCellValue = (row: string, column: string, config: TableConfig, runtimeData: Object[]) => {
-  if (config.table.customTableConfig || config.visualizationType === 'Sankey' || runtimeData?.[0]?.tableData) return runtimeData[row][column]
+  if (config.visualizationType === 'Sankey' || runtimeData?.[0]?.tableData) return runtimeData[row][column]
 
   const rowObj = runtimeData[row]
   let cellValue // placeholder for formatting below
@@ -54,5 +54,25 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     }
   }
 
+  // suppress cell value
+  config.preliminaryData?.forEach(pd => {
+    // check entered suppression value against cell value
+    const isValueMatch = String(pd.value) === String(labelValue)
+    // check entered suppression column against table key
+    const isColumnMatch = !pd.column || pd.column === column
+    if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression') {
+      switch (config.visualizationType) {
+        case 'Combo':
+          cellValue = config.runtime.barSeriesKeys.includes(column) ? pd.iconCode : config.runtime.lineSeriesKeys.includes(column) ? pd.lineCode : ''
+          break
+        case 'Bar':
+          cellValue = pd.iconCode
+          break
+        case 'Line':
+          cellValue = pd.lineCode
+          break
+      }
+    }
+  })
   return cellValue
 }

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -1,14 +1,13 @@
 import { TableConfig } from '../types/TableConfig'
+import _ from 'lodash'
+import { Column } from '../../../types/Column'
 
 export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, runtimeData: Object[]): string[] => {
-  if (config.table.customTableConfig) return runtimeData[0] ? Object.keys(runtimeData[0]) : []
-  if (config.type === 'table') {
-    const excludeColumns = Object.values(config.columns)
-      .filter(column => column.dataTable === false)
-      .map(column => column.name)
-    return Object.keys(runtimeData[0]).filter(columnName => !excludeColumns.includes(columnName))
-  }
-  let tmpSeriesColumns
+  const configColumns: Record<string, Column> = _.cloneDeep(config.columns) || {}
+  const excludeColumns = Object.values(configColumns)
+    .filter(column => column.dataTable === false)
+    .map(column => column.name)
+  let tmpSeriesColumns: string[] = []
   if (config.visualizationType !== 'Pie') {
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll
     if (config.series) {
@@ -23,15 +22,37 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
   }
 
   // then add the additional Columns
-  if (config.columns && Object.keys(config.columns).length > 0) {
-    Object.keys(config.columns).forEach(function (key) {
-      var value = config.columns[key]
-      // add if not the index AND it is enabled to be added to data table
-      if (value.name !== config.xAxis?.dataKey && value.dataTable === true) {
-        tmpSeriesColumns.push(value.name)
+  Object.keys(configColumns).forEach(function (key) {
+    var value = configColumns[key]
+    // 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) {
+      tmpSeriesColumns.push(value.name)
+    }
+  })
+
+  const columnOrderingHash = Object.values(configColumns).reduce((acc, column) => {
+    // subtract 1 to switch from cardinal positioning to index
+    if (column.order !== undefined) {
+      acc[column.name] = column.order - 1
+    }
+    return acc
+  }, {})
+
+  tmpSeriesColumns = tmpSeriesColumns.filter(columnName => !excludeColumns.includes(columnName))
+
+  tmpSeriesColumns.forEach((columnName, index) => {
+    if (columnOrderingHash[columnName] === undefined) {
+      if (Object.values(columnOrderingHash).includes(index)) {
+        // add 1 to place unsorted columns behind sorted columns
+        columnOrderingHash[columnName] = index + 1
+      } else {
+        columnOrderingHash[columnName] = index
       }
-    })
-  }
+    }
+  })
+
+  tmpSeriesColumns.sort((a, b) => columnOrderingHash[a] - columnOrderingHash[b])
 
   return tmpSeriesColumns
 }

package/components/DataTable/helpers/getSeriesName.ts

@@ -17,5 +17,6 @@ export const getSeriesName = (column: string, config: TableConfig) => {
   }
   if (config.runtimeSeriesLabels && config.runtimeSeriesLabels[column]) return config.runtimeSeriesLabels[column]
   const columnIsDataKey = column === config.xAxis?.dataKey
-  return columnIsDataKey ? config.table.indexLabel : getLabel(column, config)
+  const indexLabel = config.table?.indexLabel
+  return columnIsDataKey && indexLabel ? indexLabel : getLabel(column, config)
 }

package/components/DataTable/helpers/{customColumns.ts → removeNullColumns.ts}

@@ -1,7 +1,7 @@
 type RuntimeData = Object[] & Record<string, Object>
 
 // removes null and excluded columns
-const customColumns = (runtimeData: Object[] | RuntimeData, excludeColumns: string[] = []): RuntimeData => {
+const removeNullColumns = (runtimeData: Object[] | RuntimeData): RuntimeData => {
   if (!Array.isArray(runtimeData)) {
     // currently we don't support Record types
     return runtimeData
@@ -10,7 +10,7 @@ const customColumns = (runtimeData: Object[] | RuntimeData, excludeColumns: stri
     runtimeData.forEach(row => {
       Object.keys(row).forEach(key => {
         if (runtimeDataMemo[key] === undefined) runtimeDataMemo[key] = null
-        if (row[key] !== null && !excludeColumns.includes(key)) runtimeDataMemo[key] = true
+        if (row[key] !== null) runtimeDataMemo[key] = true
       })
     })
     return runtimeData.map(d => {
@@ -24,4 +24,4 @@ const customColumns = (runtimeData: Object[] | RuntimeData, excludeColumns: stri
   }
 }
 
-export default customColumns
+export default removeNullColumns

package/components/DataTable/types/TableConfig.ts

@@ -1,28 +1,17 @@
-import { Axis } from '@cdc/core/types/Axis'
-import { Series } from '@cdc/core/types/Series'
-import { Runtime } from '@cdc/core/types/Runtime'
-import { Table } from '@cdc/core/types/Table'
-import { Region } from '@cdc/core/types/Region'
+import { Axis } from '../../../types/Axis'
+import { Runtime } from '../../../types/Runtime'
+import { Region } from '../../../types/Region'
 import { BoxPlot } from '../../../types/BoxPlot'
-import { General } from '../../../types/General'
-import { Column } from '../../../types/Column'
-import { Legend } from '@cdc/core/types/Legend'
+import { PreliminaryDataItem } from '@cdc/chart/src/components/LineChart/LineChartProps'
+import { Visualization } from '../../../types/Visualization'
 
-export type TableConfig = {
-  type?: string
-  table: Table
-  xAxis?: Axis
-  yAxis?: Axis
+export type TableConfig = Visualization & {
   boxplot?: BoxPlot
-  visualizationType: string
-  general?: General
-  columns?: Record<string, Column>
-  legend?: Legend
-  series?: Series
+  fontSize: 'small' | 'medium' | 'large'
   regions?: Region[]
-  runtimeSeriesLabels?: Object
-  dataFormat?: Object
   runtime?: Runtime
-  data: Object[]
-  fontSize: 'small' | 'medium' | 'large'
+  runtimeSeriesLabels?: Object
+  xAxis?: Axis
+  yAxis?: Axis
+  preliminaryData: PreliminaryDataItem[]
 }