vue-data-ui 3.10.0 → 3.10.2

package/dist/{vue-ui-age-pyramid-KApqwR11.js → vue-ui-age-pyramid-DKlTGZ6m.js}

@@ -1,38 +1,42 @@
-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-BCt4DMkT.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-B5L2jweB.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 = {
+import { defineAsyncComponent as $, computed as h, ref as d, toRefs as kt, watch as j, shallowRef as De, onMounted as wt, onBeforeUnmount as Oe, watchEffect as Tt, 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 m, guardReactiveProps as A, createSlots as Be, createElementVNode as y, Fragment as F, renderList as O, toDisplayString as T, resolveDynamicComponent as _t, mergeProps as Lt, createTextVNode as re, nextTick as $t } from "vue";
+import { c as Ft, t as St, o as Ie, g as Dt, U as b, X as Ot, s as ue, h as Ee, a as z, d as B, v as zt, r as Bt, y as It, _ as Et } from "./lib-CVHM9FhP.js";
+import { t as Re, u as Rt } from "./useResponsive-DfdjqQps.js";
+import { u as Pt, a as ne } from "./useNestedProp-Ckf_2P_V.js";
+import { u as Mt, B as Nt } from "./BaseScanner-BMpwQAfz.js";
+import { u as Ut } from "./usePrinter-1NmjuP-i.js";
+import { u as Gt } from "./useSvgExport-ByUukOZt.js";
+import { u as Ht } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as Vt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Wt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as jt } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Xt from "./img-6fNF_rG0.js";
+import Yt from "./Title-NgeRXqRA.js";
+import { _ as qt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Pe = { userOptions: { show: !1 }, style: { layout: { bars: { gradient: { show: !1 } } } } }, Me = { userOptions: { show: !1 }, style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { bars: { gradient: { show: !1 } }, 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: "#3A3A3A" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Ne = { 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" } } }, Ue = { 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" } } }, Ge = { 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" } } }, He = { 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" } } }, Ve = { 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" } } }, We = { 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" } } }, je = {
   default: {},
-  dark: Pe,
-  celebration: Me,
-  celebrationNight: Ne,
-  hack: Ue,
-  zen: Ge,
-  concrete: He
-}, Ml = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  minimal: Pe,
+  minimalDark: Me,
+  dark: Ne,
+  celebration: Ue,
+  celebrationNight: Ge,
+  hack: He,
+  zen: Ve,
+  concrete: We
+}, Ul = /* @__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 = {
+  celebration: Ue,
+  celebrationNight: Ge,
+  concrete: We,
+  dark: Ne,
+  default: je,
+  hack: He,
+  minimal: Pe,
+  minimalDark: Me,
+  zen: Ve
+}, Symbol.toStringTag, { value: "Module" })), Jt = ["id"], Kt = ["xmlns", "viewBox"], Qt = ["x", "y", "width", "height"], Zt = ["id"], el = ["stop-color"], tl = ["stop-color"], ll = ["id"], ol = ["stop-color"], al = ["stop-color"], sl = ["x", "y", "width", "height", "fill", "rx"], il = ["x", "y", "width", "height", "fill", "rx"], rl = ["x", "y", "width", "height", "fill", "rx"], ul = ["x", "y", "width", "height", "fill", "rx"], nl = { key: 0 }, dl = ["x", "y", "fill", "font-size", "font-weight"], vl = ["x", "y", "fill", "font-size", "font-weight"], cl = { key: 1 }, yl = ["x", "y", "font-size", "fill", "font-weight"], hl = { key: 2 }, fl = { key: 0 }, gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], bl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Cl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], xl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], ml = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Al = ["x", "y", "font-size", "fill", "font-weight"], kl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], wl = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Al = {
+}, Tl = {
   __name: "vue-ui-age-pyramid",
   props: {
     config: {
@@ -48,9 +52,9 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
       }
     }
   },
-  setup(de, { expose: We }) {
-    const je = $(() => import("./Tooltip-DpfUZbt7.js")), Xe = $(() => import("./BaseIcon-B9bGT7HU.js")), Ye = $(() => import("./vue-ui-accordion-CAXPDm31.js")), qe = $(() => import("./DataTable-DEwh__D8.js")), Je = $(() => import("./PenAndPaper-CulSakut.js")), Ke = $(() => import("./UserOptions-5pXc4J-c.js")), Qe = $(() => import("./PackageVersion-C-JOGZBL.js")), Ze = $(() => import("./BaseDraggableDialog-O2XSymlZ.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),
+  setup(de, { expose: Xe }) {
+    const Ye = $(() => import("./Tooltip-B6qvABDL.js")), qe = $(() => import("./BaseIcon-4uOct8re.js")), Je = $(() => import("./vue-ui-accordion-DFKaB_05.js")), Ke = $(() => import("./DataTable-DyoDzNNY.js")), Qe = $(() => import("./PenAndPaper-LTuSTmWE.js")), Ze = $(() => import("./UserOptions-CX7Xsusk.js")), et = $(() => import("./PackageVersion-CQxJyGQr.js")), tt = $(() => import("./BaseDraggableDialog-BQYfVNu8.js")), { vue_ui_age_pyramid: lt } = Pt(), { isThemeValid: ot, warnInvalidTheme: at } = Ht(), p = de, ve = h(() => !!p.dataset && p.dataset.length), k = d(Ft()), 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 } = Mt({
+      ...kt(p),
       FINAL_CONFIG: e,
       prepareConfig: ee,
       skeletonDataset: [
@@ -65,7 +69,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         ["_", 1, 89, 89],
         ["_", 0, 144, 144]
       ],
-      skeletonConfig: $t({
+      skeletonConfig: St({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -98,17 +102,17 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
           }
         }
       })
-    }), { userOptionsVisible: Q, setUserOptionsVisibility: xe, keepUserOptionState: me } = Gt({ config: e.value }), { svgRef: Z } = Ht({ config: e.value.style.title });
+    }), { userOptionsVisible: Q, setUserOptionsVisibility: Ce, keepUserOptionState: xe } = Vt({ config: e.value }), { svgRef: Z } = Wt({ config: e.value.style.title });
     function ee() {
       const t = ne({
         userConfig: p.config,
-        defaultConfig: et
+        defaultConfig: lt
       }), a = t.theme;
       if (!a) return t;
-      if (!tt.value(t))
-        return lt(t), t;
+      if (!ot.value(t))
+        return at(t), t;
       const l = ne({
-        userConfig: Ve[a] || p.config,
+        userConfig: je[a] || p.config,
         defaultConfig: t
       });
       return ne({
@@ -117,23 +121,23 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
       });
     }
     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;
+      pe.value || (e.value = ee()), Q.value = !e.value.userOptions.showOnChartHover, me(), ge.value += 1, be.value += 1, C.value.showTable = e.value.table.show, C.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();
+    wt(() => {
+      me();
     });
-    const ot = h(() => !!e.value.debug);
-    function Ce() {
-      if (Ie(p.dataset) && (Ft({
+    const st = h(() => !!e.value.debug);
+    function me() {
+      if (Ie(p.dataset) && (Dt({
         componentName: "VueUiAgePyramid",
         type: "dataset",
-        debug: ot.value
+        debug: st.value
       }), K.value = !0), Ie(p.dataset) || (K.value = e.value.loading), e.value.responsive) {
         const t = Re(() => {
-          const { width: a, height: l } = It({
+          const { width: a, height: l } = Rt({
             chart: w.value,
             title: e.value.style.title.text ? ye.value : null,
             source: he.value,
@@ -149,16 +153,16 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
     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}`,
+    const { isPrinting: Ae, isImaging: ke, generatePdf: we, generateImage: Te } = Ut({
+      elementId: `vue-ui-age-pyramid_${k.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({
+    }), it = h(() => e.value.userOptions.show && !e.value.style.title.text), C = d({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
     });
     j(e, () => {
-      x.value = {
+      C.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.tooltip.show
       };
@@ -166,14 +170,14 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
     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) => {
+    }), rt = h(() => g.value.width), ut = h(() => g.value.height), H = d(0), nt = Re((t) => {
       H.value = t;
     }, 100);
-    At((t) => {
+    Tt((t) => {
       const a = q.value;
       if (!a) return;
       const l = new ResizeObserver((o) => {
-        rt(o[0].contentRect.height);
+        nt(o[0].contentRect.height);
       });
       l.observe(a), t(() => l.disconnect());
     }), Oe(() => {
@@ -198,16 +202,16 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
           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 = [];
+    }), dt = h(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), L = h(() => {
+      const t = vt(M.value / 5), a = [], l = [];
       for (let o = 0; o <= 5; o += 1) {
-        const n = t * o, m = t * (o - 5);
+        const n = t * o, x = 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
+          value: Math.abs(x),
+          x: s.value.left + s.value.width / 2 + x / M.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
         });
       }
       return {
@@ -215,13 +219,13 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         left: l
       };
     });
-    function nt(t) {
+    function vt(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) => ({
+    const M = h(() => Math.max(...G.value.flatMap((t) => t.slice(-2).map((a) => b(a))))), E = h(() => G.value.length), ct = h(() => G.value.map((t) => ({
       segment: t[0],
       age: t[1],
       left: {
@@ -232,7 +236,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         value: t[3],
         proportionToMax: t[3] / M.value
       }
-    }))), S = h(() => dt.value.map((t, a) => {
+    }))), S = h(() => ct.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,
@@ -259,13 +263,13 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
       const [a, l, o, n] = t;
       return { segment: a, index: l, left: o, right: n };
     }
-    function vt(t, a) {
+    function yt(t, a) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: le(a), seriesIndex: t });
     }
-    function ct(t, a) {
+    function ht(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) {
+    function ft(t, a) {
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: le(a), seriesIndex: t }), U.value = t, te.value = {
         datapoint: a,
         seriesIndex: t,
@@ -273,7 +277,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         config: e.value
       };
       const l = e.value.style.tooltip.customFormat;
-      if (zt(l) && Bt(() => l({
+      if (It(l) && Et(() => l({
         seriesIndex: t,
         datapoint: {
           segment: a[0],
@@ -303,12 +307,12 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
           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(
+        )}</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_${k.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(
+        )}</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_${k.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) }),
@@ -323,15 +327,15 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
       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" });
+      $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((x) => [
+          x[0],
+          x[1],
+          x[2],
+          x[3],
+          x[2] ?? 0 + x[3] ?? 0
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), n = zt(o);
+        t ? t(n) : Bt({ csvContent: n, title: e.value.style.title.text || "vue-ui-heatmap" });
       });
     }
     const V = h(() => {
@@ -366,45 +370,45 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
       D.value = t, ce.value += 1;
     }
     function Le() {
-      x.value.showTable = !x.value.showTable;
+      C.value.showTable = !C.value.showTable;
     }
     function $e() {
-      x.value.showTooltip = !x.value.showTooltip;
+      C.value.showTooltip = !C.value.showTooltip;
     }
     const W = d(!1);
     function ae() {
       W.value = !W.value;
     }
-    async function ht({ scale: t = 2 } = {}) {
+    async function gt({ 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 });
+      const { width: a, height: l } = w.value.getBoundingClientRect(), o = a / l, { imageUri: n, base64: x } = await Xt({ domElement: w.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: n,
-        base64: m,
+        base64: x,
         title: e.value.style.title.text,
         width: a,
         height: l,
         aspectRatio: o
       };
     }
-    const ft = d([]), gt = d({ start: 0, end: S.value.length });
-    Vt({
+    const bt = d([]), pt = d({ start: 0, end: S.value.length });
+    jt({
       timeLabelsEls: q,
-      timeLabels: ft,
-      slicer: gt,
+      timeLabels: bt,
+      slicer: pt,
       configRef: e,
       rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
       autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
       isAutoSize: !1,
-      width: st,
-      height: it,
+      width: rt,
+      height: ut,
       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;
+      const t = e.value.table.useDialog && !e.value.table.show, a = C.value.showTable;
       return {
-        component: t ? Ze : Ye,
+        component: t ? tt : Je,
         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,
@@ -431,26 +435,26 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         }
       };
     });
-    j(() => x.value.showTable, (t) => {
+    j(() => C.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);
+      C.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({
+    const Ct = h(() => e.value.style.backgroundColor), xt = h(() => e.value.style.title), { exportSvg: mt, getSvg: At } = Gt({
       svg: Z,
-      title: pt,
-      backgroundColor: bt
+      title: xt,
+      backgroundColor: Ct
     });
     async function Se({ isCb: t }) {
       if (t) {
-        const { blob: a, url: l, text: o, dataUrl: n } = await mt();
+        const { blob: a, url: l, text: o, dataUrl: n } = await At();
         e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: n });
       } else
-        xt();
+        mt();
     }
-    return We({
-      getImage: ht,
+    return Xe({
+      getImage: gt,
       generatePdf: we,
       generateCsv: oe,
       generateImage: Te,
@@ -463,12 +467,12 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
       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}`,
+      id: `vue-ui-age-pyramid_${k.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))
+      onMouseenter: a[1] || (a[1] = () => r(Ce)(!0)),
+      onMouseleave: a[2] || (a[2] = () => r(Ce)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (i(), R(r(Je), {
+      e.value.userOptions.buttons.annotator ? (i(), R(r(Qe), {
         key: 0,
         svgRef: r(Z),
         backgroundColor: e.value.style.backgroundColor,
@@ -480,23 +484,23 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
           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)
+          v(t.$slots, "annotator-action-color", m(A({ color: l })), void 0, !0)
         ]),
         "annotator-action-draw": c(({ mode: l }) => [
-          v(t.$slots, "annotator-action-draw", C(k({ mode: l })), void 0, !0)
+          v(t.$slots, "annotator-action-draw", m(A({ mode: l })), void 0, !0)
         ]),
         "annotator-action-undo": c(({ disabled: l }) => [
-          v(t.$slots, "annotator-action-undo", C(k({ disabled: l })), void 0, !0)
+          v(t.$slots, "annotator-action-undo", m(A({ disabled: l })), void 0, !0)
         ]),
         "annotator-action-redo": c(({ disabled: l }) => [
-          v(t.$slots, "annotator-action-redo", C(k({ disabled: l })), void 0, !0)
+          v(t.$slots, "annotator-action-redo", m(A({ disabled: l })), void 0, !0)
         ]),
         "annotator-action-delete": c(({ disabled: l }) => [
-          v(t.$slots, "annotator-action-delete", C(k({ disabled: l })), void 0, !0)
+          v(t.$slots, "annotator-action-delete", m(A({ disabled: l })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
-      at.value ? (i(), u("div", {
+      it.value ? (i(), u("div", {
         key: 1,
         ref_key: "noTitle",
         ref: fe,
@@ -509,7 +513,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         ref: ye,
         style: "width:100%;background:transparent"
       }, [
-        (i(), R(jt, {
+        (i(), R(Yt, {
           key: `title_${ge.value}`,
           config: {
             title: {
@@ -523,15 +527,15 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
           }
         }, null, 8, ["config"]))
       ], 512)) : f("", !0),
-      e.value.userOptions.show && ve.value && (r(me) || r(Q)) ? (i(), R(r(Ke), {
+      e.value.userOptions.show && ve.value && (r(xe) || r(Q)) ? (i(), R(r(Ze), {
         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,
+        isImaging: r(ke),
+        isPrinting: r(Ae),
+        uid: k.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
@@ -540,7 +544,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: D.value,
-        isTooltip: x.value.showTooltip,
+        isTooltip: C.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: w.value,
         position: e.value.userOptions.position,
@@ -558,13 +562,13 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         onToggleTooltip: $e,
         onToggleAnnotator: ae,
         style: se({
-          visibility: r(me) ? r(Q) ? "visible" : "hidden" : "visible"
+          visibility: r(xe) ? 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)
+            v(t.$slots, "menuIcon", m(A({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -613,14 +617,14 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: c(({ toggleFullscreen: l, isFullscreen: o }) => [
-            v(t.$slots, "optionFullscreen", C(k({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+            v(t.$slots, "optionFullscreen", m(A({ 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)
+            v(t.$slots, "optionAnnotator", m(A({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0
@@ -628,12 +632,12 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
       (i(), u("svg", {
         ref_key: "svgRef",
         ref: Z,
-        xmlns: r(St),
+        xmlns: r(Ot),
         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)),
+        ie(r(et)),
         t.$slots["chart-background"] ? (i(), u("foreignObject", {
           key: 0,
           x: s.value.left,
@@ -645,10 +649,10 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
           }
         }, [
           v(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Jt)) : f("", !0),
+        ], 8, Qt)) : f("", !0),
         y("defs", null, [
           y("linearGradient", {
-            id: `age_pyramid_left_${A.value}`,
+            id: `age_pyramid_left_${k.value}`,
             x1: "0%",
             y1: "0%",
             x2: "100%",
@@ -657,14 +661,14 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
             y("stop", {
               offset: "0%",
               "stop-color": e.value.style.layout.bars.left.color
-            }, null, 8, Qt),
+            }, null, 8, el),
             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),
+            }, null, 8, tl)
+          ], 8, Zt),
           y("linearGradient", {
-            id: `age_pyramid_right_${A.value}`,
+            id: `age_pyramid_right_${k.value}`,
             x1: "0%",
             y1: "0%",
             x2: "100%",
@@ -673,12 +677,12 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
             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),
+            }, null, 8, ol),
             y("stop", {
               offset: "100%",
               "stop-color": e.value.style.layout.bars.right.color
-            }, null, 8, ll)
-          ], 8, el)
+            }, null, 8, al)
+          ], 8, ll)
         ]),
         (i(!0), u(F, null, O(S.value, (l, o) => (i(), u("g", null, [
           y("rect", {
@@ -688,15 +692,15 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
             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),
+          }, null, 8, sl),
           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,
+            fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${k.value})` : l.left.color,
             rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, al),
+          }, null, 8, il),
           y("rect", {
             x: l.right.x,
             y: l.right.y,
@@ -704,18 +708,18 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
             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),
+          }, null, 8, rl),
           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,
+            fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${k.value})` : l.right.color,
             rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, il)
+          }, null, 8, ul)
         ]))), 256)),
         y("g", null, [
-          e.value.style.layout.dataLabels.sideTitles.show ? (i(), u("g", rl, [
+          e.value.style.layout.dataLabels.sideTitles.show ? (i(), u("g", nl, [
             y("text", {
               x: s.value.left,
               y: e.value.style.layout.dataLabels.sideTitles.fontSize,
@@ -723,7 +727,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
               "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),
+            }, T(e.value.translations.female), 9, dl),
             y("text", {
               x: s.value.right,
               y: e.value.style.layout.dataLabels.sideTitles.fontSize,
@@ -731,10 +735,10 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
               "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)
+            }, T(e.value.translations.male), 9, vl)
           ])) : 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, [
+          e.value.style.layout.dataLabels.yAxis.show ? (i(), u("g", cl, [
+            (i(!0), u(F, null, O(dt.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,
@@ -748,11 +752,11 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
                 l,
                 r(B)({ v: l }),
                 { datapoint: l, seriesIndex: o }
-              )), 9, vl)) : f("", !0)
+              )), 9, yl)) : 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, [
+          e.value.style.layout.dataLabels.xAxis.show ? (i(), u("g", hl, [
+            e.value.style.layout.grid.show ? (i(), u("g", fl, [
               y("line", {
                 x1: L.value.right[0].x,
                 x2: L.value.right.at(-1).x,
@@ -761,7 +765,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, hl),
+              }, null, 8, gl),
               y("line", {
                 x1: L.value.left[0].x,
                 x2: L.value.left.at(-1).x,
@@ -770,7 +774,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, fl)
+              }, null, 8, bl)
             ])) : 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", {
@@ -782,7 +786,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, gl)) : f("", !0)
+              }, null, 8, pl)) : 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", {
@@ -794,7 +798,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, bl)) : f("", !0)
+              }, null, 8, Cl)) : f("", !0)
             ]))), 256)),
             y("g", {
               ref_key: "xAxisLabels",
@@ -814,7 +818,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
                   v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                 }),
                 { datapoint: l, seriesIndex: o }
-              )), 9, pl))), 256)),
+              )), 9, xl))), 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,
@@ -829,7 +833,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
                   v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                 }),
                 { datapoint: l, seriesIndex: o }
-              )), 9, xl))), 256))
+              )), 9, ml))), 256))
             ], 512),
             y("text", {
               x: s.value.right,
@@ -838,7 +842,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
               "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)
+            }, T(e.value.style.layout.dataLabels.xAxis.translation), 9, Al)
           ])) : f("", !0)
         ]),
         (i(!0), u(F, null, O(de.dataset, (l, o) => (i(), u("g", null, [
@@ -848,15 +852,15 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
             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)
+            onMouseover: (n) => ft(o, l),
+            onMouseleave: (n) => ht(o, l),
+            onClick: (n) => yt(o, l)
+          }, null, 40, kl)
         ]))), 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)
+      ], 14, Kt)),
+      t.$slots.watermark ? (i(), u("div", wl, [
+        v(t.$slots, "watermark", m(A({ isPrinting: r(Ae) || r(ke) })), void 0, !0)
       ])) : f("", !0),
       v(t.$slots, "legend", { legend: S.value }, void 0, !0),
       t.$slots.source ? (i(), u("div", {
@@ -867,9 +871,9 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
       }, [
         v(t.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      ie(r(je), {
+      ie(r(Ye), {
         teleportTo: e.value.style.tooltip.teleportTo,
-        show: x.value.showTooltip && X.value,
+        show: C.value.showTooltip && X.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
         color: e.value.style.tooltip.color,
         borderRadius: e.value.style.tooltip.borderRadius,
@@ -889,20 +893,20 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
         smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
       }, {
         "tooltip-before": c(() => [
-          v(t.$slots, "tooltip-before", C(k({ ...te.value })), void 0, !0)
+          v(t.$slots, "tooltip-before", m(A({ ...te.value })), void 0, !0)
         ]),
         "tooltip-after": c(() => [
-          v(t.$slots, "tooltip-after", C(k({ ...te.value })), void 0, !0)
+          v(t.$slots, "tooltip-after", m(A({ ...te.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "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, {
+      ve.value && e.value.userOptions.buttons.table ? (i(), R(_t(N.value.component), Lt({ key: 6 }, N.value.props, {
         ref_key: "tableUnit",
         ref: P,
         onClose: Fe
       }), Be({
         content: c(() => [
-          (i(), R(r(qe), {
+          (i(), R(r(Ke), {
             key: `table_${be.value}`,
             colNames: V.value.colNames,
             head: V.value.head,
@@ -938,7 +942,7 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
               class: "vue-ui-user-options-button",
               onClick: a[0] || (a[0] = (l) => oe(e.value.userOptions.callbacks.csv))
             }, [
-              ie(r(Xe), {
+              ie(r(qe), {
                 name: "excel",
                 stroke: N.value.props.color
               }, null, 8, ["stroke"])
@@ -947,15 +951,15 @@ const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gr
           key: "1"
         } : void 0
       ]), 1040)) : f("", !0),
-      r(pe) ? (i(), R(Pt, { key: 7 })) : f("", !0)
-    ], 46, Yt));
+      r(pe) ? (i(), R(Nt, { key: 7 })) : f("", !0)
+    ], 46, Jt));
   }
-}, wl = /* @__PURE__ */ Xt(Al, [["__scopeId", "data-v-6f806e68"]]), Nl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, _l = /* @__PURE__ */ qt(Tl, [["__scopeId", "data-v-6f806e68"]]), Gl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: wl
+  default: _l
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Ml as a,
-  Nl as b,
-  wl as v
+  Ul as a,
+  Gl as b,
+  _l as v
 };