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