@wick-charts/vue 0.4.1 → 0.5.0

package/dist/ui/PieLegend.vue.js

@@ -0,0 +1,132 @@
+import { defineComponent as V, inject as C, computed as r, useSlots as w, ref as E, onMounted as L, onUnmounted as B, renderSlot as R, openBlock as n, createBlock as T, Teleport as D, createElementVNode as d, normalizeStyle as l, createElementBlock as a, Fragment as I, renderList as F, toDisplayString as u, createCommentVNode as v } from "vue";
+import { formatCompact as P } from "../core/dist/utils/format.js";
+import { LegendAnchorKey as K, LegendRightAnchorKey as M, useChartInstance as $, useTheme as j } from "../context.js";
+const O = ["data-chart-pie-legend-position"], U = { style: { flex: 1, opacity: 0.8 } }, q = { style: { flex: 1, opacity: 0.8 } }, Q = /* @__PURE__ */ V({
+  __name: "PieLegend",
+  props: {
+    seriesId: {},
+    mode: { default: void 0 },
+    format: { type: Function, default: void 0 },
+    position: { default: "bottom" }
+  },
+  setup(m) {
+    const s = m, x = C(K), b = C(M);
+    if (!x || !b)
+      throw new Error("<PieLegend> must be used within <ChartContainer>: missing legend anchors.");
+    const S = r(() => s.position === "right" ? b.value : s.position === "bottom" ? x.value : null), e = r(() => s.mode ?? "both"), h = r(() => s.format ?? P), p = $(), _ = j(), A = w(), W = r(() => typeof A.default == "function"), c = E(0), k = () => {
+      c.value++;
+    };
+    L(() => {
+      p.on("overlayChange", k), p.getSeriesIds().length > 0 && c.value++;
+    }), B(() => {
+      p.off("overlayChange", k);
+    });
+    function N(f, g) {
+      if (g !== void 0) return g;
+      const t = f.getSeriesIdsByType("pie", { visibleOnly: !0 });
+      return t.length > 0 ? t[0] : null;
+    }
+    const o = r(() => _.value), z = r(() => (c.value, N(p, s.seriesId))), i = r(() => (c.value, z.value === null ? [] : p.getSliceInfo(z.value) ?? []));
+    return (f, g) => W.value && i.value.length > 0 ? R(f.$slots, "default", {
+      key: 0,
+      slices: i.value,
+      mode: e.value,
+      format: h.value
+    }) : i.value.length > 0 && S.value ? (n(), T(D, {
+      key: 1,
+      to: S.value
+    }, [
+      d("div", {
+        "data-chart-pie-legend": "",
+        "data-chart-pie-legend-position": m.position,
+        style: l({
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px",
+          padding: "6px 10px",
+          fontFamily: o.value.typography.fontFamily,
+          fontSize: o.value.typography.fontSize + "px",
+          color: o.value.tooltip.textColor,
+          pointerEvents: "auto"
+        })
+      }, [
+        (n(!0), a(I, null, F(i.value, (t, y) => (n(), a("div", {
+          key: y,
+          style: { display: "flex", alignItems: "center", gap: "10px" }
+        }, [
+          d("span", {
+            style: l({ width: "10px", height: "10px", borderRadius: "50%", background: t.color, flexShrink: 0 })
+          }, null, 4),
+          d("span", U, u(t.label), 1),
+          e.value === "value" || e.value === "both" ? (n(), a("span", {
+            key: 0,
+            style: l({
+              fontWeight: 600,
+              fontVariantNumeric: "tabular-nums",
+              minWidth: e.value === "value" ? "40px" : void 0,
+              textAlign: "right"
+            })
+          }, u(h.value(t.value)), 5)) : v("", !0),
+          e.value === "percent" || e.value === "both" ? (n(), a("span", {
+            key: 1,
+            style: l({
+              opacity: e.value === "percent" ? 1 : 0.5,
+              fontWeight: e.value === "percent" ? 600 : 400,
+              fontSize: (e.value === "percent" ? o.value.typography.fontSize : o.value.axis.fontSize) + "px",
+              fontVariantNumeric: "tabular-nums",
+              minWidth: "40px",
+              textAlign: "right"
+            })
+          }, u(t.percent.toFixed(1)) + "% ", 5)) : v("", !0)
+        ]))), 128))
+      ], 12, O)
+    ], 8, ["to"])) : i.value.length > 0 ? (n(), a("div", {
+      key: 2,
+      "data-chart-pie-legend": "",
+      "data-chart-pie-legend-position": "overlay",
+      style: l({
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+        padding: "8px 12px",
+        fontFamily: o.value.typography.fontFamily,
+        fontSize: o.value.typography.fontSize + "px",
+        color: o.value.tooltip.textColor,
+        pointerEvents: "auto"
+      })
+    }, [
+      (n(!0), a(I, null, F(i.value, (t, y) => (n(), a("div", {
+        key: y,
+        style: { display: "flex", alignItems: "center", gap: "10px" }
+      }, [
+        d("span", {
+          style: l({ width: "10px", height: "10px", borderRadius: "50%", background: t.color, flexShrink: 0 })
+        }, null, 4),
+        d("span", q, u(t.label), 1),
+        e.value === "value" || e.value === "both" ? (n(), a("span", {
+          key: 0,
+          style: l({
+            fontWeight: 600,
+            fontVariantNumeric: "tabular-nums",
+            minWidth: e.value === "value" ? "40px" : void 0,
+            textAlign: "right"
+          })
+        }, u(h.value(t.value)), 5)) : v("", !0),
+        e.value === "percent" || e.value === "both" ? (n(), a("span", {
+          key: 1,
+          style: l({
+            opacity: e.value === "percent" ? 1 : 0.5,
+            fontWeight: e.value === "percent" ? 600 : 400,
+            fontSize: (e.value === "percent" ? o.value.typography.fontSize : o.value.axis.fontSize) + "px",
+            fontVariantNumeric: "tabular-nums",
+            minWidth: "40px",
+            textAlign: "right"
+          })
+        }, u(t.percent.toFixed(1)) + "% ", 5)) : v("", !0)
+      ]))), 128))
+    ], 4)) : v("", !0);
+  }
+});
+export {
+  Q as default
+};

package/dist/ui/PieLegend.vue2.js

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

package/dist/ui/PieTooltip.vue.js

@@ -0,0 +1,135 @@
+import { defineComponent as H, computed as a, useSlots as O, ref as m, onMounted as P, onUnmounted as R, watchEffect as D, openBlock as x, createElementBlock as g, Fragment as B, unref as y, normalizeStyle as b, createElementVNode as r, toDisplayString as _, createCommentVNode as T, 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";
+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 } }, $ = { style: { fontWeight: 600 } }, j = ["data-measured"], G = 160, q = 70, te = /* @__PURE__ */ H({
+  __name: "PieTooltip",
+  props: {
+    seriesId: {},
+    format: { type: Function }
+  },
+  setup(F) {
+    const S = F, w = a(() => S.format ?? X), o = M(), i = Y(o), W = O(), p = a(() => typeof W.default == "function"), c = m(0), I = () => {
+      c.value++;
+    };
+    P(() => {
+      o.on("overlayChange", I);
+    }), R(() => {
+      o.off("overlayChange", I);
+    });
+    function E(e, t) {
+      if (t !== void 0) return t;
+      const v = e.getSeriesIdsByType("pie", { visibleOnly: !0 });
+      return v.length > 0 ? v[0] : null;
+    }
+    const s = a(() => (c.value, o.getTheme())), z = a(() => (c.value, E(o, S.seriesId))), n = a(() => (i.value, c.value, z.value === null ? null : o.getHoverInfo(z.value))), k = m(null), u = m(null);
+    let f = null;
+    D((e) => {
+      if (!p.value) return;
+      const t = k.value;
+      !t || typeof ResizeObserver > "u" || (f = new ResizeObserver((v) => {
+        const d = v[0]?.contentRect;
+        if (!d) return;
+        const h = u.value;
+        (!h || h.width !== d.width || h.height !== d.height) && (u.value = { width: d.width, height: d.height });
+      }), f.observe(t), e(() => {
+        f?.disconnect(), f = null;
+      }));
+    });
+    const l = a(() => {
+      if (!i.value || !n.value) return null;
+      const e = o.getMediaSize();
+      if (p.value) {
+        const t = u.value;
+        return t ? C({
+          x: i.value.mediaX,
+          y: i.value.mediaY,
+          chartWidth: e.width,
+          chartHeight: e.height,
+          tooltipWidth: t.width,
+          tooltipHeight: t.height,
+          offsetX: 16,
+          offsetY: 16
+        }) : { left: 0, top: 0 };
+      }
+      return C({
+        x: i.value.mediaX,
+        y: i.value.mediaY,
+        chartWidth: e.width,
+        chartHeight: e.height,
+        tooltipWidth: G,
+        tooltipHeight: q,
+        offsetX: 16,
+        offsetY: 16
+      });
+    });
+    return (e, t) => (x(), g(B, null, [
+      n.value && y(i) && l.value && !p.value ? (x(), g("div", {
+        key: 0,
+        style: b({
+          position: "absolute",
+          left: l.value.left + "px",
+          top: l.value.top + "px",
+          pointerEvents: "none",
+          background: s.value.tooltip.background,
+          backdropFilter: "blur(12px)",
+          WebkitBackdropFilter: "blur(12px)",
+          border: "1px solid " + s.value.tooltip.borderColor,
+          borderRadius: "8px",
+          padding: "10px 14px",
+          boxShadow: "0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)",
+          fontSize: s.value.typography.fontSize + "px",
+          fontFamily: s.value.typography.fontFamily,
+          color: s.value.tooltip.textColor,
+          zIndex: 10,
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px"
+        })
+      }, [
+        r("div", U, [
+          r("span", {
+            style: b({
+              width: "10px",
+              height: "10px",
+              borderRadius: "50%",
+              background: n.value.color,
+              flexShrink: 0
+            })
+          }, null, 4),
+          r("span", A, _(n.value.label), 1)
+        ]),
+        r("div", N, [
+          r("span", V, _(w.value(n.value.value)), 1),
+          r("span", $, _(n.value.percent.toFixed(1)) + "%", 1)
+        ])
+      ], 4)) : T("", !0),
+      n.value && y(i) && l.value && p.value ? (x(), g("div", {
+        key: 1,
+        ref_key: "containerRef",
+        ref: k,
+        "data-measured": u.value !== null ? "true" : "false",
+        style: b({
+          position: "absolute",
+          left: l.value.left + "px",
+          top: l.value.top + "px",
+          pointerEvents: "none",
+          zIndex: 10,
+          width: "max-content",
+          maxWidth: y(o).getMediaSize().width + "px",
+          boxSizing: "border-box",
+          visibility: u.value !== null ? "visible" : "hidden"
+        })
+      }, [
+        L(e.$slots, "default", {
+          info: n.value,
+          format: w.value
+        })
+      ], 12, j)) : T("", !0)
+    ], 64));
+  }
+});
+export {
+  te as default
+};

package/dist/ui/PieTooltip.vue2.js

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

package/dist/ui/ReferenceLine.vue.js

@@ -0,0 +1,44 @@
+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({
+  __name: "ReferenceLine",
+  props: {
+    value: {},
+    time: {},
+    color: {},
+    label: {},
+    style: {},
+    width: {}
+  },
+  setup(o) {
+    const e = o, l = c();
+    let t = null;
+    return r(() => {
+      t = l.addLine({
+        value: e.value,
+        time: e.time,
+        color: e.color,
+        label: e.label,
+        style: e.style,
+        width: e.width
+      });
+    }), a(() => {
+      t !== null && l.removeLine(t), t = null;
+    }), i(
+      () => [e.value, e.time, e.color, e.label, e.style, e.width],
+      () => {
+        t !== null && l.updateLine(t, {
+          value: e.value,
+          time: e.time,
+          color: e.color,
+          label: e.label,
+          style: e.style,
+          width: e.width
+        });
+      }
+    ), (m, s) => u("", !0);
+  }
+});
+export {
+  p as default
+};

package/dist/ui/ReferenceLine.vue2.js

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

package/dist/ui/TimeAxis.vue.js

@@ -0,0 +1,43 @@
+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 { useChartInstance as g } from "../context.js";
+const _ = /* @__PURE__ */ r({
+  __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
+      });
+    };
+    i(), c(() => [n.labelCount, n.minLabelSpacing], i), a(() => {
+      e.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", {
+      ref_key: "containerRef",
+      ref: t,
+      style: f({
+        position: "absolute",
+        left: "0",
+        bottom: "0",
+        right: o(e).yAxisWidth + "px",
+        height: o(e).xAxisHeight + "px",
+        pointerEvents: "none",
+        display: "flex",
+        alignItems: "center"
+      })
+    }, null, 4));
+  }
+});
+export {
+  _ as default
+};

package/dist/ui/TimeAxis.vue2.js

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

package/dist/ui/TimeRegion.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as t, onMounted as n, onUnmounted as f, watch as a, createCommentVNode as i } from "vue";
+import { useChartInstance as m } from "../context.js";
+const d = /* @__PURE__ */ t({
+  __name: "TimeRegion",
+  props: {
+    from: {},
+    to: {},
+    fill: {},
+    label: {},
+    color: {}
+  },
+  setup(r) {
+    const o = r, e = m();
+    let l = null;
+    return n(() => {
+      l = e.addRegion({
+        from: o.from,
+        to: o.to,
+        fill: o.fill,
+        label: o.label,
+        color: o.color
+      });
+    }), f(() => {
+      l !== null && e.removeRegion(l), l = null;
+    }), a(
+      () => [o.from, o.to, o.fill, o.label, o.color],
+      () => {
+        l !== null && e.updateRegion(l, {
+          from: o.from,
+          to: o.to,
+          fill: o.fill,
+          label: o.label,
+          color: o.color
+        });
+      }
+    ), (c, u) => i("", !0);
+  }
+});
+export {
+  d as default
+};

package/dist/ui/TimeRegion.vue2.js

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

package/dist/ui/Title.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent as f, inject as i, useSlots as h, computed as y, unref as e, openBlock as s, createBlock as d, Teleport as x, createElementVNode as l, normalizeStyle as a, renderSlot as p, createElementBlock as S, createTextVNode as g, toDisplayString as b, createCommentVNode as c } from "vue";
+import { TitleAnchorKey as T, ThemeKey as C } from "../context.js";
+const E = /* @__PURE__ */ f({
+  __name: "Title",
+  props: {
+    sub: {}
+  },
+  setup(n) {
+    const o = i(T), t = i(C), m = h(), u = y(() => typeof m.sub == "function");
+    if (!o)
+      throw new Error("<Title> must be used within <ChartContainer>: missing TitleAnchorKey.");
+    if (!t)
+      throw new Error("<Title> must be used within <ChartContainer>: missing ThemeKey.");
+    return (r, k) => e(o) ? (s(), d(x, {
+      key: 0,
+      to: e(o)
+    }, [
+      l("div", {
+        "data-chart-title": "",
+        style: a({
+          display: "flex",
+          alignItems: "baseline",
+          gap: "6px",
+          padding: "6px 8px 0",
+          flexShrink: 0,
+          fontFamily: e(t).typography.fontFamily,
+          fontSize: e(t).typography.fontSize + "px",
+          fontWeight: 600,
+          color: e(t).tooltip.textColor,
+          pointerEvents: "none"
+        })
+      }, [
+        l("span", null, [
+          p(r.$slots, "default")
+        ]),
+        u.value || n.sub ? (s(), S("span", {
+          key: 0,
+          style: a({
+            fontWeight: 400,
+            color: e(t).axis.textColor,
+            fontSize: e(t).axis.fontSize + "px"
+          })
+        }, [
+          p(r.$slots, "sub", {}, () => [
+            g(b(n.sub), 1)
+          ])
+        ], 4)) : c("", !0)
+      ], 4)
+    ], 8, ["to"])) : c("", !0);
+  }
+});
+export {
+  E as default
+};

package/dist/ui/Title.vue2.js

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

package/dist/ui/Tooltip.vue.js

@@ -0,0 +1,195 @@
+import { defineComponent as P, computed as s, ref as w, onMounted as D, onUnmounted as M, useSlots as X, watchEffect as Y, openBlock as r, createElementBlock as u, Fragment as x, unref as v, normalizeStyle as m, createElementVNode as p, 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, formatTime as J } from "../core/dist/utils/time.js";
+import { useCrosshairPosition as Q } from "../composables.js";
+import { useChartInstance as Z } from "../context.js";
+const ee = {
+  key: 0,
+  style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 12px" }
+}, te = { style: { opacity: 0.5 } }, oe = {
+  key: 1,
+  style: { display: "flex", alignItems: "center", gap: "8px", padding: "2px 0" }
+}, ae = { style: { opacity: 0.6, flex: "1" } }, le = ["data-measured"], ve = /* @__PURE__ */ P({
+  __name: "Tooltip",
+  props: {
+    sort: {},
+    format: { type: Function }
+  },
+  setup(A) {
+    const F = A, I = s(() => F.sort ?? "none"), C = s(
+      () => F.format ?? ((l, n) => n === "volume" ? j(l) : q(l))
+    ), o = Z(), i = Q(o), S = w(0), W = () => {
+      S.value++;
+    };
+    D(() => {
+      o.on("overlayChange", W), o.getSeriesIds().length > 0 && S.value++;
+    }), M(() => {
+      o.off("overlayChange", W);
+    });
+    const t = s(() => o.getTheme()), O = s(() => o.getDataInterval()), d = s(() => (S.value, i.value ? K(o, {
+      time: i.value.time,
+      sort: I.value,
+      cacheKey: "tooltip"
+    }) : [])), z = s(() => i.value?.time ?? 0), T = X(), g = s(() => typeof T.default == "function"), B = w(null), b = w(null);
+    let k = null;
+    Y((l) => {
+      if (!g.value) return;
+      const n = B.value;
+      !n || typeof ResizeObserver > "u" || (k = new ResizeObserver((e) => {
+        const a = e[0]?.contentRect;
+        if (!a) return;
+        const y = b.value;
+        (!y || y.width !== a.width || y.height !== a.height) && (b.value = { width: a.width, height: a.height });
+      }), k.observe(n), l(() => {
+        k?.disconnect(), k = null;
+      }));
+    });
+    const h = s(() => {
+      if (!i.value || d.value.length === 0) return null;
+      const l = o.getMediaSize(), n = l.width - o.yAxisWidth, e = l.height - o.xAxisHeight;
+      if (g.value) {
+        const c = b.value;
+        return c ? R({
+          x: i.value.mediaX,
+          y: i.value.mediaY,
+          chartWidth: n,
+          chartHeight: e,
+          tooltipWidth: c.width,
+          tooltipHeight: c.height
+        }) : { left: 0, top: 0 };
+      }
+      const a = d.value.some((c) => "open" in c.data), y = d.value.filter((c) => !("open" in c.data)).length, L = 160, N = a ? 140 : 40 + y * 22;
+      return R({
+        x: i.value.mediaX,
+        y: i.value.mediaY,
+        chartWidth: n,
+        chartHeight: e,
+        tooltipWidth: L,
+        tooltipHeight: N
+      });
+    }), V = s(() => !g.value || b.value !== null);
+    function E(l) {
+      return "open" in l;
+    }
+    return (l, n) => (r(), u(x, null, [
+      v(i) && d.value.length > 0 && h.value && !g.value ? (r(), u("div", {
+        key: 0,
+        style: m({
+          position: "absolute",
+          left: h.value.left + "px",
+          top: h.value.top + "px",
+          pointerEvents: "none",
+          background: t.value.tooltip.background,
+          backdropFilter: "blur(12px)",
+          WebkitBackdropFilter: "blur(12px)",
+          border: "1px solid " + t.value.tooltip.borderColor,
+          borderRadius: "8px",
+          padding: "10px 14px",
+          boxShadow: "0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)",
+          fontSize: t.value.tooltip.fontSize + "px",
+          fontFamily: t.value.typography.fontFamily,
+          fontVariantNumeric: "tabular-nums",
+          color: t.value.tooltip.textColor,
+          minWidth: "140px",
+          zIndex: 10,
+          transition: "opacity 0.15s ease"
+        })
+      }, [
+        p("div", {
+          style: m({
+            fontSize: t.value.axis.fontSize + "px",
+            color: t.value.axis.textColor,
+            marginBottom: "8px",
+            paddingBottom: "6px",
+            borderBottom: "1px solid " + t.value.tooltip.borderColor,
+            letterSpacing: "0.02em"
+          })
+        }, f(v(G)(z.value)) + " " + f(v(J)(z.value, O.value)), 5),
+        (r(!0), u(x, null, H(d.value, (e) => (r(), u(x, {
+          key: e.id
+        }, [
+          E(e.data) ? (r(), u("div", ee, [
+            (r(!0), u(x, 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" }
+            ], (a) => (r(), u(x, {
+              key: a.label
+            }, [
+              p("span", te, f(a.label), 1),
+              p("span", {
+                style: m({
+                  fontWeight: 600,
+                  color: v(U)(
+                    e.data.close >= e.data.open ? t.value.candlestick.up.body : t.value.candlestick.down.body
+                  ),
+                  textAlign: "right"
+                })
+              }, f(C.value(a.val, a.field)), 5)
+            ], 64))), 128)),
+            e.data.volume != null ? (r(), u(x, { key: 0 }, [
+              n[0] || (n[0] = p("span", { style: { opacity: 0.5 } }, "Volume", -1)),
+              p("span", {
+                style: m({ fontWeight: 600, color: t.value.tooltip.textColor, textAlign: "right" })
+              }, f(C.value(e.data.volume, "volume")), 5)
+            ], 64)) : _("", !0)
+          ])) : (r(), u("div", oe, [
+            p("span", {
+              style: m({
+                width: "8px",
+                height: "8px",
+                borderRadius: "50%",
+                background: e.color,
+                flexShrink: 0
+              })
+            }, null, 4),
+            p("span", ae, f(e.label ?? "Value"), 1),
+            p("span", {
+              style: m({ fontWeight: 600, color: e.color })
+            }, f(C.value(e.data.value, "value")), 5)
+          ]))
+        ], 64))), 128))
+      ], 4)) : _("", !0),
+      v(i) && d.value.length > 0 && h.value && g.value ? (r(), u("div", {
+        key: 1,
+        ref_key: "containerRef",
+        ref: B,
+        "data-measured": V.value ? "true" : "false",
+        style: m({
+          position: "absolute",
+          left: h.value.left + "px",
+          top: h.value.top + "px",
+          pointerEvents: "none",
+          background: t.value.tooltip.background,
+          backdropFilter: "blur(12px)",
+          WebkitBackdropFilter: "blur(12px)",
+          border: "1px solid " + t.value.tooltip.borderColor,
+          borderRadius: "8px",
+          padding: "10px 14px",
+          boxShadow: "0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)",
+          fontFamily: t.value.typography.fontFamily,
+          fontSize: t.value.tooltip.fontSize + "px",
+          fontVariantNumeric: "tabular-nums",
+          color: t.value.tooltip.textColor,
+          width: "max-content",
+          maxWidth: v(o).getMediaSize().width - v(o).yAxisWidth + "px",
+          boxSizing: "border-box",
+          zIndex: 10,
+          visibility: b.value !== null ? "visible" : "hidden"
+        })
+      }, [
+        $(l.$slots, "default", {
+          snapshots: d.value,
+          time: z.value
+        })
+      ], 12, le)) : _("", !0)
+    ], 64));
+  }
+});
+export {
+  ve as default
+};