vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,369 lines • 59.8 kB
JavaScript
import { defineAsyncComponent as F, computed as g, ref as y, watch as Ee, shallowRef as Ue, onMounted as bt, onBeforeUnmount as ft, createElementBlock as n, openBlock as s, unref as i, normalizeStyle as q, normalizeClass as T, createBlock as R, createCommentVNode as h, createElementVNode as d, createVNode as de, createSlots as pt, withCtx as m, renderSlot as x, normalizeProps as U, guardReactiveProps as D, Fragment as S, renderList as Y, toDisplayString as L, createTextVNode as gt, nextTick as mt } from "vue";
import { u as xt, c as De, t as $t, p as he, a as kt, o as Lt, e as G, b as wt, d as qt, Y as _t, i as V, f as B, X as St, s as oe, w as Ct, Z as zt, I as Tt, F as Xt, q as Wt, r as Yt, x as At, y as Mt } from "./index-BLtEpj8j.js";
import { t as Nt, u as Ot } from "./useResponsive-DfdjqQps.js";
import { u as Ge } from "./useNestedProp-Bw1KcAmj.js";
import { u as Rt } from "./usePrinter-DnRwTdvS.js";
import { u as Vt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Bt } from "./useChartAccessibility-9icAAmYg.js";
import Pt from "./Title-DkG60EPg.js";
import Ft from "./Legend-E7G897sw.js";
import { _ as Qe } from "./Shape-Cqnzky8X.js";
import Ht from "./img-D-vWHxhM.js";
import { _ as It } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Et = ["id"], Ut = ["xmlns", "viewBox", "id"], Dt = ["x", "y", "width", "height"], Gt = ["id"], Qt = ["stop-color"], Jt = ["stop-color"], jt = { key: 1 }, Zt = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], Kt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], el = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], tl = { key: 2 }, ll = ["points", "fill"], al = ["points", "fill"], ul = ["points", "fill"], ol = ["points", "fill"], sl = { key: 3 }, rl = ["y", "fill", "font-size"], nl = ["x", "y", "fill", "font-size"], il = ["x", "y", "fill", "font-size"], vl = ["y", "fill", "font-size"], cl = { key: 4 }, dl = ["x", "y", "font-size", "fill"], hl = ["x", "y", "font-size", "fill"], yl = ["x", "y", "font-size", "fill"], bl = ["id", "font-size", "transform", "fill"], fl = ["id", "font-size", "transform", "fill"], pl = ["id", "font-size", "transform", "fill"], gl = { key: 5 }, ml = ["fill", "points"], xl = ["x", "y", "width", "height"], $l = ["x", "y", "width", "height"], kl = ["x", "y", "width", "height"], Ll = ["x", "y", "width", "height"], wl = {
key: 0,
style: { "pointer-events": "none" }
}, ql = ["x", "y", "font-size", "fill"], _l = ["x", "y", "font-size", "fill", "innerHTML"], Sl = { key: 0 }, Cl = ["x", "y", "onMouseover", "onClick"], zl = {
key: 8,
class: "vue-ui-dna"
}, Tl = ["points", "fill"], Xl = ["points", "fill"], Wl = ["points", "fill"], Yl = ["points", "fill"], Al = { key: 9 }, Ml = ["x", "y", "font-size", "fill", "font-weight"], Nl = { key: 10 }, Ol = ["x", "y", "fill"], Rl = ["x", "y", "fill"], Vl = ["x", "y", "fill"], Bl = ["x", "y", "fill"], Pl = ["stroke", "d"], Fl = ["stroke", "d"], Hl = {
key: 5,
class: "vue-data-ui-watermark"
}, Il = ["onClick"], El = {
key: 0,
height: "14",
width: "14",
viewBox: "0 0 20 20"
}, Ul = ["innerHTML"], Dl = {
__name: "vue-ui-quadrant",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectPlot", "selectSide", "selectLegend"],
setup(Je, { expose: je, emit: Ze }) {
const Ke = F(() => import("./DataTable-CS_V_Adx.js")), et = F(() => import("./PenAndPaper-7BWf7zgA.js")), tt = F(() => import("./vue-ui-accordion-B6Svdk-2.js")), lt = F(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), at = F(() => import("./Tooltip-CuHsd1IQ.js")), ut = F(() => import("./UserOptions-DGw0HvSp.js")), ot = F(() => import("./PackageVersion-CnRyWKP-.js")), { vue_ui_quadrant: st } = xt(), X = Je, K = g(() => !!X.dataset && X.dataset.length), z = y(De()), se = Ze, rt = y(null), ee = y(!1), re = y(""), ye = y(0), f = y(!1), A = y(null), be = y(null), fe = y(null), pe = y(null), ge = y(null), me = y(0), xe = y(0), $e = y(0), t = g({
get: () => qe(),
set: (l) => l
}), { userOptionsVisible: ne, setUserOptionsVisibility: ke, keepUserOptionState: Le } = Vt({ config: t.value }), { svgRef: we } = Bt({ config: t.value.style.chart.title });
function qe() {
const l = Ge({
userConfig: X.config,
defaultConfig: st
});
return l.theme ? {
...Ge({
userConfig: kt.vue_ui_quadrant[l.theme] || X.config,
defaultConfig: l
}),
customPalette: $t[l.theme] || he
} : l;
}
Ee(() => X.config, (l) => {
t.value = qe(), ne.value = !t.value.userOptions.showOnChartHover, _e(), me.value += 1, xe.value += 1, $e.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 M = Ue(null), H = Ue(null);
function _e() {
if (Lt(X.dataset) ? G({
componentName: "VueUiQuadrant",
type: "dataset"
}) : X.dataset.forEach((l, u) => {
[null, void 0].includes(l.name) && G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
index: u
}), [null, void 0].includes(l.series) ? G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "series",
index: u
}) : l.series.forEach((a, o) => {
[null, void 0].includes(a.name) && G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "name",
key: "series",
index: o
});
});
}), t.value.responsive) {
const l = Nt(() => {
const { width: u, height: a } = Ot({
chart: A.value,
title: t.value.style.chart.title.text ? be.value : null,
legend: t.value.style.chart.legend.show ? fe.value : null,
source: pe.value,
noTitle: ge.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;
});
});
M.value && (H.value && M.value.unobserve(H.value), M.value.disconnect()), M.value = new ResizeObserver(l), H.value = A.value.parentNode, M.value.observe(H.value);
}
}
bt(() => {
_e();
}), ft(() => {
M.value && (H.value && M.value.unobserve(H.value), M.value.disconnect());
});
const { isPrinting: Se, isImaging: Ce, generatePdf: ze, generateImage: Te } = Rt({
elementId: `vue-ui-quadrant_${z.value}`,
fileName: t.value.style.chart.title.text || "vue-ui-quadrant",
options: t.value.userOptions.print
}), nt = g(() => t.value.userOptions.show && !t.value.style.chart.title.text), Xe = g(() => wt(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
});
Ee(() => e.value, (l) => {
l && (v.value = {
...JSON.parse(JSON.stringify(e.value)),
startX: 0,
startY: 0
});
}, { deep: !0 });
const c = y(null), P = g(() => {
switch (c.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 };
}
}), it = y(null), te = y(!1);
function Q({ targetX: l, targetY: u, targetW: a, targetH: o, side: r }) {
c.value && Z(r);
const b = {
x: l - v.value.startX,
y: u - v.value.startY,
w: a - v.value.width,
h: o - v.value.height
}, p = t.value.zoomAnimationFrames;
let W = 0;
function Ie() {
te.value = !0, v.value.startX += b.x / p, v.value.startY += b.y / p, v.value.width += b.w / p, v.value.height += b.h / p, W += 1, W < p ? it.value = requestAnimationFrame(Ie) : te.value = !1;
}
Ie();
}
function N(l) {
if (!te.value)
if (f.value && c.value === l)
Q({
targetX: 0,
targetY: 0,
targetW: e.value.width,
targetH: e.value.height
}), c.value = null, f.value = !1;
else {
switch (c.value = l, l) {
case "TL":
Q({
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":
Q({
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":
Q({
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":
Q({
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;
}
f.value = !0;
}
}
const vt = 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;
}), _ = 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
}
};
}), O = y([]), I = g(() => X.dataset.map((l, u) => ({
...l,
series: _t({
data: l.series,
threshold: t.value.downsample.threshold
}),
id: `cat_${u}_${z.value}`,
color: qt(l.color) || Xe.value[u] || he[u]
}))), ct = g(() => I.value.filter((l) => !O.value.includes(l.id))), dt = g(() => I.value.map((l, u) => ({
...l,
shape: l.shape || "circle",
series: l.series.map((a) => ({
...a,
x: We(a.x),
y: Ye(a.y),
xValue: a.x,
yValue: a.y,
quadrantSide: Me({ x: a.x, y: a.y }),
categoryName: l.name,
shape: l.shape,
color: l.color
}))
}))), C = g(() => (X.dataset.forEach((l, u) => {
l.series.forEach((a, o) => {
[null, void 0].includes(a.x) && G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "x",
key: "series",
index: o
}), [null, void 0].includes(a.y) && G({
componentName: "VueUiQuadrant",
type: "datasetSerieAttribute",
property: "y",
key: "series",
index: o
});
});
}), ct.value.map((l, u) => ({
...l,
shape: l.shape || "circle",
color: l.color || Xe.value[u] || he[u],
series: l.series.map((a) => ({
...a,
x: We(a.x),
y: Ye(a.y),
xValue: a.x,
yValue: a.y,
quadrantSide: Me({ x: a.x, y: a.y }),
categoryName: l.name,
shape: l.shape,
color: l.color,
uid: De()
}))
}))));
function We(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 Ye(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 le = g(() => {
const l = C.value.flatMap((p) => p.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: p.color,
shape: p.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((p) => [p.category, p.name, p.x, p.y, p.sideName || p.quadrantSide]), b = l.map((p) => ({
shape: p.shape,
color: p.color
}));
return { head: o, body: r, itsShapes: b, tableData: l };
}), ae = g(() => {
const l = le.value.head, u = le.value.tableData.map((o) => [
{
shape: o.shape,
color: o.color,
name: o.category
},
o.name,
V(
t.value.style.chart.layout.labels.plotLabels.x.formatter,
o.x,
B({
v: o.x,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
),
V(
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 ie(l) {
O.value.includes(l) ? O.value = O.value.filter((a) => a !== l) : O.value.push(l);
const u = Re();
se("selectLegend", u);
}
const Ae = g(() => dt.value.map((l) => ({
name: l.name,
shape: l.shape,
color: l.color,
id: l.id,
opacity: O.value.includes(l.id) ? 0.5 : 1,
segregate: () => ie(l.id),
isSegregated: O.value.includes(l.id)
}))), ht = 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 Me(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 J = y(null), j = y(null), ve = y(null);
function Ne(l, u, a) {
J.value = u.uid, j.value = {
color: l.color,
shape: l.shape
}, ve.value = {
datapoint: u,
seriesIndex: a,
series: C.value,
config: t.value
}, ee.value = !0;
const o = t.value.style.chart.tooltip.customFormat;
if (At(o) && Mt(() => o({
seriesIndex: a,
datapoint: u,
series: C.value,
config: t.value
})))
re.value = o({
seriesIndex: a,
datapoint: u,
series: C.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>${V(
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>${V(
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 Oe(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
};
se("selectPlot", a);
}
function Z(l) {
if (!l) return;
const u = C.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]
};
se("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 Re() {
return C.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 Ve(l = null) {
mt(() => {
const u = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], a = le.value.head, o = le.value.body, r = u.concat([a]).concat(o), b = Wt(r);
l ? l(b) : Yt({ csvContent: b, title: t.value.style.chart.title.text || "vue-ui-quadrant" });
});
}
const E = y(!1);
function Be(l) {
E.value = l, ye.value += 1;
}
function Pe() {
$.value.showTable = !$.value.showTable;
}
function Fe() {
$.value.plotLabels.show = !$.value.plotLabels.show;
}
function He() {
$.value.showTooltip = !$.value.showTooltip;
}
const ue = y(!1);
function ce() {
ue.value = !ue.value;
}
async function yt({ scale: l = 2 } = {}) {
if (!A.value) return;
const { width: u, height: a } = A.value.getBoundingClientRect(), o = u / a, { imageUri: r, base64: b } = await Ht({ domElement: A.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 je({
getData: Re,
getImage: yt,
generatePdf: ze,
generateCsv: Ve,
generateImage: Te,
toggleTable: Pe,
toggleLabels: Fe,
toggleTooltip: He,
toggleAnnotator: ce,
toggleFullscreen: Be
}), (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: A,
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] = () => i(ke)(!0)),
onMouseleave: u[17] || (u[17] = () => i(ke)(!1))
}, [
t.value.userOptions.buttons.annotator ? (s(), R(i(et), {
key: 0,
svgRef: i(we),
backgroundColor: t.value.style.chart.backgroundColor,
color: t.value.style.chart.color,
active: ue.value,
onClose: ce
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
nt.value ? (s(), n("div", {
key: 1,
ref_key: "noTitle",
ref: ge,
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: be,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(s(), R(Pt, {
key: `table_${me.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),
t.value.userOptions.show && K.value && (i(Le) || i(ne)) ? (s(), R(i(ut), {
ref_key: "details",
ref: rt,
key: `user_options_${ye.value}`,
backgroundColor: t.value.style.chart.backgroundColor,
color: t.value.style.chart.color,
isImaging: i(Ce),
isPrinting: i(Se),
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: E.value,
isTooltip: $.value.showTooltip,
titles: { ...t.value.userOptions.buttonTitles },
chartElement: A.value,
position: t.value.userOptions.position,
hasAnnotator: t.value.userOptions.buttons.annotator,
isAnnotation: ue.value,
callbacks: t.value.userOptions.callbacks,
printScale: t.value.userOptions.print.scale,
onToggleFullscreen: Be,
onGeneratePdf: i(ze),
onGenerateCsv: Ve,
onGenerateImage: i(Te),
onToggleTable: Pe,
onToggleLabels: Fe,
onToggleTooltip: He,
onToggleAnnotator: ce,
style: q({
visibility: i(Le) ? i(ne) ? "visible" : "hidden" : "visible"
})
}, pt({ _: 2 }, [
l.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: a, color: o }) => [
x(l.$slots, "menuIcon", U(D({ 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(D({ 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(D({ 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),
K.value ? (s(), n("svg", {
key: 4,
ref_key: "svgRef",
ref: we,
xmlns: i(St),
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:${f.value ? "hidden" : "visible"};background:transparent;color:${t.value.style.chart.color}`),
id: `svg_${z.value}`
}, [
de(i(ot)),
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, Dt)) : h("", !0),
d("defs", null, [
(s(!0), n(S, null, Y(C.value, (a, o) => (s(), n("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `quadrant_gradient_${z.value}_${o}`
}, [
d("stop", {
offset: "0%",
"stop-color": i(oe)(i(Ct)(a.color, 0.05), t.value.style.chart.layout.areas.opacity)
}, null, 8, Qt),
d("stop", {
offset: "100%",
"stop-color": i(oe)(a.color, t.value.style.chart.layout.areas.opacity)
}, null, 8, Jt)
], 8, Gt))), 256))
]),
t.value.style.chart.layout.grid.graduations.show ? (s(), n("g", jt, [
(s(!0), n(S, null, Y(vt.value, (a) => (s(), n("rect", {
fill: t.value.style.chart.layout.grid.graduations.fill ? i(oe)(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, Zt))), 256))
])) : h("", !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, Kt),
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, el),
t.value.style.chart.layout.grid.showArrows ? (s(), n("g", tl, [
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, ll),
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, al),
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, ul),
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, ol)
])) : h("", !0),
t.value.style.chart.layout.labels.quadrantLabels.show && !f.value ? (s(), n("g", sl, [
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) => Z("tl"))
}, L(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, rl)) : 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) => Z("tr"))
}, L(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, nl)) : 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) => Z("br"))
}, L(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, il)) : 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) => Z("bl"))
}, L(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, vl)) : h("", !0)
])) : h("", !0),
t.value.style.chart.layout.labels.axisLabels.show ? (s(), n("g", cl, [
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(i(V)(
t.value.style.chart.layout.labels.plotLabels.y.formatter,
_.value.y.max,
i(B)({
v: _.value.y.max,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, dl),
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, hl),
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(i(V)(
t.value.style.chart.layout.labels.plotLabels.y.formatter,
_.value.y.min,
i(B)({
v: _.value.y.min,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, yl),
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(i(V)(
t.value.style.chart.layout.labels.plotLabels.x.formatter,
_.value.x.min,
i(B)({
v: _.value.x.min,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, bl),
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(i(V)(
t.value.style.chart.layout.labels.plotLabels.x.formatter,
_.value.x.max,
i(B)({
v: _.value.x.max,
r: t.value.style.chart.layout.labels.plotLabels.rounding
})
)), 9, fl),
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, pl)
])) : h("", !0),
t.value.style.chart.layout.areas.show ? (s(), n("g", gl, [
(s(!0), n(S, null, Y(C.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_${z.value}_${o})` : i(oe)(a.color, t.value.style.chart.layout.areas.opacity),
points: i(zt)(a)
}, null, 8, ml)) : h("", !0)
]))), 256))
])) : h("", !0),
d("g", null, [
d("rect", {
onClick: u[4] || (u[4] = (a) => N("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": !f.value, "vue-data-ui-zoom-minus": f.value })
}, null, 10, xl),
d("rect", {
onClick: u[5] || (u[5] = (a) => N("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": !f.value, "vue-data-ui-zoom-minus": f.value })
}, null, 10, $l),
d("rect", {
onClick: u[6] || (u[6] = (a) => N("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": !f.value, "vue-data-ui-zoom-minus": f.value })
}, null, 10, kl),
d("rect", {
onClick: u[7] || (u[7] = (a) => N("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": !f.value, "vue-data-ui-zoom-minus": f.value })
}, null, 10, Ll)
]),
t.value.style.chart.layout.labels.plotLabels.showAsTag ? (s(), n(S, { key: 7 }, [
$.value.plotLabels.show ? (s(), n("g", Sl, [
(s(!0), n(S, null, Y(C.value, (a, o) => (s(), n(S, null, [
(s(!0), n(S, null, Y(a.series, (r) => (s(), n("foreignObject", {
style: { overflow: "visible" },
height: "10",
width: "100",
x: r.x - 50,
y: r.y - t.value.style.chart.layout.labels.plotLabels.fontSize,
onMouseover: (b) => Ne(a, r, o),
onMouseleave: u[9] || (u[9] = (b) => {
ee.value = !1, J.value = null, j.value = null;
}),
onClick: (b) => Oe(a, r)
}, [
d("div", {
style: q(`color:${i(Xt)(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, Cl))), 256))
], 64))), 256))
])) : h("", !0)
], 64)) : (s(), n(S, { key: 6 }, [
(s(!0), n(S, null, Y(C.value, (a, o) => (s(), n("g", null, [
(s(!0), n(S, null, Y(a.series, (r) => (s(), R(Qe, {
color: a.color,
isSelected: J.value && r.uid === J.value,
plot: r,
radius: t.value.style.chart.layout.plots.radius / (f.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) => Ne(a, r, o),
onMouseleave: u[8] || (u[8] = (b) => {
ee.value = !1, J.value = null, j.value = null;
}),
onClick: (b) => Oe(a, r)
}, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseenter", "onClick"]))), 256))
]))), 256)),
$.value.plotLabels.show ? (s(), n("g", wl, [
(s(!0), n(S, null, Y(C.value, (a) => (s(), n("g", null, [
(s(!0), n(S, null, Y(a.series, (o) => (s(), n("g", null, [
String(o.name).includes(`
`) ? (s(), n("text", {
key: 1,
x: o.x,
y: o.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 / (f.value ? 1.5 : 1),
fill: t.value.style.chart.layout.labels.plotLabels.color,
innerHTML: i(Tt)({
content: String(o.name),
fontSize: t.value.style.chart.layout.labels.plotLabels.fontSize / (f.value ? 1.5 : 1),
fill: t.value.style.chart.layout.labels.plotLabels.color,
x: o.x,
y: o.y + t.value.style.chart.layout.labels.plotLabels.offsetY + t.value.style.chart.layout.plots.radius
})
}, null, 8, _l)) : (s(), n("text", {
key: 0,
x: o.x,
y: o.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 / (f.value ? 1.5 : 1),
fill: t.value.style.chart.layout.labels.plotLabels.color
}, L(o.name), 9, ql))
]))), 256))
]))), 256))
])) : h("", !0)
], 64)),
f.value ? (s(), n("g", zl, [
c.value === "TL" ? (s(), 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, Tl)) : h("", !0),
c.value === "TR" ? (s(), 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, Xl)) : h("", !0),
c.value === "BR" ? (s(), 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, Wl)) : h("", !0),
c.value === "BL" ? (s(), 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, Yl)) : h("", !0)
])) : h("", !0),
c.value && !te.value ? (s(), n("g", Al, [
d("text", {
x: P.value.x,
y: P.value.y - P.value.fontSize / 1.5,
"font-size": P.value.fontSize / 1.5,
fill: P.value.fill,
"text-anchor": "middle",
"font-weight": P.value.bold ? "bold" : "normal"
}, L(P.value.text), 9, Ml)
])) : h("", !0),
f.value && c.value ? (s(), n("g", Nl, [
d("rect", {
x: w.value[c.value].tl.x,
y: w.value[c.value].tl.y,
height: "20",
width: "20",
fill: w.value[c.value].tl.fill,
style: q(`cursor: pointer; opacity: ${c.value === "TL" ? 1 : 0.2}`),
onClick: u[10] || (u[10] = (a) => N("TL")),
class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": c.value !== "TL" })
}, null, 14, Ol),
d("rect", {
x: w.value[c.value].tr.x,
y: w.value[c.value].tr.y,
height: "20",
width: "20",
fill: w.value[c.value].tr.fill,
style: q(`cursor: pointer; opacity: ${c.value === "TR" ? 1 : 0.2}`),
onClick: u[11] || (u[11] = (a) => N("TR")),
class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": c.value !== "TR" })
}, null, 14, Rl),
d("rect", {
x: w.value[c.value].br.x,
y: w.value[c.value].br.y,
height: "20",
width: "20",
fill: w.value[c.value].br.fill,
style: q(`cursor: pointer; opacity: ${c.value === "BR" ? 1 : 0.2}`),
onClick: u[12] || (u[12] = (a) => N("BR")),
class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": c.value !== "BR" })
}, null, 14, Vl),
d("rect", {
x: w.value[c.value].bl.x,
y: w.value[c.value].bl.y,
height: "20",
width: "20",
fill: w.value[c.value].bl.fill,
style: q(`cursor: pointer; opacity: ${c.value === "BL" ? 1 : 0.2}`),
onClick: u[13] || (u[13] = (a) => N("BL")),
class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": c.value !== "BL" })
}, null, 14, Bl),
d("path", {
class: "vue-ui-quadrant-minimap-crosshairs",
stroke: t.value.style.chart.backgroundColor,
"stroke-width": 1,
d: w.value[c.value].crosshairs.horizontal
}, null, 8, Pl),
d("path", {
class: "vue-ui-quadrant-minimap-crosshairs",
stroke: t.value.style.chart.backgroundColor,
"stroke-width": 1,
d: w.value[c.value].crosshairs.vertical
}, null, 8, Fl)
])) : h("", !0),
x(l.$slots, "svg", { svg: e.value }, void 0, !0)
], 14, Ut)) : h("", !0),
l.$slots.watermark ? (s(), n("div", Hl, [
x(l.$slots, "watermark", U(D({ isPrinting: i(Se) || i(Ce) })), void 0, !0)
])) : h("", !0),
K.value ? h("", !0) : (s(), R(i(lt), {
key: 6,
config: {
type: "quadrant",
style: {
backgroundColor: t.value.style.chart.backgroundColor,
quadrant: {
grid: {
color: t.value.style.chart.layout.grid.stroke
},
plots: {
color: t.value.style.chart.layout.grid.stroke,
radius: 1
}
}
}
}
}, null, 8, ["config"])),
d("div", {
ref_key: "chartLegend",
ref: fe
}, [
t.value.style.chart.legend.show ? (s(), R(Ft, {
key: `legend_${$e.value}`,
legendSet: Ae.value,
config: ht.value,
onClickMarker: u[14] || (u[14] = ({ legend: a }) => ie(a.id))
}, {
item: m(({ legend: a }) => [
d("div", {
onClick: (o) => ie(a.id),
style: q(`opacity:${O.value.includes(a.id) ? 0.5 : 1}`)
}, L(a.name), 13, Il)
]),
_: 1
}, 8, ["legendSet", "config"])) : x(l.$slots, "legend", {
key: 1,
legend: Ae.value
}, void 0, !0)
], 512),
l.$slots.source ? (s(), n("div", {
key: 7,
ref_key: "source",
ref: pe,
dir: "auto"
}, [
x(l.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
de(i(at), {
show: $.value.showTooltip && ee.value,
backgroundColor: t.value.style.chart.tooltip.backgroundColor,
color: t.value.style.chart.tooltip.color,
borderRadius: t.value.style.chart.tooltip.borderRadius,
borderColor: t.value.style.chart.tooltip.borderColor,
borderWidth: t.value.style.chart.tooltip.borderWidth,
fontSize: t.value.style.chart.tooltip.fontSize,
backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
position: t.value.style.chart.tooltip.position,
offsetY: t.value.style.chart.tooltip.offsetY,
parent: A.value,
content: re.value,
isFullscreen: E.value,
isCustom: t.value.style.chart.tooltip.customFormat && typeof t.value.style.chart.tooltip.customFormat == "function"
}, {
"tooltip-before": m(() => [
x(l.$slots, "tooltip-before", U(D({ ...ve.value })), void 0, !0)
]),
"tooltip-after": m(() => [
x(l.$slots, "tooltip-after", U(D({ ...ve.value })), void 0, !0)
]),
default: m(() => [
t.value.style.chart.tooltip.showShape ? (s(), n("svg", El, [
de(Qe, {
plot: { x: 10, y: 10 },
shape: j.value.shape,
color: j.value.color,
radius: 8,
stroke: t.value.style.chart.layout.plots.outline ? t.value.style.chart.layout.plots.outlineColor : "none",
"stroke-width": t.value.style.chart.layout.plots.outlineWidth
}, null, 8, ["shape", "color", "stroke", "stroke-width"])
])) : h("", !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
K.value ? (s(), R(i(tt), {
key: 8,
hideDetails: "",
config: {
open: $.value.showTable,
maxHeight: 1e4,
body: {
backgroundColor: t.value.style.chart.backgroundColor,
color: t.value.style.chart.color
},
head: {
backgroundColor: t.value.style.chart.backgroundColor,
color: t.value.style.chart.color
}
}
}, {
content: m(() => [
(s(), R(i(Ke), {
key: `table_${xe.value}`,
colNames: ae.value.colNames,
head: ae.value.head,
body: ae.value.body,
config: ae.value.config,
title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? ` : ${t.value.style.chart.title.subtitle.text}` : ""}`,
onClose: u[15] || (u[15] = (a) => $.value.showTable = !1)
}, {
th: m(({ th: a }) => [
gt(L(a), 1)
]),
td: m(({ td: a }) => [
d("div", {
innerHTML: a.name || a
}, null, 8, Ul)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : h("", !0)
], 46, Et));
}
}, sa = /* @__PURE__ */ It(Dl, [["__scopeId", "data-v-459edc04"]]);
export {
sa as default
};