@cdc/core 4.24.2 → 4.24.3

package/assets/icon-sankey.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.31 82.55"><defs><style>.c{stroke-linecap:round;stroke-width:3px;}.c,.d,.e{stroke:#000;}.e{fill:none;}</style></defs><g id="a"/><g id="b"><path class="c" d="M6.88,39.98V5.57"/><path class="c" d="M89.42,22.98V5.57"/><path class="c" d="M89.42,52.79V27.38"/><path class="c" d="M89.42,76v-18.41"/><path class="c" d="M6.88,76v-28.43"/><rect class="e" x="12.3" y="5.98" width="71.62" height="9.69"/><path class="d" d="M83.92,16.67s-11.46,1.07-27.63,11.61-27.1,16.32-35.66,17.97c-4.59,.88-8.34,.72-8.34,.72v5.31s3.75,.17,8.34-.72c8.56-1.65,19.49-7.42,35.66-17.97s27.63-11.61,27.63-11.61v-5.31Z"/><path class="e" d="M12.3,16.67s41.36,10.71,71.62,10.71v8.71s-31.58,1.88-71.62-10.71v-8.71Z"/><path class="d" d="M83.92,53.29s-13.18,1.49-35.77,9.06c0,0-18.05,7.37-35.85,7.37v-15.89c17.8,0,35.85-7.37,35.85-7.37,22.59-7.57,35.77-9.06,35.77-9.06v15.89Z"/><rect class="d" x="12.3" y="71" width="71.62" height="5.44"/><path class="e" d="M83.92,57.58l-8.82-2.38c-6.78-1.93-13.27-4.73-19.33-8.34l-14.69-8.76c-5.94-3.54-12.3-6.31-18.93-8.25l-9.85-2.88v12.14l9.85,2.88c6.64,1.94,13,4.71,18.93,8.25l14.69,8.76c6.05,3.61,12.55,6.41,19.33,8.34l8.82,2.38v-12.14Z"/></g></svg>

package/assets/icon-table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>

package/components/DataTable/DataTable.tsx

@@ -9,7 +9,7 @@ import { customSort } from './helpers/customSort'
 import ChartHeader from './components/ChartHeader'
 import BoxplotHeader from './components/BoxplotHeader'
 import MapHeader from './components/MapHeader'
-import SkipNav from './components/SkipNav'
+import SkipTo from '../elements/SkipTo'
 import ExpandCollapse from './components/ExpandCollapse'
 import mapCellMatrix from './helpers/mapCellMatrix'
 import Table from '../Table'
@@ -39,7 +39,7 @@ export type DataTableProps = {
   navigationHandler?: Function
   outerContainerRef?: Function
   rawData: Object[]
-  runtimeData: Object[] | Record<string, Object> // UNSAFE
+  runtimeData: Object[] & Record<string, Object>
   setFilteredCountryCode?: Function // used for Maps only
   showDownloadButton?: boolean
   tabbingId: string
@@ -53,7 +53,6 @@ export type DataTableProps = {
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
   const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
-
   const [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
@@ -91,7 +90,7 @@ const DataTable = (props: DataTableProps) => {
     case 'Box Plot':
       if (!config.boxplot) return <Loading />
       break
-    case 'Line' || 'Bar' || 'Combo' || 'Pie' || 'Deviation Bar' || 'Paired Bar':
+    case 'Line' || 'Bar' || 'Combo' || 'Pie' || 'Deviation Bar' || 'Paired Bar' || 'Sankey' || 'Table':
       if (!runtimeData) return <Loading />
       break
     default:
@@ -115,7 +114,7 @@ const DataTable = (props: DataTableProps) => {
           dataA = _runtimeData[a][sortBy.column]
           dataB = _runtimeData[b][sortBy.column]
         }
-        if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date' && config.xAxis.sortDates) {
+        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])
         }
@@ -142,12 +141,25 @@ const DataTable = (props: DataTableProps) => {
   // If a relative region is found we don't want to display the data table.
   // Takes backwards compatibility into consideration, ie !region.toType || !region.fromType
   const noRelativeRegions = config?.regions?.every(region => {
-    return (region.toType === 'Fixed' && region.fromType === 'Fixed') || (!region.toType && !region.fromType) || (!region.toType && region.fromType === 'Fixed') || (!region.fromType && region.toType === 'Fixed')
+    const toTypeFixed = region.toType === 'Fixed'
+    const fromTypeFixed = region.fromType === 'Fixed'
+    const toIsNotSet = !region.toType
+    const fromIsNotSet = !region.fromType
+    const BothFixed = toTypeFixed && fromTypeFixed
+    const NeitherFixed = toIsNotSet && fromIsNotSet
+    const ToFixedFromNotSet = toTypeFixed && fromIsNotSet
+    const FromFixedToNotSet = fromTypeFixed && toIsNotSet
+
+    return BothFixed || NeitherFixed || ToFixedFromNotSet || FromFixedToNotSet
   })
 
   // prettier-ignore
   const tableData = useMemo(() => (
-    config.visualizationType === 'Pie'
+   config.data?.[0]?.tableData
+    ? config.data?.[0]?.tableData
+    : config.visualizationType === 'Sankey'
+      ? config.data?.[0]?.tableData
+      : config.visualizationType === 'Pie'
       ? [config.yAxis.dataKey]
       : config.visualizationType === 'Box Plot'
         ? Object.entries(config.boxplot.tableData[0])
@@ -169,10 +181,10 @@ const DataTable = (props: DataTableProps) => {
       <ErrorBoundary component='DataTable'>
         <MediaControls.Section classes={['download-links']}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
-          {(config.table.download || config.general?.showDownloadButton) && <DownloadButton rawData={getDownloadData()} fileName={`${vizTitle || 'data-table'}.csv`} headerColor={headerColor} skipId={skipId} />}
+          {(config.table.download || config.general?.showDownloadButton) && <DownloadButton rawData={getDownloadData()} fileName={`${vizTitle || 'data-table'}.csv`} headerColor={headerColor} />}
         </MediaControls.Section>
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
-          <SkipNav skipId={skipId} />
+          <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
@@ -205,6 +217,9 @@ const DataTable = (props: DataTableProps) => {
             )}
           </div>
         </section>
+        <div id={skipId} className='cdcdataviz-sr-only'>
+          Skipped data table.
+        </div>
       </ErrorBoundary>
     )
   } else {
@@ -212,7 +227,7 @@ const DataTable = (props: DataTableProps) => {
     return (
       <ErrorBoundary component='DataTable'>
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
-          <SkipNav skipId={skipId} />
+          <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
@@ -226,6 +241,9 @@ const DataTable = (props: DataTableProps) => {
             />
           </div>
         </section>
+        <div id={skipId} className='cdcdataviz-sr-only'>
+          Skipped data table.
+        </div>
       </ErrorBoundary>
     )
   }

package/components/DataTable/DataTableStandAlone.tsx

@@ -0,0 +1,15 @@
+import { ViewPort } from '../../types/ViewPort'
+import { Visualization } from '../../types/Visualization'
+import DataTable from './DataTable'
+
+type StandAloneProps = {
+  visualizationKey: string
+  config: Visualization
+  viewport?: ViewPort
+}
+
+const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, viewport }) => {
+  return <DataTable expandDataTable={true} config={config} rawData={config.data} runtimeData={config.formattedData} tabbingId={visualizationKey} tableTitle={config.table.label} viewport={viewport || 'lg'} />
+}
+
+export default DataTableStandAlone

package/components/DataTable/components/CellAnchor.tsx

@@ -1,4 +1,6 @@
 import ExternalIcon from '@cdc/core/assets/external-link.svg'
+import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
+
 // Optionally wrap cell with anchor if config defines a navigation url
 const CellAnchor = ({ markup, row, columns, navigationHandler, mapZoomHandler }) => {
   if (columns.navigate && row[columns.navigate.name]) {
@@ -16,7 +18,7 @@ const CellAnchor = ({ markup, row, columns, navigationHandler, mapZoomHandler })
         }}
       >
         {markup}
-        <ExternalIcon className='inline-icon' />
+        {isDomainExternal(row[columns.navigate.name]) && <ExternalIcon className='inline-icon' />}
       </span>
     )
   } else if (mapZoomHandler) {

package/components/DataTable/components/ChartHeader.tsx

@@ -2,6 +2,7 @@ import { getChartCellValue } from '../helpers/getChartCellValue'
 import { getSeriesName } from '../helpers/getSeriesName'
 import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
 import { DownIcon, UpIcon } from './Icons'
+import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 
 type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; groupBy?; hasRowType? }
 
@@ -16,6 +17,45 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
       dataSeriesColumns = groupHeaderRemoved
     }
   }
+
+  const handleHeaderClasses = (sortBy, text) => {
+    let classes = ['sort']
+    if (sortBy.column === text && sortBy.asc) {
+      classes.push('sort-asc')
+    }
+    if (sortBy.column === text && sortBy.desc) {
+      classes.push('sort-desc')
+    }
+    return classes.join(' ')
+  }
+
+  const ScreenReaderSortByText = ({ text, config, sortBy }) => {
+    const notApplicableText = 'Not Applicable'
+    let columnHeaderText = `${text} `
+    if (text !== '__series__' || text !== '') {
+      columnHeaderText = `${text} `
+    }
+
+    if ((text === '__series__' || text === '') && !config.table.indexLabel) {
+      columnHeaderText = notApplicableText
+    }
+
+    if ((text === '__series__' || text === '') && config.table.indexLabel) {
+      columnHeaderText = config.table.indexLabel
+    }
+
+    if (columnHeaderText === notApplicableText) return
+
+    return <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'}  order`}</span>
+  }
+
+  const ColumnHeadingText = ({ column, text, config }) => {
+    let notApplicableText = 'Not Applicable'
+    if (text === '__series__' && config.table.indexLabel) return `${config.table.indexLabel} `
+    if (text === '__series__' && !config.table.indexLabel) return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
+    return text
+  }
+
   if (isVertical) {
     if (hasRowType) {
       // find the row type column and place it at the beginning of the array
@@ -25,6 +65,7 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
         dataSeriesColumns.splice(rowTypeIndex, 1)
       }
     }
+
     return (
       <tr>
         {dataSeriesColumns.map((column, index) => {
@@ -35,7 +76,6 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
               style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
               key={`col-header-${column}__${index}`}
               tabIndex={0}
-              title={text}
               role='columnheader'
               scope='col'
               onClick={() => {
@@ -48,14 +88,12 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
                   setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
                 }
               }}
-              className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
+              className={handleHeaderClasses(sortBy, text)}
               {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
             >
-              {text}
+              <ColumnHeadingText text={text} column={column} config={config} />
               {column === sortBy.column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
-              <button>
-                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
-              </button>
+              <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
           )
         })}
@@ -68,12 +106,12 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
         {['__series__', ...Object.keys(data)].slice(sliceVal).map((row, index) => {
           let column = config.xAxis?.dataKey
           let text = row !== '__series__' ? getChartCellValue(row, column, config, data) : '__series__'
+
           return (
             <th
               style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
               key={`col-header-${text}__${index}`}
               tabIndex={0}
-              title={text}
               role='columnheader'
               scope='col'
               onClick={() => {
@@ -84,14 +122,12 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, has
                   setSortBy({ column: text, asc: sortBy.column === text ? !sortBy.asc : false, colIndex: index })
                 }
               }}
-              className={sortBy.column === text ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
+              className={handleHeaderClasses(sortBy, text)}
               {...(sortBy.column === text ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
             >
-              {text === '__series__' ? '' : text}
+              <ColumnHeadingText text={text} column={column} config={config} />
               {index === sortBy.colIndex && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
-              <button>
-                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === text ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
-              </button>
+              <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />
             </th>
           )
         })}

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -0,0 +1,42 @@
+import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import DataTableEditor from '../../EditorPanel/DataTableEditor'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
+import { useMemo } from 'react'
+import ColumnsEditor from '../../EditorPanel/ColumnsEditor'
+
+type DataTableEditorProps = {
+  config: Visualization
+  updateConfig: Function
+}
+
+const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateConfig }) => {
+  const updateField = useMemo(() => updateFieldFactory(config, updateConfig), [JSON.stringify(config)])
+  const deleteColumn = columnName => {
+    const newColumns = config.columns
+
+    delete newColumns[columnName]
+
+    updateConfig({
+      ...config,
+      columns: newColumns
+    })
+  }
+
+  const columns = Object.keys(config.columns || {})
+  return (
+    <>
+      <ColumnsEditor config={config} updateField={updateField} deleteColumn={deleteColumn} />
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Data Table</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <DataTableEditor config={config} columns={columns} updateField={updateField} isDashboard={true} />
+        </AccordionItemPanel>
+      </AccordionItem>
+    </>
+  )
+}
+
+export default DataTableEditorPanel

package/components/DataTable/components/MapHeader.tsx

@@ -1,11 +1,19 @@
 import { DataTableProps } from '../DataTable'
 import { DownIcon, UpIcon } from './Icons'
+import ScreenReaderText from '../../elements/ScreenReaderText'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
   setSortBy: Function
 }
 
+const ColumnHeadingText = ({ column, text, config }) => {
+  let notApplicableText = 'Not Applicable'
+  if (text === '__series__' && config.table.indexLabel) return `${config.table.indexLabel} `
+  if (text === '__series__' && !config.table.indexLabel) return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
+  return text
+}
+
 const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeaderProps) => {
   return (
     <tr>
@@ -27,7 +35,6 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
               key={`col-header-${column}__${index}`}
               id={column}
               tabIndex={0}
-              title={text}
               role='columnheader'
               scope='col'
               onClick={() => {
@@ -41,11 +48,9 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
               className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
               {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
             >
-              {text}
+              <ColumnHeadingText text={text} config={config} column={column} />
               {sortBy.column === column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
-              <button>
-                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
-              </button>
+              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} order`}</span>
             </th>
           )
         })}

package/components/DataTable/helpers/customColumns.ts

@@ -1,5 +1,7 @@
+type RuntimeData = Object[] & Record<string, Object>
+
 // removes null and excluded columns
-const customColumns = (runtimeData: Object[] | Record<string, Object>, excludeColumns: string[] = []): Object[] | Record<string, Object> => {
+const customColumns = (runtimeData: Object[] | RuntimeData, excludeColumns: string[] = []): RuntimeData => {
   if (!Array.isArray(runtimeData)) {
     // currently we don't support Record types
     return runtimeData
@@ -18,7 +20,7 @@ const customColumns = (runtimeData: Object[] | Record<string, Object>, excludeCo
         if (runtimeDataMemo[key] === true) row[key] = d[key]
       })
       return row
-    })
+    }) as RuntimeData
   }
 }
 

package/components/DataTable/helpers/getChartCellValue.ts

@@ -1,5 +1,6 @@
 import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
 import { formatNumber } from '@cdc/core/helpers/cove/number'
+import { TableConfig } from '../types/TableConfig'
 
 // if its additional column, return formatting params
 const isAdditionalColumn = (column, config) => {
@@ -23,8 +24,9 @@ const isAdditionalColumn = (column, config) => {
   return formattingParams
 }
 
-export const getChartCellValue = (row, column, config, runtimeData) => {
-  if (config.table.customTableConfig) return runtimeData[row][column]
+export const getChartCellValue = (row: string, column: string, config: TableConfig, runtimeData: Object[]) => {
+  if (config.table.customTableConfig || config.visualizationType === 'Sankey' || runtimeData?.[0]?.tableData) return runtimeData[row][column]
+
   const rowObj = runtimeData[row]
   let cellValue // placeholder for formatting below
   let labelValue = rowObj[column] // just raw X axis string

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -1,5 +1,13 @@
-export const getDataSeriesColumns = (config, isVertical, runtimeData): string[] => {
+import { TableConfig } from '../types/TableConfig'
+
+export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, runtimeData: Object[]): string[] => {
   if (config.table.customTableConfig) return runtimeData[0] ? Object.keys(runtimeData[0]) : []
+  if (config.type === 'table') {
+    const excludeColumns = Object.values(config.columns)
+      .filter(column => column.dataTable === false)
+      .map(column => column.name)
+    return Object.keys(runtimeData[0]).filter(columnName => !excludeColumns.includes(columnName))
+  }
   let tmpSeriesColumns
   if (config.visualizationType !== 'Pie') {
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll

package/components/DataTable/types/TableConfig.ts

@@ -2,9 +2,11 @@ import { Axis } from '@cdc/core/types/Axis'
 import { Series } from '@cdc/core/types/Series'
 import { Runtime } from '@cdc/core/types/Runtime'
 import { Table } from '@cdc/core/types/Table'
+import { Region } from '@cdc/core/types/Region'
 import { BoxPlot } from '../../../types/BoxPlot'
 import { General } from '../../../types/General'
 import { Column } from '../../../types/Column'
+import { Legend } from '@cdc/core/types/Legend'
 
 export type TableConfig = {
   type?: string
@@ -12,17 +14,14 @@ export type TableConfig = {
   xAxis?: Axis
   yAxis?: Axis
   boxplot?: BoxPlot
-  visualizationType?: string
+  visualizationType: string
   general?: General
   columns?: Record<string, Column>
-  legend?: {
-    specialClasses?: { key: string; label: string; value: string }[]
-    hide?: boolean
-  }
+  legend?: Legend
   series?: Series
-  regions?: { label: string; from: string; to: string; fromType: 'Fixed' | 'Previous Days'; toType: 'Fixed' | 'Last Date' }[]
+  regions?: Region[]
   runtimeSeriesLabels?: Object
   dataFormat?: Object
-  runtime: Runtime
+  runtime?: Runtime
   data: Object[]
 }