@jigonzalez930209/scichart-engine 0.1.0

package/dist/overlay/CanvasOverlay.d.ts

@@ -0,0 +1,102 @@
+import { Bounds } from '../types';
+import { Scale } from '../scales';
+
+export interface OverlayTheme {
+    /** Background color (usually transparent) */
+    background: string;
+    /** Axis line color */
+    axisColor: string;
+    /** Tick mark color */
+    tickColor: string;
+    /** Label text color */
+    labelColor: string;
+    /** Grid line color */
+    gridColor: string;
+    /** Cursor line color */
+    cursorColor: string;
+    /** Font family */
+    fontFamily: string;
+    /** Base font size */
+    fontSize: number;
+}
+export declare const DEFAULT_THEME: OverlayTheme;
+export interface AxisConfig {
+    /** Axis label (e.g., 'E / V') */
+    label?: string;
+    /** Tick values to draw */
+    ticks?: number[];
+    /** Format function for tick labels */
+    tickFormat?: (value: number) => string;
+    /** Show grid lines */
+    showGrid?: boolean;
+}
+export interface CursorState {
+    /** Cursor enabled */
+    enabled: boolean;
+    /** Cursor X position in pixels */
+    x: number;
+    /** Cursor Y position in pixels */
+    y: number;
+    /** Show crosshair */
+    crosshair: boolean;
+    /** Tooltip text */
+    tooltip?: string;
+}
+/**
+ * Canvas Overlay manages the 2D rendering layer
+ */
+export declare class CanvasOverlay {
+    private canvas;
+    private ctx;
+    private dpr;
+    private theme;
+    private readonly MARGIN;
+    constructor(parentElement: HTMLElement, theme?: Partial<OverlayTheme>);
+    /**
+     * Resize the overlay canvas
+     */
+    resize(): void;
+    /**
+     * Get the plot area (excluding margins)
+     */
+    getPlotArea(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Clear the overlay
+     */
+    clear(): void;
+    /**
+     * Render axes
+     */
+    renderAxes(bounds: Bounds, xAxis?: AxisConfig, yAxis?: AxisConfig, xScale?: Scale, yScale?: Scale): void;
+    private renderGrid;
+    private renderXAxis;
+    private renderYAxis;
+    private renderXAxisLabel;
+    private renderYAxisLabel;
+    /**
+     * Render cursor/crosshair
+     */
+    renderCursor(cursor: CursorState): void;
+    /**
+     * Render tooltip
+     */
+    renderTooltip(x: number, y: number, text: string): void;
+    /**
+     * Render FPS counter (debug)
+     */
+    renderFPS(fps: number, frameTime: number): void;
+    private dataToPixelX;
+    private dataToPixelY;
+    private generateTicks;
+    private formatNumber;
+    private formatScientific;
+    /**
+     * Destroy the overlay
+     */
+    destroy(): void;
+}

package/dist/overlay/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Overlay module exports
+ */
+export { CanvasOverlay, DEFAULT_THEME, type OverlayTheme, type AxisConfig, type CursorState, } from './CanvasOverlay';

package/dist/react/SciChart.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react';
+import { UseSciChartOptions } from './useSciChart';
+import { ZoomOptions, CursorOptions, Bounds } from '../types';
+import { Chart } from '../core/Chart';
+
+export interface SciChartSeries {
+    id: string;
+    x: Float32Array | Float64Array;
+    y: Float32Array | Float64Array;
+    color?: string;
+    width?: number;
+    visible?: boolean;
+}
+export interface SciChartProps extends UseSciChartOptions {
+    /** Series data to display */
+    series?: SciChartSeries[];
+    /** Zoom state (controlled) */
+    zoom?: ZoomOptions;
+    /** Callback when zoom changes */
+    onZoomChange?: (bounds: Bounds) => void;
+    /** Cursor configuration */
+    cursor?: CursorOptions;
+    /** Container width */
+    width?: number | string;
+    /** Container height */
+    height?: number | string;
+    /** Additional class name */
+    className?: string;
+    /** Additional styles */
+    style?: CSSProperties;
+    /** Debug mode - shows FPS counter */
+    debug?: boolean;
+}
+export interface SciChartRef {
+    /** Get the chart instance */
+    getChart: () => Chart | null;
+    /** Reset zoom to show all data */
+    resetZoom: () => void;
+    /** Get current bounds */
+    getBounds: () => Bounds | null;
+}
+/**
+ * SciChart React Component
+ *
+ * @example
+ * ```tsx
+ * <SciChart
+ *   series={[
+ *     { id: 'cv-1', x: potentialData, y: currentData, color: '#ff0055' }
+ *   ]}
+ *   xAxis={{ label: 'E / V' }}
+ *   yAxis={{ label: 'I / A' }}
+ *   height={400}
+ *   cursor={{ enabled: true, snap: true }}
+ *   onZoomChange={(bounds) => console.log('Zoom:', bounds)}
+ * />
+ * ```
+ */
+export declare const SciChart: import('react').ForwardRefExoticComponent<SciChartProps & import('react').RefAttributes<SciChartRef>>;
+export default SciChart;

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * React bindings for SciChart Engine
+ */
+export { SciChart, type SciChartProps, type SciChartRef, type SciChartSeries } from './SciChart';
+export { useSciChart, type UseSciChartOptions, type UseSciChartReturn } from './useSciChart';

package/dist/react/useSciChart.d.ts

@@ -0,0 +1,56 @@
+import { RefObject } from 'react';
+import { Chart, ChartOptions } from '../core/Chart';
+import { SeriesOptions, SeriesUpdateData, ZoomOptions, Bounds } from '../types';
+
+export interface UseSciChartOptions extends Omit<ChartOptions, "container"> {
+    /** Auto-resize on container changes */
+    autoResize?: boolean;
+}
+export interface UseSciChartReturn {
+    /** Chart instance (null until initialized) */
+    chart: Chart | null;
+    /** Whether the chart is ready */
+    isReady: boolean;
+    /** Error during initialization */
+    error: Error | null;
+    /** Current view bounds */
+    bounds: Bounds | null;
+    /** Add a series */
+    addSeries: (options: SeriesOptions) => void;
+    /** Update series data */
+    updateSeries: (id: string, data: SeriesUpdateData) => void;
+    /** Remove a series */
+    removeSeries: (id: string) => void;
+    /** Set zoom range */
+    zoom: (options: ZoomOptions) => void;
+    /** Reset zoom to show all data */
+    resetZoom: () => void;
+}
+/**
+ * React hook for using SciChart Engine
+ *
+ * @example
+ * ```tsx
+ * function MyChart() {
+ *   const canvasRef = useRef<HTMLCanvasElement>(null);
+ *   const { chart, isReady, addSeries, zoom } = useSciChart(canvasRef, {
+ *     xAxis: { label: 'E / V' },
+ *     yAxis: { label: 'I / A' }
+ *   });
+ *
+ *   useEffect(() => {
+ *     if (isReady) {
+ *       addSeries({
+ *         id: 'cv-1',
+ *         type: 'line',
+ *         data: { x: xData, y: yData },
+ *         style: { color: '#ff0055' }
+ *       });
+ *     }
+ *   }, [isReady]);
+ *
+ *   return <canvas ref={canvasRef} />;
+ * }
+ * ```
+ */
+export declare function useSciChart(containerRef: RefObject<HTMLDivElement>, options?: UseSciChartOptions): UseSciChartReturn;

package/dist/renderer/NativeWebGLRenderer.d.ts

@@ -0,0 +1,69 @@
+import { Bounds, SeriesStyle } from '../types';
+
+export interface NativeSeriesRenderData {
+    id: string;
+    buffer: WebGLBuffer;
+    count: number;
+    style: SeriesStyle;
+    visible: boolean;
+    type: "line" | "scatter" | "line+scatter";
+}
+export interface NativeRenderOptions {
+    bounds: Bounds;
+    backgroundColor?: [number, number, number, number];
+}
+export declare class NativeWebGLRenderer {
+    private canvas;
+    private gl;
+    private dpr;
+    private lineProgram;
+    private pointProgram;
+    private buffers;
+    private bufferSizes;
+    private isInitialized;
+    constructor(canvas: HTMLCanvasElement);
+    private createShader;
+    private createProgram;
+    get available(): boolean;
+    /**
+     * Create or update a buffer with interleaved X,Y data
+     */
+    createBuffer(id: string, data: Float32Array): void;
+    /**
+     * Get a buffer by ID
+     */
+    getBuffer(id: string): WebGLBuffer | undefined;
+    /**
+     * Delete a buffer
+     */
+    deleteBuffer(id: string): void;
+    /**
+     * Calculate uniforms for the current viewport
+     */
+    private calculateUniforms;
+    /**
+     * Render a frame
+     */
+    render(series: NativeSeriesRenderData[], options: NativeRenderOptions): void;
+    private renderLine;
+    private renderPoints;
+    /**
+     * Handle resize
+     */
+    resize(): void;
+    /**
+     * Get WebGL limits (for debugging)
+     */
+    getLimits(): {
+        maxTextureSize: any;
+        maxViewportDims: any;
+        renderer: any;
+        vendor: any;
+    };
+    /**
+     * Destroy and cleanup
+     */
+    destroy(): void;
+}
+export declare function parseColor(color: string): [number, number, number, number];
+export declare function interleaveData(x: Float32Array | Float64Array | number[], y: Float32Array | Float64Array | number[]): Float32Array;

package/dist/renderer/RendererInterface.d.ts

@@ -0,0 +1,61 @@
+import { Bounds, SeriesStyle } from '../types';
+
+export interface SeriesRenderData {
+    id: string;
+    buffer: WebGLBuffer;
+    count: number;
+    style: SeriesStyle;
+    visible: boolean;
+    type: 'line' | 'scatter';
+}
+export interface RenderOptions {
+    bounds: Bounds;
+    backgroundColor?: [number, number, number, number];
+}
+/**
+ * Common interface for all WebGL renderer implementations
+ */
+export interface IWebGLRenderer {
+    /** Check if WebGL is available and initialized */
+    readonly available: boolean;
+    /**
+     * Create or update a GPU buffer with interleaved X,Y data
+     * @param id - Unique buffer identifier
+     * @param data - Interleaved Float32Array [x0, y0, x1, y1, ...]
+     */
+    createBuffer(id: string, data: Float32Array): void;
+    /**
+     * Get a buffer by ID
+     */
+    getBuffer(id: string): WebGLBuffer | undefined;
+    /**
+     * Delete a buffer and free GPU memory
+     */
+    deleteBuffer(id: string): void;
+    /**
+     * Render a frame with all visible series
+     */
+    render(series: SeriesRenderData[], options: RenderOptions): void;
+    /**
+     * Handle canvas resize
+     */
+    resize(): void;
+    /**
+     * Get WebGL capabilities/limits
+     */
+    getLimits(): Record<string, unknown>;
+    /**
+     * Cleanup and destroy all GPU resources
+     */
+    destroy(): void;
+}
+/**
+ * Create a WebGL renderer (Native WebGL)
+ *
+ * @param canvas - Target canvas element
+ */
+export declare function createRenderer(canvas: HTMLCanvasElement): IWebGLRenderer;
+/**
+ * Create a renderer synchronously (native only)
+ */
+export { NativeWebGLRenderer as createNativeRenderer } from './NativeWebGLRenderer';

package/dist/renderer/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renderer module exports
+ */
+export { NativeWebGLRenderer, interleaveData, parseColor, type NativeSeriesRenderData, type NativeRenderOptions, } from './NativeWebGLRenderer';
+export { type IWebGLRenderer, type SeriesRenderData, type RenderOptions, createRenderer, createNativeRenderer, } from './RendererInterface';
+export * from './shaders';

package/dist/renderer/shaders.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Line Vertex Shader
+ *
+ * Transforms 2D points from data space to clip space using uniforms.
+ * This allows zoom/pan without recreating vertex buffers.
+ */
+export declare const lineVertexShader = "\nprecision highp float;\n\n// Attributes (per-vertex data)\nattribute vec2 position;\n\n// Uniforms (constant across all vertices)\nuniform vec2 uScale;       // Zoom factor [scaleX, scaleY]\nuniform vec2 uTranslate;   // Pan offset [translateX, translateY]\nuniform vec2 uResolution;  // Canvas size in pixels\n\n// Varying (passed to fragment shader)\nvarying float vAlpha;\n\nvoid main() {\n  // Transform position: apply scale and translate\n  vec2 pos = position * uScale + uTranslate;\n\n  // pos is now in normalized device coordinates (-1 to 1)\n  gl_Position = vec4(pos, 0.0, 1.0);\n\n  // Pass alpha for potential fading effects\n  vAlpha = 1.0;\n}\n";
+/**
+ * Line Fragment Shader
+ *
+ * Simple solid color output with configurable opacity.
+ */
+export declare const lineFragmentShader = "\nprecision highp float;\n\n// Uniforms\nuniform vec4 uColor;  // RGBA color\n\n// Varying from vertex shader\nvarying float vAlpha;\n\nvoid main() {\n  gl_FragColor = vec4(uColor.rgb, uColor.a * vAlpha);\n}\n";
+/**
+ * Antialiased Line Vertex Shader
+ *
+ * For thick lines with proper antialiasing, we need to expand
+ * lines into quads and compute distance from line center.
+ */
+export declare const lineAAVertexShader = "\nprecision highp float;\n\nattribute vec2 position;\nattribute vec2 normal;     // Perpendicular to line direction\nattribute float miter;     // Miter length for joins\n\nuniform vec2 uScale;\nuniform vec2 uTranslate;\nuniform vec2 uResolution;\nuniform float uLineWidth;\n\nvarying vec2 vNormal;\nvarying float vLineWidth;\n\nvoid main() {\n  // Transform position\n  vec2 pos = position * uScale + uTranslate;\n\n  // Convert to screen space for line width calculation\n  vec2 screenPos = (pos * 0.5 + 0.5) * uResolution;\n\n  // Offset by line width in screen space\n  float halfWidth = uLineWidth * 0.5;\n  screenPos += normal * halfWidth * miter;\n\n  // Convert back to clip space\n  pos = (screenPos / uResolution) * 2.0 - 1.0;\n\n  gl_Position = vec4(pos, 0.0, 1.0);\n\n  vNormal = normal;\n  vLineWidth = uLineWidth;\n}\n";
+/**
+ * Antialiased Line Fragment Shader
+ *
+ * Uses distance-based antialiasing for smooth edges.
+ */
+export declare const lineAAFragmentShader = "\nprecision highp float;\n\nuniform vec4 uColor;\nuniform float uLineWidth;\n\nvarying vec2 vNormal;\nvarying float vLineWidth;\n\nvoid main() {\n  // Distance from line center (0 at center, 1 at edge)\n  float dist = length(vNormal);\n\n  // Smooth step for antialiasing\n  float aa = 1.0 / uLineWidth;\n  float alpha = 1.0 - smoothstep(1.0 - aa, 1.0, dist);\n\n  gl_FragColor = vec4(uColor.rgb, uColor.a * alpha);\n}\n";
+/**
+ * Point/Scatter Vertex Shader
+ *
+ * Renders data points as squares/circles.
+ */
+export declare const pointVertexShader = "\nprecision highp float;\n\nattribute vec2 position;\n\nuniform vec2 uScale;\nuniform vec2 uTranslate;\nuniform float uPointSize;\n\nvoid main() {\n  vec2 pos = position * uScale + uTranslate;\n  gl_Position = vec4(pos, 0.0, 1.0);\n  gl_PointSize = uPointSize;\n}\n";
+/**
+ * Point/Scatter Fragment Shader
+ *
+ * Renders circular points with smooth edges.
+ */
+export declare const pointFragmentShader = "\nprecision highp float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  // Distance from point center\n  vec2 coord = gl_PointCoord - vec2(0.5);\n  float dist = length(coord);\n\n  // Discard outside circle\n  if (dist > 0.5) discard;\n\n  // Smooth edge\n  float alpha = 1.0 - smoothstep(0.4, 0.5, dist);\n\n  gl_FragColor = vec4(uColor.rgb, uColor.a * alpha);\n}\n";
+/**
+ * Heatmap Vertex Shader (for future density plots)
+ */
+export declare const heatmapVertexShader = "\nprecision highp float;\n\nattribute vec2 position;\nattribute float value;\n\nuniform vec2 uScale;\nuniform vec2 uTranslate;\n\nvarying float vValue;\n\nvoid main() {\n  vec2 pos = position * uScale + uTranslate;\n  gl_Position = vec4(pos, 0.0, 1.0);\n  vValue = value;\n}\n";
+/**
+ * Heatmap Fragment Shader
+ *
+ * Maps values to colors using a colormap.
+ */
+export declare const heatmapFragmentShader = "\nprecision highp float;\n\nuniform float uMinValue;\nuniform float uMaxValue;\nuniform sampler2D uColormap;\n\nvarying float vValue;\n\nvoid main() {\n  float normalized = (vValue - uMinValue) / (uMaxValue - uMinValue);\n  normalized = clamp(normalized, 0.0, 1.0);\n\n  vec4 color = texture2D(uColormap, vec2(normalized, 0.5));\n  gl_FragColor = color;\n}\n";
+export declare const Shaders: {
+    line: {
+        vertex: string;
+        fragment: string;
+    };
+    lineAA: {
+        vertex: string;
+        fragment: string;
+    };
+    point: {
+        vertex: string;
+        fragment: string;
+    };
+    heatmap: {
+        vertex: string;
+        fragment: string;
+    };
+};

package/dist/scales/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Scale interface and implementations
+ *
+ * Scales transform data values to pixel coordinates and vice versa.
+ */
+export interface Scale {
+    /** Data domain [min, max] */
+    domain: [number, number];
+    /** Pixel range [min, max] */
+    range: [number, number];
+    /** Scale type identifier */
+    type: "linear" | "log";
+    /** Set the domain */
+    setDomain(min: number, max: number): void;
+    /** Set the range */
+    setRange(min: number, max: number): void;
+    /** Transform data value to pixel */
+    transform(value: number): number;
+    /** Transform pixel to data value */
+    invert(pixel: number): number;
+    /** Generate nice tick values */
+    ticks(count?: number): number[];
+}
+/**
+ * Linear scale - proportional mapping
+ */
+export declare class LinearScale implements Scale {
+    domain: [number, number];
+    range: [number, number];
+    readonly type: "linear";
+    setDomain(min: number, max: number): void;
+    setRange(min: number, max: number): void;
+    transform(value: number): number;
+    invert(pixel: number): number;
+    ticks(count?: number): number[];
+}
+/**
+ * Logarithmic scale - for exponential data
+ */
+export declare class LogScale implements Scale {
+    domain: [number, number];
+    range: [number, number];
+    readonly type: "log";
+    private base;
+    setDomain(min: number, max: number): void;
+    setRange(min: number, max: number): void;
+    transform(value: number): number;
+    invert(pixel: number): number;
+    ticks(count?: number): number[];
+}
+/**
+ * Factory function to create scale by type
+ */
+export declare function createScale(type: "linear" | "log"): Scale;