vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
312 lines (311 loc) • 13 kB
JavaScript
import { useCssVars as Q, unref as t, computed as _, onMounted as Z, ref as N, watch as tt, openBlock as l, createElementBlock as a, normalizeStyle as $, createElementVNode as f, createTextVNode as et, toDisplayString as v, createCommentVNode as y, createVNode as st, renderSlot as D, Fragment as g, renderList as p, normalizeClass as I, createBlock as V } from "vue";
import { u as ot, o as lt, e as E, g as at, c as rt, t as it, s as b, i as H, f as F, X as nt, w as z } from "./index-WrV3SAID.js";
import { u as O } from "./useNestedProp-Cj0kHD7k.js";
import { _ as ut } from "./Shape-DNIrFW-J.js";
import dt from "./vue-ui-skeleton-Qec_XSRf.js";
import { _ as ct } from "./PackageVersion-1NslmM8M.js";
import { _ as yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ht = { key: 0 }, ft = { key: 1 }, gt = ["xmlns", "viewBox"], pt = ["width", "height"], vt = ["id"], bt = ["stop-color"], mt = ["stop-color"], _t = ["id"], xt = ["stop-color"], kt = ["stop-color"], wt = ["id"], $t = ["stop-color"], Ct = ["stop-color"], Lt = { key: 1 }, zt = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], St = { key: 2 }, Mt = ["x", "y", "font-size", "font-weight", "fill"], At = ["x", "y", "font-size", "fill"], Nt = ["x", "y", "font-size", "fill"], Dt = ["height", "width", "x", "onMouseover", "stroke", "stroke-width", "rx", "stroke-dasharray", "onClick"], It = {
key: 2,
ref: "source",
dir: "auto"
}, Vt = {
__name: "vue-ui-sparkhistogram",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(W, { emit: B }) {
Q((o) => ({
bc5cc542: t(q)
}));
const { vue_ui_sparkhistogram: U } = ot(), c = W, S = _(() => !!c.dataset && c.dataset.length);
Z(() => {
M();
});
function M() {
lt(c.dataset) ? E({
componentName: "VueUiSparkHistogram",
type: "dataset"
}) : c.dataset.forEach((o, n) => {
at({
datasetObject: o,
requiredAttributes: ["value"]
}).forEach((s) => {
E({
componentName: "VueUiSparkHistogram",
type: "datasetSerieAttribute",
property: s,
index: n
});
});
});
}
const m = N(rt()), e = _({
get: () => A(),
set: (o) => o
});
function A() {
const o = O({
userConfig: c.config,
defaultConfig: U
});
return o.theme ? {
...O({
userConfig: it.vue_ui_sparkhistogram[o.theme] || c.config,
defaultConfig: o
})
} : o;
}
tt(() => c.config, (o) => {
e.value = A(), M();
}, { deep: !0 });
const d = _(() => {
const o = e.value.style.layout.height, n = e.value.style.layout.width, s = e.value.style.layout.padding.top, r = o - e.value.style.layout.padding.bottom, h = e.value.style.layout.padding.left, x = n - e.value.style.layout.padding.right, k = s + (o - s - e.value.style.layout.padding.bottom) / 2, C = o - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom, w = n - e.value.style.layout.padding.left - e.value.style.layout.padding.right;
return {
bottom: r,
centerY: k,
drawingHeight: C,
drawingWidth: w,
height: o,
left: h,
right: x,
top: s,
width: n
};
}), j = _(() => Math.max(...c.dataset.map((o) => Math.abs(o.value || 0))));
function X(o) {
return Math.abs(o) / j.value;
}
const u = _(() => c.dataset.map((o, n) => {
const s = X(o.value || 0), r = d.value.drawingHeight * s, h = d.value.drawingWidth / c.dataset.length, x = h * (e.value.style.bars.gap / 100), k = h - x, C = d.value.centerY - r / 2, w = d.value.left + (x / 2 + n * h), R = d.value.left + n * h, L = typeof o.intensity > "u" ? 100 : Math.round(o.intensity * 100), T = o.color ? o.color : o.value >= 0 ? b(e.value.style.bars.colors.positive, L) : b(e.value.style.bars.colors.negative, L), P = o.color ? o.color : o.value >= 0 ? e.value.style.bars.colors.positive : e.value.style.bars.colors.negative, J = o.color ? `url(#gradient_datapoint_${n}_${m.value})` : o.value >= 0 ? `url(#gradient_positive_${n}_${m.value})` : `url(#gradient_negative_${n}_${m.value})`, K = w + k / 2;
return {
...o,
color: T,
gradient: J,
height: r,
intensity: L,
proportion: s,
stroke: P,
textAnchor: K,
trapX: R,
unitWidth: h,
width: k,
x: w,
y: C
};
})), i = N(null), G = B;
function Y(o, n) {
G("selectDatapoint", { datapoint: o, index: n });
}
const q = _(() => `${e.value.style.animation.speedMs}ms`);
return (o, n) => (l(), a("div", {
style: $(`width:100%;background:${t(e).style.backgroundColor};font-family:${t(e).style.fontFamily}`),
onMouseleave: n[1] || (n[1] = (s) => i.value = null)
}, [
t(e).style.title.text ? (l(), a("div", {
key: 0,
style: $(`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${t(e).style.title.margin};padding: 0 6px;text-align:${t(e).style.title.textAlign}`)
}, [
f("div", {
style: $(`font-size:${t(e).style.title.fontSize}px;color:${t(e).style.title.color};font-weight:${t(e).style.title.bold ? "bold" : "normal"}`)
}, [
et(v(t(e).style.title.text) + " ", 1),
t(i) !== null ? (l(), a("span", ht, "- " + v(t(u)[t(i)].timeLabel || "") + " " + v(t(H)(
t(e).style.labels.value.formatter,
t(u)[t(i)].value,
t(F)({
p: t(e).style.labels.value.prefix,
v: t(u)[t(i)].value,
s: t(e).style.labels.value.suffix,
r: t(e).style.labels.value.rounding
}),
{ datapoint: t(u)[t(i)], seriesIndex: t(i) }
)), 1)) : y("", !0),
![void 0, null].includes(t(i)) && ![null, void 0].includes(t(u)[t(i)].valueLabel) ? (l(), a("span", ft, "(" + v(t(u)[t(i)].valueLabel || 0) + ")", 1)) : y("", !0)
], 4),
t(e).style.title.subtitle.text ? (l(), a("div", {
key: 0,
style: $(`font-size:${t(e).style.title.subtitle.fontSize}px;color:${t(e).style.title.subtitle.color};font-weight:${t(e).style.title.subtitle.bold ? "bold" : "normal"}`)
}, v(t(e).style.title.subtitle.text), 5)) : y("", !0)
], 4)) : y("", !0),
t(S) ? (l(), a("svg", {
key: 1,
xmlns: t(nt),
viewBox: `0 0 ${t(d).width} ${t(d).height}`,
style: { overflow: "visible" }
}, [
st(ct),
o.$slots["chart-background"] ? (l(), a("foreignObject", {
key: 0,
x: 0,
y: 0,
width: t(d).width,
height: t(d).height,
style: {
pointerEvents: "none"
}
}, [
D(o.$slots, "chart-background", {}, void 0, !0)
], 8, pt)) : y("", !0),
f("defs", null, [
(l(!0), a(g, null, p(t(u), (s, r) => (l(), a("radialGradient", {
id: `gradient_positive_${r}_${t(m)}`,
cy: "50%",
cx: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
f("stop", {
offset: "0%",
"stop-color": t(b)(t(z)(t(e).style.bars.colors.positive, 0.05), s.intensity)
}, null, 8, bt),
f("stop", {
offset: "100%",
"stop-color": t(b)(t(e).style.bars.colors.positive, s.intensity)
}, null, 8, mt)
], 8, vt))), 256)),
(l(!0), a(g, null, p(t(u), (s, r) => (l(), a("radialGradient", {
id: `gradient_negative_${r}_${t(m)}`,
cy: "50%",
cx: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
f("stop", {
offset: "0%",
"stop-color": t(b)(t(z)(t(e).style.bars.colors.negative, 0.05), s.intensity)
}, null, 8, xt),
f("stop", {
offset: "100%",
"stop-color": t(b)(t(e).style.bars.colors.negative, s.intensity)
}, null, 8, kt)
], 8, _t))), 256)),
(l(!0), a(g, null, p(t(u), (s, r) => (l(), a("radialGradient", {
id: `gradient_datapoint_${r}_${t(m)}`,
cy: "50%",
cx: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
f("stop", {
offset: "0%",
"stop-color": t(b)(t(z)(s.color, 0.05), s.intensity)
}, null, 8, $t),
f("stop", {
offset: "100%",
"stop-color": t(b)(s.color, s.intensity)
}, null, 8, Ct)
], 8, wt))), 256))
]),
!t(e).style.bars.shape || t(e).style.bars.shape === "square" ? (l(), a("g", Lt, [
(l(!0), a(g, null, p(t(u), (s, r) => (l(), a("rect", {
x: s.x,
y: s.y,
height: s.height,
width: s.width,
fill: t(e).style.bars.colors.gradient.show ? s.gradient : s.color,
stroke: s.stroke,
"stroke-width": t(e).style.bars.strokeWidth,
rx: `${t(e).style.bars.borderRadius * s.proportion / 12}%`,
class: I({ "vue-ui-sparkhistogram-shape": t(e).style.animation.show })
}, null, 10, zt))), 256))
])) : (l(), a("g", St, [
(l(!0), a(g, null, p(t(u), (s, r) => (l(), V(ut, {
plot: { x: s.x + s.width / 2, y: s.y + s.height / 2 },
color: t(e).style.bars.colors.gradient.show ? s.gradient : s.color,
shape: t(e).style.bars.shape,
radius: s.height * 0.4,
class: I({ "vue-ui-sparkhistogram-shape": t(e).style.animation.show })
}, null, 8, ["plot", "color", "shape", "radius", "class"]))), 256))
])),
(l(!0), a(g, null, p(t(u), (s, r) => (l(), a("text", {
"text-anchor": "middle",
x: s.textAnchor,
y: s.y - t(e).style.labels.value.fontSize / 3 + t(e).style.labels.value.offsetY,
"font-size": t(e).style.labels.value.fontSize,
"font-weight": t(e).style.labels.value.bold ? "bold" : "normal",
fill: t(e).style.labels.value.color
}, v(t(H)(
t(e).style.labels.value.formatter,
s.value,
t(F)({
p: t(e).style.labels.value.prefix,
v: s.value,
s: t(e).style.labels.value.suffix,
r: t(e).style.labels.value.rounding
}),
{ datapoint: t(u)[t(i)], seriesIndex: t(i) }
)), 9, Mt))), 256)),
(l(!0), a(g, null, p(t(u), (s, r) => (l(), a("g", null, [
s.valueLabel ? (l(), a("text", {
key: 0,
x: s.textAnchor,
y: s.y + s.height + t(e).style.labels.valueLabel.fontSize,
"font-size": t(e).style.labels.valueLabel.fontSize,
"text-anchor": "middle",
fill: t(e).style.labels.valueLabel.color
}, v(s.valueLabel), 9, At)) : y("", !0)
]))), 256)),
(l(!0), a(g, null, p(t(u), (s, r) => (l(), a("g", null, [
s.timeLabel ? (l(), a("text", {
key: 0,
x: s.textAnchor,
y: t(d).height - t(e).style.labels.timeLabel.fontSize / 2,
"font-size": t(e).style.labels.timeLabel.fontSize,
fill: t(e).style.labels.timeLabel.color,
"text-anchor": "middle"
}, v(s.timeLabel), 9, Nt)) : y("", !0)
]))), 256)),
(l(!0), a(g, null, p(t(u), (s, r) => (l(), a("g", null, [
f("rect", {
height: t(d).height,
width: s.unitWidth,
fill: "transparent",
x: s.trapX,
y: 0,
onMouseover: (h) => i.value = r,
onMouseleave: n[0] || (n[0] = (h) => i.value = null),
stroke: t(i) !== null && t(i) === r ? t(e).style.selector.stroke : "",
"stroke-width": t(i) !== null && t(i) === r ? t(e).style.selector.strokeWidth : 0,
rx: t(e).style.selector.borderRadius,
"stroke-dasharray": t(e).style.selector.strokeDasharray,
onClick: () => Y(s, r)
}, null, 40, Dt)
]))), 256))
], 8, gt)) : y("", !0),
o.$slots.source ? (l(), a("div", It, [
D(o.$slots, "source", {}, void 0, !0)
], 512)) : y("", !0),
t(S) ? y("", !0) : (l(), V(dt, {
key: 3,
config: {
type: "sparkHistogram",
style: {
backgroundColor: t(e).style.backgroundColor,
sparkHistogram: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"]))
], 36));
}
}, jt = /* @__PURE__ */ yt(Vt, [["__scopeId", "data-v-c1906709"]]);
export {
jt as default
};