vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,549 lines • 68.6 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, Bt as n, D as r, G as i, Jt as a, Kt as o, Pt as s, S as ee, Tt as te, Vt as ne, X as c, _t as re, ct as ie, i as l, jt as ae, q as oe, r as se, t as ce, tt as le, w as ue, xt as de } from "./lib-Bttd6u5E.js";
import { n as fe, t as pe } from "./useHints-Dq_w2E8B.js";
import { t as me } from "./useConfig-D3scuR88.js";
import { t as he } from "./usePrinter-DN5bYhTG.js";
import { n as ge, t as _e } from "./BaseScanner-DZvpgOjM.js";
import { t as ve } from "./useSvgExport-DH-FfcqQ.js";
import { t as ye } from "./useNestedProp-vPNvh7rV.js";
import { t as be } from "./useThemeCheck-C43Tcqmk.js";
import { t as xe } from "./img-Bnokohej.js";
import { n as Se } from "./Title-BE3qg9xl.js";
import { t as Ce } from "./Shape-C21CMlWS.js";
import { t as we } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as Te, t as Ee } from "./useResponsive-ZtArZtUf.js";
import { t as De } from "./DefGrad-DVBqDjhO.js";
import { t as Oe } from "./BaseLegendToggle-DZVucLnv.js";
import { t as ke } from "./A11yDataTable-DdRsVULz.js";
import { t as Ae } from "./useUserOptionState-DK-_1ddE.js";
import { t as je } from "./useChartAccessibility-DYqac8yF.js";
import { t as Me } from "./Legend-CQxUgOd-.js";
import { t as Ne } from "./vue_ui_quadrant-CDSTKTJz.js";
import { Fragment as u, Teleport as Pe, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as Fe, createTextVNode as Ie, createVNode as Le, defineAsyncComponent as g, guardReactiveProps as _, mergeProps as Re, nextTick as ze, normalizeClass as v, normalizeProps as y, normalizeStyle as b, onBeforeUnmount as Be, onMounted as Ve, openBlock as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as He, shallowRef as Ue, toDisplayString as T, toRefs as We, unref as E, watch as Ge, withCtx as D } from "vue";
//#region src/components/vue-ui-quadrant.vue
var Ke = /* @__PURE__ */ e({ default: () => en }), qe = ["id"], Je = ["id"], Ye = ["id"], Xe = { style: { position: "relative" } }, Ze = [
"xmlns",
"aria-describedby",
"viewBox",
"id"
], Qe = [
"x",
"y",
"width",
"height"
], $e = { key: 1 }, et = [
"fill",
"x",
"y",
"height",
"width",
"stroke-width",
"stroke",
"rx"
], tt = [
"x1",
"y1",
"x2",
"y2",
"stroke",
"stroke-width"
], nt = [
"x1",
"y1",
"x2",
"y2",
"stroke",
"stroke-width"
], rt = { key: 2 }, it = ["points", "fill"], at = ["points", "fill"], ot = ["points", "fill"], st = ["points", "fill"], ct = { key: 3 }, lt = [
"y",
"fill",
"font-size"
], ut = [
"x",
"y",
"fill",
"font-size"
], dt = [
"x",
"y",
"fill",
"font-size"
], ft = [
"y",
"fill",
"font-size"
], pt = { key: 4 }, mt = [
"x",
"y",
"font-size",
"fill"
], ht = [
"x",
"y",
"font-size",
"fill"
], gt = [
"x",
"y",
"font-size",
"fill"
], _t = [
"id",
"font-size",
"transform",
"fill"
], vt = [
"id",
"font-size",
"transform",
"fill"
], yt = [
"id",
"font-size",
"transform",
"fill"
], bt = { key: 5 }, xt = ["fill", "points"], St = [
"x",
"y",
"width",
"height"
], Ct = [
"x",
"y",
"width",
"height"
], wt = [
"x",
"y",
"width",
"height"
], Tt = [
"x",
"y",
"width",
"height"
], Et = [
"x",
"y",
"onMouseenter",
"onMouseleave",
"onClick"
], Dt = [
"data-a11y-plot-id",
"cx",
"cy",
"r"
], Ot = [
"data-a11y-plot-id",
"cx",
"cy",
"r"
], kt = {
key: 0,
style: { "pointer-events": "none" }
}, At = [
"x",
"y",
"font-size",
"fill"
], jt = [
"x",
"y",
"font-size",
"fill",
"innerHTML"
], Mt = { key: 0 }, Nt = [
"x",
"y",
"onMouseover",
"onMouseleave",
"onClick"
], Pt = {
key: 8,
class: "vue-ui-dna"
}, Ft = ["points", "fill"], It = ["points", "fill"], Lt = ["points", "fill"], Rt = ["points", "fill"], zt = { key: 9 }, Bt = [
"x",
"y",
"font-size",
"fill",
"font-weight"
], Vt = { key: 10 }, Ht = [
"x",
"y",
"fill"
], Ut = [
"x",
"y",
"fill"
], Wt = [
"x",
"y",
"fill"
], Gt = [
"x",
"y",
"fill"
], Kt = ["stroke", "d"], qt = ["stroke", "d"], Jt = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, Yt = {
key: 5,
class: "vue-data-ui-watermark"
}, Xt = ["id"], Zt = ["onClick"], Qt = {
key: 0,
height: "14",
width: "14",
viewBox: "0 0 20 20"
}, $t = ["innerHTML"], en = /*#__PURE__*/ we({
__name: "vue-ui-quadrant",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: [
"selectPlot",
"selectSide",
"selectLegend",
"copyAlt"
],
setup(e, { expose: we, emit: Ke }) {
let en = g(() => import("./Tooltip-DhjyfHwz.js")), tn = g(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), nn = g(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), rn = g(() => import("./DataTable-BbKgJ5UI.js")), an = g(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), on = g(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), sn = g(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), cn = g(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_quadrant: ln } = me(), { isThemeValid: un, warnInvalidTheme: dn } = be(), O = e, fn = d(() => !!O.dataset && O.dataset.length), k = S(oe()), pn = Ke, mn = S(!1), hn = S(""), gn = S(0), A = S(!1), j = S(null), _n = S(null), vn = S(null), yn = S(null), bn = S(null), xn = S(0), Sn = S(0), Cn = S(0), wn = S(!1), Tn = S(null), En = S(null), Dn = S(!1), On = S(!1), M = S(null), kn = S(null), An = S({
x: 0,
y: 0
}), jn = S("pointer"), Mn = S(!1), N = S(zn());
fe({
config: () => N.value,
dataset: () => O.dataset,
component: "VueUiQuadrant",
rules: [pe.emptyArray, pe.noHint]
});
let P = d(() => N.value.userOptions.useCursorPointer), Nn = d(() => ({
defaultConfig: {
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" }
} }
},
userConfig: N.value.skeletonConfig ?? {}
})), { loading: Pn, FINAL_DATASET: Fn } = ge({
...We(O),
FINAL_CONFIG: N,
prepareConfig: zn,
callback: () => {
Promise.resolve().then(async () => {
await ze(), R.value.showTable = N.value.table.show;
});
},
skeletonDataset: O.config?.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: -.5
},
{
name: "_",
x: -2,
y: -.25
},
{
name: "_",
x: -1,
y: -.135
},
{
name: "_",
x: 0,
y: 0
},
{
name: "_",
x: 1,
y: .135
},
{
name: "_",
x: 2,
y: .25
},
{
name: "_",
x: 3,
y: .5
},
{
name: "_",
x: 4,
y: 1
},
{
name: "_",
x: 5,
y: 2
},
{
name: "_",
x: 6,
y: 4
}
]
}],
skeletonConfig: a({
defaultConfig: N.value,
userConfig: Nn.value
})
}), { userOptionsVisible: In, setUserOptionsVisibility: Ln, keepUserOptionState: Rn } = Ae({ config: N.value }), { svgRef: F } = je({ config: N.value.style.chart.title });
function zn() {
let e = ye({
userConfig: O.config,
defaultConfig: ln
}), t = e.theme;
if (!t) return e;
if (!un.value(e)) return dn(e), e;
let n = ye({
userConfig: Ne[t] || O.config,
defaultConfig: e
}), r = ye({
userConfig: O.config,
defaultConfig: n
});
return {
...r,
customPalette: r.customPalette.length ? r.customPalette : o[t] || s
};
}
Ge(() => O.config, (e) => {
N.value = zn(), In.value = !N.value.userOptions.showOnChartHover, Vn(), xn.value += 1, Sn.value += 1, Cn.value += 1, R.value.plotLabels.show = N.value.style.chart.layout.labels.plotLabels.show, R.value.showTable = N.value.table.show, R.value.showTooltip = N.value.style.chart.tooltip.show;
}, { deep: !0 });
let I = Ue(null), L = Ue(null), Bn = d(() => N.value.debug);
function Vn() {
if (ae(O.dataset) ? le({
componentName: "VueUiQuadrant",
type: "dataset",
debug: Bn.value
}) : O.dataset.forEach((e, t) => {
[null, void 0].includes(e.name) && le({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
index: t,
debug: Bn.value
}), [null, void 0].includes(e.series) ? le({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "series",
index: t,
debug: Bn.value
}) : e.series.forEach((e, t) => {
[null, void 0].includes(e.name) && le({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
key: "series",
index: t,
debug: Bn.value
});
});
}), N.value.responsive) {
let e = Te(() => {
let { width: e, height: t } = Ee({
chart: j.value,
title: N.value.style.chart.title.text ? _n.value : null,
legend: N.value.style.chart.legend.show ? vn.value : null,
source: yn.value,
noTitle: bn.value
});
z.value = 48, requestAnimationFrame(() => {
B.value.height = t, B.value.usableHeight = t - z.value * 2, B.value.width = e, B.value.usableWidth = e - z.value * 2, B.value.top = z.value, B.value.left = z.value, B.value.right = e - z.value, B.value.bottom = t - z.value, B.value.centerX = e / 2, B.value.centerY = t - t / 2, B.value.padding = z.value;
});
});
I.value && (L.value && I.value.unobserve(L.value), I.value.disconnect()), I.value = new ResizeObserver(e), L.value = j.value.parentNode, I.value.observe(L.value);
}
}
Ve(() => {
wn.value = !0, Vn();
}), Be(() => {
I.value && (L.value && I.value.unobserve(L.value), I.value.disconnect());
});
let { isPrinting: Hn, isImaging: Un, generatePdf: Wn, generateImage: Gn } = he({
elementId: `vue-ui-quadrant_${k.value}`,
fileName: N.value.style.chart.title.text || "vue-ui-quadrant",
options: N.value.userOptions.print
}), Kn = d(() => N.value.userOptions.show && !N.value.style.chart.title.text), qn = d(() => ue(N.value.customPalette)), R = S({
plotLabels: { show: N.value.style.chart.layout.labels.plotLabels.show },
showTable: N.value.table.show,
showTooltip: N.value.style.chart.tooltip.show
}), z = S(48), B = S({
height: N.value.style.chart.height,
usableHeight: N.value.style.chart.height - z.value * 2,
width: N.value.style.chart.width,
usableWidth: N.value.style.chart.width - z.value * 2,
top: z.value,
left: z.value,
right: N.value.style.chart.width - z.value,
bottom: N.value.style.chart.height - z.value,
centerX: N.value.style.chart.width / 2,
centerY: N.value.style.chart.height - N.value.style.chart.height / 2,
padding: z.value
}), V = S({
...JSON.parse(JSON.stringify(B.value)),
startX: 0,
startY: 0
});
Ge(() => B.value, (e) => {
e && (V.value = {
...JSON.parse(JSON.stringify(B.value)),
startX: 0,
startY: 0
});
}, { deep: !0 });
let H = S(null), U = d(() => {
switch (H.value) {
case "TL": return {
x: V.value.startX + V.value.width / 2,
y: V.value.height,
text: N.value.style.chart.layout.labels.quadrantLabels.tl.text || "Top Left",
fontSize: N.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
fill: N.value.style.chart.layout.labels.quadrantLabels.tl.color,
bold: N.value.style.chart.layout.labels.quadrantLabels.tl.bold
};
case "TR": return {
x: V.value.startX + V.value.width / 2,
y: V.value.height,
text: N.value.style.chart.layout.labels.quadrantLabels.tr.text || "Top Right",
fontSize: N.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
fill: N.value.style.chart.layout.labels.quadrantLabels.tr.color,
bold: N.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: N.value.style.chart.layout.labels.quadrantLabels.br.text || "Bottom Right",
fontSize: N.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
fill: N.value.style.chart.layout.labels.quadrantLabels.br.color,
bold: N.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: N.value.style.chart.layout.labels.quadrantLabels.bl.text || "Bottom Left",
fontSize: N.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
fill: N.value.style.chart.layout.labels.quadrantLabels.bl.color,
bold: N.value.style.chart.layout.labels.quadrantLabels.bl.bold
};
default: return {
x: 0,
y: 0,
text: "",
fontSize: 0,
fill: "none",
bold: !1
};
}
}), Jn = S(null), Yn = S(!1);
function Xn({ targetX: e, targetY: t, targetW: n, targetH: r, side: i }) {
H.value && yr(i);
let a = {
x: e - V.value.startX,
y: t - V.value.startY,
w: n - V.value.width,
h: r - V.value.height
}, o = N.value.zoomAnimationFrames, s = 0;
function ee() {
Yn.value = !0, V.value.startX += a.x / o, V.value.startY += a.y / o, V.value.width += a.w / o, V.value.height += a.h / o, s += 1, s < o ? Jn.value = requestAnimationFrame(ee) : Yn.value = !1;
}
ee();
}
let W = d(() => N.value.zoomEnabled);
function G(e) {
if (W.value && !Yn.value) if (A.value && H.value === e) Xn({
targetX: 0,
targetY: 0,
targetW: B.value.width,
targetH: B.value.height
}), H.value = null, A.value = !1;
else {
switch (H.value = e, e) {
case "TL":
Xn({
targetX: 0,
targetY: 0,
targetW: B.value.width / 2 + B.value.left,
targetH: B.value.height / 2 + B.value.top,
side: "tl"
});
break;
case "TR":
Xn({
targetX: B.value.width / 2 - B.value.left,
targetY: 0,
targetW: B.value.width / 2 + B.value.left,
targetH: B.value.height / 2 + B.value.top,
side: "tr"
});
break;
case "BR":
Xn({
targetX: B.value.width / 2 - B.value.left,
targetY: B.value.height / 2 - B.value.top,
targetW: B.value.width / 2 + B.value.left,
targetH: B.value.height / 2 + B.value.top,
side: "br"
});
break;
case "BL":
Xn({
targetX: 0,
targetY: B.value.height / 2 - B.value.top,
targetW: B.value.width / 2 + B.value.left,
targetH: B.value.height / 2 + B.value.top,
side: "bl"
});
break;
default: V.value.startX = 0, V.value.startY = 0, V.value.width = B.value.width, V.value.height = B.value.height;
}
A.value = !0;
}
}
let Zn = d(() => {
let e = N.value.style.chart.layout.grid.graduations.steps, t = B.value.usableWidth / (e * 2), n = B.value.top, r = [];
for (let i = 0; i < e; i += 1) r.push({
x: B.value.padding + t * i,
y: n + B.value.usableHeight * (i / e / 2),
height: B.value.usableHeight * (1 - i / e),
width: B.value.usableWidth * (1 - i / e),
opacity: Math.round((i + 1) / e * 20)
});
return r;
}), K = d(() => {
let e = N.value.style.chart.layout.grid.xAxis.max, t = N.value.style.chart.layout.grid.xAxis.min, n = N.value.style.chart.layout.grid.yAxis.max, r = N.value.style.chart.layout.grid.yAxis.min;
return N.value.style.chart.layout.grid.xAxis.auto && (e = Math.max(...Qn.value.flatMap((e) => e.series.map((e) => e.x))), t = Math.min(...Qn.value.flatMap((e) => e.series.map((e) => e.x)))), N.value.style.chart.layout.grid.yAxis.auto && (n = Math.max(...Qn.value.flatMap((e) => e.series.map((e) => e.y))), r = Math.min(...Qn.value.flatMap((e) => e.series.map((e) => e.y)))), {
x: {
max: e,
min: t
},
y: {
max: n,
min: r
}
};
}), q = S([]), Qn = d(() => Fn.value.map((e, t) => ({
...e,
series: te({
data: e.series,
threshold: N.value.downsample.threshold
}),
id: `cat_${t}_${k.value}`,
color: ee(e.color) || qn.value[t] || s[t]
}))), $n = d(() => Qn.value.filter((e) => !q.value.includes(e.id))), er = d(() => Qn.value.map((e, t) => ({
...e,
shape: e.shape || "circle",
series: e.series.map((t) => ({
...t,
x: tr(t.x),
y: nr(t.y),
xValue: t.x,
yValue: t.y,
quadrantSide: dr({
x: t.x,
y: t.y
}),
categoryName: e.name,
category: e,
shape: e.shape,
color: e.color
}))
}))), J = d(() => (Fn.value.forEach((e, t) => {
e.series.forEach((e, t) => {
[null, void 0].includes(e.x) && le({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "x",
key: "series",
index: t,
debug: Bn.value
}), [null, void 0].includes(e.y) && le({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "y",
key: "series",
index: t,
debug: Bn.value
});
});
}), $n.value.map((e, t) => ({
...e,
shape: e.shape || "circle",
color: e.color || qn.value[t] || s[t],
series: e.series.map((t) => ({
...t,
category: e,
x: tr(t.x),
y: nr(t.y),
xValue: t.x,
yValue: t.y,
quadrantSide: dr({
x: t.x,
y: t.y
}),
categoryName: e.name,
shape: e.shape,
color: e.color,
uid: oe()
}))
}))));
function tr(e) {
if (e >= 0) {
let t = e / K.value.x.max;
return B.value.centerX + B.value.usableWidth / 2 * t;
}
{
let t = Math.abs(e) / Math.abs(K.value.x.min);
return B.value.centerX - B.value.usableWidth / 2 * t;
}
}
function nr(e) {
if (e >= 0) {
let t = e / K.value.y.max;
return B.value.centerY + (1 - B.value.usableHeight / 2 * t);
}
{
let t = Math.abs(e) / Math.abs(K.value.y.min);
return B.value.centerY - (1 - B.value.usableHeight / 2 * t);
}
}
let rr = d(() => {
let e = J.value.flatMap((e) => e.series.map((t) => ({
x: t.xValue,
y: t.yValue,
name: t.name,
category: t.categoryName,
quadrantSide: t.quadrantSide,
sideName: N.value.style.chart.layout.labels.quadrantLabels[t.quadrantSide].text,
color: e.color,
shape: e.shape
}))), t = N.value.style.chart.layout.grid.xAxis.name || "x", n = N.value.style.chart.layout.grid.yAxis.name || "y";
return {
head: [
N.value.translations.category,
N.value.translations.item,
t,
n,
N.value.translations.side
],
body: e.map((e) => [
e.category,
e.name,
e.x,
e.y,
e.sideName || e.quadrantSide
]),
itsShapes: e.map((e) => ({
shape: e.shape,
color: e.color
})),
tableData: e
};
}), ir = d(() => {
let e = rr.value.head, t = rr.value.tableData.map((e) => [
{
shape: e.shape,
color: e.color,
name: e.category
},
e.name,
l(N.value.style.chart.layout.labels.plotLabels.x.formatter, e.x, c({
v: e.x,
r: N.value.style.chart.layout.labels.plotLabels.rounding
})),
l(N.value.style.chart.layout.labels.plotLabels.y.formatter, e.y, c({
v: e.y,
r: N.value.style.chart.layout.labels.plotLabels.rounding
})),
e.sideName || e.quadrantSide
]);
return {
head: e,
body: t,
a11yBody: t.map((e) => e.map((e, t) => t === 0 ? e.name ?? "" : e)),
config: {
th: {
backgroundColor: N.value.table.th.backgroundColor,
color: N.value.table.th.color,
outline: N.value.table.th.outline
},
td: {
backgroundColor: N.value.table.td.backgroundColor,
color: N.value.table.td.color,
outline: N.value.table.td.outline
},
breakpoint: N.value.table.responsiveBreakpoint
},
colNames: e
};
});
function ar() {
q.value.length ? q.value = [] : Y.value.forEach((e) => {
q.value.push(e.id);
}), pn("selectLegend", br());
}
function or(e) {
q.value.includes(e) ? q.value = q.value.filter((t) => t !== e) : q.value.push(e), pn("selectLegend", br());
}
let Y = d(() => er.value.map((e) => ({
name: e.name,
shape: e.shape,
color: e.color,
id: e.id,
opacity: q.value.includes(e.id) ? .5 : 1,
segregate: () => or(e.id),
isSegregated: q.value.includes(e.id)
})));
function sr(e) {
return Y.value.length ? Y.value.find((t) => t.name === e) || (N.value.debug && console.warn(`VueUiQuadrant - Series name not found "${e}"`), null) : (N.value.debug && console.warn("VueUiQuadrant - There are no series to show."), null);
}
function cr(e) {
let t = sr(e);
t !== null && q.value.includes(t.id) && or(t.id);
}
function lr(e) {
let t = sr(e);
t !== null && (q.value.includes(t.id) || or(t.id));
}
let ur = d(() => ({
cy: "quadrant-div-legend",
backgroundColor: N.value.style.chart.legend.backgroundColor,
color: N.value.style.chart.legend.color,
fontSize: N.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: N.value.style.chart.legend.bold ? "bold" : ""
}));
function dr(e) {
switch (!0) {
case e.x >= 0 && e.y >= 0: return "tr";
case e.x >= 0 && e.y < 0: return "br";
case e.x < 0 && e.y < 0: return "bl";
case e.x < 0 && e.y >= 0: return "tl";
default: return "";
}
}
let X = S(null), fr = S(null), pr = S(null);
function mr() {
X.value = null, fr.value = null, M.value = null, kn.value = null, mn.value = !1;
}
function hr(e) {
if (!F.value || !e) return;
let t = `[data-a11y-plot-id="${e}"]`, n = F.value.querySelector(t);
if (!n) return;
let r = n.getBoundingClientRect();
An.value = {
x: r.left + r.width / 2,
y: r.top + r.height / 2
};
}
function gr(e, t, n, r = "pointer", i = null) {
N.value.events.datapointEnter && N.value.events.datapointEnter({
datapoint: t,
seriesIndex: n
}), X.value = t.uid, fr.value = {
color: e.color,
shape: e.shape
}, jn.value = r, M.value = i, kn.value = t.uid, pr.value = {
datapoint: t,
seriesIndex: n,
series: J.value,
config: N.value
};
let a = N.value.style.chart.tooltip.customFormat;
if (de(a) && ie(() => a({
seriesIndex: n,
datapoint: t,
series: J.value,
config: N.value
}))) hn.value = a({
seriesIndex: n,
datapoint: t,
series: J.value,
config: N.value
});
else {
let r = "";
t.quadrantSide && (r += `<div style="color:${N.value.style.chart.layout.labels.quadrantLabels[t.quadrantSide].color};font-weight:${N.value.style.chart.layout.labels.quadrantLabels[t.quadrantSide].bold ? "bold" : "400"}">${N.value.style.chart.layout.labels.quadrantLabels[t.quadrantSide].text}</div>`), r += `<div>${e.name}</div>`, r += `<div style="padding-bottom:6px;border-bottom:1px solid ${N.value.style.chart.tooltip.borderColor};margin-bottom:3px">${t.name}</div>`, r += `<div>${N.value.style.chart.layout.grid.xAxis.name ? N.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${l(N.value.style.chart.layout.labels.plotLabels.x.formatter, t.xValue, c({
v: t.xValue,
r: N.value.style.chart.tooltip.roundingValue
}), {
datapoint: t,
category: e,
categoryIndex: n
})}</b></div>`, r += `<div>${N.value.style.chart.layout.grid.yAxis.name ? N.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${l(N.value.style.chart.layout.labels.plotLabels.y.formatter, t.yValue, c({
v: t.yValue,
r: N.value.style.chart.tooltip.roundingValue
}), {
datapoint: t,
category: e,
categoryIndex: n
})}</b></div>`, hn.value = `<div style="text-align:left;font-size:${N.value.style.chart.tooltip.fontSize}px">${r}</div>`;
}
r === "keyboard" && ze(() => {
hr(t.uid);
}), mn.value = !0;
}
function _r(e, t) {
N.value.events.datapointLeave && N.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
}), (kn.value !== e.uid || jn.value !== "keyboard") && (mn.value = !1, X.value = null, fr.value = null);
}
function vr(e, t, n) {
N.value.events.datapointClick && N.value.events.datapointClick({
datapoint: t,
seriesIndex: n
});
let r = {
category: e.name,
shape: e.shape,
itemName: t.name,
x: t.xValue,
y: t.yValue,
quadrantSide: t.quadrantSide,
sideName: N.value.style.chart.layout.labels.quadrantLabels[t.quadrantSide].text
};
pn("selectPlot", r);
}
function yr(e) {
if (!e) return;
let t = J.value.flatMap((t) => t.series.filter((t) => t.quadrantSide === e).map((e) => ({
category: e.categoryName,
itemName: e.name,
x: e.xValue,
y: e.yValue
}))), n = {
quadrantSide: e,
sideName: N.value.style.chart.layout.labels.quadrantLabels[e].text,
items: [...t]
};
pn("selectSide", n);
}
let Z = d(() => ({
TL: {
tl: {
x: B.value.left + B.value.usableWidth / 4 - 20,
y: 0,
fill: N.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: B.value.left + B.value.usableWidth / 4,
y: 0,
fill: N.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: B.value.left + B.value.usableWidth / 4,
y: 20,
fill: N.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: B.value.left + B.value.usableWidth / 4 - 20,
y: 20,
fill: N.value.style.chart.layout.labels.quadrantLabels.bl.color
},
crosshairs: {
horizontal: `M ${B.value.left + B.value.usableWidth / 4 - 20},20 ${B.value.left + B.value.usableWidth / 4 + 20},20`,
vertical: `M ${B.value.left + B.value.usableWidth / 4},0 ${B.value.left + B.value.usableWidth / 4},40`
}
},
TR: {
tl: {
x: B.value.centerX + B.value.usableWidth / 4 - 20,
y: 0,
fill: N.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: B.value.centerX + B.value.usableWidth / 4,
y: 0,
fill: N.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: B.value.centerX + B.value.usableWidth / 4,
y: 20,
fill: N.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: B.value.centerX + B.value.usableWidth / 4 - 20,
y: 20,
fill: N.value.style.chart.layout.labels.quadrantLabels.bl.color
},
crosshairs: {
horizontal: `M ${B.value.centerX + B.value.usableWidth / 4 - 20},20 ${B.value.centerX + B.value.usableWidth / 4 + 20},20`,
vertical: `M ${B.value.centerX + B.value.usableWidth / 4},0 ${B.value.centerX + B.value.usableWidth / 4},40`
}
},
BR: {
tl: {
x: B.value.centerX + B.value.usableWidth / 4 - 20,
y: B.value.centerY - 48,
fill: N.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: B.value.centerX + B.value.usableWidth / 4,
y: B.value.centerY - 48,
fill: N.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: B.value.centerX + B.value.usableWidth / 4,
y: B.value.centerY - 28,
fill: N.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: B.value.centerX + B.value.usableWidth / 4 - 20,
y: B.value.centerY - 28,
fill: N.value.style.chart.layout.labels.quadrantLabels.bl.color
},
crosshairs: {
horizontal: `M ${B.value.centerX + B.value.usableWidth / 4 - 20},${B.value.centerY - 28} ${B.value.centerX + B.value.usableWidth / 4 + 20},${B.value.centerY - 28}`,
vertical: `M ${B.value.centerX + B.value.usableWidth / 4},${B.value.centerY - 48} ${B.value.centerX + B.value.usableWidth / 4},${B.value.centerY - 8}`
}
},
BL: {
tl: {
x: B.value.left + B.value.usableWidth / 4 - 20,
y: B.value.centerY - 48,
fill: N.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: B.value.left + B.value.usableWidth / 4,
y: B.value.centerY - 48,
fill: N.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: B.value.left + B.value.usableWidth / 4,
y: B.value.centerY - 28,
fill: N.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: B.value.left + B.value.usableWidth / 4 - 20,
y: B.value.centerY - 28,
fill: N.value.style.chart.layout.labels.quadrantLabels.bl.color
},
crosshairs: {
horizontal: `M ${B.value.left + B.value.usableWidth / 4 - 20},${B.value.centerY - 28} ${B.value.left + B.value.usableWidth / 4 + 20},${B.value.centerY - 28}`,
vertical: `M ${B.value.left + B.value.usableWidth / 4},${B.value.centerY - 48} ${B.value.left + B.value.usableWidth / 4},${B.value.centerY - 8}`
}
}
}));
function br() {
return J.value.map((e) => ({
color: e.color,
name: e.name,
shape: e.shape,
series: e.series.map((e) => ({
name: e.name,
x: e.xValue,
y: e.yValue,
quadrantSide: e.quadrantSide,
sideName: N.value.style.chart.layout.labels.quadrantLabels[e.quadrantSide].text
}))
}));
}
function xr(e = null) {
ze(() => {
let n = [
[N.value.style.chart.title.text],
[N.value.style.chart.title.subtitle.text],
[""]
], i = rr.value.head, a = rr.value.body, o = n.concat([i]).concat(a), s = r(o);
e ? e(s) : t({
csvContent: s,
title: N.value.style.chart.title.text || "vue-ui-quadrant"
});
});
}
let Q = S(!1);
function Sr(e) {
Q.value = e, gn.value += 1;
}
function Cr() {
R.value.showTable = !R.value.showTable;
}
function wr() {
R.value.plotLabels.show = !R.value.plotLabels.show;
}
function Tr() {
R.value.showTooltip = !R.value.showTooltip;
}
let Er = S(!1);
function Dr() {
Er.value = !Er.value;
}
async function Or({ scale: e = 2 } = {}) {
if (!j.value) return;
let { width: t, height: n } = j.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await xe({
domElement: j.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: N.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let kr = d(() => {
let e = N.value.table.useDialog && !N.value.table.show, t = R.value.showTable;
return {
component: e ? cn : nn,
title: `${N.value.style.chart.title.text}${N.value.style.chart.title.subtitle.text ? `: ${N.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: N.value.table.th.backgroundColor,
color: N.value.table.th.color,
headerColor: N.value.table.th.color,
headerBg: N.value.table.th.backgroundColor,
isFullscreen: Q.value,
fullscreenParent: j.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: P.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color
},
head: {
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color
}
}
}
};
});
Ge(() => R.value.showTable, (e) => {
N.value.table.show || (e && N.value.table.useDialog && Tn.value ? Tn.value.open() : "close" in Tn.value && Tn.value.close());
});
function Ar() {
R.value.showTable = !1, En.value && En.value.setTableIconState(!1);
}
let jr = d(() => N.value.style.chart.backgroundColor), Mr = d(() => N.value.style.chart.legend), Nr = d(() => N.value.style.chart.title), { exportSvg: Pr, getSvg: Fr } = ve({
svg: F,
title: Nr,
legend: Mr,
legendItems: Y,
backgroundColor: jr
});
async function Ir({ isCb: e }) {
On.value = !0, await ze();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Fr();
await Promise.resolve(N.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Pr());
} finally {
On.value = !1;
}
}
function Lr(e) {
if (e?.stage === "start") {
Dn.value = !0;
return;
}
if (e?.stage === "end") {
Dn.value = !1;
return;
}
Gn();
}
async function Rr() {
if (pn("copyAlt", {
config: N.value,
dataset: $n.value
}), !N.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(N.value.userOptions.callbacks.altCopy({
config: N.value,
dataset: $n.value
}));
}
function zr() {
M.value = null, kn.value = null, Mn.value = !0;
}
function Br() {
mr(), Mn.value = !1;
}
function Vr(e) {
if (!F.value || Er.value || document.activeElement !== F.value || !$.value.length) return;
let t = e.key === "ArrowLeft" || e.key === "ArrowUp", n = e.key === "ArrowRight" || e.key === "ArrowDown", r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
if (!t && !n && !r && !i) return;
if (e.preventDefault(), e.stopPropagation(), i) {
mr();
return;
}
if (r) {
if (M.value === null) return;
let e = $.value[M.value];
if (!e) return;
vr(e.category, e.plot, e.categoryIndex);
return;
}
let a = M.value, o = X.value ? $.value.findIndex((e) => e.plot.uid === X.value) : null, s = a !== null && a >= 0 && a < $.value.length, ee = o !== null && o >= 0 && o < $.value.length;
s ? (a += n ? 1 : -1, a < 0 && (a = $.value.length - 1), a >= $.value.length && (a = 0)) : ee ? (a = n ? o + 1 : o - 1, a >= $.value.length && (a = 0), a < 0 && (a = $.value.length - 1)) : a = n ? 0 : $.value.length - 1;
let te = $.value[a];
te && gr(te.category, te.plot, te.categoryIndex, "keyboard", a);
}
let Hr = d(() => ({
headers: ir.value?.colNames ?? [],
rows: ir.value?.a11yBody ?? []
})), $ = d(() => J.value.flatMap((e, t) => e.series.map((n) => ({
category: e,
plot: n,
categoryIndex: t
}))));
return we({
getData: br,
getImage: Or,
generatePdf: Wn,
generateCsv: xr,
generateImage: Gn,
generateSvg: Ir,
hideSeries: lr,
showSeries: cr,
toggleTable: Cr,
toggleLabels: wr,
toggleTooltip: Tr,
toggleAnnotator: Dr,
toggleFullscreen: Sr,
copyAlt: Rr
}), (e, t) => (x(), m("div", {
class: v(`vue-data-ui-component vue-ui-quadrant ${Q.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${N.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "quadrantChart",
ref: j,
id: `vue-ui-quadrant_${k.value}`,
style: b(`font-family:${N.value.style.fontFamily};width:100%; text-align:center;background:${N.value.style.chart.backgroundColor};${N.value.responsive ? "height: 100%" : ""}`),
onMouseenter: t[14] ||= () => E(Ln)(!0),
onMouseleave: t[15] ||= () => {
E(Ln)(!1), Mn.value || mr();
}
}, [
h("div", {
id: `chart-instructions-${k.value}`,
class: "sr-only"
}, [h("p", null, T(N.value.a11y.translations.keyboardNavigation), 1)], 8, Je),
Hr.value?.rows?.length ? (x(), f(ke, {
key: 0,
uid: k.value,
head: Hr.value.headers,
body: Hr.value.rows,
notice: N.value.a11y.translations.tableAvailable,
caption: N.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : p("", !0),
N.value.userOptions.buttons.annotator ? (x(), f(E(an), {
key: 1,
svgRef: E(F),
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color,
active: Er.value,
isCursorPointer: P.value,
onClose: Dr
}, {
"annotator-action-close": D(() => [w(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": D(({ color: t }) => [w(e.$slots, "annotator-action-color", y(_({ color: t })), void 0, !0)]),
"annotator-action-draw": D(({ mode: t }) => [w(e.$slots, "annotator-action-draw", y(_({ mode: t })), void 0, !0)]),
"annotator-action-undo": D(({ disabled: t }) => [w(e.$slots, "annotator-action-undo", y(_({ disabled: t })), void 0, !0)]),
"annotator-action-redo": D(({ disabled: t }) => [w(e.$slots, "annotator-action-redo", y(_({ disabled: t })), void 0, !0)]),
"annotator-action-delete": D(({ disabled: t }) => [w(e.$slots, "annotator-action-delete", y(_({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : p("", !0),
Kn.value ? (x(), m("div", {
key: 2,
ref_key: "noTitle",
ref: bn,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : p("", !0),
N.value.style.chart.title.text ? (x(), m("div", {
key: 3,
ref_key: "chartTitle",
ref: _n,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [(x(), f(Se, {
key: `table_${xn.value}`,
config: {
title: {
cy: "quadrant-title",
...N.value.style.chart.title
},
subtitle: {
cy: "quadrant-subtitle",
...N.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : p("", !0),
h("div", { id: `legend-top-${k.value}` }, null, 8, Ye),
N.value.userOptions.show && fn.value && (E(Rn) || E(In)) ? (x(), f(E(on), {
ref_key: "userOptionsRef",
ref: En,
key: `user_options_${gn.value}`,
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color,
isImaging: E(Un),
isPrinting: E(Hn),
uid: k.value,
hasTooltip: N.value.userOptions.buttons.tooltip && N.value.style.chart.tooltip.show,
hasPdf: N.value.userOptions.buttons.pdf,
hasImg: N.value.userOptions.buttons.img,
hasSvg: N.value.userOptions.buttons.svg,
hasXls: N.value.userOptions.buttons.csv,
hasTable: N.value.userOptions.buttons.table,
hasLabel: N.value.userOptions.buttons.labels,
hasFullscreen: N.value.userOptions.buttons.fullscreen,
hasAltCopy: N.value.userOptions.buttons.altCopy,
isFullscreen: Q.value,
isTooltip: R.value.showTooltip,
titles: { ...N.value.userOptions.buttonTitles },
chartElement: j.value,
position: N.value.userOptions.position,
hasAnnotator: N.value.userOptions.buttons.annotator,
isAnnotation: Er.value,
callbacks: N.value.userOptions.callbacks,
printScale: N.value.userOptions.print.scale,
tableDialog: N.value.table.useDialog,
isCursorPointer: P.value,
onToggleFullscreen: Sr,
onGeneratePdf: E(Wn),
onGenerateCsv: xr,
onGenerateImage: Lr,
onGenerateSvg: Ir,
onToggleTable: Cr,
onToggleLabels: wr,
onToggleTooltip: Tr,
onToggleAnnotator: Dr,
onCopyAlt: Rr,
style: b({ visibility: E(Rn) ? E(In) ? "visible" : "hidden" : "visible" })
}, Fe({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: D(({ isOpen: t, color: n }) => [w(e.$slots, "menuIcon", y(_({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: D(() => [w(e.$slots, "optionTooltip", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: D(() => [w(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: D(() => [w(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: D(() => [w(e.$slots, "optionImg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: D(() => [w(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: D(() => [w(e.$slots, "optionTable", {}, void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionLabels ? {
name: "optionLabels",
fn: D(() => [w(e.$slots, "optionLabels", {}, void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: D(({ toggleFullscreen: t, isFullscreen: n }) => [w(e.$slots, "optionFullscreen", y(_({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "8"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: D(({ toggleAnnotator: t, isAnnotator: n }) => [w(e.$slots, "optionAnnotator", y(_({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "9"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: D(({ altCopy: t }) => [w(e.$slots, "optionAltCopy", y(_({ altCopy: t })), void 0, !0)]),
key: "10"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: D(() => [w(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "11"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: D(() => [w(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "12"
} : void 0
]), 1032, /* @__PURE__ */ "backgroundColor.color.isImaging.isPrinting.uid.hasTooltip.hasPdf.hasImg.hasSvg.hasXls.hasTable.hasLabel.hasFullscreen.hasAltCopy.isFullscreen.isTooltip.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : p("", !0),
h("div", Xe, [(x(), m("svg", {
ref_key: "svgRef",
ref: F,
xmlns: E(ce),
"aria-describedby": `chart-instructions-${k.value}`,
class: v({
"vue-data-ui-fullscreen--on": Q.value,
"vue-data-ui-fulscreen--off": !Q.value
}),
viewBox: `${V.value.startX} ${V.value.startY} ${V.value.width} ${V.value.height}`,
style: b(`max-width:100%;overflow:hidden;background:transparent;color:${N.value.style.chart.color}`),
id: `svg_${k.value}`,
tabindex: "0",
onFocus: zr,
onBlur: Br,
onKeydown: Vr
}, [
Le(E(sn)),
e.$slots["chart-background"] ? (x(), m("foreignObject", {
key: 0,
x: V.value.startX,
y: V.value.startY,
width: V.value.width,
height: V.value.height,
style: { pointerEvents: "none" }
}, [w(e.$slots, "chart-background", {}, void 0, !0)], 8, Qe)) : p("", !0),
h("defs", null, [(x(!0), m(u, null, C(J.value, (e, t) => (x(), f(De, {
t: "radial",
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `quadrant_gradient_${k.value}_${t}`,
key: `quadrant_gradient_${k.value}_${t}`,
stops: [[
"0%",
E(n)(E(ne)(e.color, .05), N.value.style.chart.layout.areas.opacity),
1
], [
"100%",
E(n)(e.color, N.value.style.chart.layout.areas.opacity),
1
]]
}, null, 8, ["id", "stops"]))), 128))]),
N.value.style.chart.layout.grid.graduations.show ? (x(), m("g", $e, [(x(!0), m(u, null, C(Zn.value, (e) => (x(), m("rect", {
fill: N.value.style.chart.layout.grid.graduations.fill ? E(n)(N.value.style.chart.layout.grid.graduations.color, e.opacity) : "none",
x: e.x,
y: e.y,
height: e.height <= 0 ? .001 : e.height,
width: e.width <= 0 ? .001 : e.width,
"stroke-width": N.value.style.chart.layout.grid.graduations.strokeWidth,
stroke: N.value.style.chart.layout.grid.graduations.stroke,
rx: N.value.style.chart.layout.grid.graduations.roundingForce
}, null, 8, et))), 256))])) : p("", !0),
h("line", {
x1: B.value.left,
y1: B.value.centerY,
x2: B.value.right,
y2: B.value.centerY,
stroke: N.value.style.chart.layout.grid.stroke,
"stroke-width": N.value.style.chart.layout.grid.strokeWidth
}, null, 8, tt),
h("line", {
x1: B.value.centerX,
y1: B.value.top,
x2: B.value.centerX,
y2: B.value.bottom,
stroke: N.value.style.chart.layout.grid.stroke,
"stroke-width": N.value.style.chart.layout.grid.strokeWidth
}, null, 8, nt),
N.value.style.chart.layout.grid.showArrows ? (x(), m("g", rt, [
h("polygon", {
points: `${B.value.right - 8},${B.value.centerY - 6} ${B.value.right},${B.value.centerY} ${B.value.right - 8},${B.value.centerY + 6}`,
fill: N.value.style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, it),
h("polygon", {
points: `${B.value.left + 8},${B.value.centerY - 6} ${B.value.left},${B.value.centerY} ${B.value.left + 8},${B.value.centerY + 6}`,
fill: N.value.style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, at),
h("polygon", {
points: `${B.value.centerX - 6},${B.value.top + 8} ${B.value.centerX},${B.value.top} ${B.value.centerX + 6},${B.value.top + 8}`,
fill: N.value.style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, ot),
h("polygon", {
points: `${B.value.centerX - 6},${B.value.bottom - 8} ${B.value.centerX},${B.value.bottom} ${B.value.centerX + 6},${B.value.bottom - 8}`,
fill: N.value.style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, st)
])) : p("", !0),
N.value.style.chart.layout.labels.quadrantLabels.show && !A.value ? (x(), m("g", ct, [
N.value.style.chart.layout.labels.quadrantLabels.tl.text ? (x(), m("text", {
key: 0,
x: 0,
y: B.value.top - B.value.padding / 2,
"text-anchor": "start",
fill: N.value.style.chart.layout.labels.quadrantLabels.tl.color,
"font-size": N.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
style: b(`font-weight:${N.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
onClick: t[0] ||= (e) => yr("tl")
}, T(N.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, lt)) : p("", !0),
N.value.style.chart.layout.labels.quadrantLabels.tr.text ? (x(), m("text", {
key: 1,
x: B.value.width,
y: B.value.top - B.value.padding / 2,
"text-anchor": "end",
fill: N.value.style.chart.layout.labels.quadrantLabels.tr.color,
"font-size": N.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
style: b(`font-weight:${N.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
onClick: t[1] ||= (e) => yr("tr")
}, T(N.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, ut)) : p("", !0),
N.value.style.chart.layout.labels.quadrantLabels.br.text ? (x(), m("text", {
key: 2,
x: B.value.width,
y: B.value.bottom + B.value.padding * .7,
"text-anchor": "end",
fill: N.value.style.chart.layout.labels.quadrantLabels.br.color,
"font-size": N.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
style: b(`font-weight:${N.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
onClick: t[2] ||= (e) => yr("br")
}, T(N.value.style.chart.layout.labels.quadrantLabels.br.text), 13, dt)) : p("", !0),
N.value.style.chart.layout.labels.quadrantLabels.bl.text ? (x(), m("text", {
key: 3,
x: 0,
y: B.value.bottom + B.value.padding * .7,
"text-anchor": "start",
fill: N.value.style.chart.layout.labels.quadrantLabels.bl.color,
"font-size": N.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
style: b(`font-weight:${N.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
onClick: t[3] ||= (e) => yr("bl")
}, T(N.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, ft)) : p("", !0)
])) : p("", !0),
N.value.style.chart.layout.labels.axisLabels.show ? (x(), m("g", pt, [
N.value.style.chart.layout.grid.yAxis.show ? (x(), m("text", {
key: 0,
x: B.value.centerX,
y: B.value.top - B.value.padding / 6,
"text-anchor": "middle",
"font-size": N.value.style.chart.layout.labels.axisLabels.fontSize,
fill: N.value.style.chart.layout.labels.axisLabels.color.positive
}, T(E(l)(N.value.style.chart.layout.labels.plotLabels.y.formatter, K.value.y.max, E(c)({
v: K.value.y.max,
r: N.value.style.chart.layout.labels.plotLabels.rounding
}))), 9, mt)) : p("", !0),
h("text", {
x: B.value.centerX,
y: B.value.top - B.value.padding / 2,
"text-anchor": "middle",
"font-size": N.value.style.chart.layout.labels.axisLabels.fontSize,
fill: N.value.style.chart.layout.labels.axisLabels.color.positive
}, T(N.value.style.chart.layout.grid.yAxis.name), 9, ht),
N.value.style.chart.layout.grid.yAxis.show ? (x(), m("text", {
key: 1,
x: B.value.centerX,
y: B.value.bottom + B.value.padding * .35,
"text-anchor": "middle",
"font-size": N.value.style.chart.layout.labels.axisLabels.fontSize,
fill: N.value.style.chart.layout.labels.axisLabels.color.negative
}, T(E(l)(N.value.style.chart.layout.labels.plotLabels.y.formatter, K.value.y.min, E(c)({
v: K.value.y.min,
r: N.value.style.chart.layout.labels.plotLabels.rounding
}))), 9, gt)) : p("", !0),
N.value.style.chart.layout.grid.xAxis.show ? (x(), m("text", {
key: 2,
id: `xLabelMin_${k.value}`,
"text-anchor": "middle",
"font-size": N.value.style.chart.layout.labels.axisLabels.fontSize,
transform: `translate(${B.value.padding - N.value.style.chart.layout.labels.axisLabels.fontSize}, ${B.value.height / 2}), rotate(-90)`,
fill: N.value.style.chart.layout.labels.axisLabels.color.negative
}, T(E(l)(N.value.style.chart.layout.labels.plotLabels.x.formatter, K.value.x.min, E(c)({
v: K.value.x.min,
r: N