@zuttora/charts 0.0.0-stage → 0.1.0

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;
+}

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,39 @@
+import { formatSlotTime } from "../core/time.js";
+import { TAG_HEIGHT, TAG_PAD_X } from "./frame.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 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 (inMain) {
+        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 (inMain) {
+        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(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/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/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,30 @@
+import { drawAxes } from "./drawAxes.js";
+import { drawCandles } from "./drawCandles.js";
+import { drawGrid } from "./drawGrid.js";
+import { drawLine } from "./drawLine.js";
+import { drawMarkers } from "./drawMarkers.js";
+import { drawPriceLines, drawPriceLineTags } from "./drawPriceLines.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) {
+        if (f.type === 'line' || f.type === 'area')
+            drawLine(ctx, f);
+        else
+            drawCandles(ctx, f);
+        drawPriceLines(ctx, f);
+        drawMarkers(ctx, f);
+    }
+    drawAxes(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;

package/dist/render/drawMarkers.js

@@ -0,0 +1,39 @@
+const bar = { o: 0, h: 0, l: 0, c: 0 };
+export function drawMarkers(ctx, f) {
+    if (f.markers.length === 0)
+        return;
+    const r = f.vp.visibleRange();
+    if (!r)
+        return;
+    const size = Math.min(14, Math.max(8, Math.round(f.vp.barSpacing * 1.1)));
+    const stacks = new Map();
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    for (const m of f.markers) {
+        const idx = f.series.indexAtTime(m.t);
+        if (idx < r.from || idx > r.to)
+            continue;
+        f.source.at(idx, bar);
+        const key = `${idx}${m.kind}`;
+        const n = stacks.get(key) ?? 0;
+        stacks.set(key, n + 1);
+        const x = f.vp.x(idx);
+        const up = m.kind === 'buy';
+        const gap = 4 + n * (size + 2);
+        const apex = up ? f.scale.y(bar.l) + gap : f.scale.y(bar.h) - gap;
+        const base = up ? apex + size : apex - size;
+        ctx.beginPath();
+        ctx.moveTo(x, apex);
+        ctx.lineTo(x - size / 2, base);
+        ctx.lineTo(x + size / 2, base);
+        ctx.closePath();
+        ctx.fillStyle = up ? f.theme.up : f.theme.down;
+        ctx.fill();
+        if (m.label && size >= 11) {
+            ctx.font = `700 ${size - 4}px ${f.theme.fontFamily}`;
+            ctx.fillStyle = f.theme.background;
+            ctx.fillText(m.label.slice(0, 2), x, up ? base - size * 0.3 : base + size * 0.3);
+        }
+    }
+    ctx.textAlign = 'left';
+}

package/dist/render/drawPriceLines.d.ts

@@ -0,0 +1,4 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare function spreadTags(ys: readonly number[], gap: number, top: number, bottom: number): number[];
+export declare function drawPriceLines(ctx: Ctx, f: Frame): void;
+export declare function drawPriceLineTags(ctx: Ctx, f: Frame): void;

package/dist/render/drawPriceLines.js

@@ -0,0 +1,60 @@
+import { TAG_HEIGHT, TAG_PAD_X } from "./frame.js";
+import { pinSide } from "../core/priceScale.js";
+const DASH = { solid: [], dashed: [6, 4], dotted: [2, 3] };
+export function spreadTags(ys, gap, top, bottom) {
+    const order = ys.map((_, i) => i).sort((a, b) => ys[a] - ys[b]);
+    const out = order.map((i) => Math.min(bottom, Math.max(top, ys[i])));
+    for (let k = 1; k < out.length; k++)
+        out[k] = Math.max(out[k], out[k - 1] + gap);
+    if (out.length > 0 && out[out.length - 1] > bottom) {
+        out[out.length - 1] = bottom;
+        for (let k = out.length - 2; k >= 0; k--)
+            out[k] = Math.min(out[k], out[k + 1] - gap);
+    }
+    const result = new Array(ys.length);
+    order.forEach((orig, k) => {
+        result[orig] = out[k];
+    });
+    return result;
+}
+export function drawPriceLines(ctx, f) {
+    ctx.lineWidth = 1;
+    for (const line of f.lines) {
+        if (pinSide(line.price, f.range))
+            continue;
+        const y = Math.round(f.scale.y(line.price)) + 0.5;
+        ctx.beginPath();
+        ctx.setLineDash(DASH[line.style ?? 'dashed']);
+        ctx.moveTo(f.layout.plotLeft, y);
+        ctx.lineTo(f.layout.plotRight, y);
+        ctx.strokeStyle = line.color;
+        ctx.stroke();
+    }
+    ctx.setLineDash([]);
+}
+export function drawPriceLineTags(ctx, f) {
+    if (f.lines.length === 0)
+        return;
+    const { layout } = f;
+    const half = TAG_HEIGHT / 2;
+    const top = layout.mainTop + half;
+    const bottom = layout.mainTop + layout.mainHeight - half;
+    const ys = f.lines.map((line) => {
+        const side = pinSide(line.price, f.range);
+        return side === 'above' ? top : side === 'below' ? bottom : f.scale.y(line.price);
+    });
+    const placed = spreadTags(ys, TAG_HEIGHT + 2, top, bottom);
+    ctx.font = f.font;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    f.lines.forEach((line, i) => {
+        const side = pinSide(line.price, f.range);
+        const text = `${side === 'above' ? '↑ ' : side === 'below' ? '↓ ' : ''}${line.label}`;
+        const w = Math.max(layout.axisWidth, Math.ceil(ctx.measureText(text).width) + TAG_PAD_X * 2);
+        const y = Math.round(placed[i]);
+        ctx.fillStyle = line.color;
+        ctx.fillRect(layout.width - w, y - half, w, TAG_HEIGHT);
+        ctx.fillStyle = f.theme.background;
+        ctx.fillText(text, layout.width - w + TAG_PAD_X, y);
+    });
+}

package/dist/render/frame.d.ts

@@ -0,0 +1,53 @@
+import type { CandleSeries } from '../core/series.ts';
+import type { PriceRange, PriceScale } from '../core/priceScale.ts';
+import type { TimeLabel } from '../core/timeLabels.ts';
+import type { CandleStyle, ChartTheme, ChartType, Marker, PriceLine } from '../core/types.ts';
+import type { Viewport } from '../core/viewport.ts';
+export type Ctx = CanvasRenderingContext2D;
+export interface Ohlc {
+    o: number;
+    h: number;
+    l: number;
+    c: number;
+}
+export interface BarSource {
+    at(i: number, out: Ohlc): void;
+}
+export interface Layout {
+    width: number;
+    height: number;
+    plotLeft: number;
+    plotRight: number;
+    mainTop: number;
+    mainHeight: number;
+    axisWidth: number;
+    timeTop: number;
+    timeHeight: number;
+    subs: {
+        top: number;
+        height: number;
+    }[];
+}
+export interface Frame {
+    theme: ChartTheme;
+    layout: Layout;
+    vp: Viewport;
+    scale: PriceScale;
+    series: CandleSeries;
+    source: BarSource;
+    type: ChartType;
+    candleStyle: CandleStyle;
+    range: PriceRange;
+    ticks: number[];
+    timeLabels: TimeLabel[];
+    lines: readonly PriceLine[];
+    markers: readonly Marker[];
+    fmt: (v: number) => string;
+    font: string;
+    noDataText: string;
+    intervalMs: number;
+    tzOffsetMs: number;
+}
+export declare const TAG_PAD_X = 6;
+export declare const TAG_HEIGHT = 18;
+export declare function fontOf(theme: ChartTheme): string;

package/dist/render/frame.js

@@ -0,0 +1,5 @@
+export const TAG_PAD_X = 6;
+export const TAG_HEIGHT = 18;
+export function fontOf(theme) {
+    return `500 ${theme.fontSize}px ${theme.fontFamily}`;
+}