@wick-charts/vue 0.4.2 → 0.5.0

package/dist/ui/Crosshair.vue.js

@@ -0,0 +1,53 @@
+import { defineComponent as v, ref as d, onMounted as f, onUnmounted as h, computed as n, unref as t, openBlock as y, createElementBlock as g, Fragment as x, createElementVNode as m, normalizeStyle as c, toDisplayString as u, createCommentVNode as b } from "vue";
+import { formatTime as C } from "../core/dist/utils/time.js";
+import { useCrosshairPosition as k } from "../composables.js";
+import { useChartInstance as S } from "../context.js";
+const F = /* @__PURE__ */ v({
+  __name: "Crosshair",
+  setup(_) {
+    const e = S(), o = k(e), r = d(0), l = () => {
+      r.value++;
+    };
+    f(() => e.on("overlayChange", l)), h(() => 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(() => ({
+      // 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,
+      fontVariantNumeric: "tabular-nums",
+      padding: "2px 6px",
+      borderRadius: "2px",
+      whiteSpace: "nowrap",
+      pointerEvents: "none",
+      // Sit above axis ticks (z:0) but below the YLabel badge (z:3) so the
+      // live last-value stays visible when the crosshair crosses its row.
+      zIndex: 2
+    }));
+    return (I, z) => t(o) ? (y(), g(x, { key: 0 }, [
+      m("div", {
+        style: c({
+          position: "absolute",
+          right: "0",
+          top: t(o).mediaY + "px",
+          transform: "translateY(-50%)",
+          ...s.value
+        })
+      }, u(t(e).yScale.formatY(t(o).y)), 5),
+      m("div", {
+        style: c({
+          position: "absolute",
+          bottom: "0",
+          left: t(o).mediaX + "px",
+          transform: "translateX(-50%)",
+          ...s.value
+        })
+      }, u(t(C)(t(o).time, p.value)), 5)
+    ], 64)) : b("", !0);
+  }
+});
+export {
+  F as default
+};

package/dist/ui/Crosshair.vue2.js

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

package/dist/ui/InfoBar.vue.js

@@ -0,0 +1,143 @@
+import { defineComponent as T, computed as n, inject as B, ref as V, onMounted as N, onUnmounted as W, useSlots as A, unref as e, openBlock as l, createBlock as O, Teleport as D, createElementVNode as r, normalizeStyle as i, renderSlot as M, createElementBlock as s, Fragment as p, toDisplayString as f, 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 { formatTime as q } from "../core/dist/utils/time.js";
+import { useCrosshairPosition as G } from "../composables.js";
+import { useChartInstance as J, ThemeKey as Q, InfoBarAnchorKey as X } from "../context.js";
+const Y = {
+  key: 0,
+  style: { display: "inline-flex", alignItems: "center", gap: "4px" }
+}, Z = {
+  key: 1,
+  style: { display: "inline-flex", alignItems: "center", gap: "3px" }
+}, ie = /* @__PURE__ */ T({
+  __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))
+    ), u = J(), h = G(u), a = B(Q), g = B(X);
+    if (!a)
+      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 = V(0), k = () => {
+      v.value++;
+    };
+    N(() => {
+      u.on("overlayChange", k), u.getSeriesIds().length > 0 && v.value++;
+    }), W(() => {
+      u.off("overlayChange", k);
+    });
+    const x = n(() => {
+      v.value;
+      const o = h.value;
+      return o === null ? null : P(u, { time: o.time, sort: b.value, cacheKey: "infobar-hover" });
+    }), E = n(() => (v.value, R(u, { sort: b.value, cacheKey: "infobar-last" }))), c = n(() => x.value !== null && x.value.length > 0), m = n(
+      () => c.value ? x.value : E.value
+    ), K = n(() => u.getDataInterval()), S = n(() => m.value.length === 0 ? 0 : c.value && h.value ? h.value.time : Math.max(...m.value.map((o) => o.data.time))), z = A(), I = n(() => typeof z.default == "function");
+    function H(o) {
+      return "open" in o;
+    }
+    return (o, w) => e(g) && e(a) && m.value.length > 0 ? (l(), O(D, {
+      key: 0,
+      to: e(g)
+    }, [
+      r("div", {
+        "data-tooltip-legend": "",
+        style: i(
+          I.value ? {
+            display: "flex",
+            alignItems: "center",
+            flexShrink: 0,
+            fontSize: e(a).typography.fontSize + "px",
+            fontFamily: e(a).typography.fontFamily,
+            fontVariantNumeric: "tabular-nums",
+            opacity: c.value ? 1 : 0.6,
+            transition: "opacity 0.2s ease",
+            pointerEvents: "none"
+          } : {
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            flexWrap: "wrap",
+            padding: "4px 8px",
+            flexShrink: 0,
+            fontSize: e(a).typography.fontSize + "px",
+            fontFamily: e(a).typography.fontFamily,
+            fontVariantNumeric: "tabular-nums",
+            opacity: c.value ? 1 : 0.6,
+            transition: "opacity 0.2s ease",
+            pointerEvents: "none"
+          }
+        )
+      }, [
+        I.value ? M(o.$slots, "default", {
+          key: 0,
+          snapshots: m.value,
+          time: S.value,
+          isHover: c.value
+        }) : (l(), s(p, { key: 1 }, [
+          r("span", {
+            style: i({ color: e(a).axis.textColor, marginRight: "2px" })
+          }, f(e(q)(S.value, K.value)), 5),
+          (l(!0), s(p, null, _(m.value, (t) => (l(), s(p, {
+            key: t.id
+          }, [
+            H(t.data) ? (l(), s("span", Y, [
+              (l(!0), s(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(), s(p, {
+                key: d.label
+              }, [
+                r("span", {
+                  style: i({ color: e(a).axis.textColor, opacity: 0.5, marginLeft: "5px" })
+                }, f(d.label), 5),
+                r("span", {
+                  style: i({
+                    color: e($)(
+                      t.data.close >= t.data.open ? e(a).candlestick.up.body : e(a).candlestick.down.body
+                    ),
+                    fontWeight: 500,
+                    marginLeft: "2px"
+                  })
+                }, f(y.value(d.val, d.field)), 5)
+              ], 64))), 128)),
+              t.data.volume != null ? (l(), s(p, { key: 0 }, [
+                r("span", {
+                  style: i({ color: e(a).axis.textColor, opacity: 0.5, marginLeft: "5px" })
+                }, "V", 4),
+                r("span", {
+                  style: i({ color: e(a).axis.textColor, fontWeight: 500, marginLeft: "2px" })
+                }, f(y.value(t.data.volume, "volume")), 5)
+              ], 64)) : F("", !0)
+            ])) : (l(), s("span", Z, [
+              r("span", {
+                style: i({
+                  width: "6px",
+                  height: "6px",
+                  borderRadius: "50%",
+                  background: t.color,
+                  flexShrink: 0
+                })
+              }, null, 4),
+              r("span", {
+                style: i({ color: t.color, fontWeight: 500 })
+              }, f(y.value(t.data.value, "value")), 5)
+            ]))
+          ], 64))), 128))
+        ], 64))
+      ], 4)
+    ], 8, ["to"])) : F("", !0);
+  }
+});
+export {
+  ie as default
+};

package/dist/ui/InfoBar.vue2.js

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

package/dist/ui/Legend.vue.js

@@ -0,0 +1,212 @@
+import { defineComponent as W, inject as C, computed as k, ref as E, onMounted as H, onUnmounted as N, useSlots as M, unref as a, openBlock as g, createBlock as U, Teleport as q, createElementBlock as u, normalizeStyle as f, renderSlot as G, Fragment as F, renderList as A, createElementVNode as b, toDisplayString as $, createCommentVNode as j } from "vue";
+import { useChartInstance as J, ThemeKey as O, LegendAnchorKey as P, LegendRightAnchorKey as Q } from "../context.js";
+const X = ["data-legend"], Y = ["data-legend"], Z = { style: { "white-space": "nowrap" } }, _ = ["data-legend"], ee = ["onClick"], te = { style: { "white-space": "nowrap" } }, le = /* @__PURE__ */ W({
+  __name: "Legend",
+  props: {
+    items: {},
+    position: { default: "bottom" },
+    mode: { default: "toggle" }
+  },
+  setup(t) {
+    const S = t, i = J(), l = C(O), I = C(P), w = C(Q);
+    if (!l)
+      throw new Error("<Legend> must be used within <ChartContainer>: missing ThemeKey.");
+    if (!I || !w)
+      throw new Error("<Legend> must be used within <ChartContainer>: missing legend anchors.");
+    const L = k(() => S.position === "right" ? w.value : I.value), h = E(null), v = E(0), V = () => {
+      v.value++;
+    }, D = () => {
+      h.value = null;
+    };
+    H(() => {
+      i.on("overlayChange", V), i.on("seriesChange", D), i.getSeriesIds().length > 0 && v.value++;
+    }), N(() => {
+      i.off("overlayChange", V), i.off("seriesChange", D);
+    });
+    function z(n) {
+      const { id: d, seriesId: e, layerIndex: s, label: o, color: p, isDisabled: x } = n;
+      return { id: d, seriesId: e, layerIndex: s, label: o, color: p, isDisabled: x, toggle: () => {
+        s !== void 0 ? i.setLayerVisible(e, s, !i.isLayerVisible(e, s)) : i.setSeriesVisible(e, !i.isSeriesVisible(e));
+      }, isolate: () => {
+        if (h.value === d) {
+          i.batch(() => {
+            for (const r of i.getSeriesIds()) {
+              i.setSeriesVisible(r, !0);
+              const y = i.getSeriesLayers(r);
+              if (y)
+                for (let c = 0; c < y.length; c++) i.setLayerVisible(r, c, !0);
+            }
+          }), h.value = null;
+          return;
+        }
+        i.batch(() => {
+          for (const r of i.getSeriesIds()) {
+            const y = i.getSeriesLayers(r);
+            if (y) {
+              i.setSeriesVisible(r, r === e);
+              for (let c = 0; c < y.length; c++)
+                i.setLayerVisible(r, c, r === e && c === s);
+            } else
+              i.setSeriesVisible(r, r === d);
+          }
+        }), h.value = d;
+      } };
+    }
+    function K(n) {
+      const d = [];
+      for (const e of n.getSeriesIds()) {
+        const s = n.getSeriesLayers(e);
+        if (s)
+          for (let o = 0; o < s.length; o++) {
+            const p = `${e}_layer${o}`, x = n.isSeriesVisible(e) && n.isLayerVisible(e, o);
+            d.push(
+              z({
+                id: p,
+                seriesId: e,
+                layerIndex: o,
+                label: n.getLayerLabel(e, o) ?? `Series ${o + 1}`,
+                color: s[o].color,
+                isDisabled: !x
+              })
+            );
+          }
+        else {
+          const o = n.getSeriesColor(e);
+          if (!o) continue;
+          const p = n.getSeriesLabel(e), x = n.isSeriesVisible(e);
+          d.push(
+            z({
+              id: e,
+              seriesId: e,
+              layerIndex: void 0,
+              label: p ?? "Series",
+              color: o,
+              isDisabled: !x
+            })
+          );
+        }
+      }
+      return d;
+    }
+    const m = k(() => (v.value, h.value, K(i))), B = M(), R = k(() => typeof B.default == "function");
+    function T(n) {
+      S.mode === "isolate" || S.mode === "solo" ? n.isolate() : n.toggle();
+    }
+    return (n, d) => L.value && a(l) ? (g(), U(q, {
+      key: 0,
+      to: L.value
+    }, [
+      R.value && m.value.length > 0 ? (g(), u("div", {
+        key: 0,
+        "data-legend": t.position,
+        style: f({
+          display: "flex",
+          flexDirection: t.position === "right" ? "column" : "row",
+          flexWrap: "wrap",
+          gap: t.position === "right" ? "6px" : "14px",
+          padding: t.position === "right" ? "8px 6px" : "6px 8px",
+          alignItems: t.position === "right" ? "flex-start" : "center",
+          justifyContent: t.position === "right" ? "flex-start" : "center",
+          fontFamily: a(l).typography.fontFamily,
+          fontSize: a(l).axis.fontSize + "px",
+          color: a(l).axis.textColor,
+          pointerEvents: "auto",
+          flexShrink: 0
+        })
+      }, [
+        G(n.$slots, "default", { items: m.value })
+      ], 12, X)) : t.items && t.items.length > 0 ? (g(), u("div", {
+        key: 1,
+        "data-legend": t.position,
+        style: f({
+          display: "flex",
+          flexDirection: t.position === "right" ? "column" : "row",
+          flexWrap: "wrap",
+          gap: t.position === "right" ? "6px" : "14px",
+          padding: t.position === "right" ? "8px 6px" : "6px 8px",
+          alignItems: t.position === "right" ? "flex-start" : "center",
+          justifyContent: t.position === "right" ? "flex-start" : "center",
+          fontFamily: a(l).typography.fontFamily,
+          fontSize: a(l).axis.fontSize + "px",
+          color: a(l).axis.textColor,
+          pointerEvents: "auto",
+          flexShrink: 0
+        })
+      }, [
+        (g(!0), u(F, null, A(t.items, (e, s) => (g(), u("div", {
+          key: s,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            userSelect: "none"
+          }
+        }, [
+          b("span", {
+            style: f({
+              width: "8px",
+              height: "8px",
+              borderRadius: "2px",
+              background: e.color,
+              flexShrink: 0
+            })
+          }, null, 4),
+          b("span", Z, $(e.label), 1)
+        ]))), 128))
+      ], 12, Y)) : m.value.length > 0 ? (g(), u("div", {
+        key: 2,
+        "data-legend": t.position,
+        style: f({
+          display: "flex",
+          flexDirection: t.position === "right" ? "column" : "row",
+          flexWrap: "wrap",
+          gap: t.position === "right" ? "6px" : "14px",
+          padding: t.position === "right" ? "8px 6px" : "6px 8px",
+          alignItems: t.position === "right" ? "flex-start" : "center",
+          justifyContent: t.position === "right" ? "flex-start" : "center",
+          fontFamily: a(l).typography.fontFamily,
+          fontSize: a(l).axis.fontSize + "px",
+          color: a(l).axis.textColor,
+          pointerEvents: "auto",
+          flexShrink: 0
+        })
+      }, [
+        (g(!0), u(F, null, A(m.value, (e) => (g(), u("button", {
+          key: e.id,
+          type: "button",
+          onClick: (s) => T(e),
+          style: f({
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            cursor: "pointer",
+            opacity: e.isDisabled ? 0.35 : 1,
+            transition: "opacity 0.15s ease",
+            userSelect: "none",
+            border: "none",
+            background: "transparent",
+            padding: 0,
+            margin: 0,
+            font: "inherit",
+            color: "inherit",
+            textAlign: "left"
+          })
+        }, [
+          b("span", {
+            style: f({
+              width: "8px",
+              height: "8px",
+              borderRadius: "2px",
+              background: e.color,
+              flexShrink: 0
+            })
+          }, null, 4),
+          b("span", te, $(e.label), 1)
+        ], 12, ee))), 128))
+      ], 12, _)) : j("", !0)
+    ], 8, ["to"])) : j("", !0);
+  }
+});
+export {
+  le as default
+};

package/dist/ui/Legend.vue2.js

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

package/dist/ui/Marker.vue.js

@@ -0,0 +1,47 @@
+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";
+const h = /* @__PURE__ */ s({
+  __name: "Marker",
+  props: {
+    time: {},
+    value: {},
+    seriesId: {},
+    shape: {},
+    pulse: { type: Boolean },
+    label: {},
+    color: {}
+  },
+  setup(a) {
+    const e = a, r = p();
+    let l = null;
+    return o(() => {
+      l = r.addMarker({
+        time: e.time,
+        value: e.value,
+        seriesId: e.seriesId,
+        shape: e.shape,
+        pulse: e.pulse,
+        label: e.label,
+        color: e.color
+      });
+    }), t(() => {
+      l !== null && r.removeMarker(l), l = null;
+    }), u(
+      () => [e.time, e.value, e.seriesId, e.shape, e.pulse, e.label, e.color],
+      () => {
+        l !== null && r.updateMarker(l, {
+          time: e.time,
+          value: e.value,
+          seriesId: e.seriesId,
+          shape: e.shape,
+          pulse: e.pulse,
+          label: e.label,
+          color: e.color
+        });
+      }
+    ), (i, m) => n("", !0);
+  }
+});
+export {
+  h as default
+};

package/dist/ui/Marker.vue2.js

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

package/dist/ui/Navigator.vue.js

@@ -0,0 +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({
+  __name: "Navigator",
+  props: {
+    data: {},
+    height: {}
+  },
+  setup(c) {
+    const t = c, a = n(x), l = n(B), h = n(K);
+    if (!a || !l || !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({
+          container: e,
+          chart: r,
+          data: t.data,
+          options: t.height !== void 0 ? { height: t.height } : void 0
+        }));
+      },
+      { flush: "post", immediate: !0 }
+    ), i(
+      () => t.data,
+      (e) => {
+        o.value?.setData(e);
+      }
+    ), i(
+      () => t.height,
+      (e) => {
+        o.value?.setOptions(e !== void 0 ? { height: e } : {});
+      }
+    ), g(() => {
+      o.value?.destroy(), o.value = null;
+    }), (e, r) => u(a) ? (y(), _(w, {
+      key: 0,
+      to: u(a)
+    }, [
+      C("div", {
+        ref_key: "stripRef",
+        ref: s,
+        "data-chart-navigator": "",
+        style: N({
+          position: "relative",
+          width: "100%",
+          height: v.value + "px",
+          flexShrink: 0
+        })
+      }, null, 4)
+    ], 8, ["to"])) : k("", !0);
+  }
+});
+export {
+  V as default
+};

package/dist/ui/Navigator.vue2.js

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

package/dist/ui/NumberFlow.vue.js

@@ -0,0 +1,69 @@
+import { defineComponent as _, ref as b, onMounted as g, computed as c, openBlock as o, createElementBlock as l, Fragment as r, renderList as f, createElementVNode as m, normalizeStyle as k, toDisplayString as p } from "vue";
+const x = { style: {
+  display: "inline-flex",
+  fontVariantNumeric: "tabular-nums",
+  lineHeight: 1.2
+} }, D = {
+  key: 0,
+  style: {
+    display: "inline-block",
+    height: "1.2em",
+    overflow: "hidden",
+    position: "relative"
+  }
+}, F = {
+  key: 1,
+  style: { display: "inline-block" }
+}, w = /* @__PURE__ */ _({
+  __name: "NumberFlow",
+  props: {
+    value: {},
+    format: {},
+    locale: { default: "en-US" },
+    spinDuration: { default: 350 }
+  },
+  setup(a) {
+    const s = a, i = b(!1);
+    g(() => {
+      i.value = !0;
+    });
+    const d = c(() => {
+      const t = s.format;
+      if (typeof t == "function") return t;
+      const n = new Intl.NumberFormat(s.locale, typeof t == "object" ? t : void 0);
+      return (e) => n.format(e);
+    }), y = c(() => {
+      const t = d.value(s.value), n = [];
+      for (const e of t)
+        e >= "0" && e <= "9" ? n.push({ type: "digit", value: e }) : n.push({ type: "symbol", value: e });
+      return n;
+    }), v = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+    return (t, n) => (o(), l("span", x, [
+      (o(!0), l(r, null, f(y.value, (e, h) => (o(), l(r, { key: h }, [
+        e.type === "digit" ? (o(), l("span", D, [
+          m("span", {
+            style: k({
+              display: "flex",
+              flexDirection: "column",
+              transform: "translateY(" + -parseInt(e.value) * 1.2 + "em)",
+              transition: i.value ? "transform " + a.spinDuration + "ms cubic-bezier(0.16, 1, 0.3, 1)" : "none"
+            })
+          }, [
+            (o(), l(r, null, f(v, (u) => m("span", {
+              key: u,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "1.2em"
+              }
+            }, p(u), 1)), 64))
+          ], 4)
+        ])) : (o(), l("span", F, p(e.value), 1))
+      ], 64))), 128))
+    ]));
+  }
+});
+export {
+  w as default
+};

package/dist/ui/NumberFlow.vue2.js

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