@cdc/chart 4.24.10 → 4.24.12

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

@@ -15,7 +15,8 @@ export const getMarginTop = (isBottomOrSmallViewport, config) => {
     return '0px'
   }
   if (isBottomOrSmallViewport && config.brush?.active) {
-    return '35px'
+    const BRUSH_HEIGHT_MULTIPLIER = 1.5
+    return `${config.brush.height * BRUSH_HEIGHT_MULTIPLIER}px`
   }
   return '20px'
 }

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

@@ -0,0 +1,115 @@
+import { describe, it, expect } from 'vitest'
+import { getLegendClasses } from './../helpers/getLegendClasses'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+describe('getLegendClasses', () => {
+  it('should return correct classes for left position', () => {
+    const config: ChartConfig = {
+      legend: {
+        position: 'left',
+        singleRow: false,
+        reverseLabelOrder: false,
+        verticalSorted: false,
+        hideBorder: { side: false, topBottom: false }
+      }
+    }
+    const result = getLegendClasses(config)
+    expect(result.containerClasses).toContain('left')
+    // Left Position Charts can't have single row...
+    expect(result.innerClasses).not.toContain('single-row')
+  })
+
+  it('should return correct classes for right position', () => {
+    const config: ChartConfig = {
+      legend: {
+        position: 'right',
+        singleRow: false,
+        reverseLabelOrder: false,
+        verticalSorted: false,
+        hideBorder: { side: false, topBottom: false }
+      }
+    }
+    const result = getLegendClasses(config)
+    expect(result.containerClasses).toContain('right')
+    // Right Position Charts can't have single row...
+    expect(result.innerClasses).not.toContain('single-row')
+  })
+
+  it('should return correct classes for bottom position with single row', () => {
+    const config: ChartConfig = {
+      legend: {
+        position: 'bottom',
+        singleRow: true,
+        reverseLabelOrder: false,
+        verticalSorted: false,
+        hideBorder: { side: false, topBottom: false }
+      }
+    }
+    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', () => {
+    const config: ChartConfig = {
+      legend: {
+        position: 'top',
+        singleRow: false,
+        reverseLabelOrder: false,
+        verticalSorted: true,
+        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')
+  })
+
+  it('should return correct classes for hide border side', () => {
+    const config: ChartConfig = {
+      legend: {
+        position: 'left',
+        singleRow: false,
+        reverseLabelOrder: false,
+        verticalSorted: false,
+        hideBorder: { side: true, topBottom: false }
+      }
+    }
+    const result = getLegendClasses(config)
+    expect(result.containerClasses).toContain('border-0')
+  })
+
+  it('should return correct classes for hide border topBottom', () => {
+    const config: ChartConfig = {
+      legend: {
+        position: 'top',
+        singleRow: false,
+        reverseLabelOrder: false,
+        verticalSorted: false,
+        hideBorder: { side: false, topBottom: true }
+      }
+    }
+    const result = getLegendClasses(config)
+    expect(result.containerClasses).toContain('border-0')
+    expect(result.containerClasses).toContain('p-0')
+  })
+})

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

@@ -82,7 +82,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       const isMatch = circleData?.some(
         cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey]
       )
-      if (isMatch) {
+      if (isMatch || !filtered) {
         return <></>
       }
       return (

package/src/components/LineChart/helpers.ts

@@ -1,5 +1,6 @@
 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
@@ -92,8 +93,9 @@ export const filterCircles = (
 
 const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
 const handleFirstIndex = (data, seriesKey, preliminaryData) => {
+  let pairCount = '0'
   const result = {
-    data: [],
+    data: { '0': [] },
     style: ''
   }
 
@@ -116,7 +118,7 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
   if (suppressionData && suppressionData.style) {
     // Modify first item and add to result
     const modifiedItem = { ...firstIndexDataItem, [seriesKey]: 0 }
-    result.data.push(modifiedItem)
+    result.data[pairCount].push(modifiedItem)
     result.style = suppressionData.style
 
     // Find the next calculable item index
@@ -125,19 +127,20 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
       nextIndex++
     }
     if (nextIndex < data.length) {
-      result.data.push(data[nextIndex])
+      result.data[pairCount].push(data[nextIndex])
     }
   } else {
     // If no suppression, just add the first item
-    result.data.push(firstIndexDataItem)
+    result.data[pairCount].push(firstIndexDataItem)
   }
 
   return result
 }
 
 const handleLastIndex = (data, seriesKey, preliminaryData) => {
+  let pairCount = '0'
   const result = {
-    data: [],
+    data: { '0': [] },
     style: ''
   }
   let lastAddedIndex = -1 // Tracks the last index added to the result
@@ -152,7 +155,7 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
     ) {
       const lastIndex = data.length - 1
       const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
-      result.data.push(modifiedItem)
+      result.data[pairCount].push(modifiedItem)
 
       // Find previous calculable item
       let prevIndex = lastIndex - 1
@@ -160,7 +163,7 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
         prevIndex--
       }
       if (prevIndex >= 0 && lastAddedIndex !== prevIndex) {
-        result.data.push(data[prevIndex])
+        result.data[pairCount].push(data[prevIndex])
         lastAddedIndex = prevIndex
       }
       result.style = pd.style
@@ -170,47 +173,48 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
   return result
 }
 
-function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
-  const result = {
-    data: [],
+function handleMiddleIndices(data, seriesKey, preliminaryData) {
+  // slice data to remove first and last object these no need for handleMiddleIndices
+
+  let result = {
+    data: {},
     style: ''
   }
+  // Variable to count the number of sibling pairs found
+  let pairCount = 1
+
+  // 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) {
+        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])) {
+            siblingBefore = data[i]
+            break // Stop searching once a valid sibling is found
+          }
+        }
 
-  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 the nearest numeric sibling after the current index
+        for (let j = index + 1; j < data.length; j++) {
+          if (isCalculable(data[j][seriesKey])) {
+            siblingAfter = data[j]
+            break // Stop searching once a valid sibling is found
+          }
+        }
 
-      // 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])
+        // Only add siblings to results if both siblings are found
+        if (siblingBefore && siblingAfter) {
+          result.style = pd.style
+          result.data[pairCount++] = [siblingBefore, siblingAfter]
+        }
       }
     })
   })
-
-  // Deduplicate entries
-  result.data = _.uniqWith(result.data, (a, b) => a[dataKey] === b[dataKey] && a[seriesKey] === b[seriesKey])
-
   return result
 }
 
@@ -221,7 +225,9 @@ export const createDataSegments = (data, seriesKey, preliminaryData, dataKey) =>
   // Process the last index if necessary
   const lastSegment = handleLastIndex(data, seriesKey, preliminaryData)
   // Process the middle segment
-  const middleSegments = handleMiddleIndices(data, seriesKey, dataKey, preliminaryData)
+  const middleSegments = handleMiddleIndices(data, seriesKey, preliminaryData)
+
   // Combine all segments into a single array
-  return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
+  return [firstSegment, middleSegments, lastSegment]
+  // return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
 }