@moderneinc/react-charts 1.2.0-next.73a364 → 1.2.0-next.932db3

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/segment-transformer.d.ts

@@ -0,0 +1,70 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { MorphChartCategory } from '../morph-chart.types';
+interface StackedSeriesDataPoint {
+    data: {
+        timestamp: number;
+    };
+    0: number;
+    1: number;
+}
+export type SegmentTransform = {
+    segmentId: string;
+    dataKey: string;
+    timestamp: number;
+    x: number;
+    y: number;
+    rotation: number;
+    length: number;
+};
+/**
+ * Calculate curve data for stacked area chart
+ * Generates the curved path data that segments will transform into
+ *
+ * @param stackedData - D3 stacked data
+ * @param categories - Category definitions
+ * @param xScale - X scale (time)
+ * @param yScale - Y scale (values)
+ * @returns Array of curve data for each category
+ */
+export declare function calculateStackedCurveData(stackedData: StackedSeriesDataPoint[][], categories: MorphChartCategory[], xScale: ScaleTime<number, number>, yScale: ScaleLinear<number, number>): Array<{
+    dataKey: string;
+    category: string;
+    points: Array<{
+        x: number;
+        y: number;
+        timestamp: number;
+    }>;
+    pathData: string;
+}>;
+/**
+ * Calculate transformations for horizontal bar top segments to align with curves
+ * Each segment gets position, rotation, and length data
+ *
+ * @param barSegments - Array of bar segments with their positions
+ * @param curveData - Calculated curve data for all categories
+ * @param segmentLength - Desired length of each segment
+ * @returns Array of transformation data for each segment
+ */
+export declare function calculateSegmentTransforms(barSegments: Array<{
+    dataKey: string;
+    timestamp: number;
+    x: number;
+    y: number;
+    width: number;
+}>, curveData: ReturnType<typeof calculateStackedCurveData>, segmentLength: number): SegmentTransform[];
+/**
+ * Extract bar top segment positions from rendered bars
+ * Identifies the top edge of each bar segment for transformation
+ *
+ * @param svg - SVG container with bar elements
+ * @returns Array of segment position data
+ */
+export declare function extractBarTopPositions(svg: SVGSVGElement): Array<{
+    dataKey: string;
+    timestamp: number;
+    x: number;
+    y: number;
+    width: number;
+    element: SVGElement;
+}>;
+export {};

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

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/parliament-chart/hooks/use-parliament-chart.hook.d.ts

@@ -1,5 +1,6 @@
 import { RefObject } from 'react';
 import { ChartConfig, HoveredData, ProcessedDataItem } from '../parliament-chart.types';
+import { ArcSweepDirection } from '../utils/parliament-animation';
 type UseParliamentChartProps = {
     containerRef: RefObject<HTMLDivElement>;
     processedData: ProcessedDataItem[];
@@ -12,11 +13,14 @@ type UseParliamentChartProps = {
     setActivePartyName: (name: string | null) => void;
     chartConfig: ChartConfig;
     seatSize: number;
+    shouldAnimate?: boolean;
+    animationDirection?: ArcSweepDirection;
+    onAnimationComplete?: () => void;
 };
 /**
  * Hook that manages parliament chart rendering and interactivity.
  * Generates SVG visualization with seat circles and handles hover states
  * for displaying repository statistics.
  */
-export declare const useParliamentChart: ({ containerRef, processedData, totalRepositories, arcAngle, useEnhanced, maxSeats, setHoveredData, activePartyName, setActivePartyName, chartConfig, seatSize }: UseParliamentChartProps) => void;
+export declare const useParliamentChart: ({ containerRef, processedData, totalRepositories, arcAngle, useEnhanced, maxSeats, setHoveredData, activePartyName, setActivePartyName, chartConfig, seatSize, shouldAnimate, animationDirection, onAnimationComplete }: UseParliamentChartProps) => void;
 export {};

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

@@ -1,4 +1,5 @@
 import { ParliamentChartTheme } from '../../theme/default-colors';
+import { ArcSweepDirection } from './utils/parliament-animation';
 type ParliamentDataSeries = {
     value: number;
     label: string;
@@ -12,6 +13,10 @@ export type ParliamentChartProps = {
     arcAngle?: number;
     useEnhanced?: boolean;
     theme?: ParliamentChartTheme;
+    showTable?: boolean;
+    shouldAnimate?: boolean;
+    animationDirection?: ArcSweepDirection;
+    onAnimationComplete?: () => void;
 };
 export type ProcessedDataItem = {
     id: string | number;

package/dist/components/parliament-chart/utils/parliament-animation.d.ts

@@ -0,0 +1,13 @@
+export type ArcSweepDirection = 'left-to-right' | 'right-to-left';
+/**
+ * Animates the parliament chart with an arc sweep reveal effect.
+ * Creates a clipPath that progressively reveals or collapses seats.
+ *
+ * @param svgElement - The SVG element containing the parliament chart
+ * @param arcAngle - The arc angle in degrees (e.g., 200)
+ * @param radius - The radius of the parliament arc
+ * @param direction - Direction of the sweep: 'left-to-right' (expand) or 'right-to-left' (collapse)
+ * @param duration - Animation duration in milliseconds (default: 900ms)
+ * @param onComplete - Optional callback fired when animation completes
+ */
+export declare function animateArcSweep(svgElement: SVGSVGElement, arcAngle: number, radius: number, direction?: ArcSweepDirection, duration?: number, onComplete?: () => void): void;

package/dist/components/stacked-area-chart/utils/color.utils.d.ts

@@ -1,8 +1,3 @@
-/**
- * Maps category index to a color from the measure gradient.
- * Mirrors ParliamentChart logic - first category gets worst color (red), last gets best (green).
- */
-export declare function getMeasureGradientColor(index: number, totalCategories: number): string;
 /**
  * Generates gradient colors for categories, ordered from worst (red) to best (green).
  */

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;
+export 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 */