@jigonzalez930209/scichart-engine 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 jigonzalez930209
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,78 @@
+# SciChart Engine 🚀
+
+A high-performance, WebGL-powered scientific charting engine built for precision, speed, and deep interactivity. Optimized for electrochemical and scientific data visualization.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![NPM Version](https://img.shields.io/npm/v/scichart-engine.svg)](https://www.npmjs.com/package/scichart-engine)
+
+## ✨ Features
+
+-   **🚀 High Performance**: Render millions of data points with ease using a specialized raw WebGL renderer.
+-   **📊 Scientific Precision**: Tailored for electrochemical (CV, DPV, etc.) and scientific data.
+-   **🖱️ Deep Interactivity**: Smooth panning, wheel zoom, and precise box-selection zoom.
+-   **⚛️ React Ready**: Native React hooks and components included.
+-   **📈 Advanced Analysis**: Built-in cycle detection, peak detection, and real-time smoothing.
+-   **🎨 Theming**: Fully customizable visual themes with premium defaults.
+
+## 🛠️ Installation
+
+```bash
+npm install @jigonzalez930209/scichart-engine
+# or
+pnpm add @jigonzalez930209/scichart-engine
+```
+
+## 🚀 Quick Examples
+
+### React (Recommended)
+
+```tsx
+import { SciChart } from '@jigonzalez930209/scichart-engine/react';
+
+function App() {
+  const data = {
+    x: new Float32Array([0, 1, 2, 3]),
+    y: new Float32Array([10, 20, 15, 25])
+  };
+
+  return (
+    <div style={{ width: '800px', height: '400px' }}>
+      <SciChart 
+        series={[{ id: 's1', ...data, color: '#00f2ff' }]}
+        xAxis={{ label: 'Time (s)' }}
+        yAxis={{ label: 'Voltage (V)' }}
+        showControls
+      />
+    </div>
+  );
+}
+```
+
+### Vanilla JavaScript
+
+```typescript
+import { createChart } from '@jigonzalez930209/scichart-engine';
+
+const chart = createChart({
+  container: document.getElementById('chart-container'),
+  title: 'Real-time Signal'
+});
+
+chart.addSeries({
+  id: 'signal',
+  type: 'line',
+  data: { x: [...], y: [...] }
+});
+```
+
+## 📖 Documentation
+
+Visit [scichart-engine.js.org](https://scichart-engine.js.org) for:
+-   [Getting Started Guide](https://scichart-engine.js.org/guide/)
+-   [Core Concepts](https://scichart-engine.js.org/guide/concepts)
+-   [API Reference](https://scichart-engine.js.org/api/chart)
+-   [Interactive Examples](https://github.com/jigonzalez930209/scichart-engine/tree/main/examples)
+
+## 📄 License
+
+MIT © [jigonzalez930209](https://github.com/jigonzalez930209)

package/dist/analysis/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Data Analysis module exports
+ *
+ * General-purpose utilities for data formatting, cycle detection,
+ * peak detection, and data validation.
+ */
+export { formatWithPrefix, formatValue, formatScientific, getBestPrefix, detectCycles, generateCycleColors, detectPeaks, validateData, calculateStats, movingAverage, downsampleLTTB, } from './utils';
+export type { CycleInfo, Peak, PrefixInfo, ValidationResult, DataStats, } from './utils';

package/dist/analysis/utils.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Data Analysis Utilities
+ *
+ * General-purpose utilities for scientific data formatting,
+ * cycle detection, peak detection, and data validation.
+ */
+type SIPrefix = 'p' | 'n' | 'µ' | 'm' | '' | 'k' | 'M' | 'G';
+export interface PrefixInfo {
+    symbol: SIPrefix;
+    factor: number;
+}
+/**
+ * Find the best SI prefix for a value
+ */
+export declare function getBestPrefix(value: number): PrefixInfo;
+/**
+ * Format a value with automatic SI prefix
+ *
+ * @example
+ * formatWithPrefix(0.000001, 'A') // "1.00 µA"
+ * formatWithPrefix(0.5, 'V')      // "500 mV"
+ * formatWithPrefix(1500, 'm')     // "1.50 km"
+ */
+export declare function formatWithPrefix(value: number, unit: string, decimals?: number): string;
+/**
+ * Format a numeric value with specified decimals
+ * Automatically switches to scientific notation for very large/small values
+ */
+export declare function formatValue(value: number, decimals?: number): string;
+/**
+ * Format value in scientific notation
+ */
+export declare function formatScientific(value: number, decimals?: number): string;
+export interface CycleInfo {
+    /** Cycle number (1-indexed) */
+    number: number;
+    /** Start index in data array */
+    startIndex: number;
+    /** End index in data array */
+    endIndex: number;
+    /** Direction at start: 1 = forward, -1 = reverse */
+    direction: 1 | -1;
+}
+/**
+ * Detect cycles in oscillating data
+ *
+ * A cycle is complete when the signal returns to its starting value
+ * after going through both sweep directions. Useful for:
+ * - Cyclic voltammetry data
+ * - Periodic signals
+ * - Oscillation analysis
+ *
+ * @param signal - The signal data (e.g., potential, position, etc.)
+ * @param tolerance - How close to starting value to consider a cycle complete
+ */
+export declare function detectCycles(signal: Float32Array | Float64Array | number[], tolerance?: number): CycleInfo[];
+/**
+ * Generate distinct colors for cycles/series
+ *
+ * Uses HSL color space to generate evenly distributed hues
+ */
+export declare function generateCycleColors(count: number): string[];
+export interface Peak {
+    /** Index in data array */
+    index: number;
+    /** X value at peak */
+    x: number;
+    /** Y value at peak */
+    y: number;
+    /** Peak type */
+    type: 'max' | 'min';
+    /** Prominence of the peak */
+    prominence: number;
+}
+/**
+ * Detect peaks (local maxima and minima) in data
+ *
+ * Uses simple local extrema detection with optional prominence filtering.
+ * Useful for:
+ * - Signal peak detection
+ * - Finding local maxima/minima
+ * - Feature extraction
+ *
+ * @param x - X values (independent variable)
+ * @param y - Y values (dependent variable)
+ * @param options - Detection options
+ */
+export declare function detectPeaks(x: Float32Array | Float64Array | number[], y: Float32Array | Float64Array | number[], options?: {
+    /** Minimum prominence to be considered a peak */
+    minProminence?: number;
+    /** Only return 'max' or 'min' peaks */
+    type?: 'max' | 'min' | 'both';
+}): Peak[];
+export interface ValidationResult {
+    /** Whether all data is valid */
+    valid: boolean;
+    /** Number of invalid values (NaN, Infinity, etc.) */
+    invalidCount: number;
+    /** Index of first invalid value (-1 if all valid) */
+    firstInvalidIndex: number;
+}
+/**
+ * Validate that data contains only finite numbers
+ *
+ * Checks for NaN, Infinity, and -Infinity values.
+ * Useful for data quality checks before rendering.
+ */
+export declare function validateData(data: Float32Array | Float64Array | number[]): ValidationResult;
+export interface DataStats {
+    min: number;
+    max: number;
+    mean: number;
+    stdDev: number;
+    count: number;
+}
+/**
+ * Calculate basic statistics for a dataset
+ */
+export declare function calculateStats(data: Float32Array | Float64Array | number[]): DataStats;
+/**
+ * Apply moving average smoothing to data
+ *
+ * @param data - Input data array
+ * @param windowSize - Number of points to average (must be odd)
+ */
+export declare function movingAverage(data: Float32Array | Float64Array | number[], windowSize: number): Float32Array;
+/**
+ * Downsample data using LTTB (Largest Triangle Three Buckets) algorithm
+ *
+ * Preserves visual characteristics while reducing point count.
+ * Ideal for rendering large datasets efficiently.
+ *
+ * @param x - X values
+ * @param y - Y values
+ * @param targetPoints - Desired number of output points
+ */
+export declare function downsampleLTTB(x: Float32Array | Float64Array, y: Float32Array | Float64Array, targetPoints: number): {
+    x: Float32Array;
+    y: Float32Array;
+};
+export {};

package/dist/core/Chart.d.ts

@@ -0,0 +1,26 @@
+import { ChartOptions, SeriesOptions, SeriesUpdateData, ZoomOptions, CursorOptions, ChartEventMap, Bounds } from '../types';
+import { Series } from './Series';
+
+export interface Chart {
+    addSeries(options: SeriesOptions): void;
+    removeSeries(id: string): void;
+    updateSeries(id: string, data: SeriesUpdateData): void;
+    getSeries(id: string): Series | undefined;
+    getAllSeries(): Series[];
+    zoom(options: ZoomOptions): void;
+    pan(deltaX: number, deltaY: number): void;
+    resetZoom(): void;
+    getViewBounds(): Bounds;
+    enableCursor(options: CursorOptions): void;
+    disableCursor(): void;
+    resize(width?: number, height?: number): void;
+    render(): void;
+    on<K extends keyof ChartEventMap>(event: K, handler: (data: ChartEventMap[K]) => void): void;
+    off<K extends keyof ChartEventMap>(event: K, handler: (data: ChartEventMap[K]) => void): void;
+    destroy(): void;
+    exportImage(type?: "png" | "jpeg"): string;
+    autoScale(): void;
+    setTheme(theme: string | object): void;
+}
+export declare function createChart(options: ChartOptions): Chart;
+export { ChartOptions };

package/dist/core/ChartControls.d.ts

@@ -0,0 +1,28 @@
+import { ChartTheme } from '../theme';
+
+export interface ChartControlsCallbacks {
+    onResetZoom: () => void;
+    onSetType: (type: "line" | "scatter" | "line+scatter") => void;
+    onToggleSmoothing: () => void;
+    onTogglePan: (active: boolean) => void;
+    onExport: () => void;
+    onAutoScale: () => void;
+}
+export declare class ChartControls {
+    private container;
+    private toolbar;
+    private callbacks;
+    private theme;
+    private isSmoothing;
+    private isPanMode;
+    private currentType;
+    constructor(parent: HTMLElement, theme: ChartTheme, callbacks: ChartControlsCallbacks);
+    private isDarkTheme;
+    private updateToolbarStyle;
+    private createButtons;
+    private enforceSVGVisibility;
+    private createButton;
+    private updateButtonStates;
+    updateTheme(theme: ChartTheme): void;
+    destroy(): void;
+}

package/dist/core/ChartLegend.d.ts

@@ -0,0 +1,30 @@
+import { ChartTheme } from '../theme';
+import { Series } from './Series';
+
+export interface ChartLegendCallbacks {
+    onMove: (x: number, y: number) => void;
+}
+export declare class ChartLegend {
+    private container;
+    private header;
+    private content;
+    private theme;
+    private series;
+    private callbacks;
+    private isDragging;
+    private startX;
+    private startY;
+    private initialX;
+    private initialY;
+    constructor(parent: HTMLElement, theme: ChartTheme, options: {
+        x?: number;
+        y?: number;
+    }, callbacks: ChartLegendCallbacks);
+    private updateStyle;
+    private initDragging;
+    update(series: Series[]): void;
+    private render;
+    draw(ctx: CanvasRenderingContext2D, dpr: number): void;
+    updateTheme(theme: ChartTheme): void;
+    destroy(): void;
+}

package/dist/core/EventEmitter.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Type-safe event emitter for chart events
+ */
+export declare class EventEmitter<EventMap extends object> {
+    private listeners;
+    /**
+     * Subscribe to an event
+     */
+    on<K extends keyof EventMap>(event: K, handler: (data: EventMap[K]) => void): void;
+    /**
+     * Unsubscribe from an event
+     */
+    off<K extends keyof EventMap>(event: K, handler: (data: EventMap[K]) => void): void;
+    /**
+     * Emit an event with data
+     */
+    emit<K extends keyof EventMap>(event: K, data: EventMap[K]): void;
+    /**
+     * Subscribe to an event once
+     */
+    once<K extends keyof EventMap>(event: K, handler: (data: EventMap[K]) => void): void;
+    /**
+     * Remove all listeners
+     */
+    clear(): void;
+    /**
+     * Get listener count for an event
+     */
+    listenerCount(event: keyof EventMap): number;
+}

package/dist/core/InteractionManager.d.ts

@@ -0,0 +1,57 @@
+import { Bounds } from '../types';
+
+export interface InteractionCallbacks {
+    onZoom: (bounds: Bounds) => void;
+    onPan: (deltaX: number, deltaY: number) => void;
+    onBoxZoom: (rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null) => void;
+    onCursorMove: (x: number, y: number) => void;
+    onCursorLeave: () => void;
+}
+export interface PlotAreaGetter {
+    (): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+export interface BoundsGetter {
+    (): Bounds;
+}
+export declare class InteractionManager {
+    private container;
+    private callbacks;
+    private getPlotArea;
+    private getBounds;
+    private isDragging;
+    private isBoxSelecting;
+    private selectionStart;
+    private lastMousePos;
+    private isPanMode;
+    private boundWheel;
+    private boundMouseDown;
+    private boundMouseMove;
+    private boundMouseUp;
+    private boundMouseLeave;
+    private boundTouchStart;
+    private boundTouchMove;
+    private boundTouchEnd;
+    constructor(container: HTMLElement, callbacks: InteractionCallbacks, getPlotArea: PlotAreaGetter, getBounds: BoundsGetter);
+    private attachListeners;
+    private detachListeners;
+    setPanMode(enabled: boolean): void;
+    private handleWheel;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleMouseLeave;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    destroy(): void;
+}

package/dist/core/OverlayRenderer.d.ts

@@ -0,0 +1,75 @@
+import { Scale } from '../scales';
+import { ChartTheme } from '../theme';
+import { Series } from './Series';
+
+export interface PlotArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface AxisLabels {
+    x?: string;
+    y?: string;
+}
+export interface CursorState {
+    enabled: boolean;
+    x: number;
+    y: number;
+    crosshair: boolean;
+    tooltipText?: string;
+}
+export declare class OverlayRenderer {
+    private ctx;
+    private theme;
+    constructor(ctx: CanvasRenderingContext2D, theme: ChartTheme);
+    /**
+     * Update the theme
+     */
+    setTheme(theme: ChartTheme): void;
+    /**
+     * Clear the overlay
+     */
+    clear(width: number, height: number): void;
+    /**
+     * Draw the grid
+     */
+    drawGrid(plotArea: PlotArea, xScale: Scale, yScale: Scale): void;
+    /**
+     * Draw X axis with ticks and labels
+     */
+    drawXAxis(plotArea: PlotArea, xScale: Scale, label?: string): void;
+    /**
+     * Draw Y axis with ticks and labels
+     */
+    drawYAxis(plotArea: PlotArea, yScale: Scale, label?: string): void;
+    /**
+     * Draw plot area border
+     */
+    drawPlotBorder(plotArea: PlotArea): void;
+    /**
+     * Draw legend
+     */
+    drawLegend(plotArea: PlotArea, series: Series[]): void;
+    /**
+     * Draw cursor/crosshair
+     */
+    drawCursor(plotArea: PlotArea, cursor: CursorState): void;
+    /**
+     * Draw tooltip
+     */
+    private drawTooltip;
+    /**
+     * Draw selection rectangle (Box Zoom)
+     */
+    drawSelectionRect(rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+    private generateMinorTicks;
+    private formatXTick;
+    private formatYTick;
+    private toScientificUnicode;
+}

package/dist/core/Series.d.ts

@@ -0,0 +1,44 @@
+import { SeriesOptions, SeriesData, SeriesStyle, SeriesUpdateData, Bounds, SeriesType } from '../types';
+
+export declare class Series {
+    private id;
+    private type;
+    private data;
+    private style;
+    private visible;
+    private cycle?;
+    private cachedBounds;
+    private boundsNeedsUpdate;
+    private _needsBufferUpdate;
+    private smoothedData;
+    private smoothingNeedsUpdate;
+    constructor(options: SeriesOptions);
+    getId(): string;
+    getType(): SeriesType;
+    getData(): SeriesData;
+    private getSmoothedData;
+    private applySmoothing;
+    getStyle(): SeriesStyle;
+    isVisible(): boolean;
+    getCycle(): number | undefined;
+    getPointCount(): number;
+    getBounds(): Bounds | null;
+    private calculateBounds;
+    /**
+     * Update series data
+     *
+     * For streaming data, use append=true to avoid recreating buffers.
+     */
+    updateData(update: SeriesUpdateData): void;
+    private appendArray;
+    /**
+     * Replace all data at once
+     */
+    setData(x: Float32Array | Float64Array, y: Float32Array | Float64Array): void;
+    setStyle(style: Partial<SeriesStyle>): void;
+    get needsBufferUpdate(): boolean;
+    set needsBufferUpdate(val: boolean);
+    setVisible(visible: boolean): void;
+    setType(type: SeriesType): void;
+    destroy(): void;
+}

package/dist/core/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Core module exports
+ */
+export { createChart, type Chart, type ChartOptions } from './Chart';
+export { Series } from './Series';
+export { EventEmitter } from './EventEmitter';
+export { OverlayRenderer, type PlotArea, type CursorState } from './OverlayRenderer';
+export { InteractionManager } from './InteractionManager';

package/dist/examples.d.ts

@@ -0,0 +1,19 @@
+import { createChart } from './index';
+
+/**
+ * Example: Basic CV Plot
+ */
+export declare function exampleBasicCV(): import('./index').Chart;
+/**
+ * Example: Streaming data (real-time)
+ */
+export declare function exampleStreaming(): () => void;
+/**
+ * Example: Multi-cycle CV with cycle detection
+ */
+export declare function exampleMultiCycle(): import('./index').Chart;
+/**
+ * Example: Zoom controls
+ */
+export declare function exampleZoomControls(chart: ReturnType<typeof createChart>): void;
+export { createChart };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * SciChart Engine - High-Performance Scientific Charting
+ *
+ * A WebGL-based charting engine designed for scientific data visualization
+ * and high-performance rendering of large datasets.
+ *
+ * Features:
+ * - 10⁵–10⁶ points at 60 FPS
+ * - Zoom/pan via GPU uniforms (no buffer recreation)
+ * - Scientific precision with Float32/Float64 arrays
+ * - Data analysis utilities (peak detection, cycle detection, etc.)
+ *
+ * @packageDocumentation
+ */
+export { createChart } from './core/Chart';
+export { Series } from './core/Series';
+export { EventEmitter } from './core/EventEmitter';
+export type { Chart, ChartOptions } from './core/Chart';
+export type { AxisOptions, SeriesOptions, SeriesData, SeriesStyle, SeriesUpdateData, ZoomOptions, CursorOptions, ChartEventMap, Point, Bounds, Range, ScaleType, SeriesType, } from './types';
+export { LinearScale, LogScale, createScale, type Scale } from './scales';
+export { NativeWebGLRenderer, interleaveData, parseColor, createRenderer, createNativeRenderer, type IWebGLRenderer, type SeriesRenderData, type RenderOptions, } from './renderer';
+export { DARK_THEME, LIGHT_THEME, MIDNIGHT_THEME, ELECTROCHEM_THEME, DEFAULT_THEME, createTheme, getThemeByName, type ChartTheme, type GridTheme, type AxisTheme, type LegendTheme, type CursorTheme, } from './theme';
+export { OverlayRenderer, type PlotArea, type CursorState, } from './core/OverlayRenderer';
+export { lttbDownsample, minMaxDownsample, calculateTargetPoints, } from './workers/downsample';
+export { formatWithPrefix, formatValue, formatScientific, getBestPrefix, detectCycles, generateCycleColors, detectPeaks, validateData, calculateStats, movingAverage, downsampleLTTB, type CycleInfo, type Peak, type PrefixInfo, type ValidationResult, type DataStats, } from './analysis';
+export { formatWithPrefix as formatPotential, formatWithPrefix as formatCurrent, } from './analysis';
+export { SciChart, useSciChart, type SciChartProps, type SciChartRef, type SciChartSeries, type UseSciChartOptions, type UseSciChartReturn, } from './react';