@cdc/core 4.24.2 → 4.24.4

package/assets/icon-command.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false" role="img" fill="currentColor">
+    <path d="M404.83356,297.97872H354.67715V214.177h50.15641a107.08854,107.08854,0,1,0,0-214.177C345.64284,0,297.51145,47.97571,297.82294,107.01074v50.46778H214.33287V107.01074A107.09452,107.09452,0,0,0,107.32225,0C47.97572,0,0,47.97571,0,107.01074c0,59.3464,48.28721,107.6336,107.32225,107.16629h50.15628v83.80169H107.32225C47.97572,297.97872,0,345.79862,0,404.83352a107.16644,107.16644,0,1,0,214.33287,0V354.83291h83.49007v50.00061a107.08879,107.08879,0,1,0,107.01062-106.8548ZM354.67715,106.85493a50.2348,50.2348,0,1,1,50.0006,50.46791h-50.0006ZM157.47853,404.83352a50.2348,50.2348,0,1,1-50.0006-50.00061h50.0006Zm0-247.51068h-50.0006a50.2348,50.2348,0,1,1,50.0006-50.46791ZM297.97862,297.97872H214.33287V214.33285h83.64575Zm106.69913,157.3227a50.15888,50.15888,0,0,1-50.0006-50.4679V354.83291h50.0006a50.2348,50.2348,0,1,1,0,100.46851Z"/>
+</svg>

package/assets/icon-rotate-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false" role="img" fill="currentColor">
+    <path d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"/>
+</svg>

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/AdvancedEditor.jsx

@@ -51,6 +51,15 @@ export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
             <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(configTextboxValue)
+                alert('Copied!')
+              }}
+            >
+              Copy to Clipboard
+            </button>
             <textarea value={configTextboxValue} onChange={event => setConfigTextbox(event.target.value)} />
             <button className='btn full-width' onClick={() => loadConfig(JSON.parse(configTextboxValue))}>
               Apply

package/components/DataTable/DataTable.tsx

@@ -9,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'
@@ -39,12 +39,12 @@ export type DataTableProps = {
   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
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   vizTitle?: string
   // determines if columns should be wrapped in the table
   wrapColumns?: boolean
@@ -53,7 +53,6 @@ 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 [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
@@ -91,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:
@@ -115,7 +114,7 @@ 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' && config.xAxis.sortDates) {
+        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])
         }
@@ -142,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])
@@ -169,26 +181,29 @@ 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} />
-          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
+          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} fontSize={config.fontSize} viewport={viewport} />
           <div className='table-container' style={limitHeight}>
             <Table
+              viewport={viewport}
               wrapColumns={wrapColumns}
-              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData: _runtimeData }) : chartCellMatrix({ rows, ...props, runtimeData: _runtimeData, isVertical, sortBy, hasRowType })}
+              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData: _runtimeData, viewport }) : chartCellMatrix({ rows, ...props, runtimeData: _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} />}
               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}
             />
 
             {/* REGION Data Table */}
             {noRelativeRegions && config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
               <Table
+                viewport={viewport}
                 wrapColumns={wrapColumns}
                 childrenMatrix={regionCellMatrix({ config })}
                 tableName={config.visualizationType}
@@ -201,10 +216,14 @@ const DataTable = (props: DataTableProps) => {
                   </tr>
                 }
                 tableOptions={{ className: 'region-table data-table' }}
+                fontSize={config.fontSize}
               />
             )}
           </div>
         </section>
+        <div id={skipId} className='cdcdataviz-sr-only'>
+          Skipped data table.
+        </div>
       </ErrorBoundary>
     )
   } else {
@@ -212,10 +231,11 @@ 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
+              viewport={viewport}
               wrapColumns={wrapColumns}
               childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
               tableName={config.visualizationType}
@@ -223,9 +243,13 @@ const DataTable = (props: DataTableProps) => {
               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 }}
+              fontSize={config.fontSize}
             />
           </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/ExpandCollapse.tsx

@@ -1,21 +1,27 @@
 import Icon from '../../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) {
+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
+      style={{ fontSize: titleFontSize }}
+      role='button'
+      className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+      onClick={() => {
         setExpanded(!expanded)
-      }
-    }}
-  >
-    <Icon display={expanded ? 'minus' : 'plus'} base />
-    {tableTitle}
-  </div>
-)
+      }}
+      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/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/chartCellMatrix.tsx

@@ -15,7 +15,7 @@ type ChartRowsProps = DataTableProps & {
   hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy, hasRowType, viewport }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
   const dataSeriesColumnsSorted = () => {
@@ -79,7 +79,7 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
         config.visualizationType !== 'Pie'
           ? [
               <>
-                {colorScale && colorScale(seriesName) && <LegendCircle fill={colorScale(seriesName)} />}
+                {colorScale && colorScale(seriesName) && <LegendCircle viewport={viewport} fill={colorScale(seriesName)} />}
                 {seriesName}
               </>
             ]

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/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,8 +24,9 @@ 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

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

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -7,7 +7,7 @@ type MapRowsProps = DataTableProps & {
   rows: string[]
 }
 
-const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
+const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode, viewport }: MapRowsProps): ReactNode[][] => {
   return rows.map(row =>
     Object.keys(columns)
       .filter(column => columns[column].dataTable === true && columns[column].name)
@@ -31,7 +31,7 @@ const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, di
           }
           cellValue = (
             <div className='col-12'>
-              <LegendCircle fill={legendColor[0]} />
+              <LegendCircle viewport={viewport} fill={legendColor[0]} />
               <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
             </div>
           )

package/components/DataTable/types/TableConfig.ts

@@ -2,9 +2,11 @@ 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
@@ -12,17 +14,15 @@ export type TableConfig = {
   xAxis?: Axis
   yAxis?: Axis
   boxplot?: BoxPlot
-  visualizationType?: string
+  visualizationType: string
   general?: General
   columns?: Record<string, Column>
-  legend?: {
-    specialClasses?: { key: string; label: string; value: string }[]
-    hide?: boolean
-  }
+  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[]
+  fontSize: 'small' | 'medium' | 'large'
 }