vue-data-ui 3.6.0 → 3.7.0

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

@@ -1,933 +0,0 @@
-import { defineAsyncComponent as $, computed as c, ref as v, toRefs as yt, watch as X, shallowRef as ze, onMounted as ht, onBeforeUnmount as Oe, watchEffect as ct, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as se, normalizeClass as Ie, createBlock as M, createCommentVNode as f, renderSlot as d, createVNode as ie, withCtx as y, normalizeProps as w, guardReactiveProps as k, createSlots as Fe, createElementVNode as h, Fragment as S, renderList as I, toDisplayString as _, resolveDynamicComponent as ft, mergeProps as gt, createTextVNode as ue, nextTick as pt } from "vue";
-import { c as bt, t as xt, o as Re, f as mt, x as p, X as wt, s as ne, i as Pe, a as F, d as R, P as kt, Q as Ct, G as At, H as _t } from "./lib-C_mNZmhD.js";
-import { t as De, u as Tt } from "./useResponsive-DfdjqQps.js";
-import { u as Lt, a as Me } from "./useNestedProp-CIoDlpHu.js";
-import { u as $t, B as St } from "./BaseScanner-BgWxam9d.js";
-import { u as zt } from "./usePrinter-DTzqpYKF.js";
-import { u as Ot } from "./useSvgExport-DrjCWun4.js";
-import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Ft } from "./useChartAccessibility-9icAAmYg.js";
-import { u as Rt } from "./useTimeLabelCollider-CIsgDrl9.js";
-import Pt from "./img-BecE5qXd.js";
-import Dt from "./Title-Bb1VWCtR.js";
-import { t as Mt } from "./themes-DH-N_ePR.js";
-import { _ as Nt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"], Gt = ["id"], Ht = ["stop-color"], Wt = ["stop-color"], Vt = ["id"], Xt = ["stop-color"], jt = ["stop-color"], Yt = ["x", "y", "width", "height", "fill", "rx"], qt = ["x", "y", "width", "height", "fill", "rx"], Qt = ["x", "y", "width", "height", "fill", "rx"], Jt = ["x", "y", "width", "height", "fill", "rx"], Kt = { key: 0 }, Zt = ["x", "y", "fill", "font-size", "font-weight"], el = ["x", "y", "fill", "font-size", "font-weight"], tl = { key: 1 }, ll = ["x", "y", "font-size", "fill", "font-weight"], al = { key: 2 }, ol = { key: 0 }, sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], il = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], nl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], rl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], vl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], dl = ["x", "y", "font-size", "fill", "font-weight"], yl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], hl = {
-  key: 4,
-  class: "vue-data-ui-watermark"
-}, cl = {
-  __name: "vue-ui-age-pyramid",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  setup(re, { expose: Ne }) {
-    const Be = $(() => import("./Tooltip-oWCO1HKy.js")), Ee = $(() => import("./BaseIcon-DLFL0M4-.js")), Ue = $(() => import("./vue-ui-accordion-SSLXLlNz.js")), Ge = $(() => import("./DataTable-UCyd_BQI.js")), He = $(() => import("./PenAndPaper-BJSMejV9.js")), We = $(() => import("./UserOptions-BqmUW9Kp.js")), Ve = $(() => import("./PackageVersion-D_4Hr4S4.js")), Xe = $(() => import("./BaseDraggableDialog-DhKIof09.js")), { vue_ui_age_pyramid: je } = Lt(), x = re, ve = c(() => !!x.dataset && x.dataset.length), C = v(bt()), j = v(!1), Y = v(""), U = v(null), de = v(0), A = v(null), ye = v(null), he = v(null), ce = v(null), fe = v(0), ge = v(0), q = v(null), N = v(null), Q = v(null), e = v(ee()), { loading: pe, FINAL_DATASET: G, manualLoading: J } = $t({
-      ...yt(x),
-      FINAL_CONFIG: e,
-      prepareConfig: ee,
-      skeletonDataset: [
-        ["_", 9, 2, 2],
-        ["_", 8, 3, 3],
-        ["_", 7, 5, 5],
-        ["_", 6, 8, 8],
-        ["_", 5, 13, 13],
-        ["_", 4, 21, 21],
-        ["_", 3, 34, 34],
-        ["_", 2, 55, 55],
-        ["_", 1, 89, 89],
-        ["_", 0, 144, 144]
-      ],
-      skeletonConfig: xt({
-        defaultConfig: e.value,
-        userConfig: {
-          userOptions: { show: !1 },
-          table: { show: !1 },
-          translations: {
-            male: "",
-            female: ""
-          },
-          style: {
-            backgroundColor: "#99999930",
-            layout: {
-              bars: {
-                left: { color: "#CACACA" },
-                right: { color: "#999999" }
-              },
-              dataLabels: {
-                xAxis: {
-                  fontSize: 0,
-                  scale: 1e3,
-                  translation: ""
-                },
-                yAxis: {
-                  show: !1
-                }
-              },
-              grid: {
-                stroke: "#6A6A6A"
-              }
-            }
-          }
-        }
-      })
-    }), { userOptionsVisible: K, setUserOptionsVisibility: be, keepUserOptionState: xe } = It({ config: e.value }), { svgRef: Z } = Ft({ config: e.value.style.title });
-    function ee() {
-      const t = Me({
-        userConfig: x.config,
-        defaultConfig: je
-      });
-      return t.theme ? {
-        ...Me({
-          userConfig: Mt.vue_ui_age_pyramid[t.theme] || x.config,
-          defaultConfig: t
-        })
-      } : t;
-    }
-    X(() => x.config, (t) => {
-      pe.value || (e.value = ee()), K.value = !e.value.userOptions.showOnChartHover, me(), fe.value += 1, ge.value += 1, b.value.showTable = e.value.table.show, b.value.showTooltip = e.value.style.tooltip.show;
-    }, { deep: !0 }), X(() => x.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (J.value = !1);
-    }, { deep: !0 });
-    const T = ze(null), P = ze(null);
-    ht(() => {
-      me();
-    });
-    const Ye = c(() => !!e.value.debug);
-    function me() {
-      if (Re(x.dataset) && (mt({
-        componentName: "VueUiAgePyramid",
-        type: "dataset",
-        debug: Ye.value
-      }), J.value = !0), Re(x.dataset) || (J.value = e.value.loading), e.value.responsive) {
-        const t = De(() => {
-          const { width: o, height: l } = Tt({
-            chart: A.value,
-            title: e.value.style.title.text ? ye.value : null,
-            source: he.value,
-            noTitle: ce.value
-          });
-          requestAnimationFrame(() => {
-            g.value.width = o, g.value.height = l;
-          });
-        });
-        T.value && (P.value && T.value.unobserve(P.value), T.value.disconnect()), T.value = new ResizeObserver(t), P.value = A.value.parentNode, T.value.observe(P.value);
-      }
-    }
-    Oe(() => {
-      T.value && (P.value && T.value.unobserve(P.value), T.value.disconnect());
-    });
-    const { isPrinting: we, isImaging: ke, generatePdf: Ce, generateImage: Ae } = zt({
-      elementId: `vue-ui-age-pyramid_${C.value}`,
-      fileName: e.value.style.title.text || "vue-ui-age-pyramid",
-      options: e.value.userOptions.print
-    }), qe = c(() => e.value.userOptions.show && !e.value.style.title.text), b = v({
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.tooltip.show
-    });
-    X(e, () => {
-      b.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
-    }), Qe = c(() => g.value.width), Je = c(() => g.value.height), H = v(0), Ke = De((t) => {
-      H.value = t;
-    }, 100);
-    ct((t) => {
-      const o = q.value;
-      if (!o) return;
-      const l = new ResizeObserver((a) => {
-        Ke(a[0].contentRect.height);
-      });
-      l.observe(o), t(() => l.disconnect());
-    }), Oe(() => {
-      H.value = 0;
-    });
-    const s = c(() => {
-      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 - H.value,
-        width: t,
-        height: g.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - H.value - e.value.style.layout.dataLabels.sideTitles.fontSize - e.value.style.layout.dataLabels.sideTitles.offsetY - 12,
-        centerX: e.value.style.layout.padding.left + t / 2,
-        leftChart: {
-          width: t / 2 - e.value.style.layout.centerSlit.width,
-          right: 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
-        }
-      };
-    }), Ze = c(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), L = c(() => {
-      const t = et(B.value / 5), o = [], l = [];
-      for (let a = 0; a <= 5; a += 1) {
-        const r = t * a, m = t * (a - 5);
-        o.push({
-          value: r,
-          x: s.value.left + s.value.width / 2 + e.value.style.layout.centerSlit.width + r / B.value * s.value.leftChart.width
-        }), l.push({
-          value: Math.abs(m),
-          x: s.value.left + s.value.width / 2 + m / B.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
-        });
-      }
-      return {
-        right: o,
-        left: l
-      };
-    });
-    function et(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 B = c(() => Math.max(...G.value.flatMap((t) => t.slice(-2).map((o) => p(o))))), D = c(() => G.value.length), tt = c(() => G.value.map((t) => ({
-      segment: t[0],
-      age: t[1],
-      left: {
-        value: t[2],
-        proportionToMax: t[2] / B.value
-      },
-      right: {
-        value: t[3],
-        proportionToMax: t[3] / B.value
-      }
-    }))), z = c(() => tt.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
-        }
-      };
-    })), te = v(null);
-    function le(t) {
-      const [o, l, a, r] = t;
-      return { segment: o, index: l, left: a, right: r };
-    }
-    function lt(t, o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: le(o), seriesIndex: t });
-    }
-    function at(t, o) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: le(o), seriesIndex: t }), U.value = null, j.value = !1;
-    }
-    function ot(t, o) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: le(o), seriesIndex: t }), U.value = t, te.value = {
-        datapoint: o,
-        seriesIndex: t,
-        series: z.value,
-        config: e.value
-      };
-      const l = e.value.style.tooltip.customFormat;
-      if (At(l) && _t(() => l({
-        seriesIndex: t,
-        datapoint: {
-          segment: o[0],
-          index: o[1],
-          left: o[2],
-          right: o[3]
-        },
-        series: z.value,
-        config: e.value
-      })))
-        Y.value = l({
-          seriesIndex: t,
-          datapoint: {
-            segment: o[0],
-            index: o[1],
-            left: o[2],
-            right: o[3]
-          },
-          series: z.value,
-          config: e.value
-        });
-      else {
-        let a = "";
-        const r = z.value[t];
-        a += `<div><b>${r.segment}</b></div>`, a += `<div>${e.value.translations.age}: ${F(
-          e.value.style.layout.dataLabels.yAxis.formatter,
-          p(r.age),
-          R({ 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>${F(
-          e.value.style.layout.dataLabels.xAxis.formatter,
-          p(r.left.value),
-          R({ 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>${F(
-          e.value.style.layout.dataLabels.xAxis.formatter,
-          p(r.right.value),
-          R({ 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>${F(
-          e.value.style.layout.dataLabels.xAxis.formatter,
-          p(r.right.value) + p(r.left.value),
-          R({ v: p(r.right.value) + p(r.left.value) }),
-          { datapoint: o, seriesIndex: t }
-        )}</b></div></div>`, a += "</div>", Y.value = `<div>${a}</div>`;
-      }
-      j.value = !0;
-    }
-    function ae(t = null) {
-      pt(() => {
-        const o = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = x.dataset.map((m) => [
-          m[0],
-          m[1],
-          m[2],
-          m[3],
-          m[2] ?? 0 + m[3] ?? 0
-        ]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(l), r = kt(a);
-        t ? t(r) : Ct({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
-      });
-    }
-    const W = c(() => {
-      const t = [
-        e.value.translations.year,
-        e.value.translations.age,
-        e.value.translations.female,
-        e.value.translations.male,
-        e.value.translations.total
-      ], o = x.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 };
-    }), O = v(!1);
-    function _e(t) {
-      O.value = t, de.value += 1;
-    }
-    function Te() {
-      b.value.showTable = !b.value.showTable;
-    }
-    function Le() {
-      b.value.showTooltip = !b.value.showTooltip;
-    }
-    const V = v(!1);
-    function oe() {
-      V.value = !V.value;
-    }
-    async function st({ scale: t = 2 } = {}) {
-      if (!A.value) return;
-      const { width: o, height: l } = A.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: m } = await Pt({ domElement: A.value, base64: !0, img: !0, scale: t });
-      return {
-        imageUri: r,
-        base64: m,
-        title: e.value.style.title.text,
-        width: o,
-        height: l,
-        aspectRatio: a
-      };
-    }
-    const it = v([]), ut = v({ start: 0, end: z.value.length });
-    Rt({
-      timeLabelsEls: q,
-      timeLabels: it,
-      slicer: ut,
-      configRef: e,
-      rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
-      autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
-      isAutoSize: !1,
-      width: Qe,
-      height: Je,
-      targetClass: ".vue-ui-age-pyramid-x-axis-label",
-      rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
-    });
-    const E = c(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, o = b.value.showTable;
-      return {
-        component: t ? Xe : Ue,
-        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: O.value,
-          fullscreenParent: A.value,
-          forcedWidth: Math.min(800, window.innerWidth * 0.8)
-        } : {
-          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
-            }
-          }
-        }
-      };
-    });
-    X(() => b.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 $e() {
-      b.value.showTable = !1, Q.value && Q.value.setTableIconState(!1);
-    }
-    const nt = c(() => e.value.style.backgroundColor), rt = c(() => e.value.style.title), { exportSvg: vt, getSvg: dt } = Ot({
-      svg: Z,
-      title: rt,
-      backgroundColor: nt
-    });
-    async function Se({ isCb: t }) {
-      if (t) {
-        const { blob: o, url: l, text: a, dataUrl: r } = await dt();
-        e.value.userOptions.callbacks.svg({ blob: o, url: l, text: a, dataUrl: r });
-      } else
-        vt();
-    }
-    return Ne({
-      getImage: st,
-      generatePdf: Ce,
-      generateCsv: ae,
-      generateImage: Ae,
-      generateSvg: Se,
-      toggleTable: Te,
-      toggleTooltip: Le,
-      toggleAnnotator: oe,
-      toggleFullscreen: _e
-    }), (t, o) => (i(), n("div", {
-      class: Ie(`vue-data-ui-component vue-ui-age-pyramid ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      ref_key: "agePyramid",
-      ref: A,
-      id: `vue-ui-age-pyramid_${C.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: o[1] || (o[1] = () => u(be)(!0)),
-      onMouseleave: o[2] || (o[2] = () => u(be)(!1))
-    }, [
-      e.value.userOptions.buttons.annotator ? (i(), M(u(He), {
-        key: 0,
-        svgRef: u(Z),
-        backgroundColor: e.value.style.backgroundColor,
-        color: e.value.style.color,
-        active: V.value,
-        onClose: oe
-      }, {
-        "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", w(k({ color: l })), void 0, !0)
-        ]),
-        "annotator-action-draw": y(({ mode: l }) => [
-          d(t.$slots, "annotator-action-draw", w(k({ mode: l })), void 0, !0)
-        ]),
-        "annotator-action-undo": y(({ disabled: l }) => [
-          d(t.$slots, "annotator-action-undo", w(k({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-redo": y(({ disabled: l }) => [
-          d(t.$slots, "annotator-action-redo", w(k({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-delete": y(({ disabled: l }) => [
-          d(t.$slots, "annotator-action-delete", w(k({ disabled: l })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
-      qe.value ? (i(), n("div", {
-        key: 1,
-        ref_key: "noTitle",
-        ref: ce,
-        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: ye,
-        style: "width:100%;background:transparent"
-      }, [
-        (i(), M(Dt, {
-          key: `title_${fe.value}`,
-          config: {
-            title: {
-              cy: "pyramid-div-title",
-              ...e.value.style.title
-            },
-            subtitle: {
-              cy: "pyramid-div-subtitle",
-              ...e.value.style.title.subtitle
-            }
-          }
-        }, null, 8, ["config"]))
-      ], 512)) : f("", !0),
-      e.value.userOptions.show && ve.value && (u(xe) || u(K)) ? (i(), M(u(We), {
-        ref_key: "userOptionsRef",
-        ref: Q,
-        key: `user_options_${de.value}`,
-        backgroundColor: e.value.style.backgroundColor,
-        color: e.value.style.color,
-        isImaging: u(ke),
-        isPrinting: u(we),
-        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,
-        isFullscreen: O.value,
-        isTooltip: b.value.showTooltip,
-        titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: A.value,
-        position: e.value.userOptions.position,
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: V.value,
-        callbacks: e.value.userOptions.callbacks,
-        printScale: e.value.userOptions.print.scale,
-        tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: _e,
-        onGeneratePdf: u(Ce),
-        onGenerateCsv: ae,
-        onGenerateImage: u(Ae),
-        onGenerateSvg: Se,
-        onToggleTable: Te,
-        onToggleTooltip: Le,
-        onToggleAnnotator: oe,
-        style: se({
-          visibility: u(xe) ? u(K) ? "visible" : "hidden" : "visible"
-        })
-      }, Fe({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          fn: y(({ isOpen: l, color: a }) => [
-            d(t.$slots, "menuIcon", w(k({ 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", w(k({ 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", w(k({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
-          ]),
-          key: "8"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
-      (i(), n("svg", {
-        ref_key: "svgRef",
-        ref: Z,
-        xmlns: u(wt),
-        class: Ie({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.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(u(Ve)),
-        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, Ut)) : f("", !0),
-        h("defs", null, [
-          h("linearGradient", {
-            id: `age_pyramid_left_${C.value}`,
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "0%"
-          }, [
-            h("stop", {
-              offset: "0%",
-              "stop-color": e.value.style.layout.bars.left.color
-            }, null, 8, Ht),
-            h("stop", {
-              offset: "100%",
-              "stop-color": u(ne)(u(Pe)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-            }, null, 8, Wt)
-          ], 8, Gt),
-          h("linearGradient", {
-            id: `age_pyramid_right_${C.value}`,
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "0%"
-          }, [
-            h("stop", {
-              offset: "0%",
-              "stop-color": u(ne)(u(Pe)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-            }, null, 8, Xt),
-            h("stop", {
-              offset: "100%",
-              "stop-color": e.value.style.layout.bars.right.color
-            }, null, 8, jt)
-          ], 8, Vt)
-        ]),
-        (i(!0), n(S, null, I(z.value, (l, a) => (i(), n("g", null, [
-          h("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, Yt),
-          h("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, qt),
-          h("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, Qt),
-          h("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, Jt)
-        ]))), 256)),
-        h("g", null, [
-          e.value.style.layout.dataLabels.sideTitles.show ? (i(), n("g", Kt, [
-            h("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, Zt),
-            h("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, el)
-          ])) : f("", !0),
-          e.value.style.layout.dataLabels.yAxis.show ? (i(), n("g", tl, [
-            (i(!0), n(S, null, I(Ze.value, (l, a) => (i(), n(S, 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(F)(
-                e.value.style.layout.dataLabels.yAxis.formatter,
-                l,
-                u(R)({ v: l }),
-                { datapoint: l, seriesIndex: a }
-              )), 9, ll)) : f("", !0)
-            ], 64))), 256))
-          ])) : f("", !0),
-          e.value.style.layout.dataLabels.xAxis.show ? (i(), n("g", al, [
-            e.value.style.layout.grid.show ? (i(), n("g", ol, [
-              h("line", {
-                x1: L.value.right[0].x,
-                x2: L.value.right.at(-1).x,
-                y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
-                y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
-                stroke: e.value.style.layout.grid.stroke,
-                "stroke-width": e.value.style.layout.grid.strokeWidth,
-                "stroke-linecap": "round"
-              }, null, 8, sl),
-              h("line", {
-                x1: L.value.left[0].x,
-                x2: L.value.left.at(-1).x,
-                y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
-                y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
-                stroke: e.value.style.layout.grid.stroke,
-                "stroke-width": e.value.style.layout.grid.strokeWidth,
-                "stroke-linecap": "round"
-              }, null, 8, il)
-            ])) : f("", !0),
-            (i(!0), n(S, null, I(L.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, ul)) : f("", !0)
-            ]))), 256)),
-            (i(!0), n(S, null, I(L.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, nl)) : f("", !0)
-            ]))), 256)),
-            h("g", {
-              ref_key: "xAxisLabels",
-              ref: q
-            }, [
-              (i(!0), n(S, null, I(L.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(F)(
-                e.value.style.layout.dataLabels.xAxis.formatter,
-                l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                u(R)({
-                  v: l.value / e.value.style.layout.dataLabels.xAxis.scale
-                }),
-                { datapoint: l, seriesIndex: a }
-              )), 9, rl))), 256)),
-              (i(!0), n(S, null, I(L.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(F)(
-                e.value.style.layout.dataLabels.xAxis.formatter,
-                l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                u(R)({
-                  v: l.value / e.value.style.layout.dataLabels.xAxis.scale
-                }),
-                { datapoint: l, seriesIndex: a }
-              )), 9, vl))), 256))
-            ], 512),
-            h("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, dl)
-          ])) : f("", !0)
-        ]),
-        (i(!0), n(S, null, I(re.dataset, (l, a) => (i(), n("g", null, [
-          h("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: U.value !== null && U.value === a ? u(ne)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
-            onMouseover: (r) => ot(a, l),
-            onMouseleave: (r) => at(a, l),
-            onClick: (r) => lt(a, l)
-          }, null, 40, yl)
-        ]))), 256)),
-        d(t.$slots, "svg", { svg: g.value }, void 0, !0)
-      ], 14, Et)),
-      t.$slots.watermark ? (i(), n("div", hl, [
-        d(t.$slots, "watermark", w(k({ isPrinting: u(we) || u(ke) })), void 0, !0)
-      ])) : f("", !0),
-      d(t.$slots, "legend", { legend: z.value }, void 0, !0),
-      t.$slots.source ? (i(), n("div", {
-        key: 5,
-        ref_key: "source",
-        ref: he,
-        dir: "auto"
-      }, [
-        d(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : f("", !0),
-      ie(u(Be), {
-        show: b.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: Y.value,
-        isFullscreen: O.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", w(k({ ...te.value })), void 0, !0)
-        ]),
-        "tooltip-after": y(() => [
-          d(t.$slots, "tooltip-after", w(k({ ...te.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      ve.value && e.value.userOptions.buttons.table ? (i(), M(ft(E.value.component), gt({ key: 6 }, E.value.props, {
-        ref_key: "tableUnit",
-        ref: N,
-        onClose: $e
-      }), Fe({
-        content: y(() => [
-          (i(), M(u(Ge), {
-            key: `table_${ge.value}`,
-            colNames: W.value.colNames,
-            head: W.value.head,
-            body: W.value.body,
-            config: W.value.config,
-            title: e.value.table.useDialog ? "" : E.value.title,
-            withCloseButton: !e.value.table.useDialog,
-            onClose: $e
-          }, {
-            th: y(({ th: l }) => [
-              ue(_(l), 1)
-            ]),
-            td: y(({ td: l }) => [
-              ue(_(l), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
-        ]),
-        _: 2
-      }, [
-        e.value.table.useDialog ? {
-          name: "title",
-          fn: y(() => [
-            ue(_(E.value.title), 1)
-          ]),
-          key: "0"
-        } : void 0,
-        e.value.table.useDialog ? {
-          name: "actions",
-          fn: y(() => [
-            h("button", {
-              tabindex: "0",
-              class: "vue-ui-user-options-button",
-              onClick: o[0] || (o[0] = (l) => ae(e.value.userOptions.callbacks.csv))
-            }, [
-              ie(u(Ee), {
-                name: "excel",
-                stroke: E.value.props.color
-              }, null, 8, ["stroke"])
-            ])
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : f("", !0),
-      u(pe) ? (i(), M(St, { key: 7 })) : f("", !0)
-    ], 46, Bt));
-  }
-}, Sl = /* @__PURE__ */ Nt(cl, [["__scopeId", "data-v-7049b7f2"]]);
-export {
-  Sl as default
-};