@cdc/core 4.25.11 → 4.26.1

package/components/ComboBox/combobox.styles.css

@@ -0,0 +1,185 @@
+.cdc-open-viz-module {
+  .cove-combobox {
+    position: relative;
+    width: 100%;
+  }
+
+  .cove-combobox-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  input.cove-combobox-input[role='combobox'] {
+    width: 100%;
+    display: block;
+    padding: 0.5rem 3rem 0.5rem 0.5rem;
+    font-family: var(--app-font-secondary);
+    font-weight: 300;
+    font-size: 0.833rem;
+    line-height: normal;
+    color: var(--cool-gray-90);
+    background-color: white;
+    background-clip: padding-box;
+    border: 1px solid var(--cool-gray-10) !important;
+    border-radius: 0.333rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    cursor: text;
+  }
+
+  input.cove-combobox-input[role='combobox']:focus {
+    color: var(--cool-gray-90);
+    background-color: white;
+    border: 1px solid var(--cool-gray-10) !important;
+    box-shadow: none;
+  }
+
+  input.cove-combobox-input[role='combobox']:focus-visible {
+    outline: dashed 2px rgb(0, 122, 153) !important;
+    outline-offset: 3px !important;
+    border-radius: 6px !important;
+  }
+
+  input.cove-combobox-input[role='combobox']:disabled {
+    background-color: var(--lightestGray);
+    color: var(--cool-gray-90);
+    opacity: 1;
+    cursor: default;
+  }
+
+  input.cove-combobox-input[role='combobox']:disabled::placeholder {
+    color: var(--cool-gray-90);
+    opacity: 1;
+  }
+
+  input.cove-combobox-input[role='combobox']::placeholder {
+    color: #6c757d;
+    opacity: 1;
+  }
+
+  .cove-combobox-button {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .cove-combobox-button:disabled {
+    cursor: default;
+    opacity: 1;
+  }
+
+  .cove-combobox-button:disabled svg {
+    color: var(--cool-gray-90);
+  }
+
+  .cove-combobox-button svg {
+    color: currentColor;
+    font-size: 0.8em;
+  }
+
+  .cove-combobox-listbox {
+    position: absolute;
+    top: calc(100% + 0.125rem);
+    left: 0;
+    right: auto;
+    width: 150%;
+    z-index: 1000;
+    max-height: 20rem;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style: none;
+    background-color: white;
+    border: 1px solid var(--cool-gray-10);
+    border-radius: 0.333rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  }
+
+  .cove-combobox-listbox:has(.no-results) {
+    pointer-events: none;
+  }
+
+  .cove-combobox-option {
+    padding: 0.5rem 0.5rem;
+    font-family: var(--app-font-secondary);
+    font-weight: 300;
+    font-size: 0.778rem;
+    color: var(--cool-gray-90);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.15s ease-in-out;
+  }
+
+  .cove-combobox-option .cove-combobox-option-highlight {
+    font-weight: 600;
+  }
+
+  .cove-combobox-option:hover:not(.no-results) {
+    background-color: var(--cool-gray-10);
+  }
+
+  .cove-combobox-option.active:not(.no-results) {
+    background-color: var(--cool-gray-10);
+  }
+
+  .cove-combobox-option.no-results {
+    cursor: default;
+    font-style: italic;
+  }
+
+  .cove-combobox-option.no-results:hover {
+    background-color: transparent;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cove-combobox-input,
+    .cove-combobox-option {
+      transition: none;
+    }
+  }
+
+  .cove-combobox-listbox::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .cove-combobox-listbox::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  .cove-combobox-listbox::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+  }
+
+  .cove-combobox-listbox::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+}

package/components/ComboBox/index.ts

@@ -0,0 +1 @@
+export { default } from './ComboBox'

package/components/DataTable/DataTable.tsx

@@ -48,11 +48,22 @@ export type DataTableProps = {
   setFilteredCountryCode?: string // used for Maps only
   tabbingId: string
   tableTitle: string
+  applyLegendToRow?: (
+    rowObj: any,
+    config: any,
+    runtimeLegend: any,
+    legendMemo: any,
+    legendSpecialClassLastMemo: any
+  ) => string[]
+  getPatternForRow?: (rowObj: any, config: any) => any
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   vizTitle?: string
   // determines if columns should be wrapped in the table
   wrapColumns?: boolean
   interactionLabel?: string
+  showDownloadImgButton?: boolean
+  showDownloadPdfButton?: boolean
+  includeContextInDownload?: boolean
   // Map-specific props (optional)
   legendMemo?: React.MutableRefObject<Map<any, any>>
   legendSpecialClassLastMemo?: React.MutableRefObject<Map<any, any>>
@@ -76,7 +87,11 @@ const DataTable = (props: DataTableProps) => {
     viewport,
     vizTitle,
     wrapColumns,
-    interactionLabel = ''
+    interactionLabel = '',
+    showDownloadImgButton,
+    showDownloadPdfButton,
+    includeContextInDownload = false,
+    imageRef
   } = props
   const runtimeData = useMemo(() => {
     const data = removeNullColumns(parentRuntimeData)
@@ -145,23 +160,23 @@ const DataTable = (props: DataTableProps) => {
   const rows =
     isVertical && sortBy.column
       ? rawRows.sort((a, b) => {
-        let dataA
-        let dataB
-        if (config.type === 'map' && config.columns) {
-          const sortByColName = config.columns[sortBy.column].name
-          dataA = runtimeData[a][sortByColName]
-          dataB = runtimeData[b][sortByColName]
-        }
-        if (['chart', 'dashboard', 'table'].includes(config.type)) {
-          dataA = runtimeData[a][sortBy.column]
-          dataB = runtimeData[b][sortBy.column]
-        }
-        if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
-          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
-      })
+          let dataA
+          let dataB
+          if (config.type === 'map' && config.columns) {
+            const sortByColName = config.columns[sortBy.column].name
+            dataA = runtimeData[a][sortByColName]
+            dataB = runtimeData[b][sortByColName]
+          }
+          if (['chart', 'dashboard', 'table'].includes(config.type)) {
+            dataA = runtimeData[a][sortBy.column]
+            dataB = runtimeData[b][sortBy.column]
+          }
+          if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
+            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
+        })
       : rawRows
 
   const limitHeight = {
@@ -214,18 +229,14 @@ const DataTable = (props: DataTableProps) => {
   const getClassNames = (): string => {
     const classes = ['data-table-container']
 
-    const hasDownloadLinkAbove = config.table.download && !config.table.showDownloadLinkBelow
+    const hasDownloadLinkAbove =
+      (config.table.download || showDownloadImgButton || showDownloadPdfButton) && !config.table.showDownloadLinkBelow
     const isStandaloneTable = config.type === 'table'
 
     if (!hasDownloadLinkAbove && !isStandaloneTable) {
       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(' ')
@@ -237,33 +248,76 @@ const DataTable = (props: DataTableProps) => {
       const sharedFilterColumns = config.table?.sharedFilterColumns || []
       const vizFilterColumns = (config.filters || []).map(filter => filter.columnName)
       const filterColumns = [...sharedFilterColumns, ...vizFilterColumns]
+      const getVisibleColumns = () => {
+        if (!config.columns) return []
+
+        return Object.values(config.columns)
+          .filter(col => col.dataTable !== false)
+          .map(col => col.name)
+      }
+
+      const visibleColumns = getVisibleColumns()
       const visibleData =
         config.type === 'map'
           ? getMapRowData(
-            rows,
-            columns,
-            config,
-            formatLegendLocation,
-            runtimeData as Record<string, Object>,
-            displayGeoName,
-            filterColumns
-          )
+              rows,
+              columns,
+              config,
+              formatLegendLocation,
+              runtimeData as Record<string, Object>,
+              displayGeoName,
+              filterColumns
+            )
           : runtimeData.map(d => {
-            return _.pick(d, [...filterColumns, ...dataSeriesColumns])
-          })
+              const columnsToInclude =
+                config.type === 'table'
+                  ? _.uniq([...filterColumns, ...visibleColumns])
+                  : _.uniq([...filterColumns, ...dataSeriesColumns])
+              return _.pick(d, columnsToInclude)
+            })
       const csvData = config.table?.downloadVisibleDataOnly ? visibleData : rawData
 
+      // Build a map from column name to column config for O(1) lookup
+      const columnConfigMap = config.columns
+        ? Object.values(config.columns).reduce((acc, col) => {
+            acc[col.name] = col
+            return acc
+          }, {} as Record<string, any>)
+        : {}
+
+      // Map column names to labels
+      const csvDataUpdated = csvData.map(row => {
+        const newRow: Record<string, any> = {}
+        Object.keys(row).forEach(key => {
+          // Use the column config map for O(1) lookup
+          const columnConfig = columnConfigMap[key]
+          // Use label if it exists, otherwise use the original key
+          const columnLabel = columnConfig?.label || key
+          newRow[columnLabel] = row[key]
+        })
+        return newRow
+      })
+
       // only use fullGeoName on County maps and no other
       if (config.general?.geoType === 'us-county' || config.table.showFullGeoNameInCSV) {
         // Add column for full Geo name along with State
-        return csvData.map(row => {
+        return csvDataUpdated.map((row, index) => {
+          const originalRow = csvData[index]
+          if (!originalRow) {
+            console.warn('Data mismatch: originalRow missing.', {
+              index,
+              csvDataLength: csvData.length,
+              csvDataUpdatedLength: csvDataUpdated.length
+            })
+            return row
+          }
           return {
-            FullGeoName: formatLegendLocation(row[config.columns.geo.name]),
+            FullGeoName: formatLegendLocation(originalRow[config.columns.geo.name]),
             ...row
           }
         })
       } else {
-        return csvData
+        return csvDataUpdated
       }
     }
 
@@ -273,9 +327,6 @@ const DataTable = (props: DataTableProps) => {
         if (hasDownloadLink) {
           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 {
         if (hasDownloadLink) {
           classes.push('mt-2')
@@ -287,15 +338,15 @@ const DataTable = (props: DataTableProps) => {
     const childrenMatrix =
       config.type === 'map'
         ? mapCellMatrix({
-          ...props,
-          rows,
-          wrapColumns,
-          runtimeData,
-          viewport,
-          legendMemo: props.legendMemo || defaultLegendMemo,
-          legendSpecialClassLastMemo: props.legendSpecialClassLastMemo || defaultLegendSpecialClassLastMemo,
-          runtimeLegend: props.runtimeLegend || defaultRuntimeLegend
-        })
+            ...props,
+            rows,
+            wrapColumns,
+            runtimeData,
+            viewport,
+            legendMemo: props.legendMemo || defaultLegendMemo,
+            legendSpecialClassLastMemo: props.legendSpecialClassLastMemo || defaultLegendSpecialClassLastMemo,
+            runtimeLegend: props.runtimeLegend || defaultRuntimeLegend
+          })
         : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
 
     const useBottomExpandCollapse = config.table.showBottomCollapse && expanded && Array.isArray(childrenMatrix)
@@ -303,19 +354,41 @@ const DataTable = (props: DataTableProps) => {
     // 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])
-      )
+          Object.keys(childrenMatrix[0])
+            .filter(
+              i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
+            )
+            .map(x => [x, true])
+        )
       : {}
 
     const showCollapseButton = config.table.collapsible !== false && useBottomExpandCollapse
     const TableMediaControls = ({ belowTable }) => {
       const hasDownloadLink = config.table.download
+      const hasImageDownloads = showDownloadImgButton || showDownloadPdfButton
+
       return (
-        <MediaControls.Section classes={getMediaControlsClasses(belowTable, hasDownloadLink)}>
+        <MediaControls.Section classes={getMediaControlsClasses(belowTable, hasDownloadLink || hasImageDownloads)}>
+          {showDownloadImgButton && (
+            <MediaControls.DownloadLink
+              type='image'
+              title='Download Chart as Image'
+              state={config}
+              elementToCapture={imageRef}
+              interactionLabel={interactionLabel}
+              includeContextInDownload={includeContextInDownload}
+            />
+          )}
+          {showDownloadPdfButton && (
+            <MediaControls.DownloadLink
+              type='pdf'
+              title='Download Chart as PDF'
+              state={config}
+              elementToCapture={imageRef}
+              interactionLabel={interactionLabel}
+              includeContextInDownload={includeContextInDownload}
+            />
+          )}
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} interactionLabel={interactionLabel} />
           {hasDownloadLink && (
             <DownloadButton
@@ -384,8 +457,9 @@ const DataTable = (props: DataTableProps) => {
                 )
               }
               tableOptions={{
-                className: `table table-striped table-width-unset ${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,