vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-donut-evolution-BLSesj3c.js

@@ -0,0 +1,1358 @@
+import { defineAsyncComponent as W, ref as c, shallowRef as Tt, computed as y, onMounted as zl, toRefs as Tl, nextTick as ge, watch as fe, watchEffect as Pt, onBeforeUnmount as Pl, openBlock as u, createElementBlock as r, unref as v, normalizeStyle as Z, normalizeClass as E, createElementVNode as x, toDisplayString as w, createBlock as $, createCommentVNode as h, withCtx as b, renderSlot as k, normalizeProps as I, guardReactiveProps as D, createSlots as It, createVNode as Dt, Fragment as z, renderList as T, Teleport as Il, resolveDynamicComponent as Dl, mergeProps as Ol, createTextVNode as He } from "vue";
+import { j as Ot, o as Nt, q as be, r as Nl, t as Et, m as El, p as me, n as Fl, s as We, a8 as Rl, a9 as Ft, D as Vl, a4 as Xe, k as Ge, l as pe, X as Ml, u as ne, aa as Bl, Z as Ul, a5 as Hl, a6 as Wl, a7 as Rt, a0 as Xl, a1 as Gl, ab as Vt, ac as Yl } from "./lib-DBptbyyI.js";
+import { t as Mt, u as jl } from "./useResponsive-DfdjqQps.js";
+import { u as ql } from "./useConfig-DO94Aj5s.js";
+import { u as Kl } from "./usePrinter-CEpYU3r5.js";
+import { u as Zl, B as Jl } from "./BaseScanner-BhhkKVoj.js";
+import { u as Ql } from "./useSvgExport-ByUukOZt.js";
+import { u as ea } from "./useTimeLabels-C-A2uZKi.js";
+import { u as Ye } from "./useNestedProp-Bf5XFbs8.js";
+import { u as ta } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as la } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as aa } from "./useChartAccessibility-9icAAmYg.js";
+import { u as oa } from "./useTimeLabelCollider-CIsgDrl9.js";
+import ua from "./img-LXxMLmCg.js";
+import na from "./Title-BeMKE1cj.js";
+import sa from "./vue_ui_donut_evolution-DFQU-rqE.js";
+import ra from "./Legend-CS7Xo5LK.js";
+import { S as ia } from "./Slicer-DUycDH_N.js";
+import { A as ca } from "./A11yDataTable-KcVAX2cP.js";
+import { B as va } from "./BaseLegendToggle-BQVIawmA.js";
+import { _ as da } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ha = ["id"], ya = ["id"], ga = ["id"], fa = { style: { position: "relative" } }, ba = ["xmlns", "aria-describedby", "viewBox"], ma = ["x", "y", "width", "height"], pa = ["id"], xa = ["stop-color"], ka = ["stop-color"], Ca = ["id"], wa = ["stop-color"], Aa = ["stop-color"], La = ["stop-color"], Sa = { key: 1 }, _a = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], $a = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], za = { key: 0 }, Ta = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pa = ["font-size", "fill", "transform"], Ia = ["x", "y", "font-size", "fill"], Da = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Oa = ["x", "y", "font-size", "fill", "font-weight"], Na = { key: 0 }, Ea = ["text-anchor", "font-size", "fill", "transform"], Fa = ["text-anchor", "font-size", "fill", "transform", "innerHTML"], Ra = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Va = { key: 1 }, Ma = ["cx", "cy", "r", "fill"], Ba = { key: 0 }, Ua = { key: 0 }, Ha = ["d", "stroke"], Wa = ["text-anchor", "x", "y", "fill"], Xa = ["cx", "cy", "r", "fill"], Ga = { key: 0 }, Ya = ["cx", "cy", "fill"], ja = { key: 1 }, qa = ["d", "fill", "stroke"], Ka = { key: 2 }, Za = ["d", "fill", "stroke"], Ja = ["x", "y", "font-size", "fill"], Qa = ["x", "y", "width", "height", "fill"], eo = ["x", "y", "width", "height", "onMouseenter", "onMouseleave", "onClick"], to = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, lo = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, ao = ["id"], oo = ["onClick"], uo = { key: 0 }, no = { key: 1 }, so = {
+  __name: "vue-ui-donut-evolution",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "copyAlt"],
+  setup(Bt, { expose: Ut, emit: Ht }) {
+    const Wt = W(() => import("./vue-ui-accordion-nvggWcGN.js")), Xt = W(() => import("./BaseIcon-Cb3zzG6s.js")), Gt = W(() => import("./DataTable-DT2kIdQ6.js")), Yt = W(() => import("./PackageVersion-DPO-OOVI.js")), jt = W(() => import("./PenAndPaper-Ct3qJ4lA.js")), qt = W(() => import("./UserOptions-rW2fRf3V.js")), Kt = W(() => import("./vue-ui-donut-Be5G38P5.js")), je = W(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_donut_evolution: Zt } = ql(), { isThemeValid: Jt, warnInvalidTheme: Qt } = ta(), S = Bt, _ = c(Ot()), C = c([]), m = c(null), q = c(null), xe = c(!1), X = c(null), F = c(null), el = c(null), qe = c(0), Ke = c(0), Ze = c(0), Je = c(0), Qe = c(0), ke = c(null), se = c(null), Ce = c(null), we = c(null), et = c(!1), J = c(null), Ae = c(null), re = c(!1), ie = c(!1), tt = c(null), lt = c(null), at = c(null), ot = c(null), ut = c(null), Le = c(!1), Q = Tt(null), ce = Tt(null), nt = c(null), R = c(null), Se = c(!1), _e = Ht, st = y(() => !!S.dataset && S.dataset.length);
+    zl(() => {
+      et.value = !0, rt();
+    });
+    const ve = y(() => !!e.value.debug);
+    function rt() {
+      if (Nt(S.dataset) ? (be({
+        componentName: "VueUiDonutEvolution",
+        type: "dataset",
+        debug: ve.value
+      }), de.value = !0) : S.dataset.length && S.dataset.forEach((t, a) => {
+        Nl({
+          datasetObject: t,
+          requiredAttributes: ["name", "values"]
+        }).forEach((l) => {
+          be({
+            componentName: "VueUiDonutEvolution",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: ve.value
+          }), de.value = !0;
+        });
+      }), Nt(S.dataset) || (de.value = e.value.loading), setTimeout(() => {
+        Le.value = !0;
+      }, 10), Te(), e.value.responsive) {
+        const t = Mt(() => {
+          Le.value = !1;
+          const { width: a, height: l } = jl({
+            chart: F.value,
+            title: e.value.style.chart.title.text ? tt.value : null,
+            legend: e.value.style.chart.legend.show ? lt.value : null,
+            slicer: e.value.style.chart.zoom.show && it.value > 1 ? ut.value : null,
+            source: at.value
+          });
+          requestAnimationFrame(() => {
+            K.value.width = a, K.value.height = l - 12, clearTimeout(nt.value), nt.value = setTimeout(() => {
+              Le.value = !0;
+            }, 10);
+          });
+        });
+        Q.value && (ce.value && Q.value.unobserve(ce.value), Q.value.disconnect()), Q.value = new ResizeObserver(t), ce.value = F.value.parentNode, Q.value.observe(ce.value);
+      }
+    }
+    const e = c(Ie()), V = y(() => e.value.userOptions.useCursorPointer), tl = y(() => Et({
+      defaultConfig: {
+        useCssAnimation: !1,
+        table: { show: !1 },
+        userOptions: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            layout: {
+              dataLabels: { show: !1 },
+              grid: {
+                stroke: "#6A6A6A",
+                axis: {
+                  yLabel: "",
+                  xLabel: ""
+                },
+                yAxis: {
+                  scaleMin: null,
+                  scaleMax: null,
+                  autoScale: !1,
+                  dataLabels: { show: !1 }
+                },
+                xAxis: {
+                  dataLabels: { show: !1 }
+                }
+              },
+              line: {
+                stroke: "#CACACA60"
+              }
+            },
+            legend: {
+              backgroundColor: "transparent",
+              showValue: !1,
+              showPercentage: !1
+            },
+            zoom: {
+              show: !1,
+              startIndex: null,
+              endIndex: null
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: $e, FINAL_DATASET: ze, manualLoading: de } = Zl({
+      ...Tl(S),
+      FINAL_CONFIG: e,
+      prepareConfig: Ie,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Te();
+        });
+      },
+      skeletonDataset: S.config?.skeletonDataset ?? [
+        {
+          name: "",
+          values: [1, 2, 3, 5, 8, 13],
+          color: "#AAAAAA"
+        },
+        {
+          name: "",
+          values: [1, 2, 3, 5, 8, 13],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          values: [1, 2, 3, 5, 8, 13],
+          color: "#CACACA"
+        }
+      ],
+      skeletonConfig: Et({
+        defaultConfig: e.value,
+        userConfig: tl.value
+      })
+    }), K = c({
+      width: e.value.style.chart.layout.width,
+      height: e.value.style.chart.layout.height
+    }), it = y(() => Math.max(...ze.value.map((t) => t.values.length))), g = c({
+      start: 0,
+      end: it.value
+    });
+    function ct() {
+      Te();
+    }
+    async function Te() {
+      await ge(), await ge();
+      const { startIndex: t, endIndex: a } = e.value.style.chart.zoom, l = ot.value;
+      g.value = { start: 0, max: N.value }, (t != null || a != null) && l ? (t != null ? l.setStartValue(t) : (g.value.start = 0, l.setStartValue(0)), a != null ? l.setEndValue(ll(a + 1)) : (g.value.end = N.value, l.setEndValue(N.value))) : (g.value = {
+        start: 0,
+        end: N.value
+      }, Ke.value += 1);
+    }
+    function ll(t) {
+      const a = N.value;
+      return t > a ? a : t < 0 || e.value.style.chart.zoom.startIndex !== null && t < e.value.style.chart.zoom.startIndex ? e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex + 1 : 1 : t;
+    }
+    const { userOptionsVisible: Pe, setUserOptionsVisibility: vt, keepUserOptionState: dt } = la({ config: e.value }), { svgRef: ee } = aa({ config: e.value.style.chart.title });
+    function Ie() {
+      const t = Ye({
+        userConfig: S.config,
+        defaultConfig: Zt
+      });
+      let a = {};
+      const l = t.theme;
+      if (l)
+        if (!Jt.value(t))
+          Qt(t), a = t;
+        else {
+          const o = Ye({
+            userConfig: sa[l] || S.config,
+            defaultConfig: t
+          });
+          a = {
+            ...Ye({
+              userConfig: S.config,
+              defaultConfig: o
+            }),
+            customPalette: t.customPalette ? t.customPalette : El[l] || me
+          };
+        }
+      else
+        a = t;
+      return a;
+    }
+    fe(() => S.config, (t) => {
+      $e.value || (e.value = Ie()), Pe.value = !e.value.userOptions.showOnChartHover, rt(), Ze.value += 1, Je.value += 1, Qe.value += 1, G.value.showTable = e.value.table.show;
+    }, { deep: !0 }), fe(() => S.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (de.value = !1), ct();
+    }, { deep: !0 });
+    const { isPrinting: De, isImaging: Oe, generatePdf: ht, generateImage: yt } = Kl({
+      elementId: _.value,
+      fileName: e.value.style.chart.title.text || "vue-ui-donut-evolution",
+      options: e.value.userOptions.print
+    }), al = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), ol = y(() => Fl(e.value.customPalette)), G = c({
+      showTable: e.value.table.show
+    });
+    fe(e, () => {
+      G.value = {
+        showTable: e.value.table.show
+      };
+    }, { immediate: !0 });
+    const Y = y(() => ({
+      top: e.value.style.chart.layout.padding.top,
+      right: e.value.style.chart.layout.padding.right,
+      bottom: e.value.style.chart.layout.padding.bottom,
+      left: e.value.style.chart.layout.padding.left
+    }));
+    function ul() {
+      let t = 0;
+      ke.value && (t = Array.from(ke.value.querySelectorAll("text")).reduce((n, s) => {
+        const f = s.getComputedTextLength();
+        return f > n ? f : n;
+      }, 0));
+      const a = we.value ? we.value.getBoundingClientRect().width + e.value.style.chart.layout.grid.axis.yLabelOffsetX + e.value.style.chart.layout.grid.axis.fontSize : 0;
+      return t + a + 5;
+    }
+    const Ne = c(0), nl = Mt((t) => {
+      Ne.value = t;
+    }, 100);
+    Pt((t) => {
+      const a = se.value;
+      if (!a) return;
+      const l = new ResizeObserver((o) => {
+        nl(o[0].contentRect.height);
+      });
+      l.observe(a), t(() => l.disconnect());
+    }), Pl(() => {
+      Ne.value = 0;
+    });
+    const gt = y(() => {
+      let t = 0;
+      Ce.value && (t = Ce.value.getBBox().height);
+      let a = 0;
+      return se.value && (a = Ne.value), t + a + e.value.style.chart.layout.grid.axis.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY;
+    }), i = y(() => {
+      const t = ul(), a = e.value.style.chart.layout.dataLabels.fontSize * 3, l = K.value.width, o = K.value.height, n = Y.value.left + t, s = l - Y.value.right, f = l - n - Y.value.right, d = o - Y.value.top - Y.value.bottom - a - gt.value, P = Y.value.top + a, U = o - Y.value.bottom - gt.value;
+      return {
+        top: P,
+        left: n,
+        right: s,
+        bottom: U,
+        absoluteHeight: o,
+        absoluteWidth: l,
+        centerX: n + Math.max(10, f) / 2,
+        centerY: P + Math.max(10, d) / 2,
+        width: Math.max(10, f),
+        height: Math.max(10, d)
+      };
+    }), O = y(() => (ze.value.forEach((t, a) => {
+      [null, void 0].includes(t.name) && be({
+        componentName: "VueUiDonutEvolution",
+        type: "datasetSerieAttribute",
+        property: "name",
+        index: a,
+        debug: ve.value
+      }), [null, void 0].includes(t.values) && be({
+        componentName: "VueUiDonutEvolution",
+        type: "datasetSerieAttribute",
+        property: "values",
+        index: a,
+        debug: ve.value
+      });
+    }), ze.value.map((t, a) => ({
+      ...t,
+      values: Rl(t.values),
+      color: We(t.color) || ol.value[a] || me[a] || me[a % me.length],
+      length: (t.values || []).length,
+      uid: Ot()
+    })))), he = y(() => O.value.filter((t) => !C.value.includes(t.uid)).map((t) => ({
+      ...t,
+      values: t.values.filter((a, l) => l >= g.value.start && l <= g.value.end)
+    }))), N = y(() => Math.max(...O.value.map((t) => t.length))), A = c([]);
+    let ft = 0;
+    Pt(() => {
+      const t = ++ft;
+      (async () => {
+        const a = await ea({
+          values: e.value.style.chart.layout.grid.xAxis.dataLabels.values,
+          maxDatapoints: N.value,
+          formatter: e.value.style.chart.layout.grid.xAxis.dataLabels.datetimeFormatter,
+          start: g.value.start,
+          end: g.value.end
+        });
+        t === ft && (A.value = a);
+      })();
+    });
+    const L = y(() => i.value.width / (g.value.end - g.value.start)), ye = y(() => {
+      const t = [];
+      for (let a = 0; a < g.value.end - g.value.start; a += 1) {
+        const l = he.value.map((d) => d.values[a] ?? null), o = l.filter((d) => [void 0, null].includes(d)).length === l.length, n = l.reduce((d, P) => d + P, 0), s = l.map((d) => d / n), f = i.value.left + L.value * a + L.value / 2;
+        t.push({
+          index: a,
+          percentages: s,
+          subtotal: o || n < 0 ? null : n,
+          values: l,
+          x: f
+        });
+      }
+      return t;
+    }), Ee = y(() => {
+      const t = Math.max(...ye.value.map((n) => n.subtotal).filter((n) => Ft(n))) ?? 1, a = Math.min(...ye.value.map((n) => n.subtotal).filter((n) => Ft(n))) ?? 0;
+      let l = Math.max(e.value.style.chart.layout.grid.yAxis.scaleMax ?? 0, t), o;
+      return e.value.style.chart.layout.grid.yAxis.scaleMin != null ? o = Math.min(a, e.value.style.chart.layout.grid.yAxis.scaleMin) : o = 0, e.value.style.chart.layout.grid.yAxis.autoScale && (o = a, l = t), o === l && (o = l / 2, l *= 1.5), {
+        max: l,
+        min: o
+      };
+    }), M = y(() => {
+      const t = ye.value.length === 1 ? Ee.value.max * 2 : Ee.value.max;
+      return Vl(Ee.value.min, t, e.value.style.chart.layout.grid.yAxis.dataLabels.steps);
+    });
+    function bt(t) {
+      return (t - M.value.min) / (M.value.max - M.value.min);
+    }
+    const sl = y(() => M.value.ticks.map((t) => ({
+      y: i.value.bottom - i.value.height * bt(t),
+      value: t
+    }))), p = y(() => {
+      const t = ye.value, a = Math.max(...t.map((l) => l.subtotal));
+      return t.length === 1 && a * 2, t.map((l, o) => {
+        const n = Math.min(i.value.width / 24, L.value / 2 * 0.7), s = n > i.value.width / 16 ? i.value.width / 16 : n, f = m.value === l.index ? i.value.width / 16 : s, d = t.length > 4 ? n * 2 : n * 2 > L.value / 2 * 0.7 ? L.value / 2 * 0.7 : n * 2, P = i.value.bottom - i.value.height * bt(l.subtotal), U = he.value.map((H) => ({
+          color: H.color,
+          name: H.name,
+          value: H.values[o] ?? 0
+        })).toSorted((H, $l) => $l.value - H.value);
+        return {
+          ...l,
+          y: P,
+          radius: s,
+          activeRadius: f,
+          hoverRadius: d,
+          donut: Xe({ series: U }, l.x, P, s, s, 1.99999, 2, 1, 360, 105.25, s / 2),
+          donutHover: Xe({ series: U }, l.x, P, d, d, 1.99999, 2, 1, 360, 105.25, d / 2),
+          donutFocus: Xe({ series: U }, i.value.centerX, i.value.centerY, i.value.height / 3.6, i.value.height / 3.6, 1.99999, 2, 1, 360, 105.25, i.value.height / 6)
+        };
+      });
+    });
+    function Fe(t, a, l) {
+      return Ge(
+        e.value.style.chart.layout.dataLabels.formatter,
+        t,
+        pe({
+          p: e.value.style.chart.layout.dataLabels.prefix,
+          v: t,
+          s: e.value.style.chart.layout.dataLabels.suffix,
+          r: e.value.style.chart.layout.dataLabels.rounding
+        }),
+        { datapoint: a, index: l }
+      );
+    }
+    function rl(t, a) {
+      return isNaN(t.value / Vt(a, "value")) ? 0 : (t.value / Vt(a, "value") * 100).toFixed(0) + "%";
+    }
+    function mt(t) {
+      m.value = null, q.value = null, R.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.seriesIndex + g.value.start });
+    }
+    function pt(t) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.index + g.value.start }), m.value = t.index, q.value = t, R.value = t.index;
+    }
+    const te = c(null);
+    function Re(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.index + g.value.start }), !(!t.subtotal || !e.value.style.chart.dialog.show) && (q.value = null, m.value = null, xe.value = !0, X.value = t, yl(t), [null, void 0].includes(a) || (te.value = a));
+    }
+    const le = y(() => O.value.map((t, a) => ({
+      name: t.name,
+      value: t.values.slice(g.value.start, g.value.end).reduce((l, o) => l + o, 0),
+      shape: "circle",
+      uid: t.uid,
+      color: t.color
+    })).sort((t, a) => a.value - t.value).map((t, a) => ({
+      ...t,
+      opacity: C.value.includes(t.uid) ? 0.5 : 1,
+      segregate: () => ae(t.uid),
+      isSegregated: C.value.includes(t.uid),
+      display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? Ge(
+        e.value.style.chart.layout.dataLabels.formatter,
+        t.value,
+        pe({
+          p: e.value.style.chart.layout.dataLabels.prefix,
+          v: t.value,
+          s: e.value.style.chart.layout.dataLabels.suffix,
+          r: e.value.style.chart.legend.roundingValue
+        }),
+        { datapoint: t, seriesIndex: a }
+      ) : ""}${e.value.style.chart.legend.showPercentage ? C.value.includes(t.uid) ? `${e.value.style.chart.legend.showValue ? " (" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? " (" : ""}${isNaN(t.value / xt.value) ? "-" : pe({
+        v: t.value / xt.value * 100,
+        s: "%",
+        r: e.value.style.chart.legend.roundingPercentage
+      })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
+    }))), xt = y(() => p.value.map((t) => t.subtotal).reduce((t, a) => t + a, 0)), il = y(() => ({
+      cy: "donut-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" : ""
+    }));
+    function cl() {
+      C.value.length ? C.value = [] : le.value.forEach((t) => {
+        C.value.push(t.uid);
+      });
+    }
+    function ae(t) {
+      if (C.value.includes(t))
+        C.value = C.value.filter((a) => a !== t), _e("selectLegend", he.value);
+      else {
+        if (C.value.length === O.value.length - 1) return;
+        C.value.push(t), _e("selectLegend", he.value);
+      }
+      X.value && Re(p.value.find((a, l) => l === te.value));
+    }
+    function kt(t) {
+      if (!O.value.length)
+        return e.value.debug && console.warn("VueUiDonutEvolution - There are no series to show."), null;
+      const a = O.value.find((l) => l.name === t);
+      return a || (e.value.debug && console.warn(`VueUiDonutEvolution - Series name not found "${t}"`), null);
+    }
+    function vl(t) {
+      const a = kt(t);
+      a !== null && C.value.includes(a.uid) && ae(a.uid);
+    }
+    function dl(t) {
+      const a = kt(t);
+      a !== null && (C.value.includes(a.uid) || ae(a.uid));
+    }
+    const B = y(() => {
+      const t = [""].concat(O.value.filter((s) => !C.value.includes(s.uid)).map((s) => ({
+        name: s.name,
+        color: s.color
+      }))).concat(["Σ"]);
+      let a = [];
+      for (let s = 0; s < N.value; s += 1) {
+        const f = O.value.filter((d) => !C.value.includes(d.uid)).map((d) => d.values[s] ?? 0).reduce((d, P) => d + P, 0);
+        a.push([A.value[s] ? A.value[s].text : "-"].concat(O.value.filter((d) => !C.value.includes(d.uid)).map((d) => ({
+          value: d.values[s] ?? 0,
+          percentage: d.values[s] ? d.values[s] / f * 100 : 0
+        }))).concat([`${e.value.style.chart.layout.dataLabels.prefix}${Number(f.toFixed(e.value.table.td.roundingValue))}${e.value.style.chart.layout.dataLabels.suffix}`]));
+      }
+      const l = a.map((s) => s.map((f, d) => d === 0 || d === s.length - 1 ? f : `${Fe(f.value ?? 0, null, d)} (${f.percentage.toFixed(1)}%)`)), o = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      }, n = [
+        e.value.table.columnNames.period
+      ].concat(O.value.filter((s) => !C.value.includes(s.uid)).map((s) => s.name)).concat(e.value.table.columnNames.total);
+      return { head: t, body: a, bodyA11y: l, config: o, colNames: n };
+    });
+    function hl() {
+      return O.value;
+    }
+    function Ve(t = null) {
+      ge(() => {
+        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], l = [...B.value.head.map((f) => f.name ?? f)], o = [...B.value.body.map((f) => f.map((d) => d.value ?? d))], n = a.concat([l]).concat(o), s = Xl(n);
+        t ? t(s) : Gl({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-donut-evolution" });
+      });
+    }
+    const j = c(!1);
+    function Ct(t) {
+      j.value = t, qe.value += 1;
+    }
+    function wt() {
+      G.value.showTable = !G.value.showTable;
+    }
+    const oe = c(!1);
+    function Me() {
+      oe.value = !oe.value;
+    }
+    function At(t) {
+      return t.proportion * 100 > e.value.style.chart.donuts.hover.hideLabelsUnderValue;
+    }
+    const Lt = c([]), St = c({}), Be = c(null);
+    function yl(t) {
+      Lt.value = t.donut.map((a) => ({
+        name: a.name,
+        values: [a.value],
+        color: a.color
+      })), St.value = Yl({
+        ...e.value.style.chart.dialog.donutChart,
+        responsive: !0,
+        theme: e.value.theme
+      }), Be.value && Be.value.open();
+    }
+    async function gl({ scale: t = 2 } = {}) {
+      if (!F.value) return;
+      const { width: a, height: l } = F.value.getBoundingClientRect(), o = a / l, { imageUri: n, base64: s } = await ua({ domElement: F.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: n,
+        base64: s,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    const fl = y(() => K.value.width), bl = y(() => K.value.height);
+    oa({
+      timeLabelsEls: se,
+      timeLabels: A,
+      slicer: g,
+      configRef: e,
+      rotationPath: ["style", "chart", "layout", "grid", "xAxis", "dataLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "layout", "grid", "xAxis", "dataLabels", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: fl,
+      height: bl,
+      rotation: e.value.style.chart.layout.grid.xAxis.dataLabels.autoRotate.angle
+    });
+    const ue = y(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = G.value.showTable;
+      return {
+        component: t ? je : Wt,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: t ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: j.value,
+          fullscreenParent: F.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: V.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    fe(() => G.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && J.value ? J.value.open() : "close" in J.value && J.value.close());
+    });
+    function _t() {
+      G.value.showTable = !1, Ae.value && Ae.value.setTableIconState(!1);
+    }
+    const ml = y(() => le.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), pl = y(() => e.value.style.chart.backgroundColor), xl = y(() => e.value.style.chart.legend), kl = y(() => e.value.style.chart.title), { exportSvg: Cl, getSvg: wl } = Ql({
+      svg: ee,
+      title: kl,
+      legend: xl,
+      legendItems: ml,
+      backgroundColor: pl
+    });
+    async function $t({ isCb: t }) {
+      ie.value = !0, await ge();
+      try {
+        if (t) {
+          const { blob: a, url: l, text: o, dataUrl: n } = await wl();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: n }));
+        } else
+          await Promise.resolve(Cl());
+      } finally {
+        ie.value = !1;
+      }
+    }
+    function Al(t) {
+      if (t?.stage === "start") {
+        re.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        re.value = !1;
+        return;
+      }
+      yt();
+    }
+    async function zt() {
+      if (_e("copyAlt", {
+        config: e.value,
+        dataset: p.value
+      }), !e.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
+        config: e.value,
+        dataset: p.value
+      }));
+    }
+    function Ll() {
+      R.value = null, Se.value = !0;
+    }
+    function Sl() {
+      R.value = null, m.value = null, q.value = null, Se.value = !1;
+    }
+    function _l(t) {
+      if (!ee.value || oe.value || document.activeElement !== ee.value || !p.value.length) return;
+      const a = t.key === "ArrowLeft", l = t.key === "ArrowRight", o = t.key === "Enter" || t.key === " ", n = t.key === "Escape";
+      if (!a && !l && !o && !n) return;
+      if (t.preventDefault(), t.stopPropagation(), n) {
+        R.value = null, m.value = null, q.value = null;
+        return;
+      }
+      if (o) {
+        if (R.value === null) return;
+        const H = p.value[R.value];
+        if (!H) return;
+        Re(H, R.value);
+        return;
+      }
+      let s = R.value;
+      const f = m.value, d = s !== null && s >= 0 && s < p.value.length, P = f !== null && f >= 0 && f < p.value.length;
+      d ? l ? (s += 1, s >= p.value.length && (s = 0)) : a && (s -= 1, s < 0 && (s = p.value.length - 1)) : P ? (s = l ? f + 1 : f - 1, s >= p.value.length && (s = 0), s < 0 && (s = p.value.length - 1)) : l ? s = 0 : s = p.value.length - 1;
+      const U = p.value[s];
+      U && pt(U);
+    }
+    const Ue = y(() => {
+      const t = B.value?.colNames ?? [], a = B.value?.bodyA11y ?? [];
+      return { headers: t, rows: a };
+    });
+    return Ut({
+      getData: hl,
+      getImage: gl,
+      generatePdf: ht,
+      generateCsv: Ve,
+      generateImage: yt,
+      generateSvg: $t,
+      hideSeries: dl,
+      showSeries: vl,
+      toggleTable: wt,
+      toggleAnnotator: Me,
+      toggleFullscreen: Ct,
+      copyAlt: zt
+    }), (t, a) => (u(), r("div", {
+      ref_key: "donutEvolutionChart",
+      ref: F,
+      class: E(`vue-data-ui-component vue-ui-donut-evolution ${j.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: Z(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: _.value,
+      onMouseenter: a[5] || (a[5] = () => v(vt)(!0)),
+      onMouseleave: a[6] || (a[6] = () => v(vt)(!1))
+    }, [
+      x("div", {
+        id: `chart-instructions-${_.value}`,
+        class: "sr-only"
+      }, [
+        x("p", null, w(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, ya),
+      Ue.value?.rows?.length ? (u(), $(ca, {
+        key: 0,
+        uid: _.value,
+        head: Ue.value.headers,
+        body: Ue.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : h("", !0),
+      e.value.userOptions.buttons.annotator ? (u(), $(v(jt), {
+        key: 1,
+        svgRef: v(ee),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: oe.value,
+        isCursorPointer: V.value,
+        onClose: Me
+      }, {
+        "annotator-action-close": b(() => [
+          k(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": b(({ color: l }) => [
+          k(t.$slots, "annotator-action-color", I(D({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": b(({ mode: l }) => [
+          k(t.$slots, "annotator-action-draw", I(D({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": b(({ disabled: l }) => [
+          k(t.$slots, "annotator-action-undo", I(D({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": b(({ disabled: l }) => [
+          k(t.$slots, "annotator-action-redo", I(D({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": b(({ disabled: l }) => [
+          k(t.$slots, "annotator-action-delete", I(D({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : h("", !0),
+      al.value ? (u(), r("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: el,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.chart.title.text ? (u(), r("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: tt,
+        style: "width:100%;background:transparent;padding-bottom:24px",
+        onMouseleave: mt
+      }, [
+        (u(), $(na, {
+          key: `title_${Ze.value}`,
+          config: {
+            title: {
+              cy: "donut-evolution-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "donut-evolution-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 544)) : h("", !0),
+      x("div", {
+        id: `legend-top-${_.value}`
+      }, null, 8, ga),
+      e.value.userOptions.show && st.value && (v(dt) || v(Pe)) ? (u(), $(v(qt), {
+        ref_key: "userOptionsRef",
+        ref: Ae,
+        key: `user_options_${qe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: v(De),
+        isImaging: v(Oe),
+        uid: _.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: j.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: F.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: oe.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: V.value,
+        onToggleFullscreen: Ct,
+        onGeneratePdf: v(ht),
+        onGenerateCsv: Ve,
+        onGenerateImage: Al,
+        onGenerateSvg: $t,
+        onToggleTable: wt,
+        onToggleAnnotator: Me,
+        onCopyAlt: zt,
+        style: Z({
+          visibility: v(dt) ? v(Pe) ? "visible" : "hidden" : "visible"
+        })
+      }, It({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: b(({ isOpen: l, color: o }) => [
+            k(t.$slots, "menuIcon", I(D({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: b(() => [
+            k(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: b(() => [
+            k(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: b(() => [
+            k(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: b(() => [
+            k(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: b(() => [
+            k(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: b(({ toggleFullscreen: l, isFullscreen: o }) => [
+            k(t.$slots, "optionFullscreen", I(D({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: b(({ toggleAnnotator: l, isAnnotator: o }) => [
+            k(t.$slots, "optionAnnotator", I(D({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: b(({ altCopy: l }) => [
+            k(t.$slots, "optionAltCopy", I(D({ altCopy: l })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : h("", !0),
+      x("div", fa, [
+        (u(), r("svg", {
+          ref_key: "svgRef",
+          ref: ee,
+          xmlns: v(Ml),
+          "aria-describedby": `chart-instructions-${_.value}`,
+          class: E({ "vue-data-ui-fullscreen--on": j.value, "vue-data-ui-fulscreen--off": !j.value }),
+          viewBox: `0 0 ${i.value.absoluteWidth} ${i.value.absoluteHeight}`,
+          style: Z(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`),
+          tabindex: "0",
+          onFocus: Ll,
+          onBlur: Sl,
+          onKeydown: _l
+        }, [
+          Dt(v(Yt)),
+          t.$slots["chart-background"] ? (u(), r("foreignObject", {
+            key: 0,
+            x: i.value.left,
+            y: i.value.top,
+            width: i.value.width,
+            height: i.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            k(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, ma)) : h("", !0),
+          x("defs", null, [
+            x("linearGradient", {
+              id: `hover_${_.value}`,
+              x1: "0%",
+              y1: "0%",
+              x2: "0%",
+              y2: "100%"
+            }, [
+              x("stop", {
+                offset: "0%",
+                "stop-color": v(ne)(e.value.style.chart.backgroundColor, e.value.style.chart.layout.highlighter.opacity)
+              }, null, 8, xa),
+              x("stop", {
+                offset: "100%",
+                "stop-color": v(ne)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity)
+              }, null, 8, ka)
+            ], 8, pa),
+            x("radialGradient", {
+              id: `focus_${_.value}`
+            }, [
+              x("stop", {
+                offset: "0%",
+                "stop-color": v(ne)(v(We)(e.value.style.chart.backgroundColor), 0)
+              }, null, 8, wa),
+              x("stop", {
+                offset: "77%",
+                "stop-color": v(ne)("#FFFFFF", 30)
+              }, null, 8, Aa),
+              x("stop", {
+                offset: "100%",
+                "stop-color": v(ne)(v(We)(e.value.style.chart.backgroundColor), 0)
+              }, null, 8, La)
+            ], 8, Ca)
+          ]),
+          e.value.style.chart.layout.grid.show ? (u(), r("g", Sa, [
+            x("line", {
+              x1: i.value.left,
+              x2: i.value.left,
+              y1: i.value.top,
+              y2: i.value.top + i.value.height,
+              stroke: e.value.style.chart.layout.grid.stroke,
+              "stroke-width": e.value.style.chart.layout.grid.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, _a),
+            x("line", {
+              x1: i.value.left,
+              x2: i.value.right,
+              y1: i.value.bottom,
+              y2: i.value.bottom,
+              stroke: e.value.style.chart.layout.grid.stroke,
+              "stroke-width": e.value.style.chart.layout.grid.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, $a),
+            e.value.style.chart.layout.grid.showVerticalLines ? (u(), r("g", za, [
+              (u(!0), r(z, null, T(g.value.end - g.value.start, (l, o) => (u(), r("line", {
+                x1: i.value.left + (o + 1) * L.value,
+                x2: i.value.left + (o + 1) * L.value,
+                y1: i.value.top,
+                y2: i.value.bottom,
+                stroke: e.value.style.chart.layout.grid.stroke,
+                "stroke-width": e.value.style.chart.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, Ta))), 256))
+            ])) : h("", !0)
+          ])) : h("", !0),
+          x("g", null, [
+            e.value.style.chart.layout.grid.axis.yLabel ? (u(), r("text", {
+              key: 0,
+              ref_key: "yAxisLabel",
+              ref: we,
+              "font-size": e.value.style.chart.layout.grid.axis.fontSize,
+              fill: e.value.style.chart.layout.grid.axis.color,
+              transform: `translate(${e.value.style.chart.layout.grid.axis.fontSize}, ${i.value.top + i.value.height / 2}) rotate(-90)`,
+              "text-anchor": "middle",
+              style: { transition: "none" }
+            }, w(e.value.style.chart.layout.grid.axis.yLabel), 9, Pa)) : h("", !0),
+            e.value.style.chart.layout.grid.axis.xLabel ? (u(), r("text", {
+              key: 1,
+              ref_key: "xAxisLabel",
+              ref: Ce,
+              "text-anchor": "middle",
+              x: i.value.absoluteWidth / 2,
+              y: i.value.absoluteHeight - 3,
+              "font-size": e.value.style.chart.layout.grid.axis.fontSize,
+              fill: e.value.style.chart.layout.grid.axis.color
+            }, w(e.value.style.chart.layout.grid.axis.xLabel), 9, Ia)) : h("", !0)
+          ]),
+          e.value.style.chart.layout.grid.yAxis.dataLabels.show ? (u(), r("g", {
+            key: 2,
+            ref_key: "scaleLabels",
+            ref: ke,
+            class: E({ "donut-opacity": !0, "donut-behind": m.value !== null })
+          }, [
+            (u(!0), r(z, null, T(sl.value, (l, o) => (u(), r("g", null, [
+              l.value >= M.value.min && l.value <= M.value.max ? (u(), r("line", {
+                key: 0,
+                x1: i.value.left,
+                x2: i.value.left - 5,
+                y1: l.y,
+                y2: l.y,
+                stroke: e.value.style.chart.layout.grid.stroke,
+                "stroke-width": e.value.style.chart.layout.grid.strokeWidth
+              }, null, 8, Da)) : h("", !0),
+              l.value >= M.value.min && l.value <= M.value.max ? (u(), r("text", {
+                key: 1,
+                x: i.value.left + e.value.style.chart.layout.grid.yAxis.dataLabels.offsetX - 7,
+                y: l.y + e.value.style.chart.layout.grid.yAxis.dataLabels.fontSize / 3,
+                "font-size": e.value.style.chart.layout.grid.yAxis.dataLabels.fontSize,
+                "text-anchor": "end",
+                fill: e.value.style.chart.layout.grid.yAxis.dataLabels.color,
+                "font-weight": e.value.style.chart.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
+              }, w(v(Bl)(l.value) ? v(Ge)(
+                e.value.style.chart.layout.dataLabels.formatter,
+                l.value,
+                v(pe)({
+                  p: e.value.style.chart.layout.dataLabels.prefix,
+                  v: l.value,
+                  s: e.value.style.chart.layout.dataLabels.suffix,
+                  r: e.value.style.chart.layout.grid.yAxis.dataLabels.roundingValue
+                }),
+                { datapoint: l, seriesIndex: o }
+              ) : ""), 9, Oa)) : h("", !0)
+            ]))), 256))
+          ], 2)) : h("", !0),
+          e.value.style.chart.layout.grid.xAxis.dataLabels.show ? (u(), r("g", {
+            key: 3,
+            ref_key: "timeLabelsEls",
+            ref: se,
+            class: E({ "donut-opacity": !0 })
+          }, [
+            (u(!0), r(z, null, T(g.value.end - g.value.start, (l, o) => (u(), r("g", null, [
+              (e.value.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast && (o === 0 || o === N.value - 1) || !e.value.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast) && A.value[o] && A.value[o].text ? (u(), r("g", Na, [
+                String(A.value[o].text).includes(`
+`) ? (u(), r("text", {
+                  key: 1,
+                  class: "vue-data-ui-time-label",
+                  "text-anchor": e.value.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
+                  "font-size": e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
+                  fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
+                  transform: `translate(${i.value.left + L.value * o + L.value / 2}, ${i.value.bottom + e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY}), rotate(${e.value.style.chart.layout.grid.xAxis.dataLabels.rotation})`,
+                  innerHTML: v(Ul)({
+                    content: String(A.value[o].text),
+                    fontSize: e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
+                    fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
+                    x: 0,
+                    y: 0
+                  })
+                }, null, 8, Fa)) : (u(), r("text", {
+                  key: 0,
+                  class: "vue-data-ui-time-label",
+                  "text-anchor": e.value.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
+                  "font-size": e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
+                  fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
+                  transform: `translate(${i.value.left + L.value * o + L.value / 2}, ${i.value.bottom + e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY}), rotate(${e.value.style.chart.layout.grid.xAxis.dataLabels.rotation})`
+                }, w(A.value[o].text || ""), 9, Ea))
+              ])) : h("", !0)
+            ]))), 256))
+          ], 512)) : h("", !0),
+          (u(!0), r(z, null, T(p.value, (l, o) => (u(), r("g", null, [
+            e.value.style.chart.layout.line.show && o < p.value.length - 1 && ![l.subtotal, p.value[o + 1].subtotal].includes(null) ? (u(), r("line", {
+              key: 0,
+              class: E({ "donut-opacity": !0, "donut-behind": m.value !== null }),
+              x1: l.x,
+              y1: l.y,
+              x2: p.value[o + 1].x,
+              y2: p.value[o + 1].y,
+              stroke: e.value.style.chart.layout.line.stroke,
+              "stroke-width": e.value.style.chart.layout.line.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, null, 10, Ra)) : h("", !0),
+            l.subtotal !== null ? (u(), r("g", Va, [
+              l.subtotal ? (u(), r("circle", {
+                key: 0,
+                cx: l.x,
+                cy: l.y,
+                r: l.activeRadius,
+                fill: e.value.style.chart.backgroundColor
+              }, null, 8, Ma)) : h("", !0)
+            ])) : h("", !0)
+          ]))), 256)),
+          (u(!0), r(z, null, T(p.value, (l, o) => (u(), r("g", {
+            class: E({ "donut-opacity": !0, "donut-behind": o !== m.value && m.value !== null })
+          }, [
+            l.subtotal ? (u(), r("g", Ba, [
+              m.value !== null && m.value === o ? (u(), r("g", Ua, [
+                (u(!0), r(z, null, T(l.donutHover, (n) => (u(), r("g", null, [
+                  At(n) ? (u(), r("path", {
+                    key: 0,
+                    d: v(Hl)(n, { x: n.center.endX, y: n.center.endY }, 12, 12, { x: l.x, y: l.y }, !1, 20),
+                    stroke: n.color,
+                    "stroke-width": "1",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    fill: "none"
+                  }, null, 8, Ha)) : h("", !0)
+                ]))), 256)),
+                (u(!0), r(z, null, T(l.donutHover, (n, s) => (u(), r("g", null, [
+                  At(n) ? (u(), r("text", {
+                    key: 0,
+                    "data-cy-hover-label": "",
+                    "text-anchor": v(Rt)(n, !0, 0).anchor,
+                    x: v(Rt)(n, !0, 9).x,
+                    y: v(Wl)(n, 14, 10),
+                    fill: e.value.style.chart.layout.grid.yAxis.dataLabels.color,
+                    "font-size": 8,
+                    "font-weight": "bold"
+                  }, w(n.name) + ": " + w(rl(n, l.donut)) + " (" + w(n.value === null ? "-" : Fe(n.value, n, s)) + ") ", 9, Wa)) : h("", !0)
+                ]))), 256)),
+                x("g", null, [
+                  x("circle", {
+                    cx: l.x,
+                    cy: l.y,
+                    r: l.hoverRadius,
+                    fill: e.value.style.chart.backgroundColor
+                  }, null, 8, Xa)
+                ])
+              ])) : h("", !0)
+            ])) : h("", !0)
+          ], 2))), 256)),
+          (u(!0), r(z, null, T(p.value, (l, o) => (u(), r("g", {
+            class: E({ "donut-opacity": !0, "donut-behind": o !== m.value && m.value !== null })
+          }, [
+            l.subtotal !== null ? (u(), r("g", Ga, [
+              l.subtotal === 0 ? (u(), r("circle", {
+                key: 0,
+                cx: l.x,
+                cy: l.y,
+                r: 3,
+                fill: e.value.style.chart.color
+              }, null, 8, Ya)) : m.value !== null && m.value === o ? (u(), r("g", ja, [
+                (u(!0), r(z, null, T(l.donutHover, (n, s) => (u(), r("path", {
+                  d: n.arcSlice,
+                  fill: `${n.color}`,
+                  "stroke-width": 1,
+                  stroke: e.value.style.chart.backgroundColor
+                }, null, 8, qa))), 256))
+              ])) : (u(), r("g", Ka, [
+                (u(!0), r(z, null, T(l.donut, (n, s) => (u(), r("path", {
+                  d: n.arcSlice,
+                  fill: `${n.color}`,
+                  "stroke-width": 0.5,
+                  stroke: e.value.style.chart.backgroundColor
+                }, null, 8, Za))), 256))
+              ]))
+            ])) : h("", !0)
+          ], 2))), 256)),
+          (u(!0), r(z, null, T(p.value, (l, o) => (u(), r("g", {
+            class: E({ "donut-opacity": !0, "donut-behind": o !== m.value && m.value !== null || xe.value && o !== X.value.index })
+          }, [
+            l.subtotal !== null && e.value.style.chart.layout.dataLabels.show ? (u(), r("text", {
+              key: 0,
+              "text-anchor": "middle",
+              x: l.x,
+              y: m.value === l.index && l.subtotal ? l.y + e.value.style.chart.layout.dataLabels.fontSize / 3 : l.y - l.radius - e.value.style.chart.layout.dataLabels.fontSize + e.value.style.chart.layout.dataLabels.offsetY,
+              "font-size": e.value.style.chart.layout.dataLabels.fontSize,
+              "font-weight": "bold",
+              fill: e.value.style.chart.layout.dataLabels.color
+            }, w(Fe(l.subtotal, l, o)), 9, Ja)) : h("", !0)
+          ], 2))), 256)),
+          (u(!0), r(z, null, T(p.value, (l, o) => (u(), r("rect", {
+            x: i.value.left + o * L.value,
+            y: i.value.top,
+            width: L.value,
+            height: i.value.height,
+            fill: [m.value, te.value].includes(l.index) ? `url(#hover_${_.value})` : "transparent",
+            class: E({ "donut-hover": V.value && l.subtotal && [m.value, te.value].includes(l.index) }),
+            style: {
+              pointerEvents: "none"
+            }
+          }, null, 10, Qa))), 256)),
+          (u(!0), r(z, null, T(p.value, (l, o) => (u(), r("rect", {
+            "data-cy-trap": "",
+            x: i.value.left + o * L.value,
+            y: i.value.top,
+            width: L.value,
+            height: i.value.height,
+            fill: "transparent",
+            onMouseenter: (n) => pt(l),
+            onMouseleave: (n) => mt(l),
+            onClick: (n) => Re(l, o),
+            class: E({ "donut-hover": V.value && m.value === l.index && l.subtotal })
+          }, null, 42, eo))), 256)),
+          k(t.$slots, "svg", {
+            svg: {
+              ...i.value,
+              isPrintingImg: v(De) | v(Oe) | re.value,
+              isPrintingSvg: ie.value
+            }
+          }, void 0, !0)
+        ], 46, ba)),
+        t.$slots.hint ? (u(), r("div", to, [
+          k(t.$slots, "hint", I(D({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: Se.value })), void 0, !0)
+        ])) : h("", !0)
+      ]),
+      t.$slots.watermark ? (u(), r("div", lo, [
+        k(t.$slots, "watermark", I(D({ isPrinting: v(De) || v(Oe) || re.value || ie.value })), void 0, !0)
+      ])) : h("", !0),
+      x("div", {
+        ref_key: "chartSlicer",
+        ref: ut,
+        style: Z(`width:100%;background:${e.value.style.chart.backgroundColor}`),
+        "data-dom-to-png-ignore": ""
+      }, [
+        N.value > 1 && e.value.style.chart.zoom.show ? (u(), $(ia, {
+          ref_key: "slicerComponent",
+          ref: ot,
+          key: `slicer_${Ke.value}`,
+          background: e.value.style.chart.zoom.color,
+          borderColor: e.value.style.chart.backgroundColor,
+          fontSize: e.value.style.chart.zoom.fontSize,
+          useResetSlot: e.value.style.chart.zoom.useResetSlot,
+          labelLeft: A.value[0] ? A.value[0].text : "",
+          labelRight: A.value.at(-1) ? A.value.at(-1).text : "",
+          textColor: e.value.style.chart.color,
+          inputColor: e.value.style.chart.zoom.color,
+          selectColor: e.value.style.chart.zoom.highlightColor,
+          max: N.value,
+          min: 0,
+          valueStart: g.value.start,
+          valueEnd: g.value.end,
+          start: g.value.start,
+          "onUpdate:start": a[0] || (a[0] = (l) => g.value.start = l),
+          end: g.value.end,
+          "onUpdate:end": a[1] || (a[1] = (l) => g.value.end = l),
+          refreshStartPoint: e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex : 0,
+          refreshEndPoint: e.value.style.chart.zoom.endIndex !== null ? e.value.style.chart.zoom.endIndex + 1 : N.value,
+          enableRangeHandles: e.value.style.chart.zoom.enableRangeHandles,
+          enableSelectionDrag: e.value.style.chart.zoom.enableSelectionDrag,
+          focusOnDrag: e.value.style.chart.zoom.focusOnDrag,
+          focusRangeRatio: e.value.style.chart.zoom.focusRangeRatio,
+          isCursorPointer: V.value,
+          maxWidth: e.value.style.chart.zoom.maxWidth,
+          onReset: ct
+        }, {
+          "reset-action": b(({ reset: l }) => [
+            k(t.$slots, "reset-action", I(D({ reset: l })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag", "focusOnDrag", "focusRangeRatio", "isCursorPointer", "maxWidth"])) : h("", !0)
+      ], 4),
+      x("div", {
+        id: `legend-bottom-${_.value}`
+      }, null, 8, ao),
+      et.value ? (u(), $(Il, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${_.value}` : `#legend-bottom-${_.value}`
+      }, [
+        x("div", {
+          ref_key: "chartLegend",
+          ref: lt
+        }, [
+          e.value.style.chart.legend.show ? (u(), $(ra, {
+            key: `legend_${Qe.value}`,
+            legendSet: le.value,
+            config: il.value,
+            onClickMarker: a[2] || (a[2] = ({ legend: l }) => ae(l.uid))
+          }, {
+            item: b(({ legend: l, index: o }) => [
+              x("div", {
+                onClick: (n) => ae(l.uid),
+                style: Z(`opacity:${C.value.includes(l.uid) ? 0.5 : 1}`)
+              }, w(l.display), 13, oo)
+            ]),
+            legendToggle: b(() => [
+              le.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !v($e) ? (u(), $(va, {
+                key: 0,
+                backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
+                color: e.value.style.chart.legend.selectAllToggle.color,
+                fontSize: e.value.style.chart.legend.fontSize,
+                checked: C.value.length > 0,
+                onToggle: cl
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked"])) : h("", !0)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : h("", !0),
+          k(t.$slots, "legend", { legend: le.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : h("", !0),
+      t.$slots.source ? (u(), r("div", {
+        key: 7,
+        ref_key: "source",
+        ref: at,
+        dir: "auto"
+      }, [
+        k(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      st.value && e.value.userOptions.buttons.table ? (u(), $(Dl(ue.value.component), Ol({ key: 8 }, ue.value.props, {
+        ref_key: "tableUnit",
+        ref: J,
+        onClose: _t
+      }), It({
+        content: b(() => [
+          (u(), $(v(Gt), {
+            key: `table_${Je.value}`,
+            colNames: B.value.colNames,
+            head: B.value.head,
+            body: B.value.body,
+            config: B.value.config,
+            title: e.value.table.useDialog ? "" : ue.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: V.value,
+            onClose: _t
+          }, {
+            th: b(({ th: l }) => [
+              He(w(l.name ?? l), 1)
+            ]),
+            td: b(({ td: l }) => [
+              l.value === null ? (u(), r("span", uo, "-")) : (u(), r("b", no, w(isNaN(l.value) ? "" : e.value.style.chart.layout.dataLabels.prefix) + w(!isNaN(l.value) && l.value !== null ? Number(l.value.toFixed(e.value.table.td.roundingValue)).toLocaleString() : l) + w(isNaN(l.value) ? "" : e.value.style.chart.layout.dataLabels.suffix), 1)),
+              x("span", null, w(l.percentage && !isNaN(l.percentage) ? `(${Number(l.percentage.toFixed(e.value.table.td.roundingPercentage)).toLocaleString()}%)` : ""), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: b(() => [
+            He(w(ue.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: b(() => [
+            x("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[3] || (a[3] = (l) => Ve(e.value.userOptions.callbacks.csv)),
+              style: Z({ cursor: V.value ? "cursor" : "default" })
+            }, [
+              Dt(v(Xt), {
+                name: "fileCsv",
+                stroke: ue.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : h("", !0),
+      e.value.style.chart.dialog.show ? (u(), $(v(je), {
+        key: 9,
+        ref_key: "dialog",
+        ref: Be,
+        onClose: a[4] || (a[4] = (l) => {
+          X.value = null, xe.value = !1, q.value = null, m.value = null, te.value = null;
+        }),
+        backgroundColor: e.value.style.chart.dialog.backgroundColor,
+        color: e.value.style.chart.dialog.color,
+        headerBg: e.value.style.chart.dialog.header.backgroundColor,
+        headerColor: e.value.style.chart.dialog.header.color,
+        isFullscreen: j.value,
+        fullscreenParent: F.value
+      }, {
+        title: b(() => [
+          He(w(A.value[Number(X.value.index)] ? A.value[Number(X.value.index)].text : ""), 1)
+        ]),
+        content: b(() => [
+          X.value ? (u(), $(v(Kt), {
+            key: 0,
+            config: St.value,
+            dataset: Lt.value
+          }, null, 8, ["config", "dataset"])) : h("", !0)
+        ]),
+        _: 1
+      }, 8, ["backgroundColor", "color", "headerBg", "headerColor", "isFullscreen", "fullscreenParent"])) : h("", !0),
+      v($e) ? (u(), $(Jl, { key: 10 })) : h("", !0)
+    ], 46, ha));
+  }
+}, To = /* @__PURE__ */ da(so, [["__scopeId", "data-v-30c5dcbc"]]);
+export {
+  To as default
+};