vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,583 lines • 72.5 kB
JavaScript
import { defineAsyncComponent as N, computed as g, ref as b, toRefs as It, watch as xe, shallowRef as ot, onMounted as Ht, onBeforeUnmount as Ut, createElementBlock as n, openBlock as s, unref as i, normalizeStyle as A, normalizeClass as B, createBlock as E, createCommentVNode as h, createElementVNode as d, createVNode as ne, withCtx as f, renderSlot as p, normalizeProps as T, guardReactiveProps as z, createSlots as ut, Fragment as S, renderList as Y, toDisplayString as k, Teleport as Qt, resolveDynamicComponent as Gt, mergeProps as jt, createTextVNode as st, nextTick as rt } from "vue";
import { c as nt, t as Jt, i as Zt, j as Ce, o as Kt, g as G, k as el, m as tl, ai as ll, a as P, d as R, X as al, s as ie, h as ol, aj as ul, $ as sl, x as rl, v as nl, r as il, y as vl, _ as cl } from "./lib-2iaAPQ_c.js";
import { t as dl, u as hl } from "./useResponsive-DfdjqQps.js";
import { u as bl, a as ke } from "./useNestedProp-2p4Tjzc8.js";
import { u as yl, B as fl } from "./BaseScanner-BMpwQAfz.js";
import { u as pl } from "./usePrinter-ChVMpU2f.js";
import { u as gl } from "./useSvgExport-ByUukOZt.js";
import { u as ml } from "./useThemeCheck-DGJ31Vi5.js";
import { u as xl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Cl } from "./useChartAccessibility-9icAAmYg.js";
import kl from "./img-CqYIrJ8I.js";
import $l from "./Title-DSOZzIrU.js";
import { _ as it } from "./Shape-12_eh8zD.js";
import Ll from "./Legend-D2xmnFPH.js";
import { _ as wl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const vt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { labels: { quadrantLabels: { tl: { color: "#CCCCCC" }, tr: { color: "#CCCCCC" }, br: { color: "#CCCCCC" }, bl: { color: "#CCCCCC" } }, plotLabels: { color: "#CCCCCC" }, axisLabels: { color: { positive: "#CCCCCC", negative: "#CCCCCC" } } }, grid: { stroke: "#5A5A5A", graduations: { stroke: "#5A5A5A" } }, plots: { outlineColor: "#1A1A1A" } }, 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" } } }, ct = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { labels: { quadrantLabels: { tl: { color: "#5D4037" }, tr: { color: "#5D4037" }, br: { color: "#5D4037" }, bl: { color: "#5D4037" } }, plotLabels: { color: "#424242" }, axisLabels: { color: { positive: "#757575", negative: "#757575" } } }, grid: { stroke: "#5D403790", graduations: { stroke: "#5D403780", roundingForce: 0, fill: !1 } }, plots: { outlineColor: "#FFF8E1" }, areas: { opacity: 20 } }, 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" } } }, dt = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { quadrantLabels: { tl: { color: "#FF6B6B90" }, tr: { color: "#FF6B6B90" }, br: { color: "#FF6B6B90" }, bl: { color: "#FF6B6B90" } }, plotLabels: { color: "#BDBDBD" }, axisLabels: { color: { positive: "#757575", negative: "#757575" } } }, grid: { stroke: "#5D403790", graduations: { stroke: "#5D403780", roundingForce: 0, fill: !1 } }, plots: { outlineColor: "#1E1E1E" }, areas: { opacity: 20 } }, 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" } } }, ht = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { quadrantLabels: { tl: { color: "#99AA99" }, tr: { color: "#99AA99" }, br: { color: "#99AA99" }, bl: { color: "#99AA99" } }, plotLabels: { color: "#99CC99" }, axisLabels: { color: { positive: "#66CC66", negative: "#66CC66" } } }, grid: { stroke: "#334C33", graduations: { stroke: "#333333", roundingForce: 0, fill: !1 } }, plots: { outlineColor: "#1A1A1A" }, areas: { opacity: 20 } }, 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" } } }, bt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { labels: { quadrantLabels: { tl: { color: "#8A9892" }, tr: { color: "#8A9892" }, br: { color: "#8A9892" }, bl: { color: "#8A9892" } }, plotLabels: { color: "#8A9892" }, axisLabels: { color: { positive: "#99AA99", negative: "#C09E85" } } }, grid: { stroke: "#D2E0DB", graduations: { steps: 2, color: "#D2E0DB", stroke: "#D2E0DB", roundingForce: 256 } }, plots: { outlineColor: "#fbfafa" }, areas: { opacity: 40 } }, 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" } } }, yt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { quadrantLabels: { tl: { color: "#61747E" }, tr: { color: "#61747E" }, br: { color: "#61747E" }, bl: { color: "#61747E" } }, plotLabels: { color: "#50606C" }, axisLabels: { color: { positive: "#4A6A75", negative: "#7E8F7E" } } }, grid: { stroke: "#9AA7B0", graduations: { color: "#DEE1DE", stroke: "#DEE1DE", roundingForce: 0 } }, plots: { outlineColor: "#fbfafa" }, areas: { opacity: 40 } }, 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" } } }, ft = {
default: {},
dark: vt,
celebration: ct,
celebrationNight: dt,
hack: ht,
zen: bt,
concrete: yt
}, Ua = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: ct,
celebrationNight: dt,
concrete: yt,
dark: vt,
default: ft,
hack: ht,
zen: bt
}, Symbol.toStringTag, { value: "Module" })), Al = ["id"], _l = ["id"], Sl = ["xmlns", "viewBox", "id"], ql = ["x", "y", "width", "height"], Tl = ["id"], zl = ["stop-color"], Fl = ["stop-color"], Bl = { key: 1 }, Wl = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], Xl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Dl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], El = { key: 2 }, Yl = ["points", "fill"], Ol = ["points", "fill"], Ml = ["points", "fill"], Nl = ["points", "fill"], Pl = { key: 3 }, Rl = ["y", "fill", "font-size"], Vl = ["x", "y", "fill", "font-size"], Il = ["x", "y", "fill", "font-size"], Hl = ["y", "fill", "font-size"], Ul = { key: 4 }, Ql = ["x", "y", "font-size", "fill"], Gl = ["x", "y", "font-size", "fill"], jl = ["x", "y", "font-size", "fill"], Jl = ["id", "font-size", "transform", "fill"], Zl = ["id", "font-size", "transform", "fill"], Kl = ["id", "font-size", "transform", "fill"], ea = { key: 5 }, ta = ["fill", "points"], la = ["x", "y", "width", "height"], aa = ["x", "y", "width", "height"], oa = ["x", "y", "width", "height"], ua = ["x", "y", "width", "height"], sa = {
key: 0,
style: { "pointer-events": "none" }
}, ra = ["x", "y", "font-size", "fill"], na = ["x", "y", "font-size", "fill", "innerHTML"], ia = { key: 0 }, va = ["x", "y", "onMouseover", "onMouseleave", "onClick"], ca = {
key: 8,
class: "vue-ui-dna"
}, da = ["points", "fill"], ha = ["points", "fill"], ba = ["points", "fill"], ya = ["points", "fill"], fa = { key: 9 }, pa = ["x", "y", "font-size", "fill", "font-weight"], ga = { key: 10 }, ma = ["x", "y", "fill"], xa = ["x", "y", "fill"], Ca = ["x", "y", "fill"], ka = ["x", "y", "fill"], $a = ["stroke", "d"], La = ["stroke", "d"], wa = {
key: 4,
class: "vue-data-ui-watermark"
}, Aa = ["id"], _a = ["onClick"], Sa = {
key: 0,
height: "14",
width: "14",
viewBox: "0 0 20 20"
}, qa = ["innerHTML"], Ta = {
__name: "vue-ui-quadrant",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectPlot", "selectSide", "selectLegend"],
setup(pt, { expose: gt, emit: mt }) {
const xt = N(() => import("./Tooltip-D0pGX8qz.js")), Ct = N(() => import("./BaseIcon-CbVDYv89.js")), kt = N(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), $t = N(() => import("./DataTable-BT_IeqPe.js")), Lt = N(() => import("./PenAndPaper-CvyKWfNl.js")), wt = N(() => import("./UserOptions-BQO4YFrn.js")), At = N(() => import("./PackageVersion-Br3DrrFh.js")), _t = N(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_quadrant: St } = bl(), { isThemeValid: qt, warnInvalidTheme: Tt } = ml(), W = pt, $e = g(() => !!W.dataset && W.dataset.length), L = b(nt()), ve = mt, ce = b(!1), de = b(""), Le = b(0), x = b(!1), X = b(null), we = b(null), Ae = b(null), _e = b(null), Se = b(null), qe = b(0), Te = b(0), ze = b(0), Fe = b(!1), j = b(null), he = b(null), e = b(fe()), { loading: Be, FINAL_DATASET: We } = yl({
...It(W),
FINAL_CONFIG: e,
prepareConfig: fe,
callback: () => {
Promise.resolve().then(async () => {
await rt(), C.value.showTable = e.value.table.show;
});
},
skeletonDataset: [
{
name: "_",
shape: "circle",
color: "#CACACA",
series: [
{ name: "_", x: -6, y: -4 },
{ name: "_", x: -5, y: -2 },
{ name: "_", x: -4, y: -1 },
{ name: "_", x: -3, y: -0.5 },
{ name: "_", x: -2, y: -0.25 },
{ name: "_", x: -1, y: -0.135 },
{ name: "_", x: 0, y: 0 },
{ name: "_", x: 1, y: 0.135 },
{ name: "_", x: 2, y: 0.25 },
{ name: "_", x: 3, y: 0.5 },
{ name: "_", x: 4, y: 1 },
{ name: "_", x: 5, y: 2 },
{ name: "_", x: 6, y: 4 }
]
}
],
skeletonConfig: Jt({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
layout: {
grid: {
stroke: "#6A6A6A",
graduations: {
stroke: "#6A6A6A",
color: "#6A6A6A90"
},
xAxis: {
auto: !0
},
yAxis: {
auto: !0
}
},
labels: {
quadrantLabels: { show: !1 },
plotLabels: { show: !1 },
axisLabels: { show: !1 }
},
plots: {
outlineColor: "#6A6A6A"
}
},
legend: {
backgroundColor: "transparent"
}
}
}
}
})
}), { userOptionsVisible: be, setUserOptionsVisibility: Xe, keepUserOptionState: De } = xl({ config: e.value }), { svgRef: ye } = Cl({ config: e.value.style.chart.title });
function fe() {
const l = ke({
userConfig: W.config,
defaultConfig: St
}), o = l.theme;
if (!o) return l;
if (!qt.value(l))
return Tt(l), l;
const a = ke({
userConfig: ft[o] || W.config,
defaultConfig: l
}), u = ke({
userConfig: W.config,
defaultConfig: a
});
return {
...u,
customPalette: u.customPalette.length ? u.customPalette : Zt[o] || Ce
};
}
xe(() => W.config, (l) => {
e.value = fe(), be.value = !e.value.userOptions.showOnChartHover, Ee(), qe.value += 1, Te.value += 1, ze.value += 1, C.value.plotLabels.show = e.value.style.chart.layout.labels.plotLabels.show, C.value.showTable = e.value.table.show, C.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 });
const O = ot(null), H = ot(null), U = g(() => e.value.debug);
function Ee() {
if (Kt(W.dataset) ? G({
componentName: "VueUiQuadrant",
type: "dataset",
debug: U.value
}) : W.dataset.forEach((l, o) => {
[null, void 0].includes(l.name) && G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
index: o,
debug: U.value
}), [null, void 0].includes(l.series) ? G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "series",
index: o,
debug: U.value
}) : l.series.forEach((a, u) => {
[null, void 0].includes(a.name) && G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
key: "series",
index: u,
debug: U.value
});
});
}), e.value.responsive) {
const l = dl(() => {
const { width: o, height: a } = hl({
chart: X.value,
title: e.value.style.chart.title.text ? we.value : null,
legend: e.value.style.chart.legend.show ? Ae.value : null,
source: _e.value,
noTitle: Se.value
});
$.value = 48, requestAnimationFrame(() => {
t.value.height = a, t.value.usableHeight = a - $.value * 2, t.value.width = o, t.value.usableWidth = o - $.value * 2, t.value.top = $.value, t.value.left = $.value, t.value.right = o - $.value, t.value.bottom = a - $.value, t.value.centerX = o / 2, t.value.centerY = a - a / 2, t.value.padding = $.value;
});
});
O.value && (H.value && O.value.unobserve(H.value), O.value.disconnect()), O.value = new ResizeObserver(l), H.value = X.value.parentNode, O.value.observe(H.value);
}
}
Ht(() => {
Fe.value = !0, Ee();
}), Ut(() => {
O.value && (H.value && O.value.unobserve(H.value), O.value.disconnect());
});
const { isPrinting: Ye, isImaging: Oe, generatePdf: Me, generateImage: Ne } = pl({
elementId: `vue-ui-quadrant_${L.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-quadrant",
options: e.value.userOptions.print
}), zt = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), Pe = g(() => el(e.value.customPalette)), C = b({
plotLabels: {
show: e.value.style.chart.layout.labels.plotLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
}), $ = b(48), t = b({
height: e.value.style.chart.height,
usableHeight: e.value.style.chart.height - $.value * 2,
width: e.value.style.chart.width,
usableWidth: e.value.style.chart.width - $.value * 2,
top: $.value,
left: $.value,
right: e.value.style.chart.width - $.value,
bottom: e.value.style.chart.height - $.value,
centerX: e.value.style.chart.width / 2,
centerY: e.value.style.chart.height - e.value.style.chart.height / 2,
padding: $.value
}), v = b({
...JSON.parse(JSON.stringify(t.value)),
startX: 0,
startY: 0
});
xe(() => t.value, (l) => {
l && (v.value = {
...JSON.parse(JSON.stringify(t.value)),
startX: 0,
startY: 0
});
}, { deep: !0 });
const c = b(null), V = g(() => {
switch (c.value) {
case "TL":
return {
x: v.value.startX + v.value.width / 2,
y: v.value.height,
text: e.value.style.chart.layout.labels.quadrantLabels.tl.text || "Top Left",
fontSize: e.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color,
bold: e.value.style.chart.layout.labels.quadrantLabels.tl.bold
};
case "TR":
return {
x: v.value.startX + v.value.width / 2,
y: v.value.height,
text: e.value.style.chart.layout.labels.quadrantLabels.tr.text || "Top Right",
fontSize: e.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color,
bold: e.value.style.chart.layout.labels.quadrantLabels.tr.bold
};
case "BR":
return {
x: v.value.startX + v.value.width / 2,
y: v.value.height * 1.678,
text: e.value.style.chart.layout.labels.quadrantLabels.br.text || "Bottom Right",
fontSize: e.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
fill: e.value.style.chart.layout.labels.quadrantLabels.br.color,
bold: e.value.style.chart.layout.labels.quadrantLabels.br.bold
};
case "BL":
return {
x: v.value.startX + v.value.width / 2,
y: v.value.height * 1.678,
text: e.value.style.chart.layout.labels.quadrantLabels.bl.text || "Bottom Left",
fontSize: e.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color,
bold: e.value.style.chart.layout.labels.quadrantLabels.bl.bold
};
default:
return { x: 0, y: 0, text: "", fontSize: 0, fill: "none", bold: !1 };
}
}), Ft = b(null), le = b(!1);
function J({ targetX: l, targetY: o, targetW: a, targetH: u, side: r }) {
c.value && ee(r);
const y = {
x: l - v.value.startX,
y: o - v.value.startY,
w: a - v.value.width,
h: u - v.value.height
}, m = e.value.zoomAnimationFrames;
let D = 0;
function at() {
le.value = !0, v.value.startX += y.x / m, v.value.startY += y.y / m, v.value.width += y.w / m, v.value.height += y.h / m, D += 1, D < m ? Ft.value = requestAnimationFrame(at) : le.value = !1;
}
at();
}
function M(l) {
if (!le.value)
if (x.value && c.value === l)
J({
targetX: 0,
targetY: 0,
targetW: t.value.width,
targetH: t.value.height
}), c.value = null, x.value = !1;
else {
switch (c.value = l, l) {
case "TL":
J({
targetX: 0,
targetY: 0,
targetW: t.value.width / 2 + t.value.left,
targetH: t.value.height / 2 + t.value.top,
side: "tl"
});
break;
case "TR":
J({
targetX: t.value.width / 2 - t.value.left,
targetY: 0,
targetW: t.value.width / 2 + t.value.left,
targetH: t.value.height / 2 + t.value.top,
side: "tr"
});
break;
case "BR":
J({
targetX: t.value.width / 2 - t.value.left,
targetY: t.value.height / 2 - t.value.top,
targetW: t.value.width / 2 + t.value.left,
targetH: t.value.height / 2 + t.value.top,
side: "br"
});
break;
case "BL":
J({
targetX: 0,
targetY: t.value.height / 2 - t.value.top,
targetW: t.value.width / 2 + t.value.left,
targetH: t.value.height / 2 + t.value.top,
side: "bl"
});
break;
default:
v.value.startX = 0, v.value.startY = 0, v.value.width = t.value.width, v.value.height = t.value.height;
break;
}
x.value = !0;
}
}
const Bt = g(() => {
const l = e.value.style.chart.layout.grid.graduations.steps, o = t.value.usableWidth / (l * 2), a = t.value.top, u = [];
for (let r = 0; r < l; r += 1)
u.push({
x: t.value.padding + o * r,
y: a + t.value.usableHeight * (r / l / 2),
height: t.value.usableHeight * (1 - r / l),
width: t.value.usableWidth * (1 - r / l),
opacity: Math.round((r + 1) / l * 20)
});
return u;
}), _ = g(() => {
let l = e.value.style.chart.layout.grid.xAxis.max, o = e.value.style.chart.layout.grid.xAxis.min, a = e.value.style.chart.layout.grid.yAxis.max, u = e.value.style.chart.layout.grid.yAxis.min;
return e.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(...Q.value.flatMap((r) => r.series.map((y) => y.x))), o = Math.min(...Q.value.flatMap((r) => r.series.map((y) => y.x)))), e.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...Q.value.flatMap((r) => r.series.map((y) => y.y))), u = Math.min(...Q.value.flatMap((r) => r.series.map((y) => y.y)))), {
x: {
max: l,
min: o
},
y: {
max: a,
min: u
}
};
}), F = b([]), Q = g(() => We.value.map((l, o) => ({
...l,
series: ll({
data: l.series,
threshold: e.value.downsample.threshold
}),
id: `cat_${o}_${L.value}`,
color: tl(l.color) || Pe.value[o] || Ce[o]
}))), Wt = g(() => Q.value.filter((l) => !F.value.includes(l.id))), Xt = g(() => Q.value.map((l, o) => ({
...l,
shape: l.shape || "circle",
series: l.series.map((a) => ({
...a,
x: Re(a.x),
y: Ve(a.y),
xValue: a.x,
yValue: a.y,
quadrantSide: He({ x: a.x, y: a.y }),
categoryName: l.name,
shape: l.shape,
color: l.color
}))
}))), q = g(() => (We.value.forEach((l, o) => {
l.series.forEach((a, u) => {
[null, void 0].includes(a.x) && G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "x",
key: "series",
index: u,
debug: U.value
}), [null, void 0].includes(a.y) && G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "y",
key: "series",
index: u,
debug: U.value
});
});
}), Wt.value.map((l, o) => ({
...l,
shape: l.shape || "circle",
color: l.color || Pe.value[o] || Ce[o],
series: l.series.map((a) => ({
...a,
x: Re(a.x),
y: Ve(a.y),
xValue: a.x,
yValue: a.y,
quadrantSide: He({ x: a.x, y: a.y }),
categoryName: l.name,
shape: l.shape,
color: l.color,
uid: nt()
}))
}))));
function Re(l) {
if (l >= 0) {
const o = l / _.value.x.max;
return t.value.centerX + t.value.usableWidth / 2 * o;
} else {
const o = Math.abs(l) / Math.abs(_.value.x.min);
return t.value.centerX - t.value.usableWidth / 2 * o;
}
}
function Ve(l) {
if (l >= 0) {
const o = l / _.value.y.max;
return t.value.centerY + (1 - t.value.usableHeight / 2 * o);
} else {
const o = Math.abs(l) / Math.abs(_.value.y.min);
return t.value.centerY - (1 - t.value.usableHeight / 2 * o);
}
}
const ae = g(() => {
const l = q.value.flatMap((m) => m.series.map((D) => ({
x: D.xValue,
y: D.yValue,
name: D.name,
category: D.categoryName,
quadrantSide: D.quadrantSide,
sideName: e.value.style.chart.layout.labels.quadrantLabels[D.quadrantSide].text,
color: m.color,
shape: m.shape
}))), o = e.value.style.chart.layout.grid.xAxis.name || "x", a = e.value.style.chart.layout.grid.yAxis.name || "y", u = [e.value.translations.category, e.value.translations.item, o, a, e.value.translations.side], r = l.map((m) => [m.category, m.name, m.x, m.y, m.sideName || m.quadrantSide]), y = l.map((m) => ({
shape: m.shape,
color: m.color
}));
return { head: u, body: r, itsShapes: y, tableData: l };
}), oe = g(() => {
const l = ae.value.head, o = ae.value.tableData.map((u) => [
{
shape: u.shape,
color: u.color,
name: u.category
},
u.name,
P(
e.value.style.chart.layout.labels.plotLabels.x.formatter,
u.x,
R({
v: u.x,
r: e.value.style.chart.layout.labels.plotLabels.rounding
})
),
P(
e.value.style.chart.layout.labels.plotLabels.y.formatter,
u.y,
R({
v: u.y,
r: e.value.style.chart.layout.labels.plotLabels.rounding
})
),
u.sideName || u.quadrantSide
]), a = {
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 { head: l, body: o, config: a, colNames: l };
});
function Z(l) {
F.value.includes(l) ? F.value = F.value.filter((a) => a !== l) : F.value.push(l);
const o = je();
ve("selectLegend", o);
}
const K = g(() => Xt.value.map((l) => ({
name: l.name,
shape: l.shape,
color: l.color,
id: l.id,
opacity: F.value.includes(l.id) ? 0.5 : 1,
segregate: () => Z(l.id),
isSegregated: F.value.includes(l.id)
})));
function Ie(l) {
if (!K.value.length)
return e.value.debug && console.warn("VueUiQuadrant - There are no series to show."), null;
const o = K.value.find((a) => a.name === l);
return o || (e.value.debug && console.warn(`VueUiQuadrant - Series name not found "${l}"`), null);
}
function Dt(l) {
const o = Ie(l);
o !== null && F.value.includes(o.id) && Z(o.id);
}
function Et(l) {
const o = Ie(l);
o !== null && (F.value.includes(o.id) || Z(o.id));
}
const Yt = g(() => ({
cy: "quadrant-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" : ""
}));
function He(l) {
switch (!0) {
case (l.x >= 0 && l.y >= 0):
return "tr";
case (l.x >= 0 && l.y < 0):
return "br";
case (l.x < 0 && l.y < 0):
return "bl";
case (l.x < 0 && l.y >= 0):
return "tl";
default:
return "";
}
}
const ue = b(null), se = b(null), pe = b(null);
function Ue(l, o, a) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: a }), ue.value = o.uid, se.value = {
color: l.color,
shape: l.shape
}, pe.value = {
datapoint: o,
seriesIndex: a,
series: q.value,
config: e.value
}, ce.value = !0;
const u = e.value.style.chart.tooltip.customFormat;
if (vl(u) && cl(() => u({
seriesIndex: a,
datapoint: o,
series: q.value,
config: e.value
})))
de.value = u({
seriesIndex: a,
datapoint: o,
series: q.value,
config: e.value
});
else {
let r = "";
o.quadrantSide && (r += `<div style="color:${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].color};font-weight:${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].bold ? "bold" : "400"}">${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text}</div>`), r += `<div>${l.name}</div>`, r += `<div style="padding-bottom:6px;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};margin-bottom:3px">${o.name}</div>`, r += `<div>${e.value.style.chart.layout.grid.xAxis.name ? e.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${P(
e.value.style.chart.layout.labels.plotLabels.x.formatter,
o.xValue,
R({
v: o.xValue,
r: e.value.style.chart.tooltip.roundingValue
}),
{ datapoint: o, category: l, categoryIndex: a }
)}</b></div>`, r += `<div>${e.value.style.chart.layout.grid.yAxis.name ? e.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${P(
e.value.style.chart.layout.labels.plotLabels.y.formatter,
o.yValue,
R({
v: o.yValue,
r: e.value.style.chart.tooltip.roundingValue
}),
{ datapoint: o, category: l, categoryIndex: a }
)}</b></div>`, de.value = `<div style="text-align:left;font-size:${e.value.style.chart.tooltip.fontSize}px">${r}</div>`;
}
}
function Qe(l, o) {
ce.value = !1, ue.value = null, se.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o });
}
function Ge(l, o, a) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: a });
const u = {
category: l.name,
shape: l.shape,
itemName: o.name,
x: o.xValue,
y: o.yValue,
quadrantSide: o.quadrantSide,
sideName: e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text
};
ve("selectPlot", u);
}
function ee(l) {
if (!l) return;
const o = q.value.flatMap((u) => u.series.filter((r) => r.quadrantSide === l).map((r) => ({
category: r.categoryName,
itemName: r.name,
x: r.xValue,
y: r.yValue
}))), a = {
quadrantSide: l,
sideName: e.value.style.chart.layout.labels.quadrantLabels[l].text,
items: [...o]
};
ve("selectSide", a);
}
const w = g(() => ({
TL: {
tl: {
x: t.value.left + t.value.usableWidth / 4 - 20,
y: 0,
fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: t.value.left + t.value.usableWidth / 4,
y: 0,
fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: t.value.left + t.value.usableWidth / 4,
y: 20,
fill: e.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: t.value.left + t.value.usableWidth / 4 - 20,
y: 20,
fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color
},
crosshairs: {
horizontal: `M ${t.value.left + t.value.usableWidth / 4 - 20},20 ${t.value.left + t.value.usableWidth / 4 + 20},20`,
vertical: `M ${t.value.left + t.value.usableWidth / 4},0 ${t.value.left + t.value.usableWidth / 4},40`
}
},
TR: {
tl: {
x: t.value.centerX + t.value.usableWidth / 4 - 20,
y: 0,
fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: t.value.centerX + t.value.usableWidth / 4,
y: 0,
fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: t.value.centerX + t.value.usableWidth / 4,
y: 20,
fill: e.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: t.value.centerX + t.value.usableWidth / 4 - 20,
y: 20,
fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color
},
crosshairs: {
horizontal: `M ${t.value.centerX + t.value.usableWidth / 4 - 20},20 ${t.value.centerX + t.value.usableWidth / 4 + 20},20`,
vertical: `M ${t.value.centerX + t.value.usableWidth / 4},0 ${t.value.centerX + t.value.usableWidth / 4},40`
}
},
BR: {
tl: {
x: t.value.centerX + t.value.usableWidth / 4 - 20,
y: t.value.centerY - 48,
fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: t.value.centerX + t.value.usableWidth / 4,
y: t.value.centerY - 48,
fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: t.value.centerX + t.value.usableWidth / 4,
y: t.value.centerY - 28,
fill: e.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: t.value.centerX + t.value.usableWidth / 4 - 20,
y: t.value.centerY - 28,
fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color
},
crosshairs: {
horizontal: `M ${t.value.centerX + t.value.usableWidth / 4 - 20},${t.value.centerY - 28} ${t.value.centerX + t.value.usableWidth / 4 + 20},${t.value.centerY - 28}`,
vertical: `M ${t.value.centerX + t.value.usableWidth / 4},${t.value.centerY - 48} ${t.value.centerX + t.value.usableWidth / 4},${t.value.centerY - 8}`
}
},
BL: {
tl: {
x: t.value.left + t.value.usableWidth / 4 - 20,
y: t.value.centerY - 48,
fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: t.value.left + t.value.usableWidth / 4,
y: t.value.centerY - 48,
fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: t.value.left + t.value.usableWidth / 4,
y: t.value.centerY - 28,
fill: e.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: t.value.left + t.value.usableWidth / 4 - 20,
y: t.value.centerY - 28,
fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color
},
crosshairs: {
horizontal: `M ${t.value.left + t.value.usableWidth / 4 - 20},${t.value.centerY - 28} ${t.value.left + t.value.usableWidth / 4 + 20},${t.value.centerY - 28}`,
vertical: `M ${t.value.left + t.value.usableWidth / 4},${t.value.centerY - 48} ${t.value.left + t.value.usableWidth / 4},${t.value.centerY - 8}`
}
}
}));
function je() {
return q.value.map((l) => ({
color: l.color,
name: l.name,
shape: l.shape,
series: l.series.map((o) => ({
name: o.name,
x: o.xValue,
y: o.yValue,
quadrantSide: o.quadrantSide,
sideName: e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text
}))
}));
}
function ge(l = null) {
rt(() => {
const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = ae.value.head, u = ae.value.body, r = o.concat([a]).concat(u), y = nl(r);
l ? l(y) : il({ csvContent: y, title: e.value.style.chart.title.text || "vue-ui-quadrant" });
});
}
const I = b(!1);
function Je(l) {
I.value = l, Le.value += 1;
}
function Ze() {
C.value.showTable = !C.value.showTable;
}
function Ke() {
C.value.plotLabels.show = !C.value.plotLabels.show;
}
function et() {
C.value.showTooltip = !C.value.showTooltip;
}
const re = b(!1);
function me() {
re.value = !re.value;
}
async function Ot({ scale: l = 2 } = {}) {
if (!X.value) return;
const { width: o, height: a } = X.value.getBoundingClientRect(), u = o / a, { imageUri: r, base64: y } = await kl({ domElement: X.value, base64: !0, img: !0, scale: l });
return {
imageUri: r,
base64: y,
title: e.value.style.chart.title.text,
width: o,
height: a,
aspectRatio: u
};
}
const te = g(() => {
const l = e.value.table.useDialog && !e.value.table.show, o = C.value.showTable;
return {
component: l ? _t : kt,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: l ? {
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: I.value,
fullscreenParent: X.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: o,
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
}
}
}
};
});
xe(() => C.value.showTable, (l) => {
e.value.table.show || (l && e.value.table.useDialog && j.value ? j.value.open() : "close" in j.value && j.value.close());
});
function tt() {
C.value.showTable = !1, he.value && he.value.setTableIconState(!1);
}
const Mt = g(() => e.value.style.chart.backgroundColor), Nt = g(() => e.value.style.chart.legend), Pt = g(() => e.value.style.chart.title), { exportSvg: Rt, getSvg: Vt } = gl({
svg: ye,
title: Pt,
legend: Nt,
legendItems: K,
backgroundColor: Mt
});
async function lt({ isCb: l }) {
if (l) {
const { blob: o, url: a, text: u, dataUrl: r } = await Vt();
e.value.userOptions.callbacks.svg({ blob: o, url: a, text: u, dataUrl: r });
} else
Rt();
}
return gt({
getData: je,
getImage: Ot,
generatePdf: Me,
generateCsv: ge,
generateImage: Ne,
generateSvg: lt,
hideSeries: Et,
showSeries: Dt,
toggleTable: Ze,
toggleLabels: Ke,
toggleTooltip: et,
toggleAnnotator: me,
toggleFullscreen: Je
}), (l, o) => (s(), n("div", {
class: B(`vue-data-ui-component vue-ui-quadrant ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "quadrantChart",
ref: X,
id: `vue-ui-quadrant_${L.value}`,
style: A(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: o[14] || (o[14] = () => i(Xe)(!0)),
onMouseleave: o[15] || (o[15] = () => i(Xe)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), E(i(Lt), {
key: 0,
svgRef: i(ye),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: re.value,
onClose: me
}, {
"annotator-action-close": f(() => [
p(l.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": f(({ color: a }) => [
p(l.$slots, "annotator-action-color", T(z({ color: a })), void 0, !0)
]),
"annotator-action-draw": f(({ mode: a }) => [
p(l.$slots, "annotator-action-draw", T(z({ mode: a })), void 0, !0)
]),
"annotator-action-undo": f(({ disabled: a }) => [
p(l.$slots, "annotator-action-undo", T(z({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": f(({ disabled: a }) => [
p(l.$slots, "annotator-action-redo", T(z({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": f(({ disabled: a }) => [
p(l.$slots, "annotator-action-delete", T(z({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
zt.value ? (s(), n("div", {
key: 1,
ref_key: "noTitle",
ref: Se,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
e.value.style.chart.title.text ? (s(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: we,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(s(), E($l, {
key: `table_${qe.value}`,
config: {
title: {
cy: "quadrant-title",
...e.value.style.chart.title
},
subtitle: {
cy: "quadrant-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : h("", !0),
d("div", {
id: `legend-top-${L.value}`
}, null, 8, _l),
e.value.userOptions.show && $e.value && (i(De) || i(be)) ? (s(), E(i(wt), {
ref_key: "userOptionsRef",
ref: he,
key: `user_options_${Le.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: i(Oe),
isPrinting: i(Ye),
uid: L.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasLabel: e.value.userOptions.buttons.labels,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: I.value,
isTooltip: C.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: X.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: re.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Je,
onGeneratePdf: i(Me),
onGenerateCsv: ge,
onGenerateImage: i(Ne),
onGenerateSvg: lt,
onToggleTable: Ze,
onToggleLabels: Ke,
onToggleTooltip: et,
onToggleAnnotator: me,
style: A({
visibility: i(De) ? i(be) ? "visible" : "hidden" : "visible"
})
}, ut({ _: 2 }, [
l.$slots.menuIcon ? {
name: "menuIcon",
fn: f(({ isOpen: a, color: u }) => [
p(l.$slots, "menuIcon", T(z({ isOpen: a, color: u })), void 0, !0)
]),
key: "0"
} : void 0,
l.$slots.optionTooltip ? {
name: "optionTooltip",
fn: f(() => [
p(l.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
l.$slots.optionPdf ? {
name: "optionPdf",
fn: f(() => [
p(l.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
l.$slots.optionCsv ? {
name: "optionCsv",
fn: f(() => [
p(l.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
l.$slots.optionImg ? {
name: "optionImg",
fn: f(() => [
p(l.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
l.$slots.optionSvg ? {
name: "optionSvg",
fn: f(() => [
p(l.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
l.$slots.optionTable ? {
name: "optionTable",
fn: f(() => [
p(l.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
l.$slots.optionLabels ? {
name: "optionLabels",
fn: f(() => [
p(l.$slots, "optionLabels", {}, void 0, !0)
]),
key: "7"
} : void 0,
l.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: f(({ toggleFullscreen: a, isFullscreen: u }) => [
p(l.$slots, "optionFullscreen", T(z({ toggleFullscreen: a, isFullscreen: u })), void 0, !0)
]),
key: "8"
} : void 0,
l.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: f(({ toggleAnnotator: a, isAnnotator: u }) => [
p(l.$slots, "optionAnnotator", T(z({ toggleAnnotator: a, isAnnotator: u })), void 0, !0)
]),
key: "9"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
(s(), n("svg", {
ref_key: "svgRef",
ref: ye,
xmlns: i(al),
class: B({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
viewBox: `${v.value.startX} ${v.value.startY} ${v.value.width} ${v.value.height}`,
style: A(`max-width:100%;overflow:hidden;background:transparent;color:${e.value.style.chart.color}`),
id: `svg_${L.value}`
}, [
ne(i(At)),
l.$slots["chart-background"] ? (s(), n("foreignObject", {
key: 0,
x: v.value.startX,
y: v.value.startY,
width: v.value.width,
height: v.value.height,
style: {
pointerEvents: "none"
}
}, [
p(l.$slots, "chart-background", {}, void 0, !0)
], 8, ql)) : h("", !0),
d("defs", null, [
(s(!0), n(S, null, Y(q.value, (a, u) => (s(), n("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `quadrant_gradient_${L.value}_${u}`
}, [
d("stop", {
offset: "0%",
"stop-color": i(ie)(i(ol)(a.color, 0.05), e.value.style.chart.layout.areas.opacity)
}, null, 8, zl),
d("stop", {
offset: "100%",
"stop-color": i(ie)(a.color, e.value.style.chart.layout.areas.opacity)
}, null, 8, Fl)
], 8, Tl))), 256))
]),
e.value.style.chart.layout.grid.graduations.show ? (s(), n("g", Bl, [
(s(!0), n(S, null, Y(Bt.value, (a) => (s(), n("rect", {
fill: e.value.style.chart.layout.grid.graduations.fill ? i(ie)(e.value.style.chart.layout.grid.graduations.color, a.opacity) : "none",
x: a.x,
y: a.y,
height: a.height <= 0 ? 1e-3 : a.height,
width: a.width <= 0 ? 1e-3 : a.width,
"stroke-width": e.value.style.chart.layout.grid.graduations.strokeWidth,
stroke: e.value.style.chart.layout.grid.graduations.stroke,
rx: e.value.style.chart.layout.grid.graduations.roundingForce
}, null, 8, Wl))), 256))
])) : h("", !0),
d("line", {
x1: t.value.left,
y1: t.value.centerY,
x2: t.value.right,
y2: t.value.centerY,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth
}, null, 8, Xl),
d("line", {
x1: t.value.centerX,
y1: t.value.top,
x2: t.value.centerX,
y2: t.value.bottom,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth
}, null, 8, Dl),
e.value.style.chart.layout.grid.showArrows ? (s(), n("g", El, [
d("polygon", {
points: `${t.value.right - 8},${t.value.centerY - 6} ${t.value.right},${t.value.centerY} ${t.value.right - 8},${t.value.centerY + 6}`,
fill: e.value.style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, Yl),
d("polygon", {
points: `${t.value.left + 8},${t.value.centerY - 6} ${t.value.left},${t.value.centerY} ${t.value.left + 8},${t.value.centerY + 6}`,
fill: e.value.style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, Ol),
d("polygon", {
points: `${t.value.centerX - 6},${t.value.top + 8} ${t.value.centerX},${t.value.top} ${t.value.centerX + 6},${t.value.top + 8}`,
fill: e.value.style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, Ml),
d("polygon", {
points: `${t.value.centerX - 6},${t.value.bottom - 8} ${t.value.centerX},${t.value.bottom} ${t.value.centerX + 6},${t.value.bottom - 8}`,
fill: e.value.style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, Nl)
])) : h("", !0),
e.value.style.chart.layout.labels.quadrantLabels.show && !x.value ? (s(), n("g", Pl, [
e.value.style.chart.layout.labels.quadrantLabels.tl.text ? (s(), n("text", {
key: 0,
x: 0,
y: t.value.top - t.value.padding / 2,
"text-anchor": "start",
fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color,
"font-size": e.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
style: A(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
onClick: o[0] || (o[0] = (a) => ee("tl"))
}, k(e.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, Rl)) : h("", !0),
e.value.style.chart.layout.labels.quadrantLabels.tr.text ? (s(), n("text", {
key: 1,
x: t.value.width,
y: t.value.top - t.value.padding / 2,
"text-anchor": "end",
fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color,
"font-size": e.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
style: A(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
onClick: o[1] || (o[1] = (a) => ee("tr"))
}, k(e.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, Vl)) : h("", !0),
e.value.style.chart.layout.labels.quadrantLabels.br.text ? (s(), n("text", {
key: 2,
x: t.value.width,
y: t.value.bottom + t.value.padding * 0.7,
"text-anchor": "end",
fill: e.value.style.chart.layout.labels.quadrantLabels.br.color,
"font-size": e.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
style: A(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
onClick: o[2] || (o[2] = (a) => ee("br"))
}, k(e.value.style.chart.layout.labels.quadrantLabels.br.text), 13, Il)) : h("", !0),
e.value.style.chart.layout.labels.quadrantLabels.bl.text ? (s(), n("text", {
key: 3,
x: 0,
y: t.value.bottom + t.value.padding * 0.7,
"text-anchor": "start",
fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color,
"font-size": e.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
style: A(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
onClick: o[3] || (o[3] = (a) => ee("bl"))
}, k(e.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, Hl)) : h("", !0)
])) : h("", !0),
e.value.style.chart.layout.labels.axisLabels.show ? (s(), n("g", Ul, [
d("text", {
x: t.value.centerX,
y: t.value.top - t.value.padding / 6,
"text-anchor": "middle",
"font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
fill: e.value.style.chart.layout.labels.axisLabels.color.positive
}, k(i(P)(
e.value.style.chart.layout.labels.plotLabels.y.formatter,
_.value.y.max,
i(R)({
v: _.value.y.max,
r: e.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, Ql),
d("text", {
x: t.value.centerX,
y: t.value.top - t.value.padding / 2,
"text-anchor": "middle",
"font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
fill: e.value.style.chart.layout.labels.axisLabels.color.positive
}, k(e.value.style.chart.layout.grid.yAxis.name), 9, Gl),
d("text", {
x: t.value.centerX,
y: t.value.bottom + t.value.padding * 0.35,
"text-anchor": "middle",
"font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
fill: e.value.style.chart.layout.labels.axisLabels.color.negative
}, k(i(P)(
e.value.style.chart.layout.labels.plotLabels.y.formatter,
_.value.y.min,
i(R)({
v: _.value.y.min,
r: e.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, jl),
d("text", {
id: `xLabelMin_${L.value}`,
"text-anchor": "middle",
"font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
transform: `translate(${t.value.padding - e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(-90)`,
fill: e.value.style.chart.layout.labels.axisLabels.color.negative
}, k(i(P)(
e.value.style.chart.layout.labels.plotLabels.x.formatter,
_.value.x.min,
i(R)({
v: _.value.x.min,
r: e.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, Jl),
d("text", {
id: `xLabelMax_${L.value}`,
"text-anchor": "middle",
"font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
transform: `translate(${t.value.width - t.value.padding + e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(90)`,
fill: e.value.style.chart.layout.labels.axisLabels.color.positive
}, k(i(P)(
e.value.style.chart.layout.labels.plotLabels.x.formatter,
_.value.x.max,
i(R)({
v: _.value.x.max,
r: e.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, Zl),
d("text", {
id: `xLabelMaxName_${L.value}`,
"text-anchor": "middle",
"font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
transform: `translate(${t.value.width - e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(90)`,
fill: e.value.style.chart.layout.labels.axisLabels.color.positive
}, k(e.value.style.chart.layout.grid.xAxis.name), 9, Kl)
])) : h("", !0),
e.value.style.chart.layout.areas.show ? (s(), n("g", ea, [
(s(!0), n(S, null, Y(q.value, (a, u) => (s(), n("g", null, [
a.series.length > 2 ? (s(), n("polygon", {
key: 0,
"data-cy-quadrant-area": "",
fill: e.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${L.value}_${u})` : i(ie)(a.color, e.value.style.chart.layout.areas.opacity),
points: i(ul)(a)
}, null, 8, ta)) : h("", !0)
]))), 256))
])) : h("", !0),
d("g", null, [
d("rect", {
onClick: o[4] || (o[4] = (a) => M("TL")),
x: t.value.left,
y: t.value.top,
width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
fill: "transparent",
class: B({ "vue-data-ui-zoom-plus": !x.value, "vue-data-ui-zoom-minus": x.value })
}, null, 10, la),
d("rect", {
onClick: o[5] || (o[5] = (a) => M("TR")),
x: t.value.centerX,
y: t.value.top,
width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
fill: "transparent",
class: B({ "vue-data-ui-zoom-plus": !x.value, "vue-data-ui-zoom-minus": x.value })
}, null, 10, aa),
d("rect", {
onClick: o[6] || (o[6] = (a) => M("BR")),
x: t.value.centerX,
y: t.value.centerY,
width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
fill: "transparent",
class: B({ "vue-data-ui-zoom-plus": !x.value, "vue-data-ui-zoom-minus": x.value })
}, null, 10, oa),
d("rect", {
onClick: o[7] || (o[7] = (a) => M("BL")),
x: t.value.left,
y: t.value.centerY,
width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
fill: "transparent",
class: B({ "vue-data-ui-zoom-plus": !x.value, "vue-data-ui-zoom-minus": x.value })
}, null, 10, ua)
]),
e.value.style.chart.layout.labels.plotLabels.showAsTag ? (s(), n(S, { key: 7 }, [
C.value.plotLabels.show ? (s(), n("g", ia, [
(s(!0), n(S, null, Y(q.value, (a, u) => (s(), n(S, null, [
(s(!0), n(S, null, Y(a.series, (r) => (s(), n("foreignObject", {
style: { overflow: "visible" },
height: "10",
width: "100",
x: r.x - 50,
y: r.y - e.value.style.chart.layout.labels.plotLabels.fontSize,
onMouseover: (y) => Ue(a, r, u),
onMouseleave: (y) => Qe(r, u),
onClick: (y) => Ge(a, r, u)
}, [
d("div", {
style: A(`color:${i(rl)(a.color)};margin: 0 auto; font-size:${e.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: fit-content;`)
}, k(r.name), 5)
], 40, va))), 256))
], 64))), 256))
])) : h("", !0)
], 64)) : (s(), n(S, { key: 6 }, [
(s(!0), n(S, null, Y(q.value, (a, u) => (s(), n("g", null, [
(s(!0), n(S, null, Y(a.series, (r) => (s(), E(it, {
color: a.color,
isSelected: ue.value && r.uid === ue.value,
plot: r,
radius: e.value.style.chart.layout.plots.radius / (x.value ? 1.5 : 1),
shape: a.shape,
stroke: e.value.style.chart.layout.plots.outline ? e.value.style.chart.layout.plots.outlineColor : "none",
strokeWidth: e.value.style.chart.layout.plots.outlineWidth,
onMouseenter: (y) => Ue(a, r, u),
onMouseleave: (y) => Qe(r, u),
onClick: (y) => Ge(a, r, u)
}, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseenter", "onMouseleave", "onClick"]))), 256))
]))), 256)),
C.value.plotLabels.show ? (s(), n("g", sa, [
(s(!0), n(S, null, Y(q.value, (a) => (s(), n("g", null, [
(s(!0), n(S, null, Y(a.series, (u) => (s(), n("g", null, [
String(u.name).includes(`
`) ? (s(), n("text", {
key: 1,
x: u.x,
y: u.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius,
"text-anchor": "middle",
"font-size": e.value.style.chart.layout.labels.plotLabels.fontSize / (x.value ? 1.5 : 1),
fill: e.value.style.chart.layout.labels.plotLabels.color,
innerHTML: i(sl)({
content: String(u.name),
fontSize: e.value.style.chart.layout.labels.plotLabels.fontSize / (x.value ? 1.5 : 1),
fill: e.value.style.chart.layout.labels.plotLabels.color,
x: u.x,
y: u.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius
})
}, null, 8, na)) : (s(), n("text", {
key: 0,
x: u.x,
y: u.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius,
"text-anchor": "middle",
"font-size": e.value.style.chart.layout.labels.plotLabels.fontSize / (x.value ? 1.5 : 1),
fill: e.value.style.chart.layout.labels.plotLabels.color
}, k(u.name), 9, ra))
]))), 256))
]))), 256))
])) : h("", !0)
], 64)),
x.value ? (s(), n("g", ca, [
c.value === "TL" ? (s(), n("polygon", {
key: 0,
points: `${t.value.left - 1},${t.value.centerY} ${t.value.centerX},${t.value.centerY} ${t.value.centerX},${t.value.top - 1} ${t.value.right},${t.value.top - 1} ${t.value.right},${t.value.bottom} ${t.value.left - 1},${t.value.bottom} ${t.value.left - 1},${t.value.centerY}`,
fill: e.value.style.chart.backgroundColor,
style: { opacity: "1" }
}, null, 8, da)) : h("", !0),
c.value === "TR" ? (s(), n("polygon", {
key: 1,
points: `${t.value.left},${t.value.top - 1} ${t.value.centerX},${t.value.top - 1} ${t.value.centerX},${t.value.centerY} ${t.value.right + 1},${t.value.centerY} ${t.value.right + 1},${t.value.bottom} ${t.value.left},${t.value.bottom} ${t.value.left},${t.value.top - 1}`,
fill: e.value.style.chart.backgroundColor,
style: { opacity: "1" }
}, null, 8, ha)) : h("", !0),
c.value === "BR" ? (s(), n("polygon", {
key: 2,
points: `${t.value.left},${t.value.top} ${t.value.right + 1},${t.value.top} ${t.value.right + 1},${t.value.centerY} ${t.value.centerX},${t.value.centerY} ${t.value.centerX},${t.value.bottom + 1} ${t.value.left},${t.value.bottom + 1} ${t.value.left},${t.value.top}`,
fill: e.value.style.chart.backgroundColor,
style: { opacity: "1" }
}, null, 8, ba)) : h("", !0),
c.value === "BL" ? (s(), n("polygon", {
key: 3,
points: `${t.value.left - 1},${t.value.top} ${t.value.right},${t.value.top} ${t.value.right},${t.value.bottom + 1} ${t.value.centerX},${t.value.bottom + 1} ${t.value.centerX},${t.value.centerY} ${t.value.left - 1},${t.value.centerY} ${t.value.left - 1},${t.value.top}`,
fill: e.value.style.chart.backgroundColor,
style: { opacity: "1" }
}, null, 8, ya)) : h("", !0)
])) : h("", !0),
c.value && !le.value ? (s(), n("g", fa, [
d("text", {
x: V.value.x,
y: V.value.y - V.value.fontSize / 1.5,
"font-size": V.value.fontSize / 1.5,
fill: V.value.fill,
"text-anchor": "middle",
"font-weight": V.value.bold ? "bold" : "normal"
}, k(V.value.text), 9, pa)
])) : h("", !0),
x.value && c.value ? (s(), n("g", ga, [
d("rect", {
x: w.value[c.value].tl.x,
y: w.value[c.value].tl.y,
height: "20",
width: "20",
fill: w.value[c.value].tl.fill,
style: A(`cursor: pointer; opacity: ${c.value === "TL" ? 1 : 0.2}`),
onClick: o[8] || (o[8] = (a) => M("TL")),
class: B({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": c.value !== "TL" })
}, null, 14, ma),
d("rect", {
x: w.value[c.value].tr.x,
y: w.value[c.value].tr.y,
height: "20",
width: "20",
fill: w.value[c.value].tr.fill,
style: A(`cursor: pointer; opacity: ${c.value === "TR" ? 1 : 0.2}`),
onClick: o[9] || (o[9] = (a) => M("TR")),
class: B({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": c.value !== "TR" })
}, null, 14, xa),
d("rect", {
x: w.value[c.value].br.x,
y: w.value[c.value].br.y,
height: "20",
width: "20",
fill: w.value[c.value].br.fill,
style: A(`cursor: pointer; opacity: ${c.value === "BR" ? 1 : 0.2}`),
onClick: o[10] || (o[10] = (a) => M("BR")),
class: B({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": c.value !== "BR" })
}, null, 14, Ca),
d("rect", {
x: w.value[c.value].bl.x,
y: w.value[c.value].bl.y,
height: "20",
width: "20",
fill: w.value[c.value].bl.fill,
style: A(`cursor: pointer; opacity: ${c.value === "BL" ? 1 : 0.2}`),
onClick: o[11] || (o[11] = (a) => M("BL")),
class: B({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": c.value !== "BL" })
}, null, 14, ka),
d("path", {
class: "vue-ui-quadrant-minimap-crosshairs",
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 1,
d: w.value[c.value].crosshairs.horizontal
}, null, 8, $a),
d("path", {
class: "vue-ui-quadrant-minimap-crosshairs",
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 1,
d: w.value[c.value].crosshairs.vertical
}, null, 8, La)
])) : h("", !0),
p(l.$slots, "svg", { svg: t.value }, void 0, !0)
], 14, Sl)),
l.$slots.watermark ? (s(), n("div", wa, [
p(l.$slots, "watermark", T(z({ isPrinting: i(Ye) || i(Oe) })), void 0, !0)
])) : h("", !0),
d("div", {
id: `legend-bottom-${L.value}`
}, null, 8, Aa),
Fe.value ? (s(), E(Qt, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${L.value}` : `#legend-bottom-${L.value}`
}, [
d("div", {
ref_key: "chartLegend",
ref: Ae
}, [
e.value.style.chart.legend.show ? (s(), E(Ll, {
key: `legend_${ze.value}`,
legendSet: K.value,
config: Yt.value,
onClickMarker: o[12] || (o[12] = ({ legend: a }) => Z(a.id))
}, {
item: f(({ legend: a }) => [
i(Be) ? h("", !0) : (s(), n("div", {
key: 0,
onClick: (u) => Z(a.id),
style: A(`opacity:${F.value.includes(a.id) ? 0.5 : 1}`)
}, k(a.name), 13, _a))
]),
_: 1
}, 8, ["legendSet", "config"])) : p(l.$slots, "legend", {
key: 1,
legend: K.value
}, void 0, !0)
], 512)
], 8, ["to"])) : h("", !0),
l.$slots.source ? (s(), n("div", {
key: 6,
ref_key: "source",
ref: _e,
dir: "auto"
}, [
p(l.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
ne(i(xt), {
show: C.value.showTooltip && ce.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: X.value,
content: de.value,
isFullscreen: I.value,
isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
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": f(() => [
p(l.$slots, "tooltip-before", T(z({ ...pe.value })), void 0, !0)
]),
"tooltip-after": f(() => [
p(l.$slots, "tooltip-after", T(z({ ...pe.value })), void 0, !0)
]),
default: f(() => [
e.value.style.chart.tooltip.showShape ? (s(), n("svg", Sa, [
ne(it, {
plot: { x: 10, y: 10 },
shape: se.value.shape,
color: se.value.color,
radius: 8,
stroke: e.value.style.chart.layout.plots.outline ? e.value.style.chart.layout.plots.outlineColor : "none",
"stroke-width": e.value.style.chart.layout.plots.outlineWidth
}, null, 8, ["shape", "color", "stroke", "stroke-width"])
])) : h("", !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
$e.value && e.value.userOptions.buttons.table ? (s(), E(Gt(te.value.component), jt({ key: 7 }, te.value.props, {
ref_key: "tableUnit",
ref: j,
onClose: tt
}), ut({
content: f(() => [
(s(), E(i($t), {
key: `table_${Te.value}`,
colNames: oe.value.colNames,
head: oe.value.head,
body: oe.value.body,
config: oe.value.config,
title: e.value.table.useDialog ? "" : te.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: tt
}, {
th: f(({ th: a }) => [
st(k(a), 1)
]),
td: f(({ td: a }) => [
d("div", {
innerHTML: a.name || a
}, null, 8, qa)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: f(() => [
st(k(te.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: f(() => [
d("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: o[13] || (o[13] = (a) => ge(e.value.userOptions.callbacks.csv))
}, [
ne(i(Ct), {
name: "excel",
stroke: te.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : h("", !0),
i(Be) ? (s(), E(fl, { key: 8 })) : h("", !0)
], 46, Al));
}
}, za = /* @__PURE__ */ wl(Ta, [["__scopeId", "data-v-99f9ebbe"]]), Qa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: za
}, Symbol.toStringTag, { value: "Module" }));
export {
Ua as a,
Qa as b,
za as v
};