vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,149 lines (1,148 loc) • 45.3 kB
JavaScript
import { useCssVars as el, computed as s, ref as h, watch as Q, onMounted as tl, onBeforeUnmount as Ve, onUpdated as ct, nextTick as xe, createElementBlock as n, openBlock as i, createElementVNode as $, createCommentVNode as c, renderSlot as vt, normalizeStyle as F, createVNode as ll, withDirectives as mt, unref as pe, Fragment as g, renderList as S, normalizeProps as ht, mergeProps as dt, normalizeClass as _, withKeys as ft, vModelText as gt, toDisplayString as De } from "vue";
import { c as al, y as nl, X as il, x as ze, z as yt, A as xt, B as pt, C as bt, D as Mt } from "./lib-2iaAPQ_c.js";
import { t as We, d as ul, u as ol } from "./useResponsive-DfdjqQps.js";
import rl from "./BaseIcon-CbVDYv89.js";
import { _ as sl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const cl = {
class: "vue-data-ui-slicer-labels",
style: { position: "relative", "z-index": "1", "pointer-events": "none" }
}, vl = {
key: 0,
style: { width: "100%", position: "relative" }
}, ml = {
key: 0,
class: "minimap",
style: { width: "100%" }
}, hl = ["xmlns", "viewBox"], dl = ["id"], fl = ["stop-color"], gl = ["width", "height", "stroke"], yl = ["d", "stroke"], xl = ["d", "fill"], pl = ["x", "y", "width", "height", "fill"], bl = ["d", "stroke"], Ml = ["cx", "cy", "fill", "stroke"], kl = ["cx", "cy", "fill", "stroke"], wl = ["x", "width", "height", "fill", "rx"], Sl = ["x", "width", "height", "rx", "fill"], Cl = ["x", "width", "height", "fill", "rx"], Pl = ["x2", "y1", "y2", "stroke"], Nl = { key: "merged-tree" }, $l = ["d", "fill"], Ll = ["d", "stroke"], Fl = ["cx", "cy", "stroke", "fill"], Rl = ["cx", "cy", "stroke", "fill"], Al = { key: "split-tree" }, El = ["x", "y", "width", "height", "fill"], Bl = ["d", "stroke"], Tl = ["cx", "cy", "fill", "stroke"], Il = ["x", "height", "fill", "stroke"], Vl = ["x", "height", "fill", "stroke"], Dl = { key: "merged-tree" }, zl = ["cx", "cy", "stroke", "fill"], Wl = ["cx", "cy", "fill"], Hl = ["cx", "cy", "stroke", "fill"], Xl = ["cx", "cy", "fill"], Zl = { key: 1 }, Ol = ["d", "stroke"], Ul = ["cx", "cy", "fill", "stroke"], Kl = ["cx", "cy", "stroke", "fill"], Yl = ["cx", "cy", "fill"], jl = ["cx", "cy", "stroke", "fill"], ql = ["cx", "cy", "fill"], Gl = ["cx", "cy", "fill", "stroke"], Jl = ["x", "height", "width", "onMouseenter"], Ql = ["min", "max"], _l = ["min", "max"], He = 48, ea = {
__name: "SlicerPreview",
props: {
immediate: {
type: Boolean,
default: !0
},
background: {
type: String,
default: "#FFFFFF"
},
borderColor: {
type: String,
default: "#FFFFFF"
},
fontSize: {
type: Number,
default: 14
},
labelLeft: {
type: [String, Number],
default: ""
},
labelRight: {
type: [String, Number],
default: ""
},
textColor: {
type: String,
default: "#1A1A1A"
},
inputColor: {
type: String,
default: "#1A1A1A"
},
max: {
type: Number,
default: 0
},
min: {
type: Number,
default: 0
},
selectColor: {
type: String,
default: "#4A4A4A"
},
useResetSlot: {
type: Boolean,
default: !1
},
valueStart: {
type: [Number, String],
default: 0
},
valueEnd: {
type: [Number, String],
default: 0
},
minimap: {
type: Array,
default: []
},
smoothMinimap: {
type: Boolean,
default: !1
},
minimapSelectedColor: {
type: String,
default: "#1f77b4"
},
minimapSelectionRadius: {
type: Number,
default: 12
},
minimapLineColor: {
type: String,
default: "#2D353C"
},
minimapSelectedColorOpacity: {
type: Number,
default: 0.2
},
minimapSelectedIndex: {
type: Number,
default: null
},
minimapIndicatorColor: {
type: String,
default: "#2D353C"
},
refreshStartPoint: {
type: Number,
default: 0
},
refreshEndPoint: {
type: Number,
default: null
},
enableRangeHandles: {
type: Boolean,
default: !1
},
enableSelectionDrag: {
type: Boolean,
default: !0
},
verticalHandles: {
type: Boolean,
default: !1
},
timeLabels: {
type: Array
},
isPreview: {
type: Boolean,
default: !1
},
preciseLabels: {
type: Array,
default() {
return [];
}
},
usePreciseLabels: {
type: Boolean,
default: !1
},
selectedSeries: {
type: Object
},
customFormat: {
type: [Function, null]
},
minimapCompact: {
type: Boolean,
default: !1
},
allMinimaps: {
type: Array,
default() {
return [];
}
},
minimapMerged: {
type: Boolean,
default: !1
},
minimapFrameColor: {
type: String,
default: "#e1e5e8"
},
cutNullValues: {
type: Boolean,
default: !1
},
focusOnDrag: {
type: Boolean,
default: !1
},
focusRangeRatio: {
type: Number,
default: 0.1
}
},
emits: ["futureStart", "futureEnd", "update:start", "update:end", "reset", "trapMouse"],
setup(o, { expose: kt, emit: wt }) {
el((t) => ({
v7ba1dbb5: Ct.value,
v13976429: f.value,
v402e6eda: Nt.value,
v1866b54e: o.selectColor,
v3f0cbb67: Pt.value
}));
const a = o, P = h(null), x = h(a.min), b = h(a.max), k = s(() => !!a.minimap.length), be = h(al()), H = h(!1), U = s(() => k.value && a.minimapCompact), Xe = h(0), Me = We((t) => A("futureStart", t), 0), ke = We((t) => A("futureEnd", t), 0), ee = s({
get: () => x.value,
set(t) {
const l = Math.min(t, b.value - 1);
l !== x.value && (x.value = l, le.value && (le.value.value = String(l)), a.immediate ? A("update:start", Number(l)) : H.value && Me(l));
}
}), te = s({
get: () => b.value,
set(t) {
const l = Math.max(t, x.value + 1);
l !== b.value && (b.value = l, ae.value && (ae.value.value = String(l)), a.immediate ? A("update:end", Number(l)) : H.value && ke(l));
}
});
let Ze = null;
function R() {
clearTimeout(Ze), a.immediate || (A("update:start", Number(x.value)), A("update:end", Number(b.value))), H.value = !1;
}
const St = s(() => a.refreshEndPoint === null ? a.max : a.refreshEndPoint), A = wt, ve = s(() => {
if (U.value) {
const l = Math.max(1, Y.value - 1);
return he.value / l * 100;
}
const t = Math.max(1, a.max - a.min);
return (x.value - a.min) / t * 100;
}), we = s(() => {
if (U.value) {
const l = Math.max(1, Y.value - 1);
return de.value / l * 100;
}
const t = Math.max(1, a.max - a.min);
return (b.value - a.min) / t * 100;
}), Se = s(() => (ve.value + we.value) / 2), Ce = s(() => {
if (!P.value) return !1;
const t = Math.max(1, a.max - a.min);
return P.value.getBoundingClientRect().width * ((x.value - a.min) / t) - fe.value / 2 < 0;
}), Pe = s(() => {
if (!P.value) return !1;
const t = Math.max(1, a.max - a.min), l = P.value.getBoundingClientRect().width;
return l * ((b.value - a.min) / t) + oe.value / 2 > l;
}), L = s(() => {
const t = Pe.value ? `calc(${Se.value}% - ${se.value.width}px - 2px)` : Ce.value ? `calc(${Se.value}% - 8px)` : `calc(${Se.value}% - ${se.value.width / 2}px - 4px)`;
return {
left: `${ve.value}%`,
width: `${Math.max(0, we.value - ve.value)}%`,
background: a.selectColor,
tooltipLeft: `calc(${ve.value}% - ${Ce.value ? 9 : fe.value / 2 + 3.5}px)`,
tooltipRight: `calc(${we.value}% - ${Pe.value ? oe.value - 9 : oe.value / 2 - 3.5}px)`,
tooltipCenter: t,
arrowLeft: !Ce.value,
arrowRight: !Pe.value
};
}), Ct = s(() => a.inputColor), Pt = s(() => a.background), Nt = s(() => `${a.selectColor}33`), f = s(() => a.borderColor), Oe = s(() => {
let t = [];
for (let l = 0; l < a.max; l += 1)
t.push(l);
return t;
});
function Ue() {
A("reset");
}
Q(
() => a.min,
(t) => {
Number(x.value) < Number(t) && (x.value = Number(t)), Number(b.value) < Number(t) && (b.value = Number(t));
}
), Q(
() => a.max,
(t) => {
Number(x.value) > Number(t) && (x.value = Number(t)), Number(b.value) > Number(t) && (b.value = Number(t));
}
);
const me = h(null), d = h({
width: 1,
height: 1
}), K = h(null);
tl(() => {
if (k.value) {
const t = We(() => {
if (!me.value) return;
const { width: l, height: e } = ol({ chart: me.value }), u = Math.max(0, Math.round(l)), r = Math.max(0, Math.round(e - 47));
(u !== d.value.width || r !== d.value.height) && (d.value.width = u, d.value.height = r);
}, 0);
K.value = new ResizeObserver(t), K.value.observe(me.value);
}
}), Ve(() => {
K.value && K.value.disconnect();
});
const Y = s(() => Math.max(1, a.max - a.min));
function Ke(t) {
const l = Math.floor(t - a.min);
return Math.min(Math.max(0, l), Y.value);
}
function $t(t) {
const l = Math.ceil(t - a.min);
return Math.min(Math.max(0, l), Y.value);
}
const X = s(() => Ke(x.value)), j = s(() => $t(b.value)), Ne = s(() => Math.max(...a.allMinimaps.map((t) => t.series.length))), M = s(() => {
if (!a.minimap.length) return 0;
const t = Math.max(1, Ne.value - (a.minimapCompact ? 1 : 0));
return d.value.width / t;
}), Ye = s(() => a.allMinimaps.length ? a.allMinimaps.filter((t) => t.type === "bar").length : 0), $e = s(() => M.value / (Ye.value || 1) * 0.8);
function je(t, l, e) {
const u = $e.value, r = Math.max(1, Ye.value), m = Ne.value - 1;
return e === 0 ? t + u / 2 * l : e === m ? t - u / 2 * (r - l) : t - r * u / 2 + l * u;
}
function qe(t, l) {
return [0, Ne.value - 1].includes(l) ? $e.value / 2 : $e.value;
}
const Ge = s(() => {
const t = [];
if (Array.isArray(a.minimap) && a.minimap.length && a.minimapMerged && t.push(...a.minimap.filter(Number.isFinite)), Array.isArray(a.allMinimaps) && a.allMinimaps.length)
for (const l of a.allMinimaps)
l?.isVisible && Array.isArray(l?.series) && t.push(...l.series.filter(Number.isFinite));
return t.length ? { min: Math.min(...t), max: Math.max(...t) } : { min: 0, max: 1 };
}), Z = s(() => Ge.value.min), q = s(() => Ge.value.max), Lt = s(() => Z.value < 0 && q.value > 0 || q.value <= 0 ? Z.value : 0), Ft = s(() => Math.max(1e-9, Math.max(Math.abs(Z.value), Math.abs(q.value)))), Rt = s(() => Z.value < 0 && q.value > 0), At = (t) => {
const l = Math.max(1, d.value.height);
if (Rt.value) {
const e = Ft.value;
return (1 - (Math.max(-1, Math.min(1, t / e)) + 1) / 2) * l;
} else {
const e = Math.min(0, Z.value), u = Math.max(0, q.value);
return l - (t - e) / Math.max(1e-9, u - e) * l;
}
}, Le = s(() => At(0));
function Et(t, l, e) {
const u = (m, C, y) => Math.max(C, Math.min(y, m));
if (l <= 0) {
const m = Math.max(1e-9, 0 - t);
return (C) => e - (C - t) / m * e;
} else if (t >= 0) {
const m = Math.max(1e-9, l - 0);
return (C) => e - (C - 0) / m * e;
} else {
const m = Math.max(1e-9, Math.max(Math.abs(t), Math.abs(l)));
return (C) => (1 - (u(C / m, -1, 1) + 1) / 2) * e;
}
}
function Je(t, l = !1) {
if (!t || !t.length)
return {
fullSet: "",
points: [],
selectionSet: "",
sliced: [],
firstPlot: null,
lastPlot: null,
hasFull: !1,
hasSelection: !1,
fullMarkers: [],
selectionMarkers: []
};
const e = Math.max(1, d.value.height), u = Et(Z.value, q.value, e), r = t.length, m = Math.min(Math.max(0, X.value), Math.max(0, r - 1)), C = Math.min(r, Math.max(m + 1, j.value)), y = t.map((p, rt) => {
const ce = p, st = Number.isFinite(ce), Qt = M.value * rt + (a.minimapCompact ? 0 : M.value / 2), _t = u(0);
return {
x: Qt,
y: st ? u(ce) : NaN,
v: ce,
value: ce == null ? null : st ? ce : null,
y0: _t,
i: rt
};
}), ge = (p) => p >= 0 && p < y.length && Number.isFinite(y[p]?.value), W = y.filter((p) => Number.isFinite(p.value) && !ge(p.i - 1) && !ge(p.i + 1)), ye = W.filter((p) => p.i >= m && p.i < C), O = y.slice(m, C), Gt = y.length >= 2 ? a.smoothMinimap || l ? a.cutNullValues ? yt(y) : xt(y.filter((p) => p.value != null)) : a.cutNullValues ? pt(y) : bt(y.filter((p) => p.value != null)) : "", Jt = O.length >= 2 ? a.smoothMinimap || l ? a.cutNullValues ? yt(O) : xt(O.filter((p) => p.value != null)) : a.cutNullValues ? pt(O) : bt(O.filter((p) => p.value != null)) : "";
return {
fullSet: Gt,
points: y,
selectionSet: Jt,
sliced: O,
firstPlot: y[m] || null,
lastPlot: y[Math.max(0, C - 1)] || null,
hasFull: y.length >= 2,
hasSelection: O.length >= 2,
fullMarkers: W,
selectionMarkers: ye
};
}
const v = s(() => a.minimap.length ? Je(a.minimap) : []), E = s(() => a.allMinimaps.length ? a.allMinimaps.map((t, l) => {
const e = Je(t?.series || [], !!t.smooth), u = t?.id ?? t?.name ?? l;
return {
key: typeof u == "object" ? JSON.stringify(u) : String(u),
color: t?.color,
...e,
isVisible: t.isVisible,
type: t.type || "line"
};
}) : []), N = s(() => {
const t = X.value, l = Math.max(t + 1, j.value);
return {
x: M.value * t + (a.minimapCompact ? 0 : M.value / 2),
width: M.value * (l - t) - M.value
};
}), B = h(a.minimapSelectedIndex), Qe = (t) => Math.round(a.min + t), he = s({
get() {
return U.value ? X.value : Number(ee.value);
},
set(t) {
if (U.value) {
const l = Math.round(+t || 0);
Re(Qe(l));
} else {
let l = Math.round(+t || 0);
const e = Number(b.value) - 1, u = Math.min(Math.max(a.min, l), e);
le.value && (le.value.valueAsNumber = u), Re(u);
}
}
}), de = s({
get() {
return U.value ? Math.max(X.value, j.value - 1) : Number(te.value);
},
set(t) {
if (U.value) {
const l = Math.round(+t || 0);
Ee(Qe(l + 1));
} else {
let l = Math.round(+t || 0);
const e = Number(x.value) + 1, u = Math.max(e, Math.min(l, a.max));
ae.value && (ae.value.valueAsNumber = u), Ee(u);
}
}
});
function Bt(t) {
B.value = Ke(a.valueStart) + t;
}
const Tt = ul(Bt, 60);
Q(() => a.minimapSelectedIndex, (t, l) => {
if ([null, void 0].includes(t)) {
B.value = null;
return;
}
t !== l && Tt(t);
}, { immediate: !0 });
function It(t) {
B.value = t;
const l = X.value, e = j.value;
t >= l && t < e && !z.value && A("trapMouse", t - l);
}
const le = h(null), ae = h(null);
function _e(t) {
if (typeof t == "object" && t && "target" in t) {
const e = t.target, u = "valueAsNumber" in e ? e.valueAsNumber : +e.value;
return Number.isFinite(u) ? u : NaN;
}
const l = +t;
return Number.isFinite(l) ? l : NaN;
}
let Fe = 0;
function Re(t) {
H.value = !0;
const l = _e(t);
Number.isFinite(l) && (cancelAnimationFrame(Fe), Fe = requestAnimationFrame(() => {
ee.value = l;
}));
}
let Ae = 0;
function Ee(t) {
H.value = !0;
const l = _e(t);
Number.isFinite(l) && (cancelAnimationFrame(Ae), Ae = requestAnimationFrame(() => {
te.value = l;
}));
}
Ve(() => {
cancelAnimationFrame(Fe), cancelAnimationFrame(Ae);
});
const ne = s(() => a.valueEnd - a.valueStart), Vt = s(() => ne.value < a.max - a.min), G = h(!1);
let Dt = h(null);
const zt = s(() => (Xe.value - 48) / (a.max - a.min) * ne.value), Wt = s(() => Math.max(1, Xe.value - He - zt.value)), Ht = s(() => Math.max(1, a.max - a.min - ne.value)), Xt = s(() => Ht.value / Wt.value), et = h(0), tt = h(0), Zt = h(0), Ot = h(0);
let T = null, I = null, V = null, D = null;
const lt = h(a.min);
function Be(t) {
if (!P.value) return a.min;
const l = P.value.getBoundingClientRect(), e = l.left + He / 2, u = l.right - He / 2, r = Math.max(1, u - e), C = (Math.max(e, Math.min(t, u)) - e) / r, y = Math.max(1, a.max - a.min);
return Math.round(a.min + C * y);
}
const at = async (t) => {
if (H.value = !0, J.value = !0, !a.enableSelectionDrag) return;
const l = t.type === "touchstart";
l || t.stopPropagation();
const e = l && t.targetTouches && t.targetTouches[0] ? t.targetTouches[0] : null, u = l ? e ? e.target : null : t.target;
if (!u || !(u instanceof Element) || u.classList && u.classList.contains("range-handle")) return;
G.value = !0;
const r = l ? e ? e.clientX : 0 : t.clientX;
if (Dt.value = r, et.value = r, a.focusOnDrag && !Vt.value && P.value) {
lt.value = Be(r);
const m = Math.min(0.95, Math.max(0.05, a.focusRangeRatio)), C = a.max - a.min, y = Math.max(1, Math.round(C * m)), ge = Math.floor(y / 2);
let W = lt.value - ge;
W = Math.max(a.min, Math.min(W, a.max - y));
const ye = Math.min(a.max, W + y);
ee.value = W, te.value = ye, Me(W), ke(ye), Mt(P.value, "mouseup"), await xe(), Mt(P.value, "mousedown", { clientX: r });
}
tt.value = x.value, Zt.value = b.value, Ot.value = Xt.value, T = l ? "touchmove" : "mousemove", I = l ? "touchend" : "mouseup", V = l ? Kt : Ut, D = l ? jt : Yt, window.addEventListener(T, V, { passive: !1 }), window.addEventListener(I, D);
};
function Ut(t) {
G.value && nt(t.clientX);
}
function Kt(t) {
if (!G.value || !P.value) return;
const l = t.target;
if (!(l instanceof Element) || !P.value.contains(l) || l.classList && l.classList.contains("range-handle")) return;
t.preventDefault();
const e = t.targetTouches && t.targetTouches[0] ? t.targetTouches[0] : null;
e && nt(e.clientX);
}
function nt(t) {
if (!G.value) return;
const l = Be(et.value), u = Be(t) - l;
let r = Math.round(tt.value + u);
r = Math.max(a.min, Math.min(r, a.max - ne.value));
const m = r + ne.value;
ee.value = r, te.value = m, Me(r), ke(m);
}
function Yt() {
it();
}
function jt() {
it();
}
function it() {
G.value = !1, T && V && window.removeEventListener(T, V), I && D && window.removeEventListener(I, D), T = I = null, V = D = null, R();
}
const z = h(!1), ie = h(null), ue = h(null), fe = h(1), oe = h(1), J = h(!1);
function Te() {
if (ie.value) {
const t = Math.round(ie.value.getBoundingClientRect().width);
t !== fe.value && (fe.value = t);
}
}
function Ie() {
if (ue.value) {
const t = Math.round(ue.value.getBoundingClientRect().width);
t !== oe.value && (oe.value = t);
}
}
ct(() => {
Te(), Ie();
});
const ut = h(0);
function ot(t) {
ut.value = t === "start" ? 1 : 0;
}
const re = h(!1), se = h({
width: 0,
left: 0
});
Q([x, b], async () => {
if (await xe(), !ie.value || !ue.value) {
re.value = !1, se.value = { width: 0, left: 0 };
return;
}
const t = ie.value.getBoundingClientRect(), l = ue.value.getBoundingClientRect();
re.value = t.x + t.width > l.x;
const e = t.x + t.width / 2, u = l.x + l.width / 2, r = t.width + l.width, m = (e + u) / 2;
se.value = {
width: r,
left: m - r / 2
};
}), ct(() => {
Te(), Ie();
}), Q(() => a.labelLeft, () => {
xe(Te);
}, { deep: !0 }), Q(() => a.labelRight, () => {
xe(Ie);
}, { deep: !0 });
const w = s(() => {
let t = "", l = "", e = !1;
if (nl(a.customFormat))
try {
const u = a.customFormat({
absoluteIndex: x.value,
seriesIndex: x.value,
datapoint: a.selectedSeries,
timeLabel: a.preciseLabels[x.value]
}), r = a.customFormat({
absoluteIndex: b.value - 1,
seriesIndex: -1,
datapoint: a.selectedSeries,
timeLabel: a.preciseLabels[b.value - 1]
});
typeof u == "string" && typeof r == "string" && (t = u, l = r, e = !0);
} catch {
e = !1;
}
if (!e) {
const u = a.usePreciseLabels ? a.preciseLabels.find((m) => m.absoluteIndex === x.value) : a.timeLabels.find((m) => m.absoluteIndex === x.value), r = a.usePreciseLabels ? a.preciseLabels.find((m) => m.absoluteIndex === b.value - 1) : a.timeLabels.find((m) => m.absoluteIndex === b.value - 1);
t = u ? u.text : "", l = r ? r.text : "";
}
return { left: t, right: l };
});
Ve(() => {
K.value && K.value.disconnect(), T && V && window.removeEventListener(T, V), I && D && window.removeEventListener(I, D), T = I = null, V = D = null, clearTimeout(Ze);
});
const qt = s(() => {
if (!Oe.value.length) return null;
if (B.value >= X.value && B.value < j.value) {
const t = B.value;
return {
x1: M.value * t + (a.minimapCompact ? 0 : M.value / 2),
x2: M.value * t + (a.minimapCompact ? 0 : M.value / 2),
y1: 0,
y2: Math.max(d.value.height, 0),
stroke: a.minimapIndicatorColor,
"stroke-linecap": "round",
"stroke-dasharray": 2,
"stroke-width": 1
};
} else
return null;
});
return kt({
setStartValue: Re,
setEndValue: Ee
}), (t, l) => (i(), n("div", {
"data-dom-to-png-ignore": "",
style: { padding: "0 24px" },
class: "vue-data-ui-zoom",
ref_key: "zoomWrapper",
ref: P,
onMousedown: at,
onTouchstart: at
}, [
$("div", cl, [
o.valueStart !== o.refreshStartPoint || o.valueEnd !== St.value ? (i(), n("div", vl, [
o.useResetSlot ? vt(t.$slots, "reset-action", {
key: 1,
reset: Ue
}, void 0, !0) : (i(), n("button", {
key: 0,
tabindex: "0",
role: "button",
class: "vue-data-ui-refresh-button",
style: F({
top: k.value ? "36px" : "-16px",
pointerEvents: "all !important"
}),
onClick: Ue
}, [
ll(rl, {
name: "refresh",
stroke: o.textColor
}, null, 8, ["stroke"])
], 4))
])) : c("", !0)
]),
$("div", {
class: "double-range-slider",
ref_key: "minimapWrapper",
ref: me,
style: { "z-index": "0" },
onMouseenter: l[11] || (l[11] = (e) => J.value = !0),
onMouseleave: l[12] || (l[12] = (e) => J.value = !1)
}, [
k.value ? (i(), n("div", ml, [
(i(), n("svg", {
key: `mm-${o.minimapMerged ? "merged" : "split"}-${o.minimapCompact ? "compact" : "normal"}`,
xmlns: pe(il),
viewBox: `0 0 ${Math.max(0, d.value.width)} ${Math.max(0, d.value.height)}`
}, [
$("defs", null, [
$("linearGradient", {
id: be.value,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
$("stop", {
offset: "0%",
"stop-color": `${o.minimapLineColor}50`
}, null, 8, fl),
l[13] || (l[13] = $("stop", {
offset: "100%",
"stop-color": "transparent"
}, null, -1))
], 8, dl)
]),
o.minimapCompact ? (i(), n("rect", {
key: 0,
class: "vue-ui-zoom-minimap-frame",
x: 0,
y: 0,
width: d.value.width,
height: d.value.height,
fill: "none",
stroke: o.minimapFrameColor,
rx: 3
}, null, 8, gl)) : c("", !0),
t.$slots.slotMap ? c("", !0) : (i(), n(g, { key: 1 }, [
o.minimapMerged ? (i(), n("path", {
key: 0,
d: `M${v.value.fullSet}`,
stroke: `${o.minimapLineColor}`,
fill: "none",
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: { opacity: "0.6" }
}, null, 8, yl)) : c("", !0),
o.minimapMerged && !o.minimapCompact ? (i(), n("path", {
key: 1,
d: `M${M.value / 2},${Math.max(d.value.height, 0)} ${v.value.fullSet} L${d.value.width - M.value / 2},${Math.max(d.value.height, 0)}Z`,
fill: `url(#${be.value})`,
stroke: "none",
style: { opacity: "0.6" }
}, null, 8, xl)) : o.minimapMerged ? c("", !0) : (i(), n(g, { key: 2 }, [
(i(!0), n(g, null, S(E.value.filter((e) => e.type === "bar"), (e, u) => (i(), n("g", null, [
(i(!0), n(g, null, S(e.points, (r, m) => (i(), n(g, null, [
e.isVisible && !isNaN(r.y) ? (i(), n("rect", {
key: 0,
x: je(r.x, u, m),
y: r.v >= 0 ? r.y : r.y0,
width: qe(u, m),
height: r.v >= 0 ? r.y0 - r.y : r.y - r.y0,
fill: e.color,
style: { opacity: 0.6 }
}, null, 8, pl)) : c("", !0)
], 64))), 256))
]))), 256)),
(i(!0), n(g, null, S(E.value.filter((e) => e.type === "line"), (e) => (i(), n("g", null, [
e.isVisible ? (i(), n("path", {
key: 0,
d: `M ${e.fullSet}`,
fill: "none",
stroke: e.color,
style: { opacity: "0.6" }
}, null, 8, bl)) : c("", !0),
e.isVisible && o.cutNullValues ? (i(!0), n(g, { key: 1 }, S(e.fullMarkers, (u) => (i(), n("circle", {
key: `sel-dot-under-${e.key}-${u.i}`,
cx: u.x,
cy: u.y,
r: "2",
fill: e.color,
stroke: f.value,
"stroke-width": "0.5",
style: { opacity: "0.6" }
}, null, 8, Ml))), 128)) : c("", !0)
]))), 256)),
(i(!0), n(g, null, S(E.value.filter((e) => e.type === "plot"), (e) => (i(), n("g", null, [
(i(!0), n(g, null, S(e.points, (u) => (i(), n("g", null, [
e.isVisible && u.value !== null ? (i(), n("circle", {
key: `sel-plot-under-${e.key}-${u.i}`,
cx: u.x,
cy: u.y,
r: "2",
fill: e.color,
stroke: f.value,
"stroke-width": "0.5",
style: { opacity: "0.6" }
}, null, 8, kl)) : c("", !0)
]))), 256))
]))), 256))
], 64))
], 64)),
$("rect", {
x: N.value.x,
y: 0,
width: Math.max(0, N.value.width),
height: Math.max(d.value.height, 0),
fill: f.value,
rx: o.minimapSelectionRadius,
stroke: "none"
}, null, 8, wl),
$("rect", {
x: N.value.x,
y: 0,
width: N.value.width < 0 ? 0 : N.value.width,
height: Math.max(d.value.height, 0),
rx: o.minimapSelectionRadius,
fill: f.value,
style: F({ opacity: G.value || H.value ? 0 : 1 })
}, null, 12, Sl),
$("rect", {
x: N.value.x,
y: 0,
width: N.value.width < 0 ? 0 : N.value.width,
height: Math.max(d.value.height, 0),
fill: o.minimapSelectedColor,
rx: o.minimapSelectionRadius,
style: F({ opacity: o.minimapSelectedColorOpacity })
}, null, 12, Cl),
!o.minimapMerged && Lt.value < 0 ? (i(), n("line", {
key: 2,
class: "slicer-minimap-zero-line",
x1: 0,
x2: d.value.width,
y1: Le.value,
y2: Le.value,
stroke: o.minimapFrameColor,
"stroke-width": "0.5"
}, null, 8, Pl)) : c("", !0),
t.$slots.slotMap ? c("", !0) : (i(), n(g, { key: 3 }, [
o.minimapMerged ? (i(), n("g", Nl, [
v.value && v.value.sliced && v.value.sliced.length ? (i(), n(g, { key: 0 }, [
v.value.selectionSet ? (i(), n("path", {
key: 0,
d: `M${v.value.sliced[0].x},${Math.max(d.value.height, 0)} ${v.value.selectionSet} L${v.value.sliced[v.value.sliced.length - 1].x},${Math.max(d.value.height, 0)}Z`,
fill: `url(#${be.value})`,
stroke: "none",
style: { opacity: "1" }
}, null, 8, $l)) : c("", !0),
v.value.selectionSet ? (i(), n("path", {
key: 1,
d: `M ${v.value.selectionSet}`,
stroke: `${o.minimapLineColor}`,
fill: "transparent",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Ll)) : c("", !0)
], 64)) : c("", !0),
v.value && v.value.firstPlot ? (i(), n("circle", {
key: 1,
cx: v.value.firstPlot.x,
cy: v.value.firstPlot.y,
"stroke-width": "0.5",
stroke: f.value,
r: "3",
fill: o.minimapLineColor
}, null, 8, Fl)) : c("", !0),
v.value && v.value.lastPlot ? (i(), n("circle", {
key: 2,
cx: v.value.lastPlot.x,
cy: v.value.lastPlot.y,
"stroke-width": "0.5",
stroke: f.value,
r: "3",
fill: o.minimapLineColor
}, null, 8, Rl)) : c("", !0)
])) : (i(), n("g", Al, [
(i(!0), n(g, null, S(E.value.filter((e) => e.type === "bar"), (e, u) => (i(), n("g", null, [
(i(!0), n(g, null, S(e.points, (r, m) => (i(), n(g, null, [
e && e.isVisible && !isNaN(r.y) ? (i(), n("rect", {
key: 0,
x: je(r.x, u, m),
y: r.v >= 0 ? r.y : r.y0,
width: qe(u, m),
height: r.v >= 0 ? r.y0 - r.y : r.y - r.y0,
fill: e.color,
style: F({ opacity: m >= ee.value && m < te.value ? 1 : 0 })
}, null, 12, El)) : c("", !0)
], 64))), 256))
]))), 256)),
(i(!0), n(g, null, S(E.value.filter((e) => e.type === "line"), (e) => (i(), n("g", {
key: String(e.key)
}, [
e && e.hasSelection && e.selectionSet && e.isVisible ? (i(), n("path", {
key: 0,
d: `M ${e.selectionSet}`,
stroke: e.color,
fill: "transparent",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Bl)) : c("", !0)
]))), 128)),
(i(!0), n(g, null, S(E.value.filter((e) => e.type === "plot"), (e) => (i(), n("g", {
key: String(e.key)
}, [
(i(!0), n(g, null, S(e.points, (u) => (i(), n("g", null, [
e.isVisible && u.value !== null ? (i(), n("circle", {
key: 0,
cx: u.x,
cy: u.y,
r: "2",
fill: e.color,
stroke: f.value,
"stroke-width": "0.5",
style: { opacity: "0.6" }
}, null, 8, Tl)) : c("", !0)
]))), 256))
]))), 128))
]))
], 64)),
t.$slots.slotMap ? vt(t.$slots, "slotMap", ht(dt({ key: 4 }, {
width: Math.max(0, d.value.width),
height: Math.max(0, d.value.height),
zeroY: Le.value,
unitW: Math.max(0, M.value)
})), void 0, !0) : c("", !0),
k.value && o.minimapCompact ? (i(), n("rect", {
key: 5,
class: "vue-ui-zoom-compact-minimap-handle",
x: N.value.x - 8,
y: 0,
width: 8,
height: d.value.height,
fill: f.value,
stroke: o.textColor,
rx: 3
}, null, 8, Il)) : c("", !0),
k.value && o.minimapCompact ? (i(), n("rect", {
key: 6,
class: "vue-ui-zoom-compact-minimap-handle",
x: N.value.x + N.value.width,
y: 0,
width: 8,
height: d.value.height,
fill: f.value,
stroke: o.textColor,
rx: 3
}, null, 8, Vl)) : c("", !0),
B.value !== null && !z.value ? (i(), n("line", ht(dt({ key: 7 }, qt.value)), null, 16)) : c("", !0),
t.$slots.slotMap ? c("", !0) : (i(), n(g, { key: 8 }, [
o.minimapMerged ? (i(), n("g", Dl, [
v.value && v.value.firstPlot && v.value.firstPlot.value !== null ? (i(), n("circle", {
key: 0,
cx: v.value.firstPlot.x,
cy: v.value.firstPlot.y,
"stroke-width": "0.5",
stroke: f.value,
r: "4",
fill: o.minimapLineColor
}, null, 8, zl)) : c("", !0),
v.value && v.value.firstPlot && v.value.firstPlot.value !== null ? (i(), n("circle", {
key: 1,
cx: v.value.firstPlot.x,
cy: v.value.firstPlot.y,
r: 2,
fill: f.value
}, null, 8, Wl)) : c("", !0),
v.value && v.value.lastPlot && v.value.lastPlot.value !== null ? (i(), n("circle", {
key: 2,
cx: v.value.lastPlot.x,
cy: v.value.lastPlot.y,
"stroke-width": "0.5",
stroke: f.value,
r: "4",
fill: o.minimapLineColor
}, null, 8, Hl)) : c("", !0),
v.value && v.value.lastPlot && v.value.lastPlot.value !== null ? (i(), n("circle", {
key: 3,
cx: v.value.lastPlot.x,
cy: v.value.lastPlot.y,
r: "2",
fill: f.value
}, null, 8, Xl)) : c("", !0)
])) : (i(), n("g", Zl, [
(i(!0), n(g, null, S(E.value.filter((e) => e.type === "line"), (e) => (i(), n("g", {
key: String(e.key)
}, [
e && e.hasSelection && e.selectionSet && e.isVisible ? (i(), n("path", {
key: 0,
d: `M ${e.selectionSet}`,
stroke: e.color,
fill: "transparent",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Ol)) : c("", !0),
e.isVisible && o.cutNullValues ? (i(!0), n(g, { key: 1 }, S(e.selectionMarkers, (u) => (i(), n("circle", {
key: `sel-dot-${e.key}-${u.i}`,
cx: u.x,
cy: u.y,
r: "2.5",
fill: e.color,
stroke: f.value,
"stroke-width": "0.5"
}, null, 8, Ul))), 128)) : c("", !0),
e && e.firstPlot && e.isVisible && e.firstPlot.value !== null ? (i(), n("circle", {
key: 2,
cx: e.firstPlot.x,
cy: e.firstPlot.y,
"stroke-width": "0.5",
stroke: f.value,
r: "4",
fill: e.color
}, null, 8, Kl)) : c("", !0),
e && e.firstPlot && e.isVisible && e.firstPlot.value !== null ? (i(), n("circle", {
key: 3,
cx: e.firstPlot.x,
cy: e.firstPlot.y,
r: "2",
fill: f.value
}, null, 8, Yl)) : c("", !0),
e && e.lastPlot && e.isVisible && e.lastPlot.value !== null ? (i(), n("circle", {
key: 4,
cx: e.lastPlot.x,
cy: e.lastPlot.y,
"stroke-width": "0.5",
stroke: f.value,
r: "4",
fill: e.color
}, null, 8, jl)) : c("", !0),
e && e.lastPlot && e.isVisible && e.lastPlot.value !== null ? (i(), n("circle", {
key: 5,
cx: e.lastPlot.x,
cy: e.lastPlot.y,
r: "2",
fill: f.value
}, null, 8, ql)) : c("", !0)
]))), 128)),
(i(!0), n(g, null, S(E.value.filter((e) => e.type === "plot"), (e) => (i(), n("g", {
key: String(e.key)
}, [
(i(!0), n(g, null, S(e.points, (u) => (i(), n("g", null, [
e.isVisible && o.cutNullValues && u.value !== null ? (i(), n("circle", {
key: `sel-plot-${e.key}-${u.i}`,
cx: u.x,
cy: u.y,
r: "2.5",
fill: e.color,
stroke: f.value,
"stroke-width": "0.5"
}, null, 8, Gl)) : c("", !0)
]))), 256))
]))), 128))
]))
], 64)),
(i(!0), n(g, null, S(Oe.value, (e, u) => (i(), n("rect", {
x: M.value * u - (o.minimapCompact ? M.value / 2 : 0),
y: 0,
height: Math.max(d.value.height, 0),
width: M.value < 0 ? 0 : M.value,
fill: "transparent",
style: F([{ "pointer-events": "all !important" }, { cursor: e >= X.value && e < j.value && o.enableSelectionDrag ? z.value ? "grabbing" : "grab" : "default" }]),
onMousedown: l[0] || (l[0] = (r) => z.value = !0),
onMouseup: l[1] || (l[1] = (r) => z.value = !1),
onMouseenter: (r) => It(e),
onMouseleave: l[2] || (l[2] = (r) => {
B.value = null, A("trapMouse", null);
})
}, null, 44, Jl))), 256))
], 8, hl))
])) : c("", !0),
$("div", {
class: "slider-track",
style: F({ visibility: k.value && o.minimapCompact ? "hidden" : "visible" })
}, null, 4),
$("div", {
class: _({ "range-highlight": !0, move: o.enableSelectionDrag }),
onMousedown: l[3] || (l[3] = (e) => z.value = !0),
onMouseup: l[4] || (l[4] = (e) => z.value = !1),
style: F({
...L.value,
cursor: z.value ? "grabbing" : "grab",
visibility: k.value && o.minimapCompact ? "hidden" : "visible"
})
}, null, 38),
o.enableRangeHandles ? mt((i(), n("input", {
key: 1,
ref_key: "rangeStart",
ref: le,
type: "range",
class: _({
"range-left": !0,
"range-handle": !0,
"range-minimap": k.value && o.verticalHandles,
"range-invisible": k.value && o.minimapCompact
}),
min: o.min,
max: o.minimapCompact && k.value ? Math.max(0, Y.value - 1) : o.max,
"onUpdate:modelValue": l[5] || (l[5] = (e) => he.value = e),
onInput: l[6] || (l[6] = (e) => he.value = e.target.valueAsNumber),
onChange: R,
onKeyup: ft(R, ["enter"]),
onBlur: R,
onMouseenter: l[7] || (l[7] = (e) => ot("start")),
onPointerup: R
}, null, 42, Ql)), [
[
gt,
he.value,
void 0,
{ number: !0 }
]
]) : c("", !0),
o.enableRangeHandles ? mt((i(), n("input", {
key: 2,
ref_key: "rangeEnd",
ref: ae,
type: "range",
class: _({
"range-right": !0,
"range-handle": !0,
"range-minimap": k.value && o.verticalHandles,
"range-invisible": k.value && o.minimapCompact
}),
min: o.min,
max: o.minimapCompact && k.value ? Math.max(0, Y.value - 1) : o.max,
"onUpdate:modelValue": l[8] || (l[8] = (e) => de.value = e),
onInput: l[9] || (l[9] = (e) => de.value = e.target.valueAsNumber),
onChange: R,
onKeyup: ft(R, ["enter"]),
onBlur: R,
onMouseenter: l[10] || (l[10] = (e) => ot("end")),
onPointerup: R
}, null, 42, _l)), [
[
gt,
de.value,
void 0,
{ number: !0 }
]
]) : c("", !0),
w.value.left ? (i(), n("div", {
key: 3,
ref_key: "tooltipLeft",
ref: ie,
class: _({
"range-tooltip": !0,
"range-tooltip-visible": J.value,
"range-tooltip-arrow": L.value.arrowLeft && !o.verticalHandles,
"range-tooltip-arrow-left": !L.value.arrowLeft && !o.verticalHandles
}),
style: F({
left: L.value.tooltipLeft,
color: pe(ze)(o.selectColor),
backgroundColor: o.selectColor,
border: `1px solid ${f.value}`,
zIndex: `${ut.value + 4}`,
visibility: re.value || w.value.left === w.value.right ? "hidden" : "visible",
top: k.value && o.minimapCompact ? "calc(-100% - 12px)" : "-100%"
})
}, De(w.value.left), 7)) : c("", !0),
(re.value || w.value.left === w.value.right) && (w.value.left || w.value.right) ? (i(), n("div", {
key: 4,
ref: "tooltipMerge",
class: _({
"range-tooltip": !0,
"range-tooltip-visible": J.value,
"range-tooltip-arrow": !0,
"range-tooltip-arrow-left": !L.value.arrowLeft && !o.verticalHandles,
"range-tooltip-arrow-right": !L.value.arrowRight && !o.verticalHandles
}),
style: F({
left: L.value.tooltipCenter,
width: se.value.width + "px",
color: pe(ze)(o.selectColor),
backgroundColor: o.selectColor,
border: `1px solid ${f.value}`,
zIndex: "4",
top: k.value && o.minimapCompact ? "calc(-100% - 12px)" : "-100%"
})
}, De(w.value.left === w.value.right ? w.value.left : `${w.value.left} - ${w.value.right}`), 7)) : c("", !0),
w.value.right ? (i(), n("div", {
key: 5,
ref_key: "tooltipRight",
ref: ue,
class: _({
"range-tooltip": !0,
"range-tooltip-visible": J.value,
"range-tooltip-arrow": L.value.arrowRight && !o.verticalHandles,
"range-tooltip-arrow-right": !L.value.arrowRight && !o.verticalHandles
}),
style: F({
left: L.value.tooltipRight,
color: pe(ze)(o.selectColor),
backgroundColor: o.selectColor,
border: `1px solid ${f.value}`,
zIndex: "4",
visibility: re.value || w.value.left === w.value.right ? "hidden" : "visible",
top: k.value && o.minimapCompact ? "calc(-100% - 12px)" : "-100%"
})
}, De(w.value.right), 7)) : c("", !0)
], 544)
], 544));
}
}, ua = /* @__PURE__ */ sl(ea, [["__scopeId", "data-v-a272ba4a"]]);
export {
ua as S
};