vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-age-pyramid-CuYRf5v-.js

@@ -1,997 +0,0 @@
-import { defineAsyncComponent as S, computed as h, ref as v, toRefs as At, watch as q, shallowRef as Re, onMounted as Tt, onBeforeUnmount as De, watchEffect as $t, openBlock as i, createElementBlock as n, unref as u, normalizeStyle as K, normalizeClass as Me, createBlock as M, withCtx as y, renderSlot as d, normalizeProps as x, guardReactiveProps as w, createCommentVNode as f, createSlots as Ne, createVNode as de, createElementVNode as c, Fragment as O, renderList as I, toDisplayString as $, resolveDynamicComponent as Lt, mergeProps as _t, createTextVNode as ye, nextTick as Be } from "vue";
-import { j as St, t as Ee, o as Ue, q as Ot, K as p, X as zt, u as ce, v as Ge, k as P, l as F, a0 as It, a1 as Pt, T as Ft, U as Rt } from "./lib-GwPnJSrY.js";
-import { t as Ve, u as Dt } from "./useResponsive-DfdjqQps.js";
-import { u as Mt } from "./useConfig-CIgyKZ6R.js";
-import { u as Nt, B as Bt } from "./BaseScanner-BhhkKVoj.js";
-import { u as Et } from "./usePrinter-DiK5R6k-.js";
-import { u as Ut } from "./useSvgExport-ByUukOZt.js";
-import { u as he } from "./useNestedProp-BBT0mbHh.js";
-import { u as Gt } from "./useThemeCheck-D1ZYXUwG.js";
-import { u as Vt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Ht } from "./useChartAccessibility-9icAAmYg.js";
-import { u as Wt } from "./useTimeLabelCollider-CIsgDrl9.js";
-import Xt from "./img-BYYzY_QU.js";
-import jt from "./Title-BfyrP-jp.js";
-import Yt from "./vue_ui_age_pyramid-8H8WSL7J.js";
-import { _ as qt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Kt = ["id"], Jt = ["xmlns", "viewBox"], Qt = ["x", "y", "width", "height"], Zt = ["id"], el = ["stop-color"], tl = ["stop-color"], ll = ["id"], al = ["stop-color"], ol = ["stop-color"], sl = ["x", "y", "width", "height", "fill", "rx"], il = ["x", "y", "width", "height", "fill", "rx"], ul = ["x", "y", "width", "height", "fill", "rx"], nl = ["x", "y", "width", "height", "fill", "rx"], rl = { key: 0 }, vl = ["x", "y", "fill", "font-size", "font-weight"], dl = ["x", "y", "fill", "font-size", "font-weight"], yl = { key: 1 }, cl = ["x", "y", "font-size", "fill", "font-weight"], hl = { key: 2 }, fl = { key: 0 }, gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], bl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ml = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], xl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], wl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], kl = ["x", "y", "font-size", "fill", "font-weight"], Cl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], Al = {
-  key: 4,
-  class: "vue-data-ui-watermark"
-}, Tl = {
-  __name: "vue-ui-age-pyramid",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["copyAlt"],
-  setup(fe, { expose: He, emit: We }) {
-    const Xe = S(() => import("./Tooltip-DL3QgjZf.js")), je = S(() => import("./BaseIcon-CNx8Tzl5.js")), Ye = S(() => import("./vue-ui-accordion-BGHTqIBt.js")), qe = S(() => import("./DataTable-Bo1pmAqG.js")), Ke = S(() => import("./PenAndPaper-DWV1FMIi.js")), Je = S(() => import("./UserOptions-CrLqEimB.js")), Qe = S(() => import("./PackageVersion-DN9d0ME5.js")), Ze = S(() => import("./BaseDraggableDialog-DSpKTn3R.js")), { vue_ui_age_pyramid: et } = Mt(), { isThemeValid: tt, warnInvalidTheme: lt } = Gt(), b = fe, at = We, ge = h(() => !!b.dataset && b.dataset.length), C = v(St()), J = v(!1), Q = v(""), G = v(null), pe = v(0), A = v(null), be = v(null), me = v(null), xe = v(null), we = v(0), ke = v(0), Z = v(null), N = v(null), ee = v(null), V = v(!1), H = v(!1), e = v(oe()), B = h(() => e.value.userOptions.useCursorPointer), ot = h(() => Ee({
-      defaultConfig: {
-        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"
-            }
-          }
-        }
-      },
-      userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: Ce, FINAL_DATASET: W, manualLoading: te } = Nt({
-      ...At(b),
-      FINAL_CONFIG: e,
-      prepareConfig: oe,
-      skeletonDataset: b.config?.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: Ee({
-        defaultConfig: e.value,
-        userConfig: ot.value
-      })
-    }), { userOptionsVisible: le, setUserOptionsVisibility: Ae, keepUserOptionState: Te } = Vt({ config: e.value }), { svgRef: ae } = Ht({ config: e.value.style.title });
-    function oe() {
-      const t = he({
-        userConfig: b.config,
-        defaultConfig: et
-      }), o = t.theme;
-      if (!o) return t;
-      if (!tt.value(t))
-        return lt(t), t;
-      const l = he({
-        userConfig: Yt[o] || b.config,
-        defaultConfig: t
-      });
-      return he({
-        userConfig: b.config,
-        defaultConfig: l
-      });
-    }
-    q(() => b.config, (t) => {
-      Ce.value || (e.value = oe()), le.value = !e.value.userOptions.showOnChartHover, $e(), we.value += 1, ke.value += 1, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.tooltip.show;
-    }, { deep: !0 }), q(() => b.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (te.value = !1);
-    }, { deep: !0 });
-    const L = Re(null), R = Re(null);
-    Tt(() => {
-      $e();
-    });
-    const st = h(() => !!e.value.debug);
-    function $e() {
-      if (Ue(b.dataset) && (Ot({
-        componentName: "VueUiAgePyramid",
-        type: "dataset",
-        debug: st.value
-      }), te.value = !0), Ue(b.dataset) || (te.value = e.value.loading), e.value.responsive) {
-        const t = Ve(() => {
-          const { width: o, height: l } = Dt({
-            chart: A.value,
-            title: e.value.style.title.text ? be.value : null,
-            source: me.value,
-            noTitle: xe.value
-          });
-          requestAnimationFrame(() => {
-            g.value.width = o, g.value.height = l;
-          });
-        });
-        L.value && (R.value && L.value.unobserve(R.value), L.value.disconnect()), L.value = new ResizeObserver(t), R.value = A.value.parentNode, L.value.observe(R.value);
-      }
-    }
-    De(() => {
-      L.value && (R.value && L.value.unobserve(R.value), L.value.disconnect());
-    });
-    const { isPrinting: se, isImaging: ie, generatePdf: Le, generateImage: _e } = Et({
-      elementId: `vue-ui-age-pyramid_${C.value}`,
-      fileName: e.value.style.title.text || "vue-ui-age-pyramid",
-      options: e.value.userOptions.print
-    }), it = h(() => e.value.userOptions.show && !e.value.style.title.text), m = v({
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.tooltip.show
-    });
-    q(e, () => {
-      m.value = {
-        showTable: e.value.table.show,
-        showTooltip: e.value.style.tooltip.show
-      };
-    }, { immediate: !0 });
-    const g = v({
-      height: e.value.style.height,
-      width: e.value.style.width
-    }), ut = h(() => g.value.width), nt = h(() => g.value.height), X = v(0), rt = Ve((t) => {
-      X.value = t;
-    }, 100);
-    $t((t) => {
-      const o = Z.value;
-      if (!o) return;
-      const l = new ResizeObserver((a) => {
-        rt(a[0].contentRect.height);
-      });
-      l.observe(o), t(() => l.disconnect());
-    }), De(() => {
-      X.value = 0;
-    });
-    const s = h(() => {
-      const t = g.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, o = 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: o,
-        right: l,
-        bottom: g.value.height - e.value.style.layout.padding.bottom - X.value,
-        width: t,
-        height: g.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - X.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
-        }
-      };
-    }), vt = h(() => W.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), _ = h(() => {
-      const t = dt(E.value / 5), o = [], l = [];
-      for (let a = 0; a <= 5; a += 1) {
-        const r = t * a, k = 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(k),
-          x: s.value.left + s.value.width / 2 + k / E.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
-        });
-      }
-      return {
-        right: o,
-        left: l
-      };
-    });
-    function dt(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 = h(() => Math.max(...W.value.flatMap((t) => t.slice(-2).map((o) => p(o))))), D = h(() => W.value.length), yt = h(() => W.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 = h(() => yt.value.map((t, o) => {
-      const l = s.value.top + s.value.height / D.value * o, a = s.value.height / D.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: p(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: p(t.right.proportionToMax * s.value.rightChart.width),
-          height: a
-        }
-      };
-    })), ue = v(null);
-    function ne(t) {
-      const [o, l, a, r] = t;
-      return { segment: o, index: l, left: a, right: r };
-    }
-    function ct(t, o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: ne(o), seriesIndex: t });
-    }
-    function ht(t, o) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: ne(o), seriesIndex: t }), G.value = null, J.value = !1;
-    }
-    function ft(t, o) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: ne(o), seriesIndex: t }), G.value = t, ue.value = {
-        datapoint: o,
-        seriesIndex: t,
-        series: T.value,
-        config: e.value
-      };
-      const l = e.value.style.tooltip.customFormat;
-      if (Ft(l) && Rt(() => l({
-        seriesIndex: t,
-        datapoint: {
-          segment: o[0],
-          index: o[1],
-          left: o[2],
-          right: o[3]
-        },
-        series: T.value,
-        config: e.value
-      })))
-        Q.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}: ${P(
-          e.value.style.layout.dataLabels.yAxis.formatter,
-          p(r.age),
-          F({ v: p(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_${C.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${P(
-          e.value.style.layout.dataLabels.xAxis.formatter,
-          p(r.left.value),
-          F({ v: p(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_${C.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${P(
-          e.value.style.layout.dataLabels.xAxis.formatter,
-          p(r.right.value),
-          F({ v: p(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>${P(
-          e.value.style.layout.dataLabels.xAxis.formatter,
-          p(r.right.value) + p(r.left.value),
-          F({ v: p(r.right.value) + p(r.left.value) }),
-          { datapoint: o, seriesIndex: t }
-        )}</b></div></div>`, a += "</div>", Q.value = `<div>${a}</div>`;
-      }
-      J.value = !0;
-    }
-    function re(t = null) {
-      Be(() => {
-        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((k) => [
-          k[0],
-          k[1],
-          k[2],
-          k[3],
-          k[2] ?? 0 + k[3] ?? 0
-        ]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(l), r = It(a);
-        t ? t(r) : Pt({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
-      });
-    }
-    const j = h(() => {
-      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 };
-    }), z = v(!1);
-    function Se(t) {
-      z.value = t, pe.value += 1;
-    }
-    function Oe() {
-      m.value.showTable = !m.value.showTable;
-    }
-    function ze() {
-      m.value.showTooltip = !m.value.showTooltip;
-    }
-    const Y = v(!1);
-    function ve() {
-      Y.value = !Y.value;
-    }
-    async function gt({ scale: t = 2 } = {}) {
-      if (!A.value) return;
-      const { width: o, height: l } = A.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: k } = await Xt({ domElement: A.value, base64: !0, img: !0, scale: t });
-      return {
-        imageUri: r,
-        base64: k,
-        title: e.value.style.title.text,
-        width: o,
-        height: l,
-        aspectRatio: a
-      };
-    }
-    const pt = v([]), bt = v({ start: 0, end: T.value.length });
-    Wt({
-      timeLabelsEls: Z,
-      timeLabels: pt,
-      slicer: bt,
-      configRef: e,
-      rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
-      autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
-      isAutoSize: !1,
-      width: ut,
-      height: nt,
-      targetClass: ".vue-ui-age-pyramid-x-axis-label",
-      rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
-    });
-    const U = h(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, o = m.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: z.value,
-          fullscreenParent: A.value,
-          forcedWidth: Math.min(800, window.innerWidth * 0.8),
-          isCursorPointer: B.value
-        } : {
-          hideDetails: !0,
-          config: {
-            open: o,
-            maxHeight: 1e4,
-            body: {
-              backgroundColor: e.value.style.backgroundColor,
-              color: e.value.style.color
-            },
-            head: {
-              backgroundColor: e.value.style.backgroundColor,
-              color: e.value.style.color
-            }
-          }
-        }
-      };
-    });
-    q(() => m.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && N.value ? N.value.open() : "close" in N.value && N.value.close());
-    });
-    function Ie() {
-      m.value.showTable = !1, ee.value && ee.value.setTableIconState(!1);
-    }
-    const mt = h(() => e.value.style.backgroundColor), xt = h(() => e.value.style.title), { exportSvg: wt, getSvg: kt } = Ut({
-      svg: ae,
-      title: xt,
-      backgroundColor: mt
-    });
-    async function Pe({ isCb: t }) {
-      H.value = !0, await Be();
-      try {
-        if (t) {
-          const { blob: o, url: l, text: a, dataUrl: r } = await kt();
-          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: o, url: l, text: a, dataUrl: r }));
-        } else
-          await Promise.resolve(wt());
-      } finally {
-        H.value = !1;
-      }
-    }
-    function Ct(t) {
-      if (t?.stage === "start") {
-        V.value = !0;
-        return;
-      }
-      if (t?.stage === "end") {
-        V.value = !1;
-        return;
-      }
-      _e();
-    }
-    async function Fe() {
-      if (at("copyAlt", {
-        config: e.value,
-        dataset: T.value
-      }), !e.value.userOptions.callbacks.altCopy) {
-        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
-        return;
-      }
-      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
-        config: e.value,
-        dataset: T.value
-      }));
-    }
-    return He({
-      getImage: gt,
-      generatePdf: Le,
-      generateCsv: re,
-      generateImage: _e,
-      generateSvg: Pe,
-      toggleTable: Oe,
-      toggleTooltip: ze,
-      toggleAnnotator: ve,
-      toggleFullscreen: Se,
-      copyAlt: Fe
-    }), (t, o) => (i(), n("div", {
-      class: Me(`vue-data-ui-component vue-ui-age-pyramid ${z.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      ref_key: "agePyramid",
-      ref: A,
-      id: `vue-ui-age-pyramid_${C.value}`,
-      style: K(`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(Ae)(!0)),
-      onMouseleave: o[2] || (o[2] = () => u(Ae)(!1))
-    }, [
-      e.value.userOptions.buttons.annotator ? (i(), M(u(Ke), {
-        key: 0,
-        svgRef: u(ae),
-        backgroundColor: e.value.style.backgroundColor,
-        color: e.value.style.color,
-        active: Y.value,
-        isCursorPointer: B.value,
-        onClose: ve
-      }, {
-        "annotator-action-close": y(() => [
-          d(t.$slots, "annotator-action-close", {}, void 0, !0)
-        ]),
-        "annotator-action-color": y(({ color: l }) => [
-          d(t.$slots, "annotator-action-color", x(w({ color: l })), void 0, !0)
-        ]),
-        "annotator-action-draw": y(({ mode: l }) => [
-          d(t.$slots, "annotator-action-draw", x(w({ mode: l })), void 0, !0)
-        ]),
-        "annotator-action-undo": y(({ disabled: l }) => [
-          d(t.$slots, "annotator-action-undo", x(w({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-redo": y(({ disabled: l }) => [
-          d(t.$slots, "annotator-action-redo", x(w({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-delete": y(({ disabled: l }) => [
-          d(t.$slots, "annotator-action-delete", x(w({ disabled: l })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : f("", !0),
-      it.value ? (i(), n("div", {
-        key: 1,
-        ref_key: "noTitle",
-        ref: xe,
-        class: "vue-data-ui-no-title-space",
-        style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : f("", !0),
-      e.value.style.title.text ? (i(), n("div", {
-        key: 2,
-        ref_key: "chartTitle",
-        ref: be,
-        style: "width:100%;background:transparent"
-      }, [
-        (i(), M(jt, {
-          key: `title_${we.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 && ge.value && (u(Te) || u(le)) ? (i(), M(u(Je), {
-        ref_key: "userOptionsRef",
-        ref: ee,
-        key: `user_options_${pe.value}`,
-        backgroundColor: e.value.style.backgroundColor,
-        color: e.value.style.color,
-        isImaging: u(ie),
-        isPrinting: u(se),
-        uid: C.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,
-        hasAltCopy: e.value.userOptions.buttons.altCopy,
-        isFullscreen: z.value,
-        isTooltip: m.value.showTooltip,
-        titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: A.value,
-        position: e.value.userOptions.position,
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: Y.value,
-        callbacks: e.value.userOptions.callbacks,
-        printScale: e.value.userOptions.print.scale,
-        tableDialog: e.value.table.useDialog,
-        isCursorPointer: B.value,
-        onToggleFullscreen: Se,
-        onGeneratePdf: u(Le),
-        onGenerateCsv: re,
-        onGenerateImage: Ct,
-        onGenerateSvg: Pe,
-        onToggleTable: Oe,
-        onToggleTooltip: ze,
-        onToggleAnnotator: ve,
-        onCopyAlt: Fe,
-        style: K({
-          visibility: u(Te) ? u(le) ? "visible" : "hidden" : "visible"
-        })
-      }, Ne({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          fn: y(({ isOpen: l, color: a }) => [
-            d(t.$slots, "menuIcon", x(w({ isOpen: l, color: a })), void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionTooltip ? {
-          name: "optionTooltip",
-          fn: y(() => [
-            d(t.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: y(() => [
-            d(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: y(() => [
-            d(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: y(() => [
-            d(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: y(() => [
-            d(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: y(() => [
-            d(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "6"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: y(({ toggleFullscreen: l, isFullscreen: a }) => [
-            d(t.$slots, "optionFullscreen", x(w({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
-          ]),
-          key: "7"
-        } : void 0,
-        t.$slots.optionAnnotator ? {
-          name: "optionAnnotator",
-          fn: y(({ toggleAnnotator: l, isAnnotator: a }) => [
-            d(t.$slots, "optionAnnotator", x(w({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
-          ]),
-          key: "8"
-        } : void 0,
-        t.$slots.optionAltCopy ? {
-          name: "optionAltCopy",
-          fn: y(({ altCopy: l }) => [
-            d(t.$slots, "optionAltCopy", x(w({ altCopy: l })), void 0, !0)
-          ]),
-          key: "9"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : f("", !0),
-      (i(), n("svg", {
-        ref_key: "svgRef",
-        ref: ae,
-        xmlns: u(zt),
-        class: Me({ "vue-data-ui-fullscreen--on": z.value, "vue-data-ui-fulscreen--off": !z.value }),
-        viewBox: `0 0 ${g.value.width <= 0 ? 10 : g.value.width} ${g.value.height <= 0 ? 10 : g.value.height}`,
-        style: K(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
-      }, [
-        de(u(Qe)),
-        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"
-          }
-        }, [
-          d(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Qt)) : f("", !0),
-        c("defs", null, [
-          c("linearGradient", {
-            id: `age_pyramid_left_${C.value}`,
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "0%"
-          }, [
-            c("stop", {
-              offset: "0%",
-              "stop-color": e.value.style.layout.bars.left.color
-            }, null, 8, el),
-            c("stop", {
-              offset: "100%",
-              "stop-color": u(ce)(u(Ge)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-            }, null, 8, tl)
-          ], 8, Zt),
-          c("linearGradient", {
-            id: `age_pyramid_right_${C.value}`,
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "0%"
-          }, [
-            c("stop", {
-              offset: "0%",
-              "stop-color": u(ce)(u(Ge)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-            }, null, 8, al),
-            c("stop", {
-              offset: "100%",
-              "stop-color": e.value.style.layout.bars.right.color
-            }, null, 8, ol)
-          ], 8, ll)
-        ]),
-        (i(!0), n(O, null, I(T.value, (l, a) => (i(), n("g", null, [
-          c("rect", {
-            x: l.left.x,
-            y: l.left.y,
-            width: u(p)(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, sl),
-          c("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_${C.value})` : l.left.color,
-            rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, il),
-          c("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, ul),
-          c("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_${C.value})` : l.right.color,
-            rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, nl)
-        ]))), 256)),
-        c("g", null, [
-          e.value.style.layout.dataLabels.sideTitles.show ? (i(), n("g", rl, [
-            c("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"
-            }, $(e.value.translations.female), 9, vl),
-            c("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"
-            }, $(e.value.translations.male), 9, dl)
-          ])) : f("", !0),
-          e.value.style.layout.dataLabels.yAxis.show ? (i(), n("g", yl, [
-            (i(!0), n(O, null, I(vt.value, (l, a) => (i(), n(O, 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 / D.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"
-              }, $(u(P)(
-                e.value.style.layout.dataLabels.yAxis.formatter,
-                l,
-                u(F)({ v: l }),
-                { datapoint: l, seriesIndex: a }
-              )), 9, cl)) : f("", !0)
-            ], 64))), 256))
-          ])) : f("", !0),
-          e.value.style.layout.dataLabels.xAxis.show ? (i(), n("g", hl, [
-            e.value.style.layout.grid.show ? (i(), n("g", fl, [
-              c("line", {
-                x1: _.value.right[0].x,
-                x2: _.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, gl),
-              c("line", {
-                x1: _.value.left[0].x,
-                x2: _.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, pl)
-            ])) : f("", !0),
-            (i(!0), n(O, null, I(_.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, bl)) : f("", !0)
-            ]))), 256)),
-            (i(!0), n(O, null, I(_.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, ml)) : f("", !0)
-            ]))), 256)),
-            c("g", {
-              ref_key: "xAxisLabels",
-              ref: Z
-            }, [
-              (i(!0), n(O, null, I(_.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})`
-              }, $(u(P)(
-                e.value.style.layout.dataLabels.xAxis.formatter,
-                l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                u(F)({
-                  v: l.value / e.value.style.layout.dataLabels.xAxis.scale
-                }),
-                { datapoint: l, seriesIndex: a }
-              )), 9, xl))), 256)),
-              (i(!0), n(O, null, I(_.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})`
-              }, $(u(P)(
-                e.value.style.layout.dataLabels.xAxis.formatter,
-                l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                u(F)({
-                  v: l.value / e.value.style.layout.dataLabels.xAxis.scale
-                }),
-                { datapoint: l, seriesIndex: a }
-              )), 9, wl))), 256))
-            ], 512),
-            c("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"
-            }, $(e.value.style.layout.dataLabels.xAxis.translation), 9, kl)
-          ])) : f("", !0)
-        ]),
-        (i(!0), n(O, null, I(fe.dataset, (l, a) => (i(), n("g", null, [
-          c("rect", {
-            x: s.value.left,
-            y: s.value.top + s.value.height / D.value * a - e.value.style.layout.bars.gap / 2,
-            width: s.value.width <= 0 ? 1e-4 : s.value.width,
-            height: s.value.height / D.value <= 0 ? 1e-4 : s.value.height / D.value,
-            fill: G.value !== null && G.value === a ? u(ce)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
-            onMouseover: (r) => ft(a, l),
-            onMouseleave: (r) => ht(a, l),
-            onClick: (r) => ct(a, l)
-          }, null, 40, Cl)
-        ]))), 256)),
-        d(t.$slots, "svg", {
-          svg: {
-            ...g.value,
-            isPrintingImg: u(se) | u(ie) | V.value,
-            isPrintingSvg: H.value
-          }
-        }, void 0, !0)
-      ], 14, Jt)),
-      t.$slots.watermark ? (i(), n("div", Al, [
-        d(t.$slots, "watermark", x(w({ isPrinting: u(se) || u(ie) || V.value || H.value })), void 0, !0)
-      ])) : f("", !0),
-      d(t.$slots, "legend", { legend: T.value }, void 0, !0),
-      t.$slots.source ? (i(), n("div", {
-        key: 5,
-        ref_key: "source",
-        ref: me,
-        dir: "auto"
-      }, [
-        d(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : f("", !0),
-      de(u(Xe), {
-        teleportTo: e.value.style.tooltip.teleportTo,
-        show: m.value.showTooltip && J.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: A.value,
-        content: Q.value,
-        isFullscreen: z.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": y(() => [
-          d(t.$slots, "tooltip-before", x(w({ ...ue.value })), void 0, !0)
-        ]),
-        "tooltip-after": y(() => [
-          d(t.$slots, "tooltip-after", x(w({ ...ue.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"]),
-      ge.value && e.value.userOptions.buttons.table ? (i(), M(Lt(U.value.component), _t({ key: 6 }, U.value.props, {
-        ref_key: "tableUnit",
-        ref: N,
-        onClose: Ie
-      }), Ne({
-        content: y(() => [
-          (i(), M(u(qe), {
-            key: `table_${ke.value}`,
-            colNames: j.value.colNames,
-            head: j.value.head,
-            body: j.value.body,
-            config: j.value.config,
-            title: e.value.table.useDialog ? "" : U.value.title,
-            withCloseButton: !e.value.table.useDialog,
-            isCursorPointer: B.value,
-            onClose: Ie
-          }, {
-            th: y(({ th: l }) => [
-              ye($(l), 1)
-            ]),
-            td: y(({ td: l }) => [
-              ye($(l), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
-        ]),
-        _: 2
-      }, [
-        e.value.table.useDialog ? {
-          name: "title",
-          fn: y(() => [
-            ye($(U.value.title), 1)
-          ]),
-          key: "0"
-        } : void 0,
-        e.value.table.useDialog ? {
-          name: "actions",
-          fn: y(() => [
-            c("button", {
-              tabindex: "0",
-              class: "vue-ui-user-options-button",
-              onClick: o[0] || (o[0] = (l) => re(e.value.userOptions.callbacks.csv)),
-              style: K({ cursor: B.value ? "pointer" : "default" })
-            }, [
-              de(u(je), {
-                name: "fileCsv",
-                stroke: U.value.props.color
-              }, null, 8, ["stroke"])
-            ], 4)
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : f("", !0),
-      d(t.$slots, "skeleton", {}, () => [
-        u(Ce) ? (i(), M(Bt, { key: 0 })) : f("", !0)
-      ], !0)
-    ], 46, Kt));
-  }
-}, Gl = /* @__PURE__ */ qt(Tl, [["__scopeId", "data-v-4b2065dd"]]);
-export {
-  Gl as default
-};