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