@wick-charts/vue 0.6.1 → 0.6.3

package/dist/index.js

@@ -4,7 +4,7 @@ import { default as m } from "./ChartContainer.vue.js";
 import { useCrosshairPosition as i, useLastYValue as s, usePreviousClose as x, useVisibleRange as n, useYRange as l } from "./composables.js";
 import { useChartInstance as u, useTheme as c } from "./context.js";
 import { default as h } from "./HeatmapSeries.vue.js";
-import { default as I } from "./LineSeries.vue.js";
+import { default as S } from "./LineSeries.vue.js";
 import { default as P } from "./PieSeries.vue.js";
 import { default as T } from "./ui/Crosshair.vue.js";
 import { default as k } from "./ui/HeatmapTooltip.vue.js";
@@ -31,7 +31,7 @@ import { NavigatorController as le } from "./core/dist/navigator/controller.js";
 import { PerfMonitor as ue } from "./core/dist/perf/perf-monitor.js";
 import { PieSeriesDef as ge } from "./core/dist/series/pie.js";
 import { XScale as Ce } from "./core/dist/scales/x-scale.js";
-import { YScale as Se } from "./core/dist/scales/y-scale.js";
+import { YScale as Ie } from "./core/dist/scales/y-scale.js";
 import { andromeda as ve } from "./core/dist/theme/themes/andromeda.js";
 import { autoGradient as Le, createTheme as ke, isDarkBg as De } from "./core/dist/theme/create.js";
 import { ayuMirage as Be } from "./core/dist/theme/themes/ayu-mirage.js";
@@ -49,34 +49,35 @@ import { formatCompact as xr, formatPriceAdaptive as nr } from "./core/dist/util
 import { githubLight as dr } from "./core/dist/theme/themes/github-light.js";
 import { growIntro as cr, springIntro as gr } from "./core/dist/series/bar-intro.js";
 import { gruvbox as Cr } from "./core/dist/theme/themes/gruvbox.js";
-import { handwritten as Sr } from "./core/dist/theme/themes/handwritten.js";
+import { handwritten as Ir } from "./core/dist/theme/themes/handwritten.js";
 import { hermite as vr } from "./core/dist/animation/y-range-hermite.js";
 import { highContrast as Lr } from "./core/dist/theme/themes/high-contrast.js";
 import { isTimeSeriesRenderer as Dr } from "./core/dist/series/types.js";
 import { lavenderMist as Br } from "./core/dist/theme/themes/lavender-mist.js";
 import { lightPink as Rr } from "./core/dist/theme/themes/light-pink.js";
-import { materialPalenight as Hr } from "./core/dist/theme/themes/material-palenight.js";
-import { minimalLight as Yr } from "./core/dist/theme/themes/minimal-light.js";
-import { mintBreeze as Fr } from "./core/dist/theme/themes/mint-breeze.js";
-import { mixColors as Nr, sampleRamp as qr } from "./core/dist/utils/color.js";
-import { monokaiPro as Vr } from "./core/dist/theme/themes/monokai-pro.js";
-import { nightOwl as Er } from "./core/dist/theme/themes/night-owl.js";
-import { oneDarkPro as Ur } from "./core/dist/theme/themes/one-dark-pro.js";
-import { panda as Jr } from "./core/dist/theme/themes/panda.js";
-import { parseAnimationTime as Qr } from "./core/dist/animation/time.js";
-import { peachCream as Zr } from "./core/dist/theme/themes/peach-cream.js";
-import { perfHud as $r } from "./core/dist/perf/perf-hud.js";
-import { quietLight as ro } from "./core/dist/theme/themes/quiet-light.js";
-import { registerBuiltinSeries as to } from "./core/dist/series/register-builtins.js";
-import { registerSeriesDefinition as fo } from "./core/dist/series/definition.js";
-import { resolveAxisFontSize as po, resolveAxisTextColor as io, resolveCandlestickBodyColor as so } from "./core/dist/theme/resolve.js";
-import { rosePineDawn as no } from "./core/dist/theme/themes/rose-pine-dawn.js";
-import { roundedBarFill as uo, roundedCandleFill as co, smoothCurve as go, steppedCurve as ho, straightCurve as Co } from "./core/dist/series/painters/builtins.js";
-import { sandDune as So } from "./core/dist/theme/themes/sand-dune.js";
-import { skeletonLoadingIndicator as vo } from "./core/dist/components/loading-indicator.js";
-import { snap as Lo } from "./core/dist/animation/y-range-snap.js";
-import { solarizedLight as Do } from "./core/dist/theme/themes/solarized-light.js";
-import { spring as Bo } from "./core/dist/animation/spring.js";
+import { logScale as Hr } from "./core/dist/scales/log-scale.js";
+import { materialPalenight as Yr } from "./core/dist/theme/themes/material-palenight.js";
+import { minimalLight as Fr } from "./core/dist/theme/themes/minimal-light.js";
+import { mintBreeze as Nr } from "./core/dist/theme/themes/mint-breeze.js";
+import { mixColors as Or, sampleRamp as Vr } from "./core/dist/utils/color.js";
+import { monokaiPro as Er } from "./core/dist/theme/themes/monokai-pro.js";
+import { nightOwl as Ur } from "./core/dist/theme/themes/night-owl.js";
+import { oneDarkPro as Jr } from "./core/dist/theme/themes/one-dark-pro.js";
+import { panda as Qr } from "./core/dist/theme/themes/panda.js";
+import { parseAnimationTime as Zr } from "./core/dist/animation/time.js";
+import { peachCream as $r } from "./core/dist/theme/themes/peach-cream.js";
+import { perfHud as ro } from "./core/dist/perf/perf-hud.js";
+import { quietLight as to } from "./core/dist/theme/themes/quiet-light.js";
+import { registerBuiltinSeries as fo } from "./core/dist/series/register-builtins.js";
+import { registerSeriesDefinition as po } from "./core/dist/series/definition.js";
+import { resolveAxisFontSize as so, resolveAxisTextColor as xo, resolveCandlestickBodyColor as no } from "./core/dist/theme/resolve.js";
+import { rosePineDawn as uo } from "./core/dist/theme/themes/rose-pine-dawn.js";
+import { roundedBarFill as go, roundedCandleFill as ho, smoothCurve as Co, steppedCurve as So, straightCurve as Io } from "./core/dist/series/painters/builtins.js";
+import { sandDune as vo } from "./core/dist/theme/themes/sand-dune.js";
+import { skeletonLoadingIndicator as Lo } from "./core/dist/components/loading-indicator.js";
+import { snap as Do } from "./core/dist/animation/y-range-snap.js";
+import { solarizedLight as Bo } from "./core/dist/theme/themes/solarized-light.js";
+import { spring as Ro } from "./core/dist/animation/spring.js";
 export {
   o as BarSeries,
   oe as BarSeriesDef,
@@ -90,7 +91,7 @@ export {
   k as HeatmapTooltip,
   w as InfoBar,
   b as Legend,
-  I as LineSeries,
+  S as LineSeries,
   xe as LineSeriesDef,
   A as Marker,
   M as Navigator,
@@ -110,7 +111,7 @@ export {
   Ce as XScale,
   _ as YAxis,
   ee as YLabel,
-  Se as YScale,
+  Ie as YScale,
   ve as andromeda,
   Le as autoGradient,
   Be as ayuMirage,
@@ -134,47 +135,48 @@ export {
   dr as githubLight,
   cr as growIntro,
   Cr as gruvbox,
-  Sr as handwritten,
+  Ir as handwritten,
   vr as hermite,
   Lr as highContrast,
   De as isDarkBg,
   Dr as isTimeSeriesRenderer,
   Br as lavenderMist,
   Rr as lightPink,
-  Hr as materialPalenight,
-  Yr as minimalLight,
-  Fr as mintBreeze,
-  Nr as mixColors,
-  Vr as monokaiPro,
-  Er as nightOwl,
+  Hr as logScale,
+  Yr as materialPalenight,
+  Fr as minimalLight,
+  Nr as mintBreeze,
+  Or as mixColors,
+  Er as monokaiPro,
+  Ur as nightOwl,
   $e as normalizeTime,
-  Ur as oneDarkPro,
-  Jr as panda,
-  Qr as parseAnimationTime,
-  Zr as peachCream,
-  $r as perfHud,
+  Jr as oneDarkPro,
+  Qr as panda,
+  Zr as parseAnimationTime,
+  $r as peachCream,
+  ro as perfHud,
   He as plotterIntro,
-  ro as quietLight,
-  to as registerBuiltinSeries,
-  fo as registerSeriesDefinition,
-  po as resolveAxisFontSize,
-  io as resolveAxisTextColor,
-  so as resolveCandlestickBodyColor,
+  to as quietLight,
+  fo as registerBuiltinSeries,
+  po as registerSeriesDefinition,
+  so as resolveAxisFontSize,
+  xo as resolveAxisTextColor,
+  no as resolveCandlestickBodyColor,
   ar as riseIntro,
-  no as rosePineDawn,
-  uo as roundedBarFill,
-  co as roundedCandleFill,
-  qr as sampleRamp,
-  So as sandDune,
-  vo as skeletonLoadingIndicator,
+  uo as rosePineDawn,
+  go as roundedBarFill,
+  ho as roundedCandleFill,
+  Vr as sampleRamp,
+  vo as sandDune,
+  Lo as skeletonLoadingIndicator,
   Ve as skeletonMorphIntro,
-  go as smoothCurve,
-  Lo as snap,
-  Do as solarizedLight,
-  Bo as spring,
+  Co as smoothCurve,
+  Do as snap,
+  Bo as solarizedLight,
+  Ro as spring,
   gr as springIntro,
-  ho as steppedCurve,
-  Co as straightCurve,
+  So as steppedCurve,
+  Io as straightCurve,
   Me as sweepIntro,
   Ye as traceIntro,
   ir as tracePath,

package/dist/ui/Crosshair.vue.js

@@ -1,21 +1,21 @@
-import { defineComponent as v, ref as d, onMounted as f, onUnmounted as h, computed as n, unref as t, openBlock as y, createElementBlock as g, Fragment as x, createElementVNode as c, normalizeStyle as m, toDisplayString as u, createCommentVNode as b } from "vue";
+import { defineComponent as v, ref as d, onMounted as f, onUnmounted as y, computed as n, unref as t, openBlock as h, createElementBlock as x, Fragment as g, createElementVNode as c, normalizeStyle as m, toDisplayString as u, createCommentVNode as b } from "vue";
 import { useCrosshairPosition as C } from "../composables.js";
 import { useChartInstance as S } from "../context.js";
 const E = /* @__PURE__ */ v({
   __name: "Crosshair",
   setup(k) {
-    const e = S(), a = C(e), r = d(0), l = () => {
+    const e = S(), o = C(e), r = d(0), l = () => {
       r.value++;
     };
-    f(() => e.on("overlayChange", l)), h(() => e.off("overlayChange", l));
-    const o = n(() => (r.value, e.getTheme())), i = n(() => e.getDataInterval()), p = n(() => (a.value, e.timeScale.niceTickValues(i.value).tickInterval || i.value)), s = n(() => ({
+    f(() => e.on("overlayChange", l)), y(() => e.off("overlayChange", l));
+    const a = n(() => (r.value, e.getTheme())), i = n(() => e.getDataInterval()), p = n(() => (o.value, e.timeScale.niceTickValues(i.value).tickInterval || i.value)), s = n(() => ({
       // Blend the theme's labelBackground at 80% opacity so the axis grid
       // shows through — keeps the badge from looking like an opaque block
       // while still masking whatever tick sits underneath.
-      background: `color-mix(in srgb, ${o.value.crosshair.labelBackground} 80%, transparent)`,
-      color: o.value.crosshair.labelTextColor,
-      fontSize: o.value.axis.fontSize + "px",
-      fontFamily: o.value.typography.fontFamily,
+      background: `color-mix(in srgb, ${a.value.crosshair.labelBackground} 80%, transparent)`,
+      color: a.value.crosshair.labelTextColor,
+      fontSize: a.value.axis.fontSize + "px",
+      fontFamily: a.value.typography.fontFamily,
       fontVariantNumeric: "tabular-nums",
       padding: "2px 6px",
       borderRadius: "2px",
@@ -25,25 +25,25 @@ const E = /* @__PURE__ */ v({
       // live last-value stays visible when the crosshair crosses its row.
       zIndex: 2
     }));
-    return (_, I) => t(a) ? (y(), g(x, { key: 0 }, [
+    return (_, I) => t(o) ? (h(), x(g, { key: 0 }, [
       c("div", {
         style: m({
           position: "absolute",
-          right: "0",
-          top: t(a).mediaY + "px",
+          [t(e).yAxisPosition]: "0",
+          top: t(o).mediaY + "px",
           transform: "translateY(-50%)",
           ...s.value
         })
-      }, u(t(e).yScale.formatY(t(a).y)), 5),
+      }, u(t(e).yScale.formatY(t(o).y)), 5),
       c("div", {
         style: m({
           position: "absolute",
           bottom: "0",
-          left: t(a).mediaX + "px",
+          left: t(o).mediaX + "px",
           transform: "translateX(-50%)",
           ...s.value
         })
-      }, u(t(e).timeScale.formatX(t(a).time, p.value)), 5)
+      }, u(t(e).timeScale.formatX(t(o).time, p.value)), 5)
     ], 64)) : b("", !0);
   }
 });

package/dist/ui/HeatmapTooltip.vue.js

@@ -1,16 +1,16 @@
 import { defineComponent as x, computed as a, ref as g, onMounted as b, onUnmounted as y, unref as _, openBlock as k, createElementBlock as I, normalizeStyle as n, createElementVNode as r, toDisplayString as v, createCommentVNode as H } from "vue";
 import { defaultHeatmapFormat as T, resolveHeatmapSeriesId as C, HEATMAP_TOOLTIP_WIDTH as S, HEATMAP_TOOLTIP_HEIGHT as W } from "../core/dist/heatmap-tooltip.js";
 import { computeTooltipPosition as F } from "../core/dist/tooltip-position.js";
-import { useCrosshairPosition as P } from "../composables.js";
-import { useChartInstance as z } from "../context.js";
-const E = { style: { display: "flex", alignItems: "center", gap: "8px" } }, M = { style: { fontWeight: 600 } }, w = { style: { marginLeft: "auto", fontWeight: 600 } }, N = /* @__PURE__ */ x({
+import { useCrosshairPosition as M } from "../composables.js";
+import { useChartInstance as P } from "../context.js";
+const z = { style: { display: "flex", alignItems: "center", gap: "8px" } }, E = { style: { fontWeight: 600 } }, w = { style: { marginLeft: "auto", fontWeight: 600 } }, N = /* @__PURE__ */ x({
   __name: "HeatmapTooltip",
   props: {
     seriesId: {},
     format: { type: Function }
   },
   setup(m) {
-    const u = m, f = a(() => u.format ?? T), t = z(), l = P(t), i = g(0), d = () => {
+    const u = m, f = a(() => u.format ?? T), t = P(), l = M(t), i = g(0), d = () => {
       i.value++;
     };
     b(() => {
@@ -56,7 +56,7 @@ const E = { style: { display: "flex", alignItems: "center", gap: "8px" } }, M =
         minWidth: "120px"
       })
     }, [
-      r("div", E, [
+      r("div", z, [
         r("span", {
           style: n({
             width: "10px",
@@ -66,7 +66,7 @@ const E = { style: { display: "flex", alignItems: "center", gap: "8px" } }, M =
             flexShrink: 0
           })
         }, null, 4),
-        r("span", M, v(e.value.label), 1),
+        r("span", E, v(e.value.label), 1),
         r("span", w, v(f.value(e.value.value)), 1)
       ]),
       r("div", {

package/dist/ui/PieTooltip.vue.js

@@ -1,8 +1,8 @@
 import { defineComponent as H, computed as a, useSlots as R, ref as x, onMounted as O, onUnmounted as P, watchEffect as B, openBlock as m, createElementBlock as g, Fragment as D, unref as b, normalizeStyle as y, createElementVNode as s, toDisplayString as _, createCommentVNode as I, renderSlot as L } from "vue";
 import { computeTooltipPosition as C } from "../core/dist/tooltip-position.js";
-import { formatCompact as X } from "../core/dist/utils/format.js";
-import { useCrosshairPosition as Y } from "../composables.js";
-import { useChartInstance as M } from "../context.js";
+import { formatCompact as M } from "../core/dist/utils/format.js";
+import { useCrosshairPosition as X } from "../composables.js";
+import { useChartInstance as Y } from "../context.js";
 const U = { style: { display: "flex", alignItems: "center", gap: "8px" } }, A = { style: { fontWeight: 600 } }, N = { style: { display: "flex", justifyContent: "space-between", gap: "16px" } }, V = { style: { opacity: 0.6 } }, j = { style: { fontWeight: 600 } }, G = ["data-measured"], $ = 160, q = 70, te = /* @__PURE__ */ H({
   __name: "PieTooltip",
   props: {
@@ -10,7 +10,7 @@ const U = { style: { display: "flex", alignItems: "center", gap: "8px" } }, A =
     format: { type: Function }
   },
   setup(T) {
-    const S = T, k = a(() => S.format ?? X), i = M(), l = Y(i), W = R(), d = a(() => typeof W.default == "function"), c = x(0), w = () => {
+    const S = T, k = a(() => S.format ?? M), i = Y(), l = X(i), W = R(), d = a(() => typeof W.default == "function"), c = x(0), w = () => {
       c.value++;
     };
     O(() => {

package/dist/ui/TimeAxis.vue.js

@@ -1,36 +1,37 @@
-import { defineComponent as r, ref as u, watch as c, onUnmounted as a, onMounted as p, openBlock as m, createElementBlock as b, normalizeStyle as f, unref as o } from "vue";
-import { mountAxisLabels as x } from "../core/dist/axis/dom-labels.js";
+import { defineComponent as c, computed as p, ref as m, watch as f, onUnmounted as u, onMounted as x, openBlock as b, createElementBlock as y, normalizeStyle as h, unref as o } from "vue";
+import { mountAxisLabels as L } from "../core/dist/axis/dom-labels.js";
+import { useAxisLayout as d } from "../composables.js";
 import { useChartInstance as g } from "../context.js";
-const _ = /* @__PURE__ */ r({
+const D = /* @__PURE__ */ c({
   __name: "TimeAxis",
   props: {
     labelCount: {},
     minLabelSpacing: {}
   },
-  setup(s) {
-    const n = s, e = g(), t = u(null), i = () => {
-      e.setTimeAxisLabelDensity({
-        labelCount: n.labelCount ?? null,
-        minLabelSpacing: n.minLabelSpacing ?? null
+  setup(r) {
+    const e = r, n = g(), t = d(n), a = p(() => t.value.yAxisPosition === "left"), l = m(null), s = () => {
+      n.setTimeAxisLabelDensity({
+        labelCount: e.labelCount ?? null,
+        minLabelSpacing: e.minLabelSpacing ?? null
       });
     };
-    i(), c(() => [n.labelCount, n.minLabelSpacing], i), a(() => {
-      e.setTimeAxisLabelDensity({ labelCount: null, minLabelSpacing: null });
+    s(), f(() => [e.labelCount, e.minLabelSpacing], s), u(() => {
+      n.setTimeAxisLabelDensity({ labelCount: null, minLabelSpacing: null });
     });
-    let l = null;
-    return p(() => {
-      t.value !== null && (l = x({ chart: e, container: t.value, axis: "x" }));
-    }), a(() => {
-      l?.(), l = null;
-    }), (h, y) => (m(), b("div", {
+    let i = null;
+    return x(() => {
+      l.value !== null && (i = L({ chart: n, container: l.value, axis: "x" }));
+    }), u(() => {
+      i?.(), i = null;
+    }), (A, v) => (b(), y("div", {
       ref_key: "containerRef",
-      ref: t,
-      style: f({
+      ref: l,
+      style: h({
         position: "absolute",
-        left: "0",
+        left: (a.value ? o(t).yAxisWidth : 0) + "px",
         bottom: "0",
-        right: o(e).yAxisWidth + "px",
-        height: o(e).xAxisHeight + "px",
+        right: (a.value ? 0 : o(t).yAxisWidth) + "px",
+        height: o(t).xAxisHeight + "px",
         pointerEvents: "none",
         display: "flex",
         alignItems: "center"
@@ -39,5 +40,5 @@ const _ = /* @__PURE__ */ r({
   }
 });
 export {
-  _ as default
+  D as default
 };

package/dist/ui/Tooltip.vue.js

@@ -1,98 +1,100 @@
-import { defineComponent as P, computed as s, ref as w, onMounted as D, onUnmounted as M, useSlots as X, watchEffect as Y, openBlock as r, createElementBlock as u, Fragment as x, unref as p, normalizeStyle as m, createElementVNode as d, toDisplayString as f, renderList as H, createCommentVNode as _, renderSlot as Z } from "vue";
-import { buildHoverSnapshots as $ } from "../core/dist/snapshots.js";
-import { resolveCandlestickBodyColor as K } from "../core/dist/theme/resolve.js";
+import { defineComponent as P, computed as s, ref as w, onMounted as D, onUnmounted as X, useSlots as Y, watchEffect as Z, openBlock as r, createElementBlock as u, Fragment as x, unref as p, normalizeStyle as m, createElementVNode as d, toDisplayString as f, renderList as H, createCommentVNode as _, renderSlot as $ } from "vue";
+import { buildHoverSnapshots as K } from "../core/dist/snapshots.js";
+import { resolveCandlestickBodyColor as U } from "../core/dist/theme/resolve.js";
 import { computeTooltipPosition as R } from "../core/dist/tooltip-position.js";
-import { formatCompact as U, formatPriceAdaptive as j } from "../core/dist/utils/format.js";
-import { formatDate as q } from "../core/dist/utils/time.js";
-import { useCrosshairPosition as G } from "../composables.js";
-import { useChartInstance as J } from "../context.js";
-const Q = {
+import { formatCompact as j, formatPriceAdaptive as q } from "../core/dist/utils/format.js";
+import { formatDate as G } from "../core/dist/utils/time.js";
+import { useCrosshairPosition as J } from "../composables.js";
+import { useChartInstance as Q } from "../context.js";
+const ee = {
   key: 0,
   style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 12px" }
-}, ee = { style: { opacity: 0.5 } }, te = {
+}, te = { style: { opacity: 0.5 } }, oe = {
   key: 1,
   style: { display: "flex", alignItems: "center", gap: "8px", padding: "2px 0" }
-}, oe = { style: { opacity: 0.6, flex: "1" } }, le = ["data-measured"], ce = /* @__PURE__ */ P({
+}, le = { style: { opacity: 0.6, flex: "1" } }, ae = ["data-measured"], ve = /* @__PURE__ */ P({
   __name: "Tooltip",
   props: {
     sort: {},
     format: { type: Function }
   },
   setup(I) {
-    const F = I, A = s(() => F.sort ?? "none"), k = s(
-      () => F.format ?? ((a, n) => n === "volume" ? U(a) : j(a))
-    ), o = J(), i = G(o), C = w(0), W = () => {
+    const F = I, L = s(() => F.sort ?? "none"), k = s(
+      () => F.format ?? ((a, i) => i === "volume" ? j(a) : q(a))
+    ), t = Q(), n = J(t), C = w(0), W = () => {
       C.value++;
     };
     D(() => {
-      o.on("overlayChange", W), o.getSeriesIds().length > 0 && C.value++;
-    }), M(() => {
-      o.off("overlayChange", W);
+      t.on("overlayChange", W), t.getSeriesIds().length > 0 && C.value++;
+    }), X(() => {
+      t.off("overlayChange", W);
     });
-    const t = s(() => o.getTheme()), O = s(() => o.getDataInterval()), c = s(() => (C.value, i.value ? $(o, {
-      time: i.value.time,
-      sort: A.value,
+    const o = s(() => t.getTheme()), A = s(() => t.getDataInterval()), c = s(() => (C.value, n.value ? K(t, {
+      time: n.value.time,
+      sort: L.value,
       cacheKey: "tooltip"
-    }) : [])), z = s(() => i.value?.time ?? 0), T = X(), g = s(() => typeof T.default == "function"), B = w(null), b = w(null);
+    }) : [])), z = s(() => n.value?.time ?? 0), O = Y(), g = s(() => typeof O.default == "function"), B = w(null), b = w(null);
     let S = null;
-    Y((a) => {
+    Z((a) => {
       if (!g.value) return;
-      const n = B.value;
-      !n || typeof ResizeObserver > "u" || (S = new ResizeObserver((e) => {
+      const i = B.value;
+      !i || typeof ResizeObserver > "u" || (S = new ResizeObserver((e) => {
         const l = e[0]?.contentRect;
         if (!l) return;
         const y = b.value;
         (!y || y.width !== l.width || y.height !== l.height) && (b.value = { width: l.width, height: l.height });
-      }), S.observe(n), a(() => {
+      }), S.observe(i), a(() => {
         S?.disconnect(), S = null;
       }));
     });
     const h = s(() => {
-      if (!i.value || c.value.length === 0) return null;
-      const a = o.getMediaSize(), n = a.width - o.yAxisWidth, e = a.height - o.xAxisHeight;
+      if (!n.value || c.value.length === 0) return null;
+      const a = t.getMediaSize(), i = t.plotLeft, e = a.width - t.yAxisWidth, l = a.height - t.xAxisHeight;
       if (g.value) {
         const v = b.value;
         return v ? R({
-          x: i.value.mediaX,
-          y: i.value.mediaY,
-          chartWidth: n,
-          chartHeight: e,
+          x: n.value.mediaX,
+          y: n.value.mediaY,
+          chartLeft: i,
+          chartWidth: e,
+          chartHeight: l,
           tooltipWidth: v.width,
           tooltipHeight: v.height
-        }) : { left: 0, top: 0 };
+        }) : { left: i, top: 0 };
       }
-      const l = c.value.some((v) => "open" in v.data), y = c.value.filter((v) => !("open" in v.data)).length, L = 160, N = l ? 140 : 40 + y * 22;
+      const y = c.value.some((v) => "open" in v.data), E = c.value.filter((v) => !("open" in v.data)).length, M = 160, N = y ? 140 : 40 + E * 22;
       return R({
-        x: i.value.mediaX,
-        y: i.value.mediaY,
-        chartWidth: n,
-        chartHeight: e,
-        tooltipWidth: L,
+        x: n.value.mediaX,
+        y: n.value.mediaY,
+        chartLeft: i,
+        chartWidth: e,
+        chartHeight: l,
+        tooltipWidth: M,
         tooltipHeight: N
       });
-    }), V = s(() => !g.value || b.value !== null);
-    function E(a) {
+    }), T = s(() => !g.value || b.value !== null);
+    function V(a) {
       return "open" in a;
     }
-    return (a, n) => (r(), u(x, null, [
-      p(i) && c.value.length > 0 && h.value && !g.value ? (r(), u("div", {
+    return (a, i) => (r(), u(x, null, [
+      p(n) && c.value.length > 0 && h.value && !g.value ? (r(), u("div", {
         key: 0,
         style: m({
           position: "absolute",
           left: h.value.left + "px",
           top: h.value.top + "px",
           pointerEvents: "none",
-          background: t.value.tooltip.background,
+          background: o.value.tooltip.background,
           backdropFilter: "blur(12px)",
           WebkitBackdropFilter: "blur(12px)",
-          border: "1px solid " + t.value.tooltip.borderColor,
+          border: "1px solid " + o.value.tooltip.borderColor,
           borderRadius: "8px",
           padding: "10px 14px",
           boxShadow: "0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)",
-          fontSize: t.value.tooltip.fontSize + "px",
-          fontFamily: t.value.typography.fontFamily,
+          fontSize: o.value.tooltip.fontSize + "px",
+          fontFamily: o.value.typography.fontFamily,
           fontVariantNumeric: "tabular-nums",
-          color: t.value.tooltip.textColor,
+          color: o.value.tooltip.textColor,
           minWidth: "140px",
           zIndex: 10,
           transition: "opacity 0.15s ease"
@@ -100,18 +102,18 @@ const Q = {
       }, [
         d("div", {
           style: m({
-            fontSize: t.value.axis.fontSize + "px",
-            color: t.value.axis.textColor,
+            fontSize: o.value.axis.fontSize + "px",
+            color: o.value.axis.textColor,
             marginBottom: "8px",
             paddingBottom: "6px",
-            borderBottom: "1px solid " + t.value.tooltip.borderColor,
+            borderBottom: "1px solid " + o.value.tooltip.borderColor,
             letterSpacing: "0.02em"
           })
-        }, f(p(q)(z.value, { locale: p(o).timeScale.getLocale(), timeZone: p(o).timeScale.getTimeZone() })) + " " + f(p(o).timeScale.formatX(z.value, O.value)), 5),
+        }, f(p(G)(z.value, { locale: p(t).timeScale.getLocale(), timeZone: p(t).timeScale.getTimeZone() })) + " " + f(p(t).timeScale.formatX(z.value, A.value)), 5),
         (r(!0), u(x, null, H(c.value, (e) => (r(), u(x, {
           key: e.id
         }, [
-          E(e.data) ? (r(), u("div", Q, [
+          V(e.data) ? (r(), u("div", ee, [
             (r(!0), u(x, null, H([
               { label: "Open", val: e.data.open, field: "open" },
               { label: "High", val: e.data.high, field: "high" },
@@ -120,24 +122,24 @@ const Q = {
             ], (l) => (r(), u(x, {
               key: l.label
             }, [
-              d("span", ee, f(l.label), 1),
+              d("span", te, f(l.label), 1),
               d("span", {
                 style: m({
                   fontWeight: 600,
-                  color: p(K)(
-                    e.data.close >= e.data.open ? t.value.candlestick.up.body : t.value.candlestick.down.body
+                  color: p(U)(
+                    e.data.close >= e.data.open ? o.value.candlestick.up.body : o.value.candlestick.down.body
                   ),
                   textAlign: "right"
                 })
               }, f(k.value(l.val, l.field)), 5)
             ], 64))), 128)),
             e.data.volume != null ? (r(), u(x, { key: 0 }, [
-              n[0] || (n[0] = d("span", { style: { opacity: 0.5 } }, "Volume", -1)),
+              i[0] || (i[0] = d("span", { style: { opacity: 0.5 } }, "Volume", -1)),
               d("span", {
-                style: m({ fontWeight: 600, color: t.value.tooltip.textColor, textAlign: "right" })
+                style: m({ fontWeight: 600, color: o.value.tooltip.textColor, textAlign: "right" })
               }, f(k.value(e.data.volume, "volume")), 5)
             ], 64)) : _("", !0)
-          ])) : (r(), u("div", te, [
+          ])) : (r(), u("div", oe, [
             d("span", {
               style: m({
                 width: "8px",
@@ -147,49 +149,49 @@ const Q = {
                 flexShrink: 0
               })
             }, null, 4),
-            d("span", oe, f(e.label ?? "Value"), 1),
+            d("span", le, f(e.label ?? "Value"), 1),
             d("span", {
               style: m({ fontWeight: 600, color: e.color })
             }, f(k.value(e.data.value, "value")), 5)
           ]))
         ], 64))), 128))
       ], 4)) : _("", !0),
-      p(i) && c.value.length > 0 && h.value && g.value ? (r(), u("div", {
+      p(n) && c.value.length > 0 && h.value && g.value ? (r(), u("div", {
         key: 1,
         ref_key: "containerRef",
         ref: B,
-        "data-measured": V.value ? "true" : "false",
+        "data-measured": T.value ? "true" : "false",
         style: m({
           position: "absolute",
           left: h.value.left + "px",
           top: h.value.top + "px",
           pointerEvents: "none",
-          background: t.value.tooltip.background,
+          background: o.value.tooltip.background,
           backdropFilter: "blur(12px)",
           WebkitBackdropFilter: "blur(12px)",
-          border: "1px solid " + t.value.tooltip.borderColor,
+          border: "1px solid " + o.value.tooltip.borderColor,
           borderRadius: "8px",
           padding: "10px 14px",
           boxShadow: "0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)",
-          fontFamily: t.value.typography.fontFamily,
-          fontSize: t.value.tooltip.fontSize + "px",
+          fontFamily: o.value.typography.fontFamily,
+          fontSize: o.value.tooltip.fontSize + "px",
           fontVariantNumeric: "tabular-nums",
-          color: t.value.tooltip.textColor,
+          color: o.value.tooltip.textColor,
           width: "max-content",
-          maxWidth: p(o).getMediaSize().width - p(o).yAxisWidth + "px",
+          maxWidth: p(t).getMediaSize().width - p(t).yAxisWidth + "px",
           boxSizing: "border-box",
           zIndex: 10,
           visibility: b.value !== null ? "visible" : "hidden"
         })
       }, [
-        Z(a.$slots, "default", {
+        $(a.$slots, "default", {
           snapshots: c.value,
           time: z.value
         })
-      ], 12, le)) : _("", !0)
+      ], 12, ae)) : _("", !0)
     ], 64));
   }
 });
 export {
-  ce as default
+  ve as default
 };