@wick-charts/vue 0.6.3 → 0.6.4

package/dist/ui/InfoBar.vue.js

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

package/dist/ui/Tooltip.vue.js

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