vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
421 lines (420 loc) • 17.6 kB
JavaScript
import { computed as h, ref as m, watch as U, onMounted as ue, openBlock as i, createElementBlock as u, unref as e, normalizeStyle as C, renderSlot as M, normalizeProps as de, guardReactiveProps as ce, createElementVNode as v, toDisplayString as X, createCommentVNode as y, createVNode as he, Fragment as A, renderList as D, createBlock as ye } from "vue";
import { u as fe, c as ve, t as pe, C as Z, _ as T, o as ge, e as q, g as me, w as I, $ as ke, a0 as be, X as _e, s as P, R as H, i as Y, f as J } from "./index-WrV3SAID.js";
import { u as K } from "./useNestedProp-Cj0kHD7k.js";
import xe from "./vue-ui-skeleton-Qec_XSRf.js";
import { t as we, u as $e } from "./useResponsive-CoxXLe23.js";
import { _ as Le } from "./PackageVersion-1NslmM8M.js";
import { _ as Ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ce = ["id"], Me = ["xmlns", "viewBox"], Ie = ["width", "height"], Pe = ["id"], Ve = ["stop-color"], ze = ["stop-color"], Se = ["id"], We = ["stop-color"], Ae = ["stop-color"], De = ["id"], Te = ["stop-color"], Oe = ["stop-color"], Be = { key: 1 }, Ee = ["d", "fill"], Fe = ["d", "fill"], Ge = ["d", "stroke", "stroke-width"], Re = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], je = ["x", "y", "width", "height", "fill", "rx"], Ue = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Xe = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray", "stroke-width"], Ze = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], qe = ["x", "y", "font-size", "font-weight", "fill"], He = ["x", "y", "height", "width", "onMouseenter", "onClick"], Ye = {
__name: "vue-ui-sparkline",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
},
showInfo: {
type: Boolean,
default: !0
},
selectedIndex: {
type: Number,
default: void 0
},
heightRatio: {
type: Number,
default: 1
},
forcedPadding: {
type: Number,
default: 30
}
},
emits: ["hoverIndex", "selectDatapoint"],
setup(_, { emit: Q }) {
const { vue_ui_sparkline: ee } = fe(), n = _, $ = h(() => !!n.dataset && n.dataset.length), p = m(ve()), V = m(null), O = m(null), B = m(null), t = h({
get: () => E(),
set: (a) => a
});
function E() {
const a = K({
userConfig: n.config,
defaultConfig: ee
});
let s = {};
return a.theme ? s = {
...K({
userConfig: pe.vue_ui_sparkline[a.theme] || n.config,
defaultConfig: a
})
} : s = a, n.config && Z(n.config, "style.scaleMin") ? s.style.scaleMin = n.config.style.scaleMin : s.style.scaleMin = null, n.config && Z(n.config, "style.scaleMax") ? s.style.scaleMax = n.config.style.scaleMax : s.style.scaleMax = null, s;
}
const L = h(() => T({
data: n.dataset,
threshold: t.value.downsample.threshold
}));
U(() => n.config, (a) => {
t.value = E(), G(), o.value.chartWidth = t.value.style.chartWidth;
}, { deep: !0 }), U(() => n.dataset, (a) => {
b.value = T({
data: n.dataset.map((s) => ({
...s,
value: [void 0].includes(s.value) ? null : s.value
})),
threshold: t.value.downsample.threshold
});
}, { deep: !0 });
const b = m(te());
function te() {
return T({
data: n.dataset.map((a) => t.value.style.animation.show ? {
...a,
value: null
} : {
...a,
value: [void 0].includes(a.value) ? null : a.value
}),
threshold: t.value.downsample.threshold
});
}
const F = m(null);
ue(() => {
if (G(), t.value.style.animation.show && n.dataset.length > 1) {
let l = function() {
s < L.value.length ? (b.value.push(L.value[s]), setTimeout(() => {
requestAnimationFrame(l);
}, a)) : b.value = L.value, s += 1;
};
b.value = [];
const a = t.value.style.animation.animationFrames / n.dataset.length;
let s = 0;
l();
}
});
function G() {
if (ge(n.dataset) ? q({
componentName: "VueUiSparkline",
type: "dataset"
}) : n.dataset.forEach((a, s) => {
me({
datasetObject: a,
requiredAttributes: ["period", "value"]
}).forEach((l) => {
q({
componentName: "VueUiSparkline",
type: "datasetSerieAttribute",
property: l,
index: s
});
});
}), t.value.responsive) {
const a = we(() => {
const { width: s, height: l } = $e({
chart: V.value,
title: t.value.style.title.show && n.showInfo ? O.value : null,
source: B.value
});
o.value.width = s, o.value.height = l, o.value.chartWidth = t.value.style.chartWidth / 500 * s, o.value.padding = n.forcedPadding / 500 * s;
});
F.value = new ResizeObserver(a), F.value.observe(V.value.parentNode);
}
}
const o = m({
height: 80 * n.heightRatio,
width: 500,
chartWidth: t.value.style.chartWidth,
padding: n.forcedPadding
}), z = Q, ae = m(6), r = h(() => ({
top: 12,
left: 0,
right: o.value.width,
bottom: o.value.height - 3,
start: n.showInfo && t.value.style.dataLabel.show && t.value.style.dataLabel.position === "left" ? o.value.width - o.value.chartWidth : o.value.padding,
width: n.showInfo && t.value.style.dataLabel.show ? o.value.chartWidth : o.value.width - o.value.padding,
height: o.value.height - 12
})), S = h(() => [null, void 0].includes(t.value.style.scaleMin) ? Math.min(...b.value.map((a) => isNaN(a.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(a.value) ? 0 : a.value || 0)) : t.value.style.scaleMin), le = h(() => [null, void 0].includes(t.value.style.scaleMax) ? Math.max(...b.value.map((a) => isNaN(a.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(a.value) ? 0 : a.value || 0)) : t.value.style.scaleMax), x = h(() => {
const a = S.value >= 0 ? 0 : S.value;
return Math.abs(a);
}), se = h(() => le.value + x.value + ae.value), N = h(() => r.value.bottom - r.value.height * W(x.value));
function W(a) {
return a / se.value;
}
const g = h(() => L.value.length - 1), d = h(() => b.value.map((a, s) => {
const l = isNaN(a.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(a.value) ? 0 : a.value || 0;
return {
absoluteValue: l,
period: a.period,
plotValue: l + x.value,
toMax: W(l + x.value),
x: r.value.start + s * (r.value.width / (g.value + 1) > o.padding ? o.padding : r.value.width / (g.value + 1)),
y: r.value.bottom - r.value.height * W(l + x.value),
id: `plot_${p.value}_${s}`,
color: w.value ? t.value.style.bar.color : t.value.style.area.useGradient ? I(t.value.style.line.color, 0.05 * (1 - s / g.value)) : t.value.style.line.color,
width: r.value.width / (g.value + 1) > o.padding ? o.padding : r.value.width / (g.value + 1)
};
})), oe = h(() => {
const a = { x: d.value[0].x, y: o.value.height - 6 }, s = { x: d.value[d.value.length - 1].x, y: o.value.height - 6 }, l = [];
return d.value.forEach((c) => {
l.push(`${c.x},${c.y} `);
}), [a.x, a.y, ...l, s.x, s.y].toString();
}), f = m(void 0);
function ne(a, s) {
f.value = a, z("hoverIndex", { index: s });
}
function re() {
f.value = void 0, z("hoverIndex", { index: void 0 });
}
const k = h(() => {
if ($.value) {
const a = d.value.map((l) => l.absoluteValue), s = a.reduce((l, c) => l + c, 0);
return {
latest: d.value[d.value.length - 1].absoluteValue,
sum: s,
average: s / d.value.length,
median: ke(a),
trend: be(d.value.map(({ x: l, y: c, absoluteValue: j }) => ({
x: l,
y: c,
value: j
}))).trend
};
} else
return {
latest: null,
sum: null,
average: null,
median: null,
trend: null
};
}), R = h(() => $.value ? t.value.style.dataLabel.valueType === "latest" ? k.value.latest : t.value.style.dataLabel.valueType === "sum" ? k.value.sum : t.value.style.dataLabel.valueType === "average" ? k.value.average : 0 : 0), w = h(() => t.value.type && t.value.type === "bar");
function ie(a, s) {
z("selectDatapoint", { datapoint: a, index: s });
}
return (a, s) => (i(), u("div", {
ref_key: "sparklineChart",
ref: V,
class: "vue-ui-sparkline",
id: e(p),
style: C(`width:100%;font-family:${e(t).style.fontFamily};`)
}, [
M(a.$slots, "before", de(ce({
selected: e(f),
latest: e(k).latest,
sum: e(k).sum,
average: e(k).average,
median: e(k).median,
trend: e(k).trend
})), void 0, !0),
e(t).style.title.show && _.showInfo ? (i(), u("div", {
key: 0,
ref_key: "chartTitle",
ref: O,
class: "vue-ui-sparkline-title",
style: C(`display:flex;align-items:center;width:100%;color:${e(t).style.title.color};background:${e(t).style.backgroundColor};justify-content:${e(t).style.title.textAlign === "left" ? "flex-start" : e(t).style.title.textAlign === "right" ? "flex-end" : "center"};height:${e(t).style.title.fontSize * 2}px;font-size:${e(t).style.title.fontSize}px;font-weight:${e(t).style.title.bold ? "bold" : "normal"};`)
}, [
v("span", {
style: C(`padding:${e(t).style.title.textAlign === "left" ? "0 0 0 12px" : e(t).style.title.textAlign === "right" ? "0 12px 0 0" : "0"}`)
}, X(e(f) ? e(f).period : e(t).style.title.text), 5)
], 4)) : y("", !0),
e($) ? (i(), u("svg", {
key: 1,
xmlns: e(_e),
viewBox: `0 0 ${e(o).width} ${e(o).height}`,
style: C(`background:${e(t).style.backgroundColor};overflow:hidden`)
}, [
he(Le),
a.$slots["chart-background"] ? (i(), u("foreignObject", {
key: 0,
x: 0,
y: 0,
width: e(o).width <= 0 ? 10 : e(o).width,
height: e(o).height <= 0 ? 10 : e(o).height,
style: {
pointerEvents: "none"
}
}, [
M(a.$slots, "chart-background", {}, void 0, !0)
], 8, Ie)) : y("", !0),
v("defs", null, [
v("linearGradient", {
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `sparkline_gradient_${e(p)}`
}, [
v("stop", {
offset: "0%",
"stop-color": e(P)(e(I)(e(t).style.area.color, 0.05), e(t).style.area.opacity)
}, null, 8, Ve),
v("stop", {
offset: "100%",
"stop-color": e(P)(e(t).style.area.color, e(t).style.area.opacity)
}, null, 8, ze)
], 8, Pe),
v("linearGradient", {
x2: "0%",
y2: "100%",
id: `sparkline_bar_gradient_pos_${e(p)}`
}, [
v("stop", {
offset: "0%",
"stop-color": e(t).style.bar.color
}, null, 8, We),
v("stop", {
offset: "100%",
"stop-color": e(I)(e(t).style.bar.color, 0.05)
}, null, 8, Ae)
], 8, Se),
v("linearGradient", {
x2: "0%",
y2: "100%",
id: `sparkline_bar_gradient_neg_${e(p)}`
}, [
v("stop", {
offset: "0%",
"stop-color": e(I)(e(t).style.bar.color, 0.05)
}, null, 8, Te),
v("stop", {
offset: "100%",
"stop-color": e(t).style.bar.color
}, null, 8, Oe)
], 8, De)
]),
e(t).style.area.show && !e(w) && e(d)[0] ? (i(), u("g", Be, [
e(t).style.line.smooth ? (i(), u("path", {
key: 0,
d: `M ${e(d)[0].x},${e(r).bottom} ${e(H)(e(d))} L ${e(d).at(-1).x},${e(r).bottom} Z`,
fill: e(t).style.area.useGradient ? `url(#sparkline_gradient_${e(p)})` : e(P)(e(t).style.area.color, e(t).style.area.opacity)
}, null, 8, Ee)) : (i(), u("path", {
key: 1,
d: `M${e(oe)}Z`,
fill: e(t).style.area.useGradient ? `url(#sparkline_gradient_${e(p)})` : e(P)(e(t).style.area.color, e(t).style.area.opacity)
}, null, 8, Fe))
])) : y("", !0),
e(t).style.line.smooth && !e(w) ? (i(), u("path", {
key: 2,
d: `M ${e(H)(e(d))}`,
stroke: e(t).style.line.color,
fill: "none",
"stroke-width": e(t).style.line.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ge)) : y("", !0),
(i(!0), u(A, null, D(e(d), (l, c) => (i(), u("g", null, [
c < e(d).length - 1 && !e(t).style.line.smooth && !e(w) ? (i(), u("line", {
key: 0,
x1: l.x,
x2: e(d)[c + 1].x,
y1: l.y,
y2: e(d)[c + 1].y,
stroke: l.color,
"stroke-width": e(t).style.line.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
"shape-rendering": "geometricPrecision"
}, null, 8, Re)) : y("", !0),
e(w) ? (i(), u("rect", {
key: 1,
x: l.x - l.width / 2,
y: l.absoluteValue > 0 ? l.y : e(N),
width: l.width,
height: Math.abs(l.y - e(N)),
fill: l.absoluteValue > 0 ? `url(#sparkline_bar_gradient_pos_${e(p)})` : `url(#sparkline_bar_gradient_neg_${e(p)})`,
rx: e(t).style.bar.borderRadius
}, null, 8, je)) : y("", !0),
e(t).style.verticalIndicator.show && (e(f) && l.id === e(f).id || _.selectedIndex === c) ? (i(), u("line", {
key: 2,
x1: l.x,
x2: l.x,
y1: e(r).top - 6,
y2: e(r).bottom,
stroke: e(t).style.verticalIndicator.color || l.color,
"stroke-width": e(t).style.verticalIndicator.strokeWidth,
"stroke-linecap": "round",
"stroke-dasharray": e(t).style.verticalIndicator.strokeDasharray || 0
}, null, 8, Ue)) : y("", !0)
]))), 256)),
e(S) < 0 ? (i(), u("line", {
key: 3,
x1: e(r).start,
x2: e(r).start + e(r).width - 16,
y1: e(N),
y2: e(N),
stroke: e(t).style.zeroLine.color,
"stroke-dasharray": e(t).style.zeroLine.strokeWidth * 2,
"stroke-width": e(t).style.zeroLine.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Xe)) : y("", !0),
e(t).style.plot.show ? (i(!0), u(A, { key: 4 }, D(e(d), (l, c) => (i(), u("g", null, [
e(f) && l.id === e(f).id || _.selectedIndex === c ? (i(), u("circle", {
key: 0,
cx: l.x,
cy: l.y,
r: e(t).style.plot.radius,
fill: l.color,
stroke: e(t).style.plot.stroke,
"stroke-width": e(t).style.plot.strokeWidth
}, null, 8, Ze)) : y("", !0)
]))), 256)) : y("", !0),
_.showInfo && e(t).style.dataLabel.show ? (i(), u("text", {
key: 5,
x: e(t).style.dataLabel.position === "left" ? 12 + e(t).style.dataLabel.offsetX : e(r).width + 12 + e(t).style.dataLabel.offsetX,
y: e(o).height / 2 + e(t).style.dataLabel.fontSize / 2.5 + e(t).style.dataLabel.offsetY,
"font-size": e(t).style.dataLabel.fontSize,
"font-weight": e(t).style.dataLabel.bold ? "bold" : "normal",
fill: e(t).style.dataLabel.color
}, X(e(f) ? e(Y)(
e(t).style.dataLabel.formatter,
e(f).absoluteValue,
e(J)({ p: e(t).style.dataLabel.prefix, v: e(f).absoluteValue, s: e(t).style.dataLabel.suffix, r: e(t).style.dataLabel.roundingValue }),
{ datapoint: e(f) }
) : e(Y)(
e(t).style.dataLabel.formatter,
e(R),
e(J)({ p: e(t).style.dataLabel.prefix, v: e(R), s: e(t).style.dataLabel.suffix, r: e(t).style.dataLabel.roundingValue })
)), 9, qe)) : y("", !0),
(i(!0), u(A, null, D(e(d), (l, c) => (i(), u("rect", {
x: l.x - (e(r).width / (e(g) + 1) > e(o).padding ? e(o).padding : e(r).width / (e(g) + 1)) / 2,
y: e(r).top - 6,
height: e(r).height + 6,
width: e(r).width / (e(g) + 1) > e(o).padding ? e(o).padding : e(r).width / (e(g) + 1),
fill: "transparent",
onMouseenter: (j) => ne(l, c),
onMouseleave: re,
onClick: () => ie(l, c)
}, null, 40, He))), 256)),
M(a.$slots, "svg", { svg: e(o) }, void 0, !0)
], 12, Me)) : y("", !0),
a.$slots.source ? (i(), u("div", {
key: 2,
ref_key: "source",
ref: B,
dir: "auto"
}, [
M(a.$slots, "source", {}, void 0, !0)
], 512)) : y("", !0),
e($) ? y("", !0) : (i(), ye(xe, {
key: 3,
config: {
type: "sparkline",
style: {
backgroundColor: e(t).style.backgroundColor,
sparkline: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"]))
], 12, Ce));
}
}, st = /* @__PURE__ */ Ne(Ye, [["__scopeId", "data-v-ab853d2f"]]);
export {
st as default
};