@cdc/chart 4.26.7 → 4.26.10

package/src/components/LineChartRace/line-chart-race.css

@@ -0,0 +1,16 @@
+.line-chart-race {
+  width: 100%;
+}
+
+.line-chart-race__header {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-start;
+  margin-bottom: 1rem;
+}
+
+.line-chart-race__frame {
+  font-family: var(--fonts-nunito, var(--app-font-secondary));
+  font-size: 1.5rem;
+}

package/src/components/LinearChart/ValueAxisAnchors.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Line } from '@visx/shape'
+import { type Anchor } from '@cdc/core/types/Axis'
+
+const DEFAULT_ANCHOR_STROKE_WIDTH = 1
+
+export const alignStrokeToPixel = (position: number, strokeWidth = DEFAULT_ANCHOR_STROKE_WIDTH) =>
+  strokeWidth % 2 === 1 ? Math.round(position - 0.5) + 0.5 : Math.round(position)
+
+const hasAnchorValue = (value: Anchor['value']) => value !== undefined && value !== null && value !== ''
+
+type ValueAxisAnchorsProps = {
+  anchors?: Anchor[]
+  className: string
+  getOffset?: () => number
+  handleLineType: (lineStyle: string) => string
+  keyPrefix: string
+  xEnd: number
+  xStart: number
+  yScale: (value: string) => number
+}
+
+const ValueAxisAnchors: React.FC<ValueAxisAnchorsProps> = ({
+  anchors,
+  className,
+  getOffset = () => 0,
+  handleLineType,
+  keyPrefix,
+  xEnd,
+  xStart,
+  yScale
+}) => (
+  <>
+    {anchors?.map((anchor, index) => {
+      if (!hasAnchorValue(anchor.value)) return null
+
+      const position = yScale(anchor.value)
+      if (position === undefined || position === null || Number.isNaN(Number(position))) return null
+
+      const anchorYPosition = alignStrokeToPixel(position - getOffset())
+
+      return (
+        // prettier-ignore
+        <Line
+          key={`${keyPrefix}-${anchor.value}--${index}`}
+          strokeDasharray={handleLineType(anchor.lineStyle)}
+          stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
+          fill={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
+          className={className}
+          from={{ x: xStart, y: anchorYPosition }}
+          to={{ x: xEnd, y: anchorYPosition }}
+        />
+      )
+    })}
+  </>
+)
+
+export default ValueAxisAnchors

package/src/components/LinearChart/VisualizationRenderer.tsx

@@ -67,6 +67,19 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
 }) => {
   const { config, convertLineToBarGraph } = useContext(ConfigContext)
   const { visualizationType, visualizationSubType } = config
+  const isCombo = visualizationType === VISUALIZATION_TYPES.COMBO
+  const comboHasAreaSeries = isCombo && Boolean(config.runtime?.areaSeriesKeys?.length)
+  const comboHasBarSeries = isCombo && Boolean(config.runtime?.barSeriesKeys?.length)
+  const comboHasLineSeries = isCombo && Boolean(config.runtime?.lineSeriesKeys?.length)
+  const comboHasForecastingSeries = isCombo && Boolean(config.runtime?.forecastingSeriesKeys?.length)
+  const shouldRenderAreaChart =
+    (visualizationType === VISUALIZATION_TYPES.AREA_CHART && visualizationSubType === 'stacked') || comboHasAreaSeries
+  const shouldRenderBarChart =
+    visualizationType === VISUALIZATION_TYPES.BAR || comboHasBarSeries || convertLineToBarGraph
+  const shouldRenderLineChart =
+    comboHasLineSeries ||
+    (!isCombo && !LINE_CHART_EXCLUDED_TYPES.includes(visualizationType as any) && !convertLineToBarGraph)
+  const shouldRenderForecasting = visualizationType === VISUALIZATION_TYPES.FORECASTING || comboHasForecastingSeries
 
   return (
     <>
@@ -155,8 +168,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
       )}
 
       {/* Area Chart (Stacked) - also used by Combo */}
-      {((visualizationType === 'Area Chart' && visualizationSubType === 'stacked') ||
-        visualizationType === 'Combo') && (
+      {shouldRenderAreaChart && (
         <AreaChartStacked
           xScale={xScale}
           yScale={yScale}
@@ -174,7 +186,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
       )}
 
       {/* Bar Chart - also used by Combo and when line is converted to bar */}
-      {(visualizationType === 'Bar' || visualizationType === 'Combo' || convertLineToBarGraph) && (
+      {shouldRenderBarChart && (
         <BarChart
           xScale={xScale}
           yScale={yScale}
@@ -195,8 +207,8 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
         />
       )}
 
-      {/* Line Chart for Combo and Bump Chart */}
-      {(visualizationType === 'Combo' || visualizationType === 'Bump Chart') && (
+      {/* Line Chart */}
+      {shouldRenderLineChart && (
         <LineChart
           xScale={xScale}
           yScale={yScale}
@@ -214,25 +226,8 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
         />
       )}
 
-      {/* Line Chart for other visualization types */}
-      {!LINE_CHART_EXCLUDED_TYPES.includes(visualizationType as any) && !convertLineToBarGraph && (
-        <LineChart
-          xScale={xScale}
-          yScale={yScale}
-          yAxisWidth={yAxisWidth}
-          getXAxisData={getXAxisData}
-          getYAxisData={getYAxisData}
-          xMax={xMax}
-          yMax={yMax}
-          seriesStyle={config.runtime.series}
-          tooltipData={tooltipData}
-          handleTooltipMouseOver={handleTooltipMouseOver}
-          handleTooltipMouseOff={handleTooltipMouseOff}
-        />
-      )}
-
       {/* Forecasting - also used by Combo */}
-      {(visualizationType === 'Forecasting' || visualizationType === 'Combo') && (
+      {shouldRenderForecasting && (
         <Forecasting
           showTooltip={showTooltip}
           tooltipData={tooltipData}

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

@@ -1,30 +1,54 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import { describe, expect, it, vi, beforeAll } from 'vitest'
+import { describe, expect, it, vi, beforeAll, beforeEach } from 'vitest'
 import LinearChart from '../../LinearChart'
+import RightAxis from '../../Axis/RightAxis'
 import ConfigContext from '../../../ConfigContext'
 import { createMockChartContext } from './mockConfigContext'
 import forestPlotConfig from '../../../../examples/feature/forest-plot/forest-plot.json'
 import * as suppressionHelpers from '../../../helpers/getHasBoundarySuppression'
+import { scaleLinear } from '@visx/scale'
+
+const visualizationRendererMockState = vi.hoisted(() => ({
+  renderActual: false
+}))
+
+vi.mock('../../LinearChart/VisualizationRenderer', async importOriginal => {
+  const React = await import('react')
+  const actual = await importOriginal<typeof import('../../LinearChart/VisualizationRenderer')>()
+
+  const MockVisualizationRenderer = props => {
+    if (visualizationRendererMockState.renderActual) return React.createElement(actual.default, props)
+    return React.createElement('g', { 'data-testid': 'mock-visualization-renderer' })
+  }
+
+  return {
+    default: MockVisualizationRenderer
+  }
+})
 
 // Mock ResizeObserver
 vi.stubGlobal(
   'ResizeObserver',
-  vi.fn(() => ({
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn()
-  }))
+  vi.fn(function ResizeObserver() {
+    return {
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn()
+    }
+  })
 )
 
 // Mock IntersectionObserver
 vi.stubGlobal(
   'IntersectionObserver',
-  vi.fn(() => ({
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn()
-  }))
+  vi.fn(function IntersectionObserver() {
+    return {
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn()
+    }
+  })
 )
 
 // Mock canvas for text measurement
@@ -53,6 +77,10 @@ beforeAll(() => {
   }))
 })
 
+beforeEach(() => {
+  visualizationRendererMockState.renderActual = false
+})
+
 // Helper to render LinearChart with context
 const renderLinearChart = (
   configOverrides = {},
@@ -73,6 +101,40 @@ const getLeftAxisLabelTransforms = container =>
     .map(label => label.getAttribute('transform'))
     .filter(Boolean)
 
+const renderRightAxis = (yAxisOverrides, runtimeYAxisOverrides = {}, rightAxisWidth = 70) => {
+  const context = createMockChartContext({
+    yAxis: {
+      ...createMockChartContext().config.yAxis,
+      rightLabel: 'Right Axis',
+      ...yAxisOverrides
+    },
+    runtime: {
+      ...createMockChartContext().config.runtime,
+      yAxis: {
+        ...createMockChartContext().config.runtime.yAxis,
+        rightNumTicks: 4,
+        ...runtimeYAxisOverrides
+      }
+    }
+  })
+
+  return render(
+    <ConfigContext.Provider value={context}>
+      <svg>
+        <RightAxis
+          yScaleRight={scaleLinear({ domain: [0, 100], range: [300, 0] })}
+          yMax={300}
+          xMax={400}
+          yAxisWidth={50}
+          rightAxisWidth={rightAxisWidth}
+          tickLabelFontSize={12}
+          axisLabelFontSize={14}
+        />
+      </svg>
+    </ConfigContext.Provider>
+  )
+}
+
 const sidePlacementYAxis = {
   hideAxis: false,
   hideLabel: false,
@@ -85,7 +147,8 @@ const sidePlacementYAxis = {
   anchors: [],
   axisPadding: 0,
   labelPlacement: 'On Date/Category Axis',
-  rightAxisSize: 0
+  rightAxisSize: 0,
+  rightTitlePlacement: 'side'
 }
 
 describe('LinearChart', () => {
@@ -147,6 +210,112 @@ describe('LinearChart', () => {
       const svg = container.querySelector('svg')
       expect(svg?.classList.contains('animated')).toBe(false)
     })
+
+    it('renders region fills above gridlines, below visualization marks, and keeps region labels above marks', () => {
+      const rows = [
+        { Date: '2024-01-01', Value: 10 },
+        { Date: '2024-01-08', Value: 20 }
+      ]
+      const { container } = renderLinearChart(
+        {
+          regions: [
+            {
+              from: '2024-01-01',
+              to: '2024-01-08',
+              label: 'Reporting period',
+              background: '#005ea8',
+              color: '#1b1b1b'
+            }
+          ],
+          series: [{ dataKey: 'Value', type: 'Line', axis: 'Left' }],
+          runtime: {
+            ...createMockChartContext().config.runtime,
+            seriesKeys: ['Value'],
+            seriesLabels: { Value: 'Value' }
+          }
+        },
+        { transformedData: rows, tableData: rows }
+      )
+
+      const fill = container.querySelector('.region-fill')
+      const gridlines = container.querySelector('.left-axis')
+      const visualization = container.querySelector('[data-testid="mock-visualization-renderer"]')
+      const label = container.querySelector('.region-label')
+
+      expect(fill).toBeTruthy()
+      expect(label).toBeTruthy()
+      expect(container.querySelectorAll('.region-fill')).toHaveLength(1)
+      expect(gridlines!.compareDocumentPosition(fill!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+      expect(fill!.compareDocumentPosition(visualization!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+      expect(visualization!.compareDocumentPosition(label!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    })
+
+    it('uses band boundaries for converted lines and point boundaries for barless Combo charts', () => {
+      const rows = [
+        { Date: '2024-01-01', Value: 10 },
+        { Date: '2024-01-08', Value: 20 },
+        { Date: '2024-01-15', Value: 30 }
+      ]
+      const baseConfig = {
+        regions: [
+          {
+            from: '2024-01-01',
+            to: '2024-01-08',
+            label: 'Reporting period',
+            background: '#005ea8',
+            color: '#1b1b1b'
+          }
+        ],
+        series: [{ dataKey: 'Value', type: 'Line', axis: 'Left' }],
+        runtime: {
+          ...createMockChartContext().config.runtime,
+          seriesKeys: ['Value'],
+          seriesLabels: { Value: 'Value' }
+        }
+      }
+
+      const converted = renderLinearChart(baseConfig, {
+        transformedData: rows,
+        tableData: rows,
+        convertLineToBarGraph: true
+      })
+      const convertedWidth = Number(converted.container.querySelector('.region-fill')?.getAttribute('width'))
+      converted.unmount()
+
+      const barlessCombo = renderLinearChart(
+        {
+          ...baseConfig,
+          visualizationType: 'Combo',
+          runtime: {
+            ...baseConfig.runtime,
+            barSeriesKeys: [],
+            lineSeriesKeys: ['Value']
+          }
+        },
+        { transformedData: rows, tableData: rows }
+      )
+      const barlessComboWidth = Number(barlessCombo.container.querySelector('.region-fill')?.getAttribute('width'))
+
+      expect(convertedWidth).toBeGreaterThan(barlessComboWidth)
+    })
+
+    it('does not render regions for visualization types outside the explicit region whitelist', () => {
+      const { container } = renderLinearChart({
+        visualizationType: 'Scatter Plot',
+        regions: [
+          {
+            from: 'A',
+            to: 'B',
+            label: 'Reporting period',
+            background: '#005ea8',
+            color: '#1b1b1b'
+          }
+        ]
+      })
+
+      expect(container.querySelector('.region-fill')).toBeNull()
+      expect(container.querySelector('.region-label')).toBeNull()
+    })
   })
 
   describe('empty data handling', () => {
@@ -200,6 +369,8 @@ describe('LinearChart', () => {
     })
 
     it('keeps forest plot lines inside the computed plot bounds at narrow and wide widths', () => {
+      visualizationRendererMockState.renderActual = true
+
       const forestContextOverrides = {
         transformedData: forestPlotConfig.data,
         rawData: forestPlotConfig.data
@@ -242,6 +413,8 @@ describe('LinearChart', () => {
     })
 
     it('avoids rendering a duplicate manual bottom border when the forest plot x-axis is visible', () => {
+      visualizationRendererMockState.renderActual = true
+
       const { container } = renderLinearChart(
         forestPlotConfig as any,
         {
@@ -258,6 +431,8 @@ describe('LinearChart', () => {
     })
 
     it('renders forest plot rows from transformedData instead of rawData', () => {
+      visualizationRendererMockState.renderActual = true
+
       const filteredData = forestPlotConfig.data.slice(0, 2)
       const { container } = renderLinearChart(
         forestPlotConfig as any,
@@ -277,6 +452,206 @@ describe('LinearChart', () => {
   })
 
   describe('axis rendering', () => {
+    it('renders left y-axis and x-axis anchors independently', () => {
+      const data = [
+        { Category: 'A', Value: 5 },
+        { Category: 'B', Value: 10 }
+      ]
+
+      const { container } = renderLinearChart(
+        {
+          visualizationType: 'Bar',
+          debugSvg: true,
+          data,
+          series: [{ dataKey: 'Value', axis: 'Left', type: 'Bar' }],
+          xAxis: {
+            ...createMockChartContext().config.xAxis,
+            type: 'categorical',
+            dataKey: 'Category',
+            anchors: [{ value: 'A', color: '#135', lineStyle: 'dashed' }]
+          },
+          yAxis: {
+            ...createMockChartContext().config.yAxis,
+            anchors: [{ value: '5', color: '#531', lineStyle: 'solid' }]
+          },
+          runtime: {
+            ...createMockChartContext().config.runtime,
+            xAxis: {
+              ...createMockChartContext().config.runtime.xAxis,
+              type: 'categorical',
+              dataKey: 'Category'
+            },
+            originalXAxis: {
+              dataKey: 'Category'
+            },
+            series: [{ dataKey: 'Value', axis: 'Left', type: 'Bar' }],
+            seriesKeys: ['Value']
+          }
+        },
+        {
+          transformedData: data,
+          tableData: data
+        }
+      )
+
+      expect(container.querySelectorAll('.anchor-y')).toHaveLength(1)
+      expect(container.querySelectorAll('.anchor-x')).toHaveLength(1)
+      expect(container.querySelector('.anchor-y-right')).toBeFalsy()
+    })
+
+    it('renders right y-axis anchors only when a vertical Combo chart has right-axis series', () => {
+      const data = [{ Date: '2024-01-01', LeftValue: 25, RightValue: 50 }]
+      const comboConfig = {
+        data,
+        visualizationType: 'Combo',
+        visualizationSubType: 'regular',
+        debugSvg: true,
+        orientation: 'vertical',
+        preliminaryData: [],
+        series: [
+          { dataKey: 'LeftValue', axis: 'Left', type: 'Bar' },
+          { dataKey: 'RightValue', axis: 'Right', type: 'Line' }
+        ],
+        yAxis: {
+          ...createMockChartContext().config.yAxis,
+          rightAnchors: [{ value: '50', color: '#246', lineStyle: 'dashed' }],
+          rightAxisSize: 60
+        },
+        runtime: {
+          ...createMockChartContext().config.runtime,
+          series: [
+            { dataKey: 'LeftValue', axis: 'Left', type: 'Bar' },
+            { dataKey: 'RightValue', axis: 'Right', type: 'Line' }
+          ],
+          seriesKeys: ['LeftValue', 'RightValue'],
+          areaSeriesKeys: [],
+          forecastingSeriesKeys: []
+        }
+      }
+
+      const combo = renderLinearChart(comboConfig, {
+        transformedData: data,
+        tableData: data
+      })
+      const line = renderLinearChart(
+        {
+          ...comboConfig,
+          visualizationType: 'Line'
+        },
+        {
+          transformedData: data,
+          tableData: data
+        }
+      )
+
+      expect(combo.container.querySelectorAll('.anchor-y-right')).toHaveLength(1)
+      expect(line.container.querySelector('.anchor-y-right')).toBeFalsy()
+    })
+
+    it('uses the right y-scale for right-axis anchors', () => {
+      const data = [{ Date: '2024-01-01', LeftValue: 50, RightValue: 80 }]
+
+      const { container } = renderLinearChart(
+        {
+          data,
+          visualizationType: 'Combo',
+          visualizationSubType: 'regular',
+          debugSvg: true,
+          orientation: 'vertical',
+          preliminaryData: [],
+          series: [
+            { dataKey: 'LeftValue', axis: 'Left', type: 'Bar' },
+            { dataKey: 'RightValue', axis: 'Right', type: 'Line' }
+          ],
+          yAxis: {
+            ...createMockChartContext().config.yAxis,
+            anchors: [{ value: '50', color: '#531', lineStyle: 'solid' }],
+            rightAnchors: [{ value: '50', color: '#246', lineStyle: 'dashed' }],
+            rightAxisSize: 60,
+            rightMin: '0',
+            rightMax: '100'
+          },
+          runtime: {
+            ...createMockChartContext().config.runtime,
+            series: [
+              { dataKey: 'LeftValue', axis: 'Left', type: 'Bar' },
+              { dataKey: 'RightValue', axis: 'Right', type: 'Line' }
+            ],
+            seriesKeys: ['LeftValue', 'RightValue'],
+            areaSeriesKeys: [],
+            forecastingSeriesKeys: []
+          }
+        },
+        {
+          transformedData: data,
+          tableData: data
+        }
+      )
+
+      const leftAnchorY = Number(container.querySelector('.anchor-y')?.getAttribute('y1'))
+      const rightAnchorY = Number(container.querySelector('.anchor-y-right')?.getAttribute('y1'))
+
+      expect(Number.isFinite(leftAnchorY)).toBe(true)
+      expect(Number.isFinite(rightAnchorY)).toBe(true)
+      expect(rightAnchorY).toBeGreaterThan(leftAnchorY)
+    })
+
+    it('renders numeric zero value-axis anchors', () => {
+      const data = [{ Date: '2024-01-01', LeftValue: 50, RightValue: 80 }]
+
+      const { container } = renderLinearChart(
+        {
+          data,
+          visualizationType: 'Combo',
+          visualizationSubType: 'regular',
+          debugSvg: true,
+          orientation: 'vertical',
+          preliminaryData: [],
+          series: [
+            { dataKey: 'LeftValue', axis: 'Left', type: 'Bar' },
+            { dataKey: 'RightValue', axis: 'Right', type: 'Line' }
+          ],
+          yAxis: {
+            ...createMockChartContext().config.yAxis,
+            anchors: [{ value: 0, color: '#531', lineStyle: 'solid' }],
+            rightAnchors: [{ value: 0, color: '#246', lineStyle: 'dashed' }],
+            rightAxisSize: 60,
+            rightMin: '0',
+            rightMax: '100'
+          },
+          runtime: {
+            ...createMockChartContext().config.runtime,
+            series: [
+              { dataKey: 'LeftValue', axis: 'Left', type: 'Bar' },
+              { dataKey: 'RightValue', axis: 'Right', type: 'Line' }
+            ],
+            seriesKeys: ['LeftValue', 'RightValue'],
+            areaSeriesKeys: [],
+            forecastingSeriesKeys: []
+          }
+        } as any,
+        {
+          transformedData: data,
+          tableData: data
+        }
+      )
+
+      expect(container.querySelectorAll('.anchor-y')).toHaveLength(1)
+      expect(container.querySelectorAll('.anchor-y-right')).toHaveLength(1)
+    })
+
+    it('does not error when configs omit rightAnchors', () => {
+      const { container } = renderLinearChart({
+        yAxis: {
+          ...createMockChartContext().config.yAxis,
+          rightAnchors: undefined
+        }
+      })
+
+      expect(container.querySelector('svg')).toBeTruthy()
+      expect(container.querySelector('.anchor-y-right')).toBeFalsy()
+    })
+
     it('renders left axis group', () => {
       const { container } = renderLinearChart()
       const leftAxis = container.querySelector('.left-axis')
@@ -304,6 +679,31 @@ describe('LinearChart', () => {
       expect(container.querySelector('.left-axis text.y-label')).toBeTruthy()
     })
 
+    it('renders the right axis side title when rightTitlePlacement is omitted', () => {
+      const { container } = renderRightAxis({ rightTitlePlacement: undefined })
+
+      expect(container.querySelector('.right-axis text.y-label')?.textContent).toBe('Right Axis')
+    })
+
+    it('renders the right axis side title from the processed runtime label when available', () => {
+      const { container } = renderRightAxis({ rightTitlePlacement: 'side' }, { rightLabel: 'Processed Right Axis' })
+
+      expect(container.querySelector('.right-axis text.y-label')?.textContent).toBe('Processed Right Axis')
+    })
+
+    it('places right tick labels after the tick margin and keeps the side title inside the measured gutter', () => {
+      const { container } = renderRightAxis({ rightTitlePlacement: 'side' }, {}, 73)
+
+      expect(container.querySelector('.right-axis .vx-axis-tick text')?.getAttribute('x')).toBe('12.5')
+      expect(container.querySelector('.right-axis text.y-label')?.getAttribute('transform')).toContain('translate(59,')
+    })
+
+    it('suppresses the right axis side title when rightTitlePlacement is top', () => {
+      const { container } = renderRightAxis({ rightTitlePlacement: 'top' })
+
+      expect(container.querySelector('.right-axis text.y-label')).toBeFalsy()
+    })
+
     it('renders bottom axis group', () => {
       const { container } = renderLinearChart()
       const bottomAxis = container.querySelector('.bottom-axis')
@@ -515,7 +915,6 @@ describe('LinearChart', () => {
     it('sets correct width based on parentWidth prop', () => {
       const { container } = renderLinearChart({}, {}, { parentWidth: 600, parentHeight: 400 })
       const svg = container.querySelector('svg')
-      // Width should include rightAxisSize (default 0)
       expect(svg?.getAttribute('width')).toBe('600')
     })