vue-data-ui 3.0.0-next.45 → 3.0.0-next.47

package/dist/vue-ui-gauge-BuOviUss.js

@@ -0,0 +1,812 @@
+import { defineAsyncComponent as ae, computed as h, ref as f, toRefs as at, watch as le, shallowRef as Me, onMounted as lt, onBeforeUnmount as st, createElementBlock as o, openBlock as r, unref as n, normalizeStyle as se, normalizeClass as Ne, createBlock as W, createCommentVNode as c, createElementVNode as k, withCtx as R, toDisplayString as Y, createSlots as rt, renderSlot as S, normalizeProps as D, guardReactiveProps as q, createVNode as ot, Fragment as b, renderList as x, mergeProps as L, nextTick as ut } from "vue";
+import { u as nt, c as it, v as ct, t as vt, p as Pe, a as ht, b as dt, o as Ie, d as ft, e as V, g as Xe, N as yt, m as re, O as F, P as mt, w as gt, X as pt, s as oe, I as kt, n as bt, i as ue, f as ne, E as ie } from "./index-CZvYLNd2.js";
+import { t as _t, u as wt } from "./useResponsive-DfdjqQps.js";
+import { u as Re } from "./useNestedProp-UUiB4gNW.js";
+import { u as St } from "./usePrinter-xp6x8667.js";
+import { u as xt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as zt } from "./useChartAccessibility-9icAAmYg.js";
+import $t from "./Title-cYv28OdE.js";
+import At from "./img-Ckro3NYj.js";
+import { u as Ft, B as Ct } from "./BaseScanner-DIK2NTdp.js";
+import { _ as Ot } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Mt = ["id"], Nt = { key: 0 }, Pt = ["xmlns", "viewBox"], It = ["width", "height"], Xt = ["id"], Rt = ["stop-color"], Yt = ["stop-color"], Et = ["stop-color"], Tt = ["id"], Lt = ["stdDeviation"], Gt = { key: 1 }, Bt = ["d", "fill", "stroke"], jt = ["d", "fill", "stroke"], Ut = ["d", "fill"], Wt = ["id", "d"], Dt = ["fill", "font-size", "font-weight"], qt = ["href", "startOffset"], Vt = ["text-anchor", "fill", "font-size", "font-weight", "innerHTML"], Ht = ["d", "filter"], Zt = ["stroke", "stroke-width"], Jt = ["stroke", "stroke-width"], Kt = ["stroke", "stroke-width"], Qt = ["stroke", "stroke-width"], ea = { key: 8 }, ta = ["x", "y", "text-anchor", "font-size", "font-weight", "fill"], aa = ["x", "y", "font-size", "font-weight", "fill"], la = { key: 0 }, sa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ra = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], oa = ["x1", "y1", "x2", "y2", "stroke-width", "filter"], ua = { key: 1 }, na = ["d", "fill", "stroke", "stroke-width"], ia = ["cx", "cy", "fill", "r", "stroke-width", "stroke"], ca = ["x", "y", "font-size", "fill"], va = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, ha = {
+  __name: "vue-ui-gauge",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(H, { expose: Ye }) {
+    const Ee = ae(() => import("./PenAndPaper-C6CBX4Sw.js")), Te = ae(() => import("./UserOptions-BI-GdWdR.js")), Le = ae(() => import("./PackageVersion-Dj1nIbYu.js")), { vue_ui_gauge: Ge } = nt(), g = H, Be = h(() => !!g.dataset && Object.keys(g.dataset).length > 0 && g.dataset.series && g.dataset.series.length), w = f(it()), je = f(null), ce = f(0), C = f(null), ve = f(null), he = f(null), de = f(null), fe = f(null), ye = f(0), e = f(K()), { loading: me, FINAL_DATASET: z, manualLoading: P } = Ft({
+      ...at(g),
+      FINAL_CONFIG: e,
+      prepareConfig: K,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await ut();
+        });
+      },
+      skeletonDataset: {
+        value: 0,
+        series: [
+          { from: -1, to: 0, name: "_", color: "#A1A1A1" },
+          { from: 0, to: 1, name: "__", color: "#CACACA" }
+        ]
+      },
+      skeletonConfig: ct({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              animation: { use: !1 },
+              layout: {
+                markers: { show: !1 },
+                segmentSeparators: { stroke: "#6A6A6A" },
+                segmentNames: { show: !1 },
+                indicatorArc: { fill: "#6A6A6A50" },
+                pointer: {
+                  stroke: "#6A6A6A",
+                  useRatingColor: !0,
+                  circle: {
+                    stroke: "#6A6A6A",
+                    color: "#6A6A6A"
+                  }
+                }
+              },
+              legend: {
+                show: !1
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: Z, setUserOptionsVisibility: ge, keepUserOptionState: pe } = xt({ config: e.value }), { svgRef: J } = zt({ config: e.value.style.chart.title });
+    le(() => g.config, (t) => {
+      me.value || (e.value = K()), Z.value = !e.value.userOptions.showOnChartHover, ee(), ye.value += 1;
+    }, { deep: !0 }), le(() => g.dataset, (t) => {
+      ee(), t && Object.keys(t).length > 0 && (P.value = e.value?.loading ?? !1);
+    }, { deep: !0, immediate: !1 });
+    function K() {
+      const t = Re({
+        userConfig: g.config,
+        defaultConfig: Ge
+      });
+      return t.theme ? {
+        ...Re({
+          userConfig: ht.vue_ui_gauge[t.theme] || g.config,
+          defaultConfig: t
+        }),
+        customPalette: vt[t.theme] || Pe
+      } : t;
+    }
+    const { isPrinting: ke, isImaging: be, generatePdf: _e, generateImage: we } = St({
+      elementId: `vue-ui-gauge_${w.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-gauge",
+      options: e.value.userOptions.print
+    }), Ue = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), We = h(() => dt(e.value.customPalette)), O = h(() => {
+      if (Ie(z.value.series || {}))
+        return {
+          value: 0,
+          series: [
+            {
+              from: 0,
+              to: 0
+            }
+          ]
+        };
+      const t = [];
+      (z.value.series || []).forEach((a) => {
+        t.push(a.from || 1e-7), t.push(a.to || 1e-7);
+      });
+      const u = Math.max(...t);
+      return {
+        ...z.value,
+        series: (z.value.series || []).map((a, l) => ({
+          ...a,
+          color: ft(a.color) || We.value[l] || Pe[l],
+          value: ((a.to || 0) - (a.from || 0)) / u * 100
+        }))
+      };
+    }), _ = f(512), s = f({
+      height: 358.4,
+      width: _.value,
+      top: 0,
+      bottom: 358.4,
+      centerX: 179.2,
+      centerY: _.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,
+      segmentFontSize: e.value.style.chart.layout.segmentNames.fontSize
+    }), I = f(0), $ = f(0), y = f(
+      e.value.style.chart.animation.use ? Math.min(...z.value.series.map((t) => t.from)) : z.value.value
+    );
+    le(() => z.value.value, () => {
+      $e(z.value.value);
+    });
+    const i = h(() => {
+      const t = s.value.width / 2, u = v.value.base, a = Math.PI * ((y.value + 0 - $.value) / (I.value - $.value)) + Math.PI;
+      return {
+        x1: t,
+        y1: u,
+        x2: t + v.value.pointerSize * s.value.pointerSize * 0.9 * Math.cos(a),
+        y2: u + v.value.pointerSize * s.value.pointerSize * 0.9 * Math.sin(a)
+      };
+    }), Se = h(() => {
+      const t = s.value.width / 2, u = v.value.base, a = Math.PI * ((y.value + 0 - $.value) / (I.value - $.value)) + Math.PI, l = t + v.value.pointerSize * s.value.pointerSize * 0.9 * Math.cos(a), m = u + v.value.pointerSize * s.value.pointerSize * 0.9 * Math.sin(a), p = s.value.pointerRadius, U = t + p * Math.cos(a + Math.PI / 2), Oe = u + p * Math.sin(a + Math.PI / 2), N = t + p * Math.cos(a - Math.PI / 2), T = u + p * Math.sin(a - Math.PI / 2);
+      return isNaN(l) ? null : `M ${l},${m} ${U},${Oe} ${N},${T} Z`;
+    }), Q = h(() => {
+      for (let t = 0; t < O.value.series.length; t += 1) {
+        const { color: u, from: a, to: l } = O.value.series[t];
+        if (y.value >= a && y.value <= l)
+          return u;
+      }
+      return "#2D353C";
+    }), A = Me(null), X = Me(null), G = h(() => !!e.value.debug);
+    function ee() {
+      let t = !1;
+      if (Ie(g.dataset) ? (V({
+        componentName: "VueUiGauge",
+        type: "dataset",
+        debug: G.value
+      }), P.value = !0, t = !0) : (Xe({
+        datasetObject: g.dataset,
+        requiredAttributes: ["value", "series"]
+      }).forEach((u) => {
+        V({
+          componentName: "VueUiGauge",
+          type: "datasetAttribute",
+          property: u,
+          debug: G.value
+        }), P.value = !0, t = !0;
+      }), Object.hasOwn(g.dataset, "series") && (g.dataset.series.length ? g.dataset.series.forEach((u, a) => {
+        Xe({
+          datasetObject: u,
+          requiredAttributes: ["from", "to"]
+        }).forEach((l) => {
+          V({
+            componentName: "VueUiGauge",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: G.value
+          }), P.value = !0, t = !0;
+        });
+      }) : (V({
+        componentName: "VueUiGauge",
+        type: "datasetAttributeEmpty",
+        property: "series",
+        debug: G.value
+      }), P.value = !0, t = !0))), P.value = t, $e(z.value.value || 0), e.value.responsive) {
+        const u = _t(() => {
+          let { width: a, height: l } = wt({
+            chart: C.value,
+            title: e.value.style.chart.title.text ? ve.value : null,
+            legend: he.value,
+            source: de.value,
+            noTitle: fe.value
+          });
+          l -= 12, requestAnimationFrame(() => {
+            s.value.width = a, s.value.height = l, s.value.centerX = a / 2, s.value.centerY = _.value / 2 / 358.4 * l, s.value.bottom = l, s.value.labelFontSize = 18 / _.value * Math.min(l, a) < 10 ? 10 : 18 / _.value * Math.min(l, a), s.value.legendFontSize = e.value.style.chart.legend.fontSize / _.value * Math.min(l, a) < 14 ? 14 : e.value.style.chart.legend.fontSize / _.value * Math.min(l, a), s.value.pointerRadius = e.value.style.chart.layout.pointer.circle.radius / _.value * Math.min(l, a), s.value.trackSize = e.value.style.chart.layout.track.size / _.value * Math.min(l, a), s.value.pointerStrokeWidth = ie({
+              relator: Math.min(a, l),
+              adjuster: _.value,
+              source: e.value.style.chart.layout.pointer.strokeWidth,
+              threshold: 2,
+              fallback: 2
+            }), s.value.markerOffset = ie({
+              relator: Math.max(a, l),
+              adjuster: _.value,
+              source: e.value.style.chart.layout.markers.offsetY + 3,
+              threshold: 2,
+              fallback: 2
+            }), s.value.segmentFontSize = ie({
+              relator: Math.min(a, l),
+              adjuster: _.value,
+              source: e.value.style.chart.layout.segmentNames.fontSize,
+              threshold: 8,
+              fallback: 8
+            });
+          }), ze();
+        });
+        A.value && (X.value && A.value.unobserve(X.value), A.value.disconnect()), A.value = new ResizeObserver(u), X.value = C.value.parentNode, A.value.observe(X.value);
+      }
+      requestAnimationFrame(ze);
+    }
+    lt(() => {
+      ee();
+    }), st(() => {
+      A.value && (X.value && A.value.unobserve(X.value), A.value.disconnect());
+    });
+    const B = h({
+      get: () => s.value.segmentFontSize,
+      set: (t) => t
+    });
+    let xe = !1;
+    function ze() {
+      xe || requestAnimationFrame(() => {
+        xe = !1, e.value;
+        const t = J.value, [u, a, l, m] = t.getAttribute("viewBox").split(" ").map(Number), p = { x: u, y: a, width: l, height: m }, U = [
+          {
+            selector: ".vue-ui-gauge-label-flat",
+            baseSize: s.value.segmentFontSize,
+            minSize: e.value.style.chart.layout.segmentNames.minFontSize,
+            sizeRef: B
+          }
+        ];
+        U.map((N) => t.querySelectorAll(N.selector).length).reduce((N, T) => N + T, 0) !== 0 && U.forEach(({ selector: N, baseSize: T, minSize: Ke, sizeRef: Qe }) => {
+          t.querySelectorAll(N).forEach((et) => {
+            const tt = yt({
+              el: et,
+              bounds: p,
+              currentFontSize: T,
+              minFontSize: Ke,
+              attempts: 200,
+              padding: 1
+            });
+            Qe.value = tt;
+          });
+        });
+      });
+    }
+    function $e(t) {
+      const u = [];
+      (O.value.series || []).forEach((p) => {
+        u.push(p.from || 0), u.push(p.to || 0);
+      }), I.value = Math.max(...u), $.value = Math.min(...u);
+      let a = e.value.style.chart.animation.speed;
+      const l = Math.abs(t - y.value) / (a * 60);
+      function m() {
+        y.value < t ? y.value = Math.min(y.value + l, t) : y.value > t && (y.value = Math.max(y.value - l, t)), y.value !== t && requestAnimationFrame(m);
+      }
+      m();
+    }
+    const v = h(() => {
+      const t = e.value.responsive ? Math.min(s.value.width, s.value.height) : s.value.width, u = 2.5 / e.value.style.chart.layout.radiusRatio;
+      return {
+        arcs: t / u,
+        gradients: t / (u * 1.1),
+        base: e.value.responsive ? s.value.height / 1.618 : s.value.height * 0.7,
+        ratingBase: e.value.responsive ? s.value.height / 2 + s.value.height / 4 : s.value.height * 0.9,
+        pointerSize: e.value.responsive ? Math.min(s.value.width, s.value.height) / 3 : s.value.width / 3.2
+      };
+    }), d = h(() => re(
+      { series: O.value.series },
+      s.value.width / 2,
+      v.value.base,
+      v.value.arcs,
+      v.value.arcs,
+      1,
+      1,
+      1,
+      180,
+      109.9495,
+      40 * s.value.trackSize
+    )), De = h(() => re(
+      { series: O.value.series },
+      s.value.width / 2,
+      v.value.base,
+      v.value.arcs * e.value.style.chart.layout.segmentNames.offsetRatio,
+      v.value.arcs * e.value.style.chart.layout.segmentNames.offsetRatio,
+      1,
+      1,
+      1,
+      180,
+      109.9495,
+      40 * s.value.trackSize
+    )), M = h(() => d.value.map((t) => v.value.arcs * e.value.style.chart.layout.segmentNames.offsetRatio * (t.nameOffsetRatio || 1))), Ae = h(() => {
+      const { x: t, y: u } = F({
+        initX: d.value[0].firstSeparator.x,
+        initY: d.value[0].firstSeparator.y,
+        centerX: i.value.x1,
+        centerY: i.value.y1,
+        offset: -e.value.style.chart.layout.segmentSeparators.offsetIn
+      }), { x: a, y: l } = F({
+        initX: d.value[0].startX,
+        initY: d.value[0].startY,
+        centerX: i.value.x1,
+        centerY: i.value.y1,
+        offset: e.value.style.chart.layout.segmentSeparators.offsetOut
+      });
+      return { x1: t, y1: u, x2: a, y2: l };
+    }), Fe = h(() => d.value.map((t) => {
+      const { x: u, y: a } = F({
+        initX: t.separator.x,
+        initY: t.separator.y,
+        centerX: i.value.x1,
+        centerY: i.value.y1,
+        offset: -e.value.style.chart.layout.segmentSeparators.offsetIn
+      }), { x: l, y: m } = F({
+        initX: t.endX,
+        initY: t.endY,
+        centerX: i.value.x1,
+        centerY: i.value.y1,
+        offset: e.value.style.chart.layout.segmentSeparators.offsetOut
+      });
+      return { x1: u, y1: a, x2: l, y2: m };
+    }));
+    function qe(t) {
+      if (t.reduce((m, p) => m + p, 0) > 100)
+        throw new Error("Total % must not exceed 100");
+      const a = 50;
+      let l = 0;
+      return t.map((m) => (l += m, `${l / 100 * a - m / 4}%`));
+    }
+    const Ve = h(() => qe(d.value.map((t) => t.proportion * 100))), He = h(() => re(
+      { series: O.value.series },
+      s.value.width / 2,
+      v.value.base,
+      v.value.gradients,
+      v.value.gradients,
+      0.95,
+      1,
+      1,
+      180,
+      110.02,
+      2 * s.value.trackSize
+    )), Ze = h(() => {
+      const t = $.value >= 0 ? -$.value : Math.abs($.value);
+      return mt({
+        radius: e.value.style.chart.layout.indicatorArc.radius * s.value.trackSize,
+        centerX: s.value.width / 2,
+        centerY: v.value.base,
+        percentage: gt((y.value + t) / (I.value + t))
+      });
+    }), E = f(!1);
+    function Ce(t) {
+      E.value = t, ce.value += 1;
+    }
+    const j = f(!1);
+    function te() {
+      j.value = !j.value;
+    }
+    async function Je({ scale: t = 2 } = {}) {
+      if (!C.value) return;
+      const { width: u, height: a } = C.value.getBoundingClientRect(), l = u / a, { imageUri: m, base64: p } = await At({ domElement: C.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: m,
+        base64: p,
+        title: e.value.style.chart.title.text,
+        width: u,
+        height: a,
+        aspectRatio: l
+      };
+    }
+    return Ye({
+      getImage: Je,
+      generatePdf: _e,
+      generateImage: we,
+      toggleAnnotator: te,
+      toggleFullscreen: Ce
+    }), (t, u) => (r(), o("div", {
+      class: Ne(`vue-ui-gauge ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      ref_key: "gaugeChart",
+      ref: C,
+      id: `vue-ui-gauge_${w.value}`,
+      style: se(`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] = () => n(ge)(!0)),
+      onMouseleave: u[1] || (u[1] = () => n(ge)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (r(), W(n(Ee), {
+        key: 0,
+        svgRef: n(J),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: j.value,
+        onClose: te
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
+      Ue.value ? (r(), o("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: fe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : c("", !0),
+      e.value.style.chart.title.text ? (r(), o("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ve,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (r(), W($t, {
+          key: `title_${ye.value}`,
+          config: {
+            title: {
+              cy: "gauge-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "gauge-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, {
+          default: R(() => [
+            e.value.translations.base && H.dataset.base ? (r(), o("span", Nt, Y(e.value.translations.base) + ": " + Y(H.dataset.base), 1)) : c("", !0)
+          ]),
+          _: 1
+        }, 8, ["config"]))
+      ], 512)) : c("", !0),
+      e.value.userOptions.show && Be.value && (n(pe) || n(Z)) ? (r(), W(n(Te), {
+        ref_key: "details",
+        ref: je,
+        key: `user_options_${ce.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: n(be),
+        isPrinting: n(ke),
+        uid: w.value,
+        hasXls: !1,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: E.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: C.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: j.value,
+        onToggleFullscreen: Ce,
+        onGeneratePdf: n(_e),
+        onGenerateImage: n(we),
+        onToggleAnnotator: te,
+        style: se({
+          visibility: n(pe) ? n(Z) ? "visible" : "hidden" : "visible"
+        })
+      }, rt({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: R(({ isOpen: a, color: l }) => [
+            S(t.$slots, "menuIcon", D(q({ isOpen: a, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: R(() => [
+            S(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: R(() => [
+            S(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: R(({ toggleFullscreen: a, isFullscreen: l }) => [
+            S(t.$slots, "optionFullscreen", D(q({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: R(({ toggleAnnotator: a, isAnnotator: l }) => [
+            S(t.$slots, "optionAnnotator", D(q({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "callbacks", "printScale", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
+      (r(), o("svg", {
+        ref_key: "svgRef",
+        ref: J,
+        xmlns: n(pt),
+        class: Ne({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
+        viewBox: `0 0 ${s.value.width <= 0 ? 10 : s.value.width} ${s.value.height <= 0 ? 10 : s.value.height}`,
+        style: se(`max-width:100%;overflow:hidden !important;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        ot(n(Le)),
+        t.$slots["chart-background"] ? (r(), o("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: s.value.width <= 0 ? 10 : s.value.width,
+          height: s.value.height <= 0 ? 10 : s.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          S(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, It)) : c("", !0),
+        k("defs", null, [
+          k("radialGradient", {
+            id: `gradient_${w.value}`,
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            k("stop", {
+              offset: "0%",
+              "stop-color": n(oe)("#FFFFFF", 1)
+            }, null, 8, Rt),
+            k("stop", {
+              offset: "80%",
+              "stop-color": n(oe)("#FFFFFF", e.value.style.chart.layout.track.gradientIntensity)
+            }, null, 8, Yt),
+            k("stop", {
+              offset: "100%",
+              "stop-color": n(oe)("#FFFFFF", 1)
+            }, null, 8, Et)
+          ], 8, Xt)
+        ]),
+        k("defs", null, [
+          k("filter", {
+            id: `blur_${w.value}`,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%"
+          }, [
+            k("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: 100 / e.value.style.chart.layout.track.gradientIntensity
+            }, null, 8, Lt)
+          ], 8, Tt)
+        ]),
+        t.$slots.pattern ? (r(), o("g", Gt, [
+          (r(!0), o(b, null, x(d.value, (a, l) => (r(), o("defs", null, [
+            S(t.$slots, "pattern", L({ ref_for: !0 }, { seriesIndex: l, patternId: `pattern_${w.value}_${l}` }), void 0, !0)
+          ]))), 256))
+        ])) : c("", !0),
+        (r(!0), o(b, null, x(d.value, (a, l) => (r(), o("path", {
+          key: `arc_${l}`,
+          d: a.arcSlice,
+          fill: a.color,
+          stroke: e.value.style.chart.backgroundColor,
+          "stroke-linecap": "round"
+        }, null, 8, Bt))), 128)),
+        t.$slots.pattern ? (r(!0), o(b, { key: 2 }, x(d.value, (a, l) => (r(), o("path", {
+          key: `arc_${l}`,
+          d: a.arcSlice,
+          fill: `url(#pattern_${w.value}_${l})`,
+          stroke: e.value.style.chart.backgroundColor,
+          "stroke-linecap": "round"
+        }, null, 8, jt))), 128)) : c("", !0),
+        e.value.style.chart.layout.indicatorArc.show ? (r(), o("path", {
+          key: 3,
+          d: Ze.value,
+          fill: e.value.style.chart.layout.indicatorArc.fill
+        }, null, 8, Ut)) : c("", !0),
+        e.value.style.chart.layout.segmentNames.show && e.value.style.chart.layout.segmentNames.curved ? (r(), o(b, { key: 4 }, [
+          (r(!0), o(b, null, x(d.value, (a, l) => (r(), o("path", {
+            id: `curve_${w.value}_${l}`,
+            d: `M ${i.value.x1},${i.value.y1} m -${M.value[l]},0 a ${M.value[l]},${M.value[l]} 0 1,1 ${2 * M.value[l]},0 a ${M.value[l]},${M.value[l]} 0 1,1 -${2 * M.value[l]},0`,
+            fill: "transparent"
+          }, null, 8, Wt))), 256)),
+          (r(!0), o(b, null, x(d.value, (a, l) => (r(), o("text", {
+            fill: e.value.style.chart.layout.segmentNames.useSerieColor ? a.color : e.value.style.chart.layout.segmentNames.color,
+            "font-size": B.value,
+            "font-weight": e.value.style.chart.layout.segmentNames.bold ? "bold" : "normal",
+            "text-anchor": "middle"
+          }, [
+            k("textPath", {
+              href: `#curve_${w.value}_${l}`,
+              startOffset: Ve.value[l]
+            }, Y(a.name || ""), 9, qt)
+          ], 8, Dt))), 256))
+        ], 64)) : c("", !0),
+        e.value.style.chart.layout.segmentNames.show && !e.value.style.chart.layout.segmentNames.curved ? (r(!0), o(b, { key: 5 }, x(De.value, (a, l) => (r(), o("text", {
+          class: "vue-ui-gauge-label-flat",
+          "text-anchor": n(bt)(a, !1, 12).anchor,
+          fill: e.value.style.chart.layout.segmentNames.useSerieColor ? a.color : e.value.style.chart.layout.segmentNames.color,
+          "font-size": B.value,
+          "font-weight": e.value.style.chart.layout.segmentNames.bold ? "bold" : "normal",
+          innerHTML: n(kt)({
+            content: String(a.name ?? ""),
+            fontSize: B.value,
+            fill: e.value.style.chart.layout.segmentNames.useSerieColor ? a.color : e.value.style.chart.layout.segmentNames.color,
+            x: a.center.endX,
+            y: a.center.endY
+          })
+        }, null, 8, Vt))), 256)) : c("", !0),
+        e.value.style.chart.layout.track.useGradient ? (r(!0), o(b, { key: 6 }, x(He.value, (a, l) => (r(), o("path", {
+          key: `arc_${l}`,
+          d: a.arcSlice,
+          fill: "#FFFFFF",
+          stroke: "none",
+          "stroke-linecap": "round",
+          filter: `url(#blur_${w.value})`
+        }, null, 8, Ht))), 128)) : c("", !0),
+        e.value.style.chart.layout.segmentSeparators.show ? (r(), o(b, { key: 7 }, [
+          k("line", L(Ae.value, {
+            stroke: e.value.style.chart.backgroundColor,
+            "stroke-width": e.value.style.chart.layout.segmentSeparators.strokeWidth + 2,
+            "stroke-linecap": "round"
+          }), null, 16, Zt),
+          k("line", L(Ae.value, {
+            stroke: e.value.style.chart.layout.segmentSeparators.stroke,
+            "stroke-width": e.value.style.chart.layout.segmentSeparators.strokeWidth,
+            "stroke-linecap": "round"
+          }), null, 16, Jt),
+          (r(!0), o(b, null, x(Fe.value, (a) => (r(), o("line", L({ ref_for: !0 }, a, {
+            stroke: e.value.style.chart.backgroundColor,
+            "stroke-width": e.value.style.chart.layout.segmentSeparators.strokeWidth + 2,
+            "stroke-linecap": "round"
+          }), null, 16, Kt))), 256)),
+          (r(!0), o(b, null, x(Fe.value, (a) => (r(), o("line", L({ ref_for: !0 }, a, {
+            stroke: e.value.style.chart.layout.segmentSeparators.stroke,
+            "stroke-width": e.value.style.chart.layout.segmentSeparators.strokeWidth,
+            "stroke-linecap": "round"
+          }), null, 16, Qt))), 256))
+        ], 64)) : c("", !0),
+        e.value.style.chart.layout.markers.show ? (r(), o("g", ea, [
+          (r(!0), o(b, null, x(d.value, (a, l) => (r(), o("text", {
+            x: n(F)({
+              centerX: i.value.x1,
+              centerY: v.value.base,
+              initX: a.center.startX,
+              initY: a.center.startY,
+              offset: s.value.markerOffset
+            }).x,
+            y: n(F)({
+              centerX: i.value.x1,
+              centerY: v.value.base,
+              initX: a.center.startX,
+              initY: a.center.startY,
+              offset: s.value.markerOffset
+            }).y,
+            "text-anchor": a.center.startX < i.value.x1 - 5 ? "end" : a.center.startX > i.value.x1 + 5 ? "start" : "middle",
+            "font-size": s.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
+          }, Y(n(ue)(
+            e.value.style.chart.layout.markers.formatter,
+            a.from,
+            n(ne)({
+              p: e.value.style.chart.layout.markers.prefix,
+              v: a.from,
+              s: e.value.style.chart.layout.markers.suffix,
+              r: e.value.style.chart.layout.markers.roundingValue
+            })
+          )), 9, ta))), 256))
+        ])) : c("", !0),
+        e.value.style.chart.layout.markers.show ? (r(), o("text", {
+          key: 9,
+          x: n(F)({
+            centerX: s.value.width / 2,
+            centerY: v.value.base,
+            initX: d.value.at(-1).endX,
+            initY: d.value.at(-1).endY,
+            offset: s.value.markerOffset
+          }).x,
+          y: n(F)({
+            centerX: s.value.width / 2,
+            centerY: v.value.base,
+            initX: d.value.at(-1).endX,
+            initY: d.value.at(-1).endY,
+            offset: s.value.markerOffset
+          }).y,
+          "text-anchor": "start",
+          "font-size": s.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
+        }, Y(n(ue)(
+          e.value.style.chart.layout.markers.formatter,
+          I.value,
+          n(ne)({
+            p: e.value.style.chart.layout.markers.prefix,
+            v: I.value,
+            s: e.value.style.chart.layout.markers.suffix,
+            r: e.value.style.chart.layout.markers.roundingValue
+          })
+        )), 9, aa)) : c("", !0),
+        e.value.style.chart.layout.pointer.show ? (r(), o(b, { key: 10 }, [
+          e.value.style.chart.layout.pointer.type === "rounded" ? (r(), o("g", la, [
+            isNaN(i.value.x2) ? c("", !0) : (r(), o("line", {
+              key: 0,
+              x1: i.value.x1,
+              y1: i.value.y1,
+              x2: i.value.x2,
+              y2: i.value.y2,
+              stroke: e.value.style.chart.layout.pointer.stroke,
+              "stroke-width": s.value.pointerStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, sa)),
+            isNaN(i.value.x2) ? c("", !0) : (r(), o("line", {
+              key: 1,
+              x1: i.value.x1,
+              y1: i.value.y1,
+              x2: i.value.x2,
+              y2: i.value.y2,
+              stroke: e.value.style.chart.layout.pointer.useRatingColor ? Q.value : e.value.style.chart.layout.pointer.color,
+              "stroke-linecap": "round",
+              "stroke-width": s.value.pointerStrokeWidth * 0.7
+            }, null, 8, ra)),
+            !isNaN(i.value.x2) && e.value.style.chart.layout.track.useGradient ? (r(), o("line", {
+              key: 2,
+              x1: i.value.x1,
+              y1: i.value.y1,
+              x2: i.value.x2,
+              y2: i.value.y2,
+              stroke: "white",
+              "stroke-linecap": "round",
+              "stroke-width": s.value.pointerStrokeWidth * 0.3,
+              filter: `url(#blur_${w.value})`
+            }, null, 8, oa)) : c("", !0)
+          ])) : (r(), o("g", ua, [
+            Se.value ? (r(), o("path", {
+              key: 0,
+              d: Se.value,
+              fill: e.value.style.chart.layout.pointer.useRatingColor ? Q.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, na)) : c("", !0)
+          ])),
+          k("circle", {
+            cx: s.value.width / 2,
+            cy: v.value.base,
+            fill: e.value.style.chart.layout.pointer.circle.color,
+            r: s.value.pointerRadius <= 0 ? 1e-4 : s.value.pointerRadius,
+            "stroke-width": e.value.style.chart.layout.pointer.circle.strokeWidth,
+            stroke: e.value.style.chart.layout.pointer.circle.stroke
+          }, null, 8, ia)
+        ], 64)) : c("", !0),
+        e.value.style.chart.legend.show ? (r(), o("text", {
+          key: 11,
+          x: s.value.width / 2,
+          y: v.value.ratingBase,
+          "text-anchor": "middle",
+          "font-size": s.value.legendFontSize,
+          "font-weight": "bold",
+          fill: e.value.style.chart.legend.useRatingColor ? Q.value : e.value.style.chart.legend.color
+        }, Y(n(ue)(
+          e.value.style.chart.legend.formatter,
+          y.value,
+          n(ne)({
+            p: e.value.style.chart.legend.prefix + (e.value.style.chart.legend.showPlusSymbol && y.value > 0 ? "+" : ""),
+            v: y.value,
+            s: e.value.style.chart.legend.suffix,
+            r: e.value.style.chart.legend.roundingValue
+          })
+        )), 9, ca)) : c("", !0),
+        S(t.$slots, "svg", { svg: s.value }, void 0, !0)
+      ], 14, Pt)),
+      t.$slots.watermark ? (r(), o("div", va, [
+        S(t.$slots, "watermark", D(q({ isPrinting: n(ke) || n(be) })), void 0, !0)
+      ])) : c("", !0),
+      k("div", {
+        ref_key: "chartLegend",
+        ref: he
+      }, [
+        S(t.$slots, "legend", { legend: O.value }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (r(), o("div", {
+        key: 5,
+        ref_key: "source",
+        ref: de,
+        dir: "auto"
+      }, [
+        S(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : c("", !0),
+      n(me) ? (r(), W(Ct, { key: 6 })) : c("", !0)
+    ], 46, Mt));
+  }
+}, xa = /* @__PURE__ */ Ot(ha, [["__scopeId", "data-v-98e99a00"]]);
+export {
+  xa as default
+};