@cdc/core 4.26.2 → 4.26.3

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/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>
   )
 }

package/components/EditorPanel/ColumnsEditor.tsx

@@ -10,21 +10,23 @@ import FieldSetWrapper from './FieldSetWrapper'
 import { useDataColumns } from '../../hooks/useDataColumns'
 import Alert from '../Alert/components/Alert'
 
-interface ColumnsEditorProps {
-  config: Partial<Visualization>
-  updateField: UpdateFieldFunc<string | boolean | string[] | number | Column | Record<string, Partial<Column>>>
-  deleteColumn: (colName: string) => void
-}
+interface ColumnsEditorProps {
+  config: Partial<Visualization>
+  updateField: UpdateFieldFunc<string | boolean | string[] | number | Column | Record<string, Partial<Column>>>
+  deleteColumn: (colName: string) => void
+  hiddenColumnNames?: string[]
+}
 
 type OpenControls = [Record<string, boolean>, Function] // useState type
 
-const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({
-  config,
-  deleteColumn,
-  updateField,
-  colKey,
-  controls
-}) => {
+const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({
+  config,
+  deleteColumn,
+  updateField,
+  hiddenColumnNames = [],
+  colKey,
+  controls
+}) => {
   const [openControls, setOpenControls] = controls
 
   const editColumn = (key, value) => {
@@ -58,17 +60,18 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
   const allColumns = useDataColumns(config.data)
 
   // Filter out groupBy and already configured columns
-  const availableColumns = useMemo(() => {
-    const configuredColumns = Object.values(config.columns).map(col => col.name)
-    const cols = allColumns.filter(key => {
-      if (config.table.groupBy === key) return false
-      if (configuredColumns.includes(key)) return false
-      return true
-    })
-    // Add current column name if it exists
-    if (config.columns[colKey]?.name) cols.push(config.columns[colKey].name)
-    return cols
-  }, [allColumns, config.table.groupBy, config.columns, colKey])
+  const availableColumns = useMemo(() => {
+    const configuredColumns = Object.values(config.columns).map(col => col.name)
+    const cols = allColumns.filter(key => {
+      if (config.table.groupBy === key) return false
+      if (configuredColumns.includes(key)) return false
+      if (hiddenColumnNames.includes(key)) return false
+      return true
+    })
+    // Add current column name if it exists
+    if (config.columns[colKey]?.name) cols.push(config.columns[colKey].name)
+    return cols
+  }, [allColumns, config.table.groupBy, config.columns, colKey, hiddenColumnNames])
 
   const colName = config.columns[colKey]?.name
 
@@ -264,9 +267,12 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
   )
 }
 
-const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, deleteColumn }) => {
-  const openControls = useState({})
-  const additionalColumns = Object.keys(config.columns)
+const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, deleteColumn, hiddenColumnNames = [] }) => {
+  const openControls = useState({})
+  const additionalColumns = Object.keys(config.columns).filter(colKey => {
+    const columnName = config.columns[colKey]?.name || colKey
+    return !hiddenColumnNames.includes(columnName)
+  })
 
   // just adds a new column but not set to any data yet
   const addColumnConfig = number => {
@@ -312,11 +318,12 @@ const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, dele
               key={val + i}
               controls={openControls}
               config={config}
-              deleteColumn={deleteColumn}
-              updateField={updateField}
-              colKey={val}
-            />
-          ))}
+              deleteColumn={deleteColumn}
+              updateField={updateField}
+              hiddenColumnNames={hiddenColumnNames}
+              colKey={val}
+            />
+          ))}
           <button
             className={'btn btn-primary'}
             onClick={event => {