@cdc/chart 4.26.5 → 4.26.7

package/src/helpers/tests/{getYAxisAutoPaddingMode.test.ts → hasSpacedInlineLabel.test.ts}

@@ -1,11 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { getYAxisAutoPaddingMode } from '../getYAxisAutoPaddingMode'
+import { hasSpacedInlineLabel } from '../hasSpacedInlineLabel'
 import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
 
-describe('getYAxisAutoPaddingMode', () => {
-  it('returns inline-label for multi-word inline labels', () => {
+describe('hasSpacedInlineLabel', () => {
+  it('returns true for multi-word inline labels', () => {
     expect(
-      getYAxisAutoPaddingMode(
+      hasSpacedInlineLabel(
         createMockConfig({
           yAxis: {
             ...createMockConfig().yAxis,
@@ -14,12 +14,12 @@ describe('getYAxisAutoPaddingMode', () => {
           }
         })
       )
-    ).toBe('inline-label')
+    ).toBe(true)
   })
 
-  it('returns inline-label for inline labels with leading space', () => {
+  it('returns true for inline labels with leading space', () => {
     expect(
-      getYAxisAutoPaddingMode(
+      hasSpacedInlineLabel(
         createMockConfig({
           yAxis: {
             ...createMockConfig().yAxis,
@@ -28,12 +28,12 @@ describe('getYAxisAutoPaddingMode', () => {
           }
         })
       )
-    ).toBe('inline-label')
+    ).toBe(true)
   })
 
-  it('returns top-title for top y-axis titles with label content', () => {
+  it('returns false for top y-axis titles with empty inline labels', () => {
     expect(
-      getYAxisAutoPaddingMode(
+      hasSpacedInlineLabel(
         createMockConfig({
           yAxis: {
             ...createMockConfig().yAxis,
@@ -42,27 +42,12 @@ describe('getYAxisAutoPaddingMode', () => {
           }
         })
       )
-    ).toBe('top-title')
+    ).toBe(false)
   })
 
-  it('returns none for hidden top y-axis titles', () => {
+  it('returns false when the inline label has no spaces', () => {
     expect(
-      getYAxisAutoPaddingMode(
-        createMockConfig({
-          hideYAxisLabel: true,
-          yAxis: {
-            ...createMockConfig().yAxis,
-            titlePlacement: 'top',
-            inlineLabel: ''
-          }
-        })
-      )
-    ).toBe('none')
-  })
-
-  it('returns none when neither trigger applies', () => {
-    expect(
-      getYAxisAutoPaddingMode(
+      hasSpacedInlineLabel(
         createMockConfig({
           yAxis: {
             ...createMockConfig().yAxis,
@@ -71,12 +56,12 @@ describe('getYAxisAutoPaddingMode', () => {
           }
         })
       )
-    ).toBe('none')
+    ).toBe(false)
   })
 
-  it('returns inline-label when both triggers are present', () => {
+  it('returns true for spaced inline labels regardless of title placement', () => {
     expect(
-      getYAxisAutoPaddingMode(
+      hasSpacedInlineLabel(
         createMockConfig({
           yAxis: {
             ...createMockConfig().yAxis,
@@ -85,6 +70,6 @@ describe('getYAxisAutoPaddingMode', () => {
           }
         })
       )
-    ).toBe('inline-label')
+    ).toBe(true)
   })
 })

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

@@ -53,6 +53,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,22 +79,79 @@ 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({
-        prefix: '',
+        prefix: '$',
         suffix: ' units',
         roundToPlace: 0,
         commas: false
       })
     ).toEqual({
-      addColPrefix: '',
+      addColPrefix: '$',
       addColSuffix: ' units',
       addColRoundTo: 0,
       addColCommas: false
     })
   })
 
+  it('ignores blank prefix and suffix overrides so global formatting can apply', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        prefix: '',
+        suffix: '',
+        roundToPlace: 0,
+        commas: false
+      })
+    ).toEqual({
+      addColRoundTo: 0,
+      addColCommas: false
+    })
+  })
+
+  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()
   })

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,268 @@
+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('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 }]
+    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('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: {
+        ...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([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(),
+      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])
+  })
+})