vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
404 lines (403 loc) • 12.3 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { Bt as t, Jt as n, Kt as r, Pt as i, S as a, Vt as ee, X as o, i as s, jt as te, pt as ne, q as re, t as ie, tt as c, w as ae } from "./lib-Bttd6u5E.js";
import { n as oe, t as l } from "./useHints-Dq_w2E8B.js";
import { t as u } from "./useConfig-D3scuR88.js";
import { n as d, t as se } from "./BaseScanner-DZvpgOjM.js";
import { t as f } from "./useNestedProp-vPNvh7rV.js";
import { t as ce } from "./useThemeCheck-C43Tcqmk.js";
import { t as le } from "./DefGrad-DVBqDjhO.js";
import { t as ue } from "./usePrefersMotion-BC-CsqR1.js";
import { t as de } from "./vue_ui_sparkbar-z6qO--Kf.js";
import { Fragment as p, computed as m, createBlock as fe, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineAsyncComponent as pe, guardReactiveProps as me, mergeProps as y, nextTick as b, normalizeProps as he, normalizeStyle as x, onMounted as S, openBlock as C, ref as w, renderList as ge, renderSlot as T, toDisplayString as E, toRefs as D, unref as O, useSlots as k, watch as A } from "vue";
//#region src/components/vue-ui-sparkbar.vue
var j = /* @__PURE__ */ e({ default: () => R }), M = [
"onClick",
"onMouseenter",
"onMouseleave"
], N = {
key: 1,
class: "vue-ui-sparkbar-datapoint-value"
}, P = ["xmlns", "viewBox"], F = [
"height",
"width",
"fill",
"rx"
], I = [
"height",
"width",
"fill",
"rx"
], L = [
"height",
"width",
"fill",
"rx"
], _e = {
key: 2,
ref: "source",
dir: "auto"
}, R = {
__name: "vue-ui-sparkbar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
},
backgroundOpacity: {
type: Number,
default: null
}
},
emits: ["selectDatapoint"],
setup(e, { emit: j }) {
let R = pe(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), { vue_ui_sparkbar: z } = u(), { isThemeValid: ve, warnInvalidTheme: ye } = ce(), B = ue(), V = e, be = k();
S(() => {
be["chart-background"] && console.warn("VueUiSparkbar does not support the #chart-background slot.");
});
let H = w(re()), U = w(q());
oe({
config: () => U.value,
dataset: () => V.dataset,
component: "VueUiSparkbar",
rules: [l.noHint]
});
let xe = m(() => n({
defaultConfig: { style: {
backgroundColor: "#99999930",
animation: { show: !1 },
layout: { independant: !0 },
gutter: {
backgroundColor: "#6A6A6A",
opacity: 50
},
bar: { gradient: { underlayerColor: "#6A6A6A" } }
} },
userConfig: U.value.skeletonConfig ?? {}
})), { loading: W, FINAL_DATASET: G, manualLoading: Se } = d({
...D(V),
FINAL_CONFIG: U,
prepareConfig: q,
skeletonDataset: V.config?.skeletonDataset ?? [
{
name: "_",
value: 21,
target: 25,
color: "#808080"
},
{
name: "_",
value: 13,
target: 25,
color: "#ADADAD"
},
{
name: "_",
value: 8,
target: 25,
color: "#DBDBDB"
}
],
skeletonConfig: n({
defaultConfig: U.value,
userConfig: xe.value
})
}), K = m(() => !!U.value.debug);
function q() {
let e = f({
userConfig: V.config,
defaultConfig: z
}), t = e.theme;
if (!t) return e;
if (!ve.value(e)) return ye(e), e;
let n = f({
userConfig: de[t] || V.config,
defaultConfig: e
}), a = f({
userConfig: V.config,
defaultConfig: n
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : r[t] || i
};
}
A(() => V.config, (e) => {
U.value = q();
}, { deep: !0 });
let Ce = m(() => ae(U.value.customPalette)), J = w(G.value.map((e) => ({
...e,
value: U.value.style.animation.show ? 0 : e.value || 0,
formatter: e.formatter || null
}))), Y = w(null);
S(async () => {
te(V.dataset) && c({
componentName: "VueUiSparkbar",
type: "dataset",
debug: K.value
}), X();
});
function X() {
if (U.value.style.animation.show && !B.value) {
let e = U.value.style.animation.animationFrames, t = G.value.map((t, n) => t.value / e), n = G.value.map((e) => e.value || 0).reduce((e, t) => e + t, 0), r = 0;
function i() {
r += n / e, r < n ? (J.value = J.value.map((e, n) => ({
...e,
value: e.value += t[n]
})), Y.value = requestAnimationFrame(i)) : J.value = G.value.map((e) => ({
...e,
value: e.value || 0,
formatter: e.formatter || null
}));
}
i();
}
}
A(() => G.value, async (e) => {
cancelAnimationFrame(Y.value), J.value = G.value.map((e) => ({
...e,
value: U.value.style.animation.show && !B.value ? 0 : e.value || 0,
formatter: e.formatter || null
})), b(X);
}, { deep: !0 });
let Z = w({
width: 500,
height: 16
}), we = m(() => Math.max(...G.value.map((e) => e.value))), Te = m(() => (G.value.forEach((e, t) => {
ne({
datasetObject: e,
requiredAttributes: ["name", "value"]
}).forEach((e) => {
c({
componentName: "VueUiSparkbar",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: K.value
});
});
}), J.value.map((e, t) => ({
...e,
value: e.value || 0,
color: a(e.color) || Ce.value[t] || i[t] || i[t % i.length]
}))));
function Ee(e) {
return e / we.value;
}
function Q(e) {
return U.value.style.layout.independant ? e.target ? e.value / e.target : U.value.style.layout.percentage ? e.value > 100 ? 1 : e.value / 100 : U.value.style.layout.target === 0 ? 1 : e.value / U.value.style.layout.target : Ee(e.value);
}
function $(e) {
return U.value.style.layout.independant && e.target || U.value.style.layout.target;
}
let De = j;
function Oe(e, t) {
De("selectDatapoint", {
datapoint: e,
index: t
}), U.value.events.datapointClick && U.value.events.datapointClick({
datapoint: e,
seriesIndex: t
});
}
function ke(e, t) {
U.value.events.datapointEnter && U.value.events.datapointEnter({
datapoint: e,
seriesIndex: t
});
}
function Ae(e, t) {
U.value.events.datapointLeave && U.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
});
}
return (e, n) => (C(), g("div", {
class: "vue-data-ui-component vue-ui-sparkbar",
style: x({
width: "100%",
position: "relative",
fontFamily: U.value.style.fontFamily,
background: V.backgroundOpacity === null ? U.value.style.backgroundColor : O(t)(U.value.style.backgroundColor, V.backgroundOpacity)
})
}, [
e.$slots.title ? T(e.$slots, "title", he(me({ title: {
...e.title,
title: U.value.style.title.text,
subtitle: U.value.style.title.subtitle.text
} })), void 0, void 0, 0) : h("", !0),
!e.$slots.title && U.value.style.title.text ? (C(), g("div", {
key: 1,
class: "vue-ui-sparkbar-title-container",
style: x({
background: U.value.style.title.backgroundColor,
margin: U.value.style.title.margin,
textAlign: U.value.style.title.textAlign
})
}, [_("div", {
class: "vue-ui-sparkbar-title",
style: x({
fontSize: U.value.style.title.fontSize + "px",
color: U.value.style.title.color,
fontWeight: U.value.style.title.bold ? "bold" : "normal"
})
}, E(U.value.style.title.text), 5), U.value.style.title.subtitle.text ? (C(), g("div", {
key: 0,
class: "vue-ui-sparkbar-subtitle",
style: x({
fontSize: U.value.style.title.subtitle.fontSize + "px",
color: U.value.style.title.subtitle.color,
fontWeight: U.value.style.title.subtitle.bold ? "bold" : "normal"
})
}, E(U.value.style.title.subtitle.text), 5)) : h("", !0)], 4)) : h("", !0),
(C(!0), g(p, null, ge(Te.value, (n, r) => (C(), g("div", {
style: x(`display:flex !important;${["left", "right"].includes(U.value.style.labels.name.position) ? `flex-direction: ${U.value.style.labels.name.position === "right" ? "row-reverse" : "row"} !important` : "flex-direction:column !important"};gap:${U.value.style.gap}px !important;align-items:center;${O(G).length > 0 && r !== O(G).length - 1 ? "margin-bottom:6px" : ""}`),
onClick: (e) => Oe(n, r),
onMouseenter: (e) => ke(n, r),
onMouseleave: (e) => Ae(n, r)
}, [
O(W) ? h("", !0) : T(e.$slots, "data-label", y({ ref_for: !0 }, { bar: {
...n,
target: $(n),
valueLabel: O(s)(n.formatter, n.value, O(o)({
p: n.prefix || "",
v: n.value,
s: n.suffix || "",
r: n.rounding || 0
}), {
datapoint: n,
seriesIndex: r
}),
targetLabel: O(s)(n.formatter, $(n), O(o)({
p: n.prefix || "",
v: $(n),
s: n.suffix || "",
r: n.rounding || 0
}), {
datapoint: n,
seriesIndex: r
})
} }), void 0, void 0, 0),
!e.$slots["data-label"] || O(W) ? (C(), g("div", {
key: 1,
style: x({
display: "flex",
justifyContent: ["right", "top-right"].includes(U.value.style.labels.name.position) ? "flex-end" : ["top-center"].includes(U.value.style.labels.name.position) ? "center" : "flex-start",
alignItems: "center",
width: U.value.style.labels.name.width,
color: U.value.style.labels.name.color,
fontSize: U.value.style.labels.fontSize + "px",
fontWeight: U.value.style.labels.name.bold ? "bold" : "normal",
flexWrap: "wrap"
})
}, [O(W) ? (C(), g("div", {
key: 0,
class: "vue-ui-sparkbar-skeleton-name",
style: x({
width: "60px",
height: U.value.style.labels.fontSize + "px",
borderRadius: U.value.style.labels.fontSize / 4 + "px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginTop: "5px"
})
}, [_("div", { style: x({
height: "100%",
width: "40px",
borderRadius: U.value.style.labels.fontSize / 4 + "px",
backgroundColor: "#6A6A6A80"
}) }, null, 4), _("div", { style: x({
height: "100%",
width: "15px",
borderRadius: U.value.style.labels.fontSize / 4 + "px",
backgroundColor: "#6A6A6A80"
}) }, null, 4)], 4)) : (C(), g(p, { key: 1 }, [
_("span", null, E(n.name), 1),
U.value.style.labels.value.show ? (C(), g("span", {
key: 0,
style: x(`font-weight:${U.value.style.labels.value.bold ? "bold" : "normal"}`),
class: "vue-ui-sparkbar-datapoint-name"
}, ": " + E(O(s)(n.formatter, n.value, O(o)({
p: n.prefix || "",
v: n.value,
s: n.suffix || "",
r: n.rounding || 0
}), {
datapoint: n,
seriesIndex: r
})), 5)) : h("", !0),
U.value.style.layout.showTargetValue ? (C(), g("span", N, E(" " + U.value.style.layout.targetValueText) + " " + E(O(s)(n.formatter, $(n), O(o)({
p: n.prefix || "",
v: $(n),
s: n.suffix || "",
r: n.rounding || 0
}), {
datapoint: n,
seriesIndex: r
})), 1)) : h("", !0)
], 64))], 4)) : h("", !0),
(C(), g("svg", {
role: "img",
xmlns: O(ie),
viewBox: `0 0 ${Z.value.width} ${Z.value.height}`,
width: "100%"
}, [
v(O(R)),
_("defs", null, [v(le, {
t: "linear",
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `sparkbar_gradient_${r}_${H.value}`,
stops: [[
"0%",
O(t)(O(ee)(n.color, .03), 100 - U.value.style.bar.gradient.intensity),
1
], [
"100%",
n.color,
1
]]
}, null, 8, ["id", "stops"])]),
_("rect", {
height: Z.value.height,
width: Z.value.width,
x: 0,
y: 0,
fill: O(t)(U.value.style.gutter.backgroundColor, U.value.style.gutter.opacity),
rx: Z.value.height / 2
}, null, 8, F),
_("rect", {
height: Z.value.height,
width: Z.value.width * Q(n),
x: 0,
y: 0,
fill: U.value.style.bar.gradient.underlayerColor,
rx: Z.value.height / 2
}, null, 8, I),
_("rect", {
height: Z.value.height,
width: Z.value.width * Q(n),
x: 0,
y: 0,
fill: U.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${r}_${H.value})` : n.color,
rx: Z.value.height / 2
}, null, 8, L)
], 8, P))
], 44, M))), 256)),
e.$slots.source ? (C(), g("div", _e, [T(e.$slots, "source")], 512)) : h("", !0),
O(W) ? (C(), fe(se, { key: 3 })) : h("", !0)
], 4));
}
};
//#endregion
export { j as n, R as t };