import { computed as p, ref as o, watch as L, onMounted as V, onBeforeUnmount as ee, openBlock as r, createElementBlock as v, normalizeStyle as U, createBlock as C, createCommentVNode as d, unref as n, createSlots as te, withCtx as _, renderSlot as f, normalizeProps as X, guardReactiveProps as B, normalizeClass as G, createVNode as ae, Fragment as le, renderList as se, toDisplayString as ne } from "vue";
import { u as oe, c as re, t as ue, o as ie, e as ce, w as T, X as he, i as ve, v as E, f as de } from "./index-DK7qqHGP.js";
import { _ as fe } from "./Title-Cxlu3Etv.js";
import { u as ye, U as me } from "./usePrinter-Cza87yNE.js";
import { t as ge, u as pe } from "./useResponsive-NZB-WLRF.js";
import ke from "./vue-ui-skeleton-CQnYuosp.js";
import { u as R } from "./useNestedProp-0nRX_rTi.js";
import { _ as we } from "./PackageVersion-I1_4jcn_.js";
import { _ as be } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ce = ["id"], _e = ["xmlns", "viewBox"], xe = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], Ie = ["cx", "cy", "r", "stroke", "stroke-width"], $e = ["x", "y", "font-size", "fill", "font-weight"], Fe = {
  key: 3,
  class: "vue-data-ui-watermark"
}, Pe = {
  __name: "vue-ui-wheel",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(j, { expose: D }) {
    const i = j, { vue_ui_wheel: Y } = oe(), k = p(() => !!i.dataset && Object.keys(i.dataset).length), w = o(re()), H = o(null), x = o(0), y = o(null), I = o(null), $ = o(0), e = p({
      get: () => F(),
      set: (t) => t
    });
    function F() {
      const t = R({
        userConfig: i.config,
        defaultConfig: Y
      });
      return t.theme ? {
        ...R({
          userConfig: ue.vue_ui_wheel[t.theme] || i.config,
          defaultConfig: t
        })
      } : t;
    }
    L(() => i.config, (t) => {
      e.value = F(), N(), $.value += 1;
    }, { deep: !0 });
    const { isPrinting: P, isImaging: z, generatePdf: O, generateImage: S } = ye({
      elementId: w.value,
      fileName: e.value.style.chart.title.text || "vue-ui-wheel"
    }), l = o({
      size: 360,
      height: 360,
      width: 360
    }), b = o(e.value.style.chart.layout.percentage.fontSize), u = p(() => ({
      radius: Math.min(l.value.width, l.value.height) * 0.9 / 2,
      centerX: l.value.width / 2,
      centerY: l.value.height / 2
    }));
    function M(t, c = 1) {
      return {
        x: u.value.centerX + u.value.radius * Math.cos(29.85 + t * Math.PI / 180) * c,
        y: u.value.centerY + u.value.radius * Math.sin(29.85 + t * Math.PI / 180) * c
      };
    }
    const s = o(e.value.style.chart.animation.use ? 0 : i.dataset.percentage || 0);
    L(() => i.dataset, (t) => {
      e.value.style.chart.animation.use ? A(t.percentage) : s.value = t.percentage || 0;
    }, { deep: !0 });
    const m = o(null);
    V(() => {
      N();
    });
    function N() {
      if (ie(i.dataset) && ce({
        componentName: "VueUiWheel",
        type: "dataset"
      }), A(i.dataset.percentage || 0), e.value.responsive) {
        const t = ge(() => {
          const { width: c, height: a } = pe({
            chart: y.value,
            title: e.value.style.chart.title.text ? I.value : null
          });
          l.value.width = c, l.value.height = a, b.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(c, a);
        });
        m.value = new ResizeObserver(t), m.value.observe(y.value.parentNode);
      }
    }
    ee(() => {
      m.value && m.value.disconnect();
    });
    function A(t) {
      let c = e.value.style.chart.animation.speed;
      const a = Math.abs(t - s.value) / (c * 120);
      function h() {
        s.value < t ? s.value = Math.min(s.value + a, t) : s.value > t && (s.value = Math.max(s.value - a, t)), s.value !== t && requestAnimationFrame(h);
      }
      h();
    }
    const W = p(() => {
      const t = [];
      for (let a = 0; a < 100; a += 1) {
        const h = s.value > a ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: J, y: K } = M(l.value.size / 100 * a), { x: Q, y: Z } = M(l.value.size / 100 * a, e.value.style.chart.layout.wheel.ticks.sizeRatio);
        t.push({
          x1: J,
          y1: K,
          x2: Q,
          y2: Z,
          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? T(h, a / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : h
        });
      }
      return t;
    }), g = o(!1);
    function q(t) {
      g.value = t, x.value += 1;
    }
    return D({
      generatePdf: O,
      generateImage: S
    }), (t, c) => (r(), v("div", {
      class: "vue-ui-wheel",
      ref_key: "wheelChart",
      ref: y,
      id: w.value,
      style: U(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`)
    }, [
      e.value.style.chart.title.text ? (r(), v("div", {
        key: 0,
        ref_key: "chartTitle",
        ref: I,
        style: "width:100%;background:transparent;padding-bottom:12px"
      }, [
        (r(), C(fe, {
          key: `title_${$.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)) : d("", !0),
      e.value.userOptions.show && k.value ? (r(), C(me, {
        ref_key: "details",
        ref: H,
        key: `user_options_${x.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: n(P),
        isImaging: n(z),
        uid: w.value,
        hasPdf: e.value.userOptions.buttons.pdf,
        hasImg: e.value.userOptions.buttons.img,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        hasXls: !1,
        isFullscreen: g.value,
        position: e.value.userOptions.position,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: y.value,
        onToggleFullscreen: q,
        onGeneratePdf: n(O),
        onGenerateImage: n(S)
      }, te({ _: 2 }, [
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: _(() => [
            f(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: _(() => [
            f(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: _(({ toggleFullscreen: a, isFullscreen: h }) => [
            f(t.$slots, "optionFullscreen", X(B({ toggleFullscreen: a, isFullscreen: h })), void 0, !0)
          ]),
          key: "2"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "position", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : d("", !0),
      k.value ? (r(), v("svg", {
        key: 2,
        xmlns: n(he),
        class: G({ "vue-data-ui-fullscreen--on": g.value, "vue-data-ui-fulscreen--off": !g.value }),
        viewBox: `0 0 ${l.value.width <= 0 ? 10 : l.value.width} ${l.value.height <= 0 ? 10 : l.value.height}`,
        style: U(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
      }, [
        ae(we),
        (r(!0), v(le, null, se(W.value, (a, h) => (r(), v("line", {
          x1: a.x1,
          x2: a.x2,
          y1: a.y1,
          y2: a.y2,
          stroke: a.color,
          "stroke-width": 5 / 360 * Math.min(l.value.width, l.value.height),
          "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
          class: G({ "vue-ui-tick-animated": e.value.style.chart.animation.use && h <= s.value })
        }, null, 10, xe))), 256)),
        e.value.style.chart.layout.innerCircle.show ? (r(), v("circle", {
          key: 0,
          cx: u.value.centerX,
          cy: u.value.centerY,
          r: u.value.radius * 0.8 <= 0 ? 1e-4 : u.value.radius * 0.8,
          stroke: e.value.style.chart.layout.innerCircle.stroke,
          "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
          fill: "none"
        }, null, 8, Ie)) : d("", !0),
        e.value.style.chart.layout.percentage.show ? (r(), v("text", {
          key: 1,
          x: u.value.centerX,
          y: u.value.centerY + b.value / 3,
          "font-size": b.value,
          fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? n(T)(e.value.style.chart.layout.wheel.ticks.activeColor, s.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" }
        }, ne(n(ve)(
          e.value.style.chart.layout.percentage.formatter,
          n(E)(s.value),
          n(de)({
            v: n(E)(s.value),
            s: "%",
            r: e.value.style.chart.layout.percentage.rounding
          })
        )), 9, $e)) : d("", !0),
        f(t.$slots, "svg", { svg: l.value }, void 0, !0)
      ], 14, _e)) : d("", !0),
      t.$slots.watermark ? (r(), v("div", Fe, [
        f(t.$slots, "watermark", X(B({ isPrinting: n(P) || n(z) })), void 0, !0)
      ])) : d("", !0),
      k.value ? d("", !0) : (r(), C(ke, {
        key: 4,
        config: {
          type: "wheel",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor,
            wheel: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"]))
    ], 12, Ce));
  }
}, Be = /* @__PURE__ */ be(Pe, [["__scopeId", "data-v-b8e98e43"]]);
export {
  Be as default
};
