@zuttora/charts 0.0.0-stage → 0.3.0

package/dist/render/bars.js

@@ -0,0 +1,55 @@
+import { heikinAshi } from "../core/heikinAshi.js";
+export class SeriesBars {
+    constructor(series) {
+        this.drawnClose = null;
+        this.series = series;
+    }
+    at(i, out) {
+        const s = this.series;
+        if (i === s.t.length && s.forming) {
+            const f = s.forming;
+            out.o = f.o;
+            out.h = f.h;
+            out.l = f.l;
+            out.c = this.drawnClose ?? f.c;
+            return;
+        }
+        out.o = s.o[i];
+        out.h = s.h[i];
+        out.l = s.l[i];
+        out.c = s.c[i];
+    }
+}
+export class HeikinBars {
+    constructor(series) {
+        this.ha = [];
+        this.formingHa = null;
+        this.series = series;
+    }
+    rebuild() {
+        const s = this.series;
+        const all = [];
+        for (let i = 0; i < s.t.length; i++)
+            all.push({ t: s.t[i], o: s.o[i], h: s.h[i], l: s.l[i], c: s.c[i] });
+        this.ha = heikinAshi(all);
+        this.refreshForming();
+    }
+    refreshForming() {
+        const f = this.series.forming;
+        if (!f) {
+            this.formingHa = null;
+            return;
+        }
+        const prev = this.ha[this.ha.length - 1];
+        const c = (f.o + f.h + f.l + f.c) / 4;
+        const o = prev ? (prev.o + prev.c) / 2 : (f.o + f.c) / 2;
+        this.formingHa = { t: f.t, o, h: Math.max(f.h, o, c), l: Math.min(f.l, o, c), c };
+    }
+    at(i, out) {
+        const k = i === this.ha.length && this.formingHa ? this.formingHa : this.ha[i];
+        out.o = k.o;
+        out.h = k.h;
+        out.l = k.l;
+        out.c = k.c;
+    }
+}

package/dist/render/canvas.d.ts

@@ -0,0 +1,2 @@
+import type { Ctx } from './frame.ts';
+export declare function fitCanvas(canvas: HTMLCanvasElement, cssWidth: number, cssHeight: number, dpr: number): Ctx;

package/dist/render/canvas.js

@@ -0,0 +1,13 @@
+export function fitCanvas(canvas, cssWidth, cssHeight, dpr) {
+    const w = Math.max(1, Math.round(cssWidth * dpr));
+    const h = Math.max(1, Math.round(cssHeight * dpr));
+    if (canvas.width !== w)
+        canvas.width = w;
+    if (canvas.height !== h)
+        canvas.height = h;
+    canvas.style.width = `${cssWidth}px`;
+    canvas.style.height = `${cssHeight}px`;
+    const ctx = canvas.getContext('2d');
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    return ctx;
+}

package/dist/render/drawAxes.d.ts

@@ -0,0 +1,2 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare function drawAxes(ctx: Ctx, f: Frame): void;

package/dist/render/drawAxes.js

@@ -0,0 +1,34 @@
+import { TAG_PAD_X } from "./frame.js";
+export function drawAxes(ctx, f) {
+    const { layout, theme } = f;
+    ctx.fillStyle = theme.background;
+    ctx.fillRect(layout.plotRight, 0, layout.axisWidth, layout.height);
+    ctx.fillRect(0, layout.timeTop, layout.width, layout.timeHeight);
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.moveTo(layout.plotRight + 0.5, 0);
+    ctx.lineTo(layout.plotRight + 0.5, layout.timeTop);
+    ctx.moveTo(0, layout.timeTop + 0.5);
+    ctx.lineTo(layout.width, layout.timeTop + 0.5);
+    ctx.strokeStyle = theme.grid;
+    ctx.stroke();
+    ctx.font = f.font;
+    ctx.fillStyle = theme.text;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    const bottom = layout.mainTop + layout.mainHeight;
+    for (const p of f.ticks) {
+        const y = f.scale.y(p);
+        if (y < layout.mainTop + 6 || y > bottom - 6)
+            continue;
+        ctx.fillText(f.fmt(p), layout.plotRight + TAG_PAD_X, Math.round(y));
+    }
+    ctx.textAlign = 'center';
+    const ty = layout.timeTop + layout.timeHeight / 2 + 1;
+    for (const label of f.timeLabels) {
+        if (label.x < 0 || label.x > layout.plotRight)
+            continue;
+        ctx.fillText(label.text, Math.round(label.x), ty);
+    }
+    ctx.textAlign = 'left';
+}

package/dist/render/drawCandles.d.ts

@@ -0,0 +1,3 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare function bodyWidth(barSpacing: number): number;
+export declare function drawCandles(ctx: Ctx, f: Frame): void;

package/dist/render/drawCandles.js

@@ -0,0 +1,68 @@
+const bar = { o: 0, h: 0, l: 0, c: 0 };
+export function bodyWidth(barSpacing) {
+    const w = Math.max(1, Math.floor(barSpacing * 0.7));
+    return w % 2 === 0 ? w - 1 || 1 : w;
+}
+export function drawCandles(ctx, f) {
+    const r = f.vp.visibleRange();
+    if (!r)
+        return;
+    const wickOnly = f.vp.barSpacing < 3;
+    const bw = bodyWidth(f.vp.barSpacing);
+    const half = (bw - 1) / 2;
+    ctx.lineWidth = 1;
+    const wicks = (up) => {
+        ctx.beginPath();
+        for (let i = r.from; i <= r.to; i++) {
+            f.source.at(i, bar);
+            if (bar.c >= bar.o !== up)
+                continue;
+            const x = Math.round(f.vp.x(i)) + 0.5;
+            const yh = Math.round(f.scale.y(bar.h));
+            const yl = Math.round(f.scale.y(bar.l));
+            if (wickOnly) {
+                ctx.moveTo(x, yh);
+                ctx.lineTo(x, yl);
+                continue;
+            }
+            const top = Math.round(f.scale.y(Math.max(bar.o, bar.c)));
+            const bottom = Math.max(top + 1, Math.round(f.scale.y(Math.min(bar.o, bar.c))));
+            ctx.moveTo(x, yh);
+            ctx.lineTo(x, top);
+            ctx.moveTo(x, bottom);
+            ctx.lineTo(x, yl);
+        }
+        ctx.strokeStyle = up ? f.theme.up : f.theme.down;
+        ctx.stroke();
+    };
+    const bodies = (up) => {
+        const hollow = up && f.candleStyle === 'hollowUp';
+        ctx.beginPath();
+        for (let i = r.from; i <= r.to; i++) {
+            f.source.at(i, bar);
+            if (bar.c >= bar.o !== up)
+                continue;
+            const x0 = Math.round(f.vp.x(i)) - half;
+            const top = Math.round(f.scale.y(Math.max(bar.o, bar.c)));
+            const h = Math.max(1, Math.round(f.scale.y(Math.min(bar.o, bar.c))) - top);
+            if (hollow)
+                ctx.rect(x0 + 0.5, top + 0.5, bw - 1, h - 1);
+            else
+                ctx.rect(x0, top, bw, h);
+        }
+        if (hollow) {
+            ctx.strokeStyle = f.theme.up;
+            ctx.stroke();
+        }
+        else {
+            ctx.fillStyle = up ? f.theme.up : f.theme.down;
+            ctx.fill();
+        }
+    };
+    wicks(true);
+    wicks(false);
+    if (!wickOnly) {
+        bodies(true);
+        bodies(false);
+    }
+}

package/dist/render/drawCrosshair.d.ts

@@ -0,0 +1,7 @@
+import type { Ctx, Frame } from './frame.ts';
+export interface CrosshairInput {
+    x: number;
+    y: number;
+    index: number;
+}
+export declare function drawCrosshair(ctx: Ctx, f: Frame, c: CrosshairInput): void;

package/dist/render/drawCrosshair.js

@@ -0,0 +1,42 @@
+import { formatSlotTime } from "../core/time.js";
+import { TAG_HEIGHT, TAG_PAD_X } from "./frame.js";
+import { subValueAt } from "./indicatorFrame.js";
+export function drawCrosshair(ctx, f, c) {
+    if (c.index < 0 || c.index > f.series.lastIndex())
+        return;
+    const { layout, theme } = f;
+    const x = Math.round(f.vp.x(c.index)) + 0.5;
+    const inMain = c.y >= layout.mainTop && c.y <= layout.mainTop + layout.mainHeight;
+    const sub = f.subs.find((p) => c.y >= p.top && c.y <= p.top + p.height);
+    const guide = inMain || sub !== undefined;
+    const y = Math.round(c.y) + 0.5;
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = theme.crosshair;
+    ctx.moveTo(x, layout.mainTop);
+    ctx.lineTo(x, layout.timeTop);
+    if (guide) {
+        ctx.moveTo(layout.plotLeft, y);
+        ctx.lineTo(layout.plotRight, y);
+    }
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.font = f.font;
+    ctx.textBaseline = 'middle';
+    ctx.fillStyle = theme.accent;
+    if (guide) {
+        ctx.fillRect(layout.plotRight + 1, Math.round(c.y - TAG_HEIGHT / 2), layout.axisWidth - 1, TAG_HEIGHT);
+        ctx.fillStyle = theme.accentText;
+        ctx.textAlign = 'left';
+        ctx.fillText(f.fmt(sub ? subValueAt(sub, c.y) : f.scale.priceAt(c.y)), layout.plotRight + TAG_PAD_X, Math.round(c.y));
+    }
+    const text = formatSlotTime(f.series.timeAt(c.index), f.intervalMs, f.tzOffsetMs);
+    const w = Math.ceil(ctx.measureText(text).width) + TAG_PAD_X * 2;
+    const left = Math.min(layout.width - w, Math.max(0, Math.round(x - w / 2)));
+    ctx.fillStyle = theme.accent;
+    ctx.fillRect(left, layout.timeTop + 1, w, layout.timeHeight - 1);
+    ctx.fillStyle = theme.accentText;
+    ctx.textAlign = 'left';
+    ctx.fillText(text, left + TAG_PAD_X, layout.timeTop + layout.timeHeight / 2 + 1);
+}

package/dist/render/drawDrawings.d.ts

@@ -0,0 +1,10 @@
+import type { Drawing } from '../core/drawings.ts';
+import type { DrawState } from '../draw/controller.ts';
+import type { Mapper } from '../draw/mapper.ts';
+import type { Ctx, Frame } from './frame.ts';
+export interface DrawingsView {
+    drawings: readonly Drawing[];
+    state: DrawState;
+}
+export declare function mapperOf(f: Frame): Mapper;
+export declare function drawDrawings(ctx: Ctx, f: Frame, view: DrawingsView): void;

package/dist/render/drawDrawings.js

@@ -0,0 +1,146 @@
+import { measureBox, shapeOf } from "../draw/geometry.js";
+import { makeMapper } from "../draw/mapper.js";
+import { TAG_HEIGHT, TAG_PAD_X } from "./frame.js";
+const HANDLE = 9;
+const PREVIEW_ALPHA = 0.75;
+const ZONE_ALPHA = 0.1;
+export function mapperOf(f) {
+    const l = f.layout;
+    return makeMapper({
+        series: f.series,
+        vp: f.vp,
+        scale: f.scale,
+        intervalMs: f.intervalMs,
+        bounds: { left: l.plotLeft, right: l.plotRight, top: l.mainTop, bottom: l.mainTop + l.mainHeight },
+    });
+}
+function paintDrawing(ctx, f, m, d, selected) {
+    const shape = shapeOf(d, m, f.theme.fontSize);
+    ctx.strokeStyle = d.color;
+    ctx.fillStyle = d.color;
+    ctx.lineWidth = selected ? 2 : 1.5;
+    if (shape.box) {
+        const base = ctx.globalAlpha || 1;
+        ctx.globalAlpha = base * ZONE_ALPHA;
+        ctx.fillRect(shape.box.x, shape.box.y, shape.box.w, shape.box.h);
+        ctx.globalAlpha = base;
+    }
+    if (shape.segments.length > 0) {
+        ctx.beginPath();
+        for (const s of shape.segments) {
+            ctx.moveTo(s.a.x, s.a.y);
+            ctx.lineTo(s.b.x, s.b.y);
+        }
+        ctx.stroke();
+    }
+    ctx.font = f.font;
+    ctx.textBaseline = 'bottom';
+    ctx.textAlign = 'left';
+    for (const line of shape.fib) {
+        ctx.lineWidth = 1;
+        ctx.setLineDash(line.level === 0 || line.level === 1 ? [] : [4, 4]);
+        ctx.beginPath();
+        ctx.moveTo(line.seg.a.x, line.seg.a.y + 0.5);
+        ctx.lineTo(line.seg.b.x, line.seg.b.y + 0.5);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillText(`${line.level}  ${f.fmt(line.price)}`, line.seg.a.x + 4, line.seg.a.y - 2);
+    }
+    if (shape.note) {
+        const { box, pin } = shape.note;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(pin.x, pin.y);
+        ctx.lineTo(pin.x < box.x ? box.x : box.x + box.w, pin.y < box.y ? box.y : box.y + box.h);
+        ctx.stroke();
+        ctx.fillRect(pin.x - 3, pin.y - 3, 6, 6);
+        ctx.fillStyle = f.theme.background;
+        ctx.fillRect(box.x, box.y, box.w, box.h);
+        ctx.strokeRect(box.x + 0.5, box.y + 0.5, box.w - 1, box.h - 1);
+        ctx.fillStyle = f.theme.text;
+        ctx.textBaseline = 'middle';
+        ctx.fillText(d.text ?? '', box.x + 6, box.y + box.h / 2 + 1);
+    }
+    if (selected)
+        paintHandles(ctx, f, shape.handles, d.color);
+}
+function paintHandles(ctx, f, handles, color) {
+    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = color;
+    ctx.fillStyle = f.theme.background;
+    for (const h of handles) {
+        ctx.fillRect(Math.round(h.x - HANDLE / 2), Math.round(h.y - HANDLE / 2), HANDLE, HANDLE);
+        ctx.strokeRect(Math.round(h.x - HANDLE / 2) + 0.5, Math.round(h.y - HANDLE / 2) + 0.5, HANDLE - 1, HANDLE - 1);
+    }
+}
+function paintMeasure(ctx, f, m, a, b) {
+    const pa = m.px(a);
+    const pb = m.px(b);
+    const box = measureBox(pa, pb);
+    const up = b.price >= a.price;
+    const color = up ? f.theme.up : f.theme.down;
+    ctx.fillStyle = color;
+    ctx.globalAlpha = ZONE_ALPHA;
+    ctx.fillRect(box.x, box.y, box.w, box.h);
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    ctx.strokeRect(box.x + 0.5, box.y + 0.5, box.w, box.h);
+    ctx.setLineDash([]);
+    const diff = b.price - a.price;
+    const sign = diff >= 0 ? '+' : '−';
+    const pct = a.price !== 0 ? (Math.abs(diff) / a.price) * 100 : 0;
+    const candles = Math.round(Math.abs(m.indexOfTime(b.t) - m.indexOfTime(a.t)));
+    const text = `${sign}${f.fmt(Math.abs(diff))} (${sign}${pct.toFixed(2)}%) · ${candles} candle${candles === 1 ? '' : 's'}`;
+    ctx.font = f.font;
+    const w = Math.ceil(ctx.measureText(text).width) + TAG_PAD_X * 2;
+    const { left, right, top, bottom } = m.bounds;
+    const x = Math.min(right - w, Math.max(left, Math.round(box.x + box.w / 2 - w / 2)));
+    const y = Math.min(bottom - TAG_HEIGHT, Math.max(top, Math.round(box.y + box.h / 2 - TAG_HEIGHT / 2)));
+    ctx.fillStyle = color;
+    ctx.fillRect(x, y, w, TAG_HEIGHT);
+    ctx.fillStyle = f.theme.background;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text, x + TAG_PAD_X, y + TAG_HEIGHT / 2 + 1);
+}
+export function drawDrawings(ctx, f, view) {
+    const { drawings, state } = view;
+    const l = f.layout;
+    if (drawings.length === 0 && state.pending.length === 0 && !state.measure)
+        return;
+    const m = mapperOf(f);
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(l.plotLeft, l.mainTop, l.plotRight - l.plotLeft, l.mainHeight);
+    ctx.clip();
+    for (const d of drawings)
+        paintDrawing(ctx, f, m, d, d.id === state.selectedId);
+    const first = state.pending[0];
+    if (first && state.preview && state.tool) {
+        ctx.globalAlpha = PREVIEW_ALPHA;
+        if (state.tool === 'measure')
+            paintMeasure(ctx, f, m, first, state.preview);
+        else
+            paintDrawing(ctx, f, m, { type: state.tool, points: [first, state.preview], color: state.color }, false);
+        ctx.globalAlpha = 1;
+    }
+    if (state.measure)
+        paintMeasure(ctx, f, m, state.measure.a, state.measure.b);
+    ctx.restore();
+    ctx.font = f.font;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    for (const d of drawings) {
+        if (d.type !== 'hline')
+            continue;
+        const y = Math.round(f.scale.y(d.points[0].price));
+        if (y < l.mainTop + TAG_HEIGHT / 2 || y > l.mainTop + l.mainHeight - TAG_HEIGHT / 2)
+            continue;
+        ctx.fillStyle = d.color;
+        ctx.fillRect(l.plotRight + 1, y - TAG_HEIGHT / 2, l.axisWidth - 1, TAG_HEIGHT);
+        ctx.fillStyle = f.theme.background;
+        ctx.fillText(f.fmt(d.points[0].price), l.plotRight + TAG_PAD_X, y + 1);
+    }
+}

package/dist/render/drawGrid.d.ts

@@ -0,0 +1,2 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare function drawGrid(ctx: Ctx, f: Frame): void;

package/dist/render/drawGrid.js

@@ -0,0 +1,22 @@
+export function drawGrid(ctx, f) {
+    const { layout } = f;
+    const bottom = layout.mainTop + layout.mainHeight;
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    for (const p of f.ticks) {
+        const y = Math.round(f.scale.y(p)) + 0.5;
+        if (y < layout.mainTop || y > bottom)
+            continue;
+        ctx.moveTo(layout.plotLeft, y);
+        ctx.lineTo(layout.plotRight, y);
+    }
+    for (const label of f.timeLabels) {
+        const x = Math.round(label.x) + 0.5;
+        if (x < layout.plotLeft || x > layout.plotRight)
+            continue;
+        ctx.moveTo(x, layout.mainTop);
+        ctx.lineTo(x, layout.timeTop);
+    }
+    ctx.strokeStyle = f.theme.grid;
+    ctx.stroke();
+}

package/dist/render/drawIndicators.d.ts

@@ -0,0 +1,4 @@
+import type { Values } from '../core/indicators.ts';
+import type { Ctx, Frame } from './frame.ts';
+export declare function tracePath(ctx: Ctx, f: Frame, values: Values, from: number, to: number, y: (v: number) => number): void;
+export declare function drawOverlays(ctx: Ctx, f: Frame): void;

package/dist/render/drawIndicators.js

@@ -0,0 +1,67 @@
+export function tracePath(ctx, f, values, from, to, y) {
+    ctx.beginPath();
+    let pen = false;
+    for (let i = from; i <= to; i++) {
+        const v = values[i];
+        if (v === null || v === undefined) {
+            pen = false;
+            continue;
+        }
+        if (pen)
+            ctx.lineTo(f.vp.x(i), y(v));
+        else
+            ctx.moveTo(f.vp.x(i), y(v));
+        pen = true;
+    }
+}
+export function drawOverlays(ctx, f) {
+    const r = f.vp.visibleRange();
+    if (!r || f.overlays.length === 0)
+        return;
+    const from = Math.max(0, r.from - 1);
+    const to = Math.min(f.series.lastIndex(), r.to + 1);
+    const y = (v) => f.scale.y(v);
+    ctx.lineJoin = 'miter';
+    for (const e of f.overlays) {
+        const color = e.spec.color;
+        const l = e.calc.lines;
+        if (e.spec.type === 'bollinger') {
+            const upper = l.upper;
+            const lower = l.lower;
+            let first = -1;
+            for (let i = from; i <= to; i++) {
+                if (upper[i] !== null && upper[i] !== undefined) {
+                    first = i;
+                    break;
+                }
+            }
+            if (first >= 0) {
+                ctx.beginPath();
+                for (let i = first; i <= to; i++)
+                    ctx[i === first ? 'moveTo' : 'lineTo'](f.vp.x(i), y(upper[i]));
+                for (let i = to; i >= first; i--)
+                    ctx.lineTo(f.vp.x(i), y(lower[i]));
+                ctx.closePath();
+                ctx.globalAlpha = 0.08;
+                ctx.fillStyle = color;
+                ctx.fill();
+                ctx.globalAlpha = 1;
+            }
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1;
+            for (const v of [upper, lower]) {
+                tracePath(ctx, f, v, from, to, y);
+                ctx.stroke();
+            }
+            ctx.lineWidth = 1.5;
+            tracePath(ctx, f, l.mid, from, to, y);
+            ctx.stroke();
+        }
+        else {
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1.5;
+            tracePath(ctx, f, l.main, from, to, y);
+            ctx.stroke();
+        }
+    }
+}

package/dist/render/drawLastPrice.d.ts

@@ -0,0 +1,10 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare const PULSE_MS = 600;
+export interface LastPriceInput {
+    close: number;
+    wallNow: number;
+    animNow: number;
+    pulses: readonly number[];
+    reducedMotion: boolean;
+}
+export declare function drawLastPrice(ctx: Ctx, f: Frame, input: LastPriceInput): void;

package/dist/render/drawLastPrice.js

@@ -0,0 +1,53 @@
+import { slotEnd } from "../core/time.js";
+import { formatCountdown } from "../core/format.js";
+import { TAG_HEIGHT, TAG_PAD_X } from "./frame.js";
+import { LIVE_POINT } from "./drawLine.js";
+export const PULSE_MS = 600;
+const PULSE_GROW = 16;
+export function drawLastPrice(ctx, f, input) {
+    const forming = f.series.forming;
+    if (!forming)
+        return;
+    const { layout, theme } = f;
+    const half = TAG_HEIGHT;
+    const top = layout.mainTop + half;
+    const bottom = layout.mainTop + layout.mainHeight - half;
+    const rawY = f.scale.y(input.close);
+    const y = Math.round(Math.min(bottom, Math.max(top, rawY)));
+    const colour = forming.c >= forming.o ? theme.up : theme.down;
+    if (rawY >= layout.mainTop && rawY <= layout.mainTop + layout.mainHeight) {
+        ctx.beginPath();
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 4]);
+        ctx.moveTo(layout.plotLeft, y + 0.5);
+        ctx.lineTo(layout.plotRight, y + 0.5);
+        ctx.strokeStyle = colour;
+        ctx.stroke();
+        ctx.setLineDash([]);
+    }
+    ctx.font = f.font;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    ctx.fillStyle = colour;
+    ctx.fillRect(layout.plotRight + 1, y - TAG_HEIGHT, layout.axisWidth - 1, TAG_HEIGHT * 2);
+    ctx.fillStyle = theme.background;
+    ctx.fillText(f.fmt(input.close), layout.plotRight + TAG_PAD_X, y - TAG_HEIGHT / 2);
+    const left = formatCountdown(slotEnd(forming.t, f.intervalMs) - input.wallNow);
+    ctx.fillText(left, layout.plotRight + TAG_PAD_X, y + TAG_HEIGHT / 2);
+    if ((f.type === 'line' || f.type === 'area') && !input.reducedMotion) {
+        const x = f.vp.x(f.series.lastIndex());
+        if (x < layout.plotLeft || x > layout.plotRight)
+            return;
+        ctx.lineWidth = 1;
+        for (const start of input.pulses) {
+            const p = (input.animNow - start) / PULSE_MS;
+            if (p < 0 || p >= 1)
+                continue;
+            const s = LIVE_POINT + p * PULSE_GROW;
+            ctx.globalAlpha = 1 - p;
+            ctx.strokeStyle = theme.line;
+            ctx.strokeRect(Math.round(x - s / 2) + 0.5, Math.round(rawY - s / 2) + 0.5, Math.round(s), Math.round(s));
+        }
+        ctx.globalAlpha = 1;
+    }
+}

package/dist/render/drawLine.d.ts

@@ -0,0 +1,3 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare const LIVE_POINT = 5;
+export declare function drawLine(ctx: Ctx, f: Frame): void;

package/dist/render/drawLine.js

@@ -0,0 +1,43 @@
+const bar = { o: 0, h: 0, l: 0, c: 0 };
+export const LIVE_POINT = 5;
+export function drawLine(ctx, f) {
+    const r = f.vp.visibleRange();
+    if (!r)
+        return;
+    const bottom = f.layout.mainTop + f.layout.mainHeight;
+    const trace = () => {
+        for (let i = r.from; i <= r.to; i++) {
+            f.source.at(i, bar);
+            const x = f.vp.x(i);
+            const y = f.scale.y(bar.c);
+            if (i === r.from)
+                ctx.moveTo(x, y);
+            else
+                ctx.lineTo(x, y);
+        }
+    };
+    if (f.type === 'area') {
+        ctx.beginPath();
+        trace();
+        ctx.lineTo(f.vp.x(r.to), bottom);
+        ctx.lineTo(f.vp.x(r.from), bottom);
+        ctx.closePath();
+        const g = ctx.createLinearGradient(0, f.layout.mainTop, 0, bottom);
+        g.addColorStop(0, f.theme.areaTop);
+        g.addColorStop(1, f.theme.areaBottom);
+        ctx.fillStyle = g;
+        ctx.fill();
+    }
+    ctx.beginPath();
+    trace();
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = 'miter';
+    ctx.strokeStyle = f.theme.line;
+    ctx.stroke();
+    if (f.series.forming && r.to === f.series.lastIndex()) {
+        f.source.at(r.to, bar);
+        const s = LIVE_POINT;
+        ctx.fillStyle = f.theme.line;
+        ctx.fillRect(Math.round(f.vp.x(r.to) - s / 2), Math.round(f.scale.y(bar.c) - s / 2), s, s);
+    }
+}

package/dist/render/drawMain.d.ts

@@ -0,0 +1,2 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare function drawMain(ctx: Ctx, f: Frame): void;

package/dist/render/drawMain.js

@@ -0,0 +1,43 @@
+import { drawAxes } from "./drawAxes.js";
+import { drawCandles } from "./drawCandles.js";
+import { drawGrid } from "./drawGrid.js";
+import { drawLine } from "./drawLine.js";
+import { drawOverlays } from "./drawIndicators.js";
+import { drawMarkers } from "./drawMarkers.js";
+import { drawPriceLines, drawPriceLineTags } from "./drawPriceLines.js";
+import { drawSubPanes } from "./drawSubPanes.js";
+export function drawMain(ctx, f) {
+    const { layout, theme } = f;
+    ctx.fillStyle = theme.background;
+    ctx.fillRect(0, 0, layout.width, layout.height);
+    drawGrid(ctx, f);
+    if (f.series.count > 0) {
+        const clip = f.subs.length > 0;
+        if (clip) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(0, layout.mainTop, layout.plotRight, layout.mainHeight);
+            ctx.clip();
+        }
+        if (f.type === 'line' || f.type === 'area')
+            drawLine(ctx, f);
+        else
+            drawCandles(ctx, f);
+        drawOverlays(ctx, f);
+        drawPriceLines(ctx, f);
+        drawMarkers(ctx, f);
+        if (clip)
+            ctx.restore();
+    }
+    drawAxes(ctx, f);
+    drawSubPanes(ctx, f);
+    drawPriceLineTags(ctx, f);
+    if (f.series.count === 0) {
+        ctx.font = f.font;
+        ctx.fillStyle = theme.textMuted;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(f.noDataText, layout.plotRight / 2, layout.mainHeight / 2);
+        ctx.textAlign = 'left';
+    }
+}

package/dist/render/drawMarkers.d.ts

@@ -0,0 +1,2 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare function drawMarkers(ctx: Ctx, f: Frame): void;