@rioaxyz/sonrchart 0.2.0 → 0.3.0

package/README.md

@@ -43,8 +43,10 @@ bars come from.
   drawing tools + snapshot; add your own buttons via its children slot.
 - **Volume trend readout.** Optional header row classifying the last N bars'
   volume as Increasing / Decreasing / Mixed (lookback editable live in the
-  settings dialog, tracks the crosshair) — `volumeTrend` on `ChartHeader` /
-  `SonrChartShell`, or subscribe via `subscribeVolumeTrend` on the chart handle.
+  settings dialog, tracks the crosshair). Toggle it from the indicators menu
+  ("VOLTREND"), seed it on with `volumeTrend` on `ChartHeader` /
+  `SonrChartShell`, drive it via `setVolumeTrendEnabled` on the chart handle,
+  or subscribe to the raw trend via `subscribeVolumeTrend`.
 - **Fast & dependency-light.** The only runtime dependency is KLineChart;
   React is a peer. The per-frame hot paths are tuned (see
   [PERFORMANCE.md](PERFORMANCE.md)).

package/dist/index.cjs

@@ -73,6 +73,7 @@ __export(index_exports, {
   ToolbarButton: () => ToolbarButton,
   UNIT_MS: () => UNIT_MS,
   USER_DRAWING_GROUP: () => USER_DRAWING_GROUP,
+  VOLUME_TREND_OPTION: () => VOLUME_TREND_OPTION,
   VWAP_INDICATOR: () => VWAP_INDICATOR,
   WATERMARK_INDICATOR: () => WATERMARK_INDICATOR,
   arrowHeadPoints: () => arrowHeadPoints,
@@ -15688,6 +15689,8 @@ var SonrChart = (0, import_react2.forwardRef)(function SonrChart2({
   const trendSubs = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
   const trendBarsRef = (0, import_react2.useRef)(DEFAULT_VOLUME_TREND_BARS);
   const trendBarsSubs = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const trendOnRef = (0, import_react2.useRef)(false);
+  const trendOnSubs = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
   const crosshairActiveRef = (0, import_react2.useRef)(false);
   const headerIdxRef = (0, import_react2.useRef)(-1);
   const emitHeaderAt = (list, idx) => {
@@ -15992,6 +15995,16 @@ var SonrChart = (0, import_react2.forwardRef)(function SonrChart2({
       subscribeVolumeTrendBars: (cb) => {
         trendBarsSubs.current.add(cb);
         return () => trendBarsSubs.current.delete(cb);
+      },
+      getVolumeTrendEnabled: () => trendOnRef.current,
+      setVolumeTrendEnabled: (on) => {
+        if (on === trendOnRef.current) return;
+        trendOnRef.current = on;
+        trendOnSubs.current.forEach((cb) => cb(on));
+      },
+      subscribeVolumeTrendEnabled: (cb) => {
+        trendOnSubs.current.add(cb);
+        return () => trendOnSubs.current.delete(cb);
       }
     },
     // paneHeights/priceScale captured by closure; recreated per render is fine.
@@ -16744,6 +16757,7 @@ function mergeLabels(over) {
 
 // src/IndicatorMenu.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var VOLUME_TREND_OPTION = "VOLTREND";
 var DEFAULT_INDICATOR_OPTIONS = [
   // Price-pane overlays.
   { name: "MA", label: "Moving Average", pane: "main" },
@@ -16756,6 +16770,7 @@ var DEFAULT_INDICATOR_OPTIONS = [
   { name: "VWAP", label: "Volume Weighted Avg Price", pane: "main" },
   // Sub-pane oscillators & volume studies.
   { name: "VOL", label: "Volume", pane: "new" },
+  { name: VOLUME_TREND_OPTION, label: "Volume Trend (header row)" },
   { name: "MACD", label: "MACD", pane: "new" },
   { name: "RSI", label: "Relative Strength Index", pane: "new" },
   { name: "KDJ", label: "KDJ Stochastic", pane: "new" },
@@ -16786,12 +16801,27 @@ function IndicatorMenu({
   const [active, setActive] = (0, import_react4.useState)([]);
   const { open, toggle: toggleOpen, pos, triggerRef, panelRef } = useDropdown();
   (0, import_react4.useEffect)(() => {
-    const t = setTimeout(() => setActive(chartRef.current?.listIndicators() ?? []), 0);
-    return () => clearTimeout(t);
+    let unsubOn;
+    const t = setTimeout(() => {
+      const h = chartRef.current;
+      const base = h?.listIndicators() ?? [];
+      setActive(h?.getVolumeTrendEnabled?.() ? [...base, VOLUME_TREND_OPTION] : base);
+      unsubOn = h?.subscribeVolumeTrendEnabled?.(
+        (on) => setActive((a) => on ? a.includes(VOLUME_TREND_OPTION) ? a : [...a, VOLUME_TREND_OPTION] : a.filter((n) => n !== VOLUME_TREND_OPTION))
+      );
+    }, 0);
+    return () => {
+      clearTimeout(t);
+      unsubOn?.();
+    };
   }, [chartRef]);
   const toggle = (opt) => {
     const handle = chartRef.current;
     if (!handle) return;
+    if (opt.name === VOLUME_TREND_OPTION) {
+      handle.setVolumeTrendEnabled?.(!active.includes(opt.name));
+      return;
+    }
     if (active.includes(opt.name)) {
       handle.removeIndicator(opt.name);
       setActive((a) => a.filter((n) => n !== opt.name));
@@ -19073,20 +19103,23 @@ function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, v
   const L = (0, import_react17.useMemo)(() => mergeLabels(labels), [labels]);
   const [bar, setBar] = (0, import_react17.useState)({ current: null, prev: null });
   const [trend, setTrend] = (0, import_react17.useState)(null);
-  const trendOn = volumeTrend2 === true || typeof volumeTrend2 === "number" && volumeTrend2 > 0;
+  const [trendOn, setTrendOn] = (0, import_react17.useState)(false);
+  const seedOn = volumeTrend2 === true || typeof volumeTrend2 === "number" && volumeTrend2 > 0;
   (0, import_react17.useEffect)(() => {
     let cancelled = false;
     let unsub;
-    let unsubTrend;
+    let unsubOn;
     const attach = () => {
       if (cancelled) return;
       const h = chartRef.current;
       if (h?.subscribeHeaderBar) {
         unsub = h.subscribeHeaderBar((current, prev) => setBar({ current, prev }));
-        if (trendOn) {
+        if (seedOn) {
           if (typeof volumeTrend2 === "number") h.setVolumeTrendBars?.(volumeTrend2);
-          unsubTrend = h.subscribeVolumeTrend?.((t) => setTrend(t));
+          h.setVolumeTrendEnabled?.(true);
         }
+        setTrendOn(h.getVolumeTrendEnabled?.() ?? seedOn);
+        unsubOn = h.subscribeVolumeTrendEnabled?.(setTrendOn);
       } else {
         setTimeout(attach, 50);
       }
@@ -19095,9 +19128,17 @@ function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, v
     return () => {
       cancelled = true;
       unsub?.();
-      unsubTrend?.();
+      unsubOn?.();
     };
-  }, [chartRef, volumeTrend2, trendOn]);
+  }, [chartRef, volumeTrend2, seedOn]);
+  (0, import_react17.useEffect)(() => {
+    if (!trendOn) {
+      setTrend(null);
+      return;
+    }
+    const unsubTrend = chartRef.current?.subscribeVolumeTrend?.((t) => setTrend(t));
+    return () => unsubTrend?.();
+  }, [chartRef, trendOn]);
   const k = bar.current;
   const up = (k?.close ?? 0) >= (k?.open ?? 0);
   const dirClass = up ? "sonr-hd-up" : "sonr-hd-down";
@@ -19786,6 +19827,7 @@ function setCSSCustomProperty(name, value, el) {
   ToolbarButton,
   UNIT_MS,
   USER_DRAWING_GROUP,
+  VOLUME_TREND_OPTION,
   VWAP_INDICATOR,
   WATERMARK_INDICATOR,
   arrowHeadPoints,