@wick-charts/vue 0.5.1 → 0.6.1

package/dist/ui/PieTooltip.vue.js

@@ -1,96 +1,96 @@
-import { defineComponent as H, computed as a, useSlots as O, ref as m, onMounted as P, onUnmounted as R, watchEffect as D, openBlock as x, createElementBlock as g, Fragment as B, unref as y, normalizeStyle as b, createElementVNode as r, toDisplayString as _, createCommentVNode as T, renderSlot as L } from "vue";
+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";
-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 } }, $ = { style: { fontWeight: 600 } }, j = ["data-measured"], G = 160, q = 70, te = /* @__PURE__ */ H({
+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: {
     seriesId: {},
     format: { type: Function }
   },
-  setup(F) {
-    const S = F, w = a(() => S.format ?? X), o = M(), i = Y(o), W = O(), p = a(() => typeof W.default == "function"), c = m(0), I = () => {
+  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 = () => {
       c.value++;
     };
-    P(() => {
-      o.on("overlayChange", I);
-    }), R(() => {
-      o.off("overlayChange", I);
+    O(() => {
+      i.on("overlayChange", w);
+    }), P(() => {
+      i.off("overlayChange", w);
     });
-    function E(e, t) {
-      if (t !== void 0) return t;
-      const v = e.getSeriesIdsByType("pie", { visibleOnly: !0 });
-      return v.length > 0 ? v[0] : null;
+    function E(t, o) {
+      if (o !== void 0) return o;
+      const f = t.getSeriesIdsByType("pie", { visibleOnly: !0 });
+      return f.length > 0 ? f[0] : null;
     }
-    const s = a(() => (c.value, o.getTheme())), z = a(() => (c.value, E(o, S.seriesId))), n = a(() => (i.value, c.value, z.value === null ? null : o.getHoverInfo(z.value))), k = m(null), u = m(null);
-    let f = null;
-    D((e) => {
-      if (!p.value) return;
-      const t = k.value;
-      !t || typeof ResizeObserver > "u" || (f = new ResizeObserver((v) => {
-        const d = v[0]?.contentRect;
-        if (!d) return;
+    const e = a(() => (c.value, i.getTheme())), z = a(() => (c.value, E(i, S.seriesId))), n = a(() => (l.value, c.value, z.value === null ? null : i.getHoverInfo(z.value))), F = x(null), u = x(null);
+    let v = null;
+    B((t) => {
+      if (!d.value) return;
+      const o = F.value;
+      !o || typeof ResizeObserver > "u" || (v = new ResizeObserver((f) => {
+        const p = f[0]?.contentRect;
+        if (!p) return;
         const h = u.value;
-        (!h || h.width !== d.width || h.height !== d.height) && (u.value = { width: d.width, height: d.height });
-      }), f.observe(t), e(() => {
-        f?.disconnect(), f = null;
+        (!h || h.width !== p.width || h.height !== p.height) && (u.value = { width: p.width, height: p.height });
+      }), v.observe(o), t(() => {
+        v?.disconnect(), v = null;
       }));
     });
-    const l = a(() => {
-      if (!i.value || !n.value) return null;
-      const e = o.getMediaSize();
-      if (p.value) {
-        const t = u.value;
-        return t ? C({
-          x: i.value.mediaX,
-          y: i.value.mediaY,
-          chartWidth: e.width,
-          chartHeight: e.height,
-          tooltipWidth: t.width,
-          tooltipHeight: t.height,
+    const r = a(() => {
+      if (!l.value || !n.value) return null;
+      const t = i.getMediaSize();
+      if (d.value) {
+        const o = u.value;
+        return o ? C({
+          x: l.value.mediaX,
+          y: l.value.mediaY,
+          chartWidth: t.width,
+          chartHeight: t.height,
+          tooltipWidth: o.width,
+          tooltipHeight: o.height,
           offsetX: 16,
           offsetY: 16
         }) : { left: 0, top: 0 };
       }
       return C({
-        x: i.value.mediaX,
-        y: i.value.mediaY,
-        chartWidth: e.width,
-        chartHeight: e.height,
-        tooltipWidth: G,
+        x: l.value.mediaX,
+        y: l.value.mediaY,
+        chartWidth: t.width,
+        chartHeight: t.height,
+        tooltipWidth: $,
         tooltipHeight: q,
         offsetX: 16,
         offsetY: 16
       });
     });
-    return (e, t) => (x(), g(B, null, [
-      n.value && y(i) && l.value && !p.value ? (x(), g("div", {
+    return (t, o) => (m(), g(D, null, [
+      n.value && b(l) && r.value && !d.value ? (m(), g("div", {
         key: 0,
-        style: b({
+        style: y({
           position: "absolute",
-          left: l.value.left + "px",
-          top: l.value.top + "px",
+          left: r.value.left + "px",
+          top: r.value.top + "px",
           pointerEvents: "none",
-          background: s.value.tooltip.background,
+          background: e.value.tooltip.background,
           backdropFilter: "blur(12px)",
           WebkitBackdropFilter: "blur(12px)",
-          border: "1px solid " + s.value.tooltip.borderColor,
+          border: "1px solid " + e.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: s.value.typography.fontSize + "px",
-          fontFamily: s.value.typography.fontFamily,
-          color: s.value.tooltip.textColor,
+          fontSize: e.value.typography.fontSize + "px",
+          fontFamily: e.value.typography.fontFamily,
+          color: e.value.tooltip.textColor,
           zIndex: 10,
           display: "flex",
           flexDirection: "column",
           gap: "6px"
         })
       }, [
-        r("div", U, [
-          r("span", {
-            style: b({
+        s("div", U, [
+          s("span", {
+            style: y({
               width: "10px",
               height: "10px",
               borderRadius: "50%",
@@ -98,35 +98,45 @@ const U = { style: { display: "flex", alignItems: "center", gap: "8px" } }, A =
               flexShrink: 0
             })
           }, null, 4),
-          r("span", A, _(n.value.label), 1)
+          s("span", A, _(n.value.label), 1)
         ]),
-        r("div", N, [
-          r("span", V, _(w.value(n.value.value)), 1),
-          r("span", $, _(n.value.percent.toFixed(1)) + "%", 1)
+        s("div", N, [
+          s("span", V, _(k.value(n.value.value)), 1),
+          s("span", j, _(n.value.percent.toFixed(1)) + "%", 1)
         ])
-      ], 4)) : T("", !0),
-      n.value && y(i) && l.value && p.value ? (x(), g("div", {
+      ], 4)) : I("", !0),
+      n.value && b(l) && r.value && d.value ? (m(), g("div", {
         key: 1,
         ref_key: "containerRef",
-        ref: k,
+        ref: F,
         "data-measured": u.value !== null ? "true" : "false",
-        style: b({
+        style: y({
           position: "absolute",
-          left: l.value.left + "px",
-          top: l.value.top + "px",
+          left: r.value.left + "px",
+          top: r.value.top + "px",
           pointerEvents: "none",
+          background: e.value.tooltip.background,
+          backdropFilter: "blur(12px)",
+          WebkitBackdropFilter: "blur(12px)",
+          border: "1px solid " + e.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: e.value.typography.fontFamily,
+          fontSize: e.value.typography.fontSize + "px",
+          color: e.value.tooltip.textColor,
           zIndex: 10,
           width: "max-content",
-          maxWidth: y(o).getMediaSize().width + "px",
+          maxWidth: b(i).getMediaSize().width + "px",
           boxSizing: "border-box",
           visibility: u.value !== null ? "visible" : "hidden"
         })
       }, [
-        L(e.$slots, "default", {
+        L(t.$slots, "default", {
           info: n.value,
-          format: w.value
+          format: k.value
         })
-      ], 12, j)) : T("", !0)
+      ], 12, G)) : I("", !0)
     ], 64));
   }
 });

package/dist/ui/Tooltip.vue.js

@@ -1,67 +1,67 @@
-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 v, normalizeStyle as m, createElementVNode as p, 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 { 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 { computeTooltipPosition as R } from "../core/dist/tooltip-position.js";
-import { formatCompact as j, formatPriceAdaptive as q } from "../core/dist/utils/format.js";
-import { formatDate as G, formatTime as J } from "../core/dist/utils/time.js";
-import { useCrosshairPosition as Q } from "../composables.js";
-import { useChartInstance as Z } from "../context.js";
-const ee = {
+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 = {
   key: 0,
   style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 12px" }
-}, te = { style: { opacity: 0.5 } }, oe = {
+}, ee = { style: { opacity: 0.5 } }, te = {
   key: 1,
   style: { display: "flex", alignItems: "center", gap: "8px", padding: "2px 0" }
-}, ae = { style: { opacity: 0.6, flex: "1" } }, le = ["data-measured"], ve = /* @__PURE__ */ P({
+}, oe = { style: { opacity: 0.6, flex: "1" } }, le = ["data-measured"], ce = /* @__PURE__ */ P({
   __name: "Tooltip",
   props: {
     sort: {},
     format: { type: Function }
   },
-  setup(A) {
-    const F = A, I = s(() => F.sort ?? "none"), C = s(
-      () => F.format ?? ((l, n) => n === "volume" ? j(l) : q(l))
-    ), o = Z(), i = Q(o), S = w(0), W = () => {
-      S.value++;
+  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 = () => {
+      C.value++;
     };
     D(() => {
-      o.on("overlayChange", W), o.getSeriesIds().length > 0 && S.value++;
+      o.on("overlayChange", W), o.getSeriesIds().length > 0 && C.value++;
     }), M(() => {
       o.off("overlayChange", W);
     });
-    const t = s(() => o.getTheme()), O = s(() => o.getDataInterval()), d = s(() => (S.value, i.value ? K(o, {
+    const t = s(() => o.getTheme()), O = s(() => o.getDataInterval()), c = s(() => (C.value, i.value ? $(o, {
       time: i.value.time,
-      sort: I.value,
+      sort: A.value,
       cacheKey: "tooltip"
     }) : [])), z = s(() => i.value?.time ?? 0), T = X(), g = s(() => typeof T.default == "function"), B = w(null), b = w(null);
-    let k = null;
-    Y((l) => {
+    let S = null;
+    Y((a) => {
       if (!g.value) return;
       const n = B.value;
-      !n || typeof ResizeObserver > "u" || (k = new ResizeObserver((e) => {
-        const a = e[0]?.contentRect;
-        if (!a) return;
+      !n || typeof ResizeObserver > "u" || (S = new ResizeObserver((e) => {
+        const l = e[0]?.contentRect;
+        if (!l) return;
         const y = b.value;
-        (!y || y.width !== a.width || y.height !== a.height) && (b.value = { width: a.width, height: a.height });
-      }), k.observe(n), l(() => {
-        k?.disconnect(), k = null;
+        (!y || y.width !== l.width || y.height !== l.height) && (b.value = { width: l.width, height: l.height });
+      }), S.observe(n), a(() => {
+        S?.disconnect(), S = null;
       }));
     });
     const h = s(() => {
-      if (!i.value || d.value.length === 0) return null;
-      const l = o.getMediaSize(), n = l.width - o.yAxisWidth, e = l.height - o.xAxisHeight;
+      if (!i.value || c.value.length === 0) return null;
+      const a = o.getMediaSize(), n = a.width - o.yAxisWidth, e = a.height - o.xAxisHeight;
       if (g.value) {
-        const c = b.value;
-        return c ? R({
+        const v = b.value;
+        return v ? R({
           x: i.value.mediaX,
           y: i.value.mediaY,
           chartWidth: n,
           chartHeight: e,
-          tooltipWidth: c.width,
-          tooltipHeight: c.height
+          tooltipWidth: v.width,
+          tooltipHeight: v.height
         }) : { left: 0, top: 0 };
       }
-      const a = d.value.some((c) => "open" in c.data), y = d.value.filter((c) => !("open" in c.data)).length, L = 160, N = a ? 140 : 40 + y * 22;
+      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;
       return R({
         x: i.value.mediaX,
         y: i.value.mediaY,
@@ -71,11 +71,11 @@ const ee = {
         tooltipHeight: N
       });
     }), V = s(() => !g.value || b.value !== null);
-    function E(l) {
-      return "open" in l;
+    function E(a) {
+      return "open" in a;
     }
-    return (l, n) => (r(), u(x, null, [
-      v(i) && d.value.length > 0 && h.value && !g.value ? (r(), u("div", {
+    return (a, n) => (r(), u(x, null, [
+      p(i) && c.value.length > 0 && h.value && !g.value ? (r(), u("div", {
         key: 0,
         style: m({
           position: "absolute",
@@ -98,7 +98,7 @@ const ee = {
           transition: "opacity 0.15s ease"
         })
       }, [
-        p("div", {
+        d("div", {
           style: m({
             fontSize: t.value.axis.fontSize + "px",
             color: t.value.axis.textColor,
@@ -107,38 +107,38 @@ const ee = {
             borderBottom: "1px solid " + t.value.tooltip.borderColor,
             letterSpacing: "0.02em"
           })
-        }, f(v(G)(z.value)) + " " + f(v(J)(z.value, O.value)), 5),
-        (r(!0), u(x, null, H(d.value, (e) => (r(), u(x, {
+        }, 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),
+        (r(!0), u(x, null, H(c.value, (e) => (r(), u(x, {
           key: e.id
         }, [
-          E(e.data) ? (r(), u("div", ee, [
+          E(e.data) ? (r(), u("div", Q, [
             (r(!0), u(x, null, H([
               { label: "Open", val: e.data.open, field: "open" },
               { label: "High", val: e.data.high, field: "high" },
               { label: "Low", val: e.data.low, field: "low" },
               { label: "Close", val: e.data.close, field: "close" }
-            ], (a) => (r(), u(x, {
-              key: a.label
+            ], (l) => (r(), u(x, {
+              key: l.label
             }, [
-              p("span", te, f(a.label), 1),
-              p("span", {
+              d("span", ee, f(l.label), 1),
+              d("span", {
                 style: m({
                   fontWeight: 600,
-                  color: v(U)(
+                  color: p(K)(
                     e.data.close >= e.data.open ? t.value.candlestick.up.body : t.value.candlestick.down.body
                   ),
                   textAlign: "right"
                 })
-              }, f(C.value(a.val, a.field)), 5)
+              }, f(k.value(l.val, l.field)), 5)
             ], 64))), 128)),
             e.data.volume != null ? (r(), u(x, { key: 0 }, [
-              n[0] || (n[0] = p("span", { style: { opacity: 0.5 } }, "Volume", -1)),
-              p("span", {
+              n[0] || (n[0] = d("span", { style: { opacity: 0.5 } }, "Volume", -1)),
+              d("span", {
                 style: m({ fontWeight: 600, color: t.value.tooltip.textColor, textAlign: "right" })
-              }, f(C.value(e.data.volume, "volume")), 5)
+              }, f(k.value(e.data.volume, "volume")), 5)
             ], 64)) : _("", !0)
-          ])) : (r(), u("div", oe, [
-            p("span", {
+          ])) : (r(), u("div", te, [
+            d("span", {
               style: m({
                 width: "8px",
                 height: "8px",
@@ -147,14 +147,14 @@ const ee = {
                 flexShrink: 0
               })
             }, null, 4),
-            p("span", ae, f(e.label ?? "Value"), 1),
-            p("span", {
+            d("span", oe, f(e.label ?? "Value"), 1),
+            d("span", {
               style: m({ fontWeight: 600, color: e.color })
-            }, f(C.value(e.data.value, "value")), 5)
+            }, f(k.value(e.data.value, "value")), 5)
           ]))
         ], 64))), 128))
       ], 4)) : _("", !0),
-      v(i) && d.value.length > 0 && h.value && g.value ? (r(), u("div", {
+      p(i) && c.value.length > 0 && h.value && g.value ? (r(), u("div", {
         key: 1,
         ref_key: "containerRef",
         ref: B,
@@ -176,14 +176,14 @@ const ee = {
           fontVariantNumeric: "tabular-nums",
           color: t.value.tooltip.textColor,
           width: "max-content",
-          maxWidth: v(o).getMediaSize().width - v(o).yAxisWidth + "px",
+          maxWidth: p(o).getMediaSize().width - p(o).yAxisWidth + "px",
           boxSizing: "border-box",
           zIndex: 10,
           visibility: b.value !== null ? "visible" : "hidden"
         })
       }, [
-        $(l.$slots, "default", {
-          snapshots: d.value,
+        Z(a.$slots, "default", {
+          snapshots: c.value,
           time: z.value
         })
       ], 12, le)) : _("", !0)
@@ -191,5 +191,5 @@ const ee = {
   }
 });
 export {
-  ve as default
+  ce as default
 };

package/dist/ui/YAxis.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as m, ref as p, onMounted as r, watch as s, onUnmounted as o, openBlock as f, createElementBlock as b, normalizeStyle as y, unref as u } from "vue";
+import { defineComponent as m, ref as p, onMounted as r, watch as s, onUnmounted as o, openBlock as b, createElementBlock as f, normalizeStyle as y, unref as u } from "vue";
 import { mountAxisLabels as x } from "../core/dist/axis/dom-labels.js";
 import { useChartInstance as h } from "../context.js";
 const _ = /* @__PURE__ */ m({
@@ -23,7 +23,7 @@ const _ = /* @__PURE__ */ m({
       t.value !== null && (l = x({ chart: n, container: t.value, axis: "y" }));
     }), o(() => {
       l?.(), l = null;
-    }), (L, S) => (f(), b("div", {
+    }), (L, S) => (b(), f("div", {
       ref_key: "containerRef",
       ref: t,
       style: y({