vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
732 lines (731 loc) • 32.1 kB
JavaScript
import { computed as b, ref as v, watch as Ae, onMounted as Le, createElementBlock as r, openBlock as i, unref as u, normalizeStyle as W, normalizeClass as he, createBlock as L, createCommentVNode as y, renderSlot as h, createVNode as fe, createSlots as Se, withCtx as c, normalizeProps as S, guardReactiveProps as z, createElementVNode as d, Fragment as O, renderList as P, toDisplayString as w, createTextVNode as ce, nextTick as ze } from "vue";
import { u as Oe, c as Ie, a as Fe, o as Pe, e as Me, v as f, X as Ne, s as X, w as ge, i as k, f as _, q as Re, r as De, x as Ge, y as Ue } from "./index-CHWA6Lnw.js";
import { t as Be, u as Ee } from "./useResponsive-vZgZwV-S.js";
import { _ as Ve } from "./Title-BwZtefYd.js";
import { u as We, U as Xe } from "./usePrinter-DibtVl2x.js";
import { _ as je } from "./Tooltip-eCCz9HFo.js";
import { D as He } from "./DataTable-B4YF6guk.js";
import Ye from "./vue-ui-skeleton-BSUFPx4a.js";
import qe from "./vue-ui-accordion-gHGrRoVr.js";
import { u as pe } from "./useNestedProp-ByBiJC9_.js";
import { _ as Je } from "./PackageVersion-DcMafJMi.js";
import { P as Ke } from "./PenAndPaper-ljJaW1FE.js";
import { u as Qe } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Ze } from "./useChartAccessibility-BWojgys7.js";
import { _ as et } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const tt = ["id"], lt = ["xmlns", "viewBox"], at = ["x", "y", "width", "height"], ot = ["id"], st = ["stop-color"], it = ["stop-color"], ut = ["id"], rt = ["stop-color"], nt = ["stop-color"], dt = ["x", "y", "width", "height", "fill", "rx"], vt = ["x", "y", "width", "height", "fill", "rx"], yt = ["x", "y", "width", "height", "fill", "rx"], ht = ["x", "y", "width", "height", "fill", "rx"], ft = { key: 0 }, ct = ["x", "y", "fill", "font-size", "font-weight"], gt = ["x", "y", "fill", "font-size", "font-weight"], pt = { key: 1 }, bt = ["x", "y", "font-size", "fill", "font-weight"], xt = { key: 2 }, mt = { key: 0 }, wt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], kt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], _t = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ct = ["x", "y", "font-size", "fill", "font-weight"], $t = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Tt = ["x", "y", "font-size", "fill", "font-weight"], At = ["x", "y", "font-size", "fill", "font-weight"], Lt = ["x", "y", "width", "height", "fill", "onMouseover"], St = {
key: 5,
class: "vue-data-ui-watermark"
}, zt = {
__name: "vue-ui-age-pyramid",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(j, { expose: be }) {
const { vue_ui_age_pyramid: xe } = Oe(), g = j, M = b(() => !!g.dataset && g.dataset.length), m = v(Ie()), me = v(null), G = v(!1), U = v(""), N = v(null), H = v(0), I = v(null), Y = v(null), q = v(null), J = v(null), K = v(0), Q = v(0), e = b({
get: () => le(),
set: (t) => t
}), { userOptionsVisible: B, setUserOptionsVisibility: Z, keepUserOptionState: ee } = Qe({ config: e.value }), { svgRef: te } = Ze({ config: e.value.style.title });
function le() {
const t = pe({
userConfig: g.config,
defaultConfig: xe
});
return t.theme ? {
...pe({
userConfig: Fe.vue_ui_age_pyramid[t.theme] || g.config,
defaultConfig: t
})
} : t;
}
Ae(() => g.config, (t) => {
e.value = le(), B.value = !e.value.userOptions.showOnChartHover, oe(), K.value += 1, Q.value += 1, x.value.showTable = e.value.table.show, x.value.showTooltip = e.value.style.tooltip.show;
}, { deep: !0 });
const ae = v(null);
Le(() => {
oe();
});
function oe() {
if (Pe(g.dataset) && Me({
componentName: "VueUiAgePyramid",
type: "dataset"
}), e.value.responsive) {
const t = Be(() => {
const { width: s, height: l } = Ee({
chart: I.value,
title: e.value.style.title.text ? Y.value : null,
source: q.value,
noTitle: J.value
});
requestAnimationFrame(() => {
p.value.width = s, p.value.height = l;
});
});
ae.value = new ResizeObserver(t), ae.value.observe(I.value.parentNode);
}
}
const { isPrinting: se, isImaging: ie, generatePdf: ue, generateImage: re } = We({
elementId: `vue-ui-age-pyramid_${m.value}`,
fileName: e.value.style.title.text || "vue-ui-age-pyramid"
}), we = b(() => e.value.userOptions.show && !e.value.style.title.text), x = v({
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
}), p = v({
height: e.value.style.height,
width: e.value.style.width
}), o = b(() => {
const t = p.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, s = e.value.style.layout.padding.left, l = p.value.width - e.value.style.layout.padding.right;
return {
top: e.value.style.layout.padding.top,
left: s,
right: l,
bottom: p.value.height - e.value.style.layout.padding.bottom,
width: t,
height: p.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom,
centerX: e.value.style.layout.padding.left + t / 2,
leftChart: {
width: t / 2 - e.value.style.layout.centerSlit.width,
right: s + t / 2 - e.value.style.layout.centerSlit.width
},
rightChart: {
width: t / 2 - e.value.style.layout.centerSlit.width,
left: s + t / 2 + e.value.style.layout.centerSlit.width
}
};
}), ke = b(() => g.dataset.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), C = b(() => {
const t = _e(F.value / 5), s = [], l = [];
for (let a = 0; a <= 5; a += 1) {
const n = t * a, ye = t * (a - 5);
s.push({
value: n,
x: o.value.left + o.value.width / 2 + e.value.style.layout.centerSlit.width + n / F.value * o.value.leftChart.width
}), l.push({
value: Math.abs(ye),
x: o.value.left + o.value.width / 2 + ye / F.value * o.value.leftChart.width - e.value.style.layout.centerSlit.width
});
}
return {
right: s,
left: l
};
});
function _e(t) {
if (t === 0) return 0;
const l = 10 ** Math.floor(Math.log10(Math.abs(t)));
let a;
return t < 0, a = Math.round(t / l) * l, a;
}
const F = b(() => Math.max(...g.dataset.flatMap((t) => t.slice(-2).map((s) => f(s))))), $ = b(() => g.dataset.length), Ce = b(() => g.dataset.map((t) => ({
segment: t[0],
age: t[1],
left: {
value: t[2],
proportionToMax: t[2] / F.value
},
right: {
value: t[3],
proportionToMax: t[3] / F.value
}
}))), T = b(() => Ce.value.map((t, s) => {
const l = o.value.top + o.value.height / $.value * s, a = o.value.height / $.value - e.value.style.layout.bars.gap;
return {
segment: t.segment,
age: t.age,
left: {
...t.left,
y: l,
color: e.value.style.layout.bars.left.color,
x: o.value.leftChart.right - t.left.proportionToMax * o.value.leftChart.width,
width: f(t.left.proportionToMax * o.value.leftChart.width),
height: a
},
right: {
...t.right,
y: l,
color: e.value.style.layout.bars.right.color,
x: o.value.rightChart.left,
width: f(t.right.proportionToMax * o.value.rightChart.width),
height: a
}
};
})), E = v(null);
function $e(t, s) {
N.value = t, E.value = {
datapoint: s,
seriesIndex: t,
series: T.value,
config: e.value
};
const l = e.value.style.tooltip.customFormat;
if (Ge(l) && Ue(() => l({
seriesIndex: t,
datapoint: {
segment: s[0],
index: s[1],
left: s[2],
right: s[3]
},
series: T.value,
config: e.value
})))
U.value = l({
seriesIndex: t,
datapoint: {
segment: s[0],
index: s[1],
left: s[2],
right: s[3]
},
series: T.value,
config: e.value
});
else {
let a = "";
const n = T.value[t];
a += `<div><b>${n.segment}</b></div>`, a += `<div>${e.value.translations.age}: ${k(
e.value.style.layout.dataLabels.yAxis.formatter,
f(n.age),
_({ v: f(n.age) }),
{ datapoint: s, seriesIndex: t }
)}</div>`, a += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, a += '<div style="display:flex; flex-direction:row;gap:12px">', a += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${m.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${k(
e.value.style.layout.dataLabels.xAxis.formatter,
f(n.left.value),
_({ v: f(n.left.value) }),
{ datapoint: s, seriesIndex: t }
)}</b></div></div>`, a += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${m.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${k(
e.value.style.layout.dataLabels.xAxis.formatter,
f(n.right.value),
_({ v: f(n.right.value) }),
{ datapoint: s, seriesIndex: t }
)}</b></div></div>`, a += "</div>", a += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}"><div>${e.value.translations.total}</div><div><b>${k(
e.value.style.layout.dataLabels.xAxis.formatter,
f(n.right.value) + f(n.left.value),
_({ v: f(n.right.value) + f(n.left.value) }),
{ datapoint: s, seriesIndex: t }
)}</b></div></div>`, a += "</div>", U.value = `<div>${a}</div>`;
}
G.value = !0;
}
function ne() {
ze(() => {
const t = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], s = g.dataset.map((n) => [
n[0],
n[1],
n[2],
n[3],
n[2] + n[3]
]), l = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([t]).concat(s), a = Re(l);
De({ csvContent: a, title: e.value.style.title.text || "vue-ui-heatmap" });
});
}
const R = b(() => {
const t = [
e.value.translations.year,
e.value.translations.age,
e.value.translations.female,
e.value.translations.male,
e.value.translations.total
], s = g.dataset.map((a) => [
a[0],
a[1],
a[2].toLocaleString(),
a[3].toLocaleString(),
(a[2] + a[3]).toLocaleString()
]), l = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
};
return { head: t, body: s, config: l, colNames: t };
}), A = v(!1);
function Te(t) {
A.value = t, H.value += 1;
}
function de() {
x.value.showTable = !x.value.showTable;
}
function ve() {
x.value.showTooltip = !x.value.showTooltip;
}
const D = v(!1);
function V() {
D.value = !D.value;
}
return be({
generatePdf: ue,
generateCsv: ne,
generateImage: re,
toggleTable: de,
toggleTooltip: ve,
toggleAnnotator: V
}), (t, s) => (i(), r("div", {
class: he(`vue-ui-age-pyramid ${A.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "agePyramid",
ref: I,
id: `vue-ui-age-pyramid_${m.value}`,
style: W(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
onMouseenter: s[2] || (s[2] = () => u(Z)(!0)),
onMouseleave: s[3] || (s[3] = () => u(Z)(!1))
}, [
e.value.userOptions.buttons.annotator ? (i(), L(Ke, {
key: 0,
svgRef: u(te),
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
active: D.value,
onClose: V
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
we.value ? (i(), r("div", {
key: 1,
ref_key: "noTitle",
ref: J,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : y("", !0),
e.value.style.title.text ? (i(), r("div", {
key: 2,
ref_key: "chartTitle",
ref: Y,
style: "width:100%;background:transparent"
}, [
(i(), L(Ve, {
key: `title_${K.value}`,
config: {
title: {
cy: "pyramid-div-title",
...e.value.style.title
},
subtitle: {
cy: "pyramid-div-subtitle",
...e.value.style.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : y("", !0),
e.value.userOptions.show && M.value && (u(ee) || u(B)) ? (i(), L(Xe, {
ref_key: "details",
ref: me,
key: `user_options_${H.value}`,
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
isImaging: u(ie),
isPrinting: u(se),
uid: m.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasXls: e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: A.value,
isTooltip: x.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: I.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: D.value,
onToggleFullscreen: Te,
onGeneratePdf: u(ue),
onGenerateCsv: ne,
onGenerateImage: u(re),
onToggleTable: de,
onToggleTooltip: ve,
onToggleAnnotator: V,
style: W({
visibility: u(ee) ? u(B) ? "visible" : "hidden" : "visible"
})
}, Se({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: c(({ isOpen: l, color: a }) => [
h(t.$slots, "menuIcon", S(z({ isOpen: l, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: c(() => [
h(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: c(() => [
h(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: c(() => [
h(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: c(() => [
h(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: c(() => [
h(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: c(({ toggleFullscreen: l, isFullscreen: a }) => [
h(t.$slots, "optionFullscreen", S(z({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: c(({ toggleAnnotator: l, isAnnotator: a }) => [
h(t.$slots, "optionAnnotator", S(z({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
M.value ? (i(), r("svg", {
key: 4,
ref_key: "svgRef",
ref: te,
xmlns: u(Ne),
class: he({ "vue-data-ui-fullscreen--on": A.value, "vue-data-ui-fulscreen--off": !A.value }),
viewBox: `0 0 ${p.value.width <= 0 ? 10 : p.value.width} ${p.value.height <= 0 ? 10 : p.value.height}`,
style: W(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
}, [
fe(Je),
t.$slots["chart-background"] ? (i(), r("foreignObject", {
key: 0,
x: o.value.left,
y: o.value.top,
width: o.value.width,
height: o.value.height,
style: {
pointerEvents: "none"
}
}, [
h(t.$slots, "chart-background", {}, void 0, !0)
], 8, at)) : y("", !0),
d("defs", null, [
d("linearGradient", {
id: `age_pyramid_left_${m.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
d("stop", {
offset: "0%",
"stop-color": e.value.style.layout.bars.left.color
}, null, 8, st),
d("stop", {
offset: "100%",
"stop-color": u(X)(u(ge)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
}, null, 8, it)
], 8, ot),
d("linearGradient", {
id: `age_pyramid_right_${m.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
d("stop", {
offset: "0%",
"stop-color": u(X)(u(ge)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
}, null, 8, rt),
d("stop", {
offset: "100%",
"stop-color": e.value.style.layout.bars.right.color
}, null, 8, nt)
], 8, ut)
]),
(i(!0), r(O, null, P(T.value, (l, a) => (i(), r("g", null, [
d("rect", {
x: l.left.x,
y: l.left.y,
width: u(f)(l.left.width <= 0 ? 1e-4 : l.left.width),
height: l.left.height <= 0 ? 1e-4 : l.left.height,
fill: e.value.style.layout.bars.gradient.underlayer,
rx: e.value.style.layout.bars.borderRadius
}, null, 8, dt),
d("rect", {
x: l.left.x,
y: l.left.y,
width: l.left.width <= 0 ? 1e-4 : l.left.width,
height: l.left.height <= 0 ? 1e-4 : l.left.height,
fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${m.value})` : l.left.color,
rx: e.value.style.layout.bars.borderRadius
}, null, 8, vt),
d("rect", {
x: l.right.x,
y: l.right.y,
width: l.right.width <= 0 ? 1e-4 : l.right.width,
height: l.right.height <= 0 ? 1e-4 : l.right.height,
fill: e.value.style.layout.bars.gradient.underlayer,
rx: e.value.style.layout.bars.borderRadius
}, null, 8, yt),
d("rect", {
x: l.right.x,
y: l.right.y,
width: l.right.width <= 0 ? 1e-4 : l.right.width,
height: l.right.height <= 0 ? 1e-4 : l.right.height,
fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${m.value})` : l.right.color,
rx: e.value.style.layout.bars.borderRadius
}, null, 8, ht)
]))), 256)),
d("g", null, [
e.value.style.layout.dataLabels.sideTitles.show ? (i(), r("g", ft, [
d("text", {
x: o.value.left,
y: o.value.top + e.value.style.layout.dataLabels.sideTitles.offsetY,
fill: e.value.style.layout.dataLabels.sideTitles.useSideColor ? e.value.style.layout.bars.left.color : e.value.style.layout.dataLabels.sideTitles.color,
"font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
"text-anchor": "start",
"font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
}, w(e.value.translations.female), 9, ct),
d("text", {
x: o.value.right,
y: o.value.top + e.value.style.layout.dataLabels.sideTitles.offsetY,
fill: e.value.style.layout.dataLabels.sideTitles.useSideColor ? e.value.style.layout.bars.right.color : e.value.style.layout.dataLabels.sideTitles.color,
"font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
"text-anchor": "end",
"font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
}, w(e.value.translations.male), 9, gt)
])) : y("", !0),
e.value.style.layout.dataLabels.yAxis.show ? (i(), r("g", pt, [
(i(!0), r(O, null, P(ke.value, (l, a) => (i(), r(O, null, [
a % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (i(), r("text", {
key: 0,
x: o.value.centerX,
y: o.value.top + o.value.height / $.value * a + e.value.style.layout.dataLabels.yAxis.fontSize / 3,
"text-anchor": "middle",
"font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
fill: e.value.style.layout.dataLabels.yAxis.color,
"font-weight": e.value.style.layout.dataLabels.yAxis.bold ? "bold" : "normal"
}, w(u(k)(
e.value.style.layout.dataLabels.yAxis.formatter,
l,
u(_)({ v: l }),
{ datapoint: l, seriesIndex: a }
)), 9, bt)) : y("", !0)
], 64))), 256))
])) : y("", !0),
e.value.style.layout.dataLabels.xAxis.show ? (i(), r("g", xt, [
e.value.style.layout.grid.show ? (i(), r("g", mt, [
d("line", {
x1: C.value.right[0].x,
x2: C.value.right.at(-1).x,
y1: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
y2: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
stroke: e.value.style.layout.grid.stroke,
"stroke-width": e.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, wt),
d("line", {
x1: C.value.left[0].x,
x2: C.value.left.at(-1).x,
y1: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
y2: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
stroke: e.value.style.layout.grid.stroke,
"stroke-width": e.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, kt)
])) : y("", !0),
(i(!0), r(O, null, P(C.value.right, (l, a) => (i(), r("g", null, [
e.value.style.layout.grid.show ? (i(), r("line", {
key: 0,
x1: l.x,
x2: l.x,
y1: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
y2: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 4,
stroke: e.value.style.layout.grid.stroke,
"stroke-width": e.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, _t)) : y("", !0),
d("text", {
x: l.x,
y: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2,
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color,
"text-anchor": "middle",
"font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
}, w(u(k)(
e.value.style.layout.dataLabels.xAxis.formatter,
l.value / e.value.style.layout.dataLabels.xAxis.scale,
u(_)({
v: l.value / e.value.style.layout.dataLabels.xAxis.scale
}),
{ datapoint: l, seriesIndex: a }
)), 9, Ct)
]))), 256)),
(i(!0), r(O, null, P(C.value.left, (l, a) => (i(), r("g", null, [
e.value.style.layout.grid.show ? (i(), r("line", {
key: 0,
x1: l.x,
x2: l.x,
y1: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
y2: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 4,
stroke: e.value.style.layout.grid.stroke,
"stroke-width": e.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, $t)) : y("", !0),
d("text", {
x: l.x,
y: o.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2,
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color,
"text-anchor": "middle",
"font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
}, w(u(k)(
e.value.style.layout.dataLabels.xAxis.formatter,
l.value / e.value.style.layout.dataLabels.xAxis.scale,
u(_)({
v: l.value / e.value.style.layout.dataLabels.xAxis.scale
}),
{ datapoint: l, seriesIndex: a }
)), 9, Tt)
]))), 256)),
d("text", {
x: o.value.right,
y: p.value.height,
"text-anchor": "end",
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color,
"font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
}, w(e.value.style.layout.dataLabels.xAxis.translation), 9, At)
])) : y("", !0)
]),
(i(!0), r(O, null, P(j.dataset, (l, a) => (i(), r("g", null, [
d("rect", {
x: o.value.left,
y: o.value.top + o.value.height / $.value * a - e.value.style.layout.bars.gap / 2,
width: o.value.width <= 0 ? 1e-4 : o.value.width,
height: o.value.height / $.value <= 0 ? 1e-4 : o.value.height / $.value,
fill: N.value !== null && N.value === a ? u(X)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
onMouseover: (n) => $e(a, l),
onMouseleave: s[0] || (s[0] = (n) => {
N.value = null, G.value = !1;
})
}, null, 40, Lt)
]))), 256)),
h(t.$slots, "svg", { svg: p.value }, void 0, !0)
], 14, lt)) : y("", !0),
t.$slots.watermark ? (i(), r("div", St, [
h(t.$slots, "watermark", S(z({ isPrinting: u(se) || u(ie) })), void 0, !0)
])) : y("", !0),
M.value ? y("", !0) : (i(), L(Ye, {
key: 6,
config: {
type: "pyramid",
style: {
backgroundColor: e.value.style.backgroundColor,
pyramid: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
h(t.$slots, "legend", { legend: T.value }, void 0, !0),
t.$slots.source ? (i(), r("div", {
key: 7,
ref_key: "source",
ref: q,
dir: "auto"
}, [
h(t.$slots, "source", {}, void 0, !0)
], 512)) : y("", !0),
fe(je, {
show: x.value.showTooltip && G.value,
backgroundColor: e.value.style.tooltip.backgroundColor,
color: e.value.style.tooltip.color,
borderRadius: e.value.style.tooltip.borderRadius,
borderColor: e.value.style.tooltip.borderColor,
borderWidth: e.value.style.tooltip.borderWidth,
fontSize: e.value.style.tooltip.fontSize,
backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
position: e.value.style.tooltip.position,
offsetY: e.value.style.tooltip.offsetY,
parent: I.value,
content: U.value,
isFullscreen: A.value,
isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function"
}, {
"tooltip-before": c(() => [
h(t.$slots, "tooltip-before", S(z({ ...E.value })), void 0, !0)
]),
"tooltip-after": c(() => [
h(t.$slots, "tooltip-after", S(z({ ...E.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
M.value ? (i(), L(qe, {
key: 8,
hideDetails: "",
config: {
open: x.value.showTable,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
},
head: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
}
}
}, {
content: c(() => [
(i(), L(He, {
key: `table_${Q.value}`,
colNames: R.value.colNames,
head: R.value.head,
body: R.value.body,
config: R.value.config,
title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
onClose: s[1] || (s[1] = (l) => x.value.showTable = !1)
}, {
th: c(({ th: l }) => [
ce(w(l), 1)
]),
td: c(({ td: l }) => [
ce(w(l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : y("", !0)
], 46, tt));
}
}, jt = /* @__PURE__ */ et(zt, [["__scopeId", "data-v-fe3a06a3"]]);
export {
jt as default
};