vue-data-ui 2.2.90 → 2.2.92

package/dist/vue-ui-nested-donuts-9URpqgXE.js

@@ -0,0 +1,768 @@
+import { computed as k, ref as d, onMounted as Me, onBeforeUnmount as Be, watch as Ue, openBlock as u, createElementBlock as n, normalizeClass as O, normalizeStyle as le, createVNode as ae, createCommentVNode as y, createBlock as W, unref as c, createSlots as Re, withCtx as m, renderSlot as C, normalizeProps as oe, guardReactiveProps as se, createElementVNode as b, Fragment as x, renderList as $, toDisplayString as N, createTextVNode as H, nextTick as Ee, pushScopeId as Ge, popScopeId as Xe } from "vue";
+import { _ as Ye, e as We, f as He, p as q, i as qe, j as P, g as je, h as Je, m as ke, n as T, X as Ke, H as Qe, s as A, u as ue, y as $e, D as Ze, z as et, v as tt, w as lt } from "./data-table-d-VcuH-r.js";
+import { t as at, u as ot } from "./vue-ui-age-pyramid-4hcuKpFY.js";
+import { t as st } from "./themes-lgjsYHsH.js";
+import { u as Ce, _ as ut } from "./title-BF-9Qcni.js";
+import { U as nt } from "./user-options-DZgCz8UA.js";
+import { _ as rt } from "./tooltip-D85WEOKi.js";
+import { L as it } from "./legend-DJCYLsl_.js";
+import { u as dt, a as ct, S as vt, A as ht } from "./vue-ui-3d-bar-DW7kGJSz.js";
+const ne = (V) => (Ge("data-v-fbefb973"), V = V(), Xe(), V), ft = ["id"], yt = ["xmlns", "viewBox"], bt = ["id", "fr"], pt = /* @__PURE__ */ ne(() => /* @__PURE__ */ b("stop", {
+  offset: "0%",
+  "stop-color": "#FFFFFF",
+  "stop-opacity": "0"
+}, null, -1)), gt = ["offset", "stop-opacity"], mt = /* @__PURE__ */ ne(() => /* @__PURE__ */ b("stop", {
+  offset: "100%",
+  "stop-color": "#FFFFFF",
+  "stop-opacity": "0"
+}, null, -1)), xt = ["id"], wt = ["id"], _t = /* @__PURE__ */ ne(() => /* @__PURE__ */ b("feColorMatrix", {
+  type: "saturate",
+  values: "0"
+}, null, -1)), kt = ["id"], $t = ["flood-color"], Ct = ["cx", "cy", "r", "fill", "filter"], Lt = ["d", "fill", "stroke", "stroke-width", "filter"], St = { key: 0 }, Ft = ["d", "fill"], Nt = { key: 1 }, Tt = ["x", "y", "font-size", "font-weight", "fill"], It = { key: 2 }, zt = ["filter"], Dt = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Ot = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Pt = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], At = ["d", "fill", "onMouseenter", "onClick"], Vt = {
+  key: 0,
+  class: "vue-ui-nested-donuts-legend-title"
+}, Mt = ["onClick"], Bt = ["innerHTML"], Ut = {
+  __name: "vue-ui-nested-donuts",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint"],
+  setup(V, { expose: Le, emit: re }) {
+    const z = V, { vue_ui_nested_donuts: Se } = dt(), R = k(() => !!z.dataset && z.dataset.length), p = d(We()), j = d(!1), J = d(""), Fe = d(null), ie = d(0), M = d(null), de = d(null), K = d(null), B = d(!1);
+    function Ne(t) {
+      B.value = t, ie.value += 1;
+    }
+    const e = k(() => {
+      const t = Ce({
+        userConfig: z.config,
+        defaultConfig: Se
+      });
+      return t.theme ? {
+        ...Ce({
+          userConfig: st.vue_ui_nested_donuts[t.theme] || z.config,
+          defaultConfig: t
+        }),
+        customPalette: He[t.theme] || q
+      } : t;
+    }), E = d(null);
+    Me(() => {
+      if (qe(z.dataset) && P({
+        componentName: "VueUiNestedDonuts",
+        type: "dataset"
+      }), e.value.responsive) {
+        const t = at(() => {
+          const { width: s, height: l } = ot({
+            chart: M.value,
+            title: e.value.style.chart.title.text ? de.value : null,
+            legend: e.value.style.chart.legend.show ? K.value : null
+          });
+          v.value.width = s, v.value.height = l;
+        });
+        E.value = new ResizeObserver(t), E.value.observe(M.value.parentNode);
+      }
+    }), Be(() => {
+      E.value && E.value.disconnect();
+    });
+    const { isPrinting: Te, isImaging: Ie, generatePdf: ce, generateImage: ve } = ct({
+      elementId: `nested_donuts_${p.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-nested-donuts"
+    }), ze = k(() => je(e.value.customPalette)), w = d({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), v = d({
+      height: 512,
+      width: 512
+    });
+    function De({ datapoint: t, index: s }) {
+      re("selectDatapoint", { datapoint: t, index: s });
+    }
+    const f = d([]), L = k(() => (z.dataset.forEach((t, s) => {
+      [null, void 0].includes(t.name) && P({
+        componentName: "VueUiNestedDonuts",
+        type: "datasetSerieAttribute",
+        property: "name",
+        index: s
+      }), [null, void 0].includes(t.series) ? P({
+        componentName: "VueUiNestedDonuts",
+        type: "datasetSerieAttribute",
+        property: "series",
+        index: s
+      }) : t.series.length === 0 ? P({
+        componentName: "VueUiNestedDonuts",
+        type: "datasetAttributeEmpty",
+        property: `series at index ${s}`
+      }) : t.series.forEach((l, a) => {
+        [null, void 0].includes(l.name) && P({
+          componentName: "VueUiNestedDonuts",
+          type: "datasetSerieAttribute",
+          property: "name",
+          index: a,
+          key: "serie"
+        }), [null, void 0].includes(l.values) && P({
+          componentName: "VueUiNestedDonuts",
+          type: "datasetSerieAttribute",
+          property: "values",
+          index: a,
+          key: "serie"
+        });
+      });
+    }), z.dataset.map((t, s) => ({
+      ...t,
+      total: t.series.filter((l) => !f.value.includes(l.id)).map((l) => (l.values || []).reduce((a, o) => a + o, 0)).reduce((l, a) => l + a, 0),
+      datasetIndex: s,
+      id: `${p.value}_${s}`,
+      series: t.series.map((l, a) => ({
+        name: l.name,
+        arcOf: t.name,
+        arcOfId: `${p.value}_${s}`,
+        id: `${p.value}_${s}_${a}`,
+        seriesIndex: a,
+        datasetIndex: s,
+        color: Je(l.color) || ze.value[a] || q[a] || q[a % q.length],
+        value: (l.values || []).reduce((o, r) => o + r, 0),
+        absoluteValues: l.values || []
+      }))
+    }))));
+    d(e.value.style.chart.layout.donut.strokeWidth);
+    const S = k(() => Math.min(v.value.height, v.value.width) * (e.value.style.chart.layout.donut.strokeWidth / 512)), he = k(() => [...L.value].map((t, s) => {
+      const l = t.series.filter((a) => !f.value.includes(a.id)).map((a) => a.value).reduce((a, o) => a + o, 0);
+      return {
+        ...t,
+        total: l,
+        series: t.series.filter((a) => !f.value.includes(a.id)).map((a) => ({
+          ...a,
+          proportion: a.value / l
+        }))
+      };
+    }));
+    function Oe(t, s, l) {
+      let a = 0;
+      for (let o = 0; o < t.length; o += 1)
+        l.includes(t[o]) && (a += 1);
+      return a < s;
+    }
+    const h = d(he.value);
+    Ue(() => he.value, (t) => h.value = t);
+    const fe = d(null), ye = d(null);
+    function Q(t) {
+      re("selectLegend", t);
+      const s = L.value.flatMap((i) => i.series).find((i) => i.id === t.id), l = h.value.flatMap((i) => i.series).find((i) => i.id === t.id);
+      let o = l ? l.value : 0;
+      const r = L.value.find((i) => i.id === s.arcOfId).series.map((i) => i.id), g = Oe(r, r.length - 1, f.value);
+      if (f.value.includes(t.id)) {
+        let i = function() {
+          o > s.value ? (cancelAnimationFrame(fe.value), h.value = h.value.map((_) => ({
+            ..._,
+            series: _.series.map((F) => F.id == t.id ? {
+              ...F,
+              value: s.value
+            } : F)
+          }))) : (o += s.value * 0.025, h.value = h.value.map((_) => ({
+            ..._,
+            series: _.series.map((F) => F.id === t.id ? {
+              ...F,
+              value: o
+            } : F)
+          })), fe.value = requestAnimationFrame(i));
+        };
+        f.value = f.value.filter((_) => _ !== t.id), i();
+      } else if (g) {
+        let i = function() {
+          o < 0.1 ? (cancelAnimationFrame(ye.value), f.value.push(t.id), h.value = h.value.map((_, F) => ({
+            ..._,
+            series: _.series.map((D) => D.id === t.id ? {
+              ...D,
+              value: 0
+            } : D)
+          }))) : (o /= 1.1, h.value = h.value.map((_, F) => ({
+            ..._,
+            series: _.series.map((D) => D.id === t.id ? {
+              ...D,
+              value: o
+            } : D)
+          })), ye.value = requestAnimationFrame(i));
+        };
+        i();
+      }
+    }
+    const U = k(() => h.value.map((t, s) => {
+      const l = s * S.value / L.value.length;
+      return {
+        ...t,
+        radius: S.value - l,
+        donut: ke(
+          { series: t.series },
+          v.value.width / 2,
+          v.value.height / 2,
+          S.value - l,
+          S.value - l,
+          1.99999,
+          2,
+          1,
+          360,
+          105.25,
+          S.value / L.value.length * e.value.style.chart.layout.donut.spacingRatio
+        )
+      };
+    })), be = k(() => [...L.value].map((t, s) => {
+      const l = s * S.value / L.value.length;
+      return {
+        sizeRatio: l,
+        donut: ke(
+          { series: [{ value: 1 }] },
+          v.value.width / 2,
+          v.value.height / 2,
+          S.value - l,
+          S.value - l,
+          1.99999,
+          2,
+          1,
+          360,
+          105.25,
+          S.value / L.value.length * e.value.style.chart.layout.donut.spacingRatio
+        )[0]
+      };
+    })), pe = d(null), G = d(null), X = d(null), Z = d(null);
+    function Pe({ datapoint: t, _relativeIndex: s, seriesIndex: l }) {
+      pe.value = t.arcOfId, G.value = t.id, X.value = l, Z.value = {
+        datapoint: t,
+        seriesIndex: l,
+        series: h.value,
+        config: e.value
+      };
+      const a = e.value.style.chart.tooltip.customFormat;
+      if ($e(a) && et(() => a({
+        seriesIndex: l,
+        datapoint: t,
+        series: h.value,
+        config: e.value
+      })))
+        J.value = a({
+          seriesIndex: l,
+          datapoint: t,
+          series: h.value,
+          config: e.value
+        });
+      else {
+        let o = "";
+        if (e.value.style.chart.tooltip.showAllItemsAtIndex && f.value.length === 0) {
+          const r = h.value.map((g) => g.series.find((i) => i.seriesIndex === l));
+          r.forEach((g, i) => {
+            if (!g) return "";
+            o += `
+                    <div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${i < r.length - 1 ? `border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor}` : ""}">
+                        <div style="display:flex; flex-direction: row; gap: 3px; justify-content:flex-start; align-items:center;">
+                            <svg viewBox="0 0 20 20" height="${e.value.style.chart.tooltip.fontSize}" width="${e.value.style.chart.tooltip.fontSize}">
+                                <circle cx="10" cy="10" r="10" fill="${g.color}"/>
+                            </svg>
+                            <span>
+                                ${g.arcOf ?? ""} - ${g.name}
+                            </span>
+                        </div>
+                        <span>
+                            ${e.value.style.chart.tooltip.showValue ? `<b>${T({ 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 })}</b>` : ""}
+                            ${e.value.style.chart.tooltip.showPercentage ? `(${T({ v: g.proportion * 100, s: "%", r: e.value.style.chart.tooltip.roundingPercentage })})` : ""}
+                        </span>
+                    </div>
+                `;
+          });
+        } else
+          o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.arcOf ?? ""} - ${t.name}</div>`, o += `<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 && (o += `<b>${T({ 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 })}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? o += `<span>(${(t.proportion * 100).toFixed(e.value.style.chart.tooltip.roundingPercentage)}%)</span></div>` : o += `<b>${(t.proportion * 100).toFixed(e.value.style.chart.tooltip.roundingPercentage)}%</b></div>`);
+        J.value = `<div style="font-size:${e.value.style.chart.tooltip.fontSize}px">${o}</div>`;
+      }
+      j.value = !0;
+    }
+    function ee(t) {
+      return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
+    }
+    function ge(t, s) {
+      if (!e.value.useBlurOnHover)
+        return "";
+      if (e.value.style.chart.tooltip.showAllItemsAtIndex && f.value.length === 0)
+        return [null, void 0].includes(X.value) || X.value === s ? "" : `url(#blur_${p.value})`;
+      if (!e.value.style.chart.tooltip.showAllItemsAtIndex || f.value.length)
+        return [null, void 0].includes(G.value) || G.value === t.id ? "" : `url(#blur_${p.value})`;
+    }
+    const te = k(() => L.value.map((t, s) => t.series.map((l, a) => ({
+      name: l.name,
+      color: l.color,
+      value: l.value,
+      shape: "circle",
+      arcOf: l.arcOf,
+      id: l.id,
+      seriesIndex: a,
+      datasetIndex: s,
+      total: t.series.filter((o) => !f.value.includes(o.id)).map((o) => o.value).reduce((o, r) => o + r, 0)
+    })).map((l) => ({
+      ...l,
+      opacity: f.value.includes(l.id) ? 0.5 : 1,
+      segregate: () => Q(l),
+      isSegregated: f.value.includes(l.id)
+    })))), Ae = k(() => ({
+      cy: "nested-donuts-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 = k(() => {
+      const t = h.value.flatMap((l) => l.series.map((a) => ({
+        name: `${l.name} - ${a.name}`,
+        color: a.color,
+        total: l.total
+      }))), s = h.value.flatMap((l) => l.series.map((a) => a.value));
+      return { head: t, body: s };
+    });
+    function me() {
+      Ee(() => {
+        const t = I.value.head.map((a, o) => [[
+          a.name
+        ], [I.value.body[o]], [isNaN(I.value.body[o] / a.total) ? "-" : I.value.body[o] / a.total * 100]]), s = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = tt(s);
+        lt({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-nested-donuts" });
+      });
+    }
+    const Y = k(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ], s = I.value.head.map((o, r) => {
+        const g = T({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: I.value.body[r], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
+        return [
+          {
+            color: o.color,
+            name: o.name
+          },
+          g,
+          isNaN(I.value.body[r] / o.total) ? "-" : (I.value.body[r] / o.total * 100).toFixed(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: s,
+        config: l
+      };
+    });
+    function Ve() {
+      return L.value;
+    }
+    function xe() {
+      w.value.showTable = !w.value.showTable;
+    }
+    function we() {
+      w.value.dataLabels.show = !w.value.dataLabels.show;
+    }
+    function _e() {
+      w.value.showTooltip = !w.value.showTooltip;
+    }
+    return Le({
+      getData: Ve,
+      generatePdf: ce,
+      generateCsv: me,
+      generateImage: ve,
+      toggleTable: xe,
+      toggleLabels: we,
+      toggleTooltip: _e
+    }), (t, s) => (u(), n("div", {
+      ref_key: "nestedDonutsChart",
+      ref: M,
+      class: O(`vue-ui-nested-donuts ${B.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: le(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${!e.value.style.chart.title.text && e.value.userOptions.show ? "padding-top:36px" : ""};background:${e.value.style.chart.backgroundColor}`),
+      id: `nested_donuts_${p.value}`
+    }, [
+      e.value.style.chart.title.text ? (u(), n("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: de
+      }, [
+        ae(ut, {
+          config: {
+            title: {
+              cy: "donut-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "donut-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"])
+      ], 512)) : y("", !0),
+      e.value.userOptions.show && R.value ? (u(), W(nt, {
+        ref: "details",
+        key: `user_option_${ie.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: c(Te),
+        isImaging: c(Ie),
+        uid: p.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,
+        hasLabel: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: B.value,
+        isTooltip: w.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: M.value,
+        onToggleFullscreen: Ne,
+        onGeneratePdf: c(ce),
+        onGenerateCsv: me,
+        onGenerateImage: c(ve),
+        onToggleTable: xe,
+        onToggleLabels: we,
+        onToggleTooltip: _e
+      }, Re({ _: 2 }, [
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: m(() => [
+            C(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: m(() => [
+            C(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: m(() => [
+            C(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: m(() => [
+            C(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: m(() => [
+            C(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: m(() => [
+            C(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: m(({ toggleFullscreen: l, isFullscreen: a }) => [
+            C(t.$slots, "optionFullscreen", oe(se({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
+      R.value ? (u(), n("svg", {
+        key: 2,
+        xmlns: c(Ke),
+        class: O({ "vue-data-ui-fullscreen--on": B.value, "vue-data-ui-fulscreen--off": !B.value }),
+        viewBox: `0 0 ${v.value.width <= 0 ? 1e-3 : v.value.width} ${v.value.height < 0 ? 1e-3 : v.value.height}`,
+        style: le(`max-width:100%; overflow: visible; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
+      }, [
+        b("defs", null, [
+          (u(!0), n(x, null, $(be.value, (l, a) => (u(), n("radialGradient", {
+            id: `radial_${p.value}_${a}`,
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fr: 30 - 1 * (a + 1) + "%"
+          }, [
+            pt,
+            b("stop", {
+              offset: 70 - 20 * a + "%",
+              "stop-color": "#FFFFFF",
+              "stop-opacity": e.value.style.chart.gradientIntensity / 100
+            }, null, 8, gt),
+            mt
+          ], 8, bt))), 256))
+        ]),
+        b("defs", null, [
+          b("filter", {
+            id: `blur_${p.value}`,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%"
+          }, [
+            b("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: 2,
+              id: `blur_std_${p.value}`
+            }, null, 8, wt),
+            _t
+          ], 8, xt),
+          b("filter", {
+            id: `shadow_${p.value}`,
+            "color-interpolation-filters": "sRGB"
+          }, [
+            b("feDropShadow", {
+              dx: "0",
+              dy: "0",
+              stdDeviation: "10",
+              "flood-opacity": "0.5",
+              "flood-color": e.value.style.chart.layout.donut.shadowColor
+            }, null, 8, $t)
+          ], 8, kt)
+        ]),
+        (u(!0), n(x, null, $(U.value, (l) => (u(), n("circle", {
+          cx: v.value.width / 2,
+          cy: v.value.height / 2,
+          r: l.radius < 0 ? 1e-5 : l.radius,
+          fill: e.value.style.chart.backgroundColor,
+          filter: e.value.style.chart.layout.donut.useShadow ? `url(#shadow_${p.value})` : ""
+        }, null, 8, Ct))), 256)),
+        (u(!0), n(x, null, $(U.value, (l, a) => (u(), n("g", null, [
+          (u(!0), n(x, null, $(l.donut, (o, r) => (u(), n("g", null, [
+            b("path", {
+              class: "vue-ui-donut-arc-path",
+              d: o.arcSlice,
+              fill: `${o.color}CC`,
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": e.value.style.chart.layout.donut.borderWidth,
+              filter: ge(o, r)
+            }, null, 8, Lt)
+          ]))), 256))
+        ]))), 256)),
+        e.value.style.chart.useGradient ? (u(), n("g", St, [
+          (u(!0), n(x, null, $(be.value, (l, a) => (u(), n("g", null, [
+            b("path", {
+              d: l.donut.arcSlice,
+              fill: `url(#radial_${p.value}_${a})`,
+              stroke: "transparent",
+              "stroke-width": "0"
+            }, null, 8, Ft)
+          ]))), 256))
+        ])) : y("", !0),
+        e.value.style.chart.layout.labels.dataLabels.showDonutName ? (u(), n("g", Nt, [
+          (u(!0), n(x, null, $(U.value, (l, a) => (u(), n("g", null, [
+            (u(!0), n(x, null, $(l.donut, (o, r) => (u(), n("g", null, [
+              r === 0 && v.value.width && v.value.height ? (u(), n("text", {
+                key: 0,
+                class: O({ animated: e.value.useCssAnimation }),
+                x: v.value.width / 2,
+                y: o.startY - e.value.style.chart.layout.labels.dataLabels.fontSize + e.value.style.chart.layout.labels.dataLabels.donutNameOffsetY,
+                "text-anchor": "middle",
+                "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                "font-weight": e.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
+                fill: e.value.style.chart.layout.labels.dataLabels.color
+              }, N(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? c(Qe)({ source: l.name, length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize }) : l.name), 11, Tt)) : y("", !0)
+            ]))), 256))
+          ]))), 256))
+        ])) : y("", !0),
+        e.value.style.chart.layout.labels.dataLabels.show ? (u(), n("g", It, [
+          (u(!0), n(x, null, $(U.value, (l, a) => (u(), n("g", null, [
+            (u(!0), n(x, null, $(l.donut, (o, r) => (u(), n("g", {
+              filter: ge(o, r)
+            }, [
+              ee(o) && w.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage ? (u(), n("text", {
+                key: 0,
+                class: O({ animated: e.value.useCssAnimation }),
+                "text-anchor": c(A)(o, !0).anchor,
+                x: c(A)(o, !1, e.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
+                y: c(ue)(o, e.value.style.chart.layout.labels.dataLabels.offsetY, e.value.style.chart.layout.labels.dataLabels.offsetY),
+                fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? o.color : e.value.style.chart.layout.labels.dataLabels.color,
+                "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                "font-weight": e.value.style.chart.layout.labels.dataLabels.boldPercentage ? "bold" : "normal"
+              }, N(c(T)({ v: o.proportion * 100, s: "%", r: e.value.style.chart.layout.labels.dataLabels.roundingPercentage })), 11, Dt)) : y("", !0),
+              ee(o) && w.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue ? (u(), n("text", {
+                key: 1,
+                class: O({ animated: e.value.useCssAnimation }),
+                "text-anchor": c(A)(o, !0).anchor,
+                x: c(A)(o, !1, e.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
+                y: c(ue)(o, e.value.style.chart.layout.labels.dataLabels.offsetY, e.value.style.chart.layout.labels.dataLabels.offsetY) + e.value.style.chart.layout.labels.dataLabels.fontSize,
+                fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? o.color : e.value.style.chart.layout.labels.dataLabels.color,
+                "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                "font-weight": e.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
+              }, " (" + N(c(T)({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: o.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.style.chart.layout.labels.dataLabels.roundingValue })) + ") ", 11, Ot)) : y("", !0),
+              ee(o) && w.value.dataLabels.show && !e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue ? (u(), n("text", {
+                key: 2,
+                class: O({ animated: e.value.useCssAnimation }),
+                "text-anchor": c(A)(o, !0).anchor,
+                x: c(A)(o, !1, e.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
+                y: c(ue)(o, e.value.style.chart.layout.labels.dataLabels.offsetY, e.value.style.chart.layout.labels.dataLabels.offsetY),
+                fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? o.color : e.value.style.chart.layout.labels.dataLabels.color,
+                "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                "font-weight": e.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
+              }, N(c(T)({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: o.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.style.chart.layout.labels.dataLabels.roundingValue })), 11, Pt)) : y("", !0)
+            ], 8, zt))), 256))
+          ]))), 256))
+        ])) : y("", !0),
+        (u(!0), n(x, null, $(U.value, (l, a) => (u(), n("g", null, [
+          (u(!0), n(x, null, $(l.donut, (o, r) => (u(), n("g", null, [
+            b("path", {
+              "data-cy-donut-trap": "",
+              d: o.arcSlice,
+              fill: Fe.value === a ? "rgba(0,0,0,0.1)" : "transparent",
+              onMouseenter: (g) => Pe({
+                datapoint: o,
+                relativeIndex: a,
+                seriesIndex: o.seriesIndex
+              }),
+              onClick: (g) => De({ datapoint: o, index: r }),
+              onMouseleave: s[0] || (s[0] = (g) => {
+                j.value = !1, pe.value = null, G.value = null, X.value = null;
+              })
+            }, null, 40, At)
+          ]))), 256))
+        ]))), 256)),
+        C(t.$slots, "svg", { svg: v.value }, void 0, !0)
+      ], 14, yt)) : y("", !0),
+      R.value ? y("", !0) : (u(), W(vt, {
+        key: 3,
+        config: {
+          type: "donut",
+          style: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            donut: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      ae(rt, {
+        show: w.value.showTooltip && j.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,
+        parent: M.value,
+        content: J.value,
+        isCustom: c($e)(e.value.style.chart.tooltip.customFormat)
+      }, {
+        "tooltip-before": m(() => [
+          C(t.$slots, "tooltip-before", oe(se({ ...Z.value })), void 0, !0)
+        ]),
+        "tooltip-after": m(() => [
+          C(t.$slots, "tooltip-after", oe(se({ ...Z.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "parent", "content", "isCustom"]),
+      e.value.style.chart.legend.show ? (u(), n("div", {
+        key: 4,
+        ref_key: "chartLegend",
+        ref: K,
+        class: O({ "vue-ui-nested-donuts-legend": te.value.length > 1 })
+      }, [
+        (u(!0), n(x, null, $(te.value, (l) => (u(), W(it, {
+          legendSet: l,
+          config: Ae.value,
+          onClickMarker: s[1] || (s[1] = ({ legend: a }) => Q(a))
+        }, {
+          legendTitle: m(({ titleSet: a }) => [
+            a[0].arcOf ? (u(), n("div", Vt, N(a[0].arcOf), 1)) : y("", !0)
+          ]),
+          item: m(({ legend: a, index: o }) => [
+            b("div", {
+              onClick: (r) => Q(a),
+              style: le(`opacity:${f.value.includes(a.id) ? 0.5 : 1}`)
+            }, [
+              H(N(a.name) + ": " + N(c(T)({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: a.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.style.chart.legend.roundingValue })) + " ", 1),
+              f.value.includes(a.id) ? (u(), n(x, { key: 1 }, [
+                H(" ( - % ) ")
+              ], 64)) : (u(), n(x, { key: 0 }, [
+                H(" (" + N(isNaN(a.value / a.total) ? "-" : c(T)({ v: a.value / a.total * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage })) + ") ", 1)
+              ], 64))
+            ], 12, Mt)
+          ]),
+          _: 2
+        }, 1032, ["legendSet", "config"]))), 256))
+      ], 2)) : y("", !0),
+      e.value.style.chart.legend.show ? y("", !0) : (u(), n("div", {
+        key: 5,
+        ref_key: "chartLegend",
+        ref: K
+      }, [
+        C(t.$slots, "legend", { legend: te.value }, void 0, !0)
+      ], 512)),
+      R.value ? (u(), W(ht, {
+        key: 6,
+        hideDetails: "",
+        config: {
+          open: w.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: m(() => [
+          ae(Ze, {
+            colNames: Y.value.colNames,
+            head: Y.value.head,
+            body: Y.value.body,
+            config: Y.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: s[2] || (s[2] = (l) => w.value.showTable = !1)
+          }, {
+            th: m(({ th: l }) => [
+              b("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Bt)
+            ]),
+            td: m(({ td: l }) => [
+              H(N(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"])
+        ]),
+        _: 1
+      }, 8, ["config"])) : y("", !0)
+    ], 14, ft));
+  }
+}, Jt = /* @__PURE__ */ Ye(Ut, [["__scopeId", "data-v-fbefb973"]]);
+export {
+  Jt as default
+};