vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
412 lines (411 loc) • 20.1 kB
JavaScript
import { useCssVars as Le, computed as k, defineAsyncComponent as $e, ref as h, toRefs as Se, onMounted as X, watch as G, nextTick as P, createElementBlock as o, openBlock as a, normalizeStyle as F, createCommentVNode as d, createBlock as q, createElementVNode as f, createTextVNode as ze, toDisplayString as g, unref as r, createVNode as Fe, renderSlot as Y, Fragment as y, renderList as b, normalizeClass as J } from "vue";
import { c as De, t as Be, o as Ee, g as K, l as Me, s as p, a as Q, d as Z, X as Te, h as N } from "./lib-2iaAPQ_c.js";
import { t as Ie, u as Ne } from "./useResponsive-DfdjqQps.js";
import { u as He, a as H } from "./useNestedProp-2p4Tjzc8.js";
import { u as Oe, B as Ve } from "./BaseScanner-BMpwQAfz.js";
import { u as We } from "./useFitSvgText-2crs6Fv5.js";
import { u as je } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Re } from "./useChartAccessibility-9icAAmYg.js";
import { _ as Ue } from "./Shape-12_eh8zD.js";
import { _ as Xe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ee = { style: { backgroundColor: "#1A1A1A", labels: { value: { color: "#CCCCCC" }, valueLabel: { color: "#CCCCCC" }, timeLabel: { color: "#CCCCCC" } }, selector: { stroke: "#5A5A5A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } }, te = { style: { backgroundColor: "#FFF8E1", bars: { colors: { positive: "#D32F2F", negative: "#F57C00" } }, labels: { value: { color: "#424242" }, valueLabel: { color: "#424242" }, timeLabel: { color: "#757575" } }, selector: { stroke: "#D32F2F" }, title: { color: "#424242", subtitle: { color: "#757575" } } } }, le = { style: { backgroundColor: "#1E1E1E", bars: { colors: { positive: "#D32F2F", negative: "#F57C00" } }, labels: { value: { color: "#BDBDBD" }, valueLabel: { color: "#BDBDBD" }, timeLabel: { color: "#BDBDBD" } }, selector: { stroke: "#D32F2F" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } }, ae = { style: { backgroundColor: "#1A1A1A", bars: { colors: { positive: "#66CC66" } }, labels: { value: { color: "#AACCAA" }, valueLabel: { color: "#99CC99" }, timeLabel: { color: "#99AA99" } }, selector: { stroke: "#00FF00" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, oe = { style: { backgroundColor: "#fbfafa", bars: { colors: { positive: "#B9B99D", negative: "#C09E85" } }, labels: { value: { color: "#A0AC94" }, valueLabel: { color: "#A0AC94" }, timeLabel: { color: "#8A9892" } }, selector: { stroke: "#BBC4D3" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, se = { style: { backgroundColor: "#f6f6fb", bars: { colors: { positive: "#4A6A75" } }, labels: { value: { color: "#61747E" }, valueLabel: { color: "#8A9892" }, timeLabel: { color: "#50606C" } }, selector: { stroke: "#404C4D" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, ie = {
default: {},
dark: ee,
celebration: te,
celebrationNight: le,
hack: ae,
zen: oe,
concrete: se
}, wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: te,
celebrationNight: le,
concrete: se,
dark: ee,
default: ie,
hack: ae,
zen: oe
}, Symbol.toStringTag, { value: "Module" })), Ge = { key: 0 }, Pe = { key: 1 }, qe = ["xmlns", "viewBox"], Ye = ["width", "height"], Je = ["id"], Ke = ["stop-color"], Qe = ["stop-color"], Ze = ["id"], et = ["stop-color"], tt = ["stop-color"], lt = ["id"], at = ["stop-color"], ot = ["stop-color"], st = ["height", "width", "fill", "x", "stroke", "stroke-width", "rx", "stroke-dasharray"], it = { key: 1 }, ut = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], rt = { key: 2 }, nt = ["x", "y", "font-size", "font-weight", "fill"], vt = ["x", "y", "font-size", "fill"], ct = ["x", "y", "font-size", "fill"], dt = ["height", "width", "x", "onMouseover", "onMouseleave", "onClick"], yt = {
__name: "vue-ui-sparkhistogram",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(ue, { emit: re }) {
Le((l) => ({
v47f58673: Ce.value
}));
const ne = $e(() => import("./PackageVersion-Br3DrrFh.js")), { vue_ui_sparkhistogram: ve } = He(), { isThemeValid: ce, warnInvalidTheme: de } = je(), m = ue, C = h(De()), O = h(null), V = h(null), D = h(null), A = h(null), L = h(null), e = h(M()), { loading: W, FINAL_DATASET: x } = Oe({
...Se(m),
FINAL_CONFIG: e,
prepareConfig: M,
skeletonDataset: [
{ value: 1, intensity: 0.2, color: "#CACACA" },
{ value: 2, intensity: 0.3, color: "#CACACA" },
{ value: 3, intensity: 0.5, color: "#CACACA" },
{ value: 5, intensity: 0.7, color: "#CACACA" },
{ value: 8, intensity: 0.9, color: "#CACACA" },
{ value: 13, intensity: 0.95, color: "#CACACA" },
{ value: 21, intensity: 1, color: "#CACACA" },
{ value: 13, intensity: 0.95, color: "#CACACA" },
{ value: 8, intensity: 0.9, color: "#CACACA" },
{ value: 5, intensity: 0.7, color: "#CACACA" },
{ value: 3, intensity: 0.5, color: "#CACACA" },
{ value: 2, intensity: 0.3, color: "#CACACA" },
{ value: 1, intensity: 0.2, color: "#CACACA" }
],
skeletonConfig: Be({
defaultConfig: e.value,
userConfig: {
style: {
animation: { show: !1 },
backgroundColor: "#99999930"
}
}
})
}), B = h(e.value.style.layout.width), E = h(e.value.style.layout.height), { svgRef: j } = Re({ config: e.value.style.title });
function M() {
const l = H({
userConfig: m.config,
defaultConfig: ve
}), s = l.theme;
if (!s) return l;
if (!ce.value(l))
return de(l), l;
const t = H({
userConfig: ie[s] || m.config,
defaultConfig: l
});
return H({
userConfig: m.config,
defaultConfig: t
});
}
X(() => {
U();
});
const R = k(() => !!e.value.debug);
function U() {
if (Ee(m.dataset) ? K({
componentName: "VueUiSparkHistogram",
type: "dataset",
debug: R.value
}) : m.dataset.forEach((l, s) => {
Me({
datasetObject: l,
requiredAttributes: ["value"]
}).forEach((t) => {
K({
componentName: "VueUiSparkHistogram",
type: "datasetSerieAttribute",
property: t,
index: s,
debug: R.value
});
});
}), e.value.responsive) {
const l = Ie(() => {
const { width: s, height: t } = Ne({
chart: D.value,
title: e.value.style.title.text ? V.value : null,
source: O.value
}), i = e.value.style.labels.timeLabel.show ? e.value.style.labels.timeLabel.fontSize * 2 : 0, c = e.value.style.labels.valueLabel.show ? e.value.style.labels.valueLabel.fontSize * 2 : 0;
requestAnimationFrame(() => {
B.value = Math.max(10, s), E.value = Math.max(10, t - 12 - i - c);
});
});
A.value && (L.value && A.value.unobserve(L.value), A.value.disconnect()), A.value = new ResizeObserver(l), L.value = D.value.parentNode, A.value.observe(L.value);
}
}
G(() => m.config, (l) => {
e.value = M(), U();
}, { deep: !0 });
const v = k(() => {
const l = e.value.style.labels.timeLabel.show ? e.value.style.labels.timeLabel.fontSize * 2 : 0, s = e.value.style.labels.valueLabel.show ? e.value.style.labels.valueLabel.fontSize * 2 : 0, t = E.value + l + s, i = B.value, c = e.value.style.layout.padding.top, $ = t - e.value.style.layout.padding.bottom, S = e.value.style.layout.padding.left, T = i - e.value.style.layout.padding.right, z = c + (t - c - e.value.style.layout.padding.bottom) / 2, I = t - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - l - s, w = i - e.value.style.layout.padding.left - e.value.style.layout.padding.right;
return {
bottom: $,
centerY: z,
drawingHeight: I,
drawingWidth: w,
height: t,
left: S,
right: T,
top: c,
width: i
};
}), ye = k(() => Math.max(...x.value.map((l) => Math.abs(l.value || 0))));
function he(l) {
return Math.abs(l) / ye.value;
}
const u = k(() => x.value.map((l, s) => {
const t = he(l.value || 0), i = v.value.drawingHeight * t, c = v.value.drawingWidth / x.value.length, $ = c * (e.value.style.bars.gap / 100), S = c - $, T = v.value.centerY - i / 2, z = v.value.left + ($ / 2 + s * c), I = v.value.left + s * c, w = typeof l.intensity > "u" ? 100 : Math.round(l.intensity * 100), ke = l.color ? l.color : l.value >= 0 ? p(e.value.style.bars.colors.positive, w) : p(e.value.style.bars.colors.negative, w), Ae = l.color ? l.color : l.value >= 0 ? e.value.style.bars.colors.positive : e.value.style.bars.colors.negative, xe = l.color ? `url(#gradient_datapoint_${s}_${C.value})` : l.value >= 0 ? `url(#gradient_positive_${s}_${C.value})` : `url(#gradient_negative_${s}_${C.value})`, we = z + S / 2;
return {
...l,
color: ke,
gradient: xe,
height: i,
intensity: w,
proportion: t,
stroke: Ae,
textAnchor: we,
trapX: I,
unitWidth: c,
width: S,
x: z,
y: T
};
}));
function be(l, s) {
return Q(
e.value.style.labels.value.formatter,
l.value,
Z({
p: e.value.style.labels.value.prefix,
v: l.value,
s: e.value.style.labels.value.suffix,
r: e.value.style.labels.value.rounding
}),
{ datapoint: l, seriesIndex: s }
);
}
const n = h(null), fe = re;
function ge(l, s) {
fe("selectDatapoint", { datapoint: l, index: s }), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: s });
}
function pe(l, s) {
n.value = s, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: s });
}
function me(l, s) {
n.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: s });
}
const Ce = k(() => `${e.value.style.animation.speedMs}ms`), _e = k(() => v.value.drawingWidth / x.value.length * 0.9), { fitText: _ } = We({
svgRef: j,
unitWidth: _e
});
return X(async () => {
await P(), _(".vue-ui-sparkhistogram-top-label", e.value.style.labels.value.minFontSize), _(".vue-ui-sparkhistogram-bottom-label", e.value.style.labels.valueLabel.minFontSize), _(".vue-ui-sparkhistogram-time-label", e.value.style.labels.timeLabel.minFontSize);
}), G([B, E, () => x.value], async () => {
await P(), _(".vue-ui-sparkhistogram-top-label", e.value.style.labels.value.minFontSize), _(".vue-ui-sparkhistogram-bottom-label", e.value.style.labels.valueLabel.minFontSize), _(".vue-ui-sparkhistogram-time-label", e.value.style.labels.timeLabel.minFontSize);
}), (l, s) => (a(), o("div", {
class: "vue-data-ui-component vue-ui-spark-histogram",
ref_key: "histogramChart",
ref: D,
style: F(`width:100%;background:${e.value.style.backgroundColor};font-family:${e.value.style.fontFamily}`),
onMouseleave: s[0] || (s[0] = (t) => n.value = null)
}, [
e.value.style.title.text ? (a(), o("div", {
key: 0,
ref_key: "chartTitle",
ref: V,
style: F(`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}`)
}, [
f("div", {
style: F(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
}, [
ze(g(e.value.style.title.text) + " ", 1),
n.value !== null ? (a(), o("span", Ge, "- " + g(u.value[n.value].timeLabel || "") + " " + g(r(Q)(
e.value.style.labels.value.formatter,
u.value[n.value].value,
r(Z)({
p: e.value.style.labels.value.prefix,
v: u.value[n.value].value,
s: e.value.style.labels.value.suffix,
r: e.value.style.labels.value.rounding
}),
{ datapoint: u.value[n.value], seriesIndex: n.value }
)), 1)) : d("", !0),
![void 0, null].includes(n.value) && ![null, void 0].includes(u.value[n.value].valueLabel) ? (a(), o("span", Pe, g(` (${u.value[n.value].valueLabel || 0})`), 1)) : d("", !0)
], 4),
e.value.style.title.subtitle.text ? (a(), o("div", {
key: 0,
style: F(`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"}`)
}, g(e.value.style.title.subtitle.text), 5)) : d("", !0)
], 4)) : d("", !0),
(a(), o("svg", {
ref_key: "svgRef",
ref: j,
xmlns: r(Te),
viewBox: `0 0 ${v.value.width} ${v.value.height}`,
style: { overflow: "visible" }
}, [
Fe(r(ne)),
l.$slots["chart-background"] ? (a(), o("foreignObject", {
key: 0,
x: 0,
y: 0,
width: v.value.width,
height: v.value.height,
style: {
pointerEvents: "none"
}
}, [
Y(l.$slots, "chart-background", {}, void 0, !0)
], 8, Ye)) : d("", !0),
f("defs", null, [
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("radialGradient", {
id: `gradient_positive_${i}_${C.value}`,
cy: "50%",
cx: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
f("stop", {
offset: "0%",
"stop-color": r(p)(r(N)(e.value.style.bars.colors.positive, 0.05), t.intensity)
}, null, 8, Ke),
f("stop", {
offset: "100%",
"stop-color": r(p)(e.value.style.bars.colors.positive, t.intensity)
}, null, 8, Qe)
], 8, Je))), 256)),
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("radialGradient", {
id: `gradient_negative_${i}_${C.value}`,
cy: "50%",
cx: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
f("stop", {
offset: "0%",
"stop-color": r(p)(r(N)(e.value.style.bars.colors.negative, 0.05), t.intensity)
}, null, 8, et),
f("stop", {
offset: "100%",
"stop-color": r(p)(e.value.style.bars.colors.negative, t.intensity)
}, null, 8, tt)
], 8, Ze))), 256)),
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("radialGradient", {
id: `gradient_datapoint_${i}_${C.value}`,
cy: "50%",
cx: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
f("stop", {
offset: "0%",
"stop-color": r(p)(r(N)(t.color, 0.05), t.intensity)
}, null, 8, at),
f("stop", {
offset: "100%",
"stop-color": r(p)(t.color, t.intensity)
}, null, 8, ot)
], 8, lt))), 256))
]),
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("g", null, [
n.value !== null && n.value === i ? (a(), o("rect", {
key: 0,
height: v.value.height,
width: t.unitWidth,
fill: e.value.style.selector.fill,
x: t.trapX,
y: 0,
stroke: e.value.style.selector.stroke,
"stroke-width": e.value.style.selector.strokeWidth,
rx: e.value.style.selector.borderRadius,
"stroke-dasharray": e.value.style.selector.strokeDasharray
}, null, 8, st)) : d("", !0)
]))), 256)),
!e.value.style.bars.shape || e.value.style.bars.shape === "square" ? (a(), o("g", it, [
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("rect", {
x: t.x,
y: t.y,
height: t.height,
width: t.width,
fill: e.value.style.bars.colors.gradient.show ? t.gradient : t.color,
stroke: t.stroke,
"stroke-width": e.value.style.bars.strokeWidth,
rx: `${e.value.style.bars.borderRadius * t.proportion / 12}%`,
class: J({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
}, null, 10, ut))), 256))
])) : (a(), o("g", rt, [
(a(!0), o(y, null, b(u.value, (t, i) => (a(), q(Ue, {
plot: { x: t.x + t.width / 2, y: t.y + t.height / 2 },
color: e.value.style.bars.colors.gradient.show ? t.gradient : t.color,
shape: e.value.style.bars.shape,
radius: Math.min(t.height * 0.4, t.width * 0.4),
class: J({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
}, null, 8, ["plot", "color", "shape", "radius", "class"]))), 256))
])),
r(W) ? d("", !0) : (a(), o(y, { key: 3 }, [
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("g", null, [
e.value.style.labels.value.show ? (a(), o("text", {
key: 0,
class: "vue-ui-sparkhistogram-top-label",
"text-anchor": "middle",
x: t.textAnchor,
y: t.y - e.value.style.labels.value.fontSize / 3 + e.value.style.labels.value.offsetY,
"font-size": e.value.style.labels.value.fontSize,
"font-weight": e.value.style.labels.value.bold ? "bold" : "normal",
fill: e.value.style.labels.value.color
}, g(be(t, i)), 9, nt)) : d("", !0)
]))), 256)),
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("g", null, [
t.valueLabel && e.value.style.labels.valueLabel.show ? (a(), o("text", {
key: 0,
class: "vue-ui-sparkhistogram-bottom-label",
x: t.textAnchor,
y: t.y + t.height + e.value.style.labels.valueLabel.fontSize,
"font-size": e.value.style.labels.valueLabel.fontSize,
"text-anchor": "middle",
fill: e.value.style.labels.valueLabel.color
}, g(t.valueLabel), 9, vt)) : d("", !0)
]))), 256)),
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("g", null, [
t.timeLabel && e.value.style.labels.timeLabel.show ? (a(), o("text", {
key: 0,
class: "vue-ui-sparkhistogram-time-label",
x: t.textAnchor,
y: v.value.height,
"font-size": e.value.style.labels.timeLabel.fontSize,
fill: e.value.style.labels.timeLabel.color,
"text-anchor": "middle"
}, g(t.timeLabel), 9, ct)) : d("", !0)
]))), 256))
], 64)),
(a(!0), o(y, null, b(u.value, (t, i) => (a(), o("g", null, [
f("rect", {
height: v.value.height,
width: t.unitWidth,
fill: "transparent",
x: t.trapX,
y: 0,
onMouseover: (c) => pe(t, i),
onMouseleave: (c) => me(t, i),
onClick: () => ge(t, i)
}, null, 40, dt)
]))), 256))
], 8, qe)),
l.$slots.source ? (a(), o("div", {
key: 1,
ref_key: "source",
ref: O,
dir: "auto"
}, [
Y(l.$slots, "source", {}, void 0, !0)
], 512)) : d("", !0),
r(W) ? (a(), q(Ve, { key: 2 })) : d("", !0)
], 36));
}
}, ht = /* @__PURE__ */ Xe(yt, [["__scopeId", "data-v-3b5d52bb"]]), Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ht
}, Symbol.toStringTag, { value: "Module" }));
export {
wt as a,
Lt as b,
ht as v
};