@cdc/core 4.24.9-1 → 4.24.10

package/assets/icon-combo-chart.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"><g id="a"><path d="M88.56,66.3H15.36V9.68c0-1.1-.9-2-2-2H7.89c-1.1,0-2,.9-2,2V73.77c0,1.1,.9,2,2,2H88.56c1.1,0,2-.9,2-2v-5.48c0-1.1-.9-2-2-2Z"/><path d="M18.36,54.67v6.94c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-6.94c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M30.43,45.3v16.31c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-16.31c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M42.51,32.3v29.31c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-29.31c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M54.58,32.3v29.31c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-29.31c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M66.66,42.22v19.33c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-19.33c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M78.73,58.89v2.72c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-2.72c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><g><path d="M20.25,38.69c-.65,0-1.3-.32-1.68-.91-.6-.93-.34-2.16,.59-2.77,.01,0,1.17-.76,2.86-1.92,.91-.62,2.16-.39,2.78,.52,.62,.91,.39,2.16-.52,2.78-1.75,1.2-2.95,1.98-2.95,1.98-.34,.22-.71,.32-1.09,.32Z"/><path d="M28.5,32.92c-.61,0-1.21-.28-1.6-.8-.66-.88-.48-2.14,.4-2.8,1.91-1.43,3.51-2.72,4.76-3.83l.21-.19c.82-.74,2.09-.67,2.82,.16,.74,.82,.66,2.09-.16,2.82l-.22,.2c-1.34,1.19-3.03,2.55-5.02,4.04-.36,.27-.78,.4-1.2,.4Zm50.28-1.66c-.34,0-.68-.09-1-.27-1.64-.95-3.38-2.08-5.66-3.67-.91-.63-1.13-1.88-.49-2.79,.63-.9,1.88-1.13,2.79-.49,2.17,1.52,3.83,2.6,5.37,3.48,.96,.55,1.28,1.78,.73,2.73-.37,.64-1.04,1-1.73,1Zm-40.24-6.8c-.58,0-1.15-.25-1.55-.73-.7-.85-.58-2.11,.28-2.81,1.98-1.63,3.82-2.93,5.61-3.98,.95-.56,2.18-.24,2.74,.72s.24,2.18-.72,2.74c-1.61,.94-3.27,2.12-5.09,3.62-.37,.31-.82,.45-1.27,.45Zm29.37-.59c-.4,0-.8-.12-1.15-.37-1.61-1.13-3.5-2.44-5.34-3.52-.95-.56-1.27-1.78-.72-2.74,.56-.95,1.78-1.27,2.74-.72,1.98,1.16,3.95,2.52,5.63,3.7,.9,.64,1.12,1.88,.48,2.79-.39,.55-1.01,.85-1.64,.85Zm-18-5.77c-.89,0-1.7-.6-1.93-1.49-.28-1.07,.36-2.16,1.43-2.44,1.72-.45,3.46-.68,5.17-.68,.71,0,1.46,.08,2.24,.24,1.08,.23,1.77,1.29,1.55,2.37s-1.29,1.77-2.37,1.55c-.5-.11-.98-.16-1.42-.16-1.37,0-2.77,.18-4.16,.55-.17,.04-.34,.07-.51,.07Z"/><path d="M88.21,34.46c-1.26,0-2.6-.2-4-.6-1.06-.3-1.68-1.41-1.37-2.47,.3-1.06,1.41-1.68,2.47-1.37,1.04,.3,2.02,.45,2.9,.45,1.1,0,2,.9,2,2s-.9,2-2,2Z"/></g></g><g id="b"/></svg>

package/assets/icon-epi-chart.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 96.3 82.6" style="enable-background:new 0 0 96.3 82.6;" xml:space="preserve">
+<path d="M88.6,66.5H15.4V7.6c0-1.1-0.9-2-2-2H7.9c-1.1,0-2,0.9-2,2V74c0,1.1,0.9,2,2,2h80.7c1.1,0,2-0.9,2-2v-5.5
+	C90.6,67.4,89.7,66.5,88.6,66.5L88.6,66.5z"/>
+<path d="M31.7,51.1V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-11.9c0-1.1-0.9-2-2-2h-0.9C32.6,49.1,31.7,50,31.7,51.1L31.7,51.1z
+	"/>
+<path d="M38.7,41.7V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-21.3c0-1.1-0.9-2-2-2h-0.9C39.6,39.7,38.7,40.6,38.7,41.7
+	L38.7,41.7z"/>
+<path d="M45.7,28.7V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-34.3c0-1.1-0.9-2-2-2h-0.9C46.6,26.7,45.7,27.6,45.7,28.7
+	L45.7,28.7z"/>
+<path d="M59.7,28.7V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-34.3c0-1.1-0.9-2-2-2h-0.9C60.6,26.7,59.7,27.6,59.7,28.7
+	L59.7,28.7z"/>
+<path d="M52.7,23.6V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-39.4c0-1.1-0.9-2-2-2h-0.9C53.6,21.6,52.7,22.5,52.7,23.6
+	L52.7,23.6z"/>
+<path d="M66.8,38.6v24.3c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-24.3c0-1.1-0.9-2-2-2h-0.9C67.7,36.6,66.8,37.5,66.8,38.6
+	L66.8,38.6z"/>
+<path d="M73.8,55.3V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-7.7c0-1.1-0.9-2-2-2h-0.9C74.7,53.3,73.8,54.2,73.8,55.3L73.8,55.3
+	z"/>
+<path d="M24.7,55.3V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-7.7c0-1.1-0.9-2-2-2h-0.9C25.6,53.3,24.7,54.2,24.7,55.3L24.7,55.3
+	z"/>
+<path d="M17.6,61.5V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2v-1.6c0-1.1-1-1.9-2.1-1.9h-0.9C18.5,59.5,17.6,60.4,17.6,61.5L17.6,61.5
+	z"/>
+<path d="M80.8,61.5V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2v-1.6c0-1.1-1-1.9-2.1-1.9h-0.9C81.7,59.5,80.8,60.4,80.8,61.5L80.8,61.5
+	z"/>
+</svg>

package/components/BlurStrokeText.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Text } from '@visx/text'
+
+// Extension for visx Text component that creates a second text element and a def with a blur effect to create a feathered stroke effect using a filter with Gaussian blur. No actual stroke is used
+
+export interface BlurStrokeTextProps extends React.ComponentProps<typeof Text> {
+  blurRadius?: number
+  stroke?: string
+  strokeWidth?: number
+  strokeMiterLimit?: number
+  disableStroke?: boolean
+  disableBlur?: boolean
+}
+
+export const BlurStrokeText: React.FC<BlurStrokeTextProps> = ({
+  blurRadius = 1,
+  stroke = 'white',
+  strokeWidth = 8,
+  strokeMiterLimit = 2,
+  disableStroke = false,
+  disableBlur = false,
+  ...props
+}) => {
+  return (
+    <>
+      <defs>
+        <filter id='blur' x='-50%' y='-50%' width='200%' height='200%'>
+          <feGaussianBlur in='SourceGraphic' stdDeviation={blurRadius} />
+        </filter>
+      </defs>
+      {!disableStroke && (
+        <Text
+          {...props}
+          filter={disableBlur ? undefined : 'url(#blur)'}
+          fill={stroke}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeMiterlimit={strokeMiterLimit}
+        />
+      )}
+      <Text {...props} />
+    </>
+  )
+}

package/components/DataTable/DataTable.tsx

@@ -20,6 +20,8 @@ import removeNullColumns from './helpers/removeNullColumns'
 import { TableConfig } from './types/TableConfig'
 import { Column } from '../../types/Column'
 import { pivotData } from '../../helpers/pivotData'
+import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+import './data-table.css'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
@@ -71,9 +73,9 @@ const DataTable = (props: DataTableProps) => {
   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)
+      const { columnName, valueColumns } = config.table.pivot
+      if (columnName && valueColumns) {
+        return pivotData(data, columnName, valueColumns)
       }
     }
     return data
@@ -130,26 +132,27 @@ const DataTable = (props: DataTableProps) => {
   }
 
   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]
-        }
-        if (config.type === 'chart' || config.type === 'dashboard') {
-          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
+  const rows =
+    isVertical && sortBy.column
+      ? 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 (['chart', 'dashboard', 'table'].includes(config.type)) {
+            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
 
   const limitHeight = {
     maxHeight: config.table.limitHeight && `${config.table.height}px`,
@@ -208,17 +211,21 @@ const DataTable = (props: DataTableProps) => {
       }
     }
 
-    const getMediaControlsClasses = () => {
+    const getMediaControlsClasses = belowTable => {
       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')
+      if (!belowTable) {
+        const isLegendOnBottom = config?.legend?.position === 'bottom' || isLegendWrapViewport(viewport)
+        if (config.brush?.active && !isLegendOnBottom) classes.push('brush-active')
+        if (config.brush?.active && config.legend.hide) classes.push('brush-active')
+      } else {
+        classes.push('below-table')
+      }
       return classes
     }
 
-    return (
-      <ErrorBoundary component='DataTable'>
-        <MediaControls.Section classes={getMediaControlsClasses()}>
+    const TableMediaControls = ({ belowTable }) => {
+      return (
+        <MediaControls.Section classes={getMediaControlsClasses(belowTable)}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
           {(config.table.download || config.general?.showDownloadButton) && (
             <DownloadButton
@@ -228,9 +235,17 @@ const DataTable = (props: DataTableProps) => {
             />
           )}
         </MediaControls.Section>
+      )
+    }
+
+    return (
+      <ErrorBoundary component='DataTable'>
+        {!config.table.showDownloadLinkBelow && <TableMediaControls />}
         <section
           id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport} w-100`}
+          className={`data-table-container ${viewport} ${
+            !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
+          }`}
           aria-label={accessibilityLabel}
         >
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
@@ -272,7 +287,7 @@ const DataTable = (props: DataTableProps) => {
                 )
               }
               tableOptions={{
-                className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${
+                className: `table table-striped ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${
                   isVertical ? '' : ' horizontal'
                 }`,
                 'aria-live': 'assertive',
@@ -300,12 +315,13 @@ const DataTable = (props: DataTableProps) => {
                       <th>End Date</th>
                     </tr>
                   }
-                  tableOptions={{ className: 'region-table data-table' }}
+                  tableOptions={{ className: 'table table-striped region-table data-table' }}
                   fontSize={config.fontSize}
                 />
               )}
           </div>
         </section>
+        {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
         <div id={skipId} className='cdcdataviz-sr-only'>
           Skipped data table.
         </div>
@@ -317,7 +333,7 @@ const DataTable = (props: DataTableProps) => {
       <ErrorBoundary component='DataTable'>
         <section
           id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport} w-100`}
+          className={`data-table-container ${viewport}`}
           aria-label={accessibilityLabel}
         >
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
@@ -332,7 +348,7 @@ const DataTable = (props: DataTableProps) => {
               stickyHeader
               headContent={<BoxplotHeader categories={config.boxplot.categories} />}
               tableOptions={{
-                className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`,
+                className: `table table-striped ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`,
                 'aria-live': 'assertive',
                 'aria-rowcount': 11,
                 hidden: !expanded

package/components/DataTable/DataTableStandAlone.tsx

@@ -15,25 +15,56 @@ type StandAloneProps = {
   updateConfig?: (Visualization) => void
 }
 
-const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, updateConfig, viewport, isEditor }) => {
-  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(filterVizData(config.filters, config.formattedData))
+const DataTableStandAlone: React.FC<StandAloneProps> = ({
+  visualizationKey,
+  config,
+  updateConfig,
+  viewport,
+  isEditor
+}) => {
+  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(
+    filterVizData(config.filters, config.formattedData || config.data)
+  )
 
   useEffect(() => {
     // when using editor changes to filter should update the data
-    setFilteredData(filterVizData(config.filters, config?.formattedData?.length > 0 ? config.formattedData : config.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}>
+      <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'} />
+      <Filters
+        config={config}
+        setConfig={updateConfig}
+        setFilteredData={setFilteredData}
+        filteredData={filteredData}
+        excludedData={config.formattedData}
+      />
+      <DataTable
+        expandDataTable={config.table.expanded}
+        config={config}
+        rawData={config.data}
+        runtimeData={filteredData}
+        tabbingId={visualizationKey}
+        tableTitle={config.table.label}
+        viewport={viewport || 'lg'}
+      />
     </>
   )
 }

package/components/DataTable/components/ChartHeader.tsx

@@ -1,8 +1,9 @@
 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'
+import { SortIcon } from './SortIcon'
+import { getNewSortBy } from '../helpers/getNewSortBy'
 
 type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType? }
 
@@ -19,17 +20,6 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
     }
   }
 
-  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} `
@@ -47,13 +37,19 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
 
     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>
+    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 }) => {
+    if (text === 'pivotColumn') return ''
     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>
+    if (text === '__series__' && !config.table.indexLabel)
+      return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
     return text
   }
 
@@ -71,7 +67,8 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
       <tr>
         {dataSeriesColumns.map((column, index) => {
           const text = getSeriesName(column, config)
-
+          const newSortBy = getNewSortBy(sortBy, column, index)
+          const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
           return (
             <th
               style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
@@ -81,19 +78,22 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
               scope='col'
               onClick={() => {
                 if (hasRowType) return
-                setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
+                setSortBy(newSortBy)
               }}
               onKeyDown={e => {
                 if (hasRowType) return
                 if (e.keyCode === 13) {
-                  setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
+                  setSortBy(newSortBy)
                 }
               }}
-              className={handleHeaderClasses(sortBy, text)}
-              {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
+              {...(sortBy.column === column
+                ? sortBy.asc
+                  ? { 'aria-sort': 'ascending' }
+                  : { 'aria-sort': 'descending' }
+                : null)}
             >
               <ColumnHeadingText text={text} column={column} config={config} />
-              {column === sortBy.column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
+              {column === sortBy.column && !hasRowType && <SortIcon ascending={sortByAsc} />}
               <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
           )
@@ -107,7 +107,8 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
         {['__series__', ...Object.keys(data)].slice(sliceVal).map((row, index) => {
           let column = config.xAxis?.dataKey
           let text = row !== '__series__' ? getChartCellValue(row, column, config, data) : '__series__'
-
+          const newSortBy = getNewSortBy(sortBy, column, index)
+          const sortByAsc = sortBy.colIndex === index ? sortBy.asc : undefined
           return (
             <th
               style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
@@ -116,18 +117,22 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
               role='columnheader'
               scope='col'
               onClick={() => {
-                setSortBy({ column: text, asc: sortBy.column === text ? !sortBy.asc : false, colIndex: index })
+                setSortBy(newSortBy)
               }}
               onKeyDown={e => {
                 if (e.keyCode === 13) {
-                  setSortBy({ column: text, asc: sortBy.column === text ? !sortBy.asc : false, colIndex: index })
+                  setSortBy(newSortBy)
                 }
               }}
-              className={handleHeaderClasses(sortBy, text)}
-              {...(sortBy.column === text ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
+              {...(sortBy.column === text
+                ? sortBy.asc
+                  ? { 'aria-sort': 'ascending' }
+                  : { 'aria-sort': 'descending' }
+                : null)}
             >
               <ColumnHeadingText text={text} column={column} config={config} />
-              {index === sortBy.colIndex && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
+              {index === sortBy.colIndex && !hasRowType && <SortIcon ascending={sortByAsc} />}
+
               <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />
             </th>
           )

package/components/DataTable/components/MapHeader.tsx

@@ -1,16 +1,18 @@
 import { DataTableProps } from '../DataTable'
-import { DownIcon, UpIcon } from './Icons'
 import ScreenReaderText from '../../elements/ScreenReaderText'
+import { SortIcon } from './SortIcon'
+import { getNewSortBy } from '../helpers/getNewSortBy'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
   setSortBy: Function
 }
 
-const ColumnHeadingText = ({ column, text, config }) => {
+const ColumnHeadingText = ({ 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>
+  if (text === '__series__' && !config.table.indexLabel)
+    return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
   return text
 }
 
@@ -21,7 +23,7 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
         .filter(column => columns[column].dataTable === true && columns[column].name)
         .map((column, index) => {
           let text
-          if (column !== 'geo') {
+          if (column && column !== 'geo') {
             text = columns[column].label ? columns[column].label : columns[column].name
           } else {
             text = config.type === 'map' ? indexTitle : config.xAxis?.dataKey
@@ -29,7 +31,8 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
           if (config.type === 'map' && (text === undefined || text === '')) {
             text = 'Location'
           }
-
+          const newSortBy = getNewSortBy(sortBy, column, index)
+          const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
           return (
             <th
               key={`col-header-${column}__${index}`}
@@ -38,19 +41,25 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
               role='columnheader'
               scope='col'
               onClick={() => {
-                setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
+                setSortBy(newSortBy)
               }}
               onKeyDown={e => {
                 if (e.keyCode === 13) {
-                  setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
+                  setSortBy(newSortBy)
                 }
               }}
               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)}
+              {...(sortBy.column === column
+                ? sortBy.asc
+                  ? { 'aria-sort': 'ascending' }
+                  : { 'aria-sort': 'descending' }
+                : null)}
             >
               <ColumnHeadingText text={text} config={config} column={column} />
-              {sortBy.column === column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
-              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} order`}</span>
+              <SortIcon ascending={sortByAsc} />
+              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
+                sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
+              } order`}</span>
             </th>
           )
         })}

package/components/DataTable/components/SortIcon/index.tsx

@@ -0,0 +1,25 @@
+import './sort-icon.css'
+
+const UpIcon = ({ active }) => (
+  <svg className={'up' + (active ? ' active' : '')} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+    <path d='M0 5l5-5 5 5z' />
+  </svg>
+)
+const DownIcon = ({ active }) => (
+  <svg className={'down' + (active ? ' active' : '')} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+    <path d='M0 0l5 5 5-5z' />
+  </svg>
+)
+
+type SortIconProps = {
+  ascending?: boolean
+}
+
+export const SortIcon: React.FC<SortIconProps> = ({ ascending }) => {
+  return (
+    <span role='button' className={'sort-icon'}>
+      <UpIcon active={ascending === true} />
+      <DownIcon active={ascending === false} />
+    </span>
+  )
+}

package/components/DataTable/components/SortIcon/sort-icon.css

@@ -0,0 +1,21 @@
+/* format the white triangle sort icon in data table headers */
+.sort-icon {
+  fill: white;
+  position: relative;
+  margin: 0 0.5rem !important;
+  :is(svg) {
+    position: absolute;
+    fill: rgba(255, 255, 255, 0.5);
+    &.active {
+      fill: white;
+    }
+    width: 1rem;
+    height: 1rem;
+  }
+  .up {
+    bottom: 0.5rem;
+  }
+  .down {
+    top: 0.5rem;
+  }
+}