@cdc/chart 4.26.2 → 4.26.4

package/src/helpers/abbreviateNumber.ts

@@ -1,17 +1,24 @@
-export const abbreviateNumber = num => {
-  let unit = ''
-  let absNum = Math.abs(num)
-
-  if (absNum >= 1e9) {
-    unit = 'B'
-    num = num / 1e9
-  } else if (absNum >= 1e6) {
-    unit = 'M'
-    num = num / 1e6
-  } else if (absNum >= 1e3) {
-    unit = 'K'
-    num = num / 1e3
-  }
-
-  return num + unit
-}
+const abbreviationUnits: Record<string, { K: string; M: string; B: string }> = {
+  'es-MX': { K: ' mil', M: ' M', B: ' mil M' }
+}
+
+const defaultUnits = { K: 'K', M: 'M', B: 'B' }
+
+export const abbreviateNumber = (num, locale?: string) => {
+  const units = (locale && abbreviationUnits[locale]) || defaultUnits
+  let unit = ''
+  let absNum = Math.abs(num)
+
+  if (absNum >= 1e9) {
+    unit = units.B
+    num = num / 1e9
+  } else if (absNum >= 1e6) {
+    unit = units.M
+    num = num / 1e6
+  } else if (absNum >= 1e3) {
+    unit = units.K
+    num = num / 1e3
+  }
+
+  return num + unit
+}

package/src/helpers/calculateLeftYAxisWidth.ts

@@ -0,0 +1,193 @@
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import {
+  DEFAULT_TICK_LENGTH,
+  TICK_LABEL_MARGIN_RIGHT,
+  VALUE_ON_LINE_PADDING_NO_AXIS,
+  VALUE_ON_LINE_PADDING_WITH_AXIS
+} from '../components/Axis/axis.constants'
+
+type CalculateLeftYAxisWidthProps = {
+  config: any
+  data: any[]
+  yScale: any
+  numTicks: number
+  parentWidth: number
+  tickLabelFont: string
+  axisLabelFontSize: number
+  handleLeftTickFormatting: (tick: any, index: number, ticks: any[]) => string
+  categoryLabelSpace?: number
+  horizontalYAxisLabelSpace?: number
+}
+
+const AXIS_LABEL_PADDING = 5
+const MIN_LEFT_AXIS_WIDTH = 0
+const MAX_LEFT_AXIS_WIDTH_RATIO = 0.45
+
+type TickValueProps = Omit<
+  CalculateLeftYAxisWidthProps,
+  'parentWidth' | 'tickLabelFont' | 'axisLabelFontSize' | 'handleLeftTickFormatting'
+>
+
+const getTickValues = ({ config, data, yScale, numTicks }: TickValueProps) => {
+  if (config.visualizationType === 'Forest Plot') {
+    return data.map((_, index) => index)
+  }
+
+  if (typeof yScale?.ticks === 'function') {
+    return yScale.ticks(numTicks)
+  }
+
+  if (typeof yScale?.domain === 'function') {
+    return yScale.domain()
+  }
+
+  return []
+}
+
+const getAxisLabelSpace = (config: any, axisLabelFontSize: number) => {
+  return !config.hideYAxisLabel && config.runtime.yAxis.label ? axisLabelFontSize + AXIS_LABEL_PADDING : 0
+}
+
+const measureWidestLabel = (labels: string[], tickLabelFont: string) => {
+  return labels.length ? Math.max(...labels.map(label => getTextWidth(label, tickLabelFont))) : 0
+}
+
+const clampYAxisWidth = (calculatedWidth: number, parentWidth: number) => {
+  const maxAllowedWidth = parentWidth * MAX_LEFT_AXIS_WIDTH_RATIO
+  return Math.max(MIN_LEFT_AXIS_WIDTH, Math.min(Math.ceil(calculatedWidth), maxAllowedWidth))
+}
+
+const formatMeasuredTickLabels = ({
+  tickValues,
+  handleLeftTickFormatting,
+  inlineLabel,
+  labelsAboveGridlines
+}: {
+  tickValues: any[]
+  handleLeftTickFormatting: (tick: any, index: number, ticks: any[]) => string
+  inlineLabel?: string
+  labelsAboveGridlines?: boolean
+}) => {
+  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
+
+  return tickValues.map((tick, index, ticks) => {
+    const formatted = handleLeftTickFormatting(tick, index, ticks)
+    const isLastTick = index === ticks.length - 1
+
+    if (isLastTick && inlineLabel && (labelsAboveGridlines || inlineLabelHasNoSpace)) {
+      return `${formatted}${inlineLabel}`
+    }
+
+    return String(formatted ?? '')
+  })
+}
+
+const getHorizonChartWidth = ({
+  config,
+  parentWidth,
+  tickLabelFont,
+  axisLabelFontSize
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'parentWidth' | 'tickLabelFont' | 'axisLabelFontSize'>) => {
+  const seriesKeys =
+    config.runtime?.seriesKeys && config.runtime.seriesKeys.length > 0
+      ? config.runtime.seriesKeys
+      : config.series?.map(series => series.dataKey) || []
+  const labels = seriesKeys.map(seriesKey => String(config.runtime?.seriesLabels?.[seriesKey] || seriesKey))
+  const labelWidth = config.yAxis.hideLabel ? 0 : measureWidestLabel(labels, tickLabelFont)
+  const calculatedWidth =
+    labelWidth +
+    DEFAULT_TICK_LENGTH +
+    TICK_LABEL_MARGIN_RIGHT +
+    getAxisLabelSpace(config, axisLabelFontSize) +
+    Number(config.yAxis.axisPadding || 0)
+
+  return clampYAxisWidth(calculatedWidth, parentWidth)
+}
+
+const getHorizontalAxisWidth = ({
+  config,
+  tickLabelWidth,
+  categoryLabelSpace,
+  horizontalYAxisLabelSpace
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'categoryLabelSpace' | 'horizontalYAxisLabelSpace'> & {
+  tickLabelWidth: number
+}) => {
+  const horizontalTickWidth = tickLabelWidth + DEFAULT_TICK_LENGTH + TICK_LABEL_MARGIN_RIGHT
+  return Math.max(horizontalTickWidth + horizontalYAxisLabelSpace, categoryLabelSpace + horizontalYAxisLabelSpace)
+}
+
+const getCategoricalAxisWidth = ({
+  config,
+  baseWidth,
+  tickLabelFont
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'tickLabelFont'> & {
+  baseWidth: number
+}) => {
+  if (config.yAxis.type !== 'categorical' || config.orientation !== 'vertical' || config.yAxis.hideLabel) {
+    return baseWidth
+  }
+
+  const categoryLabels = (config.yAxis.categories || []).map(category => String(category?.label || ''))
+  const categoryLabelWidth = measureWidestLabel(categoryLabels, tickLabelFont)
+
+  return Math.max(baseWidth, categoryLabelWidth + DEFAULT_TICK_LENGTH + TICK_LABEL_MARGIN_RIGHT)
+}
+
+export const calculateLeftYAxisWidth = ({
+  config,
+  data,
+  yScale,
+  numTicks,
+  parentWidth,
+  tickLabelFont,
+  axisLabelFontSize,
+  handleLeftTickFormatting,
+  categoryLabelSpace = 0,
+  horizontalYAxisLabelSpace = 0
+}: CalculateLeftYAxisWidthProps): number => {
+  if (config.visualizationType === 'Horizon Chart') {
+    return getHorizonChartWidth({ config, parentWidth, tickLabelFont, axisLabelFontSize })
+  }
+
+  const tickValues = getTickValues({ config, data, yScale, numTicks })
+  const { hideAxis, inlineLabel, labelsAboveGridlines } = config.yAxis
+  const formattedTicks = formatMeasuredTickLabels({
+    tickValues,
+    handleLeftTickFormatting,
+    inlineLabel,
+    labelsAboveGridlines
+  })
+  const tickLabelWidth = config.yAxis.hideLabel ? 0 : measureWidestLabel(formattedTicks, tickLabelFont)
+
+  const valueOnLinePadding = hideAxis
+    ? Math.abs(VALUE_ON_LINE_PADDING_NO_AXIS)
+    : Math.abs(VALUE_ON_LINE_PADDING_WITH_AXIS)
+  const tickPadding = labelsAboveGridlines ? valueOnLinePadding : TICK_LABEL_MARGIN_RIGHT + DEFAULT_TICK_LENGTH
+  const verticalAxisLabelSpace = getAxisLabelSpace(config, axisLabelFontSize)
+  const reservedTickLabelWidth = labelsAboveGridlines ? 0 : tickLabelWidth
+  const reservedTickPadding = labelsAboveGridlines || config.yAxis.hideLabel ? 0 : tickPadding
+
+  const defaultCalculatedWidth =
+    reservedTickLabelWidth + reservedTickPadding + verticalAxisLabelSpace + Number(config.yAxis.axisPadding || 0)
+
+  if (config.orientation === 'horizontal') {
+    const calculatedWidth = getHorizontalAxisWidth({
+      config,
+      tickLabelWidth,
+      categoryLabelSpace,
+      horizontalYAxisLabelSpace
+    })
+
+    return clampYAxisWidth(calculatedWidth, parentWidth)
+  }
+
+  const calculatedWidth = getCategoricalAxisWidth({
+    config,
+    baseWidth: defaultCalculatedWidth,
+    tickLabelFont
+  })
+
+  return clampYAxisWidth(calculatedWidth, parentWidth)
+}
+
+export default calculateLeftYAxisWidth

package/src/helpers/getChartPatternId.ts

@@ -0,0 +1,17 @@
+import { sanitizeToSvgId } from '@cdc/core/helpers/cove/string'
+
+const getStableKeyHash = (input: string): string => {
+  // djb2 variant, deterministic and cheap for short editor keys
+  let hash = 5381
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash * 33) ^ input.charCodeAt(i)
+  }
+  return (hash >>> 0).toString(36)
+}
+
+export const getChartPatternId = (patternKey: string): string => {
+  const rawKey = String(patternKey)
+  const sanitizedKey = sanitizeToSvgId(rawKey)
+  const hashSuffix = getStableKeyHash(rawKey)
+  return `chart-pattern-${sanitizedKey}-${hashSuffix}`
+}

package/src/helpers/getMinMax.ts

@@ -37,8 +37,8 @@ const getMinMax = ({
   let leftMax = 0
   let rightMax = 0
 
-  if (!data) {
-    return { min, max }
+  if (!data || !config.runtime) {
+    return { min, max, leftMax, rightMax }
   }
 
   const { visualizationType, series } = config
@@ -248,6 +248,20 @@ const getMinMax = ({
     min = min / 1.1
   }
 
+  // Enforce smallest left axis max so small-data charts don't show misleading decimal ticks
+  const smallestLeftAxisMaxRaw = config.yAxis.smallestLeftAxisMax
+  if (smallestLeftAxisMaxRaw !== null && smallestLeftAxisMaxRaw !== '') {
+    const smallestLeftAxisMax = Number(smallestLeftAxisMaxRaw)
+    if (!Number.isNaN(smallestLeftAxisMax)) {
+      if (max < smallestLeftAxisMax) {
+        max = smallestLeftAxisMax
+      }
+      if (leftMax < smallestLeftAxisMax) {
+        leftMax = smallestLeftAxisMax
+      }
+    }
+  }
+
   return { min, max, leftMax, rightMax }
 }
 export default getMinMax

package/src/helpers/seriesColumnSettings.ts

@@ -0,0 +1,114 @@
+import { Column } from '@cdc/core/types/Column'
+import { Series } from '@cdc/core/types/Series'
+
+type ChartColumns = Record<string, Partial<Column>>
+type SeriesItem = Series[number]
+type ColumnFormattingParams = {
+  addColPrefix?: string
+  addColSuffix?: string
+  addColRoundTo?: number
+  addColCommas?: boolean
+}
+
+const hasOwn = (object: object, key: keyof Column) => Object.prototype.hasOwnProperty.call(object, key)
+
+export const createDefaultSeriesColumnConfig = (columnName: string): Column => ({
+  name: columnName,
+  label: columnName,
+  prefix: '',
+  suffix: '',
+  roundToPlace: 0,
+  commas: false,
+  dataTable: true,
+  order: undefined,
+  showInViz: false,
+  startingPoint: '0',
+  series: undefined,
+  tooltips: false,
+  forestPlot: false,
+  forestPlotAlignRight: false,
+  forestPlotStartingPoint: 0
+})
+
+export const getSeriesOwnedColumnNames = (series: Partial<SeriesItem>[] = []): string[] => {
+  return series.map(item => item?.dataKey).filter(Boolean)
+}
+
+export const findColumnConfigByName = (
+  columns: ChartColumns = {},
+  columnName: string
+): { columnKey: string; columnConfig: Partial<Column> } | null => {
+  for (const [columnKey, columnConfig] of Object.entries(columns)) {
+    if (columnConfig?.name === columnName || (!columnConfig?.name && columnKey === columnName)) {
+      return { columnKey, columnConfig }
+    }
+  }
+
+  return null
+}
+
+export const getSeriesColumnConfig = (columns: ChartColumns = {}, seriesKey: string) => {
+  const existingEntry = findColumnConfigByName(columns, seriesKey)
+  const baseColumnConfig = createDefaultSeriesColumnConfig(seriesKey)
+
+  return {
+    columnKey: existingEntry?.columnKey || seriesKey,
+    columnConfig: {
+      ...baseColumnConfig,
+      ...(existingEntry?.columnConfig || {}),
+      name: seriesKey,
+      label: existingEntry?.columnConfig?.label ?? baseColumnConfig.label
+    }
+  }
+}
+
+export const upsertSeriesColumnConfig = (
+  columns: ChartColumns = {},
+  seriesKey: string,
+  updates: Partial<Column>
+): ChartColumns => {
+  const existingEntry = findColumnConfigByName(columns, seriesKey)
+  const columnKey = existingEntry?.columnKey || seriesKey
+  const nextColumnConfig = {
+    ...(existingEntry?.columnConfig || {}),
+    ...updates,
+    name: seriesKey
+  }
+
+  if (
+    nextColumnConfig.label === undefined &&
+    !hasOwn(existingEntry?.columnConfig || {}, 'label') &&
+    !hasOwn(updates, 'label')
+  ) {
+    delete nextColumnConfig.label
+  }
+
+  return {
+    ...columns,
+    [columnKey]: nextColumnConfig
+  }
+}
+
+export const getSeriesColumnFormattingParams = (columnConfig?: Partial<Column>): ColumnFormattingParams | undefined => {
+  if (!columnConfig) return undefined
+
+  const formattingParams: ColumnFormattingParams = {}
+
+  if (hasOwn(columnConfig, 'prefix')) {
+    formattingParams.addColPrefix = columnConfig.prefix ?? ''
+  }
+
+  if (hasOwn(columnConfig, 'suffix')) {
+    formattingParams.addColSuffix = columnConfig.suffix ?? ''
+  }
+
+  if (hasOwn(columnConfig, 'roundToPlace')) {
+    formattingParams.addColRoundTo = columnConfig.roundToPlace ?? 0
+  }
+
+  if (hasOwn(columnConfig, 'commas')) {
+    formattingParams.addColCommas = columnConfig.commas ?? false
+  }
+
+  return Object.keys(formattingParams).length ? formattingParams : undefined
+}

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

@@ -0,0 +1,77 @@
+import { countNumOfTicks } from '../countNumOfTicks'
+import { expect, describe, it } from 'vitest'
+
+const baseArgs = {
+  max: 100,
+  min: 0,
+  data: [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }],
+  config: { visualizationType: 'Bar' } as any
+}
+
+describe('countNumOfTicks', () => {
+  it('uses viewport-specific tick count when viewportNumTicks[currentViewport] is set', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6, viewportNumTicks: { xs: 3, xxs: 2 } } },
+      currentViewport: 'xs',
+      isHorizontal: false
+    })
+    expect(result).toBe(3)
+  })
+
+  it('falls back to numTicks when viewportNumTicks is absent', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6 } },
+      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,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6, viewportNumTicks: { xxs: 2 } } },
+      currentViewport: 'lg',
+      isHorizontal: false
+    })
+    expect(result).toBe(6)
+  })
+
+  it('xAxis vertical with numTicks: 6 returns 6', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6 } },
+      currentViewport: 'lg',
+      isHorizontal: false
+    })
+    expect(result).toBe(6)
+  })
+
+  it('yAxis with numTicks: 4 returns 4', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'yAxis',
+      runtime: { yAxis: { numTicks: 4 } },
+      currentViewport: 'lg',
+      isHorizontal: false
+    })
+    expect(result).toBe(4)
+  })
+
+  it('xAxis horizontal with no numTicks returns 4 (hardcoded fallback)', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: '' } },
+      currentViewport: 'lg',
+      isHorizontal: true
+    })
+    expect(result).toBe(4)
+  })
+})

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

@@ -0,0 +1,84 @@
+import {
+  createDefaultSeriesColumnConfig,
+  findColumnConfigByName,
+  getSeriesColumnConfig,
+  getSeriesColumnFormattingParams,
+  getSeriesOwnedColumnNames,
+  upsertSeriesColumnConfig
+} from '../seriesColumnSettings'
+
+describe('seriesColumnSettings', () => {
+  it('returns all current series data keys as owned column names', () => {
+    expect(getSeriesOwnedColumnNames([{ dataKey: 'cases' }, { dataKey: 'deaths' }, {}])).toEqual(['cases', 'deaths'])
+  })
+
+  it('finds an existing column config by configured name', () => {
+    const result = findColumnConfigByName(
+      {
+        additionalColumn1: { name: 'cases', label: 'Cases', tooltips: true }
+      },
+      'cases'
+    )
+
+    expect(result).toEqual({
+      columnKey: 'additionalColumn1',
+      columnConfig: { name: 'cases', label: 'Cases', tooltips: true }
+    })
+  })
+
+  it('returns a default-backed series column config when none exists yet', () => {
+    const result = getSeriesColumnConfig({}, 'cases')
+
+    expect(result.columnKey).toBe('cases')
+    expect(result.columnConfig).toEqual(createDefaultSeriesColumnConfig('cases'))
+  })
+
+  it('updates an existing matching column config without changing its key', () => {
+    const updatedColumns = upsertSeriesColumnConfig(
+      {
+        additionalColumn1: { name: 'cases', label: 'Cases', dataTable: false }
+      },
+      'cases',
+      { prefix: '$', commas: true }
+    )
+
+    expect(updatedColumns).toEqual({
+      additionalColumn1: {
+        name: 'cases',
+        label: 'Cases',
+        dataTable: false,
+        prefix: '$',
+        commas: true
+      }
+    })
+  })
+
+  it('does not persist display defaults when creating a new series-owned column config', () => {
+    expect(upsertSeriesColumnConfig({}, 'cases', { label: 'Cases' })).toEqual({
+      cases: {
+        name: 'cases',
+        label: 'Cases'
+      }
+    })
+  })
+
+  it('only returns explicit formatting overrides and preserves falsey values', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        prefix: '',
+        suffix: ' units',
+        roundToPlace: 0,
+        commas: false
+      })
+    ).toEqual({
+      addColPrefix: '',
+      addColSuffix: ' units',
+      addColRoundTo: 0,
+      addColCommas: false
+    })
+  })
+
+  it('returns undefined when no formatting overrides were explicitly configured', () => {
+    expect(getSeriesColumnFormattingParams({ label: 'Cases' })).toBeUndefined()
+  })
+})