scichart-engine 0.4.1

package/dist/streaming/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * WebSocket Streaming Barrel Export
+ */
+export * from './types';
+export * from './websocket';
+export * from './utils';
+export * from './mock';

package/dist/streaming/mock.d.ts

@@ -0,0 +1,12 @@
+import { DataPoint, WebSocketStream } from './types';
+
+/**
+ * Mock WebSocket stream for testing
+ */
+export declare function createMockStream(config: {
+    interval?: number;
+    generatePoint?: () => DataPoint;
+}): WebSocketStream & {
+    start: () => void;
+    stop: () => void;
+};

package/dist/streaming/types.d.ts

@@ -0,0 +1,57 @@
+/**
+ * WebSocket Streaming Types
+ */
+export interface WebSocketStreamConfig {
+    /** WebSocket URL */
+    url: string;
+    /** Reconnection attempts (default: 5) */
+    maxReconnectAttempts?: number;
+    /** Delay between reconnection attempts in ms (default: 1000) */
+    reconnectDelay?: number;
+    /** Buffer size before flushing to chart (default: 10) */
+    bufferSize?: number;
+    /** Throttle updates in ms (default: 16 for 60fps) */
+    throttleMs?: number;
+    /** Transform incoming message to data point */
+    parseMessage?: (data: unknown) => DataPoint | DataPoint[] | null;
+    /** Called on connection open */
+    onConnect?: () => void;
+    /** Called on connection close */
+    onDisconnect?: (event: CloseEvent) => void;
+    /** Called on error */
+    onError?: (error: Event) => void;
+    /** Called when reconnecting */
+    onReconnect?: (attempt: number) => void;
+}
+export interface DataPoint {
+    x: number;
+    y: number;
+    seriesId?: string;
+}
+export interface WebSocketStream {
+    /** Connect to the WebSocket server */
+    connect(): void;
+    /** Disconnect from the WebSocket server */
+    disconnect(): void;
+    /** Check if connected */
+    isConnected(): boolean;
+    /** Get connection state */
+    getState(): WebSocketState;
+    /** Subscribe to data for a specific series */
+    subscribe(seriesId: string, callback: (points: DataPoint[]) => void): () => void;
+    /** Unsubscribe all listeners */
+    unsubscribeAll(): void;
+    /** Send a message to the WebSocket server */
+    send(message: unknown): void;
+    /** Get statistics */
+    getStats(): StreamStats;
+}
+export interface StreamStats {
+    messagesReceived: number;
+    pointsProcessed: number;
+    reconnectCount: number;
+    lastMessageTime: number | null;
+    connectionUptime: number;
+    bufferSize: number;
+}
+export type WebSocketState = 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'error';

package/dist/streaming/utils.d.ts

@@ -0,0 +1,19 @@
+import { DataPoint, WebSocketStream } from './types';
+
+/**
+ * Default message parser - expects { x, y, seriesId? } or array of same
+ */
+export declare function defaultParser(data: unknown): DataPoint | DataPoint[] | null;
+/**
+ * Helper to create a parser for custom message formats
+ */
+export declare function createMessageParser<T>(transform: (message: T) => DataPoint | DataPoint[] | null): (data: unknown) => DataPoint | DataPoint[] | null;
+/**
+ * Helper to connect a WebSocket stream to a chart
+ */
+export declare function connectStreamToChart(stream: WebSocketStream, chart: {
+    appendData: (seriesId: string, data: {
+        x: Float32Array;
+        y: Float32Array;
+    }) => void;
+}, seriesIds?: string[]): () => void;

package/dist/streaming/websocket.d.ts

@@ -0,0 +1,6 @@
+import { WebSocketStreamConfig, WebSocketStream } from './types';
+
+/**
+ * Create a WebSocket stream for real-time chart data
+ */
+export declare function createWebSocketStream(config: WebSocketStreamConfig): WebSocketStream;

package/dist/theme/index.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Theme - Visual styling configuration for SciChart
+ *
+ * Provides customizable themes for the chart including:
+ * - Grid styling
+ * - Axis styling
+ * - Legend styling
+ * - Cursor styling
+ */
+export interface GridTheme {
+    /** Grid visibility */
+    visible: boolean;
+    /** Major grid line color */
+    majorColor: string;
+    /** Minor grid line color */
+    minorColor: string;
+    /** Major grid line width */
+    majorWidth: number;
+    /** Minor grid line width */
+    minorWidth: number;
+    /** Line dash pattern for major lines [dash, gap] */
+    majorDash: number[];
+    /** Line dash pattern for minor lines [dash, gap] */
+    minorDash: number[];
+    /** Show minor grid lines */
+    showMinor: boolean;
+    /** Number of minor divisions between major lines */
+    minorDivisions: number;
+}
+export interface AxisTheme {
+    /** Axis line color */
+    lineColor: string;
+    /** Axis line width */
+    lineWidth: number;
+    /** Tick mark color */
+    tickColor: string;
+    /** Tick mark length */
+    tickLength: number;
+    /** Label color */
+    labelColor: string;
+    /** Label font size */
+    labelSize: number;
+    /** Axis title color */
+    titleColor: string;
+    /** Axis title font size */
+    titleSize: number;
+    /** Font family */
+    fontFamily: string;
+}
+export interface LegendTheme {
+    /** Legend visibility */
+    visible: boolean;
+    /** Position */
+    position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /** Background color */
+    backgroundColor: string;
+    /** Border color */
+    borderColor: string;
+    /** Border radius */
+    borderRadius: number;
+    /** Text color */
+    textColor: string;
+    /** Font size */
+    fontSize: number;
+    /** Font family */
+    fontFamily: string;
+    /** Padding inside legend */
+    padding: number;
+    /** Gap between items */
+    itemGap: number;
+    /** Color swatch size */
+    swatchSize: number;
+}
+export interface CursorTheme {
+    /** Cursor line color */
+    lineColor: string;
+    /** Cursor line width */
+    lineWidth: number;
+    /** Cursor line dash pattern */
+    lineDash: number[];
+    /** Tooltip background color */
+    tooltipBackground: string;
+    /** Tooltip border color */
+    tooltipBorder: string;
+    /** Tooltip text color */
+    tooltipColor: string;
+    /** Tooltip font size */
+    tooltipSize: number;
+}
+export interface ChartTheme {
+    /** Theme name */
+    name: string;
+    /** Background color */
+    backgroundColor: string;
+    /** Plot area border color */
+    plotBorderColor: string;
+    /** Grid theme */
+    grid: GridTheme;
+    /** X-axis theme */
+    xAxis: AxisTheme;
+    /** Y-axis theme */
+    yAxis: AxisTheme;
+    /** Legend theme */
+    legend: LegendTheme;
+    /** Cursor theme */
+    cursor: CursorTheme;
+}
+export declare const DARK_THEME: ChartTheme;
+export declare const MIDNIGHT_THEME: ChartTheme;
+/** Light theme - Clean white background */
+export declare const LIGHT_THEME: ChartTheme;
+/** Electrochemistry theme - Professional blue tones */
+export declare const ELECTROCHEM_THEME: ChartTheme;
+/**
+ * Create a custom theme by merging with base theme
+ */
+export declare function createTheme(base: ChartTheme, overrides: Partial<ChartTheme>): ChartTheme;
+/**
+ * Get a theme by name
+ */
+export declare function getThemeByName(name: string): ChartTheme;
+/** Default theme export */
+export declare const DEFAULT_THEME: ChartTheme;

package/dist/types.d.ts

@@ -0,0 +1,333 @@
+/**
+ * Core type definitions for SciChart Engine
+ */
+/** 2D point */
+export interface Point {
+    x: number;
+    y: number;
+}
+/** Rectangular bounds */
+export interface Bounds {
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+}
+/** Range tuple [min, max] */
+export type Range = [number, number];
+export type ScaleType = "linear" | "log";
+export interface AxisOptions {
+    /** Unique ID for the axis (defaults to 'default') */
+    id?: string;
+    /** Axis position */
+    position?: "left" | "right" | "top" | "bottom";
+    /** Scale type */
+    scale?: ScaleType;
+    /** Axis label (e.g., 'E / V') */
+    label?: string;
+    /** Unit for formatting (e.g., 'V', 'A') */
+    unit?: string;
+    /** Unit prefix: 'auto' for automatic (µ, n, m, etc.) */
+    prefix?: "auto" | "µ" | "n" | "m" | "" | "k" | "M";
+    /** Fixed minimum value */
+    min?: number;
+    /** Fixed maximum value */
+    max?: number;
+    /** Enable autoscaling */
+    auto?: boolean;
+}
+export type SeriesType = "line" | "scatter" | "line+scatter" | "step" | "step+scatter" | "band" | "area" | "bar" | "heatmap" | "candlestick";
+/** Step mode defines where the step occurs */
+export type StepMode = "before" | "after" | "center";
+/** Error bar direction */
+export type ErrorBarDirection = "both" | "positive" | "negative";
+export interface SeriesData {
+    /** X values (potential, time, etc.) */
+    x: Float32Array | Float64Array;
+    /** Y values (current, charge, etc.) */
+    y: Float32Array | Float64Array;
+    /** Symmetric Y error (±error) */
+    yError?: Float32Array | Float64Array;
+    /** Asymmetric Y error - positive direction (upward) */
+    yErrorPlus?: Float32Array | Float64Array;
+    /** Asymmetric Y error - negative direction (downward) */
+    yErrorMinus?: Float32Array | Float64Array;
+    /** Symmetric X error (±error) - for horizontal error bars */
+    xError?: Float32Array | Float64Array;
+    /** Asymmetric X error - positive direction (rightward) */
+    xErrorPlus?: Float32Array | Float64Array;
+    /** Asymmetric X error - negative direction (leftward) */
+    xErrorMinus?: Float32Array | Float64Array;
+    /** Second Y-values for band/area charts (lower boundary or baseline) */
+    y2?: Float32Array | Float64Array;
+    /** Open values for OHLC/Candlestick */
+    open?: Float32Array | Float64Array;
+    /** High values for OHLC/Candlestick */
+    high?: Float32Array | Float64Array;
+    /** Low values for OHLC/Candlestick */
+    low?: Float32Array | Float64Array;
+    /** Close values for OHLC/Candlestick */
+    close?: Float32Array | Float64Array;
+}
+/** Error bar styling options */
+export interface ErrorBarStyle {
+    /** Show error bars (default: true if error data present) */
+    visible?: boolean;
+    /** Error bar color (default: same as series) */
+    color?: string;
+    /** Error bar line width (default: 1) */
+    width?: number;
+    /** Cap width in pixels (default: 6) */
+    capWidth?: number;
+    /** Show caps at the end of error bars (default: true) */
+    showCaps?: boolean;
+    /** Opacity (default: 0.7) */
+    opacity?: number;
+    /** Direction: show both, positive only, or negative only */
+    direction?: ErrorBarDirection;
+}
+export interface SeriesStyle {
+    /** Line/point color (hex or rgb) */
+    color?: string;
+    /** Line width in pixels */
+    width?: number;
+    /** Opacity (0-1) */
+    opacity?: number;
+    /** For scatter: point size */
+    pointSize?: number;
+    /** Smoothing factor (0 = none, 1 = full) */
+    smoothing?: number;
+    /** Step mode: where the step transition occurs (default: 'after') */
+    stepMode?: StepMode;
+    /** Error bar styling */
+    errorBars?: ErrorBarStyle;
+    /** Scatter symbol shape (default: 'circle') */
+    symbol?: ScatterSymbol;
+    /** Dash pattern [dash, gap] - empty for solid */
+    lineDash?: number[];
+}
+/** Available scatter symbol shapes */
+export type ScatterSymbol = "circle" | "square" | "diamond" | "triangle" | "triangleDown" | "cross" | "x" | "star";
+export interface SeriesOptions {
+    /** Unique identifier */
+    id: string;
+    /** Series type */
+    type: SeriesType;
+    /** ID of the Y Axis this series belongs to */
+    yAxisId?: string;
+    /** Data arrays */
+    data: SeriesData;
+    /** Visual style */
+    style?: SeriesStyle;
+    /** Visibility */
+    visible?: boolean;
+    /** Display name in legend */
+    name?: string;
+    /** Cycle number (for CV) */
+    cycle?: number;
+    /** Maximum number of points to keep (rolling window) */
+    maxPoints?: number;
+    /** Identifier for stacking series (same ID will be stacked together) */
+    stackId?: string;
+}
+export interface SeriesUpdateData {
+    /** New X values */
+    x?: Float32Array | Float64Array;
+    /** New Y values */
+    y?: Float32Array | Float64Array;
+    /** New Y2 values (for bands) */
+    y2?: Float32Array | Float64Array;
+    /** New Open values (for candlesticks) */
+    open?: Float32Array | Float64Array;
+    /** New High values (for candlesticks) */
+    high?: Float32Array | Float64Array;
+    /** New Low values (for candlesticks) */
+    low?: Float32Array | Float64Array;
+    /** New Close values (for candlesticks) */
+    close?: Float32Array | Float64Array;
+    /** If true, append to existing data; if false, replace */
+    append?: boolean;
+}
+export interface BarStyle extends Omit<SeriesStyle, "pointSize" | "symbol" | "smoothing" | "stepMode"> {
+    /** Bar width in data units (auto if not specified) */
+    barWidth?: number;
+    /** Gap between bars as a fraction of bar width (default: 0.2) */
+    barGap?: number;
+    /** Bar alignment: 'center' (default) | 'edge' */
+    barAlign?: "center" | "edge";
+}
+/** Color scale names for heatmaps */
+export type ColorScaleName = "viridis" | "plasma" | "inferno" | "magma" | "jet" | "grayscale";
+/** Interpolation method for heatmap rendering */
+export type InterpolationType = "nearest" | "bilinear";
+export interface PlotArea {
+    /** X position of plot area relative to canvas */
+    x: number;
+    /** Y position of plot area relative to canvas */
+    y: number;
+    /** Width of plot area */
+    width: number;
+    /** Height of plot area */
+    height: number;
+    /** Inner margins from container edges */
+    left?: number;
+    /** Inner margins from container edges */
+    right?: number;
+    /** Inner margins from container edges */
+    top?: number;
+    /** Inner margins from container edges */
+    bottom?: number;
+}
+export interface CursorState {
+    enabled: boolean;
+    x: number;
+    y: number;
+    crosshair: boolean;
+    tooltipText?: string;
+}
+export interface AxisLabels {
+    x?: string;
+    y?: string;
+}
+export interface ColorScale {
+    /** Color scale name */
+    name: ColorScaleName;
+    /** Minimum value for color mapping */
+    min?: number;
+    /** Maximum value for color mapping */
+    max?: number;
+    /** Use logarithmic scale (default: false) */
+    logScale?: boolean;
+}
+export interface HeatmapData {
+    /** X-axis values (column positions) */
+    xValues: Float32Array | Float64Array | number[];
+    /** Y-axis values (row positions) */
+    yValues: Float32Array | Float64Array | number[];
+    /** Z-values (intensity) as flattened 2D matrix [row-major order] */
+    zValues: Float32Array | Float64Array | number[];
+}
+export interface HeatmapStyle {
+    /** Color scale configuration */
+    colorScale?: ColorScale;
+    /** Interpolation method (default: 'bilinear') */
+    interpolation?: InterpolationType;
+    /** Show colorbar legend (default: true) */
+    showColorbar?: boolean;
+    /** Opacity (default: 1.0) */
+    opacity?: number;
+}
+export interface HeatmapOptions extends Omit<SeriesOptions, "data" | "style"> {
+    type: "heatmap";
+    /** Heatmap data with X, Y, Z values */
+    data: HeatmapData;
+    /** Heatmap-specific styling */
+    style?: HeatmapStyle;
+}
+export interface ChartOptions {
+    /** Target container element */
+    container: HTMLDivElement;
+    /** Renderer backend selection (default: 'webgl') */
+    renderer?: "webgl" | "webgpu";
+    /** X-axis configuration */
+    xAxis?: AxisOptions;
+    /** Y-axis configuration (single or array) */
+    yAxis?: AxisOptions | AxisOptions[];
+    /** Background color (overrides theme) */
+    background?: string;
+    /** Device pixel ratio (default: window.devicePixelRatio) */
+    devicePixelRatio?: number;
+    /** Theme name or custom theme object */
+    theme?: string | object;
+    /** Show legend (default: from theme) */
+    showLegend?: boolean;
+    /** Initial legend position {x, y} in pixels relative to chart area */
+    legendPosition?: {
+        x: number;
+        y: number;
+    };
+    /** Show in-chart controls (default: false) */
+    showControls?: boolean;
+    /** Automatically follow new data (default: false) */
+    autoScroll?: boolean;
+    /** Show statistics panel (default: false) */
+    showStatistics?: boolean;
+    /** Tooltip configuration */
+    tooltip?: import('./core/tooltip/types').TooltipOptions;
+}
+export interface ZoomOptions {
+    /** X-axis range [min, max] */
+    x?: Range;
+    /** Y-axis range [min, max] */
+    y?: Range;
+    /** ID of the specific Y axis to zoom (if applicable) */
+    axisId?: string;
+    /** Animate the transition */
+    animate?: boolean;
+}
+export interface CursorOptions {
+    /** Enable cursor */
+    enabled?: boolean;
+    /** Snap to nearest data point */
+    snap?: boolean;
+    /** Show crosshair lines */
+    crosshair?: boolean;
+    /** Custom tooltip formatter */
+    formatter?: (x: number, y: number, seriesId: string) => string;
+}
+export interface ZoomEvent {
+    x: Range;
+    y: Range;
+}
+export interface PanEvent {
+    deltaX: number;
+    deltaY: number;
+}
+export interface HoverEvent {
+    point: Point;
+    seriesId: string;
+    dataIndex: number;
+}
+export interface ClickEvent {
+    point: Point;
+    seriesId?: string;
+    dataIndex?: number;
+}
+/** Chart event map for type-safe event handling */
+export interface ChartEventMap {
+    zoom: ZoomEvent;
+    pan: PanEvent;
+    hover: HoverEvent | null;
+    click: ClickEvent;
+    resize: {
+        width: number;
+        height: number;
+    };
+    render: {
+        fps: number;
+        frameTime: number;
+    };
+    legendMove: {
+        x: number;
+        y: number;
+    };
+    autoScale: undefined;
+}
+/** GPU uniform values */
+export interface Uniforms {
+    scale: [number, number];
+    translate: [number, number];
+    color: [number, number, number, number];
+    resolution: [number, number];
+}
+/** Buffer configuration */
+export interface BufferConfig {
+    usage: "static" | "dynamic" | "stream";
+    data: Float32Array;
+}
+/** Render state */
+export interface RenderState {
+    needsRender: boolean;
+    lastFrameTime: number;
+    frameCount: number;
+}

package/dist/workers/downsample.d.ts

@@ -0,0 +1,34 @@
+/**
+ * LTTB (Largest-Triangle-Three-Buckets) Downsampling Algorithm
+ *
+ * This algorithm downsamples time-series data while preserving visual features.
+ * It's much better than naive sampling for preserving peaks and valleys.
+ *
+ * Reference: https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf
+ */
+export interface DownsampleResult {
+    x: Float32Array;
+    y: Float32Array;
+    /** Original indices of selected points */
+    indices: Uint32Array;
+}
+/**
+ * Downsample data using LTTB algorithm
+ *
+ * @param x - X values (e.g., potential)
+ * @param y - Y values (e.g., current)
+ * @param targetPoints - Number of output points
+ * @returns Downsampled data
+ */
+export declare function lttbDownsample(x: Float32Array | Float64Array, y: Float32Array | Float64Array, targetPoints: number): DownsampleResult;
+/**
+ * Min-Max per bucket downsampling
+ *
+ * Simpler alternative to LTTB that preserves extremes in each bucket.
+ * Uses 2 points per bucket (min and max), so output is ~2x target.
+ */
+export declare function minMaxDownsample(x: Float32Array | Float64Array, y: Float32Array | Float64Array, bucketCount: number): DownsampleResult;
+/**
+ * Calculate optimal target points based on canvas width
+ */
+export declare function calculateTargetPoints(dataLength: number, canvasWidth: number, pointsPerPixel?: number): number;

package/dist/workers/downsample.worker.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Downsampling Web Worker
+ *
+ * Performs CPU-intensive downsampling off the main thread.
+ *
+ * Usage:
+ * ```typescript
+ * const worker = new Worker(new URL('./downsample.worker.ts', import.meta.url));
+ *
+ * worker.postMessage({
+ *   type: 'downsample',
+ *   x: xArray,
+ *   y: yArray,
+ *   targetPoints: 1000,
+ *   algorithm: 'lttb'
+ * });
+ *
+ * worker.onmessage = (e) => {
+ *   const { x, y, indices } = e.data;
+ *   chart.setDownsampledData(x, y);
+ * };
+ * ```
+ */
+interface DownsampleRequestMessage {
+    type: 'downsample';
+    id?: string;
+    x: Float32Array | Float64Array;
+    y: Float32Array | Float64Array;
+    targetPoints: number;
+    algorithm?: 'lttb' | 'minmax';
+}
+interface DownsampleResponseMessage {
+    type: 'downsample-result';
+    id?: string;
+    x: Float32Array;
+    y: Float32Array;
+    indices: Uint32Array;
+    originalLength: number;
+    duration: number;
+}
+interface ErrorMessage {
+    type: 'error';
+    id?: string;
+    error: string;
+}
+export type { DownsampleRequestMessage, DownsampleResponseMessage, ErrorMessage };