@wick-charts/vue 0.6.2 → 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/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
 };