vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
863 lines (862 loc) • 37.2 kB
JavaScript
import { defineAsyncComponent as S, ref as n, computed as d, toRefs as It, onMounted as Lt, watch as Le, createElementBlock as g, openBlock as r, unref as s, normalizeStyle as W, normalizeClass as U, createBlock as F, createCommentVNode as h, createElementVNode as $, createVNode as ae, withCtx as i, renderSlot as c, normalizeProps as p, guardReactiveProps as y, createSlots as Ne, Fragment as Ve, renderList as Me, Teleport as Nt, toDisplayString as ne, resolveDynamicComponent as Vt, mergeProps as Mt, createTextVNode as ze, nextTick as Ge } from "vue";
import { c as Re, t as zt, o as Gt, g as We, l as Rt, i as Wt, j as H, k as Ut, a7 as Ue, m as Ht, ab as jt, a as He, d as P, X as Xt, y as je, v as Yt, r as qt, _ as Jt } from "./lib-BwysEpWI.js";
import { b as Kt } from "./labelUtils-PMU3ZGCb.js";
import { t as Qt, u as Zt } from "./useResponsive-DfdjqQps.js";
import { u as eo, a as re } from "./useNestedProp-OFRiX4kU.js";
import { u as to, B as oo } from "./BaseScanner-BMpwQAfz.js";
import { u as lo } from "./usePrinter-BJzHDpYF.js";
import { u as ao } from "./useSvgExport-ByUukOZt.js";
import { u as no } from "./useThemeCheck-DGJ31Vi5.js";
import { u as ro } from "./useUserOptionState-BIvW1Kz7.js";
import { u as so } from "./useChartAccessibility-9icAAmYg.js";
import uo from "./img-DKigoPDs.js";
import io from "./Title-DGnfNZuO.js";
import co from "./Legend-D6z73edh.js";
import { _ as vo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Xe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Ye = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { arcs: { gradient: { show: !1 } } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, qe = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { arcs: { gradient: { show: !1 } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Je = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { arcs: { gradient: { color: "#1A1A1A" } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ke = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { arcs: { gradient: { color: "#fbfafa" } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Qe = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { arcs: { gradient: { show: !1 } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Ze = {
default: {},
dark: Xe,
celebration: Ye,
celebrationNight: qe,
hack: Je,
zen: Ke,
concrete: Qe
}, Ho = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Ye,
celebrationNight: qe,
concrete: Qe,
dark: Xe,
default: Ze,
hack: Je,
zen: Ke
}, Symbol.toStringTag, { value: "Module" })), go = ["id"], ho = ["id"], fo = ["xmlns", "viewBox"], bo = ["width", "height"], po = ["id"], yo = ["stdDeviation"], mo = ["d", "stroke", "stroke-width"], Co = ["d", "stroke", "stroke-width"], ko = ["filter"], wo = ["d", "stroke", "stroke-width"], Ao = ["d", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], $o = {
key: 4,
class: "vue-data-ui-watermark"
}, To = ["id"], xo = ["onClick"], So = ["innerHTML"], Fo = {
__name: "vue-ui-galaxy",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint"],
setup(et, { expose: tt, emit: ot }) {
const lt = S(() => import("./Tooltip-TDyKgLB6.js")), at = S(() => import("./BaseIcon-4i3dd7Ty.js")), nt = S(() => import("./vue-ui-accordion-DUuwVsuJ.js")), rt = S(() => import("./DataTable-WrXCJkfE.js")), st = S(() => import("./PenAndPaper-DxIUvoQ8.js")), ut = S(() => import("./UserOptions-CzJWRC4s.js")), it = S(() => import("./PackageVersion-BLzm8l_I.js")), ct = S(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_galaxy: dt } = eo(), { isThemeValid: vt, warnInvalidTheme: gt } = no(), m = et, C = n(Re()), k = n(null), j = n(!1), X = n(""), D = n(null), se = n(0), ue = n(0), ie = n(0), ce = n(0), de = n(null), ve = n(null), ge = n(null), he = n(null), _ = n(null), V = n(null), fe = n(!1), B = n(null), Y = n(null), be = d(() => !!m.dataset && m.dataset.length), e = n(Q()), { loading: q, FINAL_DATASET: pe } = to({
...It(m),
FINAL_CONFIG: e,
prepareConfig: Q,
callback: () => {
Promise.resolve().then(async () => {
await Ge(), f.value.showTable = e.value.table.show;
});
},
skeletonDataset: [
{ name: "_", values: [21], color: "#DBDBDB" },
{ name: "_", values: [13], color: "#C4C4C4" },
{ name: "_", values: [8], color: "#ADADAD" }
],
skeletonConfig: zt({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
useCssAnimation: !1,
style: {
chart: {
backgroundColor: "#99999930",
legend: {
backgroundColor: "transparent"
}
}
}
}
})
});
Lt(() => {
fe.value = !0, me();
});
const ye = d(() => !!e.value.debug);
function me() {
if (Gt(m.dataset) ? We({
componentName: "VueUiGalaxy",
type: "dataset",
debug: ye.value
}) : m.dataset.forEach((t, l) => {
Rt({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((o) => {
We({
componentName: "VueUiGalaxy",
type: "datasetSerieAttribute",
property: o,
index: l,
debug: ye.value
});
});
}), e.value.responsive) {
const t = Qt(() => {
const { width: l, height: o } = Zt({
chart: k.value,
title: e.value.style.chart.title.text ? de.value : null,
legend: e.value.style.chart.legend.show ? ve.value : null,
noTitle: he.value,
source: ge.value
});
requestAnimationFrame(() => {
M.value = Math.max(0.1, l), z.value = Math.max(0.1, o - 12);
});
});
_.value && (V.value && _.value.unobserve(V.value), _.value.disconnect()), _.value = new ResizeObserver(t), V.value = k.value.parentNode, _.value.observe(V.value);
}
}
const { userOptionsVisible: J, setUserOptionsVisibility: Ce, keepUserOptionState: ke } = ro({ config: e.value }), { svgRef: K } = so({ config: e.value.style.chart.title });
function Q() {
const t = re({
userConfig: m.config,
defaultConfig: dt
}), l = t.theme;
if (!l) return t;
if (!vt.value(t))
return gt(t), t;
const o = re({
userConfig: Ze[l] || m.config,
defaultConfig: t
}), a = re({
userConfig: m.config,
defaultConfig: o
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : Wt[l] || H
};
}
Le(() => m.config, (t) => {
e.value = Q(), J.value = !e.value.userOptions.showOnChartHover, me(), ue.value += 1, ie.value += 1, ce.value += 1, f.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, f.value.showTable = e.value.table.show, f.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 });
const { isPrinting: we, isImaging: Ae, generatePdf: $e, generateImage: Te } = lo({
elementId: `galaxy_${C.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-galaxy",
options: e.value.userOptions.print
}), ht = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), ft = d(() => Ut(e.value.customPalette)), f = n({
dataLabels: {
show: e.value.style.chart.layout.labels.dataLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
}), M = n(250), z = n(180), bt = n(0), pt = n(0), T = d(() => ({
width: M.value,
height: z.value,
viewBox: `${bt.value} ${pt.value} ${M.value} ${z.value}`
})), xe = ot, b = n([]);
function E(t) {
b.value.includes(t.id) ? b.value = b.value.filter((l) => l !== t.id) : b.value.push(t.id), xe("selectLegend", I.value.map((l) => ({
name: l.name,
color: l.color,
value: l.value
})));
}
function Se(t) {
if (!w.value.length)
return e.value.debug && console.warn("VueUiGalaxy - There are no series to show."), null;
const l = w.value.find((o) => o.name === t);
return l || (e.value.debug && console.warn(`VueUiGalaxy - Series name not found "${t}"`), null);
}
function yt(t) {
const l = Se(t);
l !== null && b.value.includes(l.id) && E({ id: l.id });
}
function mt(t) {
const l = Se(t);
l !== null && (b.value.includes(l.id) || E({ id: l.id }));
}
const w = d(() => pe.value.map((t, l) => ({
name: t.name,
color: Ht(t.color) || ft.value[l] || H[l] || H[l % H.length],
value: t.values ? Ue(t.values).reduce((o, a) => o + a, 0) : 0,
absoluteValues: Ue(t.values),
id: Re()
})).sort((t, l) => l.value - t.value).map((t, l) => ({
...t,
absoluteIndex: l
})));
function Ct() {
return w.value.map((t) => ({
name: t.name,
color: t.color,
value: t.value
}));
}
const A = d(() => w.value.filter((t) => !b.value.includes(t.id)).map((t) => t.value).reduce((t, l) => t + l, 0)), Fe = n(190), De = d(() => w.value.filter((t) => !b.value.includes(t.id))), kt = d(
() => (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) / 2 + (e.value.style.chart.layout.padding ?? 12)
), wt = d(() => jt({
maxPoints: Fe.value,
a: e.value.style.chart.layout.arcs.a ?? 6,
b: e.value.style.chart.layout.arcs.b ?? 6,
angleStep: e.value.style.chart.layout.arcs.angleStep ?? 0.07,
startX: T.value.width / 2 + e.value.style.chart.layout.arcs.offsetX,
startY: T.value.height / 2 + e.value.style.chart.layout.arcs.offsetY,
boxWidth: T.value.width,
boxHeight: T.value.height,
padding: kt.value
})), I = d(() => {
const t = [];
for (let l = 0; l < De.value.length; l += 1) {
const o = De.value[l], a = o.value / A.value * Fe.value + (l > 0 && t.length ? t[l - 1].points : 0);
t.push({
points: a,
...o,
seriesIndex: l,
proportion: o.value / A.value,
path: wt.value(a)
});
}
return t.filter((l) => !b.value.includes(l.id)).toSorted((l, o) => o.points - l.points);
});
function Z(t) {
const l = Math.min(M.value, z.value), o = D.value === t.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1, a = (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) * o, u = e.value.style.chart.layout.arcs.strokeWidth * o, v = e.value.style.chart.layout.arcs.strokeWidth / 2 * o;
return {
border: a / 180 * l,
path: u / 180 * l,
blur: v / 180 * l
};
}
const O = n(!1);
function Oe(t) {
O.value = t, se.value += 1;
}
const ee = n(null);
function At(t) {
j.value = !1, D.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
}
function $t(t) {
xe("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
}
function Pe({
val: t,
percentage: l,
showVal: o,
showPercentage: a
}) {
const u = e.value.style.chart.layout.labels.dataLabels;
return Kt({
config: u,
val: t,
percentage: l,
showVal: o,
showPercentage: a
});
}
function Tt({ datapoint: t, _relativeIndex: l, seriesIndex: o, show: a = !1 }) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex }), ee.value = {
datapoint: t,
seriesIndex: o,
series: w.value,
config: e.value
}, j.value = a, D.value = t.id;
let u = "";
const v = e.value.style.chart.tooltip.customFormat;
je(v) && Jt(() => v({
seriesIndex: o,
datapoint: t,
series: w.value,
config: e.value
})) ? X.value = v({
seriesIndex: o,
datapoint: t,
series: w.value,
config: e.value
}) : (u += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, u += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, u += `<b>${Pe({
showVal: e.value.style.chart.tooltip.showValue,
showPercentage: e.value.style.chart.tooltip.showPercentage,
val: He(
e.value.style.chart.layout.labels.dataLabels.formatter,
t.value,
P({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: t.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: o }
),
percentage: P({
v: t.proportion * 100,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
})
})}</b></div>`, X.value = `<div>${u}</div>`);
}
const te = d(() => w.value.map((t, l) => {
const o = He(e.value.style.chart.layout.labels.dataLabels.formatter, t.value, P({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: t.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.legend.roundingValue
}), { datapoint: t, index: l }), a = isNaN(t.value / A.value) || b.value.includes(t.id) ? "-" : P({ v: t.value / A.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage }), u = Pe({
showVal: e.value.style.chart.legend.showValue,
showPercentage: e.value.style.chart.legend.showPercentage,
val: o,
percentage: a
});
return {
...t,
proportion: (t.value || 0) / pe.value.map((v) => (v.values || []).reduce((N, Et) => N + Et, 0)).reduce((v, N) => v + N, 0),
opacity: b.value.includes(t.id) ? 0.5 : 1,
shape: t.shape || "circle",
segregate: () => E(t),
isSegregated: b.value.includes(t.id),
display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${u}`
};
})), xt = d(() => ({
cy: "galaxy-div-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
})), x = d(() => {
const t = I.value.map((o) => ({
name: o.name,
color: o.color
})), l = I.value.map((o) => o.value);
return { head: t, body: l };
});
function oe(t = null) {
Ge(() => {
const l = x.value.head.map((u, v) => [[
u.name
], [x.value.body[v]], [isNaN(x.value.body[v] / A.value) ? "-" : x.value.body[v] / A.value * 100]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), a = Yt(o);
t ? t(a) : qt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-galaxy" });
});
}
const G = d(() => {
const t = [
' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
P({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: A.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
"100%"
], l = x.value.head.map((u, v) => {
const N = P({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: x.value.body[v], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
return [
{
color: u.color,
name: u.name
},
N,
isNaN(x.value.body[v] / A.value) ? "-" : P({
v: x.value.body[v] / A.value * 100,
s: "%",
r: e.value.table.td.roundingPercentage
})
];
}), o = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
};
return {
colNames: [
e.value.table.columnNames.series,
e.value.table.columnNames.value,
e.value.table.columnNames.percentage
],
head: t,
body: l,
config: o
};
});
function _e() {
f.value.showTable = !f.value.showTable;
}
function Be() {
f.value.showTooltip = !f.value.showTooltip;
}
const R = n(!1);
function le() {
R.value = !R.value;
}
async function St({ scale: t = 2 } = {}) {
if (!k.value) return;
const { width: l, height: o } = k.value.getBoundingClientRect(), a = l / o, { imageUri: u, base64: v } = await uo({ domElement: k.value, base64: !0, img: !0, scale: t });
return {
imageUri: u,
base64: v,
title: e.value.style.chart.title.text,
width: l,
height: o,
aspectRatio: a
};
}
const L = d(() => {
const t = e.value.table.useDialog && !e.value.table.show, l = f.value.showTable;
return {
component: t ? ct : nt,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: t ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: O.value,
fullscreenParent: k.value,
forcedWidth: Math.min(500, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: l,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
},
head: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
}
}
}
};
});
Le(() => f.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && B.value ? B.value.open() : "close" in B.value && B.value.close());
});
function Ee() {
f.value.showTable = !1, Y.value && Y.value.setTableIconState(!1);
}
const Ft = d(() => te.value.map((t) => ({
...t,
name: t.display
}))), Dt = d(() => e.value.style.chart.backgroundColor), Ot = d(() => e.value.style.chart.legend), Pt = d(() => e.value.style.chart.title), { exportSvg: _t, getSvg: Bt } = ao({
svg: K,
title: Pt,
legend: Ot,
legendItems: Ft,
backgroundColor: Dt
});
async function Ie({ isCb: t }) {
if (t) {
const { blob: l, url: o, text: a, dataUrl: u } = await Bt();
e.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: u });
} else
_t();
}
return tt({
getData: Ct,
getImage: St,
generatePdf: $e,
generateCsv: oe,
generateImage: Te,
generateSvg: Ie,
hideSeries: mt,
showSeries: yt,
toggleTable: _e,
toggleTooltip: Be,
toggleAnnotator: le,
toggleFullscreen: Oe
}), (t, l) => (r(), g("div", {
ref_key: "galaxyChart",
ref: k,
class: U(`vue-data-ui-component vue-ui-galaxy ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${s(q) ? "loading" : ""}`),
style: W(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
id: `galaxy_${C.value}`,
onMouseenter: l[2] || (l[2] = () => s(Ce)(!0)),
onMouseleave: l[3] || (l[3] = () => s(Ce)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), F(s(st), {
key: 0,
svgRef: s(K),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: R.value,
onClose: le
}, {
"annotator-action-close": i(() => [
c(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": i(({ color: o }) => [
c(t.$slots, "annotator-action-color", p(y({ color: o })), void 0, !0)
]),
"annotator-action-draw": i(({ mode: o }) => [
c(t.$slots, "annotator-action-draw", p(y({ mode: o })), void 0, !0)
]),
"annotator-action-undo": i(({ disabled: o }) => [
c(t.$slots, "annotator-action-undo", p(y({ disabled: o })), void 0, !0)
]),
"annotator-action-redo": i(({ disabled: o }) => [
c(t.$slots, "annotator-action-redo", p(y({ disabled: o })), void 0, !0)
]),
"annotator-action-delete": i(({ disabled: o }) => [
c(t.$slots, "annotator-action-delete", p(y({ disabled: o })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
ht.value ? (r(), g("div", {
key: 1,
ref_key: "noTitle",
ref: he,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
e.value.style.chart.title.text ? (r(), g("div", {
key: 2,
ref_key: "chartTitle",
ref: de,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(r(), F(io, {
key: `title_${ue.value}`,
config: {
title: {
cy: "galaxy-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "galaxy-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : h("", !0),
$("div", {
id: `legend-top-${C.value}`
}, null, 8, ho),
e.value.userOptions.show && be.value && (s(ke) || s(J)) ? (r(), F(s(ut), {
ref_key: "userOptionsRef",
ref: Y,
key: `user_option_${se.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: s(we),
isImaging: s(Ae),
uid: C.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasXls: e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isTooltip: f.value.showTooltip,
isFullscreen: O.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: k.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: R.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Oe,
onGeneratePdf: s($e),
onGenerateCsv: oe,
onGenerateImage: s(Te),
onGenerateSvg: Ie,
onToggleTable: _e,
onToggleTooltip: Be,
onToggleAnnotator: le,
style: W({
visibility: s(ke) ? s(J) ? "visible" : "hidden" : "visible"
})
}, Ne({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: i(({ isOpen: o, color: a }) => [
c(t.$slots, "menuIcon", p(y({ isOpen: o, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: i(() => [
c(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: i(() => [
c(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: i(() => [
c(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: i(() => [
c(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: i(() => [
c(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: i(() => [
c(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: i(({ toggleFullscreen: o, isFullscreen: a }) => [
c(t.$slots, "optionFullscreen", p(y({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: i(({ toggleAnnotator: o, isAnnotator: a }) => [
c(t.$slots, "optionAnnotator", p(y({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
(r(), g("svg", {
ref_key: "svgRef",
ref: K,
xmlns: s(Xt),
class: U({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
viewBox: T.value.viewBox,
style: W(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
ae(s(it)),
t.$slots["chart-background"] ? (r(), g("foreignObject", {
key: 0,
x: 0,
y: 0,
width: T.value.width,
height: T.value.height,
style: {
pointerEvents: "none"
}
}, [
c(t.$slots, "chart-background", {}, void 0, !0)
], 8, bo)) : h("", !0),
$("defs", null, [
$("filter", {
id: `blur_${C.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
$("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 100 / e.value.style.chart.layout.arcs.gradient.intensity
}, null, 8, yo)
], 8, po)
]),
(r(!0), g(Ve, null, Me(I.value, (o) => (r(), g("g", null, [
o.value ? (r(), g("path", {
key: 0,
d: o.path,
fill: "none",
stroke: e.value.style.chart.backgroundColor,
"stroke-width": Z(o).border,
"stroke-linecap": "round"
}, null, 8, mo)) : h("", !0),
o.value ? (r(), g("path", {
key: 1,
d: o.path,
fill: "none",
stroke: o.color,
"stroke-width": Z(o).path,
"stroke-linecap": "round",
class: U(`${D.value && D.value !== o.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
}, null, 10, Co)) : h("", !0),
o.value && e.value.style.chart.layout.arcs.gradient.show ? (r(), g("g", {
key: 2,
filter: `url(#blur_${C.value})`
}, [
$("path", {
d: o.path,
fill: "none",
stroke: e.value.style.chart.layout.arcs.gradient.color,
"stroke-width": Z(o).blur,
"stroke-linecap": "round",
class: U(`vue-ui-galaxy-gradient ${D.value && D.value !== o.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
}, null, 10, wo)
], 8, ko)) : h("", !0)
]))), 256)),
(r(!0), g(Ve, null, Me(I.value, (o, a) => (r(), g("g", null, [
o.value ? (r(), g("path", {
key: 0,
d: o.path,
fill: "none",
stroke: "transparent",
"stroke-width": e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth,
"stroke-linecap": "round",
onMouseenter: (u) => Tt({
datapoint: o,
seriesIndex: o.seriesIndex,
show: !0
}),
onMouseleave: (u) => At(o),
onClick: (u) => $t(o)
}, null, 40, Ao)) : h("", !0)
]))), 256)),
c(t.$slots, "svg", { svg: T.value }, void 0, !0)
], 14, fo)),
t.$slots.watermark ? (r(), g("div", $o, [
c(t.$slots, "watermark", p(y({ isPrinting: s(we) || s(Ae) })), void 0, !0)
])) : h("", !0),
$("div", {
id: `legend-bottom-${C.value}`
}, null, 8, To),
fe.value ? (r(), F(Nt, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${C.value}` : `#legend-bottom-${C.value}`
}, [
$("div", {
ref_key: "chartLegend",
ref: ve
}, [
e.value.style.chart.legend.show ? (r(), F(co, {
key: `legend_${ce.value}`,
legendSet: te.value,
config: xt.value,
onClickMarker: l[0] || (l[0] = ({ legend: o }) => E(o))
}, {
item: i(({ legend: o, index: a }) => [
s(q) ? h("", !0) : (r(), g("div", {
key: 0,
onClick: (u) => E(o),
style: W(`opacity:${b.value.includes(o.id) ? 0.5 : 1}`)
}, ne(o.display), 13, xo))
]),
_: 1
}, 8, ["legendSet", "config"])) : h("", !0),
c(t.$slots, "legend", { legend: te.value }, void 0, !0)
], 512)
], 8, ["to"])) : h("", !0),
t.$slots.source ? (r(), g("div", {
key: 6,
ref_key: "source",
ref: ge,
dir: "auto"
}, [
c(t.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
ae(s(lt), {
show: f.value.showTooltip && j.value,
backgroundColor: e.value.style.chart.tooltip.backgroundColor,
color: e.value.style.chart.tooltip.color,
borderRadius: e.value.style.chart.tooltip.borderRadius,
borderColor: e.value.style.chart.tooltip.borderColor,
borderWidth: e.value.style.chart.tooltip.borderWidth,
fontSize: e.value.style.chart.tooltip.fontSize,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: k.value,
content: X.value,
isFullscreen: O.value,
isCustom: s(je)(e.value.style.chart.tooltip.customFormat),
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter,
smoothForce: e.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": i(() => [
c(t.$slots, "tooltip-before", p(y({ ...ee.value })), void 0, !0)
]),
"tooltip-after": i(() => [
c(t.$slots, "tooltip-after", p(y({ ...ee.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
be.value && e.value.userOptions.buttons.table ? (r(), F(Vt(L.value.component), Mt({ key: 7 }, L.value.props, {
ref_key: "tableUnit",
ref: B,
onClose: Ee
}), Ne({
content: i(() => [
(r(), F(s(rt), {
key: `table_${ie.value}`,
colNames: G.value.colNames,
head: G.value.head,
body: G.value.body,
config: G.value.config,
title: e.value.table.useDialog ? "" : L.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Ee
}, {
th: i(({ th: o }) => [
$("div", {
innerHTML: o,
style: { display: "flex", "align-items": "center" }
}, null, 8, So)
]),
td: i(({ td: o }) => [
ze(ne(o.name || o), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: i(() => [
ze(ne(L.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: i(() => [
$("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[1] || (l[1] = (o) => oe(e.value.userOptions.callbacks.csv))
}, [
ae(s(at), {
name: "excel",
stroke: L.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : h("", !0),
s(q) ? (r(), F(oo, { key: 8 })) : h("", !0)
], 46, go));
}
}, Do = /* @__PURE__ */ vo(Fo, [["__scopeId", "data-v-76025af7"]]), jo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Do
}, Symbol.toStringTag, { value: "Module" }));
export {
Ho as a,
jo as b,
Do as v
};