@zuttora/charts 0.0.0-stage → 0.1.0

package/dist/core/series.js

@@ -0,0 +1,221 @@
+import { bucketStart } from "./time.js";
+import { warn } from "./warn.js";
+export const MAX_CLOSED = 5000;
+function isValid(k) {
+    return (Number.isFinite(k.t) &&
+        Number.isFinite(k.o) &&
+        Number.isFinite(k.h) &&
+        Number.isFinite(k.l) &&
+        Number.isFinite(k.c) &&
+        k.l <= Math.min(k.o, k.c) &&
+        k.h >= Math.max(k.o, k.c));
+}
+export class CandleSeries {
+    constructor() {
+        this.t = [];
+        this.o = [];
+        this.h = [];
+        this.l = [];
+        this.c = [];
+        this.forming = null;
+        this.hasMore = false;
+    }
+    get closedCount() {
+        return this.t.length;
+    }
+    get count() {
+        return this.t.length + (this.forming ? 1 : 0);
+    }
+    lastIndex() {
+        return this.count - 1;
+    }
+    candleAt(i) {
+        if (i === this.t.length && this.forming)
+            return { ...this.forming };
+        return { t: this.t[i], o: this.o[i], h: this.h[i], l: this.l[i], c: this.c[i] };
+    }
+    timeAt(i) {
+        return i === this.t.length && this.forming ? this.forming.t : this.t[i];
+    }
+    closeAt(i) {
+        return i === this.t.length && this.forming ? this.forming.c : this.c[i];
+    }
+    toArray() {
+        const out = [];
+        for (let i = 0; i < this.count; i++)
+            out.push(this.candleAt(i));
+        return out;
+    }
+    setData(closed, forming, hasMore) {
+        this.t = [];
+        this.o = [];
+        this.h = [];
+        this.l = [];
+        this.c = [];
+        let dropped = 0;
+        let prevT = -Infinity;
+        for (const k of closed) {
+            if (!isValid(k) || k.t <= prevT) {
+                dropped++;
+                continue;
+            }
+            this.push(k);
+            prevT = k.t;
+        }
+        if (forming && (!isValid(forming) || forming.t <= prevT)) {
+            dropped++;
+            forming = null;
+        }
+        this.forming = forming ? { t: forming.t, o: forming.o, h: forming.h, l: forming.l, c: forming.c } : null;
+        this.hasMore = hasMore;
+        if (this.t.length > MAX_CLOSED) {
+            this.dropOldest(this.t.length - MAX_CLOSED);
+            this.hasMore = false;
+        }
+        if (dropped > 0)
+            warn(`dropped ${dropped} invalid candle(s)`);
+    }
+    prependData(older, hasMore) {
+        const oldest = this.count > 0 ? this.timeAt(0) : Infinity;
+        const keep = [];
+        let dropped = 0;
+        let prevT = -Infinity;
+        for (const k of older) {
+            if (!isValid(k) || k.t >= oldest || k.t <= prevT) {
+                dropped++;
+                continue;
+            }
+            keep.push(k);
+            prevT = k.t;
+        }
+        if (dropped > 0)
+            warn(`dropped ${dropped} invalid older candle(s)`);
+        this.hasMore = hasMore;
+        let room = MAX_CLOSED - this.t.length;
+        if (room < 0)
+            room = 0;
+        let added = keep;
+        if (added.length > room) {
+            added = added.slice(added.length - room);
+            this.hasMore = false;
+        }
+        if (added.length === 0)
+            return 0;
+        this.t = added.map((k) => k.t).concat(this.t);
+        this.o = added.map((k) => k.o).concat(this.o);
+        this.h = added.map((k) => k.h).concat(this.h);
+        this.l = added.map((k) => k.l).concat(this.l);
+        this.c = added.map((k) => k.c).concat(this.c);
+        return added.length;
+    }
+    replaceClosed(candles) {
+        let changed = 0;
+        for (const k of candles) {
+            if (!isValid(k))
+                continue;
+            const i = this.closedIndexOf(k.t);
+            if (i < 0)
+                continue;
+            this.o[i] = k.o;
+            this.h[i] = k.h;
+            this.l[i] = k.l;
+            this.c[i] = k.c;
+            changed++;
+        }
+        return changed;
+    }
+    applyTick(price, time, intervalMs, offsetMs) {
+        if (!Number.isFinite(price) || price <= 0)
+            return { kind: 'ignored' };
+        const b = bucketStart(time, intervalMs, offsetMs);
+        const f = this.forming;
+        if (f === null) {
+            const lastClosed = this.t.length > 0 ? this.t[this.t.length - 1] : -Infinity;
+            if (b <= lastClosed)
+                return { kind: 'ignored' };
+            this.forming = { t: b, o: price, h: price, l: price, c: price };
+            return { kind: 'started' };
+        }
+        if (b > f.t) {
+            const closed = { t: f.t, o: f.o, h: f.h, l: f.l, c: f.c };
+            this.push(closed);
+            this.forming = { t: b, o: price, h: price, l: price, c: price };
+            const over = this.t.length - MAX_CLOSED;
+            const shifted = over > 0 ? this.dropOldest(over) : 0;
+            if (shifted > 0)
+                this.hasMore = false;
+            return { kind: 'closed', closed, shifted };
+        }
+        if (b === f.t) {
+            if (price > f.h)
+                f.h = price;
+            if (price < f.l)
+                f.l = price;
+            f.c = price;
+            return { kind: 'updated' };
+        }
+        return { kind: 'ignored' };
+    }
+    visibleExtremes(from, to) {
+        const a = Math.max(0, Math.floor(from));
+        const z = Math.min(this.lastIndex(), Math.ceil(to));
+        if (a > z)
+            return null;
+        let min = Infinity;
+        let max = -Infinity;
+        const n = this.t.length;
+        for (let i = a; i <= z; i++) {
+            const lo = i === n && this.forming ? this.forming.l : this.l[i];
+            const hi = i === n && this.forming ? this.forming.h : this.h[i];
+            if (lo < min)
+                min = lo;
+            if (hi > max)
+                max = hi;
+        }
+        return { min, max };
+    }
+    indexAtTime(time) {
+        if (this.count === 0 || time < this.timeAt(0))
+            return -1;
+        let lo = 0;
+        let hi = this.count - 1;
+        while (lo < hi) {
+            const mid = (lo + hi + 1) >> 1;
+            if (this.timeAt(mid) <= time)
+                lo = mid;
+            else
+                hi = mid - 1;
+        }
+        return lo;
+    }
+    closedIndexOf(time) {
+        let lo = 0;
+        let hi = this.t.length - 1;
+        while (lo <= hi) {
+            const mid = (lo + hi) >> 1;
+            const v = this.t[mid];
+            if (v === time)
+                return mid;
+            if (v < time)
+                lo = mid + 1;
+            else
+                hi = mid - 1;
+        }
+        return -1;
+    }
+    push(k) {
+        this.t.push(k.t);
+        this.o.push(k.o);
+        this.h.push(k.h);
+        this.l.push(k.l);
+        this.c.push(k.c);
+    }
+    dropOldest(n) {
+        this.t.splice(0, n);
+        this.o.splice(0, n);
+        this.h.splice(0, n);
+        this.l.splice(0, n);
+        this.c.splice(0, n);
+        return n;
+    }
+}

package/dist/core/time.d.ts

@@ -0,0 +1,25 @@
+export declare const IST_OFFSET_MS = 19800000;
+export declare const INTERVAL_MS: {
+    readonly '1m': 60000;
+    readonly '5m': 300000;
+    readonly '10m': 600000;
+    readonly '1h': 3600000;
+    readonly '3h': 10800000;
+    readonly '6h': 21600000;
+    readonly '1D': 86400000;
+};
+export type IntervalId = keyof typeof INTERVAL_MS;
+export declare function bucketStart(timeMs: number, intervalMs: number, offsetMs?: number): number;
+export declare function slotEnd(slotStart: number, intervalMs: number): number;
+export interface ClockParts {
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+}
+export declare function clockParts(timeMs: number, offsetMs?: number): ClockParts;
+export declare function monthName(month: number): string;
+export declare function formatDate(timeMs: number, offsetMs?: number): string;
+export declare function formatClock(timeMs: number, offsetMs?: number): string;
+export declare function formatSlotTime(slotStart: number, intervalMs: number, offsetMs?: number): string;

package/dist/core/time.js

@@ -0,0 +1,44 @@
+export const IST_OFFSET_MS = 19800000;
+export const INTERVAL_MS = {
+    '1m': 60000,
+    '5m': 300000,
+    '10m': 600000,
+    '1h': 3600000,
+    '3h': 10800000,
+    '6h': 21600000,
+    '1D': 86400000,
+};
+export function bucketStart(timeMs, intervalMs, offsetMs = IST_OFFSET_MS) {
+    return Math.floor((timeMs + offsetMs) / intervalMs) * intervalMs - offsetMs;
+}
+export function slotEnd(slotStart, intervalMs) {
+    return slotStart + intervalMs;
+}
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+export function clockParts(timeMs, offsetMs = IST_OFFSET_MS) {
+    const d = new Date(timeMs + offsetMs);
+    return {
+        year: d.getUTCFullYear(),
+        month: d.getUTCMonth(),
+        day: d.getUTCDate(),
+        hour: d.getUTCHours(),
+        minute: d.getUTCMinutes(),
+    };
+}
+const two = (n) => (n < 10 ? `0${n}` : String(n));
+export function monthName(month) {
+    return MONTHS[month] ?? '';
+}
+export function formatDate(timeMs, offsetMs = IST_OFFSET_MS) {
+    const p = clockParts(timeMs, offsetMs);
+    return `${p.day} ${monthName(p.month)}`;
+}
+export function formatClock(timeMs, offsetMs = IST_OFFSET_MS) {
+    const p = clockParts(timeMs, offsetMs);
+    return `${two(p.hour)}:${two(p.minute)}`;
+}
+export function formatSlotTime(slotStart, intervalMs, offsetMs = IST_OFFSET_MS) {
+    const p = clockParts(slotStart, offsetMs);
+    const date = `${p.day} ${monthName(p.month)}`;
+    return intervalMs >= INTERVAL_MS['1D'] ? `${date} ${p.year}` : `${date} ${two(p.hour)}:${two(p.minute)}`;
+}

package/dist/core/timeLabels.d.ts

@@ -0,0 +1,11 @@
+export declare const MIN_LABEL_GAP = 72;
+export interface LabelBar {
+    t: number;
+    x: number;
+}
+export interface TimeLabel {
+    x: number;
+    text: string;
+    weight: number;
+}
+export declare function pickTimeLabels(bars: readonly LabelBar[], prevT: number | null, intervalMs: number, offsetMs: number, minGap?: number): TimeLabel[];

package/dist/core/timeLabels.js

@@ -0,0 +1,52 @@
+import { INTERVAL_MS, clockParts, monthName } from "./time.js";
+export const MIN_LABEL_GAP = 72;
+const two = (n) => (n < 10 ? `0${n}` : String(n));
+export function pickTimeLabels(bars, prevT, intervalMs, offsetMs, minGap = MIN_LABEL_GAP) {
+    const intraday = intervalMs < INTERVAL_MS['1D'];
+    const all = [];
+    let prev = prevT === null ? null : clockParts(prevT, offsetMs);
+    for (const bar of bars) {
+        const p = clockParts(bar.t, offsetMs);
+        let weight = 1;
+        let text = `${two(p.hour)}:${two(p.minute)}`;
+        if (prev === null) {
+            weight = 3;
+            text = `${p.day} ${monthName(p.month)}`;
+        }
+        else if (p.year !== prev.year) {
+            weight = 5;
+            text = String(p.year);
+        }
+        else if (p.month !== prev.month) {
+            weight = 4;
+            text = monthName(p.month);
+        }
+        else if (p.day !== prev.day) {
+            weight = 3;
+            text = `${p.day} ${monthName(p.month)}`;
+        }
+        else if (intraday && p.hour !== prev.hour) {
+            weight = 2;
+            text = `${two(p.hour)}:00`;
+        }
+        all.push({ x: bar.x, text, weight });
+        prev = p;
+    }
+    const placed = [];
+    for (let w = 5; w >= 1; w--) {
+        for (const label of all) {
+            if (label.weight !== w)
+                continue;
+            let clear = true;
+            for (const q of placed) {
+                if (Math.abs(q.x - label.x) < minGap) {
+                    clear = false;
+                    break;
+                }
+            }
+            if (clear)
+                placed.push(label);
+        }
+    }
+    return placed.sort((a, b) => a.x - b.x);
+}

package/dist/core/types.d.ts

@@ -0,0 +1,113 @@
+export type Time = number;
+export interface Candle {
+    t: Time;
+    o: number;
+    h: number;
+    l: number;
+    c: number;
+}
+export type ChartType = 'candles' | 'line' | 'area' | 'heikinAshi';
+export type CandleStyle = 'hollowUp' | 'filled';
+export interface ChartTheme {
+    background: string;
+    text: string;
+    textMuted: string;
+    grid: string;
+    up: string;
+    down: string;
+    line: string;
+    areaTop: string;
+    areaBottom: string;
+    crosshair: string;
+    accent: string;
+    accentText: string;
+    fontFamily: string;
+    fontSize: number;
+}
+export interface ChartLabels {
+    open: string;
+    high: string;
+    low: string;
+    close: string;
+    change: string;
+    noData: string;
+    heikinAshi: string;
+}
+export interface ChartOptions {
+    intervalMs: number;
+    tzOffsetMs: number;
+    priceDecimals: number;
+    minMove?: number;
+    type?: ChartType;
+    candleStyle?: CandleStyle;
+    theme: ChartTheme;
+    labels?: Partial<ChartLabels>;
+    locale?: string;
+    now?: () => Time;
+    reducedMotion?: boolean;
+    ariaLabel?: string;
+}
+export interface PriceLine {
+    id: string;
+    price: number;
+    label: string;
+    color: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+}
+export interface Marker {
+    id: string;
+    t: Time;
+    price: number;
+    kind: 'buy' | 'sell';
+    label?: string;
+    tooltip?: string;
+}
+export type IndicatorSpec = {
+    id: string;
+    type: 'sma';
+    period: number;
+    color: string;
+} | {
+    id: string;
+    type: 'ema';
+    period: number;
+    color: string;
+} | {
+    id: string;
+    type: 'bollinger';
+    period: number;
+    stdDev: number;
+    color: string;
+} | {
+    id: string;
+    type: 'rsi';
+    period: number;
+    color: string;
+} | {
+    id: string;
+    type: 'macd';
+    fast: number;
+    slow: number;
+    signal: number;
+    color: string;
+    signalColor: string;
+};
+export interface ChartEvents {
+    needMore: (oldest: Time) => void;
+    candleClosed: (candle: Candle) => void;
+    liveChange: (atLive: boolean) => void;
+    crosshair: (candle: Candle | null) => void;
+}
+export interface Chart {
+    setData(closed: readonly Candle[], forming: Candle | null, hasMore: boolean): void;
+    prependData(older: readonly Candle[], hasMore: boolean): void;
+    replaceClosed(candles: readonly Candle[]): void;
+    applyTick(price: number, time: Time): void;
+    setOptions(patch: Partial<ChartOptions>): void;
+    setPriceLines(lines: readonly PriceLine[]): void;
+    setMarkers(markers: readonly Marker[]): void;
+    scrollToLive(): void;
+    fitAll(): void;
+    on<E extends keyof ChartEvents>(event: E, listener: ChartEvents[E]): () => void;
+    destroy(): void;
+}

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/viewport.d.ts

@@ -0,0 +1,41 @@
+export declare const LIVE_MARGIN = 3;
+export declare const MIN_BAR_SPACING = 2;
+export declare const MAX_BAR_SPACING = 48;
+export declare const DEFAULT_BAR_SPACING = 8;
+export declare const NEED_MORE_BARS = 50;
+export declare class Viewport {
+    barSpacing: number;
+    rightIndex: number;
+    plotLeft: number;
+    plotRight: number;
+    private last;
+    get plotWidth(): number;
+    get lastIndex(): number;
+    setPlot(left: number, right: number): void;
+    setLastIndex(lastIndex: number): void;
+    x(i: number): number;
+    indexAt(x: number): number;
+    visibleRange(): {
+        from: number;
+        to: number;
+    } | null;
+    liveRightIndex(): number;
+    atLive(): boolean;
+    panBy(dxPx: number): void;
+    setRightIndex(v: number): void;
+    zoomAt(x: number, f: number): void;
+    setBarSpacing(v: number): void;
+    onAppend(newLastIndex: number): void;
+    onPrepend(k: number): void;
+    onShift(k: number): void;
+    goLive(): void;
+    reset(): void;
+    fitAll(): void;
+    leftIndex(): number;
+    private clampRight;
+}
+export declare class MoreGate {
+    private pending;
+    check(leftIndex: number, hasMore: boolean): boolean;
+    clear(): void;
+}

package/dist/core/viewport.js

@@ -0,0 +1,116 @@
+export const LIVE_MARGIN = 3;
+export const MIN_BAR_SPACING = 2;
+export const MAX_BAR_SPACING = 48;
+export const DEFAULT_BAR_SPACING = 8;
+export const NEED_MORE_BARS = 50;
+const clampSpacing = (v) => Math.min(MAX_BAR_SPACING, Math.max(MIN_BAR_SPACING, v));
+export class Viewport {
+    constructor() {
+        this.barSpacing = DEFAULT_BAR_SPACING;
+        this.rightIndex = 0;
+        this.plotLeft = 0;
+        this.plotRight = 0;
+        this.last = -1;
+    }
+    get plotWidth() {
+        return this.plotRight - this.plotLeft;
+    }
+    get lastIndex() {
+        return this.last;
+    }
+    setPlot(left, right) {
+        this.plotLeft = left;
+        this.plotRight = Math.max(left, right);
+        this.rightIndex = this.clampRight(this.rightIndex);
+    }
+    setLastIndex(lastIndex) {
+        this.last = lastIndex;
+    }
+    x(i) {
+        return this.plotRight - (this.rightIndex - i) * this.barSpacing;
+    }
+    indexAt(x) {
+        return this.rightIndex - (this.plotRight - x) / this.barSpacing;
+    }
+    visibleRange() {
+        if (this.last < 0)
+            return null;
+        const from = Math.max(0, Math.floor(this.indexAt(this.plotLeft)) - 1);
+        const to = Math.min(this.last, Math.ceil(this.rightIndex));
+        return from > to ? null : { from, to };
+    }
+    liveRightIndex() {
+        return this.last + LIVE_MARGIN;
+    }
+    atLive() {
+        return this.rightIndex >= this.last + LIVE_MARGIN - 0.5;
+    }
+    panBy(dxPx) {
+        this.rightIndex = this.clampRight(this.rightIndex - dxPx / this.barSpacing);
+    }
+    setRightIndex(v) {
+        this.rightIndex = this.clampRight(v);
+    }
+    zoomAt(x, f) {
+        const wasLive = this.atLive();
+        const a = this.indexAt(x);
+        this.barSpacing = clampSpacing(this.barSpacing * f);
+        this.rightIndex = wasLive ? this.liveRightIndex() : a + (this.plotRight - x) / this.barSpacing;
+        this.rightIndex = this.clampRight(this.rightIndex);
+    }
+    setBarSpacing(v) {
+        this.barSpacing = clampSpacing(v);
+        this.rightIndex = this.clampRight(this.rightIndex);
+    }
+    onAppend(newLastIndex) {
+        const wasLive = this.atLive();
+        const grew = newLastIndex - this.last;
+        this.last = newLastIndex;
+        if (wasLive && grew > 0)
+            this.rightIndex += grew;
+    }
+    onPrepend(k) {
+        this.last += k;
+        this.rightIndex += k;
+    }
+    onShift(k) {
+        this.last -= k;
+        this.rightIndex -= k;
+    }
+    goLive() {
+        this.rightIndex = this.clampRight(this.liveRightIndex());
+    }
+    reset() {
+        this.barSpacing = DEFAULT_BAR_SPACING;
+        this.goLive();
+    }
+    fitAll() {
+        this.barSpacing = clampSpacing(this.plotWidth / (this.last + 1 + LIVE_MARGIN));
+        this.goLive();
+    }
+    leftIndex() {
+        return this.indexAt(this.plotLeft);
+    }
+    clampRight(v) {
+        if (this.last < 0)
+            return 0;
+        const min = Math.min(4, this.last);
+        const futureBars = Math.max(LIVE_MARGIN, this.plotWidth / this.barSpacing / 2);
+        const max = this.last + futureBars;
+        return Math.min(max, Math.max(min, v));
+    }
+}
+export class MoreGate {
+    constructor() {
+        this.pending = false;
+    }
+    check(leftIndex, hasMore) {
+        if (!hasMore || this.pending || leftIndex > NEED_MORE_BARS)
+            return false;
+        this.pending = true;
+        return true;
+    }
+    clear() {
+        this.pending = false;
+    }
+}

package/dist/core/warn.d.ts

@@ -0,0 +1 @@
+export declare function warn(message: string): void;

package/dist/core/warn.js

@@ -0,0 +1,3 @@
+export function warn(message) {
+    console.warn(`[zuttora-charts] ${message}`);
+}

package/dist/createChart.d.ts

@@ -0,0 +1,2 @@
+import type { Chart, ChartOptions } from './core/types.ts';
+export declare function createChart(container: HTMLElement, options: ChartOptions): Chart;

package/dist/createChart.js

@@ -0,0 +1,7 @@
+import { createChartCore } from "./chart.js";
+import { attachInteraction } from "./interact/attach.js";
+export function createChart(container, options) {
+    const { chart, host } = createChartCore(container, options);
+    attachInteraction(host);
+    return chart;
+}

package/dist/dom/environment.d.ts

@@ -0,0 +1,11 @@
+export interface EnvironmentHooks {
+    resize(): void;
+    densityChanged(): void;
+    second(): void;
+    visible(): void;
+}
+export interface Environment {
+    dpr(): number;
+    dispose(): void;
+}
+export declare function watchEnvironment(container: HTMLElement, doc: Document, hooks: EnvironmentHooks): Environment;