@cdc/core 4.24.9 → 4.24.11

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;
+  }
+}