vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
407 lines (406 loc) • 17.4 kB
JavaScript
import { defineAsyncComponent as H, computed as f, ref as v, toRefs as xe, watch as ie, onMounted as Ae, createElementBlock as u, openBlock as r, unref as s, normalizeStyle as j, normalizeClass as X, createBlock as R, createCommentVNode as g, createSlots as Oe, withCtx as O, renderSlot as p, normalizeProps as M, guardReactiveProps as E, createVNode as Pe, Fragment as ce, renderList as ve, toDisplayString as Ie } from "vue";
import { u as ze, c as Se, t as Fe, b as Te, h as Ne, o as Re, f as Me, x as he, X as Ee, k as Le, i as Ue } from "./index-q-LPw2IT.js";
import { t as Be, u as Ge } from "./useResponsive-DfdjqQps.js";
import { u as De, B as He } from "./useLoading-D7YHNtLX.js";
import { u as je } from "./usePrinter-DX7efa1s.js";
import { u as de } from "./useNestedProp-04aFeUYu.js";
import { u as Xe } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Ve } from "./useChartAccessibility-9icAAmYg.js";
import qe from "./Title-B55R8CAZ.js";
import Ye from "./img-Ctts6JQb.js";
import { _ as We } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Je = ["id"], Ke = ["xmlns", "viewBox"], Qe = ["width", "height"], Ze = { key: 1 }, et = ["d", "stroke-width", "stroke"], tt = { key: 2 }, at = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], lt = { key: 3 }, ot = ["x", "y", "height"], st = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], nt = {
key: 4,
class: "vue-data-ui-watermark"
}, rt = {
__name: "vue-ui-tiremarks",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(fe, { expose: ye }) {
const ge = H(() => import("./PenAndPaper-BJ0hcgsa.js")), pe = H(() => import("./UserOptions-DVzyjG-W.js")), me = H(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_tiremarks: ke } = ze(), w = fe, be = f(() => !!w.dataset && Object.keys(w.dataset).length), L = v(Se()), C = v(null), we = v(null), V = v(null), q = v(null), Y = v(0), W = v(0), $ = v(null), P = v(null), e = v(G()), { loading: J, FINAL_DATASET: U } = De({
...xe(w),
FINAL_CONFIG: e,
prepareConfig: G,
skeletonDataset: { percentage: 50 },
skeletonConfig: Fe({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
animation: { use: !1 },
layout: {
activeColor: "#6A6A6A80",
inactiveColor: "#CACACA80",
ticks: {
gradient: { show: !1 }
}
}
}
}
}
})
}), { userOptionsVisible: B, setUserOptionsVisibility: K, keepUserOptionState: Q } = Xe({ config: e.value }), { svgRef: Z } = Ve({ config: e.value.style.chart.title });
function G() {
const t = de({
userConfig: w.config,
defaultConfig: ke
});
return t.theme ? {
...de({
userConfig: Te.vue_ui_tiremarks[t.theme] || w.config,
defaultConfig: t
})
} : t;
}
ie(() => w.config, (t) => {
e.value = G(), B.value = !e.value.userOptions.showOnChartHover, S.value = e.value.style.chart.width, F.value = e.value.style.chart.height, se(), W.value += 1;
}, { deep: !0 });
const { isPrinting: ee, isImaging: te, generatePdf: ae, generateImage: le } = je({
elementId: L.value,
fileName: e.value.style.chart.title.text || "vue-ui-tiremarks",
options: e.value.userOptions.print
}), Ce = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), i = v(e.value.style.chart.animation.use ? 0 : Ne(U.value.percentage));
ie(() => U.value, (t) => {
e.value.style.chart.animation.use ? oe(t.percentage) : i.value = t.percentage || 0;
}, { deep: !0 }), Ae(() => {
se();
});
function oe(t) {
let l = e.value.style.chart.animation.speed;
const a = Math.abs(t - i.value) / (l * 120);
function o() {
i.value < t ? i.value = Math.min(i.value + a, t) : i.value > t && (i.value = Math.max(i.value - a, t)), i.value !== t && requestAnimationFrame(o);
}
o();
}
const _e = f(() => !!e.value.debug);
function se() {
if (Re(w.dataset) && Me({
componentName: "VueUiTiremarks",
type: "dataset",
debug: _e.value
}), e.value.responsive) {
const t = Be(() => {
const { width: l, height: a } = Ge({
chart: C.value,
title: e.value.style.chart.title.text ? V.value : null,
source: q.value
});
requestAnimationFrame(() => {
S.value = Math.max(0.1, l), F.value = Math.max(0.1, a - 12);
});
});
$.value && (P.value && $.value.unobserve(P.value), $.value.disconnect()), $.value = new ResizeObserver(t), P.value = C.value.parentNode, $.value.observe(P.value);
}
oe(U.value.percentage || 0);
}
const I = f(() => e.value.style.chart.layout.display === "vertical"), c = f(() => {
const t = e.value.style.chart.percentage.show, l = {
top: t ? 48 : 12,
left: t ? 64 : 16,
right: t ? 64 : 16,
bottom: t ? 48 : 12
};
return I.value ? {
top: e.value.style.chart.percentage.verticalPosition === "top" ? l.top : 3,
left: 3,
right: 3,
bottom: e.value.style.chart.percentage.verticalPosition === "bottom" ? l.bottom : 3
} : {
top: 0,
bottom: 0,
left: e.value.style.chart.percentage.horizontalPosition === "left" ? l.left : 16,
right: e.value.style.chart.percentage.horizontalPosition === "right" ? l.right : 10
};
}), z = f(() => Object.values(c.value).reduce((t, l) => t + l, 0)), S = v(e.value.style.chart.width), F = v(e.value.style.chart.height), n = f(() => ({
height: F.value,
width: S.value
})), ne = f(() => ({
horizontal: {
x: y.value.x + (e.value.style.chart.percentage.horizontalPosition === "left" ? 6 : 3),
y: n.value.height / 2 - y.value.fontSize / 2
},
vertical: {
x: n.value.width / 2 - 20,
y: y.value.y - y.value.fontSize / 2
}
})[e.value.style.chart.layout.display]), h = f(() => I.value ? {
mark: (n.value.height - z.value) / 100 * 0.5,
space: (n.value.height - z.value) / 100 * 0.5
} : {
mark: (n.value.width - z.value) / 100 * 0.5,
space: (n.value.width - z.value) / 100 * 0.5
}), re = f(() => {
const t = [];
for (let a = 0; a < 100; a += 1) {
const o = e.value.style.chart.layout.ticks.gradient.show ? he(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
if (I.value) {
const _ = e.value.style.chart.layout.crescendo ? (100 - a) * (n.value.width - c.value.left - c.value.right) / 100 / 3 : 0, d = c.value.left + 4 + _, m = n.value.width - c.value.right - 4 - _, k = n.value.height - c.value.bottom - a * h.value.mark - a * h.value.space - h.value.mark, b = n.value.height - c.value.bottom - a * h.value.mark - a * h.value.space - h.value.mark, x = (m - d) / e.value.style.chart.layout.curveAngleX, A = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
t.push({
x1: d,
x2: m,
y1: k,
y2: b,
curve: `M ${d} ${k} C ${d + x} ${k - A}, ${m - x} ${b - A}, ${m} ${b}`,
color: o
});
} else {
const _ = e.value.style.chart.layout.crescendo ? (100 - a) * (n.value.height - c.value.top - c.value.bottom) / 100 / 3 : 0, d = c.value.left + a * h.value.mark + a * h.value.space - h.value.mark, m = d, k = c.value.top + 4 + _, b = n.value.height - c.value.bottom - 4 - _, x = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), A = (b - k) / e.value.style.chart.layout.curveAngleX;
t.push({
x1: d,
x2: m,
y1: k,
y2: b,
curve: `M ${d} ${k} C ${d + x} ${k + A}, ${m + x} ${b - A}, ${m} ${b}`,
color: o
});
}
}
return t;
}), y = f(() => {
let t, l, a;
const o = e.value.style.chart.percentage.fontSize / 3;
return I.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = n.value.width / 2, l = c.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = n.value.width / 2, l = n.value.height - c.value.bottom / 2 + o, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, l = n.value.height / 2 + o, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = n.value.width - c.value.right + 8, l = n.value.height / 2 + o, a = "start"), {
x: t,
y: l,
textAnchor: a,
bold: e.value.style.chart.percentage.bold,
fontSize: e.value.style.chart.percentage.fontSize,
fill: e.value.style.chart.percentage.color
};
}), T = v(!1);
function ue(t) {
T.value = t, Y.value += 1;
}
const N = v(!1);
function D() {
N.value = !N.value;
}
async function $e({ scale: t = 2 } = {}) {
if (!C.value) return;
const { width: l, height: a } = C.value.getBoundingClientRect(), o = l / a, { imageUri: _, base64: d } = await Ye({ domElement: C.value, base64: !0, img: !0, scale: t });
return {
imageUri: _,
base64: d,
title: e.value.style.chart.title.text,
width: l,
height: a,
aspectRatio: o
};
}
return ye({
getImage: $e,
generatePdf: ae,
generateImage: le,
toggleAnnotator: D,
toggleFullscreen: ue
}), (t, l) => (r(), u("div", {
ref_key: "tiremarksChart",
ref: C,
class: X(`vue-ui-tiremarks ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: j(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: L.value,
onMouseenter: l[0] || (l[0] = () => s(K)(!0)),
onMouseleave: l[1] || (l[1] = () => s(K)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), R(s(ge), {
key: 0,
svgRef: s(Z),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: N.value,
onClose: D
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
Ce.value ? (r(), u("div", {
key: 1,
ref_key: "noTitle",
ref: we,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : g("", !0),
e.value.style.chart.title.text ? (r(), u("div", {
key: 2,
ref_key: "chartTitle",
ref: V,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(r(), R(qe, {
key: `title_${W.value}`,
config: {
title: {
cy: "wheel-title",
...e.value.style.chart.title
},
subtitle: {
cy: "wheel-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : g("", !0),
e.value.userOptions.show && be.value && (s(Q) || s(B)) ? (r(), R(s(pe), {
ref: "details",
key: `user_options_${Y.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: s(ee),
isImaging: s(te),
uid: L.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
hasXls: !1,
isFullscreen: T.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: C.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: N.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: ue,
onGeneratePdf: s(ae),
onGenerateImage: s(le),
onToggleAnnotator: D,
style: j({
visibility: s(Q) ? s(B) ? "visible" : "hidden" : "visible"
})
}, Oe({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: O(({ isOpen: a, color: o }) => [
p(t.$slots, "menuIcon", M(E({ isOpen: a, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: O(() => [
p(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: O(() => [
p(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: O(({ toggleFullscreen: a, isFullscreen: o }) => [
p(t.$slots, "optionFullscreen", M(E({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: O(({ toggleAnnotator: a, isAnnotator: o }) => [
p(t.$slots, "optionAnnotator", M(E({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
]),
key: "4"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
(r(), u("svg", {
ref_key: "svgRef",
ref: Z,
xmlns: s(Ee),
class: X({ "vue-data-ui-fullscreen--on": T.value, "vue-data-ui-fulscreen--off": !T.value }),
viewBox: `0 0 ${S.value} ${F.value}`,
style: j(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
Pe(s(me)),
t.$slots["chart-background"] ? (r(), u("foreignObject", {
key: 0,
x: 0,
y: 0,
width: n.value.width,
height: n.value.height,
style: {
pointerEvents: "none"
}
}, [
p(t.$slots, "chart-background", {}, void 0, !0)
], 8, Qe)) : g("", !0),
e.value.style.chart.layout.curved ? (r(), u("g", Ze, [
(r(!0), u(ce, null, ve(re.value, (a, o) => (r(), u("path", {
d: a.curve,
"stroke-width": h.value.mark,
stroke: i.value >= o ? a.color : e.value.style.chart.layout.inactiveColor,
"stroke-linecap": "round",
fill: "none",
class: X({ "vue-ui-tick-animated": e.value.style.chart.animation.use && o <= i.value })
}, null, 10, et))), 256))
])) : (r(), u("g", tt, [
(r(!0), u(ce, null, ve(re.value, (a, o) => (r(), u("line", {
x1: a.x1,
y1: a.y1,
x2: a.x2,
y2: a.y2,
"stroke-width": h.value.mark,
stroke: i.value >= o ? a.color : e.value.style.chart.layout.inactiveColor,
"stroke-linecap": "round"
}, null, 8, at))), 256))
])),
e.value.style.chart.percentage.show ? (r(), u("g", lt, [
s(J) ? (r(), u("rect", {
key: 0,
x: ne.value.x,
y: ne.value.y,
width: 40,
height: y.value.fontSize,
fill: "#6A6A6A80",
rx: 3
}, null, 8, ot)) : (r(), u("text", {
key: 1,
x: y.value.x,
y: y.value.y,
"font-size": y.value.fontSize,
fill: e.value.style.chart.layout.ticks.gradient.show && e.value.style.chart.percentage.useGradientColor ? s(he)(e.value.style.chart.layout.activeColor, i.value / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.percentage.color,
"font-weight": y.value.bold ? "bold" : "normal",
"text-anchor": y.value.textAnchor
}, Ie(s(Le)(
e.value.style.chart.percentage.formatter,
i.value,
s(Ue)({
v: i.value,
s: "%",
r: e.value.style.chart.percentage.rounding
})
)), 9, st))
])) : g("", !0),
p(t.$slots, "svg", { svg: n.value }, void 0, !0)
], 14, Ke)),
t.$slots.watermark ? (r(), u("div", nt, [
p(t.$slots, "watermark", M(E({ isPrinting: s(ee) || s(te) })), void 0, !0)
])) : g("", !0),
t.$slots.source ? (r(), u("div", {
key: 5,
ref_key: "source",
ref: q,
dir: "auto"
}, [
p(t.$slots, "source", {}, void 0, !0)
], 512)) : g("", !0),
s(J) ? (r(), R(He, { key: 6 })) : g("", !0)
], 46, Je));
}
}, kt = /* @__PURE__ */ We(rt, [["__scopeId", "data-v-758809ae"]]);
export {
kt as default
};