@moderneinc/react-charts 1.2.0-next.2d0a72 → 1.2.0-next.313329

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

@@ -1,11 +1,13 @@
 import { Selection } from 'd3-selection';
 import { MorphChartCategory } from '../morph-chart.types';
 interface AnimationDurations {
-    seatsToBar: number;
+    seatsToRings: number;
+    ringsToBar: number;
     axesReveal: number;
     barSlide: number;
     barsGrow: number;
     barsToArea: number;
+    ringsHold?: number;
 }
 interface AnimationCallbacks {
     onStageComplete?: (stage: string) => void;
@@ -34,39 +36,76 @@ export declare class GSAPOrchestrator {
     private durations;
     constructor(durations: AnimationDurations, callbacks?: AnimationCallbacks);
     /**
-     * Stage 1: Animate parliament seats collapsing into bar segments
+     * Stage 1a: Animate parliament seats transforming into slinky rings
      *
-     * Transforms the circular parliament layout into a stacked vertical bar.
-     * Each seat morphs from its position in the parliament arc into a rectangular
-     * segment of a bar, maintaining visual continuity through smooth transitions.
+     * 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 rectangles to animate
-     * @param targetPositions - Array of target positions for each seat, where each position defines the final rectangle geometry (x, y, width, height)
+     * @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) → Vertical bar segments (stacked rectangles)
-     * - All seats animate simultaneously (no stagger)
-     * - Uses power2.inOut easing for smooth acceleration/deceleration
+     * - 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
-     * - Target positions must match seat count (indexed by array position)
+     * - Current dimensions preserved before transformation
      *
      * **Timeline integration:**
-     * - Added at 'seatsToBar' label
-     * - Duration: 30% of total animation (STAGE_DURATION_RATIOS.SEATS_TO_BAR)
+     * - 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 targets = calculateBarPositions(seats);
-     * orchestrator.animateSeatsToBar(seats, targets);
+     * 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);
      * ```
      */
-    animateSeatsToBar(seats: Selection<SVGRectElement, unknown, null, undefined>, targetPositions: Array<{
+    animateRingsToBar(seats: Selection<SVGRectElement, unknown, null, undefined>, targetPositions: Array<{
         x: number;
         y: number;
         width: number;

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

@@ -9,6 +9,8 @@ interface ParliamentRenderOptions {
     centerX: number;
     centerY: number;
     addClasses?: boolean;
+    instanceId?: string;
+    parliamentRadius?: number;
 }
 /**
  * Render parliament seats into an SVG container

package/dist/components/morph-chart/utils/slinky-3d-generator.d.ts

@@ -0,0 +1,35 @@
+import { Selection } from 'd3-selection';
+export interface Slinky3DConfig {
+    categories: Array<{
+        name: string;
+        color: string;
+        seatCount: number;
+    }>;
+    centerX: number;
+    centerY: number;
+    radius: number;
+    arcAngle: number;
+}
+/**
+ * Generate HTML content for 3D slinky rings
+ */
+export declare function generate3DSlinkyHTML(categories: Array<{
+    name: string;
+    color: string;
+    seatCount: number;
+}>): string;
+/**
+ * Generate CSS styles for 3D slinky effect
+ */
+export declare function generate3DSlinkyStyles(instanceId: string): string;
+/**
+ * Create 3D slinky elements in SVG using foreignObject
+ */
+export declare function create3DSlinky(container: Selection<SVGGElement, unknown, null, undefined>, config: Slinky3DConfig, instanceId: string): {
+    wrapper: Selection<SVGForeignObjectElement, unknown, null, undefined>;
+    cleanup: () => void;
+};
+/**
+ * Animate 3D slinky compression using GSAP
+ */
+export declare function animate3DSlinkyCompression(instanceId: string, timeline: gsap.core.Timeline, startTime: string, duration: number, targetX: number, targetY: number): void;

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

@@ -0,0 +1,25 @@
+import { Selection } from 'd3-selection';
+export interface SvgSlinkyConfig {
+    categories: Array<{
+        name: string;
+        color: string;
+        seatCount: number;
+    }>;
+    centerX: number;
+    centerY: number;
+    radius: number;
+    innerRadius: number;
+    arcAngle: number;
+}
+/**
+ * Create SVG slinky coils
+ */
+export declare function createSvgSlinky(container: Selection<SVGGElement, unknown, null, undefined>, config: SvgSlinkyConfig, instanceId: string): {
+    slinkyGroup: Selection<SVGGElement, unknown, null, undefined>;
+    cleanup: () => void;
+};
+/**
+ * Animate SVG slinky closing - stacks rings vertically into a bar on the right
+ * Uses staggered animation phases to create realistic slinky walking effect
+ */
+export declare function animateSvgSlinkyCompression(slinkyGroup: Selection<SVGGElement, unknown, null, undefined>, timeline: gsap.core.Timeline, startTime: string, duration: number, targetX: number, targetY: number): void;

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

@@ -3,12 +3,20 @@ export type TimelineEvent = {
     date: Date;
     timestamp: number;
     eventName: string;
+    /**
+     * Optional color for the event marker.
+     * If not provided, defaults to #2F42FF (Digital Blue 500).
+     * Accepts any valid CSS color string.
+     */
+    color?: string;
     [key: string]: unknown;
 };
 export type TimelineSelection = {
     start: number | null;
     end: number | null;
 };
+export type DragHandleType = 'start' | 'end' | 'body' | null;
+type DragHandleVariant = 'arrow' | 'grip';
 export type TimelineChartSlotProps = {
     /** Props for the header container (Stack) */
     header?: StackProps;
@@ -26,6 +34,10 @@ export type TimelineChartSlotProps = {
     event?: BoxProps;
     /** Props for the selection highlight overlay (Box) */
     selection?: BoxProps;
+    /** Props for the start drag handle (Box) */
+    startHandle?: BoxProps;
+    /** Props for the end drag handle (Box) */
+    endHandle?: BoxProps;
     /** Props for the hover tooltip container (Box) */
     tooltip?: BoxProps;
     /** Props for the tooltip event name Typography component */
@@ -42,6 +54,13 @@ export type TimelineChartProps = {
     selectedRange?: TimelineSelection;
     /** Height of the timeline container in pixels (default: 32) */
     height?: number;
+    /** Margin around the timeline drawable area (for alignment with other charts) */
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
     /** Custom date formatter */
     formatDate?: (timestamp: number) => string;
     /** Custom month/year formatter */
@@ -52,6 +71,10 @@ export type TimelineChartProps = {
     monthLabelCount?: number;
     /** Enable zoom with mouse wheel */
     enableZoom?: boolean;
+    /** Drag handle style variant (default: 'arrow') */
+    dragHandleVariant?: DragHandleVariant;
+    /** Color for drag handles (default: '#4B5563' for arrow, '#9CA3AF' for grip) */
+    dragHandleColor?: string;
     /** Show header title and instructions (default: true) */
     showHeader?: boolean;
     /** Custom title for the header */
@@ -95,12 +118,14 @@ export type UseTimelineChartProps = {
 export type UseTimelineChartReturn = {
     isDragging: boolean;
     dragStart: number | null;
+    dragHandleType: DragHandleType;
     internalSelectedRange: TimelineSelection;
     internalVisibleRange: TimelineSelection;
     hoveredEvent: TimelineEvent | null;
     minDate: number;
     maxDate: number;
     timeSpan: number;
+    timelineContainerRef: React.RefObject<HTMLDivElement>;
     getPositionFromTimestamp: (timestamp: number) => number;
     getTimestampFromPosition: (x: number, containerWidth: number) => number;
     handleMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -108,9 +133,13 @@ export type UseTimelineChartReturn = {
     handleMouseUp: () => void;
     handleWheel: (e: React.WheelEvent<HTMLDivElement>) => void;
     handleDoubleClick: () => void;
+    handleStartHandleMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleEndHandleMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleSelectionBodyMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
     setHoveredEvent: (event: TimelineEvent | null) => void;
     getEventsInRange: () => TimelineEvent[];
     resetZoom: () => void;
+    showHandles: boolean;
 };
 export type TimelineSelectedEventsProps = {
     /** Array of selected events to display */
@@ -124,3 +153,4 @@ export type TimelineSelectedEventsProps = {
     /** Primary color for event items */
     primaryColor?: string;
 };
+export {};