@cdc/chart 4.26.4 → 4.26.6

package/src/helpers/calculateLeftYAxisWidth.ts

@@ -11,6 +11,7 @@ type CalculateLeftYAxisWidthProps = {
   data: any[]
   yScale: any
   numTicks: number
+  tickValues?: number[]
   parentWidth: number
   tickLabelFont: string
   axisLabelFontSize: number
@@ -28,7 +29,11 @@ type TickValueProps = Omit<
   'parentWidth' | 'tickLabelFont' | 'axisLabelFontSize' | 'handleLeftTickFormatting'
 >
 
-const getTickValues = ({ config, data, yScale, numTicks }: TickValueProps) => {
+const getTickValues = ({ config, data, yScale, numTicks, tickValues }: TickValueProps) => {
+  if (tickValues) {
+    return tickValues
+  }
+
   if (config.visualizationType === 'Forest Plot') {
     return data.map((_, index) => index)
   }
@@ -45,6 +50,10 @@ const getTickValues = ({ config, data, yScale, numTicks }: TickValueProps) => {
 }
 
 const getAxisLabelSpace = (config: any, axisLabelFontSize: number) => {
+  if (config.yAxis?.titlePlacement === 'top') {
+    return 0
+  }
+
   return !config.hideYAxisLabel && config.runtime.yAxis.label ? axisLabelFontSize + AXIS_LABEL_PADDING : 0
 }
 
@@ -138,6 +147,7 @@ export const calculateLeftYAxisWidth = ({
   data,
   yScale,
   numTicks,
+  tickValues,
   parentWidth,
   tickLabelFont,
   axisLabelFontSize,
@@ -149,10 +159,10 @@ export const calculateLeftYAxisWidth = ({
     return getHorizonChartWidth({ config, parentWidth, tickLabelFont, axisLabelFontSize })
   }
 
-  const tickValues = getTickValues({ config, data, yScale, numTicks })
+  const measuredTickValues = getTickValues({ config, data, yScale, numTicks, tickValues })
   const { hideAxis, inlineLabel, labelsAboveGridlines } = config.yAxis
   const formattedTicks = formatMeasuredTickLabels({
-    tickValues,
+    tickValues: measuredTickValues,
     handleLeftTickFormatting,
     inlineLabel,
     labelsAboveGridlines

package/src/helpers/colorAssignmentHelpers.ts

@@ -0,0 +1,102 @@
+import { type ChartConfig, type VisualizationType } from '../types/ChartConfig'
+
+export type SeriesColorAssignment = {
+  key: string
+  color: string
+}
+
+export type SeriesColorAssignmentItem = {
+  key: string
+  label: string
+}
+
+export const SERIES_COLOR_ASSIGNMENT_TYPES: VisualizationType[] = ['Line', 'Bar', 'Combo', 'Area Chart', 'Scatter Plot']
+
+export const hasDynamicCategorySeries = (config: ChartConfig): boolean =>
+  Array.isArray(config.series) && config.series.some(series => Boolean(series?.dynamicCategory))
+
+export const isColorByCategoryBarChart = (config: ChartConfig): boolean =>
+  config.visualizationType === 'Bar' &&
+  config.visualizationSubType === 'regular' &&
+  Boolean(config.legend?.colorCode) &&
+  (config.series?.length || 0) === 1
+
+export const supportsSeriesColorAssignments = (config: ChartConfig): boolean =>
+  SERIES_COLOR_ASSIGNMENT_TYPES.includes(config.visualizationType) &&
+  !hasDynamicCategorySeries(config) &&
+  !isColorByCategoryBarChart(config)
+
+export const isSeriesColorAssignmentModeByValue = (config: ChartConfig): boolean =>
+  config.general?.palette?.colorAssignmentMode === 'by-value'
+
+export const getSeriesColorAssignments = (config: ChartConfig): SeriesColorAssignment[] =>
+  Array.isArray(config.general?.palette?.colorAssignments) ? config.general.palette.colorAssignments : []
+
+export const hasSeriesColorAssignmentOverrides = (config: ChartConfig): boolean => {
+  if (!supportsSeriesColorAssignments(config) || !isSeriesColorAssignmentModeByValue(config)) return false
+
+  const currentSeriesKeys = new Set(getSeriesColorAssignmentItems(config).map(({ key }) => key))
+
+  return getSeriesColorAssignments(config).some(assignment => {
+    if (!assignment?.key || !assignment?.color) return false
+
+    return currentSeriesKeys.has(assignment.key)
+  })
+}
+
+export const getSeriesDisplayLabel = (config: ChartConfig, key: string): string => {
+  const series = config.series?.find(item => item?.dataKey === key)
+  return String(config.runtime?.seriesLabels?.[key] || series?.name || (series as any)?.label || key)
+}
+
+export const getSeriesColorAssignmentItems = (config: ChartConfig): SeriesColorAssignmentItem[] => {
+  if (!supportsSeriesColorAssignments(config) || !Array.isArray(config.series)) return []
+
+  return config.series
+    .filter(series => series?.dataKey && !series.dynamicCategory)
+    .map(series => ({
+      key: series.dataKey,
+      label: getSeriesDisplayLabel(config, series.dataKey)
+    }))
+}
+
+export const getSeriesKeyByColorScaleLabel = (config: ChartConfig): Map<string, string> => {
+  const labelToKey = new Map<string, string>()
+  const runtimeKeys = Array.isArray(config.runtime?.seriesKeys) ? config.runtime.seriesKeys : []
+
+  runtimeKeys.forEach(key => {
+    labelToKey.set(String(key), key)
+    labelToKey.set(getSeriesDisplayLabel(config, key), key)
+  })
+
+  getSeriesColorAssignmentItems(config).forEach(({ key, label }) => {
+    labelToKey.set(String(key), key)
+    labelToKey.set(label, key)
+  })
+
+  return labelToKey
+}
+
+export const applySeriesColorAssignmentsToRange = (
+  config: ChartConfig,
+  domain: string[] = [],
+  range: string[] = []
+): string[] => {
+  if (!supportsSeriesColorAssignments(config) || !isSeriesColorAssignmentModeByValue(config)) return range
+
+  const assignmentMap = new Map(
+    getSeriesColorAssignments(config)
+      .filter(assignment => assignment?.key && assignment?.color)
+      .map(assignment => [assignment.key, assignment.color])
+  )
+
+  if (!assignmentMap.size || !range.length) return range
+
+  const labelToKey = getSeriesKeyByColorScaleLabel(config)
+
+  return domain.map((label, index) => {
+    const key = labelToKey.get(String(label))
+    const assignedColor = key ? assignmentMap.get(key) : undefined
+    return assignedColor || range[index % range.length]
+  })
+}

package/src/helpers/dataHelpers.ts

@@ -1,6 +1,16 @@
 import { Series } from '@cdc/core/types/Series'
+import isNumber from '@cdc/core/helpers/isNumber'
 import { ChartConfig } from '../types/ChartConfig'
 
+// For legend suppression (when `legend.unified` is false), treat a series as having
+// data only if the active (filtered) dataset contains at least one numeric, non-zero
+// value for that series. Placeholder strings (e.g. "Not applicable", "<1.0", ""),
+// nullish values, and zeros are treated as "no visible data" for legend purposes.
+const hasGraphableValue = (raw: unknown): boolean => {
+  const sanitized = typeof raw === 'string' ? raw.replace(/[,$]/g, '').trim() : raw
+  return isNumber(sanitized) && Number(sanitized) !== 0
+}
+
 export const getSeriesWithData = (config: ChartConfig) => {
   const { filters, data, runtime, legend } = config
   const { colorCode } = legend
@@ -21,7 +31,7 @@ export const getSeriesWithData = (config: ChartConfig) => {
         .filter(d => !s.colorCodeSeries || d[colorCode] === s.colorCodeSeries)
         .filter(d => {
           const key = s.dynamicCategory ? s.originalDataKey : s.dataKey
-          return d[key] || d[key] === 0
+          return hasGraphableValue(d[key])
         })
     }))
     .filter(s => s.data.length)

package/src/helpers/ensureSpecialChartAxisTypes.ts

@@ -0,0 +1,11 @@
+import { type ChartConfig } from '../types/ChartConfig'
+
+export const ensureSpecialChartAxisTypes = <T extends Pick<ChartConfig, 'visualizationType' | 'xAxis'>>(
+  config: T
+): T => {
+  if (config.visualizationType === 'Bump Chart' && config.xAxis) {
+    config.xAxis.type = 'date-time'
+  }
+
+  return config
+}

package/src/helpers/getAxisMaxOverride.ts

@@ -0,0 +1,16 @@
+type AxisMaxOverrideProps = {
+  minimumValidMax: number
+  value: unknown
+}
+
+export const getAxisMaxOverride = ({ minimumValidMax, value }: AxisMaxOverrideProps) => {
+  const maxNumber = Number(value)
+  const hasEnteredMax = value !== undefined && value !== null && value !== ''
+  const hasValidMax = hasEnteredMax && Number.isFinite(maxNumber) && maxNumber >= minimumValidMax
+
+  return {
+    hasEnteredMax,
+    hasValidMax,
+    maxNumber
+  }
+}

package/src/helpers/getCleanTopTickMax.ts

@@ -0,0 +1,64 @@
+const NICE_MANTISSAS = [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10] as const
+
+type FinalizeTopTickMaxProps = {
+  currentMax: number
+  rawMax: number
+  ticks: number[]
+  shouldUseCleanTopTick: boolean
+  headroomMode?: 'none' | 'inline-label'
+}
+
+const getTickComparisonEpsilon = (tickGap: number) => Math.abs(tickGap) * 1e-10
+
+export const getCleanTopTickMax = (value: number) => {
+  if (!Number.isFinite(value) || value <= 0) return value
+
+  const powerOfTenStep = Math.pow(10, Math.floor(Math.log10(value)))
+  const normalizedValue = value / powerOfTenStep
+  const mantissa = NICE_MANTISSAS.find(candidate => normalizedValue <= candidate)
+
+  return (mantissa ?? 10) * powerOfTenStep
+}
+
+export const getCleanTopTickMaxCandidates = () => [...NICE_MANTISSAS]
+
+export const getFinalTopTickMax = ({
+  currentMax,
+  rawMax,
+  ticks,
+  shouldUseCleanTopTick,
+  headroomMode = 'none'
+}: FinalizeTopTickMaxProps) => {
+  if (!shouldUseCleanTopTick || !Number.isFinite(currentMax)) return { max: currentMax }
+  if (!Array.isArray(ticks) || ticks.length === 0) return { max: currentMax }
+
+  const sortedTicks = Array.from(new Set(ticks.filter(Number.isFinite))).sort((a, b) => a - b)
+  if (sortedTicks.length === 0) return { max: currentMax }
+
+  const tickGap = sortedTicks.slice(1).reduce((smallestGap, tick, index) => {
+    const gap = tick - sortedTicks[index]
+    return gap > 0 ? Math.min(smallestGap, gap) : smallestGap
+  }, Infinity)
+
+  if (!Number.isFinite(tickGap) || tickGap <= 0) return { max: currentMax }
+
+  const targetMax = Math.max(currentMax, Number.isFinite(rawMax) ? rawMax : currentMax)
+  const tickComparisonEpsilon = getTickComparisonEpsilon(tickGap)
+  let finalMax = sortedTicks[sortedTicks.length - 1]
+
+  while (finalMax + tickComparisonEpsilon < targetMax) {
+    finalMax = Number((finalMax + tickGap).toPrecision(15))
+    sortedTicks.push(finalMax)
+  }
+
+  if (
+    headroomMode === 'inline-label' &&
+    Number.isFinite(rawMax) &&
+    finalMax - rawMax <= tickGap * 0.25 + tickComparisonEpsilon
+  ) {
+    finalMax = Number((finalMax + tickGap).toPrecision(15))
+    sortedTicks.push(finalMax)
+  }
+
+  return { max: finalMax, tickValues: sortedTicks }
+}

package/src/helpers/getColorScale.ts

@@ -10,6 +10,7 @@ import {
   divergentColorDistribution,
   colorblindColorDistribution
 } from '@cdc/core/helpers/palettes/colorDistributions'
+import { applySeriesColorAssignmentsToRange } from './colorAssignmentHelpers'
 
 export const getColorScale = (config: ChartConfig): ((value: string) => string) => {
   const configPalette = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
@@ -32,18 +33,24 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
   // Migrate old palette name if needed
   const migratedPaletteName = configPalette ? configPalette : getFallbackColorPalette(config)
 
+  const domain = config.runtime.seriesLabelsAll
+
+  const customColorsOrdered = config.general?.palette?.customColorsOrdered
+
   // Check for customColorsOrdered first (direct 1-to-1 mapping, no distribution needed)
-  if (config.general?.palette?.customColorsOrdered && Array.isArray(config.general.palette.customColorsOrdered)) {
-    const customColorsOrdered = config.general.palette.customColorsOrdered
+  if (Array.isArray(customColorsOrdered) && customColorsOrdered.length > 0) {
+    const range = applySeriesColorAssignmentsToRange(config, domain, customColorsOrdered)
     return scaleOrdinal({
-      domain: config.runtime.seriesLabelsAll,
-      range: customColorsOrdered,
+      domain,
+      range,
       unknown: null
     })
   }
 
+  const customColors = config.general?.palette?.customColors
+  const isUsingCustomColors = Array.isArray(customColors) && customColors.length > 0
   let palette =
-    config.general?.palette?.customColors ||
+    (isUsingCustomColors ? customColors : undefined) ||
     palettesSource[migratePaletteWithMap(migratedPaletteName, paletteMigrationMap, false)] ||
     palettesSource[configPalette]
 
@@ -58,8 +65,8 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
   // Apply enhanced color distribution (same logic as pie charts)
   const paletteVersion = getColorPaletteVersion(config)
 
-  // Skip enhanced distribution if not v2, too many keys, or wrong palette length
-  if (paletteVersion !== 2 || numberOfKeys > 9 || palette.length !== 9) {
+  // Skip enhanced distribution if using custom colors, not v2, too many keys, or wrong palette length
+  if (isUsingCustomColors || paletteVersion !== 2 || numberOfKeys > 9 || palette.length !== 9) {
     // Use existing logic for v1 palettes and other cases
     while (numberOfKeys > palette.length) {
       palette = palette.concat(palette)
@@ -90,9 +97,11 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
     }
   }
 
+  const range = applySeriesColorAssignmentsToRange(config, domain, palette)
+
   return scaleOrdinal({
-    domain: config.runtime.seriesLabelsAll,
-    range: palette,
+    domain,
+    range,
     unknown: null
   })
 }

package/src/helpers/getHasBoundarySuppression.ts

@@ -0,0 +1,26 @@
+import _ from 'lodash'
+import { ChartConfig } from '../types/ChartConfig'
+
+type GetHasBoundarySuppressionProps = {
+  rows?: Object[]
+  config: ChartConfig
+}
+
+export const getHasBoundarySuppression = ({ rows, config }: GetHasBoundarySuppressionProps) => {
+  if (!Array.isArray(rows) || rows.length === 0) return false
+  const suppressionRules = config.preliminaryData?.filter(({ type, style }) => type === 'suppression' && style) || []
+  if (!suppressionRules.length) return false
+
+  const boundaryRows = [rows[0], rows[rows.length - 1]].filter(Boolean)
+
+  return boundaryRows.some(item =>
+    suppressionRules.some(({ column, value }) => {
+      const values = _.values(_.pick(item, config.runtime?.seriesKeys))
+      const dynamicCategory = config.series[0]?.dynamicCategory
+      const match = column ? item[column] === value : values.includes(value)
+      const dynamic = dynamicCategory && (item[dynamicCategory] === column || !column)
+
+      return Boolean(match || dynamic)
+    })
+  )
+}

package/src/helpers/getMinMax.ts

@@ -1,5 +1,6 @@
 import { ChartConfig } from '../types/ChartConfig'
-import _ from 'lodash'
+import { getCleanTopTickMax } from './getCleanTopTickMax'
+import { getAxisMaxOverride } from './getAxisMaxOverride'
 
 type GetMinMaxProps = {
   /** config - standard chart config */
@@ -18,6 +19,8 @@ type GetMinMaxProps = {
   isAllLine: boolean
   /** convertLineToBarGraph - whether line charts should be rendered as bar graphs */
   convertLineToBarGraph?: boolean
+  /** whether selected-domain boundary rows include suppression tokens */
+  hasBoundarySuppression?: boolean
 }
 
 const getMinMax = ({
@@ -28,7 +31,8 @@ const getMinMax = ({
   data,
   isAllLine,
   tableData,
-  convertLineToBarGraph
+  convertLineToBarGraph,
+  hasBoundarySuppression = false
 }: GetMinMaxProps) => {
   let min = 0
   let max = 0
@@ -45,19 +49,22 @@ const getMinMax = ({
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
   const paddingAddedToAxis = config.yAxis.enablePadding ? 1 + config.yAxis.scalePadding / 100 : 1
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
-  // do validation bafore applying t0 charts
-  const isMaxValid = existPositiveValue ? Number(enteredMaxValue) >= maxValue : Number(enteredMaxValue) >= 0
+  // Validate before applying chart-specific domain rules.
+  const { hasValidMax: hasValidExplicitLeftMax, maxNumber: enteredMaxNumber } = getAxisMaxOverride({
+    value: enteredMaxValue,
+    minimumValidMax: existPositiveValue ? maxValue : 0
+  })
+  const shouldCleanAutoLeftMax = config.yAxis.autoMaxStrategy === 'clean-top-tick' && !hasValidExplicitLeftMax
   const isMinValid = isLogarithmicAxis
     ? Number(enteredMinValue) >= 0
     : (Number(enteredMinValue) <= 0 && minValue >= 0) || (Number(enteredMinValue) <= minValue && minValue < 0)
 
   min = enteredMinValue && isMinValid ? Number(enteredMinValue) : minValue
-  max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number.MIN_VALUE
+  max = hasValidExplicitLeftMax ? enteredMaxNumber : Number.MIN_VALUE
   const { lower, upper } = config?.confidenceKeys || {}
 
-  // When brush is active, use tableData (full dataset) for min/max calculations
-  // so the y-axis shows the full range, but still use filtered data for rendering
-  const dataForMinMax = config.xAxis.brushActive && tableData && tableData.length > 0 ? tableData : data
+  const useBrushFullRange = config.xAxis.brushActive && !config.xAxis.brushDynamicYAxis
+  const dataForMinMax = useBrushFullRange && tableData && tableData.length > 0 ? tableData : data
 
   if (lower && upper && config.visualizationType === 'Bar') {
     const buffer = min < 0 ? 1.1 : 0
@@ -136,8 +143,8 @@ const getMinMax = ({
       leftMax = findMaxFromSeriesKeys(dataForMinMax, leftAxisSeriesItems, leftMax, 'left')
       rightMax = findMaxFromSeriesKeys(dataForMinMax, rightAxisSeriesItems, rightMax, 'right')
 
-      if (leftMax < Number(enteredMaxValue)) {
-        leftMax = Number(enteredMaxValue)
+      if (hasValidExplicitLeftMax && leftMax < enteredMaxNumber) {
+        leftMax = enteredMaxNumber
       }
     } catch (e) {
       console.error(e.message)
@@ -181,23 +188,9 @@ const getMinMax = ({
     const numEnteredMin = Number(enteredMinValue)
     const isMinValid = isLogarithmicAxis ? numEnteredMin >= 0 && numEnteredMin < minValue : numEnteredMin < minValue
 
-    const suppressedMinValue = tableData?.some((item, i, arr) =>
-      config.preliminaryData?.some(({ type, style, column, value }) => {
-        if (type !== 'suppression' || !style) return false
-
-        const values = _.values(_.pick(item, config.runtime?.seriesKeys))
-        const dynamicCategory = config.series[0].dynamicCategory
-
-        const match = column ? item[column] === value : values.includes(value)
-        const dynamic = dynamicCategory && (item[dynamicCategory] === column || !column)
-
-        return (match || dynamic) && (i === 0 || i === arr.length - 1)
-      })
-    )
-
     const isCategorical = config.yAxis.type === 'categorical'
 
-    min = enteredMinValue !== '' && isMinValid ? numEnteredMin : suppressedMinValue ? 0 : isCategorical ? 0 : minValue
+    min = enteredMinValue !== '' && isMinValid ? numEnteredMin : hasBoundarySuppression ? 0 : isCategorical ? 0 : minValue
   }
 
   //If data value max wasn't provided, calculate it
@@ -206,6 +199,14 @@ const getMinMax = ({
     max = existPositiveValue ? maxValue : 0
   }
 
+  if (shouldCleanAutoLeftMax) {
+    if (config.visualizationType === 'Combo') {
+      leftMax = getCleanTopTickMax(leftMax)
+    } else {
+      max = getCleanTopTickMax(max)
+    }
+  }
+
   //Adds Y Axis data padding if applicable
   if (config.runtime.yAxis.paddingPercent) {
     let paddingValue = (max - min) * config.runtime.yAxis.paddingPercent

package/src/helpers/getYAxisDomainData.ts

@@ -0,0 +1,38 @@
+import { ChartConfig } from '../types/ChartConfig'
+import { AxisFilterDomainBehavior } from '@cdc/core/types/Axis'
+
+const hasRows = (data?: Object[]) => Array.isArray(data) && data.length > 0
+
+export const getYAxisFilterDomainBehavior = (config: ChartConfig): AxisFilterDomainBehavior => {
+  return config.yAxis?.filterDomainBehavior === 'stable' ? 'stable' : 'dynamic'
+}
+
+export const getYAxisDomainData = ({
+  config,
+  data,
+  tableData,
+  fullEligibleDomainData
+}: {
+  config: ChartConfig
+  data: Object[]
+  tableData?: Object[]
+  fullEligibleDomainData?: Object[]
+}): Object[] => {
+  const brushActive = Boolean(config.xAxis?.brushActive)
+  const brushDynamicYAxis = Boolean(config.xAxis?.brushDynamicYAxis)
+
+  if (brushActive && brushDynamicYAxis) {
+    return data
+  }
+
+  const behavior = getYAxisFilterDomainBehavior(config)
+  if (behavior === 'stable' && hasRows(fullEligibleDomainData)) {
+    return fullEligibleDomainData
+  }
+
+  if (brushActive && !brushDynamicYAxis && hasRows(tableData)) {
+    return tableData
+  }
+
+  return data
+}

package/src/helpers/getYAxisFinalizationEligibility.ts

@@ -0,0 +1,40 @@
+import { type ChartConfig } from '../types/ChartConfig'
+
+type YAxisFinalizationEligibilityProps = {
+  config: ChartConfig
+  hasSpacedInlineLabel: boolean
+  hasValidExplicitLeftMax: boolean
+  isHorizontal: boolean
+}
+
+const chartUsesStandardPrimaryYScale = (config: ChartConfig) => {
+  return !['Box Plot', 'Bump Chart', 'Forest Plot'].includes(config.visualizationType)
+}
+
+const isLinearOrLegacyYAxis = (config: ChartConfig) => {
+  const yAxisType = config.yAxis.type
+
+  return yAxisType === undefined || yAxisType === '' || yAxisType === 'linear'
+}
+
+export const getYAxisFinalizationEligibility = ({
+  config,
+  hasSpacedInlineLabel,
+  hasValidExplicitLeftMax,
+  isHorizontal
+}: YAxisFinalizationEligibilityProps) => {
+  const hasStandardLinearPrimaryYAxis =
+    !isHorizontal && isLinearOrLegacyYAxis(config) && chartUsesStandardPrimaryYScale(config)
+  const supportsInlineLabelHeadroom = hasStandardLinearPrimaryYAxis && config.visualizationType !== 'Combo'
+  const shouldUseInlineLabelHeadroom = hasSpacedInlineLabel && supportsInlineLabelHeadroom
+  const shouldUseCleanTopTick =
+    !hasValidExplicitLeftMax && (config.yAxis.autoMaxStrategy === 'clean-top-tick' || shouldUseInlineLabelHeadroom)
+
+  return {
+    hasStandardLinearPrimaryYAxis,
+    supportsInlineLabelHeadroom,
+    shouldUseCleanTopTick,
+    shouldUseInlineLabelHeadroom,
+    shouldFinalizePrimaryYAxis: shouldUseCleanTopTick && hasStandardLinearPrimaryYAxis
+  }
+}

package/src/helpers/handleChartAriaLabels.ts

@@ -1,17 +1,30 @@
-export const handleChartAriaLabels = state => {
+import type { AltTextConfig } from '@cdc/core/types/AltText'
+import { resolveAltTextDescription } from '@cdc/core/helpers/resolveAltTextDescription'
+
+const getAutoLabel = (state: { visualizationType?: string; title?: string }): string => {
+  let ariaLabel = ''
+  if (state.visualizationType) {
+    ariaLabel += `${state.visualizationType} chart`
+  }
+  if (state.title && state.visualizationType) {
+    ariaLabel += ` with the title: ${state.title}`
+  }
+  return ariaLabel
+}
+
+export const handleChartAriaLabels = (state: {
+  visualizationType?: string
+  title?: string
+  altText?: AltTextConfig
+  dataMetadata?: Record<string, string>
+}): string => {
   try {
     if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
-    let ariaLabel = ''
-
-    if (state.visualizationType) {
-      ariaLabel += `${state.visualizationType} chart`
-    }
 
-    if (state.title && state.visualizationType) {
-      ariaLabel += ` with the title: ${state.title}`
-    }
+    const title = getAutoLabel(state)
+    const description = resolveAltTextDescription(state.altText, state.dataMetadata)
 
-    return ariaLabel
+    return description ? `${title}. ${description}` : title
   } catch (e) {
     console.error('COVE: ', e.message) // eslint-disable-line
     return 'Data visualization container'

package/src/helpers/hasSpacedInlineLabel.ts

@@ -0,0 +1,10 @@
+import { ChartConfig } from '../types/ChartConfig'
+
+export const hasSpacedInlineLabel = (config: ChartConfig): boolean => {
+  const inlineLabel = config.yAxis?.inlineLabel
+  if (inlineLabel && inlineLabel.includes(' ')) {
+    return true
+  }
+
+  return false
+}

package/src/helpers/seriesColumnSettings.ts

@@ -11,6 +11,7 @@ type ColumnFormattingParams = {
 }
 
 const hasOwn = (object: object, key: keyof Column) => Object.prototype.hasOwnProperty.call(object, key)
+const isNonEmptyString = (value: unknown) => typeof value === 'string' && value !== ''
 
 export const createDefaultSeriesColumnConfig = (columnName: string): Column => ({
   name: columnName,
@@ -94,12 +95,12 @@ 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')) {

package/src/helpers/seriesHighlight.ts

@@ -0,0 +1,26 @@
+import type { Label } from '../types/Label'
+
+type LegendHighlightSource = Pick<Label, 'datum'> | string
+
+export const getLegendHighlightKey = (
+  seriesLabels: Record<string, string> = {},
+  legendSource: LegendHighlightSource
+): string => {
+  const labelDatum = typeof legendSource === 'string' ? legendSource : legendSource.datum
+
+  return Object.entries(seriesLabels).find(([, label]) => label === labelDatum)?.[0] || labelDatum
+}
+
+export const shouldResetSeriesHighlight = (
+  seriesHighlight: string[],
+  seriesKeys: string[] = [],
+  highlightKey: string,
+  visualizationType?: string
+): boolean => {
+  return (
+    seriesHighlight.length + 1 === seriesKeys.length &&
+    visualizationType !== 'Forecasting' &&
+    seriesKeys.includes(highlightKey) &&
+    !seriesHighlight.includes(highlightKey)
+  )
+}