@cdc/core 4.24.12 → 4.25.2-25

package/components/DataTable/DataTable.tsx

@@ -21,6 +21,7 @@ import { TableConfig } from './types/TableConfig'
 import { Column } from '../../types/Column'
 import { pivotData } from '../../helpers/pivotData'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+import isRightAlignedTableValue from '@cdc/core/helpers/isRightAlignedTableValue'
 import './data-table.css'
 import _ from 'lodash'
 
@@ -30,7 +31,7 @@ export type DataTableProps = {
   columns?: Record<string, Column>
   config: TableConfig
   dataConfig?: Object
-  displayDataAsText?: Function
+  defaultSortBy?: string
   displayGeoName?: Function
   expandDataTable: boolean
   formatLegendLocation?: Function
@@ -59,6 +60,7 @@ const DataTable = (props: DataTableProps) => {
   const {
     config,
     dataConfig,
+    defaultSortBy,
     tableTitle,
     vizTitle,
     rawData,
@@ -88,9 +90,8 @@ const DataTable = (props: DataTableProps) => {
   }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumn])
 
   const [expanded, setExpanded] = useState(expandDataTable)
-
   const [sortBy, setSortBy] = useState<any>({
-    column: '',
+    column: defaultSortBy || '',
     asc: false,
     colIndex: null
   })
@@ -171,7 +172,7 @@ const DataTable = (props: DataTableProps) => {
     if (config.type === 'map') {
       return config.table.caption
         ? config.table.caption
-        : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
+        : `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.`
     }
@@ -207,6 +208,24 @@ const DataTable = (props: DataTableProps) => {
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
   const hasNoData = runtimeData.length === 0
+
+  const getClassNames = (): string => {
+    const classes = ['data-table-container']
+
+    if (config.table.showDownloadLinkBelow) {
+      classes.push('mt-4')
+    }
+
+    const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
+    if (isBrushActive) {
+      classes.push('brush-active')
+    }
+
+    classes.push(viewport)
+
+    return classes.join(' ')
+  }
+
   if (config.visualizationType !== 'Box Plot') {
     const getDownloadData = () => {
       // only use fullGeoName on County maps and no other
@@ -221,15 +240,32 @@ const DataTable = (props: DataTableProps) => {
     const getMediaControlsClasses = belowTable => {
       const classes = ['download-links']
       if (!belowTable) {
+        classes.push('mt-4', 'mb-2')
         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')
+        classes.push('mt-2')
       }
       return classes
     }
 
+    const childrenMatrix =
+      config.type === 'map'
+        ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
+        : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
+
+    // If every value in a column is a number, record the column index so the header and cells can be right-aligned
+    const rightAlignedCols = childrenMatrix.length
+      ? Object.fromEntries(
+          Object.keys(childrenMatrix[0])
+            .filter(
+              i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
+            )
+            .map(x => [x, true])
+        )
+      : {}
+
     const TableMediaControls = ({ belowTable }) => {
       return (
         <MediaControls.Section classes={getMediaControlsClasses(belowTable)}>
@@ -244,37 +280,14 @@ const DataTable = (props: DataTableProps) => {
         </MediaControls.Section>
       )
     }
-    const getClassNames = (): string => {
-      const classes = ['data-table-container']
-      const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
-
-      if (isBrushActive) {
-        classes.push('brush-active')
-      }
-
-      classes.push(viewport)
-
-      const downloadLinkClass = !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
-      if (downloadLinkClass) {
-        classes.push(downloadLinkClass)
-      }
-
-      return classes.join(' ')
-    }
 
     return (
       <ErrorBoundary component='DataTable'>
-        {!config.table.showDownloadLinkBelow && <TableMediaControls />}
+        {config.general?.showDownloadButton && !config.table.showDownloadLinkBelow && <TableMediaControls />}
         <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           {config.table.collapsible !== false && (
-            <ExpandCollapse
-              expanded={expanded}
-              setExpanded={setExpanded}
-              fontSize={config.fontSize}
-              tableTitle={tableTitle}
-              viewport={viewport}
-            />
+            <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} viewport={viewport} />
           )}
           <div className='table-container' style={limitHeight}>
             <Table
@@ -282,18 +295,20 @@ const DataTable = (props: DataTableProps) => {
               viewport={viewport}
               wrapColumns={wrapColumns}
               noData={hasNoData}
-              childrenMatrix={
-                config.type === 'map'
-                  ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
-                  : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
-              }
+              childrenMatrix={childrenMatrix}
               tableName={config.type}
               caption={caption}
               stickyHeader
               hasRowType={hasRowType}
               headContent={
                 config.type === 'map' ? (
-                  <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} />
+                  <MapHeader
+                    columns={columns}
+                    {...props}
+                    sortBy={sortBy}
+                    setSortBy={setSortBy}
+                    rightAlignedCols={rightAlignedCols}
+                  />
                 ) : (
                   <ChartHeader
                     data={runtimeData}
@@ -302,6 +317,8 @@ const DataTable = (props: DataTableProps) => {
                     isVertical={isVertical}
                     sortBy={sortBy}
                     setSortBy={setSortBy}
+                    viewport={viewport}
+                    rightAlignedCols={rightAlignedCols}
                   />
                 )
               }
@@ -313,7 +330,7 @@ const DataTable = (props: DataTableProps) => {
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded
               }}
-              fontSize={config.fontSize}
+              rightAlignedCols={rightAlignedCols}
             />
 
             {/* REGION Data Table */}
@@ -336,12 +353,13 @@ const DataTable = (props: DataTableProps) => {
                     </tr>
                   }
                   tableOptions={{ className: 'table table-striped region-table data-table' }}
-                  fontSize={config.fontSize}
                 />
               )}
           </div>
         </section>
-        {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
+        {config.general?.showDownloadButton && config.table.showDownloadLinkBelow && (
+          <TableMediaControls belowTable={true} />
+        )}
         <div id={skipId} className='cdcdataviz-sr-only'>
           Skipped data table.
         </div>
@@ -351,11 +369,7 @@ const DataTable = (props: DataTableProps) => {
     // Render Data Table for Box Plots
     return (
       <ErrorBoundary component='DataTable'>
-        <section
-          id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport}`}
-          aria-label={accessibilityLabel}
-        >
+        <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
@@ -374,7 +388,6 @@ const DataTable = (props: DataTableProps) => {
                 'aria-rowcount': 11,
                 hidden: !expanded
               }}
-              fontSize={config.fontSize}
             />
           </div>
         </section>

package/components/DataTable/DataTableStandAlone.tsx

@@ -6,6 +6,7 @@ import DataTableEditorPanel from './components/DataTableEditorPanel'
 import Filters from '../Filters'
 import { TableConfig } from './types/TableConfig'
 import { filterVizData } from '../../helpers/filterVizData'
+import { addValuesToFilters } from '../../helpers/addValuesToFilters'
 
 type StandAloneProps = {
   visualizationKey: string
@@ -28,9 +29,8 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
 
   useEffect(() => {
     // when using editor changes to filter should update the data
-    setFilteredData(
-      filterVizData(config.filters, config?.formattedData?.length > 0 ? config.formattedData : config.data)
-    )
+    const filters = addValuesToFilters(config.filters, config.data)
+    setFilteredData(filterVizData(filters, config?.formattedData?.length > 0 ? config.formattedData : config.data))
   }, [config.filters])
 
   if (isEditor)

package/components/DataTable/components/ChartHeader.tsx

@@ -5,9 +5,18 @@ 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? }
+type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport; rightAlignedCols }
 
-const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }: ChartHeaderProps) => {
+const ChartHeader = ({
+  data,
+  isVertical,
+  config,
+  setSortBy,
+  sortBy,
+  hasRowType,
+  viewport,
+  rightAlignedCols
+}: ChartHeaderProps) => {
   const groupBy = config.table?.groupBy
   if (!data) return
   let dataSeriesColumns = getDataSeriesColumns(config, isVertical, data)
@@ -69,9 +78,15 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
           const text = getSeriesName(column, config)
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
+          const isSortedCol = column === sortBy.column && !hasRowType
+
           return (
             <th
-              style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
+              style={{
+                minWidth: (config.table.cellMinWidth || 0) + 'px',
+                textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
+                paddingRight: isSortedCol ? '1.3em' : ''
+              }}
               key={`col-header-${column}__${index}`}
               tabIndex={0}
               role='columnheader'
@@ -93,7 +108,7 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
                 : null)}
             >
               <ColumnHeadingText text={text} column={column} config={config} />
-              {column === sortBy.column && !hasRowType && <SortIcon ascending={sortByAsc} />}
+              {isSortedCol && <SortIcon ascending={sortByAsc} />}
               <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
           )
@@ -109,9 +124,14 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
           let text = row !== '__series__' ? getChartCellValue(row, column, config, data) : '__series__'
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.colIndex === index ? sortBy.asc : undefined
+          const isSortedCol = index === sortBy.colIndex && !hasRowType
           return (
             <th
-              style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
+              style={{
+                minWidth: (config.table.cellMinWidth || 0) + 'px',
+                textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
+                paddingRight: isSortedCol ? '1.3em' : ''
+              }}
               key={`col-header-${text}__${index}`}
               tabIndex={0}
               role='columnheader'
@@ -131,7 +151,7 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
                 : null)}
             >
               <ColumnHeadingText text={text} column={column} config={config} />
-              {index === sortBy.colIndex && !hasRowType && <SortIcon ascending={sortByAsc} />}
+              {isSortedCol && <SortIcon ascending={sortByAsc} />}
 
               <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />
             </th>

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,13 +1,10 @@
 import Icon from '../../ui/Icon'
-import { fontSizes } from '../../../helpers/cove/fontSettings'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
-  const titleFontSize = ['xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
   return (
     <div
-      style={{ fontSize: titleFontSize }}
       role='button'
-      className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+      className={expanded ? 'data-table-heading p-3' : 'collapsed data-table-heading p-3'}
       onClick={() => {
         setExpanded(!expanded)
       }}

package/components/DataTable/components/MapHeader.tsx

@@ -16,7 +16,7 @@ const ColumnHeadingText = ({ text, config }) => {
   return text
 }
 
-const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeaderProps) => {
+const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAlignedCols }: MapHeaderProps) => {
   return (
     <tr>
       {Object.keys(columns)
@@ -35,6 +35,10 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
           return (
             <th
+              style={{
+                textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
+                paddingRight: '1.3em'
+              }}
               key={`col-header-${column}__${index}`}
               id={column}
               tabIndex={0}

package/components/DataTable/data-table.css

@@ -15,9 +15,8 @@
 
 .cdc-open-viz-module div.data-table-heading {
   position: relative;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 0.5em 0.7em;
-  border: var(--lightGray) 1px solid;
+  border: var(--cool-gray-10) 1px solid;
+  border-radius: 6px;
 
   svg {
     position: absolute;
@@ -31,9 +30,6 @@
     z-index: 2;
     position: relative;
   }
-  @media (max-width: var(--breakpoint-sm)) {
-    font-size: var(--font-small) + 0.2em;
-  }
 }
 
 table.horizontal {
@@ -87,7 +83,7 @@ table.data-table {
     }
     th,
     td {
-      padding: 0.5em 1.3em 0.5em 0.7em;
+      padding: 0.5em 0.7em;
       line-height: normal;
       position: relative;
       text-align: left;
@@ -127,7 +123,6 @@ table.data-table {
     &:last-child {
       border-right: 0 !important;
     }
-    font-size: var(--font-size);
   }
 
   td {

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -16,7 +16,15 @@ type ChartRowsProps = DataTableProps & {
   hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({
+  rows,
+  runtimeData,
+  config,
+  isVertical,
+  sortBy,
+  colorScale,
+  hasRowType
+}: ChartRowsProps): CellMatrix | GroupCellMatrix => {
   const groupBy = config.table?.groupBy
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
@@ -38,7 +46,7 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
 
   if (isVertical) {
     if (groupBy) {
-      const cellMatrix: GroupCellMatrix = {}
+      const cellMatrix = new Map()
       rows.forEach(row => {
         let groupKey: string
         let groupValues = []
@@ -49,10 +57,11 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
             groupValues.push(getChartCellValue(row, column, config, runtimeData))
           }
         })
-        if (!cellMatrix[groupKey]) {
-          cellMatrix[groupKey] = [groupValues]
+        if (!cellMatrix.has(groupKey)) {
+          cellMatrix.set(groupKey, [groupValues])
         } else {
-          cellMatrix[groupKey].push(groupValues)
+          const currentGroupValues = cellMatrix.get(groupKey)
+          cellMatrix.set(groupKey, [...currentGroupValues, groupValues])
         }
       })
       return cellMatrix

package/components/DataTable/helpers/customSort.ts

@@ -25,11 +25,11 @@ export const customSort = (a, b, sortBy, config) => {
   const trimmedA = String(valueA).trim()
   const trimmedB = String(valueB).trim()
 
-  if (config.xAxis?.dataKey === sortBy.column && config.xAxis.type === 'date') {
+  if (config.xAxis?.dataKey === sortBy.column && ['date', 'date-time'].includes(config.xAxis.type)) {
     const dateA = parseDate(config.xAxis.dateParseFormat, trimmedA)?.getTime()
 
     const dateB = parseDate(config.xAxis.dateParseFormat, trimmedB)?.getTime()
-    console.log(dateA, dateB)
+
     return sortBy.asc ? dateA - dateB : dateB - dateA
   }
   // Check if values are numbers

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -1,60 +1,83 @@
-import LegendShape from '@cdc/core/components/LegendShape'
-import CellAnchor from '../components/CellAnchor'
-import { DataTableProps } from '../DataTable'
-import { ReactNode } from 'react'
-
-type MapRowsProps = DataTableProps & {
-  rows: string[]
-}
-
-const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
-  return rows.map(row =>
-    Object.keys(columns)
-      .filter(column => columns[column].dataTable === true && columns[column].name)
-      .map(column => {
-        let cellValue
-
-        if (column === 'geo') {
-          const rowObj = runtimeData[row]
-          const legendColor = applyLegendToRow(rowObj)
-
-          let labelValue
-          const mapZoomHandler = config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
-          if ((config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') || config.general.type === 'us-geocode') {
-            const capitalize = str => {
-              return str.charAt(0).toUpperCase() + str.slice(1)
-            }
-            labelValue = displayGeoName(row)
-            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
-          } else {
-            labelValue = formatLegendLocation(row)
-          }
-          cellValue = (
-            <div className='col-12'>
-              <LegendShape fill={legendColor[0]} />
-              <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
-            </div>
-          )
-        } else {
-          // check for special classes
-          let specialValFound = ''
-          let columnName = config.columns[column].name
-          const { specialClasses } = config.legend
-          if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
-            specialClasses.forEach(specialClass => {
-              if (specialClass.key === columnName) {
-                if (String(runtimeData[row][specialClass.key]) === specialClass.value) {
-                  specialValFound = specialClass.label
-                }
-              }
-            })
-          }
-          cellValue = displayDataAsText(specialValFound || runtimeData[row][columnName], column)
-        }
-
-        return cellValue
-      })
-  )
-}
-
-export default mapCellArray
+import LegendShape from '@cdc/core/components/LegendShape'
+import CellAnchor from '../components/CellAnchor'
+import { DataTableProps } from '../DataTable'
+import { ReactNode } from 'react'
+import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
+
+type MapRowsProps = DataTableProps & {
+  rows: string[]
+}
+
+const mapCellArray = ({
+  rows,
+  columns,
+  runtimeData,
+  config,
+  applyLegendToRow,
+  displayGeoName,
+  formatLegendLocation,
+  navigationHandler,
+  setFilteredCountryCode
+}: MapRowsProps): ReactNode[][] => {
+  return rows.map(row =>
+    Object.keys(columns)
+      .filter(column => columns[column].dataTable === true && columns[column].name)
+      .map(column => {
+        let cellValue
+
+        if (column === 'geo') {
+          const rowObj = runtimeData[row]
+          const legendColor = applyLegendToRow(rowObj)
+
+          let labelValue
+          const mapZoomHandler =
+            config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world'
+              ? () => setFilteredCountryCode(row)
+              : undefined
+          if (
+            (config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') ||
+            config.general.type === 'us-geocode'
+          ) {
+            const capitalize = str => {
+              return str.charAt(0).toUpperCase() + str.slice(1)
+            }
+            labelValue = displayGeoName(row)
+            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
+          } else {
+            labelValue = formatLegendLocation(row)
+          }
+          cellValue = (
+            <div className='col-12'>
+              <LegendShape fill={legendColor[0]} />
+              <CellAnchor
+                markup={labelValue}
+                row={rowObj}
+                columns={columns}
+                navigationHandler={navigationHandler}
+                mapZoomHandler={mapZoomHandler}
+              />
+            </div>
+          )
+        } else {
+          // check for special classes
+          let specialValFound = ''
+          let columnName = config.columns[column].name
+          const { specialClasses } = config.legend
+          if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
+            specialClasses.forEach(specialClass => {
+              if (specialClass.key === columnName) {
+                if (String(runtimeData[row][specialClass.key]) === specialClass.value) {
+                  specialValFound = specialClass.label
+                }
+              }
+            })
+          }
+          cellValue = displayDataAsText(specialValFound || runtimeData[row][columnName], column, config)
+        }
+
+        return cellValue
+      })
+  )
+}
+
+export default mapCellArray

package/components/DataTable/types/TableConfig.ts

@@ -7,7 +7,6 @@ import { Visualization } from '../../../types/Visualization'
 
 export type TableConfig = Visualization & {
   boxplot?: BoxPlot
-  fontSize: 'small' | 'medium' | 'large'
   regions?: Region[]
   runtime?: Runtime
   runtimeSeriesLabels?: Object