vue-data-ui 2.17.0 → 2.17.1

package/dist/{vue-ui-tiremarks-CRt4UQZD.js → vue-ui-tiremarks-B1bM9Aoo.js}

@@ -1,16 +1,16 @@
-import { defineAsyncComponent as S, computed as h, ref as b, watch as te, onMounted as ge, createElementBlock as c, openBlock as r, unref as l, normalizeStyle as L, normalizeClass as j, createBlock as z, createCommentVNode as d, createSlots as me, withCtx as P, renderSlot as g, normalizeProps as N, guardReactiveProps as M, createVNode as ye, Fragment as ae, renderList as oe, toDisplayString as ke } from "vue";
-import { u as le } from "./useNestedProp-DjACxgdZ.js";
-import { u as be, c as Ce, a as _e, v as $e, o as we, e as Oe, w as se, X as Pe, i as xe, f as Ae } from "./index-pPGk-uhD.js";
-import { u as Ie } from "./usePrinter-DDHcrl0A.js";
+import { defineAsyncComponent as S, computed as d, ref as b, watch as te, onMounted as pe, createElementBlock as c, openBlock as r, unref as s, normalizeStyle as G, normalizeClass as L, createBlock as z, createCommentVNode as g, createSlots as ye, withCtx as x, renderSlot as p, normalizeProps as N, guardReactiveProps as M, createVNode as me, Fragment as ae, renderList as oe, toDisplayString as ke } from "vue";
+import { u as le } from "./useNestedProp-BwL5wmVa.js";
+import { u as be, c as Ce, a as _e, v as we, o as $e, e as Oe, w as se, X as Pe, i as xe, f as Ae } from "./index-CobsZUkv.js";
+import { u as Ie } from "./usePrinter-DPh6U_Qk.js";
 import { u as Fe } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Se } from "./useChartAccessibility-9icAAmYg.js";
-import ze from "./Title-B-2bV0SW.js";
-import Ne from "./img-Y_hYz-ZC.js";
+import ze from "./Title-DpERl1yr.js";
+import Ne from "./img-utitT2Gd.js";
 import { _ as Me } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Te = ["id"], Ue = {
   key: 2,
   style: "width:100%;background:transparent;padding-bottom:12px"
-}, Ee = ["xmlns", "viewBox"], Ge = ["width", "height"], Le = { key: 1 }, je = ["d", "stroke-width", "stroke"], Re = { key: 2 }, Be = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Xe = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], De = {
+}, Re = ["xmlns", "viewBox"], Ee = ["width", "height"], Ge = { key: 1 }, Le = ["d", "stroke-width", "stroke"], je = { key: 2 }, Be = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Xe = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], De = {
   key: 5,
   class: "vue-data-ui-watermark"
 }, He = {
@@ -34,10 +34,10 @@ const Te = ["id"], Ue = {
     }
   },
   setup(ne, { expose: re }) {
-    const ue = S(() => import("./PenAndPaper-D6AqipIO.js")), ie = S(() => import("./vue-ui-skeleton-DJPjyNYn.js")), ce = S(() => import("./UserOptions-Dd34lEKb.js")), ve = S(() => import("./PackageVersion-5TR4ocqp.js")), { vue_ui_tiremarks: he } = be(), f = ne, T = h(() => !!f.dataset && Object.keys(f.dataset).length), U = b(Ce()), x = b(null), de = b(null), R = b(0), B = b(0), e = h({
+    const ue = S(() => import("./PenAndPaper-Cde-wJ3N.js")), ie = S(() => import("./vue-ui-skeleton-8s4xts8z.js")), ce = S(() => import("./UserOptions-DTEJ3UM_.js")), ve = S(() => import("./PackageVersion-C-4Ee8BQ.js")), { vue_ui_tiremarks: he } = be(), f = ne, T = d(() => !!f.dataset && Object.keys(f.dataset).length), U = b(Ce()), w = b(null), de = b(null), j = b(0), B = b(0), e = d({
       get: () => V(),
       set: (t) => t
-    }), { userOptionsVisible: E, setUserOptionsVisibility: X, keepUserOptionState: D } = Fe({ config: e.value }), { svgRef: H } = Se({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: R, setUserOptionsVisibility: X, keepUserOptionState: D } = Fe({ config: e.value }), { svgRef: H } = Se({ config: e.value.style.chart.title });
     function V() {
       const t = le({
         userConfig: f.config,
@@ -51,40 +51,40 @@ const Te = ["id"], Ue = {
       } : t;
     }
     te(() => f.config, (t) => {
-      e.value = V(), E.value = !e.value.userOptions.showOnChartHover, W(), B.value += 1;
+      e.value = V(), R.value = !e.value.userOptions.showOnChartHover, W(), B.value += 1;
     }, { deep: !0 });
     const { isPrinting: Y, isImaging: q, generatePdf: J, generateImage: K } = Ie({
       elementId: U.value,
       fileName: e.value.style.chart.title.text || "vue-ui-tiremarks",
       options: e.value.userOptions.print
-    }), fe = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = b(e.value.style.chart.animation.use ? 0 : $e(f.dataset.percentage));
+    }), ge = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = b(e.value.style.chart.animation.use ? 0 : we(f.dataset.percentage));
     te(() => f.dataset, (t) => {
       e.value.style.chart.animation.use ? Q(t.percentage) : u.value = t.percentage || 0;
-    }, { deep: !0 }), ge(() => {
+    }, { deep: !0 }), pe(() => {
       W();
     });
     function Q(t) {
       let n = e.value.style.chart.animation.speed;
       const a = Math.abs(t - u.value) / (n * 120);
-      function s() {
-        u.value < t ? u.value = Math.min(u.value + a, t) : u.value > t && (u.value = Math.max(u.value - a, t)), u.value !== t && requestAnimationFrame(s);
+      function o() {
+        u.value < t ? u.value = Math.min(u.value + a, t) : u.value > t && (u.value = Math.max(u.value - a, t)), u.value !== t && requestAnimationFrame(o);
       }
-      s();
+      o();
     }
     function W() {
-      we(f.dataset) && Oe({
+      $e(f.dataset) && Oe({
         componentName: "VueUiTiremarks",
         type: "dataset"
       }), Q(f.dataset.percentage || 0);
     }
-    const C = h(() => e.value.style.chart.layout.display === "vertical"), i = h(() => {
+    const _ = d(() => e.value.style.chart.layout.display === "vertical"), i = d(() => {
       const t = {
         top: 48,
         left: 64,
         right: 64,
         bottom: 48
       };
-      return C.value ? {
+      return _.value ? {
         top: e.value.style.chart.percentage.verticalPosition === "top" ? t.top : 3,
         left: 3,
         right: 3,
@@ -95,46 +95,46 @@ const Te = ["id"], Ue = {
         left: e.value.style.chart.percentage.horizontalPosition === "left" ? t.left : 3,
         right: e.value.style.chart.percentage.horizontalPosition === "right" ? t.right : 10
       };
-    }), A = h(() => Object.values(i.value).reduce((t, n) => t + n, 0)), o = h(() => ({
-      height: C.value ? 312 : 56,
-      width: C.value ? 56 : 312
-    })), v = h(() => C.value ? {
-      mark: (o.value.height - A.value) / 100 * 0.5,
-      space: (o.value.height - A.value) / 100 * 0.5
+    }), A = d(() => Object.values(i.value).reduce((t, n) => t + n, 0)), l = d(() => ({
+      height: _.value ? 312 : 56,
+      width: _.value ? 56 : 312
+    })), v = d(() => _.value ? {
+      mark: (l.value.height - A.value) / 100 * 0.5,
+      space: (l.value.height - A.value) / 100 * 0.5
     } : {
-      mark: (o.value.width - A.value) / 100 * 0.5,
-      space: (o.value.width - A.value) / 100 * 0.5
-    }), Z = h(() => {
+      mark: (l.value.width - A.value) / 100 * 0.5,
+      space: (l.value.width - A.value) / 100 * 0.5
+    }), Z = d(() => {
       const t = [];
       for (let a = 0; a < 100; a += 1) {
-        const s = e.value.style.chart.layout.ticks.gradient.show ? se(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
-        if (C.value) {
-          const $ = e.value.style.chart.layout.crescendo ? (100 - a) * (o.value.width - i.value.left - i.value.right) / 100 / 3 : 0, p = i.value.left + 4 + $, m = o.value.width - i.value.right - 4 - $, y = o.value.height - i.value.bottom - a * v.value.mark - a * v.value.space - v.value.mark, k = o.value.height - i.value.bottom - a * v.value.mark - a * v.value.space - v.value.mark, w = (m - p) / e.value.style.chart.layout.curveAngleX, O = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
+        const o = e.value.style.chart.layout.ticks.gradient.show ? se(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
+        if (_.value) {
+          const C = e.value.style.chart.layout.crescendo ? (100 - a) * (l.value.width - i.value.left - i.value.right) / 100 / 3 : 0, h = i.value.left + 4 + C, y = l.value.width - i.value.right - 4 - C, m = l.value.height - i.value.bottom - a * v.value.mark - a * v.value.space - v.value.mark, k = l.value.height - i.value.bottom - a * v.value.mark - a * v.value.space - v.value.mark, O = (y - h) / e.value.style.chart.layout.curveAngleX, P = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
           t.push({
-            x1: p,
-            x2: m,
-            y1: y,
+            x1: h,
+            x2: y,
+            y1: m,
             y2: k,
-            curve: `M ${p} ${y} C ${p + w} ${y - O}, ${m - w} ${k - O}, ${m} ${k}`,
-            color: s
+            curve: `M ${h} ${m} C ${h + O} ${m - P}, ${y - O} ${k - P}, ${y} ${k}`,
+            color: o
           });
         } else {
-          const $ = e.value.style.chart.layout.crescendo ? (100 - a) * (o.value.height - i.value.top - i.value.bottom) / 100 / 3 : 0, p = i.value.left + a * v.value.mark + a * v.value.space - v.value.mark, m = p, y = i.value.top + 4 + $, k = o.value.height - i.value.bottom - 4 - $, w = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), O = (k - y) / e.value.style.chart.layout.curveAngleX;
+          const C = e.value.style.chart.layout.crescendo ? (100 - a) * (l.value.height - i.value.top - i.value.bottom) / 100 / 3 : 0, h = i.value.left + a * v.value.mark + a * v.value.space - v.value.mark, y = h, m = i.value.top + 4 + C, k = l.value.height - i.value.bottom - 4 - C, O = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), P = (k - m) / e.value.style.chart.layout.curveAngleX;
           t.push({
-            x1: p,
-            x2: m,
-            y1: y,
+            x1: h,
+            x2: y,
+            y1: m,
             y2: k,
-            curve: `M ${p} ${y} C ${p + w} ${y + O}, ${m + w} ${k - O}, ${m} ${k}`,
-            color: s
+            curve: `M ${h} ${m} C ${h + O} ${m + P}, ${y + O} ${k - P}, ${y} ${k}`,
+            color: o
           });
         }
       }
       return t;
-    }), _ = h(() => {
+    }), $ = d(() => {
       let t, n, a;
-      const s = e.value.style.chart.percentage.fontSize / 3;
-      return C.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = o.value.width / 2, n = i.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = o.value.width / 2, n = o.value.height - i.value.bottom / 2 + s, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, n = o.value.height / 2 + s, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = o.value.width - i.value.right + 8, n = o.value.height / 2 + s, a = "start"), {
+      const o = e.value.style.chart.percentage.fontSize / 3;
+      return _.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = l.value.width / 2, n = i.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = l.value.width / 2, n = l.value.height - i.value.bottom / 2 + o, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, n = l.value.height / 2 + o, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = l.value.width - i.value.right + 8, n = l.value.height / 2 + o, a = "start"), {
         x: t,
         y: n,
         textAnchor: a,
@@ -144,47 +144,54 @@ const Te = ["id"], Ue = {
       };
     }), I = b(!1);
     function ee(t) {
-      I.value = t, R.value += 1;
+      I.value = t, j.value += 1;
     }
     const F = b(!1);
-    function G() {
+    function E() {
       F.value = !F.value;
     }
-    async function pe({ scale: t = 2 } = {}) {
-      if (!x.value) return;
-      const { imageUri: n, base64: a } = await Ne({ domElement: x.value, base64: !0, img: !0, scale: t });
-      return { imageUri: n, base64: a };
+    async function fe({ scale: t = 2 } = {}) {
+      if (!w.value) return;
+      const { width: n, height: a } = w.value.getBoundingClientRect(), o = n / a, { imageUri: C, base64: h } = await Ne({ domElement: w.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: C,
+        base64: h,
+        title: e.value.style.chart.title.text,
+        width: n,
+        height: a,
+        aspectRatio: o
+      };
     }
     return re({
-      getImage: pe,
+      getImage: fe,
       generatePdf: J,
       generateImage: K,
-      toggleAnnotator: G,
+      toggleAnnotator: E,
       toggleFullscreen: ee
     }), (t, n) => (r(), c("div", {
       ref_key: "tiremarksChart",
-      ref: x,
-      class: j(`vue-ui-tiremarks ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: L(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      ref: w,
+      class: L(`vue-ui-tiremarks ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: G(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: U.value,
-      onMouseenter: n[0] || (n[0] = () => l(X)(!0)),
-      onMouseleave: n[1] || (n[1] = () => l(X)(!1))
+      onMouseenter: n[0] || (n[0] = () => s(X)(!0)),
+      onMouseleave: n[1] || (n[1] = () => s(X)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), z(l(ue), {
+      e.value.userOptions.buttons.annotator ? (r(), z(s(ue), {
         key: 0,
-        svgRef: l(H),
+        svgRef: s(H),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: F.value,
-        onClose: G
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
-      fe.value ? (r(), c("div", {
+        onClose: E
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
+      ge.value ? (r(), c("div", {
         key: 1,
         ref_key: "noTitle",
         ref: de,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : d("", !0),
+      }, null, 512)) : g("", !0),
       e.value.style.chart.title.text ? (r(), c("div", Ue, [
         (r(), z(ze, {
           key: `title_${B.value}`,
@@ -199,14 +206,14 @@ const Te = ["id"], Ue = {
             }
           }
         }, null, 8, ["config"]))
-      ])) : d("", !0),
-      e.value.userOptions.show && T.value && (l(D) || l(E)) ? (r(), z(l(ce), {
+      ])) : g("", !0),
+      e.value.userOptions.show && T.value && (s(D) || s(R)) ? (r(), z(s(ce), {
         ref: "details",
-        key: `user_options_${R.value}`,
+        key: `user_options_${j.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: l(Y),
-        isImaging: l(q),
+        isPrinting: s(Y),
+        isImaging: s(q),
         uid: U.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -214,124 +221,124 @@ const Te = ["id"], Ue = {
         hasXls: !1,
         isFullscreen: I.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: x.value,
+        chartElement: w.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: F.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         onToggleFullscreen: ee,
-        onGeneratePdf: l(J),
-        onGenerateImage: l(K),
-        onToggleAnnotator: G,
-        style: L({
-          visibility: l(D) ? l(E) ? "visible" : "hidden" : "visible"
+        onGeneratePdf: s(J),
+        onGenerateImage: s(K),
+        onToggleAnnotator: E,
+        style: G({
+          visibility: s(D) ? s(R) ? "visible" : "hidden" : "visible"
         })
-      }, me({ _: 2 }, [
+      }, ye({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: P(({ isOpen: a, color: s }) => [
-            g(t.$slots, "menuIcon", N(M({ isOpen: a, color: s })), void 0, !0)
+          fn: x(({ isOpen: a, color: o }) => [
+            p(t.$slots, "menuIcon", N(M({ isOpen: a, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: P(() => [
-            g(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: x(() => [
+            p(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: P(() => [
-            g(t.$slots, "optionImg", {}, void 0, !0)
+          fn: x(() => [
+            p(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: P(({ toggleFullscreen: a, isFullscreen: s }) => [
-            g(t.$slots, "optionFullscreen", N(M({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
+          fn: x(({ toggleFullscreen: a, isFullscreen: o }) => [
+            p(t.$slots, "optionFullscreen", N(M({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: P(({ toggleAnnotator: a, isAnnotator: s }) => [
-            g(t.$slots, "optionAnnotator", N(M({ toggleAnnotator: a, isAnnotator: s })), void 0, !0)
+          fn: x(({ toggleAnnotator: a, isAnnotator: o }) => [
+            p(t.$slots, "optionAnnotator", N(M({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
           ]),
           key: "4"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
       T.value ? (r(), c("svg", {
         key: 4,
         ref_key: "svgRef",
         ref: H,
-        xmlns: l(Pe),
-        class: j({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
-        viewBox: `0 0 ${o.value.width} ${o.value.height}`,
-        style: L(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+        xmlns: s(Pe),
+        class: L({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
+        viewBox: `0 0 ${l.value.width} ${l.value.height}`,
+        style: G(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        ye(l(ve)),
+        me(s(ve)),
         t.$slots["chart-background"] ? (r(), c("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: o.value.width,
-          height: o.value.height,
+          width: l.value.width,
+          height: l.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
-          g(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ge)) : d("", !0),
-        e.value.style.chart.layout.curved ? (r(), c("g", Le, [
-          (r(!0), c(ae, null, oe(Z.value, (a, s) => (r(), c("path", {
+          p(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Ee)) : g("", !0),
+        e.value.style.chart.layout.curved ? (r(), c("g", Ge, [
+          (r(!0), c(ae, null, oe(Z.value, (a, o) => (r(), c("path", {
             d: a.curve,
             "stroke-width": v.value.mark,
-            stroke: u.value >= s ? a.color : e.value.style.chart.layout.inactiveColor,
+            stroke: u.value >= o ? a.color : e.value.style.chart.layout.inactiveColor,
             "stroke-linecap": "round",
             fill: "none",
-            class: j({ "vue-ui-tick-animated": e.value.style.chart.animation.use && s <= u.value })
-          }, null, 10, je))), 256))
-        ])) : (r(), c("g", Re, [
-          (r(!0), c(ae, null, oe(Z.value, (a, s) => (r(), c("line", {
+            class: L({ "vue-ui-tick-animated": e.value.style.chart.animation.use && o <= u.value })
+          }, null, 10, Le))), 256))
+        ])) : (r(), c("g", je, [
+          (r(!0), c(ae, null, oe(Z.value, (a, o) => (r(), c("line", {
             x1: a.x1,
             y1: a.y1,
             x2: a.x2,
             y2: a.y2,
             "stroke-width": v.value.mark,
-            stroke: u.value >= s ? a.color : e.value.style.chart.layout.inactiveColor,
+            stroke: u.value >= o ? a.color : e.value.style.chart.layout.inactiveColor,
             "stroke-linecap": "round"
           }, null, 8, Be))), 256))
         ])),
         e.value.style.chart.percentage.show ? (r(), c("text", {
           key: 3,
-          x: _.value.x,
-          y: _.value.y,
-          "font-size": _.value.fontSize,
-          fill: e.value.style.chart.layout.ticks.gradient.show && e.value.style.chart.percentage.useGradientColor ? l(se)(e.value.style.chart.layout.activeColor, u.value / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.percentage.color,
-          "font-weight": _.value.bold ? "bold" : "normal",
-          "text-anchor": _.value.textAnchor
-        }, ke(l(xe)(
+          x: $.value.x,
+          y: $.value.y,
+          "font-size": $.value.fontSize,
+          fill: e.value.style.chart.layout.ticks.gradient.show && e.value.style.chart.percentage.useGradientColor ? s(se)(e.value.style.chart.layout.activeColor, u.value / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.percentage.color,
+          "font-weight": $.value.bold ? "bold" : "normal",
+          "text-anchor": $.value.textAnchor
+        }, ke(s(xe)(
           e.value.style.chart.percentage.formatter,
           u.value,
-          l(Ae)({
+          s(Ae)({
             v: u.value,
             s: "%",
             r: e.value.style.chart.percentage.rounding
           })
-        )), 9, Xe)) : d("", !0),
-        g(t.$slots, "svg", { svg: o.value }, void 0, !0)
-      ], 14, Ee)) : d("", !0),
+        )), 9, Xe)) : g("", !0),
+        p(t.$slots, "svg", { svg: l.value }, void 0, !0)
+      ], 14, Re)) : g("", !0),
       t.$slots.watermark ? (r(), c("div", De, [
-        g(t.$slots, "watermark", N(M({ isPrinting: l(Y) || l(q) })), void 0, !0)
-      ])) : d("", !0),
+        p(t.$slots, "watermark", N(M({ isPrinting: s(Y) || s(q) })), void 0, !0)
+      ])) : g("", !0),
       t.$slots.source ? (r(), c("div", He, [
-        g(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : d("", !0),
-      T.value ? d("", !0) : (r(), z(l(ie), {
+        p(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : g("", !0),
+      T.value ? g("", !0) : (r(), z(s(ie), {
         key: 7,
         config: {
           type: "tiremarks",
@@ -345,7 +352,7 @@ const Te = ["id"], Ue = {
       }, null, 8, ["config"]))
     ], 46, Te));
   }
-}, at = /* @__PURE__ */ Me(Ve, [["__scopeId", "data-v-887474d0"]]);
+}, at = /* @__PURE__ */ Me(Ve, [["__scopeId", "data-v-cb09d264"]]);
 export {
   at as default
 };