@cdc/core 4.23.10-alpha → 4.23.11

package/assets/icon-deviation-bar.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99.1 79.69"><defs><style>.cls-1{fill:#231f20;}</style></defs><rect class="cls-1" x="46.87" y="5.79" width="8.32" height="67.79" rx="1"/><rect class="cls-1" x="23.98" y="17.65" width="8.32" height="23.31" rx="1" transform="translate(57.44 1.16) rotate(90)"/><rect class="cls-1" x="19.53" y="25.99" width="8.32" height="32.21" rx="1" transform="translate(65.79 18.41) rotate(90)"/><rect class="cls-1" x="27.33" y="60.4" width="8.32" height="14.6" rx="1" transform="translate(99.19 36.2) rotate(90)"/><path class="cls-1" d="M81,52.74v4.32H64.55V52.74H81m1-2H63.55a1,1,0,0,0-1,1v6.32a1,1,0,0,0,1,1H82a1,1,0,0,0,1-1V51.74a1,1,0,0,0-1-1Z"/><path class="cls-1" d="M90,14.41v4.33H64.55V14.41H90m1-2H63.55a1,1,0,0,0-1,1v6.33a1,1,0,0,0,1,1H91a1,1,0,0,0,1-1V13.41a1,1,0,0,0-1-1Z"/></svg>

package/components/DataTable/DataTable.tsx

@@ -0,0 +1,205 @@
+import { useEffect, useState, useMemo } from 'react'
+
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import MediaControls from '@cdc/core/components/MediaControls'
+import Loading from '@cdc/core/components/Loading'
+import DownloadButton from '../DownloadButton'
+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 ExpandCollapse from './components/ExpandCollapse'
+import mapCellMatrix from './helpers/mapCellMatrix'
+import Table from '../Table'
+import chartCellMatrix from './helpers/chartCellMatrix'
+import regionCellMatrix from './helpers/regionCellMatrix'
+import boxplotCellMatrix from './helpers/boxplotCellMatrix'
+import { TableConfig } from './types/TableConfig'
+
+export type DataTableProps = {
+  applyLegendToRow?: Function
+  colorScale?: Function
+  columns?: { navigate: { name: string } }
+  config: TableConfig
+  dataConfig?: Object
+  displayDataAsText?: Function
+  displayGeoName?: Function
+  expandDataTable: boolean
+  formatLegendLocation?: Function
+  groupBy?: string
+  headerColor?: string
+  indexTitle?: string
+  navigationHandler?: Function
+  rawData: Object[]
+  runtimeData: Object[] | Record<string, Object> // UNSAFE
+  setFilteredCountryCode?: Function // used for Maps only
+  tabbingId: string
+  tableTitle: string
+  viewport: string
+  vizTitle?: string
+}
+
+/* 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 } = props
+
+  const [expanded, setExpanded] = useState(expandDataTable)
+
+  const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
+
+  const [accessibilityLabel, setAccessibilityLabel] = useState('')
+
+  const isVertical = !(config.type === 'chart' && !config.table?.showVertical)
+
+  const rand = Math.random().toString(16).substr(2, 8)
+  const skipId = `btn__${rand}`
+
+  const mapLookup = {
+    'us-county': 'United States County Map',
+    'single-state': 'State Map',
+    us: 'United States Map',
+    world: 'World Map'
+  }
+
+  // Change accessibility label depending on expanded status
+  useEffect(() => {
+    const expandedLabel = 'Accessible data table.'
+    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
+
+    if (expanded === true && accessibilityLabel !== expandedLabel) {
+      setAccessibilityLabel(expandedLabel)
+    }
+
+    if (expanded === false && accessibilityLabel !== collapsedLabel) {
+      setAccessibilityLabel(collapsedLabel)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expanded])
+
+  switch (config.visualizationType) {
+    case 'Box Plot':
+      if (!config.boxplot) return <Loading />
+      break
+    case 'Line' || 'Bar' || 'Combo' || 'Pie' || 'Deviation Bar' || 'Paired Bar':
+      if (!runtimeData) return <Loading />
+      break
+    default:
+      if (!runtimeData) return <Loading />
+      break
+  }
+
+  const rawRows = Object.keys(runtimeData)
+  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]
+        }
+        if (config.type === 'chart' || config.type === 'dashboard') {
+          dataA = runtimeData[a][sortBy.column]
+          dataB = runtimeData[b][sortBy.column]
+        }
+        return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
+      })
+    : rawRows
+
+  const limitHeight = {
+    maxHeight: config.table.limitHeight && `${config.table.height}px`,
+    OverflowY: 'scroll'
+  }
+
+  const caption = useMemo(() => {
+    if (config.type === 'map') {
+      return config.table.caption ? config.table.caption : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
+    } else {
+      return config.table.caption ? config.table.caption : `Data table showing data for the ${config.type} figure.`
+    }
+  }, [config.table.caption])
+
+  // prettier-ignore
+  const tableData = useMemo(() => (
+    config.visualizationType === 'Pie'
+      ? [config.yAxis.dataKey]
+      : config.visualizationType === 'Box Plot'
+        ? Object.entries(config.boxplot.tableData[0])
+        : config.runtime?.seriesKeys),
+    [config.runtime?.seriesKeys]) // eslint-disable-line
+
+  if (config.visualizationType !== 'Box Plot') {
+    const getDownloadData = () => {
+      // only use fullGeoName on County maps and no other
+      if (config.general?.geoType === 'us-county') {
+        // Add column for full Geo name along with State
+        return rawData.map(row => ({ FullGeoName: formatLegendLocation(row[config.columns.geo.name]), ...row }))
+      } else {
+        return rawData
+      }
+    }
+
+    return (
+      <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} />}
+        </MediaControls.Section>
+        <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+          <SkipNav skipId={skipId} />
+          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          <div className='table-container' style={limitHeight}>
+            <Table
+              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, ...props }) : chartCellMatrix({ rows, ...props, isVertical, sortBy })}
+              tableName={config.type}
+              caption={caption}
+              stickyHeader
+              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={runtimeData} {...props} 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 }}
+            />
+
+            {/* REGION Data Table */}
+            {config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
+              <Table
+                childrenMatrix={regionCellMatrix({ config })}
+                tableName={config.visualizationType}
+                caption='Table of the highlighted regions in the visualization'
+                headContent={
+                  <tr>
+                    <th>Region Name</th>
+                    <th>Start Date</th>
+                    <th>End Date</th>
+                  </tr>
+                }
+                tableOptions={{ className: 'region-table data-table' }}
+              />
+            )}
+          </div>
+        </section>
+      </ErrorBoundary>
+    )
+  } else {
+    // Render Data Table for Box Plots
+    return (
+      <ErrorBoundary component='DataTable'>
+        <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+          <SkipNav skipId={skipId} />
+          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          <div className='table-container' style={limitHeight}>
+            <Table
+              childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
+              tableName={config.visualizationType}
+              caption={caption}
+              stickyHeader
+              headContent={<BoxplotHeader categories={config.boxplot.categories} />}
+              tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`, 'aria-live': 'assertive', 'aria-rowcount': 11, hidden: !expanded }}
+            />
+          </div>
+        </section>
+      </ErrorBoundary>
+    )
+  }
+}
+
+export default DataTable

package/components/DataTable/components/BoxplotHeader.tsx

@@ -0,0 +1,16 @@
+const BoxplotHeader = ({ categories }) => {
+  let columns = ['Measures', ...categories]
+  return (
+    <tr>
+      {columns.map(column => {
+        return (
+          <th key={`col-header-${column}`} tabIndex={0} title={column} role='columnheader' scope='col'>
+            {column}
+          </th>
+        )
+      })}
+    </tr>
+  )
+}
+
+export default BoxplotHeader

package/components/DataTable/components/CellAnchor.tsx

@@ -0,0 +1,44 @@
+import ExternalIcon from '@cdc/core/assets/external-link.svg'
+// 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]) {
+    return (
+      <span
+        onClick={() => navigationHandler(row[columns.navigate.name])}
+        className='table-link'
+        title='Click for more information (Opens in a new window)'
+        role='link'
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.keyCode === 13) {
+            navigationHandler(row[columns.navigate.name])
+          }
+        }}
+      >
+        {markup}
+        <ExternalIcon className='inline-icon' />
+      </span>
+    )
+  } else if (mapZoomHandler) {
+    return (
+      <span
+        onClick={mapZoomHandler}
+        className='table-link'
+        title='Click to view on map'
+        role='link'
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.keyCode === 13) {
+            mapZoomHandler()
+          }
+        }}
+      >
+        {markup}
+      </span>
+    )
+  }
+
+  return <>{markup}</>
+}
+
+export default CellAnchor

package/components/DataTable/components/ChartHeader.tsx

@@ -0,0 +1,91 @@
+import { getChartCellValue } from '../helpers/getChartCellValue'
+import { getSeriesName } from '../helpers/getSeriesName'
+import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
+import { DownIcon, UpIcon } from './Icons'
+
+type ChartHeaderProps = { data; isVertical; config; runtimeData; setSortBy; sortBy; groupBy? }
+
+const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy, groupBy }: ChartHeaderProps) => {
+  if (!data) return
+  let dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
+  if (groupBy) {
+    let groupHeaderRemoved = dataSeriesColumns.filter(col => col !== groupBy)
+    if (groupHeaderRemoved.length != dataSeriesColumns.length) {
+      // match was found
+      // assign headers with groupHeaderRemoved
+      dataSeriesColumns = groupHeaderRemoved
+    }
+  }
+  if (isVertical) {
+    return (
+      <tr>
+        {dataSeriesColumns.map((column, index) => {
+          const text = getSeriesName(column, config)
+
+          return (
+            <th
+              key={`col-header-${column}__${index}`}
+              tabIndex={0}
+              title={text}
+              role='columnheader'
+              scope='col'
+              onClick={() => {
+                setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
+                }
+              }}
+              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}
+              {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>
+            </th>
+          )
+        })}
+      </tr>
+    )
+  } else {
+    const sliceVal = config.visualizationType === 'Pie' ? 1 : 0
+    return (
+      <tr>
+        {['__series__', ...Object.keys(runtimeData)].slice(sliceVal).map((row, index) => {
+          let column = config.xAxis?.dataKey
+          let text = row !== '__series__' ? getChartCellValue(row, column, config, runtimeData) : '__series__'
+          return (
+            <th
+              key={`col-header-${text}__${index}`}
+              tabIndex={0}
+              title={text}
+              role='columnheader'
+              scope='col'
+              onClick={() => {
+                setSortBy({ column: text, asc: sortBy.column === text ? !sortBy.asc : false, colIndex: index })
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  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'}
+              {...(sortBy.column === text ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
+            >
+              {text === '__series__' ? '' : text}
+              {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>
+            </th>
+          )
+        })}
+      </tr>
+    )
+  }
+}
+
+export default ChartHeader

package/components/DataTable/components/ExpandCollapse.tsx

@@ -0,0 +1,21 @@
+import Icon from '@cdc/core/components/ui/Icon'
+
+const ExpandCollapse = ({ expanded, setExpanded, tableTitle }) => (
+  <div
+    className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+    onClick={() => {
+      setExpanded(!expanded)
+    }}
+    tabIndex={0}
+    onKeyDown={e => {
+      if (e.keyCode === 13) {
+        setExpanded(!expanded)
+      }
+    }}
+  >
+    <Icon display={expanded ? 'minus' : 'plus'} base />
+    {tableTitle}
+  </div>
+)
+
+export default ExpandCollapse

package/components/DataTable/components/Icons.tsx

@@ -0,0 +1,10 @@
+export const UpIcon = () => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+    <path d='M0 5l5-5 5 5z' />
+  </svg>
+)
+export const DownIcon = () => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+    <path d='M0 0l5 5 5-5z' />
+  </svg>
+)

package/components/DataTable/components/MapHeader.tsx

@@ -0,0 +1,56 @@
+import { DataTableProps } from '../DataTable'
+import { DownIcon, UpIcon } from './Icons'
+
+type MapHeaderProps = DataTableProps & {
+  sortBy: { column; asc }
+  setSortBy: Function
+}
+
+const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeaderProps) => {
+  return (
+    <tr>
+      {Object.keys(columns)
+        .filter(column => columns[column].dataTable === true && columns[column].name)
+        .map((column, index) => {
+          let text
+          if (column !== 'geo') {
+            text = columns[column].label ? columns[column].label : columns[column].name
+          } else {
+            text = config.type === 'map' ? indexTitle : config.xAxis?.dataKey
+          }
+          if (config.type === 'map' && (text === undefined || text === '')) {
+            text = 'Location'
+          }
+
+          return (
+            <th
+              key={`col-header-${column}__${index}`}
+              id={column}
+              tabIndex={0}
+              title={text}
+              role='columnheader'
+              scope='col'
+              onClick={() => {
+                setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
+                }
+              }}
+              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}
+              {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>
+            </th>
+          )
+        })}
+    </tr>
+  )
+}
+
+export default MapHeader

package/components/DataTable/components/SkipNav.tsx

@@ -0,0 +1,7 @@
+const SkipNav = skipId => (
+  <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
+    Skip Navigation or Skip to Content
+  </a>
+)
+
+export default SkipNav

package/components/DataTable/helpers/boxplotCellMatrix.tsx

@@ -0,0 +1,64 @@
+import { CellMatrix } from '../../Table/types/CellMatrix'
+
+const boxplotCellMatrix = ({ rows, config }): CellMatrix => {
+  const resolveName = key => {
+    let {
+      boxplot: { labels }
+    } = config
+    const columnLookup = {
+      columnMean: labels.mean,
+      columnMax: labels.maximum,
+      columnMin: labels.minimum,
+      columnIqr: labels.iqr,
+      columnCategory: 'Category',
+      columnMedian: labels.median,
+      columnFirstQuartile: labels.q1,
+      columnThirdQuartile: labels.q3,
+      columnOutliers: labels.outliers,
+      values: labels.values,
+      columnTotal: labels.total,
+      columnSd: 'Standard Deviation',
+      nonOutlierValues: 'Non Outliers',
+      columnLowerBounds: labels.lowerBounds,
+      columnUpperBounds: labels.upperBounds
+    }
+
+    let resolvedName = columnLookup[key]
+
+    return resolvedName
+  }
+  let resolveCell = (rowid, plot) => {
+    if (Number(rowid) === 0) return true
+    if (Number(rowid) === 1) return plot.columnMax
+    if (Number(rowid) === 2) return plot.columnThirdQuartile
+    if (Number(rowid) === 3) return plot.columnMedian
+    if (Number(rowid) === 4) return plot.columnFirstQuartile
+    if (Number(rowid) === 5) return plot.columnMin
+    if (Number(rowid) === 6) return plot.columnTotal
+    if (Number(rowid) === 7) return plot.columnSd
+    if (Number(rowid) === 8) return plot.columnMean
+    if (Number(rowid) === 9) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
+    if (Number(rowid) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
+    return <p>-</p>
+  }
+  // get list of data keys for each row
+  let dataKeys = rows.map(row => {
+    return row[0]
+  })
+  let columns = ['Measures', ...config.boxplot.categories]
+  dataKeys.shift() // remove index 0 // we did header column separately
+  return dataKeys.map((rowkey, index) => {
+    return columns.map((column, colnum) => {
+      let cellValue
+      if (column === 'Measures') {
+        let labelValue = index > 0 ? resolveName(rowkey) : ''
+        cellValue = <>{labelValue}</>
+      } else {
+        cellValue = resolveCell(index, config.boxplot.plots[colnum - 1])
+      }
+      return cellValue
+    })
+  })
+}
+
+export default boxplotCellMatrix

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -0,0 +1,78 @@
+import LegendCircle from '@cdc/core/components/LegendCircle'
+import { customSort } from './customSort'
+import { getSeriesName } from './getSeriesName'
+import { DataTableProps } from '../DataTable'
+import { getChartCellValue } from './getChartCellValue'
+import { getDataSeriesColumns } from './getDataSeriesColumns'
+import { ReactNode } from 'react'
+import { CellMatrix, GroupCellMatrix } from '../../Table/types/CellMatrix'
+
+type ChartRowsProps = DataTableProps & {
+  rows: string[]
+  isVertical: boolean
+  sortBy: { colIndex; column }
+  groupBy?: string
+}
+
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+  const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
+
+  const dataSeriesColumnsSorted = () => {
+    if (!sortBy && sortBy.colIndex === null) return dataSeriesColumns
+    return dataSeriesColumns.sort((a, b) => {
+      if (sortBy.column === '__series__') return customSort(a, b, sortBy, config)
+      let row = runtimeData.find(d => d[config.xAxis?.dataKey] === sortBy.column)
+
+      const rowIndex = runtimeData[sortBy.colIndex - 1]
+      if (row) {
+        return customSort(row[a], row[b], sortBy, config)
+      }
+      if (row === undefined && rowIndex) {
+        return customSort(rowIndex[a], rowIndex[b], sortBy, config)
+      }
+    })
+  }
+
+  if (isVertical) {
+    if (groupBy) {
+      const cellMatrix: GroupCellMatrix = {}
+      rows.forEach(row => {
+        let groupKey: string
+        let groupValues = []
+        dataSeriesColumns.forEach((column, j) => {
+          if (groupBy === column) {
+            groupKey = getChartCellValue(row, column, config, runtimeData)
+          } else {
+            groupValues.push(getChartCellValue(row, column, config, runtimeData))
+          }
+        })
+        if (!cellMatrix[groupKey]) {
+          cellMatrix[groupKey] = [groupValues]
+        } else {
+          cellMatrix[groupKey].push(groupValues)
+        }
+      })
+      return cellMatrix
+    } else {
+      return rows.map(row => {
+        return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))
+      })
+    }
+  } else {
+    return dataSeriesColumnsSorted().map(column => {
+      const seriesName = getSeriesName(column, config)
+      let nodes: ReactNode[] =
+        config.visualizationType !== 'Pie'
+          ? [
+              <>
+                {colorScale && colorScale(seriesName) && <LegendCircle fill={colorScale(seriesName)} />}
+                {seriesName}
+              </>
+            ]
+          : []
+      return nodes.concat(rows.map((row, i) => getChartCellValue(row, column, config, runtimeData)))
+    })
+  }
+}
+
+export default chartCellArray

package/components/DataTable/helpers/customSort.ts

@@ -0,0 +1,55 @@
+import { parseDate } from '@cdc/core/helpers/cove/date'
+import { standardizeStateName } from './standardizeState'
+
+export const customSort = (a, b, sortBy, config) => {
+  let valueA = a
+  let valueB = b
+
+  if (config.type === 'map') {
+    valueA = standardizeStateName(a)
+    valueB = standardizeStateName(b)
+  }
+  // Treat booleans and nulls as an empty string
+  valueA = valueA === false || valueA === true || valueA === null ? '' : valueA
+  valueB = valueB === false || valueB === true || valueB === null ? '' : valueB
+
+  const trimmedA = String(valueA).trim()
+  const trimmedB = String(valueB).trim()
+
+  if (config.xAxis?.dataKey === sortBy.column && config.xAxis.type === 'date') {
+    let dateA = parseDate(config.xAxis.dateParseFormat, trimmedA)
+
+    let dateB = parseDate(config.xAxis.dateParseFormat, trimmedB)
+
+    if (dateA && dateA.getTime) dateA = dateA.getTime()
+
+    if (dateB && dateB.getTime) dateB = dateB.getTime()
+
+    return !sortBy.asc ? dateA - dateB : dateB - dateA
+  }
+  // Check if values are numbers
+  const isNumA = !isNaN(Number(valueA)) && valueA !== undefined && valueA !== null && trimmedA !== ''
+  const isNumB = !isNaN(Number(valueB)) && valueB !== undefined && valueB !== null && trimmedB !== ''
+
+  // Handle empty strings or spaces
+  if (trimmedA === '' && trimmedB !== '') return !sortBy.asc ? -1 : 1
+  if (trimmedA !== '' && trimmedB === '') return !sortBy.asc ? 1 : -1
+
+  // Both are numbers: Compare numerically
+  if (isNumA && isNumB) {
+    return !sortBy.asc ? Number(valueA) - Number(valueB) : Number(valueB) - Number(valueA)
+  }
+
+  // Only A is a number
+  if (isNumA) {
+    return !sortBy.asc ? -1 : 1
+  }
+
+  // Only B is a number
+  if (isNumB) {
+    return !sortBy.asc ? 1 : -1
+  }
+
+  // Neither are numbers: Compare as strings
+  return !sortBy.asc ? trimmedA.localeCompare(trimmedB) : trimmedB.localeCompare(trimmedA)
+}