@moderneinc/react-charts 1.2.0-next.e5d8ee → 1.2.0-next.e86ce0

package/dist/components/stacked-area-with-timeline/utils/render-timeline-track.d.ts

@@ -0,0 +1,46 @@
+import { ScaleTime } from 'd3-scale';
+import { Selection } from 'd3-selection';
+import { HoveredTimelineEvent, TimelineEvent } from '../stacked-area-with-timeline.types';
+type RenderTimelineTrackOptions = {
+    /** D3 SVG selection */
+    svg: Selection<SVGSVGElement, unknown, null, undefined>;
+    /** Timeline events to display */
+    events: TimelineEvent[];
+    /** D3 time scale for x-axis */
+    xScale: ScaleTime<number, number>;
+    /** Height of the main chart area (timeline renders below this) */
+    chartHeight: number;
+    /** Width of the chart area */
+    chartWidth: number;
+    /** Height of the timeline track */
+    timelineHeight: number;
+    /** Vertical offset between chart and timeline */
+    timelineOffset: number;
+    /** Optional instance ID for unique CSS classes */
+    instanceId?: string;
+    /** Callback when an event is hovered */
+    setHoveredTimelineEvent: (event: HoveredTimelineEvent) => void;
+    /** Enable brush selection on timeline */
+    enableBrush?: boolean;
+    /** Callback when time range changes via brush */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /** Minimum allowed timestamp for brush constraint */
+    minAllowedTime?: number;
+    /** Maximum allowed timestamp for brush constraint */
+    maxAllowedTime?: number;
+    /** Color for brush selection overlay */
+    brushColor?: string;
+    /** CSS selector for the main chart group (default: '.main-chart-group') */
+    mainGroupSelector?: string;
+};
+/**
+ * Renders an interactive timeline track below a chart
+ *
+ * Features:
+ * - Event markers as vertical colored lines
+ * - Hover interactions with width expansion
+ * - Optional brush selection with constraint bounds
+ * - Double-click to reset to full time range
+ */
+export declare function renderTimelineTrack({ svg, events, xScale, chartHeight, chartWidth, timelineHeight, timelineOffset, instanceId, setHoveredTimelineEvent, enableBrush, onTimeRangeChange, minAllowedTime, maxAllowedTime, brushColor, mainGroupSelector }: RenderTimelineTrackOptions): void;
+export {};

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

@@ -15,6 +15,8 @@ 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;
@@ -32,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 */
@@ -65,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 */
@@ -108,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;
@@ -121,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 */
@@ -137,3 +153,4 @@ export type TimelineSelectedEventsProps = {
     /** Primary color for event items */
     primaryColor?: string;
 };
+export {};