@wick-charts/vue 0.6.4 → 0.7.0

package/dist/index.js

@@ -17,10 +17,10 @@ import { default as y } from "./ui/NumberFlow.vue.js";
 import { default as q } from "./ui/PieLegend.vue.js";
 import { default as V } from "./ui/PieTooltip.vue.js";
 import { default as E } from "./ui/ReferenceLine.vue.js";
-import { default as U, default as j } from "./ui/TimeAxis.vue.js";
-import { default as K } from "./ui/TimeRegion.vue.js";
-import { default as W } from "./ui/Title.vue.js";
-import { default as _ } from "./ui/Tooltip.vue.js";
+import { default as U } from "./ui/TimeRegion.vue.js";
+import { default as J } from "./ui/Title.vue.js";
+import { default as Q } from "./ui/Tooltip.vue.js";
+import { default as Z, default as _ } from "./ui/XAxis.vue.js";
 import { default as ee } from "./ui/YAxis.vue.js";
 import { default as oe } from "./ui/YLabel.vue.js";
 import { BandSeriesDef as ae } from "./core/dist/series/band.js";
@@ -107,11 +107,11 @@ export {
   Ie as PieSeriesDef,
   V as PieTooltip,
   E as ReferenceLine,
-  U as TimeAxis,
-  K as TimeRegion,
-  W as Title,
-  _ as Tooltip,
-  j as XAxis,
+  Z as TimeAxis,
+  U as TimeRegion,
+  J as Title,
+  Q as Tooltip,
+  _ as XAxis,
   ve as XScale,
   ee as YAxis,
   oe as YLabel,

package/dist/ui/Crosshair.vue.js

@@ -1,21 +1,34 @@
-import { defineComponent as v, ref as d, onMounted as f, onUnmounted as y, computed as n, unref as t, openBlock as h, createElementBlock as x, Fragment as g, createElementVNode as c, normalizeStyle as m, toDisplayString as u, createCommentVNode as b } from "vue";
-import { useCrosshairPosition as C } from "../composables.js";
-import { useChartInstance as S } from "../context.js";
-const E = /* @__PURE__ */ v({
+import { defineComponent as C, ref as Y, onMounted as _, onUnmounted as I, computed as a, unref as n, openBlock as u, createElementBlock as c, Fragment as g, normalizeStyle as p, toDisplayString as v, createCommentVNode as h, renderList as T, createElementVNode as V } from "vue";
+import { useCrosshairPosition as z } from "../composables.js";
+import { useChartInstance as B } from "../context.js";
+const P = /* @__PURE__ */ C({
   __name: "Crosshair",
-  setup(k) {
-    const e = S(), o = C(e), r = d(0), l = () => {
-      r.value++;
+  setup(E) {
+    const e = B(), t = z(e), l = Y(0), d = () => {
+      l.value++;
     };
-    f(() => e.on("overlayChange", l)), y(() => e.off("overlayChange", l));
-    const a = n(() => (r.value, e.getTheme())), i = n(() => e.getDataInterval()), p = n(() => (o.value, e.timeScale.niceTickValues(i.value).tickInterval || i.value)), s = n(() => ({
+    _(() => e.on("overlayChange", d)), I(() => e.off("overlayChange", d));
+    const i = a(() => (l.value, e.getTheme())), f = a(() => e.getDataInterval()), S = a(() => (t.value, e.timeScale.niceTickValues(f.value).tickInterval || f.value)), b = a(() => {
+      l.value;
+      const o = t.value;
+      return o === null ? "" : e.yScale.formatY(o.y);
+    }), y = a(() => {
+      l.value;
+      const o = t.value;
+      return o === null ? [] : e.getYScaleIds().flatMap((s) => {
+        const r = e.getYScaleColumn(s);
+        if (r === null) return [];
+        const x = e.getYScale(s);
+        return [{ scale: s, position: r.position, text: x.formatY(x.yToValue(o.mediaY)) }];
+      });
+    }), k = a(() => y.value.some((o) => o.position === e.yAxisPosition)), m = a(() => ({
       // Blend the theme's labelBackground at 80% opacity so the axis grid
       // shows through — keeps the badge from looking like an opaque block
       // while still masking whatever tick sits underneath.
-      background: `color-mix(in srgb, ${a.value.crosshair.labelBackground} 80%, transparent)`,
-      color: a.value.crosshair.labelTextColor,
-      fontSize: a.value.axis.fontSize + "px",
-      fontFamily: a.value.typography.fontFamily,
+      background: `color-mix(in srgb, ${i.value.crosshair.labelBackground} 80%, transparent)`,
+      color: i.value.crosshair.labelTextColor,
+      fontSize: i.value.axis.fontSize + "px",
+      fontFamily: i.value.typography.fontFamily,
       fontVariantNumeric: "tabular-nums",
       padding: "2px 6px",
       borderRadius: "2px",
@@ -25,28 +38,39 @@ const E = /* @__PURE__ */ v({
       // live last-value stays visible when the crosshair crosses its row.
       zIndex: 2
     }));
-    return (_, I) => t(o) ? (h(), x(g, { key: 0 }, [
-      c("div", {
-        style: m({
+    return (o, s) => n(t) ? (u(), c(g, { key: 0 }, [
+      k.value ? h("", !0) : (u(), c("div", {
+        key: 0,
+        style: p({
           position: "absolute",
-          [t(e).yAxisPosition]: "0",
-          top: t(o).mediaY + "px",
+          [n(e).yAxisPosition]: "0",
+          top: n(t).mediaY + "px",
           transform: "translateY(-50%)",
-          ...s.value
+          ...m.value
         })
-      }, u(t(e).yScale.formatY(t(o).y)), 5),
-      c("div", {
-        style: m({
+      }, v(b.value), 5)),
+      (u(!0), c(g, null, T(y.value, (r) => (u(), c("div", {
+        key: r.scale,
+        style: p({
+          position: "absolute",
+          [r.position]: "0",
+          top: n(t).mediaY + "px",
+          transform: "translateY(-50%)",
+          ...m.value
+        })
+      }, v(r.text), 5))), 128)),
+      V("div", {
+        style: p({
           position: "absolute",
           bottom: "0",
-          left: t(o).mediaX + "px",
+          left: n(t).mediaX + "px",
           transform: "translateX(-50%)",
-          ...s.value
+          ...m.value
         })
-      }, u(t(e).timeScale.formatX(t(o).time, p.value)), 5)
-    ], 64)) : b("", !0);
+      }, v(n(e).timeScale.formatX(n(t).time, S.value)), 5)
+    ], 64)) : h("", !0);
   }
 });
 export {
-  E as default
+  P as default
 };

package/dist/ui/InfoBar.vue.js

@@ -1,28 +1,28 @@
-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 = {
+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" }
-}, Z = {
+}, ee = {
   key: 1,
   style: { display: "inline-flex", alignItems: "center", gap: "3px" }
-}, ee = {
+}, te = {
   key: 2,
   style: { display: "inline-flex", alignItems: "center", gap: "3px" }
-}, ie = /* @__PURE__ */ W({
+}, se = /* @__PURE__ */ W({
   __name: "InfoBar",
   props: {
     sort: {},
     format: { type: Function }
   },
   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);
+    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)
@@ -38,17 +38,17 @@ const Y = {
     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");
+      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 (a, _) => t(g) && t(o) && d.value.length > 0 ? (n(), R(D, {
+    return (a, _) => t(g) && t(o) && c.value.length > 0 ? (n(), R($, {
       key: 0,
       to: t(g)
     }, [
@@ -81,25 +81,25 @@ const Y = {
           }
         )
       }, [
-        w.value ? M(a.$slots, "default", {
+        w.value ? D(a.$slots, "default", {
           key: 0,
-          snapshots: d.value,
+          snapshots: c.value,
           time: S.value,
           isHover: m.value
-        }) : (n(), s(c, { key: 1 }, [
+        }) : (n(), s(f, { 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, {
+          }, 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
           }, [
-            I(e.data) ? (n(), s("span", Y, [
-              (n(!0), s(c, null, F([
+            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(c, {
+              ], (v) => (n(), s(f, {
                 key: v.label
               }, [
                 l("span", {
@@ -107,23 +107,23 @@ const Y = {
                 }, p(v.label), 5),
                 l("span", {
                   style: r({
-                    color: t(j)(
+                    color: t(U)(
                       e.data.close >= e.data.open ? t(o).candlestick.up.body : t(o).candlestick.down.body
                     ),
                     fontWeight: 500,
                     marginLeft: "2px"
                   })
-                }, p(f.value(v.val, v.field)), 5)
+                }, p(d.value(v.val, v.field)), 5)
               ], 64))), 128)),
-              e.data.volume != null ? (n(), s(c, { key: 0 }, [
+              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),
                 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, [
+                }, p(d.value(e.data.volume, "volume")), 5)
+              ], 64)) : F("", !0)
+            ])) : V(e.data) ? (n(), s("span", ee, [
               l("span", {
                 style: r({
                   width: "6px",
@@ -135,8 +135,8 @@ const Y = {
               }, 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, [
+              }, 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",
@@ -148,14 +148,14 @@ const Y = {
               }, null, 4),
               l("span", {
                 style: r({ color: e.color, fontWeight: 500 })
-              }, p(f.value(e.data.value, "value")), 5)
+              }, p(d.value(e.data.value, "value")), 5)
             ]))
           ], 64))), 128))
         ], 64))
       ], 4)
-    ], 8, ["to"])) : L("", !0);
+    ], 8, ["to"])) : F("", !0);
   }
 });
 export {
-  ie 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 {