@itssumitrai/fin-charter 0.2.0

package/dist/renderers/renderer.d.ts

@@ -0,0 +1,59 @@
+import { GradientStop, PathCommand } from '../core/types';
+/**
+ * Style options for drawing operations.
+ */
+export interface DrawStyle {
+    strokeColor?: string;
+    fillColor?: string;
+    lineWidth?: number;
+    lineDash?: number[];
+    font?: string;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+    globalAlpha?: number;
+}
+/**
+ * IRenderer — thin abstraction over a 2D drawing surface.
+ *
+ * All coordinate arguments are in **logical (CSS) pixels**; implementations
+ * are responsible for applying the pixelRatio internally.
+ */
+export interface IRenderer {
+    /** Resize the backing surface. */
+    setSize(width: number, height: number, pixelRatio: number): void;
+    /** Clear the entire surface. */
+    clear(): void;
+    /** Push the current drawing state onto the stack. */
+    save(): void;
+    /** Pop the top drawing state from the stack. */
+    restore(): void;
+    /** Clip subsequent drawing to the given rectangle (logical px). */
+    clip(x: number, y: number, width: number, height: number): void;
+    /**
+     * Set the current transform matrix (six-element affine transform).
+     * Values are in physical pixels (already account for pixelRatio).
+     */
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    /** Draw a stroked line from (x1, y1) to (x2, y2). */
+    drawLine(x1: number, y1: number, x2: number, y2: number): void;
+    /** Draw a stroked rectangle. */
+    drawRect(x: number, y: number, width: number, height: number): void;
+    /** Draw a filled rectangle. */
+    fillRect(x: number, y: number, width: number, height: number): void;
+    /**
+     * Execute a series of path commands and then stroke (and optionally fill)
+     * the resulting path.
+     */
+    drawPath(commands: PathCommand[], fill?: boolean): void;
+    /** Render a text string at the given position. */
+    fillText(text: string, x: number, y: number): void;
+    /** Return the rendered width of the given text string in logical pixels. */
+    measureText(text: string): number;
+    /** Apply a set of style properties to subsequent drawing operations. */
+    setStyle(style: DrawStyle): void;
+    /**
+     * Create a vertical linear gradient between y0 and y1 (logical px) and
+     * return it as a CanvasGradient.
+     */
+    createGradient(x0: number, y0: number, x1: number, y1: number, stops: GradientStop[]): CanvasGradient;
+}

package/dist/renderers/renko.d.ts

@@ -0,0 +1,24 @@
+import { ColumnStore, IRenderTarget, VisibleRange } from '../core/types';
+export interface RenkoRendererOptions {
+    boxSize: number;
+    upColor: string;
+    downColor: string;
+}
+/**
+ * RenkoRenderer — builds Renko bricks from close prices and draws them.
+ *
+ * Renko charts filter out noise by only drawing a new brick when price moves
+ * by at least `boxSize` in one direction. Up bricks are filled with `upColor`,
+ * down bricks with `downColor`.
+ */
+export declare class RenkoRenderer {
+    private _options;
+    applyOptions(options: Partial<RenkoRendererOptions>): void;
+    /**
+     * Build Renko bricks from the close prices in the store for the given range.
+     * We walk from `fromIdx` to `toIdx` and emit bricks whenever the close price
+     * departs from the current brick level by at least `boxSize`.
+     */
+    private _buildBricks;
+    draw(target: IRenderTarget, store: ColumnStore, range: VisibleRange, indexToX: (i: number) => number, priceToY: (price: number) => number, barWidth: number): void;
+}

package/dist/renderers/step-line.d.ts

@@ -0,0 +1,14 @@
+import { ColumnStore, IRenderTarget, VisibleRange } from '../core/types';
+export interface StepLineRendererOptions {
+    color: string;
+    lineWidth: number;
+}
+/**
+ * StepLineRenderer — draws a close-price step line (horizontal-then-vertical)
+ * over the visible bar range.
+ */
+export declare class StepLineRenderer {
+    private _options;
+    applyOptions(options: Partial<StepLineRendererOptions>): void;
+    draw(target: IRenderTarget, store: ColumnStore, range: VisibleRange, indexToX: (i: number) => number, priceToY: (price: number) => number): void;
+}

package/dist/renderers/text-cache.d.ts

@@ -0,0 +1,23 @@
+/**
+ * TextMetricsCache — precomputes per-character widths for the ~70 characters
+ * that appear in financial chart labels so that measuring a string requires
+ * only a fast arithmetic sum rather than a `ctx.measureText` call.
+ */
+export declare class TextMetricsCache {
+    private _widths;
+    private _lastFont;
+    private _ctx;
+    /**
+     * Pre-measure all financial characters for the given font.
+     * If the font has not changed since the last call, this is a no-op.
+     */
+    prepare(ctx: CanvasRenderingContext2D, font: string): void;
+    /**
+     * Return the rendered width (in the same units as `ctx.measureText`) of
+     * `text` using the cached per-character widths.
+     *
+     * For any character not found in the cache the method falls back to a live
+     * `ctx.measureText` call and caches that result for future use.
+     */
+    measureWidth(text: string): number;
+}

package/dist/renderers/volume-candle.d.ts

@@ -0,0 +1,20 @@
+import { ColumnStore, IRenderTarget, VisibleRange } from '../core/types';
+export interface VolumeCandleRendererOptions {
+    upColor: string;
+    downColor: string;
+    wickUpColor: string;
+    wickDownColor: string;
+    maxBarWidthMultiplier: number;
+}
+/**
+ * VolumeCandleRenderer — like CandlestickRenderer but the candle body width
+ * varies based on volume relative to the maximum volume in the visible range.
+ *
+ * Width = baseBarWidth * (volume / maxVolume) * maxBarWidthMultiplier,
+ * with a minimum of 1 physical pixel.  Wicks are always 1px wide.
+ */
+export declare class VolumeCandleRenderer {
+    private _options;
+    applyOptions(options: Partial<VolumeCandleRendererOptions>): void;
+    draw(target: IRenderTarget, store: ColumnStore, range: VisibleRange, indexToX: (i: number) => number, priceToY: (price: number) => number, barWidth: number): void;
+}

package/dist/renderers/webgl/area-webgl.d.ts

@@ -0,0 +1,28 @@
+import { ColumnStore, VisibleRange } from '../../core/types';
+export interface AreaWebGLOptions {
+    lineColor: string;
+    lineWidth: number;
+    topColor: string;
+    bottomColor: string;
+}
+/**
+ * GPU-accelerated area (mountain) chart renderer.
+ *
+ * Renders two passes:
+ * 1. Gradient-filled polygon from the price line down to the pane bottom.
+ * 2. Thick line along the close prices (same ribbon approach as LineWebGLRenderer).
+ */
+export declare class AreaWebGLRenderer {
+    private _options;
+    private _resources;
+    private _fillPos;
+    private _fillT;
+    private _linePos;
+    private _topColor;
+    private _bottomColor;
+    private _lineColor;
+    applyOptions(options: Partial<AreaWebGLOptions>): void;
+    private _getResources;
+    draw(gl: WebGL2RenderingContext, width: number, height: number, pixelRatio: number, store: ColumnStore, range: VisibleRange, indexToX: (i: number) => number, priceToY: (price: number) => number): void;
+    dispose(): void;
+}

package/dist/renderers/webgl/candlestick-webgl.d.ts

@@ -0,0 +1,30 @@
+import { ColumnStore, VisibleRange } from '../../core/types';
+export interface CandlestickWebGLOptions {
+    upColor: string;
+    downColor: string;
+    wickUpColor: string;
+    wickDownColor: string;
+}
+/**
+ * GPU-accelerated candlestick renderer using per-vertex rectangle geometry.
+ *
+ * Each candle is composed of two rectangles (wick + body), with each
+ * rectangle emitted as two triangles (6 vertices) into typed arrays.
+ * The vertex buffer is rebuilt each frame from the visible range — fast
+ * enough for 500k+ bars because only the visible subset is generated and
+ * uploaded.
+ */
+export declare class CandlestickWebGLRenderer {
+    private _options;
+    private _resources;
+    private _posData;
+    private _colorData;
+    private _upColor;
+    private _downColor;
+    private _wickUpColor;
+    private _wickDownColor;
+    applyOptions(options: Partial<CandlestickWebGLOptions>): void;
+    private _getResources;
+    draw(gl: WebGL2RenderingContext, width: number, height: number, pixelRatio: number, store: ColumnStore, range: VisibleRange, indexToX: (i: number) => number, priceToY: (price: number) => number, barWidth: number): void;
+    dispose(): void;
+}

package/dist/renderers/webgl/index.d.ts

@@ -0,0 +1,7 @@
+export { isWebGLAvailable, parseColor, compileShader, createProgram, uploadBuffer } from './webgl-utils';
+export { CandlestickWebGLRenderer } from './candlestick-webgl';
+export type { CandlestickWebGLOptions } from './candlestick-webgl';
+export { LineWebGLRenderer } from './line-webgl';
+export type { LineWebGLOptions } from './line-webgl';
+export { AreaWebGLRenderer } from './area-webgl';
+export type { AreaWebGLOptions } from './area-webgl';

package/dist/renderers/webgl/line-webgl.d.ts

@@ -0,0 +1,23 @@
+import { ColumnStore, VisibleRange } from '../../core/types';
+export interface LineWebGLOptions {
+    color: string;
+    lineWidth: number;
+}
+/**
+ * GPU-accelerated line renderer.
+ *
+ * Draws the close-price polyline as a screen-space ribbon: each line segment
+ * is expanded into a quad (2 triangles) on the CPU when building the vertex
+ * buffer, and the vertex shader transforms those positions to clip space,
+ * giving a consistent pixel-width line regardless of zoom level.
+ */
+export declare class LineWebGLRenderer {
+    private _options;
+    private _resources;
+    private _posData;
+    private _parsedColor;
+    applyOptions(options: Partial<LineWebGLOptions>): void;
+    private _getResources;
+    draw(gl: WebGL2RenderingContext, width: number, height: number, pixelRatio: number, store: ColumnStore, range: VisibleRange, indexToX: (i: number) => number, priceToY: (price: number) => number): void;
+    dispose(): void;
+}

package/dist/renderers/webgl/webgl-utils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * WebGL utility functions: shader compilation, program linking, buffer helpers.
+ */
+/**
+ * Check whether WebGL2 is available in the current environment.
+ */
+export declare function isWebGLAvailable(): boolean;
+/**
+ * Compile a shader from source. Throws on compilation failure.
+ */
+export declare function compileShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader;
+/**
+ * Link vertex + fragment shaders into a program. Throws on failure.
+ */
+export declare function createProgram(gl: WebGL2RenderingContext, vertexSource: string, fragmentSource: string): WebGLProgram;
+/**
+ * Parse a CSS color string into normalized [r, g, b, a] values (0–1).
+ */
+export declare function parseColor(color: string): [number, number, number, number];
+/**
+ * Upload Float32Array data to a buffer object.
+ */
+export declare function uploadBuffer(gl: WebGL2RenderingContext, buffer: WebGLBuffer, data: Float32Array): void;

package/dist/timezone/index.d.ts

@@ -0,0 +1,2 @@
+export { timestampToDateParts, formatInTimezone, getTimezoneOffsetMinutes, } from './timezone';
+export type { DateParts } from './timezone';

package/dist/timezone/timezone.d.ts

@@ -0,0 +1,12 @@
+export interface DateParts {
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+    second: number;
+    weekday: number;
+}
+export declare function timestampToDateParts(timestampSec: number, timezone: string): DateParts;
+export declare function formatInTimezone(timestampSec: number, timezone: string, options: Intl.DateTimeFormatOptions, locale?: string): string;
+export declare function getTimezoneOffsetMinutes(timestampSec: number, timezone: string): number;

package/dist/transforms/aggregate.d.ts

@@ -0,0 +1,2 @@
+import { ColumnStore } from '../core/types';
+export declare function aggregateOHLC(source: ColumnStore, targetIntervalSec: number): ColumnStore;

package/dist/transforms/heikin-ashi.d.ts

@@ -0,0 +1,2 @@
+import { ColumnStore } from '../core/types';
+export declare function computeHeikinAshi(store: ColumnStore): ColumnStore;

package/dist/transforms/index.d.ts

@@ -0,0 +1,2 @@
+export { computeHeikinAshi } from './heikin-ashi';
+export { aggregateOHLC } from './aggregate';

package/dist/ui/context-menu.d.ts

@@ -0,0 +1,14 @@
+export interface ContextMenuItem {
+    label: string;
+    icon?: string;
+    action: () => void;
+    separator?: boolean;
+}
+export declare function createContextMenu(items: ContextMenuItem[], position: {
+    x: number;
+    y: number;
+}, theme: {
+    bg: string;
+    text: string;
+    border: string;
+}): HTMLDivElement;

package/dist/ui/hud.d.ts

@@ -0,0 +1,43 @@
+import { SettingsField, OnApply } from './settings-popup';
+export interface HudRowConfig {
+    id: string;
+    label: string;
+    color: string;
+    getValues: (barIndex: number) => string;
+    onToggleVisible: () => boolean;
+    onRemove: () => void;
+    getSettingsFields: () => SettingsField[];
+    onSettingsApply: OnApply;
+}
+export declare class HudManager {
+    private _container;
+    private _rows;
+    private _theme;
+    private _activePopup;
+    private _outsideClickHandler;
+    private _pendingRaf;
+    private _globalCollapsed;
+    private _compactLine;
+    private _globalChevron;
+    private _rowsWrapper;
+    private _onGlobalCollapseToggle;
+    constructor(paneRow: HTMLElement, theme: {
+        bg: string;
+        text: string;
+        border: string;
+        fontFamily: string;
+    });
+    get isGlobalCollapsed(): boolean;
+    set onGlobalCollapseToggle(cb: (() => void) | null);
+    setGlobalCollapsed(collapsed: boolean): void;
+    addRow(config: HudRowConfig): void;
+    removeRow(id: string): void;
+    updateValues(barIndex: number): void;
+    /** Programmatically open the settings popup for a row. */
+    triggerSettings(rowId: string): void;
+    destroy(): void;
+    private _chevronStyle;
+    private _buttonStyle;
+    private _openSettings;
+    private _closePopup;
+}

package/dist/ui/settings-popup.d.ts

@@ -0,0 +1,15 @@
+export interface SettingsField {
+    key: string;
+    label: string;
+    type: 'number' | 'color';
+    value: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export type OnApply = (values: Record<string, number | string>) => void;
+export declare function createSettingsPopup(fields: SettingsField[], onApply: OnApply, onCancel: () => void, theme: {
+    bg: string;
+    text: string;
+    border: string;
+}): HTMLDivElement;

package/package.json

@@ -0,0 +1,129 @@
+{
+  "name": "@itssumitrai/fin-charter",
+  "version": "0.2.0",
+  "description": "Ultra-fast, tree-shakeable financial charting library",
+  "type": "module",
+  "license": "MIT",
+  "author": "Sumit Rai",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/itssumitrai/fin-charter.git"
+  },
+  "homepage": "https://github.com/itssumitrai/fin-charter",
+  "bugs": {
+    "url": "https://github.com/itssumitrai/fin-charter/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./indicators": {
+      "types": "./dist/indicators/index.d.ts",
+      "import": "./dist/indicators/index.js"
+    },
+    "./indicators/*": {
+      "types": "./dist/indicators/*.d.ts",
+      "import": "./dist/indicators/*.js"
+    },
+    "./interactions/*": {
+      "types": "./dist/interactions/*.d.ts",
+      "import": "./dist/interactions/*.js"
+    },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "import": "./dist/i18n/index.js"
+    },
+    "./timezone": {
+      "types": "./dist/timezone/index.d.ts",
+      "import": "./dist/timezone/index.js"
+    },
+    "./formatting": {
+      "types": "./dist/formatting/index.d.ts",
+      "import": "./dist/formatting/index.js"
+    },
+    "./currency": {
+      "types": "./dist/currency/index.d.ts",
+      "import": "./dist/currency/index.js"
+    },
+    "./market": {
+      "types": "./dist/market/index.d.ts",
+      "import": "./dist/market/index.js"
+    },
+    "./gui/*": {
+      "svelte": "./src/gui/*.svelte"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite --config dev/vite.config.ts",
+    "build": "vite build",
+    "prepublishOnly": "npm run build",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/",
+    "format": "prettier --write \"src/**/*.{ts,svelte}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,svelte}\"",
+    "size": "node -e \"const{execSync:e}=require('child_process');const f=s=>(parseInt(e('gzip -c '+s+' | wc -c').toString().trim())/1024).toFixed(1);const big=e('ls -S dist/*.js').toString().trim().split('\\n')[0].trim();console.log('Core ('+big.split('/').pop()+'):', f(big), 'KB gzip');console.log('Full bundle:', (parseInt(e('cat dist/*.js | gzip | wc -c').toString().trim())/1024).toFixed(1), 'KB gzip')\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static",
+    "chromatic": "chromatic"
+  },
+  "keywords": [
+    "chart",
+    "financial",
+    "trading",
+    "candlestick",
+    "canvas",
+    "lightweight"
+  ],
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.6.0",
+    "@changesets/cli": "^2.30.0",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/html": "^10.3.4",
+    "@storybook/html-vite": "^10.3.4",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@vitest/coverage-v8": "^4.1.2",
+    "chromatic": "^16.1.0",
+    "eslint": "^10.1.0",
+    "eslint-plugin-svelte": "^3.17.0",
+    "jsdom": "^29.0.1",
+    "msw": "^2.12.14",
+    "msw-storybook-addon": "^2.0.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "storybook": "^10.3.4",
+    "svelte": "^5.55.1",
+    "svelte-check": "^4.4.6",
+    "terser": "^5.46.1",
+    "tslib": "2.8.1",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.2"
+  },
+  "dependencies": {
+    "@mdi/js": "^7.4.47"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}