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