@cdc/chart 4.24.11 → 4.24.12-2

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

package/src/components/LineChart/index.tsx

@@ -3,7 +3,7 @@ import React, { useContext } from 'react'
 // VisX library imports
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
-import { LinePath, Bar, SplitLinePath } from '@visx/shape'
+import { LinePath, Bar, SplitLinePath, AreaClosed } from '@visx/shape'
 import { Text } from '@visx/text'
 
 // CDC core components
@@ -252,6 +252,52 @@ const LineChart = (props: LineChartProps) => {
                 </>
               ) : (
                 <>
+                  {/* Confidence Interval Band */}
+                  {config.confidenceKeys &&
+                    config.series.map((seriesData, seriesKey) => {
+                      if (seriesData.dynamicCategory) {
+                        // Get unique categories from the data
+                        const uniqueCategories = [...new Set(data.map(d => d[seriesData.dynamicCategory]))]
+
+                        return uniqueCategories.map((category, categoryIndex) => {
+                          const categoryData = data.filter(d => d[seriesData.dynamicCategory] === category)
+
+                          return (
+                            <AreaClosed
+                              key={`area-closed-${seriesKey}-${categoryIndex}`}
+                              data={categoryData}
+                              x={d => xPos(d)}
+                              y0={d => yScale(d[config.confidenceKeys.lower])} // Lower bound of the confidence interval
+                              y1={d => yScale(d[config.confidenceKeys.upper])} // Upper bound of the confidence interval
+                              opacity={0.5}
+                              fill={colorScale(category)} // Optional: Color based on category
+                              yScale={yScale}
+                              curve={allCurves[seriesData.lineType as keyof typeof allCurves]}
+                            />
+                          )
+                        })
+                      }
+
+                      // Default behavior for non-dynamic categories
+                      return (
+                        <AreaClosed
+                          key={`area-closed-${seriesKey}`}
+                          data={data}
+                          x={d => xPos(d)}
+                          y0={d => yScale(d[config.confidenceKeys.lower])}
+                          y1={d => yScale(d[config.confidenceKeys.upper])}
+                          opacity={0.5}
+                          fill={colorScale(
+                            config.runtime.seriesLabels
+                              ? config.runtime.seriesLabels[seriesData.dataKey]
+                              : seriesData.dataKey
+                          )}
+                          yScale={yScale}
+                          curve={allCurves[seriesData.lineType as keyof typeof allCurves]}
+                        />
+                      )
+                    })}
+
                   {/* STANDARD LINE */}
                   <LinePath
                     curve={allCurves[seriesData.lineType]}