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