@cdc/chart 4.24.1 → 4.24.2

package/src/components/Legend/Legend.tsx

@@ -1,26 +1,7 @@
 import { useContext } from 'react'
 import ConfigContext from '../../ConfigContext'
-import parse from 'html-react-parser'
-import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
-import LegendCircle from '@cdc/core/components/LegendCircle'
-
-import useLegendClasses from '../../hooks/useLegendClasses'
-import { useHighlightedBars } from '../../hooks/useHighlightedBars'
-import { handleLineType } from '../../helpers/handleLineType'
-import { Line } from '@visx/shape'
-import { colorPalettesChart as colorPalettes, sequentialPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
-import { scaleOrdinal } from '@visx/scale'
-import { FaStar } from 'react-icons/fa'
-import { Text } from '@visx/text'
-import { Group } from '@visx/group'
-
-type Label = {
-  datum: string
-  index: number
-  text: string
-  value: string
-  icon?: any
-}
+import LegendComponent from './Legend.Component'
+import { createFormatLabels } from './helpers/createFormatLabels'
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const Legend = () => {
@@ -36,312 +17,12 @@ const Legend = () => {
     currentViewport
   } = useContext(ConfigContext)
 
-  const { innerClasses, containerClasses } = useLegendClasses(config)
-  const { visualizationType, visualizationSubType, series, runtime, orientation, legend } = config
+  if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
-  const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
-  const displayScale = scaleOrdinal({
-    domain: config.suppressedData?.map(d => d.label),
-    range: ['none'],
-    unknown: 'block'
-  })
-
-  const renderDashes = style => {
-    const dashCount = style === 'Dashed Small' ? 3 : 2
-    const dashClass = `dashes ${style.toLowerCase().replace(' ', '-')}`
-
-    return (
-      <div className={dashClass}>
-        {Array.from({ length: dashCount }, (_, i) => (
-          <span key={i}>-</span>
-        ))}
-      </div>
-    )
-  }
-  const renderDashesOrCircle = style => {
-    if (['Dashed Small', 'Dashed Medium', 'Dashed Large'].includes(style)) {
-      return renderDashes(style)
-    } else if (style === 'Open Circles') {
-      return <div className='dashes open-circles'></div>
-    }
-  }
-  const createLegendLabels = (defaultLabels): Label[] => {
-    const colorCode = config.legend?.colorCode
-    if (visualizationType === 'Deviation Bar') {
-      const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
-      const labelBelow = {
-        datum: 'X',
-        index: 0,
-        text: `Below ${config.xAxis.targetLabel}`,
-        value: belowColor
-      }
-      const labelAbove = {
-        datum: 'X',
-        index: 1,
-        text: `Above ${config.xAxis.targetLabel}`,
-        value: aboveColor
-      }
-
-      return reverseLabels([labelBelow, labelAbove])
-    }
-    if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
-      let palette = colorPalettes[config.palette]
-
-      while (tableData.length > palette.length) {
-        palette = palette.concat(palette)
-      }
-      palette = palette.slice(0, data.length)
-      //store unique values to Set by colorCode
-      const set = new Set()
-
-      tableData.forEach(d => set.add(d[colorCode]))
-
-      // create labels with unique values
-      const uniqueLabels = Array.from(set).map((val, i) => {
-        const newLabel = {
-          datum: val,
-          index: i,
-          text: val,
-          value: palette[i]
-        }
-        return newLabel
-      })
-
-      return reverseLabels(uniqueLabels)
-    }
-
-    // get forecasting items inside of combo
-    if (runtime?.forecastingSeriesKeys?.length > 0) {
-      let seriesLabels = []
-
-      //store unique values to Set by colorCode
-      // loop through each stage/group/area on the chart and create a label
-      config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
-        return outerGroup?.stages?.map((stage, index) => {
-          let colorValue = sequentialPalettes[stage.color]?.[2] ? sequentialPalettes[stage.color]?.[2] : colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
-
-          const newLabel = {
-            datum: stage.key,
-            index: index,
-            text: stage.key,
-            value: colorValue
-          }
-
-          seriesLabels.push(newLabel)
-        })
-      })
-
-      // loop through bars for now to meet requirements.
-      config.runtime.barSeriesKeys &&
-        config.runtime.barSeriesKeys.forEach((bar, index) => {
-          let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
-
-          const newLabel = {
-            datum: bar,
-            index: index,
-            text: bar,
-            value: colorValue
-          }
-
-          seriesLabels.push(newLabel)
-        })
-
-      return reverseLabels(seriesLabels)
-    }
-
-    // DEV-4161: replaceable series name in the legend
-    const hasNewSeriesName = config.series.map(s => s.name).filter(item => item).length > 0
-    if (hasNewSeriesName) {
-      let palette = colorPalettes[config.palette]
-
-      while (tableData.length > palette.length) {
-        palette = palette.concat(palette)
-      }
-
-      palette = palette.slice(0, data.length)
-      //store unique values to Set by colorCode
-      const set = new Set()
-
-      config.series.forEach(d => {
-        set.add(d['name'] ? d['name'] : d['dataKey'])
-      })
-
-      // create labels with unique values
-      const uniqueLabels = Array.from(set).map((val, i) => {
-        const newLabel = {
-          datum: val,
-          index: i,
-          text: val,
-          value: colorScale(val)
-        }
-        return newLabel
-      })
-
-      return reverseLabels(uniqueLabels)
-    }
-
-    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.visualizationSubType === 'regular' && config.suppressedData) {
-      const lastIndex = defaultLabels.length - 1
-      let newLabels = []
-
-      config.suppressedData?.forEach(({ label, icon }, index) => {
-        if (label && icon) {
-          const newLabel = {
-            datum: label,
-            index: lastIndex + index,
-            text: label,
-            icon: <FaStar color='#000' size={15} />
-          }
-          newLabels.push(newLabel)
-        }
-      })
-
-      return [...defaultLabels, ...newLabels]
-    }
-
-    return reverseLabels(defaultLabels)
-  }
-
-  const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
-
-  const legendClasses = {
-    marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `${isBottomOrSmallViewport ? config.dynamicMarginTop + 15 : 0}px`
-  }
-
-  const { HighLightedBarUtils } = useHighlightedBars(config)
-
-  let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
-  if (!legend) return null
-
-  return (
-    config.visualizationType !== 'Box Plot' && (
-      <aside style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-        {legend.label && <h2>{parse(legend.label)}</h2>}
-        {legend.description && <p>{parse(legend.description)}</p>}
-        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
-          {labels => {
-            return (
-              <>
-                <div className={innerClasses.join(' ')}>
-                  {createLegendLabels(labels).map((label, i) => {
-                    let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
-                    let itemName = label.datum
-
-                    // Filter excluded data keys from legend
-                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                      return null
-                    }
-
-                    if (runtime.seriesLabels) {
-                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                      itemName = config.runtime.seriesKeys[index]
-
-                      if (runtime?.forecastingSeriesKeys?.length > 0) {
-                        itemName = label.text
-                      }
-                    }
-
-                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                      className.push('inactive')
-                    }
-
-                    return (
-                      <LegendItem
-                        className={className.join(' ')}
-                        tabIndex={0}
-                        key={`legend-quantile-${i}`}
-                        onKeyPress={e => {
-                          if (e.key === 'Enter') {
-                            highlight(label)
-                          }
-                        }}
-                        onClick={() => {
-                          highlight(label)
-                        }}
-                      >
-                        {config.visualizationType === 'Line' && config.legend.lineMode ? (
-                          <svg width={40} height={20}>
-                            <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={label.value} strokeWidth={2} strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')} />
-                          </svg>
-                        ) : (
-                          <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <LegendCircle margin='0' fill={label.value} display={displayScale(label.datum)} />
-                            <div style={{ marginTop: '2px', marginRight: '6px' }}>{label.icon}</div>
-                          </div>
-                        )}
-
-                        <LegendLabel align='left' margin='0 0 0 4px'>
-                          {label.text}
-                        </LegendLabel>
-                      </LegendItem>
-                    )
-                  })}
 
-                  {highLightedLegendItems.map((bar, i) => {
-                    // if duplicates only return first item
-                    let className = 'legend-item'
-                    let itemName = bar.legendLabel
+  const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
-                    if (!itemName) return false
-                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                      className += ' inactive'
-                    }
-                    return (
-                      <LegendItem
-                        className={className}
-                        tabIndex={0}
-                        key={`legend-quantile-${i}`}
-                        onKeyPress={e => {
-                          if (e.key === 'Enter') {
-                            highlight(bar.legendLabel)
-                          }
-                        }}
-                        onClick={() => {
-                          highlight(bar.legendLabel)
-                        }}
-                      >
-                        <LegendCircle fill='transparent' borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`} />{' '}
-                        <LegendLabel align='left' margin='0 0 0 4px'>
-                          {bar.legendLabel ? bar.legendLabel : bar.value}
-                        </LegendLabel>
-                      </LegendItem>
-                    )
-                  })}
-                  {seriesHighlight.length > 0 && (
-                    <button className={`legend-reset ${config.theme}`} onClick={labels => highlightReset(labels)} tabIndex={0}>
-                      Reset
-                    </button>
-                  )}
-                </div>
-                <>
-                  {config.preliminaryData.some(pd => pd.label) && (
-                    <>
-                      <hr></hr>
-                      <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : 'dash-left'}>
-                        {config.preliminaryData.map((pd, index) => {
-                          return (
-                            <div className='dash-container' key={index}>
-                              {pd.label && (
-                                <>
-                                  <div className='dash-inner'>{renderDashesOrCircle(pd.style)}</div>
-                                  <div style={{ marginLeft: '7px' }}>{pd.label}</div>
-                                </>
-                              )}
-                            </div>
-                          )
-                        })}
-                      </div>
-                    </>
-                  )}
-                </>
-              </>
-            )
-          }}
-        </LegendOrdinal>
-      </aside>
-    )
-  )
+  return !['Box Plot', 'Pie'].includes(config.visualizationType) && <LegendComponent config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
 }
 
 export default Legend

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

@@ -0,0 +1,140 @@
+import { colorPalettesChart as colorPalettes, sequentialPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { FaStar } from 'react-icons/fa'
+import { Label } from '../../../types/Label'
+import { ColorScale, TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const createFormatLabels =
+  (config: ChartConfig, tableData: Object[], data: TransformedData[], colorScale: ColorScale) =>
+  (defaultLabels: Label[]): Label[] => {
+    const { visualizationType, visualizationSubType, series, runtime } = config
+
+    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
+    const colorCode = config.legend?.colorCode
+    if (visualizationType === 'Deviation Bar') {
+      const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
+      const labelBelow = {
+        datum: 'X',
+        index: 0,
+        text: `Below ${config.xAxis.targetLabel}`,
+        value: belowColor
+      }
+      const labelAbove = {
+        datum: 'X',
+        index: 1,
+        text: `Above ${config.xAxis.targetLabel}`,
+        value: aboveColor
+      }
+
+      return reverseLabels([labelBelow, labelAbove])
+    }
+    if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
+      let palette = colorPalettes[config.palette]
+
+      while (tableData.length > palette.length) {
+        palette = palette.concat(palette)
+      }
+      palette = palette.slice(0, data.length)
+      //store unique values to Set by colorCode
+      const set = new Set()
+
+      tableData.forEach(d => set.add(d[colorCode]))
+
+      // create labels with unique values
+      const uniqueLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: palette[i]
+        }
+        return newLabel
+      })
+
+      return reverseLabels(uniqueLabels)
+    }
+
+    // get forecasting items inside of combo
+    if (runtime?.forecastingSeriesKeys?.length > 0) {
+      let seriesLabels = []
+
+      //store unique values to Set by colorCode
+      // loop through each stage/group/area on the chart and create a label
+      config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
+        return outerGroup?.stages?.map((stage, index) => {
+          let colorValue = sequentialPalettes[stage.color]?.[2] ? sequentialPalettes[stage.color]?.[2] : colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
+
+          const newLabel = {
+            datum: stage.key,
+            index: index,
+            text: stage.key,
+            value: colorValue
+          }
+
+          seriesLabels.push(newLabel)
+        })
+      })
+
+      // loop through bars for now to meet requirements.
+      config.runtime.barSeriesKeys &&
+        config.runtime.barSeriesKeys.forEach((bar, index) => {
+          let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
+
+          const newLabel = {
+            datum: bar,
+            index: index,
+            text: bar,
+            value: colorValue
+          }
+
+          seriesLabels.push(newLabel)
+        })
+
+      return reverseLabels(seriesLabels)
+    }
+
+    // DEV-4161: replaceable series name in the legend
+    const hasNewSeriesName = config.series.filter(item => !!item.name).length > 0
+    if (hasNewSeriesName) {
+      //store unique values to Set by colorCode
+      const set = new Set()
+
+      config.series.forEach(d => {
+        set.add(d.name || d.dataKey)
+      })
+
+      // create labels with unique values
+      const uniqueLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: colorScale(val)
+        }
+        return newLabel
+      })
+
+      return reverseLabels(uniqueLabels)
+    }
+
+    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.visualizationSubType === 'regular' && config.suppressedData) {
+      const lastIndex = defaultLabels.length - 1
+      let newLabels = []
+
+      config.suppressedData?.forEach(({ label, icon }, index) => {
+        if (label && icon) {
+          const newLabel = {
+            datum: label,
+            index: lastIndex + index,
+            text: label,
+            icon: <FaStar color='#000' size={15} />
+          }
+          newLabels.push(newLabel)
+        }
+      })
+
+      return [...defaultLabels, ...newLabels]
+    }
+
+    return reverseLabels(defaultLabels)
+  }

package/src/components/LineChart/LineChartProps.ts

@@ -33,7 +33,7 @@ export interface Config {
 }
 export interface StyleProps {
   preliminaryData: PreliminaryDataItem[]
-  rawData: DataItem[]
+  data: DataItem[]
   stroke: string
   handleLineType: Function
   lineType: string

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -21,17 +21,15 @@ type LineChartCircleProps = {
   colorScale: any
   parseDate: any
   seriesAxis: string
+  dataIndex: number
+  mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS'
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData } = props
+  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData, dataIndex, mode } = props
   const { lineDatapointStyle } = config
   const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
   // If we're not showing the circle, simply return
-  if (lineDatapointStyle === 'hidden') return <></>
-
-  const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
-
   const getColor = (displayArea: boolean, colorScale: Function, config: ChartConfig, hoveredKey: string, seriesKey: string) => {
     const seriesLabels = config.runtime.seriesLabels || []
     let color
@@ -47,65 +45,100 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     }
     return color
   }
-  if (lineDatapointStyle === 'always show') {
-    const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey])
-    if (isMatch) {
-      return <></>
-    }
-    return (
-      <circle
-        cx={config.xAxis.type === 'categorical' ? xScale(d[config.xAxis.dataKey]) : xScale(parseDate(d[config.xAxis.dataKey]))}
-        cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])}
-        r={4.5}
-        opacity={d[seriesKey] ? 1 : 0}
-        fillOpacity={1}
-        fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
-        style={{ filter: 'unset', opacity: 1 }}
-      />
-    )
+  const getXPos = hoveredXValue => {
+    return (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
+  if (mode === 'ALWAYS_SHOW_POINTS') {
+    if (lineDatapointStyle === 'hidden') return <></>
+    const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
 
-  if (lineDatapointStyle === 'hover') {
-    if (!tooltipData) return
-    if (!seriesKey) return
-    if (!tooltipData.data) return
-    let hoveredXValue = tooltipData?.data?.[0]?.[1]
-    if (!hoveredXValue) return
-
-    let hoveredSeriesValue
-    let hoveredSeriesIndex
-    let hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
-    let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
-    let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
-    if (!hoveredSeriesKey) return
-    hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
-    hoveredSeriesValue = data?.find(d => {
-      return d[config?.xAxis.dataKey] === hoveredXValue
-    })?.[seriesKey]
-
-    //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
-    return tooltipData?.data.map((tooltipItem, index) => {
-      let seriesIndex = config.runtime.seriesLabelsAll.indexOf(hoveredXValue)
-
-      if (isNaN(hoveredSeriesValue)) return <></>
-      const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
-
+    if (lineDatapointStyle === 'always show') {
+      const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey])
       if (isMatch) {
         return <></>
       }
       return (
         <circle
-          cx={config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))}
-          cy={hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)}
+          cx={getXPos(d[config.xAxis.dataKey])}
+          cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])}
           r={4.5}
-          opacity={1}
+          opacity={d[seriesKey] ? 1 : 0}
           fillOpacity={1}
-          fill={getColor(displayArea, colorScale, config, hoveredSeriesKey, seriesKey)}
+          fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
           style={{ filter: 'unset', opacity: 1 }}
-          key={`line-chart-circle--${JSON.stringify(tooltipItem)}--${index}`}
         />
       )
-    })
+    }
+  }
+
+  if (mode === 'HOVER_POINTS') {
+    if (lineDatapointStyle === 'hover') {
+      if (!tooltipData) return
+      if (!seriesKey) return
+      if (!tooltipData.data) return
+      let hoveredXValue = tooltipData?.data?.[0]?.[1]
+      if (!hoveredXValue) return
+
+      let hoveredSeriesValue
+      let hoveredSeriesIndex
+      let hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
+      let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
+      let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
+      if (!hoveredSeriesKey) return
+      hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
+      hoveredSeriesValue = data?.find(d => {
+        return d[config?.xAxis.dataKey] === hoveredXValue
+      })?.[seriesKey]
+
+      //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
+      return tooltipData?.data.map((tooltipItem, index) => {
+        let seriesIndex = config.runtime.seriesLabelsAll.indexOf(hoveredXValue)
+
+        if (isNaN(hoveredSeriesValue)) return <></>
+        const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
+
+        if (isMatch) {
+          return <></>
+        }
+        return (
+          <circle
+            cx={getXPos(hoveredXValue)}
+            cy={hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)}
+            r={4.5}
+            opacity={1}
+            fillOpacity={1}
+            fill={getColor(displayArea, colorScale, config, hoveredSeriesKey, seriesKey)}
+            style={{ filter: 'unset', opacity: 1 }}
+            key={`line-chart-circle--${JSON.stringify(tooltipItem)}--${index}`}
+          />
+        )
+      })
+    }
+  }
+
+  if (mode === 'ISOLATED_POINTS') {
+    const drawIsolatedPoints = (currentIndex, seriesKey) => {
+      const currentPoint = data[currentIndex]
+      const previousPoint = data[currentIndex - 1]
+      const nextPoint = data[currentIndex + 1]
+      if (currentIndex === 0 && !nextPoint[seriesKey]) {
+        return true
+      }
+      if (currentIndex === data.length - 1 && !previousPoint[seriesKey]) {
+        return true
+      }
+      if (currentIndex !== 0 && currentPoint[seriesKey] && !previousPoint[seriesKey] && !nextPoint[seriesKey]) {
+        return true
+      }
+    }
+
+    if (mode) {
+      if (drawIsolatedPoints(dataIndex, seriesKey)) {
+        return (
+          <circle cx={getXPos(d[config.xAxis.dataKey])} cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])} r={5.3} strokeWidth={2} stroke={colorScale(config.runtime.seriesLabels[seriesKey])} fill={colorScale(config.runtime.seriesLabels[seriesKey])} />
+        )
+      }
+    }
   }
 
   return null

package/src/components/LineChart/helpers.ts

@@ -1,7 +1,7 @@
 import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
 
 export const createStyles = (props: StyleProps): Style[] => {
-  const { preliminaryData, rawData, stroke, handleLineType, lineType, seriesKey } = props
+  const { preliminaryData, data, stroke, handleLineType, lineType, seriesKey } = props
 
   const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style)
   const getMatchingPd = (point: DataItem): PreliminaryDataItem => validPreliminaryData.find(pd => pd.seriesKey === seriesKey && point[pd.column] === pd.value && pd.type === 'effect' && pd.style !== 'Open Circles')
@@ -13,7 +13,7 @@ export const createStyles = (props: StyleProps): Style[] => {
     strokeDasharray: lineStyle
   })
 
-  rawData.forEach((d, index) => {
+  data.forEach((d, index) => {
     let matchingPd: PreliminaryDataItem = getMatchingPd(d)
     let style: Style = matchingPd ? createStyle(handleLineType(matchingPd.style)) : createStyle(handleLineType(lineType))