@cdc/chart 4.24.12 → 4.25.1

package/src/components/Legend/Legend.Suppression.tsx

@@ -4,10 +4,10 @@ import Icon from '@cdc/core/components/ui/Icon'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 interface LegendProps {
   config: ChartConfig
-  isBottomOrSmallViewport: boolean
+  isLegendBottom: boolean
 }
 
-const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewport, setHasSuppression }) => {
+const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) => {
   const { preliminaryData, visualizationType, visualizationSubType, legend } = config
 
   const hasOpenCircleEffects = () =>
@@ -98,15 +98,13 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewp
   }
 
   const getLegendContainerClass = () =>
-    legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''
+    legend.singleRow && isLegendBottom ? 'legend-container__inner bottom single-row' : ''
 
   const shouldShowSuppressedInfo = () =>
     !config.legend.hideSuppressionLink &&
     config.visualizationSubType !== 'stacked' &&
     preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol))
 
-  setHasSuppression(shouldShowSuppressedInfo())
-
   return (
     <React.Fragment>
       {hasOpenCircleEffects() && (

package/src/components/Legend/Legend.tsx

@@ -13,7 +13,7 @@ const Legend = forwardRef((props, ref) => {
     seriesHighlight,
     highlight,
     tableData,
-    highlightReset,
+    handleShowAll,
     transformedData: data,
     currentViewport,
     dimensions,
@@ -35,7 +35,7 @@ const Legend = forwardRef((props, ref) => {
         colorScale={colorScale}
         seriesHighlight={seriesHighlight}
         highlight={highlight}
-        highlightReset={highlightReset}
+        handleShowAll={handleShowAll}
         currentViewport={currentViewport}
         formatLabels={createLegendLabels}
       />

package/src/components/Legend/LegendLine.Shape.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { handleLineType } from '../../helpers/handleLineType'
+import { Line } from '@visx/shape'
+import { GlyphDiamond, GlyphCircle, GlyphSquare, GlyphTriangle, GlyphCross, Glyph as CustomGlyph } from '@visx/glyph'
+import { Text } from '@visx/text'
+
+// Define glyph shapes
+const Glyphs = [
+  GlyphCircle,
+  GlyphSquare,
+  GlyphTriangle,
+  GlyphDiamond,
+  GlyphTriangle,
+  GlyphCross,
+  ({ fill }: { fill: string }) => (
+    <CustomGlyph>
+      {/* Render Filled Pentagon */}
+      <Text fill={fill} fontSize={14} textAnchor='middle' verticalAnchor='middle'>
+        &#x2B1F;
+      </Text>
+    </CustomGlyph>
+  )
+]
+
+const LegendLineShape = props => {
+  const { config, label, index } = props
+  const isReversedTriangle = index === 4
+
+  const Shape =
+    Glyphs[config.visual.lineDatapointSymbol === 'standard' && index < config.visual.maximumShapeAmount ? index : 0]
+  const transform = `translate(${15}, ${3}) ${isReversedTriangle ? 'rotate(180)' : ''}`
+
+  return (
+    <svg width={30} height={10} style={{ overflow: 'visible' }} className='me-2'>
+      {/* Render line */}
+      <Line
+        from={{ x: 0, y: 3 }}
+        to={{ x: 30, y: 3 }}
+        stroke={label.value}
+        strokeWidth={2}
+        strokeDasharray={handleLineType(config.series[index]?.type || '')}
+      />
+
+      <g display={config.legend.hasShape ? 'block' : 'none'} transform={transform}>
+        <Shape fillOpacity={1} fill={label.value} />
+      </g>
+    </svg>
+  )
+}
+
+export default LegendLineShape

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

@@ -3,13 +3,22 @@ import { FaStar } from 'react-icons/fa'
 import { Label } from '../../../types/Label'
 import { ColorScale, TransformedData } from '../../../types/ChartContext'
 import { ChartConfig } from '../../../types/ChartConfig'
+import _ from 'lodash'
 
 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 { visualizationType, visualizationSubType, series, runtime, legend } = config
+    const sortVertical = labels =>
+      legend.verticalSorted
+        ? _.sortBy(_.cloneDeep(labels), label => {
+            const match = label.datum?.match(/-?\d+(\.\d+)?/)
+            return match ? parseFloat(match[0]) : Number.MAX_SAFE_INTEGER
+          })
+        : labels
+    const reverseLabels = labels => {
+      return config.legend.reverseLabelOrder ? sortVertical(labels).reverse() : sortVertical(labels)
+    }
     const colorCode = config.legend?.colorCode
     if (visualizationType === 'Deviation Bar') {
       const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
@@ -62,7 +71,11 @@ export const createFormatLabels =
       // 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'
+          let colorValue = sequentialPalettes[stage.color]?.[2]
+            ? sequentialPalettes[stage.color]?.[2]
+            : colorPalettes[stage.color]?.[2]
+            ? colorPalettes[stage.color]?.[2]
+            : '#ccc'
 
           const newLabel = {
             datum: stage.key,
@@ -93,31 +106,21 @@ export const createFormatLabels =
       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
-      })
-
+    if (config.series.some(item => item.name)) {
+      const uniqueLabels = Array.from(new Set(config.series.map(d => d.name || d.dataKey))).map((val, i) => ({
+        datum: val,
+        index: i,
+        text: val,
+        value: colorScale(val)
+      }))
       return reverseLabels(uniqueLabels)
     }
 
-    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.visualizationSubType === 'regular' && config.suppressedData) {
+    if (
+      (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
+      config.visualizationSubType === 'regular' &&
+      config.suppressedData
+    ) {
       const lastIndex = defaultLabels.length - 1
       let newLabels = []
 

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

@@ -1,54 +1,36 @@
 import { ChartConfig } from './../../../types/ChartConfig'
 
 export const getLegendClasses = (config: ChartConfig) => {
-  const { position, singleRow, reverseLabelOrder, verticalSorted, hideBorder } = config.legend
-  const containerClasses = ['legend-container']
-  const innerClasses = ['legend-container__inner']
-
-  // Handle legend positioning
-  switch (position) {
-    case 'left':
-      containerClasses.push('left')
-      break
-    case 'right':
-      containerClasses.push('right')
-      break
-    case 'bottom':
-      containerClasses.push('bottom')
-      innerClasses.push('double-column', 'bottom')
-      break
-    case 'top':
-      containerClasses.push('top')
-      innerClasses.push('double-column', 'top')
-      break
-  }
+  const { position, singleRow, verticalSorted, hideBorder } = config.legend
 
-  // Handle single row configuration for 'bottom' and 'top' positions
-  if (['bottom', 'top'].includes(position) && singleRow) {
-    innerClasses.push('single-row')
+  const containerClassMap = {
+    left: 'left',
+    right: 'right',
+    bottom: 'bottom',
+    top: 'top'
   }
 
-  // Reverse label order
-  if (reverseLabelOrder) {
-    innerClasses.push('d-flex', 'flex-column-reverse')
+  const innerClassMap = {
+    bottom: singleRow ? ['single-row', 'bottom'] : ['double-column', 'bottom'],
+    top: singleRow ? ['single-row', 'top'] : ['double-column', 'top']
   }
 
-  // Vertical sorting for 'bottom' and 'top' positions
+  const containerClasses = ['legend-container', containerClassMap[position]].filter(Boolean)
+  const innerClasses = ['legend-container__inner', ...(innerClassMap[position] || [])]
+
+  // Add vertical sorting class for 'bottom' and 'top' positions
   if (['bottom', 'top'].includes(position) && verticalSorted) {
     innerClasses.push('vertical-sorted')
   }
 
-  // Configure border classes
-  if (hideBorder.side && (['right', 'left'].includes(position) || !position)) {
-    containerClasses.push('border-0')
-  }
-
-  if (hideBorder.topBottom && ['top', 'bottom'].includes(position)) {
-    containerClasses.push('border-0')
-  }
+  // Add border and padding classes based on position and hideBorder
+  const shouldHideBorder = (['right', 'left'].includes(position) || !position) && hideBorder.side
+  const shouldHideTopBottomBorder = ['top', 'bottom'].includes(position) && hideBorder.topBottom
 
-  if (hideBorder.topBottom && ['top'].includes(position)) {
-    containerClasses.push('p-0')
+  if (shouldHideBorder || shouldHideTopBottomBorder) {
+    containerClasses.push('border-0', 'p-0')
+  } else {
+    containerClasses.push('p-3')
   }
 
   return {

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

@@ -10,22 +10,29 @@ export const getGradientConfig = (config, formatLabels, colorScale) => {
   return { colors, labels }
 }
 
-export const getMarginTop = (isBottomOrSmallViewport, config) => {
-  if (!isBottomOrSmallViewport) {
+export const getMarginTop = (isLegendBottom, config) => {
+  if (!isLegendBottom) {
     return '0px'
   }
-  if (isBottomOrSmallViewport && config.brush?.active) {
+  if (isLegendBottom && config.brush?.active) {
     const BRUSH_HEIGHT_MULTIPLIER = 1.5
     return `${config.brush.height * BRUSH_HEIGHT_MULTIPLIER}px`
   }
-  return '20px'
+  return '27px'
 }
-export const getMarginBottom = (config, hasSuppression) => {
+export const getMarginBottom = (isLegendBottom, config) => {
   const isLegendTop = config.legend?.position === 'top' && !config.legend.hide
-
+  const hasSuppression =
+    !config.legend.hideSuppressionLink &&
+    config.visualizationSubType !== 'stacked' &&
+    config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol))
   let marginBottom = 0
 
-  if (isLegendTop) marginBottom = config.legend.hideBorder.topBottom ? 15 : 25
+  if (isLegendTop) marginBottom = 27
+
+  if (isLegendTop && config.dataFormat?.onlyShowTopPrefixSuffix) marginBottom += 9
+
+  if (isLegendBottom) marginBottom += 9
 
   if (hasSuppression) marginBottom += 40
 

package/src/components/Legend/tests/getLegendClasses.test.ts

@@ -47,41 +47,24 @@ describe('getLegendClasses', () => {
     }
     const result = getLegendClasses(config)
     expect(result.containerClasses).toContain('bottom')
-    expect(result.innerClasses).toContain('double-column')
     expect(result.innerClasses).toContain('bottom')
     expect(result.innerClasses).toContain('single-row')
   })
 
-  it('should return correct classes for top position with vertical sorting', () => {
+  it('should return correct classes for TOP position with double column', () => {
     const config: ChartConfig = {
       legend: {
         position: 'top',
         singleRow: false,
         reverseLabelOrder: false,
-        verticalSorted: true,
+        verticalSorted: false,
         hideBorder: { side: false, topBottom: false }
       }
     }
     const result = getLegendClasses(config)
     expect(result.containerClasses).toContain('top')
-    expect(result.innerClasses).toContain('double-column')
     expect(result.innerClasses).toContain('top')
-    expect(result.innerClasses).toContain('vertical-sorted')
-  })
-
-  it('should return correct classes for reverse label order', () => {
-    const config: ChartConfig = {
-      legend: {
-        position: 'bottom',
-        singleRow: false,
-        reverseLabelOrder: true,
-        verticalSorted: false,
-        hideBorder: { side: false, topBottom: false }
-      }
-    }
-    const result = getLegendClasses(config)
-    expect(result.innerClasses).toContain('d-flex')
-    expect(result.innerClasses).toContain('flex-column-reverse')
+    expect(result.innerClasses).toContain('double-column')
   })
 
   it('should return correct classes for hide border side', () => {

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

@@ -1,8 +1,9 @@
 import React from 'react'
 import chroma from 'chroma-js'
 import { type ChartConfig } from '../../../types/ChartConfig'
+import { GlyphDiamond, GlyphCircle, GlyphSquare, GlyphTriangle, GlyphCross, Glyph as CustomGlyph } from '@visx/glyph'
+import { Text } from '@visx/text'
 
-// todo: change this config obj to ChartConfig once its created
 type LineChartCircleProps = {
   circleData: object[]
   config: ChartConfig
@@ -23,9 +24,25 @@ type LineChartCircleProps = {
   parseDate: any
   seriesAxis: string
   dataIndex: number
+  seriesIndex: number
   mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS'
 }
-
+const Glyphs = [
+  GlyphCircle,
+  GlyphSquare,
+  GlyphTriangle,
+  GlyphDiamond,
+  GlyphTriangle,
+  GlyphCross,
+  ({ fill }: { fill: string }) => (
+    <CustomGlyph>
+      {/* Render Filled Pentagon */}
+      <Text fill={fill} fontSize={14} textAnchor='middle' verticalAnchor='middle'>
+        &#x2B1F;
+      </Text>
+    </CustomGlyph>
+  )
+]
 const LineChartCircle = (props: LineChartCircleProps) => {
   const {
     config,
@@ -42,10 +59,18 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     data,
     circleData,
     dataIndex,
-    mode
+    mode,
+    seriesIndex
   } = props
-  const { lineDatapointStyle } = config
+  const { lineDatapointStyle, visual } = config
   const filtered = config?.runtime?.series.filter(s => s.dataKey === seriesKey)?.[0]
+  const Shape =
+    Glyphs[
+      config.visual.lineDatapointSymbol === 'standard' && seriesIndex < visual.maximumShapeAmount ? seriesIndex : 0
+    ]
+  const isReversedTriangle = seriesIndex === 4
+  const transformShape = (top, left) => `translate(${left}, ${top})${isReversedTriangle ? ' rotate(180)' : ''}`
+
   // If we're not showing the circle, simply return
   const getColor = (
     displayArea: boolean,
@@ -55,13 +80,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     seriesKey: string
   ) => {
     const seriesLabels = config.runtime.seriesLabels || []
-    let color
-
-    if (displayArea) {
-      color = colorScale(seriesLabels[hoveredKey] || seriesKey)
-    } else {
-      color = 'transparent'
-    }
+    let color = displayArea ? colorScale(seriesLabels[hoveredKey] || seriesKey) : ' transparent'
 
     if (config.lineDatapointColor === 'Lighter than Line' && color !== 'transparent' && color) {
       color = chroma(color).brighten(1)
@@ -74,27 +93,30 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
     )
   }
-  if (mode === 'ALWAYS_SHOW_POINTS') {
-    if (lineDatapointStyle === 'hidden') return <></>
-    const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
-
+  if (mode === 'ALWAYS_SHOW_POINTS' && lineDatapointStyle !== 'hidden') {
     if (lineDatapointStyle === 'always show') {
       const isMatch = circleData?.some(
         cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey]
       )
-      if (isMatch || !filtered) {
+
+      if (
+        isMatch ||
+        !filtered ||
+        (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard')
+      )
         return <></>
-      }
+      const positionLeft = getXPos(d[config.xAxis.dataKey])
+      const positionTop = filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])
+
       return (
-        <circle
-          cx={getXPos(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 }}
-        />
+        <g transform={transformShape(positionTop, positionLeft)}>
+          <Shape
+            opacity={d[seriesKey] ? 1 : 0}
+            fillOpacity={1}
+            fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
+            style={{ filter: 'unset', opacity: 1 }}
+          />
+        </g>
       )
     }
   }
@@ -120,84 +142,64 @@ const LineChartCircle = (props: LineChartCircleProps) => {
 
       //    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 || !hoveredSeriesValue) {
+        if (
+          isMatch ||
+          !hoveredSeriesValue ||
+          (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard')
+        ) {
           return <></>
         }
 
+        const positionTop = hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)
+        const positionLeft = getXPos(hoveredXValue)
         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}`}
-          />
+          <g transform={transformShape(positionTop, positionLeft)}>
+            <Shape
+              size={55}
+              opacity={1}
+              fillOpacity={1}
+              fill={getColor(displayArea, colorScale, config, hoveredSeriesKey, seriesKey)}
+              style={{ filter: 'unset', opacity: 1 }}
+            />
+          </g>
         )
       })
     }
   }
-
   if (mode === 'ISOLATED_POINTS') {
     const drawIsolatedPoints = (currentIndex, seriesKey) => {
-      let isMatch = false
       const currentPoint = data[currentIndex]
-      const previousPoint = currentIndex > 0 ? data[currentIndex - 1] : null
-      const nextPoint = currentIndex < data.length - 1 ? data[currentIndex + 1] : null
-      let res = false
-      // check if isolated points has overlap with circle effect
-      circleData.forEach(item => {
-        if (item?.data[seriesKey] === currentPoint[seriesKey]) {
-          isMatch = true
-        }
-      })
-
-      // Handle the first point in the array
-      if (currentIndex === 0 && nextPoint && !nextPoint[seriesKey]) {
-        res = true
-      }
-      // Handle the last point in the array
-      if (currentIndex === data.length - 1 && previousPoint && !previousPoint[seriesKey]) {
-        res = 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
-        }
-      }
-      if (isMatch) {
-        res = false
-      }
-
-      return res
+      const previousPoint = data[currentIndex - 1] || {}
+      const nextPoint = data[currentIndex + 1] || {}
+
+      const isMatch = circleData.some(item => item?.data[seriesKey] === currentPoint[seriesKey])
+      if (isMatch) return false
+
+      const isFirstPoint = currentIndex === 0 && !nextPoint[seriesKey]
+      const isLastPoint = currentIndex === data.length - 1 && !previousPoint[seriesKey]
+      const isMiddlePoint =
+        currentIndex > 0 &&
+        currentIndex < data.length - 1 &&
+        currentPoint[seriesKey] &&
+        !previousPoint[seriesKey] &&
+        !nextPoint[seriesKey]
+
+      return isFirstPoint || isLastPoint || isMiddlePoint
     }
 
-    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])}
-          />
-        )
-      }
+    if (drawIsolatedPoints(dataIndex, seriesKey) && !config.series.some(s => s.dynamicCategory)) {
+      const positionTop = filtered?.axis === 'Right' ? yScaleRight(d[filtered?.dataKey]) : yScale(d[filtered?.dataKey])
+      const positionLeft = getXPos(d[config.xAxis?.dataKey])
+      const color = colorScale(config.runtime.seriesLabels[seriesKey])
+
+      return (
+        <g transform={transformShape(positionTop, positionLeft)}>
+          <Shape size={124} stroke={color} fill={color} />
+        </g>
+      )
     }
   }
 

package/src/components/LineChart/index.tsx

@@ -150,12 +150,14 @@ const LineChart = (props: LineChartProps) => {
                           parseDate={parseDate}
                           yScaleRight={yScaleRight}
                           seriesAxis={seriesAxis}
+                          seriesIndex={index}
                           key={`line-circle--${dataIndex}`}
                         />
                       )}
 
                       <LineChartCircle
                         mode='ISOLATED_POINTS'
+                        seriesIndex={index}
                         dataIndex={dataIndex}
                         tableData={tableData}
                         circleData={circleData}
@@ -180,6 +182,7 @@ const LineChart = (props: LineChartProps) => {
               <>
                 {lineDatapointStyle === 'hover' && (
                   <LineChartCircle
+                    seriesIndex={index}
                     tableData={tableData}
                     dataIndex={0}
                     mode='HOVER_POINTS'
@@ -198,6 +201,7 @@ const LineChart = (props: LineChartProps) => {
                   />
                 )}
               </>
+
               {/* SPLIT LINE */}
               {isSplitLine ? (
                 <>