vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
303 lines (302 loc) • 11 kB
JavaScript
import { useSlots as J, onMounted as L, computed as h, ref as x, watch as O, nextTick as K, openBlock as r, createElementBlock as c, normalizeStyle as p, unref as t, renderSlot as C, normalizeProps as Q, mergeProps as P, createCommentVNode as d, createElementVNode as f, toDisplayString as y, Fragment as T, renderList as R, createVNode as Y, createBlock as Z } from "vue";
import { u as tt, c as et, t as lt, a as at, p as k, b as ot, o as st, e as V, g as nt, d as rt, s as $, i as b, f as w, X as it, w as ut } from "./index-WrV3SAID.js";
import { u as E } from "./useNestedProp-Cj0kHD7k.js";
import ct from "./vue-ui-skeleton-Qec_XSRf.js";
import { _ as dt } from "./PackageVersion-1NslmM8M.js";
const ft = ["onClick"], pt = { key: 1 }, yt = ["xmlns", "viewBox"], mt = ["id"], gt = ["stop-color"], ht = ["stop-color"], vt = ["height", "width", "fill", "rx"], xt = ["height", "width", "fill", "rx"], kt = ["height", "width", "fill", "rx"], bt = {
key: 2,
ref: "source",
dir: "auto"
}, At = {
__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(_, { emit: B }) {
const { vue_ui_sparkbar: M } = tt(), o = _, U = J();
L(() => {
U["chart-background"] && console.warn("VueUiSparkbar does not support the #chart-background slot.");
});
const S = h(() => !!o.dataset && o.dataset.length), A = x(et()), e = h({
get: () => N(),
set: (l) => l
});
function N() {
const l = E({
userConfig: o.config,
defaultConfig: M
});
return l.theme ? {
...E({
userConfig: lt.vue_ui_sparkbar[l.theme] || o.config,
defaultConfig: l
}),
customPalette: at[l.theme] || k
} : l;
}
O(() => o.config, (l) => {
e.value = N();
}, { deep: !0 });
const j = h(() => ot(e.value.customPalette)), m = x(o.dataset.map((l) => ({
...l,
value: e.value.style.animation.show ? 0 : l.value || 0,
formatter: l.formatter || null
}))), D = x(null);
L(async () => {
st(o.dataset) && V({
componentName: "VueUiSparkbar",
type: "dataset"
}), F();
});
function F() {
if (e.value.style.animation.show) {
let z = function() {
u += a / l, u < a ? (m.value = m.value.map((n, v) => ({
...n,
value: n.value += s[v]
})), D.value = requestAnimationFrame(z)) : m.value = o.dataset.map((n) => ({
...n,
value: n.value || 0,
formatter: n.formatter || null
}));
};
const l = e.value.style.animation.animationFrames, s = o.dataset.map((n, v) => n.value / l), a = o.dataset.map((n) => n.value || 0).reduce((n, v) => n + v, 0);
let u = 0;
z();
}
}
O(() => o.dataset, async (l) => {
cancelAnimationFrame(D.value), m.value = o.dataset.map((s) => ({
...s,
value: e.value.style.animation.show ? 0 : s.value || 0,
formatter: s.formatter || null
})), K(F);
}, { deep: !0 });
const i = x({
width: 500,
height: 16
}), G = h(() => Math.max(...o.dataset.map((l) => l.value))), W = h(() => (o.dataset.forEach((l, s) => {
nt({
datasetObject: l,
requiredAttributes: ["name", "value"]
}).forEach((a) => {
V({
componentName: "VueUiSparkbar",
type: "datasetSerieAttribute",
property: a,
index: s
});
});
}), m.value.map((l, s) => ({
...l,
value: l.value || 0,
color: rt(l.color) || j.value[s] || k[s] || k[s % k.length]
}))));
function q(l) {
return l / G.value;
}
function I(l) {
return e.value.style.layout.independant ? l.target ? l.value / l.target : e.value.style.layout.percentage ? l.value > 100 ? 1 : l.value / 100 : e.value.style.layout.target === 0 ? 1 : l.value / e.value.style.layout.target : q(l.value);
}
function g(l) {
return e.value.style.layout.independant && l.target || e.value.style.layout.target;
}
const H = B;
function X(l, s) {
H("selectDatapoint", { datapoint: l, index: s });
}
return (l, s) => (r(), c("div", {
style: p({
width: "100%",
fontFamily: t(e).style.fontFamily,
background: o.backgroundOpacity !== null ? t($)(t(e).style.backgroundColor, o.backgroundOpacity) : t(e).style.backgroundColor
})
}, [
l.$slots.title ? C(l.$slots, "title", Q(P({ key: 0 }, { title: { ...l.title, title: t(e).style.title.text, subtitle: t(e).style.title.subtitle.text } }))) : d("", !0),
!l.$slots.title && t(e).style.title.text ? (r(), c("div", {
key: 1,
class: "vue-ui-sparkbar-title-container",
style: p({
background: t(e).style.title.backgroundColor,
margin: t(e).style.title.margin,
textAlign: t(e).style.title.textAlign
})
}, [
f("div", {
class: "vue-ui-sparkbar-title",
style: p({
fontSize: t(e).style.title.fontSize + "px",
color: t(e).style.title.color,
fontWeight: t(e).style.title.bold ? "bold" : "normal"
})
}, y(t(e).style.title.text), 5),
t(e).style.title.subtitle.text ? (r(), c("div", {
key: 0,
class: "vue-ui-sparkbar-subtitle",
style: p({
fontSize: t(e).style.title.subtitle.fontSize + "px",
color: t(e).style.title.subtitle.color,
fontWeight: t(e).style.title.subtitle.bold ? "bold" : "normal"
})
}, y(t(e).style.title.subtitle.text), 5)) : d("", !0)
], 4)) : d("", !0),
(r(!0), c(T, null, R(t(W), (a, u) => (r(), c(T, null, [
t(S) ? (r(), c("div", {
key: 0,
style: p(`display:flex !important;${["left", "right"].includes(t(e).style.labels.name.position) ? `flex-direction: ${t(e).style.labels.name.position === "right" ? "row-reverse" : "row"} !important` : "flex-direction:column !important"};gap:${t(e).style.gap}px !important;align-items:center;${_.dataset.length > 0 && u !== _.dataset.length - 1 ? "margin-bottom:6px" : ""}`),
onClick: () => X(a, u)
}, [
C(l.$slots, "data-label", P({ ref_for: !0 }, { bar: {
...a,
target: g(a),
valueLabel: t(b)(
a.formatter,
a.value,
t(w)({
p: a.prefix || "",
v: a.value,
s: a.suffix || "",
r: a.rounding || 0
}),
{ datapoint: a, seriesIndex: u }
),
targetLabel: t(b)(
a.formatter,
g(a),
t(w)({
p: a.prefix || "",
v: g(a),
s: a.suffix || "",
r: a.rounding || 0
}),
{ datapoint: a, seriesIndex: u }
)
} })),
l.$slots["data-label"] ? d("", !0) : (r(), c("div", {
key: 0,
style: p({
width: t(e).style.labels.name.width,
color: t(e).style.labels.name.color,
fontSize: t(e).style.labels.fontSize + "px",
fontWeight: t(e).style.labels.name.bold ? "bold" : "normal",
textAlign: ["left", "right"].includes(t(e).style.labels.name.position) || ["top", "top-left"].includes(t(e).style.labels.name.position) ? "left" : t(e).style.labels.name.position === "top-center" ? "center" : "right"
})
}, [
f("span", null, y(a.name), 1),
t(e).style.labels.value.show ? (r(), c("span", {
key: 0,
style: p(`font-weight:${t(e).style.labels.value.bold ? "bold" : "normal"}`)
}, ": " + y(t(b)(
a.formatter,
a.value,
t(w)({
p: a.prefix || "",
v: a.value,
s: a.suffix || "",
r: a.rounding || 0
}),
{ datapoint: a, seriesIndex: u }
)), 5)) : d("", !0),
t(e).style.layout.showTargetValue ? (r(), c("span", pt, y(" " + t(e).style.layout.targetValueText) + " " + y(t(b)(
a.formatter,
g(a),
t(w)({
p: a.prefix || "",
v: g(a),
s: a.suffix || "",
r: a.rounding || 0
}),
{ datapoint: a, seriesIndex: u }
)), 1)) : d("", !0)
], 4)),
(r(), c("svg", {
xmlns: t(it),
viewBox: `0 0 ${t(i).width} ${t(i).height}`,
width: "100%"
}, [
Y(dt),
f("defs", null, [
f("linearGradient", {
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `sparkbar_gradient_${u}_${t(A)}`
}, [
f("stop", {
offset: "0%",
"stop-color": t($)(t(ut)(a.color, 0.03), 100 - t(e).style.bar.gradient.intensity)
}, null, 8, gt),
f("stop", {
offset: "100%",
"stop-color": a.color
}, null, 8, ht)
], 8, mt)
]),
f("rect", {
height: t(i).height,
width: t(i).width,
x: 0,
y: 0,
fill: t($)(t(e).style.gutter.backgroundColor, t(e).style.gutter.opacity),
rx: t(i).height / 2
}, null, 8, vt),
f("rect", {
height: t(i).height,
width: t(i).width * I(a),
x: 0,
y: 0,
fill: t(e).style.bar.gradient.underlayerColor,
rx: t(i).height / 2
}, null, 8, xt),
f("rect", {
height: t(i).height,
width: t(i).width * I(a),
x: 0,
y: 0,
fill: t(e).style.bar.gradient.show ? `url(#sparkbar_gradient_${u}_${t(A)})` : a.color,
rx: t(i).height / 2
}, null, 8, kt)
], 8, yt))
], 12, ft)) : d("", !0)
], 64))), 256)),
l.$slots.source ? (r(), c("div", bt, [
C(l.$slots, "source")
], 512)) : d("", !0),
t(S) ? d("", !0) : (r(), Z(ct, {
key: 3,
config: {
type: "sparkbar",
style: {
backgroundColor: t(e).style.backgroundColor,
sparkbar: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"]))
], 4));
}
};
export {
At as default
};