vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
386 lines (385 loc) • 15.1 kB
JavaScript
import { defineAsyncComponent as ue, useSlots as ie, onMounted as L, ref as b, toRefs as ce, computed as x, watch as N, nextTick as de, createElementBlock as u, openBlock as r, normalizeStyle as v, unref as o, renderSlot as D, createCommentVNode as f, createBlock as ve, normalizeProps as fe, mergeProps as P, createElementVNode as c, toDisplayString as p, Fragment as O, renderList as ge, createVNode as pe } from "vue";
import { c as ye, t as me, i as he, j as A, k as be, o as ke, g as M, l as Ce, m as xe, s as $, a as _, d as w, X as Ae, h as _e } from "./lib-BwysEpWI.js";
import { u as we, a as F } from "./useNestedProp-OFRiX4kU.js";
import { u as Se, B as De } from "./BaseScanner-BMpwQAfz.js";
import { u as $e } from "./useThemeCheck-DGJ31Vi5.js";
const j = { style: { backgroundColor: "#1A1A1A", gutter: { backgroundColor: "#3A3A3A" }, bar: { gradient: { underlayerColor: "#1A1A1A" } }, labels: { name: { color: "#CCCCCC" } }, title: { color: "#CCCCCC" } } }, V = { style: { backgroundColor: "#FFF8E1", gutter: { backgroundColor: "#ded6ca" }, bar: { gradient: { underlayerColor: "#FFF8E1" } }, labels: { name: { color: "#424242" } }, title: { color: "#424242" } } }, U = { style: { backgroundColor: "#1E1E1E", gutter: { backgroundColor: "#2E2E2E" }, bar: { gradient: { underlayerColor: "#FFF8E1" } }, labels: { name: { color: "#BDBDBD" } }, title: { color: "#BDBDBD" } } }, R = { style: { backgroundColor: "#1A1A1A", gutter: { backgroundColor: "#333333" }, bar: { gradient: { underlayerColor: "#1A1A1A" } }, labels: { name: { color: "#99CC99" } }, title: { color: "#66CC66" } } }, W = { style: { backgroundColor: "#fbfafa", gutter: { backgroundColor: "#f5f0eb" }, bar: { gradient: { underlayerColor: "#fbfafa" } }, labels: { name: { color: "#8A9892" } } } }, G = { style: { backgroundColor: "#f6f6fb", bar: { gradient: { underlayerColor: "#f6f6fb" } }, labels: { name: { color: "#50606C" } } } }, q = {
default: {},
dark: j,
celebration: V,
celebrationNight: U,
hack: R,
zen: W,
concrete: G
}, Ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: V,
celebrationNight: U,
concrete: G,
dark: j,
default: q,
hack: R,
zen: W
}, Symbol.toStringTag, { value: "Module" })), Fe = ["onClick", "onMouseenter", "onMouseleave"], Ee = {
key: 1,
class: "vue-ui-sparkbar-datapoint-value"
}, Te = ["xmlns", "viewBox"], Be = ["id"], Ie = ["stop-color"], ze = ["stop-color"], Le = ["height", "width", "fill", "rx"], Ne = ["height", "width", "fill", "rx"], Pe = ["height", "width", "fill", "rx"], Oe = {
key: 2,
ref: "source",
dir: "auto"
}, Me = {
__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(H, { emit: X }) {
const J = ue(() => import("./PackageVersion-BLzm8l_I.js")), { vue_ui_sparkbar: K } = we(), { isThemeValid: Q, warnInvalidTheme: Y } = $e(), g = H, Z = ie();
L(() => {
Z["chart-background"] && console.warn("VueUiSparkbar does not support the #chart-background slot.");
});
const E = b(ye()), e = b(S()), { loading: k, FINAL_DATASET: d } = Se({
...ce(g),
FINAL_CONFIG: e,
prepareConfig: S,
skeletonDataset: [
{ name: "_", value: 21, target: 25, color: "#808080" },
{ name: "_", value: 13, target: 25, color: "#ADADAD" },
{ name: "_", value: 8, target: 25, color: "#DBDBDB" }
],
skeletonConfig: me({
defaultConfig: e.value,
userConfig: {
style: {
backgroundColor: "#99999930",
animation: { show: !1 },
layout: { independant: !0 },
gutter: {
backgroundColor: "#6A6A6A",
opacity: 50
},
bar: {
gradient: {
underlayerColor: "#6A6A6A"
}
}
}
}
})
}), T = x(() => !!e.value.debug);
function S() {
const t = F({
userConfig: g.config,
defaultConfig: K
}), a = t.theme;
if (!a) return t;
if (!Q.value(t))
return Y(t), t;
const l = F({
userConfig: q[a] || g.config,
defaultConfig: t
}), n = F({
userConfig: g.config,
defaultConfig: l
});
return {
...n,
customPalette: n.customPalette.length ? n.customPalette : he[a] || A
};
}
N(() => g.config, (t) => {
e.value = S();
}, { deep: !0 });
const ee = x(() => be(e.value.customPalette)), y = b(d.value.map((t) => ({
...t,
value: e.value.style.animation.show ? 0 : t.value || 0,
formatter: t.formatter || null
}))), B = b(null);
L(async () => {
ke(g.dataset) && M({
componentName: "VueUiSparkbar",
type: "dataset",
debug: T.value
}), I();
});
function I() {
if (e.value.style.animation.show) {
let h = function() {
n += l / t, n < l ? (y.value = y.value.map((s, C) => ({
...s,
value: s.value += a[C]
})), B.value = requestAnimationFrame(h)) : y.value = d.value.map((s) => ({
...s,
value: s.value || 0,
formatter: s.formatter || null
}));
};
const t = e.value.style.animation.animationFrames, a = d.value.map((s, C) => s.value / t), l = d.value.map((s) => s.value || 0).reduce((s, C) => s + C, 0);
let n = 0;
h();
}
}
N(() => d.value, async (t) => {
cancelAnimationFrame(B.value), y.value = d.value.map((a) => ({
...a,
value: e.value.style.animation.show ? 0 : a.value || 0,
formatter: a.formatter || null
})), de(I);
}, { deep: !0 });
const i = b({
width: 500,
height: 16
}), te = x(() => Math.max(...d.value.map((t) => t.value))), le = x(() => (d.value.forEach((t, a) => {
Ce({
datasetObject: t,
requiredAttributes: ["name", "value"]
}).forEach((l) => {
M({
componentName: "VueUiSparkbar",
type: "datasetSerieAttribute",
property: l,
index: a,
debug: T.value
});
});
}), y.value.map((t, a) => ({
...t,
value: t.value || 0,
color: xe(t.color) || ee.value[a] || A[a] || A[a % A.length]
}))));
function ae(t) {
return t / te.value;
}
function z(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 : ae(t.value);
}
function m(t) {
return e.value.style.layout.independant && t.target || e.value.style.layout.target;
}
const oe = X;
function ne(t, a) {
oe("selectDatapoint", { datapoint: t, index: a }), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
}
function re(t, a) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a });
}
function se(t, a) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
}
return (t, a) => (r(), u("div", {
class: "vue-data-ui-component vue-ui-sparkbar",
style: v({
width: "100%",
position: "relative",
fontFamily: e.value.style.fontFamily,
background: g.backgroundOpacity !== null ? o($)(e.value.style.backgroundColor, g.backgroundOpacity) : e.value.style.backgroundColor
})
}, [
t.$slots.title ? D(t.$slots, "title", fe(P({ key: 0 }, { title: { ...t.title, title: e.value.style.title.text, subtitle: e.value.style.title.subtitle.text } }))) : f("", !0),
!t.$slots.title && e.value.style.title.text ? (r(), u("div", {
key: 1,
class: "vue-ui-sparkbar-title-container",
style: v({
background: e.value.style.title.backgroundColor,
margin: e.value.style.title.margin,
textAlign: e.value.style.title.textAlign
})
}, [
c("div", {
class: "vue-ui-sparkbar-title",
style: v({
fontSize: e.value.style.title.fontSize + "px",
color: e.value.style.title.color,
fontWeight: e.value.style.title.bold ? "bold" : "normal"
})
}, p(e.value.style.title.text), 5),
e.value.style.title.subtitle.text ? (r(), u("div", {
key: 0,
class: "vue-ui-sparkbar-subtitle",
style: v({
fontSize: e.value.style.title.subtitle.fontSize + "px",
color: e.value.style.title.subtitle.color,
fontWeight: e.value.style.title.subtitle.bold ? "bold" : "normal"
})
}, p(e.value.style.title.subtitle.text), 5)) : f("", !0)
], 4)) : f("", !0),
(r(!0), u(O, null, ge(le.value, (l, n) => (r(), u("div", {
style: v(`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;${o(d).length > 0 && n !== o(d).length - 1 ? "margin-bottom:6px" : ""}`),
onClick: (h) => ne(l, n),
onMouseenter: (h) => re(l, n),
onMouseleave: (h) => se(l, n)
}, [
o(k) ? f("", !0) : D(t.$slots, "data-label", P({
key: 0,
ref_for: !0
}, { bar: {
...l,
target: m(l),
valueLabel: o(_)(
l.formatter,
l.value,
o(w)({
p: l.prefix || "",
v: l.value,
s: l.suffix || "",
r: l.rounding || 0
}),
{ datapoint: l, seriesIndex: n }
),
targetLabel: o(_)(
l.formatter,
m(l),
o(w)({
p: l.prefix || "",
v: m(l),
s: l.suffix || "",
r: l.rounding || 0
}),
{ datapoint: l, seriesIndex: n }
)
} })),
!t.$slots["data-label"] || o(k) ? (r(), u("div", {
key: 1,
style: v({
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) ? (r(), u("div", {
key: 0,
class: "vue-ui-sparkbar-skeleton-name",
style: v({
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"
})
}, [
c("div", {
style: v({ height: "100%", width: "40px", borderRadius: e.value.style.labels.fontSize / 4 + "px", backgroundColor: "#6A6A6A80" })
}, null, 4),
c("div", {
style: v({ height: "100%", width: "15px", borderRadius: e.value.style.labels.fontSize / 4 + "px", backgroundColor: "#6A6A6A80" })
}, null, 4)
], 4)) : (r(), u(O, { key: 1 }, [
c("span", null, p(l.name), 1),
e.value.style.labels.value.show ? (r(), u("span", {
key: 0,
style: v(`font-weight:${e.value.style.labels.value.bold ? "bold" : "normal"}`),
class: "vue-ui-sparkbar-datapoint-name"
}, ": " + p(o(_)(
l.formatter,
l.value,
o(w)({
p: l.prefix || "",
v: l.value,
s: l.suffix || "",
r: l.rounding || 0
}),
{ datapoint: l, seriesIndex: n }
)), 5)) : f("", !0),
e.value.style.layout.showTargetValue ? (r(), u("span", Ee, p(" " + e.value.style.layout.targetValueText) + " " + p(o(_)(
l.formatter,
m(l),
o(w)({
p: l.prefix || "",
v: m(l),
s: l.suffix || "",
r: l.rounding || 0
}),
{ datapoint: l, seriesIndex: n }
)), 1)) : f("", !0)
], 64))
], 4)) : f("", !0),
(r(), u("svg", {
xmlns: o(Ae),
viewBox: `0 0 ${i.value.width} ${i.value.height}`,
width: "100%"
}, [
pe(o(J)),
c("defs", null, [
c("linearGradient", {
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `sparkbar_gradient_${n}_${E.value}`
}, [
c("stop", {
offset: "0%",
"stop-color": o($)(o(_e)(l.color, 0.03), 100 - e.value.style.bar.gradient.intensity)
}, null, 8, Ie),
c("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, ze)
], 8, Be)
]),
c("rect", {
height: i.value.height,
width: i.value.width,
x: 0,
y: 0,
fill: o($)(e.value.style.gutter.backgroundColor, e.value.style.gutter.opacity),
rx: i.value.height / 2
}, null, 8, Le),
c("rect", {
height: i.value.height,
width: i.value.width * z(l),
x: 0,
y: 0,
fill: e.value.style.bar.gradient.underlayerColor,
rx: i.value.height / 2
}, null, 8, Ne),
c("rect", {
height: i.value.height,
width: i.value.width * z(l),
x: 0,
y: 0,
fill: e.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${n}_${E.value})` : l.color,
rx: i.value.height / 2
}, null, 8, Pe)
], 8, Te))
], 44, Fe))), 256)),
t.$slots.source ? (r(), u("div", Oe, [
D(t.$slots, "source")
], 512)) : f("", !0),
o(k) ? (r(), ve(De, { key: 3 })) : f("", !0)
], 4));
}
}, qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Me
}, Symbol.toStringTag, { value: "Module" }));
export {
Me as _,
qe as a,
Ge as v
};