vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
233 lines (232 loc) • 8.84 kB
JavaScript
import { defineAsyncComponent as P, ref as b, toRefs as T, onMounted as N, computed as s, watch as M, createElementBlock as r, openBlock as u, normalizeStyle as g, createCommentVNode as d, createBlock as U, toDisplayString as k, unref as i, createVNode as q, createElementVNode as y, renderSlot as F, normalizeClass as V } from "vue";
import { u as B } from "./useNestedProp-04aFeUYu.js";
import { u as X, c as Y, t as H, b as J, o as K, f as E, g as Q, P as W, X as Z, k as ee, h as x, i as te } from "./index-q-LPw2IT.js";
import { u as ae, B as le } from "./useLoading-D7YHNtLX.js";
import { u as oe } from "./useChartAccessibility-9icAAmYg.js";
const se = ["xmlns", "viewBox"], ue = ["width", "height"], ie = ["id"], ne = ["stop-color"], re = ["stop-color"], ve = ["d", "stroke", "stroke-linecap"], ce = ["d", "stroke", "stroke-linecap", "stroke-dashoffset"], de = ["x", "y", "width", "height"], fe = ["x", "y", "font-size", "fill", "font-weight"], ye = {
key: 2,
ref: "source",
dir: "auto"
}, ke = {
__name: "vue-ui-sparkgauge",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(D) {
const O = P(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_sparkgauge: j } = X(), c = D, _ = b(Y()), e = b(p()), { loading: h, FINAL_DATASET: v } = ae({
...T(c),
FINAL_CONFIG: e,
prepareConfig: p,
skeletonDataset: {
value: 0,
min: -1,
max: 1,
title: ""
},
skeletonConfig: H({
defaultConfig: e.value,
userConfig: {
style: {
animation: { show: !1 },
background: "#99999930",
colors: {
min: "#CACACA",
max: "#6A6A6A"
},
track: {
autoColor: !0
},
gutter: {
color: "#6A6A6A80"
}
}
}
})
}), { svgRef: I } = oe({ config: { text: c.dataset.title } });
function p() {
const t = B({
userConfig: c.config,
defaultConfig: j
});
return t.theme ? {
...B({
userConfig: J.vue_ui_sparkgauge[t.theme] || c.config,
defaultConfig: t
})
} : t;
}
N(() => {
A();
});
const w = s(() => e.value.debug);
function A() {
K(c.dataset) ? E({
componentName: "VueUiSparkgauge",
type: "dataset",
debug: w.value
}) : Q({
datasetObject: c.dataset,
requiredAttributes: ["value", "min", "max"]
}).forEach((t) => {
E({
componentName: "VueUiSparkgauge",
type: "datasetAttribute",
property: t,
debug: w.value
});
});
}
M(() => c.config, (t) => {
e.value = p(), a.value = e.value.style.animation.show ? o.value.min : v.value.value, A();
}, { deep: !0 });
const l = s(() => ({
height: e.value.style.height,
width: 128,
base: e.value.style.basePosition
})), o = s(() => {
const t = v.value.min ?? 0, n = v.value.max ?? 0, f = n - t;
return {
min: t,
max: n,
diff: f
};
}), a = b(e.value.style.animation.show ? o.value.min : v.value.value);
M(() => v.value.value, () => {
$(v.value.value || 0);
});
const R = s(() => a.value > o.value.max ? o.value.max : a.value < o.value.min ? o.value.min : a.value), C = s(() => o.value.diff / e.value.style.animation.speedMs);
N(() => {
$(v.value.value || 0);
});
function $(t) {
function n() {
a.value < t ? a.value = Math.min(a.value + C.value, t) : a.value > t && (a.value = Math.max(a.value - C.value, t)), a.value !== t && requestAnimationFrame(n);
}
n();
}
const m = s(() => v.value.title ?? ""), L = s(() => {
const t = o.value.diff;
if (!isFinite(t) || t === 0) return 0;
const n = o.value.min, f = R.value;
return f >= 0 ? (f - n) / t : (Math.abs(n) - Math.abs(f)) / t;
}), S = s(() => W(e.value.style.colors.min, e.value.style.colors.max, o.value.min, o.value.max, a.value)), z = s(() => e.value.style.dataLabel.autoColor ? S.value : e.value.style.dataLabel.color), G = s(() => e.value.style.track.autoColor ? S.value : e.value.style.track.color);
return (t, n) => (u(), r("div", {
class: "vue-ui-sparkgauge",
style: g(`font-family:${e.value.style.fontFamily};width: 100%; background:${e.value.style.background}`)
}, [
e.value.style.title.show && m.value && e.value.style.title.position === "top" ? (u(), r("div", {
key: 0,
class: "vue-data-ui-sparkgauge-label",
style: g(`font-size:${e.value.style.title.fontSize}px;text-align:${e.value.style.title.textAlign};font-weight:${e.value.style.title.bold ? "bold" : "normal"};color:${e.value.style.title.color}`)
}, k(m.value), 5)) : d("", !0),
(u(), r("svg", {
ref_key: "svgRef",
ref: I,
xmlns: i(Z),
viewBox: `0 0 ${l.value.width} ${l.value.height}`,
style: "overflow: visible; background:transparent; width:100%;"
}, [
q(i(O)),
t.$slots["chart-background"] && !i(h) ? (u(), r("foreignObject", {
key: 0,
x: 0,
y: 0,
width: l.value.width,
height: l.value.height,
style: {
pointerEvents: "none"
}
}, [
F(t.$slots, "chart-background")
], 8, ue)) : d("", !0),
y("defs", null, [
y("linearGradient", {
id: `gradient_${_.value}`,
x1: "-10%",
y1: "100%",
x2: "110%",
y2: "100%"
}, [
y("stop", {
offset: "0%",
"stop-color": e.value.style.colors.min
}, null, 8, ne),
y("stop", {
offset: "100%",
"stop-color": e.value.style.colors.max
}, null, 8, re)
], 8, ie)
]),
y("path", {
d: `M10 ${l.value.base} A 1 1 0 1 1 118 ${l.value.base}`,
stroke: e.value.style.gutter.color,
"stroke-width": 8,
"stroke-linecap": e.value.style.gutter.strokeLinecap,
fill: "none"
}, null, 8, ve),
L.value !== 0 ? (u(), r("path", {
key: 1,
d: `M10 ${l.value.base} A 1 1 0 1 1 118 ${l.value.base}`,
stroke: e.value.style.colors.showGradient ? `url(#gradient_${_.value})` : G.value,
"stroke-width": 8,
"stroke-linecap": e.value.style.track.strokeLinecap,
fill: "none",
"stroke-dasharray": 169.5,
"stroke-dashoffset": 169.5 - 169.5 * L.value,
class: V({ "vue-ui-sparkgauge-track": e.value.style.animation.show }),
style: g(e.value.style.animation.show ? `animation: vue-ui-sparkgauge-animation ${e.value.style.animation.speedMs}ms ease-in;` : "")
}, null, 14, ce)) : d("", !0),
i(h) ? (u(), r("rect", {
key: 2,
x: l.value.width / 2 - e.value.style.dataLabel.fontSize / 2,
y: l.value.base + 6 + e.value.style.dataLabel.offsetY - e.value.style.dataLabel.fontSize,
width: e.value.style.dataLabel.fontSize,
height: e.value.style.dataLabel.fontSize,
fill: "#6A6A6A50",
rx: 3
}, null, 8, de)) : (u(), r("text", {
key: 3,
"text-anchor": "middle",
x: l.value.width / 2,
y: l.value.base + 6 + e.value.style.dataLabel.offsetY,
"font-size": e.value.style.dataLabel.fontSize,
fill: z.value,
"font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
}, k(i(ee)(
e.value.style.dataLabel.formatter,
i(x)(a.value),
i(te)({
p: e.value.style.dataLabel.prefix,
v: i(x)(a.value),
s: e.value.style.dataLabel.suffix,
r: e.value.style.dataLabel.rounding
}),
{ datapoint: i(x)(a.value), color: z.value }
)), 9, fe))
], 8, se)),
e.value.style.title.show && m.value && e.value.style.title.position === "bottom" ? (u(), r("div", {
key: 1,
class: "vue-data-ui-sparkgauge-label",
style: g(`font-size:${e.value.style.title.fontSize}px;text-align:${e.value.style.title.textAlign};font-weight:${e.value.style.title.bold ? "bold" : "normal"};font-weight:${e.value.style.title.bold ? "bold" : "normal"};color:${e.value.style.title.color}`)
}, k(m.value), 5)) : d("", !0),
t.$slots.source ? (u(), r("div", ye, [
F(t.$slots, "source")
], 512)) : d("", !0),
i(h) ? (u(), U(le, { key: 3 })) : d("", !0)
], 4));
}
};
export {
ke as default
};