@cdc/chart 4.26.4 → 4.26.6

package/src/components/SmallMultiples/SmallMultiples.tsx

@@ -1,8 +1,9 @@
-import React, { useContext, useEffect, useRef, useState, useMemo, useCallback } from 'react'
+import React, { useContext, useRef, useState, useMemo, useCallback, useLayoutEffect } from 'react'
 import SmallMultipleTile from './SmallMultipleTile'
 import ConfigContext from '../../ConfigContext'
 import useReduceData from '../../hooks/useReduceData'
 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 './SmallMultiples.css'
@@ -11,6 +12,8 @@ import { ChartConfig } from '../../types/ChartConfig'
 interface SmallMultiplesProps {
   config: ChartConfig
   data: object[]
+  yAxisDomainData?: object[]
+  hasBoundarySuppression?: boolean
   svgRef?: React.RefObject<SVGAElement>
   parentWidth?: number
   parentHeight?: number
@@ -33,12 +36,21 @@ type TileHeaderRows = Array<Array<HTMLDivElement>>
 
 type TileHeaderEntries = Array<[string, HTMLDivElement]>
 
-const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, parentWidth, parentHeight }) => {
+const SmallMultiples: React.FC<SmallMultiplesProps> = ({
+  config,
+  data,
+  yAxisDomainData,
+  hasBoundarySuppression = false,
+  svgRef,
+  parentWidth,
+  parentHeight
+}) => {
   const { currentViewport, colorScale, parentRef } = useContext(ConfigContext)
   const { mode, tileColumn, tilesPerRowDesktop, tilesPerRowMobile } = config.smallMultiples || {}
 
   const isMobile = isMobileSmallMultiplesViewport(currentViewport)
   const tilesPerRow = isMobile ? tilesPerRowMobile || 1 : tilesPerRowDesktop || 3
+  const dataForSharedYAxis = Array.isArray(yAxisDomainData) && yAxisDomainData.length > 0 ? yAxisDomainData : data
 
   // Figure out what objects to iterate over based on mode - memoized to prevent recalculation
   const tileItems = useMemo<Array<TileItem>>(() => {
@@ -79,6 +91,22 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     config.smallMultiples?.tileTitles
   ])
 
+  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
+            }))
+        : tileItems,
+    [mode, dataForSharedYAxis, tileColumn, tileItems]
+  )
+
   // Calculate the grid styling based on tiles per row
   const gridGap = isMobile ? '1rem' : '2rem'
   const gridStyle = {
@@ -96,8 +124,8 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
 
   // Create combined data and config for consistent Y-axis calculation
   const combinedDataForYAxis = useMemo(
-    () => createCombinedDataForYAxis(config, data, tileItems),
-    [config, data, tileItems]
+    () => createCombinedDataForYAxis(config, dataForSharedYAxis, sharedYAxisTileItems),
+    [config, dataForSharedYAxis, sharedYAxisTileItems]
   )
 
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(
@@ -105,14 +133,13 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     combinedDataForYAxis.data
   )
 
-  const inlineLabel = config.yAxis?.inlineLabel
-  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
-  const needsYAxisAutoPadding = inlineLabel && !inlineLabelHasNoSpace
+  const usesSpacedInlineLabel = hasSpacedInlineLabel(config)
 
-  const { min, max } = useScales({
+  const { min, max, yTickValues } = useScales({
     config: combinedDataForYAxis.config,
     data: combinedDataForYAxis.data,
     tableData: combinedDataForYAxis.data,
+    hasBoundarySuppression,
     minValue,
     maxValue,
     existPositiveValue,
@@ -120,7 +147,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     xAxisDataMapped: [],
     xMax: parentWidth,
     yMax: parentHeight,
-    needsYAxisAutoPadding,
+    hasSpacedInlineLabel: usesSpacedInlineLabel,
     currentViewport
   })
 
@@ -130,8 +157,8 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     if (typeof min !== 'number' || typeof max !== 'number') return null
     if (combinedDataForYAxis.data.length === 0) return null
 
-    return { min, max }
-  }, [config.smallMultiples?.independentYAxis, min, max, combinedDataForYAxis.data.length])
+    return { min, max, tickValues: yTickValues }
+  }, [config.smallMultiples?.independentYAxis, min, max, yTickValues, combinedDataForYAxis.data.length])
 
   const numberOfRows = useMemo(() => Math.ceil(tileItems.length / tilesPerRow), [tileItems.length, tilesPerRow])
 
@@ -168,7 +195,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
   )
 
   // Align tile header heights per row
-  useEffect(() => {
+  useLayoutEffect(() => {
     const headerEntries = Object.entries(headerRefs.current).filter(([_, ref]) => ref) as TileHeaderEntries
     if (headerEntries.length === 0) return
 
@@ -209,7 +236,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
   }, [tileItems, tilesPerRow])
 
   // Calculate container height from measured tile heights
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!parentRef.current) return
 
     const measuredHeights = Object.values(tileHeights)
@@ -223,14 +250,21 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     const totalHeight = numberOfRows * maxTileHeight + totalGapsHeight
 
     parentRef.current.style.height = `${totalHeight}px`
-  }, [tileHeights, numberOfRows, isMobile, parentRef, tilesPerRow])
+  }, [tileHeights, numberOfRows, isMobile])
 
   if (tileItems.length === 0) {
     return null
   }
 
+  const hasTopYAxisTitle =
+    config.yAxis?.titlePlacement === 'top' && !config.hideYAxisLabel && Boolean(config.runtime?.yAxis?.label)
+
   return (
-    <div className='small-multiples-container'>
+    <div
+      className={`small-multiples-container${
+        hasTopYAxisTitle ? ' small-multiples-container--with-top-y-axis-title' : ''
+      }`}
+    >
       <div className='small-multiples-grid' style={gridStyle}>
         {tileItems.map((item, index) => {
           const customColorScale = createTileColorScale(item, config, colorScale, index, tileItems.length)
@@ -251,6 +285,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
               parentHeight={parentHeight}
               globalYAxisMax={globalYAxisValues?.max}
               globalYAxisMin={globalYAxisValues?.min}
+              globalYAxisTickValues={globalYAxisValues?.tickValues}
               isFirstInRow={index % tilesPerRow === 0}
               onHeightChange={handleTileHeightChange}
               onChartRef={ref => {

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

@@ -0,0 +1,152 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../../ConfigContext'
+import SmallMultipleTile from '../SmallMultipleTile'
+import { createMockChartContext, createMockConfig } from '../../LinearChart/tests/mockConfigContext'
+
+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.mock('@visx/responsive/lib/components/ParentSize', () => ({
+  default: ({ children }) => children({ width: 200, height: 300 })
+}))
+
+vi.mock('../../LinearChart', async () => {
+  const React = await vi.importActual<typeof import('react')>('react')
+  const { default: ConfigContext } = await vi.importActual<any>('../../../ConfigContext')
+
+  const MockLinearChart = () => {
+    const { config } = React.useContext(ConfigContext)
+    linearChartConfigs.push(config)
+    return <div data-testid='mock-linear-chart' />
+  }
+
+  return {
+    default: MockLinearChart
+  }
+})
+
+describe('SmallMultipleTile', () => {
+  beforeEach(() => {
+    linearChartConfigs.length = 0
+  })
+
+  it('renders the top y-axis title below the tile title on the first tile in a row and sizes it from tile width', () => {
+    const config = createMockConfig({
+      smallMultiples: {
+        mode: 'by-series',
+        tilesPerRowDesktop: 3,
+        tilesPerRowMobile: 1
+      },
+      series: [{ dataKey: 'Value', type: 'Line' }] as any,
+      runtime: {
+        ...createMockConfig().runtime,
+        series: [{ dataKey: 'Value', type: 'Line' }] as any,
+        seriesKeys: ['Value'],
+        seriesLabels: { Value: 'Value' },
+        seriesLabelsAll: ['Value']
+      } as any
+    })
+
+    const context = createMockChartContext(config, {
+      vizViewport: 'lg'
+    } as any)
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <SmallMultipleTile mode='by-series' config={config} data={[]} tileKey='Value' seriesKey='Value' isFirstInRow />
+      </ConfigContext.Provider>
+    )
+
+    const header = container.querySelector('.tile-header')
+    const title = screen.getByText('Value')
+    const topLabel = container.querySelector('.y-axis-top-title')
+
+    expect(header).toBeTruthy()
+    expect(title).toBeTruthy()
+    expect(topLabel).toBeTruthy()
+    expect(topLabel).toHaveTextContent('Y-Axis')
+    expect(topLabel).toHaveStyle({ fontSize: '14px' })
+    expect(header?.firstElementChild).toBe(title)
+    expect(header?.lastElementChild).toBe(topLabel)
+  })
+
+  it('does not render the top y-axis title on non-leading tiles in a row', () => {
+    const config = createMockConfig({
+      smallMultiples: {
+        mode: 'by-series',
+        tilesPerRowDesktop: 3,
+        tilesPerRowMobile: 1
+      },
+      series: [{ dataKey: 'Value', type: 'Line' }] as any,
+      runtime: {
+        ...createMockConfig().runtime,
+        series: [{ dataKey: 'Value', type: 'Line' }] as any,
+        seriesKeys: ['Value'],
+        seriesLabels: { Value: 'Value' },
+        seriesLabelsAll: ['Value']
+      } as any
+    })
+
+    const context = createMockChartContext(config, {
+      vizViewport: 'lg'
+    } as any)
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <SmallMultipleTile
+          mode='by-series'
+          config={config}
+          data={[]}
+          tileKey='Value'
+          seriesKey='Value'
+          isFirstInRow={false}
+        />
+      </ConfigContext.Provider>
+    )
+
+    expect(container.querySelector('.y-axis-top-title')).toBeFalsy()
+    expect(linearChartConfigs[0].hideYAxisLabel).toBe(false)
+  })
+
+  it('does not render the top y-axis title when the author hides the y-axis label', () => {
+    const config = createMockConfig({
+      hideYAxisLabel: true,
+      smallMultiples: {
+        mode: 'by-series',
+        tilesPerRowDesktop: 3,
+        tilesPerRowMobile: 1
+      },
+      series: [{ dataKey: 'Value', type: 'Line' }] as any,
+      runtime: {
+        ...createMockConfig().runtime,
+        series: [{ dataKey: 'Value', type: 'Line' }] as any,
+        seriesKeys: ['Value'],
+        seriesLabels: { Value: 'Value' },
+        seriesLabelsAll: ['Value']
+      } as any
+    })
+
+    const context = createMockChartContext(config, {
+      vizViewport: 'lg'
+    } as any)
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <SmallMultipleTile mode='by-series' config={config} data={[]} tileKey='Value' seriesKey='Value' isFirstInRow />
+      </ConfigContext.Provider>
+    )
+
+    expect(container.querySelector('.y-axis-top-title')).toBeFalsy()
+    expect(linearChartConfigs[0].hideYAxisLabel).toBe(true)
+  })
+})

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

@@ -0,0 +1,170 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../../ConfigContext'
+import SmallMultiples from '../SmallMultiples'
+import { createMockChartContext, createMockConfig } from '../../LinearChart/tests/mockConfigContext'
+
+const tileProps = vi.hoisted(() => [] as any[])
+const mockUseReduceData = vi.hoisted(() => vi.fn())
+const mockUseScales = vi.hoisted(() => vi.fn())
+
+vi.mock('../SmallMultipleTile', () => ({
+  default: props => {
+    tileProps.push(props)
+    return <div data-testid={`tile-${props.tileKey}`} />
+  }
+}))
+
+vi.mock('../../../hooks/useReduceData', () => ({
+  default: (...args: any[]) => mockUseReduceData(...args)
+}))
+
+vi.mock('../../../hooks/useScales', () => ({
+  default: (...args: any[]) => mockUseScales(...args)
+}))
+
+describe('SmallMultiples', () => {
+  const createSmallMultiplesConfig = () =>
+    createMockConfig({
+      smallMultiples: {
+        mode: 'by-column',
+        tileColumn: 'Sex',
+        independentYAxis: false,
+        tilesPerRowDesktop: 2,
+        tilesPerRowMobile: 1
+      },
+      series: [{ dataKey: 'Cases', type: 'Bar' }] as any,
+      runtime: {
+        ...createMockConfig().runtime,
+        series: [{ dataKey: 'Cases', type: 'Bar' }],
+        seriesKeys: ['Cases'],
+        seriesLabelsAll: ['Cases']
+      } as any
+    })
+
+  beforeEach(() => {
+    tileProps.length = 0
+    mockUseReduceData.mockReset()
+    mockUseScales.mockReset()
+    mockUseReduceData.mockReturnValue({
+      minValue: 0,
+      maxValue: 100,
+      existPositiveValue: true,
+      isAllLine: false
+    })
+    mockUseScales.mockReturnValue({
+      min: 0,
+      max: 100,
+      yTickValues: [0, 50, 100]
+    })
+  })
+
+  it('uses stable domain data for the shared Y-axis while rendering filtered tile data', () => {
+    const filteredRows = [
+      { Sex: 'Male', Year: '2019', Cases: 10 },
+      { Sex: 'Female', Year: '2019', Cases: 20 }
+    ]
+    const stableDomainRows = [
+      ...filteredRows,
+      { Sex: 'Male', Year: '2020', Cases: 100 },
+      { Sex: 'Female', Year: '2020', Cases: 80 }
+    ]
+    const config = createSmallMultiplesConfig()
+    const context = createMockChartContext(config, {
+      colorScale: vi.fn(),
+      parentRef: { current: document.createElement('div') }
+    } as any)
+
+    render(
+      <ConfigContext.Provider value={context}>
+        <SmallMultiples
+          config={config}
+          data={filteredRows}
+          yAxisDomainData={stableDomainRows}
+          parentWidth={600}
+          parentHeight={300}
+        />
+      </ConfigContext.Provider>
+    )
+
+    const expectedSharedAxisRows = [
+      { Sex: 'Female', Year: '2019', Cases: 20 },
+      { Sex: 'Female', Year: '2020', Cases: 80 },
+      { Sex: 'Male', Year: '2019', Cases: 10 },
+      { Sex: 'Male', Year: '2020', Cases: 100 }
+    ]
+
+    expect(mockUseReduceData.mock.calls[0][1]).toEqual(expectedSharedAxisRows)
+    expect(mockUseScales.mock.calls[0][0].data).toEqual(expectedSharedAxisRows)
+    expect(mockUseScales.mock.calls[0][0].hasBoundarySuppression).toBe(false)
+    expect(tileProps).toHaveLength(2)
+    expect(tileProps[0].data).toBe(filteredRows)
+    expect(tileProps[0].globalYAxisMax).toBe(100)
+    expect(tileProps[0].globalYAxisTickValues).toEqual([0, 50, 100])
+  })
+
+  it('includes filtered-out tile values when calculating a stable shared Y-axis', () => {
+    const filteredRows = [{ Sex: 'Male', Year: '2019', Cases: 10 }]
+    const stableDomainRows = [...filteredRows, { Sex: 'Female', Year: '2019', Cases: 200 }]
+    const config = createSmallMultiplesConfig()
+    const context = createMockChartContext(config, {
+      colorScale: vi.fn(),
+      parentRef: { current: document.createElement('div') }
+    } as any)
+
+    render(
+      <ConfigContext.Provider value={context}>
+        <SmallMultiples
+          config={config}
+          data={filteredRows}
+          yAxisDomainData={stableDomainRows}
+          parentWidth={600}
+          parentHeight={300}
+        />
+      </ConfigContext.Provider>
+    )
+
+    expect(mockUseReduceData.mock.calls[0][1]).toEqual([
+      { Sex: 'Female', Year: '2019', Cases: 200 },
+      { Sex: 'Male', Year: '2019', Cases: 10 }
+    ])
+    expect(mockUseScales.mock.calls[0][0].data).toEqual([
+      { Sex: 'Female', Year: '2019', Cases: 200 },
+      { Sex: 'Male', Year: '2019', Cases: 10 }
+    ])
+    expect(mockUseScales.mock.calls[0][0].hasBoundarySuppression).toBe(false)
+    expect(tileProps).toHaveLength(1)
+    expect(tileProps[0].tileValue).toBe('Male')
+    expect(tileProps[0].data).toBe(filteredRows)
+  })
+
+  it('passes hasBoundarySuppression from shared stable-domain boundary rows', () => {
+    const filteredRows = [{ Sex: 'Male', Year: '2019', Cases: 10 }]
+    const stableDomainRows = [
+      { Sex: 'Female', Year: '2018', Cases: 'ABC' },
+      { Sex: 'Male', Year: '2019', Cases: 10 }
+    ]
+    const config = createSmallMultiplesConfig()
+    config.preliminaryData = [{ type: 'suppression', style: 'Dashed Small', column: '', value: 'ABC' }] as any
+    const context = createMockChartContext(config, {
+      colorScale: vi.fn(),
+      parentRef: { current: document.createElement('div') }
+    } as any)
+
+    render(
+      <ConfigContext.Provider value={context}>
+        <SmallMultiples
+          config={config}
+          data={filteredRows}
+          yAxisDomainData={stableDomainRows as any}
+          hasBoundarySuppression={true}
+          parentWidth={600}
+          parentHeight={300}
+        />
+      </ConfigContext.Provider>
+    )
+
+    expect(mockUseScales.mock.calls[0][0].hasBoundarySuppression).toBe(true)
+  })
+})

package/src/components/Sparkline/components/SparkLine.tsx

@@ -28,6 +28,9 @@ const SparkLine: React.FC<SparkLineProps> = props => {
     colorScale,
     handleChartAriaLabels
   } = useContext(ConfigContext)
+
+  const a11y = handleChartAriaLabels(config)
+
   let width = Number(parentWidth)
   const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
 
@@ -109,15 +112,7 @@ const SparkLine: React.FC<SparkLineProps> = props => {
 
   return (
     <ErrorBoundary component='SparkLine'>
-      <svg
-        role='img'
-        aria-label={handleChartAriaLabels(config)}
-        width={parentWidth}
-        height={100}
-        className={'sparkline'}
-        tabIndex={0}
-      >
-        <title>{`Spark line graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
+      <svg role='img' aria-label={a11y} width={parentWidth} height={100} className={'sparkline'} tabIndex={0}>
         {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
           : config.runtime.seriesKeys.map((seriesKey, index) => (

package/src/components/WarmingStripes/WarmingStripesGradientLegend.css

@@ -1,4 +1,5 @@
 .warming-stripes-gradient-legend {
+  color: var(--baseColor);
   margin: 1rem 0;
   width: 100%;
 }
@@ -27,7 +28,6 @@
 }
 
 .warming-stripes-gradient-legend__series-label {
-  color: #333;
   font-size: 14px;
   font-weight: 500;
   margin-top: 0.5rem;

package/src/components/WarmingStripes/WarmingStripesGradientLegend.tsx

@@ -84,12 +84,12 @@ const WarmingStripesGradientLegend = () => {
           <rect x='1' y='1' width='calc(100% - 2px)' height='23' fill={`url(#${uniqueId})`} />
 
           {/* Min label */}
-          <text x='0' y='40' fontSize='14' textAnchor='start' fill='#333'>
+          <text x='0' y='40' fontSize='14' textAnchor='start' fill='currentColor'>
             {formatNumber(minValue, 'left')}
           </text>
 
           {/* Max label */}
-          <text x='100%' y='40' fontSize='14' textAnchor='end' fill='#333'>
+          <text x='100%' y='40' fontSize='14' textAnchor='end' fill='currentColor'>
             {formatNumber(maxValue, 'left')}
           </text>
         </svg>

package/src/data/initial-state.js

@@ -75,8 +75,10 @@ const createInitialState = () => {
       rightAxisTickColor: '#1c1d1f',
       numTicks: 4,
       axisPadding: 0,
+      titlePlacement: 'top',
       scalePadding: 10,
       tickRotation: 0,
+      autoMaxStrategy: 'clean-top-tick',
       anchors: [],
       shoMissingDataLabel: true,
       showMissingDataLine: true,
@@ -144,6 +146,7 @@ const createInitialState = () => {
       sortByRecentDate: false,
       brushActive: false,
       brushDefaultRecentDateCount: undefined,
+      brushDynamicYAxis: false,
       viewportNumTicks: {
         xs: 4,
         xxs: 4
@@ -159,6 +162,8 @@ const createInitialState = () => {
       downloadUrlLabel: '',
       showDataTableLink: true,
       showDownloadLinkBelow: true,
+      search: false,
+      searchPlaceholder: '',
       indexLabel: '',
       download: false,
       showVertical: true,
@@ -306,6 +311,13 @@ const createInitialState = () => {
       leftLabel: '',
       rightLabel: ''
     },
+    heatmap: {
+      cellPadding: 1,
+      rowLabelGap: 32,
+      columnLabelGap: 56,
+      xAxisPosition: 'top',
+      showCellValues: false
+    },
     area: {
       isStacked: false
     },

package/src/helpers/axisLabelFontSize.ts

@@ -0,0 +1,8 @@
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
+import { ViewportSize } from '../types/ChartConfig'
+
+export const AXIS_LABEL_FONT_SIZE = 18
+export const AXIS_LABEL_FONT_SIZE_SMALL = 14
+
+export const getAxisLabelFontSize = (vizViewport: ViewportSize) =>
+  isMobileFontViewport(vizViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE

package/src/helpers/bumpChartTooltip.ts

@@ -0,0 +1,54 @@
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { buildTooltipListHtml, getTooltipSeriesMarker } from './tooltipHelpers'
+import { type ChartConfig } from '../types/ChartConfig'
+import { type ColorScale } from '../types/ChartContext'
+
+type TooltipDateHelpers = {
+  formatDate: (date: Date) => string
+  formatTooltipsDate: (date: Date) => string
+  parseDate: (dateString: string, showError?: boolean) => Date
+}
+
+type BumpTooltipParams = {
+  config: ChartConfig
+  colorScale?: ColorScale
+  dataRow: Record<string, any>
+  series: { dataKey: string; name?: string }
+  helpers: TooltipDateHelpers
+}
+
+const formatXAxisValue = (
+  rawValue: unknown,
+  config: ChartConfig,
+  { formatDate, formatTooltipsDate, parseDate }: TooltipDateHelpers
+) => {
+  if (!isDateScale(config.xAxis) || rawValue === undefined || rawValue === null || rawValue === '') {
+    return rawValue
+  }
+
+  const parsedDate = parseDate(String(rawValue), false)
+  return config.tooltips.dateDisplayFormat ? formatTooltipsDate(parsedDate) : formatDate(parsedDate)
+}
+
+export const buildBumpChartTooltipHtml = ({ config, colorScale, dataRow, series, helpers }: BumpTooltipParams) => {
+  const formattedXAxisValue = formatXAxisValue(dataRow[config.xAxis.dataKey], config, helpers)
+  const xAxisLabel = config.runtime?.xAxis?.label || config.xAxis.dataKey
+  const heading = `${xAxisLabel ? `${xAxisLabel}: ` : ''}${formattedXAxisValue ?? ''}`
+
+  const seriesName = series.name || config.runtime?.seriesLabels?.[series.dataKey] || series.dataKey
+  const marker = getTooltipSeriesMarker(config, colorScale, series.dataKey)
+  const bodyRows = [
+    {
+      text: `${seriesName}: ${dataRow[series.dataKey]}`,
+      markerColor: marker?.markerColor,
+      markerShape: marker?.markerShape
+    },
+    ...Object.values(config.columns || {})
+      .filter(column => column.tooltips && column.name !== config.xAxis.dataKey && column.name !== series.dataKey)
+      .map(column => ({
+        text: `${column.label || column.name}: ${dataRow[column.name]}`
+      }))
+  ]
+
+  return buildTooltipListHtml({ heading, bodyRows })
+}