vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,164 lines (1,163 loc) • 36 kB
JavaScript
import { Ct as e, H as t, I as n, P as r, V as i, Yt as a, q as o, r as s, t as ee } from "./lib-Bttd6u5E.js";
import { t as c } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { i as te, l, t as ne } from "./useResponsive-ZtArZtUf.js";
import { t as re } from "./BaseIcon-BfndwIWE.js";
import { t as ie } from "./DefGrad-DVBqDjhO.js";
import { Fragment as u, computed as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as ae, mergeProps as oe, nextTick as se, normalizeClass as h, normalizeProps as ce, normalizeStyle as g, onBeforeUnmount as le, onMounted as ue, onUpdated as de, openBlock as _, ref as v, renderList as y, renderSlot as fe, toDisplayString as pe, unref as me, useCssVars as he, vModelText as ge, watch as b, withDirectives as _e } from "vue";
//#region src/atoms/Slicer.vue
var ve = ["data-minimap"], ye = {
class: "vue-data-ui-slicer-labels",
style: {
position: "relative",
"z-index": "1",
"pointer-events": "none"
}
}, be = {
key: 0,
style: {
width: "100%",
position: "relative",
"pointer-events": "all"
}
}, xe = {
key: 0,
class: "minimap",
style: { width: "100%" }
}, Se = ["xmlns", "viewBox"], Ce = [
"width",
"height",
"stroke"
], we = ["d", "stroke"], Te = [
"x",
"width",
"y",
"height",
"fill"
], Ee = ["d", "stroke"], De = [
"cx",
"cy",
"fill",
"stroke"
], Oe = [
"x",
"width",
"height",
"fill",
"rx"
], ke = [
"x",
"width",
"height",
"rx",
"fill"
], Ae = [
"x",
"width",
"height",
"fill",
"rx"
], je = [
"x2",
"y1",
"y2",
"stroke"
], Me = ["d", "fill"], Ne = ["d", "stroke"], Pe = { key: 6 }, Fe = [
"x",
"width",
"y",
"height",
"fill"
], Ie = ["d", "stroke"], Le = [
"x",
"width",
"height",
"fill",
"stroke",
"stroke-width"
], Re = [
"x",
"width",
"height"
], ze = ["fill", "stroke"], Be = ["stroke"], Ve = ["fill"], He = [
"x",
"width",
"height",
"fill",
"stroke",
"stroke-width"
], Ue = [
"x",
"width",
"height"
], We = ["fill", "stroke"], Ge = ["stroke"], Ke = ["fill"], qe = [
"cx",
"cy",
"stroke",
"fill"
], Je = [
"cx",
"cy",
"fill"
], Ye = [
"cx",
"cy",
"stroke",
"fill"
], Xe = [
"cx",
"cy",
"fill"
], Ze = { key: 12 }, Qe = [
"cx",
"cy",
"fill",
"stroke"
], $e = [
"cx",
"cy",
"stroke",
"fill"
], et = [
"cx",
"cy",
"fill"
], tt = [
"cx",
"cy",
"stroke",
"fill"
], nt = [
"cx",
"cy",
"fill"
], rt = [
"height",
"x",
"width",
"onMouseenter"
], it = ["min", "max"], at = ["min", "max"], ot = 48, st = /*#__PURE__*/ c({
__name: "Slicer",
props: {
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: .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
},
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: .1
},
maxWidth: {
type: Number,
default: null
},
minimapLeftInsetRatio: {
type: Number,
default: null
},
minimapRightInsetRatio: {
type: Number,
default: null
},
isCursorPointer: {
type: Boolean,
default: !1
},
additionalMinimapHeight: {
type: Number,
default: 0
},
handleType: {
type: String,
default: ""
},
handleWidth: {
type: Number,
default: 20
},
handleBorderWidth: {
type: Number,
default: 1
},
handleIconColor: {
type: String,
default: null
},
handleBorderColor: {
type: String,
default: null
},
handleFill: {
type: String,
default: null
}
},
emits: [
"update:start",
"update:end",
"reset",
"trapMouse"
],
setup(c, { expose: st, emit: ct }) {
he((e) => ({
v9125c8a2: Tt.value,
v4f62a423: j.value,
edb76958: Dt.value,
v2f97e553: c.selectColor,
v22e36e61: Et.value
}));
let x = c, S = v(null), C = v(x.min), w = v(x.max), T = d(() => !!x.allMinimaps.length), lt = d(() => e(x.minimapLeftInsetRatio) && e(x.minimapRightInsetRatio)), ut = d(() => {
let e = Math.min(1, Math.max(0, x.minimapLeftInsetRatio)) * 100, t = Math.min(1, Math.max(0, x.minimapRightInsetRatio)) * 100;
return {
padding: lt.value ? `0 ${t}% 0 ${e}%` : "0 48px",
maxWidth: x.maxWidth && !lt.value ? `${x.maxWidth}px` : void 0,
margin: x.maxWidth && !lt.value ? "0 auto" : void 0
};
}), dt = v(o()), E = d(() => T.value && x.minimapCompact), ft = v(0);
ue(() => {
let e = () => {
S.value && (ft.value = S.value.getBoundingClientRect().width);
};
e();
let t = l(e, 50);
window.addEventListener("resize", t), le(() => {
window.removeEventListener("resize", t);
});
});
let pt = d(() => x.refreshEndPoint === null ? x.max : x.refreshEndPoint), D = ct, O = d(() => {
if (E.value) {
let e = Math.max(1, wn.value - 1);
return Ct.value / e * 100;
}
let e = Math.max(1, x.max - x.min);
return (C.value - x.min) / e * 100;
}), mt = d(() => {
if (E.value) {
let e = Math.max(1, wn.value - 1);
return wt.value / e * 100;
}
let e = Math.max(1, x.max - x.min);
return (w.value - x.min) / e * 100;
}), ht = d(() => (O.value + mt.value) / 2), gt = d(() => {
if (!S.value) return !1;
let e = S.value.getBoundingClientRect().width;
return O.value / 100 * e - gn.value / 2 < 0;
}), _t = d(() => {
if (!S.value) return !1;
let e = S.value.getBoundingClientRect().width;
return mt.value / 100 * e + _n.value / 2 > e;
}), k = d(() => {
let e = _t.value ? `calc(${ht.value}% - ${Cn.value.width}px)` : gt.value ? `calc(${ht.value}% - 8px)` : `calc(${ht.value}% - ${Cn.value.width / 2}px)`;
return {
left: `${O.value}%`,
width: `${Math.max(0, mt.value - O.value)}%`,
background: x.selectColor,
tooltipLeft: `calc(${O.value}% - ${gt.value ? 9 : gn.value / 2}px)`,
tooltipRight: `calc(${mt.value}% - ${_t.value ? _n.value - 9 : _n.value / 2}px)`,
tooltipCenter: e,
arrowLeft: !gt.value,
arrowRight: !_t.value
};
}), A = d(() => Math.max(0, (P.value || 1) - 1)), vt = d(() => Math.max(0, (wn.value || 1) - 1));
function yt(e) {
return vt.value === 0 ? 0 : Math.round(e / vt.value * A.value);
}
function bt(e) {
return A.value === 0 ? 0 : Math.round(e / A.value * vt.value);
}
let xt = (e) => Math.floor(x.min + e), St = (e) => Math.ceil(x.min + e), Ct = d({
get() {
return E.value ? yt(Q.value) : Number(C.value);
},
set(e) {
if (E.value) {
let t = Math.round(+e || 0), n = Math.max(0, yt(Math.max(0, $.value - 1))), r = bt(Math.min(Math.max(0, t), n));
H(xt(r));
} else {
let t = Math.round(+e || 0), n = Number(w.value) - 1;
H(Math.min(Math.max(x.min, t), n));
}
}
}), wt = d({
get() {
return E.value ? yt(Math.max(Q.value, $.value - 1)) : Number(w.value);
},
set(e) {
if (E.value) {
let t = Math.round(+e || 0), n = yt(Q.value), r = bt(Math.max(t, n));
U(St(r + 1));
} else {
let t = Math.round(+e || 0), n = Number(C.value) + 1;
U(Math.max(n, Math.min(t, x.max)));
}
}
}), Tt = d(() => x.inputColor), Et = d(() => x.background), Dt = d(() => `${x.selectColor}33`), j = d(() => x.borderColor), Ot = d(() => {
let e = [];
for (let t = 0; t < x.max; t += 1) e.push(t);
return e;
});
function kt() {
D("reset");
}
b(() => x.min, (e) => {
Number(C.value) < Number(e) && (C.value = Number(e)), Number(w.value) < Number(e) && (w.value = Number(e));
}), b(() => x.max, (e) => {
Number(C.value) > Number(e) && (C.value = Number(e)), Number(w.value) > Number(e) && (w.value = Number(e));
});
let At = v(null), M = v({
width: 1,
height: 1
}), N = v(null);
ue(() => {
if (T.value) {
let e = l(() => {
let { width: e, height: t } = ne({ chart: At.value });
M.value.width = e, M.value.height = t - 47;
});
N.value = new ResizeObserver(e), N.value.observe(At.value);
}
}), le(() => {
N.value && N.value.disconnect();
});
let P = d(() => Math.max(...x.allMinimaps.map((e) => e.series.length), x.minimap.length || 0)), F = d(() => {
if (!P.value) return 0;
let e = Math.max(1, P.value - +!!x.minimapCompact);
return M.value.width / e;
}), jt = d(() => {
let e = [];
if (Array.isArray(x.minimap) && x.minimap.length && x.minimapMerged && e.push(...x.minimap.filter(Number.isFinite)), Array.isArray(x.allMinimaps) && x.allMinimaps.length) for (let t of x.allMinimaps) t?.isVisible && Array.isArray(t?.series) && e.push(...t.series.filter(Number.isFinite));
return e.length ? {
min: Math.min(...e),
max: Math.max(...e)
} : {
min: 0,
max: 1
};
}), I = d(() => jt.value.min), L = d(() => jt.value.max), Mt = d(() => I.value < 0 && L.value > 0 || L.value <= 0 ? I.value : 0), Nt = d(() => Math.max(1e-9, Math.max(Math.abs(I.value), Math.abs(L.value)))), Pt = d(() => I.value < 0 && L.value > 0), Ft = (e) => {
let t = Math.max(1, M.value.height);
if (Pt.value) {
let n = Nt.value;
return (1 - (Math.max(-1, Math.min(1, e / n)) + 1) / 2) * t;
}
{
let n = Math.min(0, I.value), r = Math.max(0, L.value);
return t - (e - n) / Math.max(1e-9, r - n) * t;
}
}, It = d(() => Ft(0)), Lt = d(() => x.allMinimaps.length ? x.allMinimaps.filter((e) => e.type === "bar").length : 0), Rt = d(() => F.value / (Lt.value || 1) * .8);
function zt(e, t, n) {
let r = Rt.value, i = Math.max(1, Lt.value), a = P.value - 1;
return n === 0 ? e + r / 2 * t : n === a ? e - r / 2 * (i - t) : e - i * r / 2 + t * r;
}
function Bt(e, t) {
return [0, P.value - 1].includes(t) ? Rt.value / 2 : Rt.value;
}
function Vt(e, t, n) {
let r = (e, t, n) => Math.max(t, Math.min(n, e)), i = 1e-9;
if (t <= 0) {
let t = Math.max(i, 0 - e);
return (r) => n - (r - e) / t * n;
}
if (e >= 0) {
let e = Math.max(i, t - 0);
return (t) => n - (t - 0) / e * n;
}
let a = Math.max(i, Math.max(Math.abs(e), Math.abs(t)));
return (e) => (1 - (r(e / a, -1, 1) + 1) / 2) * n;
}
function Ht(e, a = !1) {
if (!e || !e.length) return {
fullSet: "",
points: [],
selectionSet: "",
sliced: [],
firstPlot: null,
lastPlot: null,
hasFull: !1,
hasSelection: !1,
fullMarkers: [],
selectionMarkers: []
};
let o = Math.max(1, M.value.height), s = Vt(I.value, L.value, o), ee = e.length, c = Math.min(Math.max(0, Q.value), Math.max(0, ee - 1)), te = Math.min(ee, Math.max(c + 1, $.value)), l = e.map((e, t) => {
let n = e, r = Number.isFinite(n), i = F.value * t + (x.minimapCompact ? 0 : F.value / 2), a = s(0);
return {
x: i,
y: r ? s(n) : NaN,
v: n,
value: n == null ? null : r ? n : null,
y0: a,
i: t
};
}), ne = (e) => e >= 0 && e < l.length && Number.isFinite(l[e]?.value), re = l.filter((e) => Number.isFinite(e.value) && !ne(e.i - 1) && !ne(e.i + 1)), ie = re.filter((e) => e.i >= c && e.i < te), u = l.slice(c, te);
return {
fullSet: l.length >= 2 ? x.smoothMinimap || a ? x.cutNullValues ? n(l) : r(l.filter((e) => e.value != null)) : x.cutNullValues ? t(l) : i(l.filter((e) => e.value != null)) : "",
points: l,
selectionSet: u.length >= 2 ? x.smoothMinimap || a ? x.cutNullValues ? n(u) : r(u.filter((e) => e.value != null)) : x.cutNullValues ? t(u) : i(u.filter((e) => e.value != null)) : "",
sliced: u,
firstPlot: l[c] || null,
lastPlot: l[Math.max(0, te - 1)] || null,
hasFull: l.length >= 2,
hasSelection: u.length >= 2,
fullMarkers: re,
selectionMarkers: ie
};
}
let R = d(() => x.minimap.length ? Ht(x.minimap) : {
fullSet: "",
selectionSet: "",
sliced: [],
firstPlot: null,
lastPlot: null,
hasFull: !1,
hasSelection: !1
}), z = d(() => x.allMinimaps.length ? x.allMinimaps.map((e, t) => {
let n = Ht(e?.series || [], !!e.smooth), r = e?.id ?? e?.name ?? t;
return {
key: typeof r == "object" ? JSON.stringify(r) : String(r),
color: e?.color,
...n,
isVisible: e.isVisible,
type: e.type || "line"
};
}) : []), B = d(() => {
let e = Q.value, t = Math.max(e + 1, $.value);
return {
x: F.value * e + (x.minimapCompact ? 0 : F.value / 2),
width: F.value * (t - e) - F.value
};
}), V = v(x.minimapSelectedIndex);
function Ut(e) {
V.value = Tn(x.valueStart) + e;
}
let Wt = te(Ut, 60);
b(() => x.minimapSelectedIndex, (e, t) => {
if ([null, void 0].includes(e)) {
V.value = null;
return;
}
e !== t && Wt(e);
}, { immediate: !0 });
function Gt(e) {
V.value = e;
let t = Q.value, n = $.value;
e >= t && e < n && !Y.value && D("trapMouse", e - t);
}
let Kt = v(null), qt = v(null);
function H(e) {
C.value = e, Kt.value && (Kt.value.value = e), D("update:start", Number(C.value));
}
function U(e) {
w.value = e, qt.value && (qt.value.value = e), D("update:end", Number(w.value));
}
let Jt = d(() => x.valueEnd - x.valueStart), Yt = d(() => Jt.value < x.max - x.min), W = v(!1), Xt = v(null), Zt = d(() => (ft.value - 48) / (x.max - x.min) * Jt.value), Qt = d(() => Math.max(1, ft.value - ot - Zt.value)), $t = d(() => Math.max(1, x.max - x.min - Jt.value)), en = d(() => $t.value / Qt.value), tn = v(0), nn = v(0), rn = v(0), an = v(0), G = null, K = null, q = null, J = null, on = v(x.min);
function sn(e) {
if (!S.value) return x.min;
let t = S.value.getBoundingClientRect(), n = t.left + ot / 2, r = t.right - ot / 2, i = Math.max(1, r - n), a = (Math.max(n, Math.min(e, r)) - n) / i, o = Math.max(1, x.max - x.min);
return Math.round(x.min + a * o);
}
let cn = async (e) => {
if (Z.value = !0, !x.enableSelectionDrag) return;
let t = e.type === "touchstart";
t || e.stopPropagation();
let n = t && e.targetTouches && e.targetTouches[0] ? e.targetTouches[0] : null, r = t ? n ? n.target : null : e.target;
if (!r || !(r instanceof Element) || r.classList && r.classList.contains("range-handle")) return;
W.value = !0;
let i = t ? n ? n.clientX : 0 : e.clientX;
if (Xt.value = i, tn.value = i, x.focusOnDrag && !Yt.value && S.value) {
on.value = sn(i);
let e = Math.min(.95, Math.max(.05, x.focusRangeRatio)), t = x.max - x.min, n = Math.max(1, Math.round(t * e)), r = Math.floor(n / 2), o = on.value - r;
o = Math.max(x.min, Math.min(o, x.max - n));
let s = Math.min(x.max, o + n);
H(o), U(s), a(S.value, "mouseup"), await se(), a(S.value, "mousedown", { clientX: i });
}
nn.value = Number(C.value), rn.value = Number(w.value), an.value = en.value, G = t ? "touchmove" : "mousemove", K = t ? "touchend" : "mouseup", q = t ? un : ln, J = t ? pn : fn, window.addEventListener(G, q, { passive: !1 }), window.addEventListener(K, J);
};
function ln(e) {
W.value && dn(e.clientX);
}
function un(e) {
if (!W.value || !S.value) return;
let t = e.target;
if (!(t instanceof Element) || !S.value.contains(t) || t.classList && t.classList.contains("range-handle")) return;
e.preventDefault();
let n = e.targetTouches && e.targetTouches[0] ? e.targetTouches[0] : null;
n && dn(n.clientX);
}
function dn(e) {
if (!W.value) return;
let t = sn(tn.value), n = sn(e) - t, r = Math.max(1, rn.value - nn.value), i = Math.round(nn.value + n), a = x.min, o = x.max - r;
i < a && (i = a), i > o && (i = o);
let s = i + r;
H(i), U(s);
}
function fn() {
mn();
}
function pn() {
mn();
}
function mn() {
W.value = !1, G && q && window.removeEventListener(G, q), K && J && window.removeEventListener(K, J), G = K = null, q = J = null;
}
let Y = v(!1), X = v(null), hn = v(null), gn = v(1), _n = v(1), Z = v(!1);
function vn() {
X.value && (gn.value = X.value.getBoundingClientRect().width);
}
function yn() {
hn.value && (_n.value = hn.value.getBoundingClientRect().width);
}
let bn = v(0);
function xn(e) {
bn.value = +(e === "start");
}
let Sn = v(!1), Cn = v({
width: 0,
left: 0
});
b([C, w], async () => {
if (await se(), !X.value || !hn.value) {
Sn.value = !1, Cn.value = {
width: 0,
left: 0
};
return;
}
let e = X.value.getBoundingClientRect(), t = hn.value.getBoundingClientRect();
Sn.value = e.x + e.width > t.x;
let n = e.x + e.width / 2, r = t.x + t.width / 2, i = e.width + t.width, a = (n + r) / 2;
Cn.value = {
width: i,
left: a - i / 2
};
}), de(() => {
vn(), yn();
}), b(() => x.labelLeft, () => {
se(vn);
}, { deep: !0 }), b(() => x.labelRight, () => {
se(yn);
}, { deep: !0 }), st({
setStartValue: H,
setEndValue: U
}), le(() => {
N.value && N.value.disconnect(), G && q && window.removeEventListener(G, q), K && J && window.removeEventListener(K, J), G = K = null, q = J = null;
});
let wn = d(() => Math.max(1, x.max - x.min));
function Tn(e) {
let t = Math.floor(e - x.min);
return Math.min(Math.max(0, t), wn.value);
}
function En(e) {
let t = Math.ceil(e - x.min);
return Math.min(Math.max(0, t), wn.value);
}
let Q = d(() => Tn(C.value)), $ = d(() => En(w.value)), Dn = d(() => {
if (!Ot.value.length) return null;
if (V.value >= Q.value && V.value < $.value) {
let e = V.value;
return {
x1: F.value * e + (x.minimapCompact ? 0 : F.value / 2),
x2: F.value * e + (x.minimapCompact ? 0 : F.value / 2),
y1: 0,
y2: Math.max(M.value.height, 0),
stroke: x.minimapIndicatorColor,
"stroke-linecap": "round",
"stroke-dasharray": 2,
"stroke-width": 1
};
}
return null;
});
return (e, t) => (_(), p("div", {
"data-minimap": T.value,
"data-dom-to-png-ignore": "",
"data-dom-to-png-ignore-layout": "",
class: "vue-data-ui-zoom",
ref_key: "zoomWrapper",
ref: S,
onMousedown: cn,
onTouchstart: cn,
onTouchend: t[11] ||= (e) => Z.value = !1,
style: g(ut.value)
}, [m("div", ye, [c.valueStart !== c.refreshStartPoint || c.valueEnd !== pt.value ? (_(), p("div", be, [fe(e.$slots, "reset-action", { reset: kt }, () => [m("button", {
tabindex: "0",
role: "button",
class: "vue-data-ui-refresh-button",
style: g({
top: T.value ? "36px" : "-16px",
cursor: c.isCursorPointer ? "pointer" : "default"
}),
onClick: kt
}, [ae(re, {
name: "refresh",
stroke: c.textColor
}, null, 8, ["stroke"])], 4)], !0)])) : f("", !0)]), m("div", {
class: "double-range-slider",
ref_key: "minimapWrapper",
ref: At,
style: g([{ "z-index": "0" }, T.value ? {
"--minimap-unit-px": F.value + "px",
"--minimap-offset-px": (c.minimapCompact ? 0 : F.value / 2) + "px"
} : void 0]),
onMouseenter: t[9] ||= (e) => Z.value = !0,
onMouseleave: t[10] ||= (e) => Z.value = !1
}, [
T.value ? (_(), p("div", xe, [(_(), p("svg", {
key: `mm-${c.minimapMerged ? "merged" : "split"}-${c.minimapCompact ? "compact" : "normal"}`,
xmlns: me(ee),
viewBox: `0 0 ${Math.max(0, M.value.width)} ${Math.max(0, M.value.height)}`
}, [
m("defs", null, [ae(ie, {
t: "linear",
id: dt.value,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%",
stops: [[
"0%",
c.minimapLineColor,
.31
], [
"100%",
"transparent",
0
]]
}, null, 8, ["id", "stops"])]),
c.minimapCompact ? (_(), p("rect", {
key: 0,
class: "vue-ui-zoom-minimap-frame",
x: 0,
y: 0,
width: M.value.width,
height: M.value.height,
fill: "none",
stroke: c.minimapFrameColor,
rx: 3
}, null, 8, Ce)) : f("", !0),
c.minimapMerged ? (_(), p("path", {
key: 1,
d: `M${R.value.fullSet}`,
stroke: `${c.minimapLineColor}`,
fill: "none",
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: { opacity: "0.6" }
}, null, 8, we)) : (_(), p(u, { key: 2 }, [(_(!0), p(u, null, y(z.value.filter((e) => e.type === "bar"), (e, t) => (_(), p("g", null, [(_(!0), p(u, null, y(e.points, (n, r) => (_(), p(u, null, [e.isVisible && !isNaN(n.y) ? (_(), p("rect", {
key: 0,
x: zt(n.x, t, r),
width: Bt(t, r),
y: n.v >= 0 ? n.y : n.y0,
height: n.v >= 0 ? n.y0 - n.y : n.y - n.y0,
fill: e.color,
style: { opacity: "0.6" }
}, null, 8, Te)) : f("", !0)], 64))), 256))]))), 256)), (_(!0), p(u, null, y(z.value.filter((e) => e.type === "line"), (e) => (_(), p("g", { key: String(e.key) }, [e.isVisible ? (_(), p("path", {
key: 0,
d: `M ${e.fullSet}`,
fill: "none",
stroke: e.color,
style: { opacity: "0.6" }
}, null, 8, Ee)) : f("", !0), e.isVisible ? (_(!0), p(u, { key: 1 }, y(e.fullMarkers, (t) => (_(), p("circle", {
key: `sel-dot-under-${e.key}-${t.i}`,
cx: t.x,
cy: t.y,
r: "2",
fill: e.color,
stroke: j.value,
"stroke-width": "0.5",
style: { opacity: "0.6" }
}, null, 8, De))), 128)) : f("", !0)]))), 128))], 64)),
m("rect", {
x: B.value.x,
width: B.value.width < 0 ? 0 : B.value.width,
height: Math.max(M.value.height, 0),
y: 0,
fill: j.value,
rx: c.minimapSelectionRadius,
stroke: "none"
}, null, 8, Oe),
m("rect", {
x: B.value.x,
width: B.value.width < 0 ? 0 : B.value.width,
height: Math.max(M.value.height, 0),
y: 0,
rx: c.minimapSelectionRadius,
fill: j.value
}, null, 8, ke),
m("rect", {
x: B.value.x,
width: B.value.width < 0 ? 0 : B.value.width,
height: Math.max(M.value.height, 0),
y: 0,
fill: c.minimapSelectedColor,
rx: c.minimapSelectionRadius,
style: g({ opacity: c.minimapSelectedColorOpacity })
}, null, 12, Ae),
V.value !== null && !Y.value ? (_(), p("line", ce(oe({ key: 3 }, Dn.value)), null, 16)) : f("", !0),
!c.minimapMerged && Mt.value < 0 ? (_(), p("line", {
key: 4,
class: "slicer-minimap-zero-line",
x1: 0,
x2: M.value.width,
y1: It.value,
y2: It.value,
stroke: c.minimapFrameColor,
"stroke-width": "0.5"
}, null, 8, je)) : f("", !0),
c.minimapMerged ? (_(), p(u, { key: 5 }, [R.value && R.value.sliced && R.value.sliced.length ? (_(), p(u, { key: 0 }, [R.value.selectionSet ? (_(), p("path", {
key: 0,
d: `M${R.value.sliced[0].x},${Math.max(M.value.height, 0)} ${R.value.selectionSet} L${R.value.sliced[R.value.sliced.length - 1].x},${Math.max(M.value.height, 0)}Z`,
fill: `url(#${dt.value})`,
stroke: "none",
style: { opacity: "1" }
}, null, 8, Me)) : f("", !0), R.value.selectionSet ? (_(), p("path", {
key: 1,
d: `M ${R.value.selectionSet}`,
stroke: `${c.minimapLineColor}`,
fill: "transparent",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Ne)) : f("", !0)], 64)) : f("", !0)], 64)) : (_(), p("g", Pe, [(_(!0), p(u, null, y(z.value.filter((e) => e.type === "bar"), (e, t) => (_(), p("g", null, [(_(!0), p(u, null, y(e.points, (n, r) => (_(), p(u, null, [e.isVisible && !isNaN(n.y) ? (_(), p("rect", {
key: 0,
x: zt(n.x, t, r),
width: Bt(t, r),
y: n.v >= 0 ? n.y : n.y0,
height: n.v >= 0 ? n.y0 - n.y : n.y - n.y0,
fill: e.color,
style: g({ opacity: +(r >= c.valueStart && r <= c.valueEnd - 1) })
}, null, 12, Fe)) : f("", !0)], 64))), 256))]))), 256)), (_(!0), p(u, null, y(z.value.filter((e) => e.type === "line"), (e) => (_(), p("g", { key: String(e.key) }, [e && e.hasSelection && e.selectionSet && e.isVisible ? (_(), p("path", {
key: 0,
d: `M ${e.selectionSet}`,
stroke: e.color,
fill: "transparent",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Ie)) : f("", !0)]))), 128))])),
T.value && c.minimapCompact ? (_(), p("rect", {
key: 7,
class: "vue-ui-zoom-compact-minimap-handle",
x: B.value.x - Math.min(40, Math.max(20, c.handleWidth)),
y: 0,
width: Math.min(40, Math.max(20, c.handleWidth)),
height: M.value.height,
fill: c.handleFill || j.value,
stroke: c.handleBorderColor || c.textColor,
"stroke-width": c.handleBorderWidth,
rx: 3
}, null, 8, Le)) : f("", !0),
c.handleType && c.handleType !== "empty" ? (_(), p("svg", {
key: 8,
x: B.value.x - Math.min(40, Math.max(20, c.handleWidth)),
y: 0,
width: Math.min(40, Math.max(20, c.handleWidth)),
height: M.value.height,
viewBox: "0 0 20 20"
}, [c.handleType === "arrow" ? (_(), p("path", {
key: 0,
d: "M 7 7 L 3 10 L 7 13 L 7 7 M 13 7 L 17 10 L 13 13 L 13 7",
fill: j.value,
stroke: c.handleIconColor || c.textColor,
"stroke-width": .618,
"stroke-linejoin": "round",
"stroke-linecap": "round"
}, null, 8, ze)) : c.handleType === "chevron" ? (_(), p("path", {
key: 1,
d: "M 6 7 L 4 10 L 6 13 M 14 7 L 16 10 L 14 13",
fill: "none",
stroke: c.handleIconColor || c.textColor,
"stroke-width": .618,
"stroke-linejoin": "round",
"stroke-linecap": "round"
}, null, 8, Be)) : c.handleType === "grab" ? (_(), p("path", {
key: 2,
d: "M 8 5 A 1 1 0 0 0 8 7 A 1 1 0 0 0 8 5 M 8 9 A 1 1 0 0 0 8 11 A 1 1 0 0 0 8 9 M 8 13 A 1 1 0 0 0 8 15 A 1 1 0 0 0 8 13 M 12 5 A 1 1 0 0 0 12 7 A 1 1 0 0 0 12 5 M 12 9 A 1 1 0 0 0 12 11 A 1 1 0 0 0 12 9 M 12 13 A 1 1 0 0 0 12 15 A 1 1 0 0 0 12 13",
fill: c.handleIconColor || c.textColor,
stroke: "none",
opacity: "0.6"
}, null, 8, Ve)) : f("", !0)], 8, Re)) : f("", !0),
T.value && c.minimapCompact ? (_(), p("rect", {
key: 9,
class: "vue-ui-zoom-compact-minimap-handle",
x: B.value.x + B.value.width,
y: 0,
width: Math.min(40, Math.max(20, c.handleWidth)),
height: M.value.height,
fill: c.handleFill || j.value,
stroke: c.handleBorderColor || c.textColor,
"stroke-width": c.handleBorderWidth,
rx: 3
}, null, 8, He)) : f("", !0),
c.handleType && c.handleType !== "empty" ? (_(), p("svg", {
key: 10,
x: B.value.x + B.value.width,
y: 0,
width: Math.min(40, Math.max(20, c.handleWidth)),
height: M.value.height,
viewBox: "0 0 20 20"
}, [c.handleType === "arrow" ? (_(), p("path", {
key: 0,
d: "M 7 7 L 3 10 L 7 13 L 7 7 M 13 7 L 17 10 L 13 13 L 13 7",
fill: j.value,
stroke: c.handleIconColor || c.textColor,
"stroke-width": .618,
"stroke-linejoin": "round",
"stroke-linecap": "round"
}, null, 8, We)) : c.handleType === "chevron" ? (_(), p("path", {
key: 1,
d: "M 6 7 L 4 10 L 6 13 M 14 7 L 16 10 L 14 13",
fill: "none",
stroke: c.handleIconColor || c.textColor,
"stroke-width": .618,
"stroke-linejoin": "round",
"stroke-linecap": "round"
}, null, 8, Ge)) : c.handleType === "grab" ? (_(), p("path", {
key: 2,
d: "M 8 5 A 1 1 0 0 0 8 7 A 1 1 0 0 0 8 5 M 8 9 A 1 1 0 0 0 8 11 A 1 1 0 0 0 8 9 M 8 13 A 1 1 0 0 0 8 15 A 1 1 0 0 0 8 13 M 12 5 A 1 1 0 0 0 12 7 A 1 1 0 0 0 12 5 M 12 9 A 1 1 0 0 0 12 11 A 1 1 0 0 0 12 9 M 12 13 A 1 1 0 0 0 12 15 A 1 1 0 0 0 12 13",
fill: c.handleIconColor || c.textColor,
stroke: "none",
opacity: "0.6"
}, null, 8, Ke)) : f("", !0)], 8, Ue)) : f("", !0),
c.minimapMerged ? (_(), p(u, { key: 11 }, [
R.value && R.value.firstPlot && R.value.firstPlot.value !== null ? (_(), p("circle", {
key: 0,
cx: R.value.firstPlot.x,
cy: R.value.firstPlot.y,
"stroke-width": "0.5",
stroke: j.value,
r: "4",
fill: c.minimapLineColor
}, null, 8, qe)) : f("", !0),
R.value && R.value.firstPlot && R.value.firstPlot.value !== null ? (_(), p("circle", {
key: 1,
cx: R.value.firstPlot.x,
cy: R.value.firstPlot.y,
r: "2",
fill: j.value
}, null, 8, Je)) : f("", !0),
R.value && R.value.lastPlot && R.value.lastPlot.value !== null ? (_(), p("circle", {
key: 2,
cx: R.value.lastPlot.x,
cy: R.value.lastPlot.y,
"stroke-width": "0.5",
stroke: j.value,
r: "4",
fill: c.minimapLineColor
}, null, 8, Ye)) : f("", !0),
R.value && R.value.lastPlot && R.value.lastPlot.value !== null ? (_(), p("circle", {
key: 3,
cx: R.value.lastPlot.x,
cy: R.value.lastPlot.y,
r: "2",
fill: j.value
}, null, 8, Xe)) : f("", !0)
], 64)) : (_(), p("g", Ze, [(_(!0), p(u, null, y(z.value.filter((e) => e.type === "line"), (e) => (_(), p("g", { key: String(e.key) }, [
e.isVisible ? (_(!0), p(u, { key: 0 }, y(e.selectionMarkers, (t) => (_(), p("circle", {
key: `sel-dot-${e.key}-${t.i}`,
cx: t.x,
cy: t.y,
r: "2.5",
fill: e.color,
stroke: j.value,
"stroke-width": "0.5"
}, null, 8, Qe))), 128)) : f("", !0),
e && e.firstPlot && e.isVisible && e.firstPlot.value !== null ? (_(), p("circle", {
key: 1,
cx: e.firstPlot.x,
cy: e.firstPlot.y,
"stroke-width": "0.5",
stroke: j.value,
r: "4",
fill: e.color
}, null, 8, $e)) : f("", !0),
e && e.firstPlot && e.isVisible && e.firstPlot.value !== null ? (_(), p("circle", {
key: 2,
cx: e.firstPlot.x,
cy: e.firstPlot.y,
r: "2",
fill: j.value
}, null, 8, et)) : f("", !0),
e && e.lastPlot && e.isVisible && e.lastPlot.value !== null ? (_(), p("circle", {
key: 3,
cx: e.lastPlot.x,
cy: e.lastPlot.y,
"stroke-width": "0.5",
stroke: j.value,
r: "4",
fill: e.color
}, null, 8, tt)) : f("", !0),
e && e.lastPlot && e.isVisible && e.lastPlot.value !== null ? (_(), p("circle", {
key: 4,
cx: e.lastPlot.x,
cy: e.lastPlot.y,
r: "2",
fill: j.value
}, null, 8, nt)) : f("", !0)
]))), 128))])),
(_(!0), p(u, null, y(Ot.value, (e, n) => (_(), p("rect", {
key: `trap-${n}`,
y: 0,
height: Math.max(M.value.height, 0),
fill: "transparent",
style: g([{ "pointer-events": "all !important" }, { cursor: e >= Q.value && e < $.value && c.enableSelectionDrag ? Y.value ? "grabbing" : "grab" : "default" }]),
x: F.value * n - (c.minimapCompact ? F.value / 2 : 0),
width: F.value < 0 ? 0 : F.value,
onMousedown: t[0] ||= (e) => Y.value = !0,
onMouseup: t[1] ||= (e) => Y.value = !1,
onMouseenter: (t) => Gt(e),
onMouseleave: t[2] ||= (e) => {
V.value = null, D("trapMouse", null);
}
}, null, 44, rt))), 128))
], 8, Se))])) : f("", !0),
m("div", {
class: "slider-track",
style: g({ visibility: T.value && c.minimapCompact ? "hidden" : "visible" })
}, null, 4),
m("div", {
class: h({
"range-highlight": !0,
move: c.enableSelectionDrag
}),
onMousedown: t[3] ||= (e) => Y.value = !0,
onMouseup: t[4] ||= (e) => Y.value = !1,
style: g({
...k.value,
cursor: Y.value ? "grabbing" : "grab",
visibility: T.value && c.minimapCompact ? "hidden" : "visible"
})
}, null, 38),
c.enableRangeHandles ? _e((_(), p("input", {
key: 1,
ref_key: "rangeStart",
ref: Kt,
type: "range",
class: h({
"range-left": !0,
"range-handle": !0,
"range-minimap": T.value && c.verticalHandles,
"range-invisible": T.value && c.minimapCompact
}),
min: c.min,
max: E.value && c.minimapCompact ? A.value : c.max,
step: 1,
"onUpdate:modelValue": t[5] ||= (e) => Ct.value = e,
onMouseenter: t[6] ||= (e) => xn("start")
}, null, 42, it)), [[
ge,
Ct.value,
void 0,
{ number: !0 }
]]) : f("", !0),
c.enableRangeHandles ? _e((_(), p("input", {
key: 2,
ref_key: "rangeEnd",
ref: qt,
type: "range",
class: h({
"range-right": !0,
"range-handle": !0,
"range-minimap": T.value && c.verticalHandles,
"range-invisible": T.value && c.minimapCompact
}),
min: c.min,
max: E.value && c.minimapCompact ? A.value : c.max,
step: 1,
"onUpdate:modelValue": t[7] ||= (e) => wt.value = e,
onMouseenter: t[8] ||= (e) => xn("end")
}, null, 42, at)), [[
ge,
wt.value,
void 0,
{ number: !0 }
]]) : f("", !0),
c.labelLeft ? (_(), p("div", {
key: 3,
ref_key: "tooltipLeft",
ref: X,
class: h({
"range-tooltip": !0,
"range-tooltip-visible": Z.value,
"range-tooltip-arrow": k.value.arrowLeft && !c.verticalHandles,
"range-tooltip-arrow-left": !k.value.arrowLeft && !c.verticalHandles
}),
style: g({
left: k.value.tooltipLeft,
color: me(s)(c.selectColor),
backgroundColor: c.selectColor,
border: `1px solid ${j.value}`,
zIndex: `${bn.value + 4}`,
visibility: Sn.value || c.labelLeft === c.labelRight ? "hidden" : "visible",
top: T.value && c.minimapCompact ? "calc(-100% - 18px)" : "-100%"
})
}, pe(c.labelLeft), 7)) : f("", !0),
(Sn.value || c.labelLeft === c.labelRight) && (c.labelLeft || c.labelRight) ? (_(), p("div", {
key: 4,
ref: "tooltipMerge",
class: h({
"range-tooltip": !0,
"range-tooltip-visible": Z.value,
"range-tooltip-arrow": !0,
"range-tooltip-arrow-left": !k.value.arrowLeft && !c.verticalHandles,
"range-tooltip-arrow-right": !k.value.arrowRight && !c.verticalHandles
}),
style: g({
left: k.value.tooltipCenter,
width: Cn.value.width + "px",
color: me(s)(c.selectColor),
backgroundColor: c.selectColor,
border: `1px solid ${j.value}`,
zIndex: "4",
top: T.value && c.minimapCompact ? "calc(-100% - 18px)" : "-100%"
})
}, pe(c.labelLeft === c.labelRight ? c.labelLeft : `${c.labelLeft} - ${c.labelRight}`), 7)) : f("", !0),
c.labelRight ? (_(), p("div", {
key: 5,
ref_key: "tooltipRight",
ref: hn,
class: h({
"range-tooltip": !0,
"range-tooltip-visible": Z.value,
"range-tooltip-arrow": k.value.arrowRight && !c.verticalHandles,
"range-tooltip-arrow-right": !k.value.arrowRight && !c.verticalHandles
}),
style: g({
left: k.value.tooltipRight,
color: me(s)(c.selectColor),
backgroundColor: c.selectColor,
border: `1px solid ${j.value}`,
zIndex: "4",
visibility: Sn.value || c.labelLeft === c.labelRight ? "hidden" : "visible",
top: T.value && c.minimapCompact ? "calc(-100% - 18px)" : "-100%"
})
}, pe(c.labelRight), 7)) : f("", !0)
], 36)], 44, ve));
}
}, [["__scopeId", "data-v-cdd352c4"]]);
//#endregion
export { st as t };