@cdc/chart 4.25.11 → 4.26.2

package/src/components/LinearChart/VisualizationRenderer.tsx

@@ -0,0 +1,267 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../../ConfigContext'
+import { VISUALIZATION_TYPES, LINE_CHART_EXCLUDED_TYPES } from './linearChart.constants'
+
+// Visualization components
+import { AreaChartStacked } from '../AreaChart'
+import BarChart from '../BarChart'
+import BoxPlotVertical from '../BoxPlot/BoxPlot.Vertical'
+import BoxPlotHorizontal from '../BoxPlot/BoxPlot.Horizontal'
+import DeviationBar from '../DeviationBar'
+import Forecasting from '../Forecasting'
+import ForestPlot from '../ForestPlot'
+import { HorizonChart } from '../HorizonChart'
+import LineChart from '../LineChart'
+import PairedBarChart from '../PairedBarChart'
+import ScatterPlot from '../ScatterPlot'
+import WarmingStripes from '../WarmingStripes'
+
+interface VisualizationRendererProps {
+  xScale: any
+  yScale: any
+  xMax: number
+  yMax: number
+  seriesScale: any
+  xScaleNoPadding: any
+  min: number
+  max: number
+  parentWidth: number
+  yAxisWidth: number
+  forestHeight: number
+  animatedChart: boolean
+  tooltipData: any
+  showTooltip: any
+  handleTooltipMouseOver: (e: any, additionalData?: any) => void
+  handleTooltipMouseOff: () => void
+  handleTooltipClick: (e: any) => void
+  getXAxisData: (d: any) => any
+  getYAxisData: (d: any, seriesKey: string) => any
+  svgRef: React.RefObject<any>
+  forestPlotRightLabelRef: React.RefObject<any>
+  synchronizedXValue?: any
+}
+
+const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
+  xScale,
+  yScale,
+  xMax,
+  yMax,
+  seriesScale,
+  xScaleNoPadding,
+  min,
+  max,
+  parentWidth,
+  yAxisWidth,
+  forestHeight,
+  animatedChart,
+  tooltipData,
+  showTooltip,
+  handleTooltipMouseOver,
+  handleTooltipMouseOff,
+  handleTooltipClick,
+  getXAxisData,
+  getYAxisData,
+  svgRef,
+  forestPlotRightLabelRef,
+  synchronizedXValue
+}) => {
+  const { config, convertLineToBarGraph } = useContext(ConfigContext)
+  const { visualizationType, visualizationSubType } = config
+
+  return (
+    <>
+      {/* Deviation Bar */}
+      {visualizationType === 'Deviation Bar' && config.runtime.series?.length === 1 && (
+        <DeviationBar animatedChart={animatedChart} xScale={xScale} yScale={yScale} width={xMax} height={yMax} />
+      )}
+
+      {/* Paired Bar Chart */}
+      {visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={parentWidth} width={xMax} height={yMax} />}
+
+      {/* Scatter Plot */}
+      {visualizationType === 'Scatter Plot' && (
+        <ScatterPlot
+          xScale={xScale}
+          yScale={yScale}
+          getXAxisData={getXAxisData}
+          getYAxisData={getYAxisData}
+          xMax={xMax}
+          yMax={yMax}
+          handleTooltipMouseOver={handleTooltipMouseOver}
+          handleTooltipMouseOff={handleTooltipMouseOff}
+          handleTooltipClick={handleTooltipClick}
+          tooltipData={tooltipData}
+          showTooltip={showTooltip}
+        />
+      )}
+
+      {/* Warming Stripes */}
+      {visualizationType === 'Warming Stripes' && (
+        <WarmingStripes
+          xScale={xScale}
+          yScale={yScale}
+          xMax={xMax}
+          yMax={yMax}
+          synchronizedXValue={synchronizedXValue}
+          showTooltip={showTooltip}
+          handleTooltipMouseOff={handleTooltipMouseOff}
+        />
+      )}
+
+      {/* Horizon Chart */}
+      {visualizationType === 'Horizon Chart' && (
+        <HorizonChart
+          xScale={xScale}
+          yScale={yScale}
+          xMax={xMax}
+          yMax={yMax}
+          handleTooltipMouseOver={handleTooltipMouseOver}
+          handleTooltipMouseOff={handleTooltipMouseOff}
+          tooltipData={tooltipData}
+          showTooltip={showTooltip}
+        />
+      )}
+
+      {/* Box Plot - Vertical */}
+      {visualizationType === 'Box Plot' && config.orientation === 'vertical' && (
+        <BoxPlotVertical
+          seriesScale={seriesScale}
+          xMax={xMax}
+          yMax={yMax}
+          min={min}
+          max={max}
+          xScale={xScale}
+          yScale={yScale}
+        />
+      )}
+
+      {/* Box Plot - Horizontal */}
+      {visualizationType === 'Box Plot' && config.orientation === 'horizontal' && (
+        <BoxPlotHorizontal
+          seriesScale={seriesScale}
+          xMax={xMax}
+          yMax={yMax}
+          min={min}
+          max={max}
+          xScale={xScale}
+          yScale={yScale}
+        />
+      )}
+
+      {/* Area Chart (Stacked) - also used by Combo */}
+      {((visualizationType === 'Area Chart' && visualizationSubType === 'stacked') ||
+        visualizationType === 'Combo') && (
+        <AreaChartStacked
+          xScale={xScale}
+          yScale={yScale}
+          yMax={yMax}
+          xMax={xMax}
+          chartRef={svgRef}
+          width={xMax}
+          height={yMax}
+          handleTooltipMouseOver={handleTooltipMouseOver}
+          handleTooltipMouseOff={handleTooltipMouseOff}
+          tooltipData={tooltipData}
+          showTooltip={showTooltip}
+        />
+      )}
+
+      {/* Bar Chart - also used by Combo and when line is converted to bar */}
+      {(visualizationType === 'Bar' || visualizationType === 'Combo' || convertLineToBarGraph) && (
+        <BarChart
+          xScale={xScale}
+          yScale={yScale}
+          seriesScale={seriesScale}
+          xMax={xMax}
+          yMax={yMax}
+          yAxisWidth={yAxisWidth}
+          getXAxisData={getXAxisData}
+          getYAxisData={getYAxisData}
+          animatedChart={animatedChart}
+          visible={animatedChart}
+          handleTooltipMouseOver={handleTooltipMouseOver}
+          handleTooltipMouseOff={handleTooltipMouseOff}
+          handleTooltipClick={handleTooltipClick}
+          tooltipData={tooltipData}
+          showTooltip={showTooltip}
+          chartRef={svgRef}
+        />
+      )}
+
+      {/* Line Chart for Combo and Bump Chart */}
+      {(visualizationType === 'Combo' || visualizationType === 'Bump Chart') && (
+        <LineChart
+          xScale={xScale}
+          yScale={yScale}
+          getXAxisData={getXAxisData}
+          getYAxisData={getYAxisData}
+          xMax={xMax}
+          yMax={yMax}
+          seriesStyle={config.runtime.series}
+          handleTooltipMouseOver={handleTooltipMouseOver}
+          handleTooltipMouseOff={handleTooltipMouseOff}
+          handleTooltipClick={handleTooltipClick}
+          tooltipData={tooltipData}
+          showTooltip={showTooltip}
+        />
+      )}
+
+      {/* Line Chart for other visualization types */}
+      {!LINE_CHART_EXCLUDED_TYPES.includes(visualizationType as any) && !convertLineToBarGraph && (
+        <LineChart
+          xScale={xScale}
+          yScale={yScale}
+          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') && (
+        <Forecasting
+          showTooltip={showTooltip}
+          tooltipData={tooltipData}
+          xScale={xScale}
+          yScale={yScale}
+          width={xMax}
+          height={yMax}
+          xScaleNoPadding={xScaleNoPadding}
+          chartRef={svgRef}
+          handleTooltipMouseOver={handleTooltipMouseOver}
+          handleTooltipMouseOff={handleTooltipMouseOff}
+        />
+      )}
+
+      {/* Forest Plot */}
+      {visualizationType === 'Forest Plot' && (
+        <ForestPlot
+          xScale={xScale}
+          yScale={yScale}
+          seriesScale={seriesScale}
+          width={parentWidth}
+          height={forestHeight}
+          getXAxisData={getXAxisData}
+          getYAxisData={getYAxisData}
+          animatedChart={animatedChart}
+          visible={animatedChart}
+          handleTooltipMouseOver={handleTooltipMouseOver}
+          handleTooltipMouseOff={handleTooltipMouseOff}
+          handleTooltipClick={handleTooltipClick}
+          tooltipData={tooltipData}
+          showTooltip={showTooltip}
+          chartRef={svgRef}
+          config={config}
+          forestPlotRightLabelRef={forestPlotRightLabelRef}
+        />
+      )}
+    </>
+  )
+}
+
+export default VisualizationRenderer

package/src/components/LinearChart/linearChart.constants.ts

@@ -0,0 +1,84 @@
+/**
+ * Visualization type constants for LinearChart
+ * Centralizes string literals to prevent typos and enable type safety
+ */
+
+export const VISUALIZATION_TYPES = {
+  AREA_CHART: 'Area Chart',
+  BAR: 'Bar',
+  BOX_PLOT: 'Box Plot',
+  BUMP_CHART: 'Bump Chart',
+  COMBO: 'Combo',
+  DEVIATION_BAR: 'Deviation Bar',
+  FORECASTING: 'Forecasting',
+  FOREST_PLOT: 'Forest Plot',
+  HORIZON_CHART: 'Horizon Chart',
+  LINE: 'Line',
+  PAIRED_BAR: 'Paired Bar',
+  RADAR: 'Radar',
+  SCATTER_PLOT: 'Scatter Plot',
+  SPARK_LINE: 'Spark Line',
+  WARMING_STRIPES: 'Warming Stripes'
+} as const
+
+export type VisualizationType = (typeof VISUALIZATION_TYPES)[keyof typeof VISUALIZATION_TYPES]
+
+/**
+ * Visualization types that don't display grid lines or standard axes
+ */
+export const TYPES_WITHOUT_GRID = [
+  VISUALIZATION_TYPES.FOREST_PLOT,
+  VISUALIZATION_TYPES.HORIZON_CHART,
+  VISUALIZATION_TYPES.SPARK_LINE,
+  VISUALIZATION_TYPES.WARMING_STRIPES
+] as const
+
+/**
+ * Visualization types excluded from the generic LineChart rendering
+ * These types have their own dedicated rendering logic
+ */
+export const LINE_CHART_EXCLUDED_TYPES = [
+  VISUALIZATION_TYPES.AREA_CHART,
+  VISUALIZATION_TYPES.BAR,
+  VISUALIZATION_TYPES.BOX_PLOT,
+  VISUALIZATION_TYPES.DEVIATION_BAR,
+  VISUALIZATION_TYPES.FORECASTING,
+  VISUALIZATION_TYPES.HORIZON_CHART,
+  VISUALIZATION_TYPES.PAIRED_BAR,
+  VISUALIZATION_TYPES.SCATTER_PLOT,
+  VISUALIZATION_TYPES.WARMING_STRIPES
+] as const
+
+/**
+ * Line-based visualization types (render with LineChart component)
+ */
+export const LINE_BASED_TYPES = [
+  VISUALIZATION_TYPES.AREA_CHART,
+  VISUALIZATION_TYPES.BUMP_CHART,
+  VISUALIZATION_TYPES.COMBO,
+  VISUALIZATION_TYPES.LINE
+] as const
+
+/**
+ * Visualization types that support tooltip guides (hover lines)
+ */
+export const TYPES_WITH_TOOLTIP_GUIDES = [
+  VISUALIZATION_TYPES.AREA_CHART,
+  VISUALIZATION_TYPES.BAR,
+  VISUALIZATION_TYPES.COMBO,
+  VISUALIZATION_TYPES.LINE
+] as const
+
+/**
+ * Check if a visualization type should show grid lines
+ */
+export const shouldShowGrid = (visualizationType: string): boolean => {
+  return !TYPES_WITHOUT_GRID.includes(visualizationType as any)
+}
+
+/**
+ * Check if a visualization type uses the generic LineChart renderer
+ */
+export const usesLineChartRenderer = (visualizationType: string): boolean => {
+  return !LINE_CHART_EXCLUDED_TYPES.includes(visualizationType as any)
+}

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

@@ -0,0 +1,201 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi, beforeAll } from 'vitest'
+import LinearChart from '../../LinearChart'
+import ConfigContext from '../../../ConfigContext'
+import { createMockChartContext } from './mockConfigContext'
+
+// Mock ResizeObserver
+vi.stubGlobal(
+  'ResizeObserver',
+  vi.fn(() => ({
+    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()
+  }))
+)
+
+// Mock canvas for text measurement
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+    measureText: vi.fn(() => ({ width: 50 })),
+    fillText: vi.fn(),
+    fillRect: vi.fn(),
+    clearRect: vi.fn()
+  })) as any
+
+  // Mock SVG getBBox for axis measurements
+  const mockBBox = { x: 0, y: 0, width: 100, height: 50 }
+  // @ts-expect-error - mocking SVG method
+  SVGElement.prototype.getBBox = vi.fn(() => mockBBox)
+  // @ts-expect-error - mocking SVG method
+  SVGElement.prototype.getBoundingClientRect = vi.fn(() => ({
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 50,
+    top: 0,
+    left: 0,
+    right: 100,
+    bottom: 50
+  }))
+})
+
+// Helper to render LinearChart with context
+const renderLinearChart = (
+  configOverrides = {},
+  contextOverrides = {},
+  props = { parentWidth: 800, parentHeight: 400 }
+) => {
+  const context = createMockChartContext(configOverrides, contextOverrides)
+
+  return render(
+    <ConfigContext.Provider value={context}>
+      <LinearChart {...props} />
+    </ConfigContext.Provider>
+  )
+}
+
+describe('LinearChart', () => {
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderLinearChart()
+      expect(container).toBeTruthy()
+    })
+
+    it('renders an SVG element', () => {
+      const { container } = renderLinearChart()
+      const svg = container.querySelector('svg')
+      expect(svg).toBeTruthy()
+    })
+
+    it('renders with correct aria-label', () => {
+      const { container } = renderLinearChart()
+      const svg = container.querySelector('svg')
+      expect(svg?.getAttribute('aria-label')).toBe('Chart')
+    })
+
+    it('applies animated class when config.animate is true', () => {
+      const { container } = renderLinearChart({ animate: true })
+      const svg = container.querySelector('svg')
+      expect(svg?.classList.contains('animated')).toBe(true)
+    })
+
+    it('does not apply animated class when config.animate is false', () => {
+      const { container } = renderLinearChart({ animate: false })
+      const svg = container.querySelector('svg')
+      expect(svg?.classList.contains('animated')).toBe(false)
+    })
+  })
+
+  describe('empty data handling', () => {
+    it('renders no data message when filters result in empty data', () => {
+      const context = createMockChartContext(
+        { filters: [{ columnName: 'test', active: 'test' }] },
+        { transformedData: [] }
+      )
+
+      render(
+        <ConfigContext.Provider value={context}>
+          <LinearChart parentWidth={800} parentHeight={400} />
+        </ConfigContext.Provider>
+      )
+
+      expect(screen.getByText('No data available')).toBeTruthy()
+    })
+  })
+
+  describe('visualization types', () => {
+    it('renders Line chart type without crashing', () => {
+      const { container } = renderLinearChart({ visualizationType: 'Line' })
+      expect(container.querySelector('svg')).toBeTruthy()
+    })
+
+    it('handles Bar chart type without uncaught exceptions', () => {
+      // Bar charts require additional data/series setup - verify it renders without throwing
+      const { container } = renderLinearChart({
+        visualizationType: 'Bar',
+        orientation: 'vertical'
+      })
+      // ErrorBoundary will catch errors, so container should exist
+      expect(container).toBeTruthy()
+    })
+
+    it('handles horizontal Bar chart without uncaught exceptions', () => {
+      const { container } = renderLinearChart({
+        visualizationType: 'Bar',
+        orientation: 'horizontal'
+      })
+      expect(container).toBeTruthy()
+    })
+
+    it('handles Area Chart type without uncaught exceptions', () => {
+      // Area charts require stacked data setup - verify it renders without throwing
+      const { container } = renderLinearChart({
+        visualizationType: 'Area Chart',
+        visualizationSubType: 'stacked'
+      })
+      expect(container).toBeTruthy()
+    })
+  })
+
+  describe('axis rendering', () => {
+    it('renders left axis group', () => {
+      const { container } = renderLinearChart()
+      const leftAxis = container.querySelector('.left-axis')
+      expect(leftAxis).toBeTruthy()
+    })
+
+    it('renders bottom axis group', () => {
+      const { container } = renderLinearChart()
+      const bottomAxis = container.querySelector('.bottom-axis')
+      expect(bottomAxis).toBeTruthy()
+    })
+
+    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
+        }
+      })
+      // The axis line should be hidden, but grid lines may still render
+      expect(container.querySelector('svg')).toBeTruthy()
+    })
+  })
+
+  describe('SVG dimensions', () => {
+    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')
+    })
+
+    it('returns empty fragment when parentWidth is NaN', () => {
+      const { container } = renderLinearChart({}, {}, { parentWidth: NaN, parentHeight: 400 })
+      // Should render an empty React.Fragment
+      const svg = container.querySelector('svg')
+      expect(svg).toBeFalsy()
+    })
+  })
+})

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

@@ -0,0 +1,129 @@
+import { ChartContext } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+// Minimal config for testing LinearChart
+export const createMockConfig = (overrides: Partial<ChartConfig> = {}): ChartConfig =>
+  ({
+    type: 'chart',
+    visualizationType: 'Line',
+    visualizationSubType: 'regular',
+    orientation: 'vertical',
+    animate: false,
+    heights: {
+      vertical: 300,
+      horizontal: 300,
+      mobileVertical: 200
+    },
+    xAxis: {
+      type: 'date',
+      dataKey: 'Date',
+      label: 'X-Axis',
+      hideAxis: false,
+      hideLabel: false,
+      hideTicks: false,
+      size: '50',
+      tickRotation: 0,
+      maxTickRotation: 90,
+      anchors: [],
+      axisPadding: 0
+    },
+    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
+    },
+    runtime: {
+      xAxis: {
+        type: 'date',
+        dataKey: 'Date',
+        label: 'X-Axis'
+      },
+      yAxis: {
+        size: 50,
+        label: 'Y-Axis',
+        gridLines: true
+      },
+      originalXAxis: {
+        dataKey: 'Date'
+      },
+      series: [],
+      seriesKeys: [],
+      seriesLabelsAll: [],
+      uniqueId: 'test-chart'
+    },
+    series: [],
+    data: [],
+    dataFormat: {
+      abbreviated: false,
+      roundTo: 0
+    },
+    legend: {
+      position: 'bottom'
+    },
+    tooltips: {
+      opacity: 90,
+      singleSeries: false
+    },
+    chartMessage: {
+      noData: 'No data available'
+    },
+    barThickness: 0.8,
+    barHeight: 25,
+    barSpace: 15,
+    isResponsiveTicks: true,
+    debugSvg: false,
+    filters: [],
+    topAxis: {
+      hasLine: false
+    },
+    hideXAxisLabel: false,
+    hideYAxisLabel: false,
+    ...overrides
+  } as ChartConfig)
+
+// Minimal chart context for testing
+export const createMockChartContext = (
+  configOverrides: Partial<ChartConfig> = {},
+  contextOverrides: Partial<ChartContext> = {}
+): ChartContext => {
+  const config = createMockConfig(configOverrides)
+
+  return {
+    config,
+    colorScale: undefined,
+    convertLineToBarGraph: false,
+    currentViewport: 'lg',
+    vizViewport: 'lg',
+    dimensions: [800, 400],
+    formatDate: (date: any) => String(date),
+    formatNumber: (num: any) => String(num),
+    handleChartAriaLabels: () => 'Chart',
+    handleLineType: () => '',
+    handleDragStateChange: () => {},
+    interactionLabel: '',
+    isEditor: false,
+    isDraggingAnnotation: false,
+    legendRef: { current: null },
+    parentRef: { current: null },
+    parseDate: (date: any) => new Date(date),
+    seriesHighlight: [],
+    tableData: [],
+    transformedData: [],
+    annotations: [],
+    colorPalettes: {},
+    twoColorPalette: {},
+    capitalize: (s: string) => s,
+    clean: (s: any) => s,
+    formatTooltipsDate: (date: any) => String(date),
+    legendId: 'test-legend',
+    ...contextOverrides
+  } as ChartContext
+}