@wick-charts/vue 0.8.0 → 0.8.2

package/dist/ui/InfoBar.vue.js

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

package/dist/ui/NumberFlow.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as _, ref as b, onMounted as g, computed as c, openBlock as o, createElementBlock as l, Fragment as r, renderList as f, createElementVNode as m, normalizeStyle as k, toDisplayString as p } from "vue";
+import { defineComponent as k, ref as f, onMounted as N, computed as m, watch as I, openBlock as a, createElementBlock as l, Fragment as r, renderList as d, createElementVNode as y, normalizeStyle as w, toDisplayString as v } from "vue";
 const x = { style: {
   display: "inline-flex",
   fontVariantNumeric: "tabular-nums",
@@ -14,7 +14,7 @@ const x = { style: {
 }, F = {
   key: 1,
   style: { display: "inline-block" }
-}, w = /* @__PURE__ */ _({
+}, S = /* @__PURE__ */ k({
   __name: "NumberFlow",
   props: {
     value: {},
@@ -22,48 +22,57 @@ const x = { style: {
     locale: { default: "en-US" },
     spinDuration: { default: 350 }
   },
-  setup(a) {
-    const s = a, i = b(!1);
-    g(() => {
+  setup(h) {
+    const o = h, i = f(!1);
+    N(() => {
       i.value = !0;
     });
-    const d = c(() => {
-      const t = s.format;
-      if (typeof t == "function") return t;
-      const n = new Intl.NumberFormat(s.locale, typeof t == "object" ? t : void 0);
-      return (e) => n.format(e);
-    }), y = c(() => {
-      const t = d.value(s.value), n = [];
-      for (const e of t)
-        e >= "0" && e <= "9" ? n.push({ type: "digit", value: e }) : n.push({ type: "symbol", value: e });
+    const u = m(() => {
+      const e = o.format;
+      if (typeof e == "function") return e;
+      const n = new Intl.NumberFormat(o.locale, typeof e == "object" ? e : void 0);
+      return (t) => n.format(t);
+    }), _ = m(() => {
+      const e = u.value(o.value), n = [];
+      for (const t of e)
+        t >= "0" && t <= "9" ? n.push({ type: "digit", value: t }) : n.push({ type: "symbol", value: t });
       return n;
-    }), v = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-    return (t, n) => (o(), l("span", x, [
-      (o(!0), l(r, null, f(y.value, (e, h) => (o(), l(r, { key: h }, [
-        e.type === "digit" ? (o(), l("span", D, [
-          m("span", {
-            style: k({
+    }), s = f(o.spinDuration);
+    let c = Number.NEGATIVE_INFINITY;
+    I(
+      () => u.value(o.value),
+      () => {
+        const e = performance.now(), n = e - c < o.spinDuration;
+        c = e, s.value = n ? 0 : o.spinDuration;
+      }
+    );
+    const b = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+    return (e, n) => (a(), l("span", x, [
+      (a(!0), l(r, null, d(_.value, (t, g) => (a(), l(r, { key: g }, [
+        t.type === "digit" ? (a(), l("span", D, [
+          y("span", {
+            style: w({
               display: "flex",
               flexDirection: "column",
-              transform: "translateY(" + -parseInt(e.value) * 1.2 + "em)",
-              transition: i.value ? "transform " + a.spinDuration + "ms cubic-bezier(0.16, 1, 0.3, 1)" : "none"
+              transform: "translateY(" + -parseInt(t.value) * 1.2 + "em)",
+              transition: i.value && s.value > 0 ? "transform " + s.value + "ms cubic-bezier(0.16, 1, 0.3, 1)" : "none"
             })
           }, [
-            (o(), l(r, null, f(v, (u) => m("span", {
-              key: u,
+            (a(), l(r, null, d(b, (p) => y("span", {
+              key: p,
               style: {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 height: "1.2em"
               }
-            }, p(u), 1)), 64))
+            }, v(p), 1)), 64))
           ], 4)
-        ])) : (o(), l("span", F, p(e.value), 1))
+        ])) : (a(), l("span", F, v(t.value), 1))
       ], 64))), 128))
     ]));
   }
 });
 export {
-  w as default
+  S as default
 };