@cdc/core 4.26.1 → 4.26.3

package/components/DataTable/components/MapHeader.tsx

@@ -1,9 +1,10 @@
 import { DataTableProps } from '../DataTable'
 import ScreenReaderText from '../../elements/ScreenReaderText'
-import { SortIcon } from './SortIcon'
-import { getNewSortBy } from '../helpers/getNewSortBy'
-import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
-import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { SortIcon } from './SortIcon'
+import { getNewSortBy } from '../helpers/getNewSortBy'
+import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { getMapDataTableColumnKeys } from '../helpers/getMapDataTableColumnKeys'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
@@ -19,23 +20,23 @@ const ColumnHeadingText = ({ text, config }) => {
   return text
 }
 
-const MapHeader = ({
-  columns,
-  config,
+const MapHeader = ({
+  columns,
+  config,
   indexTitle,
   sortBy,
   setSortBy,
   rightAlignedCols,
-  interactionLabel = ''
-}: MapHeaderProps) => {
-  return (
-    <tr>
-      {Object.keys(columns)
-        .filter(column => columns[column].dataTable === true && columns[column].name)
-        .map((column, index) => {
-          let text
-          if (column && column !== 'geo') {
-            text = columns[column].label ? columns[column].label : columns[column].name
+  interactionLabel = ''
+}: MapHeaderProps) => {
+  const orderedColumnKeys = getMapDataTableColumnKeys(columns)
+
+  return (
+    <tr>
+      {orderedColumnKeys.map((column, index) => {
+          let text
+          if (column && column !== 'geo') {
+            text = columns[column].label ? columns[column].label : columns[column].name
           } else {
             text = config.type === 'map' ? indexTitle : config.xAxis?.dataKey
           }
@@ -49,7 +50,7 @@ const MapHeader = ({
               style={{
                 minWidth: (config.table.cellMinWidth || 0) + 'px',
                 textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
-                paddingRight: '1.3em'
+                paddingRight: '1.8em'
               }}
               key={`col-header-${column}__${index}`}
               id={column}
@@ -64,7 +65,9 @@ const MapHeader = ({
                   eventAction: 'click',
                   eventLabel: interactionLabel,
                   vizTitle: getVizTitle(config),
-                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${
+                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'
+                  }`
                 })
                 setSortBy(newSortBy)
               }}
@@ -77,7 +80,9 @@ const MapHeader = ({
                     eventAction: 'keyboard',
                     eventLabel: interactionLabel,
                     vizTitle: getVizTitle(config),
-                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${
+                      newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'
+                    }`
                   })
                   setSortBy(newSortBy)
                 }
@@ -91,13 +96,14 @@ const MapHeader = ({
             >
               <ColumnHeadingText text={text} config={config} />
               <SortIcon ascending={sortByAsc} />
-              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
-                } order`}</span>
-            </th>
-          )
-        })}
-    </tr >
-  )
-}
+              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
+                sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
+              } order`}</span>
+            </th>
+          )
+        })}
+    </tr>
+  )
+}
 
 export default MapHeader

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

@@ -1,22 +1,22 @@
 .sort-icon {
+  align-items: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
 
   position: absolute;
-  right: 4px;
+  right: 13px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
 
   svg {
-    width: 0.75rem;
-    height: 0.75rem;
     fill: rgba(255, 255, 255, 0.5);
+    height: 0.75rem;
+    line-height: 1;
     margin: 0;
     padding: 0;
-    line-height: 1;
+    width: 0.75rem;
 
     &.active {
       fill: white;

package/components/DataTable/data-table.css

@@ -1,46 +1,44 @@
-.cove,
-.cdc-open-viz-module {
+.cove-visualization {
   .table {
-    width: unset;
     min-width: 100%;
+    width: unset;
   }
 
   .bs4 .table.table-width-unset {
     width: unset;
   }
 
-  .collapsed+.table-container {
+  .collapsed + .table-container {
     border-bottom: none;
   }
 
   .table-container {
-    overflow-x: auto;
-    border-right: 1px solid var(--lightGray);
-    border-left: 1px solid var(--lightGray);
     border-bottom: 1px solid var(--lightGray);
+    border-left: 1px solid var(--lightGray);
+    border-right: 1px solid var(--lightGray);
+    overflow-x: auto;
   }
 
   div.data-table-heading {
-    position: relative;
     border: var(--cool-gray-10) 1px solid;
     border-radius: 6px;
+    position: relative;
 
     svg {
-      position: absolute;
       height: 100%;
-      width: 15px;
-      top: 0;
+      position: absolute;
       right: 1em;
+      top: 0;
+      width: 15px;
     }
 
     &:focus {
-      z-index: 2;
       position: relative;
+      z-index: 2;
     }
   }
 
   table.horizontal {
-
     th,
     td {
       min-width: 200px;
@@ -48,12 +46,12 @@
   }
 
   table.data-table {
-    margin-bottom: 0;
+    appearance: none;
     background: #fff;
-    position: relative;
     border: none;
     border-collapse: collapse;
-    appearance: none;
+    margin-bottom: 0;
+    position: relative;
     table-layout: fixed;
 
     * {
@@ -61,15 +59,15 @@
     }
 
     thead {
-      user-select: none;
       -moz-user-select: none;
       user-select: none;
+      user-select: none;
 
       button {
         background: none;
-        font-size: initial;
-        color: #fff !important;
         border: 0;
+        color: #fff !important;
+        font-size: initial;
       }
 
       tr {
@@ -81,13 +79,13 @@
       color: #fff !important;
 
       .resizer {
+        bottom: 0;
         cursor: e-resize;
-        width: 10px;
         position: absolute;
-        top: 0;
-        bottom: 0;
         right: 0;
+        top: 0;
         touch-action: none;
+        width: 10px;
       }
 
       tr {
@@ -96,19 +94,20 @@
 
       th,
       td {
-        padding: 0.5em 0.7em;
+        border-right: 1px solid var(--lightGray) !important;
         line-height: normal;
+        padding: 0.5em 0.7em;
         position: relative;
         text-align: left;
-        border-right: 1px solid var(--lightGray) !important;
       }
 
       th {
         background-color: var(--primary);
-        background-repeat: no-repeat;
         background-position: right 0.5em center;
+        background-repeat: no-repeat;
         background-size: 10px 5px;
-        color: #fff !important
+        color: #fff !important;
+        cursor: pointer;
       }
 
       th:last-child,
@@ -134,8 +133,8 @@
 
     th,
     td {
-      padding: 0.3em 0.7em;
       border-right: 1px solid rgba(0, 0, 0, 0.1);
+      padding: 0.3em 0.7em;
       white-space: nowrap;
 
       &:last-child {
@@ -154,36 +153,35 @@
           margin-left: 0 !important;
         }
       }
-
     }
 
     td a {
+      bottom: 0;
+      color: inherit;
+      display: block;
+      left: 0;
       padding: 0.3em 0.7em;
       position: absolute;
-      top: 0;
-      bottom: 0;
       right: 0;
-      left: 0;
-      display: block;
-      color: inherit;
       text-decoration: none;
+      top: 0;
     }
 
     td div a {
-      position: relative;
-      padding: 0;
       display: inline;
+      padding: 0;
+      position: relative;
     }
 
     td span.table-link {
-      text-decoration: underline;
-      cursor: pointer;
       color: #075290;
+      cursor: pointer;
+      text-decoration: underline;
 
       svg {
+        margin-left: 5px;
         max-width: 13px;
         vertical-align: baseline;
-        margin-left: 5px;
       }
     }
 
@@ -197,16 +195,16 @@
     position: relative;
 
     .no-data-message {
+      align-items: center;
       background: rgba(255, 255, 255, 0.5);
-      top: 0;
-      left: 0;
-      right: 0;
       bottom: 0;
-      position: absolute;
-      text-align: center;
       display: flex;
-      align-items: center;
       justify-content: center;
+      left: 0;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: 0;
       z-index: 7;
 
       :is(h3) {
@@ -231,16 +229,16 @@
   }
 
   .data-table-pagination {
-    margin: 1rem 0;
-    display: flex;
     align-items: center;
+    display: flex;
+    margin: 1rem 0;
 
     ul {
+      display: flex;
       list-style: none;
       margin: 0 1rem 0 0;
-      display: flex;
 
-      li+li {
+      li + li {
         margin-left: 0.3rem;
       }
 
@@ -258,8 +256,8 @@
 
       button[disabled] {
         background: var(--mediumGray);
-        opacity: 0.3;
         cursor: default;
+        opacity: 0.3;
 
         &:hover {
           background: var(--mediumGray);
@@ -271,9 +269,9 @@
   .btn-download {
     color: #fff;
     float: right;
+    margin: 1em 0;
     text-decoration: none;
     transition: 0.3s all;
-    margin: 1em 0;
 
     &:hover {
       transition: 0.3s all;
@@ -281,7 +279,7 @@
   }
 
   .download-links a:not(:last-child) {
-    margin-right: 10px;
     display: inline-block;
+    margin-right: 10px;
   }
-}
+}

package/components/DataTable/helpers/applyCustomOrder.ts

@@ -0,0 +1,17 @@
+/**
+ * Sorts two values based on a user-defined custom order array.
+ * Values not found in customOrder are pushed to the end.
+ */
+export const applyCustomOrder = (valueA: string, valueB: string, customOrder: string[]): number => {
+  const indexA = customOrder.indexOf(String(valueA))
+  const indexB = customOrder.indexOf(String(valueB))
+
+  // Both found in custom order — sort by position
+  if (indexA !== -1 && indexB !== -1) return indexA - indexB
+  // Only A found — A comes first
+  if (indexA !== -1) return -1
+  // Only B found — B comes first
+  if (indexB !== -1) return 1
+  // Neither found — maintain relative order
+  return 0
+}

package/components/DataTable/helpers/getChartCellValue.ts

@@ -31,8 +31,13 @@ const isAdditionalColumn = (column: string, config, rowData) => {
   return formattingParams
 }
 
-export const getChartCellValue = (row: string, column: string, config: TableConfig, runtimeData: Object[], rightAxisItemsMap) => {
-
+export const getChartCellValue = (
+  row: string,
+  column: string,
+  config: TableConfig,
+  runtimeData: Object[],
+  rightAxisItemsMap
+) => {
   // Variables for xAxis config
   const { type, dateDisplayFormat, dateParseFormat, dataKey: xAxisDataKey } = config.xAxis || {}
   const { showMissingDataLabel } = config.general || {}
@@ -54,14 +59,13 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
   if (column === xAxisDataKey) {
     const dateFormat = config.table?.dateDisplayFormat || dateDisplayFormat
     if (type === 'date' || type === 'date-time') {
-      cellValue = formatDate(dateFormat, parseDate(dateParseFormat, labelValue))
+      cellValue = formatDate(dateFormat, parseDate(dateParseFormat, labelValue), config.locale)
     } else if (type === 'continuous') {
       cellValue = formatNumber(runtimeData[row][column], 'bottom', false, config)
     } else {
       cellValue = labelValue
     }
   } else {
-
     let addColParams = isAdditionalColumn(column, config, rowObj)
 
     let piePercent = 0
@@ -69,9 +73,8 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
       piePercent = (_.toNumber(runtimeData[row][column]) / _.sumBy(runtimeData, d => _.toNumber(d[column]))) * 100 || 0
     }
 
-    const valueToFormat = config.visualizationType === 'Pie' && !config.dataFormat.showPiePercent
-      ? piePercent
-      : runtimeData[row][column]
+    const valueToFormat =
+      config.visualizationType === 'Pie' && !config.dataFormat.showPiePercent ? piePercent : runtimeData[row][column]
 
     const hasAdditionalParams = Object.keys(addColParams).length > 0
 

package/components/DataTable/helpers/getMapDataTableColumnKeys.ts

@@ -0,0 +1,22 @@
+import { Column } from '../../../types/Column'
+
+const isVisibleDataTableColumn = ([, column]: [string, Column]) => {
+  return column?.dataTable === true && !!column?.name
+}
+
+export const getMapDataTableColumnKeys = (columns: Record<string, Column> = {}): string[] => {
+  return Object.entries(columns)
+    .filter(isVisibleDataTableColumn)
+    .map(([key, column], declarationIndex) => ({ key, order: column.order, declarationIndex }))
+    .sort((a, b) => {
+      const aOrder = a.order ?? Number.MAX_SAFE_INTEGER
+      const bOrder = b.order ?? Number.MAX_SAFE_INTEGER
+
+      if (aOrder !== bOrder) {
+        return aOrder - bOrder
+      }
+
+      return a.declarationIndex - b.declarationIndex
+    })
+    .map(({ key }) => key)
+}

package/components/DataTable/helpers/getSeriesName.ts

@@ -16,6 +16,12 @@ export const getSeriesName = (column: string, config: TableConfig) => {
     return userDefinedSeries.name
   }
   if (config.runtimeSeriesLabels && config.runtimeSeriesLabels[column]) return config.runtimeSeriesLabels[column]
+
+  // For pie charts, use yAxis.label if the column is the yAxis data key
+  if (config.visualizationType === 'Pie' && column === config.yAxis?.dataKey && config.yAxis?.label) {
+    return config.yAxis.label
+  }
+
   const columnIsDataKey = column === config.xAxis?.dataKey
   const indexLabel = config.table?.indexLabel
   return columnIsDataKey && indexLabel ? indexLabel : getLabel(column, config)

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -3,8 +3,11 @@ import CellAnchor from '../components/CellAnchor'
 import { DataTableProps } from '../DataTable'
 import { ReactNode } from 'react'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
+import parse from 'html-react-parser'
 import _ from 'lodash'
 import { hashObj } from '../../../helpers/hashObj'
+import { sanitizeToSvgId } from '../../../helpers/cove/string'
+import { getMapDataTableColumnKeys } from './getMapDataTableColumnKeys'
 
 type MapRowsProps = DataTableProps & {
   rows: string[]
@@ -22,9 +25,10 @@ const getGeoLabel = (config, row, formatLegendLocation, displayGeoName, runtimeD
   const { geoType, type } = config.general
 
   let labelValue
+  const displayOverride = runtimeData?.[row]?.[config.columns?.geo?.displayColumn]
   if (!['single-state', 'us-county'].includes(geoType) || type === 'us-geocode') {
     // Use the row (UID) for lookup - this allows "US-AL" to become "Alabama"
-    labelValue = displayGeoName(row)
+    labelValue = displayGeoName(row, displayOverride)
 
     // If displayGeoName returned the same value (not found in lookups), use the raw imported data
     if (labelValue === row && runtimeData && config.columns?.geo?.name) {
@@ -67,11 +71,13 @@ export const getMapRowData = (
   displayGeoName: (row: string) => string,
   filterColumns: string[]
 ) => {
+  const orderedColumnKeys = getMapDataTableColumnKeys(columns as any)
+
   return rows.map((row: string) => {
     const dataRow = {}
     ;[
       ...filterColumns,
-      ...Object.keys(columns).filter(column => columns[column].dataTable === true && columns[column].name)
+      ...orderedColumnKeys
     ].map(column => {
       const label = columns[column]?.label || columns[column]?.name || column
       if (column === 'geo') {
@@ -103,10 +109,10 @@ const mapCellArray = ({
   getPatternForRow
 }: MapRowsProps): ReactNode[][] => {
   const { allowMapZoom, geoType, type } = config.general
+  const orderedColumnKeys = getMapDataTableColumnKeys(columns as any)
+
   return rows.map(row =>
-    Object.keys(columns)
-      .filter(column => columns[column].dataTable === true && columns[column].name)
-      .map(column => {
+    orderedColumnKeys.map(column => {
         if (column === 'geo') {
           const rowObj = runtimeData[row]
           if (!rowObj) {
@@ -128,26 +134,29 @@ const mapCellArray = ({
           // Check for pattern information
           const patternInfo = getPatternForRow(rowObj, config)
           const mapId = config.runtime?.uniqueId || 'map'
+          const sanitizedPatternDataKey = sanitizeToSvgId(patternInfo?.dataKey || '')
 
           return (
-            <div className='col-12'>
-              {validColor ? (
-                patternInfo ? (
-                  <LegendShape
-                    fill={legendColor[0]}
-                    patternInfo={{
-                      pattern: patternInfo.pattern,
-                      patternId: `${mapId}--${patternInfo.dataKey}--${patternInfo.patternIndex}--table`,
-                      size: patternInfo.size,
-                      color: patternInfo.color
-                    }}
-                  />
+            <div style={{ display: 'flex', alignItems: 'flex-start', flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
+              <div style={{ flexShrink: 0 }}>
+                {validColor ? (
+                  patternInfo ? (
+                    <LegendShape
+                      fill={legendColor[0]}
+                      patternInfo={{
+                        pattern: patternInfo.pattern,
+                        patternId: `${mapId}--${sanitizedPatternDataKey}--${patternInfo.patternIndex}--table`,
+                        size: patternInfo.size,
+                        color: patternInfo.color
+                      }}
+                    />
+                  ) : (
+                    <LegendShape fill={legendColor[0]} />
+                  )
                 ) : (
-                  <LegendShape fill={legendColor[0]} />
-                )
-              ) : (
-                <div className='d-inline-block me-2' style={{ width: '1rem', height: '1rem' }} />
-              )}
+                  <div className='me-2' style={{ width: '1rem', height: '1rem' }} />
+                )}
+              </div>
               <CellAnchor
                 markup={labelValue}
                 row={rowObj}
@@ -160,7 +169,8 @@ const mapCellArray = ({
         } else {
           const rowData = runtimeData[row]
           const dataValue = getDataValue(config, rowData, column)
-          return displayDataAsText(dataValue, column, config)
+          const text = displayDataAsText(dataValue, column, config)
+          return typeof text === 'string' ? parse(text) : text
         }
       })
   )

package/components/DataTable/helpers/tests/mapCellMatrix.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { getMapRowData } from '../mapCellMatrix'
+import { getMapDataTableColumnKeys } from '../getMapDataTableColumnKeys'
 
 describe('getMapRowData', () => {
   const columns = {
@@ -77,4 +78,36 @@ describe('getMapRowData', () => {
       }
     ])
   })
+
+  it('orders visible columns using display order instead of config key order', () => {
+    const orderedConfig = {
+      ...config,
+      general: { ...config.general, geoType: 'us-state' }
+    }
+    const orderedColumns = {
+      geo: { dataTable: true, name: 'geo', label: 'Geo', order: 3 },
+      column1: { dataTable: true, name: 'column1', label: 'Column 1', order: 2 },
+      column2: { dataTable: true, name: 'column2', label: 'Column 2', order: 1 },
+      hidden: { dataTable: false, name: 'hidden', label: 'Hidden', order: 4 }
+    }
+
+    expect(getMapDataTableColumnKeys(orderedColumns)).toEqual(['column2', 'column1', 'geo'])
+
+    const orderedResult = getMapRowData(
+      rows,
+      orderedColumns,
+      orderedConfig,
+      formatLegendLocation,
+      runtimeData,
+      displayGeoName,
+      []
+    )
+
+    expect(Object.keys(orderedResult[0])).toEqual(['Column 2', 'Column 1', 'Geo'])
+    expect(orderedResult[0]).toEqual({
+      'Column 2': 'data4',
+      'Column 1': 'data3',
+      Geo: 'displayGeoName -> row2'
+    })
+  })
 })

package/components/DownloadButton.tsx

@@ -6,14 +6,22 @@ import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 type DownloadButtonProps = {
   rawData: any[]
   fileName: string
-  headerColor: string
-  skipId: string | number
+  skipId?: string | number
   configUrl?: string
   interactionLabel?: string
   title?: string
+  config?: any
 }
 
-const DownloadButton = ({ rawData, fileName, headerColor, skipId, interactionLabel, configUrl, title, config }: DownloadButtonProps) => {
+const DownloadButton = ({
+  rawData,
+  fileName,
+  skipId,
+  interactionLabel,
+  configUrl,
+  title,
+  config
+}: DownloadButtonProps) => {
   const linkRef = useRef<HTMLAnchorElement>(null)
 
   const handleDownload = (event: React.MouseEvent<HTMLAnchorElement>) => {
@@ -59,13 +67,13 @@ const DownloadButton = ({ rawData, fileName, headerColor, skipId, interactionLab
       type='button'
       onClick={handleDownload}
       aria-label='Download this data in a CSV file format.'
-      className={`${headerColor} no-border`}
-      id={`${skipId}`}
+      className='no-border'
+      id={skipId != null ? `${skipId}` : undefined}
       data-html2canvas-ignore
       role='button'
       style={{ cursor: 'pointer' }}
     >
-      Download Data (CSV)
+      {config?.table?.downloadDataLabel || 'Download Data (CSV)'}
     </a>
   )
 }