@cdc/chart 4.26.7 → 4.26.10

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()
+  })
+})

package/src/components/BarChartRace/BarChartRace.tsx

@@ -0,0 +1,230 @@
+import { useContext, useEffect, useState } from 'react'
+import { animated, useTransition } from '@react-spring/web'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import PlaybackButton from '@cdc/core/components/PlaybackButton'
+import ConfigContext from '../../ConfigContext'
+import { findColumnConfigByName, getSeriesColumnFormattingParams } from '../../helpers/seriesColumnSettings'
+import { buildSeriesTooltipListHtml } from '../../helpers/tooltipHelpers'
+import { clampRaceSecondsPerFrame } from '../raceTiming'
+import usePrefersReducedMotion from '../../hooks/usePrefersReducedMotion'
+import { type BarRaceEligibility } from './helpers'
+import './bar-chart-race.css'
+
+const AXIS_LABEL_ROW_HEIGHT = 48
+const BELOW_BAR_LABEL_ROW_HEIGHT = 64
+
+type Props = {
+  parentWidth: number
+  race: BarRaceEligibility
+}
+
+const BarChartRace = ({ parentWidth, race }: Props) => {
+  const { colorScale, config, formatNumber, setRaceTiming, transformedData = [] } = useContext(ConfigContext)
+  const [frameIndex, setFrameIndex] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [hasStarted, setHasStarted] = useState(false)
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const secondsPerFrame = clampRaceSecondsPerFrame(config.barRace?.secondsPerFrame)
+  const totalSeconds = (race.frames.length - 1) * secondsPerFrame
+  const series = config.series[0]
+  const labelPlacement = config.yAxis?.labelPlacement || 'On Date/Category Axis'
+  const labelsBelowBar = labelPlacement === 'Below Bar'
+  const rowHeight = labelsBelowBar ? BELOW_BAR_LABEL_ROW_HEIGHT : AXIS_LABEL_ROW_HEIGHT
+  const tooltipId = `cdc-open-viz-tooltip-${config.runtime?.uniqueId || 'bar-race'}-race`
+  const frameSignature = JSON.stringify({
+    frameKey: config.xAxis?.dataKey,
+    series: config.series.map(item => [item.dataKey, item.dynamicCategory]),
+    rows: transformedData.map(row => [
+      row?.[config.xAxis?.dataKey],
+      ...config.series.flatMap(item => [row?.[item.dynamicCategory], row?.[item.dataKey]])
+    ])
+  })
+
+  useEffect(() => {
+    setFrameIndex(0)
+    setIsPlaying(false)
+    setHasStarted(false)
+    setRaceTiming?.(null)
+  }, [frameSignature])
+
+  useEffect(() => {
+    if (!isPlaying) return
+    if (secondsPerFrame === 0) {
+      setFrameIndex(Math.max(0, race.frames.length - 1))
+      setIsPlaying(false)
+      return
+    }
+    const timer = window.setInterval(() => {
+      setFrameIndex(currentFrame => {
+        if (currentFrame >= race.frames.length - 1) {
+          setIsPlaying(false)
+          return currentFrame
+        }
+        const nextFrame = currentFrame + 1
+        if (nextFrame >= race.frames.length - 1) setIsPlaying(false)
+        return nextFrame
+      })
+    }, secondsPerFrame * 1000)
+    return () => window.clearInterval(timer)
+  }, [isPlaying, race.frames.length, secondsPerFrame])
+
+  const frame = race.frames[Math.min(frameIndex, Math.max(0, race.frames.length - 1))]
+  const getCategoryColor = (seriesKey: string) => {
+    const runtimeCategory = config.runtime?.seriesKeys?.find(value => String(value).trim() === seriesKey) ?? seriesKey
+    return colorScale?.(runtimeCategory) || '#005ea8'
+  }
+  const formatValue = (item: (typeof frame.items)[number]) => {
+    const itemSeries = config.series.find(candidate => candidate.dataKey === item.dataKey) ?? series
+    const columnConfig = findColumnConfigByName(config.columns, item.dataKey)?.columnConfig
+    const columnFormatting = getSeriesColumnFormattingParams(columnConfig)
+    return (
+      formatNumber?.(
+        item.value,
+        String(itemSeries.axis || 'left').toLowerCase(),
+        false,
+        columnFormatting?.addColPrefix,
+        columnFormatting?.addColSuffix,
+        columnFormatting?.addColRoundTo
+      ) ?? String(item.value)
+    )
+  }
+  const getTooltipHtml = (item: (typeof frame.items)[number]) =>
+    buildSeriesTooltipListHtml({
+      config,
+      colorScale,
+      heading: frame.key,
+      seriesKey: item.seriesKey,
+      seriesText: `${item.category}: ${formatValue(item)}`
+    })
+  const barAreaWidth = Math.max(0, (labelsBelowBar ? parentWidth : parentWidth * 0.72) - 120)
+  const displayNumbersOnBar = Boolean(config.yAxis?.displayNumbersOnBar)
+  const isAtEnd = frameIndex === race.frames.length - 1
+  const frameAxisLabel = config.xAxis?.label || config.xAxis?.dataKey || 'Date/Category'
+
+  useEffect(() => {
+    if (!hasStarted || !frame?.key) return
+    setRaceTiming?.({
+      elapsedSeconds: frameIndex * secondsPerFrame,
+      frameKey: frame.key,
+      isPlaying,
+      totalSeconds
+    })
+  }, [frame?.key, frameIndex, hasStarted, isPlaying, secondsPerFrame, totalSeconds])
+
+  const transitions = useTransition(frame?.items ?? [], {
+    keys: item => item.category,
+    from: { opacity: 0, top: (frame?.items.length ?? 0) * rowHeight, width: 0 },
+    enter: item => ({
+      opacity: 1,
+      top: item.rank * rowHeight,
+      width: race.globalMax > 0 ? (item.value / race.globalMax) * barAreaWidth : 0
+    }),
+    update: item => ({
+      opacity: 1,
+      top: item.rank * rowHeight,
+      width: race.globalMax > 0 ? (item.value / race.globalMax) * barAreaWidth : 0
+    }),
+    leave: { opacity: 0, width: 0 },
+    immediate: prefersReducedMotion,
+    config: { tension: 170, friction: 26 }
+  })
+
+  if (!race.eligible || !frame) return null
+
+  const handlePlayback = () => {
+    setHasStarted(true)
+    if (isAtEnd) {
+      setFrameIndex(0)
+      setIsPlaying(true)
+      return
+    }
+    setIsPlaying(current => !current)
+  }
+
+  return (
+    <section
+      className={`bar-chart-race bar-chart-race--labels-${labelsBelowBar ? 'below-bar' : 'on-axis'}`}
+      aria-label={`Bar chart race for ${frame.key}`}
+    >
+      <div className='bar-chart-race__header'>
+        <PlaybackButton
+          isAtEnd={isAtEnd}
+          isPlaying={isPlaying}
+          className='bar-chart-race__playback'
+          onClick={handlePlayback}
+        />
+        <strong className='bar-chart-race__frame' aria-live='polite'>
+          {frame.key}
+        </strong>
+      </div>
+      <div className='bar-chart-race__plot' style={{ height: `${frame.items.length * rowHeight}px` }}>
+        {transitions((style, item) => {
+          const valueLabel = formatValue(item)
+          const barWidth = race.globalMax > 0 ? (item.value / race.globalMax) * barAreaWidth : 0
+          const measuredLabelWidth =
+            typeof CanvasRenderingContext2D === 'undefined'
+              ? undefined
+              : getTextWidth(valueLabel, 'normal 16px sans-serif')
+          const labelWidth = measuredLabelWidth || valueLabel.length * 8
+          const valueFitsInside = displayNumbersOnBar && labelWidth < barWidth - 5
+          const barColor = getCategoryColor(item.seriesKey)
+          const baseLabelColor = APP_FONT_COLOR || '#1c1d1f'
+          const insideLabelColor = getContrastColor(baseLabelColor, barColor) || baseLabelColor
+
+          return (
+            <animated.div
+              className='bar-chart-race__row'
+              data-category={item.category}
+              data-tooltip-id={tooltipId}
+              data-tooltip-html={getTooltipHtml(item)}
+              tabIndex={0}
+              style={{ opacity: style.opacity, top: style.top }}
+            >
+              <span className='bar-chart-race__category'>{item.category}</span>
+              <div className='bar-chart-race__bar-area'>
+                <animated.div
+                  className={`bar-chart-race__bar${valueFitsInside ? ' bar-chart-race__bar--value-inside' : ''}`}
+                  style={{ width: style.width, backgroundColor: barColor }}
+                >
+                  <span
+                    className={`bar-chart-race__value bar-chart-race__value--${valueFitsInside ? 'inside' : 'after'}`}
+                    style={valueFitsInside ? { color: insideLabelColor } : undefined}
+                  >
+                    {valueLabel}
+                  </span>
+                </animated.div>
+              </div>
+            </animated.div>
+          )
+        })}
+      </div>
+      <ReactTooltip
+        id={tooltipId}
+        variant='light'
+        arrowColor='rgba(0,0,0,0)'
+        className='tooltip'
+        style={{ background: `rgba(255,255,255, ${(config.tooltips?.opacity ?? 90) / 100})`, color: 'black' }}
+      />
+      <div className='bar-chart-race__frame-axis' role='group' aria-label={`${frameAxisLabel} axis`}>
+        <div className='bar-chart-race__frame-axis-ticks'>
+          {race.frames.map((raceFrame, index) => (
+            <span
+              className={`bar-chart-race__frame-axis-tick${index === frameIndex ? ' is-active' : ''}`}
+              aria-current={index === frameIndex ? 'step' : undefined}
+              key={raceFrame.key}
+            >
+              <span className='bar-chart-race__frame-axis-mark' aria-hidden='true' />
+              <span className='bar-chart-race__frame-axis-value'>{raceFrame.key}</span>
+            </span>
+          ))}
+        </div>
+        <span className='bar-chart-race__frame-axis-label'>{frameAxisLabel}</span>
+      </div>
+    </section>
+  )
+}
+
+export default BarChartRace

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

@@ -0,0 +1,61 @@
+import React, { forwardRef, useContext, useEffect } from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import { createMockChartContext, createMockConfig } from '../LinearChart/tests/mockConfigContext'
+import BarChartRaceFallback from './BarChartRaceFallback'
+
+vi.mock('../LinearChart', () => ({
+  default: forwardRef<SVGAElement>((_props, ref) => {
+    const { config, updateConfig } = useContext(ConfigContext)
+
+    useEffect(() => {
+      updateConfig?.({ ...config, isLollipopChart: false })
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+      <svg
+        ref={ref}
+        data-testid='fallback-chart'
+        data-is-lollipop={String(config.isLollipopChart)}
+        data-orientation={config.orientation}
+        data-style={config.barStyle}
+        data-subtype={config.visualizationSubType}
+      />
+    )
+  })
+}))
+
+describe('BarChartRaceFallback', () => {
+  it('renders a regular horizontal projection without persisting its normalization', () => {
+    const baseConfig = createMockConfig()
+    const updateConfig = vi.fn()
+    const config = createMockConfig({
+      visualizationType: 'Bar',
+      visualizationSubType: 'racing',
+      orientation: 'vertical',
+      barStyle: 'rounded',
+      isLollipopChart: true,
+      xAxis: { ...baseConfig.xAxis, anchors: ['x-axis-anchor'] },
+      yAxis: { ...baseConfig.yAxis, anchors: ['y-axis-anchor'] }
+    })
+
+    render(
+      <ConfigContext.Provider value={createMockChartContext(config, { updateConfig })}>
+        <BarChartRaceFallback parentWidth={700} parentHeight={400} />
+      </ConfigContext.Provider>
+    )
+
+    expect(screen.getByTestId('fallback-chart')).toHaveAttribute('data-subtype', 'regular')
+    expect(screen.getByTestId('fallback-chart')).toHaveAttribute('data-orientation', 'horizontal')
+    expect(screen.getByTestId('fallback-chart')).toHaveAttribute('data-style', 'flat')
+    expect(screen.getByTestId('fallback-chart')).toHaveAttribute('data-is-lollipop', 'false')
+    expect(updateConfig).not.toHaveBeenCalled()
+    expect(config).toMatchObject({
+      barStyle: 'rounded',
+      isLollipopChart: true,
+      orientation: 'vertical',
+      visualizationSubType: 'racing'
+    })
+  })
+})

package/src/components/BarChartRace/BarChartRaceFallback.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, useContext } from 'react'
+import ConfigContext from '../../ConfigContext'
+import LinearChart from '../LinearChart'
+
+type Props = {
+  parentHeight: number
+  parentWidth: number
+}
+
+const BarChartRaceFallback = forwardRef<SVGAElement, Props>(({ parentHeight, parentWidth }, ref) => {
+  const context = useContext(ConfigContext)
+  const enteringFromVertical = context.config.orientation !== 'horizontal'
+  const fallbackConfig = {
+    ...context.config,
+    visualizationSubType: 'regular',
+    orientation: 'horizontal' as const,
+    isLollipopChart: false,
+    barStyle: 'flat' as const,
+    xAxis: enteringFromVertical
+      ? {
+          ...context.config.xAxis,
+          anchors: context.config.yAxis?.anchors ?? [],
+          hideAxis: true,
+          hideTicks: true
+        }
+      : context.config.xAxis,
+    yAxis: enteringFromVertical
+      ? {
+          ...context.config.yAxis,
+          anchors: context.config.xAxis?.anchors ?? [],
+          hideAxis: false,
+          hideTicks: false,
+          labelPlacement: context.config.yAxis?.labelPlacement || 'On Date/Category Axis'
+        }
+      : context.config.yAxis,
+    runtime: { ...context.config.runtime, horizontal: true }
+  }
+
+  return (
+    <ConfigContext.Provider value={{ ...context, config: fallbackConfig, updateConfig: () => {} }}>
+      <LinearChart ref={ref} parentWidth={parentWidth} parentHeight={parentHeight} />
+    </ConfigContext.Provider>
+  )
+})
+
+BarChartRaceFallback.displayName = 'BarChartRaceFallback'
+
+export default BarChartRaceFallback