@cdc/core 4.24.1 → 4.24.3

package/assets/icon-sankey.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.31 82.55"><defs><style>.c{stroke-linecap:round;stroke-width:3px;}.c,.d,.e{stroke:#000;}.e{fill:none;}</style></defs><g id="a"/><g id="b"><path class="c" d="M6.88,39.98V5.57"/><path class="c" d="M89.42,22.98V5.57"/><path class="c" d="M89.42,52.79V27.38"/><path class="c" d="M89.42,76v-18.41"/><path class="c" d="M6.88,76v-28.43"/><rect class="e" x="12.3" y="5.98" width="71.62" height="9.69"/><path class="d" d="M83.92,16.67s-11.46,1.07-27.63,11.61-27.1,16.32-35.66,17.97c-4.59,.88-8.34,.72-8.34,.72v5.31s3.75,.17,8.34-.72c8.56-1.65,19.49-7.42,35.66-17.97s27.63-11.61,27.63-11.61v-5.31Z"/><path class="e" d="M12.3,16.67s41.36,10.71,71.62,10.71v8.71s-31.58,1.88-71.62-10.71v-8.71Z"/><path class="d" d="M83.92,53.29s-13.18,1.49-35.77,9.06c0,0-18.05,7.37-35.85,7.37v-15.89c17.8,0,35.85-7.37,35.85-7.37,22.59-7.57,35.77-9.06,35.77-9.06v15.89Z"/><rect class="d" x="12.3" y="71" width="71.62" height="5.44"/><path class="e" d="M83.92,57.58l-8.82-2.38c-6.78-1.93-13.27-4.73-19.33-8.34l-14.69-8.76c-5.94-3.54-12.3-6.31-18.93-8.25l-9.85-2.88v12.14l9.85,2.88c6.64,1.94,13,4.71,18.93,8.25l14.69,8.76c6.05,3.61,12.55,6.41,19.33,8.34l8.82,2.38v-12.14Z"/></g></svg>

package/assets/icon-table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>

package/components/DataTable/DataTable.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useMemo } from 'react'
+import { timeParse } from 'd3-time-format'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -8,7 +9,7 @@ import { customSort } from './helpers/customSort'
 import ChartHeader from './components/ChartHeader'
 import BoxplotHeader from './components/BoxplotHeader'
 import MapHeader from './components/MapHeader'
-import SkipNav from './components/SkipNav'
+import SkipTo from '../elements/SkipTo'
 import ExpandCollapse from './components/ExpandCollapse'
 import mapCellMatrix from './helpers/mapCellMatrix'
 import Table from '../Table'
@@ -17,13 +18,12 @@ import regionCellMatrix from './helpers/regionCellMatrix'
 import boxplotCellMatrix from './helpers/boxplotCellMatrix'
 import customColumns from './helpers/customColumns'
 import { TableConfig } from './types/TableConfig'
+import { Column } from '../../types/Column'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
   colorScale?: Function
-  columns?: { navigate: { name: string } }
-  // determines if columns should be wrapped in the table
-  wrapColumns?: boolean
+  columns?: Record<string, Column>
   config: TableConfig
   dataConfig?: Object
   displayDataAsText?: Function
@@ -32,21 +32,27 @@ export type DataTableProps = {
   formatLegendLocation?: Function
   groupBy?: string
   headerColor?: string
+  imageRef?: string
   indexTitle?: string
+  isDebug?: boolean
+  isEditor?: boolean
   navigationHandler?: Function
+  outerContainerRef?: Function
   rawData: Object[]
-  runtimeData: Object[] | Record<string, Object> // UNSAFE
+  runtimeData: Object[] & Record<string, Object>
   setFilteredCountryCode?: Function // used for Maps only
+  showDownloadButton?: boolean
   tabbingId: string
   tableTitle: string
   viewport: string
   vizTitle?: string
+  // determines if columns should be wrapped in the table
+  wrapColumns?: boolean
 }
 
 /* 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 [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
@@ -84,7 +90,7 @@ const DataTable = (props: DataTableProps) => {
     case 'Box Plot':
       if (!config.boxplot) return <Loading />
       break
-    case 'Line' || 'Bar' || 'Combo' || 'Pie' || 'Deviation Bar' || 'Paired Bar':
+    case 'Line' || 'Bar' || 'Combo' || 'Pie' || 'Deviation Bar' || 'Paired Bar' || 'Sankey' || 'Table':
       if (!runtimeData) return <Loading />
       break
     default:
@@ -92,9 +98,9 @@ const DataTable = (props: DataTableProps) => {
       break
   }
 
-  const _runtimeData = config.table.customTableConfig ? customColumns(runtimeData, config.table.excludeColumns) : runtimeData
+  const _runtimeData = config.table.customTableConfig ? customColumns(rawData, config.table.excludeColumns) : runtimeData
 
-  const rawRows = Object.keys(_runtimeData)
+  const rawRows = Object.keys(_runtimeData).filter(column => column != 'columns')
   const rows = isVertical
     ? rawRows.sort((a, b) => {
         let dataA
@@ -108,6 +114,10 @@ const DataTable = (props: DataTableProps) => {
           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])
+        }
         return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
       })
     : rawRows
@@ -117,7 +127,7 @@ const DataTable = (props: DataTableProps) => {
     OverflowY: 'scroll'
   }
 
-  const hasRowType = !!Object.keys(rawData[0] || {}).find((v: string) => v.match(/row[_-]?type/i))
+  const hasRowType = !!Object.keys(rawData?.[0] || {}).find((v: string) => v.match(/row[_-]?type/i))
 
   const caption = useMemo(() => {
     if (config.type === 'map') {
@@ -131,12 +141,25 @@ const DataTable = (props: DataTableProps) => {
   // If a relative region is found we don't want to display the data table.
   // Takes backwards compatibility into consideration, ie !region.toType || !region.fromType
   const noRelativeRegions = config?.regions?.every(region => {
-    return (region.toType === 'Fixed' && region.fromType === 'Fixed') || (!region.toType && !region.fromType) || (!region.toType && region.fromType === 'Fixed') || (!region.fromType && region.toType === 'Fixed')
+    const toTypeFixed = region.toType === 'Fixed'
+    const fromTypeFixed = region.fromType === 'Fixed'
+    const toIsNotSet = !region.toType
+    const fromIsNotSet = !region.fromType
+    const BothFixed = toTypeFixed && fromTypeFixed
+    const NeitherFixed = toIsNotSet && fromIsNotSet
+    const ToFixedFromNotSet = toTypeFixed && fromIsNotSet
+    const FromFixedToNotSet = fromTypeFixed && toIsNotSet
+
+    return BothFixed || NeitherFixed || ToFixedFromNotSet || FromFixedToNotSet
   })
 
   // prettier-ignore
   const tableData = useMemo(() => (
-    config.visualizationType === 'Pie'
+   config.data?.[0]?.tableData
+    ? config.data?.[0]?.tableData
+    : config.visualizationType === 'Sankey'
+      ? config.data?.[0]?.tableData
+      : config.visualizationType === 'Pie'
       ? [config.yAxis.dataKey]
       : config.visualizationType === 'Box Plot'
         ? Object.entries(config.boxplot.tableData[0])
@@ -158,10 +181,10 @@ const DataTable = (props: DataTableProps) => {
       <ErrorBoundary component='DataTable'>
         <MediaControls.Section classes={['download-links']}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
-          {(config.table.download || config.general?.showDownloadButton) && <DownloadButton rawData={getDownloadData()} fileName={`${vizTitle || 'data-table'}.csv`} headerColor={headerColor} skipId={skipId} />}
+          {(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}>
-          <SkipNav skipId={skipId} />
+          <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
@@ -194,6 +217,9 @@ const DataTable = (props: DataTableProps) => {
             )}
           </div>
         </section>
+        <div id={skipId} className='cdcdataviz-sr-only'>
+          Skipped data table.
+        </div>
       </ErrorBoundary>
     )
   } else {
@@ -201,7 +227,7 @@ const DataTable = (props: DataTableProps) => {
     return (
       <ErrorBoundary component='DataTable'>
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
-          <SkipNav skipId={skipId} />
+          <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
@@ -215,6 +241,9 @@ const DataTable = (props: DataTableProps) => {
             />
           </div>
         </section>
+        <div id={skipId} className='cdcdataviz-sr-only'>
+          Skipped data table.
+        </div>
       </ErrorBoundary>
     )
   }

package/components/DataTable/DataTableStandAlone.tsx

@@ -0,0 +1,15 @@
+import { ViewPort } from '../../types/ViewPort'
+import { Visualization } from '../../types/Visualization'
+import DataTable from './DataTable'
+
+type StandAloneProps = {
+  visualizationKey: string
+  config: Visualization
+  viewport?: ViewPort
+}
+
+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'} />
+}
+
+export default DataTableStandAlone

package/components/DataTable/components/CellAnchor.tsx

@@ -1,4 +1,6 @@
 import ExternalIcon from '@cdc/core/assets/external-link.svg'
+import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
+
 // Optionally wrap cell with anchor if config defines a navigation url
 const CellAnchor = ({ markup, row, columns, navigationHandler, mapZoomHandler }) => {
   if (columns.navigate && row[columns.navigate.name]) {
@@ -16,7 +18,7 @@ const CellAnchor = ({ markup, row, columns, navigationHandler, mapZoomHandler })
         }}
       >
         {markup}
-        <ExternalIcon className='inline-icon' />
+        {isDomainExternal(row[columns.navigate.name]) && <ExternalIcon className='inline-icon' />}
       </span>
     )
   } else if (mapZoomHandler) {

package/components/DataTable/components/ChartHeader.tsx

@@ -2,6 +2,7 @@ import { getChartCellValue } from '../helpers/getChartCellValue'
 import { getSeriesName } from '../helpers/getSeriesName'
 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? }
 
@@ -16,6 +17,45 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
       dataSeriesColumns = groupHeaderRemoved
     }
   }
+
+  const handleHeaderClasses = (sortBy, text) => {
+    let classes = ['sort']
+    if (sortBy.column === text && sortBy.asc) {
+      classes.push('sort-asc')
+    }
+    if (sortBy.column === text && sortBy.desc) {
+      classes.push('sort-desc')
+    }
+    return classes.join(' ')
+  }
+
+  const ScreenReaderSortByText = ({ text, config, sortBy }) => {
+    const notApplicableText = 'Not Applicable'
+    let columnHeaderText = `${text} `
+    if (text !== '__series__' || text !== '') {
+      columnHeaderText = `${text} `
+    }
+
+    if ((text === '__series__' || text === '') && !config.table.indexLabel) {
+      columnHeaderText = notApplicableText
+    }
+
+    if ((text === '__series__' || text === '') && config.table.indexLabel) {
+      columnHeaderText = config.table.indexLabel
+    }
+
+    if (columnHeaderText === notApplicableText) return
+
+    return <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'}  order`}</span>
+  }
+
+  const ColumnHeadingText = ({ column, text, config }) => {
+    let notApplicableText = 'Not Applicable'
+    if (text === '__series__' && config.table.indexLabel) return `${config.table.indexLabel} `
+    if (text === '__series__' && !config.table.indexLabel) return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
+    return text
+  }
+
   if (isVertical) {
     if (hasRowType) {
       // find the row type column and place it at the beginning of the array
@@ -25,6 +65,7 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
         dataSeriesColumns.splice(rowTypeIndex, 1)
       }
     }
+
     return (
       <tr>
         {dataSeriesColumns.map((column, index) => {
@@ -35,7 +76,6 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
               style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
               key={`col-header-${column}__${index}`}
               tabIndex={0}
-              title={text}
               role='columnheader'
               scope='col'
               onClick={() => {
@@ -48,14 +88,12 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
                   setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
                 }
               }}
-              className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
+              className={handleHeaderClasses(sortBy, text)}
               {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
             >
-              {text}
+              <ColumnHeadingText text={text} column={column} config={config} />
               {column === sortBy.column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
-              <button>
-                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
-              </button>
+              <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
           )
         })}
@@ -68,12 +106,12 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
         {['__series__', ...Object.keys(data)].slice(sliceVal).map((row, index) => {
           let column = config.xAxis?.dataKey
           let text = row !== '__series__' ? getChartCellValue(row, column, config, data) : '__series__'
+
           return (
             <th
               style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
               key={`col-header-${text}__${index}`}
               tabIndex={0}
-              title={text}
               role='columnheader'
               scope='col'
               onClick={() => {
@@ -84,14 +122,12 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
                   setSortBy({ column: text, asc: sortBy.column === text ? !sortBy.asc : false, colIndex: index })
                 }
               }}
-              className={sortBy.column === text ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
+              className={handleHeaderClasses(sortBy, text)}
               {...(sortBy.column === text ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
             >
-              {text === '__series__' ? '' : text}
+              <ColumnHeadingText text={text} column={column} config={config} />
               {index === sortBy.colIndex && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
-              <button>
-                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === text ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
-              </button>
+              <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />
             </th>
           )
         })}

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -0,0 +1,42 @@
+import { 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'
+
+type DataTableEditorProps = {
+  config: Visualization
+  updateConfig: Function
+}
+
+const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateConfig }) => {
+  const updateField = useMemo(() => updateFieldFactory(config, updateConfig), [JSON.stringify(config)])
+  const deleteColumn = columnName => {
+    const newColumns = config.columns
+
+    delete newColumns[columnName]
+
+    updateConfig({
+      ...config,
+      columns: newColumns
+    })
+  }
+
+  const columns = Object.keys(config.columns || {})
+  return (
+    <>
+      <ColumnsEditor config={config} updateField={updateField} deleteColumn={deleteColumn} />
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Data Table</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <DataTableEditor config={config} columns={columns} updateField={updateField} isDashboard={true} />
+        </AccordionItemPanel>
+      </AccordionItem>
+    </>
+  )
+}
+
+export default DataTableEditorPanel

package/components/DataTable/components/MapHeader.tsx

@@ -1,11 +1,19 @@
 import { DataTableProps } from '../DataTable'
 import { DownIcon, UpIcon } from './Icons'
+import ScreenReaderText from '../../elements/ScreenReaderText'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
   setSortBy: Function
 }
 
+const ColumnHeadingText = ({ column, text, config }) => {
+  let notApplicableText = 'Not Applicable'
+  if (text === '__series__' && config.table.indexLabel) return `${config.table.indexLabel} `
+  if (text === '__series__' && !config.table.indexLabel) return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
+  return text
+}
+
 const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeaderProps) => {
   return (
     <tr>
@@ -27,7 +35,6 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
               key={`col-header-${column}__${index}`}
               id={column}
               tabIndex={0}
-              title={text}
               role='columnheader'
               scope='col'
               onClick={() => {
@@ -41,11 +48,9 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
               className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
               {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
             >
-              {text}
+              <ColumnHeadingText text={text} config={config} column={column} />
               {sortBy.column === column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
-              <button>
-                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
-              </button>
+              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} order`}</span>
             </th>
           )
         })}

package/components/DataTable/helpers/customColumns.ts

@@ -1,5 +1,7 @@
+type RuntimeData = Object[] & Record<string, Object>
+
 // removes null and excluded columns
-const customColumns = (runtimeData: Object[] | Record<string, Object>, excludeColumns: string[] = []): Object[] | Record<string, Object> => {
+const customColumns = (runtimeData: Object[] | RuntimeData, excludeColumns: string[] = []): RuntimeData => {
   if (!Array.isArray(runtimeData)) {
     // currently we don't support Record types
     return runtimeData
@@ -18,7 +20,7 @@ const customColumns = (runtimeData: Object[] | Record<string, Object>, excludeCo
         if (runtimeDataMemo[key] === true) row[key] = d[key]
       })
       return row
-    })
+    }) as RuntimeData
   }
 }
 

package/components/DataTable/helpers/customSort.ts

@@ -8,7 +8,16 @@ export const customSort = (a, b, sortBy, config) => {
   if (config.type === 'map') {
     valueA = standardizeStateName(a)
     valueB = standardizeStateName(b)
+    // sort for Regions table for Map
+    if (String(valueA).toLowerCase().includes('region') && String(valueB).toLowerCase().includes('region')) {
+      const numberA = parseInt(a.match(/\d+$/)[0], 10)
+      const numberB = parseInt(b.match(/\d+$/)[0], 10)
+
+      // Compare the numeric parts
+      return !sortBy.asc ? Number(numberA) - Number(numberB) : Number(numberB) - Number(numberA)
+    }
   }
+
   // Treat booleans and nulls as an empty string
   valueA = valueA === false || valueA === true || valueA === null ? '' : valueA
   valueB = valueB === false || valueB === true || valueB === null ? '' : valueB

package/components/DataTable/helpers/getChartCellValue.ts

@@ -1,5 +1,6 @@
 import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
 import { formatNumber } from '@cdc/core/helpers/cove/number'
+import { TableConfig } from '../types/TableConfig'
 
 // if its additional column, return formatting params
 const isAdditionalColumn = (column, config) => {
@@ -23,14 +24,15 @@ const isAdditionalColumn = (column, config) => {
   return formattingParams
 }
 
-export const getChartCellValue = (row, column, config, runtimeData) => {
-  if (config.table.customTableConfig) return runtimeData[row][column]
+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]
+
   const rowObj = runtimeData[row]
   let cellValue // placeholder for formatting below
   let labelValue = rowObj[column] // just raw X axis string
   if (column === config.xAxis?.dataKey) {
     // not the prettiest, but helper functions work nicely here.
-    cellValue = config.xAxis?.type === 'date' ? formatDate(config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
+    cellValue = config.xAxis?.type === 'date' ? formatDate(config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
   } else {
     let resolvedAxis = 'left'
     let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -1,5 +1,13 @@
-export const getDataSeriesColumns = (config, isVertical, runtimeData): string[] => {
+import { TableConfig } from '../types/TableConfig'
+
+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 !== 'Pie') {
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll
@@ -11,7 +19,7 @@ export const getDataSeriesColumns = (config, isVertical, runtimeData): string[]
       tmpSeriesColumns = Object.keys(runtimeData[0])
     }
   } else {
-    tmpSeriesColumns = [config.xAxis?.dataKey, config.yAxis?.dataKey] //Object.keys(runtimeData[0])
+    tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey, config.yAxis?.dataKey] : [config.yAxis?.dataKey]
   }
 
   // then add the additional Columns

package/components/DataTable/helpers/getSeriesName.ts

@@ -1,26 +1,21 @@
-const getLabel = (name, config) => {
-  let custLabel = ''
-  if (config.columns && Object.keys(config.columns).length > 0) {
-    Object.keys(config.columns).forEach(function (key) {
-      var tmpColumn = config.columns[key]
-      // add if not the index AND it is enabled to be added to data table
-      if (tmpColumn.name === name) {
-        custLabel = tmpColumn.label
-      }
-    })
-    return custLabel
+import { TableConfig } from '../types/TableConfig'
+
+const getLabel = (name: string, config: TableConfig) => {
+  const columns = Object.values(config.columns || {})
+  const matchingConfiguredColumn = columns.find(col => col.name === name)
+  if (matchingConfiguredColumn?.label) {
+    return matchingConfiguredColumn.label
   }
+  return name
 }
 
-export const getSeriesName = (column, config) => {
+export const getSeriesName = (column: string, config: TableConfig) => {
   // If a user sets the name on a series use that.
-  let userUpdatedSeriesName = config.series ? config.series.filter(series => series.dataKey === column)?.[0]?.name : ''
-  if (userUpdatedSeriesName) return userUpdatedSeriesName
-
+  const userDefinedSeries = config.series?.find(series => series.dataKey === column)
+  if (userDefinedSeries?.name) {
+    return userDefinedSeries.name
+  }
   if (config.runtimeSeriesLabels && config.runtimeSeriesLabels[column]) return config.runtimeSeriesLabels[column]
-
-  let custLabel = getLabel(column, config) ? getLabel(column, config) : column
-  let text = column === config.xAxis?.dataKey ? config.table.indexLabel : custLabel
-
-  return text
+  const columnIsDataKey = column === config.xAxis?.dataKey
+  return columnIsDataKey ? config.table.indexLabel : getLabel(column, config)
 }

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -21,7 +21,11 @@ const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, di
           let labelValue
           const mapZoomHandler = config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
           if ((config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') || config.general.type === 'us-geocode') {
+            const capitalize = str => {
+              return str.charAt(0).toUpperCase() + str.slice(1)
+            }
             labelValue = displayGeoName(row)
+            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
           } else {
             labelValue = formatLegendLocation(row)
           }

package/components/DataTable/types/TableConfig.ts

@@ -2,51 +2,26 @@ 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 { BoxPlot } from '../../../types/BoxPlot'
+import { General } from '../../../types/General'
+import { Column } from '../../../types/Column'
+import { Legend } from '@cdc/core/types/Legend'
 
 export type TableConfig = {
   type?: string
   table: Table
   xAxis?: Axis
   yAxis?: Axis
-  boxplot?: {
-    tableData: Object[]
-    labels: {
-      mean: string
-      maximum: string
-      minimum: string
-      iqr: string
-      median: string
-      q1: string
-      q3: string
-      outliers: string
-      values: string
-      total: string
-      lowerBounds: string
-      upperBounds: string
-    }
-    plots: []
-    categories: string[]
-  }
-  visualizationType?: string
-  general?: {
-    geoType: string
-    type: string
-    showDownloadButton: boolean
-    allowMapZoom?: boolean
-  }
-  columns?: {
-    geo: {
-      name: string
-    }
-  }
-  legend?: {
-    specialClasses?: { key: string; label: string; value: string }[]
-    hide?: boolean
-  }
+  boxplot?: BoxPlot
+  visualizationType: string
+  general?: General
+  columns?: Record<string, Column>
+  legend?: Legend
   series?: Series
-  regions?: { label: string; from: string; to: string; fromType: 'Fixed' | 'Previous Days'; toType: 'Fixed' | 'Last Date' }[]
+  regions?: Region[]
   runtimeSeriesLabels?: Object
   dataFormat?: Object
-  runtime: Runtime
+  runtime?: Runtime
   data: Object[]
 }