@cdc/chart 4.25.8 → 4.25.11

package/src/helpers/buildForecastPaletteMappings.ts

@@ -0,0 +1,112 @@
+/**
+ * Builds a palette lookup map with backward-compatibility mappings for forecast charts
+ *
+ * This function creates multiple naming format mappings to support:
+ * - V1 configs using old naming like "Sequential Blue" (Title Case with spaces)
+ * - V2 configs using new naming like "sequential-blue" (lowercase with hyphens)
+ * - MPX legacy aliases (v1 only)
+ *
+ * @param processedPalettes - The palette data processed through updatePaletteNames
+ * @param paletteVersion - The palette version (1 or 2) from the config
+ * @returns A palette map with keys in various formats pointing to color arrays
+ */
+export const buildForecastPaletteMappings = (
+  processedPalettes: Record<string, string[]>,
+  paletteVersion: number
+): Record<string, string[]> => {
+  const paletteMap: Record<string, string[]> = {}
+
+  // Create base mappings with multiple naming formats for backward compatibility:
+  // - sequential-blue (hyphenated)
+  // - sequential_blue (underscore)
+  // - Sequential Blue (with spaces)
+  Object.keys(processedPalettes).forEach(key => {
+    const value = processedPalettes[key]
+    // Original key
+    paletteMap[key] = value
+    // Lowercase with hyphens
+    paletteMap[key.toLowerCase().replace(/ /g, '-')] = value
+    // Lowercase with underscores
+    paletteMap[key.toLowerCase().replace(/ /g, '_')] = value
+    // Original key variations
+    paletteMap[key.replace(/_/g, '-')] = value
+    paletteMap[key.toLowerCase()] = value
+  })
+
+  if (paletteVersion === 1) {
+    // V1: Add MPX legacy aliases
+    // Note: Sequential Blue Two was aliased as "Sequential Blue 2 (MPX)" and Sequential Orange as "Sequential Orange (MPX)"
+    const MPX_ALIASES: Record<string, string[]> = {
+      'sequential-blue-two': ['sequential-blue-2-(mpx)', 'sequential-blue-2-(MPX)'],
+      'sequential-blue-tworeverse': ['sequential-blue-2-(mpx)reverse', 'sequential-blue-2-(MPX)reverse'],
+      'sequential-orange': ['sequential-orange-(mpx)', 'sequential-orange-(MPX)'],
+      'sequential-orangereverse': ['sequential-orange-(mpx)reverse', 'sequential-orange-(MPX)reverse']
+    }
+
+    Object.entries(MPX_ALIASES).forEach(([canonical, aliases]) => {
+      const palette = paletteMap[canonical]
+      if (palette) {
+        aliases.forEach(alias => {
+          paletteMap[alias] = palette
+        })
+      }
+    })
+  } else {
+    // V2: Add backward compatibility mappings for migrated configs
+    // Map old v1 sequential palette names (Title Case with spaces) to v2 palettes
+    // Also includes MPX aliases since users may have selected those in v1
+    const V2_MIGRATION_ALIASES: Record<string, string[]> = {
+      'sequential-blue': [
+        'Sequential Blue',
+        'sequential blue',
+        'Sequential Blue Two',
+        'Sequential Blue Three',
+        'sequential-blue-2-(mpx)',
+        'sequential-blue-2-(MPX)',
+        'Sequential Blue 2 (MPX)'
+      ],
+      'sequential-bluereverse': [
+        'Sequential Blue Reverse',
+        'sequential bluereverse',
+        'Sequential Blue Two Reverse',
+        'Sequential Blue Three Reverse',
+        'sequential-blue-2-(mpx)reverse',
+        'sequential-blue-2-(MPX)reverse',
+        'Sequential Blue 2 (MPX) Reverse'
+      ],
+      'sequential-green': ['Sequential Green', 'sequential green'],
+      'sequential-greenreverse': ['Sequential Green Reverse', 'sequential greenreverse'],
+      'sequential-orange': [
+        'Sequential Orange',
+        'sequential orange',
+        'Sequential Orange Two',
+        'sequential-orange-(mpx)',
+        'sequential-orange-(MPX)',
+        'Sequential Orange (MPX)'
+      ],
+      'sequential-orangereverse': [
+        'Sequential Orange Reverse',
+        'sequential orangereverse',
+        'Sequential Orange Two Reverse',
+        'sequential-orange-(mpx)reverse',
+        'sequential-orange-(MPX)reverse',
+        'Sequential Orange (MPX) Reverse'
+      ],
+      'sequential-purple': ['Sequential Purple', 'sequential purple'],
+      'sequential-purplereverse': ['Sequential Purple Reverse', 'sequential purplereverse'],
+      'sequential-teal': ['Sequential Teal', 'sequential teal'],
+      'sequential-tealreverse': ['Sequential Teal Reverse', 'sequential tealreverse']
+    }
+
+    Object.entries(V2_MIGRATION_ALIASES).forEach(([canonical, aliases]) => {
+      const palette = paletteMap[canonical]
+      if (palette) {
+        aliases.forEach(alias => {
+          paletteMap[alias] = palette
+        })
+      }
+    })
+  }
+
+  return paletteMap
+}

package/src/helpers/buildForecastPaletteOptions.ts

@@ -0,0 +1,71 @@
+/**
+ * Builds user-friendly palette options for forecast color dropdowns
+ *
+ * This function takes processed palette data and transforms it into a format
+ * suitable for dropdown UI with clean, readable display names.
+ *
+ * @param processedPalettes - The palette data processed through updatePaletteNames
+ * @param paletteVersion - The palette version (1 or 2) from the config
+ * @returns An object with kebab-case keys and user-friendly display names as values
+ */
+export const buildForecastPaletteOptions = (
+  processedPalettes: Record<string, string[]>,
+  paletteVersion: number
+): Record<string, string> => {
+  const paletteOptions: Record<string, string> = {}
+
+  // Create user-friendly options with clean, readable names
+  Object.keys(processedPalettes).forEach(key => {
+    // Clean up the display name:
+    // 1. Replace underscores with spaces
+    // 2. Add space before "reverse" if it's concatenated
+    // 3. Capitalize first letter of each word
+    const cleanName = key
+      .replace(/_/g, ' ') // Replace underscores with spaces
+      .replace(/reverse$/i, ' Reverse') // Add space before reverse
+      .replace(/\b\w/g, char => char.toUpperCase()) // Capitalize first letter of each word
+
+    // Use lowercase with hyphens as the key for consistency with existing saved values
+    // Convert both underscores and spaces to hyphens
+    const displayKey = key.replace(/_/g, '-').replace(/ /g, '-').toLowerCase()
+    paletteOptions[displayKey] = cleanName
+  })
+
+  // Add MPX aliases for v1 backward compatibility (these were historical names)
+  if (paletteVersion === 1) {
+    // Map "Sequential Blue Two" to MPX alias
+    if (paletteOptions['sequential-blue-two']) {
+      paletteOptions['sequential-blue-2-(mpx)'] = 'Sequential Blue 2 (MPX)'
+    }
+    if (paletteOptions['sequential-blue-tworeverse']) {
+      paletteOptions['sequential-blue-2-(mpx)reverse'] = 'Sequential Blue 2 (MPX) Reverse'
+    }
+    // Map "Sequential Orange" to MPX alias
+    if (paletteOptions['sequential-orange']) {
+      paletteOptions['sequential-orange-(mpx)'] = 'Sequential Orange (MPX)'
+    }
+    if (paletteOptions['sequential-orangereverse']) {
+      paletteOptions['sequential-orange-(mpx)reverse'] = 'Sequential Orange (MPX) Reverse'
+    }
+  } else {
+    // V2 backward compatibility: add options for old v1 sequential palette names
+    // These are for migrated configs that still have v1-style names like "Sequential Blue"
+    if (paletteOptions['sequential-blue']) {
+      paletteOptions['sequential-blue'] = 'Sequential Blue'
+    }
+    if (paletteOptions['sequential-green']) {
+      paletteOptions['sequential-green'] = 'Sequential Green'
+    }
+    if (paletteOptions['sequential-orange']) {
+      paletteOptions['sequential-orange'] = 'Sequential Orange'
+    }
+    if (paletteOptions['sequential-purple']) {
+      paletteOptions['sequential-purple'] = 'Sequential Purple'
+    }
+    if (paletteOptions['sequential-teal']) {
+      paletteOptions['sequential-teal'] = 'Sequential Teal'
+    }
+  }
+
+  return paletteOptions
+}

package/src/helpers/getColorScale.ts

@@ -1,20 +1,94 @@
-import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import { scaleOrdinal } from '@visx/scale'
 import { ChartConfig } from '../types/ChartConfig'
+import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
+import { getFallbackColorPalette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
+import {
+  v2ColorDistribution,
+  divergentColorDistribution,
+  colorblindColorDistribution
+} from '@cdc/core/helpers/palettes/colorDistributions'
 
 export const getColorScale = (config: ChartConfig): ((value: string) => string) => {
   const configPalette = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
     ? config.twoColor.palette
-    : config.palette
-  const allPalettes: Record<string, string[]> = { ...colorPalettes, ...twoColorPalette }
-  let palette = config.customColors || allPalettes[configPalette]
-  let numberOfKeys = config.runtime.seriesKeys.length
+    : config.general?.palette?.name
+  const colorPalettes = filterChartColorPalettes(config)
+
+  // Get the correct version of two-color palettes
+  const version = getColorPaletteVersion(config)
+  const versionKey = `v${version}`
+  const versionedTwoColorPalette = twoColorPalette[versionKey] || twoColorPalette.v2
+
+  // For paired/deviation bars, only use two-color palettes
+  const palettesSource = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
+    ? versionedTwoColorPalette
+    : colorPalettes
+
+  const allPalettes: Record<string, string[]> = { ...versionedTwoColorPalette, ...colorPalettes }
+
+  // Migrate old palette name if needed
+  const migratedPaletteName = configPalette ? configPalette : getFallbackColorPalette(config)
+
+  // 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
+    return scaleOrdinal({
+      domain: config.runtime.seriesLabelsAll,
+      range: customColorsOrdered,
+      unknown: null
+    })
+  }
 
-  while (numberOfKeys > palette.length) {
-    palette = palette.concat(palette)
+  let palette =
+    config.general?.palette?.customColors ||
+    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']
   }
 
-  palette = palette.slice(0, numberOfKeys)
+  let numberOfKeys = config.runtime.seriesKeys.length
+
+  // 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) {
+    // Use existing logic for v1 palettes and other cases
+    while (numberOfKeys > palette.length) {
+      palette = palette.concat(palette)
+    }
+    palette = palette.slice(0, numberOfKeys)
+  } else {
+    // Apply enhanced distribution for v2 palettes
+    const isSequential = configPalette && configPalette.includes('sequential')
+    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) {
+      distributionMap = divergentColorDistribution
+    } else if (isColorblindSafe) {
+      distributionMap = colorblindColorDistribution
+    } else if (isSequential) {
+      distributionMap = v2ColorDistribution
+    }
+
+    if (distributionMap && distributionMap[numberOfKeys]) {
+      const distributionIndices = distributionMap[numberOfKeys]
+      palette = distributionIndices.map((index: number) => palette[index])
+    } else {
+      palette = palette.slice(0, numberOfKeys)
+    }
+  }
 
   return scaleOrdinal({
     domain: config.runtime.seriesLabelsAll,

package/src/{hooks/useMinMax.ts → helpers/getMinMax.ts}

@@ -1,9 +1,7 @@
 import { ChartConfig } from '../types/ChartConfig'
 import _ from 'lodash'
-import ConfigContext from '../ConfigContext'
-import { useContext } from 'react'
 
-type UseMinMaxProps = {
+type GetMinMaxProps = {
   /** config - standard chart config */
   config: ChartConfig
   /** minValue - starting minimum value */
@@ -18,9 +16,20 @@ type UseMinMaxProps = {
   tableData: Object[]
   /** isAllLine: if all series are line type including dashed lines */
   isAllLine: boolean
+  /** convertLineToBarGraph - whether line charts should be rendered as bar graphs */
+  convertLineToBarGraph?: boolean
 }
 
-const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine, tableData }: UseMinMaxProps) => {
+const getMinMax = ({
+  config,
+  minValue,
+  maxValue,
+  existPositiveValue,
+  data,
+  isAllLine,
+  tableData,
+  convertLineToBarGraph
+}: GetMinMaxProps) => {
   let min = 0
   let max = 0
 
@@ -28,8 +37,6 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   let leftMax = 0
   let rightMax = 0
 
-  const { convertLineToBarGraph } = useContext(ConfigContext)
-
   if (!data) {
     return { min, max }
   }
@@ -238,4 +245,4 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   return { min, max, leftMax, rightMax }
 }
-export default useMinMax
+export default getMinMax

package/src/helpers/getNewRuntime.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export const getNewRuntime = (visualizationConfig, newFilteredData) => {
-  const runtime = _.cloneDeep(visualizationConfig.runtime) || {}
+  const runtime = visualizationConfig.runtime ? { ...visualizationConfig.runtime } : {}
   runtime.series = []
   runtime.seriesLabels = {}
   runtime.seriesLabelsAll = []

package/src/helpers/getTransformedData.ts

@@ -14,7 +14,7 @@ export const getTransformedData = ({
   const data =
     Array.isArray(brushData) && brushData.length > 0
       ? brushData
-      : Array.isArray(filteredData) && filteredData.length > 0
+      : Array.isArray(filteredData)
       ? filteredData
       : excludedData
 

package/src/helpers/getYAxisAutoPadding.ts

@@ -0,0 +1,53 @@
+import { ChartConfig } from '../types/ChartConfig'
+
+/**
+ * Calculates the Y-axis auto padding to prevent data labels from overlapping with axis tick labels.
+ * This is used when inline labels are enabled and there's potential for overlap.
+ *
+ * @param yScale - The D3 scale object for the Y-axis (must have .ticks() method)
+ * @param handleNumTicks - The number of ticks to display on the axis
+ * @param maxValue - The maximum data value (from useReduceData)
+ * @param minValue - The minimum data value (from useReduceData)
+ * @param config - The chart configuration object
+ * @returns The calculated auto padding percentage (0-100+), or 0 if no padding needed
+ */
+export const getYAxisAutoPadding = (
+  yScale: any,
+  handleNumTicks: number,
+  maxValue: number,
+  minValue: number,
+  config: ChartConfig
+): number => {
+  // Early returns for cases where auto padding is not needed
+  if (!yScale?.ticks || config.orientation === 'horizontal' || config.yAxis?.max) {
+    return 0
+  }
+
+  const ticks = yScale.ticks(handleNumTicks)
+
+  if (!Array.isArray(ticks) || ticks.length === 0) {
+    return 0
+  }
+
+  // minimum percentage of the max value that the distance should be from the top grid line
+  const MINIMUM_DISTANCE_PERCENTAGE = 0.025
+
+  const topGridLine = Math.max(...ticks)
+  const needsPaddingThreshold = topGridLine - maxValue * MINIMUM_DISTANCE_PERCENTAGE
+  const maxValueIsGreaterThanThreshold = maxValue > needsPaddingThreshold
+
+  if (!maxValueIsGreaterThanThreshold) return 0
+
+  const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
+  const nextTick = Math.max(...ticks) + tickGap
+  const divideBy = minValue < 0 ? maxValue / 2 : maxValue
+  const calculatedPadding = (nextTick - maxValue) / divideBy
+
+  // if auto padding is too close to next tick, add one more ticks worth of padding
+  const newPadding =
+    calculatedPadding > MINIMUM_DISTANCE_PERCENTAGE ? calculatedPadding : calculatedPadding + tickGap / divideBy
+
+  /* sometimes even though the padding is getting to the next tick exactly,
+  d3 still doesn't show the tick. we add 0.1 to ensure to tip it over the edge */
+  return newPadding * 100 + 0.1
+}