@cdc/chart 4.26.4 → 4.26.6

package/src/helpers/smallMultiplesHelpers.ts

@@ -1,6 +1,7 @@
 import { scaleOrdinal } from '@visx/scale'
 import { getColorScale } from './getColorScale'
 import { ColorScale } from '../types/ChartContext'
+import { hasSeriesColorAssignmentOverrides } from './colorAssignmentHelpers'
 
 /**
  * Get filtered data for a specific tile based on its mode
@@ -206,6 +207,10 @@ export const getFullColorPalette = (config, numberOfTiles) => {
 export const createTileColorScale = (tileItem, config, originalColorScale, tileIndex, numberOfTiles) => {
   const colorMode = config.smallMultiples?.colorMode || 'same'
 
+  if (tileItem.mode === 'by-series' && hasSeriesColorAssignmentOverrides(config)) {
+    return originalColorScale
+  }
+
   if (colorMode === 'same') {
     if (tileItem.mode === 'by-series') {
       // Same mode + by-series: All tiles use the same color

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

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+import { AXIS_LABEL_FONT_SIZE, AXIS_LABEL_FONT_SIZE_SMALL, getAxisLabelFontSize } from '../axisLabelFontSize'
+
+describe('axisLabelFontSize', () => {
+  it('returns the desktop axis label size for non-mobile visualization viewports', () => {
+    expect(getAxisLabelFontSize('sm')).toBe(AXIS_LABEL_FONT_SIZE)
+    expect(getAxisLabelFontSize('md')).toBe(AXIS_LABEL_FONT_SIZE)
+    expect(getAxisLabelFontSize('lg')).toBe(AXIS_LABEL_FONT_SIZE)
+  })
+
+  it('returns the compact axis label size for mobile visualization viewports', () => {
+    expect(getAxisLabelFontSize('xxs')).toBe(AXIS_LABEL_FONT_SIZE_SMALL)
+    expect(getAxisLabelFontSize('xs')).toBe(AXIS_LABEL_FONT_SIZE_SMALL)
+  })
+})

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

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import { buildBumpChartTooltipHtml } from '../bumpChartTooltip'
+
+const buildConfig = overrides => ({
+  xAxis: {
+    dataKey: 'Timestamp',
+    type: 'date-time'
+  },
+  tooltips: {
+    dateDisplayFormat: '%Y'
+  },
+  columns: {
+    Timestamp: {
+      name: 'Timestamp',
+      label: 'Year',
+      tooltips: true
+    },
+    Frequency: {
+      name: 'Frequency',
+      label: 'Frequency',
+      tooltips: true
+    }
+  },
+  legend: {
+    hide: false,
+    style: 'circles',
+    groupBy: ''
+  },
+  runtime: {
+    xAxis: {
+      label: 'Year'
+    },
+    seriesLabels: {
+      Rank: 'Rank'
+    },
+    seriesLabelsAll: ['Rank', 'Other'],
+    seriesKeys: ['Rank', 'Other']
+  },
+  visualizationType: 'Bump Chart',
+  series: [{ dataKey: 'Rank' }, { dataKey: 'Other' }],
+  ...overrides
+})
+
+const helpers = {
+  parseDate: (value: string) => new Date(value),
+  formatDate: (date: Date) => String(date.getUTCFullYear()),
+  formatTooltipsDate: (date: Date) => `tooltip-${date.getUTCFullYear()}`
+}
+
+describe('buildBumpChartTooltipHtml', () => {
+  it('uses the shared x-axis formatter in the tooltip heading', () => {
+    const html = buildBumpChartTooltipHtml({
+      config: buildConfig(),
+      colorScale: undefined,
+      dataRow: { Timestamp: '2014-01-01T00:00:00.000Z', Rank: '1', Frequency: '149' },
+      series: { dataKey: 'Rank' },
+      helpers
+    })
+
+    expect(html).toContain('Year: tooltip-2014')
+  })
+
+  it('does not render the raw x-axis value as an extra tooltip row', () => {
+    const html = buildBumpChartTooltipHtml({
+      config: buildConfig(),
+      colorScale: undefined,
+      dataRow: { Timestamp: '2014-01-01T00:00:00.000Z', Rank: '1', Frequency: '149' },
+      series: { dataKey: 'Rank' },
+      helpers
+    })
+
+    expect(html).not.toContain('2014-01-01T00:00:00.000Z')
+    expect(html).toContain('Frequency: 149')
+  })
+})

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

@@ -0,0 +1,38 @@
+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 { calculateLeftYAxisWidth } from '../calculateLeftYAxisWidth'
+
+describe('calculateLeftYAxisWidth', () => {
+  it('prefers supplied tick values when measuring labels', () => {
+    const handleLeftTickFormatting = vi.fn(tick => String(tick))
+    const yScale = {
+      ticks: vi.fn(() => [0, 5000, 10000]),
+      domain: vi.fn(() => [0, 10000])
+    }
+
+    calculateLeftYAxisWidth({
+      config: createMockConfig({
+        yAxis: {
+          ...createMockConfig().yAxis,
+          titlePlacement: 'side'
+        }
+      }),
+      data: [],
+      yScale,
+      numTicks: 3,
+      tickValues: [0, 5, 10],
+      parentWidth: 400,
+      tickLabelFont: 'normal 16px sans-serif',
+      axisLabelFontSize: 16,
+      handleLeftTickFormatting
+    })
+
+    expect(yScale.ticks).not.toHaveBeenCalled()
+    expect(handleLeftTickFormatting.mock.calls.map(call => call[0])).toEqual([0, 5, 10])
+  })
+})

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

@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest'
+import { getSeriesWithData } from '../dataHelpers'
+import { ChartConfig } from '../../types/ChartConfig'
+
+type SeriesInput = {
+  dataKey: string
+  name?: string
+  type?: string
+  dynamicCategory?: string
+  originalDataKey?: string
+}
+
+const buildConfig = (
+  data: Record<string, unknown>[],
+  series: SeriesInput[],
+  overrides: Partial<ChartConfig> = {}
+): ChartConfig =>
+  ({
+    data,
+    filters: [],
+    legend: { colorCode: '' },
+    runtime: { series },
+    ...overrides
+  } as unknown as ChartConfig)
+
+describe('getSeriesWithData', () => {
+  it('includes a series that has at least one numeric non-zero value', () => {
+    const config = buildConfig(
+      [{ percent_mild: '3.8' }, { percent_mild: '0.0' }],
+      [{ dataKey: 'percent_mild', name: 'Mild', type: 'Bar' }]
+    )
+    expect(getSeriesWithData(config)).toEqual(['Mild'])
+  })
+
+  it('excludes a series whose values are all zero (0 and "0.0")', () => {
+    const config = buildConfig(
+      [{ percent_fever_notemp: '0.0' }, { percent_fever_notemp: 0 }],
+      [{ dataKey: 'percent_fever_notemp', name: 'Reported fever', type: 'Bar' }]
+    )
+    expect(getSeriesWithData(config)).toEqual([])
+  })
+
+  it('keeps a series that has a single non-zero value among zeros', () => {
+    const config = buildConfig(
+      [{ percent_mild: '0.0' }, { percent_mild: '0.0' }, { percent_mild: '1.2' }],
+      [{ dataKey: 'percent_mild', name: 'Mild', type: 'Bar' }]
+    )
+    expect(getSeriesWithData(config)).toEqual(['Mild'])
+  })
+
+  it('treats non-numeric placeholder strings as no data', () => {
+    const config = buildConfig(
+      [{ percent_fever_notemp: 'Not applicable' }, { percent_fever_notemp: '<1.0' }, { percent_fever_notemp: '' }],
+      [{ dataKey: 'percent_fever_notemp', name: 'Reported fever', type: 'Bar' }]
+    )
+    expect(getSeriesWithData(config)).toEqual([])
+  })
+
+  it('treats null and undefined values as no data', () => {
+    const config = buildConfig(
+      [{ percent_fever_notemp: null }, { percent_fever_notemp: undefined }],
+      [{ dataKey: 'percent_fever_notemp', name: 'Reported fever', type: 'Bar' }]
+    )
+    expect(getSeriesWithData(config)).toEqual([])
+  })
+
+  it('counts comma- and dollar-formatted numeric strings as data', () => {
+    const config = buildConfig(
+      [{ revenue: '$1,000' }, { revenue: '0.0' }],
+      [{ dataKey: 'revenue', name: 'Revenue', type: 'Bar' }]
+    )
+    expect(getSeriesWithData(config)).toEqual(['Revenue'])
+  })
+
+  it('counts negative non-zero values as data', () => {
+    const config = buildConfig([{ delta: '-5' }, { delta: '0' }], [{ dataKey: 'delta', name: 'Delta', type: 'Bar' }])
+    expect(getSeriesWithData(config)).toEqual(['Delta'])
+  })
+
+  it('applies active filters before evaluating series data', () => {
+    const config = buildConfig(
+      [
+        { reaction: 'Headache', percent_fever_notemp: '0.0', percent_mild: '3.8' },
+        { reaction: 'Fever or feverish', percent_fever_notemp: '0.9', percent_mild: '0.0' }
+      ],
+      [
+        { dataKey: 'percent_mild', name: 'Mild', type: 'Bar' },
+        { dataKey: 'percent_fever_notemp', name: 'Reported fever', type: 'Bar' }
+      ],
+      { filters: [{ columnName: 'reaction', active: 'Headache' }] as ChartConfig['filters'] }
+    )
+    // Under "Headache" the fever column is all zeros, so it drops out of the legend.
+    expect(getSeriesWithData(config)).toEqual(['Mild'])
+  })
+
+  it('uses originalDataKey for dynamicCategory series', () => {
+    const config = buildConfig(
+      [
+        { category: 'a', value: '4.2', label: 'a-value' },
+        { category: 'b', value: '0.0', label: 'b-value' }
+      ],
+      [
+        {
+          dataKey: 'a',
+          name: 'A',
+          type: 'Bar',
+          dynamicCategory: 'category',
+          originalDataKey: 'value'
+        },
+        {
+          dataKey: 'b',
+          name: 'B',
+          type: 'Bar',
+          dynamicCategory: 'category',
+          originalDataKey: 'value'
+        }
+      ]
+    )
+    // Series "a" has a non-zero value; series "b" is zero only.
+    expect(getSeriesWithData(config)).toEqual(['A'])
+  })
+
+  it('splits color-coded Bar series by colorCode values', () => {
+    const config = buildConfig(
+      [
+        { group: 'North', amount: '5' },
+        { group: 'South', amount: '0.0' }
+      ],
+      [{ dataKey: 'amount', name: 'Amount', type: 'Bar' }],
+      { legend: { colorCode: 'group' } as ChartConfig['legend'] }
+    )
+    // Only the "North" rows carry a non-zero amount.
+    expect(getSeriesWithData(config)).toEqual(['North'])
+  })
+})

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

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { ensureSpecialChartAxisTypes } from '../ensureSpecialChartAxisTypes'
+
+describe('ensureSpecialChartAxisTypes', () => {
+  it('forces bump charts to use a date-time x-axis', () => {
+    const config = {
+      visualizationType: 'Bump Chart',
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'Timestamp',
+        dateParseFormat: '%m/%d/%Y',
+        dateDisplayFormat: '%Y'
+      }
+    }
+
+    expect(ensureSpecialChartAxisTypes(config as any).xAxis.type).toBe('date-time')
+  })
+
+  it('leaves non-bump chart axis types unchanged', () => {
+    const config = {
+      visualizationType: 'Line',
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'Category'
+      }
+    }
+
+    expect(ensureSpecialChartAxisTypes(config as any).xAxis.type).toBe('categorical')
+  })
+})

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

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { getAxisMaxOverride } from '../getAxisMaxOverride'
+
+describe('getAxisMaxOverride', () => {
+  it('accepts finite entered values that meet the required max', () => {
+    expect(getAxisMaxOverride({ value: '25', minimumValidMax: 20 })).toEqual({
+      hasEnteredMax: true,
+      hasValidMax: true,
+      maxNumber: 25
+    })
+  })
+
+  it('rejects missing or empty entered values', () => {
+    expect(getAxisMaxOverride({ value: undefined, minimumValidMax: 0 }).hasValidMax).toBe(false)
+    expect(getAxisMaxOverride({ value: null, minimumValidMax: 0 }).hasValidMax).toBe(false)
+    expect(getAxisMaxOverride({ value: '', minimumValidMax: 0 }).hasValidMax).toBe(false)
+  })
+
+  it('rejects non-finite entered values', () => {
+    expect(getAxisMaxOverride({ value: 'not-a-number', minimumValidMax: 0 }).hasValidMax).toBe(false)
+    expect(getAxisMaxOverride({ value: Infinity, minimumValidMax: 0 }).hasValidMax).toBe(false)
+  })
+
+  it('rejects entered values below the required max', () => {
+    expect(getAxisMaxOverride({ value: '19', minimumValidMax: 20 })).toMatchObject({
+      hasEnteredMax: true,
+      hasValidMax: false,
+      maxNumber: 19
+    })
+  })
+
+  it('supports the non-positive primary-axis rule by passing zero as the required max', () => {
+    expect(getAxisMaxOverride({ value: '0', minimumValidMax: 0 }).hasValidMax).toBe(true)
+    expect(getAxisMaxOverride({ value: '-1', minimumValidMax: 0 }).hasValidMax).toBe(false)
+  })
+})

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

@@ -0,0 +1,165 @@
+import { describe, expect, it } from 'vitest'
+import { getCleanTopTickMax, getCleanTopTickMaxCandidates, getFinalTopTickMax } from '../getCleanTopTickMax'
+
+describe('getCleanTopTickMax', () => {
+  it('rounds automatic max values with the clean-top-tick mantissa ladder', () => {
+    expect(getCleanTopTickMaxCandidates()).toEqual([1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10])
+
+    expect([
+      [0.0049, getCleanTopTickMax(0.0049)],
+      [0.011, getCleanTopTickMax(0.011)],
+      [0.012, getCleanTopTickMax(0.012)],
+      [1.1, getCleanTopTickMax(1.1)],
+      [1.2, getCleanTopTickMax(1.2)],
+      [3, getCleanTopTickMax(3)],
+      [5, getCleanTopTickMax(5)],
+      [5.1, getCleanTopTickMax(5.1)],
+      [7, getCleanTopTickMax(7)],
+      [7.2, getCleanTopTickMax(7.2)],
+      [8, getCleanTopTickMax(8)],
+      [9, getCleanTopTickMax(9)],
+      [25, getCleanTopTickMax(25)],
+      [89, getCleanTopTickMax(89)],
+      [101, getCleanTopTickMax(101)],
+      [1434, getCleanTopTickMax(1434)],
+      [1470, getCleanTopTickMax(1470)],
+      [1490, getCleanTopTickMax(1490)],
+      [1675, getCleanTopTickMax(1675)],
+      [2340, getCleanTopTickMax(2340)],
+      [5678, getCleanTopTickMax(5678)],
+      [8999, getCleanTopTickMax(8999)]
+    ]).toEqual([
+      [0.0049, 0.005],
+      [0.011, 0.012],
+      [0.012, 0.012],
+      [1.1, 1.2],
+      [1.2, 1.2],
+      [3, 3],
+      [5, 5],
+      [5.1, 6],
+      [7, 8],
+      [7.2, 8],
+      [8, 8],
+      [9, 10],
+      [25, 25],
+      [89, 100],
+      [101, 120],
+      [1434, 1500],
+      [1470, 1500],
+      [1490, 1500],
+      [1675, 2000],
+      [2340, 2500],
+      [5678, 6000],
+      [8999, 10000]
+    ])
+  })
+
+  it('leaves non-finite values unchanged', () => {
+    expect(getCleanTopTickMax(Infinity)).toBe(Infinity)
+    expect(Number.isNaN(getCleanTopTickMax(NaN))).toBe(true)
+  })
+
+  it('leaves non-positive values unchanged', () => {
+    expect(getCleanTopTickMax(0)).toBe(0)
+    expect(getCleanTopTickMax(-1)).toBe(-1)
+  })
+})
+
+describe('getFinalTopTickMax', () => {
+  it('advances clean max values to the next generated tick interval when the top tick is below the max', () => {
+    expect(
+      getFinalTopTickMax({
+        currentMax: 12,
+        rawMax: 12,
+        ticks: [0, 5, 10],
+        shouldUseCleanTopTick: true
+      })
+    ).toEqual({ max: 15, tickValues: [0, 5, 10, 15] })
+
+    expect(
+      getFinalTopTickMax({
+        currentMax: 25,
+        rawMax: 25,
+        ticks: [0, 10, 20],
+        shouldUseCleanTopTick: true
+      })
+    ).toEqual({ max: 30, tickValues: [0, 10, 20, 30] })
+  })
+
+  it('keeps a clean max when the generated top tick already reaches it', () => {
+    expect(
+      getFinalTopTickMax({
+        currentMax: 12,
+        rawMax: 12,
+        ticks: [0, 2, 4, 6, 8, 10, 12],
+        shouldUseCleanTopTick: true
+      })
+    ).toEqual({ max: 12, tickValues: [0, 2, 4, 6, 8, 10, 12] })
+  })
+
+  it('does not advance for floating-point dust above the generated top tick', () => {
+    expect(
+      getFinalTopTickMax({
+        currentMax: 0.6000000000000001,
+        rawMax: 0.6,
+        ticks: [0, 0.2, 0.4, 0.6],
+        shouldUseCleanTopTick: true
+      })
+    ).toEqual({ max: 0.6, tickValues: [0, 0.2, 0.4, 0.6] })
+  })
+
+  it('adds one more interval for spaced inline labels when the raw max is too close to the top tick', () => {
+    expect(
+      getFinalTopTickMax({
+        currentMax: 14.4,
+        rawMax: 14.4,
+        ticks: [0, 5, 10, 15],
+        shouldUseCleanTopTick: true,
+        headroomMode: 'inline-label'
+      })
+    ).toEqual({ max: 20, tickValues: [0, 5, 10, 15, 20] })
+
+    expect(
+      getFinalTopTickMax({
+        currentMax: 11.25,
+        rawMax: 11.25,
+        ticks: [0, 5, 10, 15],
+        shouldUseCleanTopTick: true,
+        headroomMode: 'inline-label'
+      })
+    ).toEqual({ max: 15, tickValues: [0, 5, 10, 15] })
+  })
+
+  it('finalizes tiny spaced inline-label domains and includes the top tick', () => {
+    expect(
+      getFinalTopTickMax({
+        currentMax: 0.015,
+        rawMax: 0.015,
+        ticks: [0, 0.005, 0.01, 0.015],
+        shouldUseCleanTopTick: true,
+        headroomMode: 'inline-label'
+      })
+    ).toEqual({ max: 0.02, tickValues: [0, 0.005, 0.01, 0.015, 0.02] })
+
+    expect(
+      getFinalTopTickMax({
+        currentMax: 0.019,
+        rawMax: 0.019,
+        ticks: [0, 0.005, 0.01, 0.015],
+        shouldUseCleanTopTick: true,
+        headroomMode: 'inline-label'
+      })
+    ).toEqual({ max: 0.025, tickValues: [0, 0.005, 0.01, 0.015, 0.02, 0.025] })
+  })
+
+  it('does not change the max when effective clean-top-tick is disabled', () => {
+    expect(
+      getFinalTopTickMax({
+        currentMax: 12,
+        rawMax: 12,
+        ticks: [0, 5, 10],
+        shouldUseCleanTopTick: false
+      })
+    ).toEqual({ max: 12 })
+  })
+})