import { computed as p, ref as d, watch as ye, onMounted as ge, onBeforeUnmount as pe, openBlock as o, createElementBlock as n, normalizeClass as J, normalizeStyle as E, createVNode as me, withCtx as I, toDisplayString as z, createCommentVNode as g, createBlock as Z, unref as c, createSlots as ke, renderSlot as w, normalizeProps as K, guardReactiveProps as Q, createElementVNode as h, Fragment as O, renderList as A } from "vue";
import { u as be, c as _e, t as xe, a as we, p as ee, b as Fe, o as te, d as Se, e as X, g as ae, m as le, X as ze, w as D, J as N, i as $e, f as Ce, D as se } from "./index-CguVaFlt.js";
import { t as Me, u as Pe } from "./useResponsive-NZB-WLRF.js";
import { u as Ie, U as Oe } from "./usePrinter-ClsMRVJG.js";
import Xe from "./vue-ui-skeleton-ChHLL5Hw.js";
import { _ as Ne } from "./Title-DbTGPg4G.js";
import { u as re } from "./useNestedProp-BbEbJmgv.js";
import { _ as Ye } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ge = ["id"], Re = { key: 0 }, Ee = ["xmlns", "viewBox"], Ae = ["id"], De = ["stop-color"], je = ["stop-color"], Le = ["stop-color"], Ue = ["id"], Ve = ["stdDeviation"], Be = ["d", "fill", "stroke"], We = ["d", "filter"], Te = ["y", "width", "height", "fill"], qe = ["x", "y", "text-anchor", "font-size", "font-weight", "fill"], He = ["x", "y", "font-size", "font-weight", "fill"], Je = { key: 1 }, Ze = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Ke = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Qe = ["x1", "y1", "x2", "y2", "stroke-width", "filter"], et = { key: 2 }, tt = ["d", "fill", "stroke", "stroke-width"], at = ["cx", "cy", "fill", "r", "stroke-width", "stroke"], lt = ["x", "y", "font-size", "fill"], st = {
  key: 3,
  class: "vue-data-ui-watermark"
}, rt = {
  __name: "vue-ui-gauge",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(Y, { expose: oe }) {
    const r = Y, { vue_ui_gauge: ue } = be(), $ = p(() => !!r.dataset && Object.keys(r.dataset).length > 0 && r.dataset.series && r.dataset.series.length), m = d(_e()), ne = d(null), j = d(0), C = d(null), L = d(null), U = d(null), e = p(() => {
      const l = re({
        userConfig: r.config,
        defaultConfig: ue
      });
      return l.theme ? {
        ...re({
          userConfig: xe.vue_ui_gauge[l.theme] || r.config,
          defaultConfig: l
        }),
        customPalette: we[l.theme] || ee
      } : l;
    }), { isPrinting: V, isImaging: B, generatePdf: W, generateImage: T } = Ie({
      elementId: `vue-ui-gauge_${m.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-gauge"
    }), ie = p(() => Fe(e.value.customPalette)), b = p(() => {
      if (!$.value || te(r.dataset.series || {}))
        return {
          value: 0,
          series: [
            {
              from: 0,
              to: 0
            }
          ]
        };
      const l = [];
      (r.dataset.series || []).forEach((a) => {
        l.push(a.from || 0), l.push(a.to || 0);
      });
      const s = Math.max(...l);
      return {
        ...r.dataset,
        series: (r.dataset.series || []).map((a, i) => ({
          ...a,
          color: Se(a.color) || ie.value[i] || ee[i],
          value: ((a.to || 0) - (a.from || 0)) / s * 100
        }))
      };
    }), y = d(512), t = d({
      height: 358.4,
      width: y.value,
      top: 0,
      bottom: 358.4,
      centerX: 179.2,
      centerY: y.value / 2,
      labelFontSize: 18,
      legendFontSize: e.value.style.chart.legend.fontSize,
      pointerRadius: e.value.style.chart.layout.pointer.circle.radius,
      trackSize: e.value.style.chart.layout.track.size,
      pointerSize: e.value.style.chart.layout.pointer.size,
      pointerStrokeWidth: e.value.style.chart.layout.pointer.strokeWidth,
      markerOffset: e.value.style.chart.layout.markers.offsetY + 3
    }), F = d(0), _ = d(0), f = d(e.value.style.chart.animation.use ? 0 : r.dataset.value);
    ye(() => r.dataset.value, () => {
      f.value = e.value.style.chart.animation.use ? 0 : r.dataset.value, H();
    });
    const v = p(() => {
      const l = t.value.width / 2, s = u.value.base, a = Math.PI * ((f.value + 0 - _.value) / (F.value - _.value)) + Math.PI;
      return {
        x1: l,
        y1: s,
        x2: l + u.value.pointerSize * t.value.pointerSize * 0.9 * Math.cos(a),
        y2: s + u.value.pointerSize * t.value.pointerSize * 0.9 * Math.sin(a)
      };
    }), q = p(() => {
      const l = t.value.width / 2, s = u.value.base, a = Math.PI * ((f.value + 0 - _.value) / (F.value - _.value)) + Math.PI, i = l + u.value.pointerSize * t.value.pointerSize * 0.9 * Math.cos(a), R = s + u.value.pointerSize * t.value.pointerSize * 0.9 * Math.sin(a), k = t.value.pointerRadius, P = l + k * Math.cos(a + Math.PI / 2), de = s + k * Math.sin(a + Math.PI / 2), he = l + k * Math.cos(a - Math.PI / 2), fe = s + k * Math.sin(a - Math.PI / 2);
      return isNaN(i) ? null : `M ${i},${R} ${P},${de} ${he},${fe} Z`;
    }), G = p(() => {
      for (let l = 0; l < b.value.series.length; l += 1) {
        const { color: s, from: a, to: i } = b.value.series[l];
        if (f.value >= a && f.value <= i)
          return s;
      }
      return "#2D353C";
    }), M = d(null);
    ge(() => {
      if (te(r.dataset) ? X({
        componentName: "VueUiGauge",
        type: "dataset"
      }) : (ae({
        datasetObject: r.dataset,
        requiredAttributes: ["value", "series"]
      }).forEach((l) => {
        X({
          componentName: "VueUiGauge",
          type: "datasetAttribute",
          property: l
        });
      }), Object.hasOwn(r.dataset, "series") && (r.dataset.series.length ? r.dataset.series.forEach((l, s) => {
        ae({
          datasetObject: l,
          requiredAttributes: ["from", "to"]
        }).forEach((a) => {
          X({
            componentName: "VueUiGauge",
            type: "datasetSerieAttribute",
            property: a,
            index: s
          });
        });
      }) : X({
        componentName: "VueUiGauge",
        type: "datasetAttributeEmpty",
        property: "series"
      }))), H(), e.value.responsive) {
        const l = Me(() => {
          const { width: s, height: a } = Pe({
            chart: C.value,
            title: e.value.style.chart.title.text ? L.value : null,
            legend: U.value
          });
          t.value.width = s, t.value.height = a, t.value.centerX = s / 2, t.value.centerY = y.value / 2 / 358.4 * a, t.value.bottom = a, t.value.labelFontSize = 18 / y.value * Math.min(a, s) < 10 ? 10 : 18 / y.value * Math.min(a, s), t.value.legendFontSize = e.value.style.chart.legend.fontSize / y.value * Math.min(a, s) < 14 ? 14 : e.value.style.chart.legend.fontSize / y.value * Math.min(a, s), t.value.pointerRadius = e.value.style.chart.layout.pointer.circle.radius / y.value * Math.min(a, s), t.value.trackSize = e.value.style.chart.layout.track.size / y.value * Math.min(a, s), t.value.pointerStrokeWidth = se({
            relator: Math.min(s, a),
            adjuster: y.value,
            source: e.value.style.chart.layout.pointer.strokeWidth,
            threshold: 2,
            fallback: 2
          }), t.value.markerOffset = se({
            relator: Math.max(s, a),
            adjuster: y.value,
            source: e.value.style.chart.layout.markers.offsetY + 3,
            threshold: 2,
            fallback: 2
          });
        });
        M.value = new ResizeObserver(l), M.value.observe(C.value.parentNode);
      }
    }), pe(() => {
      M.value && M.value.disconnect();
    });
    function H() {
      const l = [];
      (b.value.series || []).forEach((P) => {
        l.push(P.from || 0), l.push(P.to || 0);
      }), F.value = Math.max(...l), _.value = Math.min(...l);
      const s = String(F.value).length;
      let a = 0, i = (s > 2 ? 0.01 : 1e-3) * e.value.style.chart.animation.speed, R = (s > 2 ? 0.05 : 5e-3) * e.value.style.chart.animation.acceleration;
      function k() {
        f.value += i + a, a += R, f.value < r.dataset.value ? requestAnimationFrame(k) : f.value = r.dataset.value;
      }
      e.value.style.chart.animation.use && (f.value = _.value, k());
    }
    const u = p(() => {
      const l = e.value.responsive ? Math.min(t.value.width, t.value.height) : t.value.width;
      return {
        arcs: l / 2.5,
        gradients: l / 2.75,
        base: e.value.responsive ? t.value.height / 2 : t.value.height * 0.7,
        ratingBase: e.value.responsive ? t.value.height / 2 + t.value.height / 4 : t.value.height * 0.9,
        pointerSize: e.value.responsive ? Math.min(t.value.width, t.value.height) / 3 : t.value.width / 3.2
      };
    }), x = p(() => le(
      { series: b.value.series },
      t.value.width / 2,
      u.value.base,
      u.value.arcs,
      u.value.arcs,
      1,
      1,
      1,
      180,
      109.9495,
      40 * t.value.trackSize
    )), ce = p(() => le(
      { series: b.value.series },
      t.value.width / 2,
      u.value.base,
      u.value.gradients,
      u.value.gradients,
      1,
      1,
      1,
      180,
      109.9495,
      2 * t.value.trackSize
    )), S = d(!1);
    function ve(l) {
      S.value = l, j.value += 1;
    }
    return oe({
      generatePdf: W,
      generateImage: T
    }), (l, s) => (o(), n("div", {
      class: J(`vue-ui-gauge ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
      ref_key: "gaugeChart",
      ref: C,
      id: `vue-ui-gauge_${m.value}`,
      style: E(`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 ? (o(), n("div", {
        key: 0,
        ref_key: "chartTitle",
        ref: L,
        style: E(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:12px`)
      }, [
        me(Ne, {
          config: {
            title: {
              cy: "gauge-div-title",
              ...e.value.style.chart.title
            },
            subtitle: {
              cy: "gauge-div-subtitle",
              ...e.value.style.chart.title.subtitle
            }
          }
        }, {
          default: I(() => [
            e.value.translations.base && Y.dataset.base ? (o(), n("span", Re, z(e.value.translations.base) + ": " + z(Y.dataset.base), 1)) : g("", !0)
          ]),
          _: 1
        }, 8, ["config"])
      ], 4)) : g("", !0),
      e.value.userOptions.show && $.value ? (o(), Z(Oe, {
        ref_key: "details",
        ref: ne,
        key: `user_options_${j.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isImaging: c(B),
        isPrinting: c(V),
        uid: m.value,
        hasXls: !1,
        hasPdf: e.value.userOptions.buttons.pdf,
        hasImg: e.value.userOptions.buttons.img,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        isFullscreen: S.value,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: C.value,
        onToggleFullscreen: ve,
        onGeneratePdf: c(W),
        onGenerateImage: c(T)
      }, ke({ _: 2 }, [
        l.$slots.optionPdf ? {
          name: "optionPdf",
          fn: I(() => [
            w(l.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        l.$slots.optionImg ? {
          name: "optionImg",
          fn: I(() => [
            w(l.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        l.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: I(({ toggleFullscreen: a, isFullscreen: i }) => [
            w(l.$slots, "optionFullscreen", K(Q({ toggleFullscreen: a, isFullscreen: i })), void 0, !0)
          ]),
          key: "2"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : g("", !0),
      $.value ? (o(), n("svg", {
        key: 2,
        xmlns: c(ze),
        class: J({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value }),
        viewBox: `0 0 ${t.value.width <= 0 ? 10 : t.value.width} ${t.value.height <= 0 ? 10 : t.value.height}`,
        style: E(`max-width:100%;overflow:hidden !important;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
      }, [
        h("defs", null, [
          h("radialGradient", {
            id: `gradient_${m.value}`,
            cx: "50%",
            cy: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            h("stop", {
              offset: "0%",
              "stop-color": `#FFFFFF${c(D)[1]}`
            }, null, 8, De),
            h("stop", {
              offset: "80%",
              "stop-color": `#FFFFFF${c(D)[e.value.style.chart.layout.track.gradientIntensity]}`
            }, null, 8, je),
            h("stop", {
              offset: "100%",
              "stop-color": `#FFFFFF${c(D)[1]}`
            }, null, 8, Le)
          ], 8, Ae)
        ]),
        h("defs", null, [
          h("filter", {
            id: `blur_${m.value}`,
            x: "-50%",
            y: "-50%",
            width: "200%",
            height: "200%"
          }, [
            h("feGaussianBlur", {
              in: "SourceGraphic",
              stdDeviation: 100 / e.value.style.chart.layout.track.gradientIntensity
            }, null, 8, Ve)
          ], 8, Ue)
        ]),
        (o(!0), n(O, null, A(x.value, (a, i) => (o(), n("path", {
          key: `arc_${i}`,
          d: a.arcSlice,
          fill: a.color,
          stroke: e.value.style.chart.backgroundColor,
          "stroke-linecap": "round"
        }, null, 8, Be))), 128)),
        e.value.style.chart.layout.track.useGradient ? (o(), n(O, { key: 0 }, [
          (o(!0), n(O, null, A(ce.value, (a, i) => (o(), n("path", {
            key: `arc_${i}`,
            d: a.arcSlice,
            fill: "#FFFFFF",
            stroke: "none",
            "stroke-linecap": "round",
            filter: `url(#blur_${m.value})`
          }, null, 8, We))), 128)),
          h("rect", {
            x: 0,
            y: u.value.base,
            width: t.value.width <= 0 ? 1e-4 : t.value.width,
            height: t.value.height * 0.3 <= 0 ? 1e-4 : t.value.height * 0.3,
            fill: e.value.style.chart.backgroundColor
          }, null, 8, Te)
        ], 64)) : g("", !0),
        (o(!0), n(O, null, A(x.value, (a, i) => (o(), n("text", {
          x: c(N)({
            centerX: t.value.width / 2,
            centerY: u.value.base,
            initX: a.center.startX,
            initY: a.center.startY,
            offset: t.value.markerOffset
          }).x,
          y: c(N)({
            centerX: t.value.width / 2,
            centerY: u.value.base,
            initX: a.center.startX,
            initY: a.center.startY,
            offset: t.value.markerOffset
          }).y,
          "text-anchor": a.center.startX < t.value.width / 2 - 5 ? "end" : a.center.startX > t.value.width / 2 + 5 ? "start" : "middle",
          "font-size": t.value.labelFontSize * e.value.style.chart.layout.markers.fontSizeRatio,
          "font-weight": `${e.value.style.chart.layout.markers.bold ? "bold" : "normal"}`,
          fill: e.value.style.chart.layout.markers.color
        }, z(a.from.toFixed(e.value.style.chart.layout.markers.roundingValue)), 9, qe))), 256)),
        h("text", {
          x: c(N)({
            centerX: t.value.width / 2,
            centerY: u.value.base,
            initX: x.value.at(-1).endX,
            initY: x.value.at(-1).endY,
            offset: t.value.markerOffset
          }).x,
          y: c(N)({
            centerX: t.value.width / 2,
            centerY: u.value.base,
            initX: x.value.at(-1).endX,
            initY: x.value.at(-1).endY,
            offset: t.value.markerOffset
          }).y,
          "text-anchor": "start",
          "font-size": t.value.labelFontSize * e.value.style.chart.layout.markers.fontSizeRatio,
          "font-weight": `${e.value.style.chart.layout.markers.bold ? "bold" : "normal"}`,
          fill: e.value.style.chart.layout.markers.color
        }, z(F.value.toFixed(e.value.style.chart.layout.markers.roundingValue)), 9, He),
        e.value.style.chart.layout.pointer.type === "rounded" ? (o(), n("g", Je, [
          isNaN(v.value.x2) ? g("", !0) : (o(), n("line", {
            key: 0,
            x1: v.value.x1,
            y1: v.value.y1,
            x2: v.value.x2,
            y2: v.value.y2,
            stroke: e.value.style.chart.layout.pointer.stroke,
            "stroke-width": t.value.pointerStrokeWidth,
            "stroke-linecap": "round"
          }, null, 8, Ze)),
          isNaN(v.value.x2) ? g("", !0) : (o(), n("line", {
            key: 1,
            x1: v.value.x1,
            y1: v.value.y1,
            x2: v.value.x2,
            y2: v.value.y2,
            stroke: e.value.style.chart.layout.pointer.useRatingColor ? G.value : e.value.style.chart.layout.pointer.color,
            "stroke-linecap": "round",
            "stroke-width": t.value.pointerStrokeWidth * 0.7
          }, null, 8, Ke)),
          !isNaN(v.value.x2) && e.value.style.chart.layout.track.useGradient ? (o(), n("line", {
            key: 2,
            x1: v.value.x1,
            y1: v.value.y1,
            x2: v.value.x2,
            y2: v.value.y2,
            stroke: "white",
            "stroke-linecap": "round",
            "stroke-width": t.value.pointerStrokeWidth * 0.3,
            filter: `url(#blur_${m.value})`
          }, null, 8, Qe)) : g("", !0)
        ])) : (o(), n("g", et, [
          q.value ? (o(), n("path", {
            key: 0,
            d: q.value,
            fill: e.value.style.chart.layout.pointer.useRatingColor ? G.value : e.value.style.chart.layout.pointer.color,
            stroke: e.value.style.chart.layout.pointer.stroke,
            "stroke-width": e.value.style.chart.layout.pointer.circle.strokeWidth,
            "stroke-linejoin": "round"
          }, null, 8, tt)) : g("", !0)
        ])),
        h("circle", {
          cx: t.value.width / 2,
          cy: u.value.base,
          fill: e.value.style.chart.layout.pointer.circle.color,
          r: t.value.pointerRadius <= 0 ? 1e-4 : t.value.pointerRadius,
          "stroke-width": e.value.style.chart.layout.pointer.circle.strokeWidth,
          stroke: e.value.style.chart.layout.pointer.circle.stroke
        }, null, 8, at),
        h("text", {
          x: t.value.width / 2,
          y: u.value.ratingBase,
          "text-anchor": "middle",
          "font-size": t.value.legendFontSize,
          "font-weight": "bold",
          fill: e.value.style.chart.legend.useRatingColor ? G.value : e.value.style.chart.legend.color
        }, z(c($e)(
          e.value.style.chart.legend.formatter,
          f.value,
          c(Ce)({
            p: e.value.style.chart.legend.prefix + (e.value.style.chart.legend.showPlusSymbol && f.value > 0 ? "+" : ""),
            v: f.value,
            s: e.value.style.chart.legend.suffix,
            r: e.value.style.chart.legend.roundingValue
          })
        )), 9, lt),
        w(l.$slots, "svg", { svg: t.value }, void 0, !0)
      ], 14, Ee)) : g("", !0),
      l.$slots.watermark ? (o(), n("div", st, [
        w(l.$slots, "watermark", K(Q({ isPrinting: c(V) || c(B) })), void 0, !0)
      ])) : g("", !0),
      $.value ? g("", !0) : (o(), Z(Xe, {
        key: 4,
        config: {
          type: "gauge",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor,
            gauge: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      h("div", {
        ref_key: "chartLegend",
        ref: U
      }, [
        w(l.$slots, "legend", { legend: b.value }, void 0, !0)
      ], 512)
    ], 14, Ge));
  }
}, ft = /* @__PURE__ */ Ye(rt, [["__scopeId", "data-v-1e268f4d"]]);
export {
  ft as default
};
