@tradecanvas/vue 1.1.0 → 1.2.2

package/README.md

@@ -39,7 +39,7 @@ Streams live Binance data by default. Pass `:data="bars"` for static OHLC, or `:
 
 ## Props & events
 
-Props: `symbol`, `timeframe`, `theme`, `chartType`, `indicators`, `data`, `adapter`, `historyLimit`, `features`, `autoScale`, `signalMarkers`, `signalMarkerStyle`, `tradeZones`, `tradeZoneStyle`, `overrides` (style overrides by key, all of your app's), `watermarkText`.
+Props: `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`.
 
 Events: `@ready="(chart) => …"`, `@crosshairMove="(payload) => …"`.
 

package/dist/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`),t=require(`@tradecanvas/chart`);var n=(0,e.defineComponent)({__name:`TradeCanvas`,props:{symbol:{default:`BTCUSDT`},timeframe:{default:`5m`},theme:{default:`dark`},chartType:{default:`candlestick`},indicators:{default:()=>[]},data:{},adapter:{},historyLimit:{default:500},features:{},autoScale:{type:Boolean,default:!0},signalMarkers:{},signalMarkerStyle:{},tradeZones:{},tradeZoneStyle:{},overrides:{},watermarkText:{}},emits:[`ready`,`crosshairMove`],setup(n,{expose:r,emit:i}){let a=n,o=i;function s(e){return e===`dark`?t.DARK_THEME:e===`light`?t.LIGHT_THEME:e}let c=(0,e.ref)(),l=null,u=new Map;function d(){return l}function f(e){l?.screenshot(e)}function p(){return l?.screenshotDataURL()??null}return r({getChart:d,screenshot:f,screenshotDataURL:p}),(0,e.onMounted)(()=>{if(c.value){if(l=new t.Chart(c.value,{chartType:a.chartType,theme:s(a.theme),autoScale:a.autoScale,rightMargin:5,crosshair:{mode:`magnet`},watermark:a.watermarkText?{text:a.watermarkText,fontSize:48,color:`rgba(255,255,255,0.03)`}:void 0,features:{drawings:!0,drawingMagnet:!0,drawingUndoRedo:!0,indicators:!0,trading:!0,volume:!0,legend:!0,crosshair:!0,keyboard:!0,screenshot:!0,alerts:!0,barCountdown:!0,logScale:!0,watermark:!0,...a.features}}),a.data)l.setData(a.data);else{let e=a.adapter??new t.BinanceAdapter;l.connect({adapter:e,symbol:a.symbol,timeframe:a.timeframe,historyLimit:a.historyLimit})}for(let e of a.indicators){let t=l.addIndicator(e);t&&u.set(e,t)}a.signalMarkers&&l.setSignalMarkers(a.signalMarkers),a.signalMarkerStyle&&l.setSignalMarkerStyle(a.signalMarkerStyle),a.tradeZones&&l.setTradeZones(a.tradeZones),a.tradeZoneStyle&&l.setTradeZoneStyle(a.tradeZoneStyle),a.overrides&&l.setOverrides(a.overrides),o(`ready`,l)}}),(0,e.onUnmounted)(()=>{l&&=(l.disconnectStream(),l.destroy(),null)}),(0,e.watch)(()=>[a.symbol,a.timeframe],([e,n])=>{if(!l||a.data)return;l.disconnectStream();let r=a.adapter??new t.BinanceAdapter;l.connect({adapter:r,symbol:e,timeframe:n,historyLimit:a.historyLimit}),a.watermarkText&&l.setWatermark(a.watermarkText)}),(0,e.watch)(()=>a.theme,e=>{l?.setTheme(s(e))}),(0,e.watch)(()=>a.chartType,e=>{l?.setChartType(e)}),(0,e.watch)(()=>a.data,e=>{e&&l?.setData(e)},{deep:!0}),(0,e.watch)(()=>a.indicators,e=>{if(!l)return;let t=new Set(e);for(let[e,n]of u)t.has(e)||(l.removeIndicator(n),u.delete(e));for(let t of e)if(!u.has(t)){let e=l.addIndicator(t);e&&u.set(t,e)}},{deep:!0}),(0,e.watch)(()=>a.signalMarkers,e=>{e&&l?.setSignalMarkers(e)},{deep:!0}),(0,e.watch)(()=>a.signalMarkerStyle,e=>{e&&l?.setSignalMarkerStyle(e)},{deep:!0}),(0,e.watch)(()=>a.tradeZones,e=>{e&&l?.setTradeZones(e)},{deep:!0}),(0,e.watch)(()=>a.tradeZoneStyle,e=>{e&&l?.setTradeZoneStyle(e)},{deep:!0}),(0,e.watch)(()=>a.overrides,e=>{l?.setOverrides({...e})},{deep:!0}),(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{ref_key:`containerEl`,ref:c,style:{width:`100%`,height:`100%`}},null,512))}});exports.TradeCanvas=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`),t=require(`@tradecanvas/chart`);var n=(0,e.defineComponent)({__name:`TradeCanvas`,props:{symbol:{default:`BTCUSDT`},timeframe:{default:`5m`},theme:{default:`dark`},chartType:{default:`candlestick`},indicators:{default:()=>[]},data:{},adapter:{},stream:{type:Boolean,default:!0},historyLimit:{default:500},features:{},autoScale:{type:Boolean,default:!0},signalMarkers:{},signalMarkerStyle:{},tradeZones:{},tradeZoneStyle:{},overrides:{},watermarkText:{}},emits:[`ready`,`crosshairMove`],setup(n,{expose:r,emit:i}){let a=n,o=i;function s(e){return e===`dark`?t.DARK_THEME:e===`light`?t.LIGHT_THEME:e}let c=(0,e.ref)(),l=null,u=new Map,d=null,f=e=>e.map(e=>typeof e==`string`?e:{id:e.id,...e.params?{params:{...e.params}}:{},...e.position?{position:e.position}:{}}),p=JSON.stringify(a.features??null);function m(){if(!l)return;if(!a.stream){d!==null&&l.disconnectStream(),d=null;return}if(a.data)return;let e=`${a.symbol}|${a.timeframe}`;if(d===e)return;let n=d!==null;d=e,n&&l.disconnectStream();let r=a.adapter??new t.BinanceAdapter;l.connect({adapter:r,symbol:a.symbol,timeframe:a.timeframe,historyLimit:a.historyLimit}),n&&a.watermarkText&&l.setWatermark(a.watermarkText)}function h(){return l}function g(e){l?.screenshot(e)}function _(){return l?.screenshotDataURL()??null}return r({getChart:h,screenshot:g,screenshotDataURL:_}),(0,e.onMounted)(()=>{c.value&&(l=new t.Chart(c.value,{chartType:a.chartType,theme:s(a.theme),autoScale:a.autoScale,rightMargin:5,crosshair:{mode:`magnet`},watermark:a.watermarkText?{text:a.watermarkText,fontSize:48,color:`rgba(255,255,255,0.03)`}:void 0,features:{drawings:!0,drawingMagnet:!0,drawingUndoRedo:!0,indicators:!0,trading:!0,volume:!0,legend:!0,crosshair:!0,keyboard:!0,screenshot:!0,alerts:!0,barCountdown:!0,logScale:!0,watermark:!0,...a.features}}),a.data?l.setData(a.data):m(),(0,t.syncIndicators)(l,f(a.indicators),u),a.signalMarkers&&l.setSignalMarkers(a.signalMarkers),a.signalMarkerStyle&&l.setSignalMarkerStyle(a.signalMarkerStyle),a.tradeZones&&l.setTradeZones(a.tradeZones),a.tradeZoneStyle&&l.setTradeZoneStyle(a.tradeZoneStyle),a.overrides&&l.setOverrides(a.overrides),o(`ready`,l))}),(0,e.onUnmounted)(()=>{l&&=(l.disconnectStream(),l.destroy(),null)}),(0,e.watch)(()=>[a.symbol,a.timeframe,!a.data,a.stream],m),(0,e.watch)(()=>a.features,e=>{let t=JSON.stringify(e??null);t!==p&&(p=t,e&&l?.setFeatures({...e}))},{deep:!0}),(0,e.watch)(()=>a.theme,e=>{l?.setTheme(s(e))}),(0,e.watch)(()=>a.chartType,e=>{l?.setChartType(e)}),(0,e.watch)(()=>a.data,e=>{e&&l?.setData(e)},{deep:!0}),(0,e.watch)(()=>a.indicators,e=>{l&&(0,t.syncIndicators)(l,f(e),u)},{deep:!0}),(0,e.watch)(()=>a.signalMarkers,e=>{e&&l?.setSignalMarkers(e)},{deep:!0}),(0,e.watch)(()=>a.signalMarkerStyle,e=>{e&&l?.setSignalMarkerStyle(e)},{deep:!0}),(0,e.watch)(()=>a.tradeZones,e=>{e&&l?.setTradeZones(e)},{deep:!0}),(0,e.watch)(()=>a.tradeZoneStyle,e=>{e&&l?.setTradeZoneStyle(e)},{deep:!0}),(0,e.watch)(()=>a.overrides,e=>{l?.setOverrides({...e})},{deep:!0}),(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{ref_key:`containerEl`,ref:c,style:{width:`100%`,height:`100%`}},null,512))}});exports.TradeCanvas=n;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../src/TradeCanvas.vue","../src/TradeCanvas.vue"],"sourcesContent":["<template>\n  <div ref=\"containerEl\" :style=\"{ width: '100%', height: '100%' }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  ChartStyleOverrides,\n} from '@tradecanvas/chart';\n\nconst props = withDefaults(\n  defineProps<{\n    symbol?: string;\n    timeframe?: TimeFrame;\n    theme?: 'dark' | 'light' | Theme;\n    chartType?: ChartType;\n    indicators?: string[];\n    data?: OHLCBar[];\n    adapter?: DataAdapter;\n    historyLimit?: number;\n    features?: FeaturesConfig;\n    autoScale?: boolean;\n    signalMarkers?: SignalMarker[];\n    signalMarkerStyle?: SignalMarkerStyle;\n    tradeZones?: TradeZone[];\n    tradeZoneStyle?: TradeZoneStyle;\n    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */\n    overrides?: ChartStyleOverrides;\n    watermarkText?: string;\n  }>(),\n  {\n    symbol: 'BTCUSDT',\n    timeframe: '5m' as TimeFrame,\n    theme: 'dark',\n    chartType: 'candlestick' as ChartType,\n    indicators: () => [],\n    historyLimit: 500,\n    autoScale: true,\n  },\n);\n\nconst emit = defineEmits<{\n  ready: [chart: Chart];\n  crosshairMove: [payload: unknown];\n}>();\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme): Theme {\n  if (theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme as Theme;\n}\n\nconst containerEl = ref<HTMLDivElement>();\nlet chart: Chart | null = null;\nconst indicatorIds = new Map<string, string>();\n\nfunction getChart(): Chart | null {\n  return chart;\n}\n\nfunction screenshot(filename?: string): void {\n  chart?.screenshot(filename);\n}\n\nfunction screenshotDataURL(): string | null {\n  return chart?.screenshotDataURL() ?? null;\n}\n\ndefineExpose({ getChart, screenshot, screenshotDataURL });\n\nonMounted(() => {\n  if (!containerEl.value) return;\n\n  chart = new Chart(containerEl.value, {\n    chartType: props.chartType,\n    theme: resolveTheme(props.theme),\n    autoScale: props.autoScale,\n    rightMargin: 5,\n    crosshair: { mode: 'magnet' },\n    watermark: props.watermarkText\n      ? { text: props.watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }\n      : undefined,\n    features: {\n      drawings: true,\n      drawingMagnet: true,\n      drawingUndoRedo: true,\n      indicators: true,\n      trading: true,\n      volume: true,\n      legend: true,\n      crosshair: true,\n      keyboard: true,\n      screenshot: true,\n      alerts: true,\n      barCountdown: true,\n      logScale: true,\n      watermark: true,\n      ...props.features,\n    },\n  });\n\n  if (props.data) {\n    chart.setData(props.data);\n  } else {\n    const adapter = props.adapter ?? new BinanceAdapter();\n    chart.connect({ adapter, symbol: props.symbol, timeframe: props.timeframe, historyLimit: props.historyLimit });\n  }\n\n  // Apply initial reactive collections not covered by the constructor options.\n  // Vue's watches aren't immediate, so without this the first render of\n  // indicators / signal markers / trade zones would be dropped.\n  for (const name of props.indicators) {\n    const instanceId = chart.addIndicator(name);\n    if (instanceId) indicatorIds.set(name, instanceId);\n  }\n  if (props.signalMarkers) chart.setSignalMarkers(props.signalMarkers);\n  if (props.signalMarkerStyle) chart.setSignalMarkerStyle(props.signalMarkerStyle);\n  if (props.tradeZones) chart.setTradeZones(props.tradeZones);\n  if (props.tradeZoneStyle) chart.setTradeZoneStyle(props.tradeZoneStyle);\n  if (props.overrides) chart.setOverrides(props.overrides);\n\n  emit('ready', chart);\n});\n\nonUnmounted(() => {\n  if (chart) {\n    chart.disconnectStream();\n    chart.destroy();\n    chart = null;\n  }\n});\n\nwatch(\n  () => [props.symbol, props.timeframe] as const,\n  ([newSymbol, newTimeframe]) => {\n    if (!chart || props.data) return;\n    chart.disconnectStream();\n    const adapter = props.adapter ?? new BinanceAdapter();\n    chart.connect({ adapter, symbol: newSymbol, timeframe: newTimeframe, historyLimit: props.historyLimit });\n    if (props.watermarkText) chart.setWatermark(props.watermarkText);\n  },\n);\n\nwatch(() => props.theme, (t) => { chart?.setTheme(resolveTheme(t)); });\nwatch(() => props.chartType, (ct) => { chart?.setChartType(ct); });\nwatch(() => props.data, (d) => { if (d) chart?.setData(d); }, { deep: true });\n\nwatch(\n  () => props.indicators,\n  (newIndicators) => {\n    if (!chart) return;\n    const desired = new Set(newIndicators);\n    for (const [name, instanceId] of indicatorIds) {\n      if (!desired.has(name)) {\n        chart.removeIndicator(instanceId);\n        indicatorIds.delete(name);\n      }\n    }\n    for (const name of newIndicators) {\n      if (!indicatorIds.has(name)) {\n        const instanceId = chart.addIndicator(name);\n        if (instanceId) indicatorIds.set(name, instanceId);\n      }\n    }\n  },\n  { deep: true },\n);\n\nwatch(() => props.signalMarkers, (m) => { if (m) chart?.setSignalMarkers(m); }, { deep: true });\nwatch(() => props.signalMarkerStyle, (s) => { if (s) chart?.setSignalMarkerStyle(s); }, { deep: true });\nwatch(() => props.tradeZones, (z) => { if (z) chart?.setTradeZones(z); }, { deep: true });\nwatch(() => props.tradeZoneStyle, (s) => { if (s) chart?.setTradeZoneStyle(s); }, { deep: true });\n// All of the host's overrides: keys left out of the prop are taken away.\nwatch(() => props.overrides, (o) => { chart?.setOverrides({ ...o }); }, { deep: true });\n</script>\n","<template>\n  <div ref=\"containerEl\" :style=\"{ width: '100%', height: '100%' }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  ChartStyleOverrides,\n} from '@tradecanvas/chart';\n\nconst props = withDefaults(\n  defineProps<{\n    symbol?: string;\n    timeframe?: TimeFrame;\n    theme?: 'dark' | 'light' | Theme;\n    chartType?: ChartType;\n    indicators?: string[];\n    data?: OHLCBar[];\n    adapter?: DataAdapter;\n    historyLimit?: number;\n    features?: FeaturesConfig;\n    autoScale?: boolean;\n    signalMarkers?: SignalMarker[];\n    signalMarkerStyle?: SignalMarkerStyle;\n    tradeZones?: TradeZone[];\n    tradeZoneStyle?: TradeZoneStyle;\n    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */\n    overrides?: ChartStyleOverrides;\n    watermarkText?: string;\n  }>(),\n  {\n    symbol: 'BTCUSDT',\n    timeframe: '5m' as TimeFrame,\n    theme: 'dark',\n    chartType: 'candlestick' as ChartType,\n    indicators: () => [],\n    historyLimit: 500,\n    autoScale: true,\n  },\n);\n\nconst emit = defineEmits<{\n  ready: [chart: Chart];\n  crosshairMove: [payload: unknown];\n}>();\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme): Theme {\n  if (theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme as Theme;\n}\n\nconst containerEl = ref<HTMLDivElement>();\nlet chart: Chart | null = null;\nconst indicatorIds = new Map<string, string>();\n\nfunction getChart(): Chart | null {\n  return chart;\n}\n\nfunction screenshot(filename?: string): void {\n  chart?.screenshot(filename);\n}\n\nfunction screenshotDataURL(): string | null {\n  return chart?.screenshotDataURL() ?? null;\n}\n\ndefineExpose({ getChart, screenshot, screenshotDataURL });\n\nonMounted(() => {\n  if (!containerEl.value) return;\n\n  chart = new Chart(containerEl.value, {\n    chartType: props.chartType,\n    theme: resolveTheme(props.theme),\n    autoScale: props.autoScale,\n    rightMargin: 5,\n    crosshair: { mode: 'magnet' },\n    watermark: props.watermarkText\n      ? { text: props.watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }\n      : undefined,\n    features: {\n      drawings: true,\n      drawingMagnet: true,\n      drawingUndoRedo: true,\n      indicators: true,\n      trading: true,\n      volume: true,\n      legend: true,\n      crosshair: true,\n      keyboard: true,\n      screenshot: true,\n      alerts: true,\n      barCountdown: true,\n      logScale: true,\n      watermark: true,\n      ...props.features,\n    },\n  });\n\n  if (props.data) {\n    chart.setData(props.data);\n  } else {\n    const adapter = props.adapter ?? new BinanceAdapter();\n    chart.connect({ adapter, symbol: props.symbol, timeframe: props.timeframe, historyLimit: props.historyLimit });\n  }\n\n  // Apply initial reactive collections not covered by the constructor options.\n  // Vue's watches aren't immediate, so without this the first render of\n  // indicators / signal markers / trade zones would be dropped.\n  for (const name of props.indicators) {\n    const instanceId = chart.addIndicator(name);\n    if (instanceId) indicatorIds.set(name, instanceId);\n  }\n  if (props.signalMarkers) chart.setSignalMarkers(props.signalMarkers);\n  if (props.signalMarkerStyle) chart.setSignalMarkerStyle(props.signalMarkerStyle);\n  if (props.tradeZones) chart.setTradeZones(props.tradeZones);\n  if (props.tradeZoneStyle) chart.setTradeZoneStyle(props.tradeZoneStyle);\n  if (props.overrides) chart.setOverrides(props.overrides);\n\n  emit('ready', chart);\n});\n\nonUnmounted(() => {\n  if (chart) {\n    chart.disconnectStream();\n    chart.destroy();\n    chart = null;\n  }\n});\n\nwatch(\n  () => [props.symbol, props.timeframe] as const,\n  ([newSymbol, newTimeframe]) => {\n    if (!chart || props.data) return;\n    chart.disconnectStream();\n    const adapter = props.adapter ?? new BinanceAdapter();\n    chart.connect({ adapter, symbol: newSymbol, timeframe: newTimeframe, historyLimit: props.historyLimit });\n    if (props.watermarkText) chart.setWatermark(props.watermarkText);\n  },\n);\n\nwatch(() => props.theme, (t) => { chart?.setTheme(resolveTheme(t)); });\nwatch(() => props.chartType, (ct) => { chart?.setChartType(ct); });\nwatch(() => props.data, (d) => { if (d) chart?.setData(d); }, { deep: true });\n\nwatch(\n  () => props.indicators,\n  (newIndicators) => {\n    if (!chart) return;\n    const desired = new Set(newIndicators);\n    for (const [name, instanceId] of indicatorIds) {\n      if (!desired.has(name)) {\n        chart.removeIndicator(instanceId);\n        indicatorIds.delete(name);\n      }\n    }\n    for (const name of newIndicators) {\n      if (!indicatorIds.has(name)) {\n        const instanceId = chart.addIndicator(name);\n        if (instanceId) indicatorIds.set(name, instanceId);\n      }\n    }\n  },\n  { deep: true },\n);\n\nwatch(() => props.signalMarkers, (m) => { if (m) chart?.setSignalMarkers(m); }, { deep: true });\nwatch(() => props.signalMarkerStyle, (s) => { if (s) chart?.setSignalMarkerStyle(s); }, { deep: true });\nwatch(() => props.tradeZones, (z) => { if (z) chart?.setTradeZones(z); }, { deep: true });\nwatch(() => props.tradeZoneStyle, (s) => { if (s) chart?.setTradeZoneStyle(s); }, { deep: true });\n// All of the host's overrides: keys left out of the prop are taken away.\nwatch(() => props.overrides, (o) => { chart?.setOverrides({ ...o }); }, { deep: true });\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/TradeCanvas.vue","../src/TradeCanvas.vue"],"sourcesContent":["<template>\n  <div ref=\"containerEl\" :style=\"{ width: '100%', height: '100%' }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n  syncIndicators,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  ChartStyleOverrides,\n  IndicatorSpec,\n} from '@tradecanvas/chart';\n\nconst props = withDefaults(\n  defineProps<{\n    symbol?: string;\n    timeframe?: TimeFrame;\n    theme?: 'dark' | 'light' | Theme;\n    chartType?: ChartType;\n    /** Indicators by id (`'rsi'`), or with their inputs (`{ id: 'ema', params: { period: 50 } }`). */\n    indicators?: IndicatorSpec[];\n    /** Static bars: the chart shows these, and opens no stream of its own when it has them at mount. */\n    data?: OHLCBar[];\n    adapter?: DataAdapter;\n    /** `false`: no stream until you say so (no Binance by default); the chart waits for `data`. Default `true`. */\n    stream?: boolean;\n    historyLimit?: number;\n    /** What users can do on the chart; changes after mount are applied too (the keys given). */\n    features?: FeaturesConfig;\n    autoScale?: boolean;\n    signalMarkers?: SignalMarker[];\n    signalMarkerStyle?: SignalMarkerStyle;\n    tradeZones?: TradeZone[];\n    tradeZoneStyle?: TradeZoneStyle;\n    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */\n    overrides?: ChartStyleOverrides;\n    watermarkText?: string;\n  }>(),\n  {\n    symbol: 'BTCUSDT',\n    timeframe: '5m' as TimeFrame,\n    theme: 'dark',\n    chartType: 'candlestick' as ChartType,\n    indicators: () => [],\n    stream: true,\n    historyLimit: 500,\n    autoScale: true,\n  },\n);\n\nconst emit = defineEmits<{\n  ready: [chart: Chart];\n  crosshairMove: [payload: unknown];\n}>();\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme): Theme {\n  if (theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme as Theme;\n}\n\nconst containerEl = ref<HTMLDivElement>();\nlet chart: Chart | null = null;\nconst indicatorIds = new Map<string, string>();\n/** The stream open now (`symbol|timeframe`), or null. */\nlet streamKey: string | null = null;\n\n/** The specs as plain values (not Vue's proxies), for the chart to keep. */\nconst plainSpecs = (specs: readonly IndicatorSpec[]): IndicatorSpec[] =>\n  specs.map((spec) => (typeof spec === 'string'\n    ? spec\n    : { id: spec.id, ...(spec.params ? { params: { ...spec.params } } : {}), ...(spec.position ? { position: spec.position } : {}) }));\n/** The features last applied, as text. */\nlet featuresKey = JSON.stringify(props.features ?? null);\n\n/** A stream of its own while it has no data; `stream: false` closes it. Data given later leaves it be. */\nfunction syncStream(): void {\n  if (!chart) return;\n  if (!props.stream) {\n    if (streamKey !== null) chart.disconnectStream();\n    streamKey = null;\n    return;\n  }\n  if (props.data) return;\n  const key = `${props.symbol}|${props.timeframe}`;\n  if (streamKey === key) return;\n  const opened = streamKey !== null;\n  streamKey = key;\n  if (opened) chart.disconnectStream();\n  const adapter = props.adapter ?? new BinanceAdapter();\n  chart.connect({ adapter, symbol: props.symbol, timeframe: props.timeframe, historyLimit: props.historyLimit });\n  if (opened && props.watermarkText) chart.setWatermark(props.watermarkText);\n}\n\nfunction getChart(): Chart | null {\n  return chart;\n}\n\nfunction screenshot(filename?: string): void {\n  chart?.screenshot(filename);\n}\n\nfunction screenshotDataURL(): string | null {\n  return chart?.screenshotDataURL() ?? null;\n}\n\ndefineExpose({ getChart, screenshot, screenshotDataURL });\n\nonMounted(() => {\n  if (!containerEl.value) return;\n\n  chart = new Chart(containerEl.value, {\n    chartType: props.chartType,\n    theme: resolveTheme(props.theme),\n    autoScale: props.autoScale,\n    rightMargin: 5,\n    crosshair: { mode: 'magnet' },\n    watermark: props.watermarkText\n      ? { text: props.watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }\n      : undefined,\n    features: {\n      drawings: true,\n      drawingMagnet: true,\n      drawingUndoRedo: true,\n      indicators: true,\n      trading: true,\n      volume: true,\n      legend: true,\n      crosshair: true,\n      keyboard: true,\n      screenshot: true,\n      alerts: true,\n      barCountdown: true,\n      logScale: true,\n      watermark: true,\n      ...props.features,\n    },\n  });\n\n  if (props.data) chart.setData(props.data);\n  else syncStream();\n\n  // Apply initial reactive collections not covered by the constructor options.\n  // Vue's watches aren't immediate, so without this the first render of\n  // indicators / signal markers / trade zones would be dropped.\n  syncIndicators(chart, plainSpecs(props.indicators), indicatorIds);\n  if (props.signalMarkers) chart.setSignalMarkers(props.signalMarkers);\n  if (props.signalMarkerStyle) chart.setSignalMarkerStyle(props.signalMarkerStyle);\n  if (props.tradeZones) chart.setTradeZones(props.tradeZones);\n  if (props.tradeZoneStyle) chart.setTradeZoneStyle(props.tradeZoneStyle);\n  if (props.overrides) chart.setOverrides(props.overrides);\n\n  emit('ready', chart);\n});\n\nonUnmounted(() => {\n  if (chart) {\n    chart.disconnectStream();\n    chart.destroy();\n    chart = null;\n  }\n});\n\nwatch(() => [props.symbol, props.timeframe, !props.data, props.stream] as const, syncStream);\nwatch(() => props.features, (f) => {\n  const key = JSON.stringify(f ?? null);\n  if (key === featuresKey) return;\n  featuresKey = key;\n  if (f) chart?.setFeatures({ ...f });\n}, { deep: true });\n\nwatch(() => props.theme, (t) => { chart?.setTheme(resolveTheme(t)); });\nwatch(() => props.chartType, (ct) => { chart?.setChartType(ct); });\nwatch(() => props.data, (d) => { if (d) chart?.setData(d); }, { deep: true });\n\nwatch(\n  () => props.indicators,\n  (specs) => { if (chart) syncIndicators(chart, plainSpecs(specs), indicatorIds); },\n  { deep: true },\n);\n\nwatch(() => props.signalMarkers, (m) => { if (m) chart?.setSignalMarkers(m); }, { deep: true });\nwatch(() => props.signalMarkerStyle, (s) => { if (s) chart?.setSignalMarkerStyle(s); }, { deep: true });\nwatch(() => props.tradeZones, (z) => { if (z) chart?.setTradeZones(z); }, { deep: true });\nwatch(() => props.tradeZoneStyle, (s) => { if (s) chart?.setTradeZoneStyle(s); }, { deep: true });\n// All of the host's overrides: keys left out of the prop are taken away.\nwatch(() => props.overrides, (o) => { chart?.setOverrides({ ...o }); }, { deep: true });\n</script>\n","<template>\n  <div ref=\"containerEl\" :style=\"{ width: '100%', height: '100%' }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n  syncIndicators,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  ChartStyleOverrides,\n  IndicatorSpec,\n} from '@tradecanvas/chart';\n\nconst props = withDefaults(\n  defineProps<{\n    symbol?: string;\n    timeframe?: TimeFrame;\n    theme?: 'dark' | 'light' | Theme;\n    chartType?: ChartType;\n    /** Indicators by id (`'rsi'`), or with their inputs (`{ id: 'ema', params: { period: 50 } }`). */\n    indicators?: IndicatorSpec[];\n    /** Static bars: the chart shows these, and opens no stream of its own when it has them at mount. */\n    data?: OHLCBar[];\n    adapter?: DataAdapter;\n    /** `false`: no stream until you say so (no Binance by default); the chart waits for `data`. Default `true`. */\n    stream?: boolean;\n    historyLimit?: number;\n    /** What users can do on the chart; changes after mount are applied too (the keys given). */\n    features?: FeaturesConfig;\n    autoScale?: boolean;\n    signalMarkers?: SignalMarker[];\n    signalMarkerStyle?: SignalMarkerStyle;\n    tradeZones?: TradeZone[];\n    tradeZoneStyle?: TradeZoneStyle;\n    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */\n    overrides?: ChartStyleOverrides;\n    watermarkText?: string;\n  }>(),\n  {\n    symbol: 'BTCUSDT',\n    timeframe: '5m' as TimeFrame,\n    theme: 'dark',\n    chartType: 'candlestick' as ChartType,\n    indicators: () => [],\n    stream: true,\n    historyLimit: 500,\n    autoScale: true,\n  },\n);\n\nconst emit = defineEmits<{\n  ready: [chart: Chart];\n  crosshairMove: [payload: unknown];\n}>();\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme): Theme {\n  if (theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme as Theme;\n}\n\nconst containerEl = ref<HTMLDivElement>();\nlet chart: Chart | null = null;\nconst indicatorIds = new Map<string, string>();\n/** The stream open now (`symbol|timeframe`), or null. */\nlet streamKey: string | null = null;\n\n/** The specs as plain values (not Vue's proxies), for the chart to keep. */\nconst plainSpecs = (specs: readonly IndicatorSpec[]): IndicatorSpec[] =>\n  specs.map((spec) => (typeof spec === 'string'\n    ? spec\n    : { id: spec.id, ...(spec.params ? { params: { ...spec.params } } : {}), ...(spec.position ? { position: spec.position } : {}) }));\n/** The features last applied, as text. */\nlet featuresKey = JSON.stringify(props.features ?? null);\n\n/** A stream of its own while it has no data; `stream: false` closes it. Data given later leaves it be. */\nfunction syncStream(): void {\n  if (!chart) return;\n  if (!props.stream) {\n    if (streamKey !== null) chart.disconnectStream();\n    streamKey = null;\n    return;\n  }\n  if (props.data) return;\n  const key = `${props.symbol}|${props.timeframe}`;\n  if (streamKey === key) return;\n  const opened = streamKey !== null;\n  streamKey = key;\n  if (opened) chart.disconnectStream();\n  const adapter = props.adapter ?? new BinanceAdapter();\n  chart.connect({ adapter, symbol: props.symbol, timeframe: props.timeframe, historyLimit: props.historyLimit });\n  if (opened && props.watermarkText) chart.setWatermark(props.watermarkText);\n}\n\nfunction getChart(): Chart | null {\n  return chart;\n}\n\nfunction screenshot(filename?: string): void {\n  chart?.screenshot(filename);\n}\n\nfunction screenshotDataURL(): string | null {\n  return chart?.screenshotDataURL() ?? null;\n}\n\ndefineExpose({ getChart, screenshot, screenshotDataURL });\n\nonMounted(() => {\n  if (!containerEl.value) return;\n\n  chart = new Chart(containerEl.value, {\n    chartType: props.chartType,\n    theme: resolveTheme(props.theme),\n    autoScale: props.autoScale,\n    rightMargin: 5,\n    crosshair: { mode: 'magnet' },\n    watermark: props.watermarkText\n      ? { text: props.watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }\n      : undefined,\n    features: {\n      drawings: true,\n      drawingMagnet: true,\n      drawingUndoRedo: true,\n      indicators: true,\n      trading: true,\n      volume: true,\n      legend: true,\n      crosshair: true,\n      keyboard: true,\n      screenshot: true,\n      alerts: true,\n      barCountdown: true,\n      logScale: true,\n      watermark: true,\n      ...props.features,\n    },\n  });\n\n  if (props.data) chart.setData(props.data);\n  else syncStream();\n\n  // Apply initial reactive collections not covered by the constructor options.\n  // Vue's watches aren't immediate, so without this the first render of\n  // indicators / signal markers / trade zones would be dropped.\n  syncIndicators(chart, plainSpecs(props.indicators), indicatorIds);\n  if (props.signalMarkers) chart.setSignalMarkers(props.signalMarkers);\n  if (props.signalMarkerStyle) chart.setSignalMarkerStyle(props.signalMarkerStyle);\n  if (props.tradeZones) chart.setTradeZones(props.tradeZones);\n  if (props.tradeZoneStyle) chart.setTradeZoneStyle(props.tradeZoneStyle);\n  if (props.overrides) chart.setOverrides(props.overrides);\n\n  emit('ready', chart);\n});\n\nonUnmounted(() => {\n  if (chart) {\n    chart.disconnectStream();\n    chart.destroy();\n    chart = null;\n  }\n});\n\nwatch(() => [props.symbol, props.timeframe, !props.data, props.stream] as const, syncStream);\nwatch(() => props.features, (f) => {\n  const key = JSON.stringify(f ?? null);\n  if (key === featuresKey) return;\n  featuresKey = key;\n  if (f) chart?.setFeatures({ ...f });\n}, { deep: true });\n\nwatch(() => props.theme, (t) => { chart?.setTheme(resolveTheme(t)); });\nwatch(() => props.chartType, (ct) => { chart?.setChartType(ct); });\nwatch(() => props.data, (d) => { if (d) chart?.setData(d); }, { deep: true });\n\nwatch(\n  () => props.indicators,\n  (specs) => { if (chart) syncIndicators(chart, plainSpecs(specs), indicatorIds); },\n  { deep: true },\n);\n\nwatch(() => props.signalMarkers, (m) => { if (m) chart?.setSignalMarkers(m); }, { deep: true });\nwatch(() => props.signalMarkerStyle, (s) => { if (s) chart?.setSignalMarkerStyle(s); }, { deep: true });\nwatch(() => props.tradeZones, (z) => { if (z) chart?.setTradeZones(z); }, { deep: true });\nwatch(() => props.tradeZoneStyle, (s) => { if (s) chart?.setTradeZoneStyle(s); }, { deep: true });\n// All of the host's overrides: keys left out of the prop are taken away.\nwatch(() => props.overrides, (o) => { chart?.setOverrides({ ...o }); }, { deep: true });\n</script>\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { ComponentProvideOptions } from 'vue';
 import { DataAdapter } from '@tradecanvas/chart';
 import { DefineComponent } from 'vue';
 import { FeaturesConfig } from '@tradecanvas/chart';
+import { IndicatorSpec } from '@tradecanvas/chart';
 import { OHLCBar } from '@tradecanvas/chart';
 import { PublicProps } from 'vue';
 import { SignalMarker } from '@tradecanvas/chart';
@@ -20,10 +21,15 @@ declare type __VLS_Props = {
     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[];
@@ -56,7 +62,8 @@ symbol: string;
 timeframe: TimeFrame;
 theme: "dark" | "light" | Theme;
 chartType: ChartType;
-indicators: string[];
+indicators: IndicatorSpec[];
+stream: boolean;
 historyLimit: number;
 autoScale: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {

package/dist/index.js

@@ -1,8 +1,8 @@
 import { createElementBlock as e, defineComponent as t, onMounted as n, onUnmounted as r, openBlock as i, ref as a, watch as o } from "vue";
-import { BinanceAdapter as s, Chart as c, DARK_THEME as l, LIGHT_THEME as u } from "@tradecanvas/chart";
+import { BinanceAdapter as s, Chart as c, DARK_THEME as l, LIGHT_THEME as u, syncIndicators as d } from "@tradecanvas/chart";
 //#endregion
 //#region src/TradeCanvas.vue
-var d = /* @__PURE__ */ t({
+var f = /* @__PURE__ */ t({
 	__name: "TradeCanvas",
 	props: {
 		symbol: { default: "BTCUSDT" },
@@ -12,6 +12,10 @@ var d = /* @__PURE__ */ t({
 		indicators: { default: () => [] },
 		data: {},
 		adapter: {},
+		stream: {
+			type: Boolean,
+			default: !0
+		},
 		historyLimit: { default: 500 },
 		features: {},
 		autoScale: {
@@ -26,110 +30,109 @@ var d = /* @__PURE__ */ t({
 		watermarkText: {}
 	},
 	emits: ["ready", "crosshairMove"],
-	setup(t, { expose: d, emit: f }) {
-		let p = t, m = f;
-		function h(e) {
+	setup(t, { expose: f, emit: p }) {
+		let m = t, h = p;
+		function g(e) {
 			return e === "dark" ? l : e === "light" ? u : e;
 		}
-		let g = a(), _ = null, v = /* @__PURE__ */ new Map();
-		function y() {
-			return _;
+		let _ = a(), v = null, y = /* @__PURE__ */ new Map(), b = null, x = (e) => e.map((e) => typeof e == "string" ? e : {
+			id: e.id,
+			...e.params ? { params: { ...e.params } } : {},
+			...e.position ? { position: e.position } : {}
+		}), S = JSON.stringify(m.features ?? null);
+		function C() {
+			if (!v) return;
+			if (!m.stream) {
+				b !== null && v.disconnectStream(), b = null;
+				return;
+			}
+			if (m.data) return;
+			let e = `${m.symbol}|${m.timeframe}`;
+			if (b === e) return;
+			let t = b !== null;
+			b = e, t && v.disconnectStream();
+			let n = m.adapter ?? new s();
+			v.connect({
+				adapter: n,
+				symbol: m.symbol,
+				timeframe: m.timeframe,
+				historyLimit: m.historyLimit
+			}), t && m.watermarkText && v.setWatermark(m.watermarkText);
+		}
+		function w() {
+			return v;
 		}
-		function b(e) {
-			_?.screenshot(e);
+		function T(e) {
+			v?.screenshot(e);
 		}
-		function x() {
-			return _?.screenshotDataURL() ?? null;
+		function E() {
+			return v?.screenshotDataURL() ?? null;
 		}
-		return d({
-			getChart: y,
-			screenshot: b,
-			screenshotDataURL: x
+		return f({
+			getChart: w,
+			screenshot: T,
+			screenshotDataURL: E
 		}), n(() => {
-			if (g.value) {
-				if (_ = new c(g.value, {
-					chartType: p.chartType,
-					theme: h(p.theme),
-					autoScale: p.autoScale,
-					rightMargin: 5,
-					crosshair: { mode: "magnet" },
-					watermark: p.watermarkText ? {
-						text: p.watermarkText,
-						fontSize: 48,
-						color: "rgba(255,255,255,0.03)"
-					} : void 0,
-					features: {
-						drawings: !0,
-						drawingMagnet: !0,
-						drawingUndoRedo: !0,
-						indicators: !0,
-						trading: !0,
-						volume: !0,
-						legend: !0,
-						crosshair: !0,
-						keyboard: !0,
-						screenshot: !0,
-						alerts: !0,
-						barCountdown: !0,
-						logScale: !0,
-						watermark: !0,
-						...p.features
-					}
-				}), p.data) _.setData(p.data);
-				else {
-					let e = p.adapter ?? new s();
-					_.connect({
-						adapter: e,
-						symbol: p.symbol,
-						timeframe: p.timeframe,
-						historyLimit: p.historyLimit
-					});
-				}
-				for (let e of p.indicators) {
-					let t = _.addIndicator(e);
-					t && v.set(e, t);
+			_.value && (v = new c(_.value, {
+				chartType: m.chartType,
+				theme: g(m.theme),
+				autoScale: m.autoScale,
+				rightMargin: 5,
+				crosshair: { mode: "magnet" },
+				watermark: m.watermarkText ? {
+					text: m.watermarkText,
+					fontSize: 48,
+					color: "rgba(255,255,255,0.03)"
+				} : void 0,
+				features: {
+					drawings: !0,
+					drawingMagnet: !0,
+					drawingUndoRedo: !0,
+					indicators: !0,
+					trading: !0,
+					volume: !0,
+					legend: !0,
+					crosshair: !0,
+					keyboard: !0,
+					screenshot: !0,
+					alerts: !0,
+					barCountdown: !0,
+					logScale: !0,
+					watermark: !0,
+					...m.features
 				}
-				p.signalMarkers && _.setSignalMarkers(p.signalMarkers), p.signalMarkerStyle && _.setSignalMarkerStyle(p.signalMarkerStyle), p.tradeZones && _.setTradeZones(p.tradeZones), p.tradeZoneStyle && _.setTradeZoneStyle(p.tradeZoneStyle), p.overrides && _.setOverrides(p.overrides), m("ready", _);
-			}
+			}), m.data ? v.setData(m.data) : C(), d(v, x(m.indicators), y), m.signalMarkers && v.setSignalMarkers(m.signalMarkers), m.signalMarkerStyle && v.setSignalMarkerStyle(m.signalMarkerStyle), m.tradeZones && v.setTradeZones(m.tradeZones), m.tradeZoneStyle && v.setTradeZoneStyle(m.tradeZoneStyle), m.overrides && v.setOverrides(m.overrides), h("ready", v));
 		}), r(() => {
-			_ &&= (_.disconnectStream(), _.destroy(), null);
-		}), o(() => [p.symbol, p.timeframe], ([e, t]) => {
-			if (!_ || p.data) return;
-			_.disconnectStream();
-			let n = p.adapter ?? new s();
-			_.connect({
-				adapter: n,
-				symbol: e,
-				timeframe: t,
-				historyLimit: p.historyLimit
-			}), p.watermarkText && _.setWatermark(p.watermarkText);
-		}), o(() => p.theme, (e) => {
-			_?.setTheme(h(e));
-		}), o(() => p.chartType, (e) => {
-			_?.setChartType(e);
-		}), o(() => p.data, (e) => {
-			e && _?.setData(e);
-		}, { deep: !0 }), o(() => p.indicators, (e) => {
-			if (!_) return;
-			let t = new Set(e);
-			for (let [e, n] of v) t.has(e) || (_.removeIndicator(n), v.delete(e));
-			for (let t of e) if (!v.has(t)) {
-				let e = _.addIndicator(t);
-				e && v.set(t, e);
-			}
-		}, { deep: !0 }), o(() => p.signalMarkers, (e) => {
-			e && _?.setSignalMarkers(e);
-		}, { deep: !0 }), o(() => p.signalMarkerStyle, (e) => {
-			e && _?.setSignalMarkerStyle(e);
-		}, { deep: !0 }), o(() => p.tradeZones, (e) => {
-			e && _?.setTradeZones(e);
-		}, { deep: !0 }), o(() => p.tradeZoneStyle, (e) => {
-			e && _?.setTradeZoneStyle(e);
-		}, { deep: !0 }), o(() => p.overrides, (e) => {
-			_?.setOverrides({ ...e });
+			v &&= (v.disconnectStream(), v.destroy(), null);
+		}), o(() => [
+			m.symbol,
+			m.timeframe,
+			!m.data,
+			m.stream
+		], C), o(() => m.features, (e) => {
+			let t = JSON.stringify(e ?? null);
+			t !== S && (S = t, e && v?.setFeatures({ ...e }));
+		}, { deep: !0 }), o(() => m.theme, (e) => {
+			v?.setTheme(g(e));
+		}), o(() => m.chartType, (e) => {
+			v?.setChartType(e);
+		}), o(() => m.data, (e) => {
+			e && v?.setData(e);
+		}, { deep: !0 }), o(() => m.indicators, (e) => {
+			v && d(v, x(e), y);
+		}, { deep: !0 }), o(() => m.signalMarkers, (e) => {
+			e && v?.setSignalMarkers(e);
+		}, { deep: !0 }), o(() => m.signalMarkerStyle, (e) => {
+			e && v?.setSignalMarkerStyle(e);
+		}, { deep: !0 }), o(() => m.tradeZones, (e) => {
+			e && v?.setTradeZones(e);
+		}, { deep: !0 }), o(() => m.tradeZoneStyle, (e) => {
+			e && v?.setTradeZoneStyle(e);
+		}, { deep: !0 }), o(() => m.overrides, (e) => {
+			v?.setOverrides({ ...e });
 		}, { deep: !0 }), (t, n) => (i(), e("div", {
 			ref_key: "containerEl",
-			ref: g,
+			ref: _,
 			style: {
 				width: "100%",
 				height: "100%"
@@ -138,6 +141,6 @@ var d = /* @__PURE__ */ t({
 	}
 });
 //#endregion
-export { d as TradeCanvas };
+export { f as TradeCanvas };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/TradeCanvas.vue","../src/TradeCanvas.vue"],"sourcesContent":["<template>\n  <div ref=\"containerEl\" :style=\"{ width: '100%', height: '100%' }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  ChartStyleOverrides,\n} from '@tradecanvas/chart';\n\nconst props = withDefaults(\n  defineProps<{\n    symbol?: string;\n    timeframe?: TimeFrame;\n    theme?: 'dark' | 'light' | Theme;\n    chartType?: ChartType;\n    indicators?: string[];\n    data?: OHLCBar[];\n    adapter?: DataAdapter;\n    historyLimit?: number;\n    features?: FeaturesConfig;\n    autoScale?: boolean;\n    signalMarkers?: SignalMarker[];\n    signalMarkerStyle?: SignalMarkerStyle;\n    tradeZones?: TradeZone[];\n    tradeZoneStyle?: TradeZoneStyle;\n    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */\n    overrides?: ChartStyleOverrides;\n    watermarkText?: string;\n  }>(),\n  {\n    symbol: 'BTCUSDT',\n    timeframe: '5m' as TimeFrame,\n    theme: 'dark',\n    chartType: 'candlestick' as ChartType,\n    indicators: () => [],\n    historyLimit: 500,\n    autoScale: true,\n  },\n);\n\nconst emit = defineEmits<{\n  ready: [chart: Chart];\n  crosshairMove: [payload: unknown];\n}>();\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme): Theme {\n  if (theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme as Theme;\n}\n\nconst containerEl = ref<HTMLDivElement>();\nlet chart: Chart | null = null;\nconst indicatorIds = new Map<string, string>();\n\nfunction getChart(): Chart | null {\n  return chart;\n}\n\nfunction screenshot(filename?: string): void {\n  chart?.screenshot(filename);\n}\n\nfunction screenshotDataURL(): string | null {\n  return chart?.screenshotDataURL() ?? null;\n}\n\ndefineExpose({ getChart, screenshot, screenshotDataURL });\n\nonMounted(() => {\n  if (!containerEl.value) return;\n\n  chart = new Chart(containerEl.value, {\n    chartType: props.chartType,\n    theme: resolveTheme(props.theme),\n    autoScale: props.autoScale,\n    rightMargin: 5,\n    crosshair: { mode: 'magnet' },\n    watermark: props.watermarkText\n      ? { text: props.watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }\n      : undefined,\n    features: {\n      drawings: true,\n      drawingMagnet: true,\n      drawingUndoRedo: true,\n      indicators: true,\n      trading: true,\n      volume: true,\n      legend: true,\n      crosshair: true,\n      keyboard: true,\n      screenshot: true,\n      alerts: true,\n      barCountdown: true,\n      logScale: true,\n      watermark: true,\n      ...props.features,\n    },\n  });\n\n  if (props.data) {\n    chart.setData(props.data);\n  } else {\n    const adapter = props.adapter ?? new BinanceAdapter();\n    chart.connect({ adapter, symbol: props.symbol, timeframe: props.timeframe, historyLimit: props.historyLimit });\n  }\n\n  // Apply initial reactive collections not covered by the constructor options.\n  // Vue's watches aren't immediate, so without this the first render of\n  // indicators / signal markers / trade zones would be dropped.\n  for (const name of props.indicators) {\n    const instanceId = chart.addIndicator(name);\n    if (instanceId) indicatorIds.set(name, instanceId);\n  }\n  if (props.signalMarkers) chart.setSignalMarkers(props.signalMarkers);\n  if (props.signalMarkerStyle) chart.setSignalMarkerStyle(props.signalMarkerStyle);\n  if (props.tradeZones) chart.setTradeZones(props.tradeZones);\n  if (props.tradeZoneStyle) chart.setTradeZoneStyle(props.tradeZoneStyle);\n  if (props.overrides) chart.setOverrides(props.overrides);\n\n  emit('ready', chart);\n});\n\nonUnmounted(() => {\n  if (chart) {\n    chart.disconnectStream();\n    chart.destroy();\n    chart = null;\n  }\n});\n\nwatch(\n  () => [props.symbol, props.timeframe] as const,\n  ([newSymbol, newTimeframe]) => {\n    if (!chart || props.data) return;\n    chart.disconnectStream();\n    const adapter = props.adapter ?? new BinanceAdapter();\n    chart.connect({ adapter, symbol: newSymbol, timeframe: newTimeframe, historyLimit: props.historyLimit });\n    if (props.watermarkText) chart.setWatermark(props.watermarkText);\n  },\n);\n\nwatch(() => props.theme, (t) => { chart?.setTheme(resolveTheme(t)); });\nwatch(() => props.chartType, (ct) => { chart?.setChartType(ct); });\nwatch(() => props.data, (d) => { if (d) chart?.setData(d); }, { deep: true });\n\nwatch(\n  () => props.indicators,\n  (newIndicators) => {\n    if (!chart) return;\n    const desired = new Set(newIndicators);\n    for (const [name, instanceId] of indicatorIds) {\n      if (!desired.has(name)) {\n        chart.removeIndicator(instanceId);\n        indicatorIds.delete(name);\n      }\n    }\n    for (const name of newIndicators) {\n      if (!indicatorIds.has(name)) {\n        const instanceId = chart.addIndicator(name);\n        if (instanceId) indicatorIds.set(name, instanceId);\n      }\n    }\n  },\n  { deep: true },\n);\n\nwatch(() => props.signalMarkers, (m) => { if (m) chart?.setSignalMarkers(m); }, { deep: true });\nwatch(() => props.signalMarkerStyle, (s) => { if (s) chart?.setSignalMarkerStyle(s); }, { deep: true });\nwatch(() => props.tradeZones, (z) => { if (z) chart?.setTradeZones(z); }, { deep: true });\nwatch(() => props.tradeZoneStyle, (s) => { if (s) chart?.setTradeZoneStyle(s); }, { deep: true });\n// All of the host's overrides: keys left out of the prop are taken away.\nwatch(() => props.overrides, (o) => { chart?.setOverrides({ ...o }); }, { deep: true });\n</script>\n","<template>\n  <div ref=\"containerEl\" :style=\"{ width: '100%', height: '100%' }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  ChartStyleOverrides,\n} from '@tradecanvas/chart';\n\nconst props = withDefaults(\n  defineProps<{\n    symbol?: string;\n    timeframe?: TimeFrame;\n    theme?: 'dark' | 'light' | Theme;\n    chartType?: ChartType;\n    indicators?: string[];\n    data?: OHLCBar[];\n    adapter?: DataAdapter;\n    historyLimit?: number;\n    features?: FeaturesConfig;\n    autoScale?: boolean;\n    signalMarkers?: SignalMarker[];\n    signalMarkerStyle?: SignalMarkerStyle;\n    tradeZones?: TradeZone[];\n    tradeZoneStyle?: TradeZoneStyle;\n    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */\n    overrides?: ChartStyleOverrides;\n    watermarkText?: string;\n  }>(),\n  {\n    symbol: 'BTCUSDT',\n    timeframe: '5m' as TimeFrame,\n    theme: 'dark',\n    chartType: 'candlestick' as ChartType,\n    indicators: () => [],\n    historyLimit: 500,\n    autoScale: true,\n  },\n);\n\nconst emit = defineEmits<{\n  ready: [chart: Chart];\n  crosshairMove: [payload: unknown];\n}>();\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme): Theme {\n  if (theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme as Theme;\n}\n\nconst containerEl = ref<HTMLDivElement>();\nlet chart: Chart | null = null;\nconst indicatorIds = new Map<string, string>();\n\nfunction getChart(): Chart | null {\n  return chart;\n}\n\nfunction screenshot(filename?: string): void {\n  chart?.screenshot(filename);\n}\n\nfunction screenshotDataURL(): string | null {\n  return chart?.screenshotDataURL() ?? null;\n}\n\ndefineExpose({ getChart, screenshot, screenshotDataURL });\n\nonMounted(() => {\n  if (!containerEl.value) return;\n\n  chart = new Chart(containerEl.value, {\n    chartType: props.chartType,\n    theme: resolveTheme(props.theme),\n    autoScale: props.autoScale,\n    rightMargin: 5,\n    crosshair: { mode: 'magnet' },\n    watermark: props.watermarkText\n      ? { text: props.watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }\n      : undefined,\n    features: {\n      drawings: true,\n      drawingMagnet: true,\n      drawingUndoRedo: true,\n      indicators: true,\n      trading: true,\n      volume: true,\n      legend: true,\n      crosshair: true,\n      keyboard: true,\n      screenshot: true,\n      alerts: true,\n      barCountdown: true,\n      logScale: true,\n      watermark: true,\n      ...props.features,\n    },\n  });\n\n  if (props.data) {\n    chart.setData(props.data);\n  } else {\n    const adapter = props.adapter ?? new BinanceAdapter();\n    chart.connect({ adapter, symbol: props.symbol, timeframe: props.timeframe, historyLimit: props.historyLimit });\n  }\n\n  // Apply initial reactive collections not covered by the constructor options.\n  // Vue's watches aren't immediate, so without this the first render of\n  // indicators / signal markers / trade zones would be dropped.\n  for (const name of props.indicators) {\n    const instanceId = chart.addIndicator(name);\n    if (instanceId) indicatorIds.set(name, instanceId);\n  }\n  if (props.signalMarkers) chart.setSignalMarkers(props.signalMarkers);\n  if (props.signalMarkerStyle) chart.setSignalMarkerStyle(props.signalMarkerStyle);\n  if (props.tradeZones) chart.setTradeZones(props.tradeZones);\n  if (props.tradeZoneStyle) chart.setTradeZoneStyle(props.tradeZoneStyle);\n  if (props.overrides) chart.setOverrides(props.overrides);\n\n  emit('ready', chart);\n});\n\nonUnmounted(() => {\n  if (chart) {\n    chart.disconnectStream();\n    chart.destroy();\n    chart = null;\n  }\n});\n\nwatch(\n  () => [props.symbol, props.timeframe] as const,\n  ([newSymbol, newTimeframe]) => {\n    if (!chart || props.data) return;\n    chart.disconnectStream();\n    const adapter = props.adapter ?? new BinanceAdapter();\n    chart.connect({ adapter, symbol: newSymbol, timeframe: newTimeframe, historyLimit: props.historyLimit });\n    if (props.watermarkText) chart.setWatermark(props.watermarkText);\n  },\n);\n\nwatch(() => props.theme, (t) => { chart?.setTheme(resolveTheme(t)); });\nwatch(() => props.chartType, (ct) => { chart?.setChartType(ct); });\nwatch(() => props.data, (d) => { if (d) chart?.setData(d); }, { deep: true });\n\nwatch(\n  () => props.indicators,\n  (newIndicators) => {\n    if (!chart) return;\n    const desired = new Set(newIndicators);\n    for (const [name, instanceId] of indicatorIds) {\n      if (!desired.has(name)) {\n        chart.removeIndicator(instanceId);\n        indicatorIds.delete(name);\n      }\n    }\n    for (const name of newIndicators) {\n      if (!indicatorIds.has(name)) {\n        const instanceId = chart.addIndicator(name);\n        if (instanceId) indicatorIds.set(name, instanceId);\n      }\n    }\n  },\n  { deep: true },\n);\n\nwatch(() => props.signalMarkers, (m) => { if (m) chart?.setSignalMarkers(m); }, { deep: true });\nwatch(() => props.signalMarkerStyle, (s) => { if (s) chart?.setSignalMarkerStyle(s); }, { deep: true });\nwatch(() => props.tradeZones, (z) => { if (z) chart?.setTradeZones(z); }, { deep: true });\nwatch(() => props.tradeZoneStyle, (s) => { if (s) chart?.setTradeZoneStyle(s); }, { deep: true });\n// All of the host's overrides: keys left out of the prop are taken away.\nwatch(() => props.overrides, (o) => { chart?.setOverrides({ ...o }); }, { deep: true });\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/TradeCanvas.vue","../src/TradeCanvas.vue"],"sourcesContent":["<template>\n  <div ref=\"containerEl\" :style=\"{ width: '100%', height: '100%' }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n  syncIndicators,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  ChartStyleOverrides,\n  IndicatorSpec,\n} from '@tradecanvas/chart';\n\nconst props = withDefaults(\n  defineProps<{\n    symbol?: string;\n    timeframe?: TimeFrame;\n    theme?: 'dark' | 'light' | Theme;\n    chartType?: ChartType;\n    /** Indicators by id (`'rsi'`), or with their inputs (`{ id: 'ema', params: { period: 50 } }`). */\n    indicators?: IndicatorSpec[];\n    /** Static bars: the chart shows these, and opens no stream of its own when it has them at mount. */\n    data?: OHLCBar[];\n    adapter?: DataAdapter;\n    /** `false`: no stream until you say so (no Binance by default); the chart waits for `data`. Default `true`. */\n    stream?: boolean;\n    historyLimit?: number;\n    /** What users can do on the chart; changes after mount are applied too (the keys given). */\n    features?: FeaturesConfig;\n    autoScale?: boolean;\n    signalMarkers?: SignalMarker[];\n    signalMarkerStyle?: SignalMarkerStyle;\n    tradeZones?: TradeZone[];\n    tradeZoneStyle?: TradeZoneStyle;\n    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */\n    overrides?: ChartStyleOverrides;\n    watermarkText?: string;\n  }>(),\n  {\n    symbol: 'BTCUSDT',\n    timeframe: '5m' as TimeFrame,\n    theme: 'dark',\n    chartType: 'candlestick' as ChartType,\n    indicators: () => [],\n    stream: true,\n    historyLimit: 500,\n    autoScale: true,\n  },\n);\n\nconst emit = defineEmits<{\n  ready: [chart: Chart];\n  crosshairMove: [payload: unknown];\n}>();\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme): Theme {\n  if (theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme as Theme;\n}\n\nconst containerEl = ref<HTMLDivElement>();\nlet chart: Chart | null = null;\nconst indicatorIds = new Map<string, string>();\n/** The stream open now (`symbol|timeframe`), or null. */\nlet streamKey: string | null = null;\n\n/** The specs as plain values (not Vue's proxies), for the chart to keep. */\nconst plainSpecs = (specs: readonly IndicatorSpec[]): IndicatorSpec[] =>\n  specs.map((spec) => (typeof spec === 'string'\n    ? spec\n    : { id: spec.id, ...(spec.params ? { params: { ...spec.params } } : {}), ...(spec.position ? { position: spec.position } : {}) }));\n/** The features last applied, as text. */\nlet featuresKey = JSON.stringify(props.features ?? null);\n\n/** A stream of its own while it has no data; `stream: false` closes it. Data given later leaves it be. */\nfunction syncStream(): void {\n  if (!chart) return;\n  if (!props.stream) {\n    if (streamKey !== null) chart.disconnectStream();\n    streamKey = null;\n    return;\n  }\n  if (props.data) return;\n  const key = `${props.symbol}|${props.timeframe}`;\n  if (streamKey === key) return;\n  const opened = streamKey !== null;\n  streamKey = key;\n  if (opened) chart.disconnectStream();\n  const adapter = props.adapter ?? new BinanceAdapter();\n  chart.connect({ adapter, symbol: props.symbol, timeframe: props.timeframe, historyLimit: props.historyLimit });\n  if (opened && props.watermarkText) chart.setWatermark(props.watermarkText);\n}\n\nfunction getChart(): Chart | null {\n  return chart;\n}\n\nfunction screenshot(filename?: string): void {\n  chart?.screenshot(filename);\n}\n\nfunction screenshotDataURL(): string | null {\n  return chart?.screenshotDataURL() ?? null;\n}\n\ndefineExpose({ getChart, screenshot, screenshotDataURL });\n\nonMounted(() => {\n  if (!containerEl.value) return;\n\n  chart = new Chart(containerEl.value, {\n    chartType: props.chartType,\n    theme: resolveTheme(props.theme),\n    autoScale: props.autoScale,\n    rightMargin: 5,\n    crosshair: { mode: 'magnet' },\n    watermark: props.watermarkText\n      ? { text: props.watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }\n      : undefined,\n    features: {\n      drawings: true,\n      drawingMagnet: true,\n      drawingUndoRedo: true,\n      indicators: true,\n      trading: true,\n      volume: true,\n      legend: true,\n      crosshair: true,\n      keyboard: true,\n      screenshot: true,\n      alerts: true,\n      barCountdown: true,\n      logScale: true,\n      watermark: true,\n      ...props.features,\n    },\n  });\n\n  if (props.data) chart.setData(props.data);\n  else syncStream();\n\n  // Apply initial reactive collections not covered by the constructor options.\n  // Vue's watches aren't immediate, so without this the first render of\n  // indicators / signal markers / trade zones would be dropped.\n  syncIndicators(chart, plainSpecs(props.indicators), indicatorIds);\n  if (props.signalMarkers) chart.setSignalMarkers(props.signalMarkers);\n  if (props.signalMarkerStyle) chart.setSignalMarkerStyle(props.signalMarkerStyle);\n  if (props.tradeZones) chart.setTradeZones(props.tradeZones);\n  if (props.tradeZoneStyle) chart.setTradeZoneStyle(props.tradeZoneStyle);\n  if (props.overrides) chart.setOverrides(props.overrides);\n\n  emit('ready', chart);\n});\n\nonUnmounted(() => {\n  if (chart) {\n    chart.disconnectStream();\n    chart.destroy();\n    chart = null;\n  }\n});\n\nwatch(() => [props.symbol, props.timeframe, !props.data, props.stream] as const, syncStream);\nwatch(() => props.features, (f) => {\n  const key = JSON.stringify(f ?? null);\n  if (key === featuresKey) return;\n  featuresKey = key;\n  if (f) chart?.setFeatures({ ...f });\n}, { deep: true });\n\nwatch(() => props.theme, (t) => { chart?.setTheme(resolveTheme(t)); });\nwatch(() => props.chartType, (ct) => { chart?.setChartType(ct); });\nwatch(() => props.data, (d) => { if (d) chart?.setData(d); }, { deep: true });\n\nwatch(\n  () => props.indicators,\n  (specs) => { if (chart) syncIndicators(chart, plainSpecs(specs), indicatorIds); },\n  { deep: true },\n);\n\nwatch(() => props.signalMarkers, (m) => { if (m) chart?.setSignalMarkers(m); }, { deep: true });\nwatch(() => props.signalMarkerStyle, (s) => { if (s) chart?.setSignalMarkerStyle(s); }, { deep: true });\nwatch(() => props.tradeZones, (z) => { if (z) chart?.setTradeZones(z); }, { deep: true });\nwatch(() => props.tradeZoneStyle, (s) => { if (s) chart?.setTradeZoneStyle(s); }, { deep: true });\n// All of the host's overrides: keys left out of the prop are taken away.\nwatch(() => props.overrides, (o) => { chart?.setOverrides({ ...o }); }, { deep: true });\n</script>\n","<template>\n  <div ref=\"containerEl\" :style=\"{ width: '100%', height: '100%' }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n  syncIndicators,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  ChartStyleOverrides,\n  IndicatorSpec,\n} from '@tradecanvas/chart';\n\nconst props = withDefaults(\n  defineProps<{\n    symbol?: string;\n    timeframe?: TimeFrame;\n    theme?: 'dark' | 'light' | Theme;\n    chartType?: ChartType;\n    /** Indicators by id (`'rsi'`), or with their inputs (`{ id: 'ema', params: { period: 50 } }`). */\n    indicators?: IndicatorSpec[];\n    /** Static bars: the chart shows these, and opens no stream of its own when it has them at mount. */\n    data?: OHLCBar[];\n    adapter?: DataAdapter;\n    /** `false`: no stream until you say so (no Binance by default); the chart waits for `data`. Default `true`. */\n    stream?: boolean;\n    historyLimit?: number;\n    /** What users can do on the chart; changes after mount are applied too (the keys given). */\n    features?: FeaturesConfig;\n    autoScale?: boolean;\n    signalMarkers?: SignalMarker[];\n    signalMarkerStyle?: SignalMarkerStyle;\n    tradeZones?: TradeZone[];\n    tradeZoneStyle?: TradeZoneStyle;\n    /** Style overrides, by key: all of your app's (`chart.setOverrides`). */\n    overrides?: ChartStyleOverrides;\n    watermarkText?: string;\n  }>(),\n  {\n    symbol: 'BTCUSDT',\n    timeframe: '5m' as TimeFrame,\n    theme: 'dark',\n    chartType: 'candlestick' as ChartType,\n    indicators: () => [],\n    stream: true,\n    historyLimit: 500,\n    autoScale: true,\n  },\n);\n\nconst emit = defineEmits<{\n  ready: [chart: Chart];\n  crosshairMove: [payload: unknown];\n}>();\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme): Theme {\n  if (theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme as Theme;\n}\n\nconst containerEl = ref<HTMLDivElement>();\nlet chart: Chart | null = null;\nconst indicatorIds = new Map<string, string>();\n/** The stream open now (`symbol|timeframe`), or null. */\nlet streamKey: string | null = null;\n\n/** The specs as plain values (not Vue's proxies), for the chart to keep. */\nconst plainSpecs = (specs: readonly IndicatorSpec[]): IndicatorSpec[] =>\n  specs.map((spec) => (typeof spec === 'string'\n    ? spec\n    : { id: spec.id, ...(spec.params ? { params: { ...spec.params } } : {}), ...(spec.position ? { position: spec.position } : {}) }));\n/** The features last applied, as text. */\nlet featuresKey = JSON.stringify(props.features ?? null);\n\n/** A stream of its own while it has no data; `stream: false` closes it. Data given later leaves it be. */\nfunction syncStream(): void {\n  if (!chart) return;\n  if (!props.stream) {\n    if (streamKey !== null) chart.disconnectStream();\n    streamKey = null;\n    return;\n  }\n  if (props.data) return;\n  const key = `${props.symbol}|${props.timeframe}`;\n  if (streamKey === key) return;\n  const opened = streamKey !== null;\n  streamKey = key;\n  if (opened) chart.disconnectStream();\n  const adapter = props.adapter ?? new BinanceAdapter();\n  chart.connect({ adapter, symbol: props.symbol, timeframe: props.timeframe, historyLimit: props.historyLimit });\n  if (opened && props.watermarkText) chart.setWatermark(props.watermarkText);\n}\n\nfunction getChart(): Chart | null {\n  return chart;\n}\n\nfunction screenshot(filename?: string): void {\n  chart?.screenshot(filename);\n}\n\nfunction screenshotDataURL(): string | null {\n  return chart?.screenshotDataURL() ?? null;\n}\n\ndefineExpose({ getChart, screenshot, screenshotDataURL });\n\nonMounted(() => {\n  if (!containerEl.value) return;\n\n  chart = new Chart(containerEl.value, {\n    chartType: props.chartType,\n    theme: resolveTheme(props.theme),\n    autoScale: props.autoScale,\n    rightMargin: 5,\n    crosshair: { mode: 'magnet' },\n    watermark: props.watermarkText\n      ? { text: props.watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }\n      : undefined,\n    features: {\n      drawings: true,\n      drawingMagnet: true,\n      drawingUndoRedo: true,\n      indicators: true,\n      trading: true,\n      volume: true,\n      legend: true,\n      crosshair: true,\n      keyboard: true,\n      screenshot: true,\n      alerts: true,\n      barCountdown: true,\n      logScale: true,\n      watermark: true,\n      ...props.features,\n    },\n  });\n\n  if (props.data) chart.setData(props.data);\n  else syncStream();\n\n  // Apply initial reactive collections not covered by the constructor options.\n  // Vue's watches aren't immediate, so without this the first render of\n  // indicators / signal markers / trade zones would be dropped.\n  syncIndicators(chart, plainSpecs(props.indicators), indicatorIds);\n  if (props.signalMarkers) chart.setSignalMarkers(props.signalMarkers);\n  if (props.signalMarkerStyle) chart.setSignalMarkerStyle(props.signalMarkerStyle);\n  if (props.tradeZones) chart.setTradeZones(props.tradeZones);\n  if (props.tradeZoneStyle) chart.setTradeZoneStyle(props.tradeZoneStyle);\n  if (props.overrides) chart.setOverrides(props.overrides);\n\n  emit('ready', chart);\n});\n\nonUnmounted(() => {\n  if (chart) {\n    chart.disconnectStream();\n    chart.destroy();\n    chart = null;\n  }\n});\n\nwatch(() => [props.symbol, props.timeframe, !props.data, props.stream] as const, syncStream);\nwatch(() => props.features, (f) => {\n  const key = JSON.stringify(f ?? null);\n  if (key === featuresKey) return;\n  featuresKey = key;\n  if (f) chart?.setFeatures({ ...f });\n}, { deep: true });\n\nwatch(() => props.theme, (t) => { chart?.setTheme(resolveTheme(t)); });\nwatch(() => props.chartType, (ct) => { chart?.setChartType(ct); });\nwatch(() => props.data, (d) => { if (d) chart?.setData(d); }, { deep: true });\n\nwatch(\n  () => props.indicators,\n  (specs) => { if (chart) syncIndicators(chart, plainSpecs(specs), indicatorIds); },\n  { deep: true },\n);\n\nwatch(() => props.signalMarkers, (m) => { if (m) chart?.setSignalMarkers(m); }, { deep: true });\nwatch(() => props.signalMarkerStyle, (s) => { if (s) chart?.setSignalMarkerStyle(s); }, { deep: true });\nwatch(() => props.tradeZones, (z) => { if (z) chart?.setTradeZones(z); }, { deep: true });\nwatch(() => props.tradeZoneStyle, (s) => { if (s) chart?.setTradeZoneStyle(s); }, { deep: true });\n// All of the host's overrides: keys left out of the prop are taken away.\nwatch(() => props.overrides, (o) => { chart?.setOverrides({ ...o }); }, { deep: true });\n</script>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradecanvas/vue",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "type": "module",
   "description": "Vue 3 component for @tradecanvas/chart — reactive props, template ref, zero boilerplate.",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@tradecanvas/chart": "1.13.0"
+    "@tradecanvas/chart": "1.16.0"
   },
   "peerDependencies": {
     "vue": ">=3.3.0"