@livo-build/charts 0.2.1 → 0.2.2

package/dist/core/chart.js

@@ -1,11 +1,20 @@
 import { DEFAULT_THEME } from "./theme";
-import { draw } from "./renderer";
-import { computeIndicator, INDICATOR_PALETTE } from "./indicators";
+import { computeProjection, draw, resolveOverlays, slotWidth } from "./renderer";
+let drawingSeq = 0;
+const nextDrawingId = () => `d${++drawingSeq}`;
+/** Pixel distance from point P to segment A–B (for drawing hit-testing). */
+function distToSeg(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const len2 = dx * dx + dy * dy;
+    const t = len2 ? Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / len2)) : 0;
+    return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+}
 const DEFAULTS = {
     height: 420,
     initialBars: 120,
     minBars: 20,
-    maxBarWidth: 18,
+    maxBarWidth: 26, // max candle SLOT width when fitContent is off (tight, right-anchored)
     volumeRatio: 0.18,
     rightPad: 66,
     bottomPad: 22,
@@ -33,10 +42,21 @@ export class Chart {
         this.container = container;
         this.candles = [];
         this.indicators = [];
+        this.oscillators = [];
+        this.drawings = [];
+        this.drawMode = "none";
+        this.selectedDrawing = null;
+        /** in-progress trendline (drag from anchor A to B). */
+        this.draftDrawing = null;
+        /** active move of an existing drawing: its id + the data-space grab anchor + originals. */
+        this.drawingDrag = null;
         /** Indicator values precomputed on data/indicator change (not per frame). */
         this.overlays = [];
         this.interval = 300;
         this.type = "candle";
+        this.showVolume = true;
+        this.logScale = false;
+        this.fitContent = true;
         /** requestAnimationFrame handle coalescing high-frequency redraws (0 = none queued). */
         this.raf = 0;
         this.historyReqLen = -1;
@@ -45,6 +65,8 @@ export class Chart {
         this.yZoom = 1;
         this.hover = null;
         this.drag = null;
+        /** two-finger pinch baseline: finger spreads + view at gesture start. */
+        this.pinch = null;
         this.lastActive = null;
         this.onWheel = (e) => {
             e.preventDefault();
@@ -59,8 +81,39 @@ export class Chart {
         };
         this.onDown = (e) => {
             const r = this.canvas.getBoundingClientRect();
+            const x = e.clientX - r.left;
+            const y = e.clientY - r.top;
+            const proj = this.projection();
+            if (proj && this.region(x, y) === "plot") {
+                if (this.drawMode === "hline") {
+                    const d = { id: nextDrawingId(), type: "hline", a: { time: proj.timeOfX(x), price: proj.priceOfY(y) } };
+                    this.drawings = [...this.drawings, d];
+                    this.selectedDrawing = d.id;
+                    this.emitDrawings();
+                    this.exitDrawMode();
+                    this.render();
+                    return;
+                }
+                if (this.drawMode === "trendline") {
+                    const p = { time: proj.timeOfX(x), price: proj.priceOfY(y) };
+                    this.draftDrawing = { id: nextDrawingId(), type: "trendline", a: p, b: { ...p } };
+                    this.render();
+                    return;
+                }
+                const hit = this.hitTest(x, y, proj);
+                if (hit) {
+                    this.selectedDrawing = hit.id;
+                    this.drawingDrag = { id: hit.id, grabT: proj.timeOfX(x), grabP: proj.priceOfY(y), a: { ...hit.a }, b: hit.b ? { ...hit.b } : undefined };
+                    this.render();
+                    return;
+                }
+                if (this.selectedDrawing) {
+                    this.selectedDrawing = null;
+                    this.render();
+                }
+            }
             this.drag = {
-                reg: this.region(e.clientX - r.left, e.clientY - r.top),
+                reg: this.region(x, y),
                 x: e.clientX,
                 y: e.clientY,
                 offset: this.view.offset,
@@ -70,42 +123,140 @@ export class Chart {
         };
         this.onMove = (e) => {
             const r = this.canvas.getBoundingClientRect();
-            const d = this.drag;
-            if (d) {
-                if (d.reg === "y") {
-                    this.yZoom = Math.min(50, Math.max(0.2, d.yZoom * Math.exp(-(e.clientY - d.y) / 160)));
-                }
-                else if (d.reg === "x") {
-                    const n = this.candles.length;
-                    this.view = { ...this.view, count: Math.min(Math.max(this.minBars, Math.round(d.count * Math.exp((e.clientX - d.x) / 260))), Math.max(this.minBars, n)) };
-                }
-                else {
-                    const cw = Math.min(this.plotW / Math.max(Math.min(this.view.count, this.candles.length || 1), 1), this.maxBarWidth);
-                    const offset = Math.max(0, Math.min(this.candles.length - this.minBars, d.offset + Math.round((e.clientX - d.x) / cw)));
-                    this.view = { ...this.view, offset };
-                }
-                this.canvas.style.cursor = "grabbing";
+            const x = e.clientX - r.left;
+            const y = e.clientY - r.top;
+            if (this.draftDrawing) {
+                const proj = this.projection();
+                if (proj)
+                    this.draftDrawing = { ...this.draftDrawing, b: { time: proj.timeOfX(x), price: proj.priceOfY(y) } };
+                this.hover = { x, y };
+                this.scheduleRender();
+                return;
             }
-            this.hover = { x: e.clientX - r.left, y: e.clientY - r.top };
+            if (this.drawingDrag) {
+                const proj = this.projection();
+                if (proj)
+                    this.applyDrawingDrag(x, y, proj);
+                this.hover = { x, y };
+                this.scheduleRender();
+                return;
+            }
+            if (this.applyDrag(e.clientX, e.clientY))
+                this.canvas.style.cursor = "grabbing";
+            this.hover = { x, y };
             this.scheduleRender();
         };
         this.onUp = () => {
+            if (this.draftDrawing) {
+                const d = this.draftDrawing;
+                this.draftDrawing = null;
+                // commit only a real drag — a click without movement is discarded
+                if (d.b && (d.a.time !== d.b.time || d.a.price !== d.b.price)) {
+                    this.drawings = [...this.drawings, d];
+                    this.selectedDrawing = d.id;
+                    this.emitDrawings();
+                }
+                this.exitDrawMode();
+                this.render();
+                return;
+            }
+            if (this.drawingDrag) {
+                this.drawingDrag = null;
+                this.emitDrawings();
+            }
             this.drag = null;
-            this.canvas.style.cursor = "crosshair";
+            this.canvas.style.cursor = this.drawMode === "none" ? "crosshair" : "copy";
         };
         this.onLeave = () => {
             this.drag = null;
+            if (this.drawingDrag) {
+                this.drawingDrag = null;
+                this.emitDrawings();
+            }
+            this.draftDrawing = null;
             this.hover = null;
-            this.canvas.style.cursor = "crosshair";
+            this.canvas.style.cursor = this.drawMode === "none" ? "crosshair" : "copy";
             this.scheduleRender();
         };
-        this.onDouble = () => {
+        this.onDouble = (e) => {
+            const r = this.canvas.getBoundingClientRect();
+            const proj = this.projection();
+            if (proj) {
+                const hit = this.hitTest(e.clientX - r.left, e.clientY - r.top, proj);
+                if (hit) {
+                    this.removeDrawing(hit.id);
+                    return;
+                }
+            }
             this.resetView();
         };
+        // ---- touch: one finger pans / axis-zooms (like the mouse), two fingers pinch-zoom ----
+        this.onTouchStart = (e) => {
+            const r = this.canvas.getBoundingClientRect();
+            if (e.touches.length >= 2) {
+                const [a, b] = [e.touches[0], e.touches[1]];
+                this.drag = null;
+                this.pinch = {
+                    dx: Math.abs(a.clientX - b.clientX) || 1,
+                    dy: Math.abs(a.clientY - b.clientY) || 1,
+                    cx: (a.clientX + b.clientX) / 2 - r.left,
+                    count: this.view.count,
+                    offset: this.view.offset,
+                    yZoom: this.yZoom,
+                };
+            }
+            else if (e.touches.length === 1) {
+                const t = e.touches[0];
+                const x = t.clientX - r.left;
+                const y = t.clientY - r.top;
+                this.pinch = null;
+                this.drag = { reg: this.region(x, y), x: t.clientX, y: t.clientY, offset: this.view.offset, count: this.view.count, yZoom: this.yZoom };
+                this.hover = { x, y };
+            }
+            e.preventDefault();
+            this.scheduleRender();
+        };
+        this.onTouchMove = (e) => {
+            const r = this.canvas.getBoundingClientRect();
+            if (this.pinch && e.touches.length >= 2) {
+                const [a, b] = [e.touches[0], e.touches[1]];
+                const dx = Math.abs(a.clientX - b.clientX) || 1;
+                const dy = Math.abs(a.clientY - b.clientY) || 1;
+                // Reset to the gesture baseline, then apply an anchored time-zoom by the horizontal
+                // spread ratio (spread wider → fewer candles) and a price-zoom by the vertical ratio.
+                this.view = { count: this.pinch.count, offset: this.pinch.offset };
+                this.zoomTimeAt(this.pinch.cx, this.pinch.dx / dx);
+                this.yZoom = Math.min(50, Math.max(0.2, this.pinch.yZoom * (dy / this.pinch.dy)));
+            }
+            else if (this.drag && e.touches.length === 1) {
+                const t = e.touches[0];
+                this.applyDrag(t.clientX, t.clientY);
+                this.hover = { x: t.clientX - r.left, y: t.clientY - r.top };
+            }
+            e.preventDefault();
+            this.scheduleRender();
+        };
+        this.onTouchEnd = (e) => {
+            if (e.touches.length === 0) {
+                this.drag = null;
+                this.pinch = null;
+                this.hover = null;
+            }
+            else if (e.touches.length === 1) {
+                // dropped from two fingers to one — restart a pan from the remaining finger.
+                this.pinch = null;
+                const r = this.canvas.getBoundingClientRect();
+                const t = e.touches[0];
+                this.drag = { reg: this.region(t.clientX - r.left, t.clientY - r.top), x: t.clientX, y: t.clientY, offset: this.view.offset, count: this.view.count, yZoom: this.yZoom };
+            }
+            this.scheduleRender();
+        };
         this.theme = { ...DEFAULT_THEME, ...(opts.theme || {}) };
         this.height = opts.height ?? DEFAULTS.height;
         this.minBars = opts.minBars ?? DEFAULTS.minBars;
         this.maxBarWidth = opts.maxBarWidth ?? DEFAULTS.maxBarWidth;
+        this.maxBodyWidth = opts.maxBodyWidth;
+        this.showVolume = opts.showVolume ?? true;
         this.volumeRatio = opts.volumeRatio ?? DEFAULTS.volumeRatio;
         this.onCrosshair = opts.onCrosshair;
         this.pads = {
@@ -115,6 +266,17 @@ export class Chart {
         };
         this.view = { count: opts.initialBars ?? DEFAULTS.initialBars, offset: 0 };
         this.indicators = opts.indicators ?? [];
+        this.oscillators = opts.oscillators ?? [];
+        this.drawings = opts.drawings ?? [];
+        this.onDrawingsChange = opts.onDrawingsChange;
+        this.onDrawModeChange = opts.onDrawModeChange;
+        this.logScale = opts.logScale ?? false;
+        this.fitContent = opts.fitContent ?? true;
+        this.priceFormat = opts.priceFormat;
+        this.timeFormat = opts.timeFormat;
+        this.priceTicks = opts.priceTicks;
+        this.timeTicks = opts.timeTicks;
+        this.axisFont = opts.axisFont;
         this.onNeedHistory = opts.onNeedHistory;
         const doc = container.ownerDocument;
         this.canvas = doc.createElement("canvas");
@@ -131,6 +293,10 @@ export class Chart {
         this.canvas.addEventListener("mouseup", this.onUp);
         this.canvas.addEventListener("mouseleave", this.onLeave);
         this.canvas.addEventListener("dblclick", this.onDouble);
+        this.canvas.addEventListener("touchstart", this.onTouchStart, { passive: false });
+        this.canvas.addEventListener("touchmove", this.onTouchMove, { passive: false });
+        this.canvas.addEventListener("touchend", this.onTouchEnd);
+        this.canvas.style.touchAction = "none";
         this.ro = new ResizeObserver(() => this.measure());
         this.ro.observe(container);
         this.measure();
@@ -152,12 +318,103 @@ export class Chart {
         this.render();
         return this;
     }
+    /** Show or hide the volume panel (the price pane reclaims the space when hidden). */
+    setShowVolume(on) {
+        this.showVolume = on;
+        this.render();
+        return this;
+    }
+    /** Toggle the logarithmic price axis (equal pixels = equal % move). */
+    setLogScale(on) {
+        this.logScale = on;
+        this.render();
+        return this;
+    }
+    /** Style the axes: fill-vs-tight candle spacing, custom price/time label formatters,
+     *  tick counts, and the label font. Only the provided keys change. */
+    setAxis(opts) {
+        if (opts.fitContent !== undefined)
+            this.fitContent = opts.fitContent;
+        if (opts.priceFormat !== undefined)
+            this.priceFormat = opts.priceFormat;
+        if (opts.timeFormat !== undefined)
+            this.timeFormat = opts.timeFormat;
+        if (opts.priceTicks !== undefined)
+            this.priceTicks = opts.priceTicks;
+        if (opts.timeTicks !== undefined)
+            this.timeTicks = opts.timeTicks;
+        if (opts.axisFont !== undefined)
+            this.axisFont = opts.axisFont;
+        if (opts.maxBarWidth !== undefined)
+            this.maxBarWidth = opts.maxBarWidth;
+        if (opts.maxBodyWidth !== undefined)
+            this.maxBodyWidth = opts.maxBodyWidth;
+        this.render();
+        return this;
+    }
     setIndicators(indicators) {
         this.indicators = indicators;
         this.recomputeOverlays();
         this.render();
         return this;
     }
+    /** Set the oscillator sub-panes (RSI / MACD) drawn below the volume panel. */
+    setOscillators(oscillators) {
+        this.oscillators = oscillators;
+        this.render();
+        return this;
+    }
+    /** Arm a drawing tool ("trendline" / "hline"), or "none" for pan/zoom + select/move.
+     *  Drawing tools are one-shot: after one drawing the mode auto-resets to "none". */
+    setDrawMode(mode) {
+        this.drawMode = mode;
+        this.canvas.style.cursor = mode === "none" ? "crosshair" : "copy";
+        return this;
+    }
+    /** Replace all drawings (does not fire onDrawingsChange). */
+    setDrawings(drawings) {
+        this.drawings = drawings;
+        this.selectedDrawing = null;
+        this.render();
+        return this;
+    }
+    /** Current drawings (a copy). */
+    getDrawings() {
+        return this.drawings.map((d) => ({ ...d }));
+    }
+    /** Remove a drawing by id. */
+    removeDrawing(id) {
+        this.drawings = this.drawings.filter((d) => d.id !== id);
+        if (this.selectedDrawing === id)
+            this.selectedDrawing = null;
+        this.emitDrawings();
+        this.render();
+        return this;
+    }
+    /** Remove the currently selected drawing, if any. */
+    deleteSelected() {
+        if (this.selectedDrawing)
+            this.removeDrawing(this.selectedDrawing);
+        return this;
+    }
+    /** Remove all drawings. */
+    clearDrawings() {
+        if (!this.drawings.length)
+            return this;
+        this.drawings = [];
+        this.selectedDrawing = null;
+        this.emitDrawings();
+        this.render();
+        return this;
+    }
+    emitDrawings() {
+        this.onDrawingsChange?.(this.getDrawings());
+    }
+    exitDrawMode() {
+        this.drawMode = "none";
+        this.canvas.style.cursor = "crosshair";
+        this.onDrawModeChange?.("none");
+    }
     /** Register a callback fired when the user pans/zooms near the start of loaded data
      *  (so a feed can lazily load older candles). See connectFeed. */
     setNeedHistory(cb) {
@@ -189,12 +446,17 @@ export class Chart {
         this.canvas.removeEventListener("mouseup", this.onUp);
         this.canvas.removeEventListener("mouseleave", this.onLeave);
         this.canvas.removeEventListener("dblclick", this.onDouble);
+        this.canvas.removeEventListener("touchstart", this.onTouchStart);
+        this.canvas.removeEventListener("touchmove", this.onTouchMove);
+        this.canvas.removeEventListener("touchend", this.onTouchEnd);
         this.ro.disconnect();
         if (this.raf)
             this.container.ownerDocument.defaultView?.cancelAnimationFrame(this.raf);
         this.canvas.remove();
     }
     get volH() {
+        if (!this.showVolume)
+            return 0;
         return Math.round((this.height - this.pads.bottom - this.pads.top) * this.volumeRatio);
     }
     get plotW() {
@@ -216,10 +478,9 @@ export class Chart {
         const offset = Math.min(Math.max(0, this.view.offset), Math.max(0, n - this.minBars));
         this.view = { count, offset };
     }
-    render() {
-        if (!this.width)
-            return;
-        const active = draw({
+    /** Assemble the {@link RenderInput} from current state — shared by render() and projection(). */
+    buildInput() {
+        return {
             ctx: this.ctx,
             width: this.width,
             height: this.height,
@@ -230,11 +491,32 @@ export class Chart {
             type: this.type,
             yZoom: this.yZoom,
             maxBarWidth: this.maxBarWidth,
+            maxBodyWidth: this.maxBodyWidth,
             volH: this.volH,
             theme: this.theme,
             pads: this.pads,
             overlays: this.overlays,
-        });
+            oscillators: this.oscillators,
+            drawings: this.drawings,
+            drawPreview: this.draftDrawing,
+            selectedDrawing: this.selectedDrawing,
+            logScale: this.logScale,
+            fitContent: this.fitContent,
+            priceFormat: this.priceFormat,
+            timeFormat: this.timeFormat,
+            priceTicks: this.priceTicks,
+            timeTicks: this.timeTicks,
+            axisFont: this.axisFont,
+        };
+    }
+    /** Pixel↔data projection for the current frame (null when there are no candles). */
+    projection() {
+        return computeProjection(this.buildInput());
+    }
+    render() {
+        if (!this.width)
+            return;
+        const active = draw(this.buildInput());
         if (this.onCrosshair && active !== this.lastActive) {
             this.lastActive = active;
             this.onCrosshair(active);
@@ -257,10 +539,7 @@ export class Chart {
     }
     /** Recompute indicator value-series once when data or config changes (not per frame). */
     recomputeOverlays() {
-        this.overlays = this.indicators.map((ind, i) => ({
-            color: ind.color || INDICATOR_PALETTE[i % INDICATOR_PALETTE.length],
-            values: computeIndicator(this.candles, ind),
-        }));
+        this.overlays = resolveOverlays(this.candles, this.indicators);
     }
     /** When the view nears the start of loaded data, ask the feed for older candles
      *  (once per data length, so it stops at the end of history). */
@@ -296,4 +575,56 @@ export class Chart {
         const offset = Math.max(0, Math.min(Math.max(0, n - this.minBars), n - startNew - nVisNew));
         this.view = { count, offset };
     }
+    /** Topmost drawing under the pointer (within tolerance), or null. */
+    hitTest(x, y, proj) {
+        const TOL = 6;
+        for (let i = this.drawings.length - 1; i >= 0; i--) {
+            const d = this.drawings[i];
+            if (d.type === "hline") {
+                if (Math.abs(y - proj.yOfPrice(d.a.price)) <= TOL)
+                    return d;
+            }
+            else if (d.b) {
+                const dist = distToSeg(x, y, proj.xOfTime(d.a.time), proj.yOfPrice(d.a.price), proj.xOfTime(d.b.time), proj.yOfPrice(d.b.price));
+                if (dist <= TOL)
+                    return d;
+            }
+        }
+        return null;
+    }
+    /** Translate the dragged drawing by the pointer's data-space delta from the grab anchor. */
+    applyDrawingDrag(x, y, proj) {
+        const dd = this.drawingDrag;
+        if (!dd)
+            return;
+        const dt = proj.timeOfX(x) - dd.grabT;
+        const dp = proj.priceOfY(y) - dd.grabP;
+        this.drawings = this.drawings.map((d) => d.id !== dd.id
+            ? d
+            : {
+                ...d,
+                a: { time: dd.a.time + dt, price: dd.a.price + dp },
+                b: dd.b ? { time: dd.b.time + dt, price: dd.b.price + dp } : undefined,
+            });
+    }
+    /** Apply an in-progress drag (pan or axis-zoom) from the current pointer position.
+     *  Shared by mouse-move and single-finger touch-move. Returns true if a drag is active. */
+    applyDrag(clientX, clientY) {
+        const d = this.drag;
+        if (!d)
+            return false;
+        if (d.reg === "y") {
+            this.yZoom = Math.min(50, Math.max(0.2, d.yZoom * Math.exp(-(clientY - d.y) / 160)));
+        }
+        else if (d.reg === "x") {
+            const n = this.candles.length;
+            this.view = { ...this.view, count: Math.min(Math.max(this.minBars, Math.round(d.count * Math.exp((clientX - d.x) / 260))), Math.max(this.minBars, n)) };
+        }
+        else {
+            const cw = slotWidth(this.plotW, Math.min(this.view.count, this.candles.length || 1), this.maxBarWidth, this.fitContent);
+            const offset = Math.max(0, Math.min(this.candles.length - this.minBars, d.offset + Math.round((clientX - d.x) / cw)));
+            this.view = { ...this.view, offset };
+        }
+        return true;
+    }
 }

package/dist/core/format.d.ts

@@ -1,5 +1,17 @@
-/** Compact value formatter: large numbers grouped (K/M/B), small numbers to significant digits. */
+/**
+ * Value formatter for price axes + OHLC readouts. M/B compaction only kicks in at
+ * a million — between $1k and $1M the FULL grouped number is shown (1,730 not the
+ * lossy "1.73K"), so adjacent axis gridlines and a candle's O/H/L/C stay
+ * distinguishable on mid-priced assets. Trailing zeros are dropped.
+ */
 export declare function formatValue(v: number): string;
+/**
+ * Axis value formatter that adapts decimal precision to the tick `step` so adjacent
+ * gridline labels stay distinct. The compact formatter rounds to 2 decimals (≈$10 at
+ * the "K" scale), which collapses a 1.71K–1.75K axis into duplicate "1.73K"s; passing
+ * the per-tick step keeps just enough digits to separate them (e.g. 1.7350K / 1.7430K).
+ */
+export declare function formatAxisValue(v: number, step?: number): string;
 /** Volume formatter with a leading `$`. */
 export declare function formatVolume(v: number): string;
 /** Axis time label whose granularity follows the bucket `interval` (seconds). */

package/dist/core/format.js

@@ -1,4 +1,9 @@
-/** Compact value formatter: large numbers grouped (K/M/B), small numbers to significant digits. */
+/**
+ * Value formatter for price axes + OHLC readouts. M/B compaction only kicks in at
+ * a million — between $1k and $1M the FULL grouped number is shown (1,730 not the
+ * lossy "1.73K"), so adjacent axis gridlines and a candle's O/H/L/C stay
+ * distinguishable on mid-priced assets. Trailing zeros are dropped.
+ */
 export function formatValue(v) {
     if (!isFinite(v))
         return "-";
@@ -8,13 +13,43 @@ export function formatValue(v) {
     if (a >= 1e6)
         return (v / 1e6).toFixed(2) + "M";
     if (a >= 1e3)
-        return (v / 1e3).toFixed(2) + "K";
+        return v.toLocaleString("en-US", { maximumFractionDigits: a >= 1e4 ? 0 : 2 });
     if (a >= 1)
-        return v.toFixed(2);
+        return v.toLocaleString("en-US", { maximumFractionDigits: a >= 100 ? 2 : 4 });
     if (a > 0)
         return v.toPrecision(4);
     return "0";
 }
+/**
+ * Axis value formatter that adapts decimal precision to the tick `step` so adjacent
+ * gridline labels stay distinct. The compact formatter rounds to 2 decimals (≈$10 at
+ * the "K" scale), which collapses a 1.71K–1.75K axis into duplicate "1.73K"s; passing
+ * the per-tick step keeps just enough digits to separate them (e.g. 1.7350K / 1.7430K).
+ */
+export function formatAxisValue(v, step = 0) {
+    if (!isFinite(v))
+        return "-";
+    const a = Math.abs(v);
+    let div = 1;
+    let suf = "";
+    if (a >= 1e9) {
+        div = 1e9;
+        suf = "B";
+    }
+    else if (a >= 1e6) {
+        div = 1e6;
+        suf = "M";
+    }
+    else if (a >= 1e3) {
+        div = 1e3;
+        suf = "K";
+    }
+    // decimals fine enough to tell two ticks `step` apart; floor at 1 for K/M/B, 2 otherwise.
+    const floor = div > 1 ? 1 : 2;
+    const s = Math.abs(step) / div;
+    const dec = s > 0 ? Math.max(floor === 2 ? 0 : floor, Math.min(8, Math.ceil(-Math.log10(s)))) : floor;
+    return (v / div).toFixed(dec) + suf;
+}
 /** Volume formatter with a leading `$`. */
 export function formatVolume(v) {
     const a = Math.abs(v);

package/dist/core/indicators.d.ts

@@ -30,6 +30,20 @@ export declare function bollingerBands(values: number[], period?: number, mult?:
     mid: (number | null)[];
     lower: (number | null)[];
 };
+/**
+ * Wilder's Relative Strength Index over `period` (default 14). Output aligned to input;
+ * null until `period` deltas are available. Bounded 0–100 (100 when there are no losses).
+ */
+export declare function rsi(values: number[], period?: number): (number | null)[];
+/**
+ * MACD: the difference of a `fast` and `slow` EMA, its `signal` EMA, and the histogram
+ * (macd − signal). Three series aligned to input; null until each EMA's window fills.
+ */
+export declare function macd(values: number[], fast?: number, slow?: number, signal?: number): {
+    macd: (number | null)[];
+    signal: (number | null)[];
+    hist: (number | null)[];
+};
 /** Pull a price series (default close) out of candles. */
 export declare function sourceValues(candles: Candle[], source?: PriceSource): number[];
 /** Compute an indicator's value series, aligned to `candles` (null where undefined). */

package/dist/core/indicators.js

@@ -93,6 +93,68 @@ export function bollingerBands(values, period = 20, mult = 2) {
     }
     return { upper, mid, lower };
 }
+/**
+ * Wilder's Relative Strength Index over `period` (default 14). Output aligned to input;
+ * null until `period` deltas are available. Bounded 0–100 (100 when there are no losses).
+ */
+export function rsi(values, period = 14) {
+    const out = new Array(values.length).fill(null);
+    if (!(period > 0) || values.length <= period)
+        return out;
+    let gain = 0;
+    let loss = 0;
+    for (let i = 1; i <= period; i++) {
+        const d = values[i] - values[i - 1];
+        if (d >= 0)
+            gain += d;
+        else
+            loss -= d;
+    }
+    let avgG = gain / period;
+    let avgL = loss / period;
+    out[period] = avgL === 0 ? 100 : 100 - 100 / (1 + avgG / avgL);
+    for (let i = period + 1; i < values.length; i++) {
+        const d = values[i] - values[i - 1];
+        avgG = (avgG * (period - 1) + (d > 0 ? d : 0)) / period;
+        avgL = (avgL * (period - 1) + (d < 0 ? -d : 0)) / period;
+        out[i] = avgL === 0 ? 100 : 100 - 100 / (1 + avgG / avgL);
+    }
+    return out;
+}
+/** EMA over a sparse series (nulls before the first value), seeded with the SMA of the
+ *  first `period` defined values. Used to take the signal EMA of the MACD line. */
+function emaNullable(series, period) {
+    const out = new Array(series.length).fill(null);
+    const start = series.findIndex((v) => v != null);
+    if (start < 0 || !(period > 0) || series.length - start < period)
+        return out;
+    const k = 2 / (period + 1);
+    let seed = 0;
+    for (let i = start; i < start + period; i++)
+        seed += series[i];
+    let prev = seed / period;
+    out[start + period - 1] = prev;
+    for (let i = start + period; i < series.length; i++) {
+        const v = series[i];
+        if (v == null)
+            continue;
+        prev = v * k + prev * (1 - k);
+        out[i] = prev;
+    }
+    return out;
+}
+/**
+ * MACD: the difference of a `fast` and `slow` EMA, its `signal` EMA, and the histogram
+ * (macd − signal). Three series aligned to input; null until each EMA's window fills.
+ */
+export function macd(values, fast = 12, slow = 26, signal = 9) {
+    const ef = ema(values, fast);
+    const es = ema(values, slow);
+    const line = values.map((_, i) => (ef[i] != null && es[i] != null ? ef[i] - es[i] : null));
+    const sig = emaNullable(line, signal);
+    const hist = line.map((m, i) => (m != null && sig[i] != null ? m - sig[i] : null));
+    return { macd: line, signal: sig, hist };
+}
 const SOURCE_KEY = { open: "o", high: "h", low: "l", close: "c" };
 /** Pull a price series (default close) out of candles. */
 export function sourceValues(candles, source = "close") {