@jigonzalez930209/scichart-engine 0.1.0

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,172 @@
+/**
+ * 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 {
+    /** 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";
+export interface SeriesData {
+    /** X values (potential, time, etc.) */
+    x: Float32Array | Float64Array;
+    /** Y values (current, charge, etc.) */
+    y: Float32Array | Float64Array;
+}
+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;
+}
+export interface SeriesOptions {
+    /** Unique identifier */
+    id: string;
+    /** Series type */
+    type: SeriesType;
+    /** Data arrays */
+    data: SeriesData;
+    /** Visual style */
+    style?: SeriesStyle;
+    /** Visibility */
+    visible?: boolean;
+    /** Cycle number (for CV) */
+    cycle?: number;
+}
+export interface SeriesUpdateData {
+    /** New X values */
+    x?: Float32Array | Float64Array;
+    /** New Y values */
+    y?: Float32Array | Float64Array;
+    /** If true, append to existing data; if false, replace */
+    append?: boolean;
+}
+export interface ChartOptions {
+    /** Target container element */
+    container: HTMLDivElement;
+    /** X-axis configuration */
+    xAxis?: AxisOptions;
+    /** Y-axis configuration */
+    yAxis?: 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;
+}
+export interface ZoomOptions {
+    /** X-axis range [min, max] */
+    x?: Range;
+    /** Y-axis range [min, max] */
+    y?: Range;
+    /** 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 };

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@jigonzalez930209/scichart-engine",
+  "version": "0.1.0",
+  "author": "jigonzalez930209",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jigonzalez930209/scichart-engine.git"
+  },
+  "keywords": [
+    "chart",
+    "webgl",
+    "scientific",
+    "performance",
+    "data-visualization",
+    "react",
+    "electrochemical"
+  ],
+  "description": "A high-performance scientific charting engine for web applications.",
+  "type": "module",
+  "main": "./dist/scichart-engine.umd.js",
+  "module": "./dist/scichart-engine.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/scichart-engine.es.js",
+      "require": "./dist/scichart-engine.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.6.0",
+    "vitepress": "^1.0.0-rc.31"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build -c vite.config.lib.ts",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  }
+}