vue-data-ui 3.0.23 → 3.1.1

package/dist/vue-ui-galaxy-BwsZnU6T.js

@@ -0,0 +1,744 @@
+import { defineAsyncComponent as x, ref as o, computed as i, toRefs as ht, onMounted as pt, watch as Oe, createElementBlock as v, openBlock as n, unref as u, normalizeStyle as R, normalizeClass as G, createBlock as T, createCommentVNode as c, createElementVNode as k, createVNode as te, createSlots as Ie, withCtx as d, renderSlot as p, normalizeProps as I, guardReactiveProps as L, Fragment as Le, renderList as De, Teleport as gt, toDisplayString as D, resolveDynamicComponent as yt, mergeProps as ft, createTextVNode as Ae, nextTick as Ne } from "vue";
+import { u as bt, c as Fe, t as mt, o as kt, f as Be, g as wt, a as Ct, p as H, b as $t, d as xt, G as Ve, e as Tt, M as Pt, i as P, X as _t, k as Me, y as Ee, v as St, w as Ot, z as It } from "./index-BKQqb9lF.js";
+import { t as Lt, u as Dt } from "./useResponsive-DfdjqQps.js";
+import { u as At, B as Nt } from "./BaseScanner-BgWxam9d.js";
+import { u as Ft } from "./usePrinter-BzuXiubT.js";
+import { u as We } from "./useNestedProp-aBOhgs4U.js";
+import { u as Bt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Vt } from "./useChartAccessibility-9icAAmYg.js";
+import Mt from "./img-gBDz7xQQ.js";
+import Et from "./Title-Dz-j6ERs.js";
+import Wt from "./Legend-8_V5egWW.js";
+import { _ as zt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Rt = ["id"], Gt = ["id"], Ht = ["xmlns", "viewBox"], Ut = ["width", "height"], Xt = ["id"], Yt = ["stdDeviation"], jt = ["d", "stroke", "stroke-width"], qt = ["d", "stroke", "stroke-width"], Jt = ["filter"], Kt = ["d", "stroke", "stroke-width"], Qt = ["d", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Zt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, el = ["id"], tl = ["onClick"], ll = ["innerHTML"], al = {
+  __name: "vue-ui-galaxy",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint"],
+  setup(ze, { expose: Re, emit: Ge }) {
+    const He = x(() => import("./Tooltip-BTGOEC7w.js")), Ue = x(() => import("./BaseIcon-DLesaZpW.js")), Xe = x(() => import("./vue-ui-accordion-B5QeV3BK.js")), Ye = x(() => import("./DataTable-BAf4Obr9.js")), je = x(() => import("./PenAndPaper-B6OvfyHH.js")), qe = x(() => import("./UserOptions-CsDlFB0L.js")), Je = x(() => import("./PackageVersion-Cv_ypT0N.js")), Ke = x(() => import("./BaseDraggableDialog-B2BQC0-h.js")), { vue_ui_galaxy: Qe } = bt(), w = ze, f = o(Fe()), b = o(null), Ze = o(null), U = o(!1), X = o(""), _ = o(null), le = o(0), ae = o(0), oe = o(0), se = o(0), ue = o(null), ne = o(null), re = o(null), ie = o(null), A = o(null), V = o(null), ve = o(!1), N = o(null), ce = i(() => !!w.dataset && w.dataset.length), e = o(q()), { loading: Y, FINAL_DATASET: de } = At({
+      ...ht(w),
+      FINAL_CONFIG: e,
+      prepareConfig: q,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Ne(), g.value.showTable = e.value.table.show;
+        });
+      },
+      skeletonDataset: [
+        { name: "_", values: [21], color: "#DBDBDB" },
+        { name: "_", values: [13], color: "#C4C4C4" },
+        { name: "_", values: [8], color: "#ADADAD" }
+      ],
+      skeletonConfig: mt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          useCssAnimation: !1,
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              legend: {
+                backgroundColor: "transparent"
+              }
+            }
+          }
+        }
+      })
+    });
+    pt(() => {
+      ve.value = !0, pe();
+    });
+    const he = i(() => !!e.value.debug);
+    function pe() {
+      if (kt(w.dataset) ? Be({
+        componentName: "VueUiGalaxy",
+        type: "dataset",
+        debug: he.value
+      }) : w.dataset.forEach((t, a) => {
+        wt({
+          datasetObject: t,
+          requiredAttributes: ["name", "values"]
+        }).forEach((l) => {
+          Be({
+            componentName: "VueUiGalaxy",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: he.value
+          });
+        });
+      }), e.value.responsive) {
+        const t = Lt(() => {
+          const { width: a, height: l } = Dt({
+            chart: b.value,
+            title: e.value.style.chart.title.text ? ue.value : null,
+            legend: e.value.style.chart.legend.show ? ne.value : null,
+            noTitle: ie.value,
+            source: re.value
+          });
+          requestAnimationFrame(() => {
+            M.value = Math.max(0.1, a), E.value = Math.max(0.1, l - 12);
+          });
+        });
+        A.value && (V.value && A.value.unobserve(V.value), A.value.disconnect()), A.value = new ResizeObserver(t), V.value = b.value.parentNode, A.value.observe(V.value);
+      }
+    }
+    const { userOptionsVisible: j, setUserOptionsVisibility: ge, keepUserOptionState: ye } = Bt({ config: e.value }), { svgRef: fe } = Vt({ config: e.value.style.chart.title });
+    function q() {
+      const t = We({
+        userConfig: w.config,
+        defaultConfig: Qe
+      });
+      return t.theme ? {
+        ...We({
+          userConfig: $t.vue_ui_galaxy[t.theme] || w.config,
+          defaultConfig: t
+        }),
+        customPalette: Ct[t.theme] || H
+      } : t;
+    }
+    Oe(() => w.config, (t) => {
+      e.value = q(), j.value = !e.value.userOptions.showOnChartHover, pe(), ae.value += 1, oe.value += 1, se.value += 1, g.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, g.value.showTable = e.value.table.show, g.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const { isPrinting: be, isImaging: me, generatePdf: ke, generateImage: we } = Ft({
+      elementId: `galaxy_${f.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-galaxy",
+      options: e.value.userOptions.print
+    }), et = i(() => e.value.userOptions.show && !e.value.style.chart.title.text), tt = i(() => xt(e.value.customPalette)), g = o({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), M = o(250), E = o(180), lt = o(0), at = o(0), C = i(() => ({
+      width: M.value,
+      height: E.value,
+      viewBox: `${lt.value} ${at.value} ${M.value} ${E.value}`
+    })), Ce = Ge, y = o([]);
+    function J(t) {
+      y.value.includes(t.id) ? y.value = y.value.filter((a) => a !== t.id) : y.value.push(t.id), Ce("selectLegend", F.value.map((a) => ({
+        name: a.name,
+        color: a.color,
+        value: a.value
+      })));
+    }
+    const S = i(() => de.value.map((t, a) => ({
+      name: t.name,
+      color: Tt(t.color) || tt.value[a] || H[a] || H[a % H.length],
+      value: t.values ? Ve(t.values).reduce((l, s) => l + s, 0) : 0,
+      absoluteValues: Ve(t.values),
+      id: Fe()
+    })).sort((t, a) => a.value - t.value).map((t, a) => ({
+      ...t,
+      absoluteIndex: a
+    })));
+    function ot() {
+      return S.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        value: t.value
+      }));
+    }
+    const m = i(() => S.value.filter((t) => !y.value.includes(t.id)).map((t) => t.value).reduce((t, a) => t + a, 0)), $e = o(190), xe = i(() => S.value.filter((t) => !y.value.includes(t.id))), st = i(
+      () => (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) / 2 + (e.value.style.chart.layout.padding ?? 12)
+    ), ut = i(() => Pt({
+      maxPoints: $e.value,
+      a: e.value.style.chart.layout.arcs.a ?? 6,
+      b: e.value.style.chart.layout.arcs.b ?? 6,
+      angleStep: e.value.style.chart.layout.arcs.angleStep ?? 0.07,
+      startX: C.value.width / 2 + e.value.style.chart.layout.arcs.offsetX,
+      startY: C.value.height / 2 + e.value.style.chart.layout.arcs.offsetY,
+      boxWidth: C.value.width,
+      boxHeight: C.value.height,
+      padding: st.value
+    })), F = i(() => {
+      const t = [];
+      for (let a = 0; a < xe.value.length; a += 1) {
+        const l = xe.value[a], s = l.value / m.value * $e.value + (a > 0 && t.length ? t[a - 1].points : 0);
+        t.push({
+          points: s,
+          ...l,
+          seriesIndex: a,
+          proportion: l.value / m.value,
+          path: ut.value(s)
+        });
+      }
+      return t.filter((a) => !y.value.includes(a.id)).toSorted((a, l) => l.points - a.points);
+    });
+    function K(t) {
+      const a = Math.min(M.value, E.value), l = _.value === t.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1, s = (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) * l, r = e.value.style.chart.layout.arcs.strokeWidth * l, h = e.value.style.chart.layout.arcs.strokeWidth / 2 * l;
+      return {
+        border: s / 180 * a,
+        path: r / 180 * a,
+        blur: h / 180 * a
+      };
+    }
+    const O = o(!1);
+    function Te(t) {
+      O.value = t, le.value += 1;
+    }
+    const Q = o(null);
+    function nt(t) {
+      U.value = !1, _.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    function rt(t) {
+      Ce("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    function it({ datapoint: t, _relativeIndex: a, seriesIndex: l, show: s = !1 }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex }), Q.value = {
+        datapoint: t,
+        seriesIndex: l,
+        series: S.value,
+        config: e.value
+      }, U.value = s, _.value = t.id;
+      let r = "";
+      const h = e.value.style.chart.tooltip.customFormat;
+      Ee(h) && It(() => h({
+        seriesIndex: l,
+        datapoint: t,
+        series: S.value,
+        config: e.value
+      })) ? X.value = h({
+        seriesIndex: l,
+        datapoint: t,
+        series: S.value,
+        config: e.value
+      }) : (r += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, r += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, e.value.style.chart.tooltip.showValue && (r += `<b>${Me(
+        e.value.style.chart.layout.labels.dataLabels.formatter,
+        t.value,
+        P({
+          p: e.value.style.chart.layout.labels.dataLabels.prefix,
+          v: t.value,
+          s: e.value.style.chart.layout.labels.dataLabels.suffix,
+          r: e.value.style.chart.tooltip.roundingValue
+        }),
+        { datapoint: t, seriesIndex: l }
+      )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? r += `<span>(${P({
+        v: t.proportion * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })})</span></div>` : r += `<b>${P({
+        v: t.proportion * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })}</b></div>`), X.value = `<div>${r}</div>`);
+    }
+    const Pe = i(() => S.value.map((t, a) => ({
+      ...t,
+      proportion: (t.value || 0) / de.value.map((l) => (l.values || []).reduce((s, r) => s + r, 0)).reduce((l, s) => l + s, 0),
+      opacity: y.value.includes(t.id) ? 0.5 : 1,
+      shape: t.shape || "circle",
+      segregate: () => J(t),
+      isSegregated: y.value.includes(t.id)
+    }))), vt = i(() => ({
+      cy: "galaxy-div-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    })), $ = i(() => {
+      const t = F.value.map((l) => ({
+        name: l.name,
+        color: l.color
+      })), a = F.value.map((l) => l.value);
+      return { head: t, body: a };
+    });
+    function Z(t = null) {
+      Ne(() => {
+        const a = $.value.head.map((r, h) => [[
+          r.name
+        ], [$.value.body[h]], [isNaN($.value.body[h] / m.value) ? "-" : $.value.body[h] / m.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), s = St(l);
+        t ? t(s) : Ot({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-galaxy" });
+      });
+    }
+    const W = i(() => {
+      const t = [
+        ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
+        P({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: m.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
+        "100%"
+      ], a = $.value.head.map((r, h) => {
+        const dt = P({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: $.value.body[h], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
+        return [
+          {
+            color: r.color,
+            name: r.name
+          },
+          dt,
+          isNaN($.value.body[h] / m.value) ? "-" : P({
+            v: $.value.body[h] / m.value * 100,
+            s: "%",
+            r: e.value.table.td.roundingPercentage
+          })
+        ];
+      }), 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 {
+        colNames: [
+          e.value.table.columnNames.series,
+          e.value.table.columnNames.value,
+          e.value.table.columnNames.percentage
+        ],
+        head: t,
+        body: a,
+        config: l
+      };
+    });
+    function _e() {
+      g.value.showTable = !g.value.showTable;
+    }
+    function Se() {
+      g.value.showTooltip = !g.value.showTooltip;
+    }
+    const z = o(!1);
+    function ee() {
+      z.value = !z.value;
+    }
+    async function ct({ scale: t = 2 } = {}) {
+      if (!b.value) return;
+      const { width: a, height: l } = b.value.getBoundingClientRect(), s = a / l, { imageUri: r, base64: h } = await Mt({ domElement: b.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: r,
+        base64: h,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: s
+      };
+    }
+    const B = i(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = g.value.showTable;
+      return {
+        component: t ? Ke : Xe,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.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: b.value,
+          forcedWidth: Math.min(500, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    return Oe(() => g.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && N.value ? N.value.open() : "close" in N.value && N.value.close());
+    }), Re({
+      getData: ot,
+      getImage: ct,
+      generatePdf: ke,
+      generateCsv: Z,
+      generateImage: we,
+      toggleTable: _e,
+      toggleTooltip: Se,
+      toggleAnnotator: ee,
+      toggleFullscreen: Te
+    }), (t, a) => (n(), v("div", {
+      ref_key: "galaxyChart",
+      ref: b,
+      class: G(`vue-ui-galaxy ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${u(Y) ? "loading" : ""}`),
+      style: R(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
+      id: `galaxy_${f.value}`,
+      onMouseenter: a[4] || (a[4] = () => u(ge)(!0)),
+      onMouseleave: a[5] || (a[5] = () => u(ge)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (n(), T(u(je), {
+        key: 0,
+        svgRef: u(fe),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: z.value,
+        onClose: ee
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
+      et.value ? (n(), v("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: ie,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : c("", !0),
+      e.value.style.chart.title.text ? (n(), v("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ue,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (n(), T(Et, {
+          key: `title_${ae.value}`,
+          config: {
+            title: {
+              cy: "galaxy-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "galaxy-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : c("", !0),
+      k("div", {
+        id: `legend-top-${f.value}`
+      }, null, 8, Gt),
+      e.value.userOptions.show && ce.value && (u(ye) || u(j)) ? (n(), T(u(qe), {
+        ref_key: "details",
+        ref: Ze,
+        key: `user_option_${le.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: u(be),
+        isImaging: u(me),
+        uid: f.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.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,
+        isTooltip: g.value.showTooltip,
+        isFullscreen: O.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: b.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: z.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Te,
+        onGeneratePdf: u(ke),
+        onGenerateCsv: Z,
+        onGenerateImage: u(we),
+        onToggleTable: _e,
+        onToggleTooltip: Se,
+        onToggleAnnotator: ee,
+        style: R({
+          visibility: u(ye) ? u(j) ? "visible" : "hidden" : "visible"
+        })
+      }, Ie({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: d(({ isOpen: l, color: s }) => [
+            p(t.$slots, "menuIcon", I(L({ isOpen: l, color: s })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: d(() => [
+            p(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: d(() => [
+            p(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: d(() => [
+            p(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: d(() => [
+            p(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: d(() => [
+            p(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: d(({ toggleFullscreen: l, isFullscreen: s }) => [
+            p(t.$slots, "optionFullscreen", I(L({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: d(({ toggleAnnotator: l, isAnnotator: s }) => [
+            p(t.$slots, "optionAnnotator", I(L({ toggleAnnotator: l, isAnnotator: s })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
+      (n(), v("svg", {
+        ref_key: "svgRef",
+        ref: fe,
+        xmlns: u(_t),
+        class: G({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
+        viewBox: C.value.viewBox,
+        style: R(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        te(u(Je)),
+        t.$slots["chart-background"] ? (n(), v("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: C.value.width,
+          height: C.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          p(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Ut)) : c("", !0),
+        k("defs", null, [
+          k("filter", {
+            id: `blur_${f.value}`,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%"
+          }, [
+            k("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: 100 / e.value.style.chart.layout.arcs.gradient.intensity
+            }, null, 8, Yt)
+          ], 8, Xt)
+        ]),
+        (n(!0), v(Le, null, De(F.value, (l) => (n(), v("g", null, [
+          l.value ? (n(), v("path", {
+            key: 0,
+            d: l.path,
+            fill: "none",
+            stroke: e.value.style.chart.backgroundColor,
+            "stroke-width": K(l).border,
+            "stroke-linecap": "round"
+          }, null, 8, jt)) : c("", !0),
+          l.value ? (n(), v("path", {
+            key: 1,
+            d: l.path,
+            fill: "none",
+            stroke: l.color,
+            "stroke-width": K(l).path,
+            "stroke-linecap": "round",
+            class: G(`${_.value && _.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
+          }, null, 10, qt)) : c("", !0),
+          l.value && e.value.style.chart.layout.arcs.gradient.show ? (n(), v("g", {
+            key: 2,
+            filter: `url(#blur_${f.value})`
+          }, [
+            k("path", {
+              d: l.path,
+              fill: "none",
+              stroke: e.value.style.chart.layout.arcs.gradient.color,
+              "stroke-width": K(l).blur,
+              "stroke-linecap": "round",
+              class: G(`vue-ui-galaxy-gradient ${_.value && _.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
+            }, null, 10, Kt)
+          ], 8, Jt)) : c("", !0)
+        ]))), 256)),
+        (n(!0), v(Le, null, De(F.value, (l, s) => (n(), v("g", null, [
+          l.value ? (n(), v("path", {
+            key: 0,
+            d: l.path,
+            fill: "none",
+            stroke: "transparent",
+            "stroke-width": e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth,
+            "stroke-linecap": "round",
+            onMouseenter: (r) => it({
+              datapoint: l,
+              seriesIndex: l.seriesIndex,
+              show: !0
+            }),
+            onMouseleave: (r) => nt(l),
+            onClick: (r) => rt(l)
+          }, null, 40, Qt)) : c("", !0)
+        ]))), 256)),
+        p(t.$slots, "svg", { svg: C.value }, void 0, !0)
+      ], 14, Ht)),
+      t.$slots.watermark ? (n(), v("div", Zt, [
+        p(t.$slots, "watermark", I(L({ isPrinting: u(be) || u(me) })), void 0, !0)
+      ])) : c("", !0),
+      k("div", {
+        id: `legend-bottom-${f.value}`
+      }, null, 8, el),
+      ve.value ? (n(), T(gt, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${f.value}` : `#legend-bottom-${f.value}`
+      }, [
+        k("div", {
+          ref_key: "chartLegend",
+          ref: ne
+        }, [
+          e.value.style.chart.legend.show ? (n(), T(Wt, {
+            key: `legend_${se.value}`,
+            legendSet: Pe.value,
+            config: vt.value,
+            onClickMarker: a[0] || (a[0] = ({ legend: l }) => J(l))
+          }, {
+            item: d(({ legend: l, index: s }) => [
+              u(Y) ? c("", !0) : (n(), v("div", {
+                key: 0,
+                onClick: (r) => J(l),
+                style: R(`opacity:${y.value.includes(l.id) ? 0.5 : 1}`)
+              }, D(l.name) + D(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + D(e.value.style.chart.legend.showValue ? u(Me)(
+                e.value.style.chart.layout.labels.dataLabels.formatter,
+                l.value,
+                u(P)({
+                  p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                  v: l.value,
+                  s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                  r: e.value.style.chart.legend.roundingValue
+                }),
+                { datapoint: l, seriesIndex: s }
+              ) : "") + " " + D(e.value.style.chart.legend.showPercentage ? y.value.includes(l.id) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / m.value) ? "-" : u(P)({
+                v: l.value / m.value * 100,
+                s: "%",
+                r: e.value.style.chart.legend.roundingPercentage
+              })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, tl))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : c("", !0),
+          p(t.$slots, "legend", { legend: Pe.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : c("", !0),
+      t.$slots.source ? (n(), v("div", {
+        key: 6,
+        ref_key: "source",
+        ref: re,
+        dir: "auto"
+      }, [
+        p(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : c("", !0),
+      te(u(He), {
+        show: g.value.showTooltip && U.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: b.value,
+        content: X.value,
+        isFullscreen: O.value,
+        isCustom: u(Ee)(e.value.style.chart.tooltip.customFormat),
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter
+      }, {
+        "tooltip-before": d(() => [
+          p(t.$slots, "tooltip-before", I(L({ ...Q.value })), void 0, !0)
+        ]),
+        "tooltip-after": d(() => [
+          p(t.$slots, "tooltip-after", I(L({ ...Q.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
+      ce.value ? (n(), T(yt(B.value.component), ft({ key: 7 }, B.value.props, {
+        ref_key: "tableUnit",
+        ref: N,
+        onClose: a[3] || (a[3] = (l) => g.value.showTable = !1)
+      }), Ie({
+        content: d(() => [
+          (n(), T(u(Ye), {
+            key: `table_${oe.value}`,
+            colNames: W.value.colNames,
+            head: W.value.head,
+            body: W.value.body,
+            config: W.value.config,
+            title: e.value.table.useDialog ? "" : B.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: a[2] || (a[2] = (l) => g.value.showTable = !1)
+          }, {
+            th: d(({ th: l }) => [
+              k("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, ll)
+            ]),
+            td: d(({ td: l }) => [
+              Ae(D(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: d(() => [
+            Ae(D(B.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: d(() => [
+            k("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[1] || (a[1] = (l) => Z(e.value.userOptions.callbacks.csv))
+            }, [
+              te(u(Ue), {
+                name: "excel",
+                stroke: B.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : c("", !0),
+      u(Y) ? (n(), T(Nt, { key: 8 })) : c("", !0)
+    ], 46, Rt));
+  }
+}, yl = /* @__PURE__ */ zt(al, [["__scopeId", "data-v-7ec3c806"]]);
+export {
+  yl as default
+};