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