vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,174 lines • 62.2 kB
JavaScript
import { defineAsyncComponent as D, computed as g, ref as y, toRefs as mt, watch as Je, shallowRef as je, onMounted as xt, onBeforeUnmount as $t, createElementBlock as n, openBlock as s, unref as i, normalizeStyle as q, normalizeClass as T, createBlock as X, createCommentVNode as h, createElementVNode as c, createVNode as he, createSlots as kt, withCtx as m, renderSlot as x, normalizeProps as U, guardReactiveProps as G, Fragment as S, renderList as W, toDisplayString as L, Teleport as Lt, createTextVNode as wt, nextTick as _t } from "vue";
import { u as qt, c as Ze, t as Ct, a as St, p as ye, b as zt, o as Tt, f as Q, d as At, e as Xt, Y as Wt, k as F, i as B, X as Yt, s as ue, x as Mt, Z as Nt, I as Ot, F as Rt, v as Ft, w as Bt, y as Vt, z as Pt } from "./index-q-LPw2IT.js";
import { t as Ht, u as It } from "./useResponsive-DfdjqQps.js";
import { u as Et } from "./usePrinter-DX7efa1s.js";
import { u as Ke } from "./useNestedProp-04aFeUYu.js";
import { u as Dt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Ut } from "./useChartAccessibility-9icAAmYg.js";
import Gt from "./img-Ctts6JQb.js";
import Qt from "./Title-B55R8CAZ.js";
import { _ as et } from "./Shape-DHIaJs9G.js";
import Jt from "./Legend-DcDSkq99.js";
import { u as jt, B as Zt } from "./useLoading-D7YHNtLX.js";
import { _ as Kt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const el = ["id"], tl = ["id"], ll = ["xmlns", "viewBox", "id"], al = ["x", "y", "width", "height"], ul = ["id"], ol = ["stop-color"], sl = ["stop-color"], rl = { key: 1 }, nl = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], il = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], vl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], dl = { key: 2 }, cl = ["points", "fill"], hl = ["points", "fill"], yl = ["points", "fill"], bl = ["points", "fill"], fl = { key: 3 }, pl = ["y", "fill", "font-size"], gl = ["x", "y", "fill", "font-size"], ml = ["x", "y", "fill", "font-size"], xl = ["y", "fill", "font-size"], $l = { key: 4 }, kl = ["x", "y", "font-size", "fill"], Ll = ["x", "y", "font-size", "fill"], wl = ["x", "y", "font-size", "fill"], _l = ["id", "font-size", "transform", "fill"], ql = ["id", "font-size", "transform", "fill"], Cl = ["id", "font-size", "transform", "fill"], Sl = { key: 5 }, zl = ["fill", "points"], Tl = ["x", "y", "width", "height"], Al = ["x", "y", "width", "height"], Xl = ["x", "y", "width", "height"], Wl = ["x", "y", "width", "height"], Yl = {
key: 0,
style: { "pointer-events": "none" }
}, Ml = ["x", "y", "font-size", "fill"], Nl = ["x", "y", "font-size", "fill", "innerHTML"], Ol = { key: 0 }, Rl = ["x", "y", "onMouseover", "onMouseleave", "onClick"], Fl = {
key: 8,
class: "vue-ui-dna"
}, Bl = ["points", "fill"], Vl = ["points", "fill"], Pl = ["points", "fill"], Hl = ["points", "fill"], Il = { key: 9 }, El = ["x", "y", "font-size", "fill", "font-weight"], Dl = { key: 10 }, Ul = ["x", "y", "fill"], Gl = ["x", "y", "fill"], Ql = ["x", "y", "fill"], Jl = ["x", "y", "fill"], jl = ["stroke", "d"], Zl = ["stroke", "d"], Kl = {
key: 4,
class: "vue-data-ui-watermark"
}, ea = ["id"], ta = ["onClick"], la = {
key: 0,
height: "14",
width: "14",
viewBox: "0 0 20 20"
}, aa = ["innerHTML"], ua = {
__name: "vue-ui-quadrant",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectPlot", "selectSide", "selectLegend"],
setup(tt, { expose: lt, emit: at }) {
const ut = D(() => import("./Tooltip-BMOddG-M.js")), ot = D(() => import("./vue-ui-accordion-D46i_gkB.js")), st = D(() => import("./DataTable-rj9-mAwF.js")), rt = D(() => import("./PenAndPaper-BJ0hcgsa.js")), nt = D(() => import("./UserOptions-DVzyjG-W.js")), it = D(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_quadrant: vt } = qt(), Y = tt, be = g(() => !!Y.dataset && Y.dataset.length), w = y(Ze()), oe = at, dt = y(null), se = y(!1), re = y(""), fe = y(0), p = y(!1), M = y(null), pe = y(null), ge = y(null), me = y(null), xe = y(null), $e = y(0), ke = y(0), Le = y(0), we = y(!1), t = y(ie()), { loading: _e, FINAL_DATASET: qe } = jt({
...mt(Y),
FINAL_CONFIG: t,
prepareConfig: ie,
skeletonDataset: [
{
name: "_",
shape: "circle",
color: "#CACACA",
series: [
{ name: "_", x: -6, y: -4 },
{ name: "_", x: -5, y: -2 },
{ name: "_", x: -4, y: -1 },
{ name: "_", x: -3, y: -0.5 },
{ name: "_", x: -2, y: -0.25 },
{ name: "_", x: -1, y: -0.135 },
{ name: "_", x: 0, y: 0 },
{ name: "_", x: 1, y: 0.135 },
{ name: "_", x: 2, y: 0.25 },
{ name: "_", x: 3, y: 0.5 },
{ name: "_", x: 4, y: 1 },
{ name: "_", x: 5, y: 2 },
{ name: "_", x: 6, y: 4 }
]
}
],
skeletonConfig: Ct({
defaultConfig: t.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
layout: {
grid: {
stroke: "#6A6A6A",
graduations: {
stroke: "#6A6A6A",
color: "#6A6A6A90"
},
xAxis: {
auto: !0
},
yAxis: {
auto: !0
}
},
labels: {
quadrantLabels: { show: !1 },
plotLabels: { show: !1 },
axisLabels: { show: !1 }
},
plots: {
outlineColor: "#6A6A6A"
}
},
legend: {
backgroundColor: "transparent"
}
}
}
}
})
}), { userOptionsVisible: ne, setUserOptionsVisibility: Ce, keepUserOptionState: Se } = Dt({ config: t.value }), { svgRef: ze } = Ut({ config: t.value.style.chart.title });
function ie() {
const l = Ke({
userConfig: Y.config,
defaultConfig: vt
});
return l.theme ? {
...Ke({
userConfig: zt.vue_ui_quadrant[l.theme] || Y.config,
defaultConfig: l
}),
customPalette: St[l.theme] || ye
} : l;
}
Je(() => Y.config, (l) => {
t.value = ie(), ne.value = !t.value.userOptions.showOnChartHover, Te(), $e.value += 1, ke.value += 1, Le.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 N = je(null), P = je(null), H = g(() => t.value.debug);
function Te() {
if (Tt(Y.dataset) ? Q({
componentName: "VueUiQuadrant",
type: "dataset",
debug: H.value
}) : Y.dataset.forEach((l, u) => {
[null, void 0].includes(l.name) && Q({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
index: u,
debug: H.value
}), [null, void 0].includes(l.series) ? Q({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "series",
index: u,
debug: H.value
}) : l.series.forEach((a, o) => {
[null, void 0].includes(a.name) && Q({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
key: "series",
index: o,
debug: H.value
});
});
}), t.value.responsive) {
const l = Ht(() => {
const { width: u, height: a } = It({
chart: M.value,
title: t.value.style.chart.title.text ? pe.value : null,
legend: t.value.style.chart.legend.show ? ge.value : null,
source: me.value,
noTitle: xe.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;
});
});
N.value && (P.value && N.value.unobserve(P.value), N.value.disconnect()), N.value = new ResizeObserver(l), P.value = M.value.parentNode, N.value.observe(P.value);
}
}
xt(() => {
we.value = !0, Te();
}), $t(() => {
N.value && (P.value && N.value.unobserve(P.value), N.value.disconnect());
});
const { isPrinting: Ae, isImaging: Xe, generatePdf: We, generateImage: Ye } = Et({
elementId: `vue-ui-quadrant_${w.value}`,
fileName: t.value.style.chart.title.text || "vue-ui-quadrant",
options: t.value.userOptions.print
}), ct = g(() => t.value.userOptions.show && !t.value.style.chart.title.text), Me = g(() => At(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
}), v = y({
...JSON.parse(JSON.stringify(e.value)),
startX: 0,
startY: 0
});
Je(() => e.value, (l) => {
l && (v.value = {
...JSON.parse(JSON.stringify(e.value)),
startX: 0,
startY: 0
});
}, { deep: !0 });
const d = y(null), V = g(() => {
switch (d.value) {
case "TL":
return {
x: v.value.startX + v.value.width / 2,
y: v.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: v.value.startX + v.value.width / 2,
y: v.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: v.value.startX + v.value.width / 2,
y: v.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: v.value.startX + v.value.width / 2,
y: v.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 };
}
}), ht = y(null), Z = y(!1);
function J({ targetX: l, targetY: u, targetW: a, targetH: o, side: r }) {
d.value && j(r);
const b = {
x: l - v.value.startX,
y: u - v.value.startY,
w: a - v.value.width,
h: o - v.value.height
}, f = t.value.zoomAnimationFrames;
let A = 0;
function Qe() {
Z.value = !0, v.value.startX += b.x / f, v.value.startY += b.y / f, v.value.width += b.w / f, v.value.height += b.h / f, A += 1, A < f ? ht.value = requestAnimationFrame(Qe) : Z.value = !1;
}
Qe();
}
function O(l) {
if (!Z.value)
if (p.value && d.value === l)
J({
targetX: 0,
targetY: 0,
targetW: e.value.width,
targetH: e.value.height
}), d.value = null, p.value = !1;
else {
switch (d.value = l, l) {
case "TL":
J({
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":
J({
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":
J({
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":
J({
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:
v.value.startX = 0, v.value.startY = 0, v.value.width = e.value.width, v.value.height = e.value.height;
break;
}
p.value = !0;
}
}
const yt = g(() => {
const l = t.value.style.chart.layout.grid.graduations.steps, u = e.value.usableWidth / (l * 2), a = e.value.top, o = [];
for (let r = 0; r < l; r += 1)
o.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 o;
}), C = 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, o = t.value.style.chart.layout.grid.yAxis.min;
return t.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(...I.value.flatMap((r) => r.series.map((b) => b.x))), u = Math.min(...I.value.flatMap((r) => r.series.map((b) => b.x)))), t.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...I.value.flatMap((r) => r.series.map((b) => b.y))), o = Math.min(...I.value.flatMap((r) => r.series.map((b) => b.y)))), {
x: {
max: l,
min: u
},
y: {
max: a,
min: o
}
};
}), R = y([]), I = g(() => qe.value.map((l, u) => ({
...l,
series: Wt({
data: l.series,
threshold: t.value.downsample.threshold
}),
id: `cat_${u}_${w.value}`,
color: Xt(l.color) || Me.value[u] || ye[u]
}))), bt = g(() => I.value.filter((l) => !R.value.includes(l.id))), ft = g(() => I.value.map((l, u) => ({
...l,
shape: l.shape || "circle",
series: l.series.map((a) => ({
...a,
x: Ne(a.x),
y: Oe(a.y),
xValue: a.x,
yValue: a.y,
quadrantSide: Fe({ x: a.x, y: a.y }),
categoryName: l.name,
shape: l.shape,
color: l.color
}))
}))), z = g(() => (qe.value.forEach((l, u) => {
l.series.forEach((a, o) => {
[null, void 0].includes(a.x) && Q({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "x",
key: "series",
index: o,
debug: H.value
}), [null, void 0].includes(a.y) && Q({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "y",
key: "series",
index: o,
debug: H.value
});
});
}), bt.value.map((l, u) => ({
...l,
shape: l.shape || "circle",
color: l.color || Me.value[u] || ye[u],
series: l.series.map((a) => ({
...a,
x: Ne(a.x),
y: Oe(a.y),
xValue: a.x,
yValue: a.y,
quadrantSide: Fe({ x: a.x, y: a.y }),
categoryName: l.name,
shape: l.shape,
color: l.color,
uid: Ze()
}))
}))));
function Ne(l) {
if (l >= 0) {
const u = l / C.value.x.max;
return e.value.centerX + e.value.usableWidth / 2 * u;
} else {
const u = Math.abs(l) / Math.abs(C.value.x.min);
return e.value.centerX - e.value.usableWidth / 2 * u;
}
}
function Oe(l) {
if (l >= 0) {
const u = l / C.value.y.max;
return e.value.centerY + (1 - e.value.usableHeight / 2 * u);
} else {
const u = Math.abs(l) / Math.abs(C.value.y.min);
return e.value.centerY - (1 - e.value.usableHeight / 2 * u);
}
}
const K = g(() => {
const l = z.value.flatMap((f) => f.series.map((A) => ({
x: A.xValue,
y: A.yValue,
name: A.name,
category: A.categoryName,
quadrantSide: A.quadrantSide,
sideName: t.value.style.chart.layout.labels.quadrantLabels[A.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", o = [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: o, body: r, itsShapes: b, tableData: l };
}), ee = g(() => {
const l = K.value.head, u = K.value.tableData.map((o) => [
{
shape: o.shape,
color: o.color,
name: o.category
},
o.name,
F(
t.value.style.chart.layout.labels.plotLabels.x.formatter,
o.x,
B({
v: o.x,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
),
F(
t.value.style.chart.layout.labels.plotLabels.y.formatter,
o.y,
B({
v: o.y,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
),
o.sideName || o.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 ve(l) {
R.value.includes(l) ? R.value = R.value.filter((a) => a !== l) : R.value.push(l);
const u = He();
oe("selectLegend", u);
}
const Re = g(() => ft.value.map((l) => ({
name: l.name,
shape: l.shape,
color: l.color,
id: l.id,
opacity: R.value.includes(l.id) ? 0.5 : 1,
segregate: () => ve(l.id),
isSegregated: R.value.includes(l.id)
}))), pt = 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 Fe(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 te = y(null), le = y(null), de = y(null);
function Be(l, u, a) {
t.value.events.datapointEnter && t.value.events.datapointEnter({ datapoint: u, seriesIndex: a }), te.value = u.uid, le.value = {
color: l.color,
shape: l.shape
}, de.value = {
datapoint: u,
seriesIndex: a,
series: z.value,
config: t.value
}, se.value = !0;
const o = t.value.style.chart.tooltip.customFormat;
if (Vt(o) && Pt(() => o({
seriesIndex: a,
datapoint: u,
series: z.value,
config: t.value
})))
re.value = o({
seriesIndex: a,
datapoint: u,
series: z.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>${F(
t.value.style.chart.layout.labels.plotLabels.x.formatter,
u.xValue,
B({
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>${F(
t.value.style.chart.layout.labels.plotLabels.y.formatter,
u.yValue,
B({
v: u.yValue,
r: t.value.style.chart.tooltip.roundingValue
}),
{ datapoint: u, category: l, categoryIndex: a }
)}</b></div>`, re.value = `<div style="text-align:left;font-size:${t.value.style.chart.tooltip.fontSize}px">${r}</div>`;
}
}
function Ve(l, u) {
se.value = !1, te.value = null, le.value = null, t.value.events.datapointLeave && t.value.events.datapointLeave({ datapoint: l, seriesIndex: u });
}
function Pe(l, u, a) {
t.value.events.datapointClick && t.value.events.datapointClick({ datapoint: u, seriesIndex: a });
const o = {
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
};
oe("selectPlot", o);
}
function j(l) {
if (!l) return;
const u = z.value.flatMap((o) => o.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]
};
oe("selectSide", a);
}
const _ = 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 He() {
return z.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 Ie(l = null) {
_t(() => {
const u = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], a = K.value.head, o = K.value.body, r = u.concat([a]).concat(o), b = Ft(r);
l ? l(b) : Bt({ csvContent: b, title: t.value.style.chart.title.text || "vue-ui-quadrant" });
});
}
const E = y(!1);
function Ee(l) {
E.value = l, fe.value += 1;
}
function De() {
$.value.showTable = !$.value.showTable;
}
function Ue() {
$.value.plotLabels.show = !$.value.plotLabels.show;
}
function Ge() {
$.value.showTooltip = !$.value.showTooltip;
}
const ae = y(!1);
function ce() {
ae.value = !ae.value;
}
async function gt({ scale: l = 2 } = {}) {
if (!M.value) return;
const { width: u, height: a } = M.value.getBoundingClientRect(), o = u / a, { imageUri: r, base64: b } = await Gt({ domElement: M.value, base64: !0, img: !0, scale: l });
return {
imageUri: r,
base64: b,
title: t.value.style.chart.title.text,
width: u,
height: a,
aspectRatio: o
};
}
return lt({
getData: He,
getImage: gt,
generatePdf: We,
generateCsv: Ie,
generateImage: Ye,
toggleTable: De,
toggleLabels: Ue,
toggleTooltip: Ge,
toggleAnnotator: ce,
toggleFullscreen: Ee
}), (l, u) => (s(), n("div", {
class: T(`vue-ui-quadrant ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "quadrantChart",
ref: M,
id: `vue-ui-quadrant_${w.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[14] || (u[14] = () => i(Ce)(!0)),
onMouseleave: u[15] || (u[15] = () => i(Ce)(!1))
}, [
t.value.userOptions.buttons.annotator ? (s(), X(i(rt), {
key: 0,
svgRef: i(ze),
backgroundColor: t.value.style.chart.backgroundColor,
color: t.value.style.chart.color,
active: ae.value,
onClose: ce
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
ct.value ? (s(), n("div", {
key: 1,
ref_key: "noTitle",
ref: xe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
t.value.style.chart.title.text ? (s(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: pe,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(s(), X(Qt, {
key: `table_${$e.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)) : h("", !0),
c("div", {
id: `legend-top-${w.value}`
}, null, 8, tl),
t.value.userOptions.show && be.value && (i(Se) || i(ne)) ? (s(), X(i(nt), {
ref_key: "details",
ref: dt,
key: `user_options_${fe.value}`,
backgroundColor: t.value.style.chart.backgroundColor,
color: t.value.style.chart.color,
isImaging: i(Xe),
isPrinting: i(Ae),
uid: w.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: E.value,
isTooltip: $.value.showTooltip,
titles: { ...t.value.userOptions.buttonTitles },
chartElement: M.value,
position: t.value.userOptions.position,
hasAnnotator: t.value.userOptions.buttons.annotator,
isAnnotation: ae.value,
callbacks: t.value.userOptions.callbacks,
printScale: t.value.userOptions.print.scale,
onToggleFullscreen: Ee,
onGeneratePdf: i(We),
onGenerateCsv: Ie,
onGenerateImage: i(Ye),
onToggleTable: De,
onToggleLabels: Ue,
onToggleTooltip: Ge,
onToggleAnnotator: ce,
style: q({
visibility: i(Se) ? i(ne) ? "visible" : "hidden" : "visible"
})
}, kt({ _: 2 }, [
l.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: a, color: o }) => [
x(l.$slots, "menuIcon", U(G({ isOpen: a, color: o })), 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: o }) => [
x(l.$slots, "optionFullscreen", U(G({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
]),
key: "7"
} : void 0,
l.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: a, isAnnotator: o }) => [
x(l.$slots, "optionAnnotator", U(G({ toggleAnnotator: a, isAnnotator: o })), 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", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
(s(), n("svg", {
ref_key: "svgRef",
ref: ze,
xmlns: i(Yt),
class: T({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
viewBox: `${v.value.startX} ${v.value.startY} ${v.value.width} ${v.value.height}`,
style: q(`max-width:100%;overflow:hidden;background:transparent;color:${t.value.style.chart.color}`),
id: `svg_${w.value}`
}, [
he(i(it)),
l.$slots["chart-background"] ? (s(), n("foreignObject", {
key: 0,
x: v.value.startX,
y: v.value.startY,
width: v.value.width,
height: v.value.height,
style: {
pointerEvents: "none"
}
}, [
x(l.$slots, "chart-background", {}, void 0, !0)
], 8, al)) : h("", !0),
c("defs", null, [
(s(!0), n(S, null, W(z.value, (a, o) => (s(), n("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `quadrant_gradient_${w.value}_${o}`
}, [
c("stop", {
offset: "0%",
"stop-color": i(ue)(i(Mt)(a.color, 0.05), t.value.style.chart.layout.areas.opacity)
}, null, 8, ol),
c("stop", {
offset: "100%",
"stop-color": i(ue)(a.color, t.value.style.chart.layout.areas.opacity)
}, null, 8, sl)
], 8, ul))), 256))
]),
t.value.style.chart.layout.grid.graduations.show ? (s(), n("g", rl, [
(s(!0), n(S, null, W(yt.value, (a) => (s(), n("rect", {
fill: t.value.style.chart.layout.grid.graduations.fill ? i(ue)(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, nl))), 256))
])) : h("", !0),
c("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, il),
c("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, vl),
t.value.style.chart.layout.grid.showArrows ? (s(), n("g", dl, [
c("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, cl),
c("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, hl),
c("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, yl),
c("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, bl)
])) : h("", !0),
t.value.style.chart.layout.labels.quadrantLabels.show && !p.value ? (s(), n("g", fl, [
t.value.style.chart.layout.labels.quadrantLabels.tl.text ? (s(), 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) => j("tl"))
}, L(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, pl)) : h("", !0),
t.value.style.chart.layout.labels.quadrantLabels.tr.text ? (s(), 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) => j("tr"))
}, L(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, gl)) : h("", !0),
t.value.style.chart.layout.labels.quadrantLabels.br.text ? (s(), 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) => j("br"))
}, L(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, ml)) : h("", !0),
t.value.style.chart.layout.labels.quadrantLabels.bl.text ? (s(), 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) => j("bl"))
}, L(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, xl)) : h("", !0)
])) : h("", !0),
t.value.style.chart.layout.labels.axisLabels.show ? (s(), n("g", $l, [
c("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(i(F)(
t.value.style.chart.layout.labels.plotLabels.y.formatter,
C.value.y.max,
i(B)({
v: C.value.y.max,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, kl),
c("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, Ll),
c("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(i(F)(
t.value.style.chart.layout.labels.plotLabels.y.formatter,
C.value.y.min,
i(B)({
v: C.value.y.min,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, wl),
c("text", {
id: `xLabelMin_${w.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(i(F)(
t.value.style.chart.layout.labels.plotLabels.x.formatter,
C.value.x.min,
i(B)({
v: C.value.x.min,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, _l),
c("text", {
id: `xLabelMax_${w.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(i(F)(
t.value.style.chart.layout.labels.plotLabels.x.formatter,
C.value.x.max,
i(B)({
v: C.value.x.max,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, ql),
c("text", {
id: `xLabelMaxName_${w.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, Cl)
])) : h("", !0),
t.value.style.chart.layout.areas.show ? (s(), n("g", Sl, [
(s(!0), n(S, null, W(z.value, (a, o) => (s(), n("g", null, [
a.series.length > 2 ? (s(), n("polygon", {
key: 0,
"data-cy-quadrant-area": "",
fill: t.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${w.value}_${o})` : i(ue)(a.color, t.value.style.chart.layout.areas.opacity),
points: i(Nt)(a)
}, null, 8, zl)) : h("", !0)
]))), 256))
])) : h("", !0),
c("g", null, [
c("rect", {
onClick: u[4] || (u[4] = (a) => O("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, Tl),
c("rect", {
onClick: u[5] || (u[5] = (a) => O("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, Al),
c("rect", {
onClick: u[6] || (u[6] = (a) => O("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, Xl),
c("rect", {
onClick: u[7] || (u[7] = (a) => O("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, Wl)
]),
t.value.style.chart.layout.labels.plotLabels.showAsTag ? (s(), n(S, { key: 7 }, [
$.value.plotLabels.show ? (s(), n("g", Ol, [
(s(!0), n(S, null, W(z.value, (a, o) => (s(), n(S, null, [
(s(!0), n(S, null, W(a.series, (r) => (s(), 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) => Be(a, r, o),
onMouseleave: (b) => Ve(r, o),
onClick: (b) => Pe(a, r, o)
}, [
c("div", {
style: q(`color:${i(Rt)(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: fit-content;`)
}, L(r.name), 5)
], 40, Rl))), 256))
], 64))), 256))
])) : h("", !0)
], 64)) : (s(), n(S, { key: 6 }, [
(s(!0), n(S, null, W(z.value, (a, o) => (s(), n("g", null, [
(s(!0), n(S, null, W(a.series, (r) => (s(), X(et, {
color: a.color,
isSelected: