@cdc/chart 4.26.4 → 4.26.5

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/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,6 +75,7 @@ const createInitialState = () => {
       rightAxisTickColor: '#1c1d1f',
       numTicks: 4,
       axisPadding: 0,
+      titlePlacement: 'top',
       scalePadding: 10,
       tickRotation: 0,
       anchors: [],
@@ -144,6 +145,7 @@ const createInitialState = () => {
       sortByRecentDate: false,
       brushActive: false,
       brushDefaultRecentDateCount: undefined,
+      brushDynamicYAxis: false,
       viewportNumTicks: {
         xs: 4,
         xxs: 4
@@ -159,6 +161,8 @@ const createInitialState = () => {
       downloadUrlLabel: '',
       showDataTableLink: true,
       showDownloadLinkBelow: true,
+      search: false,
+      searchPlaceholder: '',
       indexLabel: '',
       download: false,
       showVertical: true,
@@ -306,6 +310,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 })
+}

package/src/helpers/calculateLeftYAxisWidth.ts

@@ -45,6 +45,10 @@ const getTickValues = ({ config, data, yScale, numTicks }: TickValueProps) => {
 }
 
 const getAxisLabelSpace = (config: any, axisLabelFontSize: number) => {
+  if (config.yAxis?.titlePlacement === 'top') {
+    return 0
+  }
+
   return !config.hideYAxisLabel && config.runtime.yAxis.label ? axisLabelFontSize + AXIS_LABEL_PADDING : 0
 }
 

package/src/helpers/ensureSpecialChartAxisTypes.ts

@@ -0,0 +1,11 @@
+import { type ChartConfig } from '../types/ChartConfig'
+
+export const ensureSpecialChartAxisTypes = <T extends Pick<ChartConfig, 'visualizationType' | 'xAxis'>>(
+  config: T
+): T => {
+  if (config.visualizationType === 'Bump Chart' && config.xAxis) {
+    config.xAxis.type = 'date-time'
+  }
+
+  return config
+}

package/src/helpers/getMinMax.ts

@@ -55,9 +55,8 @@ const getMinMax = ({
   max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number.MIN_VALUE
   const { lower, upper } = config?.confidenceKeys || {}
 
-  // When brush is active, use tableData (full dataset) for min/max calculations
-  // so the y-axis shows the full range, but still use filtered data for rendering
-  const dataForMinMax = config.xAxis.brushActive && tableData && tableData.length > 0 ? tableData : data
+  const useBrushFullRange = config.xAxis.brushActive && !config.xAxis.brushDynamicYAxis
+  const dataForMinMax = useBrushFullRange && tableData && tableData.length > 0 ? tableData : data
 
   if (lower && upper && config.visualizationType === 'Bar') {
     const buffer = min < 0 ? 1.1 : 0

package/src/helpers/getYAxisAutoPadding.ts

@@ -1,4 +1,5 @@
 import { ChartConfig } from '../types/ChartConfig'
+import { YAxisAutoPaddingMode } from './getYAxisAutoPaddingMode'
 
 /**
  * Calculates the Y-axis auto padding to prevent data labels from overlapping with axis tick labels.
@@ -16,7 +17,8 @@ export const getYAxisAutoPadding = (
   handleNumTicks: number,
   maxValue: number,
   minValue: number,
-  config: ChartConfig
+  config: ChartConfig,
+  mode: Exclude<YAxisAutoPaddingMode, 'none'>
 ): number => {
   // Early returns for cases where auto padding is not needed
   if (!yScale?.ticks || config.orientation === 'horizontal' || config.yAxis?.max) {
@@ -41,13 +43,13 @@ export const getYAxisAutoPadding = (
   const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
   const nextTick = Math.max(...ticks) + tickGap
   const divideBy = minValue < 0 ? maxValue / 2 : maxValue
-  const calculatedPadding = (nextTick - maxValue) / divideBy
+  let calculatedPadding = (nextTick - maxValue) / divideBy
 
-  // if auto padding is too close to next tick, add one more ticks worth of padding
-  const newPadding =
-    calculatedPadding > MINIMUM_DISTANCE_PERCENTAGE ? calculatedPadding : calculatedPadding + tickGap / divideBy
+  if (mode === 'inline-label' && calculatedPadding <= MINIMUM_DISTANCE_PERCENTAGE) {
+    calculatedPadding += tickGap / divideBy
+  }
 
   /* sometimes even though the padding is getting to the next tick exactly,
   d3 still doesn't show the tick. we add 0.1 to ensure to tip it over the edge */
-  return newPadding * 100 + 0.1
+  return calculatedPadding * 100 + 0.1
 }

package/src/helpers/getYAxisAutoPaddingMode.ts

@@ -0,0 +1,17 @@
+import { ChartConfig } from '../types/ChartConfig'
+
+export type YAxisAutoPaddingMode = 'none' | 'inline-label' | 'top-title'
+
+export const getYAxisAutoPaddingMode = (config: ChartConfig): YAxisAutoPaddingMode => {
+  const inlineLabel = config.yAxis?.inlineLabel
+  if (inlineLabel && inlineLabel.includes(' ')) {
+    return 'inline-label'
+  }
+
+  const yAxisTitle = String(config.yAxis?.label || config.runtime?.yAxis?.label || '').trim()
+  if (config.yAxis?.titlePlacement === 'top' && yAxisTitle && !config.hideYAxisLabel) {
+    return 'top-title'
+  }
+
+  return 'none'
+}

package/src/helpers/handleChartAriaLabels.ts

@@ -1,17 +1,30 @@
-export const handleChartAriaLabels = state => {
+import type { AltTextConfig } from '@cdc/core/types/AltText'
+import { resolveAltTextDescription } from '@cdc/core/helpers/resolveAltTextDescription'
+
+const getAutoLabel = (state: { visualizationType?: string; title?: string }): string => {
+  let ariaLabel = ''
+  if (state.visualizationType) {
+    ariaLabel += `${state.visualizationType} chart`
+  }
+  if (state.title && state.visualizationType) {
+    ariaLabel += ` with the title: ${state.title}`
+  }
+  return ariaLabel
+}
+
+export const handleChartAriaLabels = (state: {
+  visualizationType?: string
+  title?: string
+  altText?: AltTextConfig
+  dataMetadata?: Record<string, string>
+}): string => {
   try {
     if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
-    let ariaLabel = ''
-
-    if (state.visualizationType) {
-      ariaLabel += `${state.visualizationType} chart`
-    }
 
-    if (state.title && state.visualizationType) {
-      ariaLabel += ` with the title: ${state.title}`
-    }
+    const title = getAutoLabel(state)
+    const description = resolveAltTextDescription(state.altText, state.dataMetadata)
 
-    return ariaLabel
+    return description ? `${title}. ${description}` : title
   } catch (e) {
     console.error('COVE: ', e.message) // eslint-disable-line
     return 'Data visualization container'

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