vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
603 lines (602 loc) • 21.5 kB
JavaScript
import { useCssVars as Oe, computed as v, ref as i, onMounted as he, onBeforeUnmount as te, watch as T, nextTick as le, onUpdated as Ze, createElementBlock as c, openBlock as m, createElementVNode as d, createCommentVNode as w, renderSlot as je, normalizeStyle as M, createVNode as Ge, withDirectives as ge, unref as U, Fragment as be, renderList as xe, normalizeClass as B, vModelText as ye, toDisplayString as ae } from "vue";
import qe from "./BaseIcon-CCivwZUq.js";
import { t as we, u as Je } from "./useResponsive-DfdjqQps.js";
import { c as Ke, V as pe, U as Se, X as Qe, F as ne } from "./index-q-LPw2IT.js";
import { _ as Ye } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const _e = {
class: "vue-data-ui-slicer-labels",
style: { position: "relative", "z-index": "1", "pointer-events": "none" }
}, et = {
key: 0,
style: { width: "100%", position: "relative" }
}, tt = {
key: 0,
class: "minimap",
style: { width: "100%" }
}, lt = ["xmlns", "viewBox"], at = ["id"], nt = ["stop-color"], it = ["d", "stroke"], ut = ["x", "width", "height", "fill", "rx"], ot = ["d", "fill"], rt = ["x", "width", "height", "rx", "fill"], st = ["x", "width", "height", "fill", "rx"], vt = ["d", "fill"], dt = ["d", "stroke"], ct = ["cx", "cy", "stroke", "fill"], mt = ["cx", "cy", "stroke", "fill"], ft = ["x1", "x2", "y2", "stroke"], ht = ["x", "height", "width", "onMouseenter"], gt = ["min", "max"], bt = ["min", "max"], xt = {
__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
}
},
emits: ["update:start", "update:end", "reset", "trapMouse"],
setup(l, { expose: Ce, emit: ke }) {
Oe((t) => ({
"612d7222": Le.value,
"0dba0ad4": p.value,
"038e80f2": Me.value,
"4d4f8874": l.selectColor,
a2455958: Re.value
}));
const a = l, h = i(null), r = i(a.min), s = i(a.max), D = v(() => !!a.minimap.length), O = i(Ke()), V = i(0);
he(() => {
const t = () => {
h.value && (V.value = h.value.getBoundingClientRect().width);
};
t();
const e = we(t, 50);
window.addEventListener("resize", e), te(() => {
window.removeEventListener("resize", e);
});
});
const $e = v(() => a.refreshEndPoint === null ? a.max : a.refreshEndPoint), L = ke, g = v(() => {
const t = a.max - a.min, e = (r.value - a.min) / t * 100, n = (s.value - a.min) / t * 100, o = (e + n) / 2, x = j.value ? `calc(${o}% - ${H.value.width}px)` : Z.value ? `calc(${o}%)` : `calc(${o}% - ${H.value.width / 2}px)`;
return {
left: `${e}%`,
width: `${n - e}%`,
background: a.selectColor,
tooltipLeft: `calc(${e}% - ${Z.value ? 0 : ee.value / 2}px)`,
tooltipRight: `calc(${n}% - ${j.value ? X.value : X.value / 2}px)`,
tooltipCenter: x,
arrowLeft: !Z.value,
arrowRight: !j.value
};
}), Z = v(() => h.value ? h.value.getBoundingClientRect().width * ((r.value - a.min) / (a.max - a.min)) - ee.value / 2 < 0 : !1), j = v(() => h.value ? h.value.getBoundingClientRect().width * ((s.value - a.min) / (a.max - a.min)) + X.value / 2 > h.value.getBoundingClientRect().width : !1), Le = v(() => a.inputColor), Re = v(() => a.background), Me = v(() => `${a.selectColor}33`), p = v(() => a.borderColor), ie = v(() => {
const t = [];
for (let e = 0; e < a.minimap.length; e += 1)
t.push(e);
return t;
});
function ue() {
L("reset");
}
function Ne() {
Number(r.value) > Number(s.value) - 1 && (r.value = Number(s.value) - 1), L("update:start", Number(r.value));
}
function Ee() {
Number(s.value) < Number(r.value) + 1 && (s.value = Number(r.value) + 1), L("update:end", Number(s.value));
}
T(
() => a.min,
(t) => {
Number(r.value) < Number(t) && (r.value = Number(t)), Number(s.value) < Number(t) && (s.value = Number(t));
}
), T(
() => a.max,
(t) => {
Number(r.value) > Number(t) && (r.value = Number(t)), Number(s.value) > Number(t) && (s.value = Number(t));
}
);
const G = i(null), u = i({
width: 1,
height: 1
}), N = i(null);
he(() => {
if (D.value) {
const t = we(() => {
const { width: e, height: n } = Je({
chart: G.value
});
u.value.width = e, u.value.height = n - 47;
});
N.value = new ResizeObserver(t), N.value.observe(G.value);
}
}), te(() => {
N.value && N.value.disconnect();
});
const f = v(() => a.minimap.length ? u.value.width / a.minimap.length : 0), b = v(() => {
if (!a.minimap.length) return [];
const t = Math.max(...a.minimap), e = Math.min(...a.minimap) - 10, n = t - (e > 0 ? 0 : e), o = a.minimap.map((Ve, Xe) => {
const Ue = Ve - e;
return {
x: u.value.width / a.minimap.length * Xe + f.value / 2,
y: u.value.height - Ue / n * (u.value.height * 0.9)
};
}), x = a.smoothMinimap ? pe(o) : Se(o), W = [...o].slice(a.valueStart, a.valueEnd), We = a.smoothMinimap ? pe(W) : Se(W);
return {
fullSet: x,
selectionSet: We,
sliced: W,
firstPlot: o[a.valueStart],
lastPlot: o[a.valueEnd - 1]
};
}), y = v(() => ({
x: f.value * r.value + f.value / 2,
width: u.value.width * ((s.value - r.value) / a.max) - f.value
})), z = i(a.minimapSelectedIndex);
T(
() => a.minimapSelectedIndex,
(t) => {
z.value = t + a.valueStart;
},
{ immediate: !0 }
);
function Te(t) {
z.value = t, t >= a.valueStart && t < a.valueEnd && L("trapMouse", t - a.valueStart);
}
const Be = i(0), q = i(null), J = i(null);
function K(t) {
r.value = t, q.value && (q.value.value = t), L("update:start", Number(r.value));
}
function Q(t) {
s.value = t, J.value && (J.value.value = t), L("update:end", Number(s.value));
}
const Y = v(() => a.valueEnd - a.valueStart), I = i(!1);
let _ = i(null);
const De = v(() => (V.value - 48) / (a.max - a.min)), ze = v(() => (V.value - 48) / (a.max - a.min) * Y.value), Ie = i(2.5), oe = v(() => {
const t = V.value - 48;
return Math.ceil((a.max - a.min) / ((t - ze.value) / Ie.value));
});
let S = null, C = null, k = null, $ = null;
const re = (t) => {
if (R.value = !0, !a.enableSelectionDrag) return;
const e = t.type === "touchstart", n = e && t.targetTouches && t.targetTouches[0] ? t.targetTouches[0] : null, o = e ? n ? n.target : null : t.target;
!o || !(o instanceof Element) || o.classList && o.classList.contains("range-handle") || (I.value = !0, _.value = e ? n ? n.clientX : 0 : t.clientX, S = e ? "touchmove" : "mousemove", C = e ? "touchend" : "mouseup", k = e ? Ae : Pe, $ = e ? He : Fe, window.addEventListener(S, k, { passive: !1 }), window.addEventListener(C, $));
};
function Pe(t) {
I.value && se(t.clientX);
}
function Ae(t) {
if (!I.value || !h.value) return;
const e = t.target;
if (!(e instanceof Element) || !h.value.contains(e) || e.classList && e.classList.contains("range-handle")) return;
t.preventDefault();
const n = t.targetTouches && t.targetTouches[0] ? t.targetTouches[0] : null;
n && se(n.clientX);
}
function se(t) {
if (!I.value) return;
const e = t - _.value;
if (Math.abs(e) > De.value) {
if (e > 0) {
if (Number(s.value) + 1 <= a.max) {
const n = Math.min(a.max, Number(s.value) + oe.value);
Q(n), K(n - Y.value);
}
} else if (Number(r.value) - 1 >= a.min) {
const n = Math.max(a.min, Number(r.value) - oe.value);
K(n), Q(n + Y.value);
}
_.value = t;
}
}
function Fe() {
ve();
}
function He() {
ve();
}
function ve() {
I.value = !1, S && k && window.removeEventListener(S, k), C && $ && window.removeEventListener(C, $), S = C = null, k = $ = null;
}
const E = i(!1), P = i(null), A = i(null), ee = i(1), X = i(1), R = i(!1);
function de() {
P.value && (ee.value = P.value.getBoundingClientRect().width);
}
function ce() {
A.value && (X.value = A.value.getBoundingClientRect().width);
}
const me = i(0);
function fe(t) {
me.value = t === "start" ? 1 : 0;
}
const F = i(!1), H = i({
width: 0,
left: 0
});
return T([r, s], async () => {
if (await le(), !P.value || !A.value) {
F.value = !1, H.value = { width: 0, left: 0 };
return;
}
const t = P.value.getBoundingClientRect(), e = A.value.getBoundingClientRect();
F.value = t.x + t.width > e.x;
const n = t.x + t.width / 2, o = e.x + e.width / 2, x = t.width + e.width, W = (n + o) / 2;
H.value = {
width: x,
left: W - x / 2
};
}), Ze(() => {
de(), ce();
}), T(
() => a.labelLeft,
() => {
le(de);
},
{ deep: !0 }
), T(
() => a.labelRight,
() => {
le(ce);
},
{ deep: !0 }
), Ce({
setStartValue: K,
setEndValue: Q
}), te(() => {
N.value && N.value.disconnect(), S && k && window.removeEventListener(S, k), C && $ && window.removeEventListener(C, $), S = C = null, k = $ = null;
}), (t, e) => (m(), c("div", {
"data-dom-to-png-ignore": "",
style: { padding: "0 24px" },
class: "vue-data-ui-zoom",
ref_key: "zoomWrapper",
ref: h,
onMousedown: re,
onTouchstart: re,
onTouchend: e[11] || (e[11] = (n) => R.value = !1)
}, [
d("div", _e, [
l.valueStart !== l.refreshStartPoint || l.valueEnd !== $e.value ? (m(), c("div", et, [
l.useResetSlot ? je(t.$slots, "reset-action", {
key: 1,
reset: ue
}, void 0, !0) : (m(), c("button", {
key: 0,
tabindex: "0",
role: "button",
class: "vue-data-ui-refresh-button",
style: M({
top: D.value ? "36px" : "-16px",
pointerEvents: "all !important"
}),
onClick: ue
}, [
Ge(qe, {
name: "refresh",
stroke: l.textColor
}, null, 8, ["stroke"])
], 4))
])) : w("", !0)
]),
d("div", {
class: "double-range-slider",
ref_key: "minimapWrapper",
ref: G,
style: { "z-index": "0" },
onMouseenter: e[9] || (e[9] = (n) => R.value = !0),
onMouseleave: e[10] || (e[10] = (n) => R.value = !1)
}, [
D.value ? (m(), c("div", tt, [
(m(), c("svg", {
xmlns: U(Qe),
viewBox: `0 0 ${u.value.width < 0 ? 0 : u.value.width} ${u.value.height < 0 ? 0 : u.value.height}`
}, [
d("defs", null, [
d("linearGradient", {
id: O.value,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
d("stop", {
offset: "0%",
"stop-color": `${l.minimapLineColor}50`
}, null, 8, nt),
e[12] || (e[12] = d("stop", {
offset: "100%",
"stop-color": "transparent"
}, null, -1))
], 8, at)
]),
d("path", {
d: `M${b.value.fullSet}`,
stroke: `${l.minimapLineColor}`,
fill: "none",
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: { opacity: "1" }
}, null, 8, it),
d("rect", {
x: y.value.x,
width: y.value.width < 0 ? 0 : y.value.width,
height: Math.max(u.value.height, 0),
y: 0,
fill: p.value,
rx: l.minimapSelectionRadius,
stroke: "none"
}, null, 8, ut),
d("path", {
d: `M${f.value / 2},${Math.max(u.value.height, 0)} ${b.value.fullSet} L${u.value.width - f.value / 2},${Math.max(u.value.height, 0)}Z`,
fill: `url(#${O.value})`,
stroke: "none",
style: { opacity: "1" }
}, null, 8, ot),
d("rect", {
x: y.value.x,
width: y.value.width < 0 ? 0 : y.value.width,
height: Math.max(u.value.height, 0),
y: 0,
rx: l.minimapSelectionRadius,
fill: p.value
}, null, 8, rt),
d("rect", {
x: y.value.x,
width: y.value.width < 0 ? 0 : y.value.width,
height: Math.max(u.value.height, 0),
y: 0,
fill: l.minimapSelectedColor,
rx: l.minimapSelectionRadius,
style: M({
opacity: l.minimapSelectedColorOpacity
})
}, null, 12, st),
d("path", {
d: `M${b.value.sliced[0].x},${Math.max(u.value.height, 0)} ${b.value.selectionSet} L${b.value.sliced.at(-1).x},${Math.max(u.value.height, 0)}Z`,
fill: `url(#${O.value})`,
stroke: "none",
style: { opacity: "1" }
}, null, 8, vt),
d("path", {
d: `M ${b.value.selectionSet}`,
stroke: `${l.minimapLineColor}`,
fill: "transparent",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, dt),
d("circle", {
cx: b.value.firstPlot.x,
cy: b.value.firstPlot.y,
"stroke-width": "0.5",
stroke: p.value,
r: "3",
fill: l.minimapLineColor
}, null, 8, ct),
d("circle", {
cx: b.value.lastPlot.x,
cy: b.value.lastPlot.y,
"stroke-width": "0.5",
stroke: p.value,
r: "3",
fill: l.minimapLineColor
}, null, 8, mt),
z.value !== null ? (m(!0), c(be, { key: 0 }, xe(ie.value, (n, o) => (m(), c("g", null, [
z.value === n && n >= l.valueStart && n < l.valueEnd ? (m(), c("line", {
key: 0,
x1: f.value * o + f.value / 2,
x2: f.value * o + f.value / 2,
y1: 0,
y2: Math.max(u.value.height, 0),
stroke: l.minimapIndicatorColor,
"stroke-linecap": "round",
"stroke-dasharray": "2",
"stroke-width": "1"
}, null, 8, ft)) : w("", !0)
]))), 256)) : w("", !0),
(m(!0), c(be, null, xe(ie.value, (n, o) => (m(), c("rect", {
x: f.value * o,
y: 0,
height: Math.max(u.value.height, 0),
width: f.value < 0 ? 0 : f.value,
fill: "transparent",
style: M([{ "pointer-events": "all !important" }, {
cursor: n >= l.valueStart && n < l.valueEnd && l.enableSelectionDrag ? E.value ? "grabbing" : "grab" : "default"
}]),
onMousedown: e[0] || (e[0] = (x) => E.value = !0),
onMouseup: e[1] || (e[1] = (x) => E.value = !1),
onMouseenter: (x) => Te(n),
onMouseleave: e[2] || (e[2] = (x) => {
z.value = null, L("trapMouse", null);
})
}, null, 44, ht))), 256))
], 8, lt))
])) : w("", !0),
e[13] || (e[13] = d("div", { class: "slider-track" }, null, -1)),
d("div", {
class: B({
"range-highlight": !0,
move: l.enableSelectionDrag
}),
onMousedown: e[3] || (e[3] = (n) => E.value = !0),
onMouseup: e[4] || (e[4] = (n) => E.value = !1),
style: M({
...g.value,
cursor: E.value ? "grabbing" : "grab"
})
}, null, 38),
l.enableRangeHandles ? ge((m(), c("input", {
ref_key: "rangeStart",
ref: q,
key: `range-min${Be.value}`,
type: "range",
class: B({ "range-left": !0, "range-handle": !0, "range-minimap": D.value && l.verticalHandles }),
min: l.min,
max: l.max,
"onUpdate:modelValue": e[5] || (e[5] = (n) => r.value = n),
onInput: Ne,
onMouseenter: e[6] || (e[6] = (n) => fe("start"))
}, null, 42, gt)), [
[ye, r.value]
]) : w("", !0),
l.enableRangeHandles ? ge((m(), c("input", {
key: 2,
ref_key: "rangeEnd",
ref: J,
type: "range",
class: B({ "range-right": !0, "range-handle": !0, "range-minimap": D.value && l.verticalHandles }),
min: l.min,
max: l.max,
"onUpdate:modelValue": e[7] || (e[7] = (n) => s.value = n),
onInput: Ee,
onMouseenter: e[8] || (e[8] = (n) => fe("end"))
}, null, 42, bt)), [
[ye, s.value]
]) : w("", !0),
l.labelLeft ? (m(), c("div", {
key: 3,
ref_key: "tooltipLeft",
ref: P,
class: B({
"range-tooltip": !0,
"range-tooltip-visible": R.value,
"range-tooltip-arrow": g.value.arrowLeft && !l.verticalHandles,
"range-tooltip-arrow-left": !g.value.arrowLeft && !l.verticalHandles
}),
style: M({
left: g.value.tooltipLeft,
color: U(ne)(l.selectColor),
backgroundColor: l.selectColor,
border: `1px solid ${p.value}`,
zIndex: `${me.value + 4}`,
visibility: F.value || l.labelLeft === l.labelRight ? "hidden" : "visible"
})
}, ae(l.labelLeft), 7)) : w("", !0),
(F.value || l.labelLeft === l.labelRight) && (l.labelLeft || l.labelRight) ? (m(), c("div", {
key: 4,
ref: "tooltipMerge",
class: B({
"range-tooltip": !0,
"range-tooltip-visible": R.value,
"range-tooltip-arrow": !0,
"range-tooltip-arrow-left": !g.value.arrowLeft && !l.verticalHandles,
"range-tooltip-arrow-right": !g.value.arrowRight && !l.verticalHandles
}),
style: M({
left: g.value.tooltipCenter,
width: H.value.width + "px",
color: U(ne)(l.selectColor),
backgroundColor: l.selectColor,
border: `1px solid ${p.value}`,
zIndex: "4"
})
}, ae(l.labelLeft === l.labelRight ? l.labelLeft : `${l.labelLeft} - ${l.labelRight}`), 7)) : w("", !0),
l.labelRight ? (m(), c("div", {
key: 5,
ref_key: "tooltipRight",
ref: A,
class: B({
"range-tooltip": !0,
"range-tooltip-visible": R.value,
"range-tooltip-arrow": g.value.arrowRight && !l.verticalHandles,
"range-tooltip-arrow-right": !g.value.arrowRight && !l.verticalHandles
}),
style: M({
left: g.value.tooltipRight,
color: U(ne)(l.selectColor),
backgroundColor: l.selectColor,
border: `1px solid ${p.value}`,
zIndex: "4",
visibility: F.value || l.labelLeft === l.labelRight ? "hidden" : "visible"
})
}, ae(l.labelRight), 7)) : w("", !0)
], 544)
], 544));
}
}, kt = /* @__PURE__ */ Ye(xt, [["__scopeId", "data-v-b6997053"]]);
export {
kt as S
};