@zuttora/charts 0.1.0 → 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

@@ -1,10 +1,12 @@
 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;
@@ -19,6 +21,7 @@ export interface ChartHost {
 export interface HostDeps {
     root: HTMLElement;
     state: ChartState;
+    draw: DrawController;
     events: Emitter<ChartEvents>;
     invalidate(layer: 'main' | 'overlay'): void;
     invalidateAll(): void;

package/dist/host.js

@@ -6,6 +6,7 @@ export function createHost(d) {
     return {
         root: d.root,
         state: s,
+        draw: d.draw,
         setCrosshair(pos) {
             if (d.isDestroyed())
                 return;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export type { Candle, CandleStyle, Chart, ChartEvents, ChartLabels, ChartOptions, ChartTheme, ChartType, Marker, PriceLine, Time, } from './core/types.ts';
+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.1.0";
+export declare const VERSION = "zuttora-charts@0.3.0";

package/dist/index.js

@@ -2,4 +2,4 @@ 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';
+export const VERSION = 'zuttora-charts@0.3.0';

package/dist/interact/attach.js

@@ -15,7 +15,9 @@ export function attachInteraction(host) {
                 return 'outside';
             if (y >= l.timeTop)
                 return 'time';
-            return x < l.plotRight ? 'plot' : 'axis';
+            if (x >= l.plotRight)
+                return y < l.mainTop + l.mainHeight ? 'axis' : 'outside';
+            return 'plot';
         },
         panBy(dx) {
             s.vp.panBy(dx);
@@ -50,7 +52,8 @@ export function attachInteraction(host) {
         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))) {
+        const input = local(e);
+        if (host.draw.down(input) || gestures.down(input)) {
             try {
                 root.setPointerCapture(e.pointerId);
             }
@@ -59,16 +62,27 @@ export function attachInteraction(host) {
             root.focus({ preventScroll: true });
         }
     };
-    const onMove = (e) => gestures.move(local(e));
+    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) => {
-        gestures.up(local(e));
+        const input = local(e);
+        if (!host.draw.up(input))
+            gestures.up(input);
         try {
             root.releasePointerCapture(e.pointerId);
         }
         catch {
         }
     };
-    const onCancel = (e) => gestures.cancel(local(e));
+    const onCancel = (e) => {
+        host.draw.cancel(local(e));
+        gestures.cancel(local(e));
+    };
     const onLeave = (e) => {
         if (e.pointerType !== 'touch')
             gestures.leave();
@@ -84,19 +98,20 @@ export function attachInteraction(host) {
             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,
-        });
+        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();

package/dist/render/drawCrosshair.js

@@ -1,11 +1,14 @@
 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;
@@ -13,7 +16,7 @@ export function drawCrosshair(ctx, f, c) {
     ctx.strokeStyle = theme.crosshair;
     ctx.moveTo(x, layout.mainTop);
     ctx.lineTo(x, layout.timeTop);
-    if (inMain) {
+    if (guide) {
         ctx.moveTo(layout.plotLeft, y);
         ctx.lineTo(layout.plotRight, y);
     }
@@ -22,11 +25,11 @@ export function drawCrosshair(ctx, f, c) {
     ctx.font = f.font;
     ctx.textBaseline = 'middle';
     ctx.fillStyle = theme.accent;
-    if (inMain) {
+    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(f.scale.priceAt(c.y)), layout.plotRight + TAG_PAD_X, Math.round(c.y));
+        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;

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/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/drawMain.js

@@ -2,22 +2,35 @@ 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;

package/dist/render/drawSubPanes.d.ts

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

package/dist/render/drawSubPanes.js

@@ -0,0 +1,104 @@
+import { priceFormatter } from "../core/format.js";
+import { indicatorTitle } from "../core/indicators.js";
+import { bodyWidth } from "./drawCandles.js";
+import { tracePath } from "./drawIndicators.js";
+import { TAG_PAD_X } from "./frame.js";
+import { RSI_GUIDES, subTicks, subY } from "./indicatorFrame.js";
+const HIST_ALPHA = 0.55;
+function drawRsi(ctx, f, p, from, to) {
+    const { layout } = f;
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.setLineDash([3, 3]);
+    for (const g of RSI_GUIDES) {
+        const y = Math.round(subY(p, g)) + 0.5;
+        ctx.moveTo(layout.plotLeft, y);
+        ctx.lineTo(layout.plotRight, y);
+    }
+    ctx.strokeStyle = f.theme.textMuted;
+    ctx.globalAlpha = 0.5;
+    ctx.stroke();
+    ctx.globalAlpha = 1;
+    ctx.setLineDash([]);
+    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = p.entry.spec.color;
+    tracePath(ctx, f, p.entry.calc.lines.rsi, from, to, (v) => subY(p, v));
+    ctx.stroke();
+}
+function drawMacd(ctx, f, p, from, to) {
+    const spec = p.entry.spec;
+    if (spec.type !== 'macd')
+        return;
+    const l = p.entry.calc.lines;
+    const zero = Math.round(subY(p, 0));
+    const bw = bodyWidth(f.vp.barSpacing);
+    const half = (bw - 1) / 2;
+    ctx.globalAlpha = HIST_ALPHA;
+    for (const up of [true, false]) {
+        ctx.beginPath();
+        for (let i = from; i <= to; i++) {
+            const h = l.hist[i];
+            if (h === null || h === undefined || h >= 0 !== up)
+                continue;
+            const y = Math.round(subY(p, h));
+            ctx.rect(Math.round(f.vp.x(i)) - half, Math.min(y, zero), bw, Math.max(1, Math.abs(y - zero)));
+        }
+        ctx.fillStyle = up ? f.theme.up : f.theme.down;
+        ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.moveTo(f.layout.plotLeft, zero + 0.5);
+    ctx.lineTo(f.layout.plotRight, zero + 0.5);
+    ctx.strokeStyle = f.theme.grid;
+    ctx.stroke();
+    ctx.lineWidth = 1.5;
+    for (const [values, color] of [
+        [l.macd, spec.color],
+        [l.signal, spec.signalColor],
+    ]) {
+        ctx.strokeStyle = color;
+        tracePath(ctx, f, values, from, to, (v) => subY(p, v));
+        ctx.stroke();
+    }
+}
+export function drawSubPanes(ctx, f) {
+    const r = f.vp.visibleRange();
+    const { layout, theme } = f;
+    for (const p of f.subs) {
+        ctx.beginPath();
+        ctx.lineWidth = 1;
+        ctx.moveTo(0, p.top + 0.5);
+        ctx.lineTo(layout.width, p.top + 0.5);
+        ctx.strokeStyle = theme.grid;
+        ctx.stroke();
+        if (r) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(layout.plotLeft, p.top + 1, layout.plotRight - layout.plotLeft, p.height - 1);
+            ctx.clip();
+            const from = Math.max(0, r.from - 1);
+            const to = Math.min(f.series.lastIndex(), r.to + 1);
+            if (p.entry.spec.type === 'rsi')
+                drawRsi(ctx, f, p, from, to);
+            else
+                drawMacd(ctx, f, p, from, to);
+            ctx.restore();
+        }
+        ctx.font = f.font;
+        ctx.fillStyle = theme.textMuted;
+        ctx.textBaseline = 'top';
+        ctx.textAlign = 'left';
+        ctx.fillText(indicatorTitle(p.entry.spec), 8, p.top + 4);
+        ctx.fillStyle = theme.text;
+        ctx.textBaseline = 'middle';
+        const fmt = p.entry.spec.type === 'rsi' ? priceFormatter(0, 'en-IN') : f.fmt;
+        for (const v of subTicks(p, 2)) {
+            const y = subY(p, v);
+            if (y < p.top + 8 || y > p.top + p.height - 8)
+                continue;
+            ctx.fillText(fmt(v), layout.plotRight + TAG_PAD_X, Math.round(y));
+        }
+    }
+}

package/dist/render/frame.d.ts

@@ -3,6 +3,8 @@ 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';
+import type { IndicatorEntry } from '../core/indicatorSet.ts';
+import type { SubPane } from './indicatorFrame.ts';
 export type Ctx = CanvasRenderingContext2D;
 export interface Ohlc {
     o: number;
@@ -42,6 +44,8 @@ export interface Frame {
     timeLabels: TimeLabel[];
     lines: readonly PriceLine[];
     markers: readonly Marker[];
+    overlays: readonly IndicatorEntry[];
+    subs: readonly SubPane[];
     fmt: (v: number) => string;
     font: string;
     noDataText: string;

package/dist/render/frameBuilder.js

@@ -3,6 +3,7 @@ import { priceFormatter } from "../core/format.js";
 import { INTERVAL_MS } from "../core/time.js";
 import { pickTimeLabels } from "../core/timeLabels.js";
 import { fontOf } from "./frame.js";
+import { buildSubPanes, mainExtremes } from "./indicatorFrame.js";
 import { computeLayout } from "./layout.js";
 export const RANGE_TWEEN_MS = 150;
 export const CLOSE_TWEEN_MS = 180;
@@ -38,7 +39,7 @@ export function buildFrame(s, ctx, animNow) {
     const theme = o.theme;
     const reduced = o.reducedMotion;
     const font = fontOf(theme);
-    const layout = computeLayout(s.width, s.height, s.axisWidth, 0);
+    const layout = computeLayout(s.width, s.height, s.axisWidth, s.indicators.subCount);
     s.vp.setPlot(layout.plotLeft, layout.plotRight);
     s.scale.setPane(layout.mainTop, layout.mainHeight);
     let animating = false;
@@ -54,12 +55,19 @@ export function buildFrame(s, ctx, animNow) {
     if (s.closeTween.active(animNow))
         animating = true;
     const vis = s.vp.visibleRange();
+    const overlays = s.indicators.main();
     if (s.scale.manual) {
         s.rangeMin.jump(s.scale.min);
         s.rangeMax.jump(s.scale.max);
     }
     else if (vis) {
-        const target = autoRange(extremes(src, vis.from, vis.to), [], s.lines, o.minMove);
+        const bars = extremes(src, vis.from, vis.to);
+        const ind = mainExtremes(overlays, vis.from, vis.to);
+        if (ind) {
+            bars.min = Math.min(bars.min, ind.min);
+            bars.max = Math.max(bars.max, ind.max);
+        }
+        const target = autoRange(bars, [], s.lines, o.minMove);
         if (!s.rangeReady || reduced) {
             s.rangeMin.jump(target.min);
             s.rangeMax.jump(target.max);
@@ -109,6 +117,8 @@ export function buildFrame(s, ctx, animNow) {
         timeLabels,
         lines: s.lines,
         markers: s.markers,
+        overlays,
+        subs: vis ? buildSubPanes(s.indicators.subs(), layout, vis.from, vis.to) : [],
         fmt,
         font,
         noDataText: o.labels.noData,