vue-data-ui 3.5.0 → 3.5.2

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

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