vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
365 lines (364 loc) • 16.8 kB
JavaScript
import { defineAsyncComponent as _e, ref as c, toRefs as we, computed as u, watch as R, nextTick as K, onMounted as Le, createElementBlock as r, openBlock as s, normalizeStyle as Ae, createCommentVNode as h, createBlock as xe, unref as i, createVNode as $e, createElementVNode as F, renderSlot as Q, toDisplayString as Y } from "vue";
import { c as Te, t as Se, R as ee, o as G, g as Ne, U as w, al as Fe, X as ze, s as U, A as le, d as te, a as Be } from "./lib-BwysEpWI.js";
import { t as Ee, u as Me } from "./useResponsive-DfdjqQps.js";
import { u as De, a as Z } from "./useNestedProp-OFRiX4kU.js";
import { u as Ie, B as je } from "./BaseScanner-BMpwQAfz.js";
import { u as Oe } from "./useFitSvgText-2crs6Fv5.js";
import { u as Ve } from "./useThemeCheck-DGJ31Vi5.js";
import { _ as Re } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ae = { style: { backgroundColor: "#1A1A1A", dataLabel: { color: "#CCCCCC" }, trendLabel: { color: "#CCCCCC" } } }, ne = { style: { backgroundColor: "#FFF8E1", line: { smooth: !1 }, dataLabel: { color: "#424242" }, trendLabel: { color: "#424242" } } }, oe = { style: { backgroundColor: "#1E1E1E", line: { smooth: !1 }, dataLabel: { color: "#BDBDBD" }, trendLabel: { color: "#BDBDBD" } } }, ue = { style: { backgroundColor: "#1A1A1A", line: { stroke: "#00FF00", smooth: !1 }, dataLabel: { color: "#AACCAA" }, trendLabel: { color: "#99CC99" }, arrow: { colors: { positive: "#66CC66", negative: "#196619" } } } }, se = { style: { backgroundColor: "#fbfafa", line: { stroke: "#B9B99D" }, dataLabel: { color: "#8A9892" }, trendLabel: { color: "#99CC99" }, arrow: { colors: { positive: "#B9B99D", negative: "#C09E85", neutral: "#A5AFC1" } } } }, re = { style: { backgroundColor: "#f6f6fb", line: { stroke: "#4A6A75" }, dataLabel: { color: "#61747E" }, trendLabel: { color: "#8A9892" }, arrow: { colors: { positive: "#4A6A75", negative: "#C09E85", neutral: "#ABB1BC" } } } }, ie = {
default: {},
dark: ae,
celebration: ne,
celebrationNight: oe,
hack: ue,
zen: se,
concrete: re
}, yl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: ne,
celebrationNight: oe,
concrete: re,
dark: ae,
default: ie,
hack: ue,
zen: se
}, Symbol.toStringTag, { value: "Module" })), Ge = ["id"], Ue = ["xmlns", "viewBox"], Ze = ["width", "height"], Pe = ["id"], We = ["stop-color"], He = ["stop-color"], qe = { key: 1 }, Xe = ["d", "fill"], Je = ["d", "fill"], Ke = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], Qe = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], Ye = ["d"], el = ["fill", "d"], ll = ["x", "y", "width", "height"], tl = ["x", "y", "fill", "font-size", "font-weight"], al = ["stroke", "cx", "cy", "fill"], nl = ["x", "y", "font-size", "fill", "font-weight"], ol = {
__name: "vue-ui-spark-trend",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(ve) {
const de = _e(() => import("./PackageVersion-BLzm8l_I.js")), { vue_ui_spark_trend: ce } = De(), { isThemeValid: fe, warnInvalidTheme: he } = Ve(), y = ve, z = c(null), P = c(null), W = c(null), L = c(null), x = c(null), $ = c(!1), p = c(null), A = c(Te()), e = c(M()), { loading: C, FINAL_DATASET: B, manualLoading: E } = Ie({
...we(y),
FINAL_CONFIG: e,
prepareConfig: M,
skeletonDataset: [1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233],
skeletonConfig: Se({
defaultConfig: e.value,
userConfig: {
style: {
animation: { show: !1 },
backgroundColor: "#99999930",
line: {
stroke: "#6A6A6A",
useColorTrend: !1
},
dataLabel: { show: !1, useColorTrend: !1, color: "#6A6A6A" }
}
}
})
});
function M() {
const l = Z({
userConfig: y.config,
defaultConfig: ce
}), t = l.theme;
if (!t) return l;
if (!fe.value(l))
return he(l), l;
const o = Z({
userConfig: ie[t] || y.config,
defaultConfig: l
});
return Z({
userConfig: y.config,
defaultConfig: o
});
}
const g = u(() => ee({
data: B.value,
threshold: e.value.downsample.threshold
}));
R(() => y.config, (l) => {
e.value = M(), j.value = e.value.style.width, _.value = e.value.style.height, H();
}, { deep: !0 });
function D(l) {
return l.map((t) => w(t));
}
const k = c(ee({
data: B.value,
threshold: e.value.downsample.threshold
}).map((l) => e.value.style.animation.show || [void 0, 1 / 0, -1 / 0, null, NaN].includes(l) ? null : l));
R(g, (l) => {
p.value && (cancelAnimationFrame(p.value), p.value = null), e.value.style.animation.show ? k.value = Array(l.length).fill(null) : k.value = l.map(
(t) => ![void 0, 1 / 0, -1 / 0, null].includes(t) && !Number.isNaN(t) ? t : null
), I(), K(() => N(".vue-ui-sparktrend-progress-label", 6));
}, { deep: !0, immediate: !0 }), R(
() => JSON.stringify(y.dataset),
() => {
p.value && (cancelAnimationFrame(p.value), p.value = null), E.value = G(y.dataset);
const l = g.value;
k.value = e.value.style.animation.show ? Array(l.length).fill(null) : l.map((t) => Number.isFinite(t) ? t : null), I(), K(() => N(".vue-ui-sparktrend-progress-label", 6));
},
{ deep: !1, immediate: !0 }
);
function I() {
let t = 1e3 / e.value.style.animation.animationFrames, o = performance.now();
if (!C.value && e.value.style.animation.show && e.value.style.animation.animationFrames && B.value.length > 1) {
let b = function() {
$.value = !0;
let X = performance.now(), J = X - o;
J > t ? (o = X - J % t, f < g.value.length ? (k.value.push(g.value[f]), f += 1, p.value = requestAnimationFrame(b)) : (cancelAnimationFrame(p.value), k.value = D(g.value), $.value = !1, N(".vue-ui-sparktrend-progress-label", 6))) : p.value = requestAnimationFrame(b);
};
k.value = [];
let f = 0;
b();
}
}
Le(() => {
H();
});
const ye = u(() => e.value.debug);
function H() {
if (G(y.dataset) && (Ne({
componentName: "VueUiSparkTrend",
type: "dataset",
debug: ye.value
}), E.value = !0), G(y.dataset) || (E.value = !1), e.value.responsive) {
const l = Ee(() => {
const { width: t, height: o } = Me({
chart: z.value,
source: W.value
});
requestAnimationFrame(() => {
j.value = t, _.value = o;
});
});
L.value && (x.value && L.value.unobserve(x.value), L.value.disconnect()), L.value = new ResizeObserver(l), x.value = z.value.parentNode, L.value.observe(x.value);
}
I(), N(".vue-ui-sparktrend-progress-label", 6);
}
const j = c(e.value.style.width), _ = c(e.value.style.height), v = u(() => ({
height: _.value,
width: j.value
})), n = u(() => ({
top: e.value.style.padding.top,
left: e.value.style.padding.left,
right: v.value.width - e.value.style.padding.right,
bottom: v.value.height - e.value.style.padding.bottom,
height: v.value.height - (e.value.style.padding.top + e.value.style.padding.bottom) - (e.value.style.dataLabel.show ? e.value.style.dataLabel.fontSize : 0),
width: v.value.width - (e.value.style.padding.left + e.value.style.padding.right)
})), O = u(() => {
const l = D(g.value).filter(Number.isFinite);
if (!l.length) return { max: 0, min: 0 };
let t = l[0], o = l[0];
for (let f = 1; f < l.length; f++) {
const b = l[f];
b > t && (t = b), b < o && (o = b);
}
return { max: t, min: o };
}), pe = u(() => {
const l = g.value, t = l.length ? l[l.length - 1] : "x";
return [
A.value,
l.length,
Number.isFinite(t) ? t : "x",
e.value.downsample.threshold,
e.value.style.line.smooth ? "s" : "l"
].join("-");
}), T = u(() => {
const l = O.value.min >= 0 ? 0 : O.value.min;
return Math.abs(l);
}), ge = u(() => O.value.max + T.value);
function q(l) {
return l / ge.value;
}
const me = u(() => g.value.length), a = u(() => k.value.map((l, t) => {
const o = isNaN(l) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(l) ? 0 : l || 0;
return {
value: w(l),
absoluteValue: w(o),
plotValue: w(o + T.value),
toMax: q(o + T.value),
x: n.value.left + w(t * (n.value.width / (me.value - 1))) - e.value.style.padding.right,
y: n.value.bottom - w(n.value.height * q(o + T.value))
};
})), S = u(() => {
const l = D(g.value);
return e.value.style.trendLabel.trendType === "global" ? Fe(l) : e.value.style.trendLabel.trendType === "n-1" && l.length > 1 ? (l.at(-1) / l.at(-2) - 1) * 100 : e.value.style.trendLabel.trendType === "lastToFirst" ? (l.at(-1) / l[0] - 1) * 100 : 0;
}), V = u(() => $.value || S.value === 0 ? "neutral" : S.value > 0 ? "positive" : "negative"), m = u(() => e.value.style.arrow.colors[V.value]), be = u(() => {
const l = { x: a.value[0].x, y: v.value.height - 6 }, t = { x: a.value[a.value.length - 1].x, y: v.value.height - 6 }, o = [];
return a.value.forEach((f) => {
o.push(`${f.x},${f.y} `);
}), [l.x, l.y, ...o, t.x, t.y].toString();
}), ke = u(() => {
let l = [];
return a.value.forEach((t) => {
l.push(`${t.x},${t.y} `);
}), `M ${l.toString()}`;
}), d = u(() => _.value / 2 - e.value.style.trendLabel.fontSize), Ce = u(() => n.value.left * 0.8), { fitText: N } = Oe({
svgRef: P,
unitWidth: Ce,
fontSize: e.value.style.trendLabel.fontSize
});
return (l, t) => (s(), r("div", {
ref_key: "sparkTrendChart",
ref: z,
class: "vue-data-ui-component vue-ui-spark-trend",
id: A.value,
style: Ae(`width:100%;font-family:${e.value.style.fontFamily};background:${e.value.style.backgroundColor}`)
}, [
(s(), r("svg", {
key: pe.value,
ref_key: "svgRef",
ref: P,
xmlns: i(ze),
viewBox: `0 0 ${v.value.width} ${v.value.height}`,
style: "width:100%;background:transparent;overflow:visible"
}, [
$e(i(de)),
l.$slots["chart-background"] ? (s(), r("foreignObject", {
key: 0,
x: 0,
y: 0,
width: v.value.width <= 0 ? 10 : v.value.width,
height: v.value.height <= 0 ? 10 : v.value.height,
style: {
pointerEvents: "none"
}
}, [
Q(l.$slots, "chart-background", {}, void 0, !0)
], 8, Ze)) : h("", !0),
F("defs", null, [
F("linearGradient", {
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%",
id: `pill_gradient_${A.value}`
}, [
F("stop", {
offset: "0%",
"stop-color": i(U)(e.value.style.line.useColorTrend ? m.value : e.value.style.line.stroke, e.value.style.area.opacity)
}, null, 8, We),
F("stop", {
offset: "100%",
"stop-color": e.value.style.backgroundColor
}, null, 8, He)
], 8, Pe)
]),
e.value.style.area.show && a.value[0] ? (s(), r("g", qe, [
e.value.style.line.smooth ? (s(), r("path", {
key: 0,
d: `M ${a.value[0].x},${n.value.bottom} ${i(le)(a.value)} L ${a.value.at(-1).x},${n.value.bottom} Z`,
fill: e.value.style.area.useGradient ? `url(#pill_gradient_${A.value})` : i(U)(e.value.style.line.useColorTrend ? m.value : e.value.style.line.stroke, e.value.style.area.opacity),
stroke: "none"
}, null, 8, Xe)) : (s(), r("path", {
key: 1,
d: `M${be.value}Z`,
fill: e.value.style.area.useGradient ? `url(#pill_gradient_${A.value})` : i(U)(e.value.style.line.useColorTrend ? m.value : e.value.style.line.stroke, e.value.style.area.opacity),
stroke: "none"
}, null, 8, Je))
])) : h("", !0),
e.value.style.line.smooth && a.value.length ? (s(), r("path", {
key: 2,
d: `M ${i(le)(a.value)}`,
stroke: e.value.style.line.useColorTrend ? m.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, Ke)) : h("", !0),
!e.value.style.line.smooth && a.value.length ? (s(), r("path", {
key: 3,
d: ke.value,
stroke: e.value.style.line.useColorTrend ? m.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, Qe)) : h("", !0),
i(C) ? (s(), r("path", {
key: 4,
fill: "#6A6A6A",
d: `M ${n.value.left / 2 + 6}, ${d.value + 7} ${n.value.left / 2 - 7}, ${d.value} ${n.value.left / 2 - 7}, ${d.value + 14} Z`
}, null, 8, Ye)) : (s(), r("path", {
key: 5,
fill: m.value,
d: V.value === "positive" ? `M ${n.value.left / 2}, ${d.value} ${n.value.left / 2 - 7}, ${d.value + 12} ${n.value.left / 2 + 7}, ${d.value + 12} Z` : V.value === "negative" ? `M ${n.value.left / 2}, ${d.value + 12} ${n.value.left / 2 - 7}, ${d.value} ${n.value.left / 2 + 7}, ${d.value} Z` : `M ${n.value.left / 2 + 6}, ${d.value + 7} ${n.value.left / 2 - 7}, ${d.value} ${n.value.left / 2 - 7}, ${d.value + 14} Z`
}, null, 8, el)),
i(C) ? (s(), r("rect", {
key: 6,
x: n.value.left / 2 - e.value.style.trendLabel.fontSize - 2,
y: _.value / 2 + e.value.style.trendLabel.fontSize - 2,
width: e.value.style.trendLabel.fontSize * 2,
height: e.value.style.trendLabel.fontSize,
fill: "#6A6A6A80",
rx: "3"
}, null, 8, ll)) : h("", !0),
!$.value && !i(C) ? (s(), r("text", {
key: 7,
class: "vue-ui-sparktrend-progress-label",
x: n.value.left / 2,
y: _.value / 2 + e.value.style.trendLabel.fontSize * 2,
"text-anchor": "middle",
fill: e.value.style.trendLabel.useColorTrend ? m.value : e.value.style.trendLabel.color,
"font-size": e.value.style.trendLabel.fontSize,
"font-weight": e.value.style.trendLabel.bold ? "bold" : "normal"
}, Y(i(te)({
p: S.value > 0 ? "+" : "",
v: S.value,
s: "%",
r: e.value.style.trendLabel.rounding
})), 9, tl)) : h("", !0),
a.value.length && a.value.at(-1).x !== void 0 ? (s(), r("circle", {
key: 8,
stroke: e.value.style.backgroundColor,
"stroke-width": 2,
cx: a.value.at(-1).x,
cy: a.value.at(-1).y,
r: 4,
fill: i(C) ? "#6A6A6A" : m.value
}, null, 8, al)) : h("", !0),
a.value.length && a.value.at(-1).x !== void 0 && e.value.style.dataLabel.show ? (s(), r("text", {
key: 9,
"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 ? m.value : e.value.style.dataLabel.color,
"font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
}, Y(i(Be)(
e.value.style.dataLabel.formatter,
a.value.at(-1).value,
i(te)({
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, nl)) : h("", !0)
], 8, Ue)),
l.$slots.source ? (s(), r("div", {
key: 0,
ref_key: "source",
ref: W,
dir: "auto"
}, [
Q(l.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
i(C) ? (s(), xe(je, { key: 1 })) : h("", !0)
], 12, Ge));
}
}, ul = /* @__PURE__ */ Re(ol, [["__scopeId", "data-v-74429f5b"]]), pl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ul
}, Symbol.toStringTag, { value: "Module" }));
export {
yl as a,
pl as b,
ul as v
};