@cdc/chart 4.26.4 → 4.26.6

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/hasSpacedInlineLabel.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import { hasSpacedInlineLabel } from '../hasSpacedInlineLabel'
+import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+describe('hasSpacedInlineLabel', () => {
+  it('returns true for multi-word inline labels', () => {
+    expect(
+      hasSpacedInlineLabel(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: 'per 100k'
+          }
+        })
+      )
+    ).toBe(true)
+  })
+
+  it('returns true for inline labels with leading space', () => {
+    expect(
+      hasSpacedInlineLabel(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: ' cases'
+          }
+        })
+      )
+    ).toBe(true)
+  })
+
+  it('returns false for top y-axis titles with empty inline labels', () => {
+    expect(
+      hasSpacedInlineLabel(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'top',
+            inlineLabel: ''
+          }
+        })
+      )
+    ).toBe(false)
+  })
+
+  it('returns false when the inline label has no spaces', () => {
+    expect(
+      hasSpacedInlineLabel(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: 'Rate'
+          }
+        })
+      )
+    ).toBe(false)
+  })
+
+  it('returns true for spaced inline labels regardless of title placement', () => {
+    expect(
+      hasSpacedInlineLabel(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'top',
+            inlineLabel: 'per 100k'
+          }
+        })
+      )
+    ).toBe(true)
+  })
+})

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

@@ -65,19 +65,33 @@ describe('seriesColumnSettings', () => {
   it('only returns explicit formatting overrides and preserves falsey values', () => {
     expect(
       getSeriesColumnFormattingParams({
-        prefix: '',
+        prefix: '$',
         suffix: ' units',
         roundToPlace: 0,
         commas: false
       })
     ).toEqual({
-      addColPrefix: '',
+      addColPrefix: '$',
       addColSuffix: ' units',
       addColRoundTo: 0,
       addColCommas: false
     })
   })
 
+  it('ignores blank prefix and suffix overrides so global formatting can apply', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        prefix: '',
+        suffix: '',
+        roundToPlace: 0,
+        commas: false
+      })
+    ).toEqual({
+      addColRoundTo: 0,
+      addColCommas: false
+    })
+  })
+
   it('returns undefined when no formatting overrides were explicitly configured', () => {
     expect(getSeriesColumnFormattingParams({ label: 'Cases' })).toBeUndefined()
   })

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/smallMultiplesHelpers.test.ts

@@ -0,0 +1,99 @@
+import { scaleOrdinal } from '@visx/scale'
+import { describe, expect, it } from 'vitest'
+import { createTileColorScale } from '../smallMultiplesHelpers'
+import { ChartConfig } from '../../types/ChartConfig'
+
+const buildConfig = (overrides: Partial<ChartConfig> = {}): ChartConfig =>
+  ({
+    visualizationType: 'Line',
+    visualizationSubType: 'regular',
+    general: {
+      palette: {
+        customColors: ['#111111', '#222222'],
+        colorAssignmentMode: 'ordered'
+      }
+    },
+    legend: {},
+    smallMultiples: {
+      mode: 'by-series',
+      colorMode: 'same'
+    },
+    series: [
+      { dataKey: 'series_a', name: 'Series A', type: 'Line' },
+      { dataKey: 'series_b', name: 'Series B', type: 'Line' }
+    ],
+    runtime: {
+      seriesKeys: ['series_a', 'series_b'],
+      seriesLabels: {
+        series_a: 'Series A',
+        series_b: 'Series B'
+      },
+      seriesLabelsAll: ['Series A', 'Series B']
+    },
+    ...overrides
+  } as ChartConfig)
+
+describe('smallMultiplesHelpers createTileColorScale', () => {
+  it('uses the same first color for by-series tiles in same color mode by default', () => {
+    const colorScale = scaleOrdinal({
+      domain: ['Series A', 'Series B'],
+      range: ['#111111', '#222222'],
+      unknown: null
+    })
+
+    const tileScale = createTileColorScale(
+      { mode: 'by-series', seriesKey: 'series_b' },
+      buildConfig(),
+      colorScale,
+      1,
+      2
+    )
+
+    expect(tileScale('Series A')).toBe('#111111')
+    expect(tileScale('Series B')).toBe('#111111')
+  })
+
+  it('lets by-value assignments override same color mode for by-series tiles', () => {
+    const colorScale = scaleOrdinal({
+      domain: ['Series A', 'Series B'],
+      range: ['#aa0000', '#00bb00'],
+      unknown: null
+    })
+    const config = buildConfig({
+      general: {
+        palette: {
+          customColors: ['#111111', '#222222'],
+          colorAssignmentMode: 'by-value',
+          colorAssignments: [{ key: 'series_b', color: '#00bb00' }]
+        }
+      } as any
+    })
+
+    const tileScale = createTileColorScale({ mode: 'by-series', seriesKey: 'series_b' }, config, colorScale, 1, 2)
+
+    expect(tileScale('Series A')).toBe('#aa0000')
+    expect(tileScale('Series B')).toBe('#00bb00')
+  })
+
+  it('ignores stale by-value assignments when deciding whether to override same color mode', () => {
+    const colorScale = scaleOrdinal({
+      domain: ['Series A', 'Series B'],
+      range: ['#aa0000', '#00bb00'],
+      unknown: null
+    })
+    const config = buildConfig({
+      general: {
+        palette: {
+          customColors: ['#111111', '#222222'],
+          colorAssignmentMode: 'by-value',
+          colorAssignments: [{ key: 'removed_series', color: '#00bb00' }]
+        }
+      } as any
+    })
+
+    const tileScale = createTileColorScale({ mode: 'by-series', seriesKey: 'series_b' }, config, colorScale, 1, 2)
+
+    expect(tileScale('Series A')).toBe('#aa0000')
+    expect(tileScale('Series B')).toBe('#aa0000')
+  })
+})

package/src/hooks/tests/useRightAxis.test.tsx

@@ -0,0 +1,127 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import useRightAxis from '../useRightAxis'
+import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+const leftSeries = { dataKey: 'Cases', type: 'Bar', axis: 'Left', tooltip: true }
+const rightSeries = { dataKey: 'Rate', type: 'Line', axis: 'Right', tooltip: true }
+
+const createComboConfig = () =>
+  createMockConfig({
+    visualizationType: 'Combo',
+    orientation: 'vertical',
+    series: [leftSeries, rightSeries],
+    yAxis: {
+      ...createMockConfig().yAxis,
+      rightMax: undefined,
+      rightMin: undefined,
+      smallestRightAxisMax: undefined
+    },
+    runtime: {
+      ...createMockConfig().runtime,
+      series: [leftSeries, rightSeries],
+      seriesKeys: ['Cases', 'Rate'],
+      barSeriesKeys: ['Cases'],
+      lineSeriesKeys: ['Rate']
+    } as any
+  })
+
+describe('useRightAxis', () => {
+  it('builds the right-axis scale from the supplied domain rows', () => {
+    const config = createComboConfig()
+    const renderedRows = [{ Cases: 5, Rate: 12 }]
+    const stableDomainRows = [
+      { Cases: 5, Rate: 12 },
+      { Cases: 10, Rate: 90 }
+    ]
+
+    const renderedResult = renderHook(() => useRightAxis({ config, yMax: 100, data: renderedRows }))
+    const stableResult = renderHook(() => useRightAxis({ config, yMax: 100, data: stableDomainRows }))
+
+    expect(renderedResult.result.current.yScaleRight.domain()).toEqual([0, 12])
+    expect(stableResult.result.current.yScaleRight.domain()).toEqual([0, 90])
+  })
+
+  it('uses clean-top-tick for the automatic right-axis max when shared auto max strategy is enabled', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        autoMaxStrategy: 'clean-top-tick' as const
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 101 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 120])
+    expect(result.result.current.rightTickValues).toBeUndefined()
+  })
+
+  it('does not finalize right-axis ticks from the inherited mixed Combo min', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        autoMaxStrategy: 'clean-top-tick' as const
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: -100, Rate: 6 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([-100, 6])
+    expect(result.result.current.rightTickValues).toBeUndefined()
+  })
+
+  it('does not round the right-axis max when rightMax is explicit', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        autoMaxStrategy: 'clean-top-tick' as const,
+        rightMax: '100'
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 25 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 100])
+    expect(result.result.current.rightTickValues).toBeUndefined()
+  })
+
+  it('uses clean-top-tick when rightMax is invalid', () => {
+    const createConfigWithRightMax = (rightMax: string) => ({
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        autoMaxStrategy: 'clean-top-tick' as const,
+        rightMax
+      }
+    })
+
+    const lowerThanData = renderHook(() =>
+      useRightAxis({ config: createConfigWithRightMax('50'), yMax: 100, data: [{ Cases: 5, Rate: 101 }] })
+    )
+    const nonNumeric = renderHook(() =>
+      useRightAxis({ config: createConfigWithRightMax('not-a-number'), yMax: 100, data: [{ Cases: 5, Rate: 101 }] })
+    )
+
+    expect(lowerThanData.result.current.yScaleRight.domain()).toEqual([0, 120])
+    expect(lowerThanData.result.current.rightTickValues).toBeUndefined()
+    expect(nonNumeric.result.current.yScaleRight.domain()).toEqual([0, 120])
+    expect(nonNumeric.result.current.rightTickValues).toBeUndefined()
+  })
+
+  it('ignores a non-numeric rightMin value', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        rightMin: 'not-a-number'
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 25 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 25])
+  })
+})