vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
253 lines (252 loc) • 9.55 kB
JavaScript
import { ref as u, computed as m, onMounted as I, onBeforeUnmount as N, createBlock as B, openBlock as l, Teleport as T, createElementBlock as i, createCommentVNode as n, normalizeStyle as $, unref as E, createVNode as R, createElementVNode as r, normalizeClass as S, toDisplayString as F, nextTick as M } from "vue";
import { u as W, a as G } from "./useNestedProp-2p4Tjzc8.js";
import { c as V, X as A, s as U } from "./lib-2iaAPQ_c.js";
import P from "./PackageVersion-Br3DrrFh.js";
import { _ as X } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const j = ["xmlns", "height", "width"], Y = {
id: "follower",
fy: "30%",
fx: "30%"
}, q = ["stop-color", "stop-opacity"], H = ["r", "fill", "stroke", "stroke-width", "stroke-dasharray"], J = ["r"], K = {
key: 2,
class: "wave"
}, Q = ["id"], Z = ["id"], ee = ["filter", "stroke"], te = {
key: 3,
class: "crosshair"
}, re = ["x1", "stroke", "stroke-width", "stroke-dasharray"], oe = ["x1", "stroke", "stroke-width", "stroke-dasharray"], se = ["y1", "stroke", "stroke-width", "stroke-dasharray"], le = ["y1", "stroke", "stroke-width", "stroke-dasharray"], ae = ["cy", "r", "fill"], ie = ["cy", "r", "fill"], ne = ["cx", "r", "fill"], ue = ["cx", "r", "fill"], ce = {
key: 5,
class: "coordinates"
}, ve = ["x", "y", "font-size", "fill"], de = ["transform"], fe = ["font-size", "fill"], he = {
__name: "vue-ui-cursor",
props: {
config: {
type: Object,
default: {}
}
},
setup(L) {
const { vue_ui_cursor: z } = W(), O = L, k = u(V()), e = m(() => G({
userConfig: O.config,
defaultConfig: z
})), a = u({
x: -100,
y: -100
}), o = m(() => Math.round(e.value.centerCircleRadius)), f = m(() => Math.round(e.value.coordinatesOffset));
function p({ clientX: t, clientY: s, ...y }) {
a.value.x = t - o.value, a.value.y = s - o.value;
}
function x(t) {
a.value.x = t.targetTouches[0].clientX - o.value, a.value.y = t.targetTouches[0].clientY - o.value;
}
const C = u(!0);
function h(t) {
C.value = t;
}
const c = u(!1), _ = u(null);
function g() {
c.value = !1, _.value && clearTimeout(_.value), M(() => {
c.value = !0, _.value = setTimeout(() => {
c.value = !1;
}, 1e3);
});
}
const v = u(null), d = u(null);
function b() {
return e.value.parentId ? document.getElementById(e.value.parentId) : document.getElementsByTagName("div")[0] || null;
}
function w(t) {
t && (t.addEventListener("mousemove", p), t.addEventListener("touchmove", x), t.addEventListener("mouseleave", () => h(!1)), t.addEventListener("mouseenter", () => h(!0)), t.addEventListener("click", g));
}
function D(t) {
t && (t.removeEventListener("mousemove", p), t.removeEventListener("touchmove", x), t.removeEventListener("mouseleave", () => h(!1)), t.removeEventListener("mouseenter", () => h(!0)), t.removeEventListener("click", g));
}
return I(() => {
const t = b();
if (t) {
v.value = t, w(t);
return;
}
if (!e.value.parentId)
return;
const s = new MutationObserver(() => {
const y = b();
y && (v.value = y, w(y), s.disconnect(), d.value = null);
});
s.observe(document.body, { childList: !0, subtree: !0 }), d.value = s;
}), N(() => {
d.value && (d.value.disconnect(), d.value = null), v.value && (D(v.value), v.value = null);
}), (t, s) => (l(), B(T, { to: "body" }, [
C.value ? (l(), i("svg", {
key: 0,
"data-dom-to-png-ignore": "",
xmlns: E(A),
style: $(`z-index: 2147483647; overflow: visible; pointer-events: none;background: transparent; position:fixed; top:${a.value.y}px; left:${a.value.x}px;`),
viewBox: "0 0 100 100",
height: o.value * 2,
width: o.value * 2
}, [
R(P),
r("defs", null, [
r("radialGradient", Y, [
r("stop", {
offset: "10%",
"stop-color": e.value.bubbleEffectColor,
"stop-opacity": e.value.bubbleEffectOpacity
}, null, 8, q),
s[0] || (s[0] = r("stop", {
offset: "95%",
"stop-color": "transparent"
}, null, -1))
])
]),
e.value.showCenterCircle ? (l(), i("circle", {
key: 0,
cx: 50,
cy: 50,
r: o.value,
fill: E(U)(e.value.centerCircleColor, e.value.centerCircleOpacity * 100),
stroke: e.value.centerCircleStroke,
"stroke-width": e.value.centerCircleStrokeWidth,
"stroke-dasharray": e.value.centerCircleDasharray
}, null, 8, H)) : n("", !0),
e.value.bubbleEffect ? (l(), i("circle", {
key: 1,
cx: 50,
cy: 50,
r: o.value,
fill: "url(#follower)",
stroke: "none"
}, null, 8, J)) : n("", !0),
e.value.useWaveOnClick ? (l(), i("g", K, [
r("defs", null, [
r("filter", {
id: `blur_${k.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
r("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 4,
id: `blur_std_${k.value}`
}, null, 8, Z),
s[1] || (s[1] = r("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1))
], 8, Q)
]),
c.value ? (l(), i("circle", {
key: 0,
class: S({ "circle-wave": c.value }),
cx: 50,
cy: 50,
r: 50,
filter: `url(#blur_${k.value})`,
stroke: e.value.centerCircleStroke,
fill: "none",
"stroke-width": "3"
}, null, 10, ee)) : n("", !0)
])) : n("", !0),
e.value.showCrosshair ? (l(), i("g", te, [
r("line", {
x1: -o.value + 50,
x2: -5e3,
y1: 50,
y2: 50,
stroke: e.value.crosshairStroke,
"stroke-width": e.value.crosshairStrokeWidth,
"stroke-dasharray": e.value.crosshairDasharray,
"stroke-linecap": "round"
}, null, 8, re),
r("line", {
x1: 50 + o.value,
x2: 5e3,
y1: 50,
y2: 50,
stroke: e.value.crosshairStroke,
"stroke-width": e.value.crosshairStrokeWidth,
"stroke-dasharray": e.value.crosshairDasharray,
"stroke-linecap": "round"
}, null, 8, oe),
r("line", {
x1: 50,
x2: 50,
y1: -o.value + 50,
y2: -5e3,
stroke: e.value.crosshairStroke,
"stroke-width": e.value.crosshairStrokeWidth,
"stroke-dasharray": e.value.crosshairDasharray,
"stroke-linecap": "round"
}, null, 8, se),
r("line", {
x1: 50,
x2: 50,
y1: o.value + 50,
y2: 5e3,
stroke: e.value.crosshairStroke,
"stroke-width": e.value.crosshairStrokeWidth,
"stroke-dasharray": e.value.crosshairDasharray,
"stroke-linecap": "round"
}, null, 8, le)
])) : n("", !0),
e.value.showIntersectCircles ? (l(), i("g", {
key: 4,
class: S({ "rotating-circles": e.value.isLoading })
}, [
r("circle", {
cx: 50,
cy: o.value + 50,
r: e.value.intersectCirclesRadius,
fill: e.value.intersectCirclesFill
}, null, 8, ae),
r("circle", {
cx: 50,
cy: -o.value + 50,
r: e.value.intersectCirclesRadius,
fill: e.value.intersectCirclesFill
}, null, 8, ie),
r("circle", {
cx: -o.value + 50,
cy: 50,
r: e.value.intersectCirclesRadius,
fill: e.value.intersectCirclesFill
}, null, 8, ne),
r("circle", {
cx: o.value + 50,
cy: 50,
r: e.value.intersectCirclesRadius,
fill: e.value.intersectCirclesFill
}, null, 8, ue)
], 2)) : n("", !0),
e.value.showCoordinates ? (l(), i("g", ce, [
r("text", {
"text-anchor": "end",
x: -o.value + 50 - e.value.coordinatesFontSize / 2 + f.value,
y: 50 - e.value.coordinatesFontSize / 2 + f.value,
"font-size": e.value.coordinatesFontSize,
fill: e.value.coordinatesColor,
style: { "font-variant-numeric": "tabular-nums" },
"font-family": "Arial"
}, F(a.value.x.toFixed(0)), 9, ve),
r("g", {
transform: `translate(${50 - e.value.coordinatesFontSize / 2 + f.value}, ${-o.value + 50 - e.value.coordinatesFontSize / 2 + f.value})`
}, [
r("text", {
"text-anchor": "start",
"font-size": e.value.coordinatesFontSize,
fill: e.value.coordinatesColor,
style: { "font-variant-numeric": "tabular-nums" },
transform: "rotate(-90)",
"font-family": "Arial"
}, F(a.value.y.toFixed(0)), 9, fe)
], 8, de)
])) : n("", !0)
], 12, j)) : n("", !0)
]));
}
}, xe = /* @__PURE__ */ X(he, [["__scopeId", "data-v-dd1dddb3"]]);
export {
xe as default
};