@cdc/chart 4.25.6 → 4.25.8

package/src/components/Brush/BrushController.tsx

@@ -0,0 +1,71 @@
+import { useState, useEffect, useContext, useRef } from 'react'
+import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
+import BrushChart from './BrushChart'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { BrushRef } from './types'
+
+const BrushController = ({ yMax, xMax }) => {
+  const { tableData, config, parseDate, dashboardConfig, formatDate } = useContext(ConfigContext)
+  const [brushHandleProps, setBrushHandleProps] = useState({
+    startPos: 0,
+    endPos: 0,
+    startValue: '',
+    endValue: '',
+    xMax: xMax
+  })
+  const dataKey = config.xAxis.dataKey
+  const [brushKey, setBrushKey] = useState(0)
+  const dispatch = useContext(ChartDispatchContext)
+  const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
+  const isDashboardFilters = sharedFilters?.length > 0
+  const brushRef = useRef<BrushRef | null>(null)
+
+  const [brushPosition, setBrushPosition] = useState({
+    start: { x: 0 },
+    end: { x: xMax }
+  })
+
+  const handleBrushChange = (bounds: any) => {
+    if (!bounds) return dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
+    const filteredValues = bounds?.xValues?.filter(val => val !== undefined)
+    if (filteredValues?.length === 0) dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
+    const selected = bounds?.xValues || []
+
+    const filteredData = tableData.filter(row => selected.includes(row[dataKey]))
+    const endValue = filteredValues
+      .slice()
+      .reverse()
+      .find(item => item !== undefined)
+    const startValue = filteredValues.find(item => item !== undefined)
+    const formatIfDate = value => (isDateScale(config.runtime.xAxis) ? formatDate(parseDate(value)) : value)
+
+    setBrushHandleProps(prev => ({
+      ...prev,
+      startPos: brushRef.current?.state.start.x,
+      endPos: brushRef.current?.state.end.x,
+      endValue: formatIfDate(endValue),
+      startValue: formatIfDate(startValue)
+    }))
+    dispatch({ type: 'SET_BRUSH_DATA', payload: filteredData })
+  }
+
+  // whenever your other filters change:
+  useEffect(() => {
+    setBrushPosition({ start: { x: 0 }, end: { x: xMax } })
+    dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
+    setBrushKey(k => k + 1)
+  }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
+
+  return (
+    <BrushChart
+      brushRef={brushRef}
+      brushHandleProps={brushHandleProps}
+      xMax={xMax}
+      yMax={yMax}
+      brushPosition={brushPosition}
+      onBrushChange={handleBrushChange}
+      brushKey={brushKey}
+    />
+  )
+}
+export default BrushController

package/src/components/Brush/types.tsx

@@ -0,0 +1,8 @@
+export type BrushRef = {
+  reset: () => void
+  state: {
+    start: { x: number; y: number }
+    end: { x: number; y: number }
+    isBrushing: boolean
+  }
+}

package/src/components/BrushChart.tsx

@@ -120,7 +120,7 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
       svg.call(brushHandle, selection, formattedStartDate, formattedEndDate)
 
       const payload = {
-        active: config.brush.active,
+        active: config.xAxis.brushActive,
         isBrushing: isUserBrushing,
         data: finalData
       }

package/src/components/EditorPanel/EditorPanel.tsx

@@ -20,6 +20,7 @@ import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
 import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import MultiSelect from '@cdc/core/components/MultiSelect'
 import { viewports } from '@cdc/core/helpers/getViewport'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
@@ -109,7 +110,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
     let preliminaryData = config.preliminaryData ? [...config.preliminaryData] : []
     const defaultValues = {
       type: defaultType,
-      seriesKey: '',
+      seriesKeys: [],
       label: 'Suppressed',
       column: '',
       value: '',
@@ -159,7 +160,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
               displayTable,
               displayTooltip,
               label,
-              seriesKey,
+              seriesKeys,
               style,
               symbol,
               type,
@@ -384,14 +385,18 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
                   </>
                 ) : (
                   <>
-                    <Select
-                      value={seriesKey}
-                      initial='Select'
-                      fieldName='seriesKey'
-                      label='ASSOCIATE TO SERIES'
-                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                      options={config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys}
-                    />
+                    <label>
+                      <span className='edit-label'>ASSOCIATE TO THESE SERIES</span>
+                      <MultiSelect
+                        fieldName='seriesKeys'
+                        updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                        options={(config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys).map(c => ({
+                          label: c,
+                          value: c
+                        }))}
+                        selected={seriesKeys}
+                      />
+                    </label>
                     <Select
                       value={column}
                       initial='Select'
@@ -1193,7 +1198,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   if (isDebug && config?.series?.length === 0) {
     let setdatacol = setDataColumn()
     if (setdatacol !== '') addNewSeries(setdatacol)
-    if (isDebug) console.error('### COVE DEBUG: Chart: Setting default datacol=', setdatacol) // eslint-disable-line
+    if (isDebug) console.log('### COVE DEBUG: Chart: Setting default datacol=', setdatacol) // eslint-disable-line
   }
 
   const chartsWithOptions = [
@@ -2926,9 +2931,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
                       {visHasBrushChart() && (
                         <CheckBox
-                          value={config.brush.active}
-                          section='brush'
-                          fieldName='active'
+                          value={config.xAxis.brushActive}
+                          section='xAxis'
+                          fieldName='brushActive'
                           label='Brush Slider '
                           updateField={updateFieldDeprecated}
                           tooltip={

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -67,8 +67,8 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
         config.xAxis.type === 'date'
           ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime()
           : config.xAxis.type === 'categorical'
-          ? '1/15/2016'
-          : '',
+            ? '1/15/2016'
+            : '',
       yKey: '',
       dx: 20,
       dy: -20,

package/src/components/EditorPanel/components/Panels/Panel.General.tsx

@@ -131,7 +131,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={Object.keys(approvedCurveTypes)}
           />
         )}
-        {visualizationType === 'Bar' && (
+        {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && (
           <Select
             value={config.orientation || 'vertical'}
             fieldName='orientation'
@@ -178,7 +178,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={['standard', 'shallow', 'finger']}
           />
         )}
-        {visualizationType === 'Bar' && config.orientation === 'horizontal' && (
+        {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && config.orientation === 'horizontal' && (
           <Select
             value={config.yAxis.labelPlacement || 'Below Bar'}
             section='yAxis'

package/src/components/EditorPanel/components/Panels/Panel.Series.tsx

@@ -281,6 +281,7 @@ const SeriesDropdownConfidenceInterval = props => {
   const { config, updateConfig } = useContext(ConfigContext)
   const { series, index } = props
   const { getColumns } = useContext(SeriesContext)
+
   if (series.type !== 'Forecasting') return
 
   return (
@@ -289,18 +290,6 @@ const SeriesDropdownConfidenceInterval = props => {
       <fieldset>
         <Accordion allowZeroExpanded>
           {series?.confidenceIntervals?.map((ciGroup, ciIndex) => {
-            const showInTooltip = ciGroup.showInTooltip ? ciGroup.showInTooltip : false
-
-            const updateShowInTooltip = (e, seriesIndex, ciIndex) => {
-              e.preventDefault()
-              let copiedSeries = [...config.series]
-              copiedSeries[seriesIndex].confidenceIntervals[ciIndex].showInTooltip = !showInTooltip
-              updateConfig({
-                ...config,
-                series: copiedSeries
-              })
-            }
-
             return (
               <AccordionItem className='series-item series-item--chart' key={`${ciIndex}`}>
                 <AccordionItemHeading className='series-item__title'>
@@ -312,6 +301,7 @@ const SeriesDropdownConfidenceInterval = props => {
                         onClick={e => {
                           e.preventDefault()
                           const copiedIndex = [...config.series[index].confidenceIntervals]
+
                           copiedIndex.splice(ciIndex, 1)
                           const copyOfSeries = [...config.series] // copy the entire series array
                           copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: [...copiedIndex] }
@@ -327,28 +317,6 @@ const SeriesDropdownConfidenceInterval = props => {
                   </>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <div className='input-group'>
-                    <label htmlFor='showInTooltip'>Show In Tooltip</label>
-                    <div
-                      className={'cove-input__checkbox--small'}
-                      onClick={e => updateShowInTooltip(e, index, ciIndex)}
-                    >
-                      <div
-                        className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`}
-                        style={{ backgroundColor: '' }}
-                      >
-                        {showInTooltip && <Check className='' style={{ fill: '#025eaa' }} />}
-                      </div>
-                      <input
-                        className='cove-input--hidden'
-                        type='checkbox'
-                        name={'showInTooltip'}
-                        checked={showInTooltip ? showInTooltip : false}
-                        readOnly
-                      />
-                    </div>
-                  </div>
-
                   <InputSelect
                     initial='Select an option'
                     value={

package/src/components/Forecasting/{Forecasting.jsx → Forecasting.tsx}

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react'
-
+import { replace } from 'lodash'
 // cdc
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPalettes'
+import { getBridgedData } from '../../helpers/getBridgedData'
 
 // visx & d3
 import { curveMonotoneX } from '@visx/curve'
@@ -11,7 +12,7 @@ import { Bar, Area, LinePath } from '@visx/shape'
 import { Group } from '@visx/group'
 
 const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
-  const { transformedData: data, rawData, config, seriesHighlight } = useContext(ConfigContext)
+  const { transformedData: data, rawData, config, seriesHighlight, parseDate } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
   const DEBUG = false
 
@@ -23,12 +24,17 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
             if (!group || !group.stages) return false
             return group.stages.map((stage, stageIndex) => {
               const { behavior } = legend
-              const groupData = rawData.filter(d => d[group.stageColumn] === stage.key)
-              let transparentArea = behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stage.key) === -1
-              let displayArea = behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stage.key) !== -1
+              let transparentArea =
+                behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stage.key) === -1
+              let displayArea =
+                behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stage.key) !== -1
+              const bridgedData = getBridgedData(stage.key, group.stageColumn, rawData)
 
               return (
-                <Group className={`forecasting-areas-combo-${index}`} key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}-${index}`}>
+                <Group
+                  className={`forecasting-areas-combo-${index}`}
+                  key={`forecasting-areas--stage-${replace(stage.key, / /g, '—')}-${index}`}
+                >
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
                     const palette = sequentialPalettes[stage.color] || colorPalettesChart[stage.color] || false
 
@@ -44,13 +50,19 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
 
                     if (ciGroup.high === '' || ciGroup.low === '') return
                     return (
-                      <Group key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}--group-${stageIndex}-${ciGroupIndex}`}>
+                      <Group
+                        key={`forecasting-areas--stage-${replace(
+                          stage.key,
+                          / /g,
+                          '—'
+                        )}--group-${stageIndex}-${ciGroupIndex}`}
+                      >
                         {/* prettier-ignore */}
                         <Area
                           curve={curveMonotoneX}
-                          data={groupData}
+                          data={bridgedData}
                           fill={getFill()}
-                          opacity={transparentArea ? 0.1 : .5}
+                          opacity={transparentArea? 0.1 : 0.5 }
                           x={d => xScale(Date.parse(d[xAxis.dataKey]))}
                           y0={d => yScale(d[ciGroup.low])}
                           y1={d => yScale(d[ciGroup.high])}
@@ -59,10 +71,10 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
                         {ciGroupIndex === 0 && (
                           <>
                             {/* prettier-ignore */}
-                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
+                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
 
                             {/* prettier-ignore */}
-                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
+                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
                           </>
                         )}
                       </Group>
@@ -73,7 +85,15 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
             })
           })}
           <Group key='tooltip-hover-section'>
-            <Bar key={'bars'} width={Number(width)} height={Number(height)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
+            <Bar
+              key={'bars'}
+              width={Number(width)}
+              height={Number(height)}
+              fill={DEBUG ? 'red' : 'transparent'}
+              fillOpacity={0.05}
+              onMouseMove={e => handleTooltipMouseOver(e, data)}
+              onMouseOut={handleTooltipMouseOff}
+            />
           </Group>
         </Group>
       </ErrorBoundary>

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

@@ -17,6 +17,7 @@ import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import LegendLineShape from './LegendLine.Shape'
 import LegendGroup from './LegendGroup'
 import { getSeriesWithData } from '../../helpers/dataHelpers'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 const LEGEND_PADDING = 36
 
@@ -32,6 +33,7 @@ export interface LegendProps {
   skipId: string
   dimensions: DimensionsType // for responsive width legend
   transformedData: any
+  interactionLabel: string
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
@@ -47,7 +49,8 @@ const Legend: React.FC<LegendProps> = forwardRef(
       formatLabels,
       skipId = 'legend',
       dimensions,
-      transformedData: data
+      transformedData: data,
+      interactionLabel = ''
     },
     ref
   ) => {
@@ -137,11 +140,23 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           onKeyDown={e => {
                             if (e.key === 'Enter') {
                               e.preventDefault()
+                              publishAnalyticsEvent(
+                                `chart_legend_item_toggled--${legend.behavior}-mode`,
+                                'keydown',
+                                `${interactionLabel}|${label.text}`,
+                                'chart'
+                              )
                               highlight(label)
                             }
                           }}
                           onClick={e => {
                             e.preventDefault()
+                            publishAnalyticsEvent(
+                              `chart_legend_item_toggled--${legend.behavior}-mode`,
+                              'click',
+                              `${interactionLabel}|${label.text}`,
+                              'chart'
+                            )
                             highlight(label)
                           }}
                           role='button'

package/src/components/Legend/Legend.tsx

@@ -21,7 +21,8 @@ const Legend = forwardRef((props, ref) => {
     transformedData
   } = useContext(ConfigContext)
   if (!config.legend) return null
-  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
+  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default
+  const { interactionLabel } = props
 
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
@@ -40,6 +41,7 @@ const Legend = forwardRef((props, ref) => {
         handleShowAll={handleShowAll}
         currentViewport={currentViewport}
         formatLabels={createLegendLabels}
+        interactionLabel={interactionLabel}
       />
     </Fragment>
   )

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

@@ -83,6 +83,7 @@ const LegendGroup = ({ formatLabels }) => {
                         }}
                         key={`legend-item-${i}`}
                         tabIndex={0}
+                        role='button'
                       >
                         <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={label.value} />
                         <LegendLabel align='left' margin='0'>

package/src/components/Legend/helpers/index.ts

@@ -19,9 +19,9 @@ export const getMarginTop = (isLegendBottom, config) => {
   if (!isLegendBottom) {
     return '0px'
   }
-  if (isLegendBottom && config.brush.active && !config.legend.hide) {
+  if (isLegendBottom && config.xAxis.brushActive && !config.legend.hide) {
     const additiolMargin = 25
-    return `${DEFAULT_MARGIN_TOP + config.brush.height + additiolMargin}px`
+    return `${DEFAULT_MARGIN_TOP + config.brush?.height + additiolMargin}px`
   } else {
     return `${DEFAULT_MARGIN_TOP}px`
   }

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

@@ -3,13 +3,14 @@ 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'
 
 type LineChartBumpCircleProp = {
-    config: ChartConfig, 
-    xScale: any, 
-    yScale: any, 
-    parseDate: any 
-  }
+  config: ChartConfig
+  xScale: any
+  yScale: any
+  parseDate: any
+}
 
 const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
   const { config, xScale, yScale, parseDate } = props
@@ -33,47 +34,47 @@ 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 `
+      ?.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(' ');
-  }  
+        </li>`
+      })
+      .join(' ')
+  }
 
   const getTooltip = dataRow => `<ul> ${getListItems(dataRow)} </ul>`
 
-  const circles = config.runtime?.series.map((series) => {
+  const circles = config.runtime?.series.map(series => {
     return config.data.map((d, dataIndex) => {
       let series_dataKey = d[series.dataKey]
       let axis_dataKey = d[config.xAxis.dataKey]
       return (
         <React.Fragment key={`bump-circle-${series_dataKey}-${dataIndex}`}>
-          <Group left={Number(config.runtime.yAxis.size)}> 
+          <Group left={Number(config.runtime.yAxis.size)}>
             {series_dataKey && (
               <>
-                <circle 
+                <circle
                   key={`bump-circle-${series_dataKey}-${dataIndex}`}
-                  data-tooltip-html={getTooltip(d)} 
-                  data-tooltip-id={`bump-chart`} 
-                  r={10} 
-                  cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))} 
-                  cy={Number(yScale(series_dataKey))} 
-                  stroke='#CACACA' 
-                  strokeWidth={1} 
-                  fill='#E5E4E2' 
+                  data-tooltip-html={getTooltip(d)}
+                  data-tooltip-id={`bump-chart`}
+                  r={10}
+                  cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))}
+                  cy={Number(yScale(series_dataKey))}
+                  stroke='#CACACA'
+                  strokeWidth={1}
+                  fill='#E5E4E2'
                 />
                 {series_dataKey.toString().length === 2 ? (
                   // prettier-ignore
                   <text
                   x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 7}
                   y={Number(yScale(series_dataKey)) + 4}
-                  fill='#000000'
+                  fill={APP_FONT_COLOR}
                   fontSize={11.5}
                   >
                   {series_dataKey}
@@ -83,7 +84,7 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
                   <text
                   x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 4}
                   y={Number(yScale(series_dataKey)) + 4}
-                  fill='#000000'
+                  fill={APP_FONT_COLOR}
                   fontSize={11.5}
                   >
                   {series_dataKey}

package/src/components/LineChart/helpers.ts

@@ -17,19 +17,19 @@ export const createStyles = (props: StyleProps): Style[] => {
 
   const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
   const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(
-    pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect'
+    pd => pd.seriesKeys?.length && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect'
   )
   const isEffectLine = (pd, dataPoint) => {
     if (dynamicCategory) {
       return (
         pd.type === 'effect' &&
         pd.style !== 'Open Circles' &&
-        pd.seriesKey === seriesKey &&
+        pd.seriesKeys.includes(seriesKey) &&
         String(dataPoint[dynamicSeriesKey]) === String(pd.value)
       )
     } else {
       return (
-        pd.seriesKey === seriesKey &&
+        pd.seriesKeys.includes(seriesKey) &&
         dataPoint[pd.column] === pd.value &&
         pd.type === 'effect' &&
         pd.style !== 'Open Circles'
@@ -71,11 +71,11 @@ export const filterCircles = (
 ): DataItem[] => {
   // Filter and map preliminaryData to get circlesFiltered
   const circlesFiltered = preliminaryData
-    ?.filter(item => item.style.includes('Circles') && item.type === 'effect')
+    ?.filter(item => item.style.includes('Circles') && item.type === 'effect' && item.seriesKeys?.length)
     .map(item => ({
       column: item.column,
       value: item.value,
-      seriesKey: item.seriesKey,
+      seriesKeys: item.seriesKeys,
       circleSize: item.circleSize,
       style: item.style
     }))
@@ -85,7 +85,7 @@ export const filterCircles = (
     circlesFiltered.forEach(fc => {
       if (
         item[fc.column] === fc.value &&
-        fc.seriesKey === seriesKey &&
+        fc.seriesKeys.includes(seriesKey) &&
         item[seriesKey] &&
         fc.style === 'Open Circles'
       ) {
@@ -98,7 +98,7 @@ export const filterCircles = (
       }
       if (
         (!fc.value || item[fc.column] === fc.value) &&
-        fc.seriesKey === seriesKey &&
+        fc.seriesKeys.includes(seriesKey) &&
         item[seriesKey] &&
         fc.style === 'Filled Circles'
       ) {