@flowtools/uplot
Version:
Modern vue component for uplot
182 lines (181 loc) • 6.43 kB
JavaScript
import { defineComponent as M, mergeModels as A, useTemplateRef as $, useModel as D, ref as F, onMounted as N, watch as h, nextTick as P, createElementBlock as f, openBlock as p, renderSlot as k, createElementVNode as g, createCommentVNode as w, createTextVNode as R, toDisplayString as d, unref as j, Fragment as U, renderList as L, normalizeStyle as C, normalizeClass as q } from "vue";
import { useElementSize as G } from "@vueuse/core";
import H from "uplot";
function T(n) {
if (typeof n == "object" && n !== null) {
if (typeof Object.getPrototypeOf == "function") {
const a = Object.getPrototypeOf(n);
return a === Object.prototype || a === null;
}
return Object.prototype.toString.call(n) === "[object Object]";
}
return !1;
}
function u(...n) {
return n.reduce((a, r) => {
if (Array.isArray(r))
throw new TypeError(
"Arguments provided to ts-deepmerge must be objects, not arrays."
);
return r && Object.keys(r).forEach((o) => {
["__proto__", "constructor", "prototype"].includes(o) || (Array.isArray(a[o]) && Array.isArray(r[o]) ? a[o] = u.options.mergeArrays ? Array.from(new Set(a[o].concat(r[o]))) : r[o] : T(a[o]) && T(r[o]) ? a[o] = u(a[o], r[o]) : a[o] = r[o]);
}), a;
}, {});
}
const B = {
mergeArrays: !0
};
u.options = B;
u.withOptions = (n, ...a) => {
u.options = {
mergeArrays: !0,
...n
};
const r = u(...a);
return u.options = B, r;
};
const I = { class: "__uplot-root" }, J = {
key: 0,
class: "extra-info"
}, K = { style: { "text-align": "left" } }, Q = { class: "__uplot-legend" }, W = ["onClick"], X = {
key: 1,
class: "__uplot-legend-value"
}, Y = {
key: 2,
class: "__uplot-legend-value"
}, te = /* @__PURE__ */ M({
__name: "uplot",
props: /* @__PURE__ */ A({
options: {},
data: {},
noResetScale: { type: Boolean, default: !1 },
showDebug: { type: Boolean, default: !1 },
noFooter: { type: Boolean, default: !1 }
}, {
zoom: { default: () => [null, null] },
zoomModifiers: {},
series: { default: () => [] },
seriesModifiers: {}
}),
emits: /* @__PURE__ */ A(["select", "cursor"], ["update:zoom", "update:series"]),
setup(n, { expose: a, emit: r }) {
const o = n, x = r, v = $("el"), { width: _, height: y } = G(v), c = D(n, "zoom"), i = D(n, "series"), E = {
title: void 0,
legend: {
show: !1
},
hooks: {
init: [
(e) => {
o.showDebug && console.log("init", e), i.value = e.series.map((l, s) => ({
label: l.label,
stroke: typeof l.stroke == "function" ? l.stroke(e, s) : null,
value: null,
data: null,
show: l.show
// ...s,
}));
}
],
setCursor: [
(e) => {
x("cursor", e.cursor), i.value = e.series.map((l, s) => ({
label: l.label,
stroke: typeof l.stroke == "function" ? l.stroke(e, s) : null,
value: e.cursor.idx && e.data[s][e.cursor.idx] ? typeof l.value == "function" ? l.value(e, e.data[s][e.cursor.idx], s, e.cursor.idx) : e.data[s][e.cursor.idx] : null,
data: e.cursor?.idx ? e.data[s][e.cursor?.idx] : null,
show: l.show
// ...s,
}));
}
],
setSelect: [
(e) => {
x("select", e.select), o.showDebug && console.log("setSelect", e.select), c.value = [
e.posToVal(e.select.left, "x"),
e.posToVal(e.select.left + e.select.width, "x")
];
}
],
setScale: [
(e) => {
o.showDebug && console.log("setScale", e.scales), c.value = [
e.scales.x.min || null,
e.scales.x.max || null
];
}
]
}
};
let t;
const S = F();
function O() {
t && t.destroy(), t = new H({ width: 100, height: 100, ...u(o.options, E) }, o.data, v.value), S.value = t, c.value && c.value[0] !== null && c.value[1] !== null && t.setScale("x", { min: c.value[0], max: c.value[1] }), setTimeout(() => {
z();
}, 0);
}
N(() => {
O();
}), h([_, y], () => {
P(() => {
z();
});
}), h(o.data, (e) => {
if (o.noResetScale) {
t.setData(e, !1), t.redraw(!1);
return;
}
t.setData(e, !0);
}), h(o.options, (e, l) => {
o.showDebug && console.log("watch options", e, l), O();
}), h(() => c.value, (e) => {
e && e[0] !== null && e[1] !== null && (t.scales.x.min !== e[0] || t.scales.x.max !== e[1]) && (o.showDebug && console.log("watch zoom setScale", t.scales.x.min, e[0], t.scales.x.max, e[1]), t.setScale("x", { min: e[0], max: e[1] }));
});
function z() {
t.setSize({ width: _.value, height: y.value }), o.showDebug && console.log("resize", t);
}
function m(e) {
typeof e == "object" && (e = i.value?.indexOf(e) || -1), t.setSeries(e, { show: !t.series[e].show }), i.value?.[e] && (i.value[e].show = t.series[e].show);
}
return a({ toggleShow: m, uplot: S }), (e, l) => (p(), f("div", I, [
k(e.$slots, "header", {
series: i.value,
toggleShow: m
}),
g("div", {
ref_key: "el",
ref: v,
class: "__uplot"
}, null, 512),
e.showDebug ? (p(), f("div", J, [
R(d(j(_)) + " x " + d(j(y)) + " ", 1),
l[0] || (l[0] = g("br", null, null, -1)),
g("pre", K, d(i.value), 1)
])) : w("", !0),
e.noFooter ? w("", !0) : k(e.$slots, "footer", {
key: 1,
series: i.value,
toggleShow: m
}, () => [
g("div", Q, [
(p(!0), f(U, null, L(i.value, (s, b) => (p(), f("div", {
key: s.label,
class: q(["__uplot-legend-series", [`__uplot-${s.label?.toLowerCase()}`, `__uplot-i-${b}`]]),
style: C({ backgroundColor: s.show ? "" : "lightgrey" }),
onClick: (Z) => m(b)
}, [
b !== 0 ? (p(), f("span", {
key: 0,
style: C({ color: s.stroke || "black" }),
class: "__uplot-legend-label"
}, d(s.label), 5)) : w("", !0),
s.value ? (p(), f("span", X, d(s.value), 1)) : (p(), f("span", Y, "--"))
], 14, W))), 128))
])
])
]));
}
});
export {
te as Uplot
};