@tradecanvas/svelte 1.0.15 → 1.2.0

package/README.md

@@ -35,7 +35,7 @@ Streams live Binance data by default. Pass `data={bars}` for static OHLC, or `ad
 
 ## Props
 
-`symbol`, `timeframe`, `theme`, `chartType`, `indicators`, `data`, `adapter`, `historyLimit`, `features`, `autoScale`, `signalMarkers`, `signalMarkerStyle`, `tradeZones`, `tradeZoneStyle`, `watermarkText`, `onReady`, and `bind:chart`.
+`symbol`, `timeframe`, `theme`, `chartType`, `indicators` (ids, or `{ id, params, position }`), `data` (bars of your own; no stream), `adapter`, `stream` (`false`: no stream of its own), `historyLimit`, `features` (changes apply after mount too), `autoScale`, `signalMarkers`, `signalMarkerStyle`, `tradeZones`, `tradeZoneStyle`, `overrides` (style overrides by key, all of your app's), `watermarkText`, `onReady`, and `bind:chart`.
 
 Reach the underlying `Chart` (drawings, trading, execution adapters, plugins, resizable panes) via `bind:chart` or `onReady`. See the [main docs](https://github.com/bonguynvan/tradecanvas).
 

package/dist/TradeCanvas.svelte

@@ -5,6 +5,7 @@
     BinanceAdapter,
     DARK_THEME,
     LIGHT_THEME,
+    syncIndicators,
   } from '@tradecanvas/chart';
   import type {
     ChartType,
@@ -17,6 +18,8 @@
     SignalMarkerStyle,
     TradeZoneStyle,
     DataAdapter,
+    ChartStyleOverrides,
+    IndicatorSpec,
   } from '@tradecanvas/chart';
 
   interface Props {
@@ -24,16 +27,23 @@
     timeframe?: TimeFrame;
     theme?: 'dark' | 'light' | Theme;
     chartType?: ChartType;
-    indicators?: string[];
+    /** Indicators by id (`'rsi'`), or with their inputs (`{ id: 'ema', params: { period: 50 } }`). */
+    indicators?: IndicatorSpec[];
+    /** Static bars: the chart shows these, and opens no stream of its own when it has them at mount. */
     data?: OHLCBar[];
     adapter?: DataAdapter;
+    /** `false`: no stream until you say so (no Binance by default); the chart waits for `data`. Default `true`. */
+    stream?: boolean;
     historyLimit?: number;
+    /** What users can do on the chart; changes after mount are applied too (the keys given). */
     features?: FeaturesConfig;
     autoScale?: boolean;
     signalMarkers?: SignalMarker[];
     signalMarkerStyle?: SignalMarkerStyle;
     tradeZones?: TradeZone[];
     tradeZoneStyle?: TradeZoneStyle;
+    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */
+    overrides?: ChartStyleOverrides;
     watermarkText?: string;
     onReady?: (chart: Chart) => void;
     chart?: Chart | null;
@@ -44,9 +54,10 @@
     timeframe = '5m' as TimeFrame,
     theme = 'dark' as 'dark' | 'light' | Theme,
     chartType = 'candlestick' as ChartType,
-    indicators = [] as string[],
+    indicators = [] as IndicatorSpec[],
     data = undefined as OHLCBar[] | undefined,
     adapter = undefined as DataAdapter | undefined,
+    stream = true,
     historyLimit = 500,
     features = undefined as FeaturesConfig | undefined,
     autoScale = true,
@@ -54,6 +65,7 @@
     signalMarkerStyle = undefined as SignalMarkerStyle | undefined,
     tradeZones = undefined as TradeZone[] | undefined,
     tradeZoneStyle = undefined as TradeZoneStyle | undefined,
+    overrides = undefined as ChartStyleOverrides | undefined,
     watermarkText = undefined as string | undefined,
     onReady = undefined as ((chart: Chart) => void) | undefined,
     chart = $bindable(null) as Chart | null,
@@ -68,8 +80,10 @@
   let container: HTMLDivElement;
   let instance: Chart | null = null;
   const indicatorIds = new Map<string, string>();
-  let prevSymbol = symbol;
-  let prevTimeframe = timeframe;
+  /** The stream open now (`symbol|timeframe`), or null. */
+  let streamKey: string | null = null;
+  /** The features last applied, as text. */
+  let featuresKey: string | null = null;
 
   onMount(() => {
     instance = new Chart(container, {
@@ -104,10 +118,12 @@
 
     if (data) {
       instance.setData(data);
-    } else {
+    } else if (stream) {
       const dataAdapter = adapter ?? new BinanceAdapter();
       instance.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });
+      streamKey = `${symbol}|${timeframe}`;
     }
+    featuresKey = JSON.stringify($state.snapshot(features) ?? null);
 
     onReady?.(instance);
   });
@@ -121,44 +137,55 @@
     }
   });
 
+  // A stream of its own while it has no data; `stream={false}` closes it. Data given later leaves it be.
   $effect(() => {
-    if (!instance || data) return;
-    const _s = symbol;
-    const _tf = timeframe;
-    if (_s === prevSymbol && _tf === prevTimeframe) return;
-    prevSymbol = _s;
-    prevTimeframe = _tf;
+    const key = `${symbol}|${timeframe}`;
+    const on = stream;
+    const hasData = !!data;
+    if (!instance) return;
+    if (!on) {
+      if (streamKey !== null) instance.disconnectStream();
+      streamKey = null;
+      return;
+    }
+    if (hasData || streamKey === key) return;
+    streamKey = key;
     instance.disconnectStream();
     const dataAdapter = adapter ?? new BinanceAdapter();
-    instance.connect({ adapter: dataAdapter, symbol: _s, timeframe: _tf, historyLimit });
+    instance.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });
     if (watermarkText) instance.setWatermark(watermarkText);
   });
 
+  $effect(() => {
+    const next = $state.snapshot(features);
+    const key = JSON.stringify(next ?? null);
+    if (!instance || key === featuresKey) return;
+    featuresKey = key;
+    if (next) instance.setFeatures(next);
+  });
+
   $effect(() => { instance?.setTheme(resolveTheme(theme)); });
   $effect(() => { instance?.setChartType(chartType); });
   $effect(() => { if (data) instance?.setData(data); });
 
   $effect(() => {
-    if (!instance) return;
-    const desired = new Set(indicators);
-    for (const [name, instanceId] of indicatorIds) {
-      if (!desired.has(name)) {
-        instance.removeIndicator(instanceId);
-        indicatorIds.delete(name);
-      }
-    }
-    for (const name of indicators) {
-      if (!indicatorIds.has(name)) {
-        const instanceId = instance.addIndicator(name);
-        if (instanceId) indicatorIds.set(name, instanceId);
-      }
-    }
+    const specs = $state.snapshot(indicators) as IndicatorSpec[];
+    if (instance) syncIndicators(instance, specs, indicatorIds);
   });
 
   $effect(() => { if (signalMarkers) instance?.setSignalMarkers(signalMarkers); });
   $effect(() => { if (signalMarkerStyle) instance?.setSignalMarkerStyle(signalMarkerStyle); });
   $effect(() => { if (tradeZones) instance?.setTradeZones(tradeZones); });
   $effect(() => { if (tradeZoneStyle) instance?.setTradeZoneStyle(tradeZoneStyle); });
+  // All of the host's overrides: keys left out of the prop are taken away.
+  // Without the prop, overrides set through the chart itself are left alone.
+  let overridesGiven = false;
+  $effect(() => {
+    const next = $state.snapshot(overrides);
+    if (next === undefined && !overridesGiven) return;
+    overridesGiven = next !== undefined;
+    instance?.setOverrides(next ?? {});
+  });
 </script>
 
 <div bind:this={container} style="width:100%;height:100%"></div>

package/dist/TradeCanvas.svelte.d.ts

@@ -1,20 +1,27 @@
 import { Chart } from '@tradecanvas/chart';
-import type { ChartType, TimeFrame, FeaturesConfig, Theme, OHLCBar, SignalMarker, TradeZone, SignalMarkerStyle, TradeZoneStyle, DataAdapter } from '@tradecanvas/chart';
+import type { ChartType, TimeFrame, FeaturesConfig, Theme, OHLCBar, SignalMarker, TradeZone, SignalMarkerStyle, TradeZoneStyle, DataAdapter, ChartStyleOverrides, IndicatorSpec } from '@tradecanvas/chart';
 interface Props {
     symbol?: string;
     timeframe?: TimeFrame;
     theme?: 'dark' | 'light' | Theme;
     chartType?: ChartType;
-    indicators?: string[];
+    /** Indicators by id (`'rsi'`), or with their inputs (`{ id: 'ema', params: { period: 50 } }`). */
+    indicators?: IndicatorSpec[];
+    /** Static bars: the chart shows these, and opens no stream of its own when it has them at mount. */
     data?: OHLCBar[];
     adapter?: DataAdapter;
+    /** `false`: no stream until you say so (no Binance by default); the chart waits for `data`. Default `true`. */
+    stream?: boolean;
     historyLimit?: number;
+    /** What users can do on the chart; changes after mount are applied too (the keys given). */
     features?: FeaturesConfig;
     autoScale?: boolean;
     signalMarkers?: SignalMarker[];
     signalMarkerStyle?: SignalMarkerStyle;
     tradeZones?: TradeZone[];
     tradeZoneStyle?: TradeZoneStyle;
+    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */
+    overrides?: ChartStyleOverrides;
     watermarkText?: string;
     onReady?: (chart: Chart) => void;
     chart?: Chart | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradecanvas/svelte",
-  "version": "1.0.15",
+  "version": "1.2.0",
   "type": "module",
   "description": "Svelte 5 component for @tradecanvas/chart — reactive props, runes, zero boilerplate.",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@tradecanvas/chart": "1.12.0"
+    "@tradecanvas/chart": "1.14.0"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"