@moderneinc/react-charts 1.1.0-next.dcefa6 → 1.2.0-next.0d3f64

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/accordion-generator.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Utility functions for generating accordion-style zig-zag lines
+ * Used in the seats-to-lines animation stage
+ */
+export interface AccordionLinePoint {
+    x: number;
+    y: number;
+    category: string;
+    categoryIndex: number;
+}
+export interface AccordionLineConfig {
+    centerX: number;
+    centerY: number;
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+    amplitude: number;
+    segments: number;
+}
+/**
+ * Generate zig-zag line points for a category's accordion section
+ *
+ * @param config - Configuration for the accordion line
+ * @returns Array of points forming the zig-zag pattern
+ */
+export declare function generateAccordionLine(config: AccordionLineConfig): AccordionLinePoint[];
+/**
+ * Generate accordion lines for all categories
+ *
+ * @param categories - Array of categories with their seat counts
+ * @param parliamentCenter - Center point of the parliament
+ * @param radius - Base radius of the parliament arc
+ * @param arcAngle - Total angle of the parliament arc (in radians)
+ * @returns Map of category to accordion line points
+ */
+export declare function generateCategoryAccordionLines(categories: Array<{
+    name: string;
+    seatCount: number;
+    color: string;
+}>, parliamentCenter: {
+    x: number;
+    y: number;
+}, radius: number, arcAngle?: number): Map<string, AccordionLinePoint[]>;
+/**
+ * Generate a single continuous accordion line for all categories
+ * Creates one connected slinky that spans the entire parliament arc
+ *
+ * @param categories - Array of categories with their seat counts
+ * @param parliamentCenter - Center point of the parliament
+ * @param radius - Base radius of the parliament arc
+ * @param arcAngle - Total angle of the parliament arc (in radians)
+ * @returns Single array of accordion line points with category info
+ */
+export declare function generateContinuousAccordionLine(categories: Array<{
+    name: string;
+    seatCount: number;
+    color: string;
+}>, parliamentCenter: {
+    x: number;
+    y: number;
+}, radius: number, arcAngle?: number): AccordionLinePoint[];
+/**
+ * Create SVG path string from accordion line points
+ *
+ * @param points - Array of accordion line points
+ * @param curved - Whether to use curved lines (true) or sharp zig-zags (false)
+ * @returns SVG path string
+ */
+export declare function createAccordionPath(points: AccordionLinePoint[], curved?: boolean): string;
+/**
+ * Calculate intermediate positions for accordion collapse animation with slinky physics
+ *
+ * @param linePoints - Original accordion line points
+ * @param targetX - Target X position (vertical bar location)
+ * @param targetY - Target Y position (vertical bar location)
+ * @param progress - Animation progress (0-1)
+ * @returns Interpolated points for current progress with wave motion
+ */
+export declare function interpolateAccordionCollapse(linePoints: AccordionLinePoint[], targetX: number, targetY: number, progress: number): AccordionLinePoint[];
+/**
+ * Generate multiple depth layers for slinky 3D effect
+ *
+ * @param config - Base configuration for accordion line
+ * @param numLayers - Number of layers to create (default 3)
+ * @returns Array of accordion line configurations with depth properties
+ */
+export declare function generateLayeredAccordionLines(config: AccordionLineConfig, numLayers?: number): Array<{
+    points: AccordionLinePoint[];
+    depth: number;
+    opacity: number;
+    strokeWidth: number;
+    blur: number;
+}>;
+/**
+ * Generate a single vertical line path for collapsed state
+ *
+ * @param x - X position of the vertical line
+ * @param topY - Top Y position
+ * @param bottomY - Bottom Y position
+ * @returns SVG path string for vertical line
+ */
+export declare function createVerticalLinePath(x: number, topY: number, bottomY: number): string;

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/animation-utils.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Utility functions for animation path manipulation
+ * Shared helpers for creating SVG paths from bar geometries
+ */
+/**
+ * Create a rectangular SVG path from bar dimensions
+ * Used as the initial state for path morphing animations
+ *
+ * @param x - Left edge x-coordinate of the rectangle
+ * @param y - Top edge y-coordinate of the rectangle
+ * @param width - Width of the rectangle
+ * @param height - Height of the rectangle
+ * @returns SVG path string representing a closed rectangle
+ *
+ * @example
+ * ```ts
+ * const path = createRectPath(100, 50, 20, 80);
+ * // Returns: "M 100 130 L 100 50 L 120 50 L 120 130 Z"
+ * ```
+ */
+export declare function createRectPath(x: number, y: number, width: number, height: number): string;
+/**
+ * Create a combined SVG path from multiple bar segments for a single category
+ * Connects all bars into a single continuous path suitable for morphing
+ *
+ * The path traces along the top edges of all bars (left to right),
+ * then closes along the bottom baseline, creating a unified shape.
+ *
+ * @param bars - Array of SVG rect elements to combine
+ * @returns SVG path string representing the combined shape
+ *
+ * @example
+ * ```ts
+ * const bars = svg.selectAll('.category-java rect').nodes();
+ * const combinedPath = createCombinedBarPath(bars);
+ * // Returns path that traces outline of all bars
+ * ```
+ *
+ * @remarks
+ * - Bars are automatically sorted by x-position (left to right)
+ * - Empty array returns empty string
+ * - Path draws: bottom-left → tops (left-to-right) → bottom-right → close
+ */
+export declare function createCombinedBarPath(bars: SVGRectElement[]): string;

package/dist/components/morph-chart/utils/arc-path-calculator.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Arc path calculator for slinky-style seat → bar animations
+ * Generates pronounced bezier arc paths for smooth cascading motion
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface ArcPathData {
+    startX: number;
+    startY: number;
+    controlX: number;
+    controlY: number;
+    endX: number;
+    endY: number;
+    distance: number;
+}
+/**
+ * Calculate the control point for a quadratic bezier curve
+ * Creates a pronounced arc by offsetting perpendicular to the direct path
+ *
+ * @param start - Starting point (seat position)
+ * @param end - Ending point (bar segment position)
+ * @param arcIntensity - How pronounced the arc should be (0-1, default 0.35 for 35% offset)
+ * @returns Control point for the bezier curve
+ */
+export declare function calculateArcControlPoint(start: Point, end: Point, arcIntensity?: number): Point;
+/**
+ * Generate complete arc path data for animating a seat to a bar position
+ *
+ * @param seatPosition - Current seat position in parliament
+ * @param barPosition - Target bar segment position
+ * @param arcIntensity - How pronounced the arc should be (default 0.35)
+ * @returns Complete path data for GSAP animation
+ */
+export declare function generateArcPath(seatPosition: Point, barPosition: Point, arcIntensity?: number): ArcPathData;
+/**
+ * Generate SVG path string for a quadratic bezier arc
+ * Useful for debugging or visual representation
+ *
+ * @param pathData - Arc path data
+ * @returns SVG path string
+ */
+export declare function generateSVGPath(pathData: ArcPathData): string;
+/**
+ * Calculate points along a quadratic bezier curve
+ * Useful for visualizing or debugging the arc path
+ *
+ * @param pathData - Arc path data
+ * @param numPoints - Number of points to generate along the curve (default 20)
+ * @returns Array of points along the curve
+ */
+export declare function getPointsAlongArc(pathData: ArcPathData, numPoints?: number): Point[];

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[];