@cdc/chart 4.26.7 → 4.26.10

package/src/components/Sankey/helpers/getSankeyTooltip.ts

@@ -0,0 +1,12 @@
+const escapeHtml = (value: unknown) =>
+  String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+
+export const getSankeyTooltip = (label: string, value?: string) => `<div class="sankey-chart__tooltip">
+  <span class="sankey-chart__tooltip--tooltip-header">${escapeHtml(label)}</span>
+  ${value ? `<span>${escapeHtml(value)}</span>` : ''}
+</div>`

package/src/components/Sankey/helpers/prepareSankeyData.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { prepareSankeyData } from './prepareSankeyData'
+
+describe('prepareSankeyData', () => {
+  it('accepts tabular source target value rows', () => {
+    const result = prepareSankeyData([
+      { source: 'Screened', target: 'Eligible', value: '850' },
+      { source: 'Eligible', target: 'Enrolled', value: 700 }
+    ])
+
+    expect(result.nodes.map(node => node.id)).toEqual(['Screened', 'Eligible', 'Enrolled'])
+    expect(result.links).toMatchObject([
+      { source: 'Screened', target: 'Eligible', value: 850 },
+      { source: 'Eligible', target: 'Enrolled', value: 700 }
+    ])
+    expect(result.rejectedRowCount).toBe(0)
+  })
+
+  it('handles common case-insensitive field names and comma-formatted values', () => {
+    const result = prepareSankeyData([{ Source: 'A', Target: 'B', Value: '1,250' }])
+
+    expect(result.links[0]).toMatchObject({ source: 'A', target: 'B', value: 1250 })
+  })
+
+  it('uses configured columns for arbitrary imported headers', () => {
+    const result = prepareSankeyData(
+      [
+        { Step: 'Screened', Next: 'Eligible', Patients: '850' },
+        { Step: 'Eligible', Next: 'Enrolled', Patients: 700 }
+      ],
+      { source: 'Step', target: 'Next', value: 'Patients' }
+    )
+
+    expect(result.links).toMatchObject([
+      { source: 'Screened', target: 'Eligible', value: 850 },
+      { source: 'Eligible', target: 'Enrolled', value: 700 }
+    ])
+    expect(result.rejectedRowCount).toBe(0)
+  })
+
+  it('prefers configured columns before alias fallbacks', () => {
+    const result = prepareSankeyData(
+      [
+        {
+          source: 'Alias Source',
+          target: 'Alias Target',
+          value: 1,
+          Step: 'Mapped Source',
+          Next: 'Mapped Target',
+          Patients: 2
+        }
+      ],
+      { source: 'Step', target: 'Next', value: 'Patients' }
+    )
+
+    expect(result.links[0]).toMatchObject({ source: 'Mapped Source', target: 'Mapped Target', value: 2 })
+  })
+
+  it('combines duplicate links and rejects missing, zero, and invalid values', () => {
+    const result = prepareSankeyData([
+      { source: 'A', target: 'B', value: 10 },
+      { source: 'A', target: 'B', value: 15 },
+      { source: 'A', target: 'C', value: 0 },
+      { source: 'A', target: 'D', value: 'not a number' },
+      { source: '', target: 'E', value: 4 }
+    ])
+
+    expect(result.links).toMatchObject([{ source: 'A', target: 'B', value: 25 }])
+    expect(result.rejectedRowCount).toBe(3)
+  })
+})

package/src/components/Sankey/helpers/prepareSankeyData.ts

@@ -0,0 +1,90 @@
+import type { SankeyColumns, SankeyPreparedData, SankeyPreparedLink, SankeyRawRow } from '../types'
+
+const SOURCE_FIELDS = ['source', 'from']
+const TARGET_FIELDS = ['target', 'to']
+const VALUE_FIELDS = ['value', 'weight', 'count']
+
+const getFieldValue = (row: SankeyRawRow, fieldNames: string[], selectedFieldName?: string) => {
+  const keys = Object.keys(row)
+  const selectedField = selectedFieldName?.trim()
+
+  if (selectedField) {
+    if (Object.prototype.hasOwnProperty.call(row, selectedField)) return row[selectedField]
+
+    const matchingSelectedKey = keys.find(key => key.toLowerCase() === selectedField.toLowerCase())
+    if (matchingSelectedKey) return row[matchingSelectedKey]
+  }
+
+  for (const fieldName of fieldNames) {
+    if (Object.prototype.hasOwnProperty.call(row, fieldName)) return row[fieldName]
+
+    const matchingKey = keys.find(key => key.toLowerCase() === fieldName)
+    if (matchingKey) return row[matchingKey]
+  }
+}
+
+const toLabel = (value: unknown) => {
+  if (value === undefined || value === null) return ''
+  return String(value).trim()
+}
+
+const toPositiveNumber = (value: unknown) => {
+  if (typeof value === 'number') return Number.isFinite(value) && value > 0 ? value : null
+  if (typeof value !== 'string') return null
+
+  const normalizedValue = Number(value.replace(/,/g, '').trim())
+  return Number.isFinite(normalizedValue) && normalizedValue > 0 ? normalizedValue : null
+}
+
+export const getSankeyInputRows = (data: unknown): SankeyRawRow[] => {
+  if (!Array.isArray(data)) return []
+  return data.filter(row => row && typeof row === 'object') as SankeyRawRow[]
+}
+
+export const prepareSankeyData = (data: unknown, columns: SankeyColumns = {}): SankeyPreparedData => {
+  const rows = getSankeyInputRows(data)
+  const linksByPair = new Map<string, SankeyPreparedLink>()
+  let rejectedRowCount = 0
+
+  rows.forEach(row => {
+    const source = toLabel(getFieldValue(row, SOURCE_FIELDS, columns.source))
+    const target = toLabel(getFieldValue(row, TARGET_FIELDS, columns.target))
+    const value = toPositiveNumber(getFieldValue(row, VALUE_FIELDS, columns.value))
+
+    if (!source || !target || value === null) {
+      rejectedRowCount += 1
+      return
+    }
+
+    const key = JSON.stringify([source, target])
+    const existingLink = linksByPair.get(key)
+
+    if (existingLink) {
+      existingLink.value += value
+      existingLink.rows.push(row)
+      return
+    }
+
+    linksByPair.set(key, {
+      id: `${source}--${target}`,
+      source,
+      target,
+      value,
+      rows: [row]
+    })
+  })
+
+  const nodeIds = new Set<string>()
+  const links = Array.from(linksByPair.values())
+
+  links.forEach(link => {
+    nodeIds.add(link.source)
+    nodeIds.add(link.target)
+  })
+
+  return {
+    links,
+    nodes: Array.from(nodeIds).map(id => ({ id })),
+    rejectedRowCount
+  }
+}

package/src/components/Sankey/sankey.scss

@@ -1,66 +1,85 @@
-/* KPI */
-.kpis-container {
-  display: flex;
-  flex-direction: row;
-  column-gap: 30px;
-}
-
 .cove-visualization .sankey-chart {
-  --font-size-small: 12px;
-  --font-size-medium: 16px;
-  --font-size-large: 18px;
-  --font-size-xl: 24px;
+  --sankey-label-size: 0.875rem;
 
-  --storynode-font-size--small: 24px;
-  --storynode-font-size--medium: 28px;
-  --storynode-font-size--large: 32px;
+  min-height: 16rem;
+  width: 100%;
 
-  --font-weight-normal: 400;
-  --font-weight-bold: 700;
+  &--compact {
+    --sankey-label-size: 0.6875rem;
+    --sankey-story-label-size: 0.75rem;
+  }
 
-  overflow: visible;
+  &--empty {
+    align-items: center;
+    border: 1px dashed #b7b7b7;
+    color: #555;
+    display: flex;
+    justify-content: center;
+    min-height: 12rem;
+    padding: 1rem;
+    text-align: center;
+  }
 
-  .divider {
-    border-top: 1px solid #000;
-    margin: 10px 0;
+  .sankey-chart__diagram {
+    display: block;
+    font-family: 'Roboto', sans-serif;
+    max-width: 100%;
+    overflow: visible;
   }
 
-  .alert-dismissible {
-    padding-right: 4rem !important;
+  .sankey-chart__scroll-area {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
   }
 
-  svg.sankey-chart__diagram {
-    position: relative;
-    font-family: 'Roboto', sans-serif;
-    height: auto;
-    width: 100%;
+  &--compact,
+  &--scrollable {
+    .sankey-chart__scroll-area {
+      padding-bottom: 0.5rem;
+    }
+
+    .sankey-chart__diagram {
+      max-width: none;
+    }
   }
 
-  .node-id {
-    font-weight: var(--font-weight-bold);
+  .sankey-chart__link,
+  .sankey-chart__node {
+    cursor: pointer;
+    transition: opacity 150ms ease, stroke-opacity 150ms ease, fill-opacity 150ms ease;
   }
 
-  .node-value {
-    font-weight: var(--font-weight-normal);
+  .sankey-chart__link {
+    pointer-events: stroke;
   }
 
-  .node-text {
-    font-weight: var(--font-weight-normal);
+  .sankey-chart__node:focus {
+    outline: none;
+    stroke: #1c1d1f;
+    stroke-width: 2px;
   }
 
-  .node-value--storynode {
-    font-weight: var(--font-weight-bold);
+  .sankey-chart__label {
+    font-size: var(--sankey-label-size);
+    letter-spacing: 0;
+  }
+
+  .divider {
+    border-top: 1px solid #000;
+    margin: 10px 0;
   }
 
-  /* Hover card */
   .sankey-chart__tooltip {
     color: black;
     display: flex;
     flex-direction: column;
     margin: 10px;
+
     &--tooltip-header {
-      font-weight: var(--font-weight-bold);
+      font-weight: 700;
     }
+
     &--info-section {
       column-gap: 10px;
       display: flex;
@@ -71,84 +90,6 @@
 
   span {
     max-width: 500px;
-    word-wrap: break-word;
-  }
-
-  /* Autoscaling */
-  //large - default
-  @media only screen and (min-width: 1200px) {
-    min-width: none;
-    .node-text {
-      font-size: var(--font-size-xl);
-    }
-    .node-value--storynode {
-      font-size: var(--storynode-font-size--large);
-    }
-    .node-id {
-      font-size: var(--font-size-large);
-    }
-    .node-value {
-      font-size: var(--font-size-large);
-    }
+    overflow-wrap: break-word;
   }
-  //medium
-  @media only screen and (max-width: 1199px) {
-    .node-text {
-      font-size: var(--font-size-medium);
-    }
-    .node-value--storynode {
-      font-size: var(--storynode-font-size--medium);
-    }
-    .node-id {
-      font-size: var(--font-size-medium);
-    }
-    .node-value {
-      font-size: var(--font-size-medium);
-    }
-  }
-
-  // //small
-  // @media only screen and (max-width: 799px) {
-  //   .node-text {
-  //     font-size: var(--font-size-small);
-  //   }
-  //   .node-value--storynode {
-  //     font-size: var(--storynode-font-size--small);
-  //   }
-  //   .node-id {
-  //     font-size: var(--font-size-small);
-  //   }
-  //   .node-value {
-  //     font-size: var(--font-size-small);
-  //   }
-  // }
-
-  //x-small
-  @media only screen and (max-width: 600px) {
-    .popup {
-      display: block; /* Show the popup on smaller screens */
-    }
-  }
-}
-
-/* Pop up */
-
-.popup {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: beige;
-  border: 2px solid gray !important;
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  width: 80%;
-  z-index: 999;
-  display: none;
-}
-
-.popup-content {
-  font-size: 30px;
-  padding: 10px;
-  text-align: center;
 }

package/src/components/Sankey/types/index.ts

@@ -1,16 +1,53 @@
-export type Link = { source: string; target: string; value: number; id: string }
+export type SankeyRawRow = Record<string, unknown>
 
-type Data = {
-  links: Link[]
+export type SankeyColumns = {
+  source?: string
+  target?: string
+  value?: string
+}
+
+export type SankeyPreparedLink = {
+  id: string
+  source: string
+  target: string
+  value: number
+  rows: SankeyRawRow[]
 }
 
 export type SankeyNode = {
   id: string
 }
 
+export type SankeyLayoutNode = SankeyNode & {
+  depth?: number
+  height?: number
+  index?: number
+  layer?: number
+  sourceLinks?: SankeyLayoutLink[]
+  targetLinks?: SankeyLayoutLink[]
+  value?: number
+  x0?: number
+  x1?: number
+  y0?: number
+  y1?: number
+}
+
+export type SankeyLayoutLink = Omit<SankeyPreparedLink, 'source' | 'target'> & {
+  source: SankeyLayoutNode
+  target: SankeyLayoutNode
+  width?: number
+  y0?: number
+  y1?: number
+}
+
+export type SankeyPreparedData = {
+  links: SankeyPreparedLink[]
+  nodes: SankeyNode[]
+  rejectedRowCount: number
+}
+
 export type SankeyProps = {
   width: number
   height: number
-  data: Data
   runtime: any
 }

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -5,7 +5,13 @@ import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { buildSeriesTooltipListHtml } from '../../helpers/tooltipHelpers'
-import { getSeriesColumnFormattingParams } from '../../helpers/seriesColumnSettings'
+import { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
+import {
+  findColumnConfigByName,
+  getAdditionalColumnFormattingParams,
+  getSeriesColumnFormattingParams,
+  getSeriesOwnedColumnNames
+} from '../../helpers/seriesColumnSettings'
 
 const ScatterPlot = ({ xScale, yScale, yAxisWidth, getXAxisData }) => {
   const {
@@ -24,9 +30,21 @@ const ScatterPlot = ({ xScale, yScale, yAxisWidth, getXAxisData }) => {
   // Track current hover for analytics
   const [currentHover, setCurrentHover] = useState({ dataIndex: null, seriesKey: null })
   // tooltips for additional columns
+  const seriesOwnedColumnNames = getSeriesOwnedColumnNames([
+    ...(config.series || []),
+    ...(config.runtime?.series || [])
+  ])
   const additionalColumns = Object.entries(config.columns)
-    .filter(([_, value]) => value.tooltips)
-    .map(([_, value]) => [value.label || value.name, value.name, getSeriesColumnFormattingParams(value)])
+    .filter(([columnKey, value]) => {
+      const columnName = value.name || columnKey
+      if (!value.tooltips || !columnName) return false
+      if (columnName === config.xAxis.dataKey) return false
+      return !seriesOwnedColumnNames.includes(columnName)
+    })
+    .map(([columnKey, value]) => {
+      const columnName = value.name || columnKey
+      return [value.label || columnName, columnName, getAdditionalColumnFormattingParams(value)]
+    })
   const handleTooltip = (item, s, dataIndex) => `<div>
     ${buildSeriesTooltipListHtml({
       config,
@@ -36,7 +54,13 @@ const ScatterPlot = ({ xScale, yScale, yAxisWidth, getXAxisData }) => {
         'bottom'
       )}`,
       seriesKey: s,
-      seriesText: `${config.runtime.seriesLabels[s] || s}: ${formatNumber(item[s], 'left')}`,
+      seriesText: `${getSeriesValueLabel(s, config)}: ${formatColNumber(
+        item[s],
+        'left',
+        false,
+        config,
+        getSeriesColumnFormattingParams(findColumnConfigByName(config.columns || {}, s)?.columnConfig)
+      )}`,
       extraRows: additionalColumns
         .map(
           ([label, name, options]) =>

package/src/components/ScatterPlot/ScatterPlot.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import ScatterPlot from './ScatterPlot'
+import { createMockChartContext, createMockConfig } from '../LinearChart/tests/mockConfigContext'
+
+const renderScatterPlot = (casesLabel: string) => {
+  const baseConfig = createMockConfig()
+  const data = [{ Year: '2024', Cases: 10 }]
+  const config = createMockConfig({
+    visualizationType: 'Scatter Plot',
+    xAxis: { ...baseConfig.xAxis, dataKey: 'Year', label: 'Year', type: 'categorical' },
+    series: [{ dataKey: 'Cases', name: 'Reported Cases', type: 'Scatter Plot', axis: 'Left', tooltip: true }] as any,
+    columns: {
+      Cases: { name: 'Cases', label: casesLabel }
+    } as any,
+    general: { showMissingDataLabel: true, hideNullValue: true } as any,
+    legend: { ...baseConfig.legend, behavior: 'highlight', hide: false },
+    runtime: {
+      ...baseConfig.runtime,
+      xAxis: { ...baseConfig.runtime.xAxis, dataKey: 'Year', label: 'Year', type: 'categorical' },
+      series: [{ dataKey: 'Cases', name: 'Reported Cases', type: 'Scatter Plot', axis: 'Left', tooltip: true }],
+      seriesKeys: ['Cases'],
+      seriesLabels: { Cases: 'Reported Cases' },
+      seriesLabelsAll: ['Reported Cases']
+    } as any
+  })
+  const context = createMockChartContext(config, {
+    transformedData: data,
+    tableData: data,
+    colorScale: () => '#005ea8',
+    formatNumber: value => String(value)
+  })
+
+  return render(
+    <ConfigContext.Provider value={context}>
+      <svg>
+        <ScatterPlot xScale={() => 10} yScale={() => 10} yAxisWidth={0} getXAxisData={row => row.Year} />
+      </svg>
+    </ConfigContext.Provider>
+  )
+}
+
+describe('ScatterPlot tooltips', () => {
+  it('uses a customized Label instead of the Series Name', () => {
+    const { container } = renderScatterPlot('Case Rate')
+    const tooltip = container.querySelector('circle')?.getAttribute('data-tooltip-html') || ''
+
+    expect(tooltip).toContain('Case Rate: 10')
+    expect(tooltip).not.toContain('Reported Cases: 10')
+  })
+
+  it('falls back to the Series Name when the Label is cleared', () => {
+    const { container } = renderScatterPlot('')
+    const tooltip = container.querySelector('circle')?.getAttribute('data-tooltip-html') || ''
+
+    expect(tooltip).toContain('Reported Cases: 10')
+  })
+})

package/src/components/SmallMultiples/SmallMultiples.tsx

@@ -6,6 +6,7 @@ import useScales from '../../hooks/useScales'
 import { hasSpacedInlineLabel } from '../../helpers/hasSpacedInlineLabel'
 import { createCombinedDataForYAxis, applyTileOrder, createTileColorScale } from '../../helpers/smallMultiplesHelpers'
 import { isMobileSmallMultiplesViewport } from '@cdc/core/helpers/viewports'
+import { sortByNumericText } from '@cdc/core/helpers/sorting'
 import './SmallMultiples.css'
 import { ChartConfig } from '../../types/ChartConfig'
 
@@ -63,9 +64,9 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({
         seriesKey: series.dataKey
       }))
     } else if (mode === 'by-column') {
-      const uniqueValues = Array.from(new Set(data.map(row => row[tileColumn])))
-        .filter(val => val != null)
-        .sort()
+      const uniqueValues = sortByNumericText(
+        Array.from(new Set(data.map(row => row[tileColumn]))).filter(val => val != null)
+      )
       items = uniqueValues.map(value => ({
         key: value,
         mode: 'by-column' as const,
@@ -94,15 +95,14 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({
   const sharedYAxisTileItems = useMemo<Array<TileItem>>(
     () =>
       mode === 'by-column'
-        ? Array.from(new Set(dataForSharedYAxis.map(row => row[tileColumn])))
-            .filter(val => val != null)
-            .sort()
-            .map(value => ({
-              key: value,
-              mode: 'by-column' as const,
-              tileValue: value,
-              tileColumn: tileColumn
-            }))
+        ? sortByNumericText(
+            Array.from(new Set(dataForSharedYAxis.map(row => row[tileColumn]))).filter(val => val != null)
+          ).map(value => ({
+            key: value,
+            mode: 'by-column' as const,
+            tileValue: value,
+            tileColumn: tileColumn
+          }))
         : tileItems,
     [mode, dataForSharedYAxis, tileColumn, tileItems]
   )

package/src/components/SmallMultiples/tests/SmallMultipleTile.test.tsx

@@ -9,11 +9,13 @@ const linearChartConfigs = vi.hoisted(() => [] as any[])
 
 vi.stubGlobal(
   'ResizeObserver',
-  vi.fn(callback => ({
-    observe: vi.fn(() => callback([{ contentRect: { width: 200, height: 300 } }])),
-    unobserve: vi.fn(),
-    disconnect: vi.fn()
-  }))
+  vi.fn(function ResizeObserver(callback) {
+    return {
+      observe: vi.fn(() => callback([{ contentRect: { width: 200, height: 300 } }])),
+      unobserve: vi.fn(),
+      disconnect: vi.fn()
+    }
+  })
 )
 
 vi.mock('@visx/responsive/lib/components/ParentSize', () => ({

package/src/components/raceTiming.ts

@@ -0,0 +1,18 @@
+export type RaceTiming = {
+  elapsedSeconds: number
+  frameKey: string
+  isPlaying: boolean
+  totalSeconds: number
+}
+
+export const DEFAULT_RACE_SECONDS_PER_FRAME = 0.5
+export const RACE_SECONDS_PER_FRAME_OPTIONS = [0, DEFAULT_RACE_SECONDS_PER_FRAME, 1, 1.5] as const
+
+export const clampRaceSecondsPerFrame = (value: unknown) => {
+  if (value === null || value === '') return DEFAULT_RACE_SECONDS_PER_FRAME
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed)) return DEFAULT_RACE_SECONDS_PER_FRAME
+  return RACE_SECONDS_PER_FRAME_OPTIONS.reduce((closest, option) =>
+    Math.abs(option - parsed) <= Math.abs(closest - parsed) ? option : closest
+  )
+}