@wick-charts/vue 0.6.4 → 0.7.0

package/dist/ui/Tooltip.vue.js

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

package/dist/ui/XAxis.vue.js

@@ -0,0 +1,48 @@
+import { defineComponent as c, ref as p, watch as r, onUnmounted as u, onMounted as f, openBlock as x, createElementBlock as b, normalizeStyle as h, unref as i } from "vue";
+import { mountAxisLabels as y } from "../core/dist/axis/dom-labels.js";
+import { useAxisLayout as A } from "../composables.js";
+import { useChartInstance as g } from "../context.js";
+const v = /* @__PURE__ */ c({
+  __name: "XAxis",
+  props: {
+    labelCount: {},
+    minLabelSpacing: {},
+    format: { type: Function }
+  },
+  setup(m) {
+    const n = m, e = g(), t = A(e), l = p(null), a = () => {
+      e.setTimeAxisLabelDensity({
+        labelCount: n.labelCount ?? null,
+        minLabelSpacing: n.minLabelSpacing ?? null
+      });
+    };
+    a(), r(() => [n.labelCount, n.minLabelSpacing], a), e.setXAxisFormat(n.format ?? null), r(
+      () => n.format,
+      (s) => e.setXAxisFormat(s ?? null)
+    ), u(() => {
+      e.setTimeAxisLabelDensity({ labelCount: null, minLabelSpacing: null }), e.setXAxisFormat(null);
+    });
+    let o = null;
+    return f(() => {
+      l.value !== null && (o = y({ chart: e, container: l.value, axis: "x" }));
+    }), u(() => {
+      o?.(), o = null;
+    }), (s, L) => (x(), b("div", {
+      ref_key: "containerRef",
+      ref: l,
+      style: h({
+        position: "absolute",
+        left: i(t).leftAxisWidth + "px",
+        bottom: "0",
+        right: i(t).rightAxisWidth + "px",
+        height: i(t).xAxisHeight + "px",
+        pointerEvents: "none",
+        display: "flex",
+        alignItems: "center"
+      })
+    }, null, 4));
+  }
+});
+export {
+  v as default
+};

package/dist/ui/XAxis.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XAxis.vue.js";
+export {
+  f as default
+};

package/dist/ui/YAxis.vue.js

@@ -1,43 +1,59 @@
-import { defineComponent as p, ref as f, onMounted as u, watch as c, onUnmounted as a, openBlock as y, createElementBlock as b, normalizeStyle as x, unref as i } from "vue";
-import { mountAxisLabels as L } from "../core/dist/axis/dom-labels.js";
-import { useAxisLayout as A } from "../composables.js";
-import { useChartInstance as S } from "../context.js";
-const F = /* @__PURE__ */ p({
+import { defineComponent as L, ref as C, computed as x, onMounted as A, watch as c, onUnmounted as i, openBlock as S, createElementBlock as Y, normalizeStyle as _, unref as k, createCommentVNode as w } from "vue";
+import { mountAxisLabels as F } from "../core/dist/axis/dom-labels.js";
+import { useAxisLayout as D, useYRange as R } from "../composables.js";
+import { useChartInstance as B } from "../context.js";
+const M = /* @__PURE__ */ L({
   __name: "YAxis",
   props: {
     format: { type: Function },
     labelCount: {},
-    minLabelSpacing: {}
+    minLabelSpacing: {},
+    scale: {}
   },
-  setup(m) {
-    const n = m, t = S(), e = A(t), l = f(null), s = () => t.yScale.setFormat(n.format ?? null);
-    u(s), c(() => n.format, s), a(() => t.yScale.setFormat(null));
-    const r = () => {
-      t.setYAxisLabelDensity({
-        labelCount: n.labelCount ?? null,
-        minLabelSpacing: n.minLabelSpacing ?? null
-      });
-    };
-    r(), c(() => [n.labelCount, n.minLabelSpacing], r), a(() => t.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
+  setup(g) {
+    const e = g, l = B(), r = D(l), h = R(l), s = C(null), t = x(() => (h.value, e.scale === void 0 || l.getYScaleIds().includes(e.scale))), u = x(() => {
+      const { yAxisPosition: v, yAxisWidth: b } = r.value;
+      return e.scale === void 0 ? { position: v, width: b } : t.value ? l.getYScaleColumn(e.scale) : null;
+    });
     let o = null;
-    return u(() => {
-      l.value !== null && (o = L({ chart: t, container: l.value, axis: "y" }));
-    }), a(() => {
-      o?.(), o = null;
-    }), (d, h) => (y(), b("div", {
+    const m = () => {
+      o !== null && (l.setYAxisFormat({ format: null, scale: o.scale }), o = null);
+    }, p = () => {
+      m(), t.value && (l.setYAxisFormat({ format: e.format ?? null, scale: e.scale }), o = { scale: e.scale });
+    };
+    A(p), c(() => [e.format, e.scale, t.value], p), i(m);
+    let n = null;
+    const f = () => {
+      n !== null && (l.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null, scale: n.scale }), n = null);
+    }, d = () => {
+      n !== null && n.scale !== e.scale && f(), t.value && (l.setYAxisLabelDensity({
+        labelCount: e.labelCount ?? null,
+        minLabelSpacing: e.minLabelSpacing ?? null,
+        scale: e.scale
+      }), n = { scale: e.scale });
+    };
+    d(), c(() => [e.labelCount, e.minLabelSpacing, e.scale, t.value], d), i(f);
+    let a = null;
+    const y = () => {
+      a?.(), a = null, s.value !== null && (a = F({ chart: l, container: s.value, axis: "y", scale: e.scale }));
+    };
+    return A(y), c([s, () => e.scale], y, { flush: "post" }), i(() => {
+      a?.(), a = null;
+    }), (v, b) => u.value ? (S(), Y("div", {
+      key: 0,
       ref_key: "containerRef",
-      ref: l,
-      style: x({
+      ref: s,
+      style: _({
         position: "absolute",
-        [i(e).yAxisPosition]: "0",
+        [u.value.position]: "0",
         top: "0",
-        bottom: i(e).xAxisHeight + "px",
-        width: i(e).yAxisWidth + "px",
+        bottom: k(r).xAxisHeight + "px",
+        width: u.value.width + "px",
         pointerEvents: "none"
       })
-    }, null, 4));
+    }, null, 4)) : w("", !0);
   }
 });
 export {
-  F as default
+  M as default
 };