@cdc/chart 4.24.4 → 4.24.7

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

@@ -5,45 +5,46 @@ import Button from '@cdc/core/components/elements/Button'
 import useLegendClasses from '../../hooks/useLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
+import { getMarginTop } from './helpers/index'
 import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
 import { ChartConfig } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
 import { forwardRef } from 'react'
 
-interface LegendProps {
-  config: ChartConfig
+export interface LegendProps {
   colorScale: ColorScale
-  seriesHighlight: string[]
-  highlight: Function
-  highlightReset: Function
+  config: ChartConfig
   currentViewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   formatLabels: (labels: Label[]) => Label[]
+  highlight: Function
+  highlightReset: Function
   ref: React.Ref<() => void>
+  seriesHighlight: string[]
   skipId: string
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels, skipId = 'legend' }, ref) => {
   const { innerClasses, containerClasses } = useLegendClasses(config)
-  const { runtime, orientation, legend } = config
+  const { runtime, legend } = config
+
   if (!legend) return null
-  const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
+  const isBottomOrSmallViewport = legend?.position === 'bottom' || (['sm', 'xs', 'xxs'].includes(currentViewport) && !legend.hide)
 
   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`
+    marginTop: isBottomOrSmallViewport && config.orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : getMarginTop(isBottomOrSmallViewport, config.brush.active)
   }
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
-  const fontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? { fontSize: '11px' } : null
 
   return (
     <aside ref={ref} style={legendClasses} id={skipId || 'legend'} className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
       {legend.label && <h3>{parse(legend.label)}</h3>}
-      {legend.description && <p style={fontSize}>{parse(legend.description)}</p>}
+      {legend.description && <p>{parse(legend.description)}</p>}
 
       <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
         {labels => {
@@ -101,7 +102,7 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
                         )}
                       </div>
 
-                      <LegendLabel style={fontSize} align='left' margin='0 0 0 4px'>
+                      <LegendLabel align='left' margin='0 0 0 4px'>
                         {label.text}
                       </LegendLabel>
                     </LegendItem>
@@ -143,17 +144,17 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
               </div>
 
               <>
-                {config?.preliminaryData?.some(pd => pd.label) && ['Line', 'Combo'].includes(config.visualizationType) && (
+                {config?.preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style === 'Open Circles') && ['Line', 'Combo'].includes(config.visualizationType) && (
                   <>
                     <hr></hr>
                     <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
                       {config?.preliminaryData?.map((pd, index) => {
                         return (
                           <>
-                            {pd.label && (
+                            {pd.label && pd.type === 'effect' && pd.style && (
                               <div key={index} className='legend-preliminary'>
-                                <svg>{pd.style.includes('Dashed') ? <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={'#000'} strokeWidth={2} strokeDasharray={handleLineType(pd.style)} /> : <circle r={6} strokeWidth={2} stroke={'#000'} cx={22} cy={10} fill='transparent' />}</svg>
-                                <span> {pd.label}</span>
+                                <span className={pd.symbol}>{pd.lineCode}</span>
+                                <p> {pd.label}</p>
                               </div>
                             )}
                           </>
@@ -162,6 +163,56 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
                     </div>
                   </>
                 )}
+                {!config.legend.hideSuppressedLabels &&
+                  config?.preliminaryData?.some(pd => pd.label && pd.displayLegend && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)) &&
+                  ((config.visualizationType === 'Bar' && config.visualizationSubType === 'regular') || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && (
+                    <>
+                      <hr></hr>
+                      <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
+                        {config?.preliminaryData?.map(
+                          (pd, index) =>
+                            pd.displayLegend &&
+                            pd.type === 'suppression' && (
+                              <>
+                                {config.visualizationType === 'Bar' && (
+                                  <>
+                                    <div key={index + 'Bar'} className={`legend-preliminary ${pd.symbol}`}>
+                                      <span className={pd.symbol}>{pd.iconCode}</span>
+                                      <p className={pd.type}>{pd.label}</p>
+                                    </div>
+                                  </>
+                                )}
+                                {config.visualizationType === 'Line' && (
+                                  <>
+                                    <div key={index + 'Line'} className={`legend-preliminary `}>
+                                      <span>{pd.lineCode}</span>
+                                      <p className={pd.type}>{pd.label}</p>
+                                    </div>
+                                  </>
+                                )}
+                                {config.visualizationType === 'Combo' && (
+                                  <>
+                                    {pd.symbol && pd.iconCode && (
+                                      <div key={index + 'Combo'} className={`legend-preliminary ${pd.symbol}`}>
+                                        <span className={pd.symbol}>{pd.iconCode}</span>
+                                        <p className={pd.type}>{pd.label}</p>
+                                      </div>
+                                    )}
+
+                                    {pd.style && pd.lineCode && (
+                                      <div key={index + 'Combo'} className='legend-preliminary'>
+                                        <span>{pd.lineCode}</span>
+                                        <p>{pd.label}</p>
+                                      </div>
+                                    )}
+                                  </>
+                                )}
+                              </>
+                            )
+                        )}
+                      </div>
+                    </>
+                  )}
               </>
             </>
           )

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

@@ -9,7 +9,7 @@ export const createFormatLabels =
   (defaultLabels: Label[]): Label[] => {
     const { visualizationType, visualizationSubType, series, runtime } = config
 
-    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
+    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]

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

@@ -0,0 +1,5 @@
+export const getMarginTop = (isBottomOrSmallViewport, isBrushActive) => {
+  if (!isBottomOrSmallViewport) return '0px'
+  if (isBrushActive) return '35px'
+  return '15px'
+}

package/src/components/LineChart/LineChartProps.ts

@@ -17,12 +17,21 @@ export type LineChartProps = {
 }
 
 export interface PreliminaryDataItem {
-  style: string
-  type: string
   column: string
-  value: string
-  seriesKey: string
+  displayLegend: boolean
+  displayTable: boolean
+  displayTooltip: boolean
+  iconCode: string
   label: string
+  lineCode: string
+  seriesKey: string
+  style: string
+  symbol: string
+  type: 'effect' | 'suppression'
+  value: string
+  hideBarSymbol: boolean
+  hideLineStyle: boolean
+  circleSize: number
 }
 
 export interface DataItem {
@@ -33,12 +42,13 @@ export interface Config {
   preliminaryData: PreliminaryDataItem[] | []
 }
 export interface StyleProps {
-  preliminaryData: PreliminaryDataItem[]
   data: DataItem[]
-  stroke: string
   handleLineType: Function
   lineType: string
+  preliminaryData: PreliminaryDataItem[]
   seriesKey: 'string'
+  stroke: string
+  strokeWidth: number
 }
 export interface Style {
   stroke: string

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

@@ -7,6 +7,7 @@ type LineChartCircleProps = {
   circleData: object[]
   config: ChartConfig
   data: object[]
+  tableData: object[]
   d?: Object
   displayArea: boolean
   seriesKey: string
@@ -26,7 +27,7 @@ type LineChartCircleProps = {
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData, dataIndex, mode } = props
+  const { config, d, tableData, 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
@@ -86,7 +87,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
       if (!hoveredSeriesKey) return
       hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
-      hoveredSeriesValue = data?.find(d => {
+      hoveredSeriesValue = tableData?.find(d => {
         return d[config?.xAxis.dataKey] === hoveredXValue
       })?.[seriesKey]
 
@@ -100,6 +101,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
         if (isMatch) {
           return <></>
         }
+
         return (
           <circle
             cx={getXPos(hoveredXValue)}
@@ -119,23 +121,32 @@ const LineChartCircle = (props: LineChartCircleProps) => {
   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
+      const previousPoint = currentIndex > 0 ? data[currentIndex - 1] : null
+      const nextPoint = currentIndex < data.length - 1 ? data[currentIndex + 1] : null
+      let res = false
+
+      // Handle the first point in the array
+      if (currentIndex === 0 && nextPoint && !nextPoint[seriesKey]) {
+        res = true
       }
-      if (currentIndex === data.length - 1 && !previousPoint[seriesKey]) {
-        return true
+      // Handle the last point in the array
+      if (currentIndex === data.length - 1 && previousPoint && !previousPoint[seriesKey]) {
+        res = true
       }
-      if (currentIndex !== 0 && currentPoint[seriesKey] && !previousPoint[seriesKey] && !nextPoint[seriesKey]) {
-        return true
+      // Handle points in the middle
+      if (currentIndex > 0 && currentIndex < data.length - 1) {
+        if (currentPoint && currentPoint[seriesKey] && (!previousPoint || !previousPoint[seriesKey]) && (!nextPoint || !nextPoint[seriesKey])) {
+          res = true
+        }
       }
+
+      return res
     }
 
     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])} />
+          <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])} />
         )
       }
     }

package/src/components/LineChart/helpers.ts

@@ -1,9 +1,9 @@
 import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
-
+import _ from 'lodash'
 export const createStyles = (props: StyleProps): Style[] => {
   const { preliminaryData, data, stroke, strokeWidth, handleLineType, lineType, seriesKey } = props
 
-  const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style)
+  const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect')
   const getMatchingPd = (point: DataItem): PreliminaryDataItem => validPreliminaryData.find(pd => pd.seriesKey === seriesKey && point[pd.column] === pd.value && pd.type === 'effect' && pd.style !== 'Open Circles')
 
   let styles: Style[] = []
@@ -29,17 +29,155 @@ export const createStyles = (props: StyleProps): Style[] => {
 
 export const filterCircles = (preliminaryData: PreliminaryDataItem[], data: DataItem[], seriesKey: string): DataItem[] => {
   // Filter and map preliminaryData to get circlesFiltered
-  const circlesFiltered = preliminaryData.filter(item => item.style === 'Open Circles' && item.type === 'effect').map(item => ({ column: item.column, value: item.value, seriesKey: item.seriesKey }))
-
-  let filteredData: DataItem[] = []
-
+  const circlesFiltered = preliminaryData?.filter(item => item.style.includes('Circles') && item.type === 'effect').map(item => ({ column: item.column, value: item.value, seriesKey: item.seriesKey, circleSize: item.circleSize, style: item.style }))
+  const filteredData = []
   // Process data to find matching items
   data.forEach(item => {
-    if (circlesFiltered.some(d => item[d.column] === d.value && d.seriesKey === seriesKey)) {
-      // Add current item
-      filteredData.push(item)
-    }
+    circlesFiltered.forEach(fc => {
+      if (item[fc.column] === fc.value && fc.seriesKey === seriesKey && item[seriesKey] && fc.style === 'Open Circles') {
+        const result = {
+          data: item,
+          size: fc.circleSize,
+          isFilled: false
+        }
+        filteredData.push(result)
+      }
+      if ((!fc.value || item[fc.column] === fc.value) && fc.seriesKey === seriesKey && item[seriesKey] && fc.style === 'Filled Circles') {
+        const result = {
+          data: item,
+          size: fc.circleSize,
+          isFilled: true
+        }
+        filteredData.push(result)
+      }
+    })
   })
 
   return filteredData
 }
+
+const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
+const handleFirstIndex = (data, seriesKey, preliminaryData) => {
+  const result = {
+    data: [],
+    style: ''
+  }
+
+  // If data is empty, return the empty result
+  if (!data.length) return result
+
+  const firstIndexDataItem = data[0]
+
+  // Function to check if a data item matches the suppression criteria
+  const isSuppressed = pd => {
+    if (pd.type === 'effect' || pd.hideLineStyle) return
+    return pd.type == 'suppression' && pd.value === firstIndexDataItem[seriesKey] && (!pd.column || pd.column === seriesKey)
+  }
+
+  // Find applicable suppression data for the first item
+  const suppressionData = preliminaryData.find(isSuppressed)
+
+  if (suppressionData && suppressionData.style) {
+    // Modify first item and add to result
+    const modifiedItem = { ...firstIndexDataItem, [seriesKey]: 0 }
+    result.data.push(modifiedItem)
+    result.style = suppressionData.style
+
+    // Find the next calculable item index
+    let nextIndex = 1
+    while (nextIndex < data.length && !isCalculable(data[nextIndex][seriesKey])) {
+      nextIndex++
+    }
+    if (nextIndex < data.length) {
+      result.data.push(data[nextIndex])
+    }
+  } else {
+    // If no suppression, just add the first item
+    result.data.push(firstIndexDataItem)
+  }
+
+  return result
+}
+
+const handleLastIndex = (data, seriesKey, preliminaryData) => {
+  const result = {
+    data: [],
+    style: ''
+  }
+  let lastAddedIndex = -1 // Tracks the last index added to the result
+  preliminaryData?.forEach(pd => {
+    if (pd.type === 'effect') return
+    if (data[data.length - 1][seriesKey] === pd.value && pd.style && (!pd.column || pd.column === seriesKey) && pd.type == 'suppression' && !pd.hideLineStyle) {
+      const lastIndex = data.length - 1
+      const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
+      result.data.push(modifiedItem)
+
+      // Find previous calculable item
+      let prevIndex = lastIndex - 1
+      while (prevIndex >= 0 && !isCalculable(data[prevIndex][seriesKey])) {
+        prevIndex--
+      }
+      if (prevIndex >= 0 && lastAddedIndex !== prevIndex) {
+        result.data.push(data[prevIndex])
+        lastAddedIndex = prevIndex
+      }
+      result.style = pd.style
+    }
+  })
+
+  return result
+}
+
+function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
+  const result = {
+    data: [],
+    style: ''
+  }
+
+  const isValidMiddleIndex = index => index > 0 && index < data.length - 1
+
+  preliminaryData?.forEach(pd => {
+    if (pd.type === 'effect' || pd.hideLineStyle) return
+    const targetValue = pd.value
+
+    // Find all indices
+    const matchingIndices = data.reduce((indices, item, index) => {
+      if (item[seriesKey] === targetValue && isValidMiddleIndex(index) && (!pd.column || pd.column === seriesKey)) {
+        indices.push(index)
+      }
+      return indices
+    }, [])
+
+    // Process each valid index
+    matchingIndices.forEach(i => {
+      result.style = pd.style
+      // Add previous object if calculable
+      if (isCalculable(data[i - 1][seriesKey])) {
+        result.data.push(data[i - 1])
+      }
+
+      // Find and add the next calculable object
+      const nextIndex = data.slice(i + 1).findIndex(item => item[seriesKey] !== targetValue && isCalculable(item[seriesKey]))
+      if (nextIndex !== -1) {
+        result.data.push(data[i + 1 + nextIndex])
+      }
+    })
+  })
+
+  // Deduplicate entries
+  result.data = _.uniqWith(result.data, (a, b) => a[dataKey] === b[dataKey] && a[seriesKey] === b[seriesKey])
+
+  return result
+}
+
+// create segments (array of arrays) for building suppressed Lines
+export const createDataSegments = (data, seriesKey, preliminaryData, dataKey) => {
+  // Process the first index if necessary
+  const firstSegment = handleFirstIndex(data, seriesKey, preliminaryData)
+  // Process the last index if necessary
+  const lastSegment = handleLastIndex(data, seriesKey, preliminaryData)
+  // Process the middle segment
+  const middleSegments = handleMiddleIndices(data, seriesKey, dataKey, preliminaryData)
+  // Combine all segments into a single array
+  return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
+}

package/src/components/LineChart/index.tsx

@@ -1,17 +1,23 @@
 import React, { useContext } from 'react'
 
+// VisX library imports
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
 import { LinePath, Bar, SplitLinePath } from '@visx/shape'
 import { Text } from '@visx/text'
 
+// CDC core components
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+
+// Local context and hooks
 import ConfigContext from '../../ConfigContext'
 import useRightAxis from '../../hooks/useRightAxis'
-import { filterCircles, createStyles } from './helpers'
+
+// Local helpers and components
+import { filterCircles, createStyles, createDataSegments } from './helpers'
 import LineChartCircle from './components/LineChart.Circle'
 
-// types
+// Types
 import { type ChartContext } from '../../types/ChartContext'
 import { type LineChartProps } from './LineChartProps'
 
@@ -31,28 +37,22 @@ const LineChart = (props: LineChartProps) => {
   } = props
 
   // prettier-ignore
-  const {
-    colorScale,
-    config,
-    formatNumber,
-    handleLineType,
-    isNumber,
-    parseDate,
-    seriesHighlight,
-    tableData,
-    transformedData: data,
-    updateConfig,
-    rawData
-  } = useContext<ChartContext>(ConfigContext)
-  const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
+  const { colorScale, config, formatNumber, handleLineType, isNumber, parseDate, seriesHighlight, tableData, transformedData, updateConfig, brushConfig,clean  } = useContext<ChartContext>(ConfigContext)
+  const { yScaleRight } = useRightAxis({ config, yMax, data: transformedData, updateConfig })
   if (!handleTooltipMouseOver) return
 
   const DEBUG = false
   const { lineDatapointStyle, showLineSeriesLabels, legend } = config
-
+  let data = transformedData
+  let tableD = tableData
+  // if brush on use brush data and clean
+  if (brushConfig.data.length > 0 && config.brush?.active) {
+    data = clean(brushConfig.data)
+    tableD = clean(brushConfig.data)
+  }
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={config.runtime.yAxis.size}>
+      <Group left={Number(config.runtime.yAxis.size)}>
         {' '}
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
@@ -60,9 +60,10 @@ const LineChart = (props: LineChartProps) => {
           const seriesData = config.series.filter(item => item.dataKey === seriesKey)
           const seriesAxis = seriesData[0].axis ? seriesData[0].axis : 'left'
           let displayArea = legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
-          const circleData = filterCircles(config.preliminaryData, rawData, seriesKey)
+          const circleData = filterCircles(config?.preliminaryData, tableD, seriesKey)
           // styles for preliminary Data  items
-          let styles = createStyles({ preliminaryData: config.preliminaryData, data: tableData, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), strokeWidth: seriesData[0].weight || 2, handleLineType, lineType, seriesKey })
+          let styles = createStyles({ preliminaryData: config.preliminaryData, data: tableD, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), strokeWidth: seriesData[0].weight || 2, handleLineType, lineType, seriesKey })
+          const suppressedSegments = createDataSegments(tableData, seriesKey, config.preliminaryData, config.xAxis.dataKey)
 
           let xPos = d => {
             return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
@@ -82,6 +83,7 @@ const LineChart = (props: LineChartProps) => {
                 const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
                 const labeltype = axis === 'Right' ? 'rightLabel' : 'label'
                 let label = config.runtime.yAxis[labeltype]
+
                 // if has muiltiple series dont show legend value on tooltip
                 if (!hasMultipleSeries) label = config.isLegendValue ? config.runtime.seriesLabels[seriesKey] : label
 
@@ -104,6 +106,7 @@ const LineChart = (props: LineChartProps) => {
                           mode='ALWAYS_SHOW_POINTS'
                           dataIndex={dataIndex}
                           circleData={circleData}
+                          tableData={tableData}
                           data={data}
                           d={d}
                           config={config}
@@ -123,6 +126,7 @@ const LineChart = (props: LineChartProps) => {
                       <LineChartCircle
                         mode='ISOLATED_POINTS'
                         dataIndex={dataIndex}
+                        tableData={tableData}
                         circleData={circleData}
                         data={data}
                         d={d}
@@ -145,6 +149,7 @@ const LineChart = (props: LineChartProps) => {
               <>
                 {lineDatapointStyle === 'hover' && (
                   <LineChartCircle
+                    tableData={tableData}
                     dataIndex={0}
                     mode='HOVER_POINTS'
                     circleData={circleData}
@@ -163,34 +168,46 @@ const LineChart = (props: LineChartProps) => {
                 )}
               </>
               {/* SPLIT LINE */}
-              {config?.preliminaryData?.some(d => d.value && d.column) ? (
-                <SplitLinePath
-                  curve={allCurves[seriesData[0].lineType]}
-                  segments={(config.xAxis.type === 'date-time'
-                    ? data.sort((d1, d2) => {
-                        let x1 = getXAxisData(d1)
-                        let x2 = getXAxisData(d2)
-                        if (x1 < x2) return -1
-                        if (x2 < x1) return 1
-                        return 0
-                      })
-                    : data
-                  ).map(d => [d])}
-                  segmentation='x'
-                  x={d => xPos(d)}
-                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
-                  styles={styles}
-                  defined={(item, i) => {
-                    return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
-                  }}
-                />
+              {config?.preliminaryData?.some(pd => pd.value && pd.type) ? (
+                <>
+                  <SplitLinePath
+                    curve={allCurves[seriesData[0].lineType]}
+                    segments={data.map(d => [d])}
+                    segmentation='x'
+                    x={d => xPos(d)}
+                    y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                    styles={styles}
+                    defined={(item, i) => {
+                      return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                    }}
+                  />
+
+                  {suppressedSegments.map((segment, index) => {
+                    return (
+                      <LinePath
+                        key={index}
+                        data={segment.data}
+                        x={d => xPos(d)}
+                        y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                        stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
+                        strokeWidth={seriesData[0].weight || 2}
+                        strokeOpacity={1}
+                        shapeRendering='geometricPrecision'
+                        strokeDasharray={handleLineType(segment.style)}
+                        defined={(item, i) => {
+                          return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                        }}
+                      />
+                    )
+                  })}
+                </>
               ) : (
                 <>
                   {/* STANDARD LINE */}
                   <LinePath
                     curve={allCurves[seriesData[0].lineType]}
                     data={
-                      config.xAxis.type === 'date-time'
+                      config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
                         ? data.sort((d1, d2) => {
                             let x1 = getXAxisData(d1)
                             let x2 = getXAxisData(d2)
@@ -215,8 +232,18 @@ const LineChart = (props: LineChartProps) => {
               )}
 
               {/* circles for preliminaryData data */}
-              {circleData.map((d, i) => {
-                return <circle key={i} cx={xPos(d)} cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey)))} r={6} strokeWidth={seriesData[0].weight || 2} stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'} fill='#fff' />
+              {circleData.map((item, i) => {
+                return (
+                  <circle
+                    key={i}
+                    cx={xPos(item.data)}
+                    cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(item.data, seriesKey)) : yScale(Number(getYAxisData(item.data, seriesKey)))}
+                    r={item.size}
+                    strokeWidth={seriesData[0].weight || 2}
+                    stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'}
+                    fill={item.isFilled ? (colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000') : '#fff'}
+                  />
+                )
               })}
 
               {/* ANIMATED LINE */}