@cdc/chart 4.26.1 → 4.26.3

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.Horizontal.tsx

@@ -24,6 +24,8 @@ import { ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
 
 const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -72,7 +74,7 @@ const BarChartHorizontal = () => {
     return (
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {
@@ -324,33 +326,15 @@ const BarChartHorizontal = () => {
                   })
 
                   // Check if this bar should use a pattern
-                  const getPatternUrl = (): string | null => {
-                    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
-                      return null
-                    }
-
-                    // Find a pattern that matches this specific bar
-                    for (const [patternKey, pattern] of Object.entries(config.legend.patterns)) {
-                      if (pattern.dataKey && pattern.dataValue) {
-                        // For grouped bar charts, check if the pattern's dataKey matches the current bar's series key
-                        // and if the pattern's dataValue matches the current bar's value
-                        if (pattern.dataKey === bar.key && String(bar.value) === String(pattern.dataValue)) {
-                          return `url(#chart-pattern-${patternKey})`
-                        }
-                        // Fallback for non-grouped charts: check datum field value
-                        else if (!config.series || config.series.length <= 1) {
-                          const dataFieldValue = datum[pattern.dataKey]
-                          if (String(dataFieldValue) === String(pattern.dataValue)) {
-                            return `url(#chart-pattern-${patternKey})`
-                          }
-                        }
-                      }
-                    }
-
-                    return null
-                  }
-
-                  const patternUrl = getPatternUrl()
+                  const patternUrl = getPatternUrlForBar({
+                    patterns: config.legend?.patterns,
+                    datum,
+                    seriesKey: bar.key,
+                    seriesValue: bar.value,
+                    seriesLabels: config.runtime?.seriesLabels,
+                    seriesKeys: config.series?.map(series => series.dataKey),
+                    allowNonSeriesFieldMatch: !config.series || config.series.length <= 1
+                  })
                   const baseBackground = getBarBackgroundColor()
 
                   return (

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

@@ -14,6 +14,8 @@ import { type ChartContext } from '../../../types/ChartContext'
 
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
 
 const BarChartStackedHorizontal = () => {
   const { yMax, yScale, xScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -55,7 +57,7 @@ const BarChartStackedHorizontal = () => {
     return (
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {
@@ -166,35 +168,15 @@ const BarChartStackedHorizontal = () => {
                     </li></ul>`
 
                 // Check if this bar should use a pattern
-                const getPatternUrl = (): string | null => {
-                  if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
-                    return null
-                  }
-
-                  // Find a pattern that matches this specific bar
-                  for (const [patternKey, pattern] of Object.entries(config.legend.patterns)) {
-                    if (pattern.dataKey && pattern.dataValue) {
-                      // For stacked bar charts, check if the pattern's dataKey matches the current bar's series key
-                      // and if the pattern's dataValue matches the current bar's value
-                      const barValue = data[bar.index][bar.key]
-                      if (pattern.dataKey === bar.key && String(barValue) === String(pattern.dataValue)) {
-                        return `url(#chart-pattern-${patternKey})`
-                      }
-                      // Fallback for non-series pattern matching (like the original stacked pattern test)
-                      // Only check this if the pattern dataKey is NOT a series key
-                      else if (!config.runtime.seriesLabels || !config.runtime.seriesLabels[pattern.dataKey]) {
-                        const dataFieldValue = data[bar.index][pattern.dataKey]
-                        if (String(dataFieldValue) === String(pattern.dataValue)) {
-                          return `url(#chart-pattern-${patternKey})`
-                        }
-                      }
-                    }
-                  }
-
-                  return null
-                }
-
-                const patternUrl = getPatternUrl()
+                const patternUrl = getPatternUrlForBar({
+                  patterns: config.legend?.patterns,
+                  datum: data[bar.index],
+                  seriesKey: bar.key,
+                  seriesValue: data[bar.index][bar.key],
+                  seriesLabels: config.runtime?.seriesLabels,
+                  seriesKeys: config.series?.map(series => series.dataKey),
+                  allowNonSeriesFieldMatch: true
+                })
 
                 return (
                   <React.Fragment key={`stack-${stackIndex}-bar-${index}-${barStack.index}`}>

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

@@ -8,6 +8,8 @@ import Regions from '../../Regions'
 import { addMinimumBarHeights } from '../helpers'
 
 import createBarElement from '@cdc/core/components/createBarElement'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
@@ -40,7 +42,7 @@ const BarChartStackedVertical = () => {
     return (
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {
@@ -150,36 +152,15 @@ const BarChartStackedVertical = () => {
                   setBarWidth(barThickness)
 
                   // Check if this bar should use a pattern
-                  const getPatternUrl = (): string | null => {
-                    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
-                      return null
-                    }
-
-                    // Find a pattern that matches this specific bar
-                    for (const [patternKey, patternObj] of Object.entries(config.legend.patterns)) {
-                      const pattern = patternObj as any
-                      if (pattern?.dataKey && pattern?.dataValue) {
-                        // For stacked bar charts, check if the pattern's dataKey matches the current bar's series key
-                        // and if the pattern's dataValue matches the current bar's value
-                        const barValue = bar.bar.data[bar.key]
-                        if (pattern.dataKey === bar.key && String(barValue) === String(pattern.dataValue)) {
-                          return `url(#chart-pattern-${patternKey})`
-                        }
-                        // Fallback for non-series pattern matching (like the original stacked pattern test)
-                        // Only check this if the pattern dataKey is NOT a series key
-                        else if (!config.runtime.seriesLabels || !config.runtime.seriesLabels[pattern.dataKey]) {
-                          const dataFieldValue = bar.bar.data[pattern.dataKey]
-                          if (String(dataFieldValue) === String(pattern.dataValue)) {
-                            return `url(#chart-pattern-${patternKey})`
-                          }
-                        }
-                      }
-                    }
-
-                    return null
-                  }
-
-                  const patternUrl = getPatternUrl()
+                  const patternUrl = getPatternUrlForBar({
+                    patterns: config.legend?.patterns,
+                    datum: bar.bar.data,
+                    seriesKey: bar.key,
+                    seriesValue: bar.bar.data[bar.key],
+                    seriesLabels: config.runtime?.seriesLabels,
+                    seriesKeys: config.series?.map(series => series.dataKey),
+                    allowNonSeriesFieldMatch: true
+                  })
 
                   return (
                     <Group key={`${barStack.index}--${bar.index}--${orientation}`}>

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

@@ -21,6 +21,8 @@ import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { type ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
 
 const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
@@ -86,7 +88,7 @@ const BarChartVertical = () => {
     return (
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {
@@ -325,33 +327,15 @@ const BarChartVertical = () => {
                   }
 
                   // Check if this bar should use a pattern
-                  const getPatternUrl = (): string | null => {
-                    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
-                      return null
-                    }
-
-                    // Find a pattern that matches this specific bar
-                    for (const [patternKey, pattern] of Object.entries(config.legend.patterns)) {
-                      if (pattern.dataKey && pattern.dataValue) {
-                        // For grouped bar charts, check if the pattern's dataKey matches the current bar's series key
-                        // and if the pattern's dataValue matches the current bar's value
-                        if (pattern.dataKey === bar.key && String(bar.value) === String(pattern.dataValue)) {
-                          return `url(#chart-pattern-${patternKey})`
-                        }
-                        // Fallback for non-grouped charts: check datum field value
-                        else if (!config.series || config.series.length <= 1) {
-                          const dataFieldValue = datum[pattern.dataKey]
-                          if (String(dataFieldValue) === String(pattern.dataValue)) {
-                            return `url(#chart-pattern-${patternKey})`
-                          }
-                        }
-                      }
-                    }
-
-                    return null
-                  }
-
-                  const patternUrl = getPatternUrl()
+                  const patternUrl = getPatternUrlForBar({
+                    patterns: config.legend?.patterns,
+                    datum,
+                    seriesKey: bar.key,
+                    seriesValue: bar.value,
+                    seriesLabels: config.runtime?.seriesLabels,
+                    seriesKeys: config.series?.map(series => series.dataKey),
+                    allowNonSeriesFieldMatch: !config.series || config.series.length <= 1
+                  })
                   const baseBackground = getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))
 
                   // Confidence Interval Variables

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/BarChart/helpers/getPatternUrl.ts

@@ -0,0 +1,94 @@
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+
+type LegendPattern = {
+  dataKey?: string
+  dataValue?: string | number
+}
+
+type SeriesLabels = Record<string, string> | undefined
+
+type GetPatternUrlArgs = {
+  patterns?: Record<string, LegendPattern>
+  datum: Record<string, any>
+  seriesKey: string
+  seriesValue: string | number
+  seriesLabels?: SeriesLabels
+  seriesKeys?: string[]
+  allowNonSeriesFieldMatch?: boolean
+}
+
+const normalizeString = (value: unknown): string => String(value ?? '').trim()
+
+const hasPatternValue = (value: unknown): boolean => normalizeString(value) !== ''
+
+const isNumericLike = (value: string): boolean => value !== '' && !Number.isNaN(Number(value))
+
+const valuesMatch = (left: unknown, right: unknown): boolean => {
+  const normalizedLeft = normalizeString(left)
+  const normalizedRight = normalizeString(right)
+
+  if (normalizedLeft === '' || normalizedRight === '') {
+    return false
+  }
+
+  if (isNumericLike(normalizedLeft) && isNumericLike(normalizedRight)) {
+    return Number(normalizedLeft) === Number(normalizedRight)
+  }
+
+  return normalizedLeft === normalizedRight
+}
+
+const isSeriesDataKey = (dataKey: string, seriesLabels?: SeriesLabels, seriesKeys?: string[]): boolean => {
+  if (Array.isArray(seriesKeys) && seriesKeys.length > 0) {
+    return seriesKeys.includes(dataKey)
+  }
+  if (!seriesLabels) return false
+  return Object.prototype.hasOwnProperty.call(seriesLabels, dataKey)
+}
+
+export const getPatternUrl = ({
+  patterns,
+  datum,
+  seriesKey,
+  seriesValue,
+  seriesLabels,
+  seriesKeys,
+  allowNonSeriesFieldMatch = true
+}: GetPatternUrlArgs): string | null => {
+  if (!patterns) {
+    return null
+  }
+
+  let broadMatchUrl: string | null = null
+
+  for (const patternKey in patterns) {
+    if (!Object.prototype.hasOwnProperty.call(patterns, patternKey)) continue
+    const pattern = patterns[patternKey]
+    const dataKey = normalizeString(pattern.dataKey)
+
+    if (!hasPatternValue(pattern.dataValue)) {
+      continue
+    }
+
+    if (dataKey === '') {
+      if (!broadMatchUrl && valuesMatch(seriesValue, pattern.dataValue)) {
+        broadMatchUrl = `url(#${getChartPatternId(patternKey)})`
+      }
+      continue
+    }
+
+    if (dataKey === seriesKey && valuesMatch(seriesValue, pattern.dataValue)) {
+      return `url(#${getChartPatternId(patternKey)})`
+    }
+
+    if (
+      allowNonSeriesFieldMatch &&
+      !isSeriesDataKey(dataKey, seriesLabels, seriesKeys) &&
+      valuesMatch(datum?.[dataKey], pattern.dataValue)
+    ) {
+      return `url(#${getChartPatternId(patternKey)})`
+    }
+  }
+
+  return broadMatchUrl
+}