@cdc/chart 4.26.5 → 4.26.7

package/src/components/HeatMap/tests/HeatMap.test.tsx

@@ -116,7 +116,7 @@ const buildHeatMapContext = () => {
       hide: false,
       position: 'bottom',
       style: 'gradient',
-      subStyle: 'smooth',
+      subStyle: 'linear blocks',
       hideBorder: {
         side: false,
         topBottom: true
@@ -264,7 +264,7 @@ const buildSeriesModeHeatMapContext = () => {
       hide: false,
       position: 'top',
       style: 'gradient',
-      subStyle: 'smooth',
+      subStyle: 'linear blocks',
       hideBorder: {
         side: false,
         topBottom: true
@@ -453,6 +453,28 @@ const getHeatMapPlotTop = (container: HTMLElement) => getTranslateY(container.qu
 describe('HeatMap', () => {
   it('renders cells with tooltip metadata from additional columns', () => {
     const context = buildHeatMapContext()
+    const rows = [
+      { month: '2024-02-01', North: 5, South: 7, notes: 'Severe', population: 2500 },
+      { month: '2024-01-01', North: 2, South: 4, notes: 'Low', population: 1000 }
+    ]
+
+    context.config.data = rows
+    context.config.filteredData = rows
+    context.config.excludedData = rows
+    context.filteredData = rows
+    context.excludedData = rows
+    context.rawData = rows
+    context.tableData = rows
+    ;(context.config as any).columns.population = {
+      label: 'Population',
+      tooltips: true,
+      dataTable: true,
+      prefix: '$',
+      suffix: ' residents',
+      roundToPlace: 0,
+      commas: true
+    }
+
     const { container } = render(
       <ConfigContext.Provider value={context}>
         <HeatMap parentWidth={800} parentHeight={320} />
@@ -469,6 +491,7 @@ describe('HeatMap', () => {
     expect(tooltipHtml).toContain('Region:')
     expect(tooltipHtml).toContain('Value:')
     expect(tooltipHtml).toContain('Notes')
+    expect(tooltipHtml).toContain('Population: $1,000 residents')
     expect(tooltipHtml).not.toContain('<br/>')
     expect(cells[0]?.getAttribute('tabindex')).toBe('0')
     expect(cells[0]?.getAttribute('aria-label')).toContain('Month: Tooltip 2024-01-01')
@@ -548,16 +571,20 @@ describe('HeatMap', () => {
 
   it('renders a gradient legend for the mapped value column', () => {
     const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.colorBucketCount = 5
 
-    render(
+    const { container } = render(
       <ConfigContext.Provider value={context}>
         <HeatMapGradientLegend />
       </ConfigContext.Provider>
     )
 
+    const rangeLabels = Array.from(container.querySelectorAll('.cdc-heatmap__legend-range-label')).map(label =>
+      label.textContent?.trim()
+    )
+
     expect(screen.getByText('Value')).toBeTruthy()
-    expect(screen.getByText('2')).toBeTruthy()
-    expect(screen.getByText('7')).toBeTruthy()
+    expect(rangeLabels).toEqual(['2\u20133', '3\u20134', '4\u20135', '5\u20136', '6\u20137'])
   })
 
   it('renders HeatMap gradient legends as linear blocks', () => {
@@ -1003,6 +1030,7 @@ describe('HeatMap', () => {
     const yAxisHeading = screen.getByText('Left Value Axis')
     const dateCategoryHeading = screen.getByText('Date/Category Axis')
     const settingsHeading = screen.getByText('HeatMap Settings')
+    const legendHeading = screen.getByText('Legend')
     expect(yAxisHeading).toBeTruthy()
     expect(settingsHeading).toBeTruthy()
     expect(
@@ -1015,12 +1043,14 @@ describe('HeatMap', () => {
     fireEvent.click(dateCategoryHeading)
     fireEvent.click(settingsHeading)
     fireEvent.click(dataSeriesHeading)
+    fireEvent.click(legendHeading)
 
     const xAxisPositionLabel = screen.getByText('X-Axis Position')
+    const gradientStyleSelect = screen.getByLabelText('Gradient Style') as HTMLSelectElement
 
     expect(screen.queryByText('Value Column')).toBeNull()
-    expect(screen.getAllByText('Hide Axis')).toHaveLength(1)
-    expect(screen.getAllByText('Hide Ticks')).toHaveLength(1)
+    expect(screen.getAllByText('Hide Axis')).toHaveLength(2)
+    expect(screen.getAllByText('Hide Ticks')).toHaveLength(2)
     expect(screen.getAllByText('Tick rotation (Degrees)').length).toBeGreaterThan(0)
     expect(screen.getByLabelText('Label Placement')).toBeTruthy()
     expect(screen.getByText('Add Data Series')).toBeTruthy()
@@ -1036,5 +1066,7 @@ describe('HeatMap', () => {
     expect(screen.getByText('Column Label Gap')).toBeTruthy()
     expect(screen.getByLabelText(/Data Grouping/i)).toBeTruthy()
     expect(screen.getByText('Displaying Rows')).toBeTruthy()
+    expect(Array.from(gradientStyleSelect.options).map(option => option.value)).toEqual(['linear blocks'])
+    expect(screen.queryByLabelText('Tick Rotation (Degrees)')).toBeNull()
   })
 })

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

@@ -1,7 +1,6 @@
 import parse from 'html-react-parser'
 import React, { useMemo } from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
-import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
 import { getLegendClasses } from './helpers/getLegendClasses'
@@ -22,6 +21,7 @@ import { getHorizonLayerColors, getHorizonMaxValue } from '../../components/Hori
 import { getSeriesWithData } from '../../helpers/dataHelpers'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 
 const LEGEND_PADDING = 36
 
@@ -62,6 +62,42 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
     const { series } = runtime
+    const processedLegendText = useMemo(() => {
+      if (!config.enableMarkupVariables || !config.markupVariables?.length) {
+        return {
+          label: legend?.label,
+          description: legend?.description
+        }
+      }
+
+      const markupOptions = {
+        isEditor: false,
+        filters: config.filters || [],
+        locale: config.locale,
+        dataMetadata: config.dataMetadata
+      }
+
+      return {
+        label: legend?.label
+          ? processMarkupVariables(legend.label, data || config.data || [], config.markupVariables, markupOptions)
+              .processedContent
+          : legend?.label,
+        description: legend?.description
+          ? processMarkupVariables(legend.description, data || config.data || [], config.markupVariables, markupOptions)
+              .processedContent
+          : legend?.description
+      }
+    }, [
+      config.enableMarkupVariables,
+      config.markupVariables,
+      config.filters,
+      config.locale,
+      config.dataMetadata,
+      config.data,
+      data,
+      legend?.label,
+      legend?.description
+    ])
 
     const seriesWithData = getSeriesWithData(config)
     // For Radar charts, seriesWithData contains dimension keys but legend shows entity names
@@ -115,10 +151,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
         aria-label='legend'
         tabIndex={0}
       >
-        {(legend.label || legend.description) && (
-          <div className={legend.description ? 'mb-3' : 'mb-2'}>
-            {legend.label && <h3 className='fw-bold cove-prose'>{parse(legend.label)}</h3>}
-            {legend.description && <p className='mt-2 cove-prose'>{parse(legend.description)}</p>}
+        {(processedLegendText.label || processedLegendText.description) && (
+          <div className={processedLegendText.description ? 'mb-3' : 'mb-2'}>
+            {processedLegendText.label && <h3 className='fw-bold cove-prose'>{parse(processedLegendText.label)}</h3>}
+            {processedLegendText.description && (
+              <p className='mt-2 cove-prose'>{parse(processedLegendText.description)}</p>
+            )}
           </div>
         )}
         <LegendGradient
@@ -242,7 +280,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               </>
                             )}
                           </>
-                          <LegendLabel align='left' className='m-0 cove-prose'>
+                          <LegendLabel align='left' className='m-0'>
                             {parse(label.text)}
                           </LegendLabel>
                         </LegendItem>
@@ -298,9 +336,8 @@ const Legend: React.FC<LegendProps> = forwardRef(
                   >
                     {Object.entries(config.legend.patterns).map(([key, pattern]) => {
                       const patternId = `legend-pattern-${key}`
-                      const size = config.legend.patternSize || 8
-                      const legendSize = 16
                       const pColor = (pattern as any)?.color || '#666666'
+                      const patternSize = (pattern as any)?.patternSize ?? 10
 
                       return (
                         <LegendItem
@@ -309,59 +346,17 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           tabIndex={0}
                           role='button'
                         >
-                          <span className='me-2'>
-                            <svg width={legendSize} height={legendSize}>
-                              <defs>
-                                {pattern.shape === 'circles' && (
-                                  <PatternCircles
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    fill={pColor}
-                                    radius={1.25}
-                                  />
-                                )}
-                                {pattern.shape === 'lines' && (
-                                  <PatternLines
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    stroke={pColor}
-                                    strokeWidth={0.75}
-                                    orientation={['horizontal']}
-                                  />
-                                )}
-                                {pattern.shape === 'diagonalLines' && (
-                                  <PatternLines
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    stroke={pColor}
-                                    strokeWidth={0.75}
-                                    orientation={['diagonalRightToLeft']}
-                                  />
-                                )}
-                                {pattern.shape === 'waves' && (
-                                  <PatternWaves
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    fill={pColor}
-                                    strokeWidth={0.25}
-                                  />
-                                )}
-                              </defs>
-                              <circle
-                                fill={`url(#${patternId})`}
-                                r={legendSize / 2}
-                                cx={legendSize / 2}
-                                cy={legendSize / 2}
-                                stroke='#0000004d'
-                                strokeWidth={1}
-                              />
-                            </svg>
-                          </span>
-                          <LegendLabel align='left' className='m-0 cove-prose'>
+                          <LegendShape
+                            shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                            fill='white'
+                            patternInfo={{
+                              pattern: pattern.shape || 'circles',
+                              patternId,
+                              size: patternSize,
+                              color: pColor
+                            }}
+                          />
+                          <LegendLabel align='left' className='m-0'>
                             {parse(String((pattern as any)?.label || key))}
                           </LegendLabel>
                         </LegendItem>

package/src/components/Legend/Legend.Suppression.tsx

@@ -70,16 +70,16 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
 
       if (visualizationType === 'Combo') {
         return (
-          <React.Fragment>
+          <React.Fragment key={itemKey}>
             {pd.symbol && pd.iconCode && (
-              <div style={getStyle(pd.displayGray)} key={itemKey} className={`${baseClass} ${pd.symbol}`}>
+              <div style={getStyle(pd.displayGray)} className={`${baseClass} ${pd.symbol}`}>
                 <span className={pd.symbol}>{pd.iconCode}</span>
                 <p className={pd.type}>{pd.label}</p>
               </div>
             )}
 
             {pd.style && pd.lineCode && (
-              <div style={getStyle(pd.displayGray)} key={itemKey} className={baseClass}>
+              <div style={getStyle(pd.displayGray)} className={baseClass}>
                 <span>{pd.lineCode}</span>
                 <p>{pd.label}</p>
               </div>

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

@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendShape from '@cdc/core/components/LegendShape'
 import ConfigContext from '../../../ConfigContext'
-import _ from 'lodash'
 import './LegendGroup.styles.css'
 
 interface LegendGroup {

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

@@ -0,0 +1,88 @@
+import { scaleOrdinal } from '@visx/scale'
+import { describe, expect, it, vi } from 'vitest'
+import { createFormatLabels } from './createFormatLabels'
+import { ChartConfig } from '../../../types/ChartConfig'
+import { Label } from '../../../types/Label'
+
+const defaultLabels: Label[] = [
+  { datum: 'Series A', index: 0, text: 'Series A', value: '#aa0000' },
+  { datum: 'Series B', index: 1, text: 'Series B', value: '#00bb00' }
+]
+
+const buildConfig = (overrides: Partial<ChartConfig> = {}): ChartConfig =>
+  ({
+    visualizationType: 'Line',
+    visualizationSubType: 'regular',
+    general: {
+      palette: {
+        colorAssignmentMode: 'ordered'
+      }
+    },
+    legend: {},
+    smallMultiples: {
+      mode: 'by-series',
+      colorMode: 'same'
+    },
+    series: [
+      { dataKey: 'series_a', name: 'Series A', type: 'Line' },
+      { dataKey: 'series_b', name: 'Series B', type: 'Line' }
+    ],
+    runtime: {
+      seriesKeys: ['series_a', 'series_b'],
+      seriesLabels: {
+        series_a: 'Series A',
+        series_b: 'Series B'
+      },
+      seriesLabelsAll: ['Series A', 'Series B']
+    },
+    ...overrides
+  } as ChartConfig)
+
+const colorScale = scaleOrdinal({
+  domain: ['Series A', 'Series B'],
+  range: ['#aa0000', '#00bb00'],
+  unknown: null
+})
+
+const formatLabels = (config: ChartConfig) => createFormatLabels(config, [], [], colorScale, vi.fn())(defaultLabels)
+
+describe('createFormatLabels small multiples legend colors', () => {
+  it('uses the first color for by-series same-color legends by default', () => {
+    const labels = formatLabels(buildConfig())
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#aa0000'])
+  })
+
+  it('preserves assigned series colors for by-series same-color legends', () => {
+    const labels = formatLabels(
+      buildConfig({
+        general: {
+          palette: {
+            colorAssignmentMode: 'by-value',
+            colorAssignments: [
+              { key: 'series_a', color: '#aa0000' },
+              { key: 'series_b', color: '#00bb00' }
+            ]
+          }
+        } as any
+      })
+    )
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#00bb00'])
+  })
+
+  it('ignores stale assignments for by-series same-color legends', () => {
+    const labels = formatLabels(
+      buildConfig({
+        general: {
+          palette: {
+            colorAssignmentMode: 'by-value',
+            colorAssignments: [{ key: 'removed_series', color: '#00bb00' }]
+          }
+        } as any
+      })
+    )
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#aa0000'])
+  })
+})

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

@@ -13,6 +13,7 @@ import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributio
 import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
 import { buildForecastPaletteMappings } from '../../../helpers/buildForecastPaletteMappings'
 import { getFullColorPalette } from '../../../helpers/smallMultiplesHelpers'
+import { hasSeriesColorAssignmentOverrides } from '../../../helpers/colorAssignmentHelpers'
 import { FaStar } from 'react-icons/fa'
 import { Label } from '../../../types/Label'
 import { ColorScale, TransformedData } from '../../../types/ChartContext'
@@ -36,7 +37,11 @@ export const createFormatLabels =
 
     // Handle small multiples legend adjustments
     // by-series + same: all tiles use same color, legend should show one color
-    if (config.smallMultiples?.mode === 'by-series' && config.smallMultiples?.colorMode === 'same') {
+    if (
+      config.smallMultiples?.mode === 'by-series' &&
+      config.smallMultiples?.colorMode === 'same' &&
+      !hasSeriesColorAssignmentOverrides(config)
+    ) {
       const baseColor = colorScale?.range()?.[0]
       return defaultLabels.map((label, i) => ({
         ...label,

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest'
-import { createStyles, filterCircles } from './helpers'
+import { createStyles, filterCircles, createDataSegments } from './helpers'
 import { PreliminaryDataItem } from '../../types/ChartConfig'
 
 describe('LineChart helpers', () => {
@@ -180,6 +180,150 @@ describe('LineChart helpers', () => {
         expect(styles[2].strokeDasharray).toBe('5 5')
       })
     })
+
+    describe('with custom weight', () => {
+      it('should apply custom weight from preliminaryData item', () => {
+        const preliminaryDataWithWeight: PreliminaryDataItem[] = [
+          {
+            type: 'effect',
+            seriesKeys: ['COVID-19'],
+            column: 'Attribute',
+            value: 'Dotted',
+            style: 'Dashed Small',
+            label: 'COVID Dotted',
+            displayTooltip: true,
+            displayLegend: true,
+            displayTable: true,
+            symbol: '',
+            iconCode: '',
+            lineCode: '',
+            hideBarSymbol: false,
+            hideLineStyle: false,
+            circleSize: 6,
+            displayGray: false,
+            weight: 5 // Custom weight
+          }
+        ]
+
+        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' }
+        ]
+
+        const styles = createStyles({
+          preliminaryData: preliminaryDataWithWeight,
+          data,
+          stroke: '#000',
+          strokeWidth: 2, // Default weight
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        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)
+      })
+
+      it('should use default strokeWidth when preliminaryData has no weight', () => {
+        const preliminaryDataNoWeight: PreliminaryDataItem[] = [
+          {
+            type: 'effect',
+            seriesKeys: ['COVID-19'],
+            column: 'Attribute',
+            value: 'Dotted',
+            style: 'Dashed Small',
+            label: 'COVID Dotted',
+            displayTooltip: true,
+            displayLegend: true,
+            displayTable: true,
+            symbol: '',
+            iconCode: '',
+            lineCode: '',
+            hideBarSymbol: false,
+            hideLineStyle: false,
+            circleSize: 6,
+            displayGray: false
+            // No weight property
+          }
+        ]
+
+        const data = [{ Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' }]
+
+        const styles = createStyles({
+          preliminaryData: preliminaryDataNoWeight,
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles).toHaveLength(1)
+        // Should use default strokeWidth when no custom weight
+        expect(styles[0].strokeWidth).toBe(2)
+      })
+
+      it.each([
+        { weight: 5, expected: 5, label: 'applies a valid custom weight' },
+        { weight: 1, expected: 1, label: 'applies the minimum custom weight of 1' },
+        { weight: 9, expected: 9, label: 'applies the maximum custom weight of 9' },
+        { weight: 0.5, expected: 2, label: 'falls back to default for a weight below 1' },
+        { weight: 0, expected: 2, label: 'falls back to default for a weight of 0' },
+        { weight: -1, expected: 2, label: 'falls back to default for negative weight' },
+        { weight: '', expected: 2, label: 'falls back to default for empty string' },
+        { weight: 'abc', expected: 2, label: 'falls back to default for non-numeric weight' }
+      ])('$label', ({ weight, expected }) => {
+        const preliminaryData: PreliminaryDataItem[] = [
+          {
+            type: 'effect',
+            seriesKeys: ['COVID-19'],
+            column: 'Attribute',
+            value: 'Dotted',
+            style: 'Dashed Small',
+            label: 'COVID Dotted',
+            displayTooltip: true,
+            displayLegend: true,
+            displayTable: true,
+            symbol: '',
+            iconCode: '',
+            lineCode: '',
+            hideBarSymbol: false,
+            hideLineStyle: false,
+            circleSize: 6,
+            displayGray: false,
+            weight: weight as PreliminaryDataItem['weight']
+          }
+        ]
+
+        const data = [{ Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' }]
+
+        const styles = createStyles({
+          preliminaryData,
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles).toHaveLength(1)
+        expect(styles[0].strokeWidth).toBe(expected)
+      })
+    })
   })
 
   describe('filterCircles', () => {
@@ -244,6 +388,21 @@ describe('LineChart helpers', () => {
         expect(circles[1].isFilled).toBe(false)
       })
 
+      it('should skip open circles for nonnumeric values while preserving zero values', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: 'N/A', Attribute: 'Marked' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: null, Attribute: 'Marked' },
+          { Date: '10/19/2025', Category: 'COVID-19', Value: 0, Attribute: 'Marked' },
+          { Date: '10/26/2025', Category: 'COVID-19', Value: '12.3', Attribute: 'Marked' }
+        ]
+
+        const circles = filterCircles(circlesPreliminaryData, data, 'COVID-19', 'Category', 'Value')
+
+        expect(circles).toHaveLength(2)
+        expect(circles.map(circle => circle.data.Value)).toEqual([0, '12.3'])
+        expect(circles.every(circle => circle.isFilled === false)).toBe(true)
+      })
+
       it('should return empty array when no matches', () => {
         const circles = filterCircles(
           circlesPreliminaryData,
@@ -340,6 +499,76 @@ describe('LineChart helpers', () => {
         expect(circles[0].isFilled).toBe(true)
         expect(circles[0].size).toBe(6)
       })
+
+      it('should skip filled circles for nonnumeric values while preserving zero values', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'Influenza', Value: 'N/A', Attribute: 'Marked' },
+          { Date: '10/12/2025', Category: 'Influenza', Value: null, Attribute: 'Marked' },
+          { Date: '10/19/2025', Category: 'Influenza', Value: 0, Attribute: 'Marked' },
+          { Date: '10/26/2025', Category: 'Influenza', Value: '12.3', Attribute: 'Marked' }
+        ]
+
+        const circles = filterCircles(filledCirclesConfig, data, 'Influenza', 'Category', 'Value')
+
+        expect(circles).toHaveLength(2)
+        expect(circles.map(circle => circle.data.Value)).toEqual([0, '12.3'])
+      })
+    })
+  })
+
+  describe('createDataSegments', () => {
+    const mockColorScale = vi.fn(() => '#000')
+
+    const makeSuppression = (overrides: Partial<PreliminaryDataItem> = {}): PreliminaryDataItem => ({
+      type: 'suppression',
+      seriesKeys: ['COVID-19'],
+      column: '',
+      value: 'Suppressed',
+      style: 'Dashed Small',
+      label: 'Suppressed',
+      displayTooltip: true,
+      displayLegend: true,
+      displayTable: true,
+      symbol: '',
+      iconCode: '',
+      lineCode: '',
+      hideBarSymbol: false,
+      hideLineStyle: false,
+      circleSize: 6,
+      displayGray: false,
+      ...overrides
+    })
+
+    const suppressionData = [
+      { Date: '10/5/2025', 'COVID-19': '43.6' },
+      { Date: '10/12/2025', 'COVID-19': 'Suppressed' },
+      { Date: '10/19/2025', 'COVID-19': '42.6' }
+    ]
+
+    it('propagates the suppression weight onto the generated segment', () => {
+      const segments = createDataSegments({
+        data: suppressionData,
+        seriesKey: 'COVID-19',
+        preliminaryData: [makeSuppression({ weight: 5 })],
+        colorScale: mockColorScale
+      })
+
+      const suppressedSegments = segments.filter(segment => segment.style)
+      expect(suppressedSegments.length).toBeGreaterThan(0)
+      expect(suppressedSegments.every(segment => segment.weight === 5)).toBe(true)
+    })
+
+    it('leaves the segment weight undefined when no custom weight is set', () => {
+      const segments = createDataSegments({
+        data: suppressionData,
+        seriesKey: 'COVID-19',
+        preliminaryData: [makeSuppression()],
+        colorScale: mockColorScale
+      })
+
+      const suppressedSegments = segments.filter(segment => segment.style)
+      expect(suppressedSegments.length).toBeGreaterThan(0)
+      expect(suppressedSegments.every(segment => segment.weight === undefined)).toBe(true)
     })
   })
 })