@zuttora/charts 0.0.0-stage → 0.1.0

package/dist/dom/environment.js

@@ -0,0 +1,49 @@
+const currentDpr = () => (typeof devicePixelRatio === 'number' ? devicePixelRatio : 1);
+export function watchEnvironment(container, doc, hooks) {
+    let dpr = currentDpr();
+    const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(() => hooks.resize()) : null;
+    ro?.observe(container);
+    let stopDpr = null;
+    const watchDpr = () => {
+        stopDpr?.();
+        stopDpr = null;
+        if (typeof matchMedia !== 'function')
+            return;
+        const mq = matchMedia(`(resolution: ${dpr}dppx)`);
+        const onChange = () => {
+            dpr = currentDpr();
+            hooks.densityChanged();
+            watchDpr();
+        };
+        mq.addEventListener('change', onChange);
+        stopDpr = () => mq.removeEventListener('change', onChange);
+    };
+    watchDpr();
+    let onScreen = true;
+    const io = typeof IntersectionObserver === 'function'
+        ? new IntersectionObserver((entries) => {
+            for (const e of entries)
+                onScreen = e.isIntersecting;
+        })
+        : null;
+    io?.observe(container);
+    const timer = setInterval(() => {
+        if (onScreen && doc.visibilityState !== 'hidden')
+            hooks.second();
+    }, 1000);
+    const onVisible = () => {
+        if (doc.visibilityState !== 'hidden')
+            hooks.visible();
+    };
+    doc.addEventListener('visibilitychange', onVisible);
+    return {
+        dpr: () => dpr,
+        dispose() {
+            clearInterval(timer);
+            ro?.disconnect();
+            io?.disconnect();
+            stopDpr?.();
+            doc.removeEventListener('visibilitychange', onVisible);
+        },
+    };
+}

package/dist/dom/legend.d.ts

@@ -0,0 +1,14 @@
+import type { Candle, ChartLabels, ChartTheme } from '../core/types.ts';
+export interface LegendInput {
+    candle: Candle | null;
+    notes: readonly string[];
+    caption: string | null;
+}
+export declare class Legend {
+    readonly el: HTMLDivElement;
+    private line;
+    private extra;
+    constructor(doc: Document, theme: ChartTheme);
+    applyTheme(theme: ChartTheme): void;
+    update(input: LegendInput, labels: ChartLabels, theme: ChartTheme, decimals: number, fmt: (v: number) => string, locale: string): void;
+}

package/dist/dom/legend.js

@@ -0,0 +1,53 @@
+import { changeParts } from "../core/format.js";
+export class Legend {
+    constructor(doc, theme) {
+        this.el = doc.createElement('div');
+        this.line = doc.createElement('div');
+        this.extra = doc.createElement('div');
+        this.line.style.cssText = 'display:flex;flex-wrap:wrap;column-gap:12px';
+        this.el.append(this.line, this.extra);
+        this.el.setAttribute('aria-live', 'off');
+        this.applyTheme(theme);
+    }
+    applyTheme(theme) {
+        const s = this.el.style;
+        s.position = 'absolute';
+        s.left = '8px';
+        s.right = '64px';
+        s.top = '6px';
+        s.pointerEvents = 'none';
+        s.fontFamily = theme.fontFamily;
+        s.fontSize = `${theme.fontSize}px`;
+        s.lineHeight = '1.35';
+        s.color = theme.text;
+        s.whiteSpace = 'pre';
+        s.userSelect = 'none';
+    }
+    update(input, labels, theme, decimals, fmt, locale) {
+        const k = input.candle;
+        this.line.textContent = '';
+        this.extra.textContent = '';
+        if (!k)
+            return;
+        const parts = [
+            [labels.open, k.o],
+            [labels.high, k.h],
+            [labels.low, k.l],
+            [labels.close, k.c],
+        ];
+        const doc = this.el.ownerDocument;
+        for (const [name, value] of parts) {
+            const span = doc.createElement('span');
+            span.textContent = `${name} ${fmt(value)}`;
+            this.line.append(span);
+        }
+        const ch = changeParts(k.o, k.c, decimals, locale);
+        const change = doc.createElement('span');
+        change.textContent = `${ch.arrow} ${ch.amount} (${ch.percent})`.trim();
+        change.style.color = ch.direction > 0 ? theme.up : ch.direction < 0 ? theme.down : theme.textMuted;
+        this.line.append(change);
+        const lines = input.caption ? [input.caption, ...input.notes] : [...input.notes];
+        this.extra.textContent = lines.join('\n');
+        this.extra.style.color = theme.textMuted;
+    }
+}

package/dist/dom/legendSync.d.ts

@@ -0,0 +1,5 @@
+import type { Candle } from '../core/types.ts';
+import type { ChartState } from '../chartState.ts';
+import type { Legend } from './legend.ts';
+export declare function crosshairCandle(s: ChartState): Candle | null;
+export declare function syncLegend(s: ChartState, legend: Legend): void;

package/dist/dom/legendSync.js

@@ -0,0 +1,23 @@
+import { priceFormatter } from "../core/format.js";
+export function crosshairCandle(s) {
+    const c = s.crosshair;
+    if (!c || c.index < 0 || c.index > s.series.lastIndex())
+        return null;
+    return s.series.candleAt(c.index);
+}
+export function syncLegend(s, legend) {
+    const o = s.options;
+    let candle = crosshairCandle(s);
+    let idx = s.crosshair ? s.crosshair.index : -1;
+    if (!candle && s.series.count > 0) {
+        idx = s.series.lastIndex();
+        candle = s.series.candleAt(idx);
+    }
+    const notes = [];
+    if (candle) {
+        for (const m of s.markers)
+            if (m.tooltip && s.series.indexAtTime(m.t) === idx)
+                notes.push(m.tooltip);
+    }
+    legend.update({ candle, notes, caption: o.type === 'heikinAshi' ? o.labels.heikinAshi : null }, o.labels, o.theme, o.priceDecimals, priceFormatter(o.priceDecimals, o.locale), o.locale);
+}

package/dist/dom/root.d.ts

@@ -0,0 +1,9 @@
+import type { ChartTheme } from '../core/types.ts';
+import { Legend } from './legend.ts';
+export interface ChartDom {
+    root: HTMLDivElement;
+    mainCanvas: HTMLCanvasElement;
+    overlayCanvas: HTMLCanvasElement;
+    legend: Legend;
+}
+export declare function buildDom(doc: Document, theme: ChartTheme): ChartDom;

package/dist/dom/root.js

@@ -0,0 +1,19 @@
+import { Legend } from "./legend.js";
+export function buildDom(doc, theme) {
+    const root = doc.createElement('div');
+    root.style.cssText =
+        'position:relative;width:100%;height:100%;overflow:hidden;outline:none;touch-action:pan-y;user-select:none;-webkit-user-select:none';
+    root.tabIndex = 0;
+    root.setAttribute('role', 'img');
+    const mainCanvas = doc.createElement('canvas');
+    const overlayCanvas = doc.createElement('canvas');
+    for (const c of [mainCanvas, overlayCanvas]) {
+        c.style.position = 'absolute';
+        c.style.left = '0';
+        c.style.top = '0';
+        c.style.pointerEvents = 'none';
+    }
+    const legend = new Legend(doc, theme);
+    root.append(mainCanvas, overlayCanvas, legend.el);
+    return { root, mainCanvas, overlayCanvas, legend };
+}

package/dist/host.d.ts

@@ -0,0 +1,32 @@
+import type { ChartEvents } from './core/types.ts';
+import type { Emitter } from './core/emitter.ts';
+import type { ChartState } from './chartState.ts';
+import type { Frame, Layout } from './render/frame.ts';
+export interface ChartHost {
+    root: HTMLElement;
+    state: ChartState;
+    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;
+    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,62 @@
+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,
+        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, ChartEvents, ChartLabels, ChartOptions, ChartTheme, ChartType, Marker, 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.1.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.1.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,127 @@
+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';
+            return x < l.plotRight ? 'plot' : 'axis';
+        },
+        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) => {
+        if (gestures.down(local(e))) {
+            try {
+                root.setPointerCapture(e.pointerId);
+            }
+            catch {
+            }
+            root.focus({ preventScroll: true });
+        }
+    };
+    const onMove = (e) => gestures.move(local(e));
+    const onUp = (e) => {
+        gestures.up(local(e));
+        try {
+            root.releasePointerCapture(e.pointerId);
+        }
+        catch {
+        }
+    };
+    const onCancel = (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 = 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;