@cdc/chart 4.26.6 → 4.26.10

package/src/components/BarChart/helpers/tests/useBarChart.test.tsx

@@ -0,0 +1,202 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { createMockChartContext, createMockConfig } from '../../../LinearChart/tests/mockConfigContext'
+import { useBarChart } from '../useBarChart'
+
+const baseConfig = createMockConfig()
+
+const makeConfigContext = (countColumnOverrides: Record<string, unknown> = {}) => {
+  const config = createMockConfig({
+    visualizationType: 'Bar',
+    orientation: 'horizontal',
+    barHeight: 25,
+    xAxis: {
+      ...baseConfig.xAxis,
+      type: 'categorical',
+      dataKey: 'Cause of death'
+    },
+    yAxis: {
+      ...baseConfig.yAxis,
+      labelPlacement: 'Below Bar'
+    },
+    series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }] as any,
+    columns: {
+      Count: {
+        name: 'Count',
+        label: 'Count',
+        prefix: '',
+        suffix: '',
+        roundToPlace: 0,
+        commas: true,
+        dataTable: true,
+        tooltips: true,
+        ...countColumnOverrides
+      }
+    } as any,
+    dataFormat: {
+      abbreviated: false,
+      bottomAbbreviated: false,
+      bottomPrefix: '',
+      bottomRoundTo: 0,
+      bottomSuffix: '',
+      bottomCommas: false,
+      commas: false,
+      prefix: '',
+      preserveOriginalDecimals: false,
+      rightPrefix: '',
+      rightRoundTo: 0,
+      rightSuffix: '',
+      roundTo: 1,
+      suffix: '%'
+    } as any,
+    runtime: {
+      ...baseConfig.runtime,
+      xAxis: {
+        ...baseConfig.runtime.xAxis,
+        type: 'categorical',
+        dataKey: 'Cause of death'
+      },
+      yAxis: {
+        ...baseConfig.runtime.yAxis,
+        dataKey: 'Percentage'
+      },
+      originalXAxis: {
+        ...baseConfig.runtime.originalXAxis,
+        dataKey: 'Cause of death'
+      },
+      series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }],
+      seriesKeys: ['Percentage'],
+      seriesLabels: { Percentage: 'Percentage' },
+      seriesLabelsAll: ['Percentage']
+    } as any
+  })
+
+  return createMockChartContext(config, {
+    tableData: [
+      {
+        'Cause of death': 'Cardiovascular conditions',
+        Percentage: 22,
+        Count: 146
+      }
+    ],
+    updateConfig: vi.fn()
+  })
+}
+
+describe('useBarChart', () => {
+  it('adds raw percent decoration without replacing the formatted tooltip value', () => {
+    const configContext = makeConfigContext()
+    configContext.tableData[0].Percentage = '22.500%'
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Cardiovascular conditions', '22.5')).toBe('22.5%')
+  })
+
+  it('preserves a raw trailing percent sign for the matching dynamic category', () => {
+    const configContext = makeConfigContext()
+    configContext.config.series = [
+      {
+        dataKey: 'Data_Value',
+        dynamicCategory: 'Age group',
+        type: 'Bar',
+        axis: 'Left',
+        tooltip: true
+      }
+    ] as any
+    configContext.tableData = [
+      {
+        'Cause of death': 'Cardiovascular conditions',
+        'Age group': '65 years or older',
+        Data_Value: '56.4%'
+      }
+    ]
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('65 years or older', 'Cardiovascular conditions', '56.4')).toBe('56.4%')
+  })
+
+  it('matches numeric dynamic-category values to their rendered string series keys', () => {
+    const configContext = makeConfigContext()
+    configContext.config.series = [
+      {
+        dataKey: 'Data_Value',
+        dynamicCategory: 'Age group',
+        type: 'Bar',
+        axis: 'Left',
+        tooltip: true
+      }
+    ] as any
+    configContext.tableData = [
+      {
+        'Cause of death': 'Cardiovascular conditions',
+        'Age group': 65,
+        Data_Value: '56.4%'
+      }
+    ]
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('65', 'Cardiovascular conditions', '56.4')).toBe('56.4%')
+  })
+
+  it('uses the indexed raw row when static categories are duplicated', () => {
+    const configContext = makeConfigContext()
+    configContext.tableData = [
+      { 'Cause of death': 'Repeated category', Percentage: '22.5%', Count: 146 },
+      { 'Cause of death': 'Repeated category', Percentage: '30%', Count: 150 }
+    ]
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Repeated category', '30.0', 1)).toBe('30.0%')
+  })
+
+  it('uses the brush-aligned raw row when a duplicate category subset shifts the rendered index', () => {
+    const configContext = makeConfigContext()
+    configContext.tableData = [
+      { 'Cause of death': 'Repeated category', Percentage: 22.5, Count: 146 },
+      { 'Cause of death': 'Repeated category', Percentage: '30%', Count: 150 }
+    ]
+    configContext.brushData = [configContext.tableData[1]]
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Repeated category', '30.0', 0)).toBe('30.0%')
+  })
+
+  it('uses the formatted tooltip value when the raw value is numeric', () => {
+    const configContext = makeConfigContext()
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Cardiovascular conditions', '22.0')).toBe('22.0')
+  })
+
+  it('uses the formatted tooltip value when no raw row matches', () => {
+    const configContext = makeConfigContext()
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Missing category', 'N/A')).toBe('N/A')
+  })
+
+  it('does not mutate config when horizontal bar label placement is missing', () => {
+    const configContext = makeConfigContext()
+    delete configContext.config.yAxis.labelPlacement
+
+    renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(configContext.updateConfig).not.toHaveBeenCalled()
+  })
+
+  it('does not apply the left-axis suffix to an additional single-series tooltip column', () => {
+    const configContext = makeConfigContext()
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.getAdditionalColumn('Percentage', 'Cardiovascular conditions')).toBe('Count : 146 <br/>')
+  })
+
+  it('applies an additional column suffix when one is configured', () => {
+    const configContext = makeConfigContext({ suffix: ' deaths' })
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.getAdditionalColumn('Percentage', 'Cardiovascular conditions')).toBe(
+      'Count : 146 deaths <br/>'
+    )
+  })
+})

package/src/components/BarChart/helpers/useBarChart.ts

@@ -1,16 +1,17 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useState } from 'react'
 import { ChartDispatchContext } from '../../../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
-import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
-import { getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
+import { getAdditionalColumnFormattingParams, getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
+import { getColorCodeCategoryColorMap } from '../../../helpers/getColorCodeCategoryColorMap'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
   const {
     config,
+    brushData,
     colorPalettes,
     tableData,
     updateConfig,
@@ -53,18 +54,37 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       ? seriesHighlight
       : config.runtime.barSeriesKeys || config.runtime.seriesKeys
   const seriesOwnedColumnNames = getSeriesOwnedColumnNames(config.series)
+  const dynamicSeries = config.series.find(series => series.dynamicCategory)
+  const originalXAxisDataKey = config.runtime.originalXAxis.dataKey
+  const sourceDataRows = Array.isArray(brushData) && brushData.length > 0 ? brushData : tableData
 
-  useEffect(() => {
-    if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
-      updateConfig({
-        ...config,
-        yAxis: {
-          ...config.yAxis,
-          labelPlacement: 'Below Bar'
-        }
+  // Index source rows once so rendered bars can recover display-only formatting without rescanning the data.
+  const sourceRowsByXAxisAndSeries = useMemo(() => {
+    const rowsByXAxis = new Map<string, Map<string, Record<string, unknown>>>()
+
+    sourceDataRows?.forEach(row => {
+      const xAxisValue = String(row?.[originalXAxisDataKey])
+      const rowsBySeries = rowsByXAxis.get(xAxisValue) ?? new Map<string, Record<string, unknown>>()
+
+      config.series.forEach(series => {
+        const seriesKey = series.dynamicCategory ? row?.[series.dynamicCategory] : series.dataKey
+        if (seriesKey === undefined || seriesKey === null) return
+        rowsBySeries.set(String(seriesKey), row)
       })
-    }
-  }, [config, updateConfig]) // eslint-disable-line
+
+      rowsByXAxis.set(xAxisValue, rowsBySeries)
+    })
+
+    return rowsByXAxis
+  }, [sourceDataRows, config.series, originalXAxisDataKey])
+
+  const findSourceDataRow = (seriesKey: string, xAxisValue: unknown, rowIndex?: number) => {
+    // Static charts can repeat x-axis values, so prefer the rendered row index when it still matches.
+    const indexedRow = !dynamicSeries && Number.isInteger(rowIndex) ? sourceDataRows?.[rowIndex] : undefined
+    if (indexedRow && String(indexedRow[originalXAxisDataKey]) === String(xAxisValue)) return indexedRow
+
+    return sourceRowsByXAxisAndSeries.get(String(xAxisValue))?.get(String(seriesKey))
+  }
 
   useEffect(() => {
     if (config.isLollipopChart === false && config.barHeight < 25) {
@@ -72,15 +92,6 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     }
   }, [config.isLollipopChart]) // eslint-disable-line
 
-  useEffect(() => {
-    if (config.visualizationSubType === 'horizontal') {
-      updateConfig({
-        ...config,
-        orientation: 'horizontal'
-      })
-    }
-  }, []) // eslint-disable-line
-
   useEffect(() => {
     if (config.barStyle === 'lollipop' && !config.isLollipopChart) {
       updateConfig({ ...config, isLollipopChart: true })
@@ -111,34 +122,16 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     return style
   }
 
-  const assignColorsToValues = (barsCount, barIndex, currentBarColor) => {
-    if (!config.legend.colorCode && config.series.length > 1) {
-      return currentBarColor
-    }
-    const palettesArr = getPaletteColors(config, colorPalettes)
-    const values = tableData.map(d => {
-      return d[config.legend.colorCode]
-    })
-    // Map to hold unique values and their  colors
-    let colorMap = new Map()
-    // Resultant array to hold colors  to the values
-    let palette = []
+  const colorCodeCategoryColors = getColorCodeCategoryColorMap(config, tableData, colorPalettes)
 
-    for (let i = 0; i < values.length; i++) {
-      // If value not in map, add it and assign a color
-      if (!colorMap.has(values[i])) {
-        colorMap.set(values[i], palettesArr[colorMap.size % palettesArr.length])
-      }
-      // push the color to the result array
-      palette.push(colorMap.get(values[i]))
-    }
+  const assignColorsToValues = (barIndex, currentBarColor) => {
+    const colorCode = config.legend.colorCode
+    if (!colorCode) return currentBarColor
 
-    // loop throghy existing colors and extend if needed
-    while (palette.length < barsCount) {
-      palette = palette.concat(palette)
-    }
-    const barColor = palette[barIndex]
-    return barColor
+    const rowIndex = tableData.length ? barIndex % tableData.length : -1
+    const category = tableData[rowIndex]?.[colorCode]
+
+    return colorCodeCategoryColors.get(category) ?? currentBarColor
   }
 
   const getHighlightedBarColorByValue = value => {
@@ -173,22 +166,12 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     const columns = config.columns
     const columnsWithTooltips = []
     let additionalTooltipItems = ''
-    const dynamicCategorySeries = config.runtime?.series?.find(series => series?.dynamicCategory)
-    const closestVal =
-      tableData.find(d => {
-        const dynamicCategoryMatch = dynamicCategorySeries ? d[dynamicCategorySeries.dynamicCategory] === series : true
-        return d[config.xAxis.dataKey] === xAxisDataValue && dynamicCategoryMatch
-      }) || {}
+    const closestVal = findSourceDataRow(series, xAxisDataValue) || {}
     Object.keys(columns).forEach(colKeys => {
       const colConfig = config.columns[colKeys]
       if (seriesOwnedColumnNames.includes(colConfig.name || colKeys)) return
       if (series && colConfig.series && colConfig.series !== series && !colConfig.tooltips) return
-      const formattingParams = {
-        addColPrefix: config.columns[colKeys].prefix,
-        addColSuffix: config.columns[colKeys].suffix,
-        addColRoundTo: config.columns[colKeys].roundToPlace ? config.columns[colKeys].roundToPlace : '',
-        addColCommas: config.columns[colKeys].commas
-      }
+      const formattingParams = getAdditionalColumnFormattingParams(config.columns[colKeys])
 
       const formattedValue = formatColNumber(
         closestVal[config.columns[colKeys].name],
@@ -207,6 +190,22 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     return additionalTooltipItems
   }
 
+  const formatTooltipValue = (
+    seriesKey: string,
+    xAxisValue: unknown,
+    displayValue: string | number,
+    rowIndex?: number
+  ): string | number => {
+    const rawRow = findSourceDataRow(seriesKey, xAxisValue, rowIndex)
+    const staticSeries = config.series.find(series => !series.dynamicCategory && series.dataKey === seriesKey)
+    const rawValueKey = staticSeries?.dataKey ?? dynamicSeries?.dataKey ?? seriesKey
+    const rawValue = rawRow?.[rawValueKey]
+    const formattedText = String(displayValue)
+    const sourceUsesPercentage = typeof rawValue === 'string' && rawValue.trim().endsWith('%')
+
+    return sourceUsesPercentage && formattedText && !formattedText.endsWith('%') ? `${formattedText}%` : displayValue
+  }
+
   const onMouseOverBar = (categoryValue, barKey, event, data, barValue) => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
@@ -256,6 +255,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     barStackedSeriesKeys,
     hasMultipleSeries,
     labelFontSize,
+    formatTooltipValue,
     applyRadius,
     assignColorsToValues,
     getHighlightedBarColorByValue,

package/src/components/BarChartRace/BarChartRace.test.tsx

@@ -0,0 +1,199 @@
+import React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import { createMockChartContext, createMockConfig } from '../LinearChart/tests/mockConfigContext'
+import BarChartRace from './BarChartRace'
+import { getBarRaceEligibility } from './helpers'
+
+const data = [
+  { Year: '2020', Place: 'Alpha', Value: 10 },
+  { Year: '2020', Place: 'Beta', Value: 20 },
+  { Year: '2021', Place: 'Alpha', Value: 30 },
+  { Year: '2021', Place: 'Beta', Value: 15 }
+]
+
+type RaceOptions = {
+  displayNumbersOnBar?: boolean
+  formatNumber?: ReturnType<typeof vi.fn>
+  labelPlacement?: string
+}
+
+const getRaceContext = (rows = data, options: RaceOptions = {}) => {
+  const baseConfig = createMockConfig()
+  const yAxis = { ...baseConfig.yAxis }
+  delete yAxis.labelPlacement
+  if (options.labelPlacement) yAxis.labelPlacement = options.labelPlacement
+  if (options.displayNumbersOnBar !== undefined) yAxis.displayNumbersOnBar = options.displayNumbersOnBar
+  const config = createMockConfig({
+    visualizationType: 'Bar',
+    visualizationSubType: 'racing',
+    orientation: 'horizontal',
+    barStyle: 'flat',
+    isLollipopChart: false,
+    barRace: { maxBars: 2, secondsPerFrame: 0.5 },
+    xAxis: { ...baseConfig.xAxis, type: 'categorical', dataKey: 'Year', label: 'Year' },
+    yAxis,
+    series: [{ dataKey: 'Value', dynamicCategory: 'Place', axis: 'left', type: 'Bar' }] as any,
+    columns: { Value: { name: 'Value', label: 'Value', prefix: '$', roundToPlace: 0 } } as any,
+    runtime: { ...baseConfig.runtime, seriesKeys: ['Alpha', 'Beta'], seriesLabelsAll: ['Alpha', 'Beta'] }
+  })
+  return createMockChartContext(config, {
+    transformedData: rows,
+    colorScale: category => (category === 'Alpha' ? '#005ea8' : '#712177'),
+    formatNumber:
+      options.formatNumber ?? ((value, _axis, _abbreviated, prefix = '', suffix = '') => `${prefix}${value}${suffix}`)
+  })
+}
+
+const renderRace = (rows = data, options: RaceOptions = {}) => {
+  const context = getRaceContext(rows, options)
+  const race = getBarRaceEligibility(context.config, rows)
+
+  return render(
+    <ConfigContext.Provider value={context}>
+      <BarChartRace parentWidth={700} race={race} />
+    </ConfigContext.Provider>
+  )
+}
+
+describe('BarChartRace', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.stubGlobal('matchMedia', () => ({
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    }))
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+  })
+
+  it('uses the on-axis label layout when label placement is missing', () => {
+    const { container } = renderRace()
+
+    expect(container.querySelector('.bar-chart-race')).toHaveClass('bar-chart-race--labels-on-axis')
+    expect(container.querySelector('.bar-chart-race__plot')).toHaveStyle({ height: '96px' })
+  })
+
+  it('uses the on-axis label layout when label placement is explicit', () => {
+    const { container } = renderRace(data, { labelPlacement: 'On Date/Category Axis' })
+
+    expect(container.querySelector('.bar-chart-race')).toHaveClass('bar-chart-race--labels-on-axis')
+    expect(container.querySelector('.bar-chart-race')).not.toHaveClass('bar-chart-race--labels-below-bar')
+  })
+
+  it('moves labels below bars and adds row spacing for the below-bar layout', () => {
+    const { container } = renderRace(data, { labelPlacement: 'Below Bar' })
+
+    expect(container.querySelector('.bar-chart-race')).toHaveClass('bar-chart-race--labels-below-bar')
+    expect(container.querySelector('.bar-chart-race__plot')).toHaveStyle({ height: '128px' })
+  })
+
+  it('keeps value labels after bars when display numbers on bar is disabled', () => {
+    const { container } = renderRace(data, { displayNumbersOnBar: false })
+
+    expect(container.querySelectorAll('.bar-chart-race__value')).toHaveLength(2)
+    expect(container.querySelectorAll('.bar-chart-race__value--after')).toHaveLength(2)
+    expect(container.querySelector('.bar-chart-race__value--inside')).not.toBeInTheDocument()
+  })
+
+  it('places displayed values inside fitting bars and after bars that are too short', () => {
+    const rows = [
+      { Year: '2020', Place: 'Short', Value: 1 },
+      { Year: '2020', Place: 'Long', Value: 100 },
+      { Year: '2021', Place: 'Short', Value: 2 },
+      { Year: '2021', Place: 'Long', Value: 90 }
+    ]
+    const { container } = renderRace(rows, { displayNumbersOnBar: true })
+
+    expect(container.querySelector('[data-category="Long"] .bar-chart-race__value')).toHaveClass(
+      'bar-chart-race__value--inside'
+    )
+    expect(container.querySelector('[data-category="Short"] .bar-chart-race__value')).toHaveClass(
+      'bar-chart-race__value--after'
+    )
+  })
+
+  it('starts paused, advances, pauses, and replays from the first frame', () => {
+    const { container } = renderRace()
+
+    const frame = container.querySelector('.bar-chart-race__frame')
+    const frameAxis = screen.getByRole('group', { name: 'Year axis' })
+    expect(frame).toHaveTextContent('2020')
+    expect(frameAxis).toHaveTextContent('2020')
+    expect(frameAxis).toHaveTextContent('2021')
+    expect(frameAxis.querySelector('[aria-current="step"]')).toHaveTextContent('2020')
+    const playButton = screen.getByRole('button', { name: 'Play' })
+    expect(container.querySelector('.bar-chart-race__header')?.firstElementChild).toBe(playButton)
+    expect(playButton.nextElementSibling).toBe(frame)
+    expect(playButton.querySelector('[data-icon="play"]')).toBeInTheDocument()
+    fireEvent.click(playButton)
+    expect(screen.getByRole('button', { name: 'Pause' }).querySelector('[data-icon="pause"]')).toBeInTheDocument()
+    act(() => vi.advanceTimersByTime(500))
+    expect(frame).toHaveTextContent('2021')
+    expect(frameAxis.querySelector('[aria-current="step"]')).toHaveTextContent('2021')
+    expect(screen.getByRole('button', { name: 'Replay' }).querySelector('[data-icon="replay"]')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Replay' }))
+    expect(frame).toHaveTextContent('2020')
+    expect(screen.getByRole('button', { name: 'Pause' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Pause' }))
+    act(() => vi.advanceTimersByTime(500))
+    expect(frame).toHaveTextContent('2020')
+  })
+
+  it('uses stable category colors, column formatting, and the standard chart tooltip markup', () => {
+    const { container } = renderRace(data, { displayNumbersOnBar: true })
+    const alphaRow = container.querySelector('[data-category="Alpha"]') as HTMLElement
+
+    expect(alphaRow.querySelector('.bar-chart-race__bar')).toHaveStyle({ backgroundColor: '#005ea8' })
+    expect(alphaRow).toHaveTextContent('$10')
+    expect(alphaRow.dataset.tooltipHtml).toContain('class="tooltip-heading">2020')
+    expect(alphaRow.dataset.tooltipHtml).toContain('Alpha: $10')
+    expect(alphaRow.dataset.tooltipId).toContain('cdc-open-viz-tooltip-')
+    expect(container.querySelector('.bar-chart-race__tooltip')).not.toBeInTheDocument()
+  })
+
+  it('normalizes authored series axis names before applying value formatting', () => {
+    const formatNumber = vi.fn((value, _axis, _abbreviated, prefix = '', suffix = '') => `${prefix}${value}${suffix}`)
+    const { container } = renderRace(data, { formatNumber })
+
+    expect(container.querySelector('[data-category="Alpha"] .bar-chart-race__value')).toHaveTextContent('$10')
+    expect(formatNumber).toHaveBeenCalledWith(10, 'left', false, '$', undefined, 0)
+  })
+
+  it('clears playback timers when unmounted', () => {
+    const clearIntervalSpy = vi.spyOn(window, 'clearInterval')
+    const view = renderRace()
+    fireEvent.click(screen.getByRole('button', { name: 'Play' }))
+    view.unmount()
+    expect(clearIntervalSpy).toHaveBeenCalled()
+  })
+
+  it('resets to the first paused frame when visible data changes', () => {
+    const context = getRaceContext()
+    const race = getBarRaceEligibility(context.config, data)
+    const view = render(
+      <ConfigContext.Provider value={context}>
+        <BarChartRace parentWidth={700} race={race} />
+      </ConfigContext.Provider>
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Play' }))
+    act(() => vi.advanceTimersByTime(500))
+    expect(view.container.querySelector('.bar-chart-race__frame')).toHaveTextContent('2021')
+
+    const nextRows = [...data, { Year: '2022', Place: 'Alpha', Value: 50 }, { Year: '2022', Place: 'Beta', Value: 45 }]
+    view.rerender(
+      <ConfigContext.Provider value={{ ...context, transformedData: nextRows }}>
+        <BarChartRace parentWidth={700} race={getBarRaceEligibility(context.config, nextRows)} />
+      </ConfigContext.Provider>
+    )
+
+    expect(view.container.querySelector('.bar-chart-race__frame')).toHaveTextContent('2020')
+    expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument()
+  })
+})