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