vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
423 lines (422 loc) • 13.7 kB
JavaScript
import { useCssVars as re, unref as e, ref as p, computed as m, watch as R, onMounted as ue, onBeforeUnmount as se, openBlock as c, createElementBlock as h, createElementVNode as o, normalizeStyle as k, createVNode as de, renderSlot as me, createCommentVNode as C, Fragment as I, renderList as V, withDirectives as A, isRef as B, vModelText as O, toDisplayString as D } from "vue";
import ce from "./BaseIcon-MqKW8Nkx.js";
import { t as he, u as fe } from "./useResponsive-CoxXLe23.js";
import { c as ve, R as U, Q as T, X as pe } from "./index-WrV3SAID.js";
import { _ as xe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ye = {
"data-html2canvas-ignore": "",
style: { padding: "0 24px" },
class: "vue-data-ui-zoom"
}, ge = {
class: "vue-data-ui-slicer-labels",
style: { position: "relative", "z-index": "1", "pointer-events": "none" }
}, be = {
key: 0,
style: { width: "100%", position: "relative" }
}, Se = {
key: 0,
class: "minimap",
style: { width: "100%" }
}, ke = ["xmlns", "viewBox"], Ne = ["id"], Ce = ["stop-color"], we = ["d", "stroke"], $e = ["x", "width", "height", "fill", "rx"], Me = ["d", "fill"], Ee = ["x", "width", "height", "rx", "fill"], Pe = ["x", "width", "height", "fill", "rx"], Le = ["d", "fill"], Re = ["d", "stroke"], ze = ["cx", "cy", "stroke", "fill"], Fe = ["cx", "cy", "stroke", "fill"], Ie = ["x1", "x2", "y2", "stroke"], Ve = ["x", "height", "width", "onMouseenter"], Ae = ["min", "max"], Be = ["min", "max"], Oe = {
__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
}
},
emits: ["update:start", "update:end", "reset", "trapMouse"],
setup(n, { expose: W, emit: X }) {
re((l) => ({
b551c218: e(q),
"3d4ca768": e(b),
"5763f24e": e(Q),
"1d81e898": n.selectColor,
"39e04726": e(G)
}));
const t = n, r = p(t.min), u = p(t.max), g = m(() => !!t.minimap.length), w = p(ve()), j = m(() => t.refreshEndPoint === null ? t.max : t.refreshEndPoint), y = X, Z = m(() => {
const l = t.max - t.min, i = (r.value - t.min) / l * 100, s = (u.value - t.min) / l * 100;
return {
left: `${i}%`,
width: `${s - i}%`,
background: t.selectColor
};
}), q = m(() => t.inputColor), G = m(() => t.background), Q = m(() => `${t.selectColor}33`), b = m(() => t.borderColor), z = m(() => {
let l = [];
for (let i = 0; i < t.minimap.length; i += 1)
l.push(i);
return l;
});
function F() {
y("reset");
}
function H() {
Number(r.value) > Number(u.value) - 1 && (r.value = Number(u.value) - 1), y("update:start", Number(r.value));
}
function J() {
Number(u.value) < Number(r.value) + 1 && (u.value = Number(r.value) + 1), y("update:end", Number(u.value));
}
R(
() => t.min,
(l) => {
Number(r.value) < Number(l) && (r.value = Number(l)), Number(u.value) < Number(l) && (u.value = Number(l));
}
), R(
() => t.max,
(l) => {
Number(r.value) > Number(l) && (r.value = Number(l)), Number(u.value) > Number(l) && (u.value = Number(l));
}
);
const $ = p(null), a = p({
width: 1,
height: 1
}), N = p(null);
ue(() => {
if (g.value) {
const l = he(() => {
const { width: i, height: s } = fe({
chart: $.value
});
a.value.width = i, a.value.height = s - 47;
});
N.value = new ResizeObserver(l), N.value.observe($.value);
}
}), se(() => {
N.value && N.value.disconnect();
});
const d = m(() => t.minimap.length ? a.value.width / t.minimap.length : 0), f = m(() => {
if (!t.minimap.length) return [];
const l = Math.max(...t.minimap), i = Math.min(...t.minimap) - 10, s = l - (i > 0 ? 0 : i), v = t.minimap.map((ie, ae) => {
const oe = ie - i;
return {
x: a.value.width / t.minimap.length * ae + d.value / 2,
y: a.value.height - oe / s * (a.value.height * 0.9)
};
}), P = t.smoothMinimap ? U(v) : T(v), L = [...v].slice(t.valueStart, t.valueEnd), ne = t.smoothMinimap ? U(L) : T(L);
return {
fullSet: P,
selectionSet: ne,
sliced: L,
firstPlot: v[t.valueStart],
lastPlot: v[t.valueEnd - 1]
};
}), x = m(() => ({
x: d.value * r.value + d.value / 2,
width: a.value.width * ((u.value - r.value) / t.max) - d.value
})), K = m(() => ({
left: 0,
color: t.textColor,
fontSize: `${t.fontSize}px`,
top: g.value ? "28px" : "-28px",
pointerEvents: "none"
})), Y = m(() => ({
right: 0,
color: t.textColor,
fontSize: `${t.fontSize}px`,
top: g.value ? "28px" : "-28px",
direction: "rtl",
pointerEvents: "none"
})), S = p(t.minimapSelectedIndex);
R(() => t.minimapSelectedIndex, (l) => {
S.value = l + t.valueStart;
}, { immediate: !0 });
function _(l) {
S.value = l, l >= t.valueStart && l < t.valueEnd && y("trapMouse", l - t.valueStart);
}
const ee = p(0), M = p(null), E = p(null);
function te(l) {
r.value = l, M.value && (M.value.value = l), y("update:start", Number(r.value));
}
function le(l) {
u.value = l, E.value && (E.value.value = l), y("update:end", Number(u.value));
}
return W({
setStartValue: te,
setEndValue: le
}), (l, i) => (c(), h("div", ye, [
o("div", ge, [
n.valueStart !== n.refreshStartPoint || n.valueEnd !== e(j) ? (c(), h("div", be, [
n.useResetSlot ? me(l.$slots, "reset-action", {
key: 1,
reset: F
}, void 0, !0) : (c(), h("button", {
key: 0,
"data-cy-reset": "",
tabindex: "0",
role: "button",
class: "vue-data-ui-refresh-button",
style: k({
top: e(g) ? "36px" : "-16px",
pointerEvents: "all !important"
}),
onClick: F
}, [
de(ce, {
name: "refresh",
stroke: n.textColor
}, null, 8, ["stroke"])
], 4))
])) : C("", !0)
]),
o("div", {
class: "double-range-slider",
ref_key: "minimapWrapper",
ref: $,
style: { "z-index": "0" }
}, [
e(g) ? (c(), h("div", Se, [
(c(), h("svg", {
xmlns: e(pe),
viewBox: `0 0 ${e(a).width < 0 ? 0 : e(a).width} ${e(a).height < 0 ? 0 : e(a).height}`
}, [
o("defs", null, [
o("linearGradient", {
id: e(w),
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
o("stop", {
offset: "0%",
"stop-color": `${n.minimapLineColor}50`
}, null, 8, Ce),
i[3] || (i[3] = o("stop", {
offset: "100%",
"stop-color": "transparent"
}, null, -1))
], 8, Ne)
]),
o("path", {
d: `M${e(f).fullSet}`,
stroke: `${n.minimapLineColor}`,
fill: "none",
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: { opacity: "1" }
}, null, 8, we),
o("rect", {
x: e(x).x,
width: e(x).width < 0 ? 0 : e(x).width,
height: Math.max(e(a).height, 0),
y: 0,
fill: e(b),
rx: n.minimapSelectionRadius,
stroke: "none"
}, null, 8, $e),
o("path", {
d: `M${e(d) / 2},${Math.max(e(a).height, 0)} ${e(f).fullSet} L${e(a).width - e(d) / 2},${Math.max(e(a).height, 0)}Z`,
fill: `url(#${e(w)})`,
stroke: "none",
style: { opacity: "1" }
}, null, 8, Me),
o("rect", {
x: e(x).x,
width: e(x).width < 0 ? 0 : e(x).width,
height: Math.max(e(a).height, 0),
y: 0,
rx: n.minimapSelectionRadius,
fill: e(b)
}, null, 8, Ee),
o("rect", {
x: e(x).x,
width: e(x).width < 0 ? 0 : e(x).width,
height: Math.max(e(a).height, 0),
y: 0,
fill: n.minimapSelectedColor,
rx: n.minimapSelectionRadius,
style: k({
opacity: n.minimapSelectedColorOpacity
})
}, null, 12, Pe),
o("path", {
d: `M${e(f).sliced[0].x},${Math.max(e(a).height, 0)} ${e(f).selectionSet} L${e(f).sliced.at(-1).x},${Math.max(e(a).height, 0)}Z`,
fill: `url(#${e(w)})`,
stroke: "none",
style: { opacity: "1" }
}, null, 8, Le),
o("path", {
d: `M ${e(f).selectionSet}`,
stroke: `${n.minimapLineColor}`,
fill: "transparent",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Re),
o("circle", {
cx: e(f).firstPlot.x,
cy: e(f).firstPlot.y,
"stroke-width": "0.5",
stroke: e(b),
r: "3",
fill: n.minimapLineColor
}, null, 8, ze),
o("circle", {
cx: e(f).lastPlot.x,
cy: e(f).lastPlot.y,
"stroke-width": "0.5",
stroke: e(b),
r: "3",
fill: n.minimapLineColor
}, null, 8, Fe),
e(S) !== null ? (c(!0), h(I, { key: 0 }, V(e(z), (s, v) => (c(), h("g", null, [
e(S) === s && s >= n.valueStart && s < n.valueEnd ? (c(), h("line", {
key: 0,
x1: e(d) * v + e(d) / 2,
x2: e(d) * v + e(d) / 2,
y1: 0,
y2: Math.max(e(a).height, 0),
stroke: n.minimapIndicatorColor,
"stroke-linecap": "round",
"stroke-dasharray": "2",
"stroke-width": "1"
}, null, 8, Ie)) : C("", !0)
]))), 256)) : C("", !0),
(c(!0), h(I, null, V(e(z), (s, v) => (c(), h("rect", {
x: e(d) * v,
y: 0,
height: Math.max(e(a).height, 0),
width: e(d) < 0 ? 0 : e(d),
fill: "transparent",
style: { "pointer-events": "all !important" },
onMouseenter: (P) => _(s),
onMouseleave: i[0] || (i[0] = (P) => {
S.value = null, y("trapMouse", null);
})
}, null, 40, Ve))), 256))
], 8, ke))
])) : C("", !0),
i[4] || (i[4] = o("div", { class: "slider-track" }, null, -1)),
o("div", {
class: "range-highlight",
style: k(e(Z))
}, null, 4),
A((c(), h("input", {
ref_key: "rangeStart",
ref: M,
key: `range-min${e(ee)}`,
type: "range",
class: "range-left",
min: n.min,
max: n.max,
"onUpdate:modelValue": i[1] || (i[1] = (s) => B(r) ? r.value = s : null),
onInput: H
}, null, 40, Ae)), [
[O, e(r)]
]),
o("div", {
class: "thumb-label thumb-label-left",
style: k(e(K))
}, D(n.labelLeft), 5),
A(o("input", {
ref_key: "rangeEnd",
ref: E,
type: "range",
class: "range-right",
min: n.min,
max: n.max,
"onUpdate:modelValue": i[2] || (i[2] = (s) => B(u) ? u.value = s : null),
onInput: J
}, null, 40, Be), [
[O, e(u)]
]),
o("div", {
class: "thumb-label thumb-label-right",
style: k(e(Y))
}, D(n.labelRight), 5)
], 512)
]));
}
}, je = /* @__PURE__ */ xe(Oe, [["__scopeId", "data-v-7b7105e4"]]);
export {
je as S
};