@cdc/chart 4.26.6 → 4.26.10

package/src/components/Legend/helpers/createFormatLabels.test.ts

@@ -3,6 +3,13 @@ import { describe, expect, it, vi } from 'vitest'
 import { createFormatLabels } from './createFormatLabels'
 import { ChartConfig } from '../../../types/ChartConfig'
 import { Label } from '../../../types/Label'
+import chroma from 'chroma-js'
+import {
+  getForecastConfidenceIntervalGroups,
+  getForecastConfidenceIntervalKey,
+  getForecastLegendKey,
+  isForecastLegendSelectionActive
+} from '../../../helpers/forecastLegend'
 
 const defaultLabels: Label[] = [
   { datum: 'Series A', index: 0, text: 'Series A', value: '#aa0000' },
@@ -86,3 +93,222 @@ describe('createFormatLabels small multiples legend colors', () => {
     expect(labels.map(label => label.value)).toEqual(['#aa0000', '#aa0000'])
   })
 })
+describe('createFormatLabels category-colored bar legends', () => {
+  it('uses the same consecutive palette colors as category-colored bars', () => {
+    const config = buildConfig({
+      visualizationType: 'Bar',
+      visualizationSubType: 'regular',
+      general: {
+        palette: {
+          name: 'sequential_blue',
+          version: '2.0'
+        }
+      } as any,
+      legend: { colorCode: 'Group' } as any,
+      smallMultiples: undefined as any,
+      series: [{ dataKey: 'value', name: 'Value', type: 'Bar' }] as any
+    })
+    const tableData = [{ Group: 'Group A' }, { Group: 'Group B' }]
+
+    const labels = createFormatLabels(config, tableData, tableData, colorScale, vi.fn())(defaultLabels)
+
+    expect(labels.map(label => [label.text, label.value])).toEqual([
+      ['Group A', '#DBE8F7'],
+      ['Group B', '#BED5ED']
+    ])
+  })
+})
+
+const buildForecastConfig = (confidenceIntervals: any[]): ChartConfig =>
+  buildConfig({
+    visualizationType: 'Combo',
+    smallMultiples: undefined,
+    general: { palette: { name: 'qualitative_standard', version: '2.0' } } as any,
+    legend: { expandForecastConfidenceIntervals: true } as any,
+    series: [
+      {
+        dataKey: 'stage',
+        type: 'Forecasting',
+        confidenceIntervals,
+        stages: [
+          { key: 'Observed', color: 'sequential-blue' },
+          { key: 'Forecast', color: 'sequential-green' }
+        ]
+      }
+    ] as any,
+    runtime: {
+      seriesKeys: ['Observed', 'Forecast'],
+      forecastingSeriesKeys: [
+        {
+          confidenceIntervals,
+          stages: [
+            { key: 'Observed', color: 'sequential-blue' },
+            { key: 'Forecast', color: 'sequential-green' }
+          ]
+        }
+      ]
+    } as any
+  })
+
+describe('createFormatLabels forecast confidence interval legends', () => {
+  it('orders resolved percentages numerically and assigns an independent identity to each interval and stage', () => {
+    const labels = formatLabels(
+      buildForecastConfig([
+        { low: 'Lower 90%', high: 'Upper 90%' },
+        { low: 'Lower 50%', high: 'Upper 50%' }
+      ])
+    )
+
+    expect(labels.map(label => [label.text, label.datum])).toEqual([
+      ['50% CI Observed', getForecastLegendKey('Observed', 'percentage:50')],
+      ['50% CI Forecast', getForecastLegendKey('Forecast', 'percentage:50')],
+      ['90% CI Observed', getForecastLegendKey('Observed', 'percentage:90')],
+      ['90% CI Forecast', getForecastLegendKey('Forecast', 'percentage:90')]
+    ])
+    expect(chroma(labels[0].value).alpha()).toBeCloseTo(0.75)
+    expect(chroma(labels[2].value).alpha()).toBeCloseTo(0.5)
+  })
+
+  it('collapses duplicate percentages while retaining their effective shade', () => {
+    const labels = formatLabels(
+      buildForecastConfig([
+        { low: 'Lower 90%', high: 'Upper 90%' },
+        { low: 'Low 90', high: 'High 90' }
+      ])
+    )
+
+    expect(labels.map(label => label.text)).toEqual(['90% CI Observed', '90% CI Forecast'])
+    expect(chroma(labels[0].value).alpha()).toBeCloseTo(0.75)
+  })
+
+  it('uses stable fallbacks and omits incomplete intervals', () => {
+    const labels = formatLabels(
+      buildForecastConfig([
+        { low: 'lower', high: 'upper' },
+        { low: '', high: 'Upper 80%' },
+        { low: 'minimum', high: 'maximum' }
+      ])
+    )
+
+    expect(labels.map(label => label.text)).toEqual([
+      'CI 1 Observed',
+      'CI 1 Forecast',
+      'CI 2 Observed',
+      'CI 2 Forecast'
+    ])
+  })
+
+  it('falls back when bounds do not contain the same single percentage', () => {
+    const labels = formatLabels(
+      buildForecastConfig([
+        { low: 'Lower 50%', high: 'Upper 95%' },
+        { low: 'Lower 50 to 90%', high: 'Upper 50 to 90%' }
+      ])
+    )
+
+    expect(labels.map(label => label.text)).toEqual([
+      'CI 1 Observed',
+      'CI 1 Forecast',
+      'CI 2 Observed',
+      'CI 2 Forecast'
+    ])
+  })
+
+  it('keeps a single complete interval stage-only', () => {
+    const labels = formatLabels(
+      buildForecastConfig([
+        { low: 'Lower 50%', high: 'Upper 50%' },
+        { low: '', high: 'Upper 90%' }
+      ])
+    )
+
+    expect(labels.map(label => [label.text, label.datum])).toEqual([
+      ['Observed', 'Observed'],
+      ['Forecast', 'Forecast']
+    ])
+    expect(labels.every(label => chroma(label.value).alpha() === 1)).toBe(true)
+  })
+
+  it.each([undefined, false])('keeps multi-interval legends stage-only when expansion is %s', expansionValue => {
+    const config = buildForecastConfig([
+      { low: 'Lower 50%', high: 'Upper 50%' },
+      { low: 'Lower 90%', high: 'Upper 90%' }
+    ])
+    config.legend.expandForecastConfidenceIntervals = expansionValue
+
+    expect(formatLabels(config).map(label => [label.text, label.datum])).toEqual([
+      ['Observed', 'Observed'],
+      ['Forecast', 'Forecast']
+    ])
+  })
+
+  it('does not infer percentages outside the valid percentage range', () => {
+    const labels = formatLabels(
+      buildForecastConfig([
+        { low: 'lower_2024', high: 'upper_2024' },
+        { low: 'Lower 50%', high: 'Upper 50%' }
+      ])
+    )
+
+    expect(labels.map(label => label.text)).toEqual([
+      '50% CI Observed',
+      '50% CI Forecast',
+      'CI 1 Observed',
+      'CI 1 Forecast'
+    ])
+  })
+
+  it('preserves interval-major numeric ordering when legacy legend ordering options are enabled', () => {
+    const config = buildForecastConfig([
+      { low: 'Lower 90%', high: 'Upper 90%' },
+      { low: 'Lower 50%', high: 'Upper 50%' }
+    ])
+    config.legend.reverseLabelOrder = true
+    config.legend.verticalSorted = true
+
+    expect(formatLabels(config).map(label => label.text)).toEqual([
+      '50% CI Observed',
+      '50% CI Forecast',
+      '90% CI Observed',
+      '90% CI Forecast'
+    ])
+  })
+})
+
+describe('forecast confidence interval interaction identity', () => {
+  const confidenceIntervals = [
+    { low: 'Lower 90%', high: 'Upper 90%' },
+    { low: 'Lower 50%', high: 'Upper 50%' }
+  ]
+
+  it('maps configured intervals to their normalized legend keys', () => {
+    expect(getForecastConfidenceIntervalKey(confidenceIntervals, 0)).toBe('percentage:90')
+    expect(getForecastConfidenceIntervalKey(confidenceIntervals, 1)).toBe('percentage:50')
+    expect(getForecastLegendKey('Forecast: west', 'percentage:50')).toBe(
+      'forecast-ci:Forecast%3A%20west:percentage%3A50'
+    )
+  })
+
+  it('activates only a matching composite row while accepting legacy stage selections', () => {
+    const selectedKey = getForecastLegendKey('Forecast', 'percentage:50')
+
+    expect(isForecastLegendSelectionActive([selectedKey], 'Forecast', 'percentage:50')).toBe(true)
+    expect(isForecastLegendSelectionActive([selectedKey], 'Forecast', 'percentage:90')).toBe(false)
+    expect(isForecastLegendSelectionActive([selectedKey], 'Observed', 'percentage:50')).toBe(false)
+    expect(isForecastLegendSelectionActive(['Forecast'], 'Forecast', 'percentage:50')).toBe(true)
+    expect(isForecastLegendSelectionActive(['Forecast'], 'Forecast', 'percentage:90')).toBe(true)
+  })
+
+  it('shares one composite identity across duplicate resolved percentages', () => {
+    const duplicateIntervals = [
+      { low: 'Lower 90%', high: 'Upper 90%' },
+      { low: 'Low 90', high: 'High 90' }
+    ]
+    const groups = getForecastConfidenceIntervalGroups(duplicateIntervals)
+
+    expect(groups).toHaveLength(1)
+    expect(groups[0].intervalIndexes).toEqual([0, 1])
+    expect(getForecastConfidenceIntervalKey(duplicateIntervals, 0)).toBe('percentage:90')
+    expect(getForecastConfidenceIntervalKey(duplicateIntervals, 1)).toBe('percentage:90')
+  })
+})

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -7,13 +7,13 @@ import {
 import { getCurrentPaletteName, getFallbackColorPalette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { chartPaletteMigrationMap, paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
 import { getPaletteAccessor } from '@cdc/core/helpers/getPaletteAccessor'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getColorPaletteMajorVersion } from '@cdc/core/helpers/getColorPaletteMajorVersion'
 import { isV1Palette } from '@cdc/core/helpers/palettes/utils'
-import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributions'
 import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
 import { buildForecastPaletteMappings } from '../../../helpers/buildForecastPaletteMappings'
 import { getFullColorPalette } from '../../../helpers/smallMultiplesHelpers'
 import { hasSeriesColorAssignmentOverrides } from '../../../helpers/colorAssignmentHelpers'
+import { getColorCodeCategoryColorMap } from '../../../helpers/getColorCodeCategoryColorMap'
 import { FaStar } from 'react-icons/fa'
 import { Label } from '../../../types/Label'
 import { ColorScale, TransformedData } from '../../../types/ChartContext'
@@ -23,6 +23,8 @@ import sortBy from 'lodash/sortBy'
 import { scaleSequential } from 'd3-scale'
 import { interpolateRgbBasis } from 'd3-interpolate'
 import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
+import chroma from 'chroma-js'
+import { getForecastConfidenceIntervalGroups, getForecastLegendKey } from '../../../helpers/forecastLegend'
 
 export const createFormatLabels =
   (
@@ -239,46 +241,13 @@ export const createFormatLabels =
       return reverseLabels([labelBelow, labelAbove])
     }
     if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
-      const currentPaletteName = getCurrentPaletteName(config) || getFallbackColorPalette(config)
-      const paletteName = migratePaletteWithMap(currentPaletteName, chartPaletteMigrationMap, true)
-      let palette = getPaletteAccessor(colorPalettes, config, paletteName)
-
-      const numberOfKeys = data.length
-
-      // Check if we should use v2 distribution logic for better contrast
-      const version = getColorPaletteVersion(config)
-      const isSequentialOrDivergent =
-        paletteName && (paletteName.includes('sequential') || paletteName.includes('divergent'))
-      const isPairedBarOrDeviation = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
-      const useV2Distribution =
-        version === 2 && isSequentialOrDivergent && palette.length === 9 && numberOfKeys <= 9 && !isPairedBarOrDeviation
-
-      if (useV2Distribution && v2ColorDistribution[numberOfKeys]) {
-        // Use strategic color distribution for v2 sequential palettes
-        const distributionIndices = v2ColorDistribution[numberOfKeys]
-        palette = distributionIndices.map(index => palette[index])
-      } else {
-        // Use existing logic for v1 palettes and other cases
-        while (tableData.length > palette?.length) {
-          palette = palette.concat(palette)
-        }
-        palette = palette?.slice(0, data.length)
-      }
-      //store unique values to Set by colorCode
-      const set = new Set()
-
-      tableData.forEach(d => set.add(d[colorCode]))
-
-      // create labels with unique values
-      const uniqueLabels = Array.from(set).map((val, i) => {
-        const newLabel = {
-          datum: val,
-          index: i,
-          text: val,
-          value: palette?.[i]
-        }
-        return newLabel
-      })
+      const categoryColors = getColorCodeCategoryColorMap(config, tableData, filterChartColorPalettes(config))
+      const uniqueLabels = Array.from(categoryColors, ([category, color], index) => ({
+        datum: category,
+        index,
+        text: String(category),
+        value: color
+      }))
 
       return reverseLabels(uniqueLabels)
     }
@@ -286,10 +255,11 @@ export const createFormatLabels =
     // get forecasting items inside of combo
     if (runtime?.forecastingSeriesKeys?.length > 0) {
       let seriesLabels = []
+      let hasExpandedForecastIntervals = false
 
       // Create palette lookup map - use version-specific palettes
       // Forecasting charts use sequentialPalettes for v1, sequential-only palettes for v2
-      const paletteVersion = getColorPaletteVersion(config)
+      const paletteVersion = getColorPaletteMajorVersion(config)
 
       let forecastPalettes
       if (paletteVersion === 1) {
@@ -311,19 +281,43 @@ export const createFormatLabels =
 
       //store unique values to Set by colorCode
       // loop through each stage/group/area on the chart and create a label
-      config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
-        return outerGroup?.stages?.map((stage, index) => {
+      config.runtime?.forecastingSeriesKeys?.map(outerGroup => {
+        const confidenceIntervalLabels =
+          legend.expandForecastConfidenceIntervals === true
+            ? getForecastConfidenceIntervalGroups(outerGroup?.confidenceIntervals)
+            : []
+
+        const stages = outerGroup?.stages || []
+
+        if (confidenceIntervalLabels.length) {
+          hasExpandedForecastIntervals = true
+          confidenceIntervalLabels.forEach(confidenceInterval => {
+            stages.forEach(stage => {
+              const palette = forecastingPalettes[stage.color] || false
+              const colorValue = palette?.[2] || '#ccc'
+
+              seriesLabels.push({
+                datum: getForecastLegendKey(stage.key, confidenceInterval.key),
+                index: seriesLabels.length,
+                text: `${confidenceInterval.label} ${stage.key}`,
+                value: chroma(colorValue).alpha(confidenceInterval.opacity).css()
+              })
+            })
+          })
+
+          return
+        }
+
+        return stages.map(stage => {
           const palette = forecastingPalettes[stage.color] || false
           let colorValue = palette?.[2] || '#ccc'
 
-          const newLabel = {
+          seriesLabels.push({
             datum: stage.key,
-            index: index,
+            index: seriesLabels.length,
             text: stage.key,
             value: colorValue
-          }
-
-          seriesLabels.push(newLabel)
+          })
         })
       })
 
@@ -345,7 +339,7 @@ export const createFormatLabels =
           seriesLabels.push(newLabel)
         })
 
-      return reverseLabels(seriesLabels)
+      return hasExpandedForecastIntervals ? seriesLabels : reverseLabels(seriesLabels)
     }
 
     // For Radar charts, use the entity names from runtime.seriesKeys (set from xAxis.dataKey values)

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -16,6 +16,7 @@ type LineChartCircleProps = {
   colorScale: any
   parseDate: any
   seriesAxis: string
+  seriesColor: string
   dataIndex: number
   seriesIndex: number
   mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS' | 'TOOLTIP_POINTS'
@@ -49,6 +50,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     d: pointData,
     displayArea,
     seriesKey,
+    seriesColor,
     xScale,
     yScale,
     colorScale,
@@ -136,15 +138,13 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       : dataIndex
 
     if (drawIsolatedPoints(_dataIndex, seriesKey)) {
-      const color = colorScale(config.runtime.seriesLabelsAll[seriesIndex])
-
       return (
         <g
           transform={transformShape(pointData[config.xAxis?.dataKey], pointData[filtered?.dataKey])}
           className={`visx-glyph-group${displayArea ? '' : '-hidden'}`}
           data-seriesindex={seriesIndex}
         >
-          <Shape size={dotSize} stroke={color} fill={color} />
+          <Shape size={dotSize} stroke={seriesColor} fill={seriesColor} />
         </g>
       )
     }