@cdc/chart 4.26.1 → 4.26.2

package/src/components/Axis/README.md

@@ -0,0 +1,94 @@
+# Axis Components
+
+This folder contains extracted axis components from `LinearChart.tsx` to improve maintainability and reduce complexity.
+
+## Components
+
+### LeftAxis
+**File:** `LeftAxis.tsx`
+
+Renders the left (Y) axis for vertical charts. Handles:
+- Tick formatting and positioning
+- Labels above gridlines option
+- Inline label (suffix) display
+- Forest plot special rendering
+
+**Props:**
+- `yScale` - D3 scale for Y axis
+- `xScale` - D3 scale for X axis
+- `yMax`, `xMax` - Chart dimensions
+- `yAxisWidth` - Width allocated for Y axis
+- `numTicks` - Number of ticks to display
+- `handleLeftTickFormatting` - Tick format function
+
+### LeftAxisGridlines
+**File:** `LeftAxisGridlines.tsx`
+
+Renders horizontal gridlines separately from the axis itself. This separation allows gridlines to be drawn behind the visualization while the axis is drawn on top.
+
+### BottomAxis
+**File:** `BottomAxis.tsx`
+
+Renders the bottom (X) axis. Handles:
+- Date/time formatting
+- Tick rotation for responsive layouts
+- Manual step configuration
+- Brush integration
+
+**Props:**
+- `xScale` - D3 scale for X axis
+- `yMax` - Chart height
+- `xTickCount` - Number of ticks
+- `handleBottomTickFormatting` - Tick format function
+- `useDateSpanMonths` - Date range calculation flag
+
+### PairedBarAxis
+**File:** `PairedBarAxis.tsx`
+
+Specialized axis for Paired Bar charts with two mirrored AxisBottom components. Handles:
+- Dual scale rendering (g1xScale, g2xScale)
+- Responsive tick rotation
+- Tick overlap detection
+
+### RightAxis
+**File:** `RightAxis.tsx`
+
+Renders the right (Y) axis for dual-axis charts. Handles:
+- Secondary Y scale
+- Configurable tick/label colors
+- Optional gridlines from right axis
+
+### CategoricalYAxis
+**File:** `Categorical.Axis.tsx`
+
+Specialized Y axis for categorical data types.
+
+## Constants
+**File:** `axis.constants.ts`
+
+Shared constants used across axis components.
+
+## Usage
+
+All components are exported from `index.ts`:
+
+```tsx
+import {
+  LeftAxis,
+  LeftAxisGridlines,
+  BottomAxis,
+  PairedBarAxis,
+  RightAxis,
+  CategoricalYAxis
+} from './Axis'
+```
+
+## Architecture Notes
+
+These components were extracted from `LinearChart.tsx` as part of a refactoring effort to:
+1. Reduce the main component from 1,704 to ~845 lines
+2. Improve testability through smaller, focused components
+3. Enable reuse across different chart types
+4. Simplify maintenance and debugging
+
+Each component accesses the `ConfigContext` for chart configuration rather than receiving all config as props, keeping the prop interfaces focused on rendering-specific data.

package/src/components/Axis/RightAxis.tsx

@@ -0,0 +1,108 @@
+import React, { useContext } from 'react'
+import { AxisRight as VisxAxisRight } from '@visx/axis'
+import { Group } from '@visx/group'
+import { Line } from '@visx/shape'
+import { Text } from '@visx/text'
+import { ScaleLinear } from 'd3-scale'
+
+import ConfigContext from '../../ConfigContext'
+
+// Constants
+const HORIZONTAL_TICK_OFFSET_ADJUSTMENT = 5
+
+type RightAxisProps = {
+  yScaleRight: ScaleLinear<number, number>
+  yMax: number
+  xMax: number
+  yAxisWidth: number
+  tickLabelFontSize: number
+  axisLabelFontSize: number
+}
+
+/**
+ * Right Y-axis component for dual-axis charts.
+ * Renders a secondary y-axis on the right side with configurable styling.
+ * Extracted from LinearChart.tsx
+ */
+export const RightAxis: React.FC<RightAxisProps> = ({
+  yScaleRight,
+  yMax,
+  xMax,
+  yAxisWidth,
+  tickLabelFontSize,
+  axisLabelFontSize
+}) => {
+  const { config, formatNumber } = useContext(ConfigContext)
+  const { runtime } = config
+
+  const horizontalTickOffset = (ticks: any[]) =>
+    yMax / ticks.length / 2 - (yMax / ticks.length) * (1 - config.barThickness) + HORIZONTAL_TICK_OFFSET_ADJUSTMENT
+
+  return (
+    <VisxAxisRight
+      scale={yScaleRight}
+      left={yAxisWidth + xMax}
+      label={config.yAxis.rightLabel}
+      tickFormat={tick => formatNumber(tick, 'right')}
+      numTicks={runtime.yAxis.rightNumTicks || undefined}
+      labelOffset={45}
+    >
+      {props => {
+        const axisCenter =
+          config.orientation === 'horizontal'
+            ? (props.axisToPoint.y - props.axisFromPoint.y) / 2
+            : (props.axisFromPoint.y - props.axisToPoint.y) / 2
+
+        return (
+          <Group className='right-axis'>
+            {props.ticks.map((tick, i) => (
+              <Group key={`vx-tick-${tick.value}-${i}`} className='vx-axis-tick'>
+                {!runtime.yAxis.rightHideTicks && (
+                  <Line
+                    from={tick.from}
+                    to={tick.to}
+                    display={runtime.horizontal ? 'none' : 'block'}
+                    stroke={config.yAxis.rightAxisTickColor}
+                  />
+                )}
+
+                {runtime.yAxis.rightGridLines && (
+                  <Line from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='#d6d6d6' />
+                )}
+
+                {!config.yAxis.rightHideLabel && (
+                  <Text
+                    x={tick.to.x}
+                    y={tick.to.y + (runtime.horizontal ? horizontalTickOffset(props.ticks) : 0)}
+                    verticalAnchor={runtime.horizontal ? 'start' : 'middle'}
+                    textAnchor='start'
+                    fill={config.yAxis.rightAxisTickLabelColor}
+                    fontSize={tickLabelFontSize}
+                  >
+                    {tick.formattedValue}
+                  </Text>
+                )}
+              </Group>
+            ))}
+
+            {!config.yAxis.rightHideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
+
+            <Text
+              className='y-label'
+              textAnchor='middle'
+              verticalAnchor='start'
+              transform={`translate(${config.yAxis.rightLabelOffsetSize || 0}, ${axisCenter}) rotate(-90)`}
+              fontWeight='bold'
+              fill={config.yAxis.rightAxisLabelColor}
+              fontSize={axisLabelFontSize}
+            >
+              {props.label}
+            </Text>
+          </Group>
+        )
+      }}
+    </VisxAxisRight>
+  )
+}
+
+export default RightAxis

package/src/components/Axis/axis.constants.ts

@@ -0,0 +1,21 @@
+// Tick length constants
+export const DEFAULT_TICK_LENGTH = 8
+export const LOGARITHMIC_TICK_LENGTH = 6
+export const MAJOR_LOG_TICK_LENGTH = 7
+
+// Tick styling constants
+export const TICK_LABEL_MARGIN_RIGHT = 4.5
+export const MAJOR_LOG_TICK_STROKE_WIDTH = 1.3
+
+// Label positioning constants
+export const VALUE_ON_LINE_PADDING_NO_AXIS = -8
+export const VALUE_ON_LINE_PADDING_WITH_AXIS = -12
+export const LABEL_Y_PADDING_ABOVE_GRIDLINES = 4
+export const HORIZONTAL_TICK_OFFSET_ADJUSTMENT = 5
+
+// Chart-specific constants
+export const ZERO_LINE_STROKE_WIDTH = 2
+export const BAR_MIN_HEIGHT = 15
+
+// Lollipop chart sizes
+export const LOLLIPOP_SIZES = { large: 7, medium: 6, small: 5 } as const

package/src/components/Axis/index.ts

@@ -0,0 +1,7 @@
+export { default as CategoricalYAxis } from './Categorical.Axis'
+export { default as LeftAxis } from './LeftAxis'
+export { default as LeftAxisGridlines } from './LeftAxisGridlines'
+export { default as BottomAxis } from './BottomAxis'
+export { default as PairedBarAxis } from './PairedBarAxis'
+export { default as RightAxis } from './RightAxis'
+export * from './axis.constants'

package/src/components/BarChart/components/BarChart.tsx

@@ -18,6 +18,7 @@ type BarChartProps = {
   seriesScale: PositionScale
   xMax: number
   yMax: number
+  yAxisWidth?: number
   handleTooltipMouseOver: MouseEventHandler<SVGRectElement>
   handleTooltipMouseOff: MouseEventHandler<SVGRectElement>
   handleTooltipClick: MouseEventHandler<SVGRectElement>
@@ -29,6 +30,7 @@ const BarChart: React.FC<BarChartProps> = ({
   seriesScale,
   xMax,
   yMax,
+  yAxisWidth,
   handleTooltipMouseOver,
   handleTooltipMouseOff,
   handleTooltipClick
@@ -47,10 +49,14 @@ const BarChart: React.FC<BarChartProps> = ({
     barChart
   }
 
+  // Use yAxisWidth prop if provided (for horizontal bar charts with dynamic labels)
+  // otherwise fall back to config value
+  const leftOffset = yAxisWidth ?? parseFloat(config.runtime.yAxis.size)
+
   return (
     <ErrorBoundary component='BarChart'>
       <BarChartContext.Provider value={contextValues}>
-        <Group left={parseFloat(config.runtime.yAxis.size)}>
+        <Group left={leftOffset}>
           <BarChartType.StackedVertical />
           <BarChartType.StackedHorizontal />
           <BarChartType.Vertical />

package/src/components/Brush/BrushSelector.tsx

@@ -2,9 +2,11 @@ import React, { FC, useContext, useMemo, memo, useRef, useEffect, useState, useC
 import { Brush } from '@visx/brush'
 import BaseBrush from '@visx/brush/lib/BaseBrush'
 import { Group } from '@visx/group'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { scaleBand, scaleLinear } from '@visx/scale'
 import { Bounds } from '@visx/brush/lib/types'
 import type { BrushHandleRenderProps } from '@visx/brush/lib/BrushHandle'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
 import MiniChartPreview from './MiniChartPreview'
 
@@ -110,11 +112,77 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
   const selectionRef = useRef<HTMLButtonElement>(null)
   const rightHandleRef = useRef<HTMLButtonElement>(null)
 
-  const { tableData, config, colorScale } = useContext(ConfigContext)
+  const { tableData, config, colorScale, parseDate } = useContext(ConfigContext)
   const dispatch = useContext(ChartDispatchContext)
   const dataKey = config.xAxis.dataKey
   const series = config.series || []
 
+  const renderPatternDefs = () => {
+    if (!config.legend?.patterns || Object.keys(config.legend.patterns).length === 0) {
+      return null
+    }
+
+    return (
+      <>
+        {Object.entries(config.legend.patterns).map(([key, pattern]) => {
+          const patternId = `chart-pattern-${key}`
+          const size = pattern.patternSize || 8
+
+          switch (pattern.shape) {
+            case 'circles':
+              return (
+                <PatternCircles
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  fill={pattern.color}
+                  radius={1.25}
+                />
+              )
+            case 'lines':
+              return (
+                <PatternLines
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
+                  orientation={['horizontal']}
+                />
+              )
+            case 'diagonalLines':
+              return (
+                <PatternLines
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
+                  orientation={['diagonalRightToLeft']}
+                />
+              )
+            case 'waves':
+              return (
+                <PatternWaves
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  fill={pattern.color}
+                  strokeWidth={0.25}
+                />
+              )
+            default:
+              return null
+          }
+        })}
+      </>
+    )
+  }
+
   // Capture initial brush extent after mount and sync accessible extent
   useEffect(() => {
     if (brushRef.current && brushRef.current.state.extent.x0 !== -1) {
@@ -133,8 +201,22 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
       return scaleBand<string>({ domain: [], range: [0, Math.max(xMax, 0)] })
     }
 
-    const mappedDates = tableData.map(row => row[dataKey])
-    const domain = config?.xAxis?.sortByRecentDate ? [...mappedDates].reverse() : mappedDates
+    const mappedValues = tableData.map(row => row[dataKey])
+
+    // Sort domain chronologically for date types, matching the main chart's sort behavior.
+    // Without this, data arriving in reverse chronological order renders the brush backwards.
+    const xAxisType = config?.xAxis?.type
+    let domain: string[]
+    if (xAxisType === 'date' || xAxisType === 'date-time') {
+      const sorted = [...mappedValues].sort((a, b) => {
+        const dateA = parseDate ? parseDate(a) : new Date(a)
+        const dateB = parseDate ? parseDate(b) : new Date(b)
+        return dateA - dateB
+      })
+      domain = config?.xAxis?.sortByRecentDate ? sorted.reverse() : sorted
+    } else {
+      domain = config?.xAxis?.sortByRecentDate ? [...mappedValues].reverse() : mappedValues
+    }
 
     return scaleBand<string>({
       domain,
@@ -142,30 +224,82 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
       paddingInner: 0.1,
       paddingOuter: 0.1
     })
-  }, [tableData, dataKey, config?.xAxis?.sortByRecentDate, xMax])
+  }, [tableData, dataKey, config?.xAxis?.sortByRecentDate, config?.xAxis?.type, parseDate, xMax])
 
   // Simple Y scale for brush (identity mapping)
   const yScale = useMemo(() => scaleLinear<number>({ domain: [0, BRUSH_HEIGHT], range: [BRUSH_HEIGHT, 0] }), [])
 
-  // Mini chart Y scale
+  // Helper to build a mini Y scale from a subset of series
+  const buildMiniYScale = useCallback(
+    (seriesSubset: typeof series, includeZero: boolean) => {
+      const defaultScale = scaleLinear({ domain: [0, 100], range: [BRUSH_HEIGHT - 4, 2] })
+      if (!seriesSubset.length || !tableData.length) return defaultScale
+
+      let minValue = Number.POSITIVE_INFINITY
+      let maxValue = Number.NEGATIVE_INFINITY
+      let hasValidValues = false
+
+      for (const s of seriesSubset) {
+        if (!s.dataKey) continue
+        for (const row of tableData) {
+          const value = parseFloat(row[s.dataKey])
+          if (!isNaN(value) && isFinite(value)) {
+            hasValidValues = true
+            minValue = Math.min(minValue, value)
+            maxValue = Math.max(maxValue, value)
+          }
+        }
+      }
+
+      if (!hasValidValues) return defaultScale
+
+      if (includeZero) minValue = Math.min(0, minValue)
+
+      if (minValue === maxValue) {
+        const padding = Math.abs(minValue) * 0.1 || 10
+        minValue = minValue - padding
+        maxValue = maxValue + padding
+        if (minValue > 0) minValue = 0
+      }
+
+      const domain = [minValue, maxValue]
+      return scaleLinear({ domain, range: [BRUSH_HEIGHT - 4, 2], nice: true })
+    },
+    [tableData]
+  )
+
+  // Determine if we have a right-axis series (dual-axis combo)
+  const hasRightAxis = useMemo(
+    () => config.visualizationType === 'Combo' && series.some(s => s.axis === 'Right'),
+    [series, config.visualizationType]
+  )
+
+  // Mini chart Y scale — left-axis (or all series when there's no right axis)
   const miniYScale = useMemo(() => {
     if (!series.length || !tableData.length) {
       return scaleLinear({ domain: [0, 100], range: [BRUSH_HEIGHT - 4, 2] })
     }
 
+    const barSeriesTypes = new Set(['Bar', 'Paired Bar', 'Deviation Bar', 'Combo'])
+    const hasBarSeries =
+      config.visualizationType === 'Bar' ||
+      (config.visualizationType === 'Combo' && series.some(s => barSeriesTypes.has(s.type)))
     const isStacked =
       config.visualizationSubType === 'stacked' &&
       (config.visualizationType === 'Bar' || config.visualizationType === 'Area Chart')
+
+    // When dual-axis, only use left-axis series for this scale
+    const leftSeries = hasRightAxis ? series.filter(s => s.axis !== 'Right') : series
+
     let minValue = Number.POSITIVE_INFINITY
     let maxValue = Number.NEGATIVE_INFINITY
     let hasValidValues = false
 
     if (isStacked) {
-      // For stacked bars, calculate the sum of all series for each row
       for (const row of tableData) {
         let rowSum = 0
         let hasRowValue = false
-        for (const s of series) {
+        for (const s of leftSeries) {
           if (!s.dataKey) continue
           const value = parseFloat(row[s.dataKey])
           if (!isNaN(value) && isFinite(value)) {
@@ -179,11 +313,9 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
           maxValue = Math.max(maxValue, rowSum)
         }
       }
-      // For stacked charts, ensure domain starts at 0
       minValue = Math.min(0, minValue)
     } else {
-      // For non-stacked charts, use individual series values
-      for (const s of series) {
+      for (const s of leftSeries) {
         if (!s.dataKey) continue
         for (const row of tableData) {
           const value = parseFloat(row[s.dataKey])
@@ -194,19 +326,13 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
           }
         }
       }
-      // For bar charts, ensure domain includes 0
-      if (config.visualizationType === 'Bar') {
-        minValue = Math.min(0, minValue)
-      }
+      if (hasBarSeries) minValue = Math.min(0, minValue)
     }
 
-    // Handle edge case where all values are the same
     if (hasValidValues && minValue === maxValue) {
-      // Create a domain with some padding around the single value
       const padding = Math.abs(minValue) * 0.1 || 10
       minValue = minValue - padding
       maxValue = maxValue + padding
-      // Ensure 0 is included if we're near it
       if (minValue > 0) minValue = 0
     }
 
@@ -214,14 +340,18 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
       return scaleLinear({ domain: [0, 100], range: [BRUSH_HEIGHT - 4, 2] })
     }
 
-    // Ensure domain includes 0 for bar charts
-    if (config.visualizationType === 'Bar') {
-      minValue = Math.min(0, minValue)
-    }
+    if (hasBarSeries) minValue = Math.min(0, minValue)
 
     const domain = minValue === maxValue ? [minValue - 1, maxValue + 1] : [minValue, maxValue]
     return scaleLinear({ domain, range: [BRUSH_HEIGHT - 4, 2], nice: true })
-  }, [series, tableData, config.visualizationSubType, config.visualizationType])
+  }, [series, tableData, config.visualizationSubType, config.visualizationType, hasRightAxis])
+
+  // Mini chart Y scale for right-axis series (dual-axis combo charts)
+  const miniRightYScale = useMemo(() => {
+    if (!hasRightAxis) return undefined
+    const rightSeries = series.filter(s => s.axis === 'Right')
+    return buildMiniYScale(rightSeries, false)
+  }, [hasRightAxis, series, buildMiniYScale])
 
   // Fallback: Window mouseup listener to prevent stuck drag states
   useEffect(() => {
@@ -1107,6 +1237,7 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
               shapeRendering='auto'
             />
           </pattern>
+          {renderPatternDefs()}
         </defs>
 
         {/* Mini chart preview */}
@@ -1118,6 +1249,7 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
               dataKey={dataKey}
               xScale={xScale}
               miniYScale={miniYScale}
+              miniRightYScale={miniRightYScale}
               colorScale={colorScale}
               config={config}
               xMax={safeXMax}