vue-data-ui 3.2.1 → 3.2.3

package/dist/vue-ui-wheel-DJlN8joO.js

@@ -0,0 +1,620 @@
+import { useCssVars as xt, computed as m, defineAsyncComponent as ke, ref as _, toRefs as Mt, watch as Le, shallowRef as Ue, onMounted as Ct, onBeforeUnmount as _t, createElementBlock as n, openBlock as o, unref as c, normalizeStyle as fe, normalizeClass as P, createBlock as se, createCommentVNode as S, createSlots as At, withCtx as V, renderSlot as z, normalizeProps as oe, guardReactiveProps as ne, createVNode as $t, Fragment as $, renderList as O, createElementVNode as It, toDisplayString as St } from "vue";
+import { c as Rt, t as Pt, o as zt, f as Ot, i as Z, n as Wt, X as Dt, m as je, a as Tt, q as Be, d as Ft } from "./lib-BEpWEyMm.js";
+import { t as Xt, u as Nt } from "./useResponsive-DfdjqQps.js";
+import { u as Lt, a as Ee } from "./useNestedProp-CLD3Gk9S.js";
+import { u as Ut } from "./usePrinter-w23K-ezx.js";
+import { u as jt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Bt } from "./useChartAccessibility-9icAAmYg.js";
+import { t as Et } from "./themes-D3cUNuKw.js";
+import Yt from "./Title-C__lOIPC.js";
+import Ht from "./img-DjWwQXVS.js";
+import { u as qt, B as Gt } from "./BaseScanner-BgWxam9d.js";
+import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"], Qt = ["d", "stroke", "stroke-width"], ea = ["cx", "cy", "r", "stroke", "stroke-width"], ta = { key: 0 }, aa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], la = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], sa = { key: 1 }, oa = ["d", "fill", "stroke", "stroke-width"], na = ["d", "fill", "stroke", "stroke-width"], ua = ["d", "fill", "stroke", "stroke-width"], ia = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], ra = ["d", "fill", "stroke", "stroke-width"], ca = { key: 5 }, ha = ["x", "y", "height"], va = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], da = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, ya = {
+  __name: "vue-ui-wheel",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(Ye, { expose: He }) {
+    xt((t) => ({
+      v69bfe3e6: nt.value,
+      v73b9429a: ut.value,
+      v73b97d74: it.value
+    }));
+    const qe = ke(() => import("./PenAndPaper-CR8q353D.js")), Ge = ke(() => import("./UserOptions-DsTgvAok.js")), Ve = ke(() => import("./PackageVersion-oBQ8brnx.js")), { vue_ui_wheel: Ze } = Lt(), F = Ye, Je = m(() => !!F.dataset && Object.keys(F.dataset).length), ue = _(Rt()), Ke = _(null), pe = _(0), X = _(null), ge = _(null), me = _(null), we = _(null), be = _(0), e = _(ce()), { loading: xe, FINAL_DATASET: ie } = qt({
+      ...Mt(F),
+      FINAL_CONFIG: e,
+      prepareConfig: ce,
+      skeletonDataset: { percentage: 50 },
+      skeletonConfig: Pt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              animation: { use: !1 },
+              layout: {
+                wheel: {
+                  ticks: {
+                    activeColor: "#6A6A6A80",
+                    inactiveColor: "#CACACA80"
+                  }
+                },
+                innerCircle: {
+                  stroke: "#CACACA80"
+                }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: re, setUserOptionsVisibility: Me, keepUserOptionState: Ce } = jt({ config: e.value }), { svgRef: _e } = Bt({ config: e.value.style.chart.title });
+    function ce() {
+      const t = Ee({
+        userConfig: F.config,
+        defaultConfig: Ze
+      });
+      return t.theme ? {
+        ...Ee({
+          userConfig: Et.vue_ui_wheel[t.theme] || F.config,
+          defaultConfig: t
+        })
+      } : t;
+    }
+    Le(() => F.config, (t) => {
+      e.value = ce(), re.value = !e.value.userOptions.showOnChartHover, Pe(), be.value += 1;
+    }, { deep: !0 });
+    const { isPrinting: Ae, isImaging: $e, generatePdf: Ie, generateImage: Se } = Ut({
+      elementId: ue.value,
+      fileName: e.value.style.chart.title.text || "vue-ui-wheel",
+      options: e.value.userOptions.print
+    }), Qe = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = _({
+      size: 360,
+      height: 360,
+      width: 360
+    }), B = _(e.value.style.chart.layout.percentage.fontSize), i = m(() => ({
+      radius: Math.min(u.value.width, u.value.height) * 0.9 / 2 * e.value.style.chart.layout.wheel.radiusRatio,
+      centerX: u.value.width / 2,
+      centerY: u.value.height / 2
+    }));
+    function Re(t, s = 1) {
+      return {
+        x: i.value.centerX + i.value.radius * Math.cos(29.85 + t * Math.PI / 180) * s,
+        y: i.value.centerY + i.value.radius * Math.sin(29.85 + t * Math.PI / 180) * s
+      };
+    }
+    const d = _(e.value.style.chart.animation.use ? 0 : ie.value.percentage || 0);
+    Le(() => ie.value, (t) => {
+      e.value.style.chart.animation.use ? Te(t.percentage) : d.value = t.percentage || 0;
+    }, { deep: !0 });
+    const W = Ue(null), L = Ue(null);
+    Ct(() => {
+      Pe();
+    });
+    const et = m(() => !!e.value.debug);
+    function Pe() {
+      if (zt(F.dataset) && Ot({
+        componentName: "VueUiWheel",
+        type: "dataset",
+        debug: et.value
+      }), e.value.responsive) {
+        const t = Xt(() => {
+          const { width: s, height: a } = Nt({
+            chart: X.value,
+            title: e.value.style.chart.title.text ? ge.value : null,
+            source: me.value,
+            noTitle: we.value
+          });
+          requestAnimationFrame(() => {
+            u.value.width = s, u.value.height = a, B.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(s, a);
+          });
+        });
+        W.value && (L.value && W.value.unobserve(L.value), W.value.disconnect()), W.value = new ResizeObserver(t), L.value = X.value.parentNode, W.value.observe(L.value);
+      }
+      Te(ie.value.percentage || 0);
+    }
+    _t(() => {
+      W.value && (L.value && W.value.unobserve(L.value), W.value.disconnect());
+    });
+    function J([t, s, a], l) {
+      const r = Math.cos(l), v = Math.sin(l);
+      return [t, s * r - a * v, s * v + a * r];
+    }
+    function K([t, s, a], l) {
+      const r = l / (l - a);
+      return [t * r, s * r, a, r];
+    }
+    function ze(t, s) {
+      const a = t.replace("#", ""), l = parseInt(a.substring(0, 2), 16), r = parseInt(a.substring(2, 4), 16), v = parseInt(a.substring(4, 6), 16), y = 1 - Math.min(1, Math.max(0, e.value.style.chart.layout.wheel.ticks.shadeColorRatio3d)) * s, k = Math.max(0, Math.min(255, Math.round(l * y))), x = Math.max(0, Math.min(255, Math.round(r * y))), M = Math.max(0, Math.min(255, Math.round(v * y)));
+      return `#${k.toString(16).padStart(2, "0")}${x.toString(16).padStart(2, "0")}${M.toString(16).padStart(2, "0")}`;
+    }
+    function tt({
+      cx: t,
+      cy: s,
+      radius: a,
+      innerRatio: l = 0.8,
+      count: r = 120,
+      startDeg: v = 0,
+      axDeg: w = 50,
+      f: y = 520,
+      baseStroke: k = 5,
+      activeColor: x,
+      inactiveColor: M,
+      getActive: A
+    }) {
+      const h = w * Math.PI / 180, p = a, C = a * l, b = [];
+      for (let g = 0; g < r; g += 1) {
+        const f = (g / r * 360 + v) * Math.PI / 180, R = t + p * Math.cos(f), j = s + p * Math.sin(f), N = t + C * Math.cos(f), E = s + C * Math.sin(f), Y = [R - t, j - s, 0], H = [N - t, E - s, 0], [ae, Ne, q] = J(Y, h), [de, ye, G] = J(H, h), [le, rt, , ct] = K([ae, Ne, q], y), [ht, vt, , ka] = K([de, ye, G], y), dt = t + le, yt = s + rt, kt = t + ht, ft = s + vt, pt = (Math.max(q, G) - -p * Math.sin(h)) / (2 * p * Math.sin(h) || 1), gt = A ? A(g) : !0, mt = e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(x, g * I.value / T.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : x, wt = ze(gt ? mt : M, pt), bt = Math.max(1.25, k * ct * (Math.min(u.value.width, u.value.height) / 360));
+        b.push({ i: g, x1: dt, y1: yt, x2: kt, y2: ft, stroke: bt, color: wt, z: Math.max(q, G) });
+      }
+      return b.sort((g, f) => g.z - f.z), b;
+    }
+    const Oe = m(() => {
+      if (!e.value.layout === "3d") return null;
+      const t = T.value, s = e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(e.value.style.chart.layout.wheel.ticks.activeColor, 0) : e.value.style.chart.layout.wheel.ticks.activeColor, a = e.value.style.chart.layout.wheel.ticks.inactiveColor, l = e.value.style.chart.layout.wheel.ticks.strokeWidth;
+      return tt({
+        cx: i.value.centerX,
+        cy: i.value.centerY,
+        radius: i.value.radius,
+        innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
+        count: t,
+        startDeg: -90,
+        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
+        f: Math.min(u.value.width, u.value.height) * 1.45,
+        baseStroke: l,
+        activeColor: s,
+        inactiveColor: a,
+        getActive: (r) => d.value > r * I.value
+      });
+    });
+    function We({ cx: t, cy: s, r: a, count: l = 180, startDeg: r = -90, axDeg: v = 50, f: w }) {
+      const y = v * Math.PI / 180, k = [];
+      let x = 0;
+      for (let h = 0; h < l; h += 1) {
+        const p = (h / l * 360 + r) * Math.PI / 180, C = [a * Math.cos(p), a * Math.sin(p), 0], [b, g, f] = J(C, y), [R, j, , N] = K([b, g, f], w);
+        x += N, k.push([t + R, s + j]);
+      }
+      let M = `M ${k[0][0]} ${k[0][1]}`;
+      for (let h = 1; h < k.length; h += 1)
+        M += ` L ${k[h][0]} ${k[h][1]}`;
+      M += " Z";
+      const A = x / l;
+      return { d: M, avgScale: A, pts: k };
+    }
+    const D = m(() => {
+      if (e.value.layout !== "3d") return null;
+      const t = Math.min(u.value.width, u.value.height) * 1.45, s = e.value.style.chart.layout.wheel.tiltAngle3d, a = i.value.radius, { pts: l, avgScale: r } = (() => {
+        const C = a, b = s, { avgScale: g, pts: f } = We({
+          cx: i.value.centerX,
+          cy: i.value.centerY,
+          r: C,
+          startDeg: -90,
+          axDeg: b,
+          f: t
+        });
+        return { pts: f, avgScale: g };
+      })();
+      let v = 1 / 0, w = 1 / 0, y = -1 / 0, k = -1 / 0;
+      for (const [C, b] of l)
+        C < v && (v = C), b < w && (w = b), C > y && (y = C), b > k && (k = b);
+      const x = e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.value.height), M = e.value.style.chart.layout.innerCircle.strokeWidth || 0, A = 0.5 * Math.max(x, M * (r || 1)), h = Math.max(0, Number(e.value.style.chart.layout.wheel.ticks.depth3d) || 0), p = A;
+      return {
+        x: v - p,
+        y: w - h - p,
+        w: y - v + 2 * p,
+        h: k - (w - h) + 2 * p
+      };
+    });
+    function at(t) {
+      const s = Math.min(u.value.width, u.value.height) * 1.45, { d: a, avgScale: l } = We({
+        cx: i.value.centerX,
+        cy: i.value.centerY,
+        r: t,
+        startDeg: -90,
+        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
+        f: s
+      }), v = (e.value.style.chart.layout.innerCircle.strokeWidth || 1) * l;
+      return {
+        d: a,
+        stroke: e.value.style.chart.layout.innerCircle.stroke,
+        strokeWidth: v
+      };
+    }
+    const De = m(() => at(Math.max(0, i.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio)));
+    function Q({ cx: t, cy: s, r: a, aRad: l, ax: r, f: v }) {
+      const w = [a * Math.cos(l), a * Math.sin(l), 0], [y, k, x] = J(w, r), [M, A, , h] = K([y, k, x], v);
+      return { x: t + M, y: s + A, z: x, s: h };
+    }
+    function lt({
+      cx: t,
+      cy: s,
+      radius: a,
+      innerRatio: l = 0.8,
+      count: r = 120,
+      startDeg: v = -87,
+      axDeg: w = 45,
+      f: y = 600,
+      activeColor: k,
+      inactiveColor: x,
+      getActive: M,
+      Y: A = 0
+    }) {
+      const h = w * Math.PI / 180, p = a, C = a * l, b = 2 * Math.PI / r, g = [];
+      for (let f = 0; f < r; f += 1) {
+        const R = v * Math.PI / 180 + b * f, j = R + b * Math.min(1, e.value.style.chart.layout.wheel.ticks.spacingRatio3d), N = Q({ cx: t, cy: s + A, r: p, aRad: R, ax: h, f: y }), E = Q({ cx: t, cy: s + A, r: p, aRad: j, ax: h, f: y }), Y = Q({ cx: t, cy: s + A, r: C, aRad: j, ax: h, f: y }), H = Q({ cx: t, cy: s + A, r: C, aRad: R, ax: h, f: y }), ae = (N.z + E.z + H.z + Y.z) / 4, q = (M ? M(f) : !0) ? e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(
+          e.value.style.chart.layout.wheel.ticks.activeColor,
+          f * (100 / r) / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
+        ) : k : x, de = (() => {
+          const le = p * Math.sin(h) || 1;
+          return (ae - -le) / (2 * le);
+        })(), ye = ze(q, de), G = `M ${N.x} ${N.y} L ${E.x} ${E.y} L ${Y.x} ${Y.y} L ${H.x} ${H.y} Z`;
+        g.push({ i: f, d: G, fill: ye, z: ae });
+      }
+      return g.sort((f, R) => f.z - R.z), g;
+    }
+    const he = m(() => {
+      if (e.value.layout !== "3d") return null;
+      const t = T.value;
+      return (s) => lt({
+        cx: i.value.centerX,
+        cy: i.value.centerY,
+        radius: i.value.radius,
+        innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
+        count: t,
+        startDeg: -90,
+        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
+        f: Math.min(u.value.width, u.value.height) * 1.45,
+        activeColor: e.value.style.chart.layout.wheel.ticks.activeColor,
+        inactiveColor: e.value.style.chart.layout.wheel.ticks.inactiveColor,
+        getActive: (a) => d.value > a * (100 / t),
+        Y: s
+      });
+    });
+    function Te(t) {
+      let s = e.value.style.chart.animation.speed;
+      const a = Math.abs(t - d.value) / (s * 120);
+      function l() {
+        d.value < t ? d.value = Math.min(d.value + a, t) : d.value > t && (d.value = Math.max(d.value - a, t)), d.value !== t && requestAnimationFrame(l);
+      }
+      l();
+    }
+    const T = m(() => (e.value.debug && e.value.style.chart.layout.wheel.ticks.quantity < 12 && console.warn("VueUiWheel - The min number of ticks is 12"), e.value.debug && e.value.style.chart.layout.wheel.ticks.quantity > 200 && console.warn("VueUiWheel - The max number of ticks is 200"), Math.max(12, Math.min(e.value.style.chart.layout.wheel.ticks.quantity, 200)))), I = m(() => 100 / T.value), Fe = m(() => {
+      const t = [];
+      for (let s = 0; s < T.value; s += 1) {
+        const a = d.value > s * I.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: l, y: r } = Re(u.value.size / T.value * s), { x: v, y: w } = Re(u.value.size / T.value * s, e.value.style.chart.layout.wheel.ticks.sizeRatio);
+        t.push({
+          x1: l,
+          y1: r,
+          x2: v,
+          y2: w,
+          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(a, s * I.value / T.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
+        });
+      }
+      return t;
+    }), st = m(() => Wt({ series: Fe.value.map((t) => ({
+      name: "",
+      value: 1,
+      color: t.color
+    })) }, i.value.centerX, i.value.centerY, i.value.radius, i.value.radius, 1.99999, 2, 1, 360, 105.25, i.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio))), ee = _(!1);
+    function Xe(t) {
+      ee.value = t, pe.value += 1;
+    }
+    const te = _(!1);
+    function ve() {
+      te.value = !te.value;
+    }
+    async function ot({ scale: t = 2 } = {}) {
+      if (!X.value) return;
+      const { width: s, height: a } = X.value.getBoundingClientRect(), l = s / a, { imageUri: r, base64: v } = await Ht({ domElement: X.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: r,
+        base64: v,
+        title: e.value.style.chart.title.text,
+        width: s,
+        height: a,
+        aspectRatio: l
+      };
+    }
+    const nt = m(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), ut = m(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), it = m(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), U = m(() => Math.max(1, Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d)));
+    return He({
+      getImage: ot,
+      generatePdf: Ie,
+      generateImage: Se,
+      toggleAnnotator: ve,
+      toggleFullscreen: Xe
+    }), (t, s) => (o(), n("div", {
+      class: P(["vue-ui-wheel", { "vue-ui-wheel-3d-wrap": e.value.layout === "3d" }]),
+      ref_key: "wheelChart",
+      ref: X,
+      id: ue.value,
+      style: fe(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: s[0] || (s[0] = () => c(Me)(!0)),
+      onMouseleave: s[1] || (s[1] = () => c(Me)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (o(), se(c(qe), {
+        key: 0,
+        svgRef: c(_e),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: te.value,
+        onClose: ve
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : S("", !0),
+      Qe.value ? (o(), n("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: we,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : S("", !0),
+      e.value.style.chart.title.text ? (o(), n("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ge,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (o(), se(Yt, {
+          key: `title_${be.value}`,
+          config: {
+            title: {
+              cy: "wheel-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "wheel-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : S("", !0),
+      e.value.userOptions.show && Je.value && (c(Ce) || c(re)) ? (o(), se(c(Ge), {
+        ref_key: "details",
+        ref: Ke,
+        key: `user_options_${pe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: c(Ae),
+        isImaging: c($e),
+        uid: ue.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasXls: !1,
+        isFullscreen: ee.value,
+        position: e.value.userOptions.position,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: te.value,
+        chartElement: X.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Xe,
+        onGeneratePdf: c(Ie),
+        onGenerateImage: c(Se),
+        onToggleAnnotator: ve,
+        style: fe({
+          visibility: c(Ce) ? c(re) ? "visible" : "hidden" : "visible"
+        })
+      }, At({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: V(({ isOpen: a, color: l }) => [
+            z(t.$slots, "menuIcon", oe(ne({ isOpen: a, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: V(() => [
+            z(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: V(() => [
+            z(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: V(({ toggleFullscreen: a, isFullscreen: l }) => [
+            z(t.$slots, "optionFullscreen", oe(ne({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: V(({ toggleAnnotator: a, isAnnotator: l }) => [
+            z(t.$slots, "optionAnnotator", oe(ne({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : S("", !0),
+      (o(), n("svg", {
+        ref_key: "svgRef",
+        ref: _e,
+        xmlns: c(Dt),
+        class: P({ "vue-data-ui-fullscreen--on": ee.value, "vue-data-ui-fulscreen--off": !ee.value, "vue-ui-wheel-3d-svg": e.value.layout === "3d" }),
+        viewBox: e.value.layout === "3d" && !e.value.responsive ? `${D.value?.x - 10} ${D.value?.y ?? 0} ${D.value?.w + 20} ${D.value?.h ?? Math.max(10, u.value.height)}` : `0 0 ${Math.max(10, u.value.width)} ${Math.max(10, u.value.height)}`,
+        style: fe(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        $t(c(Ve)),
+        t.$slots["chart-background"] ? (o(), n("foreignObject", {
+          key: 0,
+          x: e.value.layout === "3d" && !e.value.responsive ? D.value?.x - 10 : 0,
+          y: e.value.layout === "3d" && !e.value.responsive ? D.value?.y ?? 0 : 0,
+          width: e.value.layout === "3d" && !e.value.responsive ? D.value?.w + 20 : Math.max(10, u.value.width),
+          height: e.value.layout === "3d" && !e.value.responsive ? D.value?.h ?? Math.max(10, u.value.height) : Math.max(10, u.value.height),
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          z(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Kt)) : S("", !0),
+        e.value.layout === "3d" && De.value ? (o(), n("path", {
+          key: 1,
+          class: "vue-ui-wheel-inner-circle",
+          d: De.value.d,
+          stroke: e.value.style.chart.layout.innerCircle.stroke,
+          "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
+          fill: "none"
+        }, null, 8, Qt)) : e.value.style.chart.layout.innerCircle.show ? (o(), n("circle", {
+          key: 2,
+          class: "vue-ui-wheel-inner-circle",
+          cx: i.value.centerX,
+          cy: i.value.centerY,
+          r: Math.max(0, i.value.radius * e.value.style.chart.layout.innerCircle.radiusRatio * 0.8),
+          stroke: e.value.style.chart.layout.innerCircle.stroke,
+          "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
+          fill: "none"
+        }, null, 8, ea)) : S("", !0),
+        e.value.layout === "3d" ? (o(), n($, { key: 3 }, [
+          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (o(), n("g", ta, [
+            (o(!0), n($, null, O(U.value, (a) => (o(), n("g", null, [
+              (o(!0), n($, null, O(Oe.value || [], (l) => (o(), n("line", {
+                key: l.i,
+                x1: l.x1,
+                y1: l.y1 - a,
+                x2: l.x2,
+                y2: l.y2 - a,
+                stroke: c(je)(l.color, 0.25 * a / 5),
+                "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.value.height),
+                "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
+                class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l.i * I.value <= d.value })
+              }, null, 10, aa))), 128))
+            ]))), 256)),
+            (o(!0), n($, null, O(Oe.value || [], (a) => (o(), n("line", {
+              key: a.i,
+              x1: a.x1,
+              y1: a.y1 - U.value,
+              x2: a.x2,
+              y2: a.y2 - U.value,
+              stroke: a.color,
+              "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.value.height),
+              "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
+              class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && a.i * I.value <= d.value })
+            }, null, 10, la))), 128))
+          ])) : (o(), n("g", sa, [
+            (o(!0), n($, null, O(U.value, (a) => (o(), n("g", null, [
+              (o(!0), n($, null, O(he.value(-a) || [], (l) => (o(), n("path", {
+                key: l.i,
+                d: l.d,
+                fill: e.value.style.chart.layout.wheel.ticks.inactiveColor,
+                stroke: e.value.style.chart.layout.wheel.ticks.stroke,
+                "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: "vue-ui-wheel-tick"
+              }, null, 8, oa))), 128)),
+              (o(!0), n($, null, O(he.value(-a) || [], (l) => (o(), n("path", {
+                key: l.i,
+                d: l.d,
+                fill: c(je)(l.fill, 0.5 * a / U.value),
+                stroke: e.value.style.chart.layout.wheel.ticks.stroke,
+                "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && l.i * I.value <= d.value })
+              }, null, 10, na))), 128))
+            ]))), 256)),
+            It("g", null, [
+              (o(!0), n($, null, O(he.value(-U.value) || [], (a) => (o(), n("path", {
+                key: a.i,
+                d: a.d,
+                fill: a.fill,
+                stroke: e.value.style.chart.layout.wheel.ticks.stroke,
+                "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && a.i * I.value <= d.value })
+              }, null, 10, ua))), 128))
+            ])
+          ]))
+        ], 64)) : (o(), n($, { key: 4 }, [
+          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (o(!0), n($, { key: 0 }, O(Fe.value, (a, l) => (o(), n("line", {
+            x1: a.x1,
+            x2: a.x2,
+            y1: a.y1,
+            y2: a.y2,
+            stroke: a.color,
+            "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.value.height),
+            "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
+            class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * I.value <= d.value })
+          }, null, 10, ia))), 256)) : (o(!0), n($, { key: 1 }, O(st.value, (a, l) => (o(), n("path", {
+            d: a.arcSlice,
+            fill: a.color,
+            class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * I.value <= d.value }),
+            stroke: e.value.style.chart.layout.wheel.ticks.stroke,
+            "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth
+          }, null, 10, ra))), 256))
+        ], 64)),
+        e.value.style.chart.layout.percentage.show ? (o(), n("g", ca, [
+          c(xe) ? (o(), n("rect", {
+            key: 0,
+            x: i.value.centerX - 40,
+            y: i.value.centerY - B.value / 2,
+            width: 80,
+            height: B.value,
+            fill: "#6A6A6A80",
+            rx: "3"
+          }, null, 8, ha)) : (o(), n("text", {
+            key: 1,
+            x: i.value.centerX + e.value.style.chart.layout.percentage.offsetX,
+            y: i.value.centerY + B.value / 3 + e.value.style.chart.layout.percentage.offsetY,
+            "font-size": B.value,
+            fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? c(Z)(e.value.style.chart.layout.wheel.ticks.activeColor, d.value / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.wheel.ticks.activeColor,
+            "text-anchor": "middle",
+            "font-weight": e.value.style.chart.layout.percentage.bold ? "bold" : "normal",
+            style: { "font-variant-numeric": "tabluar-nums" },
+            stroke: e.value.style.chart.layout.percentage.stroke,
+            "stroke-width": e.value.style.chart.layout.percentage.strokeWidth,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "paint-order": "stroke fill",
+            class: P({ "vue-ui-wheel-label": e.value.layout === "3d" })
+          }, St(c(Tt)(
+            e.value.style.chart.layout.percentage.formatter,
+            c(Be)(d.value),
+            c(Ft)({
+              v: c(Be)(d.value),
+              s: "%",
+              r: e.value.style.chart.layout.percentage.rounding
+            })
+          )), 11, va))
+        ])) : S("", !0),
+        z(t.$slots, "svg", { svg: u.value }, void 0, !0)
+      ], 14, Jt)),
+      t.$slots.watermark ? (o(), n("div", da, [
+        z(t.$slots, "watermark", oe(ne({ isPrinting: c(Ae) || c($e) })), void 0, !0)
+      ])) : S("", !0),
+      t.$slots.source ? (o(), n("div", {
+        key: 5,
+        ref_key: "source",
+        ref: me,
+        dir: "auto"
+      }, [
+        z(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : S("", !0),
+      c(xe) ? (o(), se(Gt, { key: 6 })) : S("", !0)
+    ], 46, Zt));
+  }
+}, Sa = /* @__PURE__ */ Vt(ya, [["__scopeId", "data-v-da4775bb"]]);
+export {
+  Sa as default
+};