@zuttora/charts 0.0.0-stage → 0.3.0

package/dist/drawApi.js

@@ -0,0 +1,59 @@
+import { DrawController } from "./draw/controller.js";
+import { mapperOf } from "./render/drawDrawings.js";
+export function createDrawApi(d) {
+    const { s } = d;
+    const syncTouch = () => d.root.style.setProperty('touch-action', s.draw.tool || s.draw.selectedId ? 'none' : 'pan-y');
+    const controller = new DrawController({
+        drawings: () => s.drawings,
+        store: (next) => {
+            s.drawings = next;
+        },
+        mapper: () => {
+            const f = d.lastFrame();
+            return f ? mapperOf(f) : null;
+        },
+        fontSize: () => s.options.theme.fontSize,
+        now: d.now,
+        redraw: () => d.invalidate('overlay'),
+        changed: (list) => d.events.emit('drawingsChange', list),
+        selection: (id) => {
+            syncTouch();
+            d.events.emit('selectionChange', id);
+        },
+        progress: (info) => {
+            syncTouch();
+            d.events.emit('drawProgress', info);
+        },
+        edit: (drawing) => d.events.emit('drawingEdit', drawing),
+    }, s.draw);
+    const methods = {
+        setDrawingTool(tool) {
+            if (!d.isDestroyed())
+                controller.setTool(tool);
+        },
+        setDrawings(list) {
+            if (!d.isDestroyed())
+                controller.replace(list);
+        },
+        getDrawings() {
+            return s.drawings.map((x) => ({ ...x, points: x.points.map((p) => ({ ...p })) }));
+        },
+        updateDrawing(id, patch) {
+            if (!d.isDestroyed())
+                controller.update(id, patch);
+        },
+        deleteSelected() {
+            if (!d.isDestroyed())
+                controller.deleteSelected();
+        },
+        clearDrawings() {
+            if (!d.isDestroyed())
+                controller.clear();
+        },
+        setDrawingColor(color) {
+            if (!d.isDestroyed())
+                controller.setColor(color);
+        },
+    };
+    return { controller, methods };
+}

package/dist/host.d.ts

@@ -0,0 +1,35 @@
+import type { ChartEvents } from './core/types.ts';
+import type { Emitter } from './core/emitter.ts';
+import type { ChartState } from './chartState.ts';
+import type { DrawController } from './draw/controller.ts';
+import type { Frame, Layout } from './render/frame.ts';
+export interface ChartHost {
+    root: HTMLElement;
+    state: ChartState;
+    draw: DrawController;
+    setCrosshair(pos: {
+        x: number;
+        y: number;
+    } | null): void;
+    viewChanged(): void;
+    cancelAnimation(): void;
+    invalidate(layer: 'main' | 'overlay'): void;
+    scrollToLive(): void;
+    layout(): Layout | null;
+    addDisposer(fn: () => void): void;
+}
+export interface HostDeps {
+    root: HTMLElement;
+    state: ChartState;
+    draw: DrawController;
+    events: Emitter<ChartEvents>;
+    invalidate(layer: 'main' | 'overlay'): void;
+    invalidateAll(): void;
+    updateLegend(): void;
+    isDestroyed(): boolean;
+    lastFrame(): Frame | null;
+    now(): number;
+}
+export declare function createHost(d: HostDeps): ChartHost & {
+    dispose(): void;
+};

package/dist/host.js

@@ -0,0 +1,63 @@
+import { crosshairCandle } from "./dom/legendSync.js";
+import { SCROLL_TWEEN_MS } from "./render/frameBuilder.js";
+export function createHost(d) {
+    const s = d.state;
+    const disposers = [];
+    return {
+        root: d.root,
+        state: s,
+        draw: d.draw,
+        setCrosshair(pos) {
+            if (d.isDestroyed())
+                return;
+            const frame = d.lastFrame();
+            let next = null;
+            if (pos && s.series.count > 0 && frame) {
+                const idx = Math.round(s.vp.indexAt(pos.x));
+                const inPlot = pos.x >= 0 && pos.x <= frame.layout.plotRight && idx >= 0 && idx <= s.series.lastIndex();
+                if (inPlot)
+                    next = { x: pos.x, y: pos.y, index: idx };
+            }
+            s.crosshair = next;
+            const candle = crosshairCandle(s);
+            const key = candle ? candle.t : null;
+            if (key !== s.lastCrosshairTime) {
+                s.lastCrosshairTime = key;
+                d.events.emit('crosshair', candle);
+            }
+            d.updateLegend();
+            d.invalidate('overlay');
+        },
+        viewChanged() {
+            d.invalidateAll();
+        },
+        cancelAnimation() {
+            s.rightAnimating = false;
+        },
+        invalidate: d.invalidate,
+        scrollToLive() {
+            if (d.isDestroyed())
+                return;
+            if (s.options.reducedMotion) {
+                s.vp.goLive();
+            }
+            else {
+                s.rightTween.jump(s.vp.rightIndex);
+                s.rightTween.set(s.vp.liveRightIndex(), d.now(), SCROLL_TWEEN_MS);
+                s.rightAnimating = true;
+            }
+            d.invalidateAll();
+        },
+        layout() {
+            return d.lastFrame()?.layout ?? null;
+        },
+        addDisposer(fn) {
+            disposers.push(fn);
+        },
+        dispose() {
+            for (const fn of disposers)
+                fn();
+            disposers.length = 0;
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export type { Candle, CandleStyle, Chart, Drawing, DrawingKind, DrawingTool, ChartEvents, ChartLabels, ChartOptions, ChartTheme, ChartType, IndicatorSpec, Marker, Point, PriceLine, Time, } from './core/types.ts';
+export { createChart } from './createChart.ts';
+export { bucketStart, IST_OFFSET_MS, INTERVAL_MS } from './core/time.ts';
+export type { IntervalId } from './core/time.ts';
+export { heikinAshi } from './core/heikinAshi.ts';
+export { zuttoraTheme } from './theme.ts';
+export declare const VERSION = "zuttora-charts@0.3.0";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { createChart } from "./createChart.js";
+export { bucketStart, IST_OFFSET_MS, INTERVAL_MS } from "./core/time.js";
+export { heikinAshi } from "./core/heikinAshi.js";
+export { zuttoraTheme } from "./theme.js";
+export const VERSION = 'zuttora-charts@0.3.0';

package/dist/interact/attach.d.ts

@@ -0,0 +1,2 @@
+import type { ChartHost } from '../host.ts';
+export declare function attachInteraction(host: ChartHost): void;

package/dist/interact/attach.js

@@ -0,0 +1,142 @@
+import { Gestures } from "./gestures.js";
+import { handleKey } from "./keyboard.js";
+import { handleWheel } from "./wheel.js";
+export function attachInteraction(host) {
+    const root = host.root;
+    const s = host.state;
+    const changed = () => {
+        host.cancelAnimation();
+        host.viewChanged();
+    };
+    const target = {
+        region(x, y) {
+            const l = host.layout();
+            if (!l || x < 0 || y < 0 || x > l.width || y > l.height)
+                return 'outside';
+            if (y >= l.timeTop)
+                return 'time';
+            if (x >= l.plotRight)
+                return y < l.mainTop + l.mainHeight ? 'axis' : 'outside';
+            return 'plot';
+        },
+        panBy(dx) {
+            s.vp.panBy(dx);
+            changed();
+        },
+        zoomAt(x, factor) {
+            s.vp.zoomAt(x, factor);
+            changed();
+        },
+        scaleBy(dy) {
+            s.scale.scaleBy(dy);
+            changed();
+        },
+        resetAuto() {
+            s.scale.resetAuto();
+            changed();
+        },
+        resetView() {
+            s.vp.reset();
+            s.scale.resetAuto();
+            changed();
+        },
+        showCrosshair: (x, y) => host.setCrosshair({ x, y }),
+        hideCrosshair: () => host.setCrosshair(null),
+        now: () => (typeof performance !== 'undefined' ? performance.now() : Date.now()),
+        setTimer: (fn, ms) => setTimeout(fn, ms),
+        clearTimer: (id) => clearTimeout(id),
+    };
+    const gestures = new Gestures(target);
+    const local = (e) => {
+        const r = root.getBoundingClientRect();
+        return { id: e.pointerId, type: e.pointerType, x: e.clientX - r.left, y: e.clientY - r.top, button: e.button };
+    };
+    const onDown = (e) => {
+        const input = local(e);
+        if (host.draw.down(input) || gestures.down(input)) {
+            try {
+                root.setPointerCapture(e.pointerId);
+            }
+            catch {
+            }
+            root.focus({ preventScroll: true });
+        }
+    };
+    const onMove = (e) => {
+        const input = local(e);
+        if (host.draw.move(input))
+            return;
+        root.style.cursor = host.draw.cursor(input.x, input.y);
+        gestures.move(input);
+    };
+    const onUp = (e) => {
+        const input = local(e);
+        if (!host.draw.up(input))
+            gestures.up(input);
+        try {
+            root.releasePointerCapture(e.pointerId);
+        }
+        catch {
+        }
+    };
+    const onCancel = (e) => {
+        host.draw.cancel(local(e));
+        gestures.cancel(local(e));
+    };
+    const onLeave = (e) => {
+        if (e.pointerType !== 'touch')
+            gestures.leave();
+    };
+    const onWheel = (e) => {
+        const r = root.getBoundingClientRect();
+        const used = handleWheel({ x: e.clientX - r.left, y: e.clientY - r.top, deltaX: e.deltaX, deltaY: e.deltaY, deltaMode: e.deltaMode, shiftKey: e.shiftKey }, {
+            inPlot: (x, y) => target.region(x, y) === 'plot',
+            panBy: target.panBy,
+            zoomAt: target.zoomAt,
+        });
+        if (used)
+            e.preventDefault();
+    };
+    const onKey = (e) => {
+        const used = host.draw.key(e.key) ||
+            handleKey(e, {
+                barSpacing: () => s.vp.barSpacing,
+                plotCentre: () => (s.vp.plotLeft + s.vp.plotRight) / 2,
+                panBy: target.panBy,
+                zoomAt: target.zoomAt,
+                scrollToLive: () => host.scrollToLive(),
+                goToOldest: () => {
+                    s.vp.setRightIndex(s.vp.plotWidth / s.vp.barSpacing);
+                    changed();
+                },
+                hideCrosshair: target.hideCrosshair,
+                crosshairVisible: () => s.crosshair !== null,
+            });
+        if (used) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    const onFocus = () => root.style.setProperty('outline', `2px solid ${s.options.theme.accent}`);
+    const onBlur = () => root.style.setProperty('outline', 'none');
+    root.addEventListener('pointerdown', onDown);
+    root.addEventListener('pointermove', onMove);
+    root.addEventListener('pointerup', onUp);
+    root.addEventListener('pointercancel', onCancel);
+    root.addEventListener('pointerleave', onLeave);
+    root.addEventListener('wheel', onWheel, { passive: false });
+    root.addEventListener('keydown', onKey);
+    root.addEventListener('focus', onFocus);
+    root.addEventListener('blur', onBlur);
+    host.addDisposer(() => {
+        root.removeEventListener('pointerdown', onDown);
+        root.removeEventListener('pointermove', onMove);
+        root.removeEventListener('pointerup', onUp);
+        root.removeEventListener('pointercancel', onCancel);
+        root.removeEventListener('pointerleave', onLeave);
+        root.removeEventListener('wheel', onWheel);
+        root.removeEventListener('keydown', onKey);
+        root.removeEventListener('focus', onFocus);
+        root.removeEventListener('blur', onBlur);
+    });
+}

package/dist/interact/gestures.d.ts

@@ -0,0 +1,47 @@
+export type Region = 'plot' | 'axis' | 'time' | 'outside';
+export interface GestureTarget {
+    region(x: number, y: number): Region;
+    panBy(dxPx: number): void;
+    zoomAt(x: number, factor: number): void;
+    scaleBy(dyPx: number): void;
+    resetAuto(): void;
+    resetView(): void;
+    showCrosshair(x: number, y: number): void;
+    hideCrosshair(): void;
+    now(): number;
+    setTimer(fn: () => void, ms: number): number;
+    clearTimer(id: number): void;
+}
+export interface PointerInput {
+    id: number;
+    type: string;
+    x: number;
+    y: number;
+    button: number;
+}
+export declare const HOLD_MS = 300;
+export declare const HOLD_SLOP = 6;
+export declare const MOUSE_SLOP = 3;
+export declare const DOUBLE_MS = 300;
+export declare const DOUBLE_DIST = 24;
+export declare class Gestures {
+    private target;
+    private pointers;
+    private mode;
+    private holdTimer;
+    private lastTap;
+    private pinchDist;
+    private pinchMidX;
+    private pinchMidY;
+    constructor(target: GestureTarget);
+    down(p: PointerInput): boolean;
+    move(p: PointerInput): void;
+    up(p: PointerInput): void;
+    cancel(p: PointerInput): void;
+    leave(): void;
+    private hold;
+    private tap;
+    private clearHold;
+    private measurePinch;
+    private pinchStep;
+}

package/dist/interact/gestures.js

@@ -0,0 +1,179 @@
+export const HOLD_MS = 300;
+export const HOLD_SLOP = 6;
+export const MOUSE_SLOP = 3;
+export const DOUBLE_MS = 300;
+export const DOUBLE_DIST = 24;
+const TAP_MS = 400;
+export class Gestures {
+    constructor(target) {
+        this.pointers = new Map();
+        this.mode = 'idle';
+        this.holdTimer = null;
+        this.lastTap = null;
+        this.pinchDist = 0;
+        this.pinchMidX = 0;
+        this.pinchMidY = 0;
+        this.target = target;
+    }
+    down(p) {
+        if (p.type === 'mouse' && p.button !== 0)
+            return false;
+        const region = this.target.region(p.x, p.y);
+        if (region === 'outside' || region === 'time')
+            return false;
+        this.pointers.set(p.id, {
+            type: p.type, x: p.x, y: p.y, startX: p.x, startY: p.y, startT: this.target.now(), region, dragged: false,
+        });
+        if (this.pointers.size >= 2) {
+            this.clearHold();
+            this.target.hideCrosshair();
+            this.mode = 'pinch';
+            this.measurePinch();
+            return true;
+        }
+        if (region === 'axis') {
+            this.mode = 'axis';
+        }
+        else if (p.type === 'touch') {
+            this.mode = 'press';
+            this.holdTimer = this.target.setTimer(() => this.hold(p.id), HOLD_MS);
+        }
+        else {
+            this.mode = 'pan';
+        }
+        return true;
+    }
+    move(p) {
+        const t = this.pointers.get(p.id);
+        if (!t) {
+            if (p.type !== 'touch') {
+                if (this.target.region(p.x, p.y) === 'plot')
+                    this.target.showCrosshair(p.x, p.y);
+                else
+                    this.target.hideCrosshair();
+            }
+            return;
+        }
+        const dx = p.x - t.x;
+        const dy = p.y - t.y;
+        t.x = p.x;
+        t.y = p.y;
+        switch (this.mode) {
+            case 'press':
+                if (Math.hypot(p.x - t.startX, p.y - t.startY) > HOLD_SLOP) {
+                    this.clearHold();
+                    this.mode = 'pan';
+                    t.dragged = true;
+                    this.target.panBy(p.x - t.startX);
+                }
+                break;
+            case 'pan':
+                if (t.type === 'mouse' && Math.hypot(p.x - t.startX, p.y - t.startY) <= MOUSE_SLOP && !t.dragged)
+                    break;
+                t.dragged = true;
+                this.target.panBy(dx);
+                if (t.type !== 'touch' && this.target.region(p.x, p.y) === 'plot')
+                    this.target.showCrosshair(p.x, p.y);
+                break;
+            case 'axis':
+                t.dragged = true;
+                this.target.scaleBy(dy);
+                break;
+            case 'crosshair':
+                this.target.showCrosshair(p.x, p.y);
+                break;
+            case 'pinch':
+                this.pinchStep();
+                break;
+            default:
+                break;
+        }
+    }
+    up(p) {
+        const t = this.pointers.get(p.id);
+        if (!t)
+            return;
+        this.pointers.delete(p.id);
+        this.clearHold();
+        const wasMode = this.mode;
+        if (this.pointers.size >= 1 && wasMode === 'pinch') {
+            this.mode = 'idle';
+        }
+        else if (this.pointers.size === 0) {
+            this.mode = 'idle';
+        }
+        if (wasMode === 'crosshair') {
+            this.target.hideCrosshair();
+            return;
+        }
+        if (wasMode === 'pinch')
+            return;
+        const quick = this.target.now() - t.startT <= TAP_MS;
+        const still = Math.hypot(t.x - t.startX, t.y - t.startY) <= HOLD_SLOP && !t.dragged;
+        if (quick && still)
+            this.tap(t);
+        if (t.type === 'touch')
+            this.target.hideCrosshair();
+    }
+    cancel(p) {
+        const t = this.pointers.get(p.id);
+        if (!t)
+            return;
+        this.pointers.delete(p.id);
+        this.clearHold();
+        if (this.pointers.size === 0)
+            this.mode = 'idle';
+        if (t.type === 'touch')
+            this.target.hideCrosshair();
+    }
+    leave() {
+        if (this.pointers.size === 0)
+            this.target.hideCrosshair();
+    }
+    hold(id) {
+        this.holdTimer = null;
+        const t = this.pointers.get(id);
+        if (!t || this.mode !== 'press')
+            return;
+        this.mode = 'crosshair';
+        this.target.showCrosshair(t.x, t.y);
+    }
+    tap(t) {
+        const now = this.target.now();
+        const last = this.lastTap;
+        if (last && now - last.t <= DOUBLE_MS && Math.hypot(t.x - last.x, t.y - last.y) <= DOUBLE_DIST) {
+            this.lastTap = null;
+            if (t.region === 'axis')
+                this.target.resetAuto();
+            else
+                this.target.resetView();
+            return;
+        }
+        this.lastTap = { t: now, x: t.x, y: t.y };
+    }
+    clearHold() {
+        if (this.holdTimer !== null)
+            this.target.clearTimer(this.holdTimer);
+        this.holdTimer = null;
+    }
+    measurePinch() {
+        const [a, b] = [...this.pointers.values()];
+        if (!a || !b)
+            return;
+        this.pinchDist = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+        this.pinchMidX = (a.x + b.x) / 2;
+        this.pinchMidY = (a.y + b.y) / 2;
+    }
+    pinchStep() {
+        const [a, b] = [...this.pointers.values()];
+        if (!a || !b)
+            return;
+        const dist = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+        const midX = (a.x + b.x) / 2;
+        this.target.zoomAt(midX, dist / this.pinchDist);
+        this.target.panBy(midX - this.pinchMidX);
+        this.pinchDist = dist;
+        this.pinchMidX = midX;
+        this.pinchMidY = (a.y + b.y) / 2;
+    }
+}

package/dist/interact/keyboard.d.ts

@@ -0,0 +1,19 @@
+export interface KeyInput {
+    key: string;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}
+export interface KeyTarget {
+    barSpacing(): number;
+    plotCentre(): number;
+    panBy(dxPx: number): void;
+    zoomAt(x: number, factor: number): void;
+    scrollToLive(): void;
+    goToOldest(): void;
+    hideCrosshair(): void;
+    crosshairVisible(): boolean;
+}
+export declare const KEY_ZOOM = 1.25;
+export declare function handleKey(k: KeyInput, t: KeyTarget): boolean;

package/dist/interact/keyboard.js

@@ -0,0 +1,34 @@
+export const KEY_ZOOM = 1.25;
+export function handleKey(k, t) {
+    if (k.ctrlKey || k.metaKey || k.altKey)
+        return false;
+    switch (k.key) {
+        case 'ArrowLeft':
+            t.panBy(t.barSpacing() * (k.shiftKey ? 10 : 1));
+            return true;
+        case 'ArrowRight':
+            t.panBy(-t.barSpacing() * (k.shiftKey ? 10 : 1));
+            return true;
+        case '+':
+        case '=':
+            t.zoomAt(t.plotCentre(), KEY_ZOOM);
+            return true;
+        case '-':
+        case '_':
+            t.zoomAt(t.plotCentre(), 1 / KEY_ZOOM);
+            return true;
+        case 'End':
+            t.scrollToLive();
+            return true;
+        case 'Home':
+            t.goToOldest();
+            return true;
+        case 'Escape':
+            if (!t.crosshairVisible())
+                return false;
+            t.hideCrosshair();
+            return true;
+        default:
+            return false;
+    }
+}

package/dist/interact/wheel.d.ts

@@ -0,0 +1,15 @@
+export interface WheelInput {
+    x: number;
+    deltaX: number;
+    deltaY: number;
+    deltaMode: number;
+    shiftKey: boolean;
+}
+export interface WheelTarget {
+    inPlot(x: number, y: number): boolean;
+    panBy(dxPx: number): void;
+    zoomAt(x: number, factor: number): void;
+}
+export declare function handleWheel(w: WheelInput & {
+    y: number;
+}, t: WheelTarget): boolean;

package/dist/interact/wheel.js

@@ -0,0 +1,18 @@
+const toPixels = (d, mode) => (mode === 1 ? d * 16 : mode === 2 ? d * 100 : d);
+export function handleWheel(w, t) {
+    if (!t.inPlot(w.x, w.y))
+        return false;
+    const dx = toPixels(w.deltaX, w.deltaMode);
+    const dy = toPixels(w.deltaY, w.deltaMode);
+    if (w.shiftKey || Math.abs(dx) > Math.abs(dy)) {
+        const d = w.shiftKey && dx === 0 ? dy : dx;
+        if (d === 0)
+            return false;
+        t.panBy(-d);
+        return true;
+    }
+    if (dy === 0)
+        return false;
+    t.zoomAt(w.x, Math.exp(-dy * 0.002));
+    return true;
+}

package/dist/render/bars.d.ts

@@ -0,0 +1,17 @@
+import type { CandleSeries } from '../core/series.ts';
+import type { BarSource, Ohlc } from './frame.ts';
+export declare class SeriesBars implements BarSource {
+    series: CandleSeries;
+    drawnClose: number | null;
+    constructor(series: CandleSeries);
+    at(i: number, out: Ohlc): void;
+}
+export declare class HeikinBars implements BarSource {
+    series: CandleSeries;
+    private ha;
+    private formingHa;
+    constructor(series: CandleSeries);
+    rebuild(): void;
+    refreshForming(): void;
+    at(i: number, out: Ohlc): void;
+}