@cdc/chart 4.26.7 → 4.26.10

package/src/data/initial-state.js

@@ -1,18 +1,11 @@
-import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
+import { DEFAULT_RACE_SECONDS_PER_FRAME } from '../components/raceTiming'
 
-// Dynamic initial state based on migration flag
 const createInitialState = () => {
-  const paletteDefaults = USE_V2_MIGRATION
-    ? {
-        isReversed: true,
-        version: '2.0',
-        name: 'sequential_bluereverse'
-      }
-    : {
-        isReversed: true,
-        version: '1.0',
-        name: 'qualitative_bold'
-      }
+  const paletteDefaults = {
+    isReversed: false,
+    version: '2.1',
+    name: 'sequential_blue'
+  }
 
   return {
     annotations: [],
@@ -26,11 +19,19 @@ const createInitialState = () => {
     titleStyle: 'small',
     showTitle: true,
     showDownloadMediaButton: false,
+    enableTooltips: false,
     theme: 'theme-blue',
     animate: false,
     lineDatapointStyle: 'hover',
     lineDatapointColor: 'Same as Line',
     barHasBorder: 'true',
+    barRace: {
+      maxBars: 10,
+      secondsPerFrame: DEFAULT_RACE_SECONDS_PER_FRAME
+    },
+    lineRace: {
+      secondsPerFrame: DEFAULT_RACE_SECONDS_PER_FRAME
+    },
     isLollipopChart: false,
     lollipopShape: 'circle',
     lollipopColorStyle: 'two-tone',
@@ -58,6 +59,7 @@ const createInitialState = () => {
       displayNumbersOnBar: false,
       hideLabel: false,
       hideTicks: true,
+      labelPlacement: 'On Date/Category Axis',
       size: 50,
       gridLines: true,
       enablePadding: false,
@@ -70,6 +72,7 @@ const createInitialState = () => {
       rightAxisSize: 0,
       rightLabel: '',
       rightLabelOffsetSize: 0,
+      rightTitlePlacement: 'top',
       rightAxisLabelColor: '#1c1d1f',
       rightAxisTickLabelColor: '#1c1d1f',
       rightAxisTickColor: '#1c1d1f',
@@ -80,6 +83,7 @@ const createInitialState = () => {
       tickRotation: 0,
       autoMaxStrategy: 'clean-top-tick',
       anchors: [],
+      rightAnchors: [],
       shoMissingDataLabel: true,
       showMissingDataLine: true,
       categories: []
@@ -112,8 +116,8 @@ const createInitialState = () => {
     },
 
     isLegendValue: false,
-    barThickness: 0.35,
     barHeight: 25,
+    barThickness: 0.8,
     barSpace: 15,
     heights: {
       vertical: 300,
@@ -149,6 +153,7 @@ const createInitialState = () => {
       brushActive: false,
       brushDefaultRecentDateCount: undefined,
       brushDynamicYAxis: false,
+      brushHideHatching: false,
       viewportNumTicks: {
         xs: 4,
         xxs: 4
@@ -162,10 +167,11 @@ const createInitialState = () => {
       caption: '',
       showDownloadUrl: false,
       downloadUrlLabel: '',
-      showDataTableLink: true,
+      showDataTableLink: false,
       showDownloadLinkBelow: true,
       search: false,
       searchPlaceholder: '',
+      stickyFirstColumn: false,
       indexLabel: '',
       download: false,
       showVertical: true,
@@ -175,7 +181,6 @@ const createInitialState = () => {
       collapsible: true
     },
     orientation: 'vertical',
-    color: 'qualitative-bold',
     columns: {
       // start with a blank list
     },
@@ -315,10 +320,12 @@ const createInitialState = () => {
     },
     heatmap: {
       cellPadding: 1,
-      rowLabelGap: 32,
-      columnLabelGap: 56,
+      rowLabelGap: 0,
+      columnLabelGap: 20,
       xAxisPosition: 'top',
-      showCellValues: false
+      showCellValues: false,
+      horizontalScroll: false,
+      minColumnWidth: 44
     },
     area: {
       isStacked: false
@@ -336,22 +343,20 @@ const createInitialState = () => {
       axisLabelOffset: 15
     },
     sankey: {
-      title: {
-        defaultColor: 'black'
-      },
       iterations: 1,
       rxValue: 0.9,
-      overallSize: {
-        width: 900,
-        height: 700
-      },
+      horizontalScrollWidth: 900,
       margin: {
         margin_y: 25,
         margin_x: 0
       },
+      columns: {
+        source: 'source',
+        target: 'target',
+        value: 'value'
+      },
       nodeSize: {
-        nodeWidth: 26,
-        nodeHeight: 40
+        nodeWidth: 26
       },
       nodePadding: 55,
       nodeFontColor: 'black',
@@ -369,13 +374,54 @@ const createInitialState = () => {
         LinkOpacityDefault: 1.0,
         LinkOpacityInactive: 0.1
       },
-      storyNodeFontColor: '#006778',
-      storyNodeText: [],
       nodeValueStyle: {
         textBefore: '(',
         textAfter: ')'
+      }
+    },
+    network: {
+      columns: {
+        source: 'source',
+        target: 'target',
+        weight: '',
+        style: '',
+        nodeColor: ''
+      },
+      directed: false,
+      height: 500,
+      nodeRadius: 8,
+      nodeColor: '#005eaa',
+      linkColor: '#333333',
+      linkStyleLabels: {
+        solid: 'Solid',
+        dashed: 'Dashed'
+      },
+      linkDistance: 90,
+      chargeStrength: -240,
+      rotation: 0,
+      scale: 1,
+      offsetX: 0,
+      offsetY: 0
+    },
+    dendrogram: {
+      columns: {
+        node: 'node',
+        parent: 'parent',
+        style: 'linkStyle',
+        nodeColor: 'nodeColor'
+      },
+      connectionType: 'curve',
+      orientation: 'horizontal',
+      height: 500,
+      nodeRadius: 6,
+      nodeColor: '#005eaa',
+      linkColor: '#333333',
+      linkStyleLabels: {
+        solid: 'Solid',
+        dashed: 'Dashed'
       },
-      data: []
+      leafSpacing: 40,
+      depthSpacing: 140
     },
     markupVariables: [],
     enableMarkupVariables: false

package/src/helpers/applyChartTypeContract.ts

@@ -0,0 +1,71 @@
+import type { ChartConfig } from '../types/ChartConfig'
+import cloneDeep from 'lodash/cloneDeep'
+
+/** Applies deterministic chart-type fields owned by current authoring paths. */
+export const applyChartTypeContract = <T extends ChartConfig>(config: T): T => {
+  const nextConfig = cloneDeep(config)
+
+  if (Array.isArray(nextConfig.series)) {
+    nextConfig.series = nextConfig.series.map(series => ({ tooltip: true, axis: 'Left', ...series }))
+  }
+
+  switch (nextConfig.visualizationType) {
+    case 'Area Chart':
+      nextConfig.visualizationSubType = 'stacked'
+      break
+    case 'Forecasting':
+      if (!nextConfig.xAxis.type || nextConfig.xAxis.type === 'categorical') {
+        nextConfig.xAxis.type = 'date'
+        if (!nextConfig.xAxis.dateParseFormat) nextConfig.xAxis.dateParseFormat = '%Y-%m-%d'
+        if (!nextConfig.xAxis.dateDisplayFormat) nextConfig.xAxis.dateDisplayFormat = '%Y-%m-%d'
+      }
+      break
+    case 'HeatMap':
+      nextConfig.yAxis.type = 'categorical'
+      nextConfig.yAxis.titlePlacement = nextConfig.yAxis.titlePlacement || 'side'
+      nextConfig.legend.position = nextConfig.legend.position || 'top'
+      nextConfig.legend.style = nextConfig.legend.style || 'gradient'
+      nextConfig.legend.subStyle =
+        nextConfig.legend.subStyle === 'smooth' ? 'linear blocks' : nextConfig.legend.subStyle || 'linear blocks'
+      break
+    case 'Horizon Chart': {
+      nextConfig.horizon = {
+        numLayers: 4,
+        mode: 'offset',
+        bandGap: 15,
+        bottomPadding: 15,
+        ...nextConfig.horizon
+      }
+      if (!nextConfig.xAxis.type) nextConfig.xAxis.type = 'categorical'
+      const layerCount = nextConfig.horizon.numLayers ?? 4
+      const paletteCount = nextConfig.general.paletteColorCount ?? 4
+      nextConfig.general.paletteColorCount = Math.max(paletteCount, layerCount)
+      break
+    }
+    case 'Box Plot':
+      nextConfig.yAxis.labelPlacement = 'On Date/Category Axis'
+      break
+    case 'Paired Bar':
+    case 'Deviation Bar':
+      nextConfig.orientation = 'horizontal'
+      break
+    case 'Bump Chart':
+      nextConfig.xAxis.type = 'date-time'
+      break
+  }
+
+  if (
+    ['date', 'date-time'].includes(nextConfig.xAxis?.type) &&
+    nextConfig.xAxis?.dataKey &&
+    !nextConfig.table?.defaultSort?.column
+  ) {
+    nextConfig.table = {
+      ...nextConfig.table,
+      defaultSort: { column: nextConfig.xAxis.dataKey, sortDirection: 'desc' }
+    }
+  }
+
+  return nextConfig
+}
+
+export default applyChartTypeContract

package/src/helpers/axisLabelFontSize.ts

@@ -1,8 +1,8 @@
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
-import { ViewportSize } from '../types/ChartConfig'
+import type { ViewPort } from '@cdc/core/types/ViewPort'
 
 export const AXIS_LABEL_FONT_SIZE = 18
 export const AXIS_LABEL_FONT_SIZE_SMALL = 14
 
-export const getAxisLabelFontSize = (vizViewport: ViewportSize) =>
+export const getAxisLabelFontSize = (vizViewport: ViewPort) =>
   isMobileFontViewport(vizViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE

package/src/helpers/boxPlotStats.ts

@@ -0,0 +1,60 @@
+import * as d3 from 'd3-array'
+import { sortByNumber, toSortableNumber } from '@cdc/core/helpers/sorting'
+
+export type BoxPlotStats = {
+  deviation: number | undefined
+  iqr: number
+  lowerBound: number
+  mean: number | undefined
+  median: number | undefined
+  nonOutliers: number[]
+  outliers: number[]
+  q1: number
+  q3: number
+  upperBound: number
+  values: number[]
+  whiskerMax: number
+  whiskerMin: number
+}
+
+export const getSortedBoxPlotValues = (values: unknown[] = []): number[] => {
+  const numericValues = values.reduce<number[]>((result, value) => {
+    if (value === null || value === undefined || value === '') return result
+
+    const numericValue = toSortableNumber(value)
+    if (Number.isFinite(numericValue)) result.push(numericValue)
+
+    return result
+  }, [])
+
+  return sortByNumber(numericValues)
+}
+
+export const calculateBoxPlotStats = (values: unknown[] = []): BoxPlotStats | null => {
+  const sortedValues = getSortedBoxPlotValues(values)
+  if (!sortedValues.length) return null
+
+  const q1 = d3.quantile(sortedValues, 0.25) ?? 0
+  const q3 = d3.quantile(sortedValues, 0.75) ?? 0
+  const iqr = q3 - q1
+  const lowerBound = q1 - 1.5 * iqr
+  const upperBound = q3 + 1.5 * iqr
+  const nonOutliers = sortedValues.filter(value => value >= lowerBound && value <= upperBound)
+  const outliers = sortedValues.filter(value => value < lowerBound || value > upperBound)
+
+  return {
+    deviation: d3.deviation(sortedValues),
+    iqr,
+    lowerBound,
+    mean: d3.mean(sortedValues),
+    median: d3.median(sortedValues),
+    nonOutliers,
+    outliers,
+    q1,
+    q3,
+    upperBound,
+    values: sortedValues,
+    whiskerMax: nonOutliers[nonOutliers.length - 1] ?? q3,
+    whiskerMin: nonOutliers[0] ?? q1
+  }
+}

package/src/helpers/bumpChartTooltip.ts

@@ -2,6 +2,7 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import { buildTooltipListHtml, getTooltipSeriesMarker } from './tooltipHelpers'
 import { type ChartConfig } from '../types/ChartConfig'
 import { type ColorScale } from '../types/ChartContext'
+import { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
 
 type TooltipDateHelpers = {
   formatDate: (date: Date) => string
@@ -35,7 +36,7 @@ export const buildBumpChartTooltipHtml = ({ config, colorScale, dataRow, series,
   const xAxisLabel = config.runtime?.xAxis?.label || config.xAxis.dataKey
   const heading = `${xAxisLabel ? `${xAxisLabel}: ` : ''}${formattedXAxisValue ?? ''}`
 
-  const seriesName = series.name || config.runtime?.seriesLabels?.[series.dataKey] || series.dataKey
+  const seriesName = getSeriesValueLabel(series.dataKey, { ...config, series: [series] })
   const marker = getTooltipSeriesMarker(config, colorScale, series.dataKey)
   const bodyRows = [
     {

package/src/helpers/calculateHorizontalBarCategoryLabelWidth.test.ts

@@ -0,0 +1,37 @@
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { calculateHorizontalBarCategoryLabelWidth } from './calculateHorizontalBarCategoryLabelWidth'
+
+vi.mock('@cdc/core/helpers/getTextWidth', () => ({
+  getTextWidth: vi.fn()
+}))
+
+const mockedGetTextWidth = vi.mocked(getTextWidth)
+
+const calculateWidth = (categoryValues: string[], chartWidth = 500) =>
+  calculateHorizontalBarCategoryLabelWidth({
+    yScale: { domain: () => categoryValues },
+    chartWidth,
+    formatDate: vi.fn(),
+    parseDate: vi.fn(),
+    tickLabelFont: 'normal 16px Nunito, sans-serif',
+    labelPlacement: 'On Date/Category Axis'
+  })
+
+describe('calculateHorizontalBarCategoryLabelWidth', () => {
+  beforeEach(() => {
+    mockedGetTextWidth.mockImplementation(label => label.length * 10)
+  })
+
+  it('keeps at least ten pixels between short labels and the chart area', () => {
+    expect(calculateWidth(['A', 'B'])).toBe(20)
+  })
+
+  it('retains proportional padding for longer labels', () => {
+    expect(calculateWidth(['abcdefghij'])).toBe(115)
+  })
+
+  it('still caps category label space at thirty percent of the chart width', () => {
+    expect(calculateWidth(['abcdefghij'], 300)).toBe(90)
+  })
+})

package/src/helpers/calculateHorizontalBarCategoryLabelWidth.ts

@@ -47,8 +47,9 @@ export const calculateHorizontalBarCategoryLabelWidth = ({
   const labelWidths = formattedLabels.map(label => getTextWidth(label, tickLabelFont))
   const maxLabelWidth = Math.max(...labelWidths)
 
-  // We need some extra padding or visx will wrap labels too early
-  const paddedWidth = maxLabelWidth + Math.ceil(maxLabelWidth * 0.15)
+  // We need some extra padding or visx will wrap labels too early. Keep a
+  // minimum gap so short labels do not sit too close to the chart area.
+  const paddedWidth = maxLabelWidth + Math.max(10, Math.ceil(maxLabelWidth * 0.15))
 
   // Allocate at most 30% of chart width to category labels
   const maxAllowedWidth = chartWidth * 0.3

package/src/helpers/calculateRightYAxisWidth.ts

@@ -0,0 +1,60 @@
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { DEFAULT_TICK_LENGTH, TICK_LABEL_MARGIN_RIGHT } from '../components/Axis/axis.constants'
+
+type CalculateRightYAxisWidthProps = {
+  axisLabelFontSize: number
+  config: any
+  formatNumber: (value: any, axis?: string) => string
+  tickLabelFont: string
+  tickValues?: number[]
+  yScaleRight: any
+}
+
+const AXIS_LABEL_PADDING = 5
+
+const getRightTickValues = ({ config, tickValues, yScaleRight }) => {
+  if (tickValues) return tickValues
+
+  if (typeof yScaleRight?.ticks === 'function') {
+    return yScaleRight.ticks(config.runtime?.yAxis?.rightNumTicks || undefined)
+  }
+
+  if (typeof yScaleRight?.domain === 'function') {
+    return yScaleRight.domain()
+  }
+
+  return []
+}
+
+const measureWidestLabel = (labels: string[], tickLabelFont: string) => {
+  return labels.length ? Math.max(...labels.map(label => getTextWidth(label, tickLabelFont))) : 0
+}
+
+const getSideTitleSpace = ({ config, axisLabelFontSize, tickContentSpace }) => {
+  const rightTitle = config.runtime?.yAxis?.rightLabel ?? config.yAxis?.rightLabel
+
+  if (config.yAxis?.rightTitlePlacement === 'top' || !rightTitle) return 0
+
+  return tickContentSpace + axisLabelFontSize + AXIS_LABEL_PADDING
+}
+
+export const calculateRightYAxisWidth = ({
+  axisLabelFontSize,
+  config,
+  formatNumber,
+  tickLabelFont,
+  tickValues,
+  yScaleRight
+}: CalculateRightYAxisWidthProps): number => {
+  const measuredTickValues = getRightTickValues({ config, tickValues, yScaleRight })
+  const formattedTicks = measuredTickValues.map(tick => String(formatNumber(tick, 'right') ?? ''))
+  const tickLabelWidth = config.yAxis?.rightHideLabel ? 0 : measureWidestLabel(formattedTicks, tickLabelFont)
+  const tickLabelSpace = tickLabelWidth ? tickLabelWidth + DEFAULT_TICK_LENGTH + TICK_LABEL_MARGIN_RIGHT : 0
+  const tickMarkSpace = config.runtime?.yAxis?.rightHideTicks ? 0 : DEFAULT_TICK_LENGTH
+  const tickContentSpace = Math.max(tickLabelSpace, tickMarkSpace)
+  const sideTitleSpace = getSideTitleSpace({ config, axisLabelFontSize, tickContentSpace })
+
+  return Math.ceil(Math.max(tickContentSpace, sideTitleSpace))
+}
+
+export default calculateRightYAxisWidth

package/src/helpers/colorAssignmentHelpers.ts

@@ -1,4 +1,5 @@
 import { type ChartConfig, type VisualizationType } from '../types/ChartConfig'
+import { getSeriesName } from '@cdc/core/helpers/getSeriesName'
 
 export type SeriesColorAssignment = {
   key: string
@@ -45,8 +46,7 @@ export const hasSeriesColorAssignmentOverrides = (config: ChartConfig): boolean
 }
 
 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)
+  return getSeriesName(key, config)
 }
 
 export const getSeriesColorAssignmentItems = (config: ChartConfig): SeriesColorAssignmentItem[] => {

package/src/helpers/createNewChartConfig.ts

@@ -0,0 +1,56 @@
+import cloneDeep from 'lodash/cloneDeep'
+import mergeWith from 'lodash/mergeWith'
+
+import defaults from '../data/initial-state'
+import { ChartConfig } from '../types/ChartConfig'
+import { getChartTypeDefaultPalette } from './getChartTypeDefaultPalette'
+import { CURRENT_COVE_CONFIG_VERSION } from '@cdc/core/helpers/coveUpdateWorker'
+import { applyChartTypeContract } from './applyChartTypeContract'
+
+type CreateNewChartConfigOptions = {
+  isDashboard?: boolean
+}
+
+/**
+ * Creates a complete config for a brand-new chart using current defaults.
+ * Existing and legacy configs must continue through the normal migration and
+ * backfill paths instead of using this helper.
+ */
+export const createNewChartConfig = (
+  starterConfig: Partial<ChartConfig> & Record<string, any>,
+  { isDashboard = false }: CreateNewChartConfigOptions = {}
+): ChartConfig => {
+  const currentDefaults = cloneDeep(defaults)
+  const defaultPalette = getChartTypeDefaultPalette(starterConfig.visualizationType)
+
+  if (defaultPalette && !starterConfig.general?.palette) {
+    currentDefaults.general.palette = cloneDeep(defaultPalette)
+  }
+
+  const config = applyChartTypeContract(
+    mergeWith(currentDefaults, cloneDeep(starterConfig), (_defaultValue, starterValue) =>
+      Array.isArray(starterValue) ? starterValue : undefined
+    ) as ChartConfig
+  )
+
+  if (config.orientation === 'horizontal') {
+    config.xAxis.hideAxis = starterConfig.xAxis?.hideAxis ?? true
+    config.xAxis.hideTicks = starterConfig.xAxis?.hideTicks ?? true
+    config.yAxis.hideAxis = starterConfig.yAxis?.hideAxis ?? false
+    config.yAxis.hideTicks = starterConfig.yAxis?.hideTicks ?? false
+  }
+
+  config.table.show = starterConfig.table?.show ?? !isDashboard
+  config.table.download = starterConfig.table?.download ?? !isDashboard
+  config.legend.unified = starterConfig.legend?.unified ?? true
+  config.legend.expandForecastConfidenceIntervals = starterConfig.legend?.expandForecastConfidenceIntervals ?? true
+
+  if (starterConfig.visualizationType === 'HeatMap') {
+    config.xAxis.manual = starterConfig.xAxis?.manual ?? false
+    config.xAxis.numTicks = starterConfig.xAxis?.numTicks
+    config.xAxis.viewportNumTicks = starterConfig.xAxis?.viewportNumTicks ?? {}
+  }
+
+  config.version = CURRENT_COVE_CONFIG_VERSION
+  return config
+}

package/src/helpers/dataDrivenYAxisCategories.ts

@@ -0,0 +1,18 @@
+import { AllChartsConfig } from '../types/ChartConfig'
+import { getDynamicYAxisCategories } from './getDynamicYAxisCategories'
+
+type DataDrivenYAxisConfig = Pick<AllChartsConfig, 'yAxis'>
+
+export const isDataDrivenYAxis = (config: DataDrivenYAxisConfig) =>
+  config.yAxis.type === 'categorical' &&
+  (config.yAxis.categoryMode === 'data-driven' ||
+    (config.yAxis.categoryMode === undefined && !!config.yAxis.dataDrivenCategories))
+
+export const getDataDrivenYAxisCategories = (config: DataDrivenYAxisConfig, data: Record<string, any>[]) => {
+  if (!isDataDrivenYAxis(config) || !config.yAxis.dataDrivenCategories) return null
+
+  return getDynamicYAxisCategories({
+    config: config.yAxis.dataDrivenCategories,
+    data
+  })
+}

package/src/helpers/forecastLegend.ts

@@ -0,0 +1,88 @@
+export type ForecastConfidenceInterval = {
+  high?: string | number
+  low?: string | number
+}
+
+export type ForecastConfidenceIntervalGroup = {
+  intervalIndexes: number[]
+  key: string
+  label: string
+  opacity: number
+}
+
+const FORECAST_CI_KEY_PREFIX = 'forecast-ci:'
+
+const getSharedPercentage = ({ high, low }: ForecastConfidenceInterval): number | undefined => {
+  const highMatches = String(high).match(/\d+(?:\.\d+)?/g)
+  const lowMatches = String(low).match(/\d+(?:\.\d+)?/g)
+
+  if (highMatches?.length !== 1 || lowMatches?.length !== 1) return
+
+  const highPercentage = Number(highMatches[0])
+  const lowPercentage = Number(lowMatches[0])
+
+  return highPercentage === lowPercentage && highPercentage >= 0 && highPercentage <= 100 ? highPercentage : undefined
+}
+
+export const getForecastConfidenceIntervalGroups = (
+  confidenceIntervals: ForecastConfidenceInterval[] = []
+): ForecastConfidenceIntervalGroup[] => {
+  const completeIntervals = confidenceIntervals
+    .map((interval, configIndex) => ({ interval, configIndex, percentage: getSharedPercentage(interval) }))
+    .filter(({ interval }) => String(interval.high ?? '').trim() && String(interval.low ?? '').trim())
+
+  if (completeIntervals.length <= 1) return []
+
+  const orderedIntervals = completeIntervals.sort((a, b) => {
+    if (a.percentage !== undefined && b.percentage !== undefined) return a.percentage - b.percentage
+    if (a.percentage !== undefined) return -1
+    if (b.percentage !== undefined) return 1
+    return a.configIndex - b.configIndex
+  })
+  const groups: ForecastConfidenceIntervalGroup[] = []
+  const percentageGroups = new Map<number, ForecastConfidenceIntervalGroup>()
+  let fallbackIndex = 0
+
+  orderedIntervals.forEach((interval, displayIndex) => {
+    if (interval.percentage !== undefined) {
+      const existingGroup = percentageGroups.get(interval.percentage)
+      if (existingGroup) {
+        existingGroup.intervalIndexes.push(interval.configIndex)
+        return
+      }
+    }
+
+    const fallbackNumber = interval.percentage === undefined ? ++fallbackIndex : undefined
+    const group = {
+      intervalIndexes: [interval.configIndex],
+      key: interval.percentage !== undefined ? `percentage:${interval.percentage}` : `interval:${interval.configIndex}`,
+      label: interval.percentage !== undefined ? `${interval.percentage}% CI` : `CI ${fallbackNumber}`,
+      opacity: 1 - Math.pow(1 - 0.5, completeIntervals.length - displayIndex)
+    }
+
+    groups.push(group)
+    if (interval.percentage !== undefined) percentageGroups.set(interval.percentage, group)
+  })
+
+  return groups
+}
+
+export const getForecastLegendKey = (stageKey: string, intervalKey: string): string =>
+  `${FORECAST_CI_KEY_PREFIX}${encodeURIComponent(stageKey)}:${encodeURIComponent(intervalKey)}`
+
+export const getForecastConfidenceIntervalKey = (
+  confidenceIntervals: ForecastConfidenceInterval[] = [],
+  intervalIndex: number
+): string | undefined =>
+  getForecastConfidenceIntervalGroups(confidenceIntervals).find(group => group.intervalIndexes.includes(intervalIndex))
+    ?.key
+
+export const isForecastLegendSelectionActive = (
+  seriesHighlight: string[],
+  stageKey: string,
+  intervalKey?: string
+): boolean => {
+  if (!seriesHighlight.length) return true
+  if (seriesHighlight.includes(stageKey)) return true
+  return intervalKey ? seriesHighlight.includes(getForecastLegendKey(stageKey, intervalKey)) : false
+}