vue-data-ui 2.2.90 → 2.2.91

package/dist/vue-ui-age-pyramid-4hcuKpFY.js

@@ -0,0 +1,781 @@
+import { computed as N, ref as C, onMounted as ye, openBlock as f, createElementBlock as b, normalizeClass as oe, normalizeStyle as G, createVNode as Y, createCommentVNode as S, createBlock as J, unref as I, createSlots as fe, withCtx as A, renderSlot as O, normalizeProps as j, guardReactiveProps as H, createElementVNode as w, Fragment as B, renderList as R, toDisplayString as F, createTextVNode as ae, nextTick as ve } from "vue";
+import { _ as ge, e as ce, i as pe, j as be, X as we, x as ie, o as q, D as me, y as xe, z as _e, v as ke, w as Ce } from "./data-table-d-VcuH-r.js";
+import { t as Le } from "./themes-lgjsYHsH.js";
+import { u as se, _ as Te } from "./title-BF-9Qcni.js";
+import { U as Se } from "./user-options-DZgCz8UA.js";
+import { _ as $e } from "./tooltip-D85WEOKi.js";
+import { u as Ae, a as Ne, S as Ie, A as Oe } from "./vue-ui-3d-bar-DW7kGJSz.js";
+function pt(t, i, r, h = {}) {
+  if (r <= 0) return;
+  t.save();
+  const {
+    color: v = "black",
+    lineWidth: y = 1,
+    lineCap: k = "round",
+    lineJoin: p = "round",
+    lineDash: x = null,
+    lineDashoffset: c = 0,
+    shadowColor: a = null,
+    shadowBlur: g = 0,
+    shadowOffsetX: L = 0,
+    shadowOffsetY: e = 0,
+    fillStyle: $ = "#FFFFFF"
+  } = h;
+  t.beginPath(), t.arc(i.x, i.y, r, 0, 2 * Math.PI), t.strokeStyle = v, t.lineWidth = y, t.lineCap = k, t.lineJoin = p, x && (t.setLineDash(x), t.lineDashoffset = c), a && (t.shadowColor = a, t.shadowOffsetX = L, t.shadowOffsetY = e), g && (t.shadowBlur = g), $ && (t.fillStyle = $), t.fillStyle && t.fill(), t.stroke(), t.restore();
+}
+function bt(t, i, r = {}) {
+  if (!i.length) return;
+  t.save();
+  const {
+    color: h = "black",
+    lineWidth: v = 1,
+    lineCap: y = "round",
+    lineJoin: k = "round",
+    lineDash: p = null,
+    lineDashoffset: x = 0,
+    shadowColor: c = null,
+    shadowBlur: a = 0,
+    shadowOffsetX: g = 0,
+    shadowOffsetY: L = 0
+  } = r;
+  t.beginPath(), t.moveTo(i[0].x, i[0].y);
+  for (let e = 1; e < i.length; e += 1)
+    t.lineTo(i[e].x, i[e].y);
+  t.strokeStyle = h, t.lineWidth = v, t.lineCap = y, t.lineJoin = k, p && (t.setLineDash(p), t.lineDashoffset = x), c && (t.shadowColor = c, t.shadowOffsetX = g, t.shadowOffsetY = L), a && (t.shadowBlur = a), t.stroke(), t.restore();
+}
+function wt(t, i, r = {}) {
+  if (!i.length) return;
+  t.save();
+  const {
+    strokeColor: h = "black",
+    lineWidth: v = 1,
+    lineCap: y = "round",
+    lineJoin: k = "round",
+    lineDash: p = null,
+    lineDashoffset: x = 0,
+    fillColor: c = null,
+    gradient: a = null,
+    shadowColor: g = null,
+    shadowBlur: L = 0,
+    shadowOffsetX: e = 0,
+    shadowOffsetY: $ = 0
+  } = r;
+  t.beginPath(), t.moveTo(i[0].x, i[0].y);
+  for (let d = 1; d < i.length; d += 1)
+    t.lineTo(i[d].x, i[d].y);
+  if (t.closePath(), t.strokeStyle = h, t.lineWidth = v, t.lineCap = y, t.lineJoin = k, p && (t.setLineDash(p), t.lineDashoffset = x), g && (t.shadowColor = g, t.shadowBlur = L, t.shadowOffsetX = e, t.shadowOffsetY = $), a) {
+    let d;
+    a.type === "linear" ? d = t.createLinearGradient(
+      _(a.start.x, Number.MIN_VALUE),
+      _(a.start.y, Number.MIN_VALUE),
+      _(a.end.x, Number.MIN_VALUE * 2),
+      _(a.end.y, Number.MIN_VALUE * 2)
+    ) : a.type === "radial" && (d = t.createRadialGradient(
+      _(a.start.x, Number.MIN_VALUE),
+      _(a.start.y, Number.MIN_VALUE),
+      a.start.r || 0,
+      _(a.end.x, Number.MIN_VALUE * 2),
+      _(a.end.y, Number.MIN_VALUE * 2),
+      a.end.r || 0
+    )), d && a.stops && (a.stops.forEach((z) => {
+      d.addColorStop(z.offset, z.color);
+    }), t.fillStyle = d);
+  } else c && (t.fillStyle = c);
+  t.fillStyle && t.fill(), h && t.stroke(), t.restore();
+}
+function mt(t, i, r = {}) {
+  if (!i.length) return;
+  t.save();
+  const {
+    strokeColor: h = "black",
+    lineWidth: v = 1,
+    lineCap: y = "round",
+    lineJoin: k = "round",
+    lineDash: p = null,
+    lineDashoffset: x = 0,
+    fillColor: c = null,
+    gradient: a = null,
+    shadowColor: g = null,
+    shadowBlur: L = 0,
+    shadowOffsetX: e = 0,
+    shadowOffsetY: $ = 0
+  } = r;
+  t.beginPath(), t.moveTo(i[0].x, i[0].y);
+  for (let d = 1; d < i.length; d += 1)
+    t.lineTo(i[d].x, i[d].y);
+  if (t.closePath(), t.strokeStyle = h, t.lineWidth = v, t.lineCap = y, t.lineJoin = k, p && (t.setLineDash(p), t.lineDashoffset = x), g && (t.shadowColor = g, t.shadowBlur = L, t.shadowOffsetX = e, t.shadowOffsetY = $), a) {
+    let d;
+    a.type === "linear" ? d = t.createLinearGradient(
+      _(a.start.x, Number.MIN_VALUE),
+      _(a.start.y, Number.MIN_VALUE),
+      _(a.end.x, Number.MIN_VALUE * 2),
+      _(a.end.y, Number.MIN_VALUE * 2)
+    ) : a.type === "radial" && (d = t.createRadialGradient(
+      _(a.start.x, Number.MIN_VALUE),
+      _(a.start.y, Number.MIN_VALUE),
+      a.start.r || 0,
+      _(a.end.x, Number.MIN_VALUE * 2),
+      _(a.end.y, Number.MIN_VALUE * 2),
+      a.end.r || 0
+    )), d && a.stops && (a.stops.forEach((z) => {
+      d.addColorStop(z.offset, z.color);
+    }), t.fillStyle = d);
+  } else c && (t.fillStyle = c);
+  t.fillStyle && t.fill(), h && t.stroke(), t.restore();
+}
+function xt(t, i, r, h, v = {}) {
+  t.save();
+  const {
+    font: y = "16px sans-serif",
+    color: k = "black",
+    align: p = "start",
+    baseline: x = "alphabetic",
+    maxWidth: c = void 0,
+    rotation: a = 0,
+    shadowColor: g = null,
+    shadowBlur: L = 0,
+    shadowOffsetX: e = 0,
+    shadowOffsetY: $ = 0,
+    strokeColor: d = null,
+    lineWidth: z = 1
+  } = v;
+  t.font = y, t.fillStyle = k, t.textAlign = p, t.textBaseline = x, g && (t.shadowColor = g, t.shadowBlur = L, t.shadowOffsetX = e, t.shadowOffsetY = $), d && (t.strokeStyle = d, t.lineWidth = z), a !== 0 && (t.translate(r, h), t.rotate(Math.PI / 180 * a), t.translate(-r, -h)), t.fillText(i, r, h, c), d && t.strokeText(i, r, h, c), t.restore();
+}
+function ze(t, i = 20) {
+  let r;
+  return function(...h) {
+    const v = this;
+    r || (t.apply(v, h), r = !0, setTimeout(() => r = !1, i));
+  };
+}
+function _t(t, i, r = !1) {
+  let h;
+  return function(...v) {
+    const y = this, k = function() {
+      h = null, r || t.apply(y, v);
+    }, p = r && !h;
+    clearTimeout(h), h = setTimeout(k, i), p && t.apply(y, v);
+  };
+}
+function kt(t) {
+  const i = document.createElement("canvas");
+  return i.width = t.width || 1, i.height = t.height || 1, t.width || (t.width = 1), t.height || (t.height = 1), i.getContext("2d").drawImage(t, 0, 0), i;
+}
+function _(t, i) {
+  return [null, void 0, NaN, 1 / 0, -1 / 0].includes(t) ? i : t;
+}
+function Me({
+  chart: t,
+  title: i = null,
+  slicer: r = null,
+  legend: h = null
+}) {
+  let v = 0, y = 0;
+  if (t) {
+    const k = t.parentNode, { height: p, width: x } = k.getBoundingClientRect();
+    let c = 0, a = 0, g = 0;
+    i && (c = i.getBoundingClientRect().height), r && (a = r.getBoundingClientRect().height), h && (g = h.getBoundingClientRect().height), v = p - c - a - g, y = x;
+  }
+  return {
+    width: y,
+    height: v
+  };
+}
+const Fe = ["id"], Pe = ["xmlns", "viewBox"], Ee = ["id"], De = ["stop-color"], Be = ["stop-color"], Ue = ["id"], Ve = ["stop-color"], Re = ["stop-color"], We = ["x", "y", "width", "height", "fill", "rx"], Xe = ["x", "y", "width", "height", "fill", "rx"], Ge = ["x", "y", "width", "height", "fill", "rx"], Ye = ["x", "y", "width", "height", "fill", "rx"], Je = { key: 0 }, je = ["x", "y", "fill", "font-size", "font-weight"], He = ["x", "y", "fill", "font-size", "font-weight"], qe = { key: 1 }, Ke = ["x", "y", "font-size", "fill", "font-weight"], Qe = { key: 2 }, Ze = { key: 0 }, et = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], tt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], lt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ot = ["x", "y", "font-size", "fill", "font-weight"], at = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], it = ["x", "y", "font-size", "fill", "font-weight"], st = ["x", "y", "font-size", "fill", "font-weight"], ut = ["x", "y", "width", "height", "fill", "onMouseover"], rt = {
+  __name: "vue-ui-age-pyramid",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(t, { expose: i }) {
+    const r = t, { vue_ui_age_pyramid: h } = Ae(), v = N(() => !!r.dataset && r.dataset.length), y = C(ce()), k = C(null), p = C(!1), x = C(""), c = C(null), a = C(0), g = C(null), L = C(null), e = N(() => {
+      const l = se({
+        userConfig: r.config,
+        defaultConfig: h
+      });
+      return l.theme ? {
+        ...se({
+          userConfig: Le.vue_ui_age_pyramid[l.theme] || r.config,
+          defaultConfig: l
+        })
+      } : l;
+    }), $ = C(null);
+    ye(() => {
+      if (pe(r.dataset) && be({
+        componentName: "VueUiAgePyramid",
+        type: "dataset"
+      }), e.value.responsive) {
+        const l = ze(() => {
+          const { width: n, height: o } = Me({
+            chart: g.value,
+            title: e.value.style.title.text ? L.value : null
+          });
+          T.value.width = n, T.value.height = o;
+        });
+        $.value = new ResizeObserver(l), $.value.observe(g.value.parentNode);
+      }
+    });
+    const { isPrinting: d, isImaging: z, generatePdf: K, generateImage: Q } = Ne({
+      elementId: `vue-ui-age-pyramid_${y.value}`,
+      fileName: e.value.style.title.text || "vue-ui-age-pyramid"
+    }), M = C({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.tooltip.show
+    }), T = C({
+      height: e.value.style.height,
+      width: e.value.style.width
+    }), u = N(() => {
+      const l = T.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, n = e.value.style.layout.padding.left, o = T.value.width - e.value.style.layout.padding.right;
+      return {
+        top: e.value.style.layout.padding.top,
+        left: n,
+        right: o,
+        bottom: T.value.height - e.value.style.layout.padding.bottom,
+        width: l,
+        height: T.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom,
+        centerX: e.value.style.layout.padding.left + l / 2,
+        leftChart: {
+          width: l / 2 - e.value.style.layout.centerSlit.width,
+          right: n + l / 2 - e.value.style.layout.centerSlit.width
+        },
+        rightChart: {
+          width: l / 2 - e.value.style.layout.centerSlit.width,
+          left: n + l / 2 + e.value.style.layout.centerSlit.width
+        }
+      };
+    }), ue = N(() => r.dataset.map((l) => e.value.style.layout.dataLabels.yAxis.display === "age" ? l[1] : l[0])), P = N(() => {
+      const l = re(U.value / 5), n = [], o = [];
+      for (let s = 0; s <= 5; s += 1) {
+        const m = l * s, le = l * (s - 5);
+        n.push({
+          value: m,
+          x: u.value.left + u.value.width / 2 + e.value.style.layout.centerSlit.width + m / U.value * u.value.leftChart.width
+        }), o.push({
+          value: Math.abs(le),
+          x: u.value.left + u.value.width / 2 + le / U.value * u.value.leftChart.width - e.value.style.layout.centerSlit.width
+        });
+      }
+      return {
+        right: n,
+        left: o
+      };
+    });
+    function re(l) {
+      if (l === 0) return 0;
+      const o = 10 ** Math.floor(Math.log10(Math.abs(l)));
+      let s;
+      return l < 0, s = Math.round(l / o) * o, s;
+    }
+    const U = N(() => Math.max(...r.dataset.flatMap((l) => l.slice(-2)))), E = N(() => r.dataset.length), ne = N(() => r.dataset.map((l) => ({
+      segment: l[0],
+      age: l[1],
+      left: {
+        value: l[2],
+        proportionToMax: l[2] / U.value
+      },
+      right: {
+        value: l[3],
+        proportionToMax: l[3] / U.value
+      }
+    }))), D = N(() => ne.value.map((l, n) => {
+      const o = u.value.top + u.value.height / E.value * n, s = u.value.height / E.value - e.value.style.layout.bars.gap;
+      return {
+        segment: l.segment,
+        age: l.age,
+        left: {
+          ...l.left,
+          y: o,
+          color: e.value.style.layout.bars.left.color,
+          x: u.value.leftChart.right - l.left.proportionToMax * u.value.leftChart.width,
+          width: l.left.proportionToMax * u.value.leftChart.width,
+          height: s
+        },
+        right: {
+          ...l.right,
+          y: o,
+          color: e.value.style.layout.bars.right.color,
+          x: u.value.rightChart.left,
+          width: l.right.proportionToMax * u.value.rightChart.width,
+          height: s
+        }
+      };
+    })), X = C(null);
+    function de(l, n) {
+      c.value = l, X.value = {
+        datapoint: n,
+        seriesIndex: l,
+        series: D.value,
+        config: e.value
+      };
+      const o = e.value.style.tooltip.customFormat;
+      if (xe(o) && _e(() => o({
+        seriesIndex: l,
+        datapoint: {
+          segment: n[0],
+          index: n[1],
+          left: n[2],
+          right: n[3]
+        },
+        series: D.value,
+        config: e.value
+      })))
+        x.value = o({
+          seriesIndex: l,
+          datapoint: {
+            segment: n[0],
+            index: n[1],
+            left: n[2],
+            right: n[3]
+          },
+          series: D.value,
+          config: e.value
+        });
+      else {
+        let s = "";
+        const m = D.value[l];
+        s += `<div><b>${m.segment}</b></div>`, s += `<div>${e.value.translations.age}: ${m.age}</div>`, s += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, s += '<div style="display:flex; flex-direction:row;gap:12px">', s += `<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_${y.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${m.left.value.toLocaleString()}</b></div></div>`, s += `<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_${y.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${m.right.value.toLocaleString()}</b></div></div>`, s += "</div>", s += `<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>${(m.left.value + m.right.value).toLocaleString()}</b></div></div>`, s += "</div>", x.value = `<div>${s}</div>`;
+      }
+      p.value = !0;
+    }
+    function Z() {
+      ve(() => {
+        const l = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], n = r.dataset.map((m) => [
+          m[0],
+          m[1],
+          m[2],
+          m[3],
+          m[2] + m[3]
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([l]).concat(n), s = ke(o);
+        Ce({ csvContent: s, title: e.value.style.title.text || "vue-ui-heatmap" });
+      });
+    }
+    const W = N(() => {
+      const l = [
+        e.value.translations.year,
+        e.value.translations.age,
+        e.value.translations.female,
+        e.value.translations.male,
+        e.value.translations.total
+      ], n = r.dataset.map((s) => [
+        s[0],
+        s[1],
+        s[2].toLocaleString(),
+        s[3].toLocaleString(),
+        (s[2] + s[3]).toLocaleString()
+      ]), o = {
+        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: l, body: n, config: o, colNames: l };
+    }), V = C(!1);
+    function he(l) {
+      V.value = l, a.value += 1;
+    }
+    function ee() {
+      M.value.showTable = !M.value.showTable;
+    }
+    function te() {
+      M.value.showTooltip = !M.value.showTooltip;
+    }
+    return i({
+      generatePdf: K,
+      generateCsv: Z,
+      generateImage: Q,
+      toggleTable: ee,
+      toggleTooltip: te
+    }), (l, n) => (f(), b("div", {
+      class: oe(`vue-ui-age-pyramid ${V.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      ref_key: "agePyramid",
+      ref: g,
+      id: `vue-ui-age-pyramid_${y.value}`,
+      style: G(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${e.value.style.title.text ? "" : "padding-top:36px"};background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`)
+    }, [
+      e.value.style.title.text ? (f(), b("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: L,
+        style: G(`width:100%;background:${e.value.style.backgroundColor}`)
+      }, [
+        Y(Te, {
+          config: {
+            title: {
+              cy: "pyramid-div-title",
+              ...e.value.style.title
+            },
+            subtitle: {
+              cy: "pyramid-div-subtitle",
+              ...e.value.style.title.subtitle
+            }
+          }
+        }, null, 8, ["config"])
+      ], 4)) : S("", !0),
+      e.value.userOptions.show && v.value ? (f(), J(Se, {
+        ref_key: "details",
+        ref: k,
+        key: `user_options_${a.value}`,
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        isImaging: I(z),
+        isPrinting: I(d),
+        uid: y.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: V.value,
+        isTooltip: M.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: g.value,
+        onToggleFullscreen: he,
+        onGeneratePdf: I(K),
+        onGenerateCsv: Z,
+        onGenerateImage: I(Q),
+        onToggleTable: ee,
+        onToggleTooltip: te
+      }, fe({ _: 2 }, [
+        l.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: A(() => [
+            O(l.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: A(() => [
+            O(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: A(() => [
+            O(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: A(() => [
+            O(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: A(() => [
+            O(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: A(({ toggleFullscreen: o, isFullscreen: s }) => [
+            O(l.$slots, "optionFullscreen", j(H({ toggleFullscreen: o, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : S("", !0),
+      v.value ? (f(), b("svg", {
+        key: 2,
+        xmlns: I(we),
+        class: oe({ "vue-data-ui-fullscreen--on": V.value, "vue-data-ui-fulscreen--off": !V.value }),
+        viewBox: `0 0 ${T.value.width <= 0 ? 10 : T.value.width} ${T.value.height <= 0 ? 10 : T.value.height}`,
+        style: G(`max-width:100%;overflow:visible;background:${e.value.style.backgroundColor};color:${e.value.style.color}`)
+      }, [
+        w("defs", null, [
+          w("linearGradient", {
+            id: `age_pyramid_left_${y.value}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%"
+          }, [
+            w("stop", {
+              offset: "0%",
+              "stop-color": e.value.style.layout.bars.left.color
+            }, null, 8, De),
+            w("stop", {
+              offset: "100%",
+              "stop-color": `${I(ie)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue)}${I(q)[100 - e.value.style.layout.bars.gradient.intensity]}`
+            }, null, 8, Be)
+          ], 8, Ee),
+          w("linearGradient", {
+            id: `age_pyramid_right_${y.value}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%"
+          }, [
+            w("stop", {
+              offset: "0%",
+              "stop-color": `${I(ie)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue)}${I(q)[100 - e.value.style.layout.bars.gradient.intensity]}`
+            }, null, 8, Ve),
+            w("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.layout.bars.right.color
+            }, null, 8, Re)
+          ], 8, Ue)
+        ]),
+        (f(!0), b(B, null, R(D.value, (o, s) => (f(), b("g", null, [
+          w("rect", {
+            x: o.left.x,
+            y: o.left.y,
+            width: o.left.width <= 0 ? 1e-4 : o.left.width,
+            height: o.left.height <= 0 ? 1e-4 : o.left.height,
+            fill: e.value.style.layout.bars.gradient.underlayer,
+            rx: e.value.style.layout.bars.borderRadius
+          }, null, 8, We),
+          w("rect", {
+            x: o.left.x,
+            y: o.left.y,
+            width: o.left.width <= 0 ? 1e-4 : o.left.width,
+            height: o.left.height <= 0 ? 1e-4 : o.left.height,
+            fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${y.value})` : o.left.color,
+            rx: e.value.style.layout.bars.borderRadius
+          }, null, 8, Xe),
+          w("rect", {
+            x: o.right.x,
+            y: o.right.y,
+            width: o.right.width <= 0 ? 1e-4 : o.right.width,
+            height: o.right.height <= 0 ? 1e-4 : o.right.height,
+            fill: e.value.style.layout.bars.gradient.underlayer,
+            rx: e.value.style.layout.bars.borderRadius
+          }, null, 8, Ge),
+          w("rect", {
+            x: o.right.x,
+            y: o.right.y,
+            width: o.right.width <= 0 ? 1e-4 : o.right.width,
+            height: o.right.height <= 0 ? 1e-4 : o.right.height,
+            fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${y.value})` : o.right.color,
+            rx: e.value.style.layout.bars.borderRadius
+          }, null, 8, Ye)
+        ]))), 256)),
+        w("g", null, [
+          e.value.style.layout.dataLabels.sideTitles.show ? (f(), b("g", Je, [
+            w("text", {
+              x: u.value.left,
+              y: u.value.top + e.value.style.layout.dataLabels.sideTitles.offsetY,
+              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"
+            }, F(e.value.translations.female), 9, je),
+            w("text", {
+              x: u.value.right,
+              y: u.value.top + e.value.style.layout.dataLabels.sideTitles.offsetY,
+              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"
+            }, F(e.value.translations.male), 9, He)
+          ])) : S("", !0),
+          e.value.style.layout.dataLabels.yAxis.show ? (f(), b("g", qe, [
+            (f(!0), b(B, null, R(ue.value, (o, s) => (f(), b(B, null, [
+              s % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (f(), b("text", {
+                key: 0,
+                x: u.value.centerX,
+                y: u.value.top + u.value.height / E.value * s + 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"
+              }, F(o), 9, Ke)) : S("", !0)
+            ], 64))), 256))
+          ])) : S("", !0),
+          e.value.style.layout.dataLabels.xAxis.show ? (f(), b("g", Qe, [
+            e.value.style.layout.grid.show ? (f(), b("g", Ze, [
+              w("line", {
+                x1: P.value.right[0].x,
+                x2: P.value.right.at(-1).x,
+                y1: u.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                y2: u.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, et),
+              w("line", {
+                x1: P.value.left[0].x,
+                x2: P.value.left.at(-1).x,
+                y1: u.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                y2: u.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, tt)
+            ])) : S("", !0),
+            (f(!0), b(B, null, R(P.value.right, (o) => (f(), b("g", null, [
+              e.value.style.layout.grid.show ? (f(), b("line", {
+                key: 0,
+                x1: o.x,
+                x2: o.x,
+                y1: u.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                y2: u.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 4,
+                stroke: e.value.style.layout.grid.stroke,
+                "stroke-width": e.value.style.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, lt)) : S("", !0),
+              w("text", {
+                x: o.x,
+                y: u.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2,
+                "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
+                fill: e.value.style.layout.dataLabels.xAxis.color,
+                "text-anchor": "middle",
+                "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
+              }, F(Number((o.value / e.value.style.layout.dataLabels.xAxis.scale).toFixed(0)).toLocaleString()), 9, ot)
+            ]))), 256)),
+            (f(!0), b(B, null, R(P.value.left, (o) => (f(), b("g", null, [
+              e.value.style.layout.grid.show ? (f(), b("line", {
+                key: 0,
+                x1: o.x,
+                x2: o.x,
+                y1: u.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                y2: u.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 4,
+                stroke: e.value.style.layout.grid.stroke,
+                "stroke-width": e.value.style.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, at)) : S("", !0),
+              w("text", {
+                x: o.x,
+                y: u.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2,
+                "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
+                fill: e.value.style.layout.dataLabels.xAxis.color,
+                "text-anchor": "middle",
+                "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
+              }, F(Number((o.value / e.value.style.layout.dataLabels.xAxis.scale).toFixed(0)).toLocaleString()), 9, it)
+            ]))), 256)),
+            w("text", {
+              x: u.value.right,
+              y: T.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"
+            }, F(e.value.style.layout.dataLabels.xAxis.translation), 9, st)
+          ])) : S("", !0)
+        ]),
+        (f(!0), b(B, null, R(t.dataset, (o, s) => (f(), b("g", null, [
+          w("rect", {
+            x: u.value.left,
+            y: u.value.top + u.value.height / E.value * s - e.value.style.layout.bars.gap / 2,
+            width: u.value.width <= 0 ? 1e-4 : u.value.width,
+            height: u.value.height / E.value <= 0 ? 1e-4 : u.value.height / E.value,
+            fill: c.value !== null && c.value === s ? `${e.value.style.highlighter.color}${I(q)[e.value.style.highlighter.opacity]}` : "transparent",
+            onMouseover: (m) => de(s, o),
+            onMouseleave: n[0] || (n[0] = (m) => {
+              c.value = null, p.value = !1;
+            })
+          }, null, 40, ut)
+        ]))), 256)),
+        O(l.$slots, "svg", { svg: T.value }, void 0, !0)
+      ], 14, Pe)) : S("", !0),
+      v.value ? S("", !0) : (f(), J(Ie, {
+        key: 3,
+        config: {
+          type: "pyramid",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            pyramid: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      O(l.$slots, "legend", { legend: D.value }, void 0, !0),
+      Y($e, {
+        show: M.value.showTooltip && p.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,
+        parent: g.value,
+        content: x.value,
+        isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function"
+      }, {
+        "tooltip-before": A(() => [
+          O(l.$slots, "tooltip-before", j(H({ ...X.value })), void 0, !0)
+        ]),
+        "tooltip-after": A(() => [
+          O(l.$slots, "tooltip-after", j(H({ ...X.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "parent", "content", "isCustom"]),
+      v.value ? (f(), J(Oe, {
+        key: 4,
+        hideDetails: "",
+        config: {
+          open: M.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: e.value.style.backgroundColor,
+            color: e.value.style.color
+          },
+          head: {
+            backgroundColor: e.value.style.backgroundColor,
+            color: e.value.style.color
+          }
+        }
+      }, {
+        content: A(() => [
+          Y(me, {
+            colNames: W.value.colNames,
+            head: W.value.head,
+            body: W.value.body,
+            config: W.value.config,
+            title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
+            onClose: n[1] || (n[1] = (o) => M.value.showTable = !1)
+          }, {
+            th: A(({ th: o }) => [
+              ae(F(o), 1)
+            ]),
+            td: A(({ td: o }) => [
+              ae(F(o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"])
+        ]),
+        _: 1
+      }, 8, ["config"])) : S("", !0)
+    ], 14, Fe));
+  }
+}, nt = /* @__PURE__ */ ge(rt, [["__scopeId", "data-v-44b2f1f2"]]), Ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: nt
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  pt as a,
+  xt as b,
+  kt as c,
+  _t as d,
+  Ct as e,
+  bt as l,
+  wt as p,
+  mt as r,
+  ze as t,
+  Me as u,
+  nt as v
+};