vue-data-ui 2.2.90 → 2.2.91

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

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