@cdc/core 4.23.10-alpha → 4.23.11

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>

package/components/_stories/DataTable.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import DataTable from '../DataTable'
+import './styles.scss'
+import Example_1 from './_mocks/dashboard_no_filter.json'
+import CityStateExample from './_mocks/example-city-state.json'
+import { displayGeoName } from '@cdc/map/src/helpers/displayGeoName'
+
+const meta: Meta<typeof DataTable> = {
+  title: 'Components/Organisms/DataTable',
+  component: DataTable
+}
+
+export default meta
+
+type Story = StoryObj<typeof DataTable>
+
+const datasetKey = 'dashboard_example_map.csv'
+
+export const Primary: Story = {
+  args: {
+    config: Example_1,
+    dataConfig: Example_1.datasets[datasetKey],
+    rawData: Example_1.datasets[datasetKey].data,
+    runtimeData: Example_1.datasets[datasetKey].data,
+    expandDataTable: true,
+    tableTitle: 'COVE DataTable',
+    viewport: 'lg',
+    tabbingId: datasetKey
+  }
+}
+
+export const CityState: Story = {
+  args: {
+    config: CityStateExample,
+    dataConfig: CityStateExample,
+    rawData: CityStateExample.data,
+    runtimeData: CityStateExample.data,
+    expandDataTable: true,
+    tableTitle: 'CityStateExample DataTable',
+    viewport: 'lg',
+    tabbingId: '#asdf',
+    columns: CityStateExample.columns,
+    applyLegendToRow: () => ['#000'],
+    displayGeoName,
+    displayDataAsText: d => d
+  }
+}
+
+export const Grouped: Story = {
+  args: {
+    config: Example_1,
+    dataConfig: Example_1.datasets[datasetKey],
+    rawData: Example_1.datasets[datasetKey].data,
+    runtimeData: Example_1.datasets[datasetKey].data,
+    expandDataTable: true,
+    tableTitle: 'COVE DataTable',
+    groupBy: 'TimeZone',
+    viewport: 'lg',
+    tabbingId: datasetKey
+  }
+}

package/components/_stories/Table.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import Table from '../Table'
+import { ReactNode } from 'react'
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Molecules/Table',
+  component: Table
+}
+
+export default meta
+
+type Story = StoryObj<typeof Table>
+
+function createMatrix(): ReactNode[][] {
+  const base = ['a', 'b', 'c'].map(el => <>{el}</>)
+  return [base, base]
+}
+
+export const Ungrouped: Story = {
+  args: {
+    childrenMatrix: createMatrix(),
+    tableName: 'COVE Table',
+    headContent: (
+      <tr>
+        <th>first</th>
+        <th>second</th>
+        <th>third</th>
+      </tr>
+    ),
+    tableOptions: { className: 'table table-bordered' }
+  }
+}
+
+function createGroupMatrix(): Record<string, ReactNode[][]> {
+  const base = ['a', 'b', 'c'].map(el => <>{el}</>)
+  return { group_1: [base, base], group_2: [base, base] }
+}
+
+export const Grouped: Story = {
+  args: {
+    childrenMatrix: createGroupMatrix(),
+    tableName: 'COVE Table',
+    headContent: (
+      <tr>
+        <th>first</th>
+        <th>second</th>
+        <th>third</th>
+      </tr>
+    ),
+    tableOptions: { className: 'table table-bordered' }
+  }
+}