@cdc/core 4.23.10 → 4.23.11

package/components/DataTable/helpers/boxplotCellMatrix.tsx

@@ -0,0 +1,64 @@
+import { CellMatrix } from '../../Table/types/CellMatrix'
+
+const boxplotCellMatrix = ({ rows, config }): CellMatrix => {
+  const resolveName = key => {
+    let {
+      boxplot: { labels }
+    } = config
+    const columnLookup = {
+      columnMean: labels.mean,
+      columnMax: labels.maximum,
+      columnMin: labels.minimum,
+      columnIqr: labels.iqr,
+      columnCategory: 'Category',
+      columnMedian: labels.median,
+      columnFirstQuartile: labels.q1,
+      columnThirdQuartile: labels.q3,
+      columnOutliers: labels.outliers,
+      values: labels.values,
+      columnTotal: labels.total,
+      columnSd: 'Standard Deviation',
+      nonOutlierValues: 'Non Outliers',
+      columnLowerBounds: labels.lowerBounds,
+      columnUpperBounds: labels.upperBounds
+    }
+
+    let resolvedName = columnLookup[key]
+
+    return resolvedName
+  }
+  let resolveCell = (rowid, plot) => {
+    if (Number(rowid) === 0) return true
+    if (Number(rowid) === 1) return plot.columnMax
+    if (Number(rowid) === 2) return plot.columnThirdQuartile
+    if (Number(rowid) === 3) return plot.columnMedian
+    if (Number(rowid) === 4) return plot.columnFirstQuartile
+    if (Number(rowid) === 5) return plot.columnMin
+    if (Number(rowid) === 6) return plot.columnTotal
+    if (Number(rowid) === 7) return plot.columnSd
+    if (Number(rowid) === 8) return plot.columnMean
+    if (Number(rowid) === 9) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
+    if (Number(rowid) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
+    return <p>-</p>
+  }
+  // get list of data keys for each row
+  let dataKeys = rows.map(row => {
+    return row[0]
+  })
+  let columns = ['Measures', ...config.boxplot.categories]
+  dataKeys.shift() // remove index 0 // we did header column separately
+  return dataKeys.map((rowkey, index) => {
+    return columns.map((column, colnum) => {
+      let cellValue
+      if (column === 'Measures') {
+        let labelValue = index > 0 ? resolveName(rowkey) : ''
+        cellValue = <>{labelValue}</>
+      } else {
+        cellValue = resolveCell(index, config.boxplot.plots[colnum - 1])
+      }
+      return cellValue
+    })
+  })
+}
+
+export default boxplotCellMatrix

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -0,0 +1,78 @@
+import LegendCircle from '@cdc/core/components/LegendCircle'
+import { customSort } from './customSort'
+import { getSeriesName } from './getSeriesName'
+import { DataTableProps } from '../DataTable'
+import { getChartCellValue } from './getChartCellValue'
+import { getDataSeriesColumns } from './getDataSeriesColumns'
+import { ReactNode } from 'react'
+import { CellMatrix, GroupCellMatrix } from '../../Table/types/CellMatrix'
+
+type ChartRowsProps = DataTableProps & {
+  rows: string[]
+  isVertical: boolean
+  sortBy: { colIndex; column }
+  groupBy?: string
+}
+
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+  const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
+
+  const dataSeriesColumnsSorted = () => {
+    if (!sortBy && sortBy.colIndex === null) return dataSeriesColumns
+    return dataSeriesColumns.sort((a, b) => {
+      if (sortBy.column === '__series__') return customSort(a, b, sortBy, config)
+      let row = runtimeData.find(d => d[config.xAxis?.dataKey] === sortBy.column)
+
+      const rowIndex = runtimeData[sortBy.colIndex - 1]
+      if (row) {
+        return customSort(row[a], row[b], sortBy, config)
+      }
+      if (row === undefined && rowIndex) {
+        return customSort(rowIndex[a], rowIndex[b], sortBy, config)
+      }
+    })
+  }
+
+  if (isVertical) {
+    if (groupBy) {
+      const cellMatrix: GroupCellMatrix = {}
+      rows.forEach(row => {
+        let groupKey: string
+        let groupValues = []
+        dataSeriesColumns.forEach((column, j) => {
+          if (groupBy === column) {
+            groupKey = getChartCellValue(row, column, config, runtimeData)
+          } else {
+            groupValues.push(getChartCellValue(row, column, config, runtimeData))
+          }
+        })
+        if (!cellMatrix[groupKey]) {
+          cellMatrix[groupKey] = [groupValues]
+        } else {
+          cellMatrix[groupKey].push(groupValues)
+        }
+      })
+      return cellMatrix
+    } else {
+      return rows.map(row => {
+        return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))
+      })
+    }
+  } else {
+    return dataSeriesColumnsSorted().map(column => {
+      const seriesName = getSeriesName(column, config)
+      let nodes: ReactNode[] =
+        config.visualizationType !== 'Pie'
+          ? [
+              <>
+                {colorScale && colorScale(seriesName) && <LegendCircle fill={colorScale(seriesName)} />}
+                {seriesName}
+              </>
+            ]
+          : []
+      return nodes.concat(rows.map((row, i) => getChartCellValue(row, column, config, runtimeData)))
+    })
+  }
+}
+
+export default chartCellArray

package/components/DataTable/helpers/customSort.ts

@@ -0,0 +1,55 @@
+import { parseDate } from '@cdc/core/helpers/cove/date'
+import { standardizeStateName } from './standardizeState'
+
+export const customSort = (a, b, sortBy, config) => {
+  let valueA = a
+  let valueB = b
+
+  if (config.type === 'map') {
+    valueA = standardizeStateName(a)
+    valueB = standardizeStateName(b)
+  }
+  // Treat booleans and nulls as an empty string
+  valueA = valueA === false || valueA === true || valueA === null ? '' : valueA
+  valueB = valueB === false || valueB === true || valueB === null ? '' : valueB
+
+  const trimmedA = String(valueA).trim()
+  const trimmedB = String(valueB).trim()
+
+  if (config.xAxis?.dataKey === sortBy.column && config.xAxis.type === 'date') {
+    let dateA = parseDate(config.xAxis.dateParseFormat, trimmedA)
+
+    let dateB = parseDate(config.xAxis.dateParseFormat, trimmedB)
+
+    if (dateA && dateA.getTime) dateA = dateA.getTime()
+
+    if (dateB && dateB.getTime) dateB = dateB.getTime()
+
+    return !sortBy.asc ? dateA - dateB : dateB - dateA
+  }
+  // Check if values are numbers
+  const isNumA = !isNaN(Number(valueA)) && valueA !== undefined && valueA !== null && trimmedA !== ''
+  const isNumB = !isNaN(Number(valueB)) && valueB !== undefined && valueB !== null && trimmedB !== ''
+
+  // Handle empty strings or spaces
+  if (trimmedA === '' && trimmedB !== '') return !sortBy.asc ? -1 : 1
+  if (trimmedA !== '' && trimmedB === '') return !sortBy.asc ? 1 : -1
+
+  // Both are numbers: Compare numerically
+  if (isNumA && isNumB) {
+    return !sortBy.asc ? Number(valueA) - Number(valueB) : Number(valueB) - Number(valueA)
+  }
+
+  // Only A is a number
+  if (isNumA) {
+    return !sortBy.asc ? -1 : 1
+  }
+
+  // Only B is a number
+  if (isNumB) {
+    return !sortBy.asc ? 1 : -1
+  }
+
+  // Neither are numbers: Compare as strings
+  return !sortBy.asc ? trimmedA.localeCompare(trimmedB) : trimmedB.localeCompare(trimmedA)
+}

package/components/DataTable/helpers/getChartCellValue.ts

@@ -0,0 +1,55 @@
+import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
+import { formatNumber } from '@cdc/core/helpers/cove/number'
+
+// if its additional column, return formatting params
+const isAdditionalColumn = (column, config) => {
+  let inthere = false
+  let formattingParams = {}
+  const { columns } = config
+  if (columns) {
+    Object.keys(columns).forEach(keycol => {
+      const col = columns[keycol]
+      if (col.name === column) {
+        inthere = true
+        formattingParams = {
+          addColPrefix: col.prefix,
+          addColSuffix: col.suffix,
+          addColRoundTo: col.roundToPlace ? col.roundToPlace : '',
+          addColCommas: col.commas
+        }
+      }
+    })
+  }
+  return formattingParams
+}
+
+export const getChartCellValue = (row, column, config, runtimeData) => {
+  const rowObj = runtimeData[row]
+  let cellValue // placeholder for formatting below
+  let labelValue = rowObj[column] // just raw X axis string
+  if (column === config.xAxis?.dataKey) {
+    // not the prettiest, but helper functions work nicely here.
+    cellValue = config.xAxis?.type === 'date' ? formatDate(config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
+  } else {
+    let resolvedAxis = 'left'
+    let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []
+    let rightAxisItems = config.series ? config.series.filter(item => item?.axis === 'Right') : []
+
+    leftAxisItems.map(leftSeriesItem => {
+      if (leftSeriesItem.dataKey === column) resolvedAxis = 'left'
+    })
+
+    rightAxisItems.map(rightSeriesItem => {
+      if (rightSeriesItem.dataKey === column) resolvedAxis = 'right'
+    })
+
+    let addColParams = isAdditionalColumn(column, config)
+    if (addColParams) {
+      cellValue = config.dataFormat ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams) : runtimeData[row][column]
+    } else {
+      cellValue = config.dataFormat ? formatNumber(runtimeData[row][column], resolvedAxis, false, config) : runtimeData[row][column]
+    }
+  }
+
+  return cellValue
+}

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -0,0 +1,28 @@
+export const getDataSeriesColumns = (config, isVertical, runtimeData): string[] => {
+  let tmpSeriesColumns
+  if (config.visualizationType !== 'Pie') {
+    tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll
+    if (config.series) {
+      config.series.forEach(element => {
+        tmpSeriesColumns.push(element.dataKey)
+      })
+    } else if (runtimeData && runtimeData.length > 0) {
+      tmpSeriesColumns = Object.keys(runtimeData[0])
+    }
+  } else {
+    tmpSeriesColumns = [config.xAxis?.dataKey, config.yAxis?.dataKey] //Object.keys(runtimeData[0])
+  }
+
+  // then add the additional Columns
+  if (config.columns && Object.keys(config.columns).length > 0) {
+    Object.keys(config.columns).forEach(function (key) {
+      var value = config.columns[key]
+      // add if not the index AND it is enabled to be added to data table
+      if (value.name !== config.xAxis?.dataKey && value.dataTable === true) {
+        tmpSeriesColumns.push(value.name)
+      }
+    })
+  }
+
+  return tmpSeriesColumns
+}

package/components/DataTable/helpers/getSeriesName.ts

@@ -0,0 +1,26 @@
+const getLabel = (name, config) => {
+  let custLabel = ''
+  if (config.columns && Object.keys(config.columns).length > 0) {
+    Object.keys(config.columns).forEach(function (key) {
+      var tmpColumn = config.columns[key]
+      // add if not the index AND it is enabled to be added to data table
+      if (tmpColumn.name === name) {
+        custLabel = tmpColumn.label
+      }
+    })
+    return custLabel
+  }
+}
+
+export const getSeriesName = (column, config) => {
+  // If a user sets the name on a series use that.
+  let userUpdatedSeriesName = config.series ? config.series.filter(series => series.dataKey === column)?.[0]?.name : ''
+  if (userUpdatedSeriesName) return userUpdatedSeriesName
+
+  if (config.runtimeSeriesLabels && config.runtimeSeriesLabels[column]) return config.runtimeSeriesLabels[column]
+
+  let custLabel = getLabel(column, config) ? getLabel(column, config) : column
+  let text = column === config.xAxis?.dataKey ? config.table.indexLabel : custLabel
+
+  return text
+}

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -0,0 +1,56 @@
+import LegendCircle from '@cdc/core/components/LegendCircle'
+import CellAnchor from '../components/CellAnchor'
+import { DataTableProps } from '../DataTable'
+import { ReactNode } from 'react'
+
+type MapRowsProps = DataTableProps & {
+  rows: string[]
+}
+
+const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
+  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)
+
+          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') {
+            labelValue = displayGeoName(row)
+          } else {
+            labelValue = formatLegendLocation(row)
+          }
+          cellValue = (
+            <div className='col-12'>
+              <LegendCircle fill={legendColor[0]} />
+              <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
+            </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)
+        }
+
+        return cellValue
+      })
+  )
+}
+
+export default mapCellArray

package/components/DataTable/helpers/regionCellMatrix.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react'
+
+const regionCellMatrix = ({ config }): ReactNode[][] => {
+  return config.regions.map(region => {
+    if (config.visualizationType === 'Box Plot') return []
+    if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return []
+    // region.from and region.to had formatDate(parseDate()) on it
+    // but they returned undefined - removed both for now (TT)
+    return [region.label, region.from, region.to]
+  })
+}
+
+export default regionCellMatrix

package/components/DataTable/helpers/standardizeState.js

@@ -0,0 +1,76 @@
+const states = {
+  AL: 'Alabama',
+  AK: 'Alaska',
+  AS: 'American Samoa',
+  AZ: 'Arizona',
+  AR: 'Arkansas',
+  CA: 'California',
+  CO: 'Colorado',
+  CT: 'Connecticut',
+  DE: 'Delaware',
+  DC: 'District Of Columbia',
+  FM: 'Federated States Of Micronesia',
+  FL: 'Florida',
+  GA: 'Georgia',
+  GU: 'Guam',
+  HI: 'Hawaii',
+  ID: 'Idaho',
+  IL: 'Illinois',
+  IN: 'Indiana',
+  IA: 'Iowa',
+  KS: 'Kansas',
+  KY: 'Kentucky',
+  LA: 'Louisiana',
+  ME: 'Maine',
+  MH: 'Marshall Islands',
+  MD: 'Maryland',
+  MA: 'Massachusetts',
+  MI: 'Michigan',
+  MN: 'Minnesota',
+  MS: 'Mississippi',
+  MO: 'Missouri',
+  MT: 'Montana',
+  NE: 'Nebraska',
+  NV: 'Nevada',
+  NH: 'New Hampshire',
+  NJ: 'New Jersey',
+  NM: 'New Mexico',
+  NY: 'New York',
+  NC: 'North Carolina',
+  ND: 'North Dakota',
+  MP: 'Northern Mariana Islands',
+  OH: 'Ohio',
+  OK: 'Oklahoma',
+  OR: 'Oregon',
+  PW: 'Palau',
+  PA: 'Pennsylvania',
+  PR: 'Puerto Rico',
+  RI: 'Rhode Island',
+  SC: 'South Carolina',
+  SD: 'South Dakota',
+  TN: 'Tennessee',
+  TX: 'Texas',
+  UT: 'Utah',
+  VT: 'Vermont',
+  VI: 'Virgin Islands',
+  VA: 'Virginia',
+  WA: 'Washington',
+  WV: 'West Virginia',
+  WI: 'Wisconsin',
+  WY: 'Wyoming'
+}
+export const standardizeStateName = value => {
+  if (typeof value !== 'string' || !isNaN(Number(value))) {
+    return value
+  }
+
+  const upperValue = value.toUpperCase()
+
+  // Handle U.S. Virgin Islands variations
+  if (['U.S. VIRGIN ISLANDS', 'VI', 'US VIRGIN ISLANDS', 'VIRGIN ISLANDS'].includes(upperValue)) {
+    return 'U.S. VIRGIN ISLANDS'
+  }
+
+  // Return full name for state abbreviation or the original name
+  return states[upperValue] || value
+}

package/components/DataTable/index.ts

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

package/components/DataTable/types/TableConfig.ts

@@ -0,0 +1,57 @@
+import { Axis } from '@cdc/core/types/Axis'
+import { Series } from '@cdc/core/types/Series'
+import { Runtime } from '@cdc/core/types/Runtime'
+
+export type TableConfig = {
+  type?: string
+  table: {
+    showVertical?: boolean
+    indexLabel: string
+    limitHeight: boolean
+    height: string | number
+    caption: string
+    download: boolean
+  }
+  xAxis?: Axis
+  yAxis?: Axis
+  boxplot?: {
+    tableData: Object[]
+    labels: {
+      mean: string
+      maximum: string
+      minimum: string
+      iqr: string
+      median: string
+      q1: string
+      q3: string
+      outliers: string
+      values: string
+      total: string
+      lowerBounds: string
+      upperBounds: string
+    }
+    plots: []
+    categories: string[]
+  }
+  visualizationType?: string
+  general?: {
+    geoType: string
+    type: string
+    showDownloadButton: boolean
+    allowMapZoom?: boolean
+  }
+  columns?: {
+    geo: {
+      name: string
+    }
+  }
+  legend?: {
+    specialClasses: { key: string; label: string; value: string }[]
+  }
+  series?: Series
+  regions?: { label: string; from: string; to: string }[]
+  runtimeSeriesLabels?: Object
+  dataFormat?: Object
+  runtime: Runtime
+  data: Object[]
+}

package/components/DownloadButton.tsx

@@ -0,0 +1,29 @@
+import Papa from 'papaparse'
+
+type DownloadButtonProps = {
+  rawData: Object
+  fileName: string
+  headerColor: string
+  skipId: string | number
+}
+
+const DownloadButton = ({ rawData, fileName, headerColor, skipId }: DownloadButtonProps) => {
+  const csvData = Papa.unparse(rawData)
+  const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
+
+  const saveBlob = () => {
+    //@ts-ignore
+    if (typeof window.navigator.msSaveBlob === 'function') {
+      //@ts-ignore
+      navigator.msSaveBlob(blob, fileName)
+    }
+  }
+
+  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'>
+      Download Data (CSV)
+    </a>
+  )
+}
+
+export default DownloadButton

package/components/LegendCircle.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-export default function LegendCircle({ fill, borderColor }) {
+export default function LegendCircle({ fill, borderColor, display = 'inline-block' }) {
   const styles = {
     marginRight: '5px',
     borderRadius: '300px',
     verticalAlign: 'middle',
-    display: 'inline-block',
+    display: display,
     height: '1em',
     width: '1em',
     border: borderColor ? `${borderColor}  1px solid` : 'rgba(0,0,0,.3) 1px solid',

package/components/Table/Table.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react'
+import Row from './components/Row'
+import GroupRow from './components/GroupRow'
+import { CellMatrix, GroupCellMatrix } from './types/CellMatrix'
+
+type TableProps = {
+  childrenMatrix: CellMatrix | GroupCellMatrix
+  tableName: string
+  caption: string
+  stickyHeader?: boolean
+  headContent: ReactNode
+  tableOptions: {
+    className: string
+    'aria-live'?: 'off' | 'assertive' | 'polite'
+    hidden?: boolean
+    'aria-rowcount'?: number
+  }
+}
+
+type Position = 'sticky'
+
+const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions }: TableProps) => {
+  const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 999 } : {}
+  const isGroupedMatrix = !Array.isArray(childrenMatrix)
+  return (
+    <table {...tableOptions}>
+      <caption className='visually-hidden'>{caption}</caption>
+      <thead style={headStyle}>{headContent}</thead>
+      <tbody>
+        {isGroupedMatrix
+          ? Object.keys(childrenMatrix).flatMap(groupName => {
+              let colSpan = 0
+              const rows = childrenMatrix[groupName].map((row, i) => {
+                colSpan = row.length
+                const key = `${tableName}-${groupName}-row-${i}`
+                return <Row key={key} rowKey={key} childRow={row} />
+              })
+              return [<GroupRow label={groupName} colSpan={colSpan} key={`${tableName}-${groupName}`} />, ...rows]
+            })
+          : childrenMatrix.map((childRow, i) => {
+              const key = `${tableName}-row-${i}`
+              return <Row key={key} rowKey={key} childRow={childRow} />
+            })}
+      </tbody>
+    </table>
+  )
+}
+
+export default Table

package/components/Table/components/Cell.tsx

@@ -0,0 +1,9 @@
+const Cell = ({ children }) => {
+  return (
+    <td tabIndex={0} role='gridcell'>
+      {children}
+    </td>
+  )
+}
+
+export default Cell

package/components/Table/components/GroupRow.tsx

@@ -0,0 +1,16 @@
+type GroupRowProps = {
+  label: string
+  colSpan: number
+}
+
+const GroupRow = ({ label, colSpan }: GroupRowProps) => {
+  return (
+    <tr>
+      <th scope='colgroup' colSpan={colSpan}>
+        {label}
+      </th>
+    </tr>
+  )
+}
+
+export default GroupRow

package/components/Table/components/Row.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+import Cell from './Cell'
+
+type RowProps = {
+  childRow: ReactNode[]
+  rowKey: string
+}
+
+const Row = ({ childRow, rowKey }: RowProps) => {
+  return (
+    <tr>
+      {childRow.map((child, i) => (
+        <Cell key={rowKey + '__' + i}>{child}</Cell>
+      ))}
+    </tr>
+  )
+}
+
+export default Row

package/components/Table/index.ts

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

package/components/Table/types/CellMatrix.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react'
+
+export type CellMatrix = ReactNode[][]
+export type GroupCellMatrix = Record<string, CellMatrix>