@wick-charts/vue 0.6.3 → 0.7.0

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 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 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" }
-}, te = { style: { opacity: 0.5 } }, oe = {
+}, le = { style: { opacity: 0.5 } }, ie = {
   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({
+}, ne = { style: {
+  opacity: 0.6,
+  flex: "1",
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+} }, re = {
+  key: 2,
+  style: { display: "flex", alignItems: "center", gap: "8px", padding: "2px 0" }
+}, se = { style: { opacity: 0.6, flex: "1" } }, ue = ["data-measured"], ye = /* @__PURE__ */ X({
   __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 = () => {
+  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++;
     };
-    D(() => {
+    Y(() => {
       t.on("overlayChange", W), t.getSeriesIds().length > 0 && C.value++;
-    }), X(() => {
+    }), Z(() => {
       t.off("overlayChange", W);
     });
-    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 = h(() => t.getTheme()), V = h(() => t.getDataInterval()), v = h(() => (C.value, u.value ? j(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);
+    }) : [])), _ = h(() => u.value?.time ?? 0), A = $(), y = h(() => typeof A.default == "function"), B = z(null), b = z(null);
     let S = null;
-    Z((a) => {
-      if (!g.value) return;
-      const i = B.value;
-      !i || typeof ResizeObserver > "u" || (S = new ResizeObserver((e) => {
+    K((a) => {
+      if (!y.value) return;
+      const r = B.value;
+      !r || typeof ResizeObserver > "u" || (S = 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(() => {
+        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 h = s(() => {
-      if (!n.value || c.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,
-          chartLeft: i,
+    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: r,
           chartWidth: e,
           chartHeight: l,
-          tooltipWidth: v.width,
-          tooltipHeight: v.height
-        }) : { left: i, top: 0 };
+          tooltipWidth: p.width,
+          tooltipHeight: p.height
+        }) : { left: r, 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,
-        chartLeft: i,
+      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: r,
         chartWidth: e,
         chartHeight: l,
-        tooltipWidth: M,
-        tooltipHeight: N
+        tooltipWidth: D,
+        tooltipHeight: M
       });
-    }), T = s(() => !g.value || b.value !== null);
-    function V(a) {
+    }), E = h(() => !y.value || b.value !== null);
+    function L(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 N(a) {
+      return "high" in a && !L(a);
+    }
+    return (a, r) => (i(), n(f, null, [
+      d(u) && v.value.length > 0 && g.value && !y.value ? (i(), n("div", {
         key: 0,
         style: m({
           position: "absolute",
-          left: h.value.left + "px",
-          top: h.value.top + "px",
+          left: g.value.left + "px",
+          top: g.value.top + "px",
           pointerEvents: "none",
           background: o.value.tooltip.background,
           backdropFilter: "blur(12px)",
@@ -100,7 +113,7 @@ const ee = {
           transition: "opacity 0.15s ease"
         })
       }, [
-        d("div", {
+        s("div", {
           style: m({
             fontSize: o.value.axis.fontSize + "px",
             color: o.value.axis.textColor,
@@ -109,38 +122,57 @@ 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(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
         }, [
-          V(e.data) ? (r(), u("div", ee, [
-            (r(!0), u(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) => (r(), u(x, {
+            ], (l) => (i(), n(f, {
               key: l.label
             }, [
-              d("span", te, f(l.label), 1),
-              d("span", {
+              s("span", le, c(l.label), 1),
+              s("span", {
                 style: m({
                   fontWeight: 600,
-                  color: p(U)(
+                  color: d(G)(
                     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)
+              }, c(x.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", {
+            e.data.volume != null ? (i(), n(f, { key: 0 }, [
+              r[0] || (r[0] = s("span", { style: { opacity: 0.5 } }, "Volume", -1)),
+              s("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", {
+              }, c(x.value(e.data.volume, "volume")), 5)
+            ], 64)) : w("", !0)
+          ])) : N(e.data) ? (i(), n("div", ie, [
+            s("span", {
+              style: m({
+                width: "8px",
+                height: "8px",
+                borderRadius: "2px",
+                background: e.color,
+                flexShrink: 0
+              })
+            }, null, 4),
+            s("span", ne, c(e.label ?? "Range"), 1),
+            s("span", {
+              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: m({
                 width: "8px",
                 height: "8px",
@@ -149,22 +181,22 @@ const ee = {
                 flexShrink: 0
               })
             }, null, 4),
-            d("span", le, f(e.label ?? "Value"), 1),
-            d("span", {
+            s("span", se, c(e.label ?? "Value"), 1),
+            s("span", {
               style: m({ fontWeight: 600, color: e.color })
-            }, f(k.value(e.data.value, "value")), 5)
+            }, c(x.value(e.data.value, "value")), 5)
           ]))
         ], 64))), 128))
-      ], 4)) : _("", !0),
-      p(n) && c.value.length > 0 && h.value && g.value ? (r(), u("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": T.value ? "true" : "false",
+        "data-measured": E.value ? "true" : "false",
         style: m({
           position: "absolute",
-          left: h.value.left + "px",
-          top: h.value.top + "px",
+          left: g.value.left + "px",
+          top: g.value.top + "px",
           pointerEvents: "none",
           background: o.value.tooltip.background,
           backdropFilter: "blur(12px)",
@@ -178,20 +210,20 @@ const ee = {
           fontVariantNumeric: "tabular-nums",
           color: o.value.tooltip.textColor,
           width: "max-content",
-          maxWidth: p(t).getMediaSize().width - p(t).yAxisWidth + "px",
+          maxWidth: d(t).getLayout().chartArea.width + "px",
           boxSizing: "border-box",
           zIndex: 10,
           visibility: b.value !== null ? "visible" : "hidden"
         })
       }, [
-        $(a.$slots, "default", {
-          snapshots: c.value,
-          time: z.value
+        U(a.$slots, "default", {
+          snapshots: v.value,
+          time: _.value
         })
-      ], 12, ae)) : _("", !0)
+      ], 12, ue)) : w("", !0)
     ], 64));
   }
 });
 export {
-  ve 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
 };