vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
474 lines (473 loc) • 21.1 kB
JavaScript
import { defineAsyncComponent as Q, useSlots as Ie, onMounted as Z, ref as v, toRefs as Te, watch as ee, computed as F, createElementBlock as s, openBlock as r, normalizeStyle as g, createCommentVNode as h, createVNode as te, createBlock as Pe, createElementVNode as d, toDisplayString as S, unref as c, Fragment as _, renderList as D, normalizeClass as z, withCtx as oe, renderSlot as U, normalizeProps as le, guardReactiveProps as ae } from "vue";
import { c as re, t as ze, i as Oe, j as i, m as B, k as Le, o as Ne, g as se, l as je, d as R, X as Ve, s as ne, h as ue, a as ie, y as Me } from "./lib-2iaAPQ_c.js";
import { u as Ue, a as G } from "./useNestedProp-2p4Tjzc8.js";
import { u as Re, B as Ge } from "./BaseScanner-BMpwQAfz.js";
import { u as We } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Ye } from "./useChartAccessibility-9icAAmYg.js";
import { _ as qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ce = { style: { backgroundColor: "#1A1A1A", bar: { gradient: { underlayerColor: "#FFFFFF" } }, legend: { name: { color: "#CCCCCC" }, value: { color: "#CCCCCC" }, percentage: { color: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, de = { style: { backgroundColor: "#FFF8E1", bar: { gradient: { underlayerColor: "#FFF8E1" } }, legend: { name: { color: "#424242" }, value: { color: "#424242" }, percentage: { color: "#424242" } }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, ve = { style: { backgroundColor: "#1E1E1E", bar: { gradient: { underlayerColor: "#FFF8E1" } }, legend: { name: { color: "#BDBDBD" }, value: { color: "#BDBDBD" }, percentage: { color: "#BDBDBD" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, pe = { style: { backgroundColor: "#1A1A1A", bar: { gradient: { underlayerColor: "#1A1A1A" } }, legend: { name: { color: "#99AA99" }, value: { color: "#AACCAA" }, percentage: { color: "#99CC99" } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, ge = { style: { backgroundColor: "#fbfafa", bar: { gradient: { underlayerColor: "#fbfafa" } }, legend: { name: { color: "#8A9892" }, value: { color: "#A0AC94" }, percentage: { color: "#8A9892" } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, fe = { style: { backgroundColor: "#f6f6fb", bar: { gradient: { underlayerColor: "#f6f6fb" } }, legend: { name: { color: "#50606C" }, value: { color: "#8A9892" }, percentage: { color: "#61747E" } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, he = {
default: {},
dark: ce,
celebration: de,
celebrationNight: ve,
hack: pe,
zen: ge,
concrete: fe
}, xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: de,
celebrationNight: ve,
concrete: fe,
dark: ce,
default: he,
hack: pe,
zen: ge
}, Symbol.toStringTag, { value: "Module" })), He = ["xmlns", "viewBox"], Xe = ["id"], Je = ["stop-color"], Ke = ["stop-color"], Qe = ["stop-color"], Ze = {
id: "stackPill",
clipPathUnits: "objectBoundingBox"
}, et = ["fill"], tt = {
key: 0,
"clip-path": "url(#stackPill)"
}, ot = ["x", "width", "height", "fill"], lt = ["x", "width", "height", "fill", "stroke"], at = ["x", "width", "height", "onClick", "onMouseenter", "onMouseleave"], rt = ["width", "height", "rx"], st = ["onClick"], nt = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "4px", "justify-content": "center" } }, ut = ["height", "width"], it = ["id"], ct = ["stop-color"], dt = ["stop-color"], vt = ["fill"], pt = {
key: 2,
ref: "source",
dir: "auto"
}, gt = {
__name: "vue-ui-sparkstackbar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(ye, { expose: me, emit: be }) {
const Ce = Q(() => import("./PackageVersion-Br3DrrFh.js")), ke = Q(() => import("./Tooltip-D0pGX8qz.js")), { vue_ui_sparkstackbar: _e } = Ue(), { isThemeValid: xe, warnInvalidTheme: we } = We(), m = ye, Ae = Ie();
Z(() => {
Ae["chart-background"] && console.warn("VueUiSparkStackbar does not support the #chart-background slot.");
});
const W = v(null), E = v(re()), O = v(!1), L = v(""), e = v(N()), { loading: x, FINAL_DATASET: b } = Re({
...Te(m),
FINAL_CONFIG: e,
prepareConfig: N,
skeletonDataset: [
{ name: "_", value: 8, color: "#808080" },
{ name: "_", value: 5, color: "#ADADAD" },
{ name: "_", value: 3, color: "#DBDBDB" }
],
skeletonConfig: ze({
defaultConfig: e.value,
userConfig: {
style: {
backgroundColor: "#99999930",
animation: { show: !1 },
bar: { gradient: { inderlayerColor: "#6A6A6A" } },
title: {
backgroundColor: "transparent"
}
}
}
})
}), { svgRef: Fe } = Ye({ config: e.value.style.title });
function N() {
const t = G({
userConfig: m.config,
defaultConfig: _e
}), l = t.theme;
if (!l) return t;
if (!xe.value(t))
return we(t), t;
const o = G({
userConfig: he[l] || m.config,
defaultConfig: t
}), a = G({
userConfig: m.config,
defaultConfig: o
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : Oe[l] || i
};
}
ee(() => m.config, (t) => {
e.value = N(), H();
}, { deep: !0 }), ee(() => b.value, (t) => {
C.value = b.value.map((l, o) => ({
...l,
color: l.color ? B(l.color) : $.value[o] || i[o] || i[o % i.length]
})), Y();
}, { deep: !0 });
const $ = F(() => Le(e.value.customPalette)), C = v(b.value.map((t, l) => ({
...t,
value: e.value.style.animation.show ? 0 : t.value || 0,
color: t.color ? B(t.color) : $.value[l] || i[l] || i[l % i.length]
}))), k = v(!0);
function Y() {
if (!e.value.style.animation.show) {
k.value = !1;
return;
}
const t = e.value.style.animation.animationFrames, l = b.value.map((n) => n.value || 0), o = l.map((n) => n / t), a = l.reduce((n, u) => n + u, 0);
let y = 0;
k.value = !0, C.value = b.value.map((n, u) => ({
...n,
value: 0,
color: n.color ? B(n.color) : $.value[u] || i[u] || i[u % i.length]
}));
function P() {
y += a / t, y < a ? (C.value = C.value.map((n, u) => ({
...n,
value: Math.min(n.value + o[u], l[u]),
color: n.color ? B(n.color) : $.value[u] || i[u] || i[u % i.length]
})), requestAnimationFrame(P)) : (k.value = !1, C.value = b.value.map((n, u) => ({
...n,
value: l[u],
color: n.color ? B(n.color) : $.value[u] || i[u] || i[u % i.length],
id: re()
})));
}
P();
}
Z(() => {
H();
});
const q = F(() => e.value.debug);
function H() {
Ne(m.dataset) ? se({
componentName: "VueUiSparkStackbar",
type: "dataset",
debug: q.value
}) : m.dataset.forEach((t, l) => {
je({
datasetObject: t,
requiredAttributes: ["name", "value"]
}).forEach((o) => {
se({
componentName: "VueUiSparkStackbar",
type: "datasetSerieAttribute",
property: o,
index: l,
debug: q.value
});
});
}), Y();
}
const f = v({
width: 500,
height: 16
}), p = v([]), X = F(() => b.value.map((t) => t.value || 0).filter((t, l) => !p.value.includes(l)).reduce((t, l) => t + l, 0)), w = F(() => C.value.map((t, l) => {
const o = t.value || 0, a = o / X.value, y = isNaN(a) ? 0 : a, P = y * f.value.width;
return {
...t,
value: o,
proportion: y,
width: P,
seriesIndex: l,
proportionLabel: R({
v: y * 100,
s: "%",
r: e.value.style.legend.percentage.rounding
})
};
})), j = F(() => w.value.filter((t, l) => !p.value.includes(l)));
function V(t) {
p.value.includes(t) ? p.value = p.value.filter((l) => l !== t) : p.value.length < C.value.length - 1 && p.value.push(t);
}
function J(t) {
if (!w.value.length)
return e.value.debug && console.warn("VueUiSparkStackbar - There are no series to show."), null;
const l = w.value.find((o) => o.name === t);
return l || (e.value.debug && console.warn(`VueUiSparkStackbar - Series name not found "${t}"`), null);
}
function $e(t) {
const l = J(t);
l !== null && p.value.includes(l.id) && V(l.seriesIndex);
}
function Se(t) {
const l = J(t);
l !== null && (p.value.includes(l.id) || V(l.seriesIndex));
}
const I = F(() => {
let t = 0;
const l = [];
for (let o = 0; o < j.value.length; o += 1)
l.push({
...j.value[o],
start: t
}), t += j.value[o].width;
return l;
}), De = be;
function K(t, l, o = !1) {
De("selectDatapoint", { datapoint: t, index: l }), e.value.events.datapointClick && !o && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.seriesIndex });
}
const M = v(null), T = v(!1), A = v(null);
function Be({ datapoint: t, seriesIndex: l }) {
O.value = !1, A.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.seriesIndex });
}
function Ee({ datapoint: t, seriesIndex: l }) {
if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.seriesIndex }), !e.value.style.tooltip.show)
return;
M.value = { datapoint: t, seriesIndex: l, config: e.value, series: w.value }, O.value = !0, A.value = l;
const o = e.value.style.tooltip.customFormat;
if (Me(o))
try {
const a = o({
seriesIndex: t.seriesIndex,
datapoint: t,
series: w.value,
config: e.value
});
typeof a == "string" && (L.value = a, T.value = !0);
} catch {
console.warn("Custom format cannot be applied."), T.value = !1;
}
if (!T.value) {
let a = "";
a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, a += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, a += `<b>${t.proportionLabel}</b>`, a += `<span>(${ie(
e.value.style.legend.value.formatter,
t.value,
R({
p: e.value.style.legend.value.prefix,
v: t.value,
s: e.value.style.legend.value.suffix,
r: e.value.style.legend.value.rounding
}),
{
datapoint: t,
seriesIndex: l
}
)})</span>`, L.value = `<div>${a}</div>`;
}
}
return me({
hideSeries: Se,
showSeries: $e
}), (t, l) => (r(), s("div", {
class: "vue-data-ui-component vue-ui-spark-stackbar",
ref_key: "sparkstackbarChart",
ref: W,
style: g(`width:100%; background:${e.value.style.backgroundColor}`)
}, [
e.value.style.title.text ? (r(), s("div", {
key: 0,
style: g(`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${e.value.style.title.margin};padding: 0 6px;text-align:${e.value.style.title.textAlign}`)
}, [
d("div", {
class: "atom-title",
style: g(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
}, S(e.value.style.title.text), 5),
e.value.style.title.subtitle.text ? (r(), s("div", {
key: 0,
class: "atom-subtitle",
style: g(`font-size:${e.value.style.title.subtitle.fontSize}px;color:${e.value.style.title.subtitle.color};font-weight:${e.value.style.title.subtitle.bold ? "bold" : "normal"}`)
}, S(e.value.style.title.subtitle.text), 5)) : h("", !0)
], 4)) : h("", !0),
(r(), s("svg", {
ref_key: "svgRef",
ref: Fe,
xmlns: c(Ve),
width: "100%",
viewBox: `0 0 ${f.value.width} ${f.value.height}`
}, [
te(c(Ce)),
d("defs", null, [
(r(!0), s(_, null, D(I.value, (o, a) => (r(), s("linearGradient", {
key: `stack_gradient_${a}`,
gradientTransform: "rotate(90)",
id: `stack_gradient_${a}_${E.value}`
}, [
d("stop", {
offset: "0%",
"stop-color": o.color
}, null, 8, Je),
d("stop", {
offset: "50%",
"stop-color": c(ne)(c(ue)(o.color, 0.05), 100 - e.value.style.bar.gradient.intensity)
}, null, 8, Ke),
d("stop", {
offset: "100%",
"stop-color": o.color
}, null, 8, Qe)
], 8, Xe))), 128)),
d("clipPath", Ze, [
d("rect", {
x: "0.005",
y: "-2",
width: "0.99",
height: "5",
rx: "3",
ry: "3",
fill: e.value.style.backgroundColor
}, null, 8, et)
])
]),
X.value > 0 ? (r(), s("g", tt, [
(r(!0), s(_, null, D(I.value, (o, a) => (r(), s("rect", {
key: `stack_underlayer_${a}`,
x: o.start,
y: 0,
width: o.width,
height: f.value.height,
fill: e.value.style.bar.gradient.underlayerColor,
class: z({ animated: !k.value && !c(x) }),
style: g({
opacity: A.value !== null && e.value.style.tooltip.show ? A.value === a ? 1 : 0.5 : 1
})
}, null, 14, ot))), 128)),
(r(!0), s(_, null, D(I.value, (o, a) => (r(), s("rect", {
key: `stack_${a}`,
x: o.start,
y: 0,
width: o.width,
height: f.value.height,
fill: e.value.style.bar.gradient.show ? `url(#stack_gradient_${a}_${E.value})` : o.color,
stroke: e.value.style.backgroundColor,
"stroke-linecap": "round",
class: z({ animated: !k.value && !c(x) }),
style: g({
opacity: A.value !== null && e.value.style.tooltip.show ? A.value === a ? 1 : 0.5 : 1
})
}, null, 14, lt))), 128)),
(r(!0), s(_, null, D(I.value, (o, a) => (r(), s("rect", {
key: `stack_trap_${a}`,
x: o.start,
y: 0,
width: o.width,
height: f.value.height,
fill: "transparent",
stroke: "none",
class: z({ animated: !k.value && !c(x) }),
onClick: () => K(o, a),
onMouseenter: () => Ee({ datapoint: o, seriesIndex: a }),
onMouseleave: (y) => Be({ datapoint: o, seriesIndex: a })
}, null, 42, at))), 128))
])) : (r(), s("rect", {
key: 1,
x: 2,
y: 1,
width: f.value.width - 4,
height: f.value.height - 2,
stroke: "#CCCCCC",
"stroke-width": "2",
fill: "transparent",
rx: (f.value.height - 4) / 2
}, null, 8, rt))
], 8, He)),
e.value.style.legend.show ? (r(), s("div", {
key: 1,
style: g(`background:transparent;margin:0 auto;margin:${e.value.style.legend.margin};justify-content:${e.value.style.legend.textAlign === "left" ? "flex-start" : e.value.style.legend.textAlign === "right" ? "flex-end" : "center"}`),
class: "vue-ui-sparkstackbar-legend"
}, [
(r(!0), s(_, null, D(w.value, (o, a) => (r(), s("div", {
style: g(`font-size:${e.value.style.legend.fontSize}px;`),
class: z({ "vue-ui-sparkstackbar-legend-item": !0, "vue-ui-sparkstackbar-legend-item-unselected": p.value.includes(a) }),
onClick: (y) => {
V(a), K(o, a, !0);
}
}, [
d("div", nt, [
(r(), s("svg", {
height: `${e.value.style.legend.fontSize}px`,
width: `${e.value.style.legend.fontSize}px`,
viewBox: "0 0 10 10"
}, [
d("defs", null, [
d("radialGradient", {
id: `legend_grad_${a}-${E.value}`
}, [
d("stop", {
offset: "0%",
"stop-color": c(x) ? "#FFFFFF" : c(ne)(c(ue)(o.color, 0.05), 100 - e.value.style.bar.gradient.intensity)
}, null, 8, ct),
d("stop", {
offset: "100%",
"stop-color": o.color
}, null, 8, dt)
], 8, it)
]),
d("circle", {
cx: 5,
cy: 5,
r: 5,
fill: e.value.style.bar.gradient.show ? `url(#legend_grad_${a}-${E.value})` : o.color
}, null, 8, vt)
], 8, ut)),
c(x) ? h("", !0) : (r(), s(_, { key: 0 }, [
d("span", {
style: g(`color:${e.value.style.legend.name.color}; font-weight:${e.value.style.legend.name.bold ? "bold" : "normal"}`)
}, S(o.name), 5),
k.value ? h("", !0) : (r(), s(_, { key: 0 }, [
e.value.style.legend.percentage.show ? (r(), s("span", {
key: 0,
style: g(`font-weight:${e.value.style.legend.percentage.bold ? "bold" : "normal"};color:${e.value.style.legend.percentage.color}`)
}, S(p.value.includes(a) ? " - " : o.proportionLabel), 5)) : h("", !0),
e.value.style.legend.value.show ? (r(), s("span", {
key: 1,
style: g(`font-weight:${e.value.style.legend.value.bold ? "bold" : "normal"};color:${e.value.style.legend.value.color}`)
}, " (" + S(c(ie)(
e.value.style.legend.value.formatter,
o.value,
c(R)({
p: e.value.style.legend.value.prefix,
v: o.value,
s: e.value.style.legend.value.suffix,
r: e.value.style.legend.value.rounding
}),
{ datapoint: o, seriesIndex: a }
)) + ") ", 5)) : h("", !0)
], 64))
], 64))
])
], 14, st))), 256))
], 4)) : h("", !0),
te(c(ke), {
show: O.value && e.value.style.tooltip.show,
parent: W.value,
backgroundColor: e.value.style.tooltip.backgroundColor,
color: e.value.style.tooltip.color,
fontSize: e.value.style.tooltip.fontSize,
borderRadius: e.value.style.tooltip.borderRadius,
borderColor: e.value.style.tooltip.borderColor,
borderWidth: e.value.style.tooltip.borderWidth,
backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
position: e.value.style.tooltip.position,
content: L.value,
isCustom: T.value,
offsetY: -124 + e.value.style.tooltip.offsetY,
blockShiftY: !0,
smooth: e.value.style.tooltip.smooth,
backdropFilter: e.value.style.tooltip.backdropFilter,
smoothForce: e.value.style.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
}, {
"tooltip-before": oe(() => [
U(t.$slots, "tooltip-before", le(ae({ ...M.value })), void 0, !0)
]),
"tooltip-after": oe(() => [
U(t.$slots, "tooltip-after", le(ae({ ...M.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "parent", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "content", "isCustom", "offsetY", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
t.$slots.source ? (r(), s("div", pt, [
U(t.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
c(x) ? (r(), Pe(Ge, { key: 3 })) : h("", !0)
], 4));
}
}, ft = /* @__PURE__ */ qe(gt, [["__scopeId", "data-v-8c8adea4"]]), wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ft
}, Symbol.toStringTag, { value: "Module" }));
export {
xt as a,
wt as b,
ft as v
};