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