@wick-charts/vue 0.5.0 → 0.6.0

package/dist/ui/InfoBar.vue.js

@@ -1,17 +1,16 @@
-import { defineComponent as T, computed as n, inject as B, ref as V, onMounted as N, onUnmounted as W, useSlots as A, unref as e, openBlock as l, createBlock as O, Teleport as D, createElementVNode as r, normalizeStyle as i, renderSlot as M, createElementBlock as s, Fragment as p, toDisplayString as f, renderList as _, createCommentVNode as F } from "vue";
+import { defineComponent as V, computed as n, inject as B, ref as N, onMounted as T, onUnmounted as W, useSlots as A, unref as e, openBlock as l, createBlock as O, Teleport as D, createElementVNode as i, normalizeStyle as s, renderSlot as M, createElementBlock as u, Fragment as p, toDisplayString as m, renderList as _, createCommentVNode as F } from "vue";
 import { buildHoverSnapshots as P, buildLastSnapshots as R } from "../core/dist/snapshots.js";
 import { resolveCandlestickBodyColor as $ } from "../core/dist/theme/resolve.js";
 import { formatCompact as j, formatPriceAdaptive as U } from "../core/dist/utils/format.js";
-import { formatTime as q } from "../core/dist/utils/time.js";
-import { useCrosshairPosition as G } from "../composables.js";
-import { useChartInstance as J, ThemeKey as Q, InfoBarAnchorKey as X } from "../context.js";
-const Y = {
+import { useCrosshairPosition as X } from "../composables.js";
+import { useChartInstance as q, ThemeKey as G, InfoBarAnchorKey as J } from "../context.js";
+const Q = {
   key: 0,
   style: { display: "inline-flex", alignItems: "center", gap: "4px" }
-}, Z = {
+}, Y = {
   key: 1,
   style: { display: "inline-flex", alignItems: "center", gap: "3px" }
-}, ie = /* @__PURE__ */ T({
+}, le = /* @__PURE__ */ V({
   __name: "InfoBar",
   props: {
     sort: {},
@@ -20,36 +19,36 @@ const Y = {
   setup(L) {
     const C = L, b = n(() => C.sort ?? "none"), y = n(
       () => C.format ?? ((o, w) => w === "volume" ? j(o) : U(o))
-    ), u = J(), h = G(u), a = B(Q), g = B(X);
+    ), r = q(), h = X(r), a = B(G), g = B(J);
     if (!a)
       throw new Error("<InfoBar> must be used within <ChartContainer>: missing ThemeKey.");
     if (!g)
       throw new Error("<InfoBar> must be used within <ChartContainer>: missing InfoBarAnchorKey.");
-    const v = V(0), k = () => {
+    const v = N(0), S = () => {
       v.value++;
     };
-    N(() => {
-      u.on("overlayChange", k), u.getSeriesIds().length > 0 && v.value++;
+    T(() => {
+      r.on("overlayChange", S), r.getSeriesIds().length > 0 && v.value++;
     }), W(() => {
-      u.off("overlayChange", k);
+      r.off("overlayChange", S);
     });
     const x = n(() => {
       v.value;
       const o = h.value;
-      return o === null ? null : P(u, { time: o.time, sort: b.value, cacheKey: "infobar-hover" });
-    }), E = n(() => (v.value, R(u, { sort: b.value, cacheKey: "infobar-last" }))), c = n(() => x.value !== null && x.value.length > 0), m = n(
+      return o === null ? null : P(r, { time: o.time, sort: b.value, cacheKey: "infobar-hover" });
+    }), E = n(() => (v.value, R(r, { sort: b.value, cacheKey: "infobar-last" }))), c = n(() => x.value !== null && x.value.length > 0), f = n(
       () => c.value ? x.value : E.value
-    ), K = n(() => u.getDataInterval()), S = n(() => m.value.length === 0 ? 0 : c.value && h.value ? h.value.time : Math.max(...m.value.map((o) => o.data.time))), z = A(), I = n(() => typeof z.default == "function");
+    ), K = n(() => r.getDataInterval()), k = n(() => f.value.length === 0 ? 0 : c.value && h.value ? h.value.time : Math.max(...f.value.map((o) => o.data.time))), z = A(), I = n(() => typeof z.default == "function");
     function H(o) {
       return "open" in o;
     }
-    return (o, w) => e(g) && e(a) && m.value.length > 0 ? (l(), O(D, {
+    return (o, w) => e(g) && e(a) && f.value.length > 0 ? (l(), O(D, {
       key: 0,
       to: e(g)
     }, [
-      r("div", {
+      i("div", {
         "data-tooltip-legend": "",
-        style: i(
+        style: s(
           I.value ? {
             display: "flex",
             alignItems: "center",
@@ -78,49 +77,49 @@ const Y = {
       }, [
         I.value ? M(o.$slots, "default", {
           key: 0,
-          snapshots: m.value,
-          time: S.value,
+          snapshots: f.value,
+          time: k.value,
           isHover: c.value
-        }) : (l(), s(p, { key: 1 }, [
-          r("span", {
-            style: i({ color: e(a).axis.textColor, marginRight: "2px" })
-          }, f(e(q)(S.value, K.value)), 5),
-          (l(!0), s(p, null, _(m.value, (t) => (l(), s(p, {
+        }) : (l(), u(p, { key: 1 }, [
+          i("span", {
+            style: s({ color: e(a).axis.textColor, marginRight: "2px" })
+          }, m(e(r).timeScale.formatX(k.value, K.value)), 5),
+          (l(!0), u(p, null, _(f.value, (t) => (l(), u(p, {
             key: t.id
           }, [
-            H(t.data) ? (l(), s("span", Y, [
-              (l(!0), s(p, null, _([
+            H(t.data) ? (l(), u("span", Q, [
+              (l(!0), u(p, null, _([
                 { label: "O", field: "open", val: t.data.open },
                 { label: "H", field: "high", val: t.data.high },
                 { label: "L", field: "low", val: t.data.low },
                 { label: "C", field: "close", val: t.data.close }
-              ], (d) => (l(), s(p, {
+              ], (d) => (l(), u(p, {
                 key: d.label
               }, [
-                r("span", {
-                  style: i({ color: e(a).axis.textColor, opacity: 0.5, marginLeft: "5px" })
-                }, f(d.label), 5),
-                r("span", {
-                  style: i({
+                i("span", {
+                  style: s({ color: e(a).axis.textColor, opacity: 0.5, marginLeft: "5px" })
+                }, m(d.label), 5),
+                i("span", {
+                  style: s({
                     color: e($)(
                       t.data.close >= t.data.open ? e(a).candlestick.up.body : e(a).candlestick.down.body
                     ),
                     fontWeight: 500,
                     marginLeft: "2px"
                   })
-                }, f(y.value(d.val, d.field)), 5)
+                }, m(y.value(d.val, d.field)), 5)
               ], 64))), 128)),
-              t.data.volume != null ? (l(), s(p, { key: 0 }, [
-                r("span", {
-                  style: i({ color: e(a).axis.textColor, opacity: 0.5, marginLeft: "5px" })
+              t.data.volume != null ? (l(), u(p, { key: 0 }, [
+                i("span", {
+                  style: s({ color: e(a).axis.textColor, opacity: 0.5, marginLeft: "5px" })
                 }, "V", 4),
-                r("span", {
-                  style: i({ color: e(a).axis.textColor, fontWeight: 500, marginLeft: "2px" })
-                }, f(y.value(t.data.volume, "volume")), 5)
+                i("span", {
+                  style: s({ color: e(a).axis.textColor, fontWeight: 500, marginLeft: "2px" })
+                }, m(y.value(t.data.volume, "volume")), 5)
               ], 64)) : F("", !0)
-            ])) : (l(), s("span", Z, [
-              r("span", {
-                style: i({
+            ])) : (l(), u("span", Y, [
+              i("span", {
+                style: s({
                   width: "6px",
                   height: "6px",
                   borderRadius: "50%",
@@ -128,9 +127,9 @@ const Y = {
                   flexShrink: 0
                 })
               }, null, 4),
-              r("span", {
-                style: i({ color: t.color, fontWeight: 500 })
-              }, f(y.value(t.data.value, "value")), 5)
+              i("span", {
+                style: s({ color: t.color, fontWeight: 500 })
+              }, m(y.value(t.data.value, "value")), 5)
             ]))
           ], 64))), 128))
         ], 64))
@@ -139,5 +138,5 @@ const Y = {
   }
 });
 export {
-  ie as default
+  le as default
 };

package/dist/ui/Legend.vue.js

@@ -1,105 +1,106 @@
-import { defineComponent as W, inject as C, computed as k, ref as E, onMounted as H, onUnmounted as N, useSlots as M, unref as a, openBlock as g, createBlock as U, Teleport as q, createElementBlock as u, normalizeStyle as f, renderSlot as G, Fragment as F, renderList as A, createElementVNode as b, toDisplayString as $, createCommentVNode as j } from "vue";
+import { defineComponent as W, inject as C, computed as k, ref as E, onMounted as H, onUnmounted as N, useSlots as M, unref as d, openBlock as c, createBlock as U, Teleport as q, createElementBlock as u, normalizeStyle as h, renderSlot as G, Fragment as F, renderList as T, createElementVNode as S, toDisplayString as A, createCommentVNode as $ } from "vue";
 import { useChartInstance as J, ThemeKey as O, LegendAnchorKey as P, LegendRightAnchorKey as Q } from "../context.js";
 const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "nowrap" } }, _ = ["data-legend"], ee = ["onClick"], te = { style: { "white-space": "nowrap" } }, le = /* @__PURE__ */ W({
   __name: "Legend",
   props: {
     items: {},
     position: { default: "bottom" },
-    mode: { default: "toggle" }
+    mode: { default: "toggle" },
+    onToggle: {}
   },
   setup(t) {
-    const S = t, i = J(), l = C(O), I = C(P), w = C(Q);
-    if (!l)
+    const f = t, i = J(), r = C(O), I = C(P), w = C(Q);
+    if (!r)
       throw new Error("<Legend> must be used within <ChartContainer>: missing ThemeKey.");
     if (!I || !w)
       throw new Error("<Legend> must be used within <ChartContainer>: missing legend anchors.");
-    const L = k(() => S.position === "right" ? w.value : I.value), h = E(null), v = E(0), V = () => {
+    const L = k(() => f.position === "right" ? w.value : I.value), p = E(null), v = E(0), V = () => {
       v.value++;
     }, D = () => {
-      h.value = null;
+      p.value = null;
     };
     H(() => {
       i.on("overlayChange", V), i.on("seriesChange", D), i.getSeriesIds().length > 0 && v.value++;
     }), N(() => {
       i.off("overlayChange", V), i.off("seriesChange", D);
     });
-    function z(n) {
-      const { id: d, seriesId: e, layerIndex: s, label: o, color: p, isDisabled: x } = n;
-      return { id: d, seriesId: e, layerIndex: s, label: o, color: p, isDisabled: x, toggle: () => {
-        s !== void 0 ? i.setLayerVisible(e, s, !i.isLayerVisible(e, s)) : i.setSeriesVisible(e, !i.isSeriesVisible(e));
+    function z(o) {
+      const { id: s, seriesId: e, layerIndex: l, label: n, color: x, isDisabled: y } = o;
+      return { id: s, seriesId: e, layerIndex: l, label: n, color: x, isDisabled: y, toggle: () => {
+        l !== void 0 ? i.setLayerVisible(e, l, !i.isLayerVisible(e, l)) : i.setSeriesVisible(e, !i.isSeriesVisible(e)), f.onToggle?.({ id: s, action: "toggle" });
       }, isolate: () => {
-        if (h.value === d) {
+        if (p.value === s) {
           i.batch(() => {
-            for (const r of i.getSeriesIds()) {
-              i.setSeriesVisible(r, !0);
-              const y = i.getSeriesLayers(r);
-              if (y)
-                for (let c = 0; c < y.length; c++) i.setLayerVisible(r, c, !0);
+            for (const a of i.getSeriesIds()) {
+              i.setSeriesVisible(a, !0);
+              const m = i.getSeriesLayers(a);
+              if (m)
+                for (let g = 0; g < m.length; g++) i.setLayerVisible(a, g, !0);
             }
-          }), h.value = null;
+          }), p.value = null, f.onToggle?.({ id: s, action: "unisolate" });
           return;
         }
         i.batch(() => {
-          for (const r of i.getSeriesIds()) {
-            const y = i.getSeriesLayers(r);
-            if (y) {
-              i.setSeriesVisible(r, r === e);
-              for (let c = 0; c < y.length; c++)
-                i.setLayerVisible(r, c, r === e && c === s);
+          for (const a of i.getSeriesIds()) {
+            const m = i.getSeriesLayers(a);
+            if (m) {
+              i.setSeriesVisible(a, a === e);
+              for (let g = 0; g < m.length; g++)
+                i.setLayerVisible(a, g, a === e && g === l);
             } else
-              i.setSeriesVisible(r, r === d);
+              i.setSeriesVisible(a, a === s);
           }
-        }), h.value = d;
+        }), p.value = s, f.onToggle?.({ id: s, action: "isolate" });
       } };
     }
-    function K(n) {
-      const d = [];
-      for (const e of n.getSeriesIds()) {
-        const s = n.getSeriesLayers(e);
-        if (s)
-          for (let o = 0; o < s.length; o++) {
-            const p = `${e}_layer${o}`, x = n.isSeriesVisible(e) && n.isLayerVisible(e, o);
-            d.push(
+    function j(o) {
+      const s = [];
+      for (const e of o.getSeriesIds()) {
+        const l = o.getSeriesLayers(e);
+        if (l)
+          for (let n = 0; n < l.length; n++) {
+            const x = `${e}_layer${n}`, y = o.isSeriesVisible(e) && o.isLayerVisible(e, n);
+            s.push(
               z({
-                id: p,
+                id: x,
                 seriesId: e,
-                layerIndex: o,
-                label: n.getLayerLabel(e, o) ?? `Series ${o + 1}`,
-                color: s[o].color,
-                isDisabled: !x
+                layerIndex: n,
+                label: o.getLayerLabel(e, n) ?? `Series ${n + 1}`,
+                color: l[n].color,
+                isDisabled: !y
               })
             );
           }
         else {
-          const o = n.getSeriesColor(e);
-          if (!o) continue;
-          const p = n.getSeriesLabel(e), x = n.isSeriesVisible(e);
-          d.push(
+          const n = o.getSeriesColor(e);
+          if (!n) continue;
+          const x = o.getSeriesLabel(e), y = o.isSeriesVisible(e);
+          s.push(
             z({
               id: e,
               seriesId: e,
               layerIndex: void 0,
-              label: p ?? "Series",
-              color: o,
-              isDisabled: !x
+              label: x ?? "Series",
+              color: n,
+              isDisabled: !y
             })
           );
         }
       }
-      return d;
+      return s;
     }
-    const m = k(() => (v.value, h.value, K(i))), B = M(), R = k(() => typeof B.default == "function");
-    function T(n) {
-      S.mode === "isolate" || S.mode === "solo" ? n.isolate() : n.toggle();
+    const b = k(() => (v.value, p.value, j(i))), K = M(), B = k(() => typeof K.default == "function");
+    function R(o) {
+      f.mode === "isolate" || f.mode === "solo" ? o.isolate() : o.toggle();
     }
-    return (n, d) => L.value && a(l) ? (g(), U(q, {
+    return (o, s) => L.value && d(r) ? (c(), U(q, {
       key: 0,
       to: L.value
     }, [
-      R.value && m.value.length > 0 ? (g(), u("div", {
+      B.value && b.value.length > 0 ? (c(), u("div", {
         key: 0,
         "data-legend": t.position,
-        style: f({
+        style: h({
           display: "flex",
           flexDirection: t.position === "right" ? "column" : "row",
           flexWrap: "wrap",
@@ -107,18 +108,18 @@ const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "n
           padding: t.position === "right" ? "8px 6px" : "6px 8px",
           alignItems: t.position === "right" ? "flex-start" : "center",
           justifyContent: t.position === "right" ? "flex-start" : "center",
-          fontFamily: a(l).typography.fontFamily,
-          fontSize: a(l).axis.fontSize + "px",
-          color: a(l).axis.textColor,
+          fontFamily: d(r).typography.fontFamily,
+          fontSize: d(r).axis.fontSize + "px",
+          color: d(r).axis.textColor,
           pointerEvents: "auto",
           flexShrink: 0
         })
       }, [
-        G(n.$slots, "default", { items: m.value })
-      ], 12, X)) : t.items && t.items.length > 0 ? (g(), u("div", {
+        G(o.$slots, "default", { items: b.value })
+      ], 12, X)) : t.items && t.items.length > 0 ? (c(), u("div", {
         key: 1,
         "data-legend": t.position,
-        style: f({
+        style: h({
           display: "flex",
           flexDirection: t.position === "right" ? "column" : "row",
           flexWrap: "wrap",
@@ -126,15 +127,15 @@ const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "n
           padding: t.position === "right" ? "8px 6px" : "6px 8px",
           alignItems: t.position === "right" ? "flex-start" : "center",
           justifyContent: t.position === "right" ? "flex-start" : "center",
-          fontFamily: a(l).typography.fontFamily,
-          fontSize: a(l).axis.fontSize + "px",
-          color: a(l).axis.textColor,
+          fontFamily: d(r).typography.fontFamily,
+          fontSize: d(r).axis.fontSize + "px",
+          color: d(r).axis.textColor,
           pointerEvents: "auto",
           flexShrink: 0
         })
       }, [
-        (g(!0), u(F, null, A(t.items, (e, s) => (g(), u("div", {
-          key: s,
+        (c(!0), u(F, null, T(t.items, (e, l) => (c(), u("div", {
+          key: l,
           style: {
             display: "flex",
             alignItems: "center",
@@ -142,8 +143,8 @@ const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "n
             userSelect: "none"
           }
         }, [
-          b("span", {
-            style: f({
+          S("span", {
+            style: h({
               width: "8px",
               height: "8px",
               borderRadius: "2px",
@@ -151,12 +152,12 @@ const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "n
               flexShrink: 0
             })
           }, null, 4),
-          b("span", Z, $(e.label), 1)
+          S("span", Z, A(e.label), 1)
         ]))), 128))
-      ], 12, Y)) : m.value.length > 0 ? (g(), u("div", {
+      ], 12, Y)) : b.value.length > 0 ? (c(), u("div", {
         key: 2,
         "data-legend": t.position,
-        style: f({
+        style: h({
           display: "flex",
           flexDirection: t.position === "right" ? "column" : "row",
           flexWrap: "wrap",
@@ -164,18 +165,18 @@ const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "n
           padding: t.position === "right" ? "8px 6px" : "6px 8px",
           alignItems: t.position === "right" ? "flex-start" : "center",
           justifyContent: t.position === "right" ? "flex-start" : "center",
-          fontFamily: a(l).typography.fontFamily,
-          fontSize: a(l).axis.fontSize + "px",
-          color: a(l).axis.textColor,
+          fontFamily: d(r).typography.fontFamily,
+          fontSize: d(r).axis.fontSize + "px",
+          color: d(r).axis.textColor,
           pointerEvents: "auto",
           flexShrink: 0
         })
       }, [
-        (g(!0), u(F, null, A(m.value, (e) => (g(), u("button", {
+        (c(!0), u(F, null, T(b.value, (e) => (c(), u("button", {
           key: e.id,
           type: "button",
-          onClick: (s) => T(e),
-          style: f({
+          onClick: (l) => R(e),
+          style: h({
             display: "flex",
             alignItems: "center",
             gap: "4px",
@@ -192,8 +193,8 @@ const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "n
             textAlign: "left"
           })
         }, [
-          b("span", {
-            style: f({
+          S("span", {
+            style: h({
               width: "8px",
               height: "8px",
               borderRadius: "2px",
@@ -201,10 +202,10 @@ const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "n
               flexShrink: 0
             })
           }, null, 4),
-          b("span", te, $(e.label), 1)
+          S("span", te, A(e.label), 1)
         ], 12, ee))), 128))
-      ], 12, _)) : j("", !0)
-    ], 8, ["to"])) : j("", !0);
+      ], 12, _)) : $("", !0)
+    ], 8, ["to"])) : $("", !0);
   }
 });
 export {

package/dist/ui/PieLegend.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent as V, inject as C, computed as r, useSlots as w, ref as E, onMounted as L, onUnmounted as B, renderSlot as R, openBlock as n, createBlock as T, Teleport as D, createElementVNode as d, normalizeStyle as l, createElementBlock as a, Fragment as I, renderList as F, toDisplayString as u, createCommentVNode as v } from "vue";
 import { formatCompact as P } from "../core/dist/utils/format.js";
-import { LegendAnchorKey as K, LegendRightAnchorKey as M, useChartInstance as $, useTheme as j } from "../context.js";
-const O = ["data-chart-pie-legend-position"], U = { style: { flex: 1, opacity: 0.8 } }, q = { style: { flex: 1, opacity: 0.8 } }, Q = /* @__PURE__ */ V({
+import { LegendAnchorKey as K, LegendRightAnchorKey as M, useChartInstance as j, useTheme as O } from "../context.js";
+const U = ["data-chart-pie-legend-position"], $ = { style: { flex: 1, opacity: 0.8 } }, q = { style: { flex: 1, opacity: 0.8 } }, Q = /* @__PURE__ */ V({
   __name: "PieLegend",
   props: {
     seriesId: {},
@@ -13,7 +13,7 @@ const O = ["data-chart-pie-legend-position"], U = { style: { flex: 1, opacity: 0
     const s = m, x = C(K), b = C(M);
     if (!x || !b)
       throw new Error("<PieLegend> must be used within <ChartContainer>: missing legend anchors.");
-    const S = r(() => s.position === "right" ? b.value : s.position === "bottom" ? x.value : null), e = r(() => s.mode ?? "both"), h = r(() => s.format ?? P), p = $(), _ = j(), A = w(), W = r(() => typeof A.default == "function"), c = E(0), k = () => {
+    const S = r(() => s.position === "right" ? b.value : s.position === "bottom" ? x.value : null), e = r(() => s.mode ?? "both"), h = r(() => s.format ?? P), p = j(), _ = O(), A = w(), W = r(() => typeof A.default == "function"), c = E(0), k = () => {
       c.value++;
     };
     L(() => {
@@ -57,7 +57,7 @@ const O = ["data-chart-pie-legend-position"], U = { style: { flex: 1, opacity: 0
           d("span", {
             style: l({ width: "10px", height: "10px", borderRadius: "50%", background: t.color, flexShrink: 0 })
           }, null, 4),
-          d("span", U, u(t.label), 1),
+          d("span", $, u(t.label), 1),
           e.value === "value" || e.value === "both" ? (n(), a("span", {
             key: 0,
             style: l({
@@ -79,7 +79,7 @@ const O = ["data-chart-pie-legend-position"], U = { style: { flex: 1, opacity: 0
             })
           }, u(t.percent.toFixed(1)) + "% ", 5)) : v("", !0)
         ]))), 128))
-      ], 12, O)
+      ], 12, U)
     ], 8, ["to"])) : i.value.length > 0 ? (n(), a("div", {
       key: 2,
       "data-chart-pie-legend": "",