@cdc/chart 4.26.4 → 4.26.6

package/src/components/LineChart/helpers.ts

@@ -2,6 +2,9 @@ import { DataItem, StyleProps, Style } from './LineChartProps'
 import { PreliminaryDataItem } from '../../types/ChartConfig'
 
 import _ from 'lodash'
+
+const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
+
 export const createStyles = (props: StyleProps): Style[] => {
   const {
     preliminaryData,
@@ -15,17 +18,18 @@ export const createStyles = (props: StyleProps): Style[] => {
     originalSeriesKey
   } = props
 
-  const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
   const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(
     pd => pd.seriesKeys?.length && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect'
   )
   const isEffectLine = (pd, dataPoint) => {
     if (dynamicCategory) {
+      // In dynamic category mode, check the attribute column (pd.column) for the effect marker
+      // seriesKey is the runtime series key derived from the category column
       return (
         pd.type === 'effect' &&
         pd.style !== 'Open Circles' &&
         pd.seriesKeys.includes(seriesKey) &&
-        String(dataPoint[dynamicSeriesKey]) === String(pd.value)
+        dataPoint[pd.column] === pd.value
       )
     } else {
       return (
@@ -41,24 +45,29 @@ export const createStyles = (props: StyleProps): Style[] => {
     validPreliminaryData.find(pd => isEffectLine(pd, point))
 
   const styles: Style[] = []
-  const createStyle = (lineStyle): Style => ({
-    stroke: stroke,
-    strokeWidth: strokeWidth,
-    strokeDasharray: lineStyle
-  })
+  const createStyle = (lineStyle, customWeight?: number | string): Style => {
+    const parsedWeight = Number(customWeight)
+    const hasValidWeight =
+      customWeight !== '' && customWeight != null && Number.isFinite(parsedWeight) && parsedWeight >= 1
+    return {
+      stroke: stroke,
+      strokeWidth: hasValidWeight ? parsedWeight : strokeWidth,
+      strokeDasharray: lineStyle
+    }
+  }
 
   data.forEach((d, index) => {
     const matchingPd: PreliminaryDataItem = getMatchingPd(d)
 
     let style: Style = matchingPd
-      ? createStyle(handleLineType(matchingPd.style))
+      ? createStyle(handleLineType(matchingPd.style), matchingPd.weight)
       : createStyle(handleLineType(lineType))
 
     styles.push(style)
 
     // If matchingPd exists, update the previous style if there is a previous element
     if (matchingPd && index > 0) {
-      styles[index - 1] = createStyle(handleLineType(matchingPd.style))
+      styles[index - 1] = createStyle(handleLineType(matchingPd.style), matchingPd.weight)
     }
   })
   return styles as Style[]
@@ -67,8 +76,17 @@ export const createStyles = (props: StyleProps): Style[] => {
 export const filterCircles = (
   preliminaryData: PreliminaryDataItem[],
   data: DataItem[],
-  seriesKey: string
+  seriesKey: string,
+  dynamicCategory?: string,
+  originalSeriesKey?: string
 ): DataItem[] => {
+  // In dynamic category mode:
+  // - seriesKey is the runtime series key for matching against seriesKeys
+  // - originalSeriesKey is the data value column (e.g., "Value") for checking if data exists
+  // In standard mode:
+  // - seriesKey is used for both purposes
+  const valueKey = dynamicCategory ? originalSeriesKey : seriesKey
+
   // Filter and map preliminaryData to get circlesFiltered
   const circlesFiltered = preliminaryData
     ?.filter(item => item.style.includes('Circles') && item.type === 'effect' && item.seriesKeys?.length)
@@ -86,7 +104,7 @@ export const filterCircles = (
       if (
         item[fc.column] === fc.value &&
         fc.seriesKeys.includes(seriesKey) &&
-        item[seriesKey] &&
+        isCalculable(item[valueKey]) &&
         fc.style === 'Open Circles'
       ) {
         const result = {
@@ -99,7 +117,7 @@ export const filterCircles = (
       if (
         (!fc.value || item[fc.column] === fc.value) &&
         fc.seriesKeys.includes(seriesKey) &&
-        item[seriesKey] &&
+        isCalculable(item[valueKey]) &&
         fc.style === 'Filled Circles'
       ) {
         const result = {
@@ -115,7 +133,6 @@ export const filterCircles = (
   return filteredData
 }
 
-const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
 const handleFirstIndex = ({
   data,
   seriesKey,
@@ -129,7 +146,8 @@ const handleFirstIndex = ({
   const result = {
     data: { '0': [] },
     style: '',
-    color: ''
+    color: '',
+    weight: undefined
   }
 
   // If data is empty, return the empty result
@@ -150,6 +168,7 @@ const handleFirstIndex = ({
 
     result.data[pairCount].push(modifiedItem)
     result.style = suppressionData.style
+    result.weight = suppressionData.weight
     result.color = dynamicCategory && modifiedItem ? colorScale(modifiedItem[dynamicCategory]) : ''
 
     // Find the next calculable item index
@@ -180,7 +199,8 @@ const handleLastIndex = ({
   const result = {
     data: { '0': [] },
     style: '',
-    color: ''
+    color: '',
+    weight: undefined
   }
   const lastIndexDataItem = data[data.length - 1]
 
@@ -203,6 +223,7 @@ const handleLastIndex = ({
         lastAddedIndex = prevIndex
       }
       result.style = pd.style
+      result.weight = pd.weight
       result.color = colorScale(modifiedItem[dynamicCategory])
     }
   })
@@ -222,7 +243,8 @@ const handleMiddleIndices = ({
   let result = {
     data: {},
     style: '',
-    color: 'red'
+    color: 'red',
+    weight: undefined
   }
 
   //skip processing if data or preliminaryData is not an array
@@ -260,6 +282,7 @@ const handleMiddleIndices = ({
         // Only add siblings to results if both siblings are found
         if (siblingBefore && siblingAfter) {
           result.style = pd.style
+          result.weight = pd.weight
           result.color = colorScale(item[dynamicCategory])
           result.data[pairCount++] = [siblingBefore, siblingAfter]
         }

package/src/components/LineChart/index.tsx

@@ -18,6 +18,7 @@ import { filterCircles, createStyles, createDataSegments } from './helpers'
 import { getLabelPositionForDataPoint } from './helpers/labelPositioning'
 import LineChartCircle from './components/LineChart.Circle'
 import LineChartBumpCircle from './components/LineChart.BumpCircle'
+import { getYAxisDomainData } from '../../helpers/getYAxisDomainData'
 import isNumber from '@cdc/core/helpers/isNumber'
 
 // Types
@@ -39,9 +40,25 @@ const LineChart = (props: LineChartProps) => {
     yAxisWidth,
     } = props
 
-  // prettier-ignore
-  const { colorScale, config, formatNumber, handleLineType, parseDate, seriesHighlight, tableData, transformedData:data, updateConfig,   } = useContext<ChartContext>(ConfigContext)
-  const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
+  const {
+    colorScale,
+    config,
+    formatNumber,
+    handleLineType,
+    parseDate,
+    seriesHighlight,
+    tableData,
+    transformedData: data,
+    updateConfig,
+    yAxisDomainData
+  } = useContext<ChartContext>(ConfigContext)
+  const dataForRightAxis = getYAxisDomainData({
+    config,
+    data,
+    tableData,
+    fullEligibleDomainData: yAxisDomainData
+  })
+  const { yScaleRight } = useRightAxis({ config, yMax, data: dataForRightAxis, updateConfig })
   const showSingleSeries = config.tooltips.singleSeries
   if (!handleTooltipMouseOver) return
 
@@ -80,7 +97,13 @@ const LineChart = (props: LineChartProps) => {
           const _data = seriesData.dynamicCategory
             ? data.filter(d => d[seriesData.dynamicCategory] === seriesKey)
             : data
-          const circleData = filterCircles(config?.preliminaryData, tableData, _seriesKey)
+          const circleData = filterCircles(
+            config?.preliminaryData,
+            tableData,
+            seriesKey,
+            seriesData.dynamicCategory,
+            _seriesKey
+          )
 
           // Prepare sorted data for line and area rendering
           const sortedData =
@@ -296,7 +319,7 @@ const LineChart = (props: LineChartProps) => {
                               ? segment.color
                               : colorScale(config.runtime.seriesLabels[seriesKey])
                           }
-                          strokeWidth={seriesData[0]?.weight || 2}
+                          strokeWidth={Number(segment.weight) || seriesData.weight || 2}
                           strokeOpacity={1}
                           shapeRendering='geometricPrecision'
                           strokeDasharray={handleLineType(segment.style)}

package/src/components/LinearChart/tests/LinearChart.test.tsx

@@ -5,6 +5,7 @@ import LinearChart from '../../LinearChart'
 import ConfigContext from '../../../ConfigContext'
 import { createMockChartContext } from './mockConfigContext'
 import forestPlotConfig from '../../../../examples/feature/forest-plot/forest-plot.json'
+import * as suppressionHelpers from '../../../helpers/getHasBoundarySuppression'
 
 // Mock ResizeObserver
 vi.stubGlobal(
@@ -72,7 +73,51 @@ const getLeftAxisLabelTransforms = container =>
     .map(label => label.getAttribute('transform'))
     .filter(Boolean)
 
+const sidePlacementYAxis = {
+  hideAxis: false,
+  hideLabel: false,
+  hideTicks: false,
+  size: '50',
+  gridLines: true,
+  label: 'Y-Axis',
+  titlePlacement: 'side',
+  tickRotation: 0,
+  anchors: [],
+  axisPadding: 0,
+  labelPlacement: 'On Date/Category Axis',
+  rightAxisSize: 0
+}
+
 describe('LinearChart', () => {
+  describe('suppression domain data source', () => {
+    it('uses excludedData fallback for suppression detection when Y-axis domain is stable and yAxisDomainData is not provided', () => {
+      const suppressionSpy = vi.spyOn(suppressionHelpers, 'getHasBoundarySuppression').mockReturnValue(false)
+      const excludedRows = [{ Date: '2020-01-01', Cases: 'SUPP' }]
+      const tableRows = [{ Date: '2020-01-01', Cases: 12 }]
+
+      renderLinearChart(
+        {
+          visualizationType: 'Line',
+          yAxis: {
+            ...createMockChartContext().config.yAxis,
+            filterDomainBehavior: 'stable'
+          }
+        },
+        {
+          transformedData: tableRows as any,
+          tableData: tableRows as any,
+          excludedData: excludedRows as any,
+          yAxisDomainData: undefined
+        }
+      )
+
+      expect(suppressionSpy).toHaveBeenCalled()
+      expect(suppressionSpy.mock.calls[0][0].rows).toBe(excludedRows)
+
+      suppressionSpy.mockRestore()
+    })
+  })
+
   describe('rendering', () => {
     it('renders without crashing', () => {
       const { container } = renderLinearChart()
@@ -238,26 +283,103 @@ describe('LinearChart', () => {
       expect(leftAxis).toBeTruthy()
     })
 
+    it('does not render the side y-axis title inside the svg when titlePlacement is top', () => {
+      const { container } = renderLinearChart()
+
+      expect(container.querySelector('.left-axis text.y-label')).toBeFalsy()
+    })
+
+    it('does not render the top y-axis title inside LinearChart when titlePlacement is top', () => {
+      const { container } = renderLinearChart()
+
+      expect(container.querySelector('.y-axis-top-title')).toBeFalsy()
+    })
+
+    it('renders the side y-axis title inside the svg when titlePlacement is side', () => {
+      const { container } = renderLinearChart({
+        yAxis: sidePlacementYAxis
+      })
+
+      expect(container.querySelector('.y-axis-top-title')).toBeFalsy()
+      expect(container.querySelector('.left-axis text.y-label')).toBeTruthy()
+    })
+
     it('renders bottom axis group', () => {
       const { container } = renderLinearChart()
       const bottomAxis = container.querySelector('.bottom-axis')
       expect(bottomAxis).toBeTruthy()
     })
 
+    it('uses vizViewport for x-axis viewport tick overrides', () => {
+      const data = [
+        { Date: '2024-01-01', Value: 1 },
+        { Date: '2024-02-01', Value: 2 },
+        { Date: '2024-03-01', Value: 3 },
+        { Date: '2024-04-01', Value: 4 },
+        { Date: '2024-05-01', Value: 5 },
+        { Date: '2024-06-01', Value: 6 }
+      ]
+
+      const { container } = renderLinearChart(
+        {
+          data,
+          preliminaryData: [],
+          series: [{ dataKey: 'Value', axis: 'Left' }],
+          xAxis: {
+            type: 'date',
+            dataKey: 'Date',
+            label: 'X-Axis',
+            hideAxis: false,
+            hideLabel: false,
+            hideTicks: false,
+            size: '50',
+            tickRotation: 0,
+            maxTickRotation: 90,
+            anchors: [],
+            axisPadding: 0,
+            dateParseFormat: '%Y-%m-%d',
+            dateDisplayFormat: '%b %Y'
+          },
+          runtime: {
+            xAxis: {
+              type: 'date',
+              dataKey: 'Date',
+              label: 'X-Axis',
+              numTicks: 6,
+              viewportNumTicks: { xxs: 2 }
+            },
+            yAxis: {
+              size: 50,
+              label: 'Y-Axis',
+              gridLines: true
+            },
+            originalXAxis: {
+              dataKey: 'Date'
+            },
+            series: [{ dataKey: 'Value', axis: 'Left' }],
+            seriesKeys: ['Value'],
+            seriesLabels: { Value: 'Value' },
+            seriesLabelsAll: ['Value'],
+            uniqueId: 'test-chart'
+          }
+        },
+        {
+          currentViewport: 'lg',
+          vizViewport: 'xxs',
+          colorScale: () => '#000',
+          transformedData: data,
+          tableData: data
+        }
+      )
+
+      expect(container.querySelectorAll('.bottom-axis .vx-axis-tick')).toHaveLength(2)
+    })
+
     it('hides Y axis when hideAxis is true', () => {
       const { container } = renderLinearChart({
         yAxis: {
-          hideAxis: true,
-          hideLabel: false,
-          hideTicks: false,
-          size: '50',
-          gridLines: true,
-          label: 'Y-Axis',
-          tickRotation: 0,
-          anchors: [],
-          axisPadding: 0,
-          labelPlacement: 'On Date/Category Axis',
-          rightAxisSize: 0
+          ...sidePlacementYAxis,
+          hideAxis: true
         }
       })
       // The axis line should be hidden, but grid lines may still render
@@ -288,34 +410,14 @@ describe('LinearChart', () => {
 
       const baseRender = renderLinearChart({
         yAxis: {
-          hideAxis: false,
-          hideLabel: false,
-          hideTicks: false,
-          size: '50',
-          gridLines: true,
-          label: 'Y-Axis',
-          tickRotation: 0,
-          anchors: [],
-          axisPadding: 0,
-          labelPlacement: 'On Date/Category Axis',
-          rightAxisSize: 0,
+          ...sidePlacementYAxis,
           labelOffset: 0
         },
         runtime: baseRuntime
       })
       const offsetRender = renderLinearChart({
         yAxis: {
-          hideAxis: false,
-          hideLabel: false,
-          hideTicks: false,
-          size: '50',
-          gridLines: true,
-          label: 'Y-Axis',
-          tickRotation: 0,
-          anchors: [],
-          axisPadding: 0,
-          labelPlacement: 'On Date/Category Axis',
-          rightAxisSize: 0,
+          ...sidePlacementYAxis,
           labelOffset: 240
         },
         runtime: {
@@ -372,6 +474,7 @@ describe('LinearChart', () => {
           axisPadding: 0,
           labelOffset: 0
         },
+        yAxis: sidePlacementYAxis,
         runtime: baseRuntime
       })
       const offsetRender = renderLinearChart({
@@ -390,6 +493,7 @@ describe('LinearChart', () => {
           axisPadding: 0,
           labelOffset: 240
         },
+        yAxis: sidePlacementYAxis,
         runtime: {
           ...baseRuntime,
           yAxis: {

package/src/components/LinearChart/tests/mockConfigContext.ts

@@ -34,6 +34,7 @@ export const createMockConfig = (overrides: Partial<ChartConfig> = {}): ChartCon
       size: '50',
       gridLines: true,
       label: 'Y-Axis',
+      titlePlacement: 'top',
       tickRotation: 0,
       anchors: [],
       axisPadding: 0,