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