@forgecharts/sdk 1.5.78 → 1.5.79

package/dist/react/internal.js

@@ -11124,6 +11124,9 @@ var KIT_FEATURE_TO_CAPABILITY = {
   extended_drawing_tools: "extendedDrawings",
   indicators: "indicators",
   multi_pane: "multiPane",
+  // Renamed candle_types in migration 050 (it gates the series-style picker);
+  // the legacy key stays mapped so an un-migrated catalog keeps working.
+  candle_types: "chartTypes",
   chart_types: "chartTypes",
   bar_replay: "barReplay",
   custom_timeframes: "customTimeframes",
@@ -11580,6 +11583,7 @@ var ChartRuntimeResolver = class _ChartRuntimeResolver {
   }
 };
 var resolver = () => ChartRuntimeResolver.getInstance();
+var canUseChartTypes = () => resolver().canUseChartTypes();
 var canUseExtendedDrawings = () => resolver().canUseExtendedDrawings();
 var canUseMultiPane = () => resolver().canUseMultiPane();
 var canUseDraggableOrders = () => resolver().canUseDraggableOrders();
@@ -12210,6 +12214,30 @@ var TChart = class _TChart {
     this._series.applyOptions(options);
     this._core.markDirty();
   }
+  /**
+   * Switch the primary series' render style (candlestick, heikinashi, line,
+   * area, histogram). The renderers have always supported every style — the
+   * draw pass branches on the series' type option — this is the missing
+   * public switch, gated by the candle_types package feature (capability
+   * `chartTypes`). Ungated attempts warn and keep the current style rather
+   * than throwing: the toolbar hides the picker when ungated, so a call
+   * landing here is a host integration slip, not a user action.
+   */
+  setSeriesType(type) {
+    this._assertAlive();
+    if (!canUseChartTypes()) {
+      console.warn("[ForgeCharts] Series-style switching (candle_types) is not enabled on the active plan.");
+      return;
+    }
+    this._series.applyOptions({ type });
+    this._core.markDirty();
+    this._bus.emit("seriesTypeChanged", { type });
+  }
+  /** The primary series' current render style. */
+  getSeriesType() {
+    this._assertAlive();
+    return this._series.options().type;
+  }
   /** Scrolls the viewport so the latest bar is visible at the right edge. */
   scrollToEnd() {
     this._assertAlive();
@@ -18331,7 +18359,7 @@ var DEMONSTRATION_STROKE = "rgba(255, 200, 50, 0.7)";
 var DEMONSTRATION_COLOR = "var(--crosshair-overlay, rgba(255,255,255,0.75))";
 
 // src/version.ts
-var FORGECHARTS_VERSION = "1.5.78" ;
+var FORGECHARTS_VERSION = "1.5.79" ;
 function applyRuntimeConfig(caps, config) {
   if (!config) return caps;
   const orderEntry = config.enableOrderEntry === false ? false : caps.orderEntry;
@@ -23175,6 +23203,7 @@ var ChartCanvas = forwardRef(
     initialActiveTool,
     onPointerToolChange,
     initialPointerTool,
+    initialSeriesType,
     initialMagnetMode,
     onMagnetModeChange,
     drawingFavorites: drawingFavoritesProp,
@@ -23293,6 +23322,7 @@ var ChartCanvas = forwardRef(
         chartRef.current?.loadLayout(layout);
       },
       addIndicator: (config) => chartRef.current?.addIndicator(config) ?? null,
+      setSeriesType: (type) => chartRef.current?.setSeriesType(type),
       removeIndicator: (id) => chartRef.current?.removeIndicator(id),
       moveIndicatorToOverlay: (id) => chartRef.current?.moveIndicatorToOverlay(id),
       moveIndicatorToPane: (id, targetPaneId) => chartRef.current?.moveIndicatorToPane(id, targetPaneId),
@@ -24312,7 +24342,12 @@ var ChartCanvas = forwardRef(
     handleToolSelectRef.current = handleToolSelect;
     selectPointerToolRef.current = handleToolSelect;
     const initialPointerAppliedRef = useRef(false);
+    const initialSeriesAppliedRef = useRef(false);
     useEffect(() => {
+      if (!initialSeriesAppliedRef.current && initialSeriesType && chartRef.current) {
+        initialSeriesAppliedRef.current = true;
+        chartRef.current.setSeriesType(initialSeriesType);
+      }
       if (initialPointerAppliedRef.current || !initialPointerTool) return;
       initialPointerAppliedRef.current = true;
       selectPointerToolRef.current(initialPointerTool);
@@ -26455,6 +26490,28 @@ function RollRuleDropdown({
     ))
   ] });
 }
+var SERIES_STYLES = [
+  { id: "candlestick", label: "Candles", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "3", height: "6", rx: "0.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.5", y1: "2", x2: "4.5", y2: "14", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ jsx("rect", { x: "10", y: "3", width: "3", height: "7", rx: "0.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "11.5", y1: "1", x2: "11.5", y2: "13", stroke: "currentColor", strokeWidth: "1" })
+  ] }) },
+  { id: "heikinashi", label: "Heikin Ashi", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx("rect", { x: "2.5", y: "6", width: "3.4", height: "6", rx: "1.6" }),
+    /* @__PURE__ */ jsx("rect", { x: "9.5", y: "3", width: "3.4", height: "6", rx: "1.6" })
+  ] }) },
+  { id: "line", label: "Line", icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: /* @__PURE__ */ jsx("polyline", { points: "2,12 6,7 10,10 14,4" }) }) },
+  { id: "area", label: "Area", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "2,12 6,7 10,10 14,4", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("polygon", { points: "2,12 6,7 10,10 14,4 14,14 2,14", fill: "currentColor", opacity: "0.35" })
+  ] }) },
+  { id: "histogram", label: "Histogram", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "9", width: "2.6", height: "5" }),
+    /* @__PURE__ */ jsx("rect", { x: "6.5", y: "5", width: "2.6", height: "9" }),
+    /* @__PURE__ */ jsx("rect", { x: "11", y: "7", width: "2.6", height: "7" })
+  ] }) }
+];
 function TopToolbar({
   symbol,
   timeframe,
@@ -26466,6 +26523,8 @@ function TopToolbar({
   onAddCustomTimeframe,
   onRemoveCustomTimeframe,
   onFavoritesChange,
+  seriesType,
+  onSeriesTypeChange,
   onAddIndicator,
   maxIndicators,
   indicatorsOpen,
@@ -26506,6 +26565,16 @@ function TopToolbar({
   showMultiChartLayout
 }) {
   const [tfOpen, setTfOpen] = useState(false);
+  const [styleOpen, setStyleOpen] = useState(false);
+  const styleRef = useRef(null);
+  useEffect(() => {
+    if (!styleOpen) return;
+    const handler = (e) => {
+      if (styleRef.current && !styleRef.current.contains(e.target)) setStyleOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [styleOpen]);
   const [symOpen, setSymOpen] = useState(false);
   const [ssOpen, setSsOpen] = useState(false);
   const [rollOpen, setRollOpen] = useState(false);
@@ -26641,6 +26710,39 @@ function TopToolbar({
             }
           )
         ] }),
+        seriesType !== void 0 && onSeriesTypeChange !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
+          /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: styleRef, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: `ind-trigger${styleOpen ? " active" : ""}`,
+                onClick: () => setStyleOpen((o) => !o),
+                title: "Chart style",
+                children: [
+                  (SERIES_STYLES.find((s) => s.id === seriesType) ?? SERIES_STYLES[0]).icon,
+                  (SERIES_STYLES.find((s) => s.id === seriesType) ?? SERIES_STYLES[0]).label
+                ]
+              }
+            ),
+            styleOpen && /* @__PURE__ */ jsx("div", { className: "tf-dropdown", style: { minWidth: 150 }, children: SERIES_STYLES.map((style) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "tf-dropdown-row",
+                style: style.id === seriesType ? { fontWeight: 600 } : void 0,
+                onClick: () => {
+                  onSeriesTypeChange(style.id);
+                  setStyleOpen(false);
+                },
+                children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+                  style.icon,
+                  style.label
+                ] })
+              },
+              style.id
+            )) })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
         showIndicators !== false && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(
@@ -31506,6 +31608,9 @@ function ChartWorkspace({
   onRollRuleChange,
   quotesWsUrl,
   getQuotesAuthToken,
+  seriesType,
+  onSeriesTypeChange,
+  showSeriesTypes,
   extraTfGroups,
   // RightToolbar
   watchlistOpen,
@@ -31615,6 +31720,7 @@ function ChartWorkspace({
   const effShowDataExport = gate(showDataExport, capabilities.dataExport);
   const effShowMultiChartLayout = gate(showMultiChartLayout, capabilities.multiChartLayout);
   const effShowMultipleTabs = gate(showMultipleTabs, capabilities.multipleWorkspaces);
+  const effShowSeriesTypes = gate(showSeriesTypes, capabilities.chartTypes) && onSeriesTypeChange !== void 0;
   const tabItems = tabs.map((t) => ({
     id: t.id,
     label: t.label,
@@ -31692,6 +31798,7 @@ function ChartWorkspace({
             favorites: favoriteTfs,
             onSymbolChange,
             onTimeframeChange,
+            ...effShowSeriesTypes ? { seriesType: seriesType ?? "candlestick", onSeriesTypeChange } : {},
             onAddCustomTimeframe,
             onRemoveCustomTimeframe,
             onFavoritesChange: onFavoriteTfsChange,
@@ -35891,6 +35998,11 @@ var ManagedAppShell = forwardRef(
       setIsLicensed(isFullShellLicensed());
     }), []);
     const chartInstancesRef = useRef(/* @__PURE__ */ new Map());
+    const [seriesType, setSeriesType] = useState("candlestick");
+    const handleSeriesTypeChange = useCallback((type) => {
+      setSeriesType(type);
+      chartHandleRef.current?.setSeriesType(type);
+    }, []);
     const chartHandleRef = useRef(null);
     useImperativeHandle(ref, () => ({
       getActiveChartHandle: () => chartHandleRef.current
@@ -36857,6 +36969,8 @@ var ManagedAppShell = forwardRef(
           favoriteTfs,
           onSymbolChange: handleSymbolChange,
           onTimeframeChange: handleTimeframeChange,
+          seriesType,
+          onSeriesTypeChange: handleSeriesTypeChange,
           onAddCustomTimeframe: handleAddCustomTimeframe,
           onRemoveCustomTimeframe: handleRemoveCustomTimeframe,
           onFavoriteTfsChange: setFavoriteTfs,