/** Visual effects for pointer */ export interface PointerEffects { /** Enable glow effect */ glow?: boolean; /** Glow color (defaults to pointer color) */ glowColor?: string; /** Glow blur radius. Unit: pixels (default: 8). */ glowBlur?: number; /** Glow spread. Unit: pixels (default: 2). */ glowSpread?: number; /** Drop shadow effect. */ dropShadow?: { /** Shadow offset X. Unit: pixels. */ dx?: number; /** Shadow offset Y. Unit: pixels. */ dy?: number; /** Shadow blur. Unit: pixels. */ blur?: number; /** Shadow color. */ color?: string; /** Shadow opacity. Unit: ratio 0-1. */ opacity?: number; }; } export interface PointerProps { /** Pointer type */ type?: "needle" | "blob" | "arrow"; /** Pointer color */ color?: string; /** Enabling this flag will hide the pointer */ hide?: boolean; /** Pointer color of the central circle */ baseColor?: string; /** Pointer length. Unit: ratio of radius (0-1, e.g., 0.70 = 70% of radius). */ length?: number; /** Pointer width multiplier. Unit: factor (multiplied by gauge width, default: 20). */ width?: number; /** This enables pointer animation for transiction between values when enabled */ animate?: boolean; /** This gives animation an elastic transiction between values */ elastic?: boolean; /** Animation duration. Unit: milliseconds (default: 3000). */ animationDuration?: number; /** Animation delay. Unit: milliseconds (default: 100). */ animationDelay?: number; /** Stroke width of the pointer border. Unit: pixels. */ strokeWidth?: number; /** Stroke/border color of the pointer. Defaults to a contrasting color */ strokeColor?: string; /** Arrow offset - controls radial position of arrow pointer. Unit: ratio (0-1, default: 0.72). Lower = closer to center, higher = closer to arc edge. */ arrowOffset?: number; /** Blob offset - controls radial position of blob pointer. Unit: ratio (0-1, default: 0.5 = centered on arc). Lower = inner edge, higher = outer edge. */ blobOffset?: number; /** Hide the grab handle circle shown at pointer tip when drag mode is enabled */ hideGrabHandle?: boolean; /** Visual effects for the pointer */ effects?: PointerEffects; /** * Maximum frames per second for animation updates. Unit: fps (default: 60). * Lower values reduce GPU/CPU load on mobile devices. * Recommended: 60 (smooth), 30 (balanced), 15 (low-power) */ maxFps?: number; /** * Minimum progress change threshold before updating DOM. Unit: ratio (default: 0.001). * Higher values skip more frames, reducing render load. * Range: 0.0001 (smooth) to 0.01 (choppy but fast) */ animationThreshold?: number; } export interface PointerRef { element: any; path: any; context: PointerContext; } export interface PointerContext { centerPoint: number[]; pointerRadius: number; pathLength: number; currentPercent: number; prevPercent: number; prevProgress: number; pathStr: string; shouldDrawPath: boolean; prevColor: string; } export declare enum PointerType { Needle = "needle", Blob = "blob", Arrow = "arrow" } export declare const defaultPointerContext: PointerContext; export declare const defaultPointerRef: PointerRef; export declare const defaultPointer: PointerProps; /** * Pointer configuration with an embedded value. * Used for multi-pointer gauges where each pointer points to its own value. * * @example * // Compound turbo gauge with multiple pressure readings * pointers={[ * { value: 15, color: '#ff0000', label: 'Back Pressure' }, * { value: 25, color: '#00ff00', label: 'Turbo 1' }, * { value: 35, color: '#0000ff', label: 'Turbo 2' }, * ]} */ export interface PointerWithValue extends PointerProps { /** The value this pointer points to */ value: number; /** Optional label for this pointer's value (shown in value display) */ label?: string; } /** Reference for a single pointer in multi-pointer mode */ export interface MultiPointerRef { element: any; path: any; context: PointerContext; /** Index of this pointer in the pointers array */ index: number; /** Whether animation is currently in progress for this pointer */ animationInProgress: boolean; }