@cdc/chart 4.25.3-6 → 4.25.5-1

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
+  })
 }

package/src/components/LineChart/index.tsx

@@ -28,7 +28,6 @@ const LineChart = (props: LineChartProps) => {
   const {
     getXAxisData,
     getYAxisData,
-    handleTooltipClick,
     handleTooltipMouseOff,
     handleTooltipMouseOver,
     tooltipData,
@@ -36,53 +35,53 @@ const LineChart = (props: LineChartProps) => {
     xScale,
     yMax,
     yScale,
-  } = props
+    } = props
 
   // prettier-ignore
   const { colorScale, config, formatNumber, handleLineType, parseDate, seriesHighlight, tableData, transformedData, updateConfig, brushConfig,clean  } = useContext<ChartContext>(ConfigContext)
   const { yScaleRight } = useRightAxis({ config, yMax, data: transformedData, updateConfig })
-  if (!handleTooltipMouseOver) return
+  const showSingleSeries = config.tooltips.singleSeries
 
   const DEBUG = false
   const { lineDatapointStyle, showLineSeriesLabels, legend } = config
-  let data = transformedData
-  let tableD = tableData
+  const isBrushOn = brushConfig.data.length > 0 && config.brush?.active
   // if brush on use brush data and clean
-  if (brushConfig.data.length > 0 && config.brush?.active) {
-    data = clean(brushConfig.data)
-    tableD = clean(brushConfig.data)
-  }
+  const data = isBrushOn ? clean(brushConfig.data) : transformedData
+  const _tableData = isBrushOn ? clean(brushConfig.data) : tableData
 
   const xPos = d => {
     return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
 
+  const tooltipPoints = []
+
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={Number(config.runtime.yAxis.size)}>
-        {' '}
+      <Group left={Number(config.runtime.yAxis.size)} className='line-chart-group'>
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
           const seriesData = config.runtime.series.find(item => item.dataKey === seriesKey)
+          const _seriesKey = seriesData.dynamicCategory ? seriesData.originalDataKey : seriesKey
           const lineType = seriesData.type
           const seriesAxis = seriesData.axis || 'left'
           const displayArea =
             legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
 
-          const suppressedSegments = createDataSegments(
-            tableData,
+          const suppressedSegments = createDataSegments({
+            data: tableData,
             seriesKey,
-            config.preliminaryData,
-            config.xAxis.dataKey
-          )
+            preliminaryData: config.preliminaryData,
+            dynamicCategory: seriesData.dynamicCategory,
+            originalSeriesKey: _seriesKey,
+            colorScale
+          })
           const isSplitLine =
             config?.preliminaryData?.filter(pd => pd.style && !pd.style.includes('Circles')).length > 0
 
           const _data = seriesData.dynamicCategory
             ? data.filter(d => d[seriesData.dynamicCategory] === seriesKey)
             : data
-          const _seriesKey = seriesData.dynamicCategory ? seriesData.originalDataKey : seriesKey
-          const circleData = filterCircles(config?.preliminaryData, tableD, _seriesKey)
+          const circleData = filterCircles(config?.preliminaryData, tableData, _seriesKey)
           return (
             <Group
               key={`series-${seriesKey}-${index}`}
@@ -108,11 +107,15 @@ const LineChart = (props: LineChartProps) => {
                 height={Number(yMax)}
                 fill={DEBUG ? 'red' : 'transparent'}
                 fillOpacity={0.05}
-                onMouseMove={e => handleTooltipMouseOver(e, tableData)}
-                onMouseOut={handleTooltipMouseOff}
-                onClick={e => handleTooltipClick(e, data)}
               />
               {_data.map((d, dataIndex) => {
+                tooltipPoints.push({
+                  color: colorScale(config.runtime.seriesLabels[seriesKey]),
+                  seriesKey: _seriesKey,
+                  seriesIndex: index,
+                  xValue: d[config.xAxis.dataKey],
+                  yValue: d[_seriesKey]
+                })
                 return (
                   isNumber(d[_seriesKey]) && (
                     <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
@@ -136,7 +139,6 @@ const LineChart = (props: LineChartProps) => {
                         <LineChartCircle
                           mode='ALWAYS_SHOW_POINTS'
                           dataIndex={dataIndex}
-                          circleData={circleData}
                           tableData={tableData}
                           data={_data}
                           d={d}
@@ -155,18 +157,37 @@ const LineChart = (props: LineChartProps) => {
                         />
                       )}
 
+                      {(lineDatapointStyle === 'hover' || lineDatapointStyle === 'hidden') && (
+                        <LineChartCircle
+                          mode='HOVER_POINTS'
+                          dataIndex={dataIndex}
+                          tableData={tableData}
+                          data={_data}
+                          d={d}
+                          config={config}
+                          seriesKey={_seriesKey}
+                          displayArea={displayArea}
+                          xScale={xScale}
+                          yScale={yScale}
+                          colorScale={colorScale}
+                          parseDate={parseDate}
+                          yScaleRight={yScaleRight}
+                          seriesAxis={seriesAxis}
+                          seriesIndex={index}
+                          key={`line-hover-circle--${dataIndex}`}
+                        />
+                      )}
+
                       <LineChartCircle
                         mode='ISOLATED_POINTS'
                         seriesIndex={index}
                         dataIndex={dataIndex}
                         tableData={tableData}
-                        circleData={circleData}
                         data={_data}
                         d={d}
                         config={config}
                         seriesKey={_seriesKey}
                         displayArea={displayArea}
-                        tooltipData={tooltipData}
                         xScale={xScale}
                         yScale={yScale}
                         colorScale={colorScale}
@@ -179,28 +200,6 @@ const LineChart = (props: LineChartProps) => {
                   )
                 )
               })}
-              <>
-                {lineDatapointStyle === 'hover' && (
-                  <LineChartCircle
-                    seriesIndex={index}
-                    tableData={tableData}
-                    dataIndex={0}
-                    mode='HOVER_POINTS'
-                    circleData={circleData}
-                    data={_data}
-                    config={config}
-                    seriesKey={seriesKey}
-                    displayArea={displayArea}
-                    tooltipData={tooltipData}
-                    xScale={xScale}
-                    yScale={yScale}
-                    colorScale={colorScale}
-                    parseDate={parseDate}
-                    yScaleRight={yScaleRight}
-                    seriesAxis={seriesAxis}
-                  />
-                )}
-              </>
 
               {/* SPLIT LINE */}
               {isSplitLine ? (
@@ -217,15 +216,17 @@ const LineChart = (props: LineChartProps) => {
                     }
                     styles={createStyles({
                       preliminaryData: config.preliminaryData,
-                      data: tableD,
+                      data: tableData,
                       stroke: colorScale(config.runtime.seriesLabels[seriesKey]),
                       strokeWidth: seriesData.weight || 2,
                       handleLineType,
                       lineType,
-                      seriesKey
+                      seriesKey,
+                      dynamicCategory: seriesData.dynamicCategory,
+                      originalSeriesKey: _seriesKey
                     })}
                     defined={(item, i) => {
-                      return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                      return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
                     }}
                   />
 
@@ -238,16 +239,22 @@ const LineChart = (props: LineChartProps) => {
                           x={d => xPos(d)}
                           y={d =>
                             seriesAxis === 'Right'
-                              ? yScaleRight(getYAxisData(d, seriesKey))
-                              : yScale(Number(getYAxisData(d, seriesKey)))
+                              ? yScaleRight(getYAxisData(d, _seriesKey))
+                              : yScale(Number(getYAxisData(d, _seriesKey)))
+                          }
+                          stroke={
+                            seriesData.dynamicCategory
+                              ? segment.color
+                              : colorScale(config.runtime.seriesLabels[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
+                            return (
+                              item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
+                            )
                           }}
                         />
                       )
@@ -269,6 +276,7 @@ const LineChart = (props: LineChartProps) => {
                           return (
                             <AreaClosed
                               key={`area-closed-${seriesKey}-${categoryIndex}`}
+                              className='confidence-interval'
                               data={categoryData}
                               x={d => xPos(d)}
                               y0={d => yScale(d[config.confidenceKeys.lower])} // Lower bound of the confidence interval
@@ -393,21 +401,32 @@ const LineChart = (props: LineChartProps) => {
                       break
                     }
                   }
-                  if (!lastDatum) {
+                  if (!lastDatum || legend.position === 'right') {
                     return <></>
                   }
+
+                  let labelText = config.runtime.seriesLabels[seriesKey] || seriesKey
+                  // truncate labels longer that 10 chars
+                  const ellipsis = '...'
+                  if (labelText.length > 10) {
+                    labelText = labelText.substring(0, 10) + ellipsis
+                  }
+
                   return (
                     <Text
+                      display={
+                        legend.behavior === 'highlight' ||
+                        (seriesHighlight.length === 0 && !legend.dynamicLegend) ||
+                        seriesHighlight.indexOf(seriesKey) !== -1
+                          ? 'block'
+                          : 'none'
+                      }
                       x={xPos(lastDatum) + 5}
                       y={yScale(getYAxisData(lastDatum, seriesKey))}
                       alignmentBaseline='middle'
-                      fill={
-                        config.colorMatchLineSeriesLabels && colorScale
-                          ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey)
-                          : 'black'
-                      }
+                      fill={colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey)}
                     >
-                      {config.runtime.seriesLabels[seriesKey] || seriesKey}
+                      {labelText}
                     </Text>
                   )
                 })}
@@ -421,6 +440,52 @@ const LineChart = (props: LineChartProps) => {
           </Text>
         )}
       </Group>
+      <Group left={Number(config.runtime.yAxis.size)} className='glyph-tooltip-group'>
+        <Group key={`tooltip-group`} display={'block'}>
+          {/* tooltips */}
+          <Bar
+            key={'tooltip bars'}
+            width={Number(xMax)}
+            height={Number(yMax)}
+            fill={DEBUG ? 'red' : 'transparent'}
+            fillOpacity={0.05}
+            onMouseMove={e => {
+              if (showSingleSeries) return
+              handleTooltipMouseOver(e, tableData)
+            }}
+            onMouseOut={handleTooltipMouseOff}
+          />
+          {tooltipPoints.map((d, dataIndex) => {
+            const { _data, seriesKey, seriesIndex, color } = d
+            return (
+              <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
+                <LineChartCircle
+                  mode='TOOLTIP_POINTS'
+                  dataIndex={dataIndex}
+                  tooltipPoint={d}
+                  tableData={tableData}
+                  data={_data}
+                  d={d}
+                  config={config}
+                  seriesKey={seriesKey}
+                  displayArea={true}
+                  tooltipData={tooltipData}
+                  xScale={xScale}
+                  yScale={yScale}
+                  colorScale={colorScale}
+                  parseDate={parseDate}
+                  yScaleRight={yScaleRight}
+                  seriesAxis={'[circle]'}
+                  seriesIndex={seriesIndex}
+                  key={`line-circle--${dataIndex}`}
+                  handleTooltipMouseOver={handleTooltipMouseOver}
+                  handleTooltipMouseOff={handleTooltipMouseOff}
+                />
+              </React.Fragment>
+            )
+          })}
+        </Group>
+      </Group>
       {config.visualizationType === 'Bump Chart' && (
         <LineChartBumpCircle config={config} xScale={xScale} yScale={yScale} />
       )}