@wick-charts/vue 0.6.3 → 0.7.0

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 $, 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 = {
   key: 0,
   style: { display: "inline-flex", alignItems: "center", gap: "4px" }
-}, Y = {
+}, ee = {
   key: 1,
   style: { display: "inline-flex", alignItems: "center", gap: "3px" }
-}, le = /* @__PURE__ */ V({
+}, te = {
+  key: 2,
+  style: { display: "inline-flex", alignItems: "center", gap: "3px" }
+}, se = /* @__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"), d = i(
+      () => b.format ?? ((a, _) => _ === "volume" ? X(a) : q(a))
+    ), u = J(), y = G(u), o = B(Q), g = B(Y);
+    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 : 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");
+    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) && c.value.length > 0 ? (n(), R($, {
       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,70 +72,83 @@ 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 ? D(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: 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, {
+            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", Z, [
+              (n(!0), s(f, null, L([
+                { 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
               }, [
-                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(U)(
+                      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(d.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(f, { 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)
+                l("span", {
+                  style: r({ color: t(o).axis.textColor, fontWeight: 500, marginLeft: "2px" })
+                }, p(d.value(e.data.volume, "volume")), 5)
               ], 64)) : F("", !0)
-            ])) : (l(), u("span", Y, [
-              i("span", {
-                style: s({
+            ])) : V(e.data) ? (n(), s("span", ee, [
+              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(d.value(e.data.low, "low")) + " – " + p(d.value(e.data.high, "high")), 5)
+            ])) : (n(), s("span", te, [
+              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(d.value(e.data.value, "value")), 5)
             ]))
           ], 64))), 128))
         ], 64))
@@ -138,5 +157,5 @@ const Q = {
   }
 });
 export {
-  le as default
+  se as default
 };

package/dist/ui/Marker.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as s, onMounted as o, onUnmounted as t, watch as u, createCommentVNode as n } from "vue";
-import { useChartInstance as p } from "../context.js";
+import { useChartInstance as c } from "../context.js";
 const h = /* @__PURE__ */ s({
   __name: "Marker",
   props: {
@@ -9,37 +9,40 @@ const h = /* @__PURE__ */ s({
     shape: {},
     pulse: { type: Boolean },
     label: {},
-    color: {}
+    color: {},
+    scale: {}
   },
-  setup(a) {
-    const e = a, r = p();
+  setup(r) {
+    const e = r, a = c();
     let l = null;
     return o(() => {
-      l = r.addMarker({
+      l = a.addMarker({
         time: e.time,
         value: e.value,
         seriesId: e.seriesId,
         shape: e.shape,
         pulse: e.pulse,
         label: e.label,
-        color: e.color
+        color: e.color,
+        scale: e.scale
       });
     }), t(() => {
-      l !== null && r.removeMarker(l), l = null;
+      l !== null && a.removeMarker(l), l = null;
     }), u(
-      () => [e.time, e.value, e.seriesId, e.shape, e.pulse, e.label, e.color],
+      () => [e.time, e.value, e.seriesId, e.shape, e.pulse, e.label, e.color, e.scale],
       () => {
-        l !== null && r.updateMarker(l, {
+        l !== null && a.updateMarker(l, {
           time: e.time,
           value: e.value,
           seriesId: e.seriesId,
           shape: e.shape,
           pulse: e.pulse,
           label: e.label,
-          color: e.color
+          color: e.color,
+          scale: e.scale
         });
       }
-    ), (i, m) => n("", !0);
+    ), (p, i) => n("", !0);
   }
 });
 export {

package/dist/ui/Navigator.vue.js

@@ -1,58 +1,58 @@
-import { defineComponent as f, inject as n, ref as m, shallowRef as d, computed as p, watch as i, onBeforeUnmount as g, unref as u, openBlock as y, createBlock as _, Teleport as w, createElementVNode as C, normalizeStyle as N, createCommentVNode as k } from "vue";
-import { NavigatorController as R } from "../core/dist/navigator/controller.js";
-import { NavigatorAnchorKey as x, ChartKey as B, ThemeKey as K } from "../context.js";
-const V = /* @__PURE__ */ f({
+import { defineComponent as d, inject as n, ref as p, shallowRef as g, computed as u, watch as l, onBeforeUnmount as y, unref as c, openBlock as _, createBlock as w, Teleport as N, createElementVNode as k, normalizeStyle as C, createCommentVNode as R } from "vue";
+import { NavigatorController as x } from "../core/dist/navigator/controller.js";
+import { NavigatorAnchorKey as B, ChartKey as K, ThemeKey as T } from "../context.js";
+const S = /* @__PURE__ */ d({
   __name: "Navigator",
   props: {
     data: {},
     height: {}
   },
-  setup(c) {
-    const t = c, a = n(x), l = n(B), h = n(K);
-    if (!a || !l || !h)
+  setup(v) {
+    const t = v, a = n(B), r = n(K), h = n(T);
+    if (!a || !r || !h)
       throw new Error("<Navigator> must be used within <ChartContainer>.");
-    const s = m(null), o = d(null), v = p(() => t.height ?? h.value.navigator.height);
-    return i(
-      [s, () => l.value],
-      ([e, r]) => {
-        !e || !r || o.value || (o.value = new R({
+    const s = p(null), o = g(null), m = u(() => t.height ?? h.value.navigator.height), f = u(() => r.value?.checkTimeOnlyFeature("Navigator") ?? !1);
+    return l(
+      [s, () => r.value],
+      ([e, i]) => {
+        !e || !i || o.value || (o.value = new x({
           container: e,
-          chart: r,
+          chart: i,
           data: t.data,
           options: t.height !== void 0 ? { height: t.height } : void 0
         }));
       },
       { flush: "post", immediate: !0 }
-    ), i(
+    ), l(
       () => t.data,
       (e) => {
         o.value?.setData(e);
       }
-    ), i(
+    ), l(
       () => t.height,
       (e) => {
         o.value?.setOptions(e !== void 0 ? { height: e } : {});
       }
-    ), g(() => {
+    ), y(() => {
       o.value?.destroy(), o.value = null;
-    }), (e, r) => u(a) ? (y(), _(w, {
+    }), (e, i) => c(a) && f.value ? (_(), w(N, {
       key: 0,
-      to: u(a)
+      to: c(a)
     }, [
-      C("div", {
+      k("div", {
         ref_key: "stripRef",
         ref: s,
         "data-chart-navigator": "",
-        style: N({
+        style: C({
           position: "relative",
           width: "100%",
-          height: v.value + "px",
+          height: m.value + "px",
           flexShrink: 0
         })
       }, null, 4)
-    ], 8, ["to"])) : k("", !0);
+    ], 8, ["to"])) : R("", !0);
   }
 });
 export {
-  V as default
+  S as default
 };

package/dist/ui/ReferenceLine.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as n, onMounted as r, onUnmounted as a, watch as i, createCommentVNode as u } from "vue";
-import { useChartInstance as c } from "../context.js";
-const p = /* @__PURE__ */ n({
+import { defineComponent as a, onMounted as n, onUnmounted as r, watch as c, createCommentVNode as i } from "vue";
+import { useChartInstance as s } from "../context.js";
+const p = /* @__PURE__ */ a({
   __name: "ReferenceLine",
   props: {
     value: {},
@@ -8,35 +8,38 @@ const p = /* @__PURE__ */ n({
     color: {},
     label: {},
     style: {},
-    width: {}
+    width: {},
+    scale: {}
   },
   setup(o) {
-    const e = o, l = c();
-    let t = null;
-    return r(() => {
-      t = l.addLine({
+    const e = o, t = s();
+    let l = null;
+    return n(() => {
+      l = t.addLine({
         value: e.value,
         time: e.time,
         color: e.color,
         label: e.label,
         style: e.style,
-        width: e.width
+        width: e.width,
+        scale: e.scale
       });
-    }), a(() => {
-      t !== null && l.removeLine(t), t = null;
-    }), i(
-      () => [e.value, e.time, e.color, e.label, e.style, e.width],
+    }), r(() => {
+      l !== null && t.removeLine(l), l = null;
+    }), c(
+      () => [e.value, e.time, e.color, e.label, e.style, e.width, e.scale],
       () => {
-        t !== null && l.updateLine(t, {
+        l !== null && t.updateLine(l, {
           value: e.value,
           time: e.time,
           color: e.color,
           label: e.label,
           style: e.style,
-          width: e.width
+          width: e.width,
+          scale: e.scale
         });
       }
-    ), (m, s) => u("", !0);
+    ), (u, m) => i("", !0);
   }
 });
 export {