vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
193 lines (192 loc) • 6.1 kB
JavaScript
import { defineAsyncComponent as z, ref as G, useSlots as L, onMounted as _, computed as c, watch as N, createElementBlock as s, openBlock as a, normalizeStyle as $, createVNode as F, createCommentVNode as n, unref as l, createElementVNode as t, Fragment as p, toDisplayString as y } from "vue";
import { u as V, c as B, e as P, i as k, f as m } from "./index-BLtEpj8j.js";
import { u as U } from "./useNestedProp-Bw1KcAmj.js";
const D = ["viewBox", "width"], I = { key: 0 }, M = ["id"], S = ["stop-color"], A = ["stop-color"], E = ["stroke"], O = ["stroke"], j = ["width", "fill"], T = ["fill"], q = { key: 0 }, H = ["id"], J = ["stroke"], K = ["stroke", "stroke-dasharray", "stroke-dashoffset"], Q = ["filter"], R = ["stroke", "stroke-dasharray", "stroke-dashoffset"], W = ["fill"], ee = {
__name: "vue-ui-gizmo",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Number,
default: 0
}
},
setup(f) {
const w = z(() => import("./PackageVersion-CnRyWKP-.js")), { vue_ui_gizmo: x } = V(), o = f, u = G(B()), C = L();
_(() => {
h();
}), _(() => {
C["chart-background"] && console.warn("VueUiGizmo does not support the #chart-background slot.");
});
function h() {
!o.dataset && o.dataset !== 0 && P({
componentName: "VueUiGizmo",
type: "dataset"
}), o.dataset < 0 && console.warn("VueUiGizmo: dataset cannot be negative.");
}
const e = c({
get: () => g(),
set: (i) => i
});
function g() {
return U({
userConfig: o.config,
defaultConfig: x
});
}
N(() => o.config, (i) => {
e.value = g(), h();
}, { deep: !0 });
const v = c(() => ({
battery: { width: e.value.showPercentage ? 140 : 80, height: 50 },
gauge: { width: 80, height: 80 }
})[e.value.type]), d = c(() => {
const r = 2 * Math.PI * 35, b = r - o.dataset / 100 * r;
return {
dasharray: `${r} ${r}`,
dashoffset: b
};
});
return (i, r) => (a(), s("svg", {
class: "vue-ui-gizmo",
viewBox: `0 0 ${v.value.width} ${v.value.height}`,
width: e.value.size,
style: $({
background: "transparent",
fontFamily: e.value.fontFamily
})
}, [
F(l(w)),
e.value.useGradient ? (a(), s("defs", I, [
t("linearGradient", {
id: `gizmo_gradient_${u.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
t("stop", {
offset: "0%",
"stop-color": e.value.gradientColor
}, null, 8, S),
t("stop", {
offset: "100%",
"stop-color": e.value.color
}, null, 8, A)
], 8, M)
])) : n("", !0),
e.value.type === "battery" ? (a(), s(p, { key: 1 }, [
t("path", {
d: "M 5 10 L 5 40 C 5 43 7 45 9 45 L 65 45 C 68 45 70 43 70 40 L 70 38 C 73 38 75 38 75 33 L 75 17 C 75 12 73 12 70 12 L 70 10 C 70 7 68 5 65 5 L 10 5 C 7 5 5 7 5 10",
stroke: e.value.stroke,
"stroke-width": 2,
fill: "none"
}, null, 8, E),
t("path", {
d: "M 70 16 L 70 34",
stroke: e.value.stroke,
"stroke-width": 2,
fill: "none",
style: { opacity: "0.5" }
}, null, 8, O),
t("rect", {
x: 10,
y: 10,
height: 30,
width: 55 * (f.dataset / 100),
fill: e.value.useGradient ? `url(#gizmo_gradient_${u.value})` : e.value.color,
rx: 2
}, null, 8, j),
e.value.showPercentage ? (a(), s("text", {
key: 0,
x: 85,
y: 32,
"text-anchor": "start",
"font-size": "20",
fill: e.value.textColor
}, y(l(k)(
e.value.formatter,
o.dataset,
l(m)({
v: o.dataset,
s: "%"
})
)), 9, T)) : n("", !0)
], 64)) : n("", !0),
e.value.type === "gauge" ? (a(), s(p, { key: 2 }, [
e.value.useGradient ? (a(), s("defs", q, [
t("filter", {
id: `blur_${u.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, r[0] || (r[0] = [
t("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 1
}, null, -1)
]), 8, H)
])) : n("", !0),
t("circle", {
cx: 40,
cy: 40,
r: 35,
stroke: e.value.stroke,
"stroke-width": 2 * 4,
fill: "none"
}, null, 8, J),
t("circle", {
cx: 40,
cy: 40,
r: 35,
stroke: e.value.color,
"stroke-width": 2 * 4,
"stroke-dasharray": d.value.dasharray,
"stroke-dashoffset": d.value.dashoffset,
"stroke-linecap": "round",
fill: "none",
style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
}, null, 8, K),
e.value.useGradient ? (a(), s("g", {
key: 1,
filter: `url(#blur_${u.value})`
}, [
t("circle", {
cx: 40,
cy: 40,
r: 35,
stroke: e.value.gradientColor,
"stroke-width": 1,
fill: "none",
"stroke-dasharray": d.value.dasharray,
"stroke-dashoffset": d.value.dashoffset,
style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
}, null, 8, R)
], 8, Q)) : n("", !0),
e.value.showPercentage ? (a(), s("text", {
key: 2,
x: 40,
y: 47,
"text-anchor": "middle",
"font-size": "20",
fill: e.value.textColor
}, y(l(k)(
e.value.formatter,
o.dataset,
l(m)({
v: o.dataset,
s: "%"
})
)), 9, W)) : n("", !0)
], 64)) : n("", !0)
], 12, D));
}
};
export {
ee as default
};