vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
211 lines (210 loc) • 7.35 kB
JavaScript
import { defineAsyncComponent as V, ref as k, useSlots as $, onMounted as y, computed as i, toRefs as D, watch as F, createElementBlock as a, openBlock as o, createBlock as I, createCommentVNode as r, normalizeStyle as M, createVNode as S, unref as n, createElementVNode as t, Fragment as C, toDisplayString as x } from "vue";
import { u as U, c as P, f as E, t as O, k as w, i as b } from "./index-q-LPw2IT.js";
import { u as T } from "./useNestedProp-04aFeUYu.js";
import { u as j, B as R } from "./useLoading-D7YHNtLX.js";
import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const H = { class: "vue-ui-gizmo-wrapper" }, J = ["viewBox", "width"], K = { key: 0 }, Q = ["id"], W = ["stop-color"], X = ["stop-color"], Y = ["stroke"], Z = ["stroke"], ee = ["width", "fill"], te = ["fill"], oe = { key: 0 }, ae = ["id"], se = ["stroke"], re = ["stroke", "stroke-dasharray", "stroke-dashoffset"], le = ["filter"], ne = ["stroke", "stroke-dasharray", "stroke-dashoffset"], ie = ["fill"], ue = {
__name: "vue-ui-gizmo",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Number
}
},
setup(z) {
const A = V(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_gizmo: G } = U(), s = z, u = k(P()), L = $();
y(() => {
g();
}), y(() => {
L["chart-background"] && d.value && console.warn("VueUiGizmo does not support the #chart-background slot.");
});
const d = i(() => e.value.debug);
function g() {
!s.dataset && s.dataset !== 0 && E({
componentName: "VueUiGizmo",
type: "dataset",
debug: d.value
}), s.dataset < 0 && d.value && console.warn("VueUiGizmo: dataset cannot be negative."), s.dataset > 100 && d.value && console.warn(`VueUiGizmo: gauge is maxed out, as dataset exceeds 100% (props.dataset = ${s.dataset})`);
}
const e = k(h()), { loading: N, FINAL_DATASET: p } = j({
...D(s),
FINAL_CONFIG: e,
prepareConfig: h,
dsIsNumber: !0,
skeletonDataset: 50,
skeletonConfig: O({
defaultConfig: e.value,
userConfig: {
stroke: "#6A6A6A80",
color: "#6A6A6A",
gradientColor: "#CACACA",
textColor: "transparent"
}
})
});
function h() {
return T({
userConfig: s.config,
defaultConfig: G
});
}
F(() => s.config, (v) => {
e.value = h(), g();
}, { deep: !0 });
const _ = i(() => ({
battery: { width: e.value.showPercentage ? 150 : 80, height: 50 },
gauge: { width: 80, height: 80 }
})[e.value.type]), m = i(() => Math.min(Math.max(0, p.value), 100)), c = i(() => Math.max(0, p.value)), f = i(() => {
const l = 2 * Math.PI * 35, B = l - m.value / 100 * l;
return {
dasharray: `${l} ${l}`,
dashoffset: B
};
});
return (v, l) => (o(), a("div", H, [
(o(), a("svg", {
class: "vue-ui-gizmo",
viewBox: `0 0 ${_.value.width} ${_.value.height}`,
width: e.value.size,
style: M({
background: "transparent",
fontFamily: e.value.fontFamily
})
}, [
S(n(A)),
e.value.useGradient ? (o(), a("defs", K, [
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, W),
t("stop", {
offset: "100%",
"stop-color": e.value.color
}, null, 8, X)
], 8, Q)
])) : r("", !0),
e.value.type === "battery" ? (o(), a(C, { 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, Y),
t("path", {
d: "M 70 16 L 70 34",
stroke: e.value.stroke,
"stroke-width": 2,
fill: "none",
style: { opacity: "0.5" }
}, null, 8, Z),
t("rect", {
x: 10,
y: 10,
height: 30,
width: 55 * (m.value / 100),
fill: e.value.useGradient ? `url(#gizmo_gradient_${u.value})` : e.value.color,
rx: 2
}, null, 8, ee),
e.value.showPercentage ? (o(), a("text", {
key: 0,
x: 85,
y: 32,
"text-anchor": "start",
"font-size": "20",
fill: e.value.textColor
}, x(n(w)(
e.value.formatter,
c.value,
n(b)({
v: c.value,
s: "%"
})
)), 9, te)) : r("", !0)
], 64)) : r("", !0),
e.value.type === "gauge" ? (o(), a(C, { key: 2 }, [
e.value.useGradient ? (o(), a("defs", oe, [
t("filter", {
id: `blur_${u.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [...l[0] || (l[0] = [
t("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 1
}, null, -1)
])], 8, ae)
])) : r("", !0),
t("circle", {
cx: 40,
cy: 40,
r: 35,
stroke: e.value.stroke,
"stroke-width": 2 * 4,
fill: "none"
}, null, 8, se),
t("circle", {
cx: 40,
cy: 40,
r: 35,
stroke: e.value.color,
"stroke-width": 2 * 4,
"stroke-dasharray": f.value.dasharray,
"stroke-dashoffset": f.value.dashoffset,
"stroke-linecap": "round",
fill: "none",
style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
}, null, 8, re),
e.value.useGradient ? (o(), a("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": f.value.dasharray,
"stroke-dashoffset": f.value.dashoffset,
style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
}, null, 8, ne)
], 8, le)) : r("", !0),
e.value.showPercentage ? (o(), a("text", {
key: 2,
x: 40,
y: 47,
"text-anchor": "middle",
"font-size": "20",
fill: e.value.textColor
}, x(n(w)(
e.value.formatter,
c.value,
n(b)({
v: c.value,
s: "%"
})
)), 9, ie)) : r("", !0)
], 64)) : r("", !0)
], 12, J)),
n(N) ? (o(), I(R, { key: 0 })) : r("", !0)
]));
}
}, ge = /* @__PURE__ */ q(ue, [["__scopeId", "data-v-31b4119c"]]);
export {
ge as default
};