vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
961 lines (960 loc) • 45.5 kB
JavaScript
import { defineAsyncComponent as $, computed as h, ref as d, toRefs as Ct, watch as j, shallowRef as De, onMounted as kt, onBeforeUnmount as Oe, watchEffect as At, createElementBlock as u, openBlock as i, unref as r, normalizeStyle as se, normalizeClass as ze, createBlock as R, createCommentVNode as f, renderSlot as v, createVNode as ie, withCtx as c, normalizeProps as C, guardReactiveProps as k, createSlots as Be, createElementVNode as y, Fragment as F, renderList as O, toDisplayString as T, resolveDynamicComponent as wt, mergeProps as Tt, createTextVNode as re, nextTick as _t } from "vue";
import { c as Lt, t as $t, o as Ie, g as Ft, U as b, X as St, s as ue, h as Ee, a as z, d as B, v as Dt, r as Ot, y as zt, _ as Bt } from "./lib-2iaAPQ_c.js";
import { t as Re, u as It } from "./useResponsive-DfdjqQps.js";
import { u as Et, a as ne } from "./useNestedProp-2p4Tjzc8.js";
import { u as Rt, B as Pt } from "./BaseScanner-BMpwQAfz.js";
import { u as Mt } from "./usePrinter-ChVMpU2f.js";
import { u as Nt } from "./useSvgExport-ByUukOZt.js";
import { u as Ut } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Gt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Ht } from "./useChartAccessibility-9icAAmYg.js";
import { u as Vt } from "./useTimeLabelCollider-CIsgDrl9.js";
import Wt from "./img-CqYIrJ8I.js";
import jt from "./Title-DSOZzIrU.js";
import { _ as Xt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { grid: { stroke: "#5A5A5A" }, dataLabels: { sideTitles: { color: "#CCCCCC" }, xAxis: { color: "#CCCCCC" }, yAxis: { color: "#CCCCCC" } } }, highlighter: { color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Me = { style: { backgroundColor: "#FFF8E1", color: "#424242", layout: { grid: { stroke: "#5D4037" }, dataLabels: { sideTitles: { color: "#424242" }, xAxis: { color: "#424242" }, yAxis: { color: "#424242" } }, bars: { borderRadius: 0, gap: 1, left: { color: "#F57C00" }, right: { color: "#D32F2F" }, gradient: { show: !1 } } }, highlighter: { color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Ne = { style: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { grid: { stroke: "#5D4037" }, dataLabels: { sideTitles: { color: "#BDBDBD" }, xAxis: { color: "#BDBDBD" }, yAxis: { color: "#BDBDBD" } }, bars: { borderRadius: 0, gap: 1, left: { color: "#F57C00" }, right: { color: "#D32F2F" }, gradient: { show: !1 } } }, highlighter: { color: "#FFF8E1" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Ue = { style: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { grid: { stroke: "#5F6A5F" }, dataLabels: { sideTitles: { color: "#AACCAA" }, xAxis: { color: "#5F6A5F" }, yAxis: { color: "#5F6A5F" } }, bars: { borderRadius: 0, gap: 1, left: { color: "#668066" }, right: { color: "#66CC66" }, gradient: { show: !1 } } }, highlighter: { color: "#66CC66" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ge = { style: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { grid: { stroke: "#5F6A5F" }, dataLabels: { sideTitles: { color: "#8A9892" }, xAxis: { show: !1 }, yAxis: { show: !1 } }, bars: { borderRadius: 6, gap: 1, left: { color: "#DCB482" }, right: { color: "#B9B99D" }, gradient: { show: !0 } } }, highlighter: { color: "#8F837A" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, He = { style: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { grid: { stroke: "#5F6A5F" }, dataLabels: { sideTitles: { color: "#61747E" }, xAxis: { color: "#61747E" }, yAxis: { color: "#61747E" } }, bars: { borderRadius: 0, gap: 1, left: { color: "#A1B5A3" }, right: { color: "#7DA9B5" }, gradient: { show: !0, intensity: 10 } } }, highlighter: { color: "#7DA9B5" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Ve = {
default: {},
dark: Pe,
celebration: Me,
celebrationNight: Ne,
hack: Ue,
zen: Ge,
concrete: He
}, Ml = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Me,
celebrationNight: Ne,
concrete: He,
dark: Pe,
default: Ve,
hack: Ue,
zen: Ge
}, Symbol.toStringTag, { value: "Module" })), Yt = ["id"], qt = ["xmlns", "viewBox"], Jt = ["x", "y", "width", "height"], Kt = ["id"], Qt = ["stop-color"], Zt = ["stop-color"], el = ["id"], tl = ["stop-color"], ll = ["stop-color"], ol = ["x", "y", "width", "height", "fill", "rx"], al = ["x", "y", "width", "height", "fill", "rx"], sl = ["x", "y", "width", "height", "fill", "rx"], il = ["x", "y", "width", "height", "fill", "rx"], rl = { key: 0 }, ul = ["x", "y", "fill", "font-size", "font-weight"], nl = ["x", "y", "fill", "font-size", "font-weight"], dl = { key: 1 }, vl = ["x", "y", "font-size", "fill", "font-weight"], cl = { key: 2 }, yl = { key: 0 }, hl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], bl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], xl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], ml = ["x", "y", "font-size", "fill", "font-weight"], Cl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], kl = {
key: 4,
class: "vue-data-ui-watermark"
}, Al = {
__name: "vue-ui-age-pyramid",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(de, { expose: We }) {
const je = $(() => import("./Tooltip-D0pGX8qz.js")), Xe = $(() => import("./BaseIcon-CbVDYv89.js")), Ye = $(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), qe = $(() => import("./DataTable-BT_IeqPe.js")), Je = $(() => import("./PenAndPaper-CvyKWfNl.js")), Ke = $(() => import("./UserOptions-BQO4YFrn.js")), Qe = $(() => import("./PackageVersion-Br3DrrFh.js")), Ze = $(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_age_pyramid: et } = Et(), { isThemeValid: tt, warnInvalidTheme: lt } = Ut(), p = de, ve = h(() => !!p.dataset && p.dataset.length), A = d(Lt()), X = d(!1), Y = d(""), U = d(null), ce = d(0), w = d(null), ye = d(null), he = d(null), fe = d(null), ge = d(0), be = d(0), q = d(null), P = d(null), J = d(null), e = d(ee()), { loading: pe, FINAL_DATASET: G, manualLoading: K } = Rt({
...Ct(p),
FINAL_CONFIG: e,
prepareConfig: ee,
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: $t({
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: Q, setUserOptionsVisibility: xe, keepUserOptionState: me } = Gt({ config: e.value }), { svgRef: Z } = Ht({ config: e.value.style.title });
function ee() {
const t = ne({
userConfig: p.config,
defaultConfig: et
}), a = t.theme;
if (!a) return t;
if (!tt.value(t))
return lt(t), t;
const l = ne({
userConfig: Ve[a] || p.config,
defaultConfig: t
});
return ne({
userConfig: p.config,
defaultConfig: l
});
}
j(() => p.config, (t) => {
pe.value || (e.value = ee()), Q.value = !e.value.userOptions.showOnChartHover, Ce(), ge.value += 1, be.value += 1, x.value.showTable = e.value.table.show, x.value.showTooltip = e.value.style.tooltip.show;
}, { deep: !0 }), j(() => p.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (K.value = !1);
}, { deep: !0 });
const _ = De(null), I = De(null);
kt(() => {
Ce();
});
const ot = h(() => !!e.value.debug);
function Ce() {
if (Ie(p.dataset) && (Ft({
componentName: "VueUiAgePyramid",
type: "dataset",
debug: ot.value
}), K.value = !0), Ie(p.dataset) || (K.value = e.value.loading), e.value.responsive) {
const t = Re(() => {
const { width: a, height: l } = It({
chart: w.value,
title: e.value.style.title.text ? ye.value : null,
source: he.value,
noTitle: fe.value
});
requestAnimationFrame(() => {
g.value.width = a, g.value.height = l;
});
});
_.value && (I.value && _.value.unobserve(I.value), _.value.disconnect()), _.value = new ResizeObserver(t), I.value = w.value.parentNode, _.value.observe(I.value);
}
}
Oe(() => {
_.value && (I.value && _.value.unobserve(I.value), _.value.disconnect());
});
const { isPrinting: ke, isImaging: Ae, generatePdf: we, generateImage: Te } = Mt({
elementId: `vue-ui-age-pyramid_${A.value}`,
fileName: e.value.style.title.text || "vue-ui-age-pyramid",
options: e.value.userOptions.print
}), at = h(() => e.value.userOptions.show && !e.value.style.title.text), x = d({
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
});
j(e, () => {
x.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
};
}, { immediate: !0 });
const g = d({
height: e.value.style.height,
width: e.value.style.width
}), st = h(() => g.value.width), it = h(() => g.value.height), H = d(0), rt = Re((t) => {
H.value = t;
}, 100);
At((t) => {
const a = q.value;
if (!a) return;
const l = new ResizeObserver((o) => {
rt(o[0].contentRect.height);
});
l.observe(a), t(() => l.disconnect());
}), Oe(() => {
H.value = 0;
});
const s = h(() => {
const t = g.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, a = e.value.style.layout.padding.left, l = g.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: a,
right: l,
bottom: g.value.height - e.value.style.layout.padding.bottom - H.value,
width: t,
height: g.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - H.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: a + t / 2 - e.value.style.layout.centerSlit.width
},
rightChart: {
width: t / 2 - e.value.style.layout.centerSlit.width,
left: a + t / 2 + e.value.style.layout.centerSlit.width
}
};
}), ut = h(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), L = h(() => {
const t = nt(M.value / 5), a = [], l = [];
for (let o = 0; o <= 5; o += 1) {
const n = t * o, m = t * (o - 5);
a.push({
value: n,
x: s.value.left + s.value.width / 2 + e.value.style.layout.centerSlit.width + n / M.value * s.value.leftChart.width
}), l.push({
value: Math.abs(m),
x: s.value.left + s.value.width / 2 + m / M.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
});
}
return {
right: a,
left: l
};
});
function nt(t) {
if (t === 0) return 0;
const l = 10 ** Math.floor(Math.log10(Math.abs(t)));
let o;
return t < 0, o = Math.round(t / l) * l, o;
}
const M = h(() => Math.max(...G.value.flatMap((t) => t.slice(-2).map((a) => b(a))))), E = h(() => G.value.length), dt = h(() => G.value.map((t) => ({
segment: t[0],
age: t[1],
left: {
value: t[2],
proportionToMax: t[2] / M.value
},
right: {
value: t[3],
proportionToMax: t[3] / M.value
}
}))), S = h(() => dt.value.map((t, a) => {
const l = s.value.top + s.value.height / E.value * a, o = s.value.height / E.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: b(t.left.proportionToMax * s.value.leftChart.width),
height: o
},
right: {
...t.right,
y: l,
color: e.value.style.layout.bars.right.color,
x: s.value.rightChart.left,
width: b(t.right.proportionToMax * s.value.rightChart.width),
height: o
}
};
})), te = d(null);
function le(t) {
const [a, l, o, n] = t;
return { segment: a, index: l, left: o, right: n };
}
function vt(t, a) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: le(a), seriesIndex: t });
}
function ct(t, a) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: le(a), seriesIndex: t }), U.value = null, X.value = !1;
}
function yt(t, a) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: le(a), seriesIndex: t }), U.value = t, te.value = {
datapoint: a,
seriesIndex: t,
series: S.value,
config: e.value
};
const l = e.value.style.tooltip.customFormat;
if (zt(l) && Bt(() => l({
seriesIndex: t,
datapoint: {
segment: a[0],
index: a[1],
left: a[2],
right: a[3]
},
series: S.value,
config: e.value
})))
Y.value = l({
seriesIndex: t,
datapoint: {
segment: a[0],
index: a[1],
left: a[2],
right: a[3]
},
series: S.value,
config: e.value
});
else {
let o = "";
const n = S.value[t];
o += `<div><b>${n.segment}</b></div>`, o += `<div>${e.value.translations.age}: ${z(
e.value.style.layout.dataLabels.yAxis.formatter,
b(n.age),
B({ v: b(n.age) }),
{ datapoint: a, seriesIndex: t }
)}</div>`, o += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, o += '<div style="display:flex; flex-direction:row;gap:12px">', o += `<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_${A.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${z(
e.value.style.layout.dataLabels.xAxis.formatter,
b(n.left.value),
B({ v: b(n.left.value) }),
{ datapoint: a, seriesIndex: t }
)}</b></div></div>`, o += `<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_${A.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${z(
e.value.style.layout.dataLabels.xAxis.formatter,
b(n.right.value),
B({ v: b(n.right.value) }),
{ datapoint: a, seriesIndex: t }
)}</b></div></div>`, o += "</div>", o += `<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>${z(
e.value.style.layout.dataLabels.xAxis.formatter,
b(n.right.value) + b(n.left.value),
B({ v: b(n.right.value) + b(n.left.value) }),
{ datapoint: a, seriesIndex: t }
)}</b></div></div>`, o += "</div>", Y.value = `<div>${o}</div>`;
}
X.value = !0;
}
function oe(t = null) {
_t(() => {
const a = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = p.dataset.map((m) => [
m[0],
m[1],
m[2],
m[3],
m[2] ?? 0 + m[3] ?? 0
]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), n = Dt(o);
t ? t(n) : Ot({ csvContent: n, title: e.value.style.title.text || "vue-ui-heatmap" });
});
}
const V = h(() => {
const t = [
e.value.translations.year,
e.value.translations.age,
e.value.translations.female,
e.value.translations.male,
e.value.translations.total
], a = p.dataset.map((o) => [
o[0],
o[1],
o[2] == null ? "" : o[2].toLocaleString(),
o[3] == null ? "" : o[3].toLocaleString(),
(o[2] ?? 0 + o[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: a, config: l, colNames: t };
}), D = d(!1);
function _e(t) {
D.value = t, ce.value += 1;
}
function Le() {
x.value.showTable = !x.value.showTable;
}
function $e() {
x.value.showTooltip = !x.value.showTooltip;
}
const W = d(!1);
function ae() {
W.value = !W.value;
}
async function ht({ scale: t = 2 } = {}) {
if (!w.value) return;
const { width: a, height: l } = w.value.getBoundingClientRect(), o = a / l, { imageUri: n, base64: m } = await Wt({ domElement: w.value, base64: !0, img: !0, scale: t });
return {
imageUri: n,
base64: m,
title: e.value.style.title.text,
width: a,
height: l,
aspectRatio: o
};
}
const ft = d([]), gt = d({ start: 0, end: S.value.length });
Vt({
timeLabelsEls: q,
timeLabels: ft,
slicer: gt,
configRef: e,
rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
isAutoSize: !1,
width: st,
height: it,
targetClass: ".vue-ui-age-pyramid-x-axis-label",
rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
});
const N = h(() => {
const t = e.value.table.useDialog && !e.value.table.show, a = x.value.showTable;
return {
component: t ? Ze : Ye,
title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? `: ${e.value.style.title.subtitle.text}` : ""}`,
props: t ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: D.value,
fullscreenParent: w.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: a,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
},
head: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
}
}
}
};
});
j(() => x.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && P.value ? P.value.open() : "close" in P.value && P.value.close());
});
function Fe() {
x.value.showTable = !1, J.value && J.value.setTableIconState(!1);
}
const bt = h(() => e.value.style.backgroundColor), pt = h(() => e.value.style.title), { exportSvg: xt, getSvg: mt } = Nt({
svg: Z,
title: pt,
backgroundColor: bt
});
async function Se({ isCb: t }) {
if (t) {
const { blob: a, url: l, text: o, dataUrl: n } = await mt();
e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: n });
} else
xt();
}
return We({
getImage: ht,
generatePdf: we,
generateCsv: oe,
generateImage: Te,
generateSvg: Se,
toggleTable: Le,
toggleTooltip: $e,
toggleAnnotator: ae,
toggleFullscreen: _e
}), (t, a) => (i(), u("div", {
class: ze(`vue-data-ui-component vue-ui-age-pyramid ${D.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "agePyramid",
ref: w,
id: `vue-ui-age-pyramid_${A.value}`,
style: se(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
onMouseenter: a[1] || (a[1] = () => r(xe)(!0)),
onMouseleave: a[2] || (a[2] = () => r(xe)(!1))
}, [
e.value.userOptions.buttons.annotator ? (i(), R(r(Je), {
key: 0,
svgRef: r(Z),
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
active: W.value,
onClose: ae
}, {
"annotator-action-close": c(() => [
v(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": c(({ color: l }) => [
v(t.$slots, "annotator-action-color", C(k({ color: l })), void 0, !0)
]),
"annotator-action-draw": c(({ mode: l }) => [
v(t.$slots, "annotator-action-draw", C(k({ mode: l })), void 0, !0)
]),
"annotator-action-undo": c(({ disabled: l }) => [
v(t.$slots, "annotator-action-undo", C(k({ disabled: l })), void 0, !0)
]),
"annotator-action-redo": c(({ disabled: l }) => [
v(t.$slots, "annotator-action-redo", C(k({ disabled: l })), void 0, !0)
]),
"annotator-action-delete": c(({ disabled: l }) => [
v(t.$slots, "annotator-action-delete", C(k({ disabled: l })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
at.value ? (i(), u("div", {
key: 1,
ref_key: "noTitle",
ref: fe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : f("", !0),
e.value.style.title.text ? (i(), u("div", {
key: 2,
ref_key: "chartTitle",
ref: ye,
style: "width:100%;background:transparent"
}, [
(i(), R(jt, {
key: `title_${ge.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)) : f("", !0),
e.value.userOptions.show && ve.value && (r(me) || r(Q)) ? (i(), R(r(Ke), {
ref_key: "userOptionsRef",
ref: J,
key: `user_options_${ce.value}`,
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
isImaging: r(Ae),
isPrinting: r(ke),
uid: A.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,
hasSvg: e.value.userOptions.buttons.svg,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: D.value,
isTooltip: x.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: w.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: W.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: _e,
onGeneratePdf: r(we),
onGenerateCsv: oe,
onGenerateImage: r(Te),
onGenerateSvg: Se,
onToggleTable: Le,
onToggleTooltip: $e,
onToggleAnnotator: ae,
style: se({
visibility: r(me) ? r(Q) ? "visible" : "hidden" : "visible"
})
}, Be({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: c(({ isOpen: l, color: o }) => [
v(t.$slots, "menuIcon", C(k({ isOpen: l, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: c(() => [
v(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: c(() => [
v(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: c(() => [
v(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: c(() => [
v(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: c(() => [
v(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: c(() => [
v(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: c(({ toggleFullscreen: l, isFullscreen: o }) => [
v(t.$slots, "optionFullscreen", C(k({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: c(({ toggleAnnotator: l, isAnnotator: o }) => [
v(t.$slots, "optionAnnotator", C(k({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
(i(), u("svg", {
ref_key: "svgRef",
ref: Z,
xmlns: r(St),
class: ze({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
viewBox: `0 0 ${g.value.width <= 0 ? 10 : g.value.width} ${g.value.height <= 0 ? 10 : g.value.height}`,
style: se(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
}, [
ie(r(Qe)),
t.$slots["chart-background"] ? (i(), u("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"
}
}, [
v(t.$slots, "chart-background", {}, void 0, !0)
], 8, Jt)) : f("", !0),
y("defs", null, [
y("linearGradient", {
id: `age_pyramid_left_${A.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
y("stop", {
offset: "0%",
"stop-color": e.value.style.layout.bars.left.color
}, null, 8, Qt),
y("stop", {
offset: "100%",
"stop-color": r(ue)(r(Ee)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
}, null, 8, Zt)
], 8, Kt),
y("linearGradient", {
id: `age_pyramid_right_${A.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
y("stop", {
offset: "0%",
"stop-color": r(ue)(r(Ee)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
}, null, 8, tl),
y("stop", {
offset: "100%",
"stop-color": e.value.style.layout.bars.right.color
}, null, 8, ll)
], 8, el)
]),
(i(!0), u(F, null, O(S.value, (l, o) => (i(), u("g", null, [
y("rect", {
x: l.left.x,
y: l.left.y,
width: r(b)(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, ol),
y("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_${A.value})` : l.left.color,
rx: e.value.style.layout.bars.borderRadius
}, null, 8, al),
y("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, sl),
y("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_${A.value})` : l.right.color,
rx: e.value.style.layout.bars.borderRadius
}, null, 8, il)
]))), 256)),
y("g", null, [
e.value.style.layout.dataLabels.sideTitles.show ? (i(), u("g", rl, [
y("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"
}, T(e.value.translations.female), 9, ul),
y("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"
}, T(e.value.translations.male), 9, nl)
])) : f("", !0),
e.value.style.layout.dataLabels.yAxis.show ? (i(), u("g", dl, [
(i(!0), u(F, null, O(ut.value, (l, o) => (i(), u(F, null, [
o % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (i(), u("text", {
key: 0,
x: s.value.centerX,
y: s.value.top + s.value.height / E.value * o + 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"
}, T(r(z)(
e.value.style.layout.dataLabels.yAxis.formatter,
l,
r(B)({ v: l }),
{ datapoint: l, seriesIndex: o }
)), 9, vl)) : f("", !0)
], 64))), 256))
])) : f("", !0),
e.value.style.layout.dataLabels.xAxis.show ? (i(), u("g", cl, [
e.value.style.layout.grid.show ? (i(), u("g", yl, [
y("line", {
x1: L.value.right[0].x,
x2: L.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, hl),
y("line", {
x1: L.value.left[0].x,
x2: L.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, fl)
])) : f("", !0),
(i(!0), u(F, null, O(L.value.right, (l, o) => (i(), u("g", null, [
e.value.style.layout.grid.show ? (i(), u("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, gl)) : f("", !0)
]))), 256)),
(i(!0), u(F, null, O(L.value.left, (l, o) => (i(), u("g", null, [
e.value.style.layout.grid.show ? (i(), u("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, bl)) : f("", !0)
]))), 256)),
y("g", {
ref_key: "xAxisLabels",
ref: q
}, [
(i(!0), u(F, null, O(L.value.right, (l, o) => (i(), u("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})`
}, T(r(z)(
e.value.style.layout.dataLabels.xAxis.formatter,
l.value / e.value.style.layout.dataLabels.xAxis.scale,
r(B)({
v: l.value / e.value.style.layout.dataLabels.xAxis.scale
}),
{ datapoint: l, seriesIndex: o }
)), 9, pl))), 256)),
(i(!0), u(F, null, O(L.value.left, (l, o) => (i(), u("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})`
}, T(r(z)(
e.value.style.layout.dataLabels.xAxis.formatter,
l.value / e.value.style.layout.dataLabels.xAxis.scale,
r(B)({
v: l.value / e.value.style.layout.dataLabels.xAxis.scale
}),
{ datapoint: l, seriesIndex: o }
)), 9, xl))), 256))
], 512),
y("text", {
x: s.value.right,
y: g.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"
}, T(e.value.style.layout.dataLabels.xAxis.translation), 9, ml)
])) : f("", !0)
]),
(i(!0), u(F, null, O(de.dataset, (l, o) => (i(), u("g", null, [
y("rect", {
x: s.value.left,
y: s.value.top + s.value.height / E.value * o - e.value.style.layout.bars.gap / 2,
width: s.value.width <= 0 ? 1e-4 : s.value.width,
height: s.value.height / E.value <= 0 ? 1e-4 : s.value.height / E.value,
fill: U.value !== null && U.value === o ? r(ue)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
onMouseover: (n) => yt(o, l),
onMouseleave: (n) => ct(o, l),
onClick: (n) => vt(o, l)
}, null, 40, Cl)
]))), 256)),
v(t.$slots, "svg", { svg: g.value }, void 0, !0)
], 14, qt)),
t.$slots.watermark ? (i(), u("div", kl, [
v(t.$slots, "watermark", C(k({ isPrinting: r(ke) || r(Ae) })), void 0, !0)
])) : f("", !0),
v(t.$slots, "legend", { legend: S.value }, void 0, !0),
t.$slots.source ? (i(), u("div", {
key: 5,
ref_key: "source",
ref: he,
dir: "auto"
}, [
v(t.$slots, "source", {}, void 0, !0)
], 512)) : f("", !0),
ie(r(je), {
show: x.value.showTooltip && X.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: w.value,
content: Y.value,
isFullscreen: D.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,
smoothForce: e.value.style.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
}, {
"tooltip-before": c(() => [
v(t.$slots, "tooltip-before", C(k({ ...te.value })), void 0, !0)
]),
"tooltip-after": c(() => [
v(t.$slots, "tooltip-after", C(k({ ...te.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
ve.value && e.value.userOptions.buttons.table ? (i(), R(wt(N.value.component), Tt({ key: 6 }, N.value.props, {
ref_key: "tableUnit",
ref: P,
onClose: Fe
}), Be({
content: c(() => [
(i(), R(r(qe), {
key: `table_${be.value}`,
colNames: V.value.colNames,
head: V.value.head,
body: V.value.body,
config: V.value.config,
title: e.value.table.useDialog ? "" : N.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Fe
}, {
th: c(({ th: l }) => [
re(T(l), 1)
]),
td: c(({ td: l }) => [
re(T(l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: c(() => [
re(T(N.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: c(() => [
y("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: a[0] || (a[0] = (l) => oe(e.value.userOptions.callbacks.csv))
}, [
ie(r(Xe), {
name: "excel",
stroke: N.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : f("", !0),
r(pe) ? (i(), R(Pt, { key: 7 })) : f("", !0)
], 46, Yt));
}
}, wl = /* @__PURE__ */ Xt(Al, [["__scopeId", "data-v-ef1314b3"]]), Nl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: wl
}, Symbol.toStringTag, { value: "Module" }));
export {
Ml as a,
Nl as b,
wl as v
};