@dwlf/charting 1.0.0 → 1.1.0

package/dist/components/overlays/TrendLineAnnotationView.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { TrendLineAnnotation, PaneComputedScale, XScale } from '../../charting/types';
+export interface TrendLineAnnotationViewProps {
+    annotation: TrendLineAnnotation;
+    xScale: XScale;
+    yScale: PaneComputedScale;
+    chartWidth: number;
+    paneHeight: number;
+    darkMode?: boolean;
+    selected?: boolean;
+    onSelect?: (id: string | null) => void;
+    onMove?: (id: string, update: Partial<TrendLineAnnotation>) => void;
+    /** Convert raw timestamp to index when compressGaps is enabled */
+    timeToIndex?: (time: number) => number | undefined;
+    /** Convert index back to raw timestamp when compressGaps is enabled */
+    indexToTime?: (index: number) => number;
+    /** Number of data points */
+    dataLength?: number;
+    /** Pre-computed compressed times array */
+    compressedTimes?: number[];
+}
+declare const TrendLineAnnotationView: React.FC<TrendLineAnnotationViewProps>;
+export default TrendLineAnnotationView;

package/dist/components/overlays/VLineAnnotationView.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { VLineAnnotation, PaneComputedScale, XScale } from '../../charting/types';
+export interface VLineAnnotationViewProps {
+    annotation: VLineAnnotation;
+    xScale: XScale;
+    yScale: PaneComputedScale;
+    chartWidth: number;
+    paneHeight: number;
+    darkMode?: boolean;
+    selected?: boolean;
+    onSelect?: (id: string | null) => void;
+    onDoubleClick?: (id: string) => void;
+    onMove?: (id: string, newTime: number) => void;
+    /** Convert raw timestamp to index when compressGaps is enabled */
+    timeToIndex?: (time: number) => number | undefined;
+    /** Convert index back to raw timestamp when compressGaps is enabled */
+    indexToTime?: (index: number) => number;
+    /** Number of data points */
+    dataLength?: number;
+    /** Pre-computed compressed times array */
+    compressedTimes?: number[];
+    /** Optional time formatter for the label */
+    timeFormatter?: (t: number) => string;
+}
+declare const VLineAnnotationView: React.FC<VLineAnnotationViewProps>;
+export default VLineAnnotationView;

package/dist/components/overlays/annotationConstants.d.ts

@@ -0,0 +1,21 @@
+export declare const LINE_STYLE_MAP: Record<string, string | undefined>;
+/** Radius for circular endpoint handles (e.g., trendline endpoints) */
+export declare const HANDLE_RADIUS = 12;
+/** Radius for smaller secondary handles (e.g., midpoint drag) */
+export declare const HANDLE_RADIUS_SMALL = 10;
+/** Size for square corner handles (e.g., rectangle corners) */
+export declare const CORNER_SIZE = 16;
+/** Width of invisible hit area for line-based annotations */
+export declare const HIT_AREA_WIDTH = 32;
+/** Padding around rectangular annotations for easier click target */
+export declare const RECT_HIT_PADDING = 8;
+/** Size of rectangular drag handles (e.g., HLine drag grip) */
+export declare const DRAG_HANDLE_SIZE = 24;
+/** Offset from edge where drag handles are positioned */
+export declare const HANDLE_EDGE_OFFSET = 4;
+/**
+ * Indicator line positioning - derived from DRAG_HANDLE_SIZE for consistency.
+ * Lines span the middle 50% of the handle for a clean centered appearance.
+ */
+export declare const INDICATOR_LINE_START: number;
+export declare const INDICATOR_LINE_END: number;

package/dist/components/overlays/annotationUtils.d.ts

@@ -0,0 +1,13 @@
+import { LineStyle, XScale } from '../../charting/types';
+/** Maps LineStyle values to SVG stroke-dasharray patterns */
+export declare const LINE_STYLE_MAP: Record<LineStyle, string | undefined>;
+export declare const findClosestIndex: (time: number, times: number[] | undefined, timeToIndex: ((t: number) => number | undefined) | undefined) => number | undefined;
+/**
+ * Resolve a time value to an x-pixel coordinate, handling compressGaps mode.
+ */
+export declare const resolveX: (time: number, xScale: XScale, timeToIndex: ((t: number) => number | undefined) | undefined, indexToTime: ((i: number) => number) | undefined, dataLength: number, compressedTimes: number[] | undefined) => number | undefined;
+/**
+ * Resolve a time value to an x-pixel coordinate, with linear extrapolation
+ * when the time is outside the visible data range.
+ */
+export declare const resolveXWithExtrapolation: (time: number, xScale: XScale, timeToIndex: ((t: number) => number | undefined) | undefined, indexToTime: ((i: number) => number) | undefined, dataLength: number, compressedTimes: number[] | undefined, chartWidth?: number) => number | undefined;

package/dist/components/overlays/useAnnotationDrag.d.ts

@@ -0,0 +1,18 @@
+import { MouseEvent as ReactMouseEvent } from 'react';
+type DragStartHandler = (event: ReactMouseEvent) => void;
+type DragMoveHandler = (event: MouseEvent) => void;
+type DragEndHandler = () => void;
+type DragStartCheck = (event: ReactMouseEvent) => boolean;
+interface UseAnnotationDragOptions {
+    onDragMove: DragMoveHandler;
+    onDragStart?: DragStartHandler;
+    onDragEnd?: DragEndHandler;
+    shouldStart?: DragStartCheck;
+    stopPropagation?: boolean;
+    preventDefault?: boolean;
+}
+declare const useAnnotationDrag: ({ onDragMove, onDragStart, onDragEnd, shouldStart, stopPropagation, preventDefault, }: UseAnnotationDragOptions) => {
+    isDragging: boolean;
+    handleMouseDown: (event: ReactMouseEvent) => void;
+};
+export default useAnnotationDrag;

package/dist/components/overlays/usePointAnnotationDrag.d.ts

@@ -0,0 +1,23 @@
+import { PaneComputedScale, XScale } from '../../charting/types';
+interface UsePointAnnotationDragOptions {
+    annotationId: string;
+    time: number;
+    price: number;
+    xScale: XScale;
+    yScale: PaneComputedScale;
+    onMove?: (id: string, newTime: number, newPrice: number) => void;
+    /** Convert raw timestamp to index when compressGaps is enabled */
+    timeToIndex?: (time: number) => number | undefined;
+    /** Convert index back to raw timestamp when compressGaps is enabled */
+    indexToTime?: (index: number) => number;
+    /** Number of data points (required for closest index search when compressGaps enabled) */
+    dataLength?: number;
+    /** Precomputed array of raw timestamps for each compressed index */
+    compressedTimes?: number[];
+}
+declare const usePointAnnotationDrag: ({ annotationId, time, price, xScale, yScale, onMove, timeToIndex, indexToTime, dataLength, compressedTimes, }: UsePointAnnotationDragOptions) => {
+    handleMouseDown: (event: import('react').MouseEvent) => void;
+    indexValue: number | undefined;
+    isDragging: boolean;
+};
+export default usePointAnnotationDrag;

package/dist/hooks/useCandlestickChart.d.ts

@@ -0,0 +1,18 @@
+export default function useCandlestickChart(data: any, width: any, height: any, timeframe?: string, compressGaps?: boolean): {
+    xScale: (Date[] & d3.ScaleTime<number, number, never>) | {
+        (value: any): number;
+        invert(px: any): number;
+    };
+    yScale: number[] & d3.ScaleLinear<number, number, never>;
+    getCandleProps: (d: any) => {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+        color: string;
+    };
+    xBandwidth: number;
+    _compressed: boolean;
+    _indexToDate: any;
+};
+import * as d3 from 'd3';

package/dist/hooks/useChartAnimations.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Chart animation phase types
+ */
+export type ChartAnimationPhase = 'idle' | 'background' | 'candles' | 'indicators' | 'events' | 'annotations' | 'complete';
+/**
+ * Animation state interface
+ */
+export interface ChartAnimationState {
+    phase: ChartAnimationPhase;
+    candleRevealIndex: number;
+    layerOpacities: Record<string, number>;
+    staggerDelay: number;
+    isReducedMotion: boolean;
+}
+/**
+ * Animation control interface
+ */
+export interface ChartAnimationControls {
+    startAnimation: () => void;
+    skipToEnd: () => void;
+    resetAnimation: () => void;
+    setAnimationSpeed: (multiplier: number) => void;
+}
+/**
+ * Hook options
+ */
+export interface UseChartAnimationsOptions {
+    totalCandles?: number;
+    animationSpeed?: number;
+    autoStart?: boolean;
+    staggerDelay?: number;
+    onPhaseChange?: (phase: ChartAnimationPhase) => void;
+    onAnimationComplete?: () => void;
+}
+/**
+ * Default indicator animation order
+ */
+export declare const INDICATOR_ANIMATION_ORDER: readonly ["ema-10", "ema-20", "sma-10", "sma-20", "bollinger-upper", "bollinger-middle", "bollinger-lower", "ema-50", "sma-50", "ema-200", "sma-200"];
+/**
+ * Hook for managing chart animation state and controls.
+ *
+ * Architecture: A simple phase state machine driven by effects.
+ * Each phase schedules the next via setTimeout or RAF, with proper cleanup.
+ * No pause/resume complexity — skip-to-end handles interruption.
+ */
+export default function useChartAnimations(options?: UseChartAnimationsOptions): {
+    animationState: ChartAnimationState;
+    controls: ChartAnimationControls;
+};

package/dist/hooks/useChartLayout.d.ts

@@ -0,0 +1,12 @@
+export default function useChartLayout({ width, height, margin }: {
+    width: any;
+    height: any;
+    margin: any;
+}): {
+    margin: any;
+    fullWidth: any;
+    fullHeight: any;
+    innerWidth: number;
+    innerHeight: number;
+    chartTransform: string;
+};

package/dist/hooks/useChartPanZoom.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook for handling chart panning and zooming
+ * @param {Array} data - Full dataset
+ * @param {number} initialVisibleCount - Initial number of visible data points
+ * @returns {Object} - Viewport state and handlers
+ */
+export default function useChartPanZoom(data: any[], initialVisibleCount?: number): Object;

package/dist/hooks/useChartPanZoomVirtual.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Pan/Zoom hook that keeps a fixed number of blank "virtual" slots after the
+ * last real candle.  This gives a permanent right-hand gap without any pixel
+ * offset tricks, so zooming never clips candles.
+ */
+export default function useChartPanZoomVirtual(data: any, initialVisibleCount?: number, extraSlots?: number, timeframe?: string): {
+    visibleData: any[];
+    viewportStart: number;
+    viewportEnd: any;
+    visibleCount: number;
+    mouseHandlers: {
+        onMouseDown: (e: any) => void;
+        onMouseMove: (e: any) => void;
+        onMouseUp: () => void;
+        onMouseLeave: () => void;
+    };
+    chartElementRef: (el: any) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetView: () => void;
+    panToStart: () => void;
+    panToEnd: () => void;
+    isPanning: boolean;
+};

package/dist/hooks/useContainerSize.d.ts

@@ -0,0 +1,4 @@
+export default function useContainerSize(): (import('react').MutableRefObject<null> | {
+    width: number;
+    height: number;
+})[];

package/dist/hooks/useOverlayToggles.d.ts

@@ -0,0 +1,19 @@
+export const overlayDefinitions: {
+    id: string;
+    label: string;
+    generator: (data: any, smaData: any) => {
+        type: string;
+        label: string;
+        data: any;
+        color: string;
+    };
+}[];
+export default useOverlayToggles;
+declare function useOverlayToggles(sampleData: any, smaData?: {}): {
+    overlayDefinitions: {};
+    activeKeys: Set<any>;
+    overlays: any[];
+    toggleOverlay: (key: any) => void;
+    toggleOverlayById: (id: any) => void;
+    isOverlayActive: (key: any) => boolean;
+};