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