@cdc/chart 4.26.3 → 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,13 +28,16 @@ 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)
 
   const margin = { top: 5, right: 20, bottom: 10, left: 10 }
   const height = Number(parentHeight)
 
-  const xMax = width - config.runtime.yAxis.size
+  const xMax = width - 50
   const yMax = height - margin.top - 20
 
   const getXAxisData = d =>
@@ -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/WarmingStripes.tsx

@@ -15,6 +15,7 @@ type WarmingStripesProps = {
   yScale: any
   xMax: number
   yMax: number
+  yAxisWidth: number
   synchronizedXValue?: any
   showTooltip: (args: any) => void
   handleTooltipMouseOff: () => void
@@ -23,6 +24,7 @@ type WarmingStripesProps = {
 const WarmingStripes = ({
   xMax,
   yMax,
+  yAxisWidth,
   synchronizedXValue,
   showTooltip,
   handleTooltipMouseOff
@@ -119,7 +121,7 @@ const WarmingStripes = ({
         [valueKey, formattedValue, 'left']
       ]
 
-      const dataXPosition = index * stripeWidth + stripeWidth / 2 + Number(config.yAxis.size)
+      const dataXPosition = index * stripeWidth + stripeWidth / 2 + yAxisWidth
       const dataYPosition = mouseY ?? yMax / 2
 
       showTooltip({
@@ -132,7 +134,7 @@ const WarmingStripes = ({
         }
       })
     },
-    [valueKey, xAxisDataKey, stripeWidth, config.yAxis.size, yMax, formatNumber, showTooltip]
+    [valueKey, xAxisDataKey, stripeWidth, yAxisWidth, yMax, formatNumber, showTooltip]
   )
 
   // Handle incoming synchronized tooltip from sibling small multiple tiles
@@ -156,7 +158,7 @@ const WarmingStripes = ({
   }
 
   return (
-    <Group className='warming-stripes' left={config.yAxis.size}>
+    <Group className='warming-stripes' left={yAxisWidth}>
       {displayData.map((item, index) => {
         const value = Number(item[valueKey])
         if (isNaN(value)) return null

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
@@ -156,8 +158,11 @@ const createInitialState = () => {
       height: '',
       caption: '',
       showDownloadUrl: false,
+      downloadUrlLabel: '',
       showDataTableLink: true,
       showDownloadLinkBelow: true,
+      search: false,
+      searchPlaceholder: '',
       indexLabel: '',
       download: false,
       showVertical: true,
@@ -305,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

@@ -0,0 +1,197 @@
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import {
+  DEFAULT_TICK_LENGTH,
+  TICK_LABEL_MARGIN_RIGHT,
+  VALUE_ON_LINE_PADDING_NO_AXIS,
+  VALUE_ON_LINE_PADDING_WITH_AXIS
+} from '../components/Axis/axis.constants'
+
+type CalculateLeftYAxisWidthProps = {
+  config: any
+  data: any[]
+  yScale: any
+  numTicks: number
+  parentWidth: number
+  tickLabelFont: string
+  axisLabelFontSize: number
+  handleLeftTickFormatting: (tick: any, index: number, ticks: any[]) => string
+  categoryLabelSpace?: number
+  horizontalYAxisLabelSpace?: number
+}
+
+const AXIS_LABEL_PADDING = 5
+const MIN_LEFT_AXIS_WIDTH = 0
+const MAX_LEFT_AXIS_WIDTH_RATIO = 0.45
+
+type TickValueProps = Omit<
+  CalculateLeftYAxisWidthProps,
+  'parentWidth' | 'tickLabelFont' | 'axisLabelFontSize' | 'handleLeftTickFormatting'
+>
+
+const getTickValues = ({ config, data, yScale, numTicks }: TickValueProps) => {
+  if (config.visualizationType === 'Forest Plot') {
+    return data.map((_, index) => index)
+  }
+
+  if (typeof yScale?.ticks === 'function') {
+    return yScale.ticks(numTicks)
+  }
+
+  if (typeof yScale?.domain === 'function') {
+    return yScale.domain()
+  }
+
+  return []
+}
+
+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
+}
+
+const measureWidestLabel = (labels: string[], tickLabelFont: string) => {
+  return labels.length ? Math.max(...labels.map(label => getTextWidth(label, tickLabelFont))) : 0
+}
+
+const clampYAxisWidth = (calculatedWidth: number, parentWidth: number) => {
+  const maxAllowedWidth = parentWidth * MAX_LEFT_AXIS_WIDTH_RATIO
+  return Math.max(MIN_LEFT_AXIS_WIDTH, Math.min(Math.ceil(calculatedWidth), maxAllowedWidth))
+}
+
+const formatMeasuredTickLabels = ({
+  tickValues,
+  handleLeftTickFormatting,
+  inlineLabel,
+  labelsAboveGridlines
+}: {
+  tickValues: any[]
+  handleLeftTickFormatting: (tick: any, index: number, ticks: any[]) => string
+  inlineLabel?: string
+  labelsAboveGridlines?: boolean
+}) => {
+  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
+
+  return tickValues.map((tick, index, ticks) => {
+    const formatted = handleLeftTickFormatting(tick, index, ticks)
+    const isLastTick = index === ticks.length - 1
+
+    if (isLastTick && inlineLabel && (labelsAboveGridlines || inlineLabelHasNoSpace)) {
+      return `${formatted}${inlineLabel}`
+    }
+
+    return String(formatted ?? '')
+  })
+}
+
+const getHorizonChartWidth = ({
+  config,
+  parentWidth,
+  tickLabelFont,
+  axisLabelFontSize
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'parentWidth' | 'tickLabelFont' | 'axisLabelFontSize'>) => {
+  const seriesKeys =
+    config.runtime?.seriesKeys && config.runtime.seriesKeys.length > 0
+      ? config.runtime.seriesKeys
+      : config.series?.map(series => series.dataKey) || []
+  const labels = seriesKeys.map(seriesKey => String(config.runtime?.seriesLabels?.[seriesKey] || seriesKey))
+  const labelWidth = config.yAxis.hideLabel ? 0 : measureWidestLabel(labels, tickLabelFont)
+  const calculatedWidth =
+    labelWidth +
+    DEFAULT_TICK_LENGTH +
+    TICK_LABEL_MARGIN_RIGHT +
+    getAxisLabelSpace(config, axisLabelFontSize) +
+    Number(config.yAxis.axisPadding || 0)
+
+  return clampYAxisWidth(calculatedWidth, parentWidth)
+}
+
+const getHorizontalAxisWidth = ({
+  config,
+  tickLabelWidth,
+  categoryLabelSpace,
+  horizontalYAxisLabelSpace
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'categoryLabelSpace' | 'horizontalYAxisLabelSpace'> & {
+  tickLabelWidth: number
+}) => {
+  const horizontalTickWidth = tickLabelWidth + DEFAULT_TICK_LENGTH + TICK_LABEL_MARGIN_RIGHT
+  return Math.max(horizontalTickWidth + horizontalYAxisLabelSpace, categoryLabelSpace + horizontalYAxisLabelSpace)
+}
+
+const getCategoricalAxisWidth = ({
+  config,
+  baseWidth,
+  tickLabelFont
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'tickLabelFont'> & {
+  baseWidth: number
+}) => {
+  if (config.yAxis.type !== 'categorical' || config.orientation !== 'vertical' || config.yAxis.hideLabel) {
+    return baseWidth
+  }
+
+  const categoryLabels = (config.yAxis.categories || []).map(category => String(category?.label || ''))
+  const categoryLabelWidth = measureWidestLabel(categoryLabels, tickLabelFont)
+
+  return Math.max(baseWidth, categoryLabelWidth + DEFAULT_TICK_LENGTH + TICK_LABEL_MARGIN_RIGHT)
+}
+
+export const calculateLeftYAxisWidth = ({
+  config,
+  data,
+  yScale,
+  numTicks,
+  parentWidth,
+  tickLabelFont,
+  axisLabelFontSize,
+  handleLeftTickFormatting,
+  categoryLabelSpace = 0,
+  horizontalYAxisLabelSpace = 0
+}: CalculateLeftYAxisWidthProps): number => {
+  if (config.visualizationType === 'Horizon Chart') {
+    return getHorizonChartWidth({ config, parentWidth, tickLabelFont, axisLabelFontSize })
+  }
+
+  const tickValues = getTickValues({ config, data, yScale, numTicks })
+  const { hideAxis, inlineLabel, labelsAboveGridlines } = config.yAxis
+  const formattedTicks = formatMeasuredTickLabels({
+    tickValues,
+    handleLeftTickFormatting,
+    inlineLabel,
+    labelsAboveGridlines
+  })
+  const tickLabelWidth = config.yAxis.hideLabel ? 0 : measureWidestLabel(formattedTicks, tickLabelFont)
+
+  const valueOnLinePadding = hideAxis
+    ? Math.abs(VALUE_ON_LINE_PADDING_NO_AXIS)
+    : Math.abs(VALUE_ON_LINE_PADDING_WITH_AXIS)
+  const tickPadding = labelsAboveGridlines ? valueOnLinePadding : TICK_LABEL_MARGIN_RIGHT + DEFAULT_TICK_LENGTH
+  const verticalAxisLabelSpace = getAxisLabelSpace(config, axisLabelFontSize)
+  const reservedTickLabelWidth = labelsAboveGridlines ? 0 : tickLabelWidth
+  const reservedTickPadding = labelsAboveGridlines || config.yAxis.hideLabel ? 0 : tickPadding
+
+  const defaultCalculatedWidth =
+    reservedTickLabelWidth + reservedTickPadding + verticalAxisLabelSpace + Number(config.yAxis.axisPadding || 0)
+
+  if (config.orientation === 'horizontal') {
+    const calculatedWidth = getHorizontalAxisWidth({
+      config,
+      tickLabelWidth,
+      categoryLabelSpace,
+      horizontalYAxisLabelSpace
+    })
+
+    return clampYAxisWidth(calculatedWidth, parentWidth)
+  }
+
+  const calculatedWidth = getCategoricalAxisWidth({
+    config,
+    baseWidth: defaultCalculatedWidth,
+    tickLabelFont
+  })
+
+  return clampYAxisWidth(calculatedWidth, parentWidth)
+}
+
+export default calculateLeftYAxisWidth

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'