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