@cdc/chart 4.26.5 → 4.26.7

package/src/helpers/seriesColumnSettings.ts

@@ -11,13 +11,23 @@ type ColumnFormattingParams = {
 }
 
 const hasOwn = (object: object, key: keyof Column) => Object.prototype.hasOwnProperty.call(object, key)
+const isNonEmptyString = (value: unknown) => typeof value === 'string' && value !== ''
+const getNumericRoundToPlace = (value: Column['roundToPlace']): number | undefined => {
+  if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
+    return undefined
+  }
+
+  const numericValue = Number(value)
+  if (!Number.isFinite(numericValue)) return undefined
+
+  return Math.max(0, Math.min(20, Math.round(numericValue)))
+}
 
 export const createDefaultSeriesColumnConfig = (columnName: string): Column => ({
   name: columnName,
   label: columnName,
   prefix: '',
   suffix: '',
-  roundToPlace: 0,
   commas: false,
   dataTable: true,
   order: undefined,
@@ -69,12 +79,18 @@ export const upsertSeriesColumnConfig = (
 ): ChartColumns => {
   const existingEntry = findColumnConfigByName(columns, seriesKey)
   const columnKey = existingEntry?.columnKey || seriesKey
-  const nextColumnConfig = {
+  const nextColumnConfig: Partial<Column> = {
     ...(existingEntry?.columnConfig || {}),
     ...updates,
     name: seriesKey
   }
 
+  Object.entries(updates).forEach(([key, value]) => {
+    if (value === undefined) {
+      delete nextColumnConfig[key as keyof Column]
+    }
+  })
+
   if (
     nextColumnConfig.label === undefined &&
     !hasOwn(existingEntry?.columnConfig || {}, 'label') &&
@@ -94,16 +110,19 @@ export const getSeriesColumnFormattingParams = (columnConfig?: Partial<Column>):
 
   const formattingParams: ColumnFormattingParams = {}
 
-  if (hasOwn(columnConfig, 'prefix')) {
-    formattingParams.addColPrefix = columnConfig.prefix ?? ''
+  if (hasOwn(columnConfig, 'prefix') && isNonEmptyString(columnConfig.prefix)) {
+    formattingParams.addColPrefix = columnConfig.prefix
   }
 
-  if (hasOwn(columnConfig, 'suffix')) {
-    formattingParams.addColSuffix = columnConfig.suffix ?? ''
+  if (hasOwn(columnConfig, 'suffix') && isNonEmptyString(columnConfig.suffix)) {
+    formattingParams.addColSuffix = columnConfig.suffix
   }
 
   if (hasOwn(columnConfig, 'roundToPlace')) {
-    formattingParams.addColRoundTo = columnConfig.roundToPlace ?? 0
+    const numericRoundToPlace = getNumericRoundToPlace(columnConfig.roundToPlace)
+    if (numericRoundToPlace !== undefined) {
+      formattingParams.addColRoundTo = numericRoundToPlace
+    }
   }
 
   if (hasOwn(columnConfig, 'commas')) {

package/src/helpers/sizeHelpers.ts

@@ -1,5 +1,3 @@
-import { clamp } from 'lodash'
-
 import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { ChartConfig, ViewportSize } from '../types/ChartConfig'
 import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'

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/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/categoryOrder.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+import { getOrderedCategoryValues, isCustomCategoryOrderActive, sortByCategoryOrder } from '../categoryOrder'
+
+describe('categoryOrder helpers', () => {
+  const data = [
+    { category: 'A', value: 1 },
+    { category: 'D', value: 4 },
+    { category: 'C', value: 3 },
+    { category: 'D', value: 5 },
+    { category: 'L', value: 12 }
+  ]
+
+  it('detects custom category order only for categorical axes with configured values', () => {
+    expect(
+      isCustomCategoryOrderActive({
+        xAxis: { type: 'categorical', dataKey: 'category', categoryOrderType: 'custom', categoryOrder: ['C'] } as any
+      })
+    ).toBe(true)
+
+    expect(
+      isCustomCategoryOrderActive({
+        xAxis: { type: 'date', dataKey: 'category', categoryOrderType: 'custom', categoryOrder: ['C'] } as any
+      })
+    ).toBe(false)
+  })
+
+  it('sorts rows by configured category order and keeps duplicate rows stable', () => {
+    const sorted = sortByCategoryOrder(data, {
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'category',
+        categoryOrderType: 'custom',
+        categoryOrder: ['A', 'C', 'D', 'L']
+      } as any
+    })
+
+    expect(sorted.map(row => row.category)).toEqual(['A', 'C', 'D', 'D', 'L'])
+    expect(sorted.map(row => row.value)).toEqual([1, 3, 4, 5, 12])
+  })
+
+  it('appends values missing from custom order in source order', () => {
+    const sorted = sortByCategoryOrder(data, {
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'category',
+        categoryOrderType: 'custom',
+        categoryOrder: ['C']
+      } as any
+    })
+
+    expect(sorted.map(row => row.category)).toEqual(['C', 'A', 'D', 'D', 'L'])
+  })
+
+  it('merges configured category order with newly discovered values', () => {
+    expect(getOrderedCategoryValues(data, 'category', ['C', 'A'])).toEqual(['C', 'A', 'D', 'L'])
+  })
+})

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/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 })
+  })
+})