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