@cdc/chart 4.26.1 → 4.26.3

package/src/components/LinearChart/README.md

@@ -0,0 +1,109 @@
+# LinearChart
+
+The main component for rendering linear visualizations (line charts, bar charts, area charts, etc.).
+
+## File Structure
+
+```
+LinearChart/
+├── README.md                    # This file
+├── linearChart.constants.ts     # Shared constants and visualization type definitions
+├── VisualizationRenderer.tsx    # Renders the appropriate chart type
+├── utils/
+│   └── tickFormatting.ts        # Consolidated tick formatting logic (useTickFormatters hook)
+└── tests/
+    ├── LinearChart.test.tsx     # Component tests
+    └── mockConfigContext.ts     # Test utilities
+```
+
+## Main Component
+
+**File:** `../LinearChart.tsx` (parent directory)
+
+The main LinearChart component orchestrates all the sub-components and handles:
+- Scale calculations (via `useScales` hook)
+- Tooltip management
+- Brush/zoom functionality
+- Animation state
+- Small multiples delegation
+
+## Sub-Components
+
+### VisualizationRenderer
+**File:** `VisualizationRenderer.tsx`
+
+A switch component that renders the appropriate visualization based on `visualizationType`:
+- Area Chart (stacked)
+- Bar Chart
+- Line Chart
+- Combo Chart
+- Scatter Plot
+- Box Plot
+- Deviation Bar
+- Bump Chart
+- Forest Plot
+- Paired Bar
+- Spark Line
+- Warming Stripes
+
+### Tick Formatting
+**File:** `utils/tickFormatting.ts`
+
+The `useTickFormatters` hook provides consolidated tick formatting for both axes:
+- `handleLeftTickFormatting` - Y-axis tick formatting
+- `handleBottomTickFormatting` - X-axis tick formatting
+
+Handles special cases:
+- Logarithmic scales
+- Forest plot data keys
+- Date formatting
+- Number abbreviation
+
+## Constants
+**File:** `linearChart.constants.ts`
+
+```typescript
+// Visualization type string constants
+VISUALIZATION_TYPES
+
+// Types that don't show grid lines
+TYPES_WITHOUT_GRID: ['Spark Line', 'Forest Plot', 'Warming Stripes']
+
+// Types excluded from standard line chart rendering
+LINE_CHART_EXCLUDED_TYPES
+
+// Types that show tooltip guide lines
+TYPES_WITH_TOOLTIP_GUIDES
+```
+
+## Related Components
+
+Axis components are in `../Axis/`:
+- `LeftAxis` - Y-axis rendering
+- `BottomAxis` - X-axis rendering
+- `RightAxis` - Secondary Y-axis (dual-axis charts)
+- `PairedBarAxis` - Specialized axis for paired bar charts
+
+## Context Dependencies
+
+LinearChart uses `ConfigContext` for:
+- `config` - Full chart configuration
+- `formatDate`, `formatNumber` - Formatting functions
+- `parseDate` - Date parsing
+- `transformedData` - Processed chart data
+- `currentViewport` - Responsive breakpoint
+
+## Testing
+
+Run tests with:
+```bash
+vitest packages/chart/src/components/LinearChart/tests/
+```
+
+## Refactoring History
+
+This component was refactored from 1,704 lines to ~845 lines by extracting:
+1. Axis components to `../Axis/`
+2. VisualizationRenderer to handle chart type switching
+3. Tick formatting to `utils/tickFormatting.ts`
+4. Constants to `linearChart.constants.ts`

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)
+}