@cdc/chart 4.26.7 → 4.26.10

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

@@ -72,4 +72,33 @@ describe('buildBumpChartTooltipHtml', () => {
     expect(html).not.toContain('2014-01-01T00:00:00.000Z')
     expect(html).toContain('Frequency: 149')
   })
+
+  it('uses a customized column label instead of the active runtime series name', () => {
+    const html = buildBumpChartTooltipHtml({
+      config: buildConfig({
+        columns: {
+          Rank: { name: 'Rank', label: 'Rank Label' }
+        }
+      }),
+      colorScale: undefined,
+      dataRow: { Timestamp: '2014-01-01T00:00:00.000Z', Rank: '1' },
+      series: { dataKey: 'Rank', name: 'Runtime Rank' },
+      helpers
+    })
+
+    expect(html).toContain('Rank Label: 1')
+    expect(html).not.toContain('Runtime Rank: 1')
+  })
+
+  it('falls back to the series name when the column label matches the data key', () => {
+    const html = buildBumpChartTooltipHtml({
+      config: buildConfig(),
+      colorScale: undefined,
+      dataRow: { Timestamp: '2014-01-01T00:00:00.000Z', Rank: '1' },
+      series: { dataKey: 'Rank', name: 'Runtime Rank' },
+      helpers
+    })
+
+    expect(html).toContain('Runtime Rank: 1')
+  })
 })

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

@@ -0,0 +1,105 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+vi.mock('@cdc/core/helpers/getTextWidth', () => ({
+  getTextWidth: (text: string) => text.length
+}))
+
+import { calculateRightYAxisWidth } from '../calculateRightYAxisWidth'
+
+const formatNumber = (value: any) => String(value)
+const tickLabelFont = 'normal 16px sans-serif'
+const axisLabelFontSize = 16
+
+const createRightAxisConfig = (yAxisOverrides = {}, runtimeYAxisOverrides = {}) => {
+  const baseConfig = createMockConfig()
+
+  return createMockConfig({
+    yAxis: {
+      ...baseConfig.yAxis,
+      rightAxisSize: 0,
+      rightHideAxis: false,
+      rightHideLabel: false,
+      rightHideTicks: false,
+      rightLabel: '',
+      rightLabelOffsetSize: 0,
+      rightTitlePlacement: 'top',
+      ...yAxisOverrides
+    },
+    runtime: {
+      ...baseConfig.runtime,
+      yAxis: {
+        ...baseConfig.runtime.yAxis,
+        rightHideTicks: false,
+        ...runtimeYAxisOverrides
+      }
+    }
+  })
+}
+
+describe('calculateRightYAxisWidth', () => {
+  it('uses measured right tick label space when saved rightAxisSize is zero', () => {
+    const width = calculateRightYAxisWidth({
+      axisLabelFontSize,
+      config: createRightAxisConfig(),
+      formatNumber,
+      tickLabelFont,
+      tickValues: [0, 1000],
+      yScaleRight: undefined
+    })
+
+    expect(width).toBe(17)
+  })
+
+  it('reserves measured side-title space after right tick labels while ignoring saved offset', () => {
+    const width = calculateRightYAxisWidth({
+      axisLabelFontSize,
+      config: createRightAxisConfig({
+        rightLabel: 'New Participants',
+        rightLabelOffsetSize: 36,
+        rightTitlePlacement: 'side'
+      }),
+      formatNumber,
+      tickLabelFont,
+      tickValues: [0, 10],
+      yScaleRight: undefined
+    })
+
+    expect(width).toBe(36)
+  })
+
+  it('ignores a larger saved rightAxisSize', () => {
+    const width = calculateRightYAxisWidth({
+      axisLabelFontSize,
+      config: createRightAxisConfig({ rightAxisSize: 100 }),
+      formatNumber,
+      tickLabelFont,
+      tickValues: [0, 1000],
+      yScaleRight: undefined
+    })
+
+    expect(width).toBe(17)
+  })
+
+  it('allows no gutter when all right-axis content is hidden', () => {
+    const width = calculateRightYAxisWidth({
+      axisLabelFontSize,
+      config: createRightAxisConfig(
+        {
+          rightHideAxis: true,
+          rightHideLabel: true,
+          rightTitlePlacement: 'top'
+        },
+        {
+          rightHideTicks: true
+        }
+      ),
+      formatNumber,
+      tickLabelFont,
+      tickValues: [],
+      yScaleRight: undefined
+    })
+
+    expect(width).toBe(0)
+  })
+})

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

@@ -31,6 +31,17 @@ describe('countNumOfTicks', () => {
     expect(result).toBe(6)
   })
 
+  it('treats a null viewport override like the historical missing value', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6, viewportNumTicks: null } },
+      currentViewport: 'xs',
+      isHorizontal: false
+    })
+    expect(result).toBe(6)
+  })
+
   it('falls back to numTicks when current viewport has no entry in viewportNumTicks', () => {
     const result = countNumOfTicks({
       ...baseArgs,

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

@@ -0,0 +1,182 @@
+import defaults from '../../data/initial-state'
+import { createNewChartConfig } from '../createNewChartConfig'
+import { CURRENT_COVE_CONFIG_VERSION } from '@cdc/core/helpers/coveUpdateWorker'
+
+describe('createNewChartConfig', () => {
+  it('deeply combines starter settings with current chart defaults', () => {
+    const starterConfig = {
+      type: 'chart',
+      visualizationType: 'Bar',
+      xAxis: { type: 'categorical', size: 100 },
+      filters: []
+    }
+
+    const config = createNewChartConfig(starterConfig)
+
+    expect(config).toMatchObject({
+      type: 'chart',
+      visualizationType: 'Bar',
+      version: CURRENT_COVE_CONFIG_VERSION,
+      titleStyle: 'small',
+      barThickness: defaults.barThickness,
+      xAxis: {
+        type: 'categorical',
+        size: 100,
+        numTicks: 6,
+        viewportNumTicks: { xs: 4, xxs: 4 }
+      },
+      yAxis: {
+        titlePlacement: 'top',
+        labelPlacement: 'On Date/Category Axis',
+        numTicks: 4,
+        gridLines: true,
+        hideAxis: true,
+        hideTicks: true,
+        autoMaxStrategy: 'clean-top-tick'
+      },
+      legend: { position: 'top', unified: true, expandForecastConfidenceIntervals: true },
+      table: {
+        download: true,
+        expanded: false,
+        show: true,
+        showDataTableLink: false,
+        stickyFirstColumn: false
+      },
+      dataFormat: { commas: true }
+    })
+    expect(config.filters).toEqual([])
+    expect(starterConfig).toEqual({
+      type: 'chart',
+      visualizationType: 'Bar',
+      xAxis: { type: 'categorical', size: 100 },
+      filters: []
+    })
+  })
+
+  it.each([
+    ['Area Chart', { visualizationSubType: 'stacked' }],
+    ['Forecasting', { xAxis: { type: 'date', dateParseFormat: '%Y-%m-%d', dateDisplayFormat: '%b. %-d %Y' } }],
+    ['HeatMap', { yAxis: { type: 'categorical', titlePlacement: 'top' }, legend: { position: 'top' } }],
+    ['Horizon Chart', { horizon: { numLayers: 4, mode: 'offset', bandGap: 15, bottomPadding: 15 } }],
+    ['Box Plot', { yAxis: { labelPlacement: 'On Date/Category Axis' } }],
+    ['Paired Bar', { orientation: 'horizontal' }],
+    ['Deviation Bar', { orientation: 'horizontal' }],
+    ['Bump Chart', { xAxis: { type: 'date-time' } }]
+  ])('authors the %s stable type contract', (visualizationType, expected) => {
+    expect(createNewChartConfig({ type: 'chart', visualizationType })).toMatchObject(expected)
+  })
+
+  it('uses horizontal axis visibility defaults while preserving explicit starter values', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      orientation: 'horizontal'
+    })
+
+    expect(config.xAxis).toMatchObject({ hideAxis: true, hideTicks: true })
+    expect(config.yAxis).toMatchObject({ hideAxis: false, hideTicks: false })
+
+    const explicitlyConfigured = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      orientation: 'horizontal',
+      xAxis: { hideAxis: false, hideTicks: false },
+      yAxis: { hideAxis: true, hideTicks: true }
+    })
+
+    expect(explicitlyConfigured.xAxis).toMatchObject({ hideAxis: false, hideTicks: false })
+    expect(explicitlyConfigured.yAxis).toMatchObject({ hideAxis: true, hideTicks: true })
+  })
+
+  it('uses dashboard-specific table visibility', () => {
+    const config = createNewChartConfig({ type: 'chart', visualizationType: 'Bar' }, { isDashboard: true })
+
+    expect(config.table.show).toBe(false)
+    expect(config.table.download).toBe(false)
+    expect(config.table.showDataTableLink).toBe(false)
+  })
+
+  it('preserves an explicit dashboard data table link opt-in', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      table: { showDataTableLink: true }
+    })
+
+    expect(config.table.showDataTableLink).toBe(true)
+  })
+
+  it('preserves an explicit table download opt-out', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      table: { download: false }
+    })
+
+    expect(config.table.download).toBe(false)
+  })
+
+  it('preserves an explicit unified legend opt-out', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      legend: { unified: false }
+    })
+
+    expect(config.legend.unified).toBe(false)
+  })
+
+  it('enables expanded forecast confidence interval legends for new charts', () => {
+    const config = createNewChartConfig({ type: 'chart', visualizationType: 'Forecasting' })
+
+    expect(config.legend.expandForecastConfidenceIntervals).toBe(true)
+  })
+
+  it('preserves an explicit expanded forecast confidence interval legend opt-out', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Forecasting',
+      legend: { expandForecastConfidenceIntervals: false }
+    })
+
+    expect(config.legend.expandForecastConfidenceIntervals).toBe(false)
+  })
+
+  it('uses compact label gaps and automatic ticks for a new HeatMap', () => {
+    const config = createNewChartConfig({ type: 'chart', visualizationType: 'HeatMap' })
+
+    expect(config.heatmap).toMatchObject({
+      rowLabelGap: 0,
+      columnLabelGap: 20,
+      horizontalScroll: false,
+      minColumnWidth: 44
+    })
+    expect(config.xAxis.manual).toBe(false)
+    expect(config.xAxis.numTicks).toBeUndefined()
+    expect(config.xAxis.viewportNumTicks).toEqual({})
+  })
+
+  it.each([
+    ['Bar', 'sequential_blue', false],
+    ['Line', 'qualitative_standard', false],
+    ['Horizon Chart', 'sequential_blue', false],
+    ['HeatMap', 'sequential_blue', false],
+    ['Sankey', 'sequential_bluereverse', true]
+  ])('uses the new-chart palette for %s charts', (visualizationType, name, isReversed) => {
+    const config = createNewChartConfig({ type: 'chart', visualizationType })
+
+    expect(config.general.palette).toMatchObject({ name, isReversed, version: '2.1' })
+    expect(defaults.general.palette.version).toBe('2.1')
+  })
+
+  it('preserves an explicit palette instead of replacing it with the chart-type default', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Line',
+      general: { palette: { name: 'qualitative_bold', isReversed: true, version: '2.1' } }
+    })
+
+    expect(config.general.palette).toMatchObject({ name: 'qualitative_bold', isReversed: true, version: '2.1' })
+    expect(defaults.general.palette.name).toBe('sequential_blue')
+  })
+})

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

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+
+import { getBoxPlotConfig } from '../getBoxPlotConfig'
+import { ChartConfig } from '../../types/ChartConfig'
+
+const createBoxPlotConfig = (): ChartConfig =>
+  ({
+    xAxis: {
+      dataKey: 'Group'
+    },
+    series: [
+      {
+        dataKey: 'Score'
+      }
+    ],
+    dataFormat: {
+      roundTo: 0
+    }
+  } as ChartConfig)
+
+describe('getBoxPlotConfig', () => {
+  it('sorts generated value arrays numerically for numeric strings', () => {
+    const data = [
+      { Group: 'Group A', Score: '1' },
+      { Group: 'Group A', Score: '2' },
+      { Group: 'Group A', Score: '3' },
+      { Group: 'Group A', Score: '10' },
+      { Group: 'Group A', Score: '20' },
+      { Group: 'Group A', Score: '100' }
+    ]
+
+    const [plots] = getBoxPlotConfig(createBoxPlotConfig(), data)
+
+    expect(plots[0].values).toEqual([1, 2, 3, 10, 20, 100])
+    expect(plots[0].columnNonOutliers).toEqual([1, 2, 3, 10, 20])
+    expect(plots[0].columnOutliers).toEqual([100])
+  })
+
+  it('parses formatted numeric strings before sorting', () => {
+    const data = [
+      { Group: 'Group A', Score: '1,234.5' },
+      { Group: 'Group A', Score: '20' },
+      { Group: 'Group A', Score: '3' }
+    ]
+
+    const [plots] = getBoxPlotConfig(createBoxPlotConfig(), data)
+
+    expect(plots[0].values).toEqual([3, 20, 1234.5])
+    expect(plots[0].columnCount).toBe(3)
+  })
+
+  it('ignores blank, null, and nonnumeric values when generating box plot stats', () => {
+    const data = [
+      { Group: 'Group A', Score: '1' },
+      { Group: 'Group A', Score: '' },
+      { Group: 'Group A', Score: null },
+      { Group: 'Group A', Score: undefined },
+      { Group: 'Group A', Score: 'n/a' },
+      { Group: 'Group A', Score: '2' },
+      { Group: 'Group A', Score: '3' }
+    ]
+
+    const [plots] = getBoxPlotConfig(createBoxPlotConfig(), data)
+
+    expect(plots[0].values).toEqual([1, 2, 3])
+    expect(plots[0].columnCount).toBe(3)
+    expect(plots[0].columnNonOutliers).toEqual([1, 2, 3])
+    expect(plots[0].columnOutliers).toEqual([])
+  })
+})

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

@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest'
+import { ChartConfig } from '../../types/ChartConfig'
+import { getColorCodeCategoryColorMap } from '../getColorCodeCategoryColorMap'
+
+const buildConfig = (
+  colorCode = 'Group',
+  paletteOverrides: Partial<ChartConfig['general']['palette']> = {}
+): ChartConfig =>
+  ({
+    visualizationType: 'Bar',
+    general: {
+      palette: {
+        name: 'sequential_blue',
+        version: '2.0',
+        ...paletteOverrides
+      }
+    },
+    legend: { colorCode }
+  } as ChartConfig)
+
+const colorPalettes = {
+  sequential_blue: Array.from({ length: 9 }, (_, index) => `#00000${index}`),
+  sequential_bluereverse: Array.from({ length: 9 }, (_, index) => `#00000${8 - index}`),
+  qualitative_standard: Array.from({ length: 9 }, (_, index) => `qualitative-${index}`)
+}
+
+describe('getColorCodeCategoryColorMap', () => {
+  it('assigns colors to unique categories in encounter order', () => {
+    const result = getColorCodeCategoryColorMap(
+      buildConfig(),
+      [{ Group: 'Group A' }, { Group: 'Group B' }, { Group: 'Group A' }],
+      colorPalettes
+    )
+
+    expect(Array.from(result.entries())).toEqual([
+      ['Group A', '#000000'],
+      ['Group B', '#000001']
+    ])
+  })
+
+  it('uses the 2.1 chart distribution for two categories in a sequential palette', () => {
+    const result = getColorCodeCategoryColorMap(
+      buildConfig('Group', { version: '2.1' }),
+      [{ Group: 'Group A' }, { Group: 'Group B' }, { Group: 'Group A' }],
+      colorPalettes
+    )
+
+    expect(Array.from(result.entries())).toEqual([
+      ['Group A', '#000004'],
+      ['Group B', '#000008']
+    ])
+  })
+
+  it('uses the full V2 chart distribution for three categories in a sequential palette', () => {
+    const result = getColorCodeCategoryColorMap(
+      buildConfig('Group', { version: '2.1' }),
+      [{ Group: 'Group A' }, { Group: 'Group B' }, { Group: 'Group C' }],
+      colorPalettes
+    )
+
+    expect(Array.from(result.values())).toEqual(['#000000', '#000004', '#000008'])
+  })
+
+  it('uses the V2 qualitative distribution for color-coded categories', () => {
+    const result = getColorCodeCategoryColorMap(
+      buildConfig('Group', { name: 'qualitative_standard', version: '2.1' }),
+      [{ Group: 'Group A' }, { Group: 'Group B' }, { Group: 'Group C' }],
+      colorPalettes
+    )
+
+    expect(Array.from(result.values())).toEqual(['qualitative-0', 'qualitative-4', 'qualitative-6'])
+  })
+
+  it('uses the V2 sequential colors in reverse order for a reversed palette', () => {
+    const rows = [{ Group: 'Group A' }, { Group: 'Group B' }]
+    const reversed = getColorCodeCategoryColorMap(
+      buildConfig('Group', {
+        name: 'sequential_bluereverse',
+        version: '2.1',
+        isReversed: true
+      }),
+      rows,
+      colorPalettes
+    )
+
+    expect(Array.from(reversed.values())).toEqual(['#000008', '#000004'])
+  })
+
+  it('preserves raw palette order for custom palettes', () => {
+    const rows = [{ Group: 'Group A' }, { Group: 'Group B' }]
+    const custom = getColorCodeCategoryColorMap(
+      buildConfig('Group', { version: '2.1', customColors: ['#111111', '#222222'] }),
+      rows,
+      colorPalettes
+    )
+
+    expect(Array.from(custom.values())).toEqual(['#111111', '#222222'])
+  })
+
+  it('repeats the palette when there are more categories than colors', () => {
+    const result = getColorCodeCategoryColorMap(
+      buildConfig(),
+      [{ Group: 'Group A' }, { Group: 'Group B' }, { Group: 'Group C' }],
+      colorPalettes
+    )
+
+    expect(Array.from(result.values())).toEqual(['#000000', '#000001', '#000002'])
+  })
+
+  it('returns an empty map without a color-code column', () => {
+    expect(getColorCodeCategoryColorMap(buildConfig(''), [{ Group: 'Group A' }], colorPalettes).size).toBe(0)
+  })
+})