@moderneinc/react-charts 1.1.0-next.dcefa6 → 1.2.0-next.27c469

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

@@ -0,0 +1,6 @@
+import { UseStackedAreaChartProps, UseStackedAreaChartReturn } from '../stacked-area-chart.types';
+/**
+ * Manages stacked area chart data validation, processing, and formatting.
+ * Handles category validation, timestamp ranges, and max value computation.
+ */
+export declare function useStackedAreaChart(props: UseStackedAreaChartProps): UseStackedAreaChartReturn;

package/dist/components/stacked-area-chart/stacked-area-chart.component.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { StackedAreaChartProps } from './stacked-area-chart.types';
+/**
+ * Displays time-series data as a stacked area chart with responsive sizing,
+ * customizable colors, interactive tooltips, and smooth animations.
+ *
+ * Designed for ParliamentChart transitions - data structure supports point-in-time
+ * views enabling animated morphing between visualizations.
+ */
+export declare const StackedAreaChart: FunctionComponent<StackedAreaChartProps>;

package/dist/components/stacked-area-chart/stacked-area-chart.constants.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Default colors for stacked area chart categories
+ * These colors are designed to work well together and provide good contrast
+ * Migration colors match the exact gradient used in ParliamentChart for visual consistency
+ */
+export declare const DEFAULT_STACKED_AREA_COLORS: {
+    readonly critical: "#dc3545";
+    readonly high: "#fd7e14";
+    readonly medium: "#ffc107";
+    readonly low: "#17a2b8";
+    readonly complete: "#40c048";
+    readonly inProgress: "#007bff";
+    readonly farthest: string | undefined;
+    readonly far: string | undefined;
+    readonly close: string | undefined;
+    readonly closest: string | undefined;
+    readonly completed: string | undefined;
+    readonly primary: "#007bff";
+    readonly secondary: "#6c757d";
+    readonly success: "#40c048";
+    readonly danger: "#dc3545";
+    readonly warning: "#ffc107";
+    readonly info: "#17a2b8";
+    readonly light: "#EDEFEF";
+    readonly dark: "#343a40";
+};
+/**
+ * Default configuration for stacked area chart
+ */
+export declare const DEFAULT_STACKED_AREA_CONFIG: {
+    readonly dimensions: {
+        readonly height: 400;
+        readonly width: "100%";
+        readonly minHeight: 200;
+    };
+    readonly margin: {
+        readonly top: 10;
+        readonly right: 30;
+        readonly left: 0;
+        readonly bottom: 0;
+    };
+    readonly animation: {
+        readonly enabled: true;
+        readonly duration: 1500;
+        readonly easing: "ease";
+    };
+    readonly display: {
+        readonly showHeader: true;
+        readonly showLegend: true;
+        readonly showTooltip: true;
+        readonly showXAxis: true;
+        readonly showYAxis: true;
+        readonly showGrid: true;
+    };
+    readonly curve: {
+        readonly type: "monotone";
+    };
+    readonly stack: {
+        readonly offset: "none";
+    };
+    readonly axis: {
+        readonly strokeColor: "#ADB5BD";
+        readonly tickColor: "#666";
+        readonly labelColor: "#666";
+    };
+    readonly tooltip: {
+        readonly backgroundColor: "rgba(255, 255, 255, 0.95)";
+        readonly borderColor: "#ADB5BD";
+        readonly borderWidth: 1;
+        readonly borderRadius: 4;
+        readonly padding: 10;
+    };
+    readonly legend: {
+        readonly iconSize: 14;
+        readonly iconType: "square";
+        readonly layout: "horizontal";
+        readonly align: "center";
+        readonly verticalAlign: "bottom";
+    };
+    readonly marker: {
+        readonly strokeColor: "#666";
+        readonly strokeWidth: 2;
+        readonly strokeDasharray: "5 5";
+        readonly labelColor: "#666";
+    };
+};
+/**
+ * Predefined color palettes for common use cases
+ */
+export declare const STACKED_AREA_PALETTES: {
+    readonly migration: string[];
+    readonly severity: readonly ["#dc3545", "#fd7e14", "#ffc107", "#17a2b8", "#17a2b8"];
+    readonly status: readonly ["#dc3545", "#ffc107", "#40c048"];
+    readonly extended: readonly ["#e74c3c", "#e67e22", "#f39c12", "#2ecc71", "#3498db", "#9b59b6", "#1abc9c", "#95a5a6"];
+    readonly colorblindSafe: readonly ["#0173B2", "#DE8F05", "#029E73", "#CC78BC", "#CA9161", "#FBAFE4", "#949494", "#ECE133"];
+};
+/**
+ * Category label constants for common use cases
+ * These match the categories used in ParliamentChart for transition compatibility
+ */
+export declare const CATEGORY_LABELS: {
+    readonly FARTHEST: "Farthest";
+    readonly FAR: "Far";
+    readonly CLOSE: "Close";
+    readonly CLOSEST: "Closest";
+    readonly COMPLETE: "Complete";
+    readonly CRITICAL: "Critical";
+    readonly HIGH: "High";
+    readonly MEDIUM: "Medium";
+    readonly LOW: "Low";
+    readonly INFO: "Info";
+    readonly NOT_APPLICABLE: "N/A";
+    readonly NO_LST: "No LST";
+    readonly DATA_MISSING: "Data Missing";
+};

package/dist/components/stacked-area-chart/stacked-area-chart.types.d.ts

@@ -0,0 +1,186 @@
+import { BoxProps, StackProps, TypographyProps } from '@mui/material';
+/**
+ * Represents a single data point in the stacked area chart.
+ * Each property beyond timestamp represents a category value at that point in time.
+ *
+ * Example:
+ * {
+ *   timestamp: 1704067200000,
+ *   Complete: 120,
+ *   Close: 45,
+ *   Far: 30
+ * }
+ */
+export type StackedAreaDataPoint = {
+    timestamp: number;
+    [category: string]: number;
+};
+/**
+ * Defines a category (area) in the stacked area chart.
+ * The dataKey must match a property in StackedAreaDataPoint.
+ */
+export type StackedAreaCategory = {
+    /** Key matching the property name in data points */
+    dataKey: string;
+    /** Display label for the category */
+    label: string;
+    /** Color for this area (hex color or CSS color string) */
+    color: string;
+    /** Optional stroke width in pixels (default: 2) */
+    strokeWidth?: number;
+    /** Optional dash pattern for the stroke (e.g., '5 5' for dashed) */
+    strokeDasharray?: string;
+    /** Optional fill opacity (0-1, default: 0.7) */
+    fillOpacity?: number;
+};
+/**
+ * Defines a marker (vertical line) at a specific timestamp.
+ * Markers are useful for highlighting significant events like releases, deployments, or milestones.
+ */
+export type StackedAreaMarker = {
+    /** Timestamp where the marker should be placed on the X-axis */
+    timestamp: number;
+    /** Optional label to display on the marker */
+    label?: string;
+    /** Optional color for the marker line (default: from config) */
+    color?: string;
+    /** Optional stroke width in pixels (default: from config) */
+    strokeWidth?: number;
+    /** Optional dash pattern for the stroke (e.g., '5 5' for dashed) */
+    strokeDasharray?: string;
+};
+/**
+ * Slot props for customizing stacked area chart component styles
+ */
+export type StackedAreaChartSlotProps = {
+    /** Props for the outer container (Stack) */
+    container?: StackProps;
+    /** Props for the header container (Stack) */
+    header?: StackProps;
+    /** Props for the title Typography component */
+    title?: TypographyProps;
+    /** Props for the subtitle/description Typography component */
+    subtitle?: TypographyProps;
+    /** Props for the chart container (Box) */
+    chartContainer?: BoxProps;
+};
+/**
+ * Props for the StackedAreaChart component
+ */
+export type StackedAreaChartProps = {
+    /** Array of data points sorted by timestamp (ascending) */
+    data: StackedAreaDataPoint[];
+    /** Array of category definitions for the areas to display */
+    categories: StackedAreaCategory[];
+    /** Optional array of markers (vertical lines) to display at specific timestamps */
+    markers?: StackedAreaMarker[];
+    /** Optional title displayed above the chart */
+    title?: string;
+    /** Optional subtitle/description displayed below the title */
+    subtitle?: string;
+    /** Show the chart header (title and subtitle) */
+    showHeader?: boolean;
+    /** Height of the chart in pixels (default: 400) */
+    height?: number;
+    /** Width of the chart (default: '100%') */
+    width?: string | number;
+    /** Show the legend */
+    showLegend?: boolean;
+    /** Show the tooltip on hover */
+    showTooltip?: boolean;
+    /** Show X-axis labels */
+    showXAxis?: boolean;
+    /** Show Y-axis labels */
+    showYAxis?: boolean;
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Enable animations */
+    enableAnimation?: boolean;
+    /** Animation duration in milliseconds (default: 1500) */
+    animationDuration?: number;
+    /** Animation easing function (default: 'ease') */
+    animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+    /** Custom date formatter for X-axis and tooltip */
+    formatDate?: (timestamp: number) => string;
+    /** Custom value formatter for Y-axis and tooltip */
+    formatValue?: (value: number) => string;
+    /** Custom tooltip formatter */
+    tooltipFormatter?: (value: number, name: string, props: unknown) => [string, string];
+    /** Props for customizing individual component slots */
+    slotProps?: StackedAreaChartSlotProps;
+    /** Margin around the chart (for axis labels) */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * Curve type for the area paths
+     * - 'monotone': Smooth curves that preserve monotonicity
+     * - 'linear': Straight lines between points
+     * - 'step': Step function
+     * - 'stepBefore': Step function with vertical at start
+     * - 'stepAfter': Step function with vertical at end
+     */
+    curveType?: 'monotone' | 'linear' | 'step' | 'stepBefore' | 'stepAfter';
+    /**
+     * Stack offset type
+     * - 'none': Stack normally
+     * - 'expand': Normalize to 0-100%
+     * - 'wiggle': Streamgraph layout
+     * - 'silhouette': Centered streamgraph
+     */
+    stackOffset?: 'none' | 'expand' | 'wiggle' | 'silhouette';
+    /**
+     * External time domain control [minTimestamp, maxTimestamp]
+     * When provided, overrides automatic domain calculation and controls the X-axis range.
+     * Useful for synchronizing multiple charts to show the same time range.
+     */
+    timeRange?: [number, number] | null;
+    /**
+     * Callback when user selects a time range via brush or other interaction
+     * Returns [startTimestamp, endTimestamp]
+     */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /**
+     * Enable brush component for time range selection
+     * When enabled, displays a brush control below the chart that users can drag to select a time range.
+     * Triggers onTimeRangeChange callback when the brush is moved.
+     */
+    enableBrush?: boolean;
+    /**
+     * Zoom to selection mode - When enabled, dragging to select a range
+     * will automatically rescale the chart to show only that range via the timeRange prop.
+     * Selection highlight only shows during drag.
+     */
+    zoomToSelection?: boolean;
+};
+/**
+ * Props for the custom hook
+ */
+export type UseStackedAreaChartProps = {
+    data: StackedAreaDataPoint[];
+    categories: StackedAreaCategory[];
+    formatDate?: (timestamp: number) => string;
+    formatValue?: (value: number) => string;
+};
+/**
+ * Return type for the custom hook
+ */
+export type UseStackedAreaChartReturn = {
+    /** Validated and processed data */
+    processedData: StackedAreaDataPoint[];
+    /** Validated categories */
+    processedCategories: StackedAreaCategory[];
+    /** Minimum timestamp in data */
+    minTimestamp: number;
+    /** Maximum timestamp in data */
+    maxTimestamp: number;
+    /** Total value at each timestamp (sum of all categories) */
+    maxTotalValue: number;
+    /** Default date formatter */
+    dateFormatter: (timestamp: number) => string;
+    /** Default value formatter */
+    valueFormatter: (value: number) => string;
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Generates gradient colors for categories, ordered from worst (red) to best (green).
+ */
+export declare function generateMeasureGradient(count: number): string[];

package/dist/components/timeline-chart/hooks/use-timeline-chart.hook.d.ts

@@ -0,0 +1,2 @@
+import { UseTimelineChartProps, UseTimelineChartReturn } from '../timeline-chart.types';
+export declare const useTimelineChart: ({ events, selectedRange, onSelectionChange, enableZoom, zoomToSelection, visibleRange, onVisibleRangeChange }: UseTimelineChartProps) => UseTimelineChartReturn;

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { TimelineChartProps } from './timeline-chart.types';
+/**
+ * TimelineChart component - Interactive timeline with drag selection and zoom
+ *
+ * Displays events on a timeline with interactive selection capabilities.
+ * Users can click and drag to select date ranges, and use mouse wheel to zoom.
+ */
+export declare const TimelineChart: FunctionComponent<TimelineChartProps>;