@rioaxyz/sonrchart 0.1.0 → 0.2.0

package/dist/index.js

@@ -13665,14 +13665,26 @@ var SESSION_INDICATOR = "SONR_SESSION";
 var PATTERN_INDICATOR = "SONR_PATTERNS";
 var WATERMARK_INDICATOR = "SONR_WATERMARK";
 var SERIES_INDICATOR = "SONR_SERIES";
+var HALT_INDICATOR = "SONR_HALT";
 var VWAP_INDICATOR = "VWAP";
 var Z_ORDER = {
   watermark: -3,
   session: -2,
   series: -1,
   compare: 0,
-  pattern: 10
+  pattern: 10,
+  halt: 11
 };
+var DEFAULT_HALT_BADGE = { label: "Halt", color: "#2196f3", textColor: "#ffffff" };
+function normalizeHalt(prop) {
+  if (!prop) return null;
+  if (prop === true) return DEFAULT_HALT_BADGE;
+  return {
+    label: prop.label ?? DEFAULT_HALT_BADGE.label,
+    color: prop.color ?? DEFAULT_HALT_BADGE.color,
+    textColor: prop.textColor ?? DEFAULT_HALT_BADGE.textColor
+  };
+}
 var VWAP_COLOR = "#a970ff";
 function computeVWAP(dataList) {
   let day = Number.NaN;
@@ -13924,6 +13936,41 @@ function registerSonrIndicators() {
       return false;
     }
   });
+  registerIndicator({
+    name: HALT_INDICATOR,
+    shortName: "",
+    series: "price",
+    figures: [],
+    calc: (dataList) => dataList.map(() => ({})),
+    draw: ({ ctx, bounding, indicator }) => {
+      const cfg = indicator.extendData;
+      if (!cfg || !cfg.label) return false;
+      const padX = 8;
+      const h = 20;
+      const inset = 8;
+      ctx.save();
+      ctx.font = '600 11px ui-sans-serif, -apple-system, "Segoe UI", sans-serif';
+      const w = Math.ceil(ctx.measureText(cfg.label).width) + padX * 2;
+      const x = bounding.width - w - inset;
+      const y = (bounding.top ?? 0) + inset;
+      const r = h / 2;
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+      ctx.fillStyle = cfg.color;
+      ctx.fill();
+      ctx.fillStyle = cfg.textColor;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(cfg.label, x + w / 2, y + h / 2 + 0.5);
+      ctx.restore();
+      return false;
+    }
+  });
   registerIndicator({
     name: PATTERN_INDICATOR,
     shortName: "",
@@ -15276,6 +15323,25 @@ function formatWithUnit(text2, quote) {
   return out;
 }
 
+// src/volumeTrend.ts
+var DEFAULT_VOLUME_TREND_BARS = 3;
+function volumeTrend(list, endIndex, bars = DEFAULT_VOLUME_TREND_BARS) {
+  const n = Math.max(1, Math.floor(bars));
+  if (endIndex < n || endIndex >= list.length) return null;
+  let up = 0;
+  let down = 0;
+  for (let i = endIndex - n + 1; i <= endIndex; i++) {
+    const v = list[i]?.volume;
+    const pv = list[i - 1]?.volume;
+    if (typeof v !== "number" || typeof pv !== "number") return null;
+    if (v > pv) up++;
+    else if (v < pv) down++;
+  }
+  if (up === n) return "increasing";
+  if (down === n) return "decreasing";
+  return "mixed";
+}
+
 // src/SonrChart.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 registerSonrIndicators();
@@ -15285,7 +15351,7 @@ registerShapeOverlays();
 registerExtendedDrawings();
 registerTradeReview();
 registerTextOverlay();
-var INTERNAL_INDICATORS = /* @__PURE__ */ new Set([SESSION_INDICATOR, PATTERN_INDICATOR, COMPARE_INDICATOR, WATERMARK_INDICATOR, SERIES_INDICATOR]);
+var INTERNAL_INDICATORS = /* @__PURE__ */ new Set([SESSION_INDICATOR, PATTERN_INDICATOR, COMPARE_INDICATOR, WATERMARK_INDICATOR, SERIES_INDICATOR, HALT_INDICATOR]);
 var isUserIndicator = (name) => !INTERNAL_INDICATORS.has(name);
 function magnetMode(m) {
   if (m === true || m === "weak") return "weak_magnet";
@@ -15385,6 +15451,7 @@ var SonrChart = forwardRef(function SonrChart2({
   sessions: sessionsProp,
   watermark: watermarkProp,
   patterns,
+  halted,
   priceLines,
   orderLines,
   priceScale: priceScaleProp,
@@ -15502,14 +15569,22 @@ var SonrChart = forwardRef(function SonrChart2({
   const legendRef = useRef2(legend);
   legendRef.current = legend;
   const headerSubs = useRef2(/* @__PURE__ */ new Set());
+  const trendSubs = useRef2(/* @__PURE__ */ new Set());
+  const trendBarsRef = useRef2(DEFAULT_VOLUME_TREND_BARS);
+  const trendBarsSubs = useRef2(/* @__PURE__ */ new Set());
   const crosshairActiveRef = useRef2(false);
+  const headerIdxRef = useRef2(-1);
+  const emitHeaderAt = (list, idx) => {
+    headerIdxRef.current = idx;
+    const current = idx >= 0 ? list[idx] ?? null : null;
+    const prev = idx > 0 ? list[idx - 1] : null;
+    headerSubs.current.forEach((cb) => cb(current, prev));
+    trendSubs.current.forEach((s) => s.cb(volumeTrend(list, idx, s.bars ?? trendBarsRef.current)));
+  };
   const emitLatestHeader = () => {
     if (crosshairActiveRef.current) return;
     const list = chartRef.current?.getDataList() ?? [];
-    const n = list.length;
-    const current = n ? list[n - 1] : null;
-    const prev = n > 1 ? list[n - 2] : null;
-    headerSubs.current.forEach((cb) => cb(current, prev));
+    emitHeaderAt(list, list.length - 1);
   };
   const haRef = useRef2(new HaTransformer());
   const [textEdit, setTextEdit] = useState(null);
@@ -15777,6 +15852,30 @@ var SonrChart = forwardRef(function SonrChart2({
         const n = list.length;
         cb(n ? list[n - 1] : null, n > 1 ? list[n - 2] : null);
         return () => headerSubs.current.delete(cb);
+      },
+      // Volume trend (#79) ---------------------------------------------------
+      subscribeVolumeTrend: (cb, bars) => {
+        const sub = { bars: bars === void 0 ? void 0 : Math.max(1, Math.floor(bars)), cb };
+        trendSubs.current.add(sub);
+        const list = chartRef.current?.getDataList() ?? [];
+        cb(volumeTrend(list, list.length - 1, sub.bars ?? trendBarsRef.current));
+        return () => trendSubs.current.delete(sub);
+      },
+      getVolumeTrendBars: () => trendBarsRef.current,
+      setVolumeTrendBars: (bars) => {
+        const n = Math.max(1, Math.floor(bars));
+        if (!Number.isFinite(n) || n === trendBarsRef.current) return;
+        trendBarsRef.current = n;
+        const list = chartRef.current?.getDataList() ?? [];
+        const idx = crosshairActiveRef.current ? headerIdxRef.current : list.length - 1;
+        trendSubs.current.forEach((s) => {
+          if (s.bars === void 0) s.cb(volumeTrend(list, idx, n));
+        });
+        trendBarsSubs.current.forEach((cb) => cb(n));
+      },
+      subscribeVolumeTrendBars: (cb) => {
+        trendBarsSubs.current.add(cb);
+        return () => trendBarsSubs.current.delete(cb);
       }
     },
     // paneHeights/priceScale captured by closure; recreated per render is fine.
@@ -15840,16 +15939,29 @@ var SonrChart = forwardRef(function SonrChart2({
     chart.setStyles(mergeStyles(themeStyleObj, styles2));
     chart.subscribeAction("onCrosshairChange", (d) => {
       const cross = d;
-      const k = cross?.kLineData;
-      if (k && typeof cross?.dataIndex === "number") {
+      const list = chart.getDataList();
+      let k = cross?.kLineData ?? null;
+      let idx = typeof cross?.dataIndex === "number" ? cross.dataIndex : -1;
+      if (!k && typeof cross?.x === "number" && list.length > 0) {
+        const [p] = chart.convertFromPixel([{ x: cross.x }], { paneId: CANDLE_PANE });
+        if (typeof p?.dataIndex === "number") {
+          idx = Math.max(0, Math.min(p.dataIndex, list.length - 1));
+          k = list[idx] ?? null;
+        }
+      }
+      if (k && idx >= 0) {
         crosshairActiveRef.current = true;
-        const list = chart.getDataList();
-        headerSubs.current.forEach((cb) => cb(k, cross.dataIndex > 0 ? list[cross.dataIndex - 1] : null));
+        emitHeaderAt(list, idx);
       } else {
         crosshairActiveRef.current = false;
         emitLatestHeader();
       }
     });
+    const onPointerLeave = () => {
+      crosshairActiveRef.current = false;
+      emitLatestHeader();
+    };
+    el.addEventListener("mouseleave", onPointerLeave);
     applyCandleStyle(chart, candleStyleRef.current, themeStyleObj, baseTheme);
     applyPriceLabels(chart, priceLabelsRef.current);
     applyFormatter(chart);
@@ -15959,6 +16071,7 @@ var SonrChart = forwardRef(function SonrChart2({
     return () => {
       disposed = true;
       unsub();
+      el.removeEventListener("mouseleave", onPointerLeave);
       dispose(idRef.current);
       chartRef.current = null;
       overlayIds.current = [];
@@ -16030,6 +16143,19 @@ var SonrChart = forwardRef(function SonrChart2({
       chart.removeIndicator({ name: PATTERN_INDICATOR });
     }
   }, [patterns, chartEpoch]);
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    const present = chart.getIndicators({ name: HALT_INDICATOR }).length > 0;
+    const badge = normalizeHalt(halted);
+    if (badge && !present) {
+      chart.createIndicator({ name: HALT_INDICATOR, paneId: CANDLE_PANE, zLevel: Z_ORDER.halt, extendData: badge }, true);
+    } else if (badge && present) {
+      chart.overrideIndicator({ name: HALT_INDICATOR, extendData: badge });
+    } else if (!badge && present) {
+      chart.removeIndicator({ name: HALT_INDICATOR });
+    }
+  }, [halted, chartEpoch]);
   useEffect(() => {
     const chart = chartRef.current;
     if (!chart) return;
@@ -16283,7 +16409,7 @@ var CSS = `
 :where(.sonr-mkt-handle){position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #22a06b;transform:translate(-50%,-50%);}
 :where(.sonr-mkt-ticks){grid-column:2;display:flex;justify-content:space-between;font-size:10px;color:#888;}
 :where(.sonr-mkt-tz){margin-top:12px;font-size:11px;color:#888;text-align:center;}
-:where(.sonr-hd){display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-size:12px;color:#000;white-space:nowrap;}
+:where(.sonr-hd){display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:inherit;font-size:12px;color:#000;white-space:nowrap;}
 :where(.sonr-hd-sym){font-weight:700;color:#000;}
 :where(.sonr-hd-ohlc){display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;}
 :where(.sonr-hd-cell){display:inline-flex;align-items:baseline;gap:3px;}
@@ -16291,6 +16417,8 @@ var CSS = `
 :where(.sonr-hd-v){color:#555;}
 :where(.sonr-hd-up){color:#22a06b;}
 :where(.sonr-hd-down){color:#d23c3c;}
+:where(.sonr-hd-trend){flex-basis:100%;display:inline-flex;align-items:baseline;gap:4px;margin-top:2px;}
+:where(.sonr-hd-mixed){color:#c98a1b;}
 :where(.sonr-brand){position:absolute;z-index:3;pointer-events:none;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:0.02em;color:#000;user-select:none;line-height:1;}
 :where(.sonr-brand-img){display:block;}
 :where(.sonr-brand-link){pointer-events:auto;color:inherit;text-decoration:none;}
@@ -16466,6 +16594,10 @@ var DEFAULT_LABELS = {
   zoomIn: "Zoom in",
   fitContent: "Fit all data",
   goToRealtime: "Go to realtime",
+  volumeTrend: "Vol trend",
+  volumeTrendIncreasing: "Increasing",
+  volumeTrendDecreasing: "Decreasing",
+  volumeTrendMixed: "Mixed",
   marketPre: "Pre-market",
   marketOpen: "Open",
   marketAfter: "After-hours",
@@ -17984,6 +18116,7 @@ function SettingsModal({
   const [indicators2, setIndicators] = useState11([]);
   const [indColors, setIndColors] = useState11({});
   const [indParams, setIndParams] = useState11({});
+  const [trendBars, setTrendBars] = useState11(DEFAULT_VOLUME_TREND_BARS);
   const [watermark, setWatermark] = useState11({ symbol: true, interval: true, color: "#e6ebe9", opacity: 0.06 });
   const [brushStyles, setBrushStyles] = useState11({
     brush: { color: "#e6ebe9", size: 2 },
@@ -18018,6 +18151,8 @@ function SettingsModal({
       }
     }
     setIndParams(params);
+    setTrendBars(chartRef.current?.getVolumeTrendBars?.() ?? DEFAULT_VOLUME_TREND_BARS);
+    const unsubTrendBars = chartRef.current?.subscribeVolumeTrendBars?.(setTrendBars);
     const readWm = () => {
       const w = chartRef.current?.getWatermark?.();
       if (w) setWatermark(w);
@@ -18060,6 +18195,7 @@ function SettingsModal({
     document.addEventListener("keydown", onKey);
     return () => {
       document.removeEventListener("keydown", onKey);
+      unsubTrendBars?.();
       unsubWm?.();
       unsubBrush?.();
       unsubText?.();
@@ -18168,6 +18304,25 @@ function SettingsModal({
             ) })
           ] }),
           section === "indicators" && /* @__PURE__ */ jsxs14(Fragment4, { children: [
+            /* @__PURE__ */ jsx15("div", { className: "sonr-set-subhead", children: L.volumeTrend }),
+            /* @__PURE__ */ jsx15(Row, { label: "Bars (lookback)", children: /* @__PURE__ */ jsx15(
+              "input",
+              {
+                type: "number",
+                className: "sonr-set-num",
+                min: "1",
+                max: "100",
+                value: trendBars,
+                onChange: (e) => {
+                  const v = e.target.valueAsNumber;
+                  if (Number.isNaN(v)) return;
+                  const n = Math.max(1, Math.min(100, Math.floor(v)));
+                  setTrendBars(n);
+                  chartRef.current?.setVolumeTrendBars?.(n);
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx15("div", { className: "sonr-set-subhead", children: "Active indicators" }),
             /* @__PURE__ */ jsx15("p", { className: "sonr-set-note", children: "An indicator must be active on the chart to change its settings \u2014 add it from the Indicators menu first." }),
             indicators2.length === 0 && /* @__PURE__ */ jsx15("p", { className: "sonr-set-empty", children: "No indicators active." }),
             indicators2.map((name) => {
@@ -18797,18 +18952,25 @@ var fmtVolume = (v) => {
   if (n >= 1e3) return `${(n / 1e3).toFixed(2)}K`;
   return `${n}`;
 };
-function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, labels, className }) {
+function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, volumeTrend: volumeTrend2, labels, className }) {
   useEffect16(ensureDefaultStyles, []);
   const L = useMemo12(() => mergeLabels(labels), [labels]);
   const [bar, setBar] = useState14({ current: null, prev: null });
+  const [trend, setTrend] = useState14(null);
+  const trendOn = volumeTrend2 === true || typeof volumeTrend2 === "number" && volumeTrend2 > 0;
   useEffect16(() => {
     let cancelled = false;
     let unsub;
+    let unsubTrend;
     const attach = () => {
       if (cancelled) return;
       const h = chartRef.current;
       if (h?.subscribeHeaderBar) {
         unsub = h.subscribeHeaderBar((current, prev) => setBar({ current, prev }));
+        if (trendOn) {
+          if (typeof volumeTrend2 === "number") h.setVolumeTrendBars?.(volumeTrend2);
+          unsubTrend = h.subscribeVolumeTrend?.((t) => setTrend(t));
+        }
       } else {
         setTimeout(attach, 50);
       }
@@ -18817,8 +18979,9 @@ function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, l
     return () => {
       cancelled = true;
       unsub?.();
+      unsubTrend?.();
     };
-  }, [chartRef]);
+  }, [chartRef, volumeTrend2, trendOn]);
   const k = bar.current;
   const up = (k?.close ?? 0) >= (k?.open ?? 0);
   const dirClass = up ? "sonr-hd-up" : "sonr-hd-down";
@@ -18859,6 +19022,10 @@ function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, l
         /* @__PURE__ */ jsx18("span", { className: "sonr-hd-k", children: "V" }),
         /* @__PURE__ */ jsx18("span", { className: "sonr-hd-v", children: fmtVolume(k.volume) })
       ] })
+    ] }),
+    trendOn && trend && /* @__PURE__ */ jsxs17("span", { className: "sonr-hd-trend", children: [
+      /* @__PURE__ */ jsx18("span", { className: "sonr-hd-k", children: L.volumeTrend }),
+      /* @__PURE__ */ jsx18("span", { className: trend === "increasing" ? "sonr-hd-up" : trend === "decreasing" ? "sonr-hd-down" : "sonr-hd-mixed", children: trend === "increasing" ? L.volumeTrendIncreasing : trend === "decreasing" ? L.volumeTrendDecreasing : L.volumeTrendMixed })
     ] })
   ] });
 }
@@ -19321,6 +19488,7 @@ var SonrChartShell = forwardRef2(function SonrChartShell2({
   ranges,
   source,
   exchange = source,
+  volumeTrend: volumeTrend2 = true,
   onIntervalChange,
   onSymbolChange,
   brand,
@@ -19394,7 +19562,7 @@ var SonrChartShell = forwardRef2(function SonrChartShell2({
             style: { position: "absolute", inset: 0 }
           }
         ),
-        /* @__PURE__ */ jsx25("div", { className: "sonr-tile-header", children: /* @__PURE__ */ jsx25(ChartHeader, { chartRef, symbol, interval, source }) }),
+        /* @__PURE__ */ jsx25("div", { className: "sonr-tile-header", children: /* @__PURE__ */ jsx25(ChartHeader, { chartRef, symbol, interval, source, volumeTrend: volumeTrend2, labels }) }),
         /* @__PURE__ */ jsx25("div", { className: "sonr-tile-nav", children: /* @__PURE__ */ jsx25(NavControlBar, { chartRef, labels }) }),
         brand != null && /* @__PURE__ */ jsx25(BrandMark, { position: brandCorner, opacity: brandOpacity, children: brand })
       ] }),
@@ -19456,6 +19624,7 @@ export {
   ConfirmDialog,
   DEFAULT_CANDLE_STYLES,
   DEFAULT_DRAWING_TOOLS,
+  DEFAULT_HALT_BADGE,
   DEFAULT_INDICATOR_OPTIONS,
   DEFAULT_LABELS,
   DEFAULT_RANGES,
@@ -19463,6 +19632,7 @@ export {
   DEFAULT_SESSION_COLORS,
   DEFAULT_TIMEZONE,
   DEFAULT_TIMEZONES,
+  DEFAULT_VOLUME_TREND_BARS,
   DataWindow,
   DrawingTemplateStore,
   DrawingToolbar,
@@ -19470,6 +19640,7 @@ export {
   EXTENDED_OVERLAYS,
   FIB_EXTENSION_LEVELS,
   GoToDateDialog,
+  HALT_INDICATOR,
   IndicatorMenu,
   MarketStatus,
   NavControlBar,
@@ -19515,6 +19686,7 @@ export {
   isEditableTarget,
   marketStatus,
   mergeLabels,
+  normalizeHalt,
   parseLocalDateTime,
   parseResolution,
   priceRangeLabel,
@@ -19533,7 +19705,8 @@ export {
   themeStyles,
   timezoneLabel,
   toHeikinAshi,
-  tradeBoxFigures
+  tradeBoxFigures,
+  volumeTrend
 };
 /*! Bundled license information: