@cdc/core 4.25.3-6 → 4.25.5-1

package/assets/icon-close.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 24 24" fill="currentColor">
     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
 </svg>

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -35,20 +35,22 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
   }, [config])
 
   const typeLookup = {
-    chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
-    dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
-    map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
-    'markup-include': [
-      'Markup Include',
-      'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html',
-      <MarkupIncludeIcon />
-    ]
+    chart: ['Charts', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
+    dashboard: ['Dashboard', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
+    map: ['Maps', 'https://www.cdc.gov/cove/index.html', <MapIcon />],
+    'markup-include': ['Markup Include', 'https://www.cdc.gov/cove/index.html', <MarkupIncludeIcon />]
   }
 
   if (!config.type) return <></>
   return (
     <>
-      <a href={typeLookup[config.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
+      <a
+        href={typeLookup[config.type][1]}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='guidance-link'
+        style={{ cursor: 'pointer !important' }}
+      >
         {typeLookup[config.type][2]}
         <div>
           <span className='heading-3'>Get Help with {typeLookup[config.type][0]}</span>

package/components/DataTable/DataTable.tsx

@@ -11,7 +11,7 @@ import BoxplotHeader from './components/BoxplotHeader'
 import MapHeader from './components/MapHeader'
 import SkipTo from '../elements/SkipTo'
 import ExpandCollapse from './components/ExpandCollapse'
-import mapCellMatrix from './helpers/mapCellMatrix'
+import mapCellMatrix, { getMapRowData } from './helpers/mapCellMatrix'
 import Table from '../Table'
 import chartCellMatrix from './helpers/chartCellMatrix'
 import regionCellMatrix from './helpers/regionCellMatrix'
@@ -24,17 +24,17 @@ import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import isRightAlignedTableValue from '@cdc/core/helpers/isRightAlignedTableValue'
 import './data-table.css'
 import _ from 'lodash'
+import { getDataSeriesColumns } from './helpers/getDataSeriesColumns'
 
 export type DataTableProps = {
-  applyLegendToRow?: Function
   colorScale?: Function
   columns?: Record<string, Column>
   config: TableConfig
   dataConfig?: Object
   defaultSortBy?: string
-  displayGeoName?: Function
+  displayGeoName?: (row: string) => string
   expandDataTable: boolean
-  formatLegendLocation?: Function
+  formatLegendLocation?: (row: string, runtimeLookup: string) => string
   groupBy?: string
   headerColor?: string
   imageRef?: string
@@ -45,8 +45,7 @@ export type DataTableProps = {
   outerContainerRef?: Function
   rawData: Object[]
   runtimeData: Object[] & Record<string, Object>
-  setFilteredCountryCode?: Function // used for Maps only
-  showDownloadButton?: boolean
+  setFilteredCountryCode?: string // used for Maps only
   tabbingId: string
   tableTitle: string
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
@@ -58,36 +57,33 @@ export type DataTableProps = {
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
   const {
+    columns,
     config,
     dataConfig,
     defaultSortBy,
-    tableTitle,
-    vizTitle,
-    rawData,
-    runtimeData: parentRuntimeData,
-    headerColor,
+    displayGeoName,
     expandDataTable,
-    columns,
-    viewport,
     formatLegendLocation,
+    headerColor,
+    rawData,
+    runtimeData: parentRuntimeData,
     tabbingId,
+    tableTitle,
+    viewport,
+    vizTitle,
     wrapColumns
   } = props
   const runtimeData = useMemo(() => {
     const data = removeNullColumns(parentRuntimeData)
-    if (config.table.pivot) {
+    const { columnName, valueColumns } = config.table.pivot || {}
+    if (columnName && valueColumns) {
       const excludeColumns = Object.values(config.columns || {})
         .filter(column => column.dataTable === false)
         .map(col => col.name)
-      const { columnName, valueColumns } = config.table.pivot
-      if (columnName && valueColumns) {
-        // remove excluded columns so that they aren't included in the pivot calculation
-        const _data = data.map(row => _.omit(row, excludeColumns))
-        return pivotData(_data, columnName, valueColumns)
-      }
+      return pivotData(data, columnName, valueColumns, excludeColumns)
     }
     return data
-  }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumn])
+  }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumns])
 
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState<any>({
@@ -208,13 +204,10 @@ const DataTable = (props: DataTableProps) => {
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
   const hasNoData = runtimeData.length === 0
-
   const getClassNames = (): string => {
     const classes = ['data-table-container']
 
-    const hasDownloadLinkAbove =
-      (config.table.download || config.general?.showDownloadButton) && !config.table.showDownloadLinkBelow
-
+    const hasDownloadLinkAbove = config.table.download && !config.table.showDownloadLinkBelow
     const isStandaloneTable = config.type === 'table'
 
     if (!hasDownloadLinkAbove && !isStandaloneTable) {
@@ -233,12 +226,37 @@ const DataTable = (props: DataTableProps) => {
 
   if (config.visualizationType !== 'Box Plot') {
     const getDownloadData = () => {
+      const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
+      const sharedFilterColumns = config.table?.sharedFilterColumns || []
+      const vizFilterColumns = (config.filters || []).map(filter => filter.columnName)
+      const filterColumns = [...sharedFilterColumns, ...vizFilterColumns]
+      const visibleData =
+        config.type === 'map'
+          ? getMapRowData(
+              rows,
+              columns,
+              config,
+              formatLegendLocation,
+              runtimeData as Record<string, Object>,
+              displayGeoName,
+              filterColumns
+            )
+          : runtimeData.map(d => {
+              return _.pick(d, [...filterColumns, ...dataSeriesColumns])
+            })
+      const csvData = config.table?.downloadVisibleDataOnly ? visibleData : rawData
+
       // only use fullGeoName on County maps and no other
-      if (config.general?.geoType === 'us-county') {
+      if (config.general?.geoType === 'us-county' || config.table.showFullGeoNameInCSV) {
         // Add column for full Geo name along with State
-        return rawData.map(row => ({ FullGeoName: formatLegendLocation(row[config.columns.geo.name]), ...row }))
+        return csvData.map(row => {
+          return {
+            FullGeoName: formatLegendLocation(row[config.columns.geo.name]),
+            ...row
+          }
+        })
       } else {
-        return rawData
+        return csvData
       }
     }
 
@@ -261,7 +279,7 @@ const DataTable = (props: DataTableProps) => {
 
     const childrenMatrix =
       config.type === 'map'
-        ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
+        ? mapCellMatrix({ ...props, rows, wrapColumns, 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
@@ -276,7 +294,7 @@ const DataTable = (props: DataTableProps) => {
       : {}
 
     const TableMediaControls = ({ belowTable }) => {
-      const hasDownloadLink = config.table.download || config.general?.showDownloadButton
+      const hasDownloadLink = config.table.download
       return (
         <MediaControls.Section classes={getMediaControlsClasses(belowTable, hasDownloadLink)}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
@@ -338,7 +356,8 @@ const DataTable = (props: DataTableProps) => {
                 }`,
                 'aria-live': 'assertive',
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
-                hidden: !expanded
+                hidden: !expanded,
+                cellMinWidth: 100
               }}
               rightAlignedCols={rightAlignedCols}
             />

package/components/DataTable/components/CellAnchor.tsx

@@ -6,7 +6,7 @@ const CellAnchor = ({ markup, row, columns, navigationHandler, mapZoomHandler })
   if (columns.navigate && row[columns.navigate.name]) {
     return (
       <span
-        onClick={() => navigationHandler(row[columns.navigate.name])}
+        onClick={() => navigationHandler('_blank', row[columns.navigate.name])}
         className='table-link'
         title='Click for more information (Opens in a new window)'
         role='link'

package/components/DataTable/components/ChartHeader.tsx

@@ -4,6 +4,7 @@ import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
 import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
+import parse from 'html-react-parser'
 
 type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport; rightAlignedCols }
 
@@ -54,7 +55,7 @@ const ChartHeader = ({
   }
 
   const ColumnHeadingText = ({ column, text, config }) => {
-    if (text === 'pivotColumn') return ''
+    if (text === '_pivotedFrom') return ''
     let notApplicableText = 'Not Applicable'
     if (text === '__series__' && config.table.indexLabel) return `${config.table.indexLabel} `
     if (text === '__series__' && !config.table.indexLabel)
@@ -75,7 +76,7 @@ const ChartHeader = ({
     return (
       <tr>
         {dataSeriesColumns.map((column, index) => {
-          const text = getSeriesName(column, config)
+          const text = parse(getSeriesName(column, config))
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
           const isSortedCol = column === sortBy.column && !hasRowType

package/components/DataTable/components/MapHeader.tsx

@@ -36,6 +36,7 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAligne
           return (
             <th
               style={{
+                minWidth: (config.table.cellMinWidth || 0) + 'px',
                 textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
                 paddingRight: '1.3em'
               }}

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -7,6 +7,7 @@ import { getDataSeriesColumns } from './getDataSeriesColumns'
 import { ReactNode } from 'react'
 import { CellMatrix, GroupCellMatrix } from '../../Table/types/CellMatrix'
 import { getRowType } from './getRowType'
+import parse from 'html-react-parser'
 
 type ChartRowsProps = DataTableProps & {
   rows: string[]
@@ -84,7 +85,7 @@ const chartCellArray = ({
           ? [
               <>
                 {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
-                {seriesName}
+                {parse(seriesName)}
               </>
             ]
           : []

package/components/DataTable/helpers/getChartCellValue.ts

@@ -2,16 +2,22 @@ import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
 import { formatNumber } from '../../../helpers/cove/number'
 import { TableConfig } from '../types/TableConfig'
 
+const isPivotColumn = (columnName, config) => {
+  const tableHasPivotColumnConfigured = config.table.pivot?.valueColumns?.length
+  const originalColumnNames = Object.keys(config.data?.[0] || {})
+  const columnIsPivot = originalColumnNames.length && !originalColumnNames.includes(columnName)
+  return tableHasPivotColumnConfigured && columnIsPivot
+}
+
 // if its additional column, return formatting params
-const isAdditionalColumn = (column, config) => {
-  let inthere = false
+const isAdditionalColumn = (column: string, config, rowData) => {
+  const columnName = isPivotColumn(column, config) ? rowData._pivotedFrom : column
   let formattingParams = {}
   const { columns } = config
   if (columns) {
     Object.keys(columns).forEach(keycol => {
       const col = columns[keycol]
-      if (col.name === column) {
-        inthere = true
+      if (col.name === columnName) {
         formattingParams = {
           addColPrefix: col.prefix,
           addColSuffix: col.suffix,
@@ -54,7 +60,7 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
       if (rightSeriesItem.dataKey === column) resolvedAxis = 'right'
     })
 
-    let addColParams = isAdditionalColumn(column, config)
+    let addColParams = isAdditionalColumn(column, config, rowObj)
     if (addColParams) {
       cellValue = config.dataFormat
         ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams)

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -57,9 +57,13 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
   })
 
   tmpSeriesColumns.sort((a, b) => {
-    if (a === 'pivotColumn') return -1
-    if (b === 'pivotColumn') return 1
+    if (a === '_pivotedFrom') return -1
+    if (b === '_pivotedFrom') return 1
     return columnOrderingHash[a] - columnOrderingHash[b]
   })
-  return tmpSeriesColumns
+
+  return tmpSeriesColumns.filter(colName => {
+    // remove metadata added by pivotData function
+    return colName !== '_pivotedFrom'
+  })
 }

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -3,52 +3,106 @@ import CellAnchor from '../components/CellAnchor'
 import { DataTableProps } from '../DataTable'
 import { ReactNode } from 'react'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
+import _ from 'lodash'
+import { applyLegendToRow } from '@cdc/map/src/helpers/applyLegendToRow'
 
 type MapRowsProps = DataTableProps & {
   rows: string[]
 }
 
+const getGeoLabel = (config, row, formatLegendLocation, displayGeoName) => {
+  const { geoType, type } = config.general
+  let labelValue
+  if (!['single-state', 'us-county'].includes(geoType) || type === 'us-geocode') {
+    labelValue = displayGeoName(row)
+    labelValue = String(labelValue).startsWith('region') ? _.capitalize(labelValue) : labelValue
+  } else {
+    labelValue = formatLegendLocation(row)
+  }
+  return labelValue
+}
+
+const getDataValue = (config, rowData, column) => {
+  // 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(rowData[specialClass.key]) === specialClass.value) {
+          specialValFound = specialClass.label
+        }
+      }
+    })
+  }
+  return specialValFound || rowData[columnName]
+}
+
+export const getMapRowData = (
+  rows: string[],
+  columns: Record<string, { label; name?; dataTable }>,
+  config: Record<string, Object>,
+  formatLegendLocation: (row: string) => string,
+  runtimeData: Record<string, Object>,
+  displayGeoName: (row: string) => string,
+  filterColumns: string[]
+) => {
+  return rows.map((row: string) => {
+    const dataRow = {}
+    ;[
+      ...filterColumns,
+      ...Object.keys(columns).filter(column => columns[column].dataTable === true && columns[column].name)
+    ].map(column => {
+      const label = columns[column]?.label || columns[column]?.name || column
+      if (column === 'geo') {
+        dataRow[label] = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
+      } else if (filterColumns.includes(column)) {
+        dataRow[label] = runtimeData[row][column]
+      } else {
+        const dataValue = getDataValue(config, runtimeData[row], column)
+        dataRow[label] = displayDataAsText(dataValue, column, config)
+      }
+    })
+    return dataRow
+  })
+}
+
 const mapCellArray = ({
   rows,
   columns,
   runtimeData,
   config,
-  applyLegendToRow,
   displayGeoName,
   formatLegendLocation,
   navigationHandler,
-  setFilteredCountryCode
+  setFilteredCountryCode,
+  legendMemo,
+  legendSpecialClassLastMemo,
+  runtimeLegend
 }: MapRowsProps): ReactNode[][] => {
+  const { allowMapZoom, geoType, type } = config.general
   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)
+          if (!rowObj) {
+            throw new Error('No row object found')
+          }
 
-          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)
+          const legendColor = applyLegendToRow(rowObj, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+
+          if (!legendColor) {
+            console.error('No legend color found') // eslint-disable-line no-console
           }
-          cellValue = (
+          const labelValue = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
+          const mapZoomHandler =
+            type === 'bubble' && allowMapZoom && geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
+          return (
             <div className='col-12'>
-              <LegendShape fill={legendColor[0]} />
+              {legendColor && legendColor.length > 0 && <LegendShape fill={legendColor[0]} />}
               <CellAnchor
                 markup={labelValue}
                 row={rowObj}
@@ -59,23 +113,10 @@ const mapCellArray = ({
             </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)
+          const rowData = runtimeData[row]
+          const dataValue = getDataValue(config, rowData, column)
+          return displayDataAsText(dataValue, column, config)
         }
-
-        return cellValue
       })
   )
 }

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

@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest'
+import { getMapRowData } from '../mapCellMatrix'
+
+describe('getMapRowData', () => {
+  const columns = {
+    geo: { dataTable: true, name: 'geo', label: 'Geo' },
+    column1: { dataTable: true, name: 'column1', label: 'Column 1' },
+    column2: { dataTable: true, name: 'column2', label: 'Column 2' }
+  }
+  const config = {
+    general: { geoType: 'us-state', type: 'map' },
+    columns: {
+      geo: { name: 'geo' },
+      column1: { name: 'column1' },
+      column2: { name: 'column2' }
+    },
+    legend: { specialClasses: [] }
+  }
+  const formatLegendLocation = row => row
+  const rows = ['row2', 'row1']
+  const runtimeData = {
+    row1: { geo: 'region1', column1: 'data1', column2: 'data2', somethingElse: 'data5' },
+    row2: { geo: 'region2', column1: 'data3', column2: 'data4', somethingElse: 'data6' }
+  }
+  const displayGeoName = row => `displayGeoName -> ${row}`
+  const sharedFilterColumns = ['somethingElse']
+
+  it('should map rows to data rows correctly', () => {
+    const result = getMapRowData(
+      rows,
+      columns,
+      config,
+      formatLegendLocation,
+      runtimeData,
+      displayGeoName,
+      sharedFilterColumns
+    )
+
+    expect(result).toEqual([
+      {
+        Geo: 'displayGeoName -> row2',
+        'Column 1': 'data3',
+        'Column 2': 'data4',
+        somethingElse: 'data6'
+      },
+      {
+        Geo: 'displayGeoName -> row1',
+        'Column 1': 'data1',
+        'Column 2': 'data2',
+        somethingElse: 'data5'
+      }
+    ])
+
+    config.general.geoType = 'us-county'
+    const result2 = getMapRowData(
+      rows,
+      columns,
+      config,
+      formatLegendLocation,
+      runtimeData,
+      displayGeoName,
+      sharedFilterColumns
+    )
+
+    expect(result2).toEqual([
+      {
+        Geo: 'row2',
+        'Column 1': 'data3',
+        'Column 2': 'data4',
+        somethingElse: 'data6'
+      },
+      {
+        Geo: 'row1',
+        'Column 1': 'data1',
+        'Column 2': 'data2',
+        somethingElse: 'data5'
+      }
+    ])
+  })
+})

package/components/DownloadButton.tsx

@@ -9,7 +9,12 @@ type DownloadButtonProps = {
 
 const DownloadButton = ({ rawData, fileName, headerColor, skipId }: DownloadButtonProps) => {
   const csvData = Papa.unparse(rawData)
-  const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
+  // 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.
+  // Adding the BOM ensures that Excel interprets special characters correctly.
+  const bom = '\uFEFF'
+  const utf8EncodedCsvData = new TextEncoder().encode(bom + csvData)
+  const blob = new Blob([utf8EncodedCsvData], { type: 'text/csv;charset=utf-8;' })
 
   const saveBlob = () => {
     //@ts-ignore
@@ -20,7 +25,17 @@ const DownloadButton = ({ rawData, fileName, headerColor, skipId }: DownloadButt
   }
 
   return (
-    <a download={fileName} type='button' onClick={saveBlob} href={URL.createObjectURL(blob)} aria-label='Download this data in a CSV file format.' className={`${headerColor} no-border`} id={`${skipId}`} data-html2canvas-ignore role='button'>
+    <a
+      download={fileName}
+      type='button'
+      onClick={saveBlob}
+      href={URL.createObjectURL(blob)}
+      aria-label='Download this data in a CSV file format.'
+      className={`${headerColor} no-border`}
+      id={`${skipId}`}
+      data-html2canvas-ignore
+      role='button'
+    >
       Download Data (CSV)
     </a>
   )