@livo-build/charts 0.2.1 → 0.2.3

package/dist/core/renderer.js

@@ -1,5 +1,120 @@
-import { formatValue, formatTime } from "./format";
-import { computeIndicator, INDICATOR_PALETTE } from "./indicators";
+import { formatAxisValue, formatTime, formatValue } from "./format";
+import { computeIndicator, sourceValues, bollingerBands, INDICATOR_PALETTE, rsi, macd, stochastic, atr, volumeProfile } from "./indicators";
+import { heikinAshi } from "./ohlc";
+/** Standard Fibonacci retracement ratios (0 and 1 are the anchors themselves). */
+const FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+/**
+ * Width of one candle slot (px). By default the slot is capped at `maxBarWidth` and the
+ * series is right-anchored — sparse data stays tight in the corner. With `fitContent`,
+ * the cap is dropped so `count` candles spread across the whole plot (fills the
+ * container). Dense series are identical either way (plotW/count < maxBarWidth).
+ */
+export function slotWidth(plotW, count, maxBarWidth, fitContent = false) {
+    const raw = plotW / Math.max(count, 1);
+    return fitContent ? raw : Math.min(raw, maxBarWidth);
+}
+/** Convert a `#rrggbb` color to `rgba(...)` with the given alpha (passes other formats through). */
+export function withAlpha(color, alpha) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(color);
+    if (!m)
+        return color;
+    const n = parseInt(m[1], 16);
+    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
+}
+/** The visible candle window (which slice is on screen and the per-candle slot width).
+ *  A negative `view.offset` scrolls past the newest candle into the future: `end` exceeds
+ *  the data length and `rightGap` counts the empty slots between the newest candle and the
+ *  right edge (so the user can pull the current price left of the edge / toward center). */
+export function windowOf(candles, view, plotW, maxBarWidth, fitContent = false) {
+    const count = Math.min(view.count, candles.length);
+    const end = candles.length - view.offset; // virtual right edge (may exceed length when offset < 0)
+    const start = Math.max(0, end - count);
+    const vis = candles.slice(start, Math.min(candles.length, end));
+    const rightGap = Math.max(0, end - candles.length); // empty slots to the right of the newest candle
+    return { start, end, vis, n: vis.length, count, rightGap, cw: slotWidth(plotW, count, maxBarWidth, fitContent) };
+}
+/**
+ * Price ↔ pixel mapping for the price pane, shared by the renderer and the drawing-tool
+ * hit-testing so they never drift. Handles the log transform and the padded/zoomed range.
+ */
+export function priceScale(vis, yZoom, logScale, top, priceH) {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const c of vis) {
+        lo = Math.min(lo, c.l);
+        hi = Math.max(hi, c.h);
+    }
+    const log = !!logScale && lo > 0;
+    // In log mode, clamp the forward input to a tiny positive epsilon so an arbitrary drawing
+    // anchor or crosshair price ≤ 0 yields a finite (off-screen) y instead of NaN/-Infinity.
+    const fwd = (v) => (log ? Math.log10(v > 0 ? v : 1e-12) : v);
+    const inv = (s) => (log ? 10 ** s : s);
+    let sLo = fwd(lo);
+    let sHi = fwd(hi);
+    const sMid = (sLo + sHi) / 2;
+    const sHalf = (((sHi - sLo) / 2 || Math.abs(sHi) * 0.1 || 1) * 1.08) / yZoom;
+    sLo = sMid - sHalf;
+    sHi = sMid + sHalf;
+    const sRng = sHi - sLo || 1;
+    const yOfPrice = (v) => top + priceH * (1 - (fwd(v) - sLo) / sRng);
+    const priceOfY = (y) => inv(sLo + sRng * (1 - (y - top) / priceH));
+    return { yOfPrice, priceOfY, fwd, inv, sLo, sRng, lo, hi };
+}
+/** Time ↔ pixel mapping for the visible window (candle index and arbitrary unix-second time).
+ *  `rightGap` (empty future slots, see windowOf) shifts the candles left of the right edge. */
+export function timeScale(vis, n, cw, plotW, interval, rightGap = 0) {
+    const xOf = (j) => plotW - (rightGap + n - 1 - j) * cw - cw / 2;
+    const t0 = n ? vis[0].time : 0;
+    const iv = interval || 1;
+    const xOfTime = (t) => xOf((t - t0) / iv);
+    const timeOfX = (x) => t0 + ((x - xOf(0)) / cw) * iv;
+    return { xOf, xOfTime, timeOfX };
+}
+/** Compute the {@link Projection} for interaction/hit-testing without rendering. */
+export function computeProjection(input) {
+    const { view, pads, width, maxBarWidth, volH, height, yZoom, interval } = input;
+    // The visible price axis is the Heikin-Ashi range in `heikin` mode, so map against it.
+    // Prefer the controller's precomputed series; derive only for standalone callers.
+    const candles = input.priceCandles ?? (input.type === "heikin" ? heikinAshi(input.candles) : input.candles);
+    if (!candles.length)
+        return null;
+    const plotW = width - pads.right;
+    const panesH = (input.oscillators ?? []).map((o) => Math.max(24, o.height ?? 84)).reduce((a, b) => a + b, 0);
+    const priceH = height - pads.bottom - pads.top - volH - panesH;
+    const { vis, n, cw, rightGap } = windowOf(candles, view, plotW, maxBarWidth, input.fitContent);
+    const ts = timeScale(vis, n, cw, plotW, interval, rightGap);
+    const ps = priceScale(vis, yZoom, !!input.logScale, pads.top, priceH);
+    return {
+        xOfTime: ts.xOfTime,
+        timeOfX: ts.timeOfX,
+        yOfPrice: ps.yOfPrice,
+        priceOfY: ps.priceOfY,
+        plotW,
+        priceTop: pads.top,
+        priceBottom: pads.top + priceH,
+    };
+}
+/**
+ * Resolve indicator configs into drawable overlay lines. Moving averages / VWAP map 1:1;
+ * a `bollinger` indicator expands into three lines (upper / mid / lower), the bands faint.
+ * Shared by the Chart controller (precompute) and `draw` (standalone callers).
+ */
+export function resolveOverlays(candles, indicators) {
+    const out = [];
+    indicators.forEach((ind, i) => {
+        const color = ind.color || INDICATOR_PALETTE[i % INDICATOR_PALETTE.length];
+        if (ind.type === "bollinger") {
+            const { upper, mid, lower } = bollingerBands(sourceValues(candles, ind.source), ind.period, ind.mult ?? 2);
+            out.push({ color: withAlpha(color, 0.45), values: upper });
+            out.push({ color, values: mid });
+            out.push({ color: withAlpha(color, 0.45), values: lower });
+        }
+        else {
+            out.push({ color, values: computeIndicator(candles, ind) });
+        }
+    });
+    return out;
+}
 /**
  * Pure draw pass: renders grid, axes, the price series (candles or line), a volume
  * panel, the last-price tag and the crosshair + axis labels. Returns the candle under
@@ -9,7 +124,13 @@ import { computeIndicator, INDICATOR_PALETTE } from "./indicators";
 export function draw(input) {
     const { ctx, width: w, height: H, candles, view, hover, interval, type, yZoom, maxBarWidth, volH, theme, pads } = input;
     const plotW = w - pads.right;
-    const priceH = H - pads.bottom - pads.top - volH;
+    // Oscillator sub-panes stack below the volume panel; each eats into the price pane.
+    const oscs = input.oscillators ?? [];
+    const paneHs = oscs.map((o) => Math.max(24, o.height ?? 84));
+    const panesH = paneHs.reduce((a, b) => a + b, 0);
+    const priceH = H - pads.bottom - pads.top - volH - panesH;
+    // bottom of the plotting area (above the time-axis gutter) — vertical lines span to here.
+    const chartBot = pads.top + priceH + volH + panesH;
     if (theme.background) {
         ctx.fillStyle = theme.background;
         ctx.fillRect(0, 0, w, H);
@@ -17,79 +138,122 @@ export function draw(input) {
     else {
         ctx.clearRect(0, 0, w, H);
     }
-    ctx.font = "10px ui-monospace, monospace";
+    ctx.font = input.axisFont ?? "10px ui-monospace, monospace";
     ctx.textBaseline = "middle";
+    let fmtTime = input.timeFormat ?? formatTime;
+    // Snap 1px strokes to the pixel grid so gridlines/axes render crisp, not blurred across 2px.
+    const crisp = (v) => Math.round(v) + 0.5;
     if (!candles.length) {
-        ctx.fillStyle = theme.axis;
-        ctx.textAlign = "center";
-        ctx.fillText("no priced trades yet", plotW / 2, H / 2);
+        const msg = input.emptyText ?? "no priced trades yet";
+        if (msg) {
+            ctx.fillStyle = theme.axis;
+            ctx.textAlign = "center";
+            ctx.fillText(msg, plotW / 2, H / 2);
+        }
         return null;
     }
-    const count = Math.min(view.count, candles.length);
-    const end = candles.length - view.offset;
-    const start = Math.max(0, end - count);
-    const vis = candles.slice(start, end);
-    const n = vis.length;
-    // Cap the slot width and right-anchor — a few candles cluster on the right with empty
-    // space on the left (TradingView-style) rather than stretching across the whole plot.
-    const cw = Math.min(plotW / Math.max(count, 1), maxBarWidth);
-    const xOf = (j) => plotW - (n - 1 - j) * cw - cw / 2;
-    let lo = Infinity;
-    let hi = -Infinity;
+    // Slot width fills the plot by default (`fitContent`, on by default in the wrappers and
+    // the core Chart) so sparse data spreads out instead of bunching on the right; the candle
+    // BODY is capped separately (`maxBodyWidth`) below. fitContent:false caps the slot at
+    // `maxBarWidth` and right-anchors (the tight, TradingView-style look).
+    // The price series + axis use Heikin-Ashi candles in `heikin` mode (same times/volumes,
+    // smoothed OHLC); indicators/oscillators still read the RAW closes (`candles`) below.
+    // The controller precomputes this on data/type change (it's O(n)); derive only standalone.
+    const priceCandles = input.priceCandles ?? (type === "heikin" ? heikinAshi(candles) : candles);
+    const { start, vis, n, cw, rightGap } = windowOf(priceCandles, view, plotW, maxBarWidth, input.fitContent);
+    const { xOf, xOfTime } = timeScale(vis, n, cw, plotW, interval, rightGap);
+    // When sub-daily candles span more than a day, time-only labels read as out-of-order across
+    // midnight — include the date (M/D h:m) so the axis stays chronological & legible.
+    if (!input.timeFormat && n > 1 && vis[n - 1].time - vis[0].time > 86400 && interval < 86400) {
+        fmtTime = (t) => formatTime(t, 3600);
+    }
     let vmax = 0;
-    for (const c of vis) {
-        lo = Math.min(lo, c.l);
-        hi = Math.max(hi, c.h);
+    for (const c of vis)
         vmax = Math.max(vmax, c.vol);
-    }
-    const mid = (lo + hi) / 2;
-    const half = ((((hi - lo) / 2) || Math.abs(hi) * 0.1 || 1) * 1.08) / yZoom;
-    lo = mid - half;
-    hi = mid + half;
-    const rng = hi - lo || 1;
     vmax = vmax || 1;
-    const yOf = (v) => pads.top + priceH * (1 - (v - lo) / rng);
+    // Price↔pixel mapping (log-aware, padded, zoomed). Shared with drawing-tool hit-testing.
+    const { yOfPrice: yOf, priceOfY, inv, sLo, sRng } = priceScale(vis, yZoom, !!input.logScale, pads.top, priceH);
     const volBot = pads.top + priceH + volH;
     const vy = (vol) => volBot - (vol / vmax) * volH * 0.92;
-    // grid + price axis (right gutter)
+    // grid + price axis (right gutter). Labels are formatted with enough precision to stay
+    // distinct (the compact "K" formatter alone collapses a narrow high-value axis into dupes).
+    const pTicks = Math.max(1, Math.round(input.priceTicks ?? 5));
+    const tickVals = [];
+    for (let i = 0; i <= pTicks; i++)
+        tickVals.push(inv(sLo + (sRng * i) / pTicks));
+    const priceStep = Math.abs(tickVals[pTicks] - tickVals[0]) / pTicks;
+    const fmtPrice = input.priceFormat ?? ((v) => formatAxisValue(v, priceStep));
     ctx.strokeStyle = theme.grid;
     ctx.fillStyle = theme.axis;
     ctx.lineWidth = 1;
     ctx.textAlign = "left";
-    for (let i = 0; i <= 5; i++) {
-        const v = lo + (rng * i) / 5;
-        const y = yOf(v);
+    for (let i = 0; i <= pTicks; i++) {
+        const y = pads.top + priceH * (1 - i / pTicks);
         ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(plotW, y);
+        ctx.moveTo(0, crisp(y));
+        ctx.lineTo(plotW, crisp(y));
         ctx.stroke();
-        ctx.fillText(formatValue(v), plotW + 6, y);
+        // local gap (not the average) sets precision — log ticks bunch up at the low end,
+        // and the bottom labels need more decimals than the top ones to stay distinct.
+        const local = input.priceFormat ? 0 : Math.abs((tickVals[i + 1] ?? tickVals[i - 1]) - tickVals[i]) || priceStep;
+        ctx.fillText(input.priceFormat ? fmtPrice(tickVals[i]) : formatAxisValue(tickVals[i], local), plotW + 6, y);
     }
     // time axis (bottom gutter), anchored to the latest candle
     ctx.textAlign = "center";
-    const step = Math.max(1, Math.floor(n / 7));
+    const step = Math.max(1, Math.floor(n / Math.max(1, Math.round(input.timeTicks ?? 7))));
     for (let j = n - 1; j >= 0; j -= step) {
         const x = xOf(j);
         ctx.strokeStyle = theme.grid;
         ctx.beginPath();
-        ctx.moveTo(x, pads.top);
-        ctx.lineTo(x, volBot);
+        ctx.moveTo(crisp(x), pads.top);
+        ctx.lineTo(crisp(x), chartBot);
         ctx.stroke();
         ctx.fillStyle = theme.axis;
-        ctx.fillText(formatTime(vis[j].time, interval), x, H - pads.bottom / 2);
+        ctx.fillText(fmtTime(vis[j].time, interval), x, H - pads.bottom / 2);
     }
-    const bw = Math.max(1, Math.min(cw * 0.7, 14));
-    // volume panel
-    for (let j = 0; j < n; j++) {
-        const c = vis[j];
-        const x = xOf(j);
-        ctx.fillStyle = c.c >= c.o ? theme.volUp : theme.volDown;
-        ctx.fillRect(x - bw / 2, vy(c.vol), bw, volBot - vy(c.vol));
+    const bw = Math.max(1, Math.min(cw * 0.7, input.maxBodyWidth ?? 40));
+    // volume panel (muted bars on a baseline), only when there's a panel to draw
+    if (volH > 0) {
+        const volTop = pads.top + priceH;
+        for (let j = 0; j < n; j++) {
+            const c = vis[j];
+            const x = xOf(j);
+            ctx.fillStyle = c.c >= c.o ? theme.volUp : theme.volDown;
+            ctx.fillRect(x - bw / 2, vy(c.vol), bw, volBot - vy(c.vol));
+        }
+        // faint separator between the price pane and the volume panel
+        ctx.strokeStyle = theme.grid;
+        ctx.beginPath();
+        ctx.moveTo(0, crisp(volTop));
+        ctx.lineTo(plotW, crisp(volTop));
+        ctx.stroke();
+    }
+    // oscillator sub-panes (RSI / MACD), stacked below the volume panel
+    let paneTop = volBot;
+    for (let p = 0; p < oscs.length; p++) {
+        drawPane(ctx, oscs[p], paneHs[p], paneTop, { candles, start, n, xOf, bw, plotW, theme });
+        paneTop += paneHs[p];
     }
     // price series
     if (type === "line") {
+        const priceBot = pads.top + priceH;
+        // soft gradient area fill under the line — the "premium" line-chart look
+        if (n > 1 && ctx.createLinearGradient) {
+            const grad = ctx.createLinearGradient(0, pads.top, 0, priceBot);
+            grad.addColorStop(0, withAlpha(theme.line, 0.22));
+            grad.addColorStop(1, withAlpha(theme.line, 0));
+            ctx.fillStyle = grad;
+            ctx.beginPath();
+            ctx.moveTo(xOf(0), priceBot);
+            for (let j = 0; j < n; j++)
+                ctx.lineTo(xOf(j), yOf(vis[j].c));
+            ctx.lineTo(xOf(n - 1), priceBot);
+            ctx.closePath();
+            ctx.fill();
+        }
         ctx.strokeStyle = theme.line;
-        ctx.lineWidth = 1.5;
+        ctx.lineWidth = 2;
+        ctx.lineJoin = "round";
         ctx.beginPath();
         for (let j = 0; j < n; j++) {
             const x = xOf(j);
@@ -102,6 +266,51 @@ export function draw(input) {
         ctx.stroke();
         ctx.lineWidth = 1;
     }
+    else if (type === "baseline") {
+        // Two-tone area around a reference price: above the baseline is "up", below is "down".
+        const priceBot = pads.top + priceH;
+        const baseP = input.baselinePrice ?? vis[0].c;
+        const by = Math.max(pads.top, Math.min(priceBot, yOf(baseP)));
+        const pts = [];
+        for (let j = 0; j < n; j++)
+            pts.push({ x: xOf(j), y: yOf(vis[j].c) });
+        const area = (color, clipTop, clipH) => {
+            if (clipH <= 0)
+                return;
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(0, clipTop, plotW, clipH);
+            ctx.clip();
+            // faint filled body…
+            ctx.fillStyle = withAlpha(color, 0.16);
+            ctx.beginPath();
+            ctx.moveTo(pts[0].x, by);
+            for (const p of pts)
+                ctx.lineTo(p.x, p.y);
+            ctx.lineTo(pts[n - 1].x, by);
+            ctx.closePath();
+            ctx.fill();
+            // …with a solid line on top (clipped to this side of the baseline)
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 2;
+            ctx.lineJoin = "round";
+            ctx.beginPath();
+            for (let j = 0; j < n; j++)
+                (j ? ctx.lineTo(pts[j].x, pts[j].y) : ctx.moveTo(pts[j].x, pts[j].y));
+            ctx.stroke();
+            ctx.restore();
+        };
+        area(theme.up, pads.top, by - pads.top);
+        area(theme.down, by, priceBot - by);
+        ctx.strokeStyle = theme.grid;
+        ctx.setLineDash([4, 4]);
+        ctx.beginPath();
+        ctx.moveTo(0, crisp(by));
+        ctx.lineTo(plotW, crisp(by));
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.lineWidth = 1;
+    }
     else {
         for (let j = 0; j < n; j++) {
             const c = vis[j];
@@ -118,15 +327,30 @@ export function draw(input) {
             ctx.fillRect(x - bw / 2, Math.min(yo, yc), bw, Math.max(1, Math.abs(yc - yo)));
         }
     }
+    // volume-by-price histogram — translucent bars grown leftward from the right gutter,
+    // peaked at the Point of Control. Computed over the visible window so it tracks zoom/pan.
+    if (input.volumeProfile) {
+        const cfg = typeof input.volumeProfile === "object" ? input.volumeProfile : {};
+        const vp = volumeProfile(vis, cfg.buckets ?? 24);
+        const maxW = (cfg.width ?? 0.16) * plotW;
+        const color = cfg.color ?? withAlpha(theme.axis, 0.22);
+        for (const b of vp.buckets) {
+            if (b.vol <= 0)
+                continue;
+            const yTop = yOf(b.hi);
+            const yBot = yOf(b.lo);
+            const bh = Math.max(1, yBot - yTop - 1);
+            const wpx = (b.vol / vp.maxVol) * maxW;
+            // the Point-of-Control band gets a slightly stronger tint
+            ctx.fillStyle = Math.abs((b.lo + b.hi) / 2 - vp.poc) < (b.hi - b.lo) / 2 ? withAlpha(theme.line, 0.32) : color;
+            ctx.fillRect(plotW - wpx, yTop, wpx, bh);
+        }
+    }
     // indicator overlays (moving averages) — drawn from precomputed value-series when
     // supplied (the Chart controller precomputes them on data change), else computed
     // here from the indicator config for pure/standalone callers. Series align to the
     // FULL candle array, so the left edge of the view is correct.
-    const overlays = input.overlays ??
-        (input.indicators ?? []).map((ind, ii) => ({
-            color: ind.color || INDICATOR_PALETTE[ii % INDICATOR_PALETTE.length],
-            values: computeIndicator(candles, ind),
-        }));
+    const overlays = input.overlays ?? resolveOverlays(candles, input.indicators ?? []);
     if (overlays.length) {
         ctx.lineWidth = 1.3;
         for (const ov of overlays) {
@@ -152,46 +376,61 @@ export function draw(input) {
         }
         ctx.lineWidth = 1;
     }
+    // user drawings (trendlines / horizontal lines), clipped to the price pane
+    const drawings = input.drawings ?? [];
+    if (drawings.length || input.drawPreview) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, pads.top, plotW, priceH);
+        ctx.clip();
+        for (const d of drawings)
+            drawDrawing(ctx, d, xOfTime, yOf, plotW, theme, d.id === input.selectedDrawing);
+        if (input.drawPreview)
+            drawDrawing(ctx, input.drawPreview, xOfTime, yOf, plotW, theme, false);
+        ctx.restore();
+    }
     // last-price line + tag
     const last = vis[n - 1];
     const ly = yOf(last.c);
     const lc = last.c >= last.o ? theme.up : theme.down;
     ctx.strokeStyle = lc;
-    ctx.setLineDash([2, 2]);
+    ctx.setLineDash([3, 3]);
     ctx.beginPath();
-    ctx.moveTo(0, ly);
-    ctx.lineTo(plotW, ly);
+    ctx.moveTo(0, crisp(ly));
+    ctx.lineTo(plotW, crisp(ly));
     ctx.stroke();
     ctx.setLineDash([]);
     ctx.fillStyle = lc;
     ctx.fillRect(plotW, ly - 8, pads.right, 16);
     ctx.fillStyle = theme.tagText;
     ctx.textAlign = "left";
-    ctx.fillText(formatValue(last.c), plotW + 6, ly);
-    // crosshair + axis labels
-    let active = last;
+    ctx.fillText(fmtPrice(last.c), plotW + 6, ly);
+    // crosshair + axis labels. `active` is the candle returned to onCrosshair — always the
+    // RAW candle (real OHLC), even in heikin mode where the drawn body is smoothed.
+    let active = candles[start + n - 1];
     if (hover && hover.x < plotW && hover.y > 0 && hover.y < H - pads.bottom) {
-        const idx = Math.max(0, Math.min(n - 1, Math.round((hover.x - (plotW - (n - 1) * cw - cw / 2)) / cw)));
-        active = vis[idx];
+        // invert xOf (which now accounts for rightGap whitespace); clamp into the data range.
+        const idx = Math.max(0, Math.min(n - 1, Math.round((hover.x - xOf(0)) / cw)));
+        active = candles[start + idx];
         const cx = xOf(idx);
         ctx.strokeStyle = theme.crosshair;
         ctx.setLineDash([3, 3]);
         ctx.beginPath();
         ctx.moveTo(cx, pads.top);
-        ctx.lineTo(cx, volBot);
+        ctx.lineTo(cx, chartBot);
         ctx.moveTo(0, hover.y);
         ctx.lineTo(plotW, hover.y);
         ctx.stroke();
         ctx.setLineDash([]);
         if (hover.y < pads.top + priceH) {
-            const pv = lo + rng * (1 - (hover.y - pads.top) / priceH);
+            const pv = priceOfY(hover.y);
             ctx.fillStyle = theme.axisTagBg;
             ctx.fillRect(plotW, hover.y - 8, pads.right, 16);
             ctx.fillStyle = theme.axisTagText;
             ctx.textAlign = "left";
-            ctx.fillText(formatValue(pv), plotW + 6, hover.y);
+            ctx.fillText(fmtPrice(pv), plotW + 6, hover.y);
         }
-        const tl = formatTime(active.time, interval);
+        const tl = fmtTime(active.time, interval);
         const tw = ctx.measureText(tl).width + 12;
         ctx.fillStyle = theme.axisTagBg;
         ctx.fillRect(cx - tw / 2, H - pads.bottom, tw, pads.bottom);
@@ -201,3 +440,234 @@ export function draw(input) {
     }
     return active;
 }
+/** Render one drawing (and its selection handles) using the current frame's projection. */
+function drawDrawing(ctx, d, xOfTime, yOfPrice, plotW, theme, selected) {
+    const color = d.color ?? theme.line;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = selected ? 2.5 : 1.5;
+    const pts = [];
+    if (d.type === "fib" && d.b) {
+        // Retracement levels between the two anchor prices; lines extend to the right edge.
+        const ax = xOfTime(d.a.time);
+        const bx = xOfTime(d.b.time);
+        const xL = Math.min(ax, bx);
+        const p0 = d.a.price;
+        const p1 = d.b.price;
+        ctx.textAlign = "left";
+        for (const r of FIB_LEVELS) {
+            const price = p0 + (p1 - p0) * r;
+            const y = yOfPrice(price);
+            ctx.strokeStyle = withAlpha(color, r === 0 || r === 1 ? 0.9 : 0.55);
+            ctx.beginPath();
+            ctx.moveTo(xL, y);
+            ctx.lineTo(plotW, y);
+            ctx.stroke();
+            ctx.fillStyle = withAlpha(color, 0.95);
+            ctx.fillText(`${(r * 100).toFixed(1)}%  ${formatValue(price)}`, xL + 4, y - 6);
+        }
+        pts.push({ x: ax, y: yOfPrice(p0) }, { x: bx, y: yOfPrice(p1) });
+    }
+    else if (d.type === "rect" && d.b) {
+        const ax = xOfTime(d.a.time);
+        const ay = yOfPrice(d.a.price);
+        const bx = xOfTime(d.b.time);
+        const by = yOfPrice(d.b.price);
+        const x = Math.min(ax, bx);
+        const y = Math.min(ay, by);
+        const w = Math.abs(bx - ax);
+        const h = Math.abs(by - ay);
+        ctx.fillStyle = withAlpha(color, 0.12);
+        ctx.fillRect(x, y, w, h);
+        ctx.strokeStyle = color;
+        ctx.strokeRect(x, y, w, h);
+        pts.push({ x: ax, y: ay }, { x: bx, y: by });
+    }
+    else {
+        ctx.beginPath();
+        if (d.type === "hline") {
+            const y = yOfPrice(d.a.price);
+            ctx.moveTo(0, y);
+            ctx.lineTo(plotW, y);
+            pts.push({ x: plotW / 2, y });
+        }
+        else if (d.b) {
+            const ax = xOfTime(d.a.time);
+            const ay = yOfPrice(d.a.price);
+            const bx = xOfTime(d.b.time);
+            const by = yOfPrice(d.b.price);
+            ctx.moveTo(ax, ay);
+            ctx.lineTo(bx, by);
+            pts.push({ x: ax, y: ay }, { x: bx, y: by });
+        }
+        ctx.stroke();
+    }
+    if (selected) {
+        ctx.fillStyle = color;
+        for (const p of pts)
+            ctx.fillRect(p.x - 3, p.y - 3, 6, 6);
+    }
+    ctx.lineWidth = 1;
+}
+/** Default oscillator colors. */
+const OSC_COLORS = { rsi: "#ab47bc", macdLine: "#2962ff", macdSignal: "#ff9800", stochK: "#2962ff", stochD: "#ff9800", atr: "#26a69a" };
+/** Last non-null value of a series (for the pane's inline readout). */
+function lastDefined(s) {
+    for (let i = s.length - 1; i >= 0; i--)
+        if (s[i] != null)
+            return s[i];
+    return null;
+}
+/** Stroke a value-series across the visible window, lifting the pen across null gaps. */
+function strokeSeries(ctx, series, env, yOf, color) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.3;
+    ctx.beginPath();
+    let pen = false;
+    for (let j = 0; j < env.n; j++) {
+        const v = series[env.start + j];
+        if (v == null) {
+            pen = false;
+            continue;
+        }
+        const x = env.xOf(j);
+        const y = yOf(v);
+        if (pen)
+            ctx.lineTo(x, y);
+        else {
+            ctx.moveTo(x, y);
+            pen = true;
+        }
+    }
+    ctx.stroke();
+    ctx.lineWidth = 1;
+}
+/**
+ * Render one oscillator sub-pane (RSI band or MACD) in the horizontal strip [top, top+paneH].
+ * Closes are read from the FULL candle array so values at the left edge of the view are correct.
+ */
+function drawPane(ctx, osc, paneH, top, env) {
+    const { candles, start, n, xOf, bw, plotW, theme } = env;
+    const closes = candles.map((c) => c.c);
+    const padY = 8;
+    const innerTop = top + padY;
+    const innerH = Math.max(1, paneH - padY * 2);
+    // separator rule at the pane's top edge
+    ctx.strokeStyle = theme.grid;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, top);
+    ctx.lineTo(plotW, top);
+    ctx.stroke();
+    ctx.textAlign = "left";
+    if (osc.type === "rsi") {
+        const period = osc.period ?? 14;
+        const series = rsi(closes, period);
+        const yOf = (v) => innerTop + innerH * (1 - v / 100);
+        // 70 / 30 guide rails
+        ctx.setLineDash([2, 3]);
+        for (const lvl of [70, 30]) {
+            const y = yOf(lvl);
+            ctx.strokeStyle = theme.grid;
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(plotW, y);
+            ctx.stroke();
+            ctx.fillStyle = theme.axis;
+            ctx.fillText(String(lvl), plotW + 6, y);
+        }
+        ctx.setLineDash([]);
+        strokeSeries(ctx, series, env, yOf, osc.color ?? OSC_COLORS.rsi);
+        const lv = lastDefined(series);
+        ctx.fillStyle = theme.axis;
+        ctx.fillText(`RSI ${period}${lv != null ? "  " + lv.toFixed(1) : ""}`, 6, top + padY);
+        return;
+    }
+    if (osc.type === "stoch") {
+        const kP = osc.period ?? 14;
+        const dP = osc.dPeriod ?? 3;
+        const sm = osc.smooth ?? 1;
+        const { k, d } = stochastic(candles, kP, dP, sm);
+        const yOf = (v) => innerTop + innerH * (1 - v / 100);
+        // 80 / 20 guide rails
+        ctx.setLineDash([2, 3]);
+        for (const lvl of [80, 20]) {
+            const y = yOf(lvl);
+            ctx.strokeStyle = theme.grid;
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(plotW, y);
+            ctx.stroke();
+            ctx.fillStyle = theme.axis;
+            ctx.fillText(String(lvl), plotW + 6, y);
+        }
+        ctx.setLineDash([]);
+        strokeSeries(ctx, k, env, yOf, osc.color ?? OSC_COLORS.stochK);
+        strokeSeries(ctx, d, env, yOf, OSC_COLORS.stochD);
+        const lv = lastDefined(k);
+        ctx.fillStyle = theme.axis;
+        ctx.fillText(`STOCH ${kP} ${dP}${lv != null ? "  " + lv.toFixed(1) : ""}`, 6, top + padY);
+        return;
+    }
+    if (osc.type === "atr") {
+        const period = osc.period ?? 14;
+        const series = atr(candles, period);
+        // auto-scale to the visible ATR range (price units, always ≥ 0)
+        let lo = Infinity;
+        let hi = -Infinity;
+        for (let j = 0; j < n; j++) {
+            const v = series[start + j];
+            if (v != null) {
+                lo = Math.min(lo, v);
+                hi = Math.max(hi, v);
+            }
+        }
+        if (!isFinite(lo)) {
+            lo = 0;
+            hi = 1;
+        }
+        const padR = (hi - lo) * 0.1 || hi * 0.1 || 1;
+        lo = Math.max(0, lo - padR);
+        hi += padR;
+        const rng = hi - lo || 1;
+        const yOf = (v) => innerTop + innerH * (1 - (v - lo) / rng);
+        strokeSeries(ctx, series, env, yOf, osc.color ?? OSC_COLORS.atr);
+        const lv = lastDefined(series);
+        ctx.fillStyle = theme.axis;
+        ctx.fillText(`ATR ${period}${lv != null ? "  " + formatValue(lv) : ""}`, 6, top + padY);
+        return;
+    }
+    // MACD: histogram + macd line + signal line, symmetric around zero
+    const fast = osc.fast ?? 12;
+    const slow = osc.slow ?? 26;
+    const signal = osc.signal ?? 9;
+    const { macd: line, signal: sig, hist } = macd(closes, fast, slow, signal);
+    let absMax = 0;
+    for (let j = 0; j < n; j++) {
+        for (const s of [line, sig, hist]) {
+            const v = s[start + j];
+            if (v != null)
+                absMax = Math.max(absMax, Math.abs(v));
+        }
+    }
+    absMax = absMax || 1;
+    const yOf = (v) => innerTop + innerH * (1 - (v + absMax) / (2 * absMax));
+    const zy = yOf(0);
+    ctx.strokeStyle = theme.grid;
+    ctx.beginPath();
+    ctx.moveTo(0, zy);
+    ctx.lineTo(plotW, zy);
+    ctx.stroke();
+    for (let j = 0; j < n; j++) {
+        const v = hist[start + j];
+        if (v == null)
+            continue;
+        const x = xOf(j);
+        const y = yOf(v);
+        ctx.fillStyle = v >= 0 ? theme.volUp : theme.volDown;
+        ctx.fillRect(x - bw / 2, Math.min(y, zy), bw, Math.max(1, Math.abs(y - zy)));
+    }
+    strokeSeries(ctx, line, env, yOf, osc.color ?? OSC_COLORS.macdLine);
+    strokeSeries(ctx, sig, env, yOf, OSC_COLORS.macdSignal);
+    ctx.fillStyle = theme.axis;
+    ctx.fillText(`MACD ${fast} ${slow} ${signal}`, 6, top + padY);
+}