@cdc/chart 4.26.1 → 4.26.3

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

@@ -0,0 +1,278 @@
+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'
+import forestPlotConfig from '../../../../examples/feature/forest-plot/forest-plot.json'
+
+// 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()
+    })
+
+    it('keeps forest plot lines inside the computed plot bounds at narrow and wide widths', () => {
+      const forestContextOverrides = {
+        transformedData: forestPlotConfig.data,
+        rawData: forestPlotConfig.data
+      }
+
+      const narrowRender = renderLinearChart(forestPlotConfig as any, forestContextOverrides, {
+        parentWidth: 320,
+        parentHeight: 500
+      })
+      const wideRender = renderLinearChart(forestPlotConfig as any, forestContextOverrides, {
+        parentWidth: 960,
+        parentHeight: 500
+      })
+
+      const narrowTopLine = narrowRender.container.querySelector('.forestplot__top-line')
+      const wideTopLine = wideRender.container.querySelector('.forestplot__top-line')
+      const narrowCiLine = narrowRender.container.querySelector('line[class^="line-"]')
+      const wideCiLine = wideRender.container.querySelector('line[class^="line-"]')
+
+      expect(narrowTopLine).toBeTruthy()
+      expect(wideTopLine).toBeTruthy()
+      expect(narrowCiLine).toBeTruthy()
+      expect(wideCiLine).toBeTruthy()
+
+      const narrowStart = Number(narrowTopLine?.getAttribute('x1'))
+      const narrowEnd = Number(narrowTopLine?.getAttribute('x2'))
+      const wideStart = Number(wideTopLine?.getAttribute('x1'))
+      const wideEnd = Number(wideTopLine?.getAttribute('x2'))
+
+      expect(narrowStart).toBe(0)
+      expect(narrowEnd).toBeLessThanOrEqual(320)
+      expect(wideStart).toBe(0)
+      expect(wideEnd).toBeLessThanOrEqual(960)
+      expect(wideEnd - wideStart).toBeGreaterThan(narrowEnd - narrowStart)
+
+      expect(Number(narrowCiLine?.getAttribute('x1'))).toBeGreaterThan(narrowStart)
+      expect(Number(narrowCiLine?.getAttribute('x2'))).toBeLessThanOrEqual(narrowEnd)
+      expect(Number(wideCiLine?.getAttribute('x1'))).toBeGreaterThan(wideStart)
+      expect(Number(wideCiLine?.getAttribute('x2'))).toBeLessThanOrEqual(wideEnd)
+    })
+
+    it('avoids rendering a duplicate manual bottom border when the forest plot x-axis is visible', () => {
+      const { container } = renderLinearChart(
+        forestPlotConfig as any,
+        {
+          transformedData: forestPlotConfig.data,
+          rawData: forestPlotConfig.data
+        },
+        { parentWidth: 800, parentHeight: 500 }
+      )
+
+      expect(container.querySelector('.forestplot__top-line')).toBeTruthy()
+      expect(container.querySelector('.forestplot__bottom-line')).toBeFalsy()
+      const bottomAxisLine = container.querySelector('.bottom-axis > line[stroke="#333"]')
+      expect(bottomAxisLine?.getAttribute('x1')).toBe('0')
+    })
+
+    it('renders forest plot rows from transformedData instead of rawData', () => {
+      const filteredData = forestPlotConfig.data.slice(0, 2)
+      const { container } = renderLinearChart(
+        forestPlotConfig as any,
+        {
+          transformedData: filteredData,
+          rawData: forestPlotConfig.data
+        },
+        { parentWidth: 800, parentHeight: 500 }
+      )
+
+      expect(container.querySelectorAll('.lower-ci')).toHaveLength(filteredData.length)
+      expect(container.querySelectorAll('line[class^="line-"]')).toHaveLength(filteredData.length)
+      expect(container.textContent).not.toContain(
+        String(forestPlotConfig.data[forestPlotConfig.data.length - 1]['Author(s) and Year'])
+      )
+    })
+  })
+
+  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,131 @@
+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',
+    rawData: config.data,
+    updateConfig: () => {},
+    ...contextOverrides
+  } as ChartContext
+}

package/src/components/LinearChart/utils/tickFormatting.ts

@@ -0,0 +1,146 @@
+import { useCallback, useContext } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+
+type TickFormattingOptions = {
+  isLogarithmicAxis: boolean
+  orientation: 'horizontal' | 'vertical'
+  visualizationType: string
+  min: number
+  max: number
+  shouldAbbreviate: boolean
+}
+
+/**
+ * Shared logarithmic tick handling
+ * Both left and bottom formatters convert 0.1 to 0 for logarithmic scales
+ */
+const handleLogarithmicTick = (tick: number, isLogarithmic: boolean): number => {
+  if (isLogarithmic && tick === 0.1) {
+    return 0
+  }
+  return tick
+}
+
+/**
+ * Hook that provides consolidated tick formatting functions for both axes.
+ * Consolidates handleLeftTickFormatting and handleBottomTickFormatting
+ * from LinearChart.tsx
+ */
+export const useTickFormatters = (options: TickFormattingOptions) => {
+  const { config, formatDate, formatNumber, parseDate } = useContext(ConfigContext)
+  const { runtime, data, xAxis } = config
+  const { isLogarithmicAxis, orientation, visualizationType, min, max, shouldAbbreviate } = options
+
+  /**
+   * Format ticks for the left (Y) axis
+   */
+  const handleLeftTickFormatting = useCallback(
+    (tick: number | string, index: number, ticks: any[]) => {
+      // Handle logarithmic scale
+      let processedTick = typeof tick === 'number' ? handleLogarithmicTick(tick, isLogarithmicAxis) : tick
+
+      // Forest Plot special case - return data key value
+      if (visualizationType === 'Forest Plot') {
+        if (data && !data[index]) return ''
+        return data[index][xAxis.dataKey]
+      }
+
+      // Date scale on y-axis
+      if (isDateScale(runtime.yAxis)) {
+        return formatDate(parseDate(processedTick))
+      }
+
+      // Vertical orientation with small range (needs more precision)
+      if (orientation === 'vertical' && max - min < 3 && !config.dataFormat?.roundTo) {
+        return formatNumber(processedTick, 'left', shouldAbbreviate, false, false, '1', {
+          index,
+          length: ticks.length
+        })
+      }
+
+      // Standard vertical orientation formatting
+      if (orientation === 'vertical') {
+        return formatNumber(processedTick, 'left', shouldAbbreviate, false, false, undefined, {
+          index,
+          length: ticks.length
+        })
+      }
+
+      return processedTick
+    },
+    [
+      isLogarithmicAxis,
+      visualizationType,
+      data,
+      xAxis.dataKey,
+      runtime.yAxis,
+      orientation,
+      min,
+      max,
+      config.dataFormat?.roundTo,
+      shouldAbbreviate,
+      formatDate,
+      formatNumber,
+      parseDate
+    ]
+  )
+
+  /**
+   * Format ticks for the bottom (X) axis
+   */
+  const handleBottomTickFormatting = useCallback(
+    (tick: number | string | Date, index: number, ticks: any[]) => {
+      // Handle logarithmic scale
+      let processedTick = typeof tick === 'number' ? handleLogarithmicTick(tick, isLogarithmicAxis) : tick
+
+      // Date scale formatting (most common case for x-axis)
+      if (isDateScale(runtime.xAxis) && visualizationType !== 'Forest Plot') {
+        return formatDate(processedTick, index, ticks)
+      }
+
+      // Horizontal orientation (bars)
+      if (orientation === 'horizontal' && visualizationType !== 'Forest Plot') {
+        return formatNumber(processedTick, 'left', shouldAbbreviate)
+      }
+
+      // Continuous x-axis type
+      if (xAxis.type === 'continuous' && visualizationType !== 'Forest Plot') {
+        return formatNumber(processedTick, 'bottom', shouldAbbreviate)
+      }
+
+      // Forest Plot special case with prefix/suffix
+      if (visualizationType === 'Forest Plot') {
+        return formatNumber(
+          processedTick,
+          'left',
+          config.dataFormat.abbreviated,
+          runtime.xAxis.prefix,
+          runtime.xAxis.suffix,
+          Number(config.dataFormat.roundTo)
+        )
+      }
+
+      return processedTick
+    },
+    [
+      isLogarithmicAxis,
+      runtime.xAxis,
+      visualizationType,
+      orientation,
+      xAxis.type,
+      shouldAbbreviate,
+      config.dataFormat.abbreviated,
+      config.dataFormat.roundTo,
+      formatDate,
+      formatNumber
+    ]
+  )
+
+  return {
+    handleLeftTickFormatting,
+    handleBottomTickFormatting
+  }
+}
+
+export default useTickFormatters