@rioaxyz/sonrchart 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -497,6 +497,13 @@ interface SonrChartHandle {
     getVolumeTrendBars(): number;
     setVolumeTrendBars(bars: number): void;
     subscribeVolumeTrendBars(cb: (bars: number) => void): () => void;
+    /** Whether the volume-trend header row is on (#79). Chart-level state so
+     *  any control (the indicators menu, a host button) can toggle it and a
+     *  mounted <ChartHeader> shows/hides its row live. Default off; the
+     *  header's `volumeTrend` prop seeds it on. */
+    getVolumeTrendEnabled(): boolean;
+    setVolumeTrendEnabled(on: boolean): void;
+    subscribeVolumeTrendEnabled(cb: (on: boolean) => void): () => void;
 }
 declare const SonrChart: react.ForwardRefExoticComponent<SonrChartProps & react.RefAttributes<SonrChartHandle>>;
 
@@ -642,6 +649,10 @@ interface IndicatorOption {
     label: string;
     pane?: "main" | "new";
 }
+/** Menu row for the volume-trend header row (#79). Not a KLineChart study —
+ *  toggling it flips the chart-level flag (setVolumeTrendEnabled) that a
+ *  mounted <ChartHeader> follows. */
+declare const VOLUME_TREND_OPTION = "VOLTREND";
 declare const DEFAULT_INDICATOR_OPTIONS: IndicatorOption[];
 declare function IndicatorMenu({ chartRef, options, className, labels, }: {
     chartRef: RefObject<SonrChartHandle>;
@@ -937,10 +948,12 @@ interface ChartHeaderProps {
     source?: string;
     /** Precision for O/H/L/C/change (defaults to 2). */
     pricePrecision?: number;
-    /** Volume-trend row (#79): `true` shows it with the chart-level lookback
+    /** Volume-trend row (#79): `true` turns it on with the chart-level lookback
      *  (default 3 bars, editable in the settings dialog); a number also sets
-     *  that lookback. Shown on a second line below the symbol/OHLC row; tracks
-     *  the same bar as the OHLC (crosshair, falling back to the latest bar). */
+     *  that lookback. The on/off state lives on the chart handle, so it's also
+     *  toggleable from the indicators menu ("VOLTREND") — this prop seeds it on.
+     *  Shown on a second line below the symbol/OHLC row; tracks the same bar as
+     *  the OHLC (crosshair, falling back to the latest bar). */
     volumeTrend?: boolean | number;
     labels?: Partial<Labels>;
     className?: string;
@@ -1169,4 +1182,4 @@ interface SessionColors {
 declare const DEFAULT_SESSION_COLORS: SessionColors;
 declare function registerSonrIndicators(): void;
 
-export { BRUSH_OVERLAY, type Bar, type BrandCorner, BrandMark, type BrandMarkProps, type BrushStyle, type BrushTool, CandleMenu, type CandleStyle, type CandleStyleOption, ChartHeader, type ChartHeaderProps, type ChartState, ChartToolbar, type CompareSpec, ConfirmDialog, DEFAULT_CANDLE_STYLES, DEFAULT_DRAWING_TOOLS, DEFAULT_HALT_BADGE, DEFAULT_INDICATOR_OPTIONS, DEFAULT_LABELS, DEFAULT_RANGES, DEFAULT_RESOLUTIONS, DEFAULT_SESSION_COLORS, DEFAULT_TIMEZONE, DEFAULT_TIMEZONES, DEFAULT_VOLUME_TREND_BARS, type DataSource, DataWindow, type DrawingRow, type DrawingSnapshot, type DrawingSnapshotItem, DrawingTemplateStore, type DrawingTool, type DrawingToolOption, DrawingToolbar, EXTENDED_DRAWING_TOOLS, EXTENDED_OVERLAYS, FIB_EXTENSION_LEVELS, GoToDateDialog, HALT_INDICATOR, type HaltBadge, type HaltBadgeData, IndicatorMenu, type IndicatorOption, type IndicatorRow, type IndicatorSpec, type Interval, type Labels, type Magnet, type MarketPhase, MarketStatus, type MarketStatusProps, NavControlBar, ObjectTree, type OrderLine, PALETTE, PATTERN_INDICATOR, type PatternMarker, type PriceLabels, type PriceLine, type PriceScale, PriceScaleMenu, type QuoteFormat, type RangeOption, type ResolutionOption, SERIES_INDICATOR, SESSION_INDICATOR, SHAPE_ELLIPSE, SHAPE_OVERLAYS, SHAPE_PRICE_RANGE, SHAPE_RECTANGLE, SHAPE_RISK_REWARD, SHAPE_TRIANGLE, SONR_TRADE_BOX, SaveLoadDialog, type SessionTint, SettingsModal, type ShortcutAction, SonrChart, type SonrChartHandle, type SonrChartProps, SonrChartShell, type SonrChartShellProps, type SymbolInfo, SymbolInfoDialog, SymbolSearch, type SymbolSearchResult, TEXT_OVERLAY, type TextData, type Theme, TimeframeBar, TimezoneMenu, type TimezoneOption, ToolbarButton, UNIT_MS, USER_DRAWING_GROUP, VWAP_INDICATOR, type VolumeTrend, WATERMARK_INDICATOR, type WatermarkData, type WatermarkOptions, arrowHeadPoints, dateRangeLabel, downloadSnapshot, drawingLabel, ensureDefaultStyles, fibSequence, formatWithUnit, getCSSCustomProperty, getRegisteredTheme, getTimezoneApi, humanDuration, isChartState, isEditableTarget, marketStatus, mergeLabels, normalizeHalt, parseLocalDateTime, parseResolution, priceRangeLabel, registerExtendedDrawings, registerShapeOverlays, registerSonrIndicators, registerTextOverlay, registerTheme, registerTradeReview, resolutionLabel, resolutionMs, resolveShortcut, resolveThemeStyles, riskRewardStats, setCSSCustomProperty, themeStyles, timezoneLabel, toHeikinAshi, tradeBoxFigures, volumeTrend };
+export { BRUSH_OVERLAY, type Bar, type BrandCorner, BrandMark, type BrandMarkProps, type BrushStyle, type BrushTool, CandleMenu, type CandleStyle, type CandleStyleOption, ChartHeader, type ChartHeaderProps, type ChartState, ChartToolbar, type CompareSpec, ConfirmDialog, DEFAULT_CANDLE_STYLES, DEFAULT_DRAWING_TOOLS, DEFAULT_HALT_BADGE, DEFAULT_INDICATOR_OPTIONS, DEFAULT_LABELS, DEFAULT_RANGES, DEFAULT_RESOLUTIONS, DEFAULT_SESSION_COLORS, DEFAULT_TIMEZONE, DEFAULT_TIMEZONES, DEFAULT_VOLUME_TREND_BARS, type DataSource, DataWindow, type DrawingRow, type DrawingSnapshot, type DrawingSnapshotItem, DrawingTemplateStore, type DrawingTool, type DrawingToolOption, DrawingToolbar, EXTENDED_DRAWING_TOOLS, EXTENDED_OVERLAYS, FIB_EXTENSION_LEVELS, GoToDateDialog, HALT_INDICATOR, type HaltBadge, type HaltBadgeData, IndicatorMenu, type IndicatorOption, type IndicatorRow, type IndicatorSpec, type Interval, type Labels, type Magnet, type MarketPhase, MarketStatus, type MarketStatusProps, NavControlBar, ObjectTree, type OrderLine, PALETTE, PATTERN_INDICATOR, type PatternMarker, type PriceLabels, type PriceLine, type PriceScale, PriceScaleMenu, type QuoteFormat, type RangeOption, type ResolutionOption, SERIES_INDICATOR, SESSION_INDICATOR, SHAPE_ELLIPSE, SHAPE_OVERLAYS, SHAPE_PRICE_RANGE, SHAPE_RECTANGLE, SHAPE_RISK_REWARD, SHAPE_TRIANGLE, SONR_TRADE_BOX, SaveLoadDialog, type SessionTint, SettingsModal, type ShortcutAction, SonrChart, type SonrChartHandle, type SonrChartProps, SonrChartShell, type SonrChartShellProps, type SymbolInfo, SymbolInfoDialog, SymbolSearch, type SymbolSearchResult, TEXT_OVERLAY, type TextData, type Theme, TimeframeBar, TimezoneMenu, type TimezoneOption, ToolbarButton, UNIT_MS, USER_DRAWING_GROUP, VOLUME_TREND_OPTION, VWAP_INDICATOR, type VolumeTrend, WATERMARK_INDICATOR, type WatermarkData, type WatermarkOptions, arrowHeadPoints, dateRangeLabel, downloadSnapshot, drawingLabel, ensureDefaultStyles, fibSequence, formatWithUnit, getCSSCustomProperty, getRegisteredTheme, getTimezoneApi, humanDuration, isChartState, isEditableTarget, marketStatus, mergeLabels, normalizeHalt, parseLocalDateTime, parseResolution, priceRangeLabel, registerExtendedDrawings, registerShapeOverlays, registerSonrIndicators, registerTextOverlay, registerTheme, registerTradeReview, resolutionLabel, resolutionMs, resolveShortcut, resolveThemeStyles, riskRewardStats, setCSSCustomProperty, themeStyles, timezoneLabel, toHeikinAshi, tradeBoxFigures, volumeTrend };

package/dist/index.d.ts

@@ -497,6 +497,13 @@ interface SonrChartHandle {
     getVolumeTrendBars(): number;
     setVolumeTrendBars(bars: number): void;
     subscribeVolumeTrendBars(cb: (bars: number) => void): () => void;
+    /** Whether the volume-trend header row is on (#79). Chart-level state so
+     *  any control (the indicators menu, a host button) can toggle it and a
+     *  mounted <ChartHeader> shows/hides its row live. Default off; the
+     *  header's `volumeTrend` prop seeds it on. */
+    getVolumeTrendEnabled(): boolean;
+    setVolumeTrendEnabled(on: boolean): void;
+    subscribeVolumeTrendEnabled(cb: (on: boolean) => void): () => void;
 }
 declare const SonrChart: react.ForwardRefExoticComponent<SonrChartProps & react.RefAttributes<SonrChartHandle>>;
 
@@ -642,6 +649,10 @@ interface IndicatorOption {
     label: string;
     pane?: "main" | "new";
 }
+/** Menu row for the volume-trend header row (#79). Not a KLineChart study —
+ *  toggling it flips the chart-level flag (setVolumeTrendEnabled) that a
+ *  mounted <ChartHeader> follows. */
+declare const VOLUME_TREND_OPTION = "VOLTREND";
 declare const DEFAULT_INDICATOR_OPTIONS: IndicatorOption[];
 declare function IndicatorMenu({ chartRef, options, className, labels, }: {
     chartRef: RefObject<SonrChartHandle>;
@@ -937,10 +948,12 @@ interface ChartHeaderProps {
     source?: string;
     /** Precision for O/H/L/C/change (defaults to 2). */
     pricePrecision?: number;
-    /** Volume-trend row (#79): `true` shows it with the chart-level lookback
+    /** Volume-trend row (#79): `true` turns it on with the chart-level lookback
      *  (default 3 bars, editable in the settings dialog); a number also sets
-     *  that lookback. Shown on a second line below the symbol/OHLC row; tracks
-     *  the same bar as the OHLC (crosshair, falling back to the latest bar). */
+     *  that lookback. The on/off state lives on the chart handle, so it's also
+     *  toggleable from the indicators menu ("VOLTREND") — this prop seeds it on.
+     *  Shown on a second line below the symbol/OHLC row; tracks the same bar as
+     *  the OHLC (crosshair, falling back to the latest bar). */
     volumeTrend?: boolean | number;
     labels?: Partial<Labels>;
     className?: string;
@@ -1169,4 +1182,4 @@ interface SessionColors {
 declare const DEFAULT_SESSION_COLORS: SessionColors;
 declare function registerSonrIndicators(): void;
 
-export { BRUSH_OVERLAY, type Bar, type BrandCorner, BrandMark, type BrandMarkProps, type BrushStyle, type BrushTool, CandleMenu, type CandleStyle, type CandleStyleOption, ChartHeader, type ChartHeaderProps, type ChartState, ChartToolbar, type CompareSpec, ConfirmDialog, DEFAULT_CANDLE_STYLES, DEFAULT_DRAWING_TOOLS, DEFAULT_HALT_BADGE, DEFAULT_INDICATOR_OPTIONS, DEFAULT_LABELS, DEFAULT_RANGES, DEFAULT_RESOLUTIONS, DEFAULT_SESSION_COLORS, DEFAULT_TIMEZONE, DEFAULT_TIMEZONES, DEFAULT_VOLUME_TREND_BARS, type DataSource, DataWindow, type DrawingRow, type DrawingSnapshot, type DrawingSnapshotItem, DrawingTemplateStore, type DrawingTool, type DrawingToolOption, DrawingToolbar, EXTENDED_DRAWING_TOOLS, EXTENDED_OVERLAYS, FIB_EXTENSION_LEVELS, GoToDateDialog, HALT_INDICATOR, type HaltBadge, type HaltBadgeData, IndicatorMenu, type IndicatorOption, type IndicatorRow, type IndicatorSpec, type Interval, type Labels, type Magnet, type MarketPhase, MarketStatus, type MarketStatusProps, NavControlBar, ObjectTree, type OrderLine, PALETTE, PATTERN_INDICATOR, type PatternMarker, type PriceLabels, type PriceLine, type PriceScale, PriceScaleMenu, type QuoteFormat, type RangeOption, type ResolutionOption, SERIES_INDICATOR, SESSION_INDICATOR, SHAPE_ELLIPSE, SHAPE_OVERLAYS, SHAPE_PRICE_RANGE, SHAPE_RECTANGLE, SHAPE_RISK_REWARD, SHAPE_TRIANGLE, SONR_TRADE_BOX, SaveLoadDialog, type SessionTint, SettingsModal, type ShortcutAction, SonrChart, type SonrChartHandle, type SonrChartProps, SonrChartShell, type SonrChartShellProps, type SymbolInfo, SymbolInfoDialog, SymbolSearch, type SymbolSearchResult, TEXT_OVERLAY, type TextData, type Theme, TimeframeBar, TimezoneMenu, type TimezoneOption, ToolbarButton, UNIT_MS, USER_DRAWING_GROUP, VWAP_INDICATOR, type VolumeTrend, WATERMARK_INDICATOR, type WatermarkData, type WatermarkOptions, arrowHeadPoints, dateRangeLabel, downloadSnapshot, drawingLabel, ensureDefaultStyles, fibSequence, formatWithUnit, getCSSCustomProperty, getRegisteredTheme, getTimezoneApi, humanDuration, isChartState, isEditableTarget, marketStatus, mergeLabels, normalizeHalt, parseLocalDateTime, parseResolution, priceRangeLabel, registerExtendedDrawings, registerShapeOverlays, registerSonrIndicators, registerTextOverlay, registerTheme, registerTradeReview, resolutionLabel, resolutionMs, resolveShortcut, resolveThemeStyles, riskRewardStats, setCSSCustomProperty, themeStyles, timezoneLabel, toHeikinAshi, tradeBoxFigures, volumeTrend };
+export { BRUSH_OVERLAY, type Bar, type BrandCorner, BrandMark, type BrandMarkProps, type BrushStyle, type BrushTool, CandleMenu, type CandleStyle, type CandleStyleOption, ChartHeader, type ChartHeaderProps, type ChartState, ChartToolbar, type CompareSpec, ConfirmDialog, DEFAULT_CANDLE_STYLES, DEFAULT_DRAWING_TOOLS, DEFAULT_HALT_BADGE, DEFAULT_INDICATOR_OPTIONS, DEFAULT_LABELS, DEFAULT_RANGES, DEFAULT_RESOLUTIONS, DEFAULT_SESSION_COLORS, DEFAULT_TIMEZONE, DEFAULT_TIMEZONES, DEFAULT_VOLUME_TREND_BARS, type DataSource, DataWindow, type DrawingRow, type DrawingSnapshot, type DrawingSnapshotItem, DrawingTemplateStore, type DrawingTool, type DrawingToolOption, DrawingToolbar, EXTENDED_DRAWING_TOOLS, EXTENDED_OVERLAYS, FIB_EXTENSION_LEVELS, GoToDateDialog, HALT_INDICATOR, type HaltBadge, type HaltBadgeData, IndicatorMenu, type IndicatorOption, type IndicatorRow, type IndicatorSpec, type Interval, type Labels, type Magnet, type MarketPhase, MarketStatus, type MarketStatusProps, NavControlBar, ObjectTree, type OrderLine, PALETTE, PATTERN_INDICATOR, type PatternMarker, type PriceLabels, type PriceLine, type PriceScale, PriceScaleMenu, type QuoteFormat, type RangeOption, type ResolutionOption, SERIES_INDICATOR, SESSION_INDICATOR, SHAPE_ELLIPSE, SHAPE_OVERLAYS, SHAPE_PRICE_RANGE, SHAPE_RECTANGLE, SHAPE_RISK_REWARD, SHAPE_TRIANGLE, SONR_TRADE_BOX, SaveLoadDialog, type SessionTint, SettingsModal, type ShortcutAction, SonrChart, type SonrChartHandle, type SonrChartProps, SonrChartShell, type SonrChartShellProps, type SymbolInfo, SymbolInfoDialog, SymbolSearch, type SymbolSearchResult, TEXT_OVERLAY, type TextData, type Theme, TimeframeBar, TimezoneMenu, type TimezoneOption, ToolbarButton, UNIT_MS, USER_DRAWING_GROUP, VOLUME_TREND_OPTION, VWAP_INDICATOR, type VolumeTrend, WATERMARK_INDICATOR, type WatermarkData, type WatermarkOptions, arrowHeadPoints, dateRangeLabel, downloadSnapshot, drawingLabel, ensureDefaultStyles, fibSequence, formatWithUnit, getCSSCustomProperty, getRegisteredTheme, getTimezoneApi, humanDuration, isChartState, isEditableTarget, marketStatus, mergeLabels, normalizeHalt, parseLocalDateTime, parseResolution, priceRangeLabel, registerExtendedDrawings, registerShapeOverlays, registerSonrIndicators, registerTextOverlay, registerTheme, registerTradeReview, resolutionLabel, resolutionMs, resolveShortcut, resolveThemeStyles, riskRewardStats, setCSSCustomProperty, themeStyles, timezoneLabel, toHeikinAshi, tradeBoxFigures, volumeTrend };

package/dist/index.js

@@ -15572,6 +15572,8 @@ var SonrChart = forwardRef(function SonrChart2({
   const trendSubs = useRef2(/* @__PURE__ */ new Set());
   const trendBarsRef = useRef2(DEFAULT_VOLUME_TREND_BARS);
   const trendBarsSubs = useRef2(/* @__PURE__ */ new Set());
+  const trendOnRef = useRef2(false);
+  const trendOnSubs = useRef2(/* @__PURE__ */ new Set());
   const crosshairActiveRef = useRef2(false);
   const headerIdxRef = useRef2(-1);
   const emitHeaderAt = (list, idx) => {
@@ -15876,6 +15878,16 @@ var SonrChart = 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.
@@ -16628,6 +16640,7 @@ function mergeLabels(over) {
 
 // src/IndicatorMenu.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VOLUME_TREND_OPTION = "VOLTREND";
 var DEFAULT_INDICATOR_OPTIONS = [
   // Price-pane overlays.
   { name: "MA", label: "Moving Average", pane: "main" },
@@ -16640,6 +16653,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" },
@@ -16670,12 +16684,27 @@ function IndicatorMenu({
   const [active, setActive] = useState3([]);
   const { open, toggle: toggleOpen, pos, triggerRef, panelRef } = useDropdown();
   useEffect3(() => {
-    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));
@@ -18957,20 +18986,23 @@ function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, v
   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;
+  const [trendOn, setTrendOn] = useState14(false);
+  const seedOn = volumeTrend2 === true || typeof volumeTrend2 === "number" && volumeTrend2 > 0;
   useEffect16(() => {
     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);
       }
@@ -18979,9 +19011,17 @@ function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, v
     return () => {
       cancelled = true;
       unsub?.();
-      unsubTrend?.();
+      unsubOn?.();
     };
-  }, [chartRef, volumeTrend2, trendOn]);
+  }, [chartRef, volumeTrend2, seedOn]);
+  useEffect16(() => {
+    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";
@@ -19669,6 +19709,7 @@ export {
   ToolbarButton,
   UNIT_MS,
   USER_DRAWING_GROUP,
+  VOLUME_TREND_OPTION,
   VWAP_INDICATOR,
   WATERMARK_INDICATOR,
   arrowHeadPoints,