vue-data-ui 2.2.92 → 2.2.94

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

@@ -1,768 +0,0 @@
-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
-};