@cdc/chart 4.26.5 → 4.26.7

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,7 +106,7 @@ describe('useScales', () => {
       }
     })
 
-    renderHook(() => useScales({ ...baseProps, config: configWithManualPadding, yAxisAutoPaddingMode: 'top-title' }), {
+    renderHook(() => useScales({ ...baseProps, config: configWithManualPadding, hasSpacedInlineLabel: true }), {
       wrapper: createWrapper()
     })
 
@@ -93,13 +114,267 @@ describe('useScales', () => {
       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/tests/useTooltip.test.tsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import { createMockChartContext, createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+import { useTooltip } from '../useTooltip'
+
+vi.mock('@visx/event', () => ({
+  localPoint: () => ({ x: 5, y: 5 })
+}))
+
+describe('useTooltip', () => {
+  const showTooltip = vi.fn()
+  const hideTooltip = vi.fn()
+  const row = {
+    'Cause of death': 'Hypertensive disorders of pregnancy',
+    Percentage: 22,
+    Count: 146
+  }
+
+  const baseConfig = createMockConfig()
+  const config = createMockConfig({
+    visualizationType: 'Bar',
+    orientation: 'vertical',
+    xAxis: {
+      ...baseConfig.xAxis,
+      type: 'categorical',
+      dataKey: 'Cause of death'
+    },
+    yAxis: {
+      ...baseConfig.yAxis,
+      inlineLabel: ''
+    },
+    general: {
+      showMissingDataLabel: true,
+      hideNullValue: true
+    } as any,
+    series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }] as any,
+    columns: {
+      Count: {
+        name: 'Count',
+        label: 'Count',
+        prefix: '',
+        suffix: '',
+        roundToPlace: 0,
+        commas: true,
+        dataTable: true,
+        tooltips: true
+      }
+    } as any,
+    dataFormat: {
+      abbreviated: false,
+      bottomAbbreviated: false,
+      bottomPrefix: '',
+      bottomRoundTo: 0,
+      bottomSuffix: '',
+      bottomCommas: false,
+      commas: false,
+      prefix: '',
+      preserveOriginalDecimals: false,
+      rightPrefix: '',
+      rightRoundTo: 0,
+      rightSuffix: '',
+      roundTo: 1,
+      suffix: '%'
+    } as any,
+    runtime: {
+      ...baseConfig.runtime,
+      xAxis: {
+        ...baseConfig.runtime.xAxis,
+        type: 'categorical',
+        dataKey: 'Cause of death'
+      },
+      yAxis: {
+        ...baseConfig.runtime.yAxis,
+        dataKey: 'Percentage'
+      },
+      series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }],
+      seriesKeys: ['Percentage'],
+      seriesLabelsAll: ['Percentage']
+    } as any
+  })
+
+  const xScale = Object.assign(
+    vi.fn(() => 0),
+    {
+      domain: () => ['Hypertensive disorders of pregnancy'],
+      bandwidth: () => 10
+    }
+  )
+  const yScale = Object.assign(
+    vi.fn(() => 0),
+    {
+      domain: () => ['Hypertensive disorders of pregnancy']
+    }
+  )
+
+  const wrapper = ({ children }: React.PropsWithChildren) => (
+    <ConfigContext.Provider value={createMockChartContext(config, { tableData: [row] })}>
+      {children}
+    </ConfigContext.Provider>
+  )
+
+  beforeEach(() => {
+    showTooltip.mockClear()
+    hideTooltip.mockClear()
+  })
+
+  it('does not apply the left-axis suffix to an additional tooltip column', () => {
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper }
+    )
+
+    act(() => result.current.handleTooltipMouseOver({}))
+
+    expect(showTooltip).toHaveBeenCalledOnce()
+    expect(showTooltip.mock.calls[0][0].tooltipData.data).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ key: 'Percentage', value: '22.0%', kind: 'series' }),
+        expect.objectContaining({ key: 'Count', value: '146', kind: 'extra' })
+      ])
+    )
+  })
+})

package/src/hooks/useRightAxis.ts

@@ -1,30 +1,47 @@
 import { scaleLinear } from '@visx/scale'
-import useReduceData from './useReduceData'
 import { TOP_PADDING } from './useScales'
+import { getCleanTopTickMax } from '../helpers/getCleanTopTickMax'
+import { getAxisMaxOverride } from '../helpers/getAxisMaxOverride'
+
+const cleanRightAxisValue = value => (typeof value === 'string' ? value.replace(/[,$]/g, '').trim() : value)
 
 export default function useRightAxis({ config, yMax = 0, data = [] }) {
-  const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
   const rightSeriesKeys =
     config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
-  let { minValue } = useReduceData(config, data)
-
-  const allRightAxisData = rightSeriesKeys => {
-    if (!rightSeriesKeys) return [0]
-    let rightAxisData = []
-    rightSeriesKeys.map((key, index) => {
-      return (rightAxisData = [...rightAxisData, ...data.map(item => Number(item[key]))])
-    })
-    return rightAxisData
-  }
+  const hasRightAxis =
+    config.visualizationType === 'Combo' && config.orientation === 'vertical' && Boolean(rightSeriesKeys?.length)
 
-  let max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
+  const rightAxisValues = (rightSeriesKeys ?? [])
+    .flatMap(key => data.map(item => item[key]))
+    .filter(value => value !== null && value !== undefined && String(value).trim() !== '')
+    .map(cleanRightAxisValue)
+    .filter(value => String(value).trim() !== '')
+    .map(Number)
+    .filter(Number.isFinite)
+  const rawRightMin = rightAxisValues.length ? Math.min(...rightAxisValues) : 0
+  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 hasValidExplicitRightMin =
+    rightMinRaw !== undefined &&
+    rightMinRaw !== null &&
+    rightMinRaw !== '' &&
+    Number.isFinite(rightMinNumber) &&
+    rightMinNumber <= rawRightMin
 
-  if (config.yAxis.rightMax > max) {
-    max = config.yAxis.rightMax
+  if (hasValidExplicitRightMax && rightMaxNumber > max) {
+    max = rightMaxNumber
   }
 
-  if (config.yAxis.rightMin < minValue) {
-    minValue = config.yAxis.rightMin
+  const minValue = hasValidExplicitRightMin ? rightMinNumber : rawRightMin > 0 ? 0 : rawRightMin
+
+  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 +58,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 }
 }