@cdc/chart 4.24.12 → 4.25.2-25

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,35 @@ export const getGradientConfig = (config, formatLabels, colorScale) => {
   return { colors, labels }
 }
 
-export const getMarginTop = (isBottomOrSmallViewport, config) => {
-  if (!isBottomOrSmallViewport) {
+export const getMarginTop = (isLegendBottom, config) => {
+  // margin between charts xAxis legend not to overlap axis labels,ticks.
+  const DEFAULT_MARGIN_TOP = 27
+  if (isLegendBottom && config.legend.hide) {
     return '0px'
   }
-  if (isBottomOrSmallViewport && config.brush?.active) {
-    const BRUSH_HEIGHT_MULTIPLIER = 1.5
-    return `${config.brush.height * BRUSH_HEIGHT_MULTIPLIER}px`
+  if (!isLegendBottom) {
+    return '0px'
+  }
+  if (isLegendBottom && config.brush.active && !config.legend.hide) {
+    const additiolMargin = 25
+    return `${DEFAULT_MARGIN_TOP + config.brush.height + additiolMargin}px`
+  } else {
+    return `${DEFAULT_MARGIN_TOP}px`
   }
-  return '20px'
 }
-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 filtered = config?.runtime?.series.filter(s => s.dataKey === seriesKey)?.[0]
+  const { lineDatapointStyle, visual } = config
+  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)' : ''}`
+
   // If we're not showing the circle, simply return
   const getColor = (
     displayArea: boolean,
@@ -55,14 +80,8 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     seriesKey: string
   ) => {
     const seriesLabels = config.runtime.seriesLabels || []
-    let color
-
-    if (displayArea) {
-      color = colorScale(seriesLabels[hoveredKey] || seriesKey)
-    } else {
-      color = 'transparent'
-    }
-
+    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)
     }
@@ -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>
       )
     }
   }
@@ -108,96 +130,84 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       if (!hoveredXValue) return
 
       let hoveredSeriesValue
-      let hoveredSeriesIndex
       let hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
       let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
       let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
+      const dynamicSeriesConfig = config.runtime.series.find(s => s.dynamicCategory)
+      const originalDataKey = dynamicSeriesConfig?.originalDataKey ?? seriesKey
+
       if (!hoveredSeriesKey) return
-      hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
       hoveredSeriesValue = tableData?.find(d => {
-        return d[config?.xAxis.dataKey] === hoveredXValue
-      })?.[seriesKey]
+        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) => {
-        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)) {
+      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.seriesLabelsAll[seriesIndex])
+
+      return (
+        <g transform={transformShape(positionTop, positionLeft)}>
+          <Shape size={124} stroke={color} fill={color} />
+        </g>
+      )
     }
   }
 

package/src/components/LineChart/index.tsx

@@ -89,14 +89,14 @@ const LineChart = (props: LineChartProps) => {
               opacity={
                 legend.behavior === 'highlight' &&
                 seriesHighlight.length > 0 &&
-                seriesHighlight.indexOf(_seriesKey) === -1
+                seriesHighlight.indexOf(seriesKey) === -1
                   ? 0.5
                   : 1
               }
               display={
                 legend.behavior === 'highlight' ||
                 (seriesHighlight.length === 0 && !legend.dynamicLegend) ||
-                seriesHighlight.indexOf(_seriesKey) !== -1
+                seriesHighlight.indexOf(seriesKey) !== -1
                   ? 'block'
                   : 'none'
               }
@@ -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 ? (
                 <>