@cdc/chart 4.26.7 → 4.26.10

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

package/src/components/LineChart/helpers.test.ts

@@ -20,6 +20,7 @@ describe('LineChart helpers', () => {
     const basePreliminaryData: PreliminaryDataItem[] = [
       {
         type: 'effect',
+        lineEffectScope: 'outgoing',
         seriesKeys: ['COVID-19'],
         column: 'Attribute',
         value: 'Dotted',
@@ -38,6 +39,7 @@ describe('LineChart helpers', () => {
       },
       {
         type: 'effect',
+        lineEffectScope: 'outgoing',
         seriesKeys: ['Influenza'],
         column: 'Attribute',
         value: 'Dotted',
@@ -56,14 +58,54 @@ describe('LineChart helpers', () => {
       }
     ]
 
+    describe('existing effect rules without a scope marker', () => {
+      it.each(['', 'Category'])('preserves adjacent segments for %s category data', dynamicCategory => {
+        const data = [
+          { Date: 'Oct.–Dec. 2024', Category: 'COVID-19', 'COVID-19': 5.2, Value: 5.2, Attribute: '' },
+          { Date: 'Jan.–Mar. 2025', Category: 'COVID-19', 'COVID-19': 5.7, Value: 5.7, Attribute: 'Dotted' },
+          { Date: 'Apr.–Jun. 2025', Category: 'COVID-19', 'COVID-19': 5.4, Value: 5.4, Attribute: 'Dotted' }
+        ]
+        const styles = createStyles({
+          preliminaryData: [{ ...basePreliminaryData[0], lineEffectScope: undefined, weight: 4 }],
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory,
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles.map(style => style.strokeDasharray)).toEqual(['5 5', '5 5', '5 5'])
+        expect(styles.map(style => style.strokeWidth)).toEqual([4, 4, 4])
+      })
+
+      it('keeps an incoming effect when only the latest point matches', () => {
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData.map(rule => ({ ...rule, lineEffectScope: undefined })),
+          data: [{ Attribute: '' }, { Attribute: 'Dotted' }],
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: '',
+          originalSeriesKey: ''
+        })
+
+        expect(styles.map(style => style.strokeDasharray)).toEqual(['5 5', '5 5'])
+      })
+    })
+
     describe('with dynamic category data (single-row/tall format)', () => {
       const dynamicCategoryData = [
-        { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' },
-        { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: '' },
-        { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: 'Dotted' }
+        { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+        { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: 'Dotted' },
+        { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: '' }
       ]
 
-      it('should apply dashed style when Attribute matches effect value', () => {
+      it('should apply an isolated effect only to the segment leaving the matching point', () => {
         const styles = createStyles({
           preliminaryData: basePreliminaryData,
           data: dynamicCategoryData,
@@ -77,14 +119,51 @@ describe('LineChart helpers', () => {
         })
 
         expect(styles).toHaveLength(3)
-        // First point has Attribute="Dotted" - should be dashed
-        expect(styles[0].strokeDasharray).toBe('5 5')
-        // Second point has Attribute="" - but previous point was dashed, so it inherits
-        // Actually, the logic applies dashed to current AND previous point when effect is found
-        // Let's check what happens
-        expect(styles[1].strokeDasharray).toBe('5 5') // Inherits from next point's effect
-        // Third point has Attribute="Dotted" - should be dashed
-        expect(styles[2].strokeDasharray).toBe('5 5')
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, '5 5', 0])
+      })
+
+      it('should create a continuous effect range from consecutive matching points', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: 'Dotted' },
+          { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: 'Dotted' },
+          { Date: '10/26/2025', Category: 'COVID-19', Value: '44.1', Attribute: '' }
+        ]
+
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData,
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, '5 5', '5 5', 0])
+      })
+
+      it('should leave the incoming segment normal when only the final point matches', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: 'Dotted' }
+        ]
+
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData,
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, 0])
       })
 
       it('should apply solid style when no effect matches', () => {
@@ -111,7 +190,7 @@ describe('LineChart helpers', () => {
       })
 
       it('should only match effects for the correct series', () => {
-        // Using Influenza series key with COVID data should not match
+        // Using an unconfigured series key with COVID data should not match
         const styles = createStyles({
           preliminaryData: basePreliminaryData,
           data: dynamicCategoryData,
@@ -119,14 +198,12 @@ describe('LineChart helpers', () => {
           strokeWidth: 2,
           handleLineType: mockHandleLineType,
           lineType: 'solid-line',
-          seriesKey: 'Influenza', // Different series
+          seriesKey: 'RSV', // Series not configured for an effect
           dynamicCategory: 'Category',
           originalSeriesKey: 'Value'
         })
 
-        // No effect should match since seriesKeys is ['COVID-19'] not ['Influenza']
-        // (assuming we use the COVID effect config)
-        expect(styles.every(s => s.strokeDasharray === 0 || s.strokeDasharray === '10 5')).toBe(true)
+        expect(styles.every(style => style.strokeDasharray === 0)).toBe(true)
       })
     })
 
@@ -134,6 +211,7 @@ describe('LineChart helpers', () => {
       const multiColumnPreliminaryData: PreliminaryDataItem[] = [
         {
           type: 'effect',
+          lineEffectScope: 'outgoing',
           seriesKeys: ['COVID-19'],
           column: 'COVID-19-Attribute',
           value: 'Dotted',
@@ -153,12 +231,12 @@ describe('LineChart helpers', () => {
       ]
 
       const multiColumnData = [
-        { Date: '10/5/2025', 'COVID-19': '43.6', 'COVID-19-Attribute': 'Dotted' },
-        { Date: '10/12/2025', 'COVID-19': '40.7', 'COVID-19-Attribute': '' },
-        { Date: '10/19/2025', 'COVID-19': '42.6', 'COVID-19-Attribute': 'Dotted' }
+        { Date: '10/5/2025', 'COVID-19': '43.6', 'COVID-19-Attribute': '' },
+        { Date: '10/12/2025', 'COVID-19': '40.7', 'COVID-19-Attribute': 'Dotted' },
+        { Date: '10/19/2025', 'COVID-19': '42.6', 'COVID-19-Attribute': '' }
       ]
 
-      it('should apply dashed style when attribute column matches', () => {
+      it('should apply an isolated effect only to the segment leaving the matching point', () => {
         const styles = createStyles({
           preliminaryData: multiColumnPreliminaryData,
           data: multiColumnData,
@@ -172,12 +250,7 @@ describe('LineChart helpers', () => {
         })
 
         expect(styles).toHaveLength(3)
-        // First point has attribute - dashed
-        expect(styles[0].strokeDasharray).toBe('5 5')
-        // Second point inherits from third point's effect
-        expect(styles[1].strokeDasharray).toBe('5 5')
-        // Third point has attribute - dashed
-        expect(styles[2].strokeDasharray).toBe('5 5')
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, '5 5', 0])
       })
     })
 
@@ -186,6 +259,7 @@ describe('LineChart helpers', () => {
         const preliminaryDataWithWeight: PreliminaryDataItem[] = [
           {
             type: 'effect',
+            lineEffectScope: 'outgoing',
             seriesKeys: ['COVID-19'],
             column: 'Attribute',
             value: 'Dotted',
@@ -206,9 +280,9 @@ describe('LineChart helpers', () => {
         ]
 
         const data = [
-          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' },
-          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: '' },
-          { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: 'Dotted' }
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: 'Dotted' },
+          { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: '' }
         ]
 
         const styles = createStyles({
@@ -224,18 +298,15 @@ describe('LineChart helpers', () => {
         })
 
         expect(styles).toHaveLength(3)
-        // First point has effect with custom weight
-        expect(styles[0].strokeWidth).toBe(5)
-        // Second point inherits custom weight from next point's effect
-        expect(styles[1].strokeWidth).toBe(5)
-        // Third point has effect with custom weight
-        expect(styles[2].strokeWidth).toBe(5)
+        expect(styles.map(style => style.strokeWidth)).toEqual([2, 5, 2])
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, '5 5', 0])
       })
 
       it('should use default strokeWidth when preliminaryData has no weight', () => {
         const preliminaryDataNoWeight: PreliminaryDataItem[] = [
           {
             type: 'effect',
+            lineEffectScope: 'outgoing',
             seriesKeys: ['COVID-19'],
             column: 'Attribute',
             value: 'Dotted',
@@ -287,6 +358,7 @@ describe('LineChart helpers', () => {
         const preliminaryData: PreliminaryDataItem[] = [
           {
             type: 'effect',
+            lineEffectScope: 'outgoing',
             seriesKeys: ['COVID-19'],
             column: 'Attribute',
             value: 'Dotted',
@@ -306,7 +378,10 @@ describe('LineChart helpers', () => {
           }
         ]
 
-        const data = [{ Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' }]
+        const data = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: '' }
+        ]
 
         const styles = createStyles({
           preliminaryData,
@@ -320,7 +395,7 @@ describe('LineChart helpers', () => {
           originalSeriesKey: 'Value'
         })
 
-        expect(styles).toHaveLength(1)
+        expect(styles).toHaveLength(2)
         expect(styles[0].strokeWidth).toBe(expected)
       })
     })
@@ -570,5 +645,18 @@ describe('LineChart helpers', () => {
       expect(suppressedSegments.length).toBeGreaterThan(0)
       expect(suppressedSegments.every(segment => segment.weight === undefined)).toBe(true)
     })
+
+    it('returns no segments when a brushed dynamic-category series has no rows', () => {
+      const segments = createDataSegments({
+        data: [],
+        seriesKey: 'Influenza',
+        preliminaryData: [makeSuppression({ seriesKeys: ['Influenza'] })],
+        dynamicCategory: 'Category',
+        originalSeriesKey: 'Value',
+        colorScale: mockColorScale
+      })
+
+      expect(segments).toEqual([])
+    })
   })
 })

package/src/components/LineChart/helpers.ts

@@ -55,16 +55,19 @@ export const createStyles = (props: StyleProps): Style[] => {
   }
 
   data.forEach((d, index) => {
-    const matchingPd: PreliminaryDataItem = getMatchingPd(d)
+    const matchingPd = getMatchingPd(d)
+    const preserveAdjacentSegments =
+      matchingPd && !matchingPd.style.includes('Circles') && matchingPd.lineEffectScope !== 'outgoing'
+    const hasStyledSegment = matchingPd && (preserveAdjacentSegments || index < data.length - 1)
 
-    let style: Style = matchingPd
+    const style: Style = hasStyledSegment
       ? createStyle(handleLineType(matchingPd.style), matchingPd.weight)
       : createStyle(handleLineType(lineType))
 
     styles.push(style)
 
-    // If matchingPd exists, update the previous style if there is a previous element
-    if (matchingPd && index > 0) {
+    // Existing rules also style the incoming segment, including a preliminary final point.
+    if (preserveAdjacentSegments && index > 0) {
       styles[index - 1] = createStyle(handleLineType(matchingPd.style), matchingPd.weight)
     }
   })
@@ -297,6 +300,8 @@ export const createDataSegments = props => {
 
     return (props.preliminaryData ?? []).some(pd => d?.[props.dynamicCategory] === props?.seriesKey)
   })
+  if (dynamicData.length === 0) return []
+
   const isSuppressed = (pd, dataItem) => {
     if (pd.type === 'effect' || pd.hideLineStyle) return false