@cdc/core 4.24.4 → 4.24.7

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react'
+import MapIcon from '../../assets/map-folded.svg'
+import ChartIcon from '../../assets/icon-chart-bar.svg'
+import MarkupIncludeIcon from '../../assets/icon-code.svg'
+import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
+import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
+import './advanced-editor-styles.css'
+import _ from 'lodash'
+
+export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
+  const [advancedToggle, _setAdvancedToggle] = useState(false)
+  const [configTextboxValue, setConfigTextbox] = useState<Record<string, any>>({})
+  const setAdvancedToggle = val => {
+    _setAdvancedToggle(val)
+    onExpandCollapse()
+  }
+
+  const collapseFields: FilterFunction = input => {
+    if (['datasets', 'data', 'originalFormattedData', 'formattedData'].includes(String(input.key))) return true
+    return false
+  }
+
+  const onUpdate: UpdateFunction = val => {
+    setConfigTextbox(val.newData)
+  }
+
+  useEffect(() => {
+    let parsedConfig = stripConfig(config)
+    if (config.type !== 'dashboard') {
+      parsedConfig = convertStateToConfig()
+    }
+
+    setConfigTextbox(parsedConfig)
+  }, [config])
+
+  const typeLookup = {
+    chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
+    dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
+    map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
+    'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
+  }
+
+  if (!config.type) return <></>
+  return (
+    <>
+      <a href={typeLookup[config.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
+        {typeLookup[config.type][2]}
+        <div>
+          <span className='heading-3'>Get Help with {typeLookup[config.type][0]}</span>
+          <p>Examples and documentation</p>
+        </div>
+      </a>
+      <div className='advanced'>
+        <span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
+          <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
+        </span>
+        {advancedToggle && (
+          <React.Fragment>
+            <section className='error-box py-2 px-3 my-2'>
+              <div>
+                <strong className='pt-1'>Warning</strong>
+                <p>This can cause serious errors in your visualization.</p>
+              </div>
+            </section>
+            <p className='pb-2'>
+              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
+            </p>
+            <button
+              className='btn '
+              onClick={() => {
+                navigator.clipboard.writeText(JSON.stringify(configTextboxValue))
+              }}
+            >
+              Copy to Clipboard
+            </button>
+            <JsonEditor className='advanced-json-editor' data={configTextboxValue} onUpdate={onUpdate} rootName='' collapse={collapseFields} />
+            <button
+              className='btn full-width'
+              onClick={() => {
+                loadConfig(configTextboxValue)
+                setAdvancedToggle(!advancedToggle)
+              }}
+            >
+              Apply
+            </button>
+          </React.Fragment>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default AdvancedEditor

package/components/AdvancedEditor/advanced-editor-styles.css

@@ -0,0 +1,3 @@
+.advanced-json-editor {
+  width: 100vw;
+}

package/components/AdvancedEditor/index.ts

@@ -0,0 +1 @@
+export { default } from './AdvancedEditor'

package/components/DataTable/DataTable.tsx

@@ -16,9 +16,10 @@ 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'
+import { pivotData } from '../../helpers/pivotData'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
@@ -52,7 +53,18 @@ 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 = useMemo(() => {
+    const data = removeNullColumns(parentRuntimeData)
+    if (config.table.pivot) {
+      const { columnName, valueColumn } = config.table.pivot
+      if (columnName && valueColumn) {
+        return pivotData(data, columnName, valueColumn)
+      }
+    }
+    return data
+  }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumn])
+
   const [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
@@ -98,25 +110,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
       })
@@ -177,25 +187,33 @@ const DataTable = (props: DataTableProps) => {
       }
     }
 
+    const getMediaControlsClasses = () => {
+      const classes = ['download-links']
+      const isLegendOnBottom = config?.legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(viewport)
+      if (config.brush?.active && !isLegendOnBottom) classes.push('brush-active')
+      if (config.brush?.active && config.legend.hide) classes.push('brush-active')
+      return classes
+    }
+
     return (
       <ErrorBoundary component='DataTable'>
-        <MediaControls.Section classes={['download-links']}>
+        <MediaControls.Section classes={getMediaControlsClasses()}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
           {(config.table.download || config.general?.showDownloadButton) && <DownloadButton rawData={getDownloadData()} fileName={`${vizTitle || 'data-table'}.csv`} headerColor={headerColor} />}
         </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,41 @@
+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'
+import { filterVizData } from '../../helpers/filterVizData'
 
 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'} />
+const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, updateConfig, viewport, isEditor }) => {
+  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(filterVizData(config.filters, config.formattedData))
+
+  useEffect(() => {
+    // when using editor changes to filter should update the data
+    setFilteredData(filterVizData(config.filters, config?.formattedData?.length > 0 ? config.formattedData : config.data))
+  }, [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} 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

@@ -1,9 +1,11 @@
-import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
 import DataTableEditor from '../../EditorPanel/DataTableEditor'
 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} />
+    <Accordion allowZeroExpanded={true}>
+      <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>
@@ -35,7 +52,7 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
           <DataTableEditor config={config} columns={columns} updateField={updateField} isDashboard={true} />
         </AccordionItemPanel>
       </AccordionItem>
-    </>
+    </Accordion>
   )
 }
 

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,7 +1,7 @@
 import Icon from '../../ui/Icon'
+import { fontSizes } from '../../../helpers/cove/fontSettings'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
-  const fontSizes = { small: 16, medium: 18, large: 20 }
   const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
   return (
     <div

package/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[]
@@ -15,7 +16,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 = () => {
@@ -57,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))

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,29 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     }
   }
 
-  return cellValue
+  // 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
+    const barSeriesExist = config.runtime?.barSeriesKeys?.includes(column)
+    const lineSeriesExist = config.runtime?.lineSeriesKeys?.includes(column)
+    const showSymbol = config.general.showSuppressedSymbol
+    if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression') {
+      switch (config.visualizationType) {
+        case 'Combo':
+          cellValue = barSeriesExist && showSymbol ? pd.iconCode : lineSeriesExist && showSymbol ? pd.lineCode : ''
+          break
+        case 'Bar':
+          cellValue = !showSymbol ? '' : pd.iconCode
+          break
+        case 'Line':
+          cellValue = !showSymbol ? '' : pd.lineCode
+          break
+      }
+    }
+  })
+  const shoMissingDataCellValue = config.general?.showMissingDataLabel && (!labelValue || labelValue === 'null')
+  return shoMissingDataCellValue ? 'N/A' : cellValue
 }

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -1,14 +1,14 @@
 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
+  if (config.visualizationType === 'Sankey') return Object.keys(config?.data?.[0]?.tableData[0])
+  const configColumns = _.cloneDeep(config.columns) || ({} as Record<string, Column>)
+  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) {
@@ -22,16 +22,40 @@ 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
-  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.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)
+    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)
+    }
+  })
+
+  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/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]
+}

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,18 @@
-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[]
+  brush: { active: boolean }
 }