vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
836 lines (835 loc) • 37.2 kB
JavaScript
import { defineAsyncComponent as R, computed as g, ref as v, toRefs as tt, watch as Z, shallowRef as _e, onMounted as lt, onBeforeUnmount as Ae, watchEffect as at, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as ee, normalizeClass as Le, createBlock as M, createCommentVNode as y, renderSlot as h, createVNode as Ce, createSlots as ot, withCtx as p, normalizeProps as P, guardReactiveProps as N, createElementVNode as d, Fragment as L, renderList as $, toDisplayString as C, createTextVNode as Te, nextTick as st } from "vue";
import { u as it, c as ut, t as nt, b as rt, o as $e, f as vt, h as f, X as dt, s as te, x as Se, k as S, i as z, v as yt, w as ht, y as ct, z as ft } from "./index-q-LPw2IT.js";
import { t as ze, u as gt } from "./useResponsive-DfdjqQps.js";
import { u as Ie } from "./useNestedProp-04aFeUYu.js";
import { u as pt } from "./usePrinter-DX7efa1s.js";
import { u as bt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as xt } from "./useChartAccessibility-9icAAmYg.js";
import mt from "./Title-B55R8CAZ.js";
import wt from "./img-Ctts6JQb.js";
import { u as kt } from "./useTimeLabelCollider-CIsgDrl9.js";
import { u as _t, B as At } from "./useLoading-D7YHNtLX.js";
import { _ as Lt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"], St = ["id"], zt = ["stop-color"], It = ["stop-color"], Ot = ["id"], Ft = ["stop-color"], Rt = ["stop-color"], Mt = ["x", "y", "width", "height", "fill", "rx"], Pt = ["x", "y", "width", "height", "fill", "rx"], Nt = ["x", "y", "width", "height", "fill", "rx"], Et = ["x", "y", "width", "height", "fill", "rx"], Dt = { key: 0 }, Bt = ["x", "y", "fill", "font-size", "font-weight"], Gt = ["x", "y", "fill", "font-size", "font-weight"], Ht = { key: 1 }, Ut = ["x", "y", "font-size", "fill", "font-weight"], Vt = { key: 2 }, Wt = { key: 0 }, Xt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], jt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Yt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], qt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Jt = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Kt = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Qt = ["x", "y", "font-size", "fill", "font-weight"], Zt = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], el = {
key: 4,
class: "vue-data-ui-watermark"
}, tl = {
__name: "vue-ui-age-pyramid",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(le, { expose: Oe }) {
const Fe = R(() => import("./vue-ui-accordion-D46i_gkB.js")), Re = R(() => import("./DataTable-rj9-mAwF.js")), Me = R(() => import("./PackageVersion-5ZjKSIei.js")), Pe = R(() => import("./PenAndPaper-BJ0hcgsa.js")), Ne = R(() => import("./Tooltip-BMOddG-M.js")), Ee = R(() => import("./UserOptions-DVzyjG-W.js")), { vue_ui_age_pyramid: De } = it(), b = le, ae = g(() => !!b.dataset && b.dataset.length), w = v(ut()), Be = v(null), V = v(!1), W = v(""), D = v(null), oe = v(0), k = v(null), se = v(null), ie = v(null), ue = v(null), ne = v(0), re = v(0), X = v(null), e = v(q()), { loading: ve, FINAL_DATASET: B, manualLoading: j } = _t({
...tt(b),
FINAL_CONFIG: e,
prepareConfig: q,
skeletonDataset: [
["_", 9, 2, 2],
["_", 8, 3, 3],
["_", 7, 5, 5],
["_", 6, 8, 8],
["_", 5, 13, 13],
["_", 4, 21, 21],
["_", 3, 34, 34],
["_", 2, 55, 55],
["_", 1, 89, 89],
["_", 0, 144, 144]
],
skeletonConfig: nt({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
translations: {
male: "",
female: ""
},
style: {
backgroundColor: "#99999930",
layout: {
bars: {
left: { color: "#CACACA" },
right: { color: "#999999" }
},
dataLabels: {
xAxis: {
fontSize: 0,
scale: 1e3,
translation: ""
},
yAxis: {
show: !1
}
},
grid: {
stroke: "#6A6A6A"
}
}
}
}
})
}), { userOptionsVisible: Y, setUserOptionsVisibility: de, keepUserOptionState: ye } = bt({ config: e.value }), { svgRef: he } = xt({ config: e.value.style.title });
function q() {
const t = Ie({
userConfig: b.config,
defaultConfig: De
});
return t.theme ? {
...Ie({
userConfig: rt.vue_ui_age_pyramid[t.theme] || b.config,
defaultConfig: t
})
} : t;
}
Z(() => b.config, (t) => {
ve.value || (e.value = q()), Y.value = !e.value.userOptions.showOnChartHover, ce(), ne.value += 1, re.value += 1, x.value.showTable = e.value.table.show, x.value.showTooltip = e.value.style.tooltip.show;
}, { deep: !0 }), Z(() => b.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (j.value = !1);
}, { deep: !0 });
const _ = _e(null), I = _e(null);
lt(() => {
ce();
});
const Ge = g(() => !!e.value.debug);
function ce() {
if ($e(b.dataset) && (vt({
componentName: "VueUiAgePyramid",
type: "dataset",
debug: Ge.value
}), j.value = !0), $e(b.dataset) || (j.value = e.value.loading), e.value.responsive) {
const t = ze(() => {
const { width: o, height: l } = gt({
chart: k.value,
title: e.value.style.title.text ? se.value : null,
source: ie.value,
noTitle: ue.value
});
requestAnimationFrame(() => {
c.value.width = o, c.value.height = l;
});
});
_.value && (I.value && _.value.unobserve(I.value), _.value.disconnect()), _.value = new ResizeObserver(t), I.value = k.value.parentNode, _.value.observe(I.value);
}
}
Ae(() => {
_.value && (I.value && _.value.unobserve(I.value), _.value.disconnect());
});
const { isPrinting: fe, isImaging: ge, generatePdf: pe, generateImage: be } = pt({
elementId: `vue-ui-age-pyramid_${w.value}`,
fileName: e.value.style.title.text || "vue-ui-age-pyramid",
options: e.value.userOptions.print
}), He = g(() => e.value.userOptions.show && !e.value.style.title.text), x = v({
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
});
Z(e, () => {
x.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
};
}, { immediate: !0 });
const c = v({
height: e.value.style.height,
width: e.value.style.width
}), Ue = g(() => c.value.width), Ve = g(() => c.value.height), G = v(0), We = ze((t) => {
G.value = t;
}, 100);
at((t) => {
const o = X.value;
if (!o) return;
const l = new ResizeObserver((a) => {
We(a[0].contentRect.height);
});
l.observe(o), t(() => l.disconnect());
}), Ae(() => {
G.value = 0;
});
const s = g(() => {
const t = c.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, o = e.value.style.layout.padding.left, l = c.value.width - e.value.style.layout.padding.right;
return {
top: e.value.style.layout.padding.top + e.value.style.layout.dataLabels.sideTitles.fontSize + e.value.style.layout.dataLabels.sideTitles.offsetY + 12,
left: o,
right: l,
bottom: c.value.height - e.value.style.layout.padding.bottom - G.value,
width: t,
height: c.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - G.value - e.value.style.layout.dataLabels.sideTitles.fontSize - e.value.style.layout.dataLabels.sideTitles.offsetY - 12,
centerX: e.value.style.layout.padding.left + t / 2,
leftChart: {
width: t / 2 - e.value.style.layout.centerSlit.width,
right: o + t / 2 - e.value.style.layout.centerSlit.width
},
rightChart: {
width: t / 2 - e.value.style.layout.centerSlit.width,
left: o + t / 2 + e.value.style.layout.centerSlit.width
}
};
}), Xe = g(() => B.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), A = g(() => {
const t = je(E.value / 5), o = [], l = [];
for (let a = 0; a <= 5; a += 1) {
const r = t * a, m = t * (a - 5);
o.push({
value: r,
x: s.value.left + s.value.width / 2 + e.value.style.layout.centerSlit.width + r / E.value * s.value.leftChart.width
}), l.push({
value: Math.abs(m),
x: s.value.left + s.value.width / 2 + m / E.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
});
}
return {
right: o,
left: l
};
});
function je(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 E = g(() => Math.max(...B.value.flatMap((t) => t.slice(-2).map((o) => f(o))))), O = g(() => B.value.length), Ye = g(() => B.value.map((t) => ({
segment: t[0],
age: t[1],
left: {
value: t[2],
proportionToMax: t[2] / E.value
},
right: {
value: t[3],
proportionToMax: t[3] / E.value
}
}))), T = g(() => Ye.value.map((t, o) => {
const l = s.value.top + s.value.height / O.value * o, a = s.value.height / O.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: s.value.leftChart.right - t.left.proportionToMax * s.value.leftChart.width,
width: f(t.left.proportionToMax * s.value.leftChart.width),
height: a
},
right: {
...t.right,
y: l,
color: e.value.style.layout.bars.right.color,
x: s.value.rightChart.left,
width: f(t.right.proportionToMax * s.value.rightChart.width),
height: a
}
};
})), J = v(null);
function K(t) {
const [o, l, a, r] = t;
return { segment: o, index: l, left: a, right: r };
}
function qe(t, o) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: K(o), seriesIndex: t });
}
function Je(t, o) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: K(o), seriesIndex: t }), D.value = null, V.value = !1;
}
function Ke(t, o) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: K(o), seriesIndex: t }), D.value = t, J.value = {
datapoint: o,
seriesIndex: t,
series: T.value,
config: e.value
};
const l = e.value.style.tooltip.customFormat;
if (ct(l) && ft(() => l({
seriesIndex: t,
datapoint: {
segment: o[0],
index: o[1],
left: o[2],
right: o[3]
},
series: T.value,
config: e.value
})))
W.value = l({
seriesIndex: t,
datapoint: {
segment: o[0],
index: o[1],
left: o[2],
right: o[3]
},
series: T.value,
config: e.value
});
else {
let a = "";
const r = T.value[t];
a += `<div><b>${r.segment}</b></div>`, a += `<div>${e.value.translations.age}: ${S(
e.value.style.layout.dataLabels.yAxis.formatter,
f(r.age),
z({ v: f(r.age) }),
{ datapoint: o, 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_${w.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${S(
e.value.style.layout.dataLabels.xAxis.formatter,
f(r.left.value),
z({ v: f(r.left.value) }),
{ datapoint: o, 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_${w.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${S(
e.value.style.layout.dataLabels.xAxis.formatter,
f(r.right.value),
z({ v: f(r.right.value) }),
{ datapoint: o, 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>${S(
e.value.style.layout.dataLabels.xAxis.formatter,
f(r.right.value) + f(r.left.value),
z({ v: f(r.right.value) + f(r.left.value) }),
{ datapoint: o, seriesIndex: t }
)}</b></div></div>`, a += "</div>", W.value = `<div>${a}</div>`;
}
V.value = !0;
}
function xe(t = null) {
st(() => {
const o = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = b.dataset.map((m) => [
m[0],
m[1],
m[2],
m[3],
m[2] ?? 0 + m[3] ?? 0
]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(l), r = yt(a);
t ? t(r) : ht({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
});
}
const H = g(() => {
const t = [
e.value.translations.year,
e.value.translations.age,
e.value.translations.female,
e.value.translations.male,
e.value.translations.total
], o = b.dataset.map((a) => [
a[0],
a[1],
a[2] == null ? "" : a[2].toLocaleString(),
a[3] == null ? "" : a[3].toLocaleString(),
(a[2] ?? 0 + a[3] ?? 0).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: o, config: l, colNames: t };
}), F = v(!1);
function me(t) {
F.value = t, oe.value += 1;
}
function we() {
x.value.showTable = !x.value.showTable;
}
function ke() {
x.value.showTooltip = !x.value.showTooltip;
}
const U = v(!1);
function Q() {
U.value = !U.value;
}
async function Qe({ scale: t = 2 } = {}) {
if (!k.value) return;
const { width: o, height: l } = k.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: m } = await wt({ domElement: k.value, base64: !0, img: !0, scale: t });
return {
imageUri: r,
base64: m,
title: e.value.style.title.text,
width: o,
height: l,
aspectRatio: a
};
}
const Ze = v([]), et = v({ start: 0, end: T.value.length });
return kt({
timeLabelsEls: X,
timeLabels: Ze,
slicer: et,
configRef: e,
rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
isAutoSize: !1,
width: Ue,
height: Ve,
targetClass: ".vue-ui-age-pyramid-x-axis-label",
rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
}), Oe({
getImage: Qe,
generatePdf: pe,
generateCsv: xe,
generateImage: be,
toggleTable: we,
toggleTooltip: ke,
toggleAnnotator: Q,
toggleFullscreen: me
}), (t, o) => (i(), n("div", {
class: Le(`vue-ui-age-pyramid ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "agePyramid",
ref: k,
id: `vue-ui-age-pyramid_${w.value}`,
style: ee(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
onMouseenter: o[1] || (o[1] = () => u(de)(!0)),
onMouseleave: o[2] || (o[2] = () => u(de)(!1))
}, [
e.value.userOptions.buttons.annotator ? (i(), M(u(Pe), {
key: 0,
svgRef: u(he),
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
active: U.value,
onClose: Q
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
He.value ? (i(), n("div", {
key: 1,
ref_key: "noTitle",
ref: ue,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : y("", !0),
e.value.style.title.text ? (i(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: se,
style: "width:100%;background:transparent"
}, [
(i(), M(mt, {
key: `title_${ne.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 && ae.value && (u(ye) || u(Y)) ? (i(), M(u(Ee), {
ref_key: "details",
ref: Be,
key: `user_options_${oe.value}`,
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
isImaging: u(ge),
isPrinting: u(fe),
uid: w.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: F.value,
isTooltip: x.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: k.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: U.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: me,
onGeneratePdf: u(pe),
onGenerateCsv: xe,
onGenerateImage: u(be),
onToggleTable: we,
onToggleTooltip: ke,
onToggleAnnotator: Q,
style: ee({
visibility: u(ye) ? u(Y) ? "visible" : "hidden" : "visible"
})
}, ot({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: p(({ isOpen: l, color: a }) => [
h(t.$slots, "menuIcon", P(N({ isOpen: l, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: p(() => [
h(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: p(() => [
h(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: p(() => [
h(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: p(() => [
h(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: p(() => [
h(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: p(({ toggleFullscreen: l, isFullscreen: a }) => [
h(t.$slots, "optionFullscreen", P(N({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: p(({ toggleAnnotator: l, isAnnotator: a }) => [
h(t.$slots, "optionAnnotator", P(N({ 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", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
(i(), n("svg", {
ref_key: "svgRef",
ref: he,
xmlns: u(dt),
class: Le({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
viewBox: `0 0 ${c.value.width <= 0 ? 10 : c.value.width} ${c.value.height <= 0 ? 10 : c.value.height}`,
style: ee(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
}, [
Ce(u(Me)),
t.$slots["chart-background"] ? (i(), n("foreignObject", {
key: 0,
x: s.value.left,
y: s.value.top,
width: Math.max(0.1, s.value.width),
height: Math.max(0.1, s.value.height),
style: {
pointerEvents: "none"
}
}, [
h(t.$slots, "chart-background", {}, void 0, !0)
], 8, $t)) : y("", !0),
d("defs", null, [
d("linearGradient", {
id: `age_pyramid_left_${w.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
d("stop", {
offset: "0%",
"stop-color": e.value.style.layout.bars.left.color
}, null, 8, zt),
d("stop", {
offset: "100%",
"stop-color": u(te)(u(Se)(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, St),
d("linearGradient", {
id: `age_pyramid_right_${w.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
d("stop", {
offset: "0%",
"stop-color": u(te)(u(Se)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
}, null, 8, Ft),
d("stop", {
offset: "100%",
"stop-color": e.value.style.layout.bars.right.color
}, null, 8, Rt)
], 8, Ot)
]),
(i(!0), n(L, null, $(T.value, (l, a) => (i(), n("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, Mt),
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_${w.value})` : l.left.color,
rx: e.value.style.layout.bars.borderRadius
}, null, 8, Pt),
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, Nt),
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_${w.value})` : l.right.color,
rx: e.value.style.layout.bars.borderRadius
}, null, 8, Et)
]))), 256)),
d("g", null, [
e.value.style.layout.dataLabels.sideTitles.show ? (i(), n("g", Dt, [
d("text", {
x: s.value.left,
y: e.value.style.layout.dataLabels.sideTitles.fontSize,
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"
}, C(e.value.translations.female), 9, Bt),
d("text", {
x: s.value.right,
y: e.value.style.layout.dataLabels.sideTitles.fontSize,
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"
}, C(e.value.translations.male), 9, Gt)
])) : y("", !0),
e.value.style.layout.dataLabels.yAxis.show ? (i(), n("g", Ht, [
(i(!0), n(L, null, $(Xe.value, (l, a) => (i(), n(L, null, [
a % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (i(), n("text", {
key: 0,
x: s.value.centerX,
y: s.value.top + s.value.height / O.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"
}, C(u(S)(
e.value.style.layout.dataLabels.yAxis.formatter,
l,
u(z)({ v: l }),
{ datapoint: l, seriesIndex: a }
)), 9, Ut)) : y("", !0)
], 64))), 256))
])) : y("", !0),
e.value.style.layout.dataLabels.xAxis.show ? (i(), n("g", Vt, [
e.value.style.layout.grid.show ? (i(), n("g", Wt, [
d("line", {
x1: A.value.right[0].x,
x2: A.value.right.at(-1).x,
y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
y2: s.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, Xt),
d("line", {
x1: A.value.left[0].x,
x2: A.value.left.at(-1).x,
y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
y2: s.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, jt)
])) : y("", !0),
(i(!0), n(L, null, $(A.value.right, (l, a) => (i(), n("g", null, [
e.value.style.layout.grid.show ? (i(), n("line", {
key: 0,
x1: l.x,
x2: l.x,
y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2 + 4,
stroke: e.value.style.layout.grid.stroke,
"stroke-width": e.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Yt)) : y("", !0)
]))), 256)),
(i(!0), n(L, null, $(A.value.left, (l, a) => (i(), n("g", null, [
e.value.style.layout.grid.show ? (i(), n("line", {
key: 0,
x1: l.x,
x2: l.x,
y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2 + 4,
stroke: e.value.style.layout.grid.stroke,
"stroke-width": e.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, qt)) : y("", !0)
]))), 256)),
d("g", {
ref_key: "xAxisLabels",
ref: X
}, [
(i(!0), n(L, null, $(A.value.right, (l, a) => (i(), n("text", {
class: "vue-ui-age-pyramid-x-axis-label",
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color,
"text-anchor": e.value.style.layout.dataLabels.xAxis.rotation > 0 ? "start" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "end" : "middle",
"font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
transform: `translate(${l.x}, ${s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2}) rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
}, C(u(S)(
e.value.style.layout.dataLabels.xAxis.formatter,
l.value / e.value.style.layout.dataLabels.xAxis.scale,
u(z)({
v: l.value / e.value.style.layout.dataLabels.xAxis.scale
}),
{ datapoint: l, seriesIndex: a }
)), 9, Jt))), 256)),
(i(!0), n(L, null, $(A.value.left, (l, a) => (i(), n("text", {
class: "vue-ui-age-pyramid-x-axis-label",
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color,
"text-anchor": e.value.style.layout.dataLabels.xAxis.rotation > 0 ? "start" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "end" : "middle",
"font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
transform: `translate(${l.x}, ${s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2}) rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
}, C(u(S)(
e.value.style.layout.dataLabels.xAxis.formatter,
l.value / e.value.style.layout.dataLabels.xAxis.scale,
u(z)({
v: l.value / e.value.style.layout.dataLabels.xAxis.scale
}),
{ datapoint: l, seriesIndex: a }
)), 9, Kt))), 256))
], 512),
d("text", {
x: s.value.right,
y: c.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"
}, C(e.value.style.layout.dataLabels.xAxis.translation), 9, Qt)
])) : y("", !0)
]),
(i(!0), n(L, null, $(le.dataset, (l, a) => (i(), n("g", null, [
d("rect", {
x: s.value.left,
y: s.value.top + s.value.height / O.value * a - e.value.style.layout.bars.gap / 2,
width: s.value.width <= 0 ? 1e-4 : s.value.width,
height: s.value.height / O.value <= 0 ? 1e-4 : s.value.height / O.value,
fill: D.value !== null && D.value === a ? u(te)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
onMouseover: (r) => Ke(a, l),
onMouseleave: (r) => Je(a, l),
onClick: (r) => qe(a, l)
}, null, 40, Zt)
]))), 256)),
h(t.$slots, "svg", { svg: c.value }, void 0, !0)
], 14, Tt)),
t.$slots.watermark ? (i(), n("div", el, [
h(t.$slots, "watermark", P(N({ isPrinting: u(fe) || u(ge) })), void 0, !0)
])) : y("", !0),
h(t.$slots, "legend", { legend: T.value }, void 0, !0),
t.$slots.source ? (i(), n("div", {
key: 5,
ref_key: "source",
ref: ie,
dir: "auto"
}, [
h(t.$slots, "source", {}, void 0, !0)
], 512)) : y("", !0),
Ce(u(Ne), {
show: x.value.showTooltip && V.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: k.value,
content: W.value,
isFullscreen: F.value,
isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
smooth: e.value.style.tooltip.smooth,
backdropFilter: e.value.style.tooltip.backdropFilter
}, {
"tooltip-before": p(() => [
h(t.$slots, "tooltip-before", P(N({ ...J.value })), void 0, !0)
]),
"tooltip-after": p(() => [
h(t.$slots, "tooltip-after", P(N({ ...J.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
ae.value ? (i(), M(u(Fe), {
key: 6,
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: p(() => [
(i(), M(u(Re), {
key: `table_${re.value}`,
colNames: H.value.colNames,
head: H.value.head,
body: H.value.body,
config: H.value.config,
title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
onClose: o[0] || (o[0] = (l) => x.value.showTable = !1)
}, {
th: p(({ th: l }) => [
Te(C(l), 1)
]),
td: p(({ td: l }) => [
Te(C(l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : y("", !0),
u(ve) ? (i(), M(At, { key: 7 })) : y("", !0)
], 46, Ct));
}
}, cl = /* @__PURE__ */ Lt(tl, [["__scopeId", "data-v-3cd08557"]]);
export {
cl as default
};