@cdc/chart 4.25.8 → 4.25.10

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,109 @@
+/**
+ * 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
+}
+
+/**
+ * Normalizes a palette value to match the standardized hyphenated format
+ * and migrates v1 palette names to v2 equivalents
+ *
+ * @param value - The palette name to normalize
+ * @param paletteVersion - The palette version (1 or 2) from the config
+ * @returns The normalized palette name in lowercase with hyphens, or 'Select' if empty
+ */
+export const normalizePaletteValue = (value: string | undefined, paletteVersion: number = 1): string => {
+  if (!value) return 'Select'
+
+  // Convert to lowercase with hyphens for consistent matching
+  const normalized = value.toLowerCase().replace(/ /g, '-').replace(/_/g, '-')
+
+  // If v2, migrate v1-only palette names to their v2 equivalents
+  if (paletteVersion === 2) {
+    const V1_TO_V2_MIGRATION: Record<string, string> = {
+      // Sequential Blue variants → sequential-blue
+      'sequential-blue-two': 'sequential-blue',
+      'sequential-blue-three': 'sequential-blue',
+      'sequential-blue-2-(mpx)': 'sequential-blue',
+      'sequential-blue-tworeverse': 'sequential-bluereverse',
+      'sequential-blue-threereverse': 'sequential-bluereverse',
+      'sequential-blue-2-(mpx)reverse': 'sequential-bluereverse',
+
+      // Sequential Orange variants → sequential-orange
+      'sequential-orange-two': 'sequential-orange',
+      'sequential-orange-(mpx)': 'sequential-orange',
+      'sequential-orange-tworeverse': 'sequential-orangereverse',
+      'sequential-orange-(mpx)reverse': 'sequential-orangereverse'
+    }
+
+    return V1_TO_V2_MIGRATION[normalized] || normalized
+  }
+
+  return normalized
+}

package/src/helpers/getColorScale.ts

@@ -1,20 +1,84 @@
-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)
+
+  let palette =
+    config.general?.palette?.customColors ||
+    palettesSource[migratePaletteWithMap(migratedPaletteName, paletteMigrationMap, false)] ||
+    palettesSource[configPalette]
 
-  while (numberOfKeys > palette.length) {
-    palette = palette.concat(palette)
+  // 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/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/hooks/useChartHoverAnalytics.tsx

@@ -0,0 +1,44 @@
+import { useRef } from 'react'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+
+type UseChartHoverAnalyticsParams = {
+  config: any
+  interactionLabel?: string
+}
+
+/**
+ * Hook to track analytics when user enters the chart area
+ * Fires once per chart entry, not on every hover interaction
+ */
+export const useChartHoverAnalytics = ({ config, interactionLabel = '' }: UseChartHoverAnalyticsParams) => {
+  const hasTrackedRef = useRef(false)
+
+  const handleChartMouseEnter = () => {
+    // Only track if we have an interaction label and haven't tracked yet
+    if (!interactionLabel || hasTrackedRef.current) return
+
+    // Publish the analytics event
+    publishAnalyticsEvent({
+      vizType: config?.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'chart_hover',
+      eventAction: 'hover',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
+
+    // Mark as tracked so we don't fire again
+    hasTrackedRef.current = true
+  }
+
+  const handleChartMouseLeave = () => {
+    // Reset tracking when mouse leaves so next entry will track
+    hasTrackedRef.current = false
+  }
+
+  return {
+    handleChartMouseEnter,
+    handleChartMouseLeave
+  }
+}

package/src/hooks/useReduceData.ts

@@ -1,37 +1,74 @@
 import isNumber from '@cdc/core/helpers/isNumber'
+import { useMemo } from 'react'
 
 function useReduceData(config, data) {
-  const isBar = config.series.every(({ type }) => type === 'Bar')
-  const isAllLine = config.series.every(({ type }) => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(type))
-  const sumYValues = seriesKeys => xValue =>
-    seriesKeys.reduce((yTotal, k) => (isNaN(Number(xValue[k])) ? yTotal : yTotal + Number(xValue[k])), 0)
-  const getSeriesKey = seriesKey => {
-    const series = config.runtime.series.find(item => item.dataKey === seriesKey)
-    return series?.dynamicCategory ? series.originalDataKey : seriesKey
-  }
-  const getMaxValueFromData = () => {
-    let max = Math.max(
-      ...data?.map(d =>
-        Math.max(
-          ...config.runtime.seriesKeys.map(key => {
-            const seriesKey = getSeriesKey(key)
-            return isNumber(d[seriesKey]) ? Number(cleanChars(d[seriesKey])) : 0
-          })
-        )
-      )
-    )
+  return useMemo(() => {
+    if (!data || !config?.runtime?.seriesKeys) {
+      return { minValue: 0, maxValue: 0, existPositiveValue: false, isAllLine: false }
+    }
+
+    const isBar = config.series.every(({ type }) => type === 'Bar')
+    const isAllLine = config.series.every(({ type }) => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(type))
+
+    const cleanChars = value => {
+      if (value === null || value === '') {
+        return ''
+      }
+      return typeof value === 'string' ? value.replace(/[,$]/g, '') : value
+    }
+
+    const getSeriesKey = seriesKey => {
+      const series = config.runtime.series.find(item => item.dataKey === seriesKey)
+      return series?.dynamicCategory ? series.originalDataKey : seriesKey
+    }
+
+    const seriesKeysMap = new Map()
+    config.runtime.seriesKeys.forEach(key => {
+      seriesKeysMap.set(key, getSeriesKey(key))
+    })
+
+    let minValue = Infinity
+    let maxValue = -Infinity
+    let existPositiveValue = false
+    const stackedTotals = []
+
+    for (let i = 0; i < data.length; i++) {
+      const row = data[i]
+      let rowMax = -Infinity
+      let rowMin = Infinity
+      let stackedSum = 0
+
+      for (const key of config.runtime.seriesKeys) {
+        const seriesKey = seriesKeysMap.get(key)
+        const cleanValue = cleanChars(row[seriesKey])
+
+        if (isNumber(cleanValue)) {
+          const numValue = Number(cleanValue)
+
+          if (numValue > rowMax) rowMax = numValue
+          if (numValue < rowMin) rowMin = numValue
+
+          if (numValue >= 0) existPositiveValue = true
+
+          if (!isNaN(numValue)) stackedSum += numValue
+        }
+      }
+
+      if (rowMax > maxValue) maxValue = rowMax
+      if (rowMin < minValue) minValue = rowMin
+
+      if (!isNaN(stackedSum)) stackedTotals.push(stackedSum)
+    }
 
     if (
       (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) &&
       config.visualizationSubType === 'stacked'
     ) {
-      const yTotals = data.map(sumYValues(config.runtime.seriesKeys)).filter(num => !isNaN(num))
-      max = Math.max(...yTotals)
+      maxValue = Math.max(...stackedTotals)
     }
 
     if (config.visualizationSubType === 'stacked' && config.visualizationType === 'Area Chart') {
-      const yTotals = data.map(sumYValues(config.runtime.seriesKeys))
-      max = Math.max(...yTotals)
+      maxValue = Math.max(...stackedTotals)
     }
 
     if (
@@ -39,62 +76,60 @@ function useReduceData(config, data) {
       config.series &&
       config.series.dataKey
     ) {
-      max = Math.max(
-        ...data.map(d => (isNumber(d[config.series.dataKey]) ? Number(cleanChars(d[config.series.dataKey])) : 0))
-      )
+      let specialMax = -Infinity
+      for (const row of data) {
+        const cleanValue = cleanChars(row[config.series.dataKey])
+        if (isNumber(cleanValue)) {
+          const numValue = Number(cleanValue)
+          if (numValue > specialMax) specialMax = numValue
+        }
+      }
+      maxValue = specialMax
     }
 
     if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
       if (config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys) {
-        const yTotals = data.map(sumYValues(config.runtime.barSeriesKeys))
-
-        const lineMax = Math.max(
-          ...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key])))))
-        )
-        const barMax = Math.max(...yTotals)
-
-        max = Math.max(barMax, lineMax)
+        let barMax = -Infinity
+        let lineMax = -Infinity
+
+        for (const row of data) {
+          let barSum = 0
+          let rowLineMax = -Infinity
+
+          for (const key of config.runtime.barSeriesKeys) {
+            const cleanValue = cleanChars(row[key])
+            if (isNumber(cleanValue)) {
+              const numValue = Number(cleanValue)
+              if (!isNaN(numValue)) barSum += numValue
+            }
+          }
+
+          for (const key of config.runtime.lineSeriesKeys) {
+            const cleanValue = cleanChars(row[key])
+            if (isNumber(cleanValue)) {
+              const numValue = Number(cleanValue)
+              if (numValue > rowLineMax) rowLineMax = numValue
+            }
+          }
+
+          if (barSum > barMax) barMax = barSum
+          if (rowLineMax > lineMax) lineMax = rowLineMax
+        }
+
+        maxValue = Math.max(barMax, lineMax)
       }
     }
 
-    return max
-  }
-
-  const getMinValueFromData = () => {
-    const minNumberFromData = Math.min(
-      ...data.map(d =>
-        Math.min(
-          ...config.runtime.seriesKeys.map(key => {
-            const seriesKey = getSeriesKey(key)
-            return isNumber(d[seriesKey]) ? Number(cleanChars(d[seriesKey])) : Infinity
-          })
-        )
-      )
-    )
-
-    return String(minNumberFromData)
-  }
-
-  const findPositiveNum = () => {
-    if (!config.runtime.seriesKeys) {
-      return false
-    }
-    return config.runtime.seriesKeys.some(key => data.some(d => d[getSeriesKey(key)] >= 0))
-  }
+    if (minValue === Infinity) minValue = 0
+    if (maxValue === -Infinity) maxValue = 0
 
-  const cleanChars = value => {
-    if (value === null || value === '') {
-      return ''
+    return {
+      minValue: Number(minValue),
+      maxValue: Number(maxValue),
+      existPositiveValue,
+      isAllLine
     }
-
-    return typeof value === 'string' ? value.replace(/[,$]/g, '') : value
-  }
-
-  const maxValue = Number(getMaxValueFromData())
-  const minValue = Number(getMinValueFromData())
-  const existPositiveValue = findPositiveNum()
-
-  return { minValue, maxValue, existPositiveValue, isAllLine }
+  }, [config, data])
 }
 
 export default useReduceData