vue-data-ui 3.0.0-next.7 → 3.0.0-next.71

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

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