@cdc/chart 4.26.3 → 4.26.5

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

@@ -0,0 +1,345 @@
+import { describe, it, expect, vi } from 'vitest'
+import { createStyles, filterCircles } from './helpers'
+import { PreliminaryDataItem } from '../../types/ChartConfig'
+
+describe('LineChart helpers', () => {
+  describe('createStyles', () => {
+    const mockHandleLineType = vi.fn((style: string) => {
+      switch (style) {
+        case 'Dashed Small':
+          return '5 5'
+        case 'Dashed Medium':
+          return '10 5'
+        case 'Dashed Large':
+          return '15 5'
+        default:
+          return 0
+      }
+    })
+
+    const basePreliminaryData: 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
+      },
+      {
+        type: 'effect',
+        seriesKeys: ['Influenza'],
+        column: 'Attribute',
+        value: 'Dotted',
+        style: 'Dashed Medium',
+        label: 'Flu Dotted',
+        displayTooltip: true,
+        displayLegend: true,
+        displayTable: true,
+        symbol: '',
+        iconCode: '',
+        lineCode: '',
+        hideBarSymbol: false,
+        hideLineStyle: false,
+        circleSize: 6,
+        displayGray: false
+      }
+    ]
+
+    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' }
+      ]
+
+      it('should apply dashed style when Attribute matches effect value', () => {
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData,
+          data: dynamicCategoryData,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19', // Runtime series key from Category column
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value' // Data value column
+        })
+
+        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')
+      })
+
+      it('should apply solid style when no effect matches', () => {
+        const dataNoEffects = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: '' }
+        ]
+
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData,
+          data: dataNoEffects,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles).toHaveLength(2)
+        expect(styles[0].strokeDasharray).toBe(0)
+        expect(styles[1].strokeDasharray).toBe(0)
+      })
+
+      it('should only match effects for the correct series', () => {
+        // Using Influenza series key with COVID data should not match
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData,
+          data: dynamicCategoryData,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'Influenza', // Different series
+          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)
+      })
+    })
+
+    describe('with multi-column data (standard format)', () => {
+      const multiColumnPreliminaryData: PreliminaryDataItem[] = [
+        {
+          type: 'effect',
+          seriesKeys: ['COVID-19'],
+          column: 'COVID-19-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
+        }
+      ]
+
+      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' }
+      ]
+
+      it('should apply dashed style when attribute column matches', () => {
+        const styles = createStyles({
+          preliminaryData: multiColumnPreliminaryData,
+          data: multiColumnData,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: '', // No dynamic category
+          originalSeriesKey: ''
+        })
+
+        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')
+      })
+    })
+  })
+
+  describe('filterCircles', () => {
+    const circlesPreliminaryData: PreliminaryDataItem[] = [
+      {
+        type: 'effect',
+        seriesKeys: ['COVID-19'],
+        column: 'Attribute',
+        value: 'Marked',
+        style: 'Open Circles',
+        label: 'COVID Marked',
+        displayTooltip: true,
+        displayLegend: true,
+        displayTable: true,
+        symbol: '',
+        iconCode: '',
+        lineCode: '',
+        hideBarSymbol: false,
+        hideLineStyle: false,
+        circleSize: 8,
+        displayGray: false
+      },
+      {
+        type: 'effect',
+        seriesKeys: ['Influenza'],
+        column: 'Attribute',
+        value: 'Marked',
+        style: 'Filled Circles',
+        label: 'Flu Marked',
+        displayTooltip: true,
+        displayLegend: true,
+        displayTable: true,
+        symbol: '',
+        iconCode: '',
+        lineCode: '',
+        hideBarSymbol: false,
+        hideLineStyle: false,
+        circleSize: 6,
+        displayGray: false
+      }
+    ]
+
+    describe('with dynamic category data', () => {
+      const dynamicData = [
+        { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Marked' },
+        { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: '' },
+        { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: 'Marked' }
+      ]
+
+      it('should find open circles for matching dynamic category data', () => {
+        const circles = filterCircles(
+          circlesPreliminaryData,
+          dynamicData,
+          'COVID-19', // Runtime series key
+          'Category', // Dynamic category column
+          'Value' // Value column for data existence check
+        )
+
+        expect(circles).toHaveLength(2) // Two data points with Attribute='Marked'
+        expect(circles[0].isFilled).toBe(false) // Open circles
+        expect(circles[0].size).toBe(8)
+        expect(circles[1].isFilled).toBe(false)
+      })
+
+      it('should return empty array when no matches', () => {
+        const circles = filterCircles(
+          circlesPreliminaryData,
+          dynamicData,
+          'RSV', // Series not in preliminaryData
+          'Category',
+          'Value'
+        )
+
+        expect(circles).toHaveLength(0)
+      })
+    })
+
+    describe('with multi-column data (standard format)', () => {
+      const multiColumnCirclesConfig: PreliminaryDataItem[] = [
+        {
+          type: 'effect',
+          seriesKeys: ['COVID-19'],
+          column: 'COVID-19-Attribute',
+          value: 'Marked',
+          style: 'Open Circles',
+          label: 'COVID Marked',
+          displayTooltip: true,
+          displayLegend: true,
+          displayTable: true,
+          symbol: '',
+          iconCode: '',
+          lineCode: '',
+          hideBarSymbol: false,
+          hideLineStyle: false,
+          circleSize: 8,
+          displayGray: false
+        }
+      ]
+
+      const multiColumnData = [
+        { Date: '10/5/2025', 'COVID-19': '43.6', 'COVID-19-Attribute': 'Marked' },
+        { Date: '10/12/2025', 'COVID-19': '40.7', 'COVID-19-Attribute': '' },
+        { Date: '10/19/2025', 'COVID-19': '42.6', 'COVID-19-Attribute': 'Marked' }
+      ]
+
+      it('should find circles in standard multi-column format', () => {
+        const circles = filterCircles(
+          multiColumnCirclesConfig,
+          multiColumnData,
+          'COVID-19'
+          // No dynamicCategory or originalSeriesKey - standard mode
+        )
+
+        expect(circles).toHaveLength(2)
+        expect(circles[0].isFilled).toBe(false)
+        expect(circles[0].size).toBe(8)
+      })
+
+      it('should be backwards compatible with 3-argument call', () => {
+        // Existing code that doesn't pass dynamicCategory should still work
+        const circles = filterCircles(multiColumnCirclesConfig, multiColumnData, 'COVID-19')
+
+        expect(circles).toHaveLength(2)
+      })
+    })
+
+    describe('filled circles', () => {
+      const filledCirclesConfig: PreliminaryDataItem[] = [
+        {
+          type: 'effect',
+          seriesKeys: ['Influenza'],
+          column: 'Attribute',
+          value: 'Marked',
+          style: 'Filled Circles',
+          label: 'Flu Marked',
+          displayTooltip: true,
+          displayLegend: true,
+          displayTable: true,
+          symbol: '',
+          iconCode: '',
+          lineCode: '',
+          hideBarSymbol: false,
+          hideLineStyle: false,
+          circleSize: 6,
+          displayGray: false
+        }
+      ]
+
+      it('should find filled circles for dynamic category data', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'Influenza', Value: '23.1', Attribute: 'Marked' },
+          { Date: '10/12/2025', Category: 'Influenza', Value: '31.7', Attribute: '' }
+        ]
+
+        const circles = filterCircles(filledCirclesConfig, data, 'Influenza', 'Category', 'Value')
+
+        expect(circles).toHaveLength(1)
+        expect(circles[0].isFilled).toBe(true)
+        expect(circles[0].size).toBe(6)
+      })
+    })
+  })
+})

package/src/components/LineChart/helpers.ts

@@ -15,17 +15,18 @@ export const createStyles = (props: StyleProps): Style[] => {
     originalSeriesKey
   } = props
 
-  const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
   const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(
     pd => pd.seriesKeys?.length && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect'
   )
   const isEffectLine = (pd, dataPoint) => {
     if (dynamicCategory) {
+      // In dynamic category mode, check the attribute column (pd.column) for the effect marker
+      // seriesKey is the runtime series key derived from the category column
       return (
         pd.type === 'effect' &&
         pd.style !== 'Open Circles' &&
         pd.seriesKeys.includes(seriesKey) &&
-        String(dataPoint[dynamicSeriesKey]) === String(pd.value)
+        dataPoint[pd.column] === pd.value
       )
     } else {
       return (
@@ -67,8 +68,17 @@ export const createStyles = (props: StyleProps): Style[] => {
 export const filterCircles = (
   preliminaryData: PreliminaryDataItem[],
   data: DataItem[],
-  seriesKey: string
+  seriesKey: string,
+  dynamicCategory?: string,
+  originalSeriesKey?: string
 ): DataItem[] => {
+  // In dynamic category mode:
+  // - seriesKey is the runtime series key for matching against seriesKeys
+  // - originalSeriesKey is the data value column (e.g., "Value") for checking if data exists
+  // In standard mode:
+  // - seriesKey is used for both purposes
+  const valueKey = dynamicCategory ? originalSeriesKey : seriesKey
+
   // Filter and map preliminaryData to get circlesFiltered
   const circlesFiltered = preliminaryData
     ?.filter(item => item.style.includes('Circles') && item.type === 'effect' && item.seriesKeys?.length)
@@ -86,7 +96,7 @@ export const filterCircles = (
       if (
         item[fc.column] === fc.value &&
         fc.seriesKeys.includes(seriesKey) &&
-        item[seriesKey] &&
+        item[valueKey] &&
         fc.style === 'Open Circles'
       ) {
         const result = {
@@ -99,7 +109,7 @@ export const filterCircles = (
       if (
         (!fc.value || item[fc.column] === fc.value) &&
         fc.seriesKeys.includes(seriesKey) &&
-        item[seriesKey] &&
+        item[valueKey] &&
         fc.style === 'Filled Circles'
       ) {
         const result = {

package/src/components/LineChart/index.tsx

@@ -36,6 +36,7 @@ const LineChart = (props: LineChartProps) => {
     xScale,
     yMax,
     yScale,
+    yAxisWidth,
     } = props
 
   // prettier-ignore
@@ -55,7 +56,7 @@ const LineChart = (props: LineChartProps) => {
 
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={Number(config.runtime.yAxis.size)} className='line-chart-group'>
+      <Group left={yAxisWidth} className='line-chart-group'>
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
           const seriesData = config.runtime.series.find(item => item.dataKey === seriesKey)
@@ -79,7 +80,13 @@ const LineChart = (props: LineChartProps) => {
           const _data = seriesData.dynamicCategory
             ? data.filter(d => d[seriesData.dynamicCategory] === seriesKey)
             : data
-          const circleData = filterCircles(config?.preliminaryData, tableData, _seriesKey)
+          const circleData = filterCircles(
+            config?.preliminaryData,
+            tableData,
+            seriesKey,
+            seriesData.dynamicCategory,
+            _seriesKey
+          )
 
           // Prepare sorted data for line and area rendering
           const sortedData =
@@ -264,7 +271,7 @@ const LineChart = (props: LineChartProps) => {
                     }
                     styles={createStyles({
                       preliminaryData: config.preliminaryData,
-                      data: tableData,
+                      data: _data,
                       stroke: colorScale(config.runtime.seriesLabels[seriesKey]),
                       strokeWidth: seriesData.weight || 2,
                       handleLineType,
@@ -496,7 +503,7 @@ const LineChart = (props: LineChartProps) => {
           </Text>
         )}
       </Group>
-      <Group left={Number(config.runtime.yAxis.size)} className='glyph-tooltip-group'>
+      <Group left={yAxisWidth} className='glyph-tooltip-group'>
         <Group key={`tooltip-group`} display={'block'}>
           {/* tooltips */}
           <Bar
@@ -543,7 +550,13 @@ const LineChart = (props: LineChartProps) => {
         </Group>
       </Group>
       {config.visualizationType === 'Bump Chart' && (
-        <LineChartBumpCircle config={config} xScale={xScale} yScale={yScale} />
+        <LineChartBumpCircle
+          config={config}
+          xScale={xScale}
+          yScale={yScale}
+          parseDate={parseDate}
+          yAxisWidth={yAxisWidth}
+        />
       )}
     </ErrorBoundary>
   )

package/src/components/LinearChart/VisualizationRenderer.tsx

@@ -76,13 +76,16 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
       )}
 
       {/* Paired Bar Chart */}
-      {visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={parentWidth} width={xMax} height={yMax} />}
+      {visualizationType === 'Paired Bar' && (
+        <PairedBarChart originalWidth={parentWidth} width={xMax} height={yMax} yAxisWidth={yAxisWidth} />
+      )}
 
       {/* Scatter Plot */}
       {visualizationType === 'Scatter Plot' && (
         <ScatterPlot
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
           getXAxisData={getXAxisData}
           getYAxisData={getYAxisData}
           xMax={xMax}
@@ -102,6 +105,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           yScale={yScale}
           xMax={xMax}
           yMax={yMax}
+          yAxisWidth={yAxisWidth}
           synchronizedXValue={synchronizedXValue}
           showTooltip={showTooltip}
           handleTooltipMouseOff={handleTooltipMouseOff}
@@ -115,6 +119,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           yScale={yScale}
           xMax={xMax}
           yMax={yMax}
+          yAxisWidth={yAxisWidth}
           handleTooltipMouseOver={handleTooltipMouseOver}
           handleTooltipMouseOff={handleTooltipMouseOff}
           tooltipData={tooltipData}
@@ -132,6 +137,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           max={max}
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
         />
       )}
 
@@ -156,6 +162,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           yScale={yScale}
           yMax={yMax}
           xMax={xMax}
+          yAxisWidth={yAxisWidth}
           chartRef={svgRef}
           width={xMax}
           height={yMax}
@@ -193,6 +200,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
         <LineChart
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
           getXAxisData={getXAxisData}
           getYAxisData={getYAxisData}
           xMax={xMax}
@@ -211,6 +219,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
         <LineChart
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
           getXAxisData={getXAxisData}
           getYAxisData={getYAxisData}
           xMax={xMax}
@@ -229,6 +238,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           tooltipData={tooltipData}
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
           width={xMax}
           height={yMax}
           xScaleNoPadding={xScaleNoPadding}