@cdc/core 4.25.6 → 4.25.8

package/components/DataTable/DataTable.tsx

@@ -52,9 +52,9 @@ export type DataTableProps = {
   vizTitle?: string
   // determines if columns should be wrapped in the table
   wrapColumns?: boolean
+  interactionLabel?: string
 }
 
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
   const {
     columns,
@@ -71,7 +71,8 @@ const DataTable = (props: DataTableProps) => {
     tableTitle,
     viewport,
     vizTitle,
-    wrapColumns
+    wrapColumns,
+    interactionLabel = ''
   } = props
   const runtimeData = useMemo(() => {
     const data = removeNullColumns(parentRuntimeData)
@@ -150,7 +151,7 @@ const DataTable = (props: DataTableProps) => {
             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
+          return dataA || dataB ? customSort(dataA, dataB, sortBy, config) : 0
         })
       : rawRows
 
@@ -189,15 +190,15 @@ const DataTable = (props: DataTableProps) => {
 
   // prettier-ignore
   const tableData = useMemo(() => (
-   config.data?.[0]?.tableData
-    ? config.data?.[0]?.tableData
-    : config.visualizationType === 'Sankey'
+    config.data?.[0]?.tableData
       ? config.data?.[0]?.tableData
-      : config.visualizationType === 'Pie'
-      ? [config.yAxis.dataKey]
-      : config.visualizationType === 'Box Plot'
-        ? config?.boxplot?.plots?.[0] ? Object.entries(config.boxplot.plots[0]) : []
-        : config.runtime?.seriesKeys),
+      : config.visualizationType === 'Sankey'
+        ? config.data?.[0]?.tableData
+        : config.visualizationType === 'Pie'
+          ? [config.yAxis.dataKey]
+          : config.visualizationType === 'Box Plot'
+            ? config?.boxplot?.plots?.[0] ? Object.entries(config.boxplot.plots[0]) : []
+            : config.runtime?.seriesKeys),
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
   const hasNoData = runtimeData.length === 0
@@ -279,6 +280,8 @@ const DataTable = (props: DataTableProps) => {
         ? mapCellMatrix({ ...props, rows, wrapColumns, runtimeData, viewport })
         : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
 
+    const useBottomExpandCollapse = config.table.showBottomCollapse && expanded && Array.isArray(childrenMatrix)
+
     // 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(
@@ -290,16 +293,18 @@ const DataTable = (props: DataTableProps) => {
         )
       : {}
 
+    const showCollapseButton = config.table.collapsible !== false && useBottomExpandCollapse
     const TableMediaControls = ({ belowTable }) => {
       const hasDownloadLink = config.table.download
       return (
         <MediaControls.Section classes={getMediaControlsClasses(belowTable, hasDownloadLink)}>
-          <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
+          <MediaControls.Link config={config} dashboardDataConfig={dataConfig} interactionLabel={interactionLabel} />
           {hasDownloadLink && (
             <DownloadButton
               rawData={getDownloadData()}
               fileName={`${vizTitle || 'data-table'}.csv`}
               headerColor={headerColor}
+              interactionLabel={interactionLabel}
             />
           )}
         </MediaControls.Section>
@@ -308,11 +313,21 @@ const DataTable = (props: DataTableProps) => {
 
     return (
       <ErrorBoundary component='DataTable'>
-        {!config.table.showDownloadLinkBelow && <TableMediaControls />}
+        {!config.table.showDownloadLinkBelow && (
+          <div className='w-100 d-flex justify-content-end'>
+            <TableMediaControls />
+          </div>
+        )}
         <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} tableTitle={tableTitle} viewport={viewport} />
+            <ExpandCollapse
+              expanded={expanded}
+              setExpanded={setExpanded}
+              tableTitle={tableTitle}
+              config={config}
+              interactionLabel={interactionLabel}
+            />
           )}
           <div className='table-container' style={limitHeight}>
             <Table
@@ -333,6 +348,7 @@ const DataTable = (props: DataTableProps) => {
                     sortBy={sortBy}
                     setSortBy={setSortBy}
                     rightAlignedCols={rightAlignedCols}
+                    interactionLabel={interactionLabel}
                   />
                 ) : (
                   <ChartHeader
@@ -344,13 +360,14 @@ const DataTable = (props: DataTableProps) => {
                     setSortBy={setSortBy}
                     viewport={viewport}
                     rightAlignedCols={rightAlignedCols}
+                    interactionLabel={interactionLabel}
                   />
                 )
               }
               tableOptions={{
-                className: `table table-striped ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${
-                  isVertical ? '' : ' horizontal'
-                }`,
+                className: `table table-striped table-width-unset ${
+                  expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'
+                }${isVertical ? '' : ' horizontal'}`,
                 'aria-live': 'assertive',
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded,
@@ -383,7 +400,18 @@ const DataTable = (props: DataTableProps) => {
               )}
           </div>
         </section>
-        {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
+        <div className={`w-100 d-flex ${showCollapseButton ? 'justify-content-between' : 'justify-content-end'}`}>
+          {showCollapseButton && (
+            <button
+              className='border-0 bg-transparent text-decoration-underline mt-2'
+              style={{ color: 'var(--colors-link-blue)', fontSize: '0.772rem', textUnderlineOffset: '6px' }}
+              onClick={() => setExpanded(false)}
+            >
+              - Collapse table
+            </button>
+          )}
+          {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
+        </div>
         <div id={skipId} className='cdcdataviz-sr-only'>
           Skipped data table.
         </div>
@@ -395,7 +423,12 @@ const DataTable = (props: DataTableProps) => {
       <ErrorBoundary component='DataTable'>
         <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
-          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          <ExpandCollapse
+            expanded={expanded}
+            setExpanded={setExpanded}
+            tableTitle={tableTitle}
+            interactionLabel={interactionLabel}
+          />
           <div className='table-container' style={limitHeight}>
             <Table
               viewport={viewport}

package/components/DataTable/DataTableStandAlone.tsx

@@ -18,6 +18,7 @@ type StandAloneProps = {
   isEditor?: boolean
   updateConfig?: (Visualization) => void
   datasets?: Datasets
+  interactionLabel?: string
 }
 
 const DataTableStandAlone: React.FC<StandAloneProps> = ({
@@ -26,7 +27,8 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
   updateConfig,
   viewport,
   isEditor,
-  datasets
+  datasets,
+  interactionLabel = ''
 }) => {
   const [filteredData, setFilteredData] = useState<Record<string, any>[]>(
     filterVizData(config.filters, config.formattedData || config.data)
@@ -69,6 +71,7 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
         tabbingId={visualizationKey}
         tableTitle={config.table.label}
         viewport={viewport || 'lg'}
+        interactionLabel={interactionLabel}
       />
       <FootnotesStandAlone config={config.footnotes} filters={config.filters?.filter(f => f.filterFootnotes)} />
     </>

package/components/DataTable/components/ChartHeader.tsx

@@ -5,8 +5,20 @@ import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
 import parse from 'html-react-parser'
+import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
 
-type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport; rightAlignedCols }
+type ChartHeaderProps = {
+  data
+  isVertical
+  config
+  setSortBy
+  sortBy
+  hasRowType?
+  viewport
+  rightAlignedCols
+  interactionLabel: string
+}
 
 const ChartHeader = ({
   data,
@@ -16,7 +28,8 @@ const ChartHeader = ({
   sortBy,
   hasRowType,
   viewport,
-  rightAlignedCols
+  rightAlignedCols,
+  interactionLabel
 }: ChartHeaderProps) => {
   const groupBy = config.table?.groupBy
   if (!data) return
@@ -48,20 +61,30 @@ const ChartHeader = ({
     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>
+      <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 }) => {
+  const ColumnHeadingText = ({ text, config }: { text: string; config: ChartConfig }) => {
+    const notApplicableText = 'Not Applicable'
     if (text === '_pivotedFrom') 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>
-    return text
-  }
+    if (text === '__series__') {
+      if (config.table.indexLabel) {
+        return parse(String(config.table.indexLabel))
+      } else {
+        return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
+      }
+    }
 
+    //  handle any unexpected values
+    if (typeof text !== 'string') {
+      return parse('')
+    }
+
+    return parse(text)
+  }
   if (isVertical) {
     if (hasRowType) {
       // find the row type column and place it at the beginning of the array
@@ -75,7 +98,7 @@ const ChartHeader = ({
     return (
       <tr>
         {dataSeriesColumns.map((column, index) => {
-          const text = parse(getSeriesName(column, config))
+          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
@@ -93,6 +116,13 @@ const ChartHeader = ({
               scope='col'
               onClick={() => {
                 if (hasRowType) return
+                publishAnalyticsEvent(
+                  `data_table_sort_by|${newSortBy.column}|${
+                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'undefined'
+                  }`,
+                  'click',
+                  interactionLabel
+                )
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
@@ -124,7 +154,8 @@ const ChartHeader = ({
           const rightAxisItemsMap = new Map(rightAxisItems.map(item => [item.dataKey, item]))
 
           let column = config.xAxis?.dataKey
-          let text = row !== '__series__' ? getChartCellValue(row, column, config, data, rightAxisItemsMap) : '__series__'
+          let text =
+            row !== '__series__' ? getChartCellValue(row, column, config, data, rightAxisItemsMap) : '__series__'
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.colIndex === index ? sortBy.asc : undefined
           const isSortedCol = index === sortBy.colIndex && !hasRowType

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,11 +1,23 @@
+import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { Visualization } from '../../../types/Visualization'
 import Icon from '../../ui/Icon'
+import parse from 'html-react-parser'
 
-const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
+interface ExpandCollapseProps {
+  expanded: boolean
+  setExpanded: (expanded: boolean) => void
+  tableTitle: string
+  config?: Visualization
+  interactionLabel?: string
+}
+
+const ExpandCollapse = ({ expanded, setExpanded, tableTitle, config, interactionLabel = '' }: ExpandCollapseProps) => {
   return (
     <div
       role='button'
       className={expanded ? 'data-table-heading p-3' : 'collapsed data-table-heading p-3'}
       onClick={() => {
+        publishAnalyticsEvent('data_table_toggled', 'click', interactionLabel, config.type || 'unknown')
         setExpanded(!expanded)
       }}
       tabIndex={0}
@@ -16,7 +28,7 @@ const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport
       }}
     >
       <Icon display={expanded ? 'minus' : 'plus'} base />
-      {tableTitle}
+      {parse(tableTitle)}
     </div>
   )
 }

package/components/DataTable/components/MapHeader.tsx

@@ -2,10 +2,12 @@ import { DataTableProps } from '../DataTable'
 import ScreenReaderText from '../../elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
+import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
   setSortBy: Function
+  interactionLabel: string
 }
 
 const ColumnHeadingText = ({ text, config }) => {
@@ -16,7 +18,15 @@ const ColumnHeadingText = ({ text, config }) => {
   return text
 }
 
-const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAlignedCols }: MapHeaderProps) => {
+const MapHeader = ({
+  columns,
+  config,
+  indexTitle,
+  sortBy,
+  setSortBy,
+  rightAlignedCols,
+  interactionLabel = ''
+}: MapHeaderProps) => {
   return (
     <tr>
       {Object.keys(columns)
@@ -46,6 +56,13 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAligne
               role='columnheader'
               scope='col'
               onClick={() => {
+                publishAnalyticsEvent(
+                  `data_table_sort_by|${newSortBy.column}|${
+                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'undefined'
+                  }`,
+                  'click',
+                  interactionLabel
+                )
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {

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

@@ -1,36 +1,30 @@
-/* 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;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
     fill: rgba(255, 255, 255, 0.5);
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+
     &.active {
       fill: white;
     }
-    width: 1rem;
-    height: 1rem;
-  }
-  .up {
-    bottom: 0.5rem;
-  }
-  .down {
-    top: 0.5rem;
   }
-}
 
-@media (max-width: 576px) {
-  .sort-icon {
-    :is(svg) {
-      width: 0.9rem;
-      height: 0.9rem;
-    }
-    .up {
-      bottom: 0.3rem;
-    }
-    .down {
-      top: 0.3rem;
-    }
+  svg.up,
+  svg.down {
+    margin: 0 !important;
   }
 }

package/components/DataTable/data-table.css

@@ -3,9 +3,14 @@
   min-width: 100%;
 }
 
-.collapsed + .table-container {
+.bs4 .table.table-width-unset {
+  width: unset;
+}
+
+.collapsed+.table-container {
   border-bottom: none;
 }
+
 .table-container {
   overflow-x: auto;
   border-right: 1px solid var(--lightGray);
@@ -33,6 +38,7 @@
 }
 
 table.horizontal {
+
   th,
   td {
     min-width: 200px;
@@ -47,6 +53,7 @@ table.data-table {
   border-collapse: collapse;
   appearance: none;
   table-layout: fixed;
+
   * {
     box-sizing: border-box;
   }
@@ -67,8 +74,10 @@ table.data-table {
       background: none;
     }
   }
+
   thead {
     color: #fff;
+
     .resizer {
       cursor: e-resize;
       width: 10px;
@@ -78,9 +87,11 @@ table.data-table {
       right: 0;
       touch-action: none;
     }
+
     tr {
       text-align: left;
     }
+
     th,
     td {
       padding: 0.5em 0.7em;
@@ -108,8 +119,11 @@ table.data-table {
       background-color: var(--tertiary) !important;
       font-weight: bold;
     }
+
     border-bottom: solid 1px #e5e5e5;
-    min-width: 100%; /* Needed to fill content up*/
+    min-width: 100%;
+
+    /* Needed to fill content up*/
     &:last-child {
       border-bottom: 0;
     }
@@ -120,6 +134,7 @@ table.data-table {
     padding: 0.3em 0.7em;
     border-right: 1px solid rgba(0, 0, 0, 0.1);
     white-space: nowrap;
+
     &:last-child {
       border-right: 0 !important;
     }
@@ -127,6 +142,7 @@ table.data-table {
 
   td {
     position: relative;
+
     svg {
       margin-left: 1rem;
     }
@@ -148,6 +164,7 @@ table.data-table {
     text-decoration: underline;
     cursor: pointer;
     color: #075290;
+
     svg {
       max-width: 13px;
       vertical-align: baseline;
@@ -163,6 +180,7 @@ table.data-table {
 
 .no-data {
   position: relative;
+
   .no-data-message {
     background: rgba(255, 255, 255, 0.5);
     top: 0;
@@ -175,18 +193,22 @@ table.data-table {
     align-items: center;
     justify-content: center;
     z-index: 7;
+
     :is(h3) {
       font-size: 1.3rem;
       font-weight: 600;
       margin-bottom: 0.3rem;
     }
   }
+
   tr:hover {
     background: #fff;
   }
+
   th,
   td {
     width: 50%;
+
     &::before {
       content: '\00a0';
     }
@@ -197,15 +219,19 @@ table.data-table {
   margin: 1rem 0;
   display: flex;
   align-items: center;
+
   ul {
     list-style: none;
     margin: 0 1rem 0 0;
     display: flex;
-    li + li {
+
+    li+li {
       margin-left: 0.3rem;
     }
+
     button {
       background: var(--mediumGray);
+
       &:hover {
         background: lighten(var(--mediumGray), 5%);
       }
@@ -219,6 +245,7 @@ table.data-table {
       background: var(--mediumGray);
       opacity: 0.3;
       cursor: default;
+
       &:hover {
         background: var(--mediumGray);
       }
@@ -232,14 +259,16 @@ table.data-table {
   text-decoration: none;
   transition: 0.3s all;
   margin: 1em 0;
+
   &:hover {
     transition: 0.3s all;
   }
 }
+
 .cove,
 .cdc-open-viz-module {
   .download-links a:not(:last-child) {
     margin-right: 10px;
     display: inline-block;
   }
-}
+}

package/components/DataTable/helpers/customSort.ts

@@ -37,8 +37,10 @@ export const customSort = (a, b, sortBy, config) => {
   const isNumB = !isNaN(Number(valueB)) && valueB !== undefined && valueB !== null && trimmedB !== ''
 
   // Handle empty strings or spaces
-  if (trimmedA === '' && trimmedB !== '') return sortBy.asc ? -1 : 1
-  if (trimmedA !== '' && trimmedB === '') return sortBy.asc ? 1 : -1
+  // empty string should always come last no matter the asc
+  if (trimmedA === '' && trimmedB === '') return 0
+  if (trimmedA === '' && trimmedB !== '') return 1
+  if (trimmedA !== '' && trimmedB === '') return -1
 
   // Both are numbers: Compare numerically
   if (isNumA && isNumB) {

package/components/DownloadButton.tsx

@@ -1,13 +1,15 @@
 import Papa from 'papaparse'
+import { publishAnalyticsEvent } from '../helpers/metrics/helpers'
 
 type DownloadButtonProps = {
   rawData: Object
   fileName: string
   headerColor: string
   skipId: string | number
+  configUrl?: string
 }
 
-const DownloadButton = ({ rawData, fileName, headerColor, skipId }: DownloadButtonProps) => {
+const DownloadButton = ({ rawData, fileName, headerColor, skipId, configUrl }: DownloadButtonProps) => {
   const csvData = Papa.unparse(rawData)
   // Prepend a Byte Order Mark (BOM) to the CSV data.
   // The BOM is a special marker that helps applications like Excel recognize the file as UTF-8 encoded.
@@ -22,6 +24,7 @@ const DownloadButton = ({ rawData, fileName, headerColor, skipId }: DownloadButt
       //@ts-ignore
       navigator.msSaveBlob(blob, fileName)
     }
+    publishAnalyticsEvent('data_downloaded', 'click', configUrl)
   }
 
   return (

package/components/EditorPanel/DataTableEditor.tsx

@@ -216,7 +216,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         section='table'
         updateField={updateField}
       />
-      {config.table.collapsible !== false && (
+      {config.table.collapsible && (
         <CheckBox
           value={config.table.expanded}
           fieldName='expanded'
@@ -225,6 +225,15 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
+      {config.table.collapsible && (
+        <CheckBox
+          value={config.table.showBottomCollapse}
+          fieldName='showBottomCollapse'
+          label='Show collapse below table'
+          section='table'
+          updateField={updateField}
+        />
+      )}
       <CheckBox
         value={config.table.download}
         fieldName='download'