@cdc/chart 4.26.6 → 4.26.10

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

@@ -1,6 +1,7 @@
 import {
   createDefaultSeriesColumnConfig,
   findColumnConfigByName,
+  getAdditionalColumnFormattingParams,
   getSeriesColumnConfig,
   getSeriesColumnFormattingParams,
   getSeriesOwnedColumnNames,
@@ -53,6 +54,23 @@ describe('seriesColumnSettings', () => {
     })
   })
 
+  it('removes fields when an update value is undefined', () => {
+    const updatedColumns = upsertSeriesColumnConfig(
+      {
+        cases: { name: 'cases', label: 'Cases', roundToPlace: 2 }
+      },
+      'cases',
+      { roundToPlace: undefined }
+    )
+
+    expect(updatedColumns).toEqual({
+      cases: {
+        name: 'cases',
+        label: 'Cases'
+      }
+    })
+  })
+
   it('does not persist display defaults when creating a new series-owned column config', () => {
     expect(upsertSeriesColumnConfig({}, 'cases', { label: 'Cases' })).toEqual({
       cases: {
@@ -62,6 +80,15 @@ describe('seriesColumnSettings', () => {
     })
   })
 
+  it('does not create a rounding override when updating unrelated display settings', () => {
+    expect(upsertSeriesColumnConfig({}, 'cases', { dataTable: false })).toEqual({
+      cases: {
+        name: 'cases',
+        dataTable: false
+      }
+    })
+  })
+
   it('only returns explicit formatting overrides and preserves falsey values', () => {
     expect(
       getSeriesColumnFormattingParams({
@@ -92,7 +119,63 @@ describe('seriesColumnSettings', () => {
     })
   })
 
+  it('ignores blank rounding overrides so global formatting can apply', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        roundToPlace: '',
+        commas: false
+      })
+    ).toEqual({
+      addColCommas: false
+    })
+  })
+
+  it('normalizes string rounding overrides to numbers', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        roundToPlace: '0',
+        commas: false
+      })
+    ).toEqual({
+      addColRoundTo: 0,
+      addColCommas: false
+    })
+  })
+
+  it('ignores invalid rounding overrides so global formatting can apply', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        roundToPlace: 'abc',
+        commas: false
+      })
+    ).toEqual({
+      addColCommas: false
+    })
+  })
+
   it('returns undefined when no formatting overrides were explicitly configured', () => {
     expect(getSeriesColumnFormattingParams({ label: 'Cases' })).toBeUndefined()
   })
+
+  it('blocks global prefix and suffix fallback for additional columns', () => {
+    expect(getAdditionalColumnFormattingParams({ label: 'Count' })).toEqual({
+      addColPrefix: '',
+      addColSuffix: ''
+    })
+  })
+
+  it('preserves explicit additional column formatting while blocking missing affixes', () => {
+    expect(
+      getAdditionalColumnFormattingParams({
+        prefix: '$',
+        roundToPlace: 0,
+        commas: false
+      })
+    ).toEqual({
+      addColPrefix: '$',
+      addColSuffix: '',
+      addColRoundTo: 0,
+      addColCommas: false
+    })
+  })
 })

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

@@ -1,6 +1,6 @@
 import { scaleOrdinal } from '@visx/scale'
 import { describe, expect, it } from 'vitest'
-import { createTileColorScale } from '../smallMultiplesHelpers'
+import { applyTileOrder, createTileColorScale, getTileKeys } from '../smallMultiplesHelpers'
 import { ChartConfig } from '../../types/ChartConfig'
 
 const buildConfig = (overrides: Partial<ChartConfig> = {}): ChartConfig =>
@@ -97,3 +97,39 @@ describe('smallMultiplesHelpers createTileColorScale', () => {
     expect(tileScale('Series B')).toBe('#aa0000')
   })
 })
+
+describe('smallMultiplesHelpers tile ordering', () => {
+  it('sorts by-column tile keys in numeric-aware order', () => {
+    const config = buildConfig({
+      smallMultiples: {
+        mode: 'by-column',
+        tileColumn: 'Week'
+      }
+    })
+    const data = [{ Week: '10' }, { Week: '2' }, { Week: '1' }, { Week: '20' }, { Week: '3' }, { Week: null }]
+
+    expect(getTileKeys(config, data)).toEqual(['1', '2', '3', '10', '20'])
+  })
+
+  it('uses numeric-aware order when sorting tile display titles', () => {
+    const config = buildConfig({
+      smallMultiples: {
+        mode: 'by-column',
+        tileColumn: 'Week',
+        tileTitles: {
+          '1': 'Week 1',
+          '2': 'Week 2',
+          '10': 'Week 10'
+        }
+      }
+    })
+    const tileItems = [
+      { mode: 'by-column', tileValue: '10', key: '10' },
+      { mode: 'by-column', tileValue: '2', key: '2' },
+      { mode: 'by-column', tileValue: '1', key: '1' }
+    ]
+
+    expect(applyTileOrder(tileItems, 'asc', [], config).map(item => item.tileValue)).toEqual(['1', '2', '10'])
+    expect(applyTileOrder(tileItems, 'desc', [], config).map(item => item.tileValue)).toEqual(['10', '2', '1'])
+  })
+})

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

@@ -4,6 +4,7 @@ import {
   getTooltipMarkerColor,
   getTooltipMarkerShape,
   shouldUseTooltipLegendMarkers,
+  shouldShowTooltipSeriesRow,
   tooltipHasMarkerColumn,
   tooltipShouldUseMarkerColumn,
   type TooltipRow
@@ -148,4 +149,83 @@ describe('tooltipHelpers', () => {
     expect(ambiguousMarkers).not.toContain('tooltip-body--marker-layout')
     expect(ambiguousMarkers).not.toContain('tooltip-marker-slot')
   })
+
+  it('shows normal tooltip series rows by default when isolate has no legend selection', () => {
+    expect(
+      shouldShowTooltipSeriesRow({
+        legendBehavior: 'isolate',
+        seriesHighlight: [],
+        seriesKey: 'cases'
+      })
+    ).toBe(true)
+    expect(
+      shouldShowTooltipSeriesRow({
+        seriesKey: 'deaths'
+      })
+    ).toBe(true)
+  })
+
+  it('limits normal tooltip series rows to one isolated legend selection', () => {
+    expect(
+      shouldShowTooltipSeriesRow({
+        legendBehavior: 'isolate',
+        seriesHighlight: ['cases'],
+        seriesKey: 'cases'
+      })
+    ).toBe(true)
+    expect(
+      shouldShowTooltipSeriesRow({
+        legendBehavior: 'isolate',
+        seriesHighlight: ['cases'],
+        seriesKey: 'deaths'
+      })
+    ).toBe(false)
+  })
+
+  it('limits normal tooltip series rows to multiple isolated legend selections', () => {
+    expect(
+      shouldShowTooltipSeriesRow({
+        legendBehavior: 'isolate',
+        seriesHighlight: ['cases', 'hospitalizations'],
+        seriesKey: 'hospitalizations'
+      })
+    ).toBe(true)
+    expect(
+      shouldShowTooltipSeriesRow({
+        legendBehavior: 'isolate',
+        seriesHighlight: ['cases', 'hospitalizations'],
+        seriesKey: 'deaths'
+      })
+    ).toBe(false)
+  })
+
+  it('keeps all normal tooltip series rows visible in highlight mode with selected series', () => {
+    expect(
+      shouldShowTooltipSeriesRow({
+        legendBehavior: 'highlight',
+        seriesHighlight: ['cases'],
+        seriesKey: 'deaths'
+      })
+    ).toBe(true)
+  })
+
+  it('can filter normal tooltip rows while preserving headings and additional columns', () => {
+    const rows: TooltipRow[] = [
+      { key: 'Date', value: '2024-01-01', kind: 'heading' },
+      { key: 'Cases', value: '10', kind: 'series', seriesKey: 'cases' },
+      { key: 'Deaths', value: '2', kind: 'series', seriesKey: 'deaths' },
+      { key: 'Source', value: 'CDC', kind: 'extra' }
+    ]
+    const filteredRows = rows.filter(
+      row =>
+        row.kind !== 'series' ||
+        shouldShowTooltipSeriesRow({
+          legendBehavior: 'isolate',
+          seriesHighlight: ['cases'],
+          seriesKey: row.seriesKey
+        })
+    )
+
+    expect(filteredRows.map(row => row.key)).toEqual(['Date', 'Cases', 'Source'])
+  })
 })

package/src/helpers/tooltipHelpers.ts

@@ -84,6 +84,22 @@ export const getTooltipSeriesMarker = (
 
 export const buildTooltipRow = (row: TooltipRow): TooltipRow => row
 
+export const shouldShowTooltipSeriesRow = ({
+  legendBehavior,
+  seriesHighlight = [],
+  seriesKey
+}: {
+  legendBehavior?: string
+  seriesHighlight?: string[]
+  seriesKey?: string
+}): boolean => {
+  if (legendBehavior === 'isolate' && seriesHighlight.length > 0 && seriesKey) {
+    return seriesHighlight.includes(seriesKey)
+  }
+
+  return true
+}
+
 const getMarkerSignature = ({
   markerColor,
   markerShape = 'circle'

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

@@ -27,6 +27,29 @@ const createComboConfig = () =>
   })
 
 describe('useRightAxis', () => {
+  it('does not render a right axis for vertical Combo charts with only left-axis series', () => {
+    const config = createMockConfig({
+      visualizationType: 'Combo',
+      orientation: 'vertical',
+      series: [leftSeries],
+      yAxis: {
+        ...createMockConfig().yAxis,
+        rightHideAxis: true
+      },
+      runtime: {
+        ...createMockConfig().runtime,
+        series: [leftSeries],
+        seriesKeys: ['Cases'],
+        barSeriesKeys: ['Cases'],
+        lineSeriesKeys: []
+      } as any
+    })
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5 }] }))
+
+    expect(result.result.current.hasRightAxis).toBe(false)
+  })
+
   it('builds the right-axis scale from the supplied domain rows', () => {
     const config = createComboConfig()
     const renderedRows = [{ Cases: 5, Rate: 12 }]
@@ -57,7 +80,22 @@ describe('useRightAxis', () => {
     expect(result.result.current.rightTickValues).toBeUndefined()
   })
 
-  it('does not finalize right-axis ticks from the inherited mixed Combo min', () => {
+  it('auto-starts positive right-axis data at zero without depending on series-type runtime keys', () => {
+    const config = {
+      ...createComboConfig(),
+      runtime: {
+        ...createComboConfig().runtime,
+        barSeriesKeys: [],
+        lineSeriesKeys: []
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 25 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 25])
+  })
+
+  it('does not let left-axis negative data affect the right-axis minimum', () => {
     const config = {
       ...createComboConfig(),
       yAxis: {
@@ -68,10 +106,113 @@ describe('useRightAxis', () => {
 
     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.yScaleRight.domain()).toEqual([0, 6])
     expect(result.result.current.rightTickValues).toBeUndefined()
   })
 
+  it('honors a positive rightMin below the right-axis data minimum', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        rightMin: '90',
+        rightMax: '100'
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 95 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([90, 100])
+  })
+
+  it('uses formatted numeric strings when calculating the right-axis domain', () => {
+    const config = createComboConfig()
+
+    const result = renderHook(() =>
+      useRightAxis({
+        config,
+        yMax: 100,
+        data: [
+          { Cases: 5, Rate: '$1,000' },
+          { Cases: 6, Rate: '2,500' }
+        ]
+      })
+    )
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 2500])
+  })
+
+  it('ignores a rightMin above the right-axis data minimum and defaults positive domains to zero', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        rightMin: '98'
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 95 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 95])
+  })
+
+  it('uses a negative minimum when right-axis data is negative', () => {
+    const config = createComboConfig()
+
+    const result = renderHook(() =>
+      useRightAxis({
+        config,
+        yMax: 100,
+        data: [
+          { Cases: 5, Rate: -12 },
+          { Cases: 6, Rate: -3 }
+        ]
+      })
+    )
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([-12, -3])
+  })
+
+  it('ignores values that are empty after right-axis numeric cleanup', () => {
+    const config = createComboConfig()
+
+    const result = renderHook(() =>
+      useRightAxis({
+        config,
+        yMax: 100,
+        data: [
+          { Cases: 5, Rate: '$' },
+          { Cases: 6, Rate: '-12' }
+        ]
+      })
+    )
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([-12, -12])
+  })
+
+  it('honors a negative rightMin below the right-axis data minimum', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        rightMin: '-20'
+      }
+    }
+
+    const result = renderHook(() =>
+      useRightAxis({
+        config,
+        yMax: 100,
+        data: [
+          { Cases: 5, Rate: -12 },
+          { Cases: 6, Rate: -3 }
+        ]
+      })
+    )
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([-20, -3])
+  })
+
   it('does not round the right-axis max when rightMax is explicit', () => {
     const config = {
       ...createComboConfig(),

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

@@ -106,12 +106,9 @@ describe('useScales', () => {
       }
     })
 
-    renderHook(
-      () => useScales({ ...baseProps, config: configWithManualPadding, hasSpacedInlineLabel: true }),
-      {
-        wrapper: createWrapper()
-      }
-    )
+    renderHook(() => useScales({ ...baseProps, config: configWithManualPadding, hasSpacedInlineLabel: true }), {
+      wrapper: createWrapper()
+    })
 
     expect(mockGetMinMax.mock.calls[0][0].config.yAxis).toMatchObject({
       enablePadding: false,