@cdc/chart 4.26.6 → 4.26.10

package/src/components/BarChart/helpers/portionPattern.ts

@@ -0,0 +1,243 @@
+import { type Column } from '@cdc/core/types/Column'
+
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { type ChartConfig, type LegendPattern } from '../../../types/ChartConfig'
+
+type PortionPatternSupportConfig = Pick<
+  ChartConfig,
+  'visualizationType' | 'visualizationSubType' | 'isLollipopChart' | 'yAxis'
+>
+
+export type PortionPatternOverlay = {
+  patternUrl: string
+  ratio: number
+  placement: 'start' | 'end'
+  patternColor?: string
+}
+
+export type PortionPatternGeometry = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type PortionPatternBoundaryGeometry = {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+export type PortionPatternRenderData = PortionPatternOverlay & {
+  geometry: PortionPatternGeometry
+  boundaryGeometry: PortionPatternBoundaryGeometry | null
+}
+
+type GetPortionPatternOverlayArgs = {
+  patterns?: Record<string, LegendPattern>
+  datum: Record<string, any>
+  seriesKey: string
+  totalValue: unknown
+}
+
+type GetPortionPatternGeometryArgs = {
+  orientation: 'vertical' | 'horizontal'
+  bounds: PortionPatternGeometry
+  overlay: Pick<PortionPatternOverlay, 'ratio' | 'placement'>
+}
+
+type GetPortionPatternBoundaryGeometryArgs = {
+  orientation: 'vertical' | 'horizontal'
+  geometry: PortionPatternGeometry
+  overlay: Pick<PortionPatternOverlay, 'ratio' | 'placement'>
+}
+
+type GetPortionPatternRenderDataArgs = GetPortionPatternOverlayArgs & {
+  config: PortionPatternSupportConfig
+  orientation: 'vertical' | 'horizontal'
+  bounds: PortionPatternGeometry
+}
+
+export type ChartColumns = Record<string, Column>
+
+export const findColumnConfigKey = (columns: ChartColumns, columnName: string): string | undefined =>
+  Object.entries(columns).find(
+    ([columnKey, column]) => column?.name === columnName || (!column?.name && columnKey === columnName)
+  )?.[0]
+
+export const createPatternColumnConfig = (columnName: string): Column =>
+  ({
+    name: columnName,
+    label: columnName,
+    prefix: '',
+    suffix: '',
+    roundToPlace: 0,
+    commas: true,
+    dataTable: true,
+    tooltips: true
+  } as Column)
+
+export const ensurePatternColumnConfig = (columns: ChartColumns, columnName?: string): ChartColumns => {
+  if (!columnName || findColumnConfigKey(columns, columnName)) return columns
+
+  return {
+    ...columns,
+    [columnName]: createPatternColumnConfig(columnName)
+  }
+}
+
+export const removeUnusedPatternColumnConfig = ({
+  columns,
+  columnName,
+  patterns,
+  protectedColumnNames = []
+}: {
+  columns: ChartColumns
+  columnName?: string
+  patterns: Record<string, LegendPattern>
+  protectedColumnNames?: Array<string | undefined>
+}): ChartColumns => {
+  if (!columnName) return columns
+
+  const isStillUsedByPattern = Object.values(patterns).some(
+    pattern => pattern.application === 'portion' && pattern.patternValueKey === columnName
+  )
+
+  if (isStillUsedByPattern || protectedColumnNames.includes(columnName)) return columns
+
+  const columnConfigKey = findColumnConfigKey(columns, columnName)
+  if (!columnConfigKey) return columns
+
+  const nextColumns = { ...columns }
+  delete nextColumns[columnConfigKey]
+  return nextColumns
+}
+
+const normalizeString = (value: unknown): string => String(value ?? '').trim()
+
+const toPositiveFiniteNumber = (value: unknown): number | null => {
+  if (typeof value !== 'number' && typeof value !== 'string') return null
+  if (typeof value === 'string' && value.trim() === '') return null
+
+  const numericValue = Number(value)
+  return Number.isFinite(numericValue) && numericValue > 0 ? numericValue : null
+}
+
+export const isPortionPatternSupported = (config: PortionPatternSupportConfig): boolean =>
+  ['Bar', 'Combo'].includes(config.visualizationType) &&
+  config.visualizationSubType !== 'stacked' &&
+  !config.isLollipopChart &&
+  config.yAxis?.type !== 'logarithmic'
+
+/**
+ * Resolves the first configured portion pattern for a bar series. The first
+ * matching entry wins even when its row values are invalid, so manually
+ * authored duplicate targets remain deterministic.
+ */
+export const getPortionPatternOverlay = ({
+  patterns,
+  datum,
+  seriesKey,
+  totalValue
+}: GetPortionPatternOverlayArgs): PortionPatternOverlay | null => {
+  if (!patterns) return null
+
+  for (const patternKey in patterns) {
+    if (!Object.prototype.hasOwnProperty.call(patterns, patternKey)) continue
+
+    const pattern = patterns[patternKey]
+    if (pattern.application !== 'portion' || normalizeString(pattern.dataKey) !== seriesKey) continue
+
+    const total = toPositiveFiniteNumber(totalValue)
+    const portion = toPositiveFiniteNumber(datum?.[normalizeString(pattern.patternValueKey)])
+
+    if (total === null || portion === null || portion > total) return null
+
+    const patternColor = normalizeString(pattern.color)
+
+    return {
+      patternUrl: `url(#${getChartPatternId(patternKey)})`,
+      ratio: portion / total,
+      placement: pattern.placement === 'start' ? 'start' : 'end',
+      ...(patternColor ? { patternColor } : {})
+    }
+  }
+
+  return null
+}
+
+export const getPortionPatternGeometry = ({
+  orientation,
+  bounds,
+  overlay
+}: GetPortionPatternGeometryArgs): PortionPatternGeometry => {
+  const { x, y, width, height } = bounds
+
+  if (orientation === 'horizontal') {
+    const overlayWidth = width * overlay.ratio
+    return {
+      x: overlay.placement === 'end' ? x + width - overlayWidth : x,
+      y,
+      width: overlayWidth,
+      height
+    }
+  }
+
+  const overlayHeight = height * overlay.ratio
+  return {
+    x,
+    y: overlay.placement === 'start' ? y + height - overlayHeight : y,
+    width,
+    height: overlayHeight
+  }
+}
+
+export const getPortionPatternBoundaryGeometry = ({
+  orientation,
+  geometry,
+  overlay
+}: GetPortionPatternBoundaryGeometryArgs): PortionPatternBoundaryGeometry | null => {
+  if (overlay.ratio >= 1) return null
+
+  if (orientation === 'horizontal') {
+    const boundaryX = overlay.placement === 'end' ? geometry.x : geometry.x + geometry.width
+    return {
+      x1: boundaryX,
+      y1: geometry.y,
+      x2: boundaryX,
+      y2: geometry.y + geometry.height
+    }
+  }
+
+  const boundaryY = overlay.placement === 'end' ? geometry.y + geometry.height : geometry.y
+  return {
+    x1: geometry.x,
+    y1: boundaryY,
+    x2: geometry.x + geometry.width,
+    y2: boundaryY
+  }
+}
+
+export const getPortionPatternRenderData = ({
+  config,
+  orientation,
+  bounds,
+  patterns,
+  datum,
+  seriesKey,
+  totalValue
+}: GetPortionPatternRenderDataArgs): PortionPatternRenderData | null => {
+  if (!isPortionPatternSupported(config)) return null
+
+  const overlay = getPortionPatternOverlay({ patterns, datum, seriesKey, totalValue })
+  if (!overlay) return null
+
+  const geometry = getPortionPatternGeometry({ orientation, bounds, overlay })
+
+  return {
+    ...overlay,
+    geometry,
+    boundaryGeometry: getPortionPatternBoundaryGeometry({ orientation, geometry, overlay })
+  }
+}

package/src/components/BarChart/helpers/tests/addMinimumBarHeights.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { addMinimumBarHeights } from '..'
+
+const createSegment = ({ key, height, y, value }: { key: string; height: number; y: number; value: unknown }) => ({
+  key,
+  height,
+  y,
+  bar: {
+    data: {
+      [key]: value
+    }
+  }
+})
+
+describe('addMinimumBarHeights', () => {
+  it('gives an isolated tiny positive segment a minimum visible height while preserving its baseline', () => {
+    const barStacks = [
+      {
+        bars: [createSegment({ key: 'Tiny', height: 0.02, y: 99.98, value: 0.005 })]
+      }
+    ]
+
+    addMinimumBarHeights(barStacks)
+
+    expect(barStacks[0].bars[0].height).toBe(3)
+    expect(barStacks[0].bars[0].y).toBeCloseTo(97)
+    expect(barStacks[0].bars[0].y + barStacks[0].bars[0].height).toBeCloseTo(100)
+  })
+
+  it('leaves exact zero segments at zero height', () => {
+    const barStacks = [
+      {
+        bars: [createSegment({ key: 'Zero', height: 0, y: 100, value: 0 })]
+      }
+    ]
+
+    addMinimumBarHeights(barStacks)
+
+    expect(barStacks[0].bars[0].height).toBe(0)
+    expect(barStacks[0].bars[0].y).toBe(100)
+  })
+})

package/src/components/BarChart/helpers/tests/getPatternUrl.test.ts

@@ -131,4 +131,17 @@ describe('getPatternUrl', () => {
     expect(idA.startsWith('chart-pattern-A-B-')).toBe(true)
     expect(idB.startsWith('chart-pattern-A-B-')).toBe(true)
   })
+
+  it('does not treat portion patterns as exact-value patterns', () => {
+    expect(
+      getPatternUrl({
+        patterns: {
+          Pattern1: { application: 'portion', dataKey: 'y1', dataValue: 100, patternValueKey: 'portion' }
+        },
+        datum: { y1: 100, portion: 25 },
+        seriesKey: 'y1',
+        seriesValue: 100
+      })
+    ).toBeNull()
+  })
 })

package/src/components/BarChart/helpers/tests/portionPattern.test.ts

@@ -0,0 +1,280 @@
+import { getChartPatternId } from '../../../../helpers/getChartPatternId'
+import {
+  createPatternColumnConfig,
+  ensurePatternColumnConfig,
+  findColumnConfigKey,
+  getPortionPatternBoundaryGeometry,
+  getPortionPatternGeometry,
+  getPortionPatternOverlay,
+  getPortionPatternRenderData,
+  isPortionPatternSupported,
+  removeUnusedPatternColumnConfig
+} from '../portionPattern'
+
+describe('portion pattern column configurations', () => {
+  it('creates only the standard tooltip and data-table settings needed by a pattern column', () => {
+    expect(createPatternColumnConfig('new_cases')).toEqual({
+      name: 'new_cases',
+      label: 'new_cases',
+      prefix: '',
+      suffix: '',
+      roundToPlace: 0,
+      commas: true,
+      dataTable: true,
+      tooltips: true
+    })
+  })
+
+  it('creates a configuration only when the selected column is not already configured', () => {
+    const columns = {
+      existing: {
+        name: 'new_cases',
+        label: 'New cases',
+        commas: false,
+        dataTable: false,
+        tooltips: false
+      }
+    } as any
+
+    expect(ensurePatternColumnConfig(columns, 'new_cases')).toBe(columns)
+    expect(ensurePatternColumnConfig(columns, 'previous_cases')).toEqual({
+      ...columns,
+      previous_cases: createPatternColumnConfig('previous_cases')
+    })
+  })
+
+  it('finds configurations stored under either the column name or an alias key', () => {
+    expect(findColumnConfigKey({ new_cases: { label: 'New cases' } } as any, 'new_cases')).toBe('new_cases')
+    expect(
+      findColumnConfigKey({ additionalColumn1: { name: 'new_cases', label: 'New cases' } } as any, 'new_cases')
+    ).toBe('additionalColumn1')
+  })
+
+  it('removes an obsolete pattern column configuration', () => {
+    const columns = {
+      additionalColumn1: { name: 'new_cases', label: 'New cases' },
+      source: { name: 'source', label: 'Source' }
+    } as any
+
+    expect(
+      removeUnusedPatternColumnConfig({
+        columns,
+        columnName: 'new_cases',
+        patterns: {}
+      })
+    ).toEqual({ source: columns.source })
+  })
+
+  it('preserves a column still used by another portion pattern', () => {
+    const columns = { new_cases: { name: 'new_cases', label: 'New cases' } } as any
+
+    expect(
+      removeUnusedPatternColumnConfig({
+        columns,
+        columnName: 'new_cases',
+        patterns: {
+          Pattern2: { application: 'portion', patternValueKey: 'new_cases' }
+        }
+      })
+    ).toBe(columns)
+  })
+
+  it('preserves columns owned by an axis or chart series', () => {
+    const columns = { cases: { name: 'cases', label: 'Cases' } } as any
+
+    expect(
+      removeUnusedPatternColumnConfig({
+        columns,
+        columnName: 'cases',
+        patterns: {},
+        protectedColumnNames: ['date', 'cases']
+      })
+    ).toBe(columns)
+  })
+})
+
+describe('portion pattern support', () => {
+  const supportedConfig = {
+    visualizationType: 'Bar',
+    visualizationSubType: 'regular',
+    isLollipopChart: false,
+    yAxis: { type: 'linear' }
+  } as any
+
+  it('supports regular Bar and Combo charts with linear axes', () => {
+    expect(isPortionPatternSupported(supportedConfig)).toBe(true)
+    expect(isPortionPatternSupported({ ...supportedConfig, visualizationType: 'Combo' })).toBe(true)
+  })
+
+  it.each([
+    ['stacked bars', { visualizationSubType: 'stacked' }],
+    ['lollipops', { isLollipopChart: true }],
+    ['logarithmic axes', { yAxis: { type: 'logarithmic' } }],
+    ['other chart types', { visualizationType: 'Line' }]
+  ])('does not support %s', (_description, overrides) => {
+    expect(isPortionPatternSupported({ ...supportedConfig, ...overrides } as any)).toBe(false)
+  })
+})
+
+describe('getPortionPatternOverlay', () => {
+  const getOverlay = (totalValue: unknown, portion: unknown, placement?: 'start' | 'end') =>
+    getPortionPatternOverlay({
+      patterns: {
+        Pattern1: {
+          application: 'portion',
+          dataKey: 'total',
+          patternValueKey: 'portion',
+          placement,
+          color: '#123456'
+        }
+      },
+      datum: { total: totalValue, portion },
+      seriesKey: 'total',
+      totalValue
+    })
+
+  it('calculates ratios for portions less than and equal to the total', () => {
+    expect(getOverlay(100, 25)).toEqual({
+      patternUrl: `url(#${getChartPatternId('Pattern1')})`,
+      ratio: 0.25,
+      placement: 'end',
+      patternColor: '#123456'
+    })
+    expect(getOverlay('100', '100')?.ratio).toBe(1)
+  })
+
+  it('preserves beginning placement', () => {
+    expect(getOverlay(100, 40, 'start')?.placement).toBe('start')
+  })
+
+  it.each([
+    ['missing total', undefined, 10],
+    ['nonnumeric total', 'not-a-number', 10],
+    ['zero total', 0, 0],
+    ['negative total', -100, 10],
+    ['missing portion', 100, undefined],
+    ['nonnumeric portion', 100, 'not-a-number'],
+    ['zero portion', 100, 0],
+    ['negative portion', 100, -10],
+    ['portion greater than total', 100, 101]
+  ])('returns no overlay for %s', (_description, totalValue, portion) => {
+    expect(getOverlay(totalValue, portion)).toBeNull()
+  })
+
+  it('uses only the first configured portion pattern for a target series', () => {
+    const overlay = getPortionPatternOverlay({
+      patterns: {
+        First: { application: 'portion', dataKey: 'total', patternValueKey: 'invalidPortion' },
+        Second: { application: 'portion', dataKey: 'total', patternValueKey: 'validPortion' }
+      },
+      datum: { total: 100, invalidPortion: 200, validPortion: 25 },
+      seriesKey: 'total',
+      totalValue: 100
+    })
+
+    expect(overlay).toBeNull()
+  })
+})
+
+describe('getPortionPatternGeometry', () => {
+  it.each([
+    ['vertical end', 'vertical', 'end', { x: 10, y: 20, width: 100, height: 40 }],
+    ['vertical start', 'vertical', 'start', { x: 10, y: 60, width: 100, height: 40 }],
+    ['horizontal end', 'horizontal', 'end', { x: 60, y: 20, width: 50, height: 80 }],
+    ['horizontal start', 'horizontal', 'start', { x: 10, y: 20, width: 50, height: 80 }]
+  ] as const)('calculates %s placement', (_description, orientation, placement, expected) => {
+    expect(
+      getPortionPatternGeometry({
+        orientation,
+        bounds: { x: 10, y: 20, width: 100, height: 80 },
+        overlay: { ratio: 0.5, placement }
+      })
+    ).toEqual(expected)
+  })
+})
+
+describe('getPortionPatternBoundaryGeometry', () => {
+  it.each([
+    ['vertical end', 'vertical', 'end', { x1: 10, y1: 60, x2: 110, y2: 60 }],
+    ['vertical start', 'vertical', 'start', { x1: 10, y1: 20, x2: 110, y2: 20 }],
+    ['horizontal end', 'horizontal', 'end', { x1: 10, y1: 20, x2: 10, y2: 100 }],
+    ['horizontal start', 'horizontal', 'start', { x1: 60, y1: 20, x2: 60, y2: 100 }]
+  ] as const)('calculates the %s internal divider', (_description, orientation, placement, expected) => {
+    expect(
+      getPortionPatternBoundaryGeometry({
+        orientation,
+        geometry: {
+          x: 10,
+          y: 20,
+          width: orientation === 'vertical' ? 100 : 50,
+          height: orientation === 'vertical' ? 40 : 80
+        },
+        overlay: { ratio: 0.5, placement }
+      })
+    ).toEqual(expected)
+  })
+
+  it('omits the divider when the portion covers the full bar', () => {
+    expect(
+      getPortionPatternBoundaryGeometry({
+        orientation: 'vertical',
+        geometry: { x: 10, y: 20, width: 100, height: 80 },
+        overlay: { ratio: 1, placement: 'end' }
+      })
+    ).toBeNull()
+  })
+})
+
+describe('getPortionPatternRenderData', () => {
+  it('returns a complete render model for supported valid portions', () => {
+    expect(
+      getPortionPatternRenderData({
+        config: {
+          visualizationType: 'Bar',
+          visualizationSubType: 'regular',
+          isLollipopChart: false,
+          yAxis: { type: 'linear' }
+        } as any,
+        orientation: 'vertical',
+        bounds: { x: 10, y: 20, width: 100, height: 80 },
+        patterns: {
+          Pattern1: {
+            application: 'portion',
+            dataKey: 'total',
+            patternValueKey: 'portion',
+            color: '#123456'
+          }
+        },
+        datum: { total: 100, portion: 25 },
+        seriesKey: 'total',
+        totalValue: 100
+      })
+    ).toEqual({
+      patternUrl: `url(#${getChartPatternId('Pattern1')})`,
+      ratio: 0.25,
+      placement: 'end',
+      patternColor: '#123456',
+      geometry: { x: 10, y: 20, width: 100, height: 20 },
+      boundaryGeometry: { x1: 10, y1: 40, x2: 110, y2: 40 }
+    })
+  })
+
+  it('returns no render model for unsupported configurations', () => {
+    expect(
+      getPortionPatternRenderData({
+        config: {
+          visualizationType: 'Bar',
+          visualizationSubType: 'stacked',
+          isLollipopChart: false,
+          yAxis: { type: 'linear' }
+        } as any,
+        orientation: 'vertical',
+        bounds: { x: 10, y: 20, width: 100, height: 80 },
+        patterns: {},
+        datum: {},
+        seriesKey: 'total',
+        totalValue: 100
+      })
+    ).toBeNull()
+  })
+})