vue-data-ui 3.0.0-next.6 → 3.0.0-next.60

package/dist/vue-ui-wheel-CYOrBHBD.js

@@ -0,0 +1,379 @@
+import { defineAsyncComponent as N, computed as y, ref as v, toRefs as Ce, watch as ae, shallowRef as le, onMounted as Ae, onBeforeUnmount as _e, createElementBlock as c, openBlock as o, unref as l, normalizeStyle as R, createBlock as O, createCommentVNode as h, createSlots as Oe, withCtx as b, renderSlot as d, normalizeProps as I, guardReactiveProps as $, normalizeClass as U, createVNode as Ie, Fragment as ne, renderList as se, toDisplayString as $e } from "vue";
+import { u as xe, c as Pe, t as Se, b as Fe, o as ze, f as Te, x as oe, m as Me, X as Ne, k as Re, h as ue, i as Ue } from "./index-BLtc1AIS.js";
+import { t as Be, u as Ee } from "./useResponsive-DfdjqQps.js";
+import { u as ie } from "./useNestedProp-DExlTpuj.js";
+import { u as Le } from "./usePrinter-fqbzwh0l.js";
+import { u as Xe } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as De } from "./useChartAccessibility-9icAAmYg.js";
+import Ge from "./Title-DEKAfzRX.js";
+import Ye from "./img-ChLGv8nO.js";
+import { u as je, B as He } from "./useLoading-Bt5Doa8m.js";
+import { _ as We } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const qe = ["id"], Ve = ["xmlns", "viewBox"], Je = ["width", "height"], Ke = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], Qe = ["d", "fill"], Ze = ["cx", "cy", "r", "stroke", "stroke-width"], et = { key: 4 }, tt = ["x", "y", "height"], at = ["x", "y", "font-size", "fill", "font-weight"], lt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, nt = {
+  __name: "vue-ui-wheel",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(re, { expose: ce }) {
+    const ve = N(() => import("./PenAndPaper-D6wazxlT.js")), he = N(() => import("./UserOptions-D2G7II3G.js")), de = N(() => import("./PackageVersion-5S8ajCUS.js")), { vue_ui_wheel: fe } = xe(), g = re, ye = y(() => !!g.dataset && Object.keys(g.dataset).length), x = v(Pe()), ge = v(null), B = v(0), p = v(null), E = v(null), L = v(null), X = v(null), D = v(0), e = v(F()), { loading: G, FINAL_DATASET: P } = je({
+      ...Ce(g),
+      FINAL_CONFIG: e,
+      prepareConfig: F,
+      skeletonDataset: { percentage: 50 },
+      skeletonConfig: Se({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              animation: { use: !1 },
+              layout: {
+                wheel: {
+                  ticks: {
+                    activeColor: "#6A6A6A80",
+                    inactiveColor: "#CACACA80"
+                  }
+                },
+                innerCircle: {
+                  stroke: "#CACACA80"
+                }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: S, setUserOptionsVisibility: Y, keepUserOptionState: j } = Xe({ config: e.value }), { svgRef: H } = De({ config: e.value.style.chart.title });
+    function F() {
+      const t = ie({
+        userConfig: g.config,
+        defaultConfig: fe
+      });
+      return t.theme ? {
+        ...ie({
+          userConfig: Fe.vue_ui_wheel[t.theme] || g.config,
+          defaultConfig: t
+        })
+      } : t;
+    }
+    ae(() => g.config, (t) => {
+      e.value = F(), S.value = !e.value.userOptions.showOnChartHover, Q(), D.value += 1;
+    }, { deep: !0 });
+    const { isPrinting: W, isImaging: q, generatePdf: V, generateImage: J } = Le({
+      elementId: x.value,
+      fileName: e.value.style.chart.title.text || "vue-ui-wheel",
+      options: e.value.userOptions.print
+    }), pe = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), s = v({
+      size: 360,
+      height: 360,
+      width: 360
+    }), k = v(e.value.style.chart.layout.percentage.fontSize), u = y(() => ({
+      radius: Math.min(s.value.width, s.value.height) * 0.9 / 2,
+      centerX: s.value.width / 2,
+      centerY: s.value.height / 2
+    }));
+    function K(t, n = 1) {
+      return {
+        x: u.value.centerX + u.value.radius * Math.cos(29.85 + t * Math.PI / 180) * n,
+        y: u.value.centerY + u.value.radius * Math.sin(29.85 + t * Math.PI / 180) * n
+      };
+    }
+    const r = v(e.value.style.chart.animation.use ? 0 : P.value.percentage || 0);
+    ae(() => P.value, (t) => {
+      e.value.style.chart.animation.use ? Z(t.percentage) : r.value = t.percentage || 0;
+    }, { deep: !0 });
+    const f = le(null), m = le(null);
+    Ae(() => {
+      Q();
+    });
+    const me = y(() => !!e.value.debug);
+    function Q() {
+      if (ze(g.dataset) && Te({
+        componentName: "VueUiWheel",
+        type: "dataset",
+        debug: me.value
+      }), e.value.responsive) {
+        const t = Be(() => {
+          const { width: n, height: a } = Ee({
+            chart: p.value,
+            title: e.value.style.chart.title.text ? E.value : null,
+            source: L.value,
+            noTitle: X.value
+          });
+          requestAnimationFrame(() => {
+            s.value.width = n, s.value.height = a, k.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(n, a);
+          });
+        });
+        f.value && (m.value && f.value.unobserve(m.value), f.value.disconnect()), f.value = new ResizeObserver(t), m.value = p.value.parentNode, f.value.observe(m.value);
+      }
+      Z(P.value.percentage || 0);
+    }
+    _e(() => {
+      f.value && (m.value && f.value.unobserve(m.value), f.value.disconnect());
+    });
+    function Z(t) {
+      let n = e.value.style.chart.animation.speed;
+      const a = Math.abs(t - r.value) / (n * 120);
+      function i() {
+        r.value < t ? r.value = Math.min(r.value + a, t) : r.value > t && (r.value = Math.max(r.value - a, t)), r.value !== t && requestAnimationFrame(i);
+      }
+      i();
+    }
+    const w = y(() => Math.max(100, e.value.style.chart.layout.wheel.ticks.quantity)), C = y(() => 100 / w.value), ee = y(() => {
+      const t = [];
+      for (let n = 0; n < w.value; n += 1) {
+        const a = r.value > n * C.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: i, y: T } = K(s.value.size / w.value * n), { x: M, y: be } = K(s.value.size / w.value * n, e.value.style.chart.layout.wheel.ticks.sizeRatio);
+        t.push({
+          x1: i,
+          y1: T,
+          x2: M,
+          y2: be,
+          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? oe(a, n * C.value / w.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
+        });
+      }
+      return t;
+    }), ke = y(() => Me({ series: ee.value.map((t) => ({
+      name: "",
+      value: 1,
+      color: t.color
+    })) }, u.value.centerX, u.value.centerY, u.value.radius, u.value.radius, 1.99999, 2, 1, 360, 105.25, u.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio))), A = v(!1);
+    function te(t) {
+      A.value = t, B.value += 1;
+    }
+    const _ = v(!1);
+    function z() {
+      _.value = !_.value;
+    }
+    async function we({ scale: t = 2 } = {}) {
+      if (!p.value) return;
+      const { width: n, height: a } = p.value.getBoundingClientRect(), i = n / a, { imageUri: T, base64: M } = await Ye({ domElement: p.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: T,
+        base64: M,
+        title: e.value.style.chart.title.text,
+        width: n,
+        height: a,
+        aspectRatio: i
+      };
+    }
+    return ce({
+      getImage: we,
+      generatePdf: V,
+      generateImage: J,
+      toggleAnnotator: z,
+      toggleFullscreen: te
+    }), (t, n) => (o(), c("div", {
+      class: "vue-ui-wheel",
+      ref_key: "wheelChart",
+      ref: p,
+      id: x.value,
+      style: R(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: n[0] || (n[0] = () => l(Y)(!0)),
+      onMouseleave: n[1] || (n[1] = () => l(Y)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (o(), O(l(ve), {
+        key: 0,
+        svgRef: l(H),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: _.value,
+        onClose: z
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      pe.value ? (o(), c("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: X,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.chart.title.text ? (o(), c("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: E,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (o(), O(Ge, {
+          key: `title_${D.value}`,
+          config: {
+            title: {
+              cy: "wheel-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "wheel-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : h("", !0),
+      e.value.userOptions.show && ye.value && (l(j) || l(S)) ? (o(), O(l(he), {
+        ref_key: "details",
+        ref: ge,
+        key: `user_options_${B.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: l(W),
+        isImaging: l(q),
+        uid: x.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasXls: !1,
+        isFullscreen: A.value,
+        position: e.value.userOptions.position,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: _.value,
+        chartElement: p.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: te,
+        onGeneratePdf: l(V),
+        onGenerateImage: l(J),
+        onToggleAnnotator: z,
+        style: R({
+          visibility: l(j) ? l(S) ? "visible" : "hidden" : "visible"
+        })
+      }, Oe({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: b(({ isOpen: a, color: i }) => [
+            d(t.$slots, "menuIcon", I($({ isOpen: a, color: i })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: b(() => [
+            d(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: b(() => [
+            d(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: b(({ toggleFullscreen: a, isFullscreen: i }) => [
+            d(t.$slots, "optionFullscreen", I($({ toggleFullscreen: a, isFullscreen: i })), void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: b(({ toggleAnnotator: a, isAnnotator: i }) => [
+            d(t.$slots, "optionAnnotator", I($({ toggleAnnotator: a, isAnnotator: i })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      (o(), c("svg", {
+        ref_key: "svgRef",
+        ref: H,
+        xmlns: l(Ne),
+        class: U({ "vue-data-ui-fullscreen--on": A.value, "vue-data-ui-fulscreen--off": !A.value }),
+        viewBox: `0 0 ${s.value.width <= 0 ? 10 : s.value.width} ${s.value.height <= 0 ? 10 : s.value.height}`,
+        style: R(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        Ie(l(de)),
+        t.$slots["chart-background"] ? (o(), c("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"
+          }
+        }, [
+          d(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Je)) : h("", !0),
+        e.value.style.chart.layout.wheel.ticks.type === "classic" ? (o(!0), c(ne, { key: 1 }, se(ee.value, (a, i) => (o(), c("line", {
+          x1: a.x1,
+          x2: a.x2,
+          y1: a.y1,
+          y2: a.y2,
+          stroke: a.color,
+          "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(s.value.width, s.value.height),
+          "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
+          class: U({ "vue-ui-tick-animated": e.value.style.chart.animation.use && i * C.value <= r.value })
+        }, null, 10, Ke))), 256)) : (o(!0), c(ne, { key: 2 }, se(ke.value, (a, i) => (o(), c("path", {
+          d: a.arcSlice,
+          fill: a.color,
+          class: U({ "vue-ui-tick-animated": e.value.style.chart.animation.use && i * C.value <= r.value })
+        }, null, 10, Qe))), 256)),
+        e.value.style.chart.layout.innerCircle.show ? (o(), c("circle", {
+          key: 3,
+          cx: u.value.centerX,
+          cy: u.value.centerY,
+          r: u.value.radius * 0.8 <= 0 ? 1e-4 : u.value.radius * 0.8,
+          stroke: e.value.style.chart.layout.innerCircle.stroke,
+          "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
+          fill: "none"
+        }, null, 8, Ze)) : h("", !0),
+        e.value.style.chart.layout.percentage.show ? (o(), c("g", et, [
+          l(G) ? (o(), c("rect", {
+            key: 0,
+            x: u.value.centerX - 40,
+            y: u.value.centerY - k.value / 2,
+            width: 80,
+            height: k.value,
+            fill: "#6A6A6A80",
+            rx: "3"
+          }, null, 8, tt)) : (o(), c("text", {
+            key: 1,
+            x: u.value.centerX,
+            y: u.value.centerY + k.value / 3,
+            "font-size": k.value,
+            fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? l(oe)(e.value.style.chart.layout.wheel.ticks.activeColor, r.value / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.wheel.ticks.activeColor,
+            "text-anchor": "middle",
+            "font-weight": e.value.style.chart.layout.percentage.bold ? "bold" : "normal",
+            style: { "font-variant-numeric": "tabluar-nums" }
+          }, $e(l(Re)(
+            e.value.style.chart.layout.percentage.formatter,
+            l(ue)(r.value),
+            l(Ue)({
+              v: l(ue)(r.value),
+              s: "%",
+              r: e.value.style.chart.layout.percentage.rounding
+            })
+          )), 9, at))
+        ])) : h("", !0),
+        d(t.$slots, "svg", { svg: s.value }, void 0, !0)
+      ], 14, Ve)),
+      t.$slots.watermark ? (o(), c("div", lt, [
+        d(t.$slots, "watermark", I($({ isPrinting: l(W) || l(q) })), void 0, !0)
+      ])) : h("", !0),
+      t.$slots.source ? (o(), c("div", {
+        key: 5,
+        ref_key: "source",
+        ref: L,
+        dir: "auto"
+      }, [
+        d(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      l(G) ? (o(), O(He, { key: 6 })) : h("", !0)
+    ], 44, qe));
+  }
+}, gt = /* @__PURE__ */ We(nt, [["__scopeId", "data-v-11683b00"]]);
+export {
+  gt as default
+};