@cdc/chart 4.26.4 → 4.26.5

package/src/components/HeatMap/tests/helpers.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildHeatMapData,
+  getHeatMapBucketPalette,
+  getHeatMapColorBucketCount,
+  getHeatMapColorScale,
+  getHeatMapDataGroupRanges
+} from '../helpers'
+import { type ChartConfig } from '../../../types/ChartConfig'
+
+describe('buildHeatMapData', () => {
+  it('aggregates duplicate x/series cells using numeric sum', () => {
+    const { columns, minValue, maxValue } = buildHeatMapData({
+      data: [
+        { month: 'Jan', Austin: 2, Boston: 4 },
+        { month: 'Jan', Austin: 3, Boston: 0 }
+      ],
+      xDataKey: 'month',
+      series: [
+        { dataKey: 'Austin', name: 'Austin' },
+        { dataKey: 'Boston', name: 'Boston' }
+      ],
+      xAxisType: 'categorical'
+    })
+
+    expect(columns).toHaveLength(1)
+    expect(columns[0].bins[0].value).toBe(5)
+    expect(columns[0].bins[0].sourceRows).toHaveLength(2)
+    expect(columns[0].bins[1].value).toBe(4)
+    expect(minValue).toBe(4)
+    expect(maxValue).toBe(5)
+  })
+
+  it('orders date-based x values in ascending order', () => {
+    const { columns } = buildHeatMapData({
+      data: [
+        { date: '2024-03-01', Austin: 1 },
+        { date: '2024-01-01', Austin: 2 },
+        { date: '2024-02-01', Austin: 3 }
+      ],
+      xDataKey: 'date',
+      series: [{ dataKey: 'Austin', name: 'Austin' }],
+      xAxisType: 'date'
+    })
+
+    expect(columns.map(column => column.key)).toEqual(['2024-01-01', '2024-02-01', '2024-03-01'])
+  })
+
+  it('creates empty cells for missing x/series combinations', () => {
+    const { columns, rowLabels } = buildHeatMapData({
+      data: [
+        { month: 'Jan', Austin: 5 },
+        { month: 'Feb', Boston: 4 }
+      ],
+      xDataKey: 'month',
+      series: [
+        { dataKey: 'Austin', name: 'Austin' },
+        { dataKey: 'Boston', name: 'Boston' }
+      ],
+      xAxisType: 'categorical'
+    })
+
+    expect(rowLabels).toEqual(['Austin', 'Boston'])
+    expect(columns).toHaveLength(2)
+    expect(columns[0].bins[1].value).toBeNull()
+    expect(columns[1].bins[0].value).toBeNull()
+  })
+
+  it('builds series-driven rows when data series are provided', () => {
+    const { columns, rowLabels, minValue, maxValue } = buildHeatMapData({
+      data: [
+        { month: 'Jan', Austin: 12, Boston: 30 },
+        { month: 'Feb', Austin: 18, Boston: 40 }
+      ],
+      xDataKey: 'month',
+      series: [
+        { dataKey: 'Austin', name: 'Austin' },
+        { dataKey: 'Boston', name: 'Boston' }
+      ],
+      seriesLabels: { Austin: 'Austin', Boston: 'Boston' },
+      xAxisType: 'categorical'
+    })
+
+    expect(rowLabels).toEqual(['Austin', 'Boston'])
+    expect(columns).toHaveLength(2)
+    expect(columns[0].bins[0].value).toBe(12)
+    expect(columns[0].bins[1].value).toBe(30)
+    expect(columns[1].bins[0].value).toBe(18)
+    expect(columns[1].bins[1].value).toBe(40)
+    expect(minValue).toBe(12)
+    expect(maxValue).toBe(40)
+  })
+
+  it('keeps non-calendar categories in source order for average age by city', () => {
+    const { columns, rowLabels, minValue, maxValue } = buildHeatMapData({
+      data: [
+        { communityType: 'Urban Core', Atlanta: 34, Chicago: 36, Phoenix: 38 },
+        { communityType: 'Suburban', Atlanta: 41, Chicago: 39, Phoenix: 42 },
+        { communityType: 'Rural', Atlanta: 46, Chicago: 44, Phoenix: 49 }
+      ],
+      xDataKey: 'communityType',
+      series: [
+        { dataKey: 'Atlanta', name: 'Atlanta' },
+        { dataKey: 'Chicago', name: 'Chicago' },
+        { dataKey: 'Phoenix', name: 'Phoenix' }
+      ],
+      xAxisType: 'categorical'
+    })
+
+    expect(columns.map(column => column.key)).toEqual(['Urban Core', 'Suburban', 'Rural'])
+    expect(rowLabels).toEqual(['Atlanta', 'Chicago', 'Phoenix'])
+    expect(columns[0].bins.map(bin => bin.value)).toEqual([34, 36, 38])
+    expect(columns[2].bins[2].value).toBe(49)
+    expect(minValue).toBe(34)
+    expect(maxValue).toBe(49)
+  })
+})
+
+describe('HeatMap data grouping', () => {
+  const buildPaletteConfig = (colorBucketCount?: unknown) =>
+    ({
+      general: {
+        palette: {
+          customColors: ['#000000', '#ffffff']
+        }
+      },
+      heatmap: {
+        colorBucketCount
+      }
+    } as ChartConfig)
+
+  it('clamps HeatMap data grouping to the supported range', () => {
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(undefined))).toBe(9)
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(0))).toBe(1)
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(-4))).toBe(1)
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(12))).toBe(9)
+  })
+
+  it('supports one bucket as the minimum heatmap color count', () => {
+    const colorScale = getHeatMapColorScale(buildPaletteConfig(1), 0, 100)
+
+    expect(getHeatMapBucketPalette(buildPaletteConfig(1))).toHaveLength(1)
+    expect(colorScale(1)).toBe(colorScale(99))
+  })
+
+  it('uses the configured number of data groups for heatmap cell colors', () => {
+    const colorScale = getHeatMapColorScale(buildPaletteConfig(5), 0, 100)
+    const bucketColors = [0, 20, 40, 60, 80].map(value => colorScale(value))
+
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(5))).toBe(5)
+    expect(getHeatMapBucketPalette(buildPaletteConfig(5))).toHaveLength(5)
+    expect(new Set(bucketColors)).toHaveLength(5)
+    expect(colorScale(1)).toBe(colorScale(19))
+  })
+
+  it('builds data group legend ranges from the heatmap grouping domain', () => {
+    const ranges = getHeatMapDataGroupRanges(buildPaletteConfig(5), 0, 1, value => value.toFixed(1))
+
+    expect(ranges.map(range => range.label)).toEqual([
+      '0.0\u20130.2',
+      '0.2\u20130.4',
+      '0.4\u20130.6',
+      '0.6\u20130.8',
+      '0.8\u20131.0'
+    ])
+  })
+})

package/src/components/LineChart/components/LineChart.BumpCircle.tsx

@@ -1,9 +1,11 @@
-import { useState } from 'react'
+import { useContext } from 'react'
 import { Group } from '@visx/group'
-import { type Column } from '@cdc/core/types/Column'
 import React from 'react'
 import { type ChartConfig } from '../../../types/ChartConfig'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import ConfigContext from '../../../ConfigContext'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { buildBumpChartTooltipHtml } from '../../../helpers/bumpChartTooltip'
 
 type LineChartBumpCircleProp = {
   config: ChartConfig
@@ -15,17 +17,15 @@ type LineChartBumpCircleProp = {
 
 const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
   const { config, xScale, yScale, parseDate, yAxisWidth } = props
+  const { colorScale, formatDate, formatTooltipsDate } = useContext(ConfigContext)
 
   // get xScale and yScale...
   if (!config?.runtime?.series) return
 
   const handleX = xValue => {
-    if (config.xAxis.type === 'date') {
+    if (isDateScale(config.xAxis)) {
       return parseDate(xValue).getTime()
     }
-    if (config.xAxis.type === 'date-time') {
-      return new Date(xValue)
-    }
     if (config.xAxis.type === 'categorical') {
       return xValue
     }
@@ -35,20 +35,7 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
     return xScale.bandwidth ? xScale.bandwidth() / 2 + Number(xValue) : Number(xValue)
   }
 
-  const getListItems = dataRow => {
-    return Object.values(config.columns)
-      ?.filter(column => column.tooltips)
-      .map(column => {
-        const label = column.label || column.name
-        return `
-        <li className='tooltip-body'>
-          <strong>${label}</strong>: ${dataRow[column.name]}
-        </li>`
-      })
-      .join(' ')
-  }
-
-  const getTooltip = dataRow => `<ul> ${getListItems(dataRow)} </ul>`
+  const tooltipId = `cdc-open-viz-tooltip-${config.runtime.uniqueId}-bump`
 
   const circles = config.runtime?.series.map(series => {
     return config.data.map((d, dataIndex) => {
@@ -61,8 +48,18 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
               <>
                 <circle
                   key={`bump-circle-${series_dataKey}-${dataIndex}`}
-                  data-tooltip-html={getTooltip(d)}
-                  data-tooltip-id={`bump-chart`}
+                  data-tooltip-html={buildBumpChartTooltipHtml({
+                    config,
+                    colorScale,
+                    dataRow: d,
+                    series,
+                    helpers: {
+                      formatDate,
+                      formatTooltipsDate,
+                      parseDate
+                    }
+                  })}
+                  data-tooltip-id={tooltipId}
                   r={10}
                   cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))}
                   cy={Number(yScale(series_dataKey))}

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

@@ -80,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 =