@moderneinc/react-charts 1.2.0 → 1.3.0-next.bc5134

package/dist/components/morph-chart/morph-chart.component.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import { MorphChartProps } from './morph-chart.types';
+/**
+ * MorphChart - Seamlessly morphs between parliament and stacked area visualizations
+ *
+ * This component uses D3 to create smooth transitions between a parliament chart
+ * (point-in-time view) and a stacked area chart (historical view).
+ *
+ * Key insight: The parliament chart represents the rightmost edge (latest timestamp)
+ * of the stacked area chart. During morphing:
+ * - Parliament → Stacked Area: Seats slide to the right edge, then areas expand leftward
+ * - Stacked Area → Parliament: Areas collapse to the right edge, then seats expand to parliament layout
+ */
+export declare const MorphChart: FunctionComponent<MorphChartProps>;

package/dist/components/morph-chart/morph-chart.types.d.ts

@@ -0,0 +1,175 @@
+import { D3StackedAreaCategory } from '../d3-stacked-area-chart/d3-stacked-area-chart.types';
+export type MorphMode = 'area' | 'parliament' | 'morphing';
+export type MorphChartDataPoint = {
+    timestamp: number;
+    values: Record<string, number>;
+};
+export type MorphChartCategory = D3StackedAreaCategory & {
+    /** Parliament chart mapping (for special categories) */
+    parliamentMapping?: {
+        isSpecialCategory?: boolean;
+    };
+};
+/**
+ * Hovered data state for tooltips and interactions
+ */
+export type HoveredData = {
+    label: string;
+    value: number;
+    color: string;
+} | null;
+export type MorphChartProps = {
+    /** Time series data for area chart */
+    data: MorphChartDataPoint[];
+    /** Category definitions */
+    categories: MorphChartCategory[];
+    /** Current visualization mode */
+    mode: 'parliament' | 'stacked-area';
+    /** Morph progress: 0 = fully area, 1 = fully parliament */
+    morphProgress?: number;
+    /** Chart dimensions */
+    width?: number;
+    height?: number;
+    /** Margins */
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Time range for area chart */
+    timeRange?: [number, number];
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show axes */
+    showAxes?: boolean;
+    /**
+     * Color for axis labels (dates on x-axis, values on y-axis).
+     * @default undefined (inherits from SVG default, typically black)
+     */
+    axisLabelColor?: string;
+    /**
+     * Font size for axis labels in pixels.
+     * Increase this value when displaying charts at smaller sizes (e.g., in dashboards).
+     * @default 14
+     */
+    axisLabelSize?: number;
+    /** Enable brush selection */
+    enableBrush?: boolean;
+    /** Callback when time range changes */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /** Minimum allowed timestamp for time range selection (constrains brush selection) */
+    minAllowedTime?: number;
+    /** Maximum allowed timestamp for time range selection (constrains brush selection) */
+    maxAllowedTime?: number;
+    /** Format date for axis */
+    formatDate?: (timestamp: number) => string;
+    /** Format value for axis */
+    formatValue?: (value: number) => string;
+    /** Event markers */
+    markers?: Array<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+    }>;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Callback when morphing animation completes */
+    onMorphComplete?: () => void;
+    /** Callback when animation state changes */
+    onAnimationStateChange?: (isAnimating: boolean) => void;
+    /** Callback when GSAP timeline is ready for control */
+    onTimelineReady?: (timeline: unknown) => void;
+    /** Callback for animation progress updates */
+    onAnimationProgress?: (progress: number, stage: string) => void;
+    /** Parliament arc angle (degrees) */
+    arcAngle?: number;
+    /** Parliament radius */
+    parliamentRadius?: number;
+    /** Parliament seat size */
+    seatSize?: number;
+    /** Use enhanced parliament rendering */
+    useEnhancedParliament?: boolean;
+    /** Callback when hover state changes */
+    onHoveredDataChange?: (data: HoveredData) => void;
+    /** Currently hovered category (for external control of highlighting) */
+    hoveredCategory?: string | null;
+    /** Max seats before scaling (default: 500) */
+    maxSeats?: number;
+    /** Show tooltip overlay (default: true) */
+    showTooltip?: boolean;
+    /** Show category summary table (default: false for MorphChart) */
+    showTable?: boolean;
+    /** Show scaled indicator when seats > maxSeats (default: true) */
+    showScaledIndicator?: boolean;
+    /**
+     * Explicit timestamp that the parliament represents.
+     * If provided, this overrides automatic timestamp detection and ensures
+     * the bar slides to the correct position on the timeline during animation.
+     * If not provided, defaults to the rightmost (most recent) timestamp.
+     */
+    parliamentTimestamp?: number;
+    /** Timeline events to display below the x-axis (area mode only) */
+    timelineEvents?: Array<{
+        timestamp: number;
+        eventName: string;
+        color?: string;
+    }>;
+    /** Show timeline track (default: false) */
+    showTimeline?: boolean;
+    /** Timeline track height in pixels (default: 40) */
+    timelineHeight?: number;
+    /** Space between x-axis and timeline in pixels (default: 35) */
+    timelineOffset?: number;
+    /**
+     * Color for brush selection overlay.
+     * Used for both the selection area and drag handles.
+     * @default '#69b3a2'
+     */
+    brushColor?: string;
+};
+/**
+ * Seat position in parliament layout
+ */
+export type SeatPosition = {
+    x: number;
+    y: number;
+    category: string;
+    categoryIndex: number;
+    seatIndex: number;
+    ring: number;
+    angle: number;
+    radius: number;
+};
+/**
+ * Area chart point in cartesian space
+ */
+export type AreaPoint = {
+    x: number;
+    y: number;
+    y0: number;
+    y1: number;
+    category: string;
+    timestamp: number;
+};
+/**
+ * Parliament layout metadata
+ */
+export type ParliamentLayout = {
+    arcAngle: number;
+    radius: number;
+    innerRadius: number;
+    centerX: number;
+    centerY: number;
+    seatSize: number;
+    seats: SeatPosition[];
+    totalSeats: number;
+};
+/**
+ * Area chart layout metadata
+ */
+export type AreaLayout = {
+    chartWidth: number;
+    chartHeight: number;
+    points: AreaPoint[];
+};

package/dist/components/morph-chart/utils/animation-constants.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Animation constants for parliament to stacked area morphing
+ * Centralized configuration for timing, easing, and stage proportions
+ */
+/**
+ * GSAP easing functions for smooth transitions
+ * Uses GSAP's power easing for professional motion
+ */
+export declare const EASING: {
+    /** Smooth acceleration and deceleration - used for transformations */
+    readonly IN_OUT: "power2.inOut";
+    /** Smooth deceleration only - used for sliding and growing */
+    readonly OUT: "power2.out";
+};
+/**
+ * Timing constants for staggered animations
+ */
+export declare const TIMING: {
+    /** No stagger - all elements animate simultaneously */
+    readonly NO_STAGGER: 0;
+    /** Ripple effect delay - each bar delayed by distance × this value (50ms per unit) */
+    readonly RIPPLE_STAGGER_DELAY: 0.05;
+};

package/dist/components/morph-chart/utils/area-renderer.d.ts

@@ -0,0 +1,24 @@
+import { Selection } from 'd3-selection';
+import { MorphChartCategory } from '../morph-chart.types';
+interface AreaRenderOptions {
+    xScale: (value: Date) => number;
+    yScale: (value: number) => number;
+    addClasses?: boolean;
+    instanceId?: string;
+}
+interface StackedDataPoint {
+    data: {
+        timestamp: number;
+    };
+    0: number;
+    1: number;
+}
+/**
+ * Render stacked areas into an SVG container
+ * @param container - D3 selection of the container (typically a <g> element)
+ * @param stackedData - D3 stacked data (output of d3.stack())
+ * @param categories - Category definitions with colors and opacity
+ * @param options - Rendering options (scales, styling)
+ */
+export declare function renderStackedAreas(container: Selection<SVGGElement, unknown, null, undefined>, stackedData: StackedDataPoint[][], categories: MorphChartCategory[], options: AreaRenderOptions): void;
+export {};

package/dist/components/morph-chart/utils/bar-renderer.d.ts

@@ -0,0 +1,19 @@
+import { MorphChartCategory } from '../morph-chart.types';
+export type StackedBarSegment = {
+    timestamp: number;
+    category: string;
+    dataKey: string;
+    y0: number;
+    y1: number;
+    value: number;
+    color: string;
+    isSpecialCategory: boolean;
+};
+/**
+ * Generate stacked bar data from time series
+ * Converts raw data into stacked segments for bar rendering
+ */
+export declare function generateStackedBarData(data: Array<{
+    timestamp: number;
+    [key: string]: number;
+}>, categories: MorphChartCategory[]): StackedBarSegment[];

package/dist/components/morph-chart/utils/gsap-orchestrator.d.ts

@@ -0,0 +1,291 @@
+import { Selection } from 'd3-selection';
+import { MorphChartCategory } from '../morph-chart.types';
+interface AnimationDurations {
+    seatsToRings: number;
+    ringsToBar: number;
+    axesReveal: number;
+    barSlide: number;
+    barsGrow: number;
+    barsToArea: number;
+    ringsHold?: number;
+}
+interface AnimationCallbacks {
+    onStageComplete?: (stage: string) => void;
+    onProgress?: (progress: number) => void;
+    onComplete?: () => void;
+}
+interface AnimationControls {
+    play: () => void;
+    pause: () => void;
+    reverse: () => void;
+    restart: () => void;
+    seek: (progress: number) => void;
+    seekToStage: (stageName: string) => void;
+    kill: () => void;
+    getProgress: () => number;
+    getCurrentStage: () => string;
+    getTimeline: () => gsap.core.Timeline;
+}
+/**
+ * GSAP Orchestrator class that manages the entire animation sequence
+ */
+export declare class GSAPOrchestrator {
+    private timeline;
+    private currentStage;
+    private callbacks;
+    private durations;
+    constructor(durations: AnimationDurations, callbacks?: AnimationCallbacks);
+    /**
+     * Stage 1a: Animate parliament seats transforming into slinky rings
+     *
+     * Transforms the circular parliament layout into a slinky (spring coil) formation.
+     * This creates a whimsical intermediate state between the circular parliament
+     * and the stacked bar, making the transition more visually engaging.
+     *
+     * @param seats - D3 selection of parliament seat elements to animate
+     * @param baselineY - Y-coordinate of the chart baseline (reference for positioning)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Parliament seats (circular arc) → Slinky rings (elliptical coils)
+     * - Seats morph and fade into overlapping rings
+     * - Rings positioned along the parliament arc initially
+     * - Uses perspective effects for 3D slinky appearance
+     *
+     * **Data preservation:**
+     * - Original seat positions stored in data-orig-* attributes for potential reversal
+     * - Current dimensions preserved before transformation
+     *
+     * **Timeline integration:**
+     * - Added at 'seatsToRings' label (first stage)
+     * - Duration: Set by durations.seatsToRings
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const seats = svg.selectAll('.parliament-seat');
+     * const baselineY = height - margin.bottom;
+     * orchestrator.animateSeatsToRings(seats, baselineY);
+     * ```
+     */
+    animateSeatsToRings(seats: Selection<SVGRectElement, unknown, null, undefined>, baselineY: number): GSAPOrchestrator;
+    /**
+     * Stage 1b: Animate slinky rings collapsing into stacked bar
+     *
+     * Transforms the slinky rings created in Stage 1a into a stacked
+     * vertical bar. Rings compress and stack vertically to form rectangular
+     * segments of the final bar, maintaining visual continuity.
+     *
+     * @param seats - D3 selection of ring elements (formerly seats) to animate
+     * @param targetPositions - Array of target positions for each segment, where each position defines the final rectangle geometry (x, y, width, height)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Slinky rings → Stacked bar segments (rectangles)
+     * - Rings compress and flatten into bar segments
+     * - Reposition to stack vertically in correct order
+     * - All segments animate simultaneously (no stagger)
+     * - Uses power2.inOut easing for smooth acceleration/deceleration
+     *
+     * **Data requirements:**
+     * - Target positions must match ring count (indexed by array position)
+     * - Each position defines final x, y, width, height for the bar segment
+     *
+     * **Timeline integration:**
+     * - Added at 'ringsToBar' label (after seatsToRings)
+     * - Duration: Set by durations.ringsToBar
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const rings = svg.selectAll('.slinky-ring');
+     * const targets = calculateBarPositions(rings);
+     * orchestrator.animateRingsToBar(rings, targets);
+     * ```
+     */
+    animateRingsToBar(seats: Selection<SVGRectElement, unknown, null, undefined>, targetPositions: Array<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>): GSAPOrchestrator;
+    /**
+     * Stage 2a: Reveal X and Y axes to establish timeline context
+     *
+     * Fades in the chart axes (x-axis with dates, y-axis with values) to provide
+     * spatial context before the bar slides to its position. This stage establishes
+     * the timeline framework that gives meaning to the bar's position.
+     *
+     * @param xAxisGroup - D3 selection of the x-axis group element (must have opacity: 0)
+     * @param yAxisGroup - D3 selection of the y-axis group element (must have opacity: 0)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Axes fade in from opacity 0 → 1
+     * - Uses full stage duration for smooth, gradual reveal
+     * - Both axes animate simultaneously
+     * - Uses power2.inOut easing for professional motion
+     *
+     * **Data requirements:**
+     * - Axes must already exist in the DOM with opacity: 0
+     * - xAxisGroup should contain tick marks and labels for dates
+     * - yAxisGroup should contain tick marks and labels for values
+     *
+     * **Timeline integration:**
+     * - Added at 'axesReveal' label (after seats→bar transformation)
+     * - Duration: 12.5% of total animation (STAGE_DURATION_RATIOS.AXES_REVEAL)
+     * - Happens **before** bar slide to establish context first
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const xAxis = svg.select('.x-axis').style('opacity', 0);
+     * const yAxis = svg.select('.y-axis').style('opacity', 0);
+     * orchestrator.animateAxesReveal(xAxis, yAxis);
+     * ```
+     */
+    animateAxesReveal(xAxisGroup: Selection<SVGGElement, unknown, null, undefined>, yAxisGroup: Selection<SVGGElement, unknown, null, undefined>): GSAPOrchestrator;
+    /**
+     * Stage 2b: Slide the collapsed bar horizontally to its timeline position
+     *
+     * Moves the vertical bar created in Stage 1 to its correct x-position on the timeline.
+     * This stage establishes spatial context by positioning the bar relative to the time axis.
+     *
+     * @param barSegments - D3 selection of bar segment rectangles to slide
+     * @param targetX - Final x-coordinate where the bar should be positioned on the timeline
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Horizontal slide only (y-position and height remain constant)
+     * - All bar segments move together as a unified column
+     * - Uses power2.out easing for smooth deceleration (settling into place)
+     *
+     * **Timeline integration:**
+     * - Added at 'barSlide' label (after seats→bar transformation)
+     * - Duration: 25% of total animation (STAGE_DURATION_RATIOS.BAR_SLIDE)
+     * - Triggers onStageComplete callback when starting
+     *
+     * **Positioning:**
+     * - targetX typically corresponds to a specific timestamp on the x-axis
+     * - For "rightmost edge" positioning: targetX = width - margin.right
+     * - For "middle date" positioning: targetX = xScale(middleTimestamp)
+     *
+     * @example
+     * ```ts
+     * const barSegments = svg.selectAll('.bar-segment');
+     * const rightEdgeX = width - margin.right;
+     * orchestrator.animateBarSlide(barSegments, rightEdgeX);
+     * ```
+     */
+    animateBarSlide(barSegments: Selection<SVGRectElement, unknown, null, undefined>, targetX: number): GSAPOrchestrator;
+    /**
+     * Stage 3: Grow other bars with ripple effect from parliament position
+     *
+     * Animates the historical bars growing from the baseline, creating a wave-like
+     * ripple effect radiating outward from the parliament bar's position. Bars closer
+     * to the parliament position appear first, with increasing delay for distant bars.
+     *
+     * @param otherBars - D3 selection of bars at other timestamps (excluding parliament bar)
+     * @param parliamentIndex - Timeline index of the parliament bar (center of ripple)
+     * @param staggerDelay - Delay multiplier per distance unit (default: TIMING.RIPPLE_STAGGER_DELAY = 0.05)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Bars grow vertically from height=0 (baseline) to final stacked height
+     * - Ripple effect: delay = |barIndex - parliamentIndex| × staggerDelay
+     * - Bars furthest from parliament bar appear last (e.g., delay of 0.50s for 10 bars away)
+     * - Uses power2.out easing for smooth upward growth
+     *
+     * **Data requirements:**
+     * Each bar element must have these data attributes:
+     * - `data-final-y`: Target y-coordinate (top of bar)
+     * - `data-final-height`: Target height
+     * - `data-timestamp-index`: Position in timeline array
+     * - `data-baseline-y`: Y-coordinate of chart baseline (for fromTo animation)
+     *
+     * **Timeline integration:**
+     * - Added at 'barsGrow' label (after bar slide)
+     * - Duration: 25% of total animation (STAGE_DURATION_RATIOS.BARS_GROW)
+     * - Individual bars have additional stagger delays
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const otherBars = svg.selectAll('.bar:not(.parliament-bar)');
+     * const parliamentIndex = 15; // Parliament bar is at index 15
+     * orchestrator.animateBarsGrow(otherBars, parliamentIndex, 0.05);
+     * // Bars will appear with 50ms delay per timeline distance
+     * ```
+     */
+    animateBarsGrow(otherBars: Selection<SVGRectElement, unknown, null, undefined>, parliamentIndex: number, staggerDelay?: number): GSAPOrchestrator;
+    /**
+     * Stage 4: Morph bars into curved areas using path interpolation
+     *
+     * Transforms rectangular stacked bars into smooth, curved area paths. This is
+     * the final stage that creates the traditional stacked area chart appearance.
+     * Uses GSAP's path morphing to interpolate from bar rectangles to bezier curves.
+     *
+     * @param allBars - D3 selection of all bar rectangles (will be hidden during morph)
+     * @param morphPaths - D3 selection of SVG paths used for morphing (one per category)
+     * @param targetAreaPaths - Map of category IDs to target SVG path strings (curved areas)
+     * @param categories - Array of category definitions (used for grouping)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Rectangular bars (straight edges) → Curved area paths (smooth curves)
+     * - Bars fade out (opacity: 0), morphing paths fade in (opacity: 1)
+     * - GSAP interpolates path data attribute from bar shape to curve shape
+     * - Uses power2.inOut easing for smooth shape morphing
+     *
+     * **Path morphing technique:**
+     * 1. Each category has a morphPath element that starts as combined bar outline
+     * 2. morphPath's `d` attribute animates from bar path → area path
+     * 3. GSAP handles point interpolation automatically
+     * 4. Original bars hidden to avoid visual duplication
+     *
+     * **Data requirements:**
+     * - morphPaths must have `data-category` attribute matching category ID
+     * - allBars must have CSS class `category-{categoryKey}` for grouping
+     * - targetAreaPaths keys must match category IDs
+     *
+     * **Timeline integration:**
+     * - Added at 'barsToArea' label (after bars grow)
+     * - Duration: 20% of total animation (STAGE_DURATION_RATIOS.BARS_TO_AREA)
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const allBars = svg.selectAll('.stacked-bar rect');
+     * const morphPaths = svg.selectAll('.morph-path');
+     * const targetPaths = new Map([
+     *   ['java', 'M 100 300 C 150 280, 200 270, 250 260 L 250 300 Z'],
+     *   ['python', 'M 100 260 C 150 240, 200 230, 250 220 L 250 260 Z']
+     * ]);
+     * orchestrator.animateBarsToArea(allBars, morphPaths, targetPaths, categories);
+     * ```
+     */
+    animateBarsToArea(allBars: Selection<SVGRectElement, unknown, null, undefined>, morphPaths: Selection<SVGPathElement, unknown, null, undefined>, targetAreaPaths: Map<string, string>, _categories: MorphChartCategory[]): GSAPOrchestrator;
+    /**
+     * Handle timeline progress updates
+     */
+    private handleProgress;
+    /**
+     * Get animation control interface
+     */
+    getControls(): AnimationControls;
+    /**
+     * Start the animation
+     */
+    play(): void;
+    /**
+     * Clean up and destroy the timeline
+     */
+    destroy(): void;
+}
+export {};

package/dist/components/morph-chart/utils/parliament-renderer.d.ts

@@ -0,0 +1,23 @@
+import { Selection } from 'd3-selection';
+import { MorphChartCategory, ParliamentLayout } from '../morph-chart.types';
+/**
+ * Sanitize category name for use in CSS class names
+ * Replaces spaces, slashes, and other special characters with hyphens
+ */
+export declare function sanitizeCategoryForClass(category: string): string;
+interface ParliamentRenderOptions {
+    centerX: number;
+    centerY: number;
+    addClasses?: boolean;
+    instanceId?: string;
+    parliamentRadius?: number;
+}
+/**
+ * Render parliament seats into an SVG container
+ * @param container - D3 selection of the container (typically a <g> element)
+ * @param layout - Parliament layout with seat positions
+ * @param categories - Category definitions with colors
+ * @param options - Rendering options (positioning, styling)
+ */
+export declare function renderParliamentSeats(container: Selection<SVGGElement, unknown, null, undefined>, layout: ParliamentLayout, categories: MorphChartCategory[], options: ParliamentRenderOptions): void;
+export {};

package/dist/components/morph-chart/utils/parliament-seat-extractor.d.ts

@@ -0,0 +1,33 @@
+import { ParliamentLayout } from '../morph-chart.types';
+type Party = {
+    id: string | number;
+    name: string;
+    seats: number;
+    colour: string;
+};
+type ParliamentOptions = {
+    arcAngle: number;
+    arcAngleFlexibility?: number;
+    radius: number;
+    seatSize: number;
+    minSeatSize: number;
+    maxSeatSize: number;
+    spacing: number;
+    innerRadiusRatio: number;
+};
+/**
+ * Generate parliament layout with seat positions
+ * Based on the logic from parliament-svg-enhanced.ts but returns position data
+ * instead of SVG elements
+ */
+export declare function generateParliamentLayout(parties: Party[], options: ParliamentOptions): ParliamentLayout;
+/**
+ * Convert category data to parliament party format
+ */
+export declare function categoriesToParties(categories: Array<{
+    dataKey: string;
+    label: string;
+    color: string;
+    value: number;
+}>, totalRepositories: number, maxSeats: number): Party[];
+export {};

package/dist/components/morph-chart/utils/position-mapper.d.ts

@@ -0,0 +1,48 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { ParliamentLayout, SeatPosition } from '../morph-chart.types';
+/**
+ * Map parliament seats to their target positions at the right edge of the stacked area chart
+ * Seats can be positioned at the top (y1) or distributed vertically within their category's segment
+ *
+ * NOTE: stackData uses dataKey, but parliamentLayout.seats use category labels.
+ * We need to match by label, so stackData must contain label information.
+ *
+ * @param distributeVertically - If true, seats are spread between y0 and y1; if false, all seats at y1
+ */
+export declare function mapSeatsToStackEdge(parliamentLayout: ParliamentLayout, stackData: Array<{
+    dataKey: string;
+    label?: string;
+    y0: number;
+    y1: number;
+    timestamp?: number;
+    isSpecialCategory?: boolean;
+}>, xScale: ScaleTime<number, number>, yScale: ScaleLinear<number, number>, chartWidth: number, chartHeight: number, distributeVertically?: boolean): Map<SeatPosition, {
+    x: number;
+    y: number;
+}>;
+/**
+ * Extract the rightmost slice of stacked area data
+ * This represents the same point-in-time as the parliament chart
+ *
+ * IMPORTANT: The stack is generated using original category order.
+ * We build the slice in original order to match the stack generation.
+ */
+export declare function extractRightmostStackSlice(data: Array<{
+    timestamp: number;
+    [key: string]: number;
+}>, categories: Array<{
+    dataKey: string;
+    label: string;
+    color: string;
+    parliamentMapping?: {
+        isSpecialCategory?: boolean;
+    };
+}>, _yScale: ScaleLinear<number, number>): Array<{
+    dataKey: string;
+    label: string;
+    y0: number;
+    y1: number;
+    value: number;
+    timestamp: number;
+    isSpecialCategory?: boolean;
+}>;

package/dist/components/morph-chart/utils/svg-patterns.d.ts

@@ -0,0 +1,19 @@
+import { Selection } from 'd3-selection';
+/**
+ * Add all hatch pattern definitions to an SVG's <defs> element
+ * Call this once when setting up the SVG
+ * @param svg - The SVG selection to add patterns to
+ * @param instancePrefix - Unique prefix for this instance to avoid ID conflicts
+ */
+export declare function addHatchPatternDefs(svg: Selection<SVGSVGElement, unknown, null, undefined>, instancePrefix: string): void;
+/**
+ * Transform a color to use instance-specific pattern IDs
+ * Converts 'url(#patternName)' to 'url(#prefix-patternName)'
+ */
+export declare function transformColorForInstance(color: string, instancePrefix: string): string;
+/**
+ * Get the display color for a category, handling pattern URLs
+ * Returns the line color for patterns (better visibility in hover states)
+ * Works with both instance-specific and generic pattern URLs
+ */
+export declare function getDisplayColor(color: string): string;