import { computed as p, ref as s, watch as Y, onMounted as re, onBeforeUnmount as ue, openBlock as r, createElementBlock as v, normalizeStyle as O, unref as l, createBlock as w, createCommentVNode as h, createSlots as ie, withCtx as b, renderSlot as f, normalizeProps as A, guardReactiveProps as I, normalizeClass as H, 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-BbPeL8Gp.js";
import { _ as Ce } from "./Title-aSAft5dl.js";
import { u as _e, U as $e } from "./usePrinter-DaybDVqP.js";
import { t as xe, u as Oe } from "./useResponsive-CoxXLe23.js";
import Ae from "./vue-ui-skeleton-Bniq21d9.js";
import { u as V } from "./useNestedProp-BN8claGG.js";
import { _ as Ie } from "./PackageVersion-CxJghxYD.js";
import { P as Pe } from "./PenAndPaper-ZdZEumki.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 = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], Te = ["cx", "cy", "r", "stroke", "stroke-width"], Ue = ["x", "y", "font-size", "fill", "font-weight"], Le = {
  key: 5,
  class: "vue-data-ui-watermark"
}, Xe = {
  __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), _ = s(ye()), Z = s(null), P = s(0), y = s(null), F = s(null), S = s(null), z = s(null), M = s(0), e = p({
      get: () => L(),
      set: (t) => t
    }), { userOptionsVisible: N, 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;
    }
    Y(() => d.config, (t) => {
      e.value = L(), j(), M.value += 1;
    }, { deep: !0 });
    const { isPrinting: X, isImaging: B, generatePdf: G, generateImage: E } = _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), o = s({
      size: 360,
      height: 360,
      width: 360
    }), $ = s(e.value.style.chart.layout.percentage.fontSize), c = p(() => ({
      radius: Math.min(o.value.width, o.value.height) * 0.9 / 2,
      centerX: o.value.width / 2,
      centerY: o.value.height / 2
    }));
    function R(t, u = 1) {
      return {
        x: c.value.centerX + c.value.radius * Math.cos(29.85 + t * Math.PI / 180) * u,
        y: c.value.centerY + c.value.radius * Math.sin(29.85 + t * Math.PI / 180) * u
      };
    }
    const n = s(e.value.style.chart.animation.use ? 0 : d.dataset.percentage || 0);
    Y(() => d.dataset, (t) => {
      e.value.style.chart.animation.use ? D(t.percentage) : n.value = t.percentage || 0;
    }, { deep: !0 });
    const g = s(null);
    re(() => {
      j();
    });
    function j() {
      if (ge(d.dataset) && me({
        componentName: "VueUiWheel",
        type: "dataset"
      }), D(d.dataset.percentage || 0), e.value.responsive) {
        const t = xe(() => {
          const { width: u, height: a } = Oe({
            chart: y.value,
            title: e.value.style.chart.title.text ? F.value : null,
            source: S.value,
            noTitle: z.value
          });
          o.value.width = u, o.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 - n.value) / (u * 120);
      function i() {
        n.value < t ? n.value = Math.min(n.value + a, t) : n.value > t && (n.value = Math.max(n.value - a, t)), n.value !== t && requestAnimationFrame(i);
      }
      i();
    }
    const te = p(() => {
      const t = [];
      for (let a = 0; a < 100; a += 1) {
        const i = n.value > a ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: le, y: oe } = R(o.value.size / 100 * a), { x: ne, y: se } = R(o.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 = s(!1);
    function ae(t) {
      m.value = t, P.value += 1;
    }
    const k = s(!1);
    function x() {
      k.value = !k.value;
    }
    return K({
      generatePdf: G,
      generateImage: E,
      toggleAnnotator: x
    }), (t, u) => (r(), v("div", {
      class: "vue-ui-wheel",
      ref_key: "wheelChart",
      ref: y,
      id: _.value,
      style: O(`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] = () => l(T)(!0)),
      onMouseleave: u[1] || (u[1] = () => l(T)(!1))
    }, [
      e.value.userOptions.buttons.annotator ? (r(), w(Pe, {
        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"])) : h("", !0),
      ee.value ? (r(), v("div", {
        key: 1,
        ref_key: "noTitle",
        ref: z,
        class: "vue-data-ui-no-title-space",
        style: "height:36px; width: 100%;background:transparent"
      }, null, 512)) : h("", !0),
      e.value.style.chart.title.text ? (r(), v("div", {
        key: 2,
        ref_key: "chartTitle",
        ref: F,
        style: "width:100%;background:transparent;padding-bottom:12px"
      }, [
        (r(), w(Ce, {
          key: `title_${M.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)) : h("", !0),
      e.value.userOptions.show && C.value && (l(U) || l(N)) ? (r(), w($e, {
        ref_key: "details",
        ref: Z,
        key: `user_options_${P.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: l(X),
        isImaging: l(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: l(G),
        onGenerateImage: l(E),
        onToggleAnnotator: x,
        style: O({
          visibility: l(U) ? l(N) ? "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", A(I({ 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", A(I({ 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"])) : h("", !0),
      C.value ? (r(), v("svg", {
        key: 4,
        xmlns: l(ke),
        class: H({ "vue-data-ui-fullscreen--on": m.value, "vue-data-ui-fulscreen--off": !m.value }),
        viewBox: `0 0 ${o.value.width <= 0 ? 10 : o.value.width} ${o.value.height <= 0 ? 10 : o.value.height}`,
        style: O(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
      }, [
        ce(Ie),
        (r(!0), v(ve, null, he(te.value, (a, i) => (r(), v("line", {
          x1: a.x1,
          x2: a.x2,
          y1: a.y1,
          y2: a.y2,
          stroke: a.color,
          "stroke-width": 5 / 360 * Math.min(o.value.width, o.value.height),
          "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
          class: H({ "vue-ui-tick-animated": e.value.style.chart.animation.use && i <= n.value })
        }, null, 10, Ne))), 256)),
        e.value.style.chart.layout.innerCircle.show ? (r(), v("circle", {
          key: 0,
          cx: c.value.centerX,
          cy: c.value.centerY,
          r: c.value.radius * 0.8 <= 0 ? 1e-4 : c.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, Te)) : h("", !0),
        e.value.style.chart.layout.percentage.show ? (r(), v("text", {
          key: 1,
          x: c.value.centerX,
          y: c.value.centerY + $.value / 3,
          "font-size": $.value,
          fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? l(W)(e.value.style.chart.layout.wheel.ticks.activeColor, n.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(l(we)(
          e.value.style.chart.layout.percentage.formatter,
          l(q)(n.value),
          l(be)({
            v: l(q)(n.value),
            s: "%",
            r: e.value.style.chart.layout.percentage.rounding
          })
        )), 9, Ue)) : h("", !0),
        f(t.$slots, "svg", { svg: o.value }, void 0, !0)
      ], 14, Me)) : h("", !0),
      t.$slots.watermark ? (r(), v("div", Le, [
        f(t.$slots, "watermark", A(I({ isPrinting: l(X) || l(B) })), void 0, !0)
      ])) : h("", !0),
      t.$slots.source ? (r(), v("div", {
        key: 6,
        ref_key: "source",
        ref: S,
        dir: "auto"
      }, [
        f(t.$slots, "source", {}, void 0, !0)
      ], 512)) : h("", !0),
      C.value ? h("", !0) : (r(), w(Ae, {
        key: 7,
        config: {
          type: "wheel",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor,
            wheel: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"]))
    ], 44, ze));
  }
}, Je = /* @__PURE__ */ Se(Xe, [["__scopeId", "data-v-1539e4b2"]]);
export {
  Je as default
};
