@cdc/chart 4.26.3 → 4.26.5

package/src/helpers/seriesHighlight.ts

@@ -0,0 +1,26 @@
+import type { Label } from '../types/Label'
+
+type LegendHighlightSource = Pick<Label, 'datum'> | string
+
+export const getLegendHighlightKey = (
+  seriesLabels: Record<string, string> = {},
+  legendSource: LegendHighlightSource
+): string => {
+  const labelDatum = typeof legendSource === 'string' ? legendSource : legendSource.datum
+
+  return Object.entries(seriesLabels).find(([, label]) => label === labelDatum)?.[0] || labelDatum
+}
+
+export const shouldResetSeriesHighlight = (
+  seriesHighlight: string[],
+  seriesKeys: string[] = [],
+  highlightKey: string,
+  visualizationType?: string
+): boolean => {
+  return (
+    seriesHighlight.length + 1 === seriesKeys.length &&
+    visualizationType !== 'Forecasting' &&
+    seriesKeys.includes(highlightKey) &&
+    !seriesHighlight.includes(highlightKey)
+  )
+}

package/src/helpers/tests/axisLabelFontSize.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+import { AXIS_LABEL_FONT_SIZE, AXIS_LABEL_FONT_SIZE_SMALL, getAxisLabelFontSize } from '../axisLabelFontSize'
+
+describe('axisLabelFontSize', () => {
+  it('returns the desktop axis label size for non-mobile visualization viewports', () => {
+    expect(getAxisLabelFontSize('sm')).toBe(AXIS_LABEL_FONT_SIZE)
+    expect(getAxisLabelFontSize('md')).toBe(AXIS_LABEL_FONT_SIZE)
+    expect(getAxisLabelFontSize('lg')).toBe(AXIS_LABEL_FONT_SIZE)
+  })
+
+  it('returns the compact axis label size for mobile visualization viewports', () => {
+    expect(getAxisLabelFontSize('xxs')).toBe(AXIS_LABEL_FONT_SIZE_SMALL)
+    expect(getAxisLabelFontSize('xs')).toBe(AXIS_LABEL_FONT_SIZE_SMALL)
+  })
+})

package/src/helpers/tests/bumpChartTooltip.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import { buildBumpChartTooltipHtml } from '../bumpChartTooltip'
+
+const buildConfig = overrides => ({
+  xAxis: {
+    dataKey: 'Timestamp',
+    type: 'date-time'
+  },
+  tooltips: {
+    dateDisplayFormat: '%Y'
+  },
+  columns: {
+    Timestamp: {
+      name: 'Timestamp',
+      label: 'Year',
+      tooltips: true
+    },
+    Frequency: {
+      name: 'Frequency',
+      label: 'Frequency',
+      tooltips: true
+    }
+  },
+  legend: {
+    hide: false,
+    style: 'circles',
+    groupBy: ''
+  },
+  runtime: {
+    xAxis: {
+      label: 'Year'
+    },
+    seriesLabels: {
+      Rank: 'Rank'
+    },
+    seriesLabelsAll: ['Rank', 'Other'],
+    seriesKeys: ['Rank', 'Other']
+  },
+  visualizationType: 'Bump Chart',
+  series: [{ dataKey: 'Rank' }, { dataKey: 'Other' }],
+  ...overrides
+})
+
+const helpers = {
+  parseDate: (value: string) => new Date(value),
+  formatDate: (date: Date) => String(date.getUTCFullYear()),
+  formatTooltipsDate: (date: Date) => `tooltip-${date.getUTCFullYear()}`
+}
+
+describe('buildBumpChartTooltipHtml', () => {
+  it('uses the shared x-axis formatter in the tooltip heading', () => {
+    const html = buildBumpChartTooltipHtml({
+      config: buildConfig(),
+      colorScale: undefined,
+      dataRow: { Timestamp: '2014-01-01T00:00:00.000Z', Rank: '1', Frequency: '149' },
+      series: { dataKey: 'Rank' },
+      helpers
+    })
+
+    expect(html).toContain('Year: tooltip-2014')
+  })
+
+  it('does not render the raw x-axis value as an extra tooltip row', () => {
+    const html = buildBumpChartTooltipHtml({
+      config: buildConfig(),
+      colorScale: undefined,
+      dataRow: { Timestamp: '2014-01-01T00:00:00.000Z', Rank: '1', Frequency: '149' },
+      series: { dataKey: 'Rank' },
+      helpers
+    })
+
+    expect(html).not.toContain('2014-01-01T00:00:00.000Z')
+    expect(html).toContain('Frequency: 149')
+  })
+})

package/src/helpers/tests/ensureSpecialChartAxisTypes.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { ensureSpecialChartAxisTypes } from '../ensureSpecialChartAxisTypes'
+
+describe('ensureSpecialChartAxisTypes', () => {
+  it('forces bump charts to use a date-time x-axis', () => {
+    const config = {
+      visualizationType: 'Bump Chart',
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'Timestamp',
+        dateParseFormat: '%m/%d/%Y',
+        dateDisplayFormat: '%Y'
+      }
+    }
+
+    expect(ensureSpecialChartAxisTypes(config as any).xAxis.type).toBe('date-time')
+  })
+
+  it('leaves non-bump chart axis types unchanged', () => {
+    const config = {
+      visualizationType: 'Line',
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'Category'
+      }
+    }
+
+    expect(ensureSpecialChartAxisTypes(config as any).xAxis.type).toBe('categorical')
+  })
+})

package/src/helpers/tests/getYAxisAutoPadding.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { getYAxisAutoPadding } from '../getYAxisAutoPadding'
+import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+const baseConfig = createMockConfig({
+  orientation: 'vertical'
+})
+
+describe('getYAxisAutoPadding', () => {
+  it('preserves the extra-tick escalation for inline-label mode', () => {
+    const yScale = {
+      ticks: () => [0, 1, 2]
+    }
+
+    const padding = getYAxisAutoPadding(yScale, 3, 2.95, 0, baseConfig, 'inline-label')
+
+    expect(padding).toBeCloseTo(35.69, 2)
+  })
+
+  it('returns the single-pass padding for top-title mode', () => {
+    const yScale = {
+      ticks: () => [0, 1, 2]
+    }
+
+    const padding = getYAxisAutoPadding(yScale, 3, 2.95, 0, baseConfig, 'top-title')
+
+    expect(padding).toBeCloseTo(1.79, 2)
+  })
+
+  it('returns 0 when the data is not close enough to the top tick', () => {
+    const yScale = {
+      ticks: () => [0, 50, 100]
+    }
+
+    expect(getYAxisAutoPadding(yScale, 3, 80, 0, baseConfig, 'top-title')).toBe(0)
+  })
+})

package/src/helpers/tests/getYAxisAutoPaddingMode.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { getYAxisAutoPaddingMode } from '../getYAxisAutoPaddingMode'
+import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+describe('getYAxisAutoPaddingMode', () => {
+  it('returns inline-label for multi-word inline labels', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: 'per 100k'
+          }
+        })
+      )
+    ).toBe('inline-label')
+  })
+
+  it('returns inline-label for inline labels with leading space', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: ' cases'
+          }
+        })
+      )
+    ).toBe('inline-label')
+  })
+
+  it('returns top-title for top y-axis titles with label content', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'top',
+            inlineLabel: ''
+          }
+        })
+      )
+    ).toBe('top-title')
+  })
+
+  it('returns none for hidden top y-axis titles', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          hideYAxisLabel: true,
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'top',
+            inlineLabel: ''
+          }
+        })
+      )
+    ).toBe('none')
+  })
+
+  it('returns none when neither trigger applies', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: 'Rate'
+          }
+        })
+      )
+    ).toBe('none')
+  })
+
+  it('returns inline-label when both triggers are present', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'top',
+            inlineLabel: 'per 100k'
+          }
+        })
+      )
+    ).toBe('inline-label')
+  })
+})

package/src/helpers/tests/handleChartAriaLabels.test.ts

@@ -0,0 +1,71 @@
+import { handleChartAriaLabels } from '../handleChartAriaLabels'
+
+describe('handleChartAriaLabels', () => {
+  it('returns auto-generated title from visualizationType and title', () => {
+    const result = handleChartAriaLabels({
+      visualizationType: 'Line',
+      title: 'COVID-19 Cases'
+    })
+    expect(result).toBe('Line chart with the title: COVID-19 Cases')
+  })
+
+  it('returns visualizationType-only title when chart title is absent', () => {
+    const result = handleChartAriaLabels({
+      visualizationType: 'Bar'
+    })
+    expect(result).toBe('Bar chart')
+  })
+
+  it('returns fallback when visualizationType is missing', () => {
+    const result = handleChartAriaLabels({})
+    expect(result).toBe('Data visualization container')
+  })
+
+  describe('description', () => {
+    it('concatenates static description after title', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends',
+        altText: { type: 'static', value: 'Cases rose steadily over 8 weeks.' }
+      })
+      expect(result).toBe('Line chart with the title: Trends. Cases rose steadily over 8 weeks.')
+    })
+
+    it('concatenates description from metadata after title', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends',
+        altText: { type: 'metadata', metadataKey: 'altDescription' },
+        dataMetadata: { altDescription: 'Positivity increased from 4% to 12%.' }
+      })
+      expect(result).toBe('Line chart with the title: Trends. Positivity increased from 4% to 12%.')
+    })
+
+    it('returns title only when metadata key is missing', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends',
+        altText: { type: 'metadata', metadataKey: 'missing' },
+        dataMetadata: { other: 'value' }
+      })
+      expect(result).toBe('Line chart with the title: Trends')
+    })
+
+    it('returns title only when not configured', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends'
+      })
+      expect(result).toBe('Line chart with the title: Trends')
+    })
+
+    it('returns title only when altText is empty object', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends',
+        altText: {}
+      })
+      expect(result).toBe('Line chart with the title: Trends')
+    })
+  })
+})

package/src/helpers/tests/seriesHighlight.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import { getLegendHighlightKey, shouldResetSeriesHighlight } from '../seriesHighlight'
+
+describe('seriesHighlight helpers', () => {
+  const seriesLabels = {
+    nonfatal_rate_alldrugs: 'All drugs',
+    opioid_nonfatal_rate: 'All opioids',
+    stimulant_nonfatal_rate: 'All stimulants'
+  }
+
+  it('normalizes a legend label to the stored series highlight key', () => {
+    expect(getLegendHighlightKey(seriesLabels, 'All opioids')).toBe('opioid_nonfatal_rate')
+    expect(getLegendHighlightKey(seriesLabels, 'unmapped_series')).toBe('unmapped_series')
+  })
+
+  it('accepts legend label objects and legacy raw string callers', () => {
+    expect(
+      getLegendHighlightKey(seriesLabels, {
+        datum: 'All stimulants',
+        index: 2,
+        text: 'All stimulants',
+        value: '#075290'
+      })
+    ).toBe('stimulant_nonfatal_rate')
+
+    expect(getLegendHighlightKey(seriesLabels, 'Highlighted bar')).toBe('Highlighted bar')
+  })
+
+  it('does not reset when removing one selected item from a three-series legend', () => {
+    expect(
+      shouldResetSeriesHighlight(
+        ['nonfatal_rate_alldrugs', 'opioid_nonfatal_rate'],
+        Object.keys(seriesLabels),
+        'opioid_nonfatal_rate',
+        'Line'
+      )
+    ).toBe(false)
+  })
+
+  it('resets when selecting the only remaining unselected item', () => {
+    expect(
+      shouldResetSeriesHighlight(
+        ['nonfatal_rate_alldrugs', 'opioid_nonfatal_rate'],
+        Object.keys(seriesLabels),
+        'stimulant_nonfatal_rate',
+        'Line'
+      )
+    ).toBe(true)
+  })
+
+  it('does not reset when the clicked item is not a known series key', () => {
+    expect(
+      shouldResetSeriesHighlight(
+        ['nonfatal_rate_alldrugs', 'opioid_nonfatal_rate'],
+        Object.keys(seriesLabels),
+        'suppressed-data-note',
+        'Line'
+      )
+    ).toBe(false)
+  })
+})

package/src/helpers/tests/tooltipHelpers.test.ts

@@ -0,0 +1,151 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildTooltipListHtml,
+  getTooltipMarkerColor,
+  getTooltipMarkerShape,
+  shouldUseTooltipLegendMarkers,
+  tooltipHasMarkerColumn,
+  tooltipShouldUseMarkerColumn,
+  type TooltipRow
+} from '../tooltipHelpers'
+
+const buildConfig = overrides => ({
+  visualizationType: 'Line',
+  legend: {
+    hide: false,
+    style: 'circles',
+    groupBy: '',
+    patterns: {},
+    ...overrides?.legend
+  },
+  runtime: {
+    seriesLabels: { cases: 'Cases', deaths: 'Deaths' },
+    seriesLabelsAll: ['Cases', 'Deaths'],
+    seriesKeys: ['cases', 'deaths'],
+    ...overrides?.runtime
+  },
+  series: [{ dataKey: 'cases' }, { dataKey: 'deaths' }],
+  smallMultiples: {
+    mode: '',
+    ...overrides?.smallMultiples
+  },
+  ...overrides
+})
+
+describe('tooltipHelpers', () => {
+  it('enables marker rendering for supported multi-series charts with visible legends', () => {
+    expect(shouldUseTooltipLegendMarkers(buildConfig())).toBe(true)
+  })
+
+  it('allows small-multiple tiles to use markers when the source legend is visible', () => {
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { hide: true, tooltipLegendVisible: true } }))).toBe(
+      true
+    )
+  })
+
+  it('disables markers when the source legend is hidden or the legend is in a special mode', () => {
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { hide: true } }))).toBe(false)
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { hide: true, tooltipLegendVisible: false } }))).toBe(
+      false
+    )
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { style: 'gradient' } }))).toBe(false)
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { groupBy: 'category' } }))).toBe(false)
+    expect(
+      shouldUseTooltipLegendMarkers(
+        buildConfig({
+          runtime: { seriesLabelsAll: ['Cases'], seriesKeys: ['cases'] },
+          series: [{ dataKey: 'cases' }]
+        })
+      )
+    ).toBe(false)
+  })
+
+  it('disables markers for single-series small-multiple tiles even when the source legend is visible', () => {
+    expect(
+      shouldUseTooltipLegendMarkers(
+        buildConfig({
+          legend: { hide: true, tooltipLegendVisible: true },
+          runtime: { seriesLabelsAll: ['Cases'], seriesKeys: ['cases'] },
+          series: [{ dataKey: 'cases' }]
+        })
+      )
+    ).toBe(false)
+  })
+
+  it('keeps patterned legends eligible and still uses the base series color', () => {
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { patterns: { striped: { color: '#000' } } } }))).toBe(
+      true
+    )
+  })
+
+  it('resolves marker colors using the legend label mapping', () => {
+    const colorScale = value => ({ Cases: '#1f77b4', deaths: '#d62728' }[value] || null)
+
+    expect(getTooltipMarkerColor(buildConfig(), colorScale as any, 'cases')).toBe('#1f77b4')
+    expect(getTooltipMarkerColor(buildConfig(), colorScale as any, 'unknown')).toBe(null)
+  })
+
+  it('uses square markers only when the legend explicitly uses boxes', () => {
+    expect(getTooltipMarkerShape(buildConfig())).toBe('circle')
+    expect(getTooltipMarkerShape(buildConfig({ legend: { style: 'boxes' } }))).toBe('square')
+  })
+
+  it('only reserves a marker column when at least one series row has a marker', () => {
+    const rows: TooltipRow[] = [
+      { key: 'Date', value: '2024-01-01', kind: 'heading' },
+      { key: 'Cases', value: '10', kind: 'series', markerColor: '#1f77b4' },
+      { key: 'Source', value: 'CDC', kind: 'extra' }
+    ]
+    const rowsWithoutMarkers: TooltipRow[] = [
+      { key: 'Date', value: '2024-01-01', kind: 'heading' },
+      { key: 'Source', value: 'CDC', kind: 'extra' }
+    ]
+
+    expect(tooltipHasMarkerColumn(rows)).toBe(true)
+    expect(tooltipHasMarkerColumn(rowsWithoutMarkers)).toBe(false)
+  })
+
+  it('suppresses the marker column when two series would render identical marker signatures', () => {
+    expect(
+      tooltipShouldUseMarkerColumn([
+        { markerColor: '#f28e2b', markerShape: 'circle' },
+        { markerColor: '#f28e2b', markerShape: 'circle' }
+      ])
+    ).toBe(false)
+
+    expect(
+      tooltipShouldUseMarkerColumn([
+        { markerColor: '#f28e2b', markerShape: 'circle' },
+        { markerColor: '#f28e2b', markerShape: 'square' }
+      ])
+    ).toBe(true)
+  })
+
+  it('renders aligned raw HTML rows only when the tooltip contains a marker', () => {
+    const withMarker = buildTooltipListHtml({
+      heading: 'Date: Jan 1, 2024',
+      bodyRows: [{ text: 'Cases: 10', markerColor: '#1f77b4', markerShape: 'square' }, { text: 'Source: CDC' }]
+    })
+    const withoutMarker = buildTooltipListHtml({
+      heading: 'Date: Jan 1, 2024',
+      bodyRows: [{ text: 'Source: CDC' }]
+    })
+    const ambiguousMarkers = buildTooltipListHtml({
+      heading: 'Date: Jan 1, 2024',
+      bodyRows: [
+        { text: 'Dose 1: 10', markerColor: '#f28e2b', markerShape: 'circle' },
+        { text: 'Dose 2: 20', markerColor: '#f28e2b', markerShape: 'circle' }
+      ]
+    })
+
+    expect(withMarker).toContain('tooltip-body--marker-layout')
+    expect(withMarker).toContain('tooltip-marker-slot')
+    expect(withMarker).toContain('tooltip-marker-slot" aria-hidden="true"')
+    expect(withMarker).toContain('tooltip-marker-swatch')
+    expect(withMarker).toContain('tooltip-marker-swatch--square')
+    expect(withoutMarker).not.toContain('tooltip-body--marker-layout')
+    expect(withoutMarker).not.toContain('tooltip-marker-slot')
+    expect(ambiguousMarkers).not.toContain('tooltip-body--marker-layout')
+    expect(ambiguousMarkers).not.toContain('tooltip-marker-slot')
+  })
+})