@cdc/chart 4.26.5 → 4.26.6

package/src/helpers/tests/smallMultiplesHelpers.test.ts

@@ -0,0 +1,99 @@
+import { scaleOrdinal } from '@visx/scale'
+import { describe, expect, it } from 'vitest'
+import { createTileColorScale } from '../smallMultiplesHelpers'
+import { ChartConfig } from '../../types/ChartConfig'
+
+const buildConfig = (overrides: Partial<ChartConfig> = {}): ChartConfig =>
+  ({
+    visualizationType: 'Line',
+    visualizationSubType: 'regular',
+    general: {
+      palette: {
+        customColors: ['#111111', '#222222'],
+        colorAssignmentMode: 'ordered'
+      }
+    },
+    legend: {},
+    smallMultiples: {
+      mode: 'by-series',
+      colorMode: 'same'
+    },
+    series: [
+      { dataKey: 'series_a', name: 'Series A', type: 'Line' },
+      { dataKey: 'series_b', name: 'Series B', type: 'Line' }
+    ],
+    runtime: {
+      seriesKeys: ['series_a', 'series_b'],
+      seriesLabels: {
+        series_a: 'Series A',
+        series_b: 'Series B'
+      },
+      seriesLabelsAll: ['Series A', 'Series B']
+    },
+    ...overrides
+  } as ChartConfig)
+
+describe('smallMultiplesHelpers createTileColorScale', () => {
+  it('uses the same first color for by-series tiles in same color mode by default', () => {
+    const colorScale = scaleOrdinal({
+      domain: ['Series A', 'Series B'],
+      range: ['#111111', '#222222'],
+      unknown: null
+    })
+
+    const tileScale = createTileColorScale(
+      { mode: 'by-series', seriesKey: 'series_b' },
+      buildConfig(),
+      colorScale,
+      1,
+      2
+    )
+
+    expect(tileScale('Series A')).toBe('#111111')
+    expect(tileScale('Series B')).toBe('#111111')
+  })
+
+  it('lets by-value assignments override same color mode for by-series tiles', () => {
+    const colorScale = scaleOrdinal({
+      domain: ['Series A', 'Series B'],
+      range: ['#aa0000', '#00bb00'],
+      unknown: null
+    })
+    const config = buildConfig({
+      general: {
+        palette: {
+          customColors: ['#111111', '#222222'],
+          colorAssignmentMode: 'by-value',
+          colorAssignments: [{ key: 'series_b', color: '#00bb00' }]
+        }
+      } as any
+    })
+
+    const tileScale = createTileColorScale({ mode: 'by-series', seriesKey: 'series_b' }, config, colorScale, 1, 2)
+
+    expect(tileScale('Series A')).toBe('#aa0000')
+    expect(tileScale('Series B')).toBe('#00bb00')
+  })
+
+  it('ignores stale by-value assignments when deciding whether to override same color mode', () => {
+    const colorScale = scaleOrdinal({
+      domain: ['Series A', 'Series B'],
+      range: ['#aa0000', '#00bb00'],
+      unknown: null
+    })
+    const config = buildConfig({
+      general: {
+        palette: {
+          customColors: ['#111111', '#222222'],
+          colorAssignmentMode: 'by-value',
+          colorAssignments: [{ key: 'removed_series', color: '#00bb00' }]
+        }
+      } as any
+    })
+
+    const tileScale = createTileColorScale({ mode: 'by-series', seriesKey: 'series_b' }, config, colorScale, 1, 2)
+
+    expect(tileScale('Series A')).toBe('#aa0000')
+    expect(tileScale('Series B')).toBe('#aa0000')
+  })
+})

package/src/hooks/tests/useRightAxis.test.tsx

@@ -0,0 +1,127 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import useRightAxis from '../useRightAxis'
+import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+const leftSeries = { dataKey: 'Cases', type: 'Bar', axis: 'Left', tooltip: true }
+const rightSeries = { dataKey: 'Rate', type: 'Line', axis: 'Right', tooltip: true }
+
+const createComboConfig = () =>
+  createMockConfig({
+    visualizationType: 'Combo',
+    orientation: 'vertical',
+    series: [leftSeries, rightSeries],
+    yAxis: {
+      ...createMockConfig().yAxis,
+      rightMax: undefined,
+      rightMin: undefined,
+      smallestRightAxisMax: undefined
+    },
+    runtime: {
+      ...createMockConfig().runtime,
+      series: [leftSeries, rightSeries],
+      seriesKeys: ['Cases', 'Rate'],
+      barSeriesKeys: ['Cases'],
+      lineSeriesKeys: ['Rate']
+    } as any
+  })
+
+describe('useRightAxis', () => {
+  it('builds the right-axis scale from the supplied domain rows', () => {
+    const config = createComboConfig()
+    const renderedRows = [{ Cases: 5, Rate: 12 }]
+    const stableDomainRows = [
+      { Cases: 5, Rate: 12 },
+      { Cases: 10, Rate: 90 }
+    ]
+
+    const renderedResult = renderHook(() => useRightAxis({ config, yMax: 100, data: renderedRows }))
+    const stableResult = renderHook(() => useRightAxis({ config, yMax: 100, data: stableDomainRows }))
+
+    expect(renderedResult.result.current.yScaleRight.domain()).toEqual([0, 12])
+    expect(stableResult.result.current.yScaleRight.domain()).toEqual([0, 90])
+  })
+
+  it('uses clean-top-tick for the automatic right-axis max when shared auto max strategy is enabled', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        autoMaxStrategy: 'clean-top-tick' as const
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 101 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 120])
+    expect(result.result.current.rightTickValues).toBeUndefined()
+  })
+
+  it('does not finalize right-axis ticks from the inherited mixed Combo min', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        autoMaxStrategy: 'clean-top-tick' as const
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: -100, Rate: 6 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([-100, 6])
+    expect(result.result.current.rightTickValues).toBeUndefined()
+  })
+
+  it('does not round the right-axis max when rightMax is explicit', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        autoMaxStrategy: 'clean-top-tick' as const,
+        rightMax: '100'
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 25 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 100])
+    expect(result.result.current.rightTickValues).toBeUndefined()
+  })
+
+  it('uses clean-top-tick when rightMax is invalid', () => {
+    const createConfigWithRightMax = (rightMax: string) => ({
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        autoMaxStrategy: 'clean-top-tick' as const,
+        rightMax
+      }
+    })
+
+    const lowerThanData = renderHook(() =>
+      useRightAxis({ config: createConfigWithRightMax('50'), yMax: 100, data: [{ Cases: 5, Rate: 101 }] })
+    )
+    const nonNumeric = renderHook(() =>
+      useRightAxis({ config: createConfigWithRightMax('not-a-number'), yMax: 100, data: [{ Cases: 5, Rate: 101 }] })
+    )
+
+    expect(lowerThanData.result.current.yScaleRight.domain()).toEqual([0, 120])
+    expect(lowerThanData.result.current.rightTickValues).toBeUndefined()
+    expect(nonNumeric.result.current.yScaleRight.domain()).toEqual([0, 120])
+    expect(nonNumeric.result.current.rightTickValues).toBeUndefined()
+  })
+
+  it('ignores a non-numeric rightMin value', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        rightMin: 'not-a-number'
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 25 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 25])
+  })
+})

package/src/hooks/tests/useScales.test.tsx

@@ -12,16 +12,10 @@ const mockGetMinMax = vi.fn(() => ({
   rightMax: 0
 }))
 
-const mockGetYAxisAutoPadding = vi.fn(() => 10)
-
 vi.mock('../../helpers/getMinMax', () => ({
   default: (...args: any[]) => mockGetMinMax(...args)
 }))
 
-vi.mock('../../helpers/getYAxisAutoPadding', () => ({
-  getYAxisAutoPadding: (...args: any[]) => mockGetYAxisAutoPadding(...args)
-}))
-
 const config = createMockConfig({
   runtime: {
     ...createMockConfig().runtime,
@@ -56,27 +50,54 @@ const baseProps = {
 
 describe('useScales', () => {
   beforeEach(() => {
-    mockGetMinMax.mockClear()
-    mockGetYAxisAutoPadding.mockClear()
-  })
-
-  it('allows repeated padding passes for inline-label mode', () => {
-    renderHook(() => useScales({ ...baseProps, yAxisAutoPaddingMode: 'inline-label' }), {
-      wrapper: createWrapper()
+    mockGetMinMax.mockReset()
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 100,
+      leftMax: 100,
+      rightMax: 0
     })
-
-    expect(mockGetYAxisAutoPadding).toHaveBeenCalledTimes(3)
   })
 
-  it('runs a single padding pass for top-title mode', () => {
-    renderHook(() => useScales({ ...baseProps, yAxisAutoPaddingMode: 'top-title' }), {
-      wrapper: createWrapper()
+  it('uses spaced inline labels as an effective clean-top-tick trigger', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 11.25,
+      leftMax: 0,
+      rightMax: 0
     })
 
-    expect(mockGetYAxisAutoPadding).toHaveBeenCalledTimes(1)
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          maxValue: 11.25,
+          config: createMockConfig({
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'default',
+              inlineLabel: ' percent'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          hasSpacedInlineLabel: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.max).toBe(15)
+    expect(result.result.current.yTickValues).toEqual([0, 5, 10, 15])
   })
 
-  it('ignores manual y-axis padding while calculating auto-padding', () => {
+  it('ignores manual y-axis padding while calculating inline-label headroom', () => {
     const configWithManualPadding = createMockConfig({
       yAxis: {
         ...createMockConfig().yAxis,
@@ -85,21 +106,278 @@ describe('useScales', () => {
       }
     })
 
-    renderHook(() => useScales({ ...baseProps, config: configWithManualPadding, yAxisAutoPaddingMode: 'top-title' }), {
-      wrapper: createWrapper()
-    })
+    renderHook(
+      () => useScales({ ...baseProps, config: configWithManualPadding, hasSpacedInlineLabel: true }),
+      {
+        wrapper: createWrapper()
+      }
+    )
 
     expect(mockGetMinMax.mock.calls[0][0].config.yAxis).toMatchObject({
       enablePadding: false,
       scalePadding: 0
     })
-    expect(mockGetYAxisAutoPadding.mock.calls[0][4].yAxis).toMatchObject({
-      enablePadding: false,
-      scalePadding: 0
+    expect(mockGetMinMax).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not finalize default strategy domains for single-word inline labels', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 11.25,
+      leftMax: 0,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'default',
+              inlineLabel: '%'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          hasSpacedInlineLabel: false
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.max).toBe(11.25)
+    expect(result.result.current.yTickValues).toBeUndefined()
+  })
+
+  it('keeps shared small-multiple Y domains on the finalized top tick instead of percent padding', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 11.25,
+      leftMax: 0,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({
+            smallMultiples: {
+              mode: 'by-column',
+              tileColumn: 'group',
+              independentYAxis: false
+            },
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'default',
+              inlineLabel: ' percent'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          maxValue: 11.25,
+          hasSpacedInlineLabel: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.max).toBe(15)
+    expect(result.result.current.yTickValues).toEqual([0, 5, 10, 15])
+    expect(result.result.current.yScale.ticks(3).at(-1)).toBe(15)
+  })
+
+  it('does not return explicit tick values when the primary Y-axis max is explicit', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 20,
+      leftMax: 0,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          maxValue: 11.25,
+          config: createMockConfig({
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'clean-top-tick',
+              inlineLabel: ' percent'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                max: '20',
+                numTicks: 3
+              }
+            } as any
+          }),
+          hasSpacedInlineLabel: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.max).toBe(20)
+    expect(result.result.current.yTickValues).toBeUndefined()
+  })
+
+  it('does not use spaced inline labels as an effective clean-top-tick trigger for Combo charts', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 100,
+      leftMax: 11.25,
+      rightMax: 0
     })
-    expect(mockGetMinMax.mock.calls[1][0].config.yAxis).toMatchObject({
-      enablePadding: true,
-      scalePadding: 10
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({
+            visualizationType: 'Combo',
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'default',
+              inlineLabel: ' percent'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          maxValue: 101,
+          hasSpacedInlineLabel: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.leftMax).toBe(11.25)
+    expect(result.result.current.yTickValues).toBeUndefined()
+  })
+
+  it('finalizes Combo left-axis ticks when clean-top-tick is explicitly enabled', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 100,
+      leftMax: 12,
+      rightMax: 0
     })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({
+            visualizationType: 'Combo',
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'clean-top-tick'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          maxValue: 101,
+          hasSpacedInlineLabel: false
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.leftMax).toBe(15)
+    expect(result.result.current.yTickValues).toEqual([0, 5, 10, 15])
+  })
+
+  it('uses the selected Y-axis domain rows for min/max calculation', () => {
+    const renderedRows = [{ Date: '2024-01-01', value: 3 }]
+    const domainRows = [
+      { Date: '2024-01-01', value: 3 },
+      { Date: '2024-01-02', value: 12 }
+    ]
+
+    renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          data: renderedRows,
+          tableData: domainRows,
+          yAxisDomainData: domainRows
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(mockGetMinMax.mock.calls[0][0].data).toBe(domainRows)
+    expect(mockGetMinMax.mock.calls[0][0].tableData).toBe(domainRows)
+  })
+
+  it('passes hasBoundarySuppression through to getMinMax', () => {
+    renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({ visualizationType: 'Line' }),
+          data: [{ Cases: 10 }],
+          tableData: [{ Cases: 10 }],
+          hasBoundarySuppression: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(mockGetMinMax.mock.calls[0][0].hasBoundarySuppression).toBe(true)
+  })
+
+  it('passes hasBoundarySuppression=false when not set', () => {
+    const renderedRows = [{ Cases: 50 }]
+    const stableDomainRows = [{ Cases: 50 }, { Cases: 60 }]
+
+    renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({ visualizationType: 'Line' }),
+          data: renderedRows,
+          tableData: renderedRows,
+          yAxisDomainData: stableDomainRows
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(mockGetMinMax.mock.calls[0][0].data).toBe(stableDomainRows)
+    expect(mockGetMinMax.mock.calls[0][0].hasBoundarySuppression).toBe(false)
   })
 })

package/src/hooks/useRightAxis.ts

@@ -1,6 +1,8 @@
 import { scaleLinear } from '@visx/scale'
 import useReduceData from './useReduceData'
 import { TOP_PADDING } from './useScales'
+import { getCleanTopTickMax } from '../helpers/getCleanTopTickMax'
+import { getAxisMaxOverride } from '../helpers/getAxisMaxOverride'
 
 export default function useRightAxis({ config, yMax = 0, data = [] }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
@@ -17,14 +19,36 @@ export default function useRightAxis({ config, yMax = 0, data = [] }) {
     return rightAxisData
   }
 
-  let max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
+  const rightAxisValues = allRightAxisData(rightSeriesKeys).map(Number).filter(Number.isFinite)
+  const rawRightMax = rightAxisValues.length ? Math.max(...rightAxisValues) : 0
+  let max = rawRightMax
+  const { hasValidMax: hasValidExplicitRightMax, maxNumber: rightMaxNumber } = getAxisMaxOverride({
+    value: config.yAxis.rightMax,
+    minimumValidMax: max
+  })
+  const rightMinRaw = config.yAxis.rightMin
+  const rightMinNumber = Number(rightMinRaw)
+  const hasExplicitRightMin =
+    rightMinRaw !== undefined && rightMinRaw !== null && rightMinRaw !== '' && Number.isFinite(rightMinNumber)
+
+  if (hasValidExplicitRightMax && rightMaxNumber > max) {
+    max = rightMaxNumber
+  }
+
+  if (hasExplicitRightMin && rightMinNumber < minValue) {
+    minValue = rightMinNumber
+  }
+
+  // if there is a bar series & the right axis doesn't include a negative number, default to zero
+  const hasBarSeries = config.runtime?.barSeriesKeys?.length > 0
+  const hasLineSeries = config.runtime?.lineSeriesKeys?.length > 0
 
-  if (config.yAxis.rightMax > max) {
-    max = config.yAxis.rightMax
+  if ((hasBarSeries || hasLineSeries) && minValue > 0) {
+    minValue = 0
   }
 
-  if (config.yAxis.rightMin < minValue) {
-    minValue = config.yAxis.rightMin
+  if (config.yAxis.autoMaxStrategy === 'clean-top-tick' && !hasValidExplicitRightMax) {
+    max = getCleanTopTickMax(max)
   }
 
   // Enforce smallest right axis max so small-data charts don't show misleading decimal ticks
@@ -41,18 +65,11 @@ export default function useRightAxis({ config, yMax = 0, data = [] }) {
   if (smallestRightAxisMax !== null && max < smallestRightAxisMax) {
     max = smallestRightAxisMax
   }
-  // if there is a bar series & the right axis doesn't include a negative number, default to zero
-  const hasBarSeries = config.runtime?.barSeriesKeys?.length > 0
-  const hasLineSeries = config.runtime?.lineSeriesKeys?.length > 0
-
-  if ((hasBarSeries || hasLineSeries) && minValue > 0) {
-    minValue = 0
-  }
 
   const yScaleRight = scaleLinear({
     domain: [minValue, max],
     range: [yMax, TOP_PADDING]
   })
 
-  return { yScaleRight, hasRightAxis }
+  return { yScaleRight, hasRightAxis, rightTickValues: undefined }
 }