@cdc/chart 4.26.6 → 4.26.10

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

@@ -9,7 +9,7 @@ vi.mock('@cdc/core/components/ui/Icon', () => ({
 vi.mock('@cdc/core/components/ui/Tooltip', () => {
   const Tooltip = ({ children }) => <>{children}</>
   Tooltip.Target = ({ children }) => <>{children}</>
-  Tooltip.Content = ({ children }) => <>{children}</>
+  Tooltip.Content = ({ children }) => <span>{children}</span>
   return { default: Tooltip }
 })
 
@@ -33,7 +33,7 @@ import { createMockChartContext } from '../../LinearChart/tests/mockConfigContex
 
 beforeAll(() => {
   HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
-    measureText: vi.fn(() => ({ width: 50 })),
+    measureText: vi.fn((text: string) => ({ width: text.length * 7 })),
     fillText: vi.fn(),
     fillRect: vi.fn(),
     clearRect: vi.fn()
@@ -88,8 +88,8 @@ const buildHeatMapContext = () => {
     },
     heatmap: {
       cellPadding: 1,
-      rowLabelGap: 32,
-      columnLabelGap: 56,
+      rowLabelGap: 0,
+      columnLabelGap: 15,
       colorBucketCount: 9,
       xAxisPosition: 'top',
       showCellValues: false
@@ -246,8 +246,8 @@ const buildSeriesModeHeatMapContext = () => {
     },
     heatmap: {
       cellPadding: 1,
-      rowLabelGap: 32,
-      columnLabelGap: 56,
+      rowLabelGap: 0,
+      columnLabelGap: 15,
       colorBucketCount: 9,
       xAxisPosition: 'top',
       showCellValues: false
@@ -436,13 +436,13 @@ const buildCategoricalAverageAgeHeatMapContext = () => {
   return context
 }
 
-const getTranslateY = (element: Element | null) => {
+const getTranslateY = (element: Element | null | undefined) => {
   const transform = element?.getAttribute('transform') || ''
   const match = transform.match(/translate\([^,]+,\s*([^)]+)\)/)
   return match ? Number(match[1]) : 0
 }
 
-const getTranslateX = (element: Element | null) => {
+const getTranslateX = (element: Element | null | undefined) => {
   const transform = element?.getAttribute('transform') || ''
   const match = transform.match(/translate\(([^,\s)]+)/)
   return match ? Number(match[1]) : 0
@@ -454,8 +454,8 @@ describe('HeatMap', () => {
   it('renders cells with tooltip metadata from additional columns', () => {
     const context = buildHeatMapContext()
     const rows = [
-      { month: '2024-02-01', North: 5, South: 7, notes: 'Severe', population: 2500 },
-      { month: '2024-01-01', North: 2, South: 4, notes: 'Low', population: 1000 }
+      { month: '2024-02-01', North: 5, South: 7, notes: 'Severe', population: 2500, rank: 20 },
+      { month: '2024-01-01', North: 2, South: 4, notes: 'Low', population: 1000, rank: 10 }
     ]
 
     context.config.data = rows
@@ -465,6 +465,7 @@ describe('HeatMap', () => {
     context.excludedData = rows
     context.rawData = rows
     context.tableData = rows
+    ;(context.config as any).dataFormat.suffix = '%'
     ;(context.config as any).columns.population = {
       label: 'Population',
       tooltips: true,
@@ -474,6 +475,13 @@ describe('HeatMap', () => {
       roundToPlace: 0,
       commas: true
     }
+    ;(context.config as any).columns.rank = {
+      label: 'Rank',
+      tooltips: true,
+      dataTable: true,
+      roundToPlace: 0,
+      commas: true
+    }
 
     const { container } = render(
       <ConfigContext.Provider value={context}>
@@ -492,6 +500,8 @@ describe('HeatMap', () => {
     expect(tooltipHtml).toContain('Value:')
     expect(tooltipHtml).toContain('Notes')
     expect(tooltipHtml).toContain('Population: $1,000 residents')
+    expect(tooltipHtml).toContain('Rank: 10')
+    expect(tooltipHtml).not.toContain('Rank: 10%')
     expect(tooltipHtml).not.toContain('<br/>')
     expect(cells[0]?.getAttribute('tabindex')).toBe('0')
     expect(cells[0]?.getAttribute('aria-label')).toContain('Month: Tooltip 2024-01-01')
@@ -669,16 +679,17 @@ describe('HeatMap', () => {
     const firstCellTooltipHtml = cells[0]?.getAttribute('data-tooltip-html') || ''
     const firstCellAriaLabel = cells[0]?.getAttribute('aria-label') || ''
     const firstCellX = Number(cells[0]?.getAttribute('x'))
+    const lastCell = cells[cells.length - 1]
+    const lastCellRight = Number(lastCell?.getAttribute('x')) + Number(lastCell?.getAttribute('width'))
     const xAxisTitle = Array.from(container.querySelectorAll('text')).find(
       text => text.textContent === 'Community Type'
     )
     const xAxisTitleX = Number(xAxisTitle?.getAttribute('x'))
 
     expect(cells).toHaveLength(9)
-    expect(firstCellX).toBeGreaterThan(20)
-    expect(firstCellX).toBeLessThan(90)
+    expect(firstCellX).toBe(0)
     expect(xAxisTitleX).toBeGreaterThan(firstCellX)
-    expect(xAxisTitleX).toBeLessThan(180)
+    expect(xAxisTitleX).toBeLessThan(lastCellRight)
     expect(firstCellTooltipHtml).toContain('Community Type: Urban Core')
     expect(firstCellTooltipHtml).toContain('City: Atlanta')
     expect(firstCellTooltipHtml).toContain('Average age: 34')
@@ -733,10 +744,16 @@ describe('HeatMap', () => {
     expect(visibleSeriesTooltipHtml).toContain('Average age: 36')
   })
 
-  it('applies y-axis tick rotation to row labels when configured', () => {
+  it('shares existing bottom space with rotated row labels instead of shrinking cells unnecessarily', () => {
+    const unrotatedContext = buildCategoricalAverageAgeHeatMapContext()
     const context = buildCategoricalAverageAgeHeatMapContext()
     ;(context.config as any).yAxis.tickRotation = 30
 
+    const { container: unrotatedContainer } = render(
+      <ConfigContext.Provider value={unrotatedContext}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
     const { container } = render(
       <ConfigContext.Provider value={context}>
         <HeatMap parentWidth={800} parentHeight={320} />
@@ -744,8 +761,28 @@ describe('HeatMap', () => {
     )
 
     const rowLabel = Array.from(container.querySelectorAll('text')).find(text => text.textContent === 'Atlanta')
+    const unrotatedCell = unrotatedContainer.querySelector('.visx-heatmap-rect')
+    const rotatedCell = container.querySelector('.visx-heatmap-rect')
 
     expect(rowLabel?.getAttribute('transform')).toContain('rotate(-30')
+    expect(Number(rotatedCell?.getAttribute('height'))).toBe(Number(unrotatedCell?.getAttribute('height')))
+  })
+
+  it('keeps a visible grid when a long rotated row label needs more space than the chart height', () => {
+    const context = buildCategoricalAverageAgeHeatMapContext()
+    const longRowLabel = 'A'.repeat(500)
+    ;(context.config as any).yAxis.tickRotation = 90
+    ;(context.config as any).runtime.seriesLabels.Atlanta = longRowLabel
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    const firstCell = container.querySelector('.visx-heatmap-rect')
+
+    expect(Number(firstCell?.getAttribute('height'))).toBeGreaterThan(0)
   })
 
   it('renders top y-axis titles above the heatmap and reserves layout space', () => {
@@ -927,6 +964,28 @@ describe('HeatMap', () => {
     expect(columnLabel?.getAttribute('text-anchor')).toBe('start')
   })
 
+  it('samples x-axis labels without removing heatmap cells when a tick count is configured', () => {
+    const context = buildCategoricalAverageAgeHeatMapContext()
+    ;(context.config as any).xAxis.numTicks = 2
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    expect(container.querySelectorAll('.visx-heatmap-rect')).toHaveLength(9)
+    expect(screen.getByText('Urban Core')).toBeTruthy()
+    expect(screen.queryByText('Suburban')).toBeNull()
+    expect(screen.getByText('Rural')).toBeTruthy()
+
+    const plotLeft = getTranslateX(container.querySelector('.cdc-heatmap__plot'))
+    const lastCell = container.querySelectorAll('.visx-heatmap-rect')[8]
+    const lastCellRight = Number(lastCell?.getAttribute('x')) + Number(lastCell?.getAttribute('width'))
+
+    expect(800 - (plotLeft + lastCellRight)).toBeGreaterThanOrEqual(25)
+  })
+
   it('places the x-axis below the heatmap when configured', () => {
     const context = buildCategoricalAverageAgeHeatMapContext()
     ;(context.config as any).heatmap.xAxisPosition = 'bottom'
@@ -972,6 +1031,61 @@ describe('HeatMap', () => {
     expect(columnLabel?.querySelector('tspan')?.getAttribute('dy')).toBe('0.355em')
   })
 
+  it('uses larger cell text when it fits and hides values wider than the cell', () => {
+    const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.showCellValues = true
+    context.formatNumber = () => '1234567890'.repeat(20)
+    const { container, rerender } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+    expect(container.querySelectorAll('.cdc-heatmap__cell-value')).toHaveLength(0)
+    context.formatNumber = () => '12'
+    rerender(
+      <ConfigContext.Provider value={{ ...context }}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+    expect(container.querySelector('.cdc-heatmap__cell-value')?.getAttribute('font-size')).toBe('16')
+  })
+
+  it('scales cell text with height below the cap and uses the new column gap fallback', () => {
+    const context = buildHeatMapContext()
+    const config = context.config as any
+    config.heatmap.showCellValues = true
+    delete config.heatmap.columnLabelGap
+    config.hideXAxisLabel = true
+    config.xAxis.hideLabel = true
+    config.xAxis.hideTicks = true
+    config.xAxis.size = 0
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={800} parentHeight={80} />
+      </ConfigContext.Provider>
+    )
+    const cell = container.querySelector('.visx-heatmap-rect')
+    const label = container.querySelector('.cdc-heatmap__cell-value')
+    expect(Number(label?.getAttribute('font-size'))).toBeCloseTo(Number(cell?.getAttribute('height')) * 0.5)
+    expect(Number(label?.getAttribute('font-size'))).toBeLessThan(16)
+    expect(container.querySelector('.visx-axis-top text')?.getAttribute('y')).toBe('-20')
+  })
+
+  it('keeps the bottom axis title close to the bottom edge', () => {
+    const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.xAxisPosition = 'bottom'
+    ;(context.config as any).xAxis.size = 0
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+    const title = container.querySelector('.cdc-heatmap__axis-title')
+    const baseline = getHeatMapPlotTop(container) + Number(title?.getAttribute('y'))
+    expect(320 - baseline).toBeLessThanOrEqual(14)
+    expect(320 - baseline).toBeGreaterThanOrEqual(8)
+  })
+
   it('renders readable cell values when HeatMap cell labels are enabled', () => {
     const context = buildCategoricalAverageAgeHeatMapContext()
     ;(context.config as any).heatmap.showCellValues = true
@@ -988,9 +1102,10 @@ describe('HeatMap', () => {
     expect(cellValues.every(label => ['#1c1d1f', '#fff'].includes(label.getAttribute('fill') || ''))).toBe(true)
   })
 
-  it('uses the HeatMap row label gap setting to tune spacing between row labels and cells', () => {
+  it('adds the row label gap before ticks while keeping the grid against the axis', () => {
     const context = buildCategoricalAverageAgeHeatMapContext()
     ;(context.config as any).heatmap.rowLabelGap = 18
+    ;(context.config as any).xAxis.tickColor = '#123456'
 
     const { container } = render(
       <ConfigContext.Provider value={context}>
@@ -999,8 +1114,207 @@ describe('HeatMap', () => {
     )
 
     const firstCell = container.querySelector('.visx-heatmap-rect')
+    const xAxisLine = container.querySelector('.cdc-heatmap__x-axis-line')
+
+    expect(Number(firstCell?.getAttribute('x'))).toBe(0)
+    expect(Number(container.querySelector('.visx-axis-left text')?.getAttribute('x'))).toBe(-26)
+    expect(xAxisLine?.getAttribute('x1')).toBe('0')
+    expect(Number(xAxisLine?.getAttribute('x2'))).toBeGreaterThan(Number(firstCell?.getAttribute('x')))
+    expect(xAxisLine?.getAttribute('stroke')).toBe('#123456')
+  })
+
+  it('preserves a visible grid when the configured row label gap exceeds the plot width', () => {
+    const context = buildCategoricalAverageAgeHeatMapContext()
+    ;(context.config as any).heatmap.rowLabelGap = 10_000
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    const firstCell = container.querySelector('.visx-heatmap-rect')
+
+    expect(Number(firstCell?.getAttribute('width'))).toBeGreaterThan(0)
+  })
+
+  it('uses rectangular cells to fill the available plot width', () => {
+    const context = buildHeatMapContext()
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    const firstCell = container.querySelector('.visx-heatmap-rect')
+    const cells = Array.from(container.querySelectorAll('.visx-heatmap-rect'))
+    const lastCell = cells[cells.length - 1]
+    const xAxisLine = container.querySelector('.cdc-heatmap__x-axis-line')
+    const lastCellRight = Number(lastCell?.getAttribute('x')) + Number(lastCell?.getAttribute('width'))
+
+    expect(Number(firstCell?.getAttribute('width'))).toBeGreaterThan(Number(firstCell?.getAttribute('height')))
+    expect(Math.abs(Number(xAxisLine?.getAttribute('x2')) - lastCellRight)).toBeLessThanOrEqual(2)
+  })
+
+  it('keeps the row axis fixed and opens horizontal scrolling at the first column when enabled', () => {
+    const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.horizontalScroll = true
+    ;(context.config as any).heatmap.minColumnWidth = 220
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={320} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    const scrollArea = screen.getByRole('region', { name: /HeatMap chart.*Month.*scrollable columns/i })
+    const scrollContent = scrollArea.querySelector('.cdc-heatmap__scroll-content')
+    const fixedAxis = container.querySelector('.cdc-heatmap__fixed-axis-svg')
+    const fixedXAxisTitle = container.querySelector('.cdc-heatmap__fixed-x-title')
+    const firstCell = scrollArea.querySelector('.visx-heatmap-rect')
+    const scrollInstructionsId = scrollArea.getAttribute('aria-describedby')
+    const leftScrollCue = container.querySelector('.cdc-heatmap__scroll-cue--left')
+    const rightScrollCue = container.querySelector('.cdc-heatmap__scroll-cue--right')
+
+    expect(scrollArea.scrollLeft).toBe(0)
+    expect(Number(scrollContent?.getAttribute('width'))).toBeGreaterThan(320)
+    expect(Number(firstCell?.getAttribute('width'))).toBeCloseTo(219, 1)
+    expect(fixedAxis?.textContent).toContain('North')
+    expect(fixedAxis?.getAttribute('aria-label')).toContain('Region row axis')
+    expect(scrollArea.contains(fixedAxis)).toBe(false)
+    expect(fixedXAxisTitle?.textContent).toContain('Month')
+    expect(scrollContent?.textContent).not.toContain('Month')
+    expect(scrollInstructionsId).toBeTruthy()
+    expect(document.getElementById(scrollInstructionsId || '')?.textContent).toContain(
+      'Scroll horizontally to view additional columns.'
+    )
+    expect(leftScrollCue).toHaveAttribute('aria-hidden', 'true')
+    expect(rightScrollCue).toHaveAttribute('aria-hidden', 'true')
+
+    Object.defineProperties(scrollArea, {
+      clientWidth: { configurable: true, value: 200 },
+      scrollWidth: { configurable: true, value: 600 }
+    })
+
+    fireEvent.scroll(scrollArea)
+    expect(leftScrollCue).not.toHaveClass('is-visible')
+    expect(rightScrollCue).toHaveClass('is-visible')
+
+    scrollArea.scrollLeft = 200
+    fireEvent.scroll(scrollArea)
+    expect(leftScrollCue).toHaveClass('is-visible')
+    expect(rightScrollCue).toHaveClass('is-visible')
+
+    scrollArea.scrollLeft = 400
+    fireEvent.scroll(scrollArea)
+    expect(leftScrollCue).toHaveClass('is-visible')
+    expect(rightScrollCue).not.toHaveClass('is-visible')
+  })
+
+  it('preserves the responsive non-scroll layout when horizontal scrolling is disabled', () => {
+    const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.horizontalScroll = false
+    ;(context.config as any).heatmap.minColumnWidth = 220
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={320} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    expect(screen.queryByRole('region', { name: /scrollable columns/i })).toBeNull()
+    expect(container.querySelector('.cdc-heatmap__fixed-axis-svg')).toBeNull()
+    expect(container.querySelector('.cdc-heatmap__scroll-cue')).toBeNull()
+    expect(Number(container.querySelector('.cdc-heatmap__svg')?.getAttribute('width'))).toBe(320)
+  })
+
+  it('does not add a scroll region when enabled columns already fit', () => {
+    const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.horizontalScroll = true
+    ;(context.config as any).heatmap.minColumnWidth = 44
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={800} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    expect(screen.queryByRole('region', { name: /scrollable columns/i })).toBeNull()
+    expect(container.querySelector('.cdc-heatmap__scroll-cue')).toBeNull()
+  })
+
+  it('caps authored minimum column widths at the supported maximum', () => {
+    const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.horizontalScroll = true
+    ;(context.config as any).heatmap.minColumnWidth = 10_000
+
+    render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={320} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    const scrollArea = screen.getByRole('region', { name: /scrollable columns/i })
+    const firstCell = scrollArea.querySelector('.visx-heatmap-rect')
+
+    expect(Number(firstCell?.getAttribute('width'))).toBeCloseTo(399, 1)
+  })
+
+  it('protects bottom rotated labels while preserving a positive row gap in scroll mode', () => {
+    const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.horizontalScroll = true
+    ;(context.config as any).heatmap.minColumnWidth = 60
+    ;(context.config as any).heatmap.rowLabelGap = 18
+    ;(context.config as any).heatmap.xAxisPosition = 'bottom'
+    ;(context.config as any).xAxis.tickRotation = 45
+
+    const { container } = render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={200} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    const scrollArea = screen.getByRole('region', { name: /scrollable columns/i })
+    const firstCell = scrollArea.querySelector('.visx-heatmap-rect')
+    const firstTickLabel = scrollArea.querySelector('.visx-axis-bottom text')
+    const xAxisLine = scrollArea.querySelector('.cdc-heatmap__x-axis-line')
+    const fixedXAxisTitle = container.querySelector('.cdc-heatmap__fixed-x-title text')
+    const fixedXAxisTitleSvg = container.querySelector('.cdc-heatmap__fixed-x-title')
+
+    expect(container.querySelector('.visx-axis-bottom')).toBeTruthy()
+    expect(Number(firstCell?.getAttribute('x'))).toBeGreaterThan(18)
+    expect(firstTickLabel?.getAttribute('transform')).toContain('rotate(-45')
+    expect(xAxisLine?.getAttribute('x1')).toBe('0')
+    expect(Number(fixedXAxisTitle?.getAttribute('x'))).toBeCloseTo(
+      Number(fixedXAxisTitleSvg?.getAttribute('width')) / 2,
+      1
+    )
+  })
+
+  it('caps scrollable endpoint padding for extremely long first labels', () => {
+    const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.horizontalScroll = true
+    ;(context.config as any).heatmap.minColumnWidth = 60
+    ;(context.config as any).heatmap.rowLabelGap = 18
+    ;(context.config as any).heatmap.xAxisPosition = 'bottom'
+    ;(context.config as any).xAxis.tickRotation = 45
+    context.formatDate = () => 'X'.repeat(10_000)
+
+    render(
+      <ConfigContext.Provider value={context}>
+        <HeatMap parentWidth={200} parentHeight={320} />
+      </ConfigContext.Provider>
+    )
+
+    const scrollArea = screen.getByRole('region', { name: /scrollable columns/i })
+    const firstCell = scrollArea.querySelector('.visx-heatmap-rect')
+    const scrollContent = scrollArea.querySelector('.cdc-heatmap__scroll-content')
+    const fixedXAxisTitle = document.querySelector('.cdc-heatmap__fixed-x-title')
 
-    expect(Number(firstCell?.getAttribute('x'))).toBeCloseTo(18, 1)
+    expect(Number(firstCell?.getAttribute('x'))).toBeLessThanOrEqual(258)
+    expect(Number(firstCell?.getAttribute('x'))).toBeLessThan(Number(fixedXAxisTitle?.getAttribute('width')))
+    expect(Number(scrollContent?.getAttribute('width'))).toBeLessThan(500)
   })
 
   it('uses the HeatMap column label gap setting to tune spacing above the first row', () => {
@@ -1020,6 +1334,8 @@ describe('HeatMap', () => {
 
   it('shows HeatMap editor controls in their owning accordion sections', () => {
     const context = buildHeatMapContext()
+    ;(context.config as any).xAxis.manual = true
+    ;(context.config as any).heatmap.horizontalScroll = true
 
     render(
       <ConfigContext.Provider value={context}>
@@ -1042,6 +1358,7 @@ describe('HeatMap', () => {
     fireEvent.click(yAxisHeading)
     fireEvent.click(dateCategoryHeading)
     fireEvent.click(settingsHeading)
+    expect(screen.getByText(/To adjust cell height, use Chart Height in the General panel\./)).toBeTruthy()
     fireEvent.click(dataSeriesHeading)
     fireEvent.click(legendHeading)
 
@@ -1052,6 +1369,9 @@ describe('HeatMap', () => {
     expect(screen.getAllByText('Hide Axis')).toHaveLength(2)
     expect(screen.getAllByText('Hide Ticks')).toHaveLength(2)
     expect(screen.getAllByText('Tick rotation (Degrees)').length).toBeGreaterThan(0)
+    expect(screen.getByText('Number of ticks')).toBeTruthy()
+    expect(screen.queryByText('Manual Ticks')).toBeNull()
+    expect(screen.queryByText('Step count')).toBeNull()
     expect(screen.getByLabelText('Label Placement')).toBeTruthy()
     expect(screen.getByText('Add Data Series')).toBeTruthy()
     expect(
@@ -1061,6 +1381,9 @@ describe('HeatMap', () => {
       Boolean(xAxisPositionLabel.compareDocumentPosition(settingsHeading) & Node.DOCUMENT_POSITION_FOLLOWING)
     ).toBe(true)
     expect(screen.getByText('Show Cell Values')).toBeTruthy()
+    expect(screen.getByText('Enable Horizontal Scrolling')).toBeTruthy()
+    expect(screen.getByText('Minimum Column Width')).toBeTruthy()
+    expect(screen.getByLabelText('Minimum Column Width')).toHaveAttribute('max', '400')
     expect(screen.getByText('Cell Padding')).toBeTruthy()
     expect(screen.getByText('Row Label Gap')).toBeTruthy()
     expect(screen.getByText('Column Label Gap')).toBeTruthy()

package/src/components/HeatMap/tests/helpers.test.ts

@@ -6,6 +6,7 @@ import {
   getHeatMapColorScale,
   getHeatMapDataGroupRanges
 } from '../helpers'
+import { getHeatMapXAxisTickValues } from '../helpers/layout'
 import { type ChartConfig } from '../../../types/ChartConfig'
 
 describe('buildHeatMapData', () => {
@@ -165,3 +166,81 @@ describe('HeatMap data grouping', () => {
     ])
   })
 })
+
+describe('HeatMap x-axis tick values', () => {
+  const domain = ['a', 'b', 'c', 'd', 'e']
+  const formattedLabels = Object.fromEntries(domain.map(value => [value, `Label ${value}`]))
+  const measureLabel = () => 50
+
+  it('samples an explicit tick count evenly while preserving the first and last values', () => {
+    expect(
+      getHeatMapXAxisTickValues({
+        domain,
+        formattedLabels,
+        gridWidth: 500,
+        rotationDegrees: 0,
+        requestedCount: 3,
+        measureLabel,
+        fontSize: 16
+      })
+    ).toEqual(['a', 'c', 'e'])
+  })
+
+  it('automatically reduces dense labels without changing the domain', () => {
+    const tickValues = getHeatMapXAxisTickValues({
+      domain,
+      formattedLabels,
+      gridWidth: 150,
+      rotationDegrees: 0,
+      measureLabel,
+      fontSize: 16
+    })
+
+    expect(tickValues).toEqual(['a', 'e'])
+    expect(domain).toEqual(['a', 'b', 'c', 'd', 'e'])
+  })
+
+  it('keeps every short categorical label when neighboring labels fit', () => {
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    const labelWidths = [23, 24, 27, 23, 29, 22, 17, 27, 26, 23, 27, 27]
+
+    expect(
+      getHeatMapXAxisTickValues({
+        domain: months,
+        formattedLabels: Object.fromEntries(months.map(month => [month, month])),
+        gridWidth: 468,
+        rotationDegrees: 0,
+        measureLabel: label => labelWidths[months.indexOf(label)],
+        fontSize: 16
+      })
+    ).toEqual(months)
+  })
+
+  it('allows more labels when rotation reduces their horizontal footprint', () => {
+    expect(
+      getHeatMapXAxisTickValues({
+        domain,
+        formattedLabels,
+        gridWidth: 150,
+        rotationDegrees: 90,
+        measureLabel,
+        fontSize: 16
+      })
+    ).toEqual(domain)
+  })
+
+  it('handles very large category domains without spreading every label into Math.max', () => {
+    const largeDomain = Array.from({ length: 150_000 }, (_, index) => String(index))
+    const tickValues = getHeatMapXAxisTickValues({
+      domain: largeDomain,
+      formattedLabels: {},
+      gridWidth: 100,
+      rotationDegrees: 0,
+      measureLabel: () => 1,
+      fontSize: 1
+    })
+
+    expect(tickValues[0]).toBe('0')
+    expect(tickValues[tickValues.length - 1]).toBe('149999')
+  })
+})