@cdc/chart 4.26.7 → 4.26.10

package/src/components/Legend/Legend.Component.tsx

@@ -7,12 +7,13 @@ import { getLegendClasses } from './helpers/getLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
 import { Label } from '../../types/Label'
-import { ChartConfig, ViewportSize } from '../../types/ChartConfig'
+import { ChartConfig } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
 import { forwardRef } from 'react'
 import LegendSuppression from './Legend.Suppression'
 import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
+import type { ViewPort } from '@cdc/core/types/ViewPort'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import LegendLineShape from './LegendLine.Shape'
 import LegendGroup from './LegendGroup'
@@ -28,7 +29,7 @@ const LEGEND_PADDING = 36
 interface LegendProps {
   colorScale: ColorScale
   config: ChartConfig
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
   formatLabels: (labels: Label[]) => Label[]
   formatNumber?: (value: number, axis?: string) => string
   highlight: Function
@@ -183,109 +184,122 @@ const Legend: React.FC<LegendProps> = forwardRef(
 
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
           {labels => {
+            const formattedLabels = formatLabels(labels as Label[]).filter(
+              label => dontFilterLegendItems || seriesWithData.includes(label.datum)
+            )
+            const visibleForecastLegendKeys = [
+              ...formattedLabels
+                .filter(label => !config.exclusions.active || !config.exclusions.keys?.includes(label.datum))
+                .map(label => label.datum),
+              ...highLightedLegendItems.map(item => item.legendLabel).filter(Boolean)
+            ]
+            const allForecastLegendItemsSelected =
+              config.visualizationType === 'Forecasting' &&
+              visibleForecastLegendKeys.length > 0 &&
+              visibleForecastLegendKeys.every(key => seriesHighlight.includes(key))
+            const showAllButton = seriesHighlight.length > 0 && !allForecastLegendItemsSelected
+
             return (
               <>
                 <div className={innerClasses.join(' ')}>
-                  {formatLabels(labels as Label[])
-                    .filter(label => dontFilterLegendItems || seriesWithData.includes(label.datum))
-                    .map((label, i) => {
-                      let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
-                      let itemName = label.datum
-
-                      // Filter excluded data keys from legend
-                      if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                        return null
-                      }
+                  {formattedLabels.map((label, i) => {
+                    let className = [
+                      'legend-item',
+                      'legend-item--interactive',
+                      `legend-text--${label.text.replace(' ', '').toLowerCase()}`
+                    ]
+                    let itemName = label.datum
 
-                      if (runtime.seriesLabels) {
-                        let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                        itemName = config.runtime.seriesKeys[index]
+                    // Filter excluded data keys from legend
+                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+                      return null
+                    }
 
-                        if (runtime?.forecastingSeriesKeys?.length > 0) {
-                          itemName = label.text
-                        }
-                      }
+                    if (runtime.seriesLabels && !runtime?.forecastingSeriesKeys?.length) {
+                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                      itemName = config.runtime.seriesKeys[index]
+                    }
 
-                      if (seriesHighlight.length) {
-                        if (!seriesHighlight.includes(itemName)) {
-                          className.push('inactive')
-                        } else className.push('highlighted')
-                      }
+                    if (seriesHighlight.length) {
+                      if (!seriesHighlight.includes(itemName)) {
+                        className.push('inactive')
+                      } else className.push('highlighted')
+                    }
 
-                      if (
-                        config.legend.style === 'gradient' ||
-                        config.legend.groupBy ||
-                        config.visualizationType === 'Horizon Chart'
-                      ) {
-                        return null
-                      }
+                    if (
+                      config.legend.style === 'gradient' ||
+                      config.legend.groupBy ||
+                      config.visualizationType === 'Horizon Chart'
+                    ) {
+                      return null
+                    }
 
-                      return (
-                        <LegendItem
-                          className={className.join(' ')}
-                          tabIndex={0}
-                          key={`legend-quantile-${i}`}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter') {
-                              e.preventDefault()
-                              publishAnalyticsEvent({
-                                vizType: config?.type,
-                                vizSubType: getVizSubType(config),
-                                vizTitle: getVizTitle(config),
-                                eventType: `chart_legend_item_toggled` as any,
-                                eventAction: 'keydown',
-                                eventLabel: interactionLabel,
-                                specifics:
-                                  config.visualizationType === 'Bar'
-                                    ? `label: ${label.text}, orientation: ${
-                                        config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
-                                      }, mode: ${legend.behavior}`
-                                    : `label: ${label.text}, mode: ${legend.behavior}`
-                              })
-                              highlight(label)
-                            }
-                          }}
-                          onClick={e => {
+                    return (
+                      <LegendItem
+                        className={className.join(' ')}
+                        tabIndex={0}
+                        key={`legend-quantile-${i}`}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
                             e.preventDefault()
                             publishAnalyticsEvent({
                               vizType: config?.type,
                               vizSubType: getVizSubType(config),
+                              vizTitle: getVizTitle(config),
                               eventType: `chart_legend_item_toggled` as any,
-                              eventAction: 'click',
+                              eventAction: 'keydown',
                               eventLabel: interactionLabel,
                               specifics:
                                 config.visualizationType === 'Bar'
                                   ? `label: ${label.text}, orientation: ${
                                       config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
                                     }, mode: ${legend.behavior}`
-                                  : `label: ${label.text}, mode: ${legend.behavior}`,
-
-                              vizTitle: getVizTitle(config)
+                                  : `label: ${label.text}, mode: ${legend.behavior}`
                             })
                             highlight(label)
-                          }}
-                          role='button'
-                        >
-                          <>
-                            {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
-                              <React.Fragment>
-                                <LegendLineShape index={i} label={label} config={config} />
-                              </React.Fragment>
-                            ) : (
-                              <>
-                                <LegendShape
-                                  shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
-                                  fill={label.value}
-                                />
-                              </>
-                            )}
-                          </>
-                          <LegendLabel align='left' className='m-0'>
-                            {parse(label.text)}
-                          </LegendLabel>
-                        </LegendItem>
-                      )
-                    })}
+                          }
+                        }}
+                        onClick={e => {
+                          e.preventDefault()
+                          publishAnalyticsEvent({
+                            vizType: config?.type,
+                            vizSubType: getVizSubType(config),
+                            eventType: `chart_legend_item_toggled` as any,
+                            eventAction: 'click',
+                            eventLabel: interactionLabel,
+                            specifics:
+                              config.visualizationType === 'Bar'
+                                ? `label: ${label.text}, orientation: ${
+                                    config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
+                                  }, mode: ${legend.behavior}`
+                                : `label: ${label.text}, mode: ${legend.behavior}`,
+
+                            vizTitle: getVizTitle(config)
+                          })
+                          highlight(label)
+                        }}
+                        role='button'
+                      >
+                        <>
+                          {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
+                            <React.Fragment>
+                              <LegendLineShape index={i} label={label} config={config} />
+                            </React.Fragment>
+                          ) : (
+                            <>
+                              <LegendShape
+                                shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                                fill={label.value}
+                              />
+                            </>
+                          )}
+                        </>
+                        <LegendLabel align='left' className='m-0'>
+                          {parse(label.text)}
+                        </LegendLabel>
+                      </LegendItem>
+                    )
+                  })}
 
                   {highLightedLegendItems.map((bar, i) => {
                     // if duplicates only return first item
@@ -325,6 +339,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
                   })}
                 </div>
 
+                {showAllButton && (
+                  <Button size='sm' onClick={labels => handleShowAll(labels)} style={{ marginTop: '1rem' }}>
+                    Show All
+                  </Button>
+                )}
+
                 <LegendSuppression config={config} isLegendBottom={isLegendBottom} />
 
                 {/* Pattern Legend Items */}
@@ -338,6 +358,11 @@ const Legend: React.FC<LegendProps> = forwardRef(
                       const patternId = `legend-pattern-${key}`
                       const pColor = (pattern as any)?.color || '#666666'
                       const patternSize = (pattern as any)?.patternSize ?? 10
+                      const targetSeriesLabel =
+                        pattern.application === 'portion' && pattern.dataKey
+                          ? config.runtime?.seriesLabels?.[pattern.dataKey]
+                          : undefined
+                      const patternBackground = targetSeriesLabel ? colorScale(targetSeriesLabel) : 'white'
 
                       return (
                         <LegendItem
@@ -348,7 +373,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                         >
                           <LegendShape
                             shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
-                            fill='white'
+                            fill={patternBackground}
                             patternInfo={{
                               pattern: pattern.shape || 'circles',
                               patternId,
@@ -368,11 +393,6 @@ const Legend: React.FC<LegendProps> = forwardRef(
             )
           }}
         </LegendOrdinal>
-        {seriesHighlight.length > 0 && (
-          <Button onClick={labels => handleShowAll(labels)} style={{ marginTop: '1rem' }}>
-            Show All
-          </Button>
-        )}
       </aside>
     )
   }

package/src/components/Legend/LegendGroup/LegendGroup.styles.css

@@ -10,6 +10,7 @@
       font-weight: 400;
       margin-bottom: 0.5rem;
     }
+
     .group-label {
       font-family: Nunito, sans-serif;
       font-size: 1rem;
@@ -17,6 +18,12 @@
     }
   }
 
+  .legend-group__items {
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.25rem;
+  }
+
   .legend-group-grid {
     display: flex;
     flex-wrap: wrap;

package/src/components/Legend/LegendGroup/LegendGroup.tsx

@@ -57,43 +57,56 @@ const LegendGroup = ({ formatLabels }) => {
               <p className='legend-group group-label'>{group}</p>
             </div>
             <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
-              {labels =>
-                formatLabels(labels)
-                  .filter(label => {
-                    const groupBy = config.legend.groupBy || ''
-                    return data.some(d => d[groupBy] === group && d[label.text] !== undefined && d[label.text] !== 'NA')
-                  })
+              {labels => (
+                <div className='legend-group__items'>
+                  {formatLabels(labels)
+                    .filter(label => {
+                      const groupBy = config.legend.groupBy || ''
+                      return data.some(
+                        d => d[groupBy] === group && d[label.text] !== undefined && d[label.text] !== 'NA'
+                      )
+                    })
 
-                  .map((label, i) => {
-                    let className = ['legend-group', 'group-item']
-                    if (seriesHighlight.length) {
-                      if (!seriesHighlight.includes(label.datum)) {
-                        className.push('inactive')
-                      } else {
-                        className.push('highlighted')
+                    .map((label, i) => {
+                      let className = ['legend-group', 'group-item', 'legend-item--interactive']
+                      if (seriesHighlight.length) {
+                        if (!seriesHighlight.includes(label.datum)) {
+                          className.push('inactive')
+                        } else {
+                          className.push('highlighted')
+                        }
                       }
-                    }
 
-                    return (
-                      <LegendItem
-                        alignItems='start'
-                        className={className.join(' ')}
-                        onClick={e => {
-                          e.preventDefault()
-                          highlight(label)
-                        }}
-                        key={`legend-item-${i}`}
-                        tabIndex={0}
-                        role='button'
-                      >
-                        <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={label.value} />
-                        <LegendLabel align='left' margin='0'>
-                          {label.text}
-                        </LegendLabel>
-                      </LegendItem>
-                    )
-                  })
-              }
+                      return (
+                        <LegendItem
+                          alignItems='start'
+                          className={className.join(' ')}
+                          onClick={e => {
+                            e.preventDefault()
+                            highlight(label)
+                          }}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault()
+                              highlight(label)
+                            }
+                          }}
+                          key={`legend-item-${i}`}
+                          tabIndex={0}
+                          role='button'
+                        >
+                          <LegendShape
+                            shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                            fill={label.value}
+                          />
+                          <LegendLabel align='left' margin='0'>
+                            {label.text}
+                          </LegendLabel>
+                        </LegendItem>
+                      )
+                    })}
+                </div>
+              )}
             </LegendOrdinal>
           </div>
         )

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')
+  })
+})