@cdc/chart 4.26.5 → 4.26.6

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

@@ -5,6 +5,7 @@ import LinearChart from '../../LinearChart'
 import ConfigContext from '../../../ConfigContext'
 import { createMockChartContext } from './mockConfigContext'
 import forestPlotConfig from '../../../../examples/feature/forest-plot/forest-plot.json'
+import * as suppressionHelpers from '../../../helpers/getHasBoundarySuppression'
 
 // Mock ResizeObserver
 vi.stubGlobal(
@@ -88,6 +89,35 @@ const sidePlacementYAxis = {
 }
 
 describe('LinearChart', () => {
+  describe('suppression domain data source', () => {
+    it('uses excludedData fallback for suppression detection when Y-axis domain is stable and yAxisDomainData is not provided', () => {
+      const suppressionSpy = vi.spyOn(suppressionHelpers, 'getHasBoundarySuppression').mockReturnValue(false)
+      const excludedRows = [{ Date: '2020-01-01', Cases: 'SUPP' }]
+      const tableRows = [{ Date: '2020-01-01', Cases: 12 }]
+
+      renderLinearChart(
+        {
+          visualizationType: 'Line',
+          yAxis: {
+            ...createMockChartContext().config.yAxis,
+            filterDomainBehavior: 'stable'
+          }
+        },
+        {
+          transformedData: tableRows as any,
+          tableData: tableRows as any,
+          excludedData: excludedRows as any,
+          yAxisDomainData: undefined
+        }
+      )
+
+      expect(suppressionSpy).toHaveBeenCalled()
+      expect(suppressionSpy.mock.calls[0][0].rows).toBe(excludedRows)
+
+      suppressionSpy.mockRestore()
+    })
+  })
+
   describe('rendering', () => {
     it('renders without crashing', () => {
       const { container } = renderLinearChart()

package/src/components/LinearChart.tsx

@@ -37,7 +37,10 @@ import { calcInitialHeight } from '../helpers/sizeHelpers'
 import { calculateHorizontalBarCategoryLabelWidth } from '../helpers/calculateHorizontalBarCategoryLabelWidth'
 import { calculateLeftYAxisWidth } from '../helpers/calculateLeftYAxisWidth'
 import { getAxisLabelFontSize } from '../helpers/axisLabelFontSize'
-import { getYAxisAutoPaddingMode } from '../helpers/getYAxisAutoPaddingMode'
+import { hasSpacedInlineLabel } from '../helpers/hasSpacedInlineLabel'
+import { getYAxisDomainData, getYAxisFilterDomainBehavior } from '../helpers/getYAxisDomainData'
+import { getHasBoundarySuppression } from '../helpers/getHasBoundarySuppression'
+import { getExcludedData } from '../helpers/getExcludedData'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
@@ -117,8 +120,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     legendRef,
     parseDate,
     parentRef,
+    excludedData,
     tableData,
     transformedData: data,
+    yAxisTickValues: sharedYAxisTickValues,
+    yAxisDomainData
   } = useContext(ConfigContext)
 
   // SVG accessibility: title/desc pattern
@@ -131,8 +137,28 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const { inlineLabel } = config.yAxis
 
   // HOOKS  % STATES
-  const useBrushFullRange = config.xAxis.brushActive && !config.xAxis.brushDynamicYAxis
-  const dataForMinMax = useBrushFullRange && tableData && tableData.length > 0 ? tableData : data
+  const dataForMinMax = getYAxisDomainData({
+    config,
+    data,
+    tableData,
+    fullEligibleDomainData: yAxisDomainData
+  })
+  const isStableYAxisDomain = getYAxisFilterDomainBehavior(config) === 'stable'
+  const rawEligibleYAxisDomainData = Array.isArray(config.yAxisDomainData) && config.yAxisDomainData.length > 0
+    ? getExcludedData(config, config.yAxisDomainData)
+    : isStableYAxisDomain && Array.isArray(excludedData)
+      ? excludedData
+      : tableData
+  const suppressionDomainData = getYAxisDomainData({
+    config,
+    data: tableData,
+    tableData,
+    fullEligibleDomainData: rawEligibleYAxisDomainData
+  })
+  const hasBoundarySuppression = getHasBoundarySuppression({
+    rows: suppressionDomainData,
+    config
+  })
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, dataForMinMax)
 
   const { visSupportsSmallMultiples } = useEditorPermissions()
@@ -177,7 +203,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   const isForestPlot = visualizationType === 'Forest Plot'
   const isDateTime = config.xAxis.type === 'date-time'
-  const yAxisAutoPaddingMode = getYAxisAutoPaddingMode(config)
+  const usesSpacedInlineLabel = hasSpacedInlineLabel(config)
   const tickLabelFontSize = isMobileFontViewport(vizViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
   const axisLabelFontSize = getAxisLabelFontSize(vizViewport)
   const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
@@ -255,14 +281,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     return () => observer.disconnect()
   }, [axisBottomRef.current])
 
-  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
+  const { yScaleRight, hasRightAxis, rightTickValues } = useRightAxis({ config, yMax, data: dataForMinMax })
 
   // State for computed left-axis width - shared across all linear-chart types.
   const [currentYAxisWidth, setCurrentYAxisWidth] = useState<number>(DEFAULT_LEFT_Y_AXIS_WIDTH)
   const yAxisWidth = currentYAxisWidth
 
   // Chart width calculation using the current y-axis width
-  const xMax = parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0)
+  const xMax = Math.max(0, parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0))
 
   // Stabilize brush container dimensions when brushDynamicYAxis is enabled.
   // Without this, y-axis rescaling on each brush change creates a feedback loop:
@@ -289,10 +315,13 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xScaleAnnotation,
     yScaleAnnotation,
     min,
-    max
+    max,
+    yTickValues
   } = useScales({
     data,
-    tableData,
+    tableData: dataForMinMax,
+    yAxisDomainData: dataForMinMax,
+    hasBoundarySuppression,
     config,
     minValue,
     maxValue,
@@ -301,9 +330,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xAxisDataMapped,
     yMax,
     xMax,
-    yAxisAutoPaddingMode,
+    hasSpacedInlineLabel: usesSpacedInlineLabel,
     currentViewport: vizViewport
   })
+  const effectiveYTickValues = sharedYAxisTickValues ?? yTickValues
 
   // Consolidated tick formatters
   const { handleLeftTickFormatting, handleBottomTickFormatting } = useTickFormatters({
@@ -358,6 +388,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       data,
       yScale,
       numTicks: handleNumTicks,
+      tickValues: effectiveYTickValues,
       parentWidth,
       tickLabelFont: GET_TEXT_WIDTH_FONT,
       axisLabelFontSize,
@@ -369,6 +400,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     config,
     data,
     yScale,
+    effectiveYTickValues,
     handleNumTicks,
     parentWidth,
     isHorizontal,
@@ -596,6 +628,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       <SmallMultiples
         config={config}
         data={data}
+        yAxisDomainData={dataForMinMax}
+        hasBoundarySuppression={hasBoundarySuppression}
         svgRef={svgRef}
         parentWidth={parentWidth}
         parentHeight={parentHeight}
@@ -617,9 +651,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           onMouseMove={onMouseMove}
           width={parentWidth}
           height={isNoDataAvailable ? 1 : calculatedSvgHeight ?? parentHeight}
-          className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
-            debugSvg && 'debug'
-          } ${isDraggingAnnotation && 'dragging-annotation'}`}
+          className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'
+            } ${isDraggingAnnotation && 'dragging-annotation'}`}
           role='img'
           aria-label={a11y}
           style={{ overflow: 'visible' }}
@@ -642,6 +675,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               xMax={xMax}
               yAxisWidth={yAxisWidth}
               numTicks={handleNumTicks}
+              tickValues={effectiveYTickValues}
               axisLabelFontSize={axisLabelFontSize}
             />
           )}
@@ -838,6 +872,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 xMax={xMax}
                 yAxisWidth={yAxisWidth}
                 numTicks={handleNumTicks}
+                tickValues={effectiveYTickValues}
                 tickLabelFontSize={tickLabelFontSize}
                 axisLabelFontSize={axisLabelFontSize}
                 handleLeftTickFormatting={handleLeftTickFormatting}
@@ -863,6 +898,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               yMax={yMax}
               xMax={xMax}
               yAxisWidth={yAxisWidth}
+              tickValues={rightTickValues}
               tickLabelFontSize={tickLabelFontSize}
               axisLabelFontSize={axisLabelFontSize}
             />
@@ -914,9 +950,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           tooltipData.dataXPosition &&
           !config.tooltips.singleSeries && (
             <>
-              <style>{`.tooltip {background-color: rgba(255,255,255, ${
-                config.tooltips.opacity / 100
-              }) !important;`}</style>
+              <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100
+                }) !important;`}</style>
               <style>{`.tooltip {max-width:300px} !important; word-wrap: break-word; `}</style>
               <TooltipWithBounds
                 ref={tooltipRef}

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -6,7 +6,7 @@ import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { buildSeriesTooltipListHtml } from '../../helpers/tooltipHelpers'
 
-const ScatterPlot = ({ xScale, yScale, yAxisWidth }) => {
+const ScatterPlot = ({ xScale, yScale, yAxisWidth, getXAxisData }) => {
   const {
     transformedData: data,
     config,
@@ -61,7 +61,7 @@ const ScatterPlot = ({ xScale, yScale, yAxisWidth }) => {
         return config.runtime.seriesKeys.map((s, index) => {
           const transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s) === -1
           const displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s) !== -1
-          const seriesColor = config?.general?.palette?.customColors ? config.general.palette.customColors[index] : colorScale(config.runtime.seriesLabels?.[s] || s)
+          const seriesColor = colorScale(config.runtime.seriesLabels?.[s] || s)
 
           let pointStyles = {
             filter: 'unset',
@@ -78,7 +78,7 @@ const ScatterPlot = ({ xScale, yScale, yAxisWidth }) => {
             <circle
               key={`${dataIndex}-${index}`}
               r={circleRadii}
-              cx={xScale(item[config.xAxis.dataKey])}
+              cx={xScale(getXAxisData(item))}
               cy={yScale(item[s])}
               fill={displayArea ? seriesColor : 'transparent'}
               fillOpacity={transparentArea ? 0.25 : 1}

package/src/components/SmallMultiples/SmallMultipleTile.tsx

@@ -23,6 +23,7 @@ interface SmallMultipleTileProps {
   parentHeight?: number
   globalYAxisMax?: number
   globalYAxisMin?: number
+  globalYAxisTickValues?: number[]
   isFirstInRow?: boolean
   onHeightChange?: (tileKey: string, height: number) => void
   onChartRef?: (ref: any) => void
@@ -43,6 +44,7 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
   parentWidth,
   globalYAxisMax,
   globalYAxisMin,
+  globalYAxisTickValues,
   isFirstInRow,
   onHeightChange,
   onChartRef,
@@ -152,6 +154,7 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
     tableData: tileData, // Override with tile-specific filtered data (important for tooltip data lookup)
     parentRef: tileParentRef, // Override with tile-specific parentRef
     updateConfig: () => {}, // Prevent tile hooks from modifying global config
+    yAxisTickValues: globalYAxisTickValues,
     ...(customColorScale && { colorScale: customColorScale }) // Override colorScale if provided
   }
 

package/src/components/SmallMultiples/SmallMultiples.tsx

@@ -3,7 +3,7 @@ import SmallMultipleTile from './SmallMultipleTile'
 import ConfigContext from '../../ConfigContext'
 import useReduceData from '../../hooks/useReduceData'
 import useScales from '../../hooks/useScales'
-import { getYAxisAutoPaddingMode } from '../../helpers/getYAxisAutoPaddingMode'
+import { hasSpacedInlineLabel } from '../../helpers/hasSpacedInlineLabel'
 import { createCombinedDataForYAxis, applyTileOrder, createTileColorScale } from '../../helpers/smallMultiplesHelpers'
 import { isMobileSmallMultiplesViewport } from '@cdc/core/helpers/viewports'
 import './SmallMultiples.css'
@@ -12,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
@@ -34,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>>(() => {
@@ -80,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 = {
@@ -97,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(
@@ -106,12 +133,13 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     combinedDataForYAxis.data
   )
 
-  const yAxisAutoPaddingMode = getYAxisAutoPaddingMode(config)
+  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,
@@ -119,7 +147,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     xAxisDataMapped: [],
     xMax: parentWidth,
     yMax: parentHeight,
-    yAxisAutoPaddingMode,
+    hasSpacedInlineLabel: usesSpacedInlineLabel,
     currentViewport
   })
 
@@ -129,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])
 
@@ -257,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/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/data/initial-state.js

@@ -78,6 +78,7 @@ const createInitialState = () => {
       titlePlacement: 'top',
       scalePadding: 10,
       tickRotation: 0,
+      autoMaxStrategy: 'clean-top-tick',
       anchors: [],
       shoMissingDataLabel: true,
       showMissingDataLine: true,

package/src/helpers/calculateLeftYAxisWidth.ts

@@ -11,6 +11,7 @@ type CalculateLeftYAxisWidthProps = {
   data: any[]
   yScale: any
   numTicks: number
+  tickValues?: number[]
   parentWidth: number
   tickLabelFont: string
   axisLabelFontSize: number
@@ -28,7 +29,11 @@ type TickValueProps = Omit<
   'parentWidth' | 'tickLabelFont' | 'axisLabelFontSize' | 'handleLeftTickFormatting'
 >
 
-const getTickValues = ({ config, data, yScale, numTicks }: TickValueProps) => {
+const getTickValues = ({ config, data, yScale, numTicks, tickValues }: TickValueProps) => {
+  if (tickValues) {
+    return tickValues
+  }
+
   if (config.visualizationType === 'Forest Plot') {
     return data.map((_, index) => index)
   }
@@ -142,6 +147,7 @@ export const calculateLeftYAxisWidth = ({
   data,
   yScale,
   numTicks,
+  tickValues,
   parentWidth,
   tickLabelFont,
   axisLabelFontSize,
@@ -153,10 +159,10 @@ export const calculateLeftYAxisWidth = ({
     return getHorizonChartWidth({ config, parentWidth, tickLabelFont, axisLabelFontSize })
   }
 
-  const tickValues = getTickValues({ config, data, yScale, numTicks })
+  const measuredTickValues = getTickValues({ config, data, yScale, numTicks, tickValues })
   const { hideAxis, inlineLabel, labelsAboveGridlines } = config.yAxis
   const formattedTicks = formatMeasuredTickLabels({
-    tickValues,
+    tickValues: measuredTickValues,
     handleLeftTickFormatting,
     inlineLabel,
     labelsAboveGridlines