@cdc/chart 4.25.3 → 4.25.6

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

@@ -1,22 +1,15 @@
-import React from 'react'
 import chroma from 'chroma-js'
-import { type ChartConfig } from '../../../types/ChartConfig'
+import { LineChartConfig, type ChartConfig } from '../../../types/ChartConfig'
 import { GlyphDiamond, GlyphCircle, GlyphSquare, GlyphTriangle, GlyphCross, Glyph as CustomGlyph } from '@visx/glyph'
 import { Text } from '@visx/text'
 
 type LineChartCircleProps = {
-  circleData: object[]
   config: ChartConfig
   data: object[]
   tableData: object[]
   d?: Object
   displayArea: boolean
   seriesKey: string
-  tooltipData: {
-    data: []
-    tooltipDataX: number
-    tooltipDataY: number
-  }
   xScale: any
   yScale: any
   yScaleRight: any
@@ -25,7 +18,14 @@ type LineChartCircleProps = {
   seriesAxis: string
   dataIndex: number
   seriesIndex: number
-  mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS'
+  mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS' | 'TOOLTIP_POINTS'
+  tooltipPoint: {
+    xValue: string | number
+    yValue: string | number
+    color: string
+  }
+  handleTooltipMouseOver?: Function
+  handleTooltipMouseOff?: Function
 }
 const Glyphs = [
   GlyphCircle,
@@ -47,146 +47,79 @@ const LineChartCircle = (props: LineChartCircleProps) => {
   const {
     config,
     d: pointData,
-    tableData,
     displayArea,
     seriesKey,
-    tooltipData,
     xScale,
     yScale,
     colorScale,
     parseDate,
     yScaleRight,
     data,
-    circleData,
+    tooltipPoint,
     dataIndex,
     mode,
-    seriesIndex
+    seriesIndex,
+    handleTooltipMouseOver,
+    handleTooltipMouseOff
   } = props
-  const { lineDatapointStyle, visual } = config
+  const { isolatedDotsSameSize, lineDatapointStyle, visual } = config as LineChartConfig
   const filtered = config?.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)' : ''}`
+  const LARGE_DOT_SIZE = 124
+  const REGULAR_DOT_SIZE = 55
+  const dotSize = isolatedDotsSameSize ? REGULAR_DOT_SIZE : LARGE_DOT_SIZE
 
-  // If we're not showing the circle, simply return
-  const getColor = (
-    displayArea: boolean,
-    colorScale: Function,
-    config: ChartConfig,
-    hoveredKey: string,
-    seriesKey: string
-  ) => {
-    const seriesLabels = config.runtime.seriesLabels || []
-    const seriesLabelsAll = config.runtime.seriesLabelsAll || []
-    let color = displayArea ? colorScale(seriesLabels[hoveredKey] || seriesLabelsAll[seriesIndex]) : ' transparent'
-    if (config.lineDatapointColor === 'Lighter than Line' && color !== 'transparent' && color) {
-      color = chroma(color).brighten(1)
-    }
-    return color
-  }
   const getXPos = hoveredXValue => {
     return (
       (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) +
       (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
     )
   }
-  if (mode === 'ALWAYS_SHOW_POINTS' && lineDatapointStyle !== 'hidden') {
-    if (lineDatapointStyle === 'always show') {
-      const isMatch = circleData?.some(
-        cd => cd[config.xAxis.dataKey] === pointData[config.xAxis.dataKey] && cd[seriesKey] === pointData[seriesKey]
-      )
 
-      if (
-        isMatch ||
-        !filtered ||
-        (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard')
-      )
-        return <></>
-      const positionLeft = getXPos(pointData[config.xAxis.dataKey])
-      const positionTop =
-        filtered.axis === 'Right' ? yScaleRight(pointData[filtered.dataKey]) : yScale(pointData[filtered.dataKey])
+  const transformShape = (xValue, yValue) => {
+    const positionLeft = getXPos(xValue)
+    const positionTop = filtered?.axis === 'Right' ? yScaleRight(yValue) : yScale(yValue)
 
-      return (
-        <g transform={transformShape(positionTop, positionLeft)}>
-          <Shape
-            opacity={pointData[seriesKey] ? 1 : 0}
-            fillOpacity={1}
-            fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
-            style={{ filter: 'unset', opacity: 1 }}
-          />
-        </g>
-      )
-    }
+    return `translate(${positionLeft}, ${positionTop})${isReversedTriangle ? ' rotate(180)' : ''}`
   }
 
-  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 hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
-      let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
-      let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
-      const dynamicSeriesConfig = config.runtime.series.find(s => s.dynamicCategory)
-      const originalDataKey = dynamicSeriesConfig?.originalDataKey ?? seriesKey
-
-      if (!hoveredSeriesKey) return
-      hoveredSeriesValue = tableData?.find(d => {
-        const dynamicCategory = dynamicSeriesConfig?.dynamicCategory
-        const matchingXValue = d[config.xAxis.dataKey] === hoveredXValue
-        if (!matchingXValue) return false
-        if (dynamicCategory) {
-          const match = d[dynamicCategory] === hoveredSeriesKey
-          return match
-        }
-        return true
-      })?.[originalDataKey]
-
-      //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
-      return tooltipData?.data.map((tooltipItem, index) => {
-        if (isNaN(hoveredSeriesValue)) return <></>
-        const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
-
-        if (
-          isMatch ||
-          !hoveredSeriesValue ||
-          (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard')
-        ) {
-          return <></>
-        }
-
-        const positionTop = hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)
-        const positionLeft = getXPos(hoveredXValue)
-        return (
-          <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 we're not showing the circle, simply return
+  const getColor = (displayArea: boolean, colorScale: Function, config: ChartConfig, hoveredKey: string) => {
+    const seriesLabels = config.runtime.seriesLabels || []
+    const seriesLabelsAll = config.runtime.seriesLabelsAll || []
+    let color = displayArea ? colorScale(seriesLabels[hoveredKey] || seriesLabelsAll[seriesIndex]) : 'transparent'
+    if (config.lineDatapointColor === 'Lighter than Line' && color !== 'transparent' && color) {
+      color = chroma(color).brighten(1)
     }
+    return color
   }
+
+  if (['ALWAYS_SHOW_POINTS', 'HOVER_POINTS'].includes(mode)) {
+    if (!filtered || (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard'))
+      return <></>
+    return (
+      <g
+        transform={transformShape(pointData[config.xAxis.dataKey], pointData[filtered?.dataKey])}
+        className={`visx-glyph-group${displayArea ? '' : '-hidden'}`}
+        data-seriesIndex={seriesIndex}
+      >
+        <Shape
+          fillOpacity={mode === 'ALWAYS_SHOW_POINTS' ? 1 : 0}
+          fill={getColor(displayArea, colorScale, config, seriesKey)}
+        />
+      </g>
+    )
+  }
+
   if (mode === 'ISOLATED_POINTS') {
     const drawIsolatedPoints = (currentIndex, seriesKey) => {
       const currentPoint = data[currentIndex]
       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 =
@@ -203,19 +136,39 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       : dataIndex
 
     if (drawIsolatedPoints(_dataIndex, seriesKey)) {
-      const positionTop =
-        filtered?.axis === 'Right' ? yScaleRight(pointData[filtered?.dataKey]) : yScale(pointData[filtered?.dataKey])
-      const positionLeft = getXPos(pointData[config.xAxis?.dataKey])
       const color = colorScale(config.runtime.seriesLabelsAll[seriesIndex])
 
       return (
-        <g transform={transformShape(positionTop, positionLeft)}>
-          <Shape size={124} stroke={color} fill={color} />
+        <g
+          transform={transformShape(pointData[config.xAxis?.dataKey], pointData[filtered?.dataKey])}
+          className={`visx-glyph-group${displayArea ? '' : '-hidden'}`}
+          data-seriesIndex={seriesIndex}
+        >
+          <Shape size={dotSize} stroke={color} fill={color} />
         </g>
       )
     }
   }
 
+  if (mode === 'TOOLTIP_POINTS' && displayArea === true) {
+    return (
+      <g
+        transform={transformShape(tooltipPoint.xValue, tooltipPoint.yValue)}
+        className='visx-glyph-circle'
+        onMouseOver={e => {
+          handleTooltipMouseOver(e)
+          if (lineDatapointStyle == 'hover') (e.target as HTMLElement).style.fillOpacity = '1'
+        }}
+        onMouseOut={e => {
+          handleTooltipMouseOff()
+          if (lineDatapointStyle == 'hover') (e.target as HTMLElement).style.fillOpacity = '0'
+        }}
+      >
+        <Shape size={55} fill={tooltipPoint.color} fillOpacity={'0'} />
+      </g>
+    )
+  }
+
   return null
 }
 

package/src/components/LineChart/helpers.ts

@@ -1,23 +1,46 @@
 import { DataItem, StyleProps, Style } from './LineChartProps'
 import { PreliminaryDataItem } from '../../types/ChartConfig'
-import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+
 import _ from 'lodash'
 export const createStyles = (props: StyleProps): Style[] => {
-  const { preliminaryData, data, stroke, strokeWidth, handleLineType, lineType, seriesKey } = props
+  const {
+    preliminaryData,
+    data,
+    stroke,
+    strokeWidth,
+    handleLineType,
+    lineType,
+    seriesKey,
+    dynamicCategory,
+    originalSeriesKey
+  } = props
 
+  const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
   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 =>
+  const isEffectLine = (pd, dataPoint) => {
+    if (dynamicCategory) {
+      return (
+        pd.type === 'effect' &&
+        pd.style !== 'Open Circles' &&
         pd.seriesKey === seriesKey &&
-        point[pd.column] === pd.value &&
+        String(dataPoint[dynamicSeriesKey]) === String(pd.value)
+      )
+    } else {
+      return (
+        pd.seriesKey === seriesKey &&
+        dataPoint[pd.column] === pd.value &&
         pd.type === 'effect' &&
         pd.style !== 'Open Circles'
-    )
+      )
+    }
+  }
+
+  const getMatchingPd = (point: DataItem): PreliminaryDataItem =>
+    validPreliminaryData.find(pd => isEffectLine(pd, point))
 
-  let styles: Style[] = []
+  const styles: Style[] = []
   const createStyle = (lineStyle): Style => ({
     stroke: stroke,
     strokeWidth: strokeWidth,
@@ -25,7 +48,8 @@ export const createStyles = (props: StyleProps): Style[] => {
   })
 
   data.forEach((d, index) => {
-    let matchingPd: PreliminaryDataItem = getMatchingPd(d)
+    const matchingPd: PreliminaryDataItem = getMatchingPd(d)
+
     let style: Style = matchingPd
       ? createStyle(handleLineType(matchingPd.style))
       : createStyle(handleLineType(lineType))
@@ -92,11 +116,20 @@ export const filterCircles = (
 }
 
 const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
-const handleFirstIndex = (data, seriesKey, preliminaryData) => {
+const handleFirstIndex = ({
+  data,
+  seriesKey,
+  preliminaryData,
+  dynamicCategory,
+  originalSeriesKey,
+  colorScale,
+  isSuppressed
+}) => {
   let pairCount = '0'
   const result = {
     data: { '0': [] },
-    style: ''
+    style: '',
+    color: ''
   }
 
   // If data is empty, return the empty result
@@ -104,26 +137,24 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
 
   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)
+  const suppressionData = (preliminaryData ?? []).find(
+    item => item && firstIndexDataItem && isSuppressed(item, firstIndexDataItem)
+  )
 
   if (suppressionData && suppressionData.style) {
     // Modify first item and add to result
-    const modifiedItem = { ...firstIndexDataItem, [seriesKey]: 0 }
+    const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
+
+    const modifiedItem = { ...firstIndexDataItem, [dynamicSeriesKey]: 0 }
+
     result.data[pairCount].push(modifiedItem)
     result.style = suppressionData.style
+    result.color = dynamicCategory && modifiedItem ? colorScale(modifiedItem[dynamicCategory]) : ''
 
     // Find the next calculable item index
     let nextIndex = 1
-    while (nextIndex < data.length && !isCalculable(data[nextIndex][seriesKey])) {
+    while (nextIndex < data.length && !isCalculable(data[nextIndex][dynamicSeriesKey])) {
       nextIndex++
     }
     if (nextIndex < data.length) {
@@ -133,33 +164,38 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
     // If no suppression, just add the first item
     result.data[pairCount].push(firstIndexDataItem)
   }
-
   return result
 }
 
-const handleLastIndex = (data, seriesKey, preliminaryData) => {
+const handleLastIndex = ({
+  data,
+  seriesKey,
+  preliminaryData,
+  dynamicCategory,
+  originalSeriesKey,
+  colorScale,
+  isSuppressed
+}) => {
   let pairCount = '0'
   const result = {
     data: { '0': [] },
-    style: ''
+    style: '',
+    color: ''
   }
-  let lastAddedIndex = -1 // Tracks the last index added to the result
+  const lastIndexDataItem = data[data.length - 1]
+
+  const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
+  let lastAddedIndex = -1
   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
-    ) {
+    if (pd.type === 'effect') return []
+    if (isSuppressed(pd, lastIndexDataItem)) {
       const lastIndex = data.length - 1
-      const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
+      const modifiedItem = { ...data[lastIndex], [dynamicSeriesKey]: 0 }
       result.data[pairCount].push(modifiedItem)
 
       // Find previous calculable item
       let prevIndex = lastIndex - 1
-      while (prevIndex >= 0 && !isCalculable(data[prevIndex][seriesKey])) {
+      while (prevIndex >= 0 && !isCalculable(data[prevIndex][dynamicSeriesKey])) {
         prevIndex--
       }
       if (prevIndex >= 0 && lastAddedIndex !== prevIndex) {
@@ -167,33 +203,47 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
         lastAddedIndex = prevIndex
       }
       result.style = pd.style
+      result.color = colorScale(modifiedItem[dynamicCategory])
     }
   })
 
   return result
 }
 
-function handleMiddleIndices(data, seriesKey, preliminaryData) {
-  // slice data to remove first and last object these no need for handleMiddleIndices
-
+export const handleMiddleIndices = ({
+  data,
+  seriesKey,
+  preliminaryData,
+  dynamicCategory,
+  originalSeriesKey,
+  colorScale,
+  isSuppressed
+}) => {
   let result = {
     data: {},
-    style: ''
+    style: '',
+    color: 'red'
   }
+
+  //skip processing if data or preliminaryData is not an array
+  if (!Array.isArray(data) || !Array.isArray(preliminaryData)) {
+    return result
+  }
+
   // Variable to count the number of sibling pairs found
   let pairCount = 1
+  const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
 
   // Loop through the data array to find each occurrence of the target value
   data.forEach((item, index) => {
     preliminaryData.forEach(pd => {
-      const targetValue = pd.value
-      if (item[seriesKey] === targetValue) {
+      if (isSuppressed(pd, item)) {
         let siblingBefore = null
         let siblingAfter = null
 
         // Find the nearest numeric sibling before the current index
         for (let i = index - 1; i >= 0; i--) {
-          if (isCalculable(data[i][seriesKey])) {
+          if (isCalculable(data[i][dynamicSeriesKey])) {
             siblingBefore = data[i]
             break // Stop searching once a valid sibling is found
           }
@@ -201,7 +251,7 @@ function handleMiddleIndices(data, seriesKey, preliminaryData) {
 
         // Find the nearest numeric sibling after the current index
         for (let j = index + 1; j < data.length; j++) {
-          if (isCalculable(data[j][seriesKey])) {
+          if (isCalculable(data[j][dynamicSeriesKey])) {
             siblingAfter = data[j]
             break // Stop searching once a valid sibling is found
           }
@@ -210,24 +260,51 @@ function handleMiddleIndices(data, seriesKey, preliminaryData) {
         // Only add siblings to results if both siblings are found
         if (siblingBefore && siblingAfter) {
           result.style = pd.style
+          result.color = colorScale(item[dynamicCategory])
           result.data[pairCount++] = [siblingBefore, siblingAfter]
         }
       }
     })
   })
+
   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, preliminaryData)
-
-  // Combine all segments into a single array
-  return [firstSegment, middleSegments, lastSegment]
-  // return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
+export const createDataSegments = props => {
+  const dynamicData = (props.data ?? []).filter(d => {
+    if (!props?.dynamicCategory) return true
+
+    return (props.preliminaryData ?? []).some(pd => d?.[props.dynamicCategory] === props?.seriesKey)
+  })
+  const isSuppressed = (pd, dataItem) => {
+    if (pd.type === 'effect' || pd.hideLineStyle) return false
+
+    if (props.dynamicCategory) {
+      return (
+        pd.type === 'suppression' &&
+        (!pd.column || pd.column === dataItem[props.dynamicCategory]) &&
+        pd.value === dataItem[props.originalSeriesKey]
+      )
+    }
+    return (
+      pd.type === 'suppression' &&
+      pd.value === dataItem[props.seriesKey] &&
+      (!pd.column || pd.column === props.seriesKey)
+    )
+  }
+  const firstSegment = handleFirstIndex({ ...props, data: dynamicData, isSuppressed })
+  const lastSegment = handleLastIndex({ ...props, data: dynamicData, isSuppressed })
+  const middleSegments = handleMiddleIndices({ ...props, data: dynamicData, isSuppressed })
+
+  const segments = [firstSegment, middleSegments, lastSegment]
+
+  // ✅ Filter: keep only segments with real data
+  return segments.filter(segment => {
+    if (!segment || !segment.data) return false
+
+    // Check if at least one non-empty array exists in `data`
+    const hasData = Object.values(segment.data).some(arr => Array.isArray(arr) && arr.length > 0)
+
+    return hasData
+  })
 }