vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,166 lines • 56 kB
JavaScript
import { computed as g, ref as b, watch as Fe, onMounted as at, onBeforeUnmount as ot, openBlock as r, createElementBlock as u, normalizeClass as T, unref as e, normalizeStyle as w, createBlock as N, createCommentVNode as y, createSlots as st, withCtx as x, renderSlot as $, normalizeProps as G, guardReactiveProps as Q, createVNode as de, createElementVNode as h, Fragment as S, renderList as Y, toDisplayString as k, createTextVNode as rt, nextTick as nt } from "vue";
import { u as it, c as Re, t as ut, a as dt, p as ce, o as ct, e as H, b as ht, T as yt, d as bt, i as O, f as P, X as vt, s as ae, w as ft, U as pt, G as gt, x as mt, y as xt, q as $t, r as kt } from "./index-WrV3SAID.js";
import { t as Lt, u as wt } from "./useResponsive-CoxXLe23.js";
import { _ as qt } from "./Title-BR-xoRp4.js";
import { u as _t, U as St } from "./usePrinter-kVpf1iV8.js";
import { _ as Ct } from "./Tooltip-ho4JxRm-.js";
import { _ as He } from "./Shape-DNIrFW-J.js";
import { L as zt } from "./Legend-7H4oi6Sq.js";
import { D as Tt } from "./DataTable-DNPvKWC0.js";
import Xt from "./vue-ui-skeleton-Qec_XSRf.js";
import Wt from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Ie } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Yt } from "./PackageVersion-1NslmM8M.js";
import { P as At } from "./PenAndPaper-BF1ZRVm3.js";
import { u as Mt } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as Nt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ot = ["id"], Pt = ["xmlns", "viewBox", "id"], Vt = ["x", "y", "width", "height"], Bt = ["id"], Ft = ["stop-color"], Rt = ["stop-color"], Ht = { key: 1 }, It = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], Ut = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Dt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Et = { key: 2 }, Gt = ["points", "fill"], Qt = ["points", "fill"], Jt = ["points", "fill"], jt = ["points", "fill"], Zt = { key: 3 }, Kt = ["y", "fill", "font-size"], el = ["x", "y", "fill", "font-size"], tl = ["x", "y", "fill", "font-size"], ll = ["y", "fill", "font-size"], al = { key: 4 }, ol = ["x", "y", "font-size", "fill"], sl = ["x", "y", "font-size", "fill"], rl = ["x", "y", "font-size", "fill"], nl = ["id", "font-size", "transform", "fill"], il = ["id", "font-size", "transform", "fill"], ul = ["id", "font-size", "transform", "fill"], dl = { key: 5 }, cl = ["fill", "points"], hl = ["x", "y", "width", "height"], yl = ["x", "y", "width", "height"], bl = ["x", "y", "width", "height"], vl = ["x", "y", "width", "height"], fl = {
key: 0,
style: { "pointer-events": "none" }
}, pl = ["x", "y", "font-size", "fill"], gl = { key: 0 }, ml = ["x", "y", "onMouseover", "onClick"], xl = {
key: 8,
class: "vue-ui-dna"
}, $l = ["points", "fill"], kl = ["points", "fill"], Ll = ["points", "fill"], wl = ["points", "fill"], ql = { key: 9 }, _l = ["x", "y", "font-size", "fill", "font-weight"], Sl = { key: 10 }, Cl = ["x", "y", "fill"], zl = ["x", "y", "fill"], Tl = ["x", "y", "fill"], Xl = ["x", "y", "fill"], Wl = ["stroke", "d"], Yl = ["stroke", "d"], Al = {
key: 5,
class: "vue-data-ui-watermark"
}, Ml = ["onClick"], Nl = {
key: 0,
height: "14",
width: "14",
viewBox: "0 0 20 20"
}, Ol = ["innerHTML"], Pl = {
__name: "vue-ui-quadrant",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectPlot", "selectSide", "selectLegend"],
setup(Ue, { expose: De, emit: Ee }) {
const { vue_ui_quadrant: Ge } = it(), X = Ue, J = g(() => !!X.dataset && X.dataset.length), z = b(Re()), oe = Ee, Qe = b(null), j = b(!1), se = b(""), he = b(0), p = b(!1), B = b(null), ye = b(null), be = b(null), ve = b(null), fe = b(null), pe = b(0), ge = b(0), me = b(0), l = g({
get: () => ke(),
set: (a) => a
}), { userOptionsVisible: re, setUserOptionsVisibility: xe, keepUserOptionState: $e } = Mt({ config: l.value });
function ke() {
const a = Ie({
userConfig: X.config,
defaultConfig: Ge
});
return a.theme ? {
...Ie({
userConfig: ut.vue_ui_quadrant[a.theme] || X.config,
defaultConfig: a
}),
customPalette: dt[a.theme] || ce
} : a;
}
Fe(() => X.config, (a) => {
l.value = ke(), re.value = !l.value.showOnChartHover, Le(), pe.value += 1, ge.value += 1, me.value += 1;
}, { deep: !0 });
const Z = b(null);
function Le() {
if (ct(X.dataset) ? H({
componentName: "VueUiQuadrant",
type: "dataset"
}) : X.dataset.forEach((a, s) => {
[null, void 0].includes(a.name) && H({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
index: s
}), [null, void 0].includes(a.series) ? H({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "series",
index: s
}) : a.series.forEach((o, n) => {
[null, void 0].includes(o.name) && H({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
key: "series",
index: n
});
});
}), l.value.responsive) {
const a = Lt(() => {
const { width: s, height: o } = wt({
chart: B.value,
title: l.value.style.chart.title.text ? ye.value : null,
legend: l.value.style.chart.legend.show ? be.value : null,
source: ve.value,
noTitle: fe.value
});
m.value = 48, t.value.height = o, t.value.usableHeight = o - m.value * 2, t.value.width = s, t.value.usableWidth = s - m.value * 2, t.value.top = m.value, t.value.left = m.value, t.value.right = s - m.value, t.value.bottom = o - m.value, t.value.centerX = s / 2, t.value.centerY = o - o / 2, t.value.padding = m.value;
});
Z.value = new ResizeObserver(a), Z.value.observe(B.value.parentNode);
}
}
at(() => {
Le();
}), ot(() => {
Z.value && Z.value.disconnect();
});
const { isPrinting: we, isImaging: qe, generatePdf: _e, generateImage: Se } = _t({
elementId: `vue-ui-quadrant_${z.value}`,
fileName: l.value.style.chart.title.text || "vue-ui-quadrant"
}), Je = g(() => l.value.userOptions.show && !l.value.style.chart.title.text), Ce = g(() => ht(l.value.customPalette)), q = b({
plotLabels: {
show: l.value.style.chart.layout.labels.plotLabels.show
},
showTable: l.value.table.show,
showTooltip: l.value.style.chart.tooltip.show
}), m = b(48), t = b({
height: l.value.style.chart.height,
usableHeight: l.value.style.chart.height - m.value * 2,
width: l.value.style.chart.width,
usableWidth: l.value.style.chart.width - m.value * 2,
top: m.value,
left: m.value,
right: l.value.style.chart.width - m.value,
bottom: l.value.style.chart.height - m.value,
centerX: l.value.style.chart.width / 2,
centerY: l.value.style.chart.height - l.value.style.chart.height / 2,
padding: m.value
}), d = b({
...JSON.parse(JSON.stringify(t.value)),
startX: 0,
startY: 0
});
Fe(() => t.value, (a) => {
a && (d.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: d.value.startX + d.value.width / 2,
y: d.value.height,
text: l.value.style.chart.layout.labels.quadrantLabels.tl.text || "Top Left",
fontSize: l.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
fill: l.value.style.chart.layout.labels.quadrantLabels.tl.color,
bold: l.value.style.chart.layout.labels.quadrantLabels.tl.bold
};
case "TR":
return {
x: d.value.startX + d.value.width / 2,
y: d.value.height,
text: l.value.style.chart.layout.labels.quadrantLabels.tr.text || "Top Right",
fontSize: l.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
fill: l.value.style.chart.layout.labels.quadrantLabels.tr.color,
bold: l.value.style.chart.layout.labels.quadrantLabels.tr.bold
};
case "BR":
return {
x: d.value.startX + d.value.width / 2,
y: d.value.height * 1.678,
text: l.value.style.chart.layout.labels.quadrantLabels.br.text || "Bottom Right",
fontSize: l.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
fill: l.value.style.chart.layout.labels.quadrantLabels.br.color,
bold: l.value.style.chart.layout.labels.quadrantLabels.br.bold
};
case "BL":
return {
x: d.value.startX + d.value.width / 2,
y: d.value.height * 1.678,
text: l.value.style.chart.layout.labels.quadrantLabels.bl.text || "Bottom Left",
fontSize: l.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
fill: l.value.style.chart.layout.labels.quadrantLabels.bl.color,
bold: l.value.style.chart.layout.labels.quadrantLabels.bl.bold
};
default:
return { x: 0, y: 0, text: "", fontSize: 0, fill: "none", bold: !1 };
}
}), je = b(null), K = b(!1);
function I({ targetX: a, targetY: s, targetW: o, targetH: n, side: i }) {
c.value && E(i);
const v = {
x: a - d.value.startX,
y: s - d.value.startY,
w: o - d.value.width,
h: n - d.value.height
}, f = l.value.zoomAnimationFrames;
let W = 0;
function Be() {
K.value = !0, d.value.startX += v.x / f, d.value.startY += v.y / f, d.value.width += v.w / f, d.value.height += v.h / f, W += 1, W < f ? je.value = requestAnimationFrame(Be) : K.value = !1;
}
Be();
}
function A(a) {
if (!K.value)
if (p.value && c.value === a)
I({
targetX: 0,
targetY: 0,
targetW: t.value.width,
targetH: t.value.height
}), c.value = null, p.value = !1;
else {
switch (c.value = a, a) {
case "TL":
I({
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":
I({
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":
I({
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":
I({
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:
d.value.startX = 0, d.value.startY = 0, d.value.width = t.value.width, d.value.height = t.value.height;
break;
}
p.value = !0;
}
}
const Ze = g(() => {
const a = l.value.style.chart.layout.grid.graduations.steps, s = t.value.usableWidth / (a * 2), o = t.value.top, n = [];
for (let i = 0; i < a; i += 1)
n.push({
x: t.value.padding + s * i,
y: o + t.value.usableHeight * (i / a / 2),
height: t.value.usableHeight * (1 - i / a),
width: t.value.usableWidth * (1 - i / a),
opacity: Math.round((i + 1) / a * 20)
});
return n;
}), _ = g(() => {
let a = l.value.style.chart.layout.grid.xAxis.max, s = l.value.style.chart.layout.grid.xAxis.min, o = l.value.style.chart.layout.grid.yAxis.max, n = l.value.style.chart.layout.grid.yAxis.min;
return l.value.style.chart.layout.grid.xAxis.auto && (a = Math.max(...F.value.flatMap((i) => i.series.map((v) => v.x))), s = Math.min(...F.value.flatMap((i) => i.series.map((v) => v.x)))), l.value.style.chart.layout.grid.yAxis.auto && (o = Math.max(...F.value.flatMap((i) => i.series.map((v) => v.y))), n = Math.min(...F.value.flatMap((i) => i.series.map((v) => v.y)))), {
x: {
max: a,
min: s
},
y: {
max: o,
min: n
}
};
}), M = b([]), F = g(() => X.dataset.map((a, s) => ({
...a,
series: yt({
data: a.series,
threshold: l.value.downsample.threshold
}),
id: `cat_${s}_${z.value}`,
color: bt(a.color) || Ce.value[s] || ce[s]
}))), Ke = g(() => F.value.filter((a) => !M.value.includes(a.id))), et = g(() => F.value.map((a, s) => ({
...a,
shape: a.shape || "circle",
series: a.series.map((o) => ({
...o,
x: ze(o.x),
y: Te(o.y),
xValue: o.x,
yValue: o.y,
quadrantSide: We({ x: o.x, y: o.y }),
categoryName: a.name,
shape: a.shape,
color: a.color
}))
}))), C = g(() => (X.dataset.forEach((a, s) => {
a.series.forEach((o, n) => {
[null, void 0].includes(o.x) && H({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "x",
key: "series",
index: n
}), [null, void 0].includes(o.y) && H({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "y",
key: "series",
index: n
});
});
}), Ke.value.map((a, s) => ({
...a,
shape: a.shape || "circle",
color: a.color || Ce.value[s] || ce[s],
series: a.series.map((o) => ({
...o,
x: ze(o.x),
y: Te(o.y),
xValue: o.x,
yValue: o.y,
quadrantSide: We({ x: o.x, y: o.y }),
categoryName: a.name,
shape: a.shape,
color: a.color,
uid: Re()
}))
}))));
function ze(a) {
if (a >= 0) {
const s = a / _.value.x.max;
return t.value.centerX + t.value.usableWidth / 2 * s;
} else {
const s = Math.abs(a) / Math.abs(_.value.x.min);
return t.value.centerX - t.value.usableWidth / 2 * s;
}
}
function Te(a) {
if (a >= 0) {
const s = a / _.value.y.max;
return t.value.centerY + (1 - t.value.usableHeight / 2 * s);
} else {
const s = Math.abs(a) / Math.abs(_.value.y.min);
return t.value.centerY - (1 - t.value.usableHeight / 2 * s);
}
}
const ee = g(() => {
const a = C.value.flatMap((f) => f.series.map((W) => ({
x: W.xValue,
y: W.yValue,
name: W.name,
category: W.categoryName,
quadrantSide: W.quadrantSide,
sideName: l.value.style.chart.layout.labels.quadrantLabels[W.quadrantSide].text,
color: f.color,
shape: f.shape
}))), s = l.value.style.chart.layout.grid.xAxis.name || "x", o = l.value.style.chart.layout.grid.yAxis.name || "y", n = [l.value.translations.category, l.value.translations.item, s, o, l.value.translations.side], i = a.map((f) => [f.category, f.name, f.x, f.y, f.sideName || f.quadrantSide]), v = a.map((f) => ({
shape: f.shape,
color: f.color
}));
return { head: n, body: i, itsShapes: v, tableData: a };
}), te = g(() => {
const a = ee.value.head, s = ee.value.tableData.map((n) => [
{
shape: n.shape,
color: n.color,
name: n.category
},
n.name,
O(
l.value.style.chart.layout.labels.plotLabels.x.formatter,
n.x,
P({
v: n.x,
r: l.value.style.chart.layout.labels.plotLabels.rounding
})
),
O(
l.value.style.chart.layout.labels.plotLabels.y.formatter,
n.y,
P({
v: n.y,
r: l.value.style.chart.layout.labels.plotLabels.rounding
})
),
n.sideName || n.quadrantSide
]), o = {
th: {
backgroundColor: l.value.table.th.backgroundColor,
color: l.value.table.th.color,
outline: l.value.table.th.outline
},
td: {
backgroundColor: l.value.table.td.backgroundColor,
color: l.value.table.td.color,
outline: l.value.table.td.outline
},
breakpoint: l.value.table.responsiveBreakpoint
};
return { head: a, body: s, config: o, colNames: a };
});
function ne(a) {
M.value.includes(a) ? M.value = M.value.filter((o) => o !== a) : M.value.push(a);
const s = Me();
oe("selectLegend", s);
}
const Xe = g(() => et.value.map((a) => ({
name: a.name,
shape: a.shape,
color: a.color,
id: a.id,
opacity: M.value.includes(a.id) ? 0.5 : 1,
segregate: () => ne(a.id),
isSegregated: M.value.includes(a.id)
}))), tt = g(() => ({
cy: "quadrant-div-legend",
backgroundColor: l.value.style.chart.legend.backgroundColor,
color: l.value.style.chart.legend.color,
fontSize: l.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: l.value.style.chart.legend.bold ? "bold" : ""
}));
function We(a) {
switch (!0) {
case (a.x >= 0 && a.y >= 0):
return "tr";
case (a.x >= 0 && a.y < 0):
return "br";
case (a.x < 0 && a.y < 0):
return "bl";
case (a.x < 0 && a.y >= 0):
return "tl";
default:
return "";
}
}
const U = b(null), D = b(null), ie = b(null);
function Ye(a, s, o) {
U.value = s.uid, D.value = {
color: a.color,
shape: a.shape
}, ie.value = {
datapoint: s,
seriesIndex: o,
series: C.value,
config: l.value
}, j.value = !0;
const n = l.value.style.chart.tooltip.customFormat;
if (mt(n) && xt(() => n({
seriesIndex: o,
datapoint: s,
series: C.value,
config: l.value
})))
se.value = n({
seriesIndex: o,
datapoint: s,
series: C.value,
config: l.value
});
else {
let i = "";
s.quadrantSide && (i += `<div style="color:${l.value.style.chart.layout.labels.quadrantLabels[s.quadrantSide].color};font-weight:${l.value.style.chart.layout.labels.quadrantLabels[s.quadrantSide].bold ? "bold" : "400"}">${l.value.style.chart.layout.labels.quadrantLabels[s.quadrantSide].text}</div>`), i += `<div>${a.name}</div>`, i += `<div style="padding-bottom:6px;border-bottom:1px solid ${l.value.style.chart.tooltip.borderColor};margin-bottom:3px">${s.name}</div>`, i += `<div>${l.value.style.chart.layout.grid.xAxis.name ? l.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${O(
l.value.style.chart.layout.labels.plotLabels.x.formatter,
s.xValue,
P({
v: s.xValue,
r: l.value.style.chart.tooltip.roundingValue
}),
{ datapoint: s, category: a, categoryIndex: o }
)}</b></div>`, i += `<div>${l.value.style.chart.layout.grid.yAxis.name ? l.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${O(
l.value.style.chart.layout.labels.plotLabels.y.formatter,
s.yValue,
P({
v: s.yValue,
r: l.value.style.chart.tooltip.roundingValue
}),
{ datapoint: s, category: a, categoryIndex: o }
)}</b></div>`, se.value = `<div style="text-align:left;font-size:${l.value.style.chart.tooltip.fontSize}px">${i}</div>`;
}
}
function Ae(a, s) {
const o = {
category: a.name,
shape: a.shape,
itemName: s.name,
x: s.xValue,
y: s.yValue,
quadrantSide: s.quadrantSide,
sideName: l.value.style.chart.layout.labels.quadrantLabels[s.quadrantSide].text
};
oe("selectPlot", o);
}
function E(a) {
if (!a) return;
const s = C.value.flatMap((n) => n.series.filter((i) => i.quadrantSide === a).map((i) => ({
category: i.categoryName,
itemName: i.name,
x: i.xValue,
y: i.yValue
}))), o = {
quadrantSide: a,
sideName: l.value.style.chart.layout.labels.quadrantLabels[a].text,
items: [...s]
};
oe("selectSide", o);
}
const L = g(() => ({
TL: {
tl: {
x: t.value.left + t.value.usableWidth / 4 - 20,
y: 0,
fill: l.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: t.value.left + t.value.usableWidth / 4,
y: 0,
fill: l.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: t.value.left + t.value.usableWidth / 4,
y: 20,
fill: l.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: t.value.left + t.value.usableWidth / 4 - 20,
y: 20,
fill: l.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: l.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: t.value.centerX + t.value.usableWidth / 4,
y: 0,
fill: l.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: t.value.centerX + t.value.usableWidth / 4,
y: 20,
fill: l.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: t.value.centerX + t.value.usableWidth / 4 - 20,
y: 20,
fill: l.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: l.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: t.value.centerX + t.value.usableWidth / 4,
y: t.value.centerY - 48,
fill: l.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: t.value.centerX + t.value.usableWidth / 4,
y: t.value.centerY - 28,
fill: l.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: t.value.centerX + t.value.usableWidth / 4 - 20,
y: t.value.centerY - 28,
fill: l.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: l.value.style.chart.layout.labels.quadrantLabels.tl.color
},
tr: {
x: t.value.left + t.value.usableWidth / 4,
y: t.value.centerY - 48,
fill: l.value.style.chart.layout.labels.quadrantLabels.tr.color
},
br: {
x: t.value.left + t.value.usableWidth / 4,
y: t.value.centerY - 28,
fill: l.value.style.chart.layout.labels.quadrantLabels.br.color
},
bl: {
x: t.value.left + t.value.usableWidth / 4 - 20,
y: t.value.centerY - 28,
fill: l.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 Me() {
return C.value.map((a) => ({
color: a.color,
name: a.name,
shape: a.shape,
series: a.series.map((s) => ({
name: s.name,
x: s.xValue,
y: s.yValue,
quadrantSide: s.quadrantSide,
sideName: l.value.style.chart.layout.labels.quadrantLabels[s.quadrantSide].text
}))
}));
}
function Ne() {
nt(() => {
const a = [[l.value.style.chart.title.text], [l.value.style.chart.title.subtitle.text], [""]], s = ee.value.head, o = ee.value.body, n = a.concat([s]).concat(o), i = $t(n);
kt({ csvContent: i, title: l.value.style.chart.title.text || "vue-ui-quadrant" });
});
}
const R = b(!1);
function lt(a) {
R.value = a, he.value += 1;
}
function Oe() {
q.value.showTable = !q.value.showTable;
}
function Pe() {
q.value.plotLabels.show = !q.value.plotLabels.show;
}
function Ve() {
q.value.showTooltip = !q.value.showTooltip;
}
const le = b(!1);
function ue() {
le.value = !le.value;
}
return De({
getData: Me,
generatePdf: _e,
generateCsv: Ne,
generateImage: Se,
toggleTable: Oe,
toggleLabels: Pe,
toggleTooltip: Ve,
toggleAnnotator: ue
}), (a, s) => (r(), u("div", {
class: T(`vue-ui-quadrant ${e(R) ? "vue-data-ui-wrapper-fullscreen" : ""} ${e(l).useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "quadrantChart",
ref: B,
id: `vue-ui-quadrant_${e(z)}`,
style: w(`font-family:${e(l).style.fontFamily};width:100%; text-align:center;background:${e(l).style.chart.backgroundColor};${e(l).responsive ? "height: 100%" : ""}`),
onMouseenter: s[16] || (s[16] = () => e(xe)(!0)),
onMouseleave: s[17] || (s[17] = () => e(xe)(!1))
}, [
e(l).userOptions.buttons.annotator ? (r(), N(At, {
key: 0,
parent: e(B),
backgroundColor: e(l).style.chart.backgroundColor,
color: e(l).style.chart.color,
active: e(le),
onClose: ue
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
e(Je) ? (r(), u("div", {
key: 1,
ref_key: "noTitle",
ref: fe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : y("", !0),
e(l).style.chart.title.text ? (r(), u("div", {
key: 2,
ref_key: "chartTitle",
ref: ye,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(r(), N(qt, {
key: `table_${e(pe)}`,
config: {
title: {
cy: "quadrant-title",
...e(l).style.chart.title
},
subtitle: {
cy: "quadrant-subtitle",
...e(l).style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : y("", !0),
e(l).userOptions.show && e(J) && (e($e) || e(re)) ? (r(), N(St, {
ref_key: "details",
ref: Qe,
key: `user_options_${e(he)}`,
backgroundColor: e(l).style.chart.backgroundColor,
color: e(l).style.chart.color,
isImaging: e(qe),
isPrinting: e(we),
uid: e(z),
hasTooltip: e(l).userOptions.buttons.tooltip && e(l).style.chart.tooltip.show,
hasPdf: e(l).userOptions.buttons.pdf,
hasImg: e(l).userOptions.buttons.img,
hasXls: e(l).userOptions.buttons.csv,
hasTable: e(l).userOptions.buttons.table,
hasLabel: e(l).userOptions.buttons.labels,
hasFullscreen: e(l).userOptions.buttons.fullscreen,
isFullscreen: e(R),
isTooltip: e(q).showTooltip,
titles: { ...e(l).userOptions.buttonTitles },
chartElement: e(B),
position: e(l).userOptions.position,
hasAnnotator: e(l).userOptions.buttons.annotator,
isAnnotation: e(le),
onToggleFullscreen: lt,
onGeneratePdf: e(_e),
onGenerateCsv: Ne,
onGenerateImage: e(Se),
onToggleTable: Oe,
onToggleLabels: Pe,
onToggleTooltip: Ve,
onToggleAnnotator: ue,
style: w({
visibility: e($e) ? e(re) ? "visible" : "hidden" : "visible"
})
}, st({ _: 2 }, [
a.$slots.optionTooltip ? {
name: "optionTooltip",
fn: x(() => [
$(a.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "0"
} : void 0,
a.$slots.optionPdf ? {
name: "optionPdf",
fn: x(() => [
$(a.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
a.$slots.optionCsv ? {
name: "optionCsv",
fn: x(() => [
$(a.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
a.$slots.optionImg ? {
name: "optionImg",
fn: x(() => [
$(a.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
a.$slots.optionTable ? {
name: "optionTable",
fn: x(() => [
$(a.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
a.$slots.optionLabels ? {
name: "optionLabels",
fn: x(() => [
$(a.$slots, "optionLabels", {}, void 0, !0)
]),
key: "5"
} : void 0,
a.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: x(({ toggleFullscreen: o, isFullscreen: n }) => [
$(a.$slots, "optionFullscreen", G(Q({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
]),
key: "6"
} : void 0,
a.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: x(({ toggleAnnotator: o, isAnnotator: n }) => [
$(a.$slots, "optionAnnotator", G(Q({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
e(J) ? (r(), u("svg", {
key: 4,
xmlns: e(vt),
class: T({ "vue-data-ui-fullscreen--on": e(R), "vue-data-ui-fulscreen--off": !e(R) }),
viewBox: `${e(d).startX} ${e(d).startY} ${e(d).width} ${e(d).height}`,
style: w(`max-width:100%;overflow:${e(p) ? "hidden" : "visible"};background:transparent;color:${e(l).style.chart.color}`),
id: `svg_${e(z)}`
}, [
de(Yt),
a.$slots["chart-background"] ? (r(), u("foreignObject", {
key: 0,
x: e(d).startX,
y: e(d).startY,
width: e(d).width,
height: e(d).height,
style: {
pointerEvents: "none"
}
}, [
$(a.$slots, "chart-background", {}, void 0, !0)
], 8, Vt)) : y("", !0),
h("defs", null, [
(r(!0), u(S, null, Y(e(C), (o, n) => (r(), u("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `quadrant_gradient_${e(z)}_${n}`
}, [
h("stop", {
offset: "0%",
"stop-color": e(ae)(e(ft)(o.color, 0.05), e(l).style.chart.layout.areas.opacity)
}, null, 8, Ft),
h("stop", {
offset: "100%",
"stop-color": e(ae)(o.color, e(l).style.chart.layout.areas.opacity)
}, null, 8, Rt)
], 8, Bt))), 256))
]),
e(l).style.chart.layout.grid.graduations.show ? (r(), u("g", Ht, [
(r(!0), u(S, null, Y(e(Ze), (o) => (r(), u("rect", {
fill: e(l).style.chart.layout.grid.graduations.fill ? e(ae)(e(l).style.chart.layout.grid.graduations.color, o.opacity) : "none",
x: o.x,
y: o.y,
height: o.height <= 0 ? 1e-3 : o.height,
width: o.width <= 0 ? 1e-3 : o.width,
"stroke-width": e(l).style.chart.layout.grid.graduations.strokeWidth,
stroke: e(l).style.chart.layout.grid.graduations.stroke,
rx: e(l).style.chart.layout.grid.graduations.roundingForce
}, null, 8, It))), 256))
])) : y("", !0),
h("line", {
x1: e(t).left,
y1: e(t).centerY,
x2: e(t).right,
y2: e(t).centerY,
stroke: e(l).style.chart.layout.grid.stroke,
"stroke-width": e(l).style.chart.layout.grid.strokeWidth
}, null, 8, Ut),
h("line", {
x1: e(t).centerX,
y1: e(t).top,
x2: e(t).centerX,
y2: e(t).bottom,
stroke: e(l).style.chart.layout.grid.stroke,
"stroke-width": e(l).style.chart.layout.grid.strokeWidth
}, null, 8, Dt),
e(l).style.chart.layout.grid.showArrows ? (r(), u("g", Et, [
h("polygon", {
points: `${e(t).right - 8},${e(t).centerY - 6} ${e(t).right},${e(t).centerY} ${e(t).right - 8},${e(t).centerY + 6}`,
fill: e(l).style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, Gt),
h("polygon", {
points: `${e(t).left + 8},${e(t).centerY - 6} ${e(t).left},${e(t).centerY} ${e(t).left + 8},${e(t).centerY + 6}`,
fill: e(l).style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, Qt),
h("polygon", {
points: `${e(t).centerX - 6},${e(t).top + 8} ${e(t).centerX},${e(t).top} ${e(t).centerX + 6},${e(t).top + 8}`,
fill: e(l).style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, Jt),
h("polygon", {
points: `${e(t).centerX - 6},${e(t).bottom - 8} ${e(t).centerX},${e(t).bottom} ${e(t).centerX + 6},${e(t).bottom - 8}`,
fill: e(l).style.chart.layout.grid.stroke,
stroke: "none"
}, null, 8, jt)
])) : y("", !0),
e(l).style.chart.layout.labels.quadrantLabels.show && !e(p) ? (r(), u("g", Zt, [
e(l).style.chart.layout.labels.quadrantLabels.tl.text ? (r(), u("text", {
key: 0,
x: 0,
y: e(t).top - e(t).padding / 2,
"text-anchor": "start",
fill: e(l).style.chart.layout.labels.quadrantLabels.tl.color,
"font-size": e(l).style.chart.layout.labels.quadrantLabels.tl.fontSize,
style: w(`font-weight:${e(l).style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
onClick: s[0] || (s[0] = (o) => E("tl"))
}, k(e(l).style.chart.layout.labels.quadrantLabels.tl.text), 13, Kt)) : y("", !0),
e(l).style.chart.layout.labels.quadrantLabels.tr.text ? (r(), u("text", {
key: 1,
x: e(t).width,
y: e(t).top - e(t).padding / 2,
"text-anchor": "end",
fill: e(l).style.chart.layout.labels.quadrantLabels.tr.color,
"font-size": e(l).style.chart.layout.labels.quadrantLabels.tr.fontSize,
style: w(`font-weight:${e(l).style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
onClick: s[1] || (s[1] = (o) => E("tr"))
}, k(e(l).style.chart.layout.labels.quadrantLabels.tr.text), 13, el)) : y("", !0),
e(l).style.chart.layout.labels.quadrantLabels.br.text ? (r(), u("text", {
key: 2,
x: e(t).width,
y: e(t).bottom + e(t).padding * 0.7,
"text-anchor": "end",
fill: e(l).style.chart.layout.labels.quadrantLabels.br.color,
"font-size": e(l).style.chart.layout.labels.quadrantLabels.br.fontSize,
style: w(`font-weight:${e(l).style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
onClick: s[2] || (s[2] = (o) => E("br"))
}, k(e(l).style.chart.layout.labels.quadrantLabels.br.text), 13, tl)) : y("", !0),
e(l).style.chart.layout.labels.quadrantLabels.bl.text ? (r(), u("text", {
key: 3,
x: 0,
y: e(t).bottom + e(t).padding * 0.7,
"text-anchor": "start",
fill: e(l).style.chart.layout.labels.quadrantLabels.bl.color,
"font-size": e(l).style.chart.layout.labels.quadrantLabels.bl.fontSize,
style: w(`font-weight:${e(l).style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
onClick: s[3] || (s[3] = (o) => E("bl"))
}, k(e(l).style.chart.layout.labels.quadrantLabels.bl.text), 13, ll)) : y("", !0)
])) : y("", !0),
e(l).style.chart.layout.labels.axisLabels.show ? (r(), u("g", al, [
h("text", {
x: e(t).centerX,
y: e(t).top - e(t).padding / 6,
"text-anchor": "middle",
"font-size": e(l).style.chart.layout.labels.axisLabels.fontSize,
fill: e(l).style.chart.layout.labels.axisLabels.color.positive
}, k(e(O)(
e(l).style.chart.layout.labels.plotLabels.y.formatter,
e(_).y.max,
e(P)({
v: e(_).y.max,
r: e(l).style.chart.layout.labels.plotLabels.rounding
})
)), 9, ol),
h("text", {
x: e(t).centerX,
y: e(t).top - e(t).padding / 2,
"text-anchor": "middle",
"font-size": e(l).style.chart.layout.labels.axisLabels.fontSize,
fill: e(l).style.chart.layout.labels.axisLabels.color.positive
}, k(e(l).style.chart.layout.grid.yAxis.name), 9, sl),
h("text", {
x: e(t).centerX,
y: e(t).bottom + e(t).padding * 0.35,
"text-anchor": "middle",
"font-size": e(l).style.chart.layout.labels.axisLabels.fontSize,
fill: e(l).style.chart.layout.labels.axisLabels.color.negative
}, k(e(O)(
e(l).style.chart.layout.labels.plotLabels.y.formatter,
e(_).y.min,
e(P)({
v: e(_).y.min,
r: e(l).style.chart.layout.labels.plotLabels.rounding
})
)), 9, rl),
h("text", {
id: `xLabelMin_${e(z)}`,
"text-anchor": "middle",
"font-size": e(l).style.chart.layout.labels.axisLabels.fontSize,
transform: `translate(${e(t).padding - e(l).style.chart.layout.labels.axisLabels.fontSize}, ${e(t).height / 2}), rotate(-90)`,
fill: e(l).style.chart.layout.labels.axisLabels.color.negative
}, k(e(O)(
e(l).style.chart.layout.labels.plotLabels.x.formatter,
e(_).x.min,
e(P)({
v: e(_).x.min,
r: e(l).style.chart.layout.labels.plotLabels.rounding
})
)), 9, nl),
h("text", {
id: `xLabelMax_${e(z)}`,
"text-anchor": "middle",
"font-size": e(l).style.chart.layout.labels.axisLabels.fontSize,
transform: `translate(${e(t).width - e(t).padding + e(l).style.chart.layout.labels.axisLabels.fontSize}, ${e(t).height / 2}), rotate(90)`,
fill: e(l).style.chart.layout.labels.axisLabels.color.positive
}, k(e(O)(
e(l).style.chart.layout.labels.plotLabels.x.formatter,
e(_).x.max,
e(P)({
v: e(_).x.max,
r: e(l).style.chart.layout.labels.plotLabels.rounding
})
)), 9, il),
h("text", {
id: `xLabelMaxName_${e(z)}`,
"text-anchor": "middle",
"font-size": e(l).style.chart.layout.labels.axisLabels.fontSize,
transform: `translate(${e(t).width - e(l).style.chart.layout.labels.axisLabels.fontSize}, ${e(t).height / 2}), rotate(90)`,
fill: e(l).style.chart.layout.labels.axisLabels.color.positive
}, k(e(l).style.chart.layout.grid.xAxis.name), 9, ul)
])) : y("", !0),
e(l).style.chart.layout.areas.show ? (r(), u("g", dl, [
(r(!0), u(S, null, Y(e(C), (o, n) => (r(), u("g", null, [
o.series.length > 2 ? (r(), u("polygon", {
key: 0,
"data-cy-quadrant-area": "",
fill: e(l).style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${e(z)}_${n})` : e(ae)(o.color, e(l).style.chart.layout.areas.opacity),
points: e(pt)(o)
}, null, 8, cl)) : y("", !0)
]))), 256))
])) : y("", !0),
h("g", null, [
h("rect", {
onClick: s[4] || (s[4] = (o) => A("TL")),
x: e(t).left,
y: e(t).top,
width: e(t).usableWidth / 2 <= 0 ? 1e-3 : e(t).usableWidth / 2,
height: e(t).usableHeight / 2 <= 0 ? 1e-3 : e(t).usableHeight / 2,
fill: "transparent",
class: T({ "vue-data-ui-zoom-plus": !e(p), "vue-data-ui-zoom-minus": e(p) })
}, null, 10, hl),
h("rect", {
onClick: s[5] || (s[5] = (o) => A("TR")),
x: e(t).centerX,
y: e(t).top,
width: e(t).usableWidth / 2 <= 0 ? 1e-3 : e(t).usableWidth / 2,
height: e(t).usableHeight / 2 <= 0 ? 1e-3 : e(t).usableHeight / 2,
fill: "transparent",
class: T({ "vue-data-ui-zoom-plus": !e(p), "vue-data-ui-zoom-minus": e(p) })
}, null, 10, yl),
h("rect", {
onClick: s[6] || (s[6] = (o) => A("BR")),
x: e(t).centerX,
y: e(t).centerY,
width: e(t).usableWidth / 2 <= 0 ? 1e-3 : e(t).usableWidth / 2,
height: e(t).usableHeight / 2 <= 0 ? 1e-3 : e(t).usableHeight / 2,
fill: "transparent",
class: T({ "vue-data-ui-zoom-plus": !e(p), "vue-data-ui-zoom-minus": e(p) })
}, null, 10, bl),
h("rect", {
onClick: s[7] || (s[7] = (o) => A("BL")),
x: e(t).left,
y: e(t).centerY,
width: e(t).usableWidth / 2 <= 0 ? 1e-3 : e(t).usableWidth / 2,
height: e(t).usableHeight / 2 <= 0 ? 1e-3 : e(t).usableHeight / 2,
fill: "transparent",
class: T({ "vue-data-ui-zoom-plus": !e(p), "vue-data-ui-zoom-minus": e(p) })
}, null, 10, vl)
]),
e(l).style.chart.layout.labels.plotLabels.showAsTag ? (r(), u(S, { key: 7 }, [
e(q).plotLabels.show ? (r(), u("g", gl, [
(r(!0), u(S, null, Y(e(C), (o, n) => (r(), u(S, null, [
(r(!0), u(S, null, Y(o.series, (i) => (r(), u("foreignObject", {
style: { overflow: "visible" },
height: "10",
width: "100",
x: i.x - 50,
y: i.y - e(l).style.chart.layout.labels.plotLabels.fontSize,
onMouseover: (v) => Ye(o, i, n),
onMouseleave: s[9] || (s[9] = (v) => {
j.value = !1, U.value = null, D.value = null;
}),
onClick: (v) => Ae(o, i)
}, [
h("div", {
style: w(`color:${e(gt)(o.color)};margin: 0 auto; font-size:${e(l).style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${o.color}; padding: 2px 4px; border-radius: 12px; height: ${e(l).style.chart.layout.labels.plotLabels.fontSize * 1.5}px`)
}, k(i.name), 5)
], 40, ml))), 256))
], 64))), 256))
])) : y("", !0)
], 64)) : (r(), u(S, { key: 6 }, [
(r(!0), u(S, null, Y(e(C), (o, n) => (r(), u("g", null, [
(r(!0), u(S, null, Y(o.series, (i) => (r(), N(He, {
color: o.color,
isSelected: e(U) && i.uid === e(U),
plot: i,
radius: e(l).style.chart.layout.plots.radius / (e(p) ? 1.5 : 1),
shape: o.shape,
stroke: e(l).style.chart.layout.plots.outline ? e(l).style.chart.layout.plots.outlineColor : "none",
strokeWidth: e(l).style.chart.layout.plots.outlineWidth,
onMouseover: (v) => Ye(o, i, n),
onMouseleave: s[8] || (s[8] = (v) => {
j.value = !1, U.value = null, D.value = null;
}),
onClick: (v) => Ae(o, i)
}, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseover", "onClick"]))), 256))
]))), 256)),
e(q).plotLabels.show ? (r(), u("g", fl, [
(r(!0), u(S, null, Y(e(C), (o) => (r(), u("g", null, [
(r(!0), u(S, null, Y(o.series, (n) => (r(), u("text", {
x: n.x,
y: n.y + e(l).style.chart.layout.labels.plotLabels.offsetY + e(l).style.chart.layout.plots.radius,
"text-anchor": "middle",
"font-size": e(l).style.chart.layout.labels.plotLabels.fontSize / (e(p) ? 1.5 : 1),
fill: e(l).style.chart.layout.labels.plotLabels.color
}, k(n.name), 9, pl))), 256))
]))), 256))
])) : y("", !0)
], 64)),
e(p) ? (r(), u("g", xl, [
e(c) === "TL" ? (r(), u("polygon", {
key: 0,
points: `${e(t).left - 1},${e(t).centerY} ${e(t).centerX},${e(t).centerY} ${e(t).centerX},${e(t).top - 1} ${e(t).right},${e(t).top - 1} ${e(t).right},${e(t).bottom} ${e(t).left - 1},${e(t).bottom} ${e(t).left - 1},${e(t).centerY}`,
fill: e(l).style.chart.backgroundColor,
style: { opacity: "1" }
}, null, 8, $l)) : y("", !0),
e(c) === "TR" ? (r(), u("polygon", {
key: 1,
points: `${e(t).left},${e(t).top - 1} ${e(t).centerX},${e(t).top - 1} ${e(t).centerX},${e(t).centerY} ${e(t).right + 1},${e(t).centerY} ${e(t).right + 1},${e(t).bottom} ${e(t).left},${e(t).bottom} ${e(t).left},${e(t).top - 1}`,
fill: e(l).style.chart.backgroundColor,
style: { opacity: "1" }
}, null, 8, kl)) : y("", !0),
e(c) === "BR" ? (r(), u("polygon", {
key: 2,
points: `${e(t).left},${e(t).top} ${e(t).right + 1},${e(t).top} ${e(t).right + 1},${e(t).centerY} ${e(t).centerX},${e(t).centerY} ${e(t).centerX},${e(t).bottom + 1} ${e(t).left},${e(t).bottom + 1} ${e(t).left},${e(t).top}`,
fill: e(l).style.chart.backgroundColor,
style: { opacity: "1" }
}, null, 8, Ll)) : y("", !0),
e(c) === "BL" ? (r(), u("polygon", {
key: 3,
points: `${e(t).left - 1},${e(t).top} ${e(t).right},${e(t).top} ${e(t).right},${e(t).bottom + 1} ${e(t).centerX},${e(t).bottom + 1} ${e(t).centerX},${e(t).centerY} ${e(t).left - 1},${e(t).centerY} ${e(t).left - 1},${e(t).top}`,
fill: e(l).style.chart.backgroundColor,
style: { opacity: "1" }
}, null, 8, wl)) : y("", !0)
])) : y("", !0),
e(c) && !e(K) ? (r(), u("g", ql, [
h("text", {
x: e(V).x,
y: e(V).y - e(V).fontSize / 1.5,
"font-size": e(V).fontSize / 1.5,
fill: e(V).fill,
"text-anchor": "middle",
"font-weight": e(V).bold ? "bold" : "normal"
}, k(e(V).text), 9, _l)
])) : y("", !0),
e(p) && e(c) ? (r(), u("g", Sl, [
h("rect", {
x: e(L)[e(c)].tl.x,
y: e(L)[e(c)].tl.y,
height: "20",
width: "20",
fill: e(L)[e(c)].tl.fill,
style: w(`cursor: pointer; opacity: ${e(c) === "TL" ? 1 : 0.2}`),
onClick: s[10] || (s[10] = (o) => A("TL")),
class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": e(c) !== "TL" })
}, null, 14, Cl),
h("rect", {
x: e(L)[e(c)].tr.x,
y: e(L)[e(c)].tr.y,
height: "20",
width: "20",
fill: e(L)[e(c)].tr.fill,
style: w(`cursor: pointer; opacity: ${e(c) === "TR" ? 1 : 0.2}`),
onClick: s[11] || (s[11] = (o) => A("TR")),
class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": e(c) !== "TR" })
}, null, 14, zl),
h("rect", {
x: e(L)[e(c)].br.x,
y: e(L)[e(c)].br.y,
height: "20",
width: "20",
fill: e(L)[e(c)].br.fill,
style: w(`cursor: pointer; opaci