vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
292 lines (291 loc) • 12.2 kB
JavaScript
import { defineAsyncComponent as M, computed as s, ref as k, watch as D, onMounted as ee, createElementBlock as r, openBlock as o, normalizeStyle as te, createBlock as L, createCommentVNode as i, unref as u, createVNode as ae, createElementVNode as _, renderSlot as O, toDisplayString as G } from "vue";
import { u as le, c as ne, a as oe, a2 as I, o as se, e as ue, v as c, a3 as re, X as ie, s as F, V as U, f as P, i as de } from "./index-BLtEpj8j.js";
import { u as q } from "./useNestedProp-Bw1KcAmj.js";
import { _ as ve } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const he = ["id"], ce = ["xmlns", "viewBox"], ye = ["width", "height"], fe = ["id"], pe = ["stop-color"], ge = ["stop-color"], me = { key: 1 }, ke = ["d", "fill"], _e = ["d", "fill"], be = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], we = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], xe = ["height", "width", "x"], Ce = { style: { width: "100%" } }, Le = ["x", "y", "fill", "font-size", "font-weight"], $e = ["stroke", "cx", "cy", "fill"], Ne = ["x", "y", "font-size", "fill", "font-weight"], Te = {
key: 2,
ref: "source",
dir: "auto"
}, ze = {
__name: "vue-ui-spark-trend",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(W) {
const $ = M(() => import("./BaseIcon-Ba5t14Aj.js")), X = M(() => import("./PackageVersion-CnRyWKP-.js")), Z = M(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), { vue_ui_spark_trend: R } = le(), d = W, H = s(() => !!d.dataset && d.dataset.length), b = k(ne()), e = s({
get: () => j(),
set: (t) => t
});
function j() {
const t = q({
userConfig: d.config,
defaultConfig: R
});
return t.theme ? {
...q({
userConfig: oe.vue_ui_spark_trend[t.theme] || d.config,
defaultConfig: t
})
} : t;
}
const f = s(() => I({
data: d.dataset,
threshold: e.value.downsample.threshold
}));
D(() => d.config, (t) => {
e.value = j(), A();
}, { deep: !0 }), D(() => d.dataset, (t) => {
g.value = I({
data: d.dataset,
threshold: e.value.downsample.threshold
}).map((n) => [void 0, 1 / 0, -1 / 0, null, NaN].includes(n) ? null : n);
}, { deep: !0 });
function N(t) {
return t.map((n) => c(n));
}
const g = k(I({
data: d.dataset,
threshold: e.value.downsample.threshold
}).map((t) => e.value.style.animation.show || [void 0, 1 / 0, -1 / 0, null, NaN].includes(t) ? null : t)), m = k(!1), T = k(null);
ee(() => {
A();
let n = 1e3 / e.value.style.animation.animationFrames, h = performance.now();
if (e.value.style.animation.show && e.value.style.animation.animationFrames && d.dataset.length > 1) {
let S = function() {
m.value = !0;
let B = performance.now(), E = B - h;
E > n ? (h = B - E % n, p < f.value.length ? (g.value.push(f.value[p]), p += 1, T.value = requestAnimationFrame(S)) : (cancelAnimationFrame(T.value), g.value = N(f.value), m.value = !1)) : T.value = requestAnimationFrame(S);
};
g.value = [];
let p = 0;
S();
}
});
function A() {
se(d.dataset) && ue({
componentName: "VueUiSparkTrend",
type: "dataset"
});
}
const l = k({
height: 80,
width: 300
}), y = s(() => ({
top: e.value.style.padding.top,
left: e.value.style.padding.left,
right: l.value.width - e.value.style.padding.right,
bottom: l.value.height - e.value.style.padding.bottom,
height: l.value.height - (e.value.style.padding.top + e.value.style.padding.bottom) - (e.value.style.dataLabel.show ? e.value.style.dataLabel.fontSize : 0),
width: l.value.width - (e.value.style.padding.left + e.value.style.padding.right)
})), z = s(() => {
const t = N(f.value);
return {
max: Math.max(...t.map((n) => c(n))),
min: Math.min(...t.map((n) => c(n)))
};
}), w = s(() => {
const t = z.value.min >= 0 ? 0 : z.value.min;
return Math.abs(t);
}), J = s(() => z.value.max + w.value);
function V(t) {
return t / J.value;
}
const K = s(() => f.value.length), a = s(() => g.value.map((t, n) => {
const h = isNaN(t) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t) ? 0 : t || 0;
return {
value: c(t),
absoluteValue: c(h),
plotValue: c(h + w.value),
toMax: V(h + w.value),
x: y.value.left + c(n * (y.value.width / (K.value - 1))) - e.value.style.padding.right,
y: y.value.bottom - c(y.value.height * V(h + w.value))
};
})), x = s(() => {
const t = N(f.value);
return e.value.style.trendLabel.trendType === "global" ? re(t) : e.value.style.trendLabel.trendType === "n-1" && t.length > 1 ? (t.at(-1) / t.at(-2) - 1) * 100 : e.value.style.trendLabel.trendType === "lastToFirst" ? (t.at(-1) / t[0] - 1) * 100 : 0;
}), C = s(() => m.value || x.value === 0 ? "neutral" : x.value > 0 ? "positive" : "negative"), v = s(() => e.value.style.arrow.colors[C.value]), Q = s(() => {
const t = { x: a.value[0].x, y: l.value.height - 6 }, n = { x: a.value[a.value.length - 1].x, y: l.value.height - 6 }, h = [];
return a.value.forEach((p) => {
h.push(`${p.x},${p.y} `);
}), [t.x, t.y, ...h, n.x, n.y].toString();
}), Y = s(() => {
let t = [];
return a.value.forEach((n) => {
t.push(`${n.x},${n.y} `);
}), `M ${t.toString()}`;
});
return (t, n) => (o(), r("div", {
class: "vue-ui-spark-trend",
id: b.value,
style: te(`width:100%;font-family:${e.value.style.fontFamily};background:${e.value.style.backgroundColor}`)
}, [
H.value ? (o(), r("svg", {
key: 1,
xmlns: u(ie),
viewBox: `0 0 ${l.value.width} ${l.value.height}`,
style: "width:100%;background:transparent;overflow:visible"
}, [
ae(u(X)),
t.$slots["chart-background"] ? (o(), r("foreignObject", {
key: 0,
x: 0,
y: 0,
width: l.value.width <= 0 ? 10 : l.value.width,
height: l.value.height <= 0 ? 10 : l.value.height,
style: {
pointerEvents: "none"
}
}, [
O(t.$slots, "chart-background", {}, void 0, !0)
], 8, ye)) : i("", !0),
_("defs", null, [
_("linearGradient", {
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%",
id: `pill_gradient_${b.value}`
}, [
_("stop", {
offset: "0%",
"stop-color": u(F)(e.value.style.line.useColorTrend ? v.value : e.value.style.line.stroke, e.value.style.area.opacity)
}, null, 8, pe),
_("stop", {
offset: "100%",
"stop-color": e.value.style.backgroundColor
}, null, 8, ge)
], 8, fe)
]),
e.value.style.area.show && a.value[0] ? (o(), r("g", me, [
e.value.style.line.smooth ? (o(), r("path", {
key: 0,
d: `M ${a.value[0].x},${y.value.bottom} ${u(U)(a.value)} L ${a.value.at(-1).x},${y.value.bottom} Z`,
fill: e.value.style.area.useGradient ? `url(#pill_gradient_${b.value})` : u(F)(e.value.style.line.useColorTrend ? v.value : e.value.style.line.stroke, e.value.style.area.opacity),
stroke: "none"
}, null, 8, ke)) : (o(), r("path", {
key: 1,
d: `M${Q.value}Z`,
fill: e.value.style.area.useGradient ? `url(#pill_gradient_${b.value})` : u(F)(e.value.style.line.useColorTrend ? v.value : e.value.style.line.stroke, e.value.style.area.opacity),
stroke: "none"
}, null, 8, _e))
])) : i("", !0),
e.value.style.line.smooth && a.value.length ? (o(), r("path", {
key: 2,
d: `M ${u(U)(a.value)}`,
stroke: e.value.style.line.useColorTrend ? v.value : e.value.style.line.stroke,
fill: "none",
"stroke-width": e.value.style.line.strokeWidth,
"stroke-linecap": e.value.style.line.strokeLinecap,
"stroke-linejoin": e.value.style.line.strokeLinejoin
}, null, 8, be)) : i("", !0),
!e.value.style.line.smooth && a.value.length ? (o(), r("path", {
key: 3,
d: Y.value,
stroke: e.value.style.line.useColorTrend ? v.value : e.value.style.line.stroke,
fill: "none",
"stroke-width": e.value.style.line.strokeWidth,
"stroke-linecap": e.value.style.line.strokeLinecap,
"stroke-linejoin": e.value.style.line.strokeLinejoin
}, null, 8, we)) : i("", !0),
m.value ? i("", !0) : (o(), r("foreignObject", {
key: 4,
height: l.value.height / 2,
width: l.value.height / 2,
x: l.value.height / 5,
y: 8
}, [
_("div", Ce, [
C.value === "positive" ? (o(), L(u($), {
key: 0,
stroke: v.value,
name: "arrowTop",
size: l.value.height / 2
}, null, 8, ["stroke", "size"])) : i("", !0),
C.value === "negative" ? (o(), L(u($), {
key: 1,
stroke: v.value,
name: "arrowBottom",
size: l.value.height / 2
}, null, 8, ["stroke", "size"])) : i("", !0),
C.value === "neutral" ? (o(), L(u($), {
key: 2,
stroke: v.value,
name: "arrowRight",
size: l.value.height / 2
}, null, 8, ["stroke", "size"])) : i("", !0)
])
], 8, xe)),
m.value ? i("", !0) : (o(), r("text", {
key: 5,
x: l.value.height / 2 - l.value.height / 20,
y: y.value.bottom,
"text-anchor": "middle",
fill: e.value.style.trendLabel.useColorTrend ? v.value : e.value.style.trendLabel.color,
"font-size": e.value.style.trendLabel.fontSize,
"font-weight": e.value.style.trendLabel.bold ? "bold" : "normal"
}, G(u(P)({
p: x.value > 0 ? "+" : "",
v: x.value,
s: "%",
r: e.value.style.trendLabel.rounding
})), 9, Le)),
a.value.length && a.value.at(-1).x !== void 0 ? (o(), r("circle", {
key: 6,
stroke: e.value.style.backgroundColor,
"stroke-width": 2,
cx: a.value.at(-1).x,
cy: a.value.at(-1).y,
r: 4,
fill: v.value
}, null, 8, $e)) : i("", !0),
a.value.length && a.value.at(-1).x !== void 0 && e.value.style.dataLabel.show ? (o(), r("text", {
key: 7,
"text-anchor": "middle",
x: a.value.at(-1).x,
y: a.value.at(-1).y - e.value.style.dataLabel.fontSize / 1.5,
"font-size": e.value.style.dataLabel.fontSize,
fill: e.value.style.dataLabel.useColorTrend ? v.value : e.value.style.dataLabel.color,
"font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
}, G(u(de)(
e.value.style.dataLabel.formatter,
a.value.at(-1).value,
u(P)({
p: e.value.style.dataLabel.prefix,
v: a.value.at(-1).value,
s: e.value.style.dataLabel.suffix,
r: e.value.style.dataLabel.rounding
}),
{ datapoint: a.value.at(-1) }
)), 9, Ne)) : i("", !0)
], 8, ce)) : (o(), L(u(Z), {
key: 0,
config: {
type: "sparkline",
style: {
backgroundColor: e.value.style.backgroundColor,
sparkline: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
t.$slots.source ? (o(), r("div", Te, [
O(t.$slots, "source", {}, void 0, !0)
], 512)) : i("", !0)
], 12, he));
}
}, je = /* @__PURE__ */ ve(ze, [["__scopeId", "data-v-1a673d38"]]);
export {
je as default
};