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