vue-data-ui 2.6.18 → 2.6.20

package/dist/{vue-ui-waffle-CgsNawVA.js → vue-ui-waffle-YwQAGMlZ.js}

@@ -1,18 +1,18 @@
-import { useSlots as at, computed as d, ref as v, watch as Ne, onMounted as ot, onBeforeUnmount as ut, createElementBlock as r, openBlock as s, unref as c, normalizeStyle as W, normalizeClass as Be, createBlock as N, createCommentVNode as p, createElementVNode as x, createVNode as re, createSlots as Ve, withCtx as m, renderSlot as g, normalizeProps as q, guardReactiveProps as H, Fragment as $, renderList as L, mergeProps as Me, toDisplayString as A, createTextVNode as De, nextTick as st } from "vue";
-import { u as rt, c as nt, t as it, p as B, a as vt, o as ct, e as ne, g as dt, b as ht, i as U, f as _, X as ft, s as pt, w as yt, G as gt, L as mt, d as bt, q as wt, r as kt, x as xt, y as Ct } from "./index-Df45PKBw.js";
+import { useSlots as at, computed as d, ref as v, watch as Ne, onMounted as ot, onBeforeUnmount as ut, createElementBlock as r, openBlock as s, unref as c, normalizeStyle as H, normalizeClass as Be, createBlock as N, createCommentVNode as p, createElementVNode as x, createVNode as re, createSlots as Ve, withCtx as m, renderSlot as g, normalizeProps as U, guardReactiveProps as G, Fragment as $, renderList as L, mergeProps as Me, toDisplayString as A, createTextVNode as De, nextTick as st } from "vue";
+import { u as rt, c as nt, t as it, p as B, a as vt, o as ct, e as ne, g as dt, b as ht, i as j, f as _, X as ft, s as pt, w as yt, G as gt, L as mt, d as bt, q as wt, r as kt, x as xt, y as Ct } from "./index-Cq7-va_5.js";
 import { t as $t, u as _t } from "./useResponsive-BWapHhVH.js";
-import { _ as Tt } from "./Title-xfHZTDT9.js";
-import { u as It, U as St } from "./usePrinter-MC5pKUx5.js";
-import { _ as Pt } from "./Tooltip-CF9cKbnr.js";
-import { D as Ot } from "./DataTable-BH56SPdO.js";
-import { L as Lt } from "./Legend-w7VxyGN0.js";
-import At from "./vue-ui-skeleton-BIYEApQO.js";
-import Ft from "./vue-ui-accordion-BbCvey8w.js";
-import { u as Re } from "./useNestedProp-BaSIdRPe.js";
-import { _ as zt } from "./PackageVersion-D1edJun6.js";
-import { P as Nt } from "./PenAndPaper-DWnLI5jM.js";
+import { _ as It } from "./Title-CUHNtIyE.js";
+import { u as Tt, U as St } from "./usePrinter-jRjc8Naz.js";
+import { _ as Pt } from "./Tooltip-BuAQ8HVL.js";
+import { D as Ot } from "./DataTable-CMUyDj6S.js";
+import { L as Lt } from "./Legend-CaMKYW-V.js";
+import At from "./vue-ui-skeleton-DIrE1OTF.js";
+import Ft from "./vue-ui-accordion-vAQ_LLoP.js";
+import { u as Re } from "./useNestedProp-BEyJNlaO.js";
+import { _ as zt } from "./PackageVersion-CURzw4q1.js";
+import { P as Nt } from "./PenAndPaper-CjiJra09.js";
 import { u as Bt } from "./useUserOptionState-BIvW1Kz7.js";
-import { _ as Vt } from "./Shape-RfSE_FzV.js";
+import { _ as Vt } from "./Shape-F5v4f45p.js";
 import { u as Mt } from "./useChartAccessibility-BWojgys7.js";
 import { _ as Dt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"], Et = ["stop-color"], Wt = ["id"], qt = ["x", "y", "height", "width"], Ht = ["height", "width"], Xt = { key: 0 }, Yt = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], Jt = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], Kt = { key: 1 }, Qt = ["rx", "x", "y", "height", "width", "fill", "filter"], Zt = ["x", "y", "height", "width", "filter"], el = { key: 0 }, tl = { key: 1 }, ll = { key: 2 }, al = { key: 3 }, ol = ["onMouseover", "x", "y", "height", "width"], ul = {
@@ -36,7 +36,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
   },
   emits: ["selectLegend"],
   setup(Ue, { expose: Ge, emit: je }) {
-    const { vue_ui_waffle: Ee } = rt(), b = Ue, We = at(), X = d(() => !!b.dataset && b.dataset.length), k = v(nt()), qe = v(null), ee = v(!1), te = v(""), V = v(null), ie = v(0), G = v(null), ve = v(null), ce = v(null), de = v(null), he = v(null), fe = v(0), pe = v(0), ye = v(0), e = d({
+    const { vue_ui_waffle: Ee } = rt(), b = Ue, We = at(), X = d(() => !!b.dataset && b.dataset.length), k = v(nt()), qe = v(null), ee = v(!1), te = v(""), V = v(null), ie = v(0), E = v(null), ve = v(null), ce = v(null), de = v(null), he = v(null), fe = v(0), pe = v(0), ye = v(0), e = d({
       get: () => we(),
       set: (t) => t
     }), { userOptionsVisible: le, setUserOptionsVisibility: ge, keepUserOptionState: me } = Bt({ config: e.value }), { svgRef: be } = Mt({ config: e.value.style.chart.title });
@@ -76,17 +76,17 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
       }), e.value.responsive) {
         const t = $t(() => {
           const { width: a, height: l } = _t({
-            chart: G.value,
+            chart: E.value,
             title: e.value.style.chart.title.text ? ve.value : null,
             legend: e.value.style.chart.legend.show ? ce.value : null,
             source: de.value,
             noTitle: he.value
           });
           requestAnimationFrame(() => {
-            F.value.width = a, F.value.height = l, T.value.width = a, T.value.height = l;
+            F.value.width = a, F.value.height = l, I.value.width = a, I.value.height = l;
           });
         });
-        Y.value = new ResizeObserver(t), Y.value.observe(G.value.parentNode);
+        Y.value = new ResizeObserver(t), Y.value.observe(E.value.parentNode);
       }
     }
     ot(() => {
@@ -94,22 +94,22 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
     }), ut(() => {
       Y.value && Y.value.disconnect();
     });
-    const { isPrinting: xe, isImaging: Ce, generatePdf: $e, generateImage: _e } = It({
+    const { isPrinting: xe, isImaging: Ce, generatePdf: $e, generateImage: _e } = Tt({
       elementId: `vue-ui-waffle_${k.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-waffle"
-    }), He = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), Te = d(() => ht(e.value.customPalette)), C = v({
+    }), He = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ie = d(() => ht(e.value.customPalette)), C = v({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     }), F = v({
       height: 512,
       width: 512
-    }), T = v({
+    }), I = v({
       top: 0,
       left: 0,
       height: 512,
       width: 512
-    }), I = d(() => (T.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), S = d(() => (T.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), j = d(() => T.value.width / e.value.style.chart.layout.grid.size), J = d(() => T.value.height / e.value.style.chart.layout.grid.size);
-    function Ie(t) {
+    }), T = d(() => (I.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), S = d(() => (I.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), W = d(() => I.value.width / e.value.style.chart.layout.grid.size), J = d(() => I.value.height / e.value.style.chart.layout.grid.size);
+    function Te(t) {
       const a = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, l = t.reduce((w, se) => w + se, 0), o = t.map((w) => w / l * a), u = o.map(Math.floor), i = o.map((w) => w % 1);
       let y = a - u.reduce((w, se) => w + se, 0);
       for (; y > 0; ) {
@@ -121,7 +121,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
     function Se() {
       return b.dataset.map((t, a) => ({
         ...t,
-        color: bt(t.color) || Te.value[a] || B[a] || B[a % B.length],
+        color: bt(t.color) || Ie.value[a] || B[a] || B[a % B.length],
         uid: `serie_${a}`,
         absoluteIndex: a
       }));
@@ -132,11 +132,11 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
     }, { deep: !0 });
     const Xe = d(() => {
       const t = h.value.filter((a, l) => !f.value.includes(a.uid)).map((a, l) => (a.values || []).reduce((o, u) => o + u, 0));
-      return Ie(t);
+      return Te(t);
     }), Ye = d(() => {
       const t = h.value.map((a, l) => (a.values || []).reduce((o, u) => o + u));
-      return Ie(t);
-    }), E = d(() => (b.dataset.forEach((t, a) => {
+      return Te(t);
+    }), q = d(() => (b.dataset.forEach((t, a) => {
       [null, void 0].includes(t.values) && ne({
         componentName: "VueUiWaffle",
         type: "datasetSerieAttribute",
@@ -170,7 +170,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
     }
     const Qe = d(() => {
       let t = 0;
-      return E.value.map((a, l) => {
+      return q.value.map((a, l) => {
         const o = t, u = o + a.proportion, i = [];
         for (let y = Math.floor(o); y < Math.floor(u); y += 1)
           i.push(y);
@@ -200,8 +200,8 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
           t.push({
             isStartOfLine: l === 0,
             position: e.value.style.chart.layout.grid.vertical ? a : l,
-            x: (e.value.style.chart.layout.grid.vertical ? a : l) * (I.value + e.value.style.chart.layout.grid.spaceBetween),
-            y: (e.value.style.chart.layout.grid.vertical ? l : a) * (S.value + e.value.style.chart.layout.grid.spaceBetween) + T.value.top
+            x: (e.value.style.chart.layout.grid.vertical ? a : l) * (T.value + e.value.style.chart.layout.grid.spaceBetween),
+            y: (e.value.style.chart.layout.grid.vertical ? l : a) * (S.value + e.value.style.chart.layout.grid.spaceBetween) + I.value.top
           });
       return t;
     }), f = v([]), z = v(!1), Pe = v(null), Oe = v(null);
@@ -237,7 +237,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
         };
         u();
       }
-      tt("selectLegend", E.value.map((u) => ({
+      tt("selectLegend", q.value.map((u) => ({
         name: u.name,
         color: u.color,
         value: u.value,
@@ -246,7 +246,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
     }
     const D = d(() => h.value.map((t, a) => ({
       name: t.name,
-      color: t.color || Te[a] || B[a] || B[a % B.length],
+      color: t.color || Ie[a] || B[a] || B[a % B.length],
       value: (t.values || []).reduce((l, o) => l + o, 0),
       uid: t.uid,
       shape: "square"
@@ -263,7 +263,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), P = d(() => E.value.map((t) => t.value).reduce((t, a) => t + a, 0)), oe = v(null);
+    })), P = d(() => q.value.map((t) => t.value).reduce((t, a) => t + a, 0)), oe = v(null);
     function et(t) {
       if (f.value.length === b.dataset.length) return;
       const a = n.value[t];
@@ -288,7 +288,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
         });
       else {
         let o = "";
-        if (o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${a.name}</div>`, o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" stroke="none" rx="1" fill="${a.color}" />${We.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${k.value}_${a.absoluteIndex})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (o += `<b>${U(
+        if (o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${a.name}</div>`, o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" stroke="none" rx="1" fill="${a.color}" />${We.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${k.value}_${a.absoluteIndex})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (o += `<b>${j(
           e.value.style.chart.layout.labels.dataLabels.formatter,
           a.value,
           _({
@@ -314,10 +314,10 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
       }
     }
     const tt = je, O = d(() => {
-      const t = E.value.map((l) => ({
+      const t = q.value.map((l) => ({
         name: l.name,
         color: l.color
-      })), a = E.value.map((l) => l.value);
+      })), a = q.value.map((l) => l.value);
       return { head: t, body: a };
     });
     function K(t) {
@@ -334,7 +334,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
     const Q = d(() => {
       const t = [
         ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
-        U(
+        j(
           e.value.style.chart.layout.labels.dataLabels.formatter,
           P.value,
           _({
@@ -350,7 +350,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
           color: u.color,
           name: u.name
         },
-        U(
+        j(
           e.value.style.chart.layout.labels.dataLabels.formatter,
           O.value.body[i],
           _({
@@ -414,9 +414,9 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
     }), (t, a) => (s(), r("div", {
       class: Be(`vue-ui-waffle ${R.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       ref_key: "waffleChart",
-      ref: G,
+      ref: E,
       id: `vue-ui-waffle_${k.value}`,
-      style: W(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
+      style: H(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
       onMouseenter: a[3] || (a[3] = () => c(ge)(!0)),
       onMouseleave: a[4] || (a[4] = () => c(ge)(!1))
     }, [
@@ -441,7 +441,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
         ref: ve,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (s(), N(Tt, {
+        (s(), N(It, {
           key: `title_${fe.value}`,
           config: {
             title: {
@@ -473,7 +473,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
         isFullscreen: R.value,
         isTooltip: C.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: G.value,
+        chartElement: E.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: Z.value,
@@ -484,58 +484,65 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
         onToggleTable: Fe,
         onToggleTooltip: ze,
         onToggleAnnotator: ue,
-        style: W({
+        style: H({
           visibility: c(me) ? c(le) ? "visible" : "hidden" : "visible"
         })
       }, Ve({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: m(({ isOpen: l, color: o }) => [
+            g(t.$slots, "menuIcon", U(G({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: m(() => [
             g(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
-          key: "0"
+          key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
           fn: m(() => [
             g(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
-          key: "1"
+          key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
           fn: m(() => [
             g(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
-          key: "2"
+          key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
           fn: m(() => [
             g(t.$slots, "optionImg", {}, void 0, !0)
           ]),
-          key: "3"
+          key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
           fn: m(() => [
             g(t.$slots, "optionTable", {}, void 0, !0)
           ]),
-          key: "4"
+          key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: m(({ toggleFullscreen: l, isFullscreen: o }) => [
-            g(t.$slots, "optionFullscreen", q(H({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+            g(t.$slots, "optionFullscreen", U(G({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
-          key: "5"
+          key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: m(({ toggleAnnotator: l, isAnnotator: o }) => [
-            g(t.$slots, "optionAnnotator", q(H({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+            g(t.$slots, "optionAnnotator", U(G({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
-          key: "6"
+          key: "7"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
       X.value ? (s(), r("svg", {
@@ -545,7 +552,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
         xmlns: c(ft),
         class: Be({ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value }),
         viewBox: `0 0 ${F.value.width <= 0 ? 10 : F.value.width} ${F.value.height <= 0 ? 10 : F.value.height}`,
-        style: W(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+        style: H(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
         re(zt),
         x("defs", null, [
@@ -589,7 +596,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
           x: l.x,
           y: l.y,
           height: S.value <= 0 ? 1e-4 : S.value,
-          width: I.value <= 0 ? 1e-4 : I.value,
+          width: T.value <= 0 ? 1e-4 : T.value,
           class: "vue-ui-waffle-custom-cell-foreignObject"
         }, [
           g(t.$slots, "cell", Me({ ref_for: !0 }, { cell: { ...l, color: n.value[o].color, ...n.value[o] }, isSelected: [null, void 0].includes(V.value) ? !0 : n.value[o].serieIndex === V.value }), void 0, !0)
@@ -598,8 +605,8 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
           key: 1,
           x: 12,
           y: 12,
-          height: T.value.height - 24,
-          width: T.value.width - 24,
+          height: I.value.height - 24,
+          width: I.value.width - 24,
           rx: 3,
           fill: "none",
           stroke: "black"
@@ -614,7 +621,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
             x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
             y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
             height: S.value <= 0 ? 1e-4 : S.value,
-            width: I.value <= 0 ? 1e-4 : I.value,
+            width: T.value <= 0 ? 1e-4 : T.value,
             fill: "white",
             stroke: e.value.style.chart.layout.rect.stroke,
             "stroke-width": e.value.style.chart.layout.rect.strokeWidth,
@@ -625,7 +632,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
             x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
             y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
             height: S.value <= 0 ? 1e-4 : S.value,
-            width: I.value <= 0 ? 1e-4 : I.value,
+            width: T.value <= 0 ? 1e-4 : T.value,
             fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${k.value}_${o})` : n.value[o].color,
             stroke: e.value.style.chart.layout.rect.stroke,
             "stroke-width": e.value.style.chart.layout.rect.strokeWidth,
@@ -637,7 +644,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
               x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
               y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
               height: S.value <= 0 ? 1e-4 : S.value,
-              width: I.value <= 0 ? 1e-4 : I.value,
+              width: T.value <= 0 ? 1e-4 : T.value,
               fill: `url(#pattern_${k.value}_${n.value[o].absoluteIndex})`,
               stroke: "none",
               filter: K(n.value[o].serieIndex)
@@ -650,16 +657,16 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
             x: l.x + e.value.style.chart.layout.labels.captions.offsetX + e.value.style.chart.layout.grid.spaceBetween / 2,
             y: l.y + e.value.style.chart.layout.labels.captions.offsetY + e.value.style.chart.layout.grid.spaceBetween / 2,
             height: J.value <= 0 ? 1e-4 : J.value,
-            width: j.value * e.value.style.chart.layout.grid.size <= 0 ? 1e-4 : j.value * e.value.style.chart.layout.grid.size,
+            width: W.value * e.value.style.chart.layout.grid.size <= 0 ? 1e-4 : W.value * e.value.style.chart.layout.grid.size,
             filter: K(n.value[o].serieIndex)
           }, [
             x("div", {
               class: "vue-ui-waffle-caption",
-              style: W(`height: 100%; width: 100%; font-size:${e.value.style.chart.layout.labels.captions.fontSize}px;display:flex;align-items:center;justify-content:flex-start;padding: 0 ${j.value / 12}px;color:${c(gt)(n.value[o].color)};gap:2px`)
+              style: H(`height: 100%; width: 100%; font-size:${e.value.style.chart.layout.labels.captions.fontSize}px;display:flex;align-items:center;justify-content:flex-start;padding: 0 ${W.value / 12}px;color:${c(gt)(n.value[o].color)};gap:2px`)
             }, [
               e.value.style.chart.layout.labels.captions.showSerieName ? (s(), r("span", el, A(e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? c(mt)({ source: n.value[o].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : n.value[o].name) + ": ", 1)) : p("", !0),
               e.value.style.chart.layout.labels.captions.showPercentage ? (s(), r("span", tl, A(c(_)({ v: n.value[o].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage })), 1)) : p("", !0),
-              e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), r("span", ll, " (" + A(c(U)(
+              e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), r("span", ll, " (" + A(c(j)(
                 e.value.style.chart.layout.labels.dataLabels.formatter,
                 n.value[o].value,
                 c(_)({
@@ -670,7 +677,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
                 }),
                 { datapoint: n.value[o], position: l }
               )) + ") ", 1)) : p("", !0),
-              !e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), r("span", al, A(c(U)(
+              !e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), r("span", al, A(c(j)(
                 e.value.style.chart.layout.labels.dataLabels.formatter,
                 n.value[o].value,
                 c(_)({
@@ -692,14 +699,14 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
           x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
           y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
           height: J.value <= 0 ? 1e-4 : J.value,
-          width: j.value <= 0 ? 1e-4 : j.value,
+          width: W.value <= 0 ? 1e-4 : W.value,
           fill: "transparent",
           stroke: "none"
         }, null, 40, ol))), 256)),
         g(t.$slots, "svg", { svg: F.value }, void 0, !0)
       ], 14, Ut)) : p("", !0),
       t.$slots.watermark ? (s(), r("div", ul, [
-        g(t.$slots, "watermark", q(H({ isPrinting: c(xe) || c(Ce) })), void 0, !0)
+        g(t.$slots, "watermark", U(G({ isPrinting: c(xe) || c(Ce) })), void 0, !0)
       ])) : p("", !0),
       X.value ? p("", !0) : (s(), N(At, {
         key: 6,
@@ -726,9 +733,9 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
           item: m(({ legend: l }) => [
             x("div", {
               onClick: (o) => l.segregate(),
-              style: W(`opacity:${f.value.includes(l.uid) ? 0.5 : 1}`)
+              style: H(`opacity:${f.value.includes(l.uid) ? 0.5 : 1}`)
             }, [
-              De(A(l.name) + ": " + A(c(U)(
+              De(A(l.name) + ": " + A(c(j)(
                 e.value.style.chart.layout.labels.dataLabels.formatter,
                 l.value,
                 c(_)({
@@ -781,17 +788,17 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: G.value,
+        parent: E.value,
         content: te.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         fontSize: e.value.style.chart.tooltip.fontSize,
         isFullscreen: R.value
       }, {
         "tooltip-before": m(() => [
-          g(t.$slots, "tooltip-before", q(H({ ...oe.value })), void 0, !0)
+          g(t.$slots, "tooltip-before", U(G({ ...oe.value })), void 0, !0)
         ]),
         "tooltip-after": m(() => [
-          g(t.$slots, "tooltip-after", q(H({ ...oe.value })), void 0, !0)
+          g(t.$slots, "tooltip-after", U(G({ ...oe.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen"]),
@@ -837,7 +844,7 @@ const Rt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], jt = ["stop-color"],
       }, 8, ["config"])) : p("", !0)
     ], 46, Rt));
   }
-}, Sl = /* @__PURE__ */ Dt(vl, [["__scopeId", "data-v-bee34bd9"]]);
+}, Sl = /* @__PURE__ */ Dt(vl, [["__scopeId", "data-v-b6e67c22"]]);
 export {
   Sl as default
 };

package/dist/{vue-ui-wheel-StQOeYIO.cjs → vue-ui-wheel-CbEf5uhL.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("./index-CkqI12gj.cjs"),Q=require("./Title-ypQseB5s.cjs"),R=require("./usePrinter-DB2FudbZ.cjs"),V=require("./useResponsive-YQYQrAZ_.cjs"),Z=require("./vue-ui-skeleton-CKwwTTRF.cjs"),U=require("./useNestedProp-B5QzQ7cl.cjs"),ee=require("./PackageVersion-DO_17qoR.cjs"),te=require("./PenAndPaper-BPAfK8a6.cjs"),le=require("./useUserOptionState-BgepsfED.cjs"),ae=require("./useChartAccessibility-Cm7nkzTG.cjs"),oe=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),ne=["id"],re=["xmlns","viewBox"],se=["width","height"],ue=["x1","x2","y1","y2","stroke","stroke-width","stroke-linecap"],ie=["d","fill"],ce=["cx","cy","r","stroke","stroke-width"],ve=["x","y","font-size","fill","font-weight"],de={key:5,class:"vue-data-ui-watermark"},he={__name:"vue-ui-wheel",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(L,{expose:X}){const{vue_ui_wheel:j}=u.useConfig(),c=L,m=e.computed(()=>!!c.dataset&&Object.keys(c.dataset).length),g=e.ref(u.createUid()),G=e.ref(null),b=e.ref(0),d=e.ref(null),B=e.ref(null),P=e.ref(null),_=e.ref(null),S=e.ref(0),t=e.computed({get:()=>$(),set:l=>l}),{userOptionsVisible:k,setUserOptionsVisibility:N,keepUserOptionState:O}=le.useUserOptionState({config:t.value}),{svgRef:x}=ae.useChartAccessibility({config:t.value.style.chart.title});function $(){const l=U.useNestedProp({userConfig:c.config,defaultConfig:j});return l.theme?{...U.useNestedProp({userConfig:u.themes.vue_ui_wheel[l.theme]||c.config,defaultConfig:l})}:l}e.watch(()=>c.config,l=>{t.value=$(),k.value=!t.value.userOptions.showOnChartHover,M(),S.value+=1},{deep:!0});const{isPrinting:z,isImaging:A,generatePdf:I,generateImage:F}=R.usePrinter({elementId:g.value,fileName:t.value.style.chart.title.text||"vue-ui-wheel"}),H=e.computed(()=>t.value.userOptions.show&&!t.value.style.chart.title.text),o=e.ref({size:360,height:360,width:360}),w=e.ref(t.value.style.chart.layout.percentage.fontSize),r=e.computed(()=>({radius:Math.min(o.value.width,o.value.height)*.9/2,centerX:o.value.width/2,centerY:o.value.height/2}));function E(l,n=1){return{x:r.value.centerX+r.value.radius*Math.cos(29.85+l*Math.PI/180)*n,y:r.value.centerY+r.value.radius*Math.sin(29.85+l*Math.PI/180)*n}}const s=e.ref(t.value.style.chart.animation.use?0:c.dataset.percentage||0);e.watch(()=>c.dataset,l=>{t.value.style.chart.animation.use?T(l.percentage):s.value=l.percentage||0},{deep:!0});const h=e.ref(null);e.onMounted(()=>{M()});function M(){if(u.objectIsEmpty(c.dataset)&&u.error({componentName:"VueUiWheel",type:"dataset"}),T(c.dataset.percentage||0),t.value.responsive){const l=V.throttle(()=>{const{width:n,height:a}=V.useResponsive({chart:d.value,title:t.value.style.chart.title.text?B.value:null,source:P.value,noTitle:_.value});requestAnimationFrame(()=>{o.value.width=n,o.value.height=a,w.value=t.value.style.chart.layout.percentage.fontSize/360*Math.min(n,a)})});h.value=new ResizeObserver(l),h.value.observe(d.value.parentNode)}}e.onBeforeUnmount(()=>{h.value&&h.value.disconnect()});function T(l){let n=t.value.style.chart.animation.speed;const a=Math.abs(l-s.value)/(n*120);function i(){s.value<l?s.value=Math.min(s.value+a,l):s.value>l&&(s.value=Math.max(s.value-a,l)),s.value!==l&&requestAnimationFrame(i)}i()}const v=e.computed(()=>Math.max(100,t.value.style.chart.layout.wheel.ticks.quantity)),f=e.computed(()=>100/v.value),q=e.computed(()=>{const l=[];for(let n=0;n<v.value;n+=1){const a=s.value>n*f.value?t.value.style.chart.layout.wheel.ticks.activeColor:t.value.style.chart.layout.wheel.ticks.inactiveColor,{x:i,y:W}=E(o.value.size/v.value*n),{x:J,y:K}=E(o.value.size/v.value*n,t.value.style.chart.layout.wheel.ticks.sizeRatio);l.push({x1:i,y1:W,x2:J,y2:K,color:t.value.style.chart.layout.wheel.ticks.gradient.show?u.shiftHue(a,n*f.value/v.value*(t.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity/100)):a})}return l}),D=e.computed(()=>u.makeDonut({series:q.value.map(l=>({name:"",value:1,color:l.color}))},r.value.centerX,r.value.centerY,r.value.radius,r.value.radius,1.99999,2,1,360,105.25,r.value.radius*(1-t.value.style.chart.layout.wheel.ticks.sizeRatio))),y=e.ref(!1);function Y(l){y.value=l,b.value+=1}const p=e.ref(!1);function C(){p.value=!p.value}return X({generatePdf:I,generateImage:F,toggleAnnotator:C}),(l,n)=>(e.openBlock(),e.createElementBlock("div",{class:"vue-ui-wheel",ref_key:"wheelChart",ref:d,id:g.value,style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor};${t.value.responsive?"height:100%":""}`),onMouseenter:n[0]||(n[0]=()=>e.unref(N)(!0)),onMouseleave:n[1]||(n[1]=()=>e.unref(N)(!1))},[t.value.userOptions.buttons.annotator?(e.openBlock(),e.createBlock(te.PenAndPaper,{key:0,svgRef:e.unref(x),backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,active:p.value,onClose:C},null,8,["svgRef","backgroundColor","color","active"])):e.createCommentVNode("",!0),H.value?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"noTitle",ref:_,class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},null,512)):e.createCommentVNode("",!0),t.value.style.chart.title.text?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"chartTitle",ref:B,style:"width:100%;background:transparent;padding-bottom:12px"},[(e.openBlock(),e.createBlock(Q._sfc_main,{key:`title_${S.value}`,config:{title:{cy:"wheel-title",...t.value.style.chart.title},subtitle:{cy:"wheel-subtitle",...t.value.style.chart.title.subtitle}}},null,8,["config"]))],512)):e.createCommentVNode("",!0),t.value.userOptions.show&&m.value&&(e.unref(O)||e.unref(k))?(e.openBlock(),e.createBlock(R.UserOptions,{ref_key:"details",ref:G,key:`user_options_${b.value}`,backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,isPrinting:e.unref(z),isImaging:e.unref(A),uid:g.value,hasPdf:t.value.userOptions.buttons.pdf,hasImg:t.value.userOptions.buttons.img,hasFullscreen:t.value.userOptions.buttons.fullscreen,hasXls:!1,isFullscreen:y.value,position:t.value.userOptions.position,titles:{...t.value.userOptions.buttonTitles},hasAnnotator:t.value.userOptions.buttons.annotator,isAnnotation:p.value,chartElement:d.value,onToggleFullscreen:Y,onGeneratePdf:e.unref(I),onGenerateImage:e.unref(F),onToggleAnnotator:C,style:e.normalizeStyle({visibility:e.unref(O)?e.unref(k)?"visible":"hidden":"visible"})},e.createSlots({_:2},[l.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,l.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionImg",{},void 0,!0)]),key:"1"}:void 0,l.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:a,isFullscreen:i})=>[e.renderSlot(l.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:a,isFullscreen:i})),void 0,!0)]),key:"2"}:void 0,l.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:a,isAnnotator:i})=>[e.renderSlot(l.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:a,isAnnotator:i})),void 0,!0)]),key:"3"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasFullscreen","isFullscreen","position","titles","hasAnnotator","isAnnotation","chartElement","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),m.value?(e.openBlock(),e.createElementBlock("svg",{key:4,ref_key:"svgRef",ref:x,xmlns:e.unref(u.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":y.value,"vue-data-ui-fulscreen--off":!y.value}),viewBox:`0 0 ${o.value.width<=0?10:o.value.width} ${o.value.height<=0?10:o.value.height}`,style:e.normalizeStyle(`max-width:100%;overflow:visible;background:transparent;color:${t.value.style.chart.color}`)},[e.createVNode(ee._sfc_main),l.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:o.value.width<=0?10:o.value.width,height:o.value.height<=0?10:o.value.height,style:{pointerEvents:"none"}},[e.renderSlot(l.$slots,"chart-background",{},void 0,!0)],8,se)):e.createCommentVNode("",!0),t.value.style.chart.layout.wheel.ticks.type==="classic"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(q.value,(a,i)=>(e.openBlock(),e.createElementBlock("line",{x1:a.x1,x2:a.x2,y1:a.y1,y2:a.y2,stroke:a.color,"stroke-width":t.value.style.chart.layout.wheel.ticks.strokeWidth/360*Math.min(o.value.width,o.value.height),"stroke-linecap":t.value.style.chart.layout.wheel.ticks.rounded?"round":"butt",class:e.normalizeClass({"vue-ui-tick-animated":t.value.style.chart.animation.use&&i*f.value<=s.value})},null,10,ue))),256)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(D.value,(a,i)=>(e.openBlock(),e.createElementBlock("path",{d:a.arcSlice,fill:a.color,class:e.normalizeClass({"vue-ui-tick-animated":t.value.style.chart.animation.use&&i*f.value<=s.value})},null,10,ie))),256)),t.value.style.chart.layout.innerCircle.show?(e.openBlock(),e.createElementBlock("circle",{key:3,cx:r.value.centerX,cy:r.value.centerY,r:r.value.radius*.8<=0?1e-4:r.value.radius*.8,stroke:t.value.style.chart.layout.innerCircle.stroke,"stroke-width":t.value.style.chart.layout.innerCircle.strokeWidth,fill:"none"},null,8,ce)):e.createCommentVNode("",!0),t.value.style.chart.layout.percentage.show?(e.openBlock(),e.createElementBlock("text",{key:4,x:r.value.centerX,y:r.value.centerY+w.value/3,"font-size":w.value,fill:t.value.style.chart.layout.wheel.ticks.gradient.show?e.unref(u.shiftHue)(t.value.style.chart.layout.wheel.ticks.activeColor,s.value/100*(t.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity/100)):t.value.style.chart.layout.wheel.ticks.activeColor,"text-anchor":"middle","font-weight":t.value.style.chart.layout.percentage.bold?"bold":"normal",style:{"font-variant-numeric":"tabluar-nums"}},e.toDisplayString(e.unref(u.applyDataLabel)(t.value.style.chart.layout.percentage.formatter,e.unref(u.checkNaN)(s.value),e.unref(u.dataLabel)({v:e.unref(u.checkNaN)(s.value),s:"%",r:t.value.style.chart.layout.percentage.rounding}))),9,ve)):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"svg",{svg:o.value},void 0,!0)],14,re)):e.createCommentVNode("",!0),l.$slots.watermark?(e.openBlock(),e.createElementBlock("div",de,[e.renderSlot(l.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(z)||e.unref(A)})),void 0,!0)])):e.createCommentVNode("",!0),l.$slots.source?(e.openBlock(),e.createElementBlock("div",{key:6,ref_key:"source",ref:P,dir:"auto"},[e.renderSlot(l.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),m.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(Z.default,{key:7,config:{type:"wheel",style:{backgroundColor:t.value.style.chart.backgroundColor,wheel:{color:"#CCCCCC"}}}},null,8,["config"]))],44,ne))}},fe=oe._export_sfc(he,[["__scopeId","data-v-2eb72b2e"]]);exports.default=fe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),i=require("./index-CmhvuQro.cjs"),Q=require("./Title-m1x23s4w.cjs"),R=require("./usePrinter-DhZH4pcR.cjs"),V=require("./useResponsive-YQYQrAZ_.cjs"),Z=require("./vue-ui-skeleton-DyJu1ibj.cjs"),U=require("./useNestedProp-CnH-XcZU.cjs"),ee=require("./PackageVersion-Vv7wNIAl.cjs"),te=require("./PenAndPaper-DSEAEpTs.cjs"),le=require("./useUserOptionState-BgepsfED.cjs"),ne=require("./useChartAccessibility-Cm7nkzTG.cjs"),oe=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),ae=["id"],re=["xmlns","viewBox"],se=["width","height"],ue=["x1","x2","y1","y2","stroke","stroke-width","stroke-linecap"],ie=["d","fill"],ce=["cx","cy","r","stroke","stroke-width"],ve=["x","y","font-size","fill","font-weight"],de={key:5,class:"vue-data-ui-watermark"},he={__name:"vue-ui-wheel",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(L,{expose:X}){const{vue_ui_wheel:j}=i.useConfig(),c=L,m=e.computed(()=>!!c.dataset&&Object.keys(c.dataset).length),g=e.ref(i.createUid()),G=e.ref(null),b=e.ref(0),d=e.ref(null),B=e.ref(null),P=e.ref(null),S=e.ref(null),_=e.ref(0),t=e.computed({get:()=>$(),set:l=>l}),{userOptionsVisible:k,setUserOptionsVisibility:N,keepUserOptionState:O}=le.useUserOptionState({config:t.value}),{svgRef:x}=ne.useChartAccessibility({config:t.value.style.chart.title});function $(){const l=U.useNestedProp({userConfig:c.config,defaultConfig:j});return l.theme?{...U.useNestedProp({userConfig:i.themes.vue_ui_wheel[l.theme]||c.config,defaultConfig:l})}:l}e.watch(()=>c.config,l=>{t.value=$(),k.value=!t.value.userOptions.showOnChartHover,M(),_.value+=1},{deep:!0});const{isPrinting:I,isImaging:z,generatePdf:A,generateImage:F}=R.usePrinter({elementId:g.value,fileName:t.value.style.chart.title.text||"vue-ui-wheel"}),H=e.computed(()=>t.value.userOptions.show&&!t.value.style.chart.title.text),o=e.ref({size:360,height:360,width:360}),w=e.ref(t.value.style.chart.layout.percentage.fontSize),r=e.computed(()=>({radius:Math.min(o.value.width,o.value.height)*.9/2,centerX:o.value.width/2,centerY:o.value.height/2}));function E(l,a=1){return{x:r.value.centerX+r.value.radius*Math.cos(29.85+l*Math.PI/180)*a,y:r.value.centerY+r.value.radius*Math.sin(29.85+l*Math.PI/180)*a}}const s=e.ref(t.value.style.chart.animation.use?0:c.dataset.percentage||0);e.watch(()=>c.dataset,l=>{t.value.style.chart.animation.use?T(l.percentage):s.value=l.percentage||0},{deep:!0});const h=e.ref(null);e.onMounted(()=>{M()});function M(){if(i.objectIsEmpty(c.dataset)&&i.error({componentName:"VueUiWheel",type:"dataset"}),T(c.dataset.percentage||0),t.value.responsive){const l=V.throttle(()=>{const{width:a,height:n}=V.useResponsive({chart:d.value,title:t.value.style.chart.title.text?B.value:null,source:P.value,noTitle:S.value});requestAnimationFrame(()=>{o.value.width=a,o.value.height=n,w.value=t.value.style.chart.layout.percentage.fontSize/360*Math.min(a,n)})});h.value=new ResizeObserver(l),h.value.observe(d.value.parentNode)}}e.onBeforeUnmount(()=>{h.value&&h.value.disconnect()});function T(l){let a=t.value.style.chart.animation.speed;const n=Math.abs(l-s.value)/(a*120);function u(){s.value<l?s.value=Math.min(s.value+n,l):s.value>l&&(s.value=Math.max(s.value-n,l)),s.value!==l&&requestAnimationFrame(u)}u()}const v=e.computed(()=>Math.max(100,t.value.style.chart.layout.wheel.ticks.quantity)),f=e.computed(()=>100/v.value),q=e.computed(()=>{const l=[];for(let a=0;a<v.value;a+=1){const n=s.value>a*f.value?t.value.style.chart.layout.wheel.ticks.activeColor:t.value.style.chart.layout.wheel.ticks.inactiveColor,{x:u,y:W}=E(o.value.size/v.value*a),{x:J,y:K}=E(o.value.size/v.value*a,t.value.style.chart.layout.wheel.ticks.sizeRatio);l.push({x1:u,y1:W,x2:J,y2:K,color:t.value.style.chart.layout.wheel.ticks.gradient.show?i.shiftHue(n,a*f.value/v.value*(t.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity/100)):n})}return l}),D=e.computed(()=>i.makeDonut({series:q.value.map(l=>({name:"",value:1,color:l.color}))},r.value.centerX,r.value.centerY,r.value.radius,r.value.radius,1.99999,2,1,360,105.25,r.value.radius*(1-t.value.style.chart.layout.wheel.ticks.sizeRatio))),y=e.ref(!1);function Y(l){y.value=l,b.value+=1}const p=e.ref(!1);function C(){p.value=!p.value}return X({generatePdf:A,generateImage:F,toggleAnnotator:C}),(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:"vue-ui-wheel",ref_key:"wheelChart",ref:d,id:g.value,style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor};${t.value.responsive?"height:100%":""}`),onMouseenter:a[0]||(a[0]=()=>e.unref(N)(!0)),onMouseleave:a[1]||(a[1]=()=>e.unref(N)(!1))},[t.value.userOptions.buttons.annotator?(e.openBlock(),e.createBlock(te.PenAndPaper,{key:0,svgRef:e.unref(x),backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,active:p.value,onClose:C},null,8,["svgRef","backgroundColor","color","active"])):e.createCommentVNode("",!0),H.value?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"noTitle",ref:S,class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},null,512)):e.createCommentVNode("",!0),t.value.style.chart.title.text?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"chartTitle",ref:B,style:"width:100%;background:transparent;padding-bottom:12px"},[(e.openBlock(),e.createBlock(Q._sfc_main,{key:`title_${_.value}`,config:{title:{cy:"wheel-title",...t.value.style.chart.title},subtitle:{cy:"wheel-subtitle",...t.value.style.chart.title.subtitle}}},null,8,["config"]))],512)):e.createCommentVNode("",!0),t.value.userOptions.show&&m.value&&(e.unref(O)||e.unref(k))?(e.openBlock(),e.createBlock(R.UserOptions,{ref_key:"details",ref:G,key:`user_options_${b.value}`,backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,isPrinting:e.unref(I),isImaging:e.unref(z),uid:g.value,hasPdf:t.value.userOptions.buttons.pdf,hasImg:t.value.userOptions.buttons.img,hasFullscreen:t.value.userOptions.buttons.fullscreen,hasXls:!1,isFullscreen:y.value,position:t.value.userOptions.position,titles:{...t.value.userOptions.buttonTitles},hasAnnotator:t.value.userOptions.buttons.annotator,isAnnotation:p.value,chartElement:d.value,onToggleFullscreen:Y,onGeneratePdf:e.unref(A),onGenerateImage:e.unref(F),onToggleAnnotator:C,style:e.normalizeStyle({visibility:e.unref(O)?e.unref(k)?"visible":"hidden":"visible"})},e.createSlots({_:2},[l.$slots.menuIcon?{name:"menuIcon",fn:e.withCtx(({isOpen:n,color:u})=>[e.renderSlot(l.$slots,"menuIcon",e.normalizeProps(e.guardReactiveProps({isOpen:n,color:u})),void 0,!0)]),key:"0"}:void 0,l.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionPdf",{},void 0,!0)]),key:"1"}:void 0,l.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionImg",{},void 0,!0)]),key:"2"}:void 0,l.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:n,isFullscreen:u})=>[e.renderSlot(l.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:n,isFullscreen:u})),void 0,!0)]),key:"3"}:void 0,l.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:n,isAnnotator:u})=>[e.renderSlot(l.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:n,isAnnotator:u})),void 0,!0)]),key:"4"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasFullscreen","isFullscreen","position","titles","hasAnnotator","isAnnotation","chartElement","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),m.value?(e.openBlock(),e.createElementBlock("svg",{key:4,ref_key:"svgRef",ref:x,xmlns:e.unref(i.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":y.value,"vue-data-ui-fulscreen--off":!y.value}),viewBox:`0 0 ${o.value.width<=0?10:o.value.width} ${o.value.height<=0?10:o.value.height}`,style:e.normalizeStyle(`max-width:100%;overflow:visible;background:transparent;color:${t.value.style.chart.color}`)},[e.createVNode(ee._sfc_main),l.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:o.value.width<=0?10:o.value.width,height:o.value.height<=0?10:o.value.height,style:{pointerEvents:"none"}},[e.renderSlot(l.$slots,"chart-background",{},void 0,!0)],8,se)):e.createCommentVNode("",!0),t.value.style.chart.layout.wheel.ticks.type==="classic"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(q.value,(n,u)=>(e.openBlock(),e.createElementBlock("line",{x1:n.x1,x2:n.x2,y1:n.y1,y2:n.y2,stroke:n.color,"stroke-width":t.value.style.chart.layout.wheel.ticks.strokeWidth/360*Math.min(o.value.width,o.value.height),"stroke-linecap":t.value.style.chart.layout.wheel.ticks.rounded?"round":"butt",class:e.normalizeClass({"vue-ui-tick-animated":t.value.style.chart.animation.use&&u*f.value<=s.value})},null,10,ue))),256)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(D.value,(n,u)=>(e.openBlock(),e.createElementBlock("path",{d:n.arcSlice,fill:n.color,class:e.normalizeClass({"vue-ui-tick-animated":t.value.style.chart.animation.use&&u*f.value<=s.value})},null,10,ie))),256)),t.value.style.chart.layout.innerCircle.show?(e.openBlock(),e.createElementBlock("circle",{key:3,cx:r.value.centerX,cy:r.value.centerY,r:r.value.radius*.8<=0?1e-4:r.value.radius*.8,stroke:t.value.style.chart.layout.innerCircle.stroke,"stroke-width":t.value.style.chart.layout.innerCircle.strokeWidth,fill:"none"},null,8,ce)):e.createCommentVNode("",!0),t.value.style.chart.layout.percentage.show?(e.openBlock(),e.createElementBlock("text",{key:4,x:r.value.centerX,y:r.value.centerY+w.value/3,"font-size":w.value,fill:t.value.style.chart.layout.wheel.ticks.gradient.show?e.unref(i.shiftHue)(t.value.style.chart.layout.wheel.ticks.activeColor,s.value/100*(t.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity/100)):t.value.style.chart.layout.wheel.ticks.activeColor,"text-anchor":"middle","font-weight":t.value.style.chart.layout.percentage.bold?"bold":"normal",style:{"font-variant-numeric":"tabluar-nums"}},e.toDisplayString(e.unref(i.applyDataLabel)(t.value.style.chart.layout.percentage.formatter,e.unref(i.checkNaN)(s.value),e.unref(i.dataLabel)({v:e.unref(i.checkNaN)(s.value),s:"%",r:t.value.style.chart.layout.percentage.rounding}))),9,ve)):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"svg",{svg:o.value},void 0,!0)],14,re)):e.createCommentVNode("",!0),l.$slots.watermark?(e.openBlock(),e.createElementBlock("div",de,[e.renderSlot(l.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(I)||e.unref(z)})),void 0,!0)])):e.createCommentVNode("",!0),l.$slots.source?(e.openBlock(),e.createElementBlock("div",{key:6,ref_key:"source",ref:P,dir:"auto"},[e.renderSlot(l.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),m.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(Z.default,{key:7,config:{type:"wheel",style:{backgroundColor:t.value.style.chart.backgroundColor,wheel:{color:"#CCCCCC"}}}},null,8,["config"]))],44,ae))}},fe=oe._export_sfc(he,[["__scopeId","data-v-a0e08156"]]);exports.default=fe;