@cdc/core 4.25.3 → 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/DataTable/DataTable.tsx

@@ -27,7 +27,6 @@ import _ from 'lodash'
 import { getDataSeriesColumns } from './helpers/getDataSeriesColumns'
 
 export type DataTableProps = {
-  applyLegendToRow?: Function
   colorScale?: Function
   columns?: Record<string, Column>
   config: TableConfig
@@ -35,7 +34,7 @@ export type DataTableProps = {
   defaultSortBy?: string
   displayGeoName?: (row: string) => string
   expandDataTable: boolean
-  formatLegendLocation?: (row: string) => string
+  formatLegendLocation?: (row: string, runtimeLookup: string) => string
   groupBy?: string
   headerColor?: string
   imageRef?: string
@@ -58,20 +57,20 @@ 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,
     displayGeoName,
-    tableTitle,
-    vizTitle,
-    rawData,
-    runtimeData: parentRuntimeData,
-    headerColor,
     expandDataTable,
-    columns,
-    viewport,
     formatLegendLocation,
+    headerColor,
+    rawData,
+    runtimeData: parentRuntimeData,
     tabbingId,
+    tableTitle,
+    viewport,
+    vizTitle,
     wrapColumns
   } = props
   const runtimeData = useMemo(() => {
@@ -248,9 +247,14 @@ const DataTable = (props: DataTableProps) => {
       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 csvData.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 csvData
       }
@@ -275,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
@@ -352,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 }
 
@@ -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/mapCellMatrix.tsx

@@ -4,6 +4,7 @@ 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[]
@@ -72,27 +73,36 @@ const mapCellArray = ({
   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 => {
         if (column === 'geo') {
           const rowObj = runtimeData[row]
-          const legendColor = applyLegendToRow(rowObj)
+          if (!rowObj) {
+            throw new Error('No row object found')
+          }
+
+          const legendColor = applyLegendToRow(rowObj, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+
+          if (!legendColor) {
+            console.error('No legend color found') // eslint-disable-line no-console
+          }
           const labelValue = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
           const mapZoomHandler =
-            config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world'
-              ? () => setFilteredCountryCode(row)
-              : undefined
+            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}

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

package/components/EditorPanel/DataTableEditor.tsx

@@ -196,7 +196,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         />
       )}
       {config?.visualizationType !== 'Sankey' && (
-        <label>
+        <label onClick={e => e.preventDefault()}>
           <span className='edit-label column-heading mt-1'>Exclude Columns </span>
           <MultiSelect
             key={excludedColumns.join('') + 'excluded'}

package/components/EditorPanel/Inputs.tsx

@@ -1,6 +1,6 @@
 import { memo, useEffect, useState } from 'react'
 import { useDebounce } from 'use-debounce'
-import { DROPDOWN_STYLES } from '../Filters/Filters'
+import { DROPDOWN_STYLES } from '../Filters/components/Dropdown'
 
 export type Input = {
   label: string
@@ -118,9 +118,17 @@ const CheckBox = memo((props: CheckboxProps) => {
     return <></>
   }
   return (
-    <label className='checkbox column-heading'>
+    <label
+      className='checkbox column-heading'
+      onClick={e => {
+        if (!['SPAN', 'INPUT'].includes(e.target.nodeName)) {
+          e.preventDefault()
+        }
+      }}
+    >
       <input
         type='checkbox'
+        className='edit-checkbox'
         name={fieldName}
         checked={value}
         onChange={e => {
@@ -161,7 +169,7 @@ const Select = memo((props: SelectProps) => {
     initial: initialValue,
     ...attributes
   } = props
-  const optionsJsx = options.map((option, index) => {
+  const optionsJsx = options?.map((option, index) => {
     if (typeof option === 'string') {
       return (
         <option value={option} key={index}>
@@ -178,7 +186,7 @@ const Select = memo((props: SelectProps) => {
   })
 
   if (initialValue) {
-    optionsJsx.unshift(
+    optionsJsx?.unshift(
       <option value='' key='initial'>
         {initialValue}
       </option>

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { SubGrouping, VizFilter, OrderBy } from '../../../types/VizFilter'
-import { filterOrderOptions, handleSorting } from '../../Filters'
+import { handleSorting } from '../../Filters/helpers/handleSorting'
+import { filterOrderOptions } from '../../../helpers/filterOrderOptions'
 import FilterOrder from './components/FilterOrder'
 import { Visualization } from '../../../types/Visualization'
 import { useMemo } from 'react'

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -5,7 +5,9 @@ import { Visualization } from '../../../types/Visualization'
 import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
 import _ from 'lodash'
 import { MultiSelectFilter, VizFilter, VizFilterStyle } from '../../../types/VizFilter'
-import { filterStyleOptions, handleSorting, filterOrderOptions } from '../../Filters'
+import { handleSorting } from '../../Filters/helpers/handleSorting'
+import { filterOrderOptions } from '../../../helpers/filterOrderOptions'
+import { filterStyleOptions } from '../../Filters'
 import FieldSetWrapper from '../FieldSetWrapper'
 
 import FilterOrder from './components/FilterOrder'