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

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

@@ -0,0 +1,156 @@
+import { BoxProps, StackProps, TypographyProps } from '@mui/material';
+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;
+    /** Props for the title Typography component */
+    title?: TypographyProps;
+    /** Props for the instructions Typography component */
+    instructions?: TypographyProps;
+    /** Props for the month labels container (Stack) */
+    monthLabelsContainer?: StackProps;
+    /** Props for individual month label Typography components */
+    monthLabel?: TypographyProps;
+    /** Props for the timeline container (Box) */
+    timeline?: BoxProps;
+    /** Props for individual event markers (Box) */
+    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 */
+    tooltipEventName?: TypographyProps;
+    /** Props for the tooltip date Typography component */
+    tooltipDate?: TypographyProps;
+};
+export type TimelineChartProps = {
+    /** Array of events to display on the timeline (must be sorted by timestamp) */
+    events: TimelineEvent[];
+    /** Callback when selection changes */
+    onSelectionChange?: (selection: TimelineSelection) => void;
+    /** Controlled selection state (optional) */
+    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 */
+    formatMonthYear?: (timestamp: number) => string;
+    /** Show month labels at top */
+    showMonthLabels?: boolean;
+    /** Number of month labels to display (default: 6) */
+    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 */
+    title?: string;
+    /**
+     * Zoom to selection mode - When enabled, dragging to select a range
+     * will automatically rescale the timeline to show only that range.
+     * Selection highlight only shows during drag.
+     */
+    zoomToSelection?: boolean;
+    /** Callback when the visible range changes (for zoom to selection mode) */
+    onVisibleRangeChange?: (range: TimelineSelection) => void;
+    /** Controlled visible range (for zoom to selection mode) */
+    visibleRange?: TimelineSelection;
+    /**
+     * External time domain control [minTimestamp, maxTimestamp]
+     * Simplified alias for visibleRange that uses tuple format instead of object format.
+     * When provided, overrides automatic domain calculation and controls the visible time range.
+     * Useful for synchronizing multiple charts to show the same time range.
+     * Note: This is converted internally to visibleRange format { start, end }
+     */
+    timeRange?: [number, number] | null;
+    /**
+     * Callback when the visible time range changes
+     * Simplified alias for onVisibleRangeChange that uses tuple format [start, end].
+     * Note: This is converted internally to/from TimelineSelection format { start, end }
+     */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /** Props for individual component slots */
+    slotProps?: TimelineChartSlotProps;
+};
+export type UseTimelineChartProps = {
+    events: TimelineEvent[];
+    selectedRange?: TimelineSelection;
+    onSelectionChange?: (selection: TimelineSelection) => void;
+    enableZoom: boolean;
+    zoomToSelection: boolean;
+    visibleRange?: TimelineSelection;
+    onVisibleRangeChange?: (range: TimelineSelection) => void;
+};
+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;
+    handleMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    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 */
+    events: TimelineEvent[];
+    /** Title for the selected events section */
+    title?: string;
+    /** Maximum height before scrolling */
+    maxHeight?: string;
+    /** Custom date formatter */
+    formatDate?: (timestamp: number) => string;
+    /** Primary color for event items */
+    primaryColor?: string;
+};
+export {};

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { TimelineSelectedEventsProps } from './timeline-chart.types';
+/**
+ * TimelineSelectedEvents component - Displays selected events from timeline
+ *
+ * This component observes and displays events that have been selected in a timeline.
+ * It can be used independently alongside the TimelineChart component.
+ */
+export declare const TimelineSelectedEvents: FunctionComponent<TimelineSelectedEventsProps>;