vue-data-ui 3.0.0-next.7 → 3.0.0-next.71

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

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