@cdc/chart 4.26.7 → 4.26.10

package/src/helpers/getBoxPlotConfig.ts

@@ -1,13 +1,10 @@
 import capitalize from 'lodash/capitalize'
-import chain from 'lodash/chain'
-import filter from 'lodash/filter'
 import flatMap from 'lodash/flatMap'
 import map from 'lodash/map'
-import min from 'lodash/min'
 import round from 'lodash/round'
 import uniq from 'lodash/uniq'
+import { calculateBoxPlotStats } from './boxPlotStats'
 import { ChartConfig } from '../types/ChartConfig'
-import * as d3 from 'd3-array'
 
 export const getBoxPlotConfig = (newConfig: ChartConfig, data: object[]) => {
   const combinedData = data
@@ -20,44 +17,28 @@ export const getBoxPlotConfig = (newConfig: ChartConfig, data: object[]) => {
       try {
         if (!g) throw new Error('No groups resolved in box plots')
 
-        // Start handle operations on combinedData
-        const { count, sortedData } = chain(combinedData)
-          // Filter by xAxis data key
-          .filter(item => item[newConfig.xAxis.dataKey] === g)
-          // perform multiple operations on the filtered data
-          .thru(filteredData => ({
-            count: filteredData.length,
-            sortedData: map(filteredData, item => Number(item[seriesKey])).sort()
-          }))
-          // get the results from the chain
-          .value()
+        const filteredData = combinedData.filter(item => item[newConfig.xAxis.dataKey] === g)
+        const stats = calculateBoxPlotStats(map(filteredData, item => item[seriesKey]))
 
-        if (!sortedData) throw new Error('boxplots dont have data yet')
+        if (!stats) throw new Error('boxplots dont have data yet')
         if (!plots) throw new Error('boxplots dont have plots yet')
 
-        const q1 = d3.quantile(sortedData, 0.25)
-        const q3 = d3.quantile(sortedData, 0.75)
-
-        const iqr = q3 - q1
-        const lowerBounds = q1 - 1.5 * iqr
-        const upperBounds = q3 + 1.5 * iqr
-        const nonOutliers = sortedData.filter(value => value >= lowerBounds && value <= upperBounds)
         plots.push({
           columnCategory: g,
-          columnMax: d3.max(nonOutliers),
-          columnThirdQuartile: round(q3, newConfig.dataFormat.roundTo),
-          columnMedian: Number(d3.median(sortedData)).toFixed(newConfig.dataFormat.roundTo),
-          columnFirstQuartile: round(q1, newConfig.dataFormat.roundTo),
-          columnMin: min(nonOutliers),
-          columnCount: count,
-          columnSd: Number(d3.deviation(sortedData)).toFixed(newConfig.dataFormat.roundTo),
-          columnMean: Number(d3.mean(sortedData)).toFixed(newConfig.dataFormat.roundTo),
-          columnIqr: round(iqr, newConfig.dataFormat.roundTo),
-          values: sortedData,
-          columnLowerBounds: lowerBounds,
-          columnUpperBounds: upperBounds,
-          columnOutliers: filter(sortedData, value => value < lowerBounds || value > upperBounds),
-          columnNonOutliers: filter(sortedData, value => value >= lowerBounds && value <= upperBounds)
+          columnMax: stats.whiskerMax,
+          columnThirdQuartile: round(stats.q3, newConfig.dataFormat.roundTo),
+          columnMedian: Number(stats.median).toFixed(newConfig.dataFormat.roundTo),
+          columnFirstQuartile: round(stats.q1, newConfig.dataFormat.roundTo),
+          columnMin: stats.whiskerMin,
+          columnCount: stats.values.length,
+          columnSd: Number(stats.deviation).toFixed(newConfig.dataFormat.roundTo),
+          columnMean: Number(stats.mean).toFixed(newConfig.dataFormat.roundTo),
+          columnIqr: round(stats.iqr, newConfig.dataFormat.roundTo),
+          values: stats.values,
+          columnLowerBounds: stats.lowerBound,
+          columnUpperBounds: stats.upperBound,
+          columnOutliers: stats.outliers,
+          columnNonOutliers: stats.nonOutliers
         })
       } catch (e) {
         console.error('COVE: ', e.message) // eslint-disable-line

package/src/helpers/getChartTypeDefaultPalette.ts

@@ -0,0 +1,29 @@
+import { Palette } from '@cdc/core/types/Palette'
+
+const paletteDefaultsByVisualizationType: Record<string, Palette> = {
+  Line: {
+    isReversed: false,
+    version: '2.1',
+    name: 'qualitative_standard'
+  },
+  'Horizon Chart': {
+    isReversed: false,
+    version: '2.1',
+    name: 'sequential_blue'
+  },
+  HeatMap: {
+    isReversed: false,
+    version: '2.1',
+    name: 'sequential_blue'
+  },
+  Sankey: {
+    isReversed: true,
+    version: '2.1',
+    name: 'sequential_bluereverse'
+  }
+}
+
+export const getChartTypeDefaultPalette = (visualizationType?: string): Palette | undefined => {
+  const palette = visualizationType ? paletteDefaultsByVisualizationType[visualizationType] : undefined
+  return palette ? { ...palette } : undefined
+}

package/src/helpers/getColorCodeCategoryColorMap.ts

@@ -0,0 +1,26 @@
+import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
+import { ChartConfig } from '../types/ChartConfig'
+import { getV21ChartDistributionColors } from './getV21ChartDistributionColors'
+
+export const getColorCodeCategoryColorMap = (
+  config: ChartConfig,
+  tableData: Record<string, unknown>[],
+  colorPalettes: Record<string, string[]>
+): Map<unknown, string> => {
+  const colorCode = config.legend?.colorCode
+  if (!colorCode || !Array.isArray(tableData)) return new Map()
+
+  let palette = getPaletteColors(config, colorPalettes)
+  if (!palette.length) return new Map()
+
+  const categoryColors = new Map<unknown, string>()
+
+  const categories = Array.from(new Set(tableData.map(row => row[colorCode])))
+  palette = getV21ChartDistributionColors(config, palette, categories.length) ?? palette
+
+  categories.forEach((category, index) => {
+    categoryColors.set(category, palette[index % palette.length])
+  })
+
+  return categoryColors
+}

package/src/helpers/getColorScale.ts

@@ -1,6 +1,6 @@
 import { twoColorPalette } from '@cdc/core/data/colorPalettes'
 import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getColorPaletteMajorVersion } from '@cdc/core/helpers/getColorPaletteMajorVersion'
 import { scaleOrdinal } from '@visx/scale'
 import { ChartConfig } from '../types/ChartConfig'
 import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
@@ -10,7 +10,17 @@ import {
   divergentColorDistribution,
   colorblindColorDistribution
 } from '@cdc/core/helpers/palettes/colorDistributions'
+import { isValidPaletteColor } from '@cdc/core/helpers/palettes/colorValidation'
 import { applySeriesColorAssignmentsToRange } from './colorAssignmentHelpers'
+import { getV21ChartDistributionColors } from './getV21ChartDistributionColors'
+
+const INVALID_CUSTOM_COLOR_FALLBACK = '#000000'
+
+const normalizeCustomColors = (colors: unknown): string[] => {
+  if (!Array.isArray(colors) || colors.length === 0) return []
+
+  return colors.map(color => (isValidPaletteColor(color) ? color.trim() : INVALID_CUSTOM_COLOR_FALLBACK))
+}
 
 export const getColorScale = (config: ChartConfig): ((value: string) => string) => {
   const configPalette = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
@@ -19,7 +29,7 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
   const colorPalettes = filterChartColorPalettes(config)
 
   // Get the correct version of two-color palettes
-  const version = getColorPaletteVersion(config)
+  const version = getColorPaletteMajorVersion(config)
   const versionKey = `v${version}`
   const versionedTwoColorPalette = twoColorPalette[versionKey] || twoColorPalette.v2
 
@@ -28,17 +38,24 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
     ? versionedTwoColorPalette
     : colorPalettes
 
-  const allPalettes: Record<string, string[]> = { ...versionedTwoColorPalette, ...colorPalettes }
-
   // Migrate old palette name if needed
   const migratedPaletteName = configPalette ? configPalette : getFallbackColorPalette(config)
+  let namedPalette =
+    palettesSource[migratePaletteWithMap(migratedPaletteName, paletteMigrationMap, false)] ||
+    palettesSource[configPalette]
+
+  // Use a visible sentinel when saved palette config cannot resolve.
+  if (!namedPalette) {
+    console.warn(`Palette "${configPalette}" not found, falling back to black`)
+    namedPalette = [INVALID_CUSTOM_COLOR_FALLBACK]
+  }
 
   const domain = config.runtime.seriesLabelsAll
 
-  const customColorsOrdered = config.general?.palette?.customColorsOrdered
+  const customColorsOrdered = normalizeCustomColors(config.general?.palette?.customColorsOrdered)
 
   // Check for customColorsOrdered first (direct 1-to-1 mapping, no distribution needed)
-  if (Array.isArray(customColorsOrdered) && customColorsOrdered.length > 0) {
+  if (customColorsOrdered.length > 0) {
     const range = applySeriesColorAssignmentsToRange(config, domain, customColorsOrdered)
     return scaleOrdinal({
       domain,
@@ -47,26 +64,19 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
     })
   }
 
-  const customColors = config.general?.palette?.customColors
-  const isUsingCustomColors = Array.isArray(customColors) && customColors.length > 0
-  let palette =
-    (isUsingCustomColors ? customColors : undefined) ||
-    palettesSource[migratePaletteWithMap(migratedPaletteName, paletteMigrationMap, false)] ||
-    palettesSource[configPalette]
-
-  // Fallback to a default palette if none found
-  if (!palette) {
-    console.warn(`Palette "${configPalette}" not found, falling back to default`)
-    palette = Object.values(allPalettes)[0] || ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd']
-  }
+  const customColors = normalizeCustomColors(config.general?.palette?.customColors)
+  const isUsingCustomColors = customColors.length > 0
+  let palette = isUsingCustomColors ? customColors : namedPalette
 
   let numberOfKeys = config.runtime.seriesKeys.length
 
   // Apply enhanced color distribution (same logic as pie charts)
-  const paletteVersion = getColorPaletteVersion(config)
+  const paletteVersion = getColorPaletteMajorVersion(config)
+  const v21DistributionColors = getV21ChartDistributionColors(config, palette, numberOfKeys)
 
-  // 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) {
+  if (v21DistributionColors) {
+    palette = v21DistributionColors
+  } else 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)
@@ -78,7 +88,6 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
     const isDivergent = configPalette && configPalette.includes('divergent')
     const isColorblindSafe =
       configPalette && (configPalette.includes('colorblindsafe') || configPalette.includes('qualitative_standard'))
-
     // Determine which distribution to use based on palette type
     let distributionMap = null
     if (isDivergent) {

package/src/helpers/getDynamicYAxisCategories.ts

@@ -0,0 +1,69 @@
+import { Axis } from '@cdc/core/types/Axis'
+
+export type DynamicYAxisCategory = {
+  label: string
+  upperBoundKey?: string
+  color?: string
+}
+
+export type DynamicYAxisCategoriesConfig = {
+  categories: DynamicYAxisCategory[]
+}
+
+type DynamicYAxisCategoriesParams = {
+  config?: DynamicYAxisCategoriesConfig
+  data?: Record<string, any>[]
+}
+
+type DynamicYAxisCategoriesResult = {
+  categories: NonNullable<Axis['categories']>
+  axisMax: number | null
+} | null
+
+const toFiniteNumber = value => {
+  const number = Number(value)
+  return Number.isFinite(number) ? number : null
+}
+
+export const getDynamicYAxisCategories = ({
+  config,
+  data = []
+}: DynamicYAxisCategoriesParams): DynamicYAxisCategoriesResult => {
+  if (!config || !data.length || !config.categories?.length) return null
+
+  const currentRow = data.find(row =>
+    config.categories.every(
+      (category, index) =>
+        (index === config.categories.length - 1 && !category.upperBoundKey) ||
+        toFiniteNumber(row?.[category.upperBoundKey]) !== null
+    )
+  )
+  if (!currentRow) return null
+
+  const upperBounds = config.categories.map(category =>
+    category.upperBoundKey ? toFiniteNumber(currentRow[category.upperBoundKey]) : null
+  )
+  const lastCategory = config.categories[config.categories.length - 1]
+  const hasOpenEndedFinalCategory = !lastCategory.upperBoundKey
+  const axisMax = hasOpenEndedFinalCategory ? null : upperBounds[upperBounds.length - 1]
+  const resolvedUpperBounds = hasOpenEndedFinalCategory ? upperBounds.slice(0, -1) : upperBounds
+
+  if (resolvedUpperBounds.some(bound => bound === null)) return null
+  if (!hasOpenEndedFinalCategory && (axisMax === null || axisMax <= 0)) return null
+
+  const numericUpperBounds = resolvedUpperBounds as number[]
+  if (numericUpperBounds.some((bound, index) => index > 0 && bound <= numericUpperBounds[index - 1])) {
+    return null
+  }
+
+  const categories = config.categories.map((category, index) => ({
+    label: category.label,
+    height:
+      hasOpenEndedFinalCategory && index === config.categories.length - 1
+        ? ''
+        : String(numericUpperBounds[index] - (numericUpperBounds[index - 1] || 0)),
+    color: category.color || '#f1f1f1'
+  }))
+
+  return { categories, axisMax }
+}

package/src/helpers/getMinMax.ts

@@ -1,6 +1,7 @@
 import { ChartConfig } from '../types/ChartConfig'
 import { getCleanTopTickMax } from './getCleanTopTickMax'
 import { getAxisMaxOverride } from './getAxisMaxOverride'
+import getStackedSeriesMax from './getStackedSeriesMax'
 
 type GetMinMaxProps = {
   /** config - standard chart config */
@@ -120,24 +121,25 @@ const getMinMax = ({
       let rightAxisSeriesItems = series.filter(s => s.axis === 'Right')
 
       const findMaxFromSeriesKeys = (data, seriesData, max, axis = 'left') => {
-        let stackedBarMax = 0
-        let axisSeriesKeys = seriesData.map(i => i.dataKey) || []
+        const stackedBarSeries =
+          config.visualizationSubType === 'stacked' && axis === 'left' ? seriesData.filter(s => s.type === 'Bar') : []
+        const stackedBarSeriesKeys = new Set(stackedBarSeries.map(s => s.dataKey))
+        let axisSeriesKeys = seriesData.map(i => i.dataKey).filter(key => !stackedBarSeriesKeys.has(key)) || []
 
         axisSeriesKeys.forEach(key => {
-          let _seriesData = seriesData.find(s => s.dataKey === key)
           let _data = data.map(d => d[key])
           let seriesMax = Math.max.apply(null, _data)
-          if (config.visualizationSubType === 'stacked' && axis === 'left' && _seriesData.type === 'Bar') {
-            stackedBarMax += seriesMax
-          }
           if (seriesMax > max) {
             max = seriesMax
           }
+        })
 
+        if (stackedBarSeries.length) {
+          const stackedBarMax = getStackedSeriesMax(data, stackedBarSeries)
           if (max < stackedBarMax) {
             max = stackedBarMax
           }
-        })
+        }
         return max
       }
       leftMax = findMaxFromSeriesKeys(dataForMinMax, leftAxisSeriesItems, leftMax, 'left')

package/src/helpers/getNewRuntime.ts

@@ -1,3 +1,5 @@
+import { getSeriesName } from '@cdc/core/helpers/getSeriesName'
+
 export const getNewRuntime = (visualizationConfig, newFilteredData) => {
   const runtime = visualizationConfig.runtime ? { ...visualizationConfig.runtime } : {}
   runtime.series = []
@@ -23,8 +25,9 @@ export const getNewRuntime = (visualizationConfig, newFilteredData) => {
 
   runtime.seriesKeys = runtime.series
     ? runtime.series.map(series => {
-        runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
-        runtime.seriesLabelsAll.push(series.name || series.dataKey)
+        const seriesName = getSeriesName(series.dataKey, { series: [series] })
+        runtime.seriesLabels[series.dataKey] = seriesName
+        runtime.seriesLabelsAll.push(seriesName)
         return series.dataKey
       })
     : []

package/src/helpers/getStackedSeriesMax.ts

@@ -0,0 +1,51 @@
+import isNumber from '@cdc/core/helpers/isNumber'
+
+type SeriesKeyOrItem =
+  | string
+  | {
+      dataKey?: string
+      originalDataKey?: string
+      dynamicCategory?: boolean
+    }
+
+const cleanValue = value => {
+  if (value === null || value === '') return ''
+  return typeof value === 'string' ? value.replace(/[,$]/g, '') : value
+}
+
+const getSeriesDataKey = (seriesKeyOrItem: SeriesKeyOrItem) => {
+  if (typeof seriesKeyOrItem === 'string') return seriesKeyOrItem
+  return seriesKeyOrItem.dynamicCategory && seriesKeyOrItem.originalDataKey
+    ? seriesKeyOrItem.originalDataKey
+    : seriesKeyOrItem.dataKey
+}
+
+const getStackedSeriesMax = (data: Object[] = [], seriesKeysOrSeriesItems: SeriesKeyOrItem[] = []) => {
+  let maxValue = Number.NEGATIVE_INFINITY
+  let hasValue = false
+
+  for (const row of data) {
+    let rowSum = 0
+    let hasRowValue = false
+
+    for (const seriesKeyOrItem of seriesKeysOrSeriesItems) {
+      const seriesKey = getSeriesDataKey(seriesKeyOrItem)
+      if (!seriesKey) continue
+
+      const value = cleanValue(row[seriesKey])
+      if (isNumber(value)) {
+        rowSum += Number(value)
+        hasRowValue = true
+      }
+    }
+
+    if (hasRowValue) {
+      maxValue = Math.max(maxValue, rowSum)
+      hasValue = true
+    }
+  }
+
+  return hasValue ? maxValue : 0
+}
+
+export default getStackedSeriesMax

package/src/helpers/getV21ChartDistributionColors.ts

@@ -0,0 +1,57 @@
+import { type ChartConfig, type VisualizationType } from '../types/ChartConfig'
+import {
+  chartV21ColorDistribution,
+  divergentColorDistribution,
+  qualitativeStandardColorDistribution
+} from '@cdc/core/helpers/palettes/colorDistributions'
+
+const V21_COLOR_DISTRIBUTION_CHART_TYPES = new Set<VisualizationType>([
+  'Area Chart',
+  'Bar',
+  'Box Plot',
+  'Bump Chart',
+  'Combo',
+  'Line',
+  'Pie',
+  'Radar',
+  'Scatter Plot',
+  'Spark Line'
+])
+
+export const getV21ChartDistributionColors = (
+  config: ChartConfig,
+  palette: string[],
+  itemCount: number
+): string[] | undefined => {
+  const paletteName = config.general?.palette?.name || config.palette || ''
+  const hasCustomColors =
+    Boolean(config.general?.palette?.customColors?.length) ||
+    Boolean(config.general?.palette?.customColorsOrdered?.length)
+
+  if (
+    config.general?.palette?.version !== '2.1' ||
+    !V21_COLOR_DISTRIBUTION_CHART_TYPES.has(config.visualizationType) ||
+    hasCustomColors ||
+    palette.length !== 9
+  ) {
+    return undefined
+  }
+
+  let distributionMap: Record<number, number[]> | undefined
+  if (paletteName.includes('sequential')) {
+    distributionMap = chartV21ColorDistribution
+  } else if (paletteName.includes('divergent')) {
+    distributionMap = divergentColorDistribution
+  } else if (paletteName.includes('qualitative_standard')) {
+    distributionMap = qualitativeStandardColorDistribution
+  }
+
+  const distributionIndices = distributionMap?.[itemCount]
+  if (!distributionIndices) return undefined
+
+  const orientedIndices = paletteName.endsWith('reverse')
+    ? [...distributionIndices].reverse().map(index => palette.length - 1 - index)
+    : distributionIndices
+
+  return orientedIndices.map(index => palette[index])
+}

package/src/helpers/handleRankByValue.ts

@@ -1,15 +1,15 @@
-import { ChartConfig } from '../types/ChartConfig'
-
-const getNumericValue = number => {
-  if (typeof number === 'string') return parseFloat(number.replace(/,/g, ''))
-  return Number(number)
-}
-
-export const handleRankByValue = (data, passedConfig: ChartConfig) => {
-  if (passedConfig.rankByValue) {
-    const series = passedConfig.series[0].dataKey
-    const sorted = data.sort((a, b) => getNumericValue(a[series]) - getNumericValue(b[series]))
-    return passedConfig.rankByValue === 'asc' ? sorted : sorted.reverse()
-  }
-  return data
-}
+import { ChartConfig } from '../types/ChartConfig'
+
+const getNumericValue = number => {
+  if (typeof number === 'string') return parseFloat(number.replace(/,/g, ''))
+  return Number(number)
+}
+
+export const handleRankByValue = (data, passedConfig: ChartConfig) => {
+  if (passedConfig.rankByValue) {
+    const series = passedConfig.series[0].dataKey
+    const sorted = data.toSorted((a, b) => getNumericValue(a[series]) - getNumericValue(b[series]))
+    return passedConfig.rankByValue === 'asc' ? sorted : sorted.reverse()
+  }
+  return data
+}

package/src/helpers/seriesColumnSettings.ts

@@ -131,3 +131,13 @@ export const getSeriesColumnFormattingParams = (columnConfig?: Partial<Column>):
 
   return Object.keys(formattingParams).length ? formattingParams : undefined
 }
+
+export const getAdditionalColumnFormattingParams = (columnConfig?: Partial<Column>): ColumnFormattingParams => {
+  const explicitFormattingParams = getSeriesColumnFormattingParams(columnConfig)
+
+  return {
+    addColPrefix: '',
+    addColSuffix: '',
+    ...(explicitFormattingParams || {})
+  }
+}

package/src/helpers/sizeHelpers.ts

@@ -1,10 +1,11 @@
 import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
-import { ChartConfig, ViewportSize } from '../types/ChartConfig'
+import { ChartConfig } from '../types/ChartConfig'
 import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
+import type { ViewPort } from '@cdc/core/types/ViewPort'
 
 export function getOrientation(
   { orientation, heights, visualizationType }: Pick<ChartConfig, 'orientation' | 'heights' | 'visualizationType'>,
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
 ): 'vertical' | 'horizontal' | 'mobileVertical' {
   const isForestPlot = visualizationType === 'Forest Plot'
   const useVertical = orientation === 'vertical' || isForestPlot
@@ -15,7 +16,7 @@ export function getOrientation(
 }
 export function calcInitialHeight(
   { heights, orientation, visualizationType }: Pick<ChartConfig, 'heights' | 'orientation' | 'visualizationType'>,
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
 ): number {
   // if no heights are provided assume config has not been loaded
   if (!heights) return 0

package/src/helpers/smallMultiplesHelpers.ts

@@ -1,3 +1,4 @@
+import { sortByNumericText } from '@cdc/core/helpers/sorting'
 import { scaleOrdinal } from '@visx/scale'
 import { getColorScale } from './getColorScale'
 import { ColorScale } from '../types/ChartContext'
@@ -105,18 +106,16 @@ export const applyTileOrder = (tileItems, orderType, customOrder, config) => {
 
   switch (orderType) {
     case 'asc':
-      return [...tileItems].sort((a, b) => {
-        const titleA = String(getTileDisplayTitle(a.mode, a.seriesKey, a.tileValue, a.key, config)).toLowerCase()
-        const titleB = String(getTileDisplayTitle(b.mode, b.seriesKey, b.tileValue, b.key, config)).toLowerCase()
-        return titleA.localeCompare(titleB)
-      })
+      return sortByNumericText(tileItems, item =>
+        getTileDisplayTitle(item.mode, item.seriesKey, item.tileValue, item.key, config)
+      )
 
     case 'desc':
-      return [...tileItems].sort((a, b) => {
-        const titleA = String(getTileDisplayTitle(a.mode, a.seriesKey, a.tileValue, a.key, config)).toLowerCase()
-        const titleB = String(getTileDisplayTitle(b.mode, b.seriesKey, b.tileValue, b.key, config)).toLowerCase()
-        return titleB.localeCompare(titleA)
-      })
+      return sortByNumericText(
+        tileItems,
+        item => getTileDisplayTitle(item.mode, item.seriesKey, item.tileValue, item.key, config),
+        'desc'
+      )
 
     case 'custom':
       if (!customOrder || customOrder.length === 0) {
@@ -154,9 +153,7 @@ export const getTileKeys = (config, data) => {
     const tileColumn = config.smallMultiples.tileColumn
     if (!tileColumn) return []
 
-    return Array.from(new Set(data.map(row => row[tileColumn])))
-      .filter(val => val != null)
-      .sort()
+    return sortByNumericText(Array.from(new Set(data.map(row => row[tileColumn]))).filter(val => val != null))
   }
   return []
 }

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

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { applyChartTypeContract } from '../applyChartTypeContract'
+
+const chart = (visualizationType: string) => ({
+  type: 'chart',
+  visualizationType,
+  orientation: 'vertical',
+  series: [{ dataKey: 'value' }],
+  xAxis: { type: 'categorical', dataKey: 'date' },
+  yAxis: {},
+  legend: {},
+  general: { paletteColorCount: 2 },
+  table: {}
+})
+
+describe('applyChartTypeContract', () => {
+  it.each(['Area Chart', 'Horizon Chart', 'Box Plot', 'Bump Chart', 'HeatMap', 'Forecasting'])(
+    'does not mutate the input for %s transitions',
+    visualizationType => {
+      const input = chart(visualizationType)
+      const before = structuredClone(input)
+
+      const result = applyChartTypeContract(input as any)
+
+      expect(input).toEqual(before)
+      expect(result).not.toBe(input)
+      expect(result.xAxis).not.toBe(input.xAxis)
+      expect(result.series).not.toBe(input.series)
+    }
+  )
+
+  it('authors the stacked Area Chart subtype', () => {
+    const result = applyChartTypeContract(chart('Area Chart') as any)
+
+    expect(result.visualizationSubType).toBe('stacked')
+  })
+})

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { calculateBoxPlotStats, getSortedBoxPlotValues } from '../boxPlotStats'
+
+describe('boxPlotStats', () => {
+  it('normalizes numeric strings once for all box plot stats consumers', () => {
+    expect(getSortedBoxPlotValues(['1,000', '20', '', null, undefined, 'n/a', '3'])).toEqual([3, 20, 1000])
+  })
+
+  it('calculates quartiles, fences, whiskers, and outliers from sorted numeric values', () => {
+    const stats = calculateBoxPlotStats(['10', '20', '30', '40', '1,000'])
+
+    expect(stats).toMatchObject({
+      values: [10, 20, 30, 40, 1000],
+      q1: 20,
+      q3: 40,
+      median: 30,
+      iqr: 20,
+      lowerBound: -10,
+      upperBound: 70,
+      nonOutliers: [10, 20, 30, 40],
+      outliers: [1000],
+      whiskerMin: 10,
+      whiskerMax: 40
+    })
+  })
+
+  it('returns null when no finite values can be calculated', () => {
+    expect(calculateBoxPlotStats(['', null, undefined, 'n/a'])).toBeNull()
+  })
+})