vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
579 lines (578 loc) • 22 kB
JavaScript
import { ref as d, computed as G, onMounted as J, onBeforeUnmount as Q, withDirectives as Y, createElementBlock as i, openBlock as t, normalizeStyle as g, createElementVNode as V, withKeys as Z, withModifiers as p, renderSlot as k, normalizeProps as E, guardReactiveProps as _, createVNode as ee, normalizeClass as c, createCommentVNode as u, Fragment as C, createBlock as f, toDisplayString as m, mergeProps as P, unref as te } from "vue";
import a from "./BaseIcon-AmoKryXo.js";
import { _ as oe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ne = {
beforeMount(e, S) {
e.clickOutsideEvent = function(r) {
e === r.target || e.contains(r.target) || S.value(r);
}, document.addEventListener("click", e.clickOutsideEvent);
},
unmounted(e) {
document.removeEventListener("click", e.clickOutsideEvent);
}
}, le = ["title"], ie = ["data-open"], ue = {
__name: "UserOptions",
props: {
hasPdf: {
type: Boolean,
default: !0
},
hasXls: {
type: Boolean,
default: !0
},
hasImg: {
type: Boolean,
default: !1
},
hasLabel: {
type: Boolean,
default: !1
},
isLabelActive: {
type: Boolean,
default: !1
},
hasTable: {
type: Boolean,
default: !1
},
hasSort: {
type: Boolean,
default: !1
},
hasStack: {
type: Boolean,
default: !1
},
hasTooltip: {
type: Boolean,
default: !1
},
color: {
type: String
},
backgroundColor: {
type: String
},
isPrinting: {
type: Boolean,
default: !1
},
isImaging: {
type: Boolean,
default: !1
},
title: {
type: String
},
uid: {
type: String
},
hasFullscreen: {
type: Boolean,
default: !1
},
chartElement: {
type: HTMLElement,
default: null
},
isFullscreen: {
type: Boolean,
default: !1
},
isStacked: {
type: Boolean,
default: !1
},
isTooltip: {
type: Boolean,
default: !1
},
hasAnimation: {
type: Boolean,
default: !1
},
isAnimation: {
type: Boolean,
default: !1
},
titles: {
type: Object,
default() {
return {};
}
},
showTooltips: {
type: Boolean,
default: !0
},
zIndex: {
type: Number,
default: 1
},
noOffset: {
type: Boolean,
default: !0
},
position: {
type: String,
default: "right"
},
offsetX: {
type: Number,
default: 0
},
hasAnnotator: {
type: Boolean,
default: !1
},
isAnnotation: {
type: Boolean,
default: !1
}
},
emits: ["generatePdf", "generateCsv", "generateImage", "toggleTable", "toggleLabels", "toggleSort", "toggleFullscreen", "toggleStack", "toggleTooltip", "toggleAnimation", "toggleAnnotator"],
setup(e, { emit: S }) {
const r = e, v = S;
function A() {
v("generatePdf");
}
function B() {
v("generateCsv");
}
function F() {
v("generateImage");
}
const M = d(!1);
function $() {
M.value = !M.value, v("toggleTable");
}
const h = d(!1), j = d(!0);
function X() {
b.value = window.innerWidth > 600, h.value = !h.value, h.value && (j.value = !1);
}
function K() {
r.isPrinting || r.isImaging || (h.value = !1);
}
function W() {
h.value && K();
}
const O = d(r.isLabelActive);
function q() {
O.value = !O.value, v("toggleLabels");
}
const T = d(r.isAnimation);
function z() {
T.value = !T.value, v("toggleAnimation");
}
const I = G({
get: () => r.isAnnotation,
set: (l) => l
});
function D() {
I.value = !I.value, v("toggleAnnotator");
}
function H() {
v("toggleSort");
}
const L = d(r.isStacked);
function R() {
L.value = !L.value, v("toggleStack");
}
const w = d(r.isTooltip);
function x() {
w.value = !w.value, v("toggleTooltip");
}
const y = d(!1);
function N(l) {
r.chartElement && (l === "in" ? (y.value = !0, r.chartElement.requestFullscreen(), v("toggleFullscreen", !0)) : (y.value = !1, document && document.exitFullscreen(), v("toggleFullscreen", !1)));
}
function U(l) {
document.fullscreenElement ? y.value = !0 : y.value = !1;
}
J(() => {
document.addEventListener("fullscreenchange", U);
}), Q(() => {
document.removeEventListener("fullscreenchange", U);
});
const b = d(window.innerWidth > 600), n = d({
tooltip: !1,
pdf: !1,
csv: !1,
img: !1,
table: !1,
labels: !1,
sort: !1,
stack: !1,
fullscreen: !1,
animation: !1,
annotator: !1
});
return (l, o) => Y((t(), i("div", {
"data-html2canvas-ignore": "",
class: "vue-ui-user-options",
style: g(`z-index: ${e.zIndex}; height: 34px; position: ${y.value ? "fixed" : "absolute"}; top: 0; ${e.position === "right" ? `right:${y.value ? "12px" : "0"}` : `left:${y.value ? "12px" : "0"}`}; padding: 4px; background:transparent;`)
}, [
V("div", {
tabindex: "0",
title: h.value ? e.titles.close || "" : e.titles.open || "",
style: g(`width:32px; position: absolute; top: 0;${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; cursor:pointer; background:transparent`),
onClick: p(X, ["stop"]),
onKeypress: Z(X, ["enter"])
}, [
k(l.$slots, "menuIcon", E(_({ isOpen: h.value, color: e.color })), () => [
ee(a, {
name: h.value ? "close" : "menu",
stroke: e.color,
"stroke-width": 2
}, null, 8, ["name", "stroke"])
], !0)
], 44, le),
V("div", {
"data-open": h.value,
class: c({ "vue-ui-user-options-drawer": !0 }),
style: g(`background:${e.backgroundColor}; ${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}`)
}, [
e.hasTooltip ? (t(), i("button", {
key: 0,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: x,
onMouseenter: o[0] || (o[0] = (s) => n.value.tooltip = !0),
onMouseout: o[1] || (o[1] = (s) => n.value.tooltip = !1)
}, [
l.$slots.optionTooltip ? k(l.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (t(), i(C, { key: 1 }, [
w.value ? (t(), f(a, {
key: 0,
name: "tooltip",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : (t(), f(a, {
key: 1,
name: "tooltipDisabled",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
b.value && e.titles.tooltip && !l.$slots.optionTooltip ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-left-visible": e.position === "left" && n.value.tooltip, "button-info-right-visible": e.position === "right" && n.value.tooltip }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.tooltip), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasPdf ? (t(), i("button", {
key: 1,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: A,
onMouseenter: o[2] || (o[2] = (s) => n.value.pdf = !0),
onMouseout: o[3] || (o[3] = (s) => n.value.pdf = !1)
}, [
l.$slots.optionPdf ? k(l.$slots, "optionPdf", { key: 0 }, void 0, !0) : (t(), i(C, { key: 1 }, [
e.isPrinting ? (t(), f(a, {
key: 0,
name: "spin",
isSpin: "",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : (t(), f(a, {
key: 1,
name: "pdf",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
b.value && e.titles.pdf && !l.$slots.optionPdf ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.pdf, "button-info-left-visible": e.position === "left" && n.value.pdf }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.pdf), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasXls ? (t(), i("button", {
key: 2,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: B,
onMouseenter: o[4] || (o[4] = (s) => n.value.csv = !0),
onMouseout: o[5] || (o[5] = (s) => n.value.csv = !1)
}, [
l.$slots.optionCsv ? k(l.$slots, "optionCsv", { key: 0 }, void 0, !0) : (t(), f(a, {
key: 1,
name: "excel",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])),
b.value && e.titles.csv && !l.$slots.optionCsv ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.csv, "button-info-left-visible": e.position === "left" && n.value.csv }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.csv), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasImg ? (t(), i("button", {
key: 3,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: F,
onMouseenter: o[6] || (o[6] = (s) => n.value.img = !0),
onMouseout: o[7] || (o[7] = (s) => n.value.img = !1)
}, [
l.$slots.optionImg ? k(l.$slots, "optionImg", { key: 0 }, void 0, !0) : (t(), i(C, { key: 1 }, [
e.isImaging ? (t(), f(a, {
key: 0,
name: "spin",
isSpin: "",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : (t(), f(a, {
key: 1,
name: "image",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
b.value && e.titles.img && !l.$slots.optionImg ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.img, "button-info-left-visible": e.position === "left" && n.value.img }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.img), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasTable ? (t(), i("button", {
key: 4,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: $,
onMouseenter: o[8] || (o[8] = (s) => n.value.table = !0),
onMouseout: o[9] || (o[9] = (s) => n.value.table = !1)
}, [
l.$slots.optionTable ? k(l.$slots, "optionTable", { key: 0 }, void 0, !0) : (t(), f(a, {
key: 1,
name: M.value ? "tableClose" : "tableOpen",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["name", "stroke"])),
b.value && e.titles.table && !l.$slots.optionTable ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.table, "button-info-left-visible": e.position === "left" && n.value.table }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.table), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasLabel ? (t(), i("button", {
key: 5,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: q,
onMouseenter: o[10] || (o[10] = (s) => n.value.labels = !0),
onMouseout: o[11] || (o[11] = (s) => n.value.labels = !1)
}, [
l.$slots.optionLabels ? k(l.$slots, "optionLabels", { key: 0 }, void 0, !0) : (t(), f(a, {
key: 1,
name: O.value ? "labelClose" : "labelOpen",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["name", "stroke"])),
b.value && e.titles.labels && !l.$slots.optionLabels ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.labels, "button-info-left-visible": e.position === "left" && n.value.labels }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.labels), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasSort ? (t(), i("button", {
key: 6,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: H,
onMouseenter: o[12] || (o[12] = (s) => n.value.sort = !0),
onMouseout: o[13] || (o[13] = (s) => n.value.sort = !1)
}, [
l.$slots.optionSort ? k(l.$slots, "optionSort", { key: 0 }, void 0, !0) : (t(), f(a, {
key: 1,
name: "sort",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])),
b.value && e.titles.sort && !l.$slots.optionSort ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.sort, "button-info-left-visible": e.position === "left" && n.value.sort }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.sort), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasStack ? (t(), i("button", {
key: 7,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: R,
onMouseenter: o[14] || (o[14] = (s) => n.value.stack = !0),
onMouseout: o[15] || (o[15] = (s) => n.value.stack = !1)
}, [
l.$slots.optionStack ? k(l.$slots, "optionStack", { key: 0 }, void 0, !0) : (t(), i(C, { key: 1 }, [
L.value ? (t(), f(a, {
key: 0,
name: "unstack",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : (t(), f(a, {
key: 1,
name: "stack",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
b.value && e.titles.stack && !l.$slots.optionStack ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.stack, "button-info-left-visible": e.position === "left" && n.value.stack }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.stack), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasFullscreen ? (t(), i("button", {
key: 8,
tabindex: "0",
class: "vue-ui-user-options-button",
onMouseenter: o[16] || (o[16] = (s) => n.value.fullscreen = !0),
onMouseout: o[17] || (o[17] = (s) => n.value.fullscreen = !1),
onClick: o[18] || (o[18] = (s) => N(y.value ? "out" : "in"))
}, [
l.$slots.optionFullscreen ? k(l.$slots, "optionFullscreen", E(P({ key: 0 }, { toggleFullscreen: N, isFullscreen: y.value })), void 0, !0) : (t(), i(C, { key: 1 }, [
y.value ? (t(), f(a, {
key: 0,
name: "exitFullscreen",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : u("", !0),
y.value ? u("", !0) : (t(), f(a, {
key: 1,
name: "fullscreen",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
b.value && e.titles.fullscreen && !l.$slots.optionFullscreen ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.fullscreen, "button-info-left-visible": e.position === "left" && n.value.fullscreen }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.fullscreen), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasAnimation ? (t(), i("button", {
key: 9,
tabindex: "0",
class: "vue-ui-user-options-button",
onMouseenter: o[19] || (o[19] = (s) => n.value.animation = !0),
onMouseout: o[20] || (o[20] = (s) => n.value.animation = !1),
onClick: z
}, [
l.$slots.optionAnimation ? k(l.$slots, "optionAnimation", E(P({ key: 0 }, { toggleAnimation: z, isAnimated: T.value })), void 0, !0) : (t(), i(C, { key: 1 }, [
T.value ? (t(), f(a, {
key: 0,
name: "play",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : u("", !0),
T.value ? u("", !0) : (t(), f(a, {
key: 1,
name: "pause",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
b.value && e.titles.fullscreen && !l.$slots.optionAnimation ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.animation, "button-info-left-visible": e.position === "left" && n.value.animation }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.animation), 7)) : u("", !0)
], 32)) : u("", !0),
e.hasAnnotator ? (t(), i("button", {
key: 10,
tabindex: "0",
class: "vue-ui-user-options-button",
onMouseenter: o[21] || (o[21] = (s) => n.value.annotator = !0),
onMouseout: o[22] || (o[22] = (s) => n.value.annotator = !1),
onClick: D
}, [
l.$slots.optionAnnotator ? k(l.$slots, "optionAnnotator", E(P({ key: 0 }, { toggleAnnotator: D, isAnnotator: I.value })), void 0, !0) : (t(), i(C, { key: 1 }, [
I.value ? (t(), f(a, {
key: 0,
name: "annotatorDisabled",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : u("", !0),
I.value ? u("", !0) : (t(), f(a, {
key: 1,
name: "annotator",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
b.value && e.titles.annotator && !l.$slots.optionAnnotator ? (t(), i("div", {
key: 2,
dir: "auto",
class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.annotator, "button-info-left-visible": e.position === "left" && n.value.annotator }),
style: g({ background: e.backgroundColor, color: e.color })
}, m(e.titles.annotator), 7)) : u("", !0)
], 32)) : u("", !0)
], 12, ie)
], 4)), [
[te(ne), W]
]);
}
}, fe = /* @__PURE__ */ oe(ue, [["__scopeId", "data-v-0926bd71"]]);
function ve({
elementId: e,
fileName: S,
canPrint: r = !0
}) {
const v = d(!1), A = d(!1), B = d(null);
async function F() {
!r || v.value || (v.value = !0, clearTimeout(B.value), B.value = setTimeout(async () => {
if (r)
try {
const { default: $ } = await import("./pdf-DVWl3Adn.js");
await $({
domElement: document.getElementById(e),
fileName: S
});
} catch ($) {
console.error("Error generating PDF:", $);
} finally {
v.value = !1;
}
}, 100));
}
async function M() {
!r || A.value || (A.value = !0, clearTimeout(B.value), B.value = setTimeout(async () => {
if (r)
try {
const { default: $ } = await import("./img-itj0Vdmx.js");
await $({
domElement: document.getElementById(e),
fileName: S,
format: "png"
});
} catch ($) {
console.error("Error generating image:", $);
} finally {
A.value = !1;
}
}, 100));
}
return {
generatePdf: F,
generateImage: M,
isPrinting: v,
isImaging: A
};
}
export {
fe as U,
ve as u,
ne as v
};