vue-data-ui 3.1.13 → 3.1.15

package/dist/{vue-ui-xy-canvas--NNe3yOn.js → vue-ui-xy-canvas-BFgpcPZ3.js}

@@ -1,17 +1,17 @@
-import { defineAsyncComponent as ee, ref as c, computed as L, useSlots as ea, onMounted as dl, watch as D, nextTick as hl, shallowRef as Me, onBeforeUnmount as la, createElementBlock as de, openBlock as S, unref as p, normalizeClass as aa, normalizeStyle as le, createCommentVNode as H, createElementVNode as Y, createBlock as F, createSlots as yl, withCtx as b, renderSlot as k, normalizeProps as V, guardReactiveProps as G, createVNode as fl, Teleport as ta, toDisplayString as Oe, resolveDynamicComponent as oa, mergeProps as ua, createTextVNode as gl } from "vue";
-import { u as ra, c as sa, a as na, p as Z, b as ia, C as xe, d as va, D as Re, k as ae, i as te, e as pl, a6 as ca, G as da, ag as ha, o as ya, f as fa, y as bl, v as ga, w as pa, z as ba, s as he, l as ma } from "./index-CdN9MkL7.js";
-import { d as xa, t as La, u as ka, c as Ca, a as ml, l as C, r as De, b as P, p as xl } from "./useResponsive-DfdjqQps.js";
-import { u as Ll } from "./useNestedProp-oNhYagej.js";
-import { u as wa } from "./usePrinter-CLVErK_G.js";
+import { defineAsyncComponent as ee, ref as c, computed as L, useSlots as ea, onMounted as dl, watch as D, nextTick as hl, shallowRef as Me, onBeforeUnmount as la, createElementBlock as de, openBlock as S, unref as p, normalizeClass as aa, normalizeStyle as le, createCommentVNode as H, createElementVNode as Y, createBlock as F, createSlots as yl, withCtx as m, renderSlot as k, normalizeProps as V, guardReactiveProps as G, createVNode as fl, Teleport as ta, toDisplayString as Oe, resolveDynamicComponent as oa, mergeProps as ua, createTextVNode as gl } from "vue";
+import { u as sa, c as ra, a as na, p as Z, b as ia, C as xe, d as va, D as Re, k as ae, i as te, e as pl, a7 as ca, G as da, ah as ha, o as ya, f as fa, y as ml, v as ga, w as pa, z as ma, s as he, l as ba } from "./index-BS0jZusk.js";
+import { d as xa, t as La, u as ka, c as Ca, a as bl, l as C, r as De, b as P, p as xl } from "./useResponsive-DfdjqQps.js";
+import { u as Ll } from "./useNestedProp-BMfS1Wmb.js";
+import { u as wa } from "./usePrinter-CsKq2kgt.js";
 import { u as Sa } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as za } from "./useChartAccessibility-9icAAmYg.js";
-import $a from "./Legend-CC3LegoH.js";
-import Ta from "./Title-BKsDkvCV.js";
-import { S as Ia } from "./Slicer-C7BMIgYA.js";
-import Ma from "./vue-ui-accordion-BoGANFKn.js";
+import $a from "./Legend-C3Kvktr3.js";
+import Ta from "./Title-DRhv9bCG.js";
+import { S as Ia } from "./Slicer-BMgEyKMg.js";
+import Ma from "./vue-ui-accordion-CEzzDwYU.js";
 import { u as Oa } from "./useTimeLabels-BGFjWgrv.js";
-import Ra from "./img-CVbbqgGH.js";
-import Da from "./BaseIcon-CBGEVS_a.js";
+import Ra from "./img-CRdZ0dzP.js";
+import Da from "./BaseIcon-Dj9csjZa.js";
 import { _ as Fa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
   key: 3,
@@ -34,7 +34,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
   },
   emits: ["selectLegend"],
   setup(Fe, { expose: kl, emit: Cl }) {
-    const wl = ee(() => import("./DataTable-DQRJv8EE.js")), Sl = ee(() => import("./NonSvgPenAndPaper-CmIOGkib.js")), zl = ee(() => import("./vue-ui-skeleton-VW0h-sRm.js")), $l = ee(() => import("./Tooltip-BA5KTZ2e.js")), Tl = ee(() => import("./UserOptions-usqWO4wC.js")), Il = ee(() => import("./BaseDraggableDialog-R8VpARJu.js")), { vue_ui_xy_canvas: Ml } = ra(), g = Fe, _ = c(sa()), I = c(null), oe = c(null), n = c(null), y = c(1), E = c(1), ye = c(!1), d = c(null), fe = c(""), Pe = c(null), $ = c([]), j = c(1), B = c(!0), q = c(!0), Le = c(null), Ee = c(0), Ae = c(0), ue = c(!1), Ne = c(null), He = c(null), Ye = c(null), _e = c(null), ke = c(0), Ce = c(0), we = c(0), M = c(null), Be = c(!1), re = c(null), Se = c(null), ge = L(() => !!g.dataset && g.dataset.length), Ol = Cl, Rl = ea();
+    const wl = ee(() => import("./DataTable-DAc2s9Wi.js")), Sl = ee(() => import("./NonSvgPenAndPaper-yA6HCA0i.js")), zl = ee(() => import("./vue-ui-skeleton-DZN6Q2RW.js")), $l = ee(() => import("./Tooltip-B46L8jx5.js")), Tl = ee(() => import("./UserOptions-CmhyvH7T.js")), Il = ee(() => import("./BaseDraggableDialog-TS2ANP8W.js")), { vue_ui_xy_canvas: Ml } = sa(), g = Fe, _ = c(ra()), I = c(null), oe = c(null), n = c(null), y = c(1), E = c(1), ye = c(!1), d = c(null), fe = c(""), Pe = c(null), $ = c([]), j = c(1), B = c(!0), q = c(!0), Le = c(null), Ee = c(0), Ae = c(0), ue = c(!1), Ne = c(null), He = c(null), Ye = c(null), _e = c(null), ke = c(0), Ce = c(0), we = c(0), M = c(null), Be = c(!1), se = c(null), Se = c(null), ge = L(() => !!g.dataset && g.dataset.length), Ol = Cl, Rl = ea();
     dl(() => {
       Rl["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
     });
@@ -57,7 +57,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       } : a = e, g.config && xe(g.config, "style.chart.scale.min") ? a.style.chart.scale.min = g.config.style.chart.scale.min : a.style.chart.scale.min = null, g.config && xe(g.config, "style.chart.scale.max") ? a.style.chart.scale.max = g.config.style.chart.scale.max : a.style.chart.scale.max = null, g.config && xe(g.config, "style.chart.zoom.startIndex") ? a.style.chart.zoom.startIndex = g.config.style.chart.zoom.startIndex : a.style.chart.zoom.startIndex = null, g.config && xe(g.config, "style.chart.zoom.endIndex") ? a.style.chart.zoom.endIndex = g.config.style.chart.zoom.endIndex : a.style.chart.zoom.endIndex = null, a;
     }
     D(() => g.config, (e) => {
-      l.value = Xe(), ze.value = !l.value.userOptions.showOnChartHover, $e(), ke.value += 1, Ce.value += 1, we.value += 1, r.value.showTable = l.value.table.show, r.value.showDataLabels = l.value.style.chart.dataLabels.show, r.value.stacked = l.value.style.chart.stacked, r.value.showTooltip = l.value.style.chart.tooltip.show;
+      l.value = Xe(), ze.value = !l.value.userOptions.showOnChartHover, $e(), ke.value += 1, Ce.value += 1, we.value += 1, s.value.showTable = l.value.table.show, s.value.showDataLabels = l.value.style.chart.dataLabels.show, s.value.stacked = l.value.style.chart.stacked, s.value.showTooltip = l.value.style.chart.tooltip.show;
     }, { deep: !0 }), D(() => g.dataset, () => {
       $e(), ke.value += 1, Ce.value += 1, we.value += 1;
     }, { deep: !0 });
@@ -65,7 +65,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       elementId: `xy_canvas_${_.value}`,
       fileName: l.value.style.chart.title.text || "vue-ui-xy-canvas",
       options: l.value.userOptions.print
-    }), r = c({
+    }), s = c({
       showTable: l.value.table.show,
       showDataLabels: l.value.style.chart.dataLabels.show,
       stacked: l.value.style.chart.stacked,
@@ -91,7 +91,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
     function Qe(e, a) {
       return e / a;
     }
-    function Dl({ hasAutoScale: e, series: a, min: o, max: s, scale: i, yOffset: x, individualHeight: v, stackIndex: f = null }) {
+    function Dl({ hasAutoScale: e, series: a, min: o, max: r, scale: i, yOffset: x, individualHeight: v, stackIndex: f = null }) {
       return a.map((W, z) => {
         const N = i.min < 0 ? Math.abs(i.min) : 0, X = Qe(W + N, N + i.max);
         let ve, ce;
@@ -104,14 +104,14 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         };
       });
     }
-    const m = L(() => {
-      const e = l.value.style.chart.scale.min !== null ? l.value.style.chart.scale.min : Math.min(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), a = l.value.style.chart.scale.max !== null ? l.value.style.chart.scale.max : Math.max(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), o = Re(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, l.value.style.chart.scale.ticks), s = o.min < 0 ? Math.abs(o.min) : 0, i = t.value.bottom - t.value.height * (s / (o.max + s)), x = o.ticks.map((v) => ({
-        y: t.value.bottom - t.value.height * ((v + s) / (o.max + s)),
+    const b = L(() => {
+      const e = l.value.style.chart.scale.min !== null ? l.value.style.chart.scale.min : Math.min(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), a = l.value.style.chart.scale.max !== null ? l.value.style.chart.scale.max : Math.max(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), o = Re(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, l.value.style.chart.scale.ticks), r = o.min < 0 ? Math.abs(o.min) : 0, i = t.value.bottom - t.value.height * (r / (o.max + r)), x = o.ticks.map((v) => ({
+        y: t.value.bottom - t.value.height * ((v + r) / (o.max + r)),
         x: t.value.left - 8,
         value: v
       }));
       return {
-        absoluteMin: s,
+        absoluteMin: r,
         max: a,
         min: e,
         scale: o,
@@ -152,36 +152,36 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       ...e,
       series: e.series.slice(u.value.start, u.value.end)
     })).map((e, a) => {
-      let o = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, s = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
-      o === s && (o = o >= 0 ? s - 1 : o, s = s >= 0 ? s : o + 1), e.series.filter((R) => ![null, void 0].includes(R)).map((R) => (R - o) / (s - o));
+      let o = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, r = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
+      o === r && (o = o >= 0 ? r - 1 : o, r = r >= 0 ? r : o + 1), e.series.filter((R) => ![null, void 0].includes(R)).map((R) => (R - o) / (r - o));
       const i = {
         valueMin: o,
-        valueMax: s
+        valueMax: r
       }, x = e.scaleSteps || l.value.style.chart.scale.ticks;
       let v;
       e.autoScaling ? v = Re(i.valueMin, i.valueMax, x) : v = Re(i.valueMin < 0 ? i.valueMin : 0, i.valueMax <= 0 ? 0 : i.valueMax, x);
-      const f = r.value.stacked ? t.value.height * (1 - e.cumulatedStackRatio) : 0, W = r.value.stacked ? t.value.height / l.value.style.chart.stackGap : 0, z = r.value.stacked ? t.value.height * e.stackRatio - W : t.value.height, N = v.min < 0 ? Math.abs(v.min) : 0;
+      const f = s.value.stacked ? t.value.height * (1 - e.cumulatedStackRatio) : 0, W = s.value.stacked ? t.value.height / l.value.style.chart.stackGap : 0, z = s.value.stacked ? t.value.height * e.stackRatio - W : t.value.height, N = v.min < 0 ? Math.abs(v.min) : 0;
       let X;
-      e.autoScaling && r.value.stacked && s <= 0 ? X = t.value.bottom - f - z : X = t.value.bottom - f - z * (N / (v.max + N));
+      e.autoScaling && s.value.stacked && r <= 0 ? X = t.value.bottom - f - z : X = t.value.bottom - f - z * (N / (v.max + N));
       const ve = v.ticks.map((R, Ql) => ({
         y: t.value.bottom - f - z * (Ql / (v.ticks.length - 1)),
         x: t.value.left - 8,
         value: R
       })), ce = Dl({
-        hasAutoScale: r.value.stacked && e.autoScaling,
+        hasAutoScale: s.value.stacked && e.autoScaling,
         series: e.series,
-        min: r.value.stacked ? o : m.value.min,
-        max: r.value.stacked ? s : m.value.max,
-        scale: r.value.stacked ? v : m.value.scale,
+        min: s.value.stacked ? o : b.value.min,
+        max: s.value.stacked ? r : b.value.max,
+        scale: s.value.stacked ? v : b.value.scale,
         yOffset: f,
         individualHeight: z,
-        stackIndex: r.value.stacked ? a : null
+        stackIndex: s.value.stacked ? a : null
       });
       return {
         ...e,
         coordinatesLine: ce,
         min: o,
-        max: s,
+        max: r,
         localScale: v,
         localZero: X,
         localMin: N,
@@ -199,8 +199,8 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
     const ll = c(null);
     async function al() {
       await hl(), await hl();
-      const { startIndex: e, endIndex: a } = l.value.style.chart.zoom, o = ll.value, s = T.value;
-      u.value = { start: 0, end: s }, (e != null || a != null) && o ? (e != null ? o.setStartValue(e) : (u.value.start = 0, o.setStartValue(0)), a != null ? o.setEndValue(Pl(a + 1)) : (u.value.end = s, o.setEndValue(s))) : (u.value = { start: 0, end: s }, Ee.value += 1);
+      const { startIndex: e, endIndex: a } = l.value.style.chart.zoom, o = ll.value, r = T.value;
+      u.value = { start: 0, end: r }, (e != null || a != null) && o ? (e != null ? o.setStartValue(e) : (u.value.start = 0, o.setStartValue(0)), a != null ? o.setEndValue(Pl(a + 1)) : (u.value.end = r, o.setEndValue(r))) : (u.value = { start: 0, end: r }, Ee.value += 1);
     }
     function Pl(e) {
       const a = T.value;
@@ -211,10 +211,10 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       if (!O.value)
         return;
       const e = oe.value.offsetWidth, a = oe.value.offsetHeight;
-      O.value.width = e * j.value * 2, O.value.height = a * j.value * 2, y.value = e * j.value * 2, E.value = a * j.value * 2, n.value.scale(j.value, j.value), se();
+      O.value.width = e * j.value * 2, O.value.height = a * j.value * 2, y.value = e * j.value * 2, E.value = a * j.value * 2, n.value.scale(j.value, j.value), re();
     }
     function Nl() {
-      if (n.value.clearRect(0, 0, 1e4, 1e4), n.value.fillStyle = l.value.style.chart.backgroundColor, n.value.fillRect(0, 0, t.value.canvasWidth, t.value.canvasHeight), r.value.stacked)
+      if (n.value.clearRect(0, 0, 1e4, 1e4), n.value.fillStyle = l.value.style.chart.backgroundColor, n.value.fillRect(0, 0, t.value.canvasWidth, t.value.canvasHeight), s.value.stacked)
         l.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < l.value.style.chart.grid.y.verticalLines.hideUnderXLength ? h.value.forEach((e) => {
           for (let a = 0; a < u.value.end - u.value.start + 1; a += 1)
             C(
@@ -351,21 +351,21 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
                 color: l.value.style.chart.grid.y.verticalLines.color
               }
             );
-        l.value.style.chart.grid.x.horizontalLines.show && (l.value.style.chart.grid.x.horizontalLines.alternate ? m.value.yLabels.forEach((e, a) => {
-          a < m.value.yLabels.length - 1 && De(
+        l.value.style.chart.grid.x.horizontalLines.show && (l.value.style.chart.grid.x.horizontalLines.alternate ? b.value.yLabels.forEach((e, a) => {
+          a < b.value.yLabels.length - 1 && De(
             n.value,
             [
               { x: t.value.left, y: e.y },
               { x: t.value.right, y: e.y },
-              { x: t.value.right, y: m.value.yLabels[a + 1].y },
-              { x: t.value.left, y: m.value.yLabels[a + 1].y }
+              { x: t.value.right, y: b.value.yLabels[a + 1].y },
+              { x: t.value.left, y: b.value.yLabels[a + 1].y }
             ],
             {
               fillColor: a % 2 === 0 ? "transparent" : he(l.value.style.chart.grid.x.horizontalLines.color, l.value.style.chart.grid.x.horizontalLines.opacity),
               strokeColor: "transparent"
             }
           );
-        }) : m.value.yLabels.forEach((e) => {
+        }) : b.value.yLabels.forEach((e) => {
           C(
             n.value,
             [
@@ -399,8 +399,8 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         ), l.value.style.chart.grid.zeroLine.show && C(
           n.value,
           [
-            { x: t.value.left, y: m.value.zero },
-            { x: t.value.right, y: m.value.zero }
+            { x: t.value.left, y: b.value.zero },
+            { x: t.value.right, y: b.value.zero }
           ],
           {
             color: l.value.style.chart.grid.zeroLine.color,
@@ -434,7 +434,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
     function Hl(e) {
       for (let a = 0; a < e.coordinatesLine.length; a += 1) {
         const o = (d.value === a ? y.value / 150 : l.value.style.chart.line.plots.show ? y.value / 200 : 0) * l.value.style.chart.line.plots.radiusRatio;
-        ml(
+        bl(
           n.value,
           { x: e.coordinatesLine[a].x, y: e.coordinatesLine[a].y },
           o,
@@ -471,7 +471,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       });
     }
     function _l() {
-      l.value.style.chart.grid.y.axisLabels.show && (r.value.stacked ? h.value.forEach((e) => {
+      l.value.style.chart.grid.y.axisLabels.show && (s.value.stacked ? h.value.forEach((e) => {
         e.localYLabels.forEach((a, o) => {
           P(
             n.value,
@@ -496,7 +496,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
             }
           );
         });
-      }) : m.value.yLabels.forEach((e, a) => {
+      }) : b.value.yLabels.forEach((e, a) => {
         P(
           n.value,
           ae(
@@ -602,19 +602,19 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
             n.value,
             [
               {
-                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)),
-                y: r.value.stacked ? e.localZero : m.value.zero
+                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (s.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)),
+                y: s.value.stacked ? e.localZero : b.value.zero
               },
               {
-                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.8 / (r.value.stacked ? 1 : w.value.length),
-                y: r.value.stacked ? e.localZero : m.value.zero
+                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (s.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.8 / (s.value.stacked ? 1 : w.value.length),
+                y: s.value.stacked ? e.localZero : b.value.zero
               },
               {
-                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.8 / (r.value.stacked ? 1 : w.value.length),
+                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (s.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.8 / (s.value.stacked ? 1 : w.value.length),
                 y: e.coordinatesLine[o].y
               },
               {
-                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)),
+                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (s.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)),
                 y: e.coordinatesLine[o].y
               }
             ],
@@ -628,15 +628,15 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
                 },
                 end: {
                   x: e.coordinatesLine[o].x,
-                  y: r.value.stacked ? e.localZero : m.value.zero
+                  y: s.value.stacked ? e.localZero : b.value.zero
                 },
                 stops: [
                   { offset: 0, color: e.color },
-                  { offset: 1, color: l.value.style.chart.bar.gradient.show ? ma(e.color, 0.5) : e.color }
+                  { offset: 1, color: l.value.style.chart.bar.gradient.show ? ba(e.color, 0.5) : e.color }
                 ]
               }
             }
-          ), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && P(
+          ), s.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && P(
             n.value,
             ae(
               l.value.style.chart.dataLabels.formatter,
@@ -649,8 +649,8 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
               }),
               { datapoint: e.coordinatesLine[o], seriesIndex: o }
             ),
-            t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.4 / (r.value.stacked ? 1 : w.value.length),
-            (e.coordinatesLine[o].value < 0 ? r.value.stacked ? e.localZero : m.value.zero : e.coordinatesLine[o].y) + l.value.style.chart.dataLabels.offsetY,
+            t.value.left + t.value.slot * o + t.value.slot / 10 + (s.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.4 / (s.value.stacked ? 1 : w.value.length),
+            (e.coordinatesLine[o].value < 0 ? s.value.stacked ? e.localZero : b.value.zero : e.coordinatesLine[o].y) + l.value.style.chart.dataLabels.offsetY,
             {
               align: "center",
               font: `${Math.round(y.value / 40 * l.value.style.chart.dataLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
@@ -662,7 +662,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       });
     }
     function Vl(e) {
-      e.useArea ? r.value.stacked ? xl(
+      e.useArea ? s.value.stacked ? xl(
         n.value,
         [{ x: e.coordinatesLine[0].x, y: e.localZero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: e.localZero }],
         {
@@ -671,7 +671,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         }
       ) : xl(
         n.value,
-        [{ x: e.coordinatesLine[0].x, y: m.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: m.value.zero }],
+        [{ x: e.coordinatesLine[0].x, y: b.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: b.value.zero }],
         {
           fillColor: he(e.color, l.value.style.chart.area.opacity),
           strokeColor: "transparent"
@@ -696,13 +696,13 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         );
       });
     }
-    function se() {
-      Nl(), B.value ? (d.value !== null && l.value.style.chart.selector.show && tl(), Xl(), r.value.stacked && l.value.style.chart.grid.x.showAxis && Gl(), El.value.forEach((e) => {
-        (e.type === "line" || !e.type) && Vl(e), q.value && (Hl(e), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Bl(e));
+    function re() {
+      Nl(), B.value ? (d.value !== null && l.value.style.chart.selector.show && tl(), Xl(), s.value.stacked && l.value.style.chart.grid.x.showAxis && Gl(), El.value.forEach((e) => {
+        (e.type === "line" || !e.type) && Vl(e), q.value && (Hl(e), s.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Bl(e));
       }), Le.value = Ca(O.value)) : (Le.value && (n.value.clearRect(0, 0, 1e4, 1e4), n.value.drawImage(Le.value, 0, 0)), d.value !== null && l.value.style.chart.selector.show && tl(), d.value !== null && h.value.forEach((e) => {
         if (e.type === "line" || !e.type || e.type === "plot") {
           if (!e.coordinatesLine[d.value]) return;
-          e.coordinatesLine[d.value].x !== void 0 && e.coordinatesLine[d.value].y !== void 0 && ml(
+          e.coordinatesLine[d.value].x !== void 0 && e.coordinatesLine[d.value].y !== void 0 && bl(
             n.value,
             {
               x: e.coordinatesLine[d.value].x,
@@ -726,16 +726,16 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       return { y: a, value: o };
     }
     function Zl(e) {
-      const { left: a, top: o } = O.value.getBoundingClientRect(), s = e.clientX - a;
-      if (M.value = (e.clientY - o) * 2, (M.value < t.value.top || M.value > t.value.bottom) && (M.value = null), s * 2 < t.value.left || s * 2 > t.value.right) {
+      const { left: a, top: o } = O.value.getBoundingClientRect(), r = e.clientX - a;
+      if (M.value = (e.clientY - o) * 2, (M.value < t.value.top || M.value > t.value.bottom) && (M.value = null), r * 2 < t.value.left || r * 2 > t.value.right) {
         ye.value = !1, d.value = null;
         return;
       }
-      const i = s * 2 - t.value.left;
+      const i = r * 2 - t.value.left;
       if (d.value = Math.floor(i / t.value.slot), ye.value = !0, !q.value) return;
       let x = "";
       const v = l.value.style.chart.tooltip.customFormat;
-      bl(v) && ba(() => v({
+      ml(v) && ma(() => v({
         seriesIndex: d.value,
         datapoint: h.value.map((f) => ({
           shape: f.shape || null,
@@ -762,18 +762,18 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
     D(() => d.value, (e) => {
       pe();
     }), D(() => u.value, (e) => {
-      B.value = !0, se();
+      B.value = !0, re();
     }, {
       deep: !0
-    }), D(() => r.value.showDataLabels, (e) => {
-      B.value = !0, se();
+    }), D(() => s.value.showDataLabels, (e) => {
+      B.value = !0, re();
     }), D(() => M.value, (e) => {
-      e && se();
-    }), D(() => r.value.stacked, (e) => {
+      e && re();
+    }), D(() => s.value.stacked, (e) => {
       B.value = !0, q.value = !0, pe();
     });
     function jl() {
-      ye.value = !1, d.value = null, fe.value = "", M.value = null, se();
+      ye.value = !1, d.value = null, fe.value = "", M.value = null, re();
     }
     const A = Me(null), K = Me(null), Q = Me(null);
     dl(() => {
@@ -829,7 +829,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       fontSize: l.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: l.value.style.chart.legend.bold ? "bold" : ""
-    })), be = L(() => {
+    })), me = L(() => {
       const e = [""].concat(h.value.map((i) => i.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>');
       let a = [];
       for (let i = 0; i < T.value; i += 1) {
@@ -848,9 +848,9 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
           outline: l.value.table.td.outline
         },
         breakpoint: l.value.table.responsiveBreakpoint
-      }, s = [l.value.table.columnNames.period].concat(h.value.map((i) => i.name)).concat(l.value.table.columnNames.total);
-      return { head: e, body: a.slice(0, u.value.end - u.value.start), config: o, colNames: s };
-    }), rl = L(() => {
+      }, r = [l.value.table.columnNames.period].concat(h.value.map((i) => i.name)).concat(l.value.table.columnNames.total);
+      return { head: e, body: a.slice(0, u.value.end - u.value.start), config: o, colNames: r };
+    }), sl = L(() => {
       if (h.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
       const e = h.value.map((o) => ({
         label: o.name,
@@ -858,50 +858,50 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         type: o.type
       })), a = [];
       for (let o = u.value.start; o < u.value.end; o += 1) {
-        const s = [l.value.style.chart.grid.y.timeLabels.values[o] ? U.value[o].text : o + 1];
+        const r = [l.value.style.chart.grid.y.timeLabels.values[o] ? U.value[o].text : o + 1];
         h.value.forEach((i) => {
-          s.push(Number((i.series[o] || 0).toFixed(l.value.table.rounding)));
-        }), a.push(s);
+          r.push(Number((i.series[o] || 0).toFixed(l.value.table.rounding)));
+        }), a.push(r);
       }
       return { head: e, body: a };
     });
     function Te(e = null) {
-      const a = [[l.value.style.chart.title.text], [l.value.style.chart.title.subtitle.text], [""]], o = ["", ...rl.value.head.map((v) => v.label)], s = rl.value.body, i = a.concat([o]).concat(s), x = ga(i);
+      const a = [[l.value.style.chart.title.text], [l.value.style.chart.title.subtitle.text], [""]], o = ["", ...sl.value.head.map((v) => v.label)], r = sl.value.body, i = a.concat([o]).concat(r), x = ga(i);
       e ? e(x) : pa({ csvContent: x, title: l.value.style.chart.title.text || "vue-ui-xy-canvas" });
     }
     function Jl() {
       return h.value;
     }
-    function sl() {
-      r.value.showTable = !r.value.showTable;
+    function rl() {
+      s.value.showTable = !s.value.showTable;
     }
     function nl() {
-      r.value.showDataLabels = !r.value.showDataLabels;
+      s.value.showDataLabels = !s.value.showDataLabels;
     }
     function il() {
-      r.value.stacked = !r.value.stacked;
+      s.value.stacked = !s.value.stacked;
     }
     function vl() {
-      r.value.showTooltip = !r.value.showTooltip;
+      s.value.showTooltip = !s.value.showTooltip;
     }
-    const me = c(!1);
+    const be = c(!1);
     function Ie() {
-      me.value = !me.value;
+      be.value = !be.value;
     }
     async function Kl({ scale: e = 2 } = {}) {
       if (!I.value) return;
-      const { width: a, height: o } = I.value.getBoundingClientRect(), s = a / o, { imageUri: i, base64: x } = await Ra({ domElement: I.value, base64: !0, img: !0, scale: e });
+      const { width: a, height: o } = I.value.getBoundingClientRect(), r = a / o, { imageUri: i, base64: x } = await Ra({ domElement: I.value, base64: !0, img: !0, scale: e });
       return {
         imageUri: i,
         base64: x,
         title: l.value.style.chart.title.text,
         width: a,
         height: o,
-        aspectRatio: s
+        aspectRatio: r
       };
     }
     const ie = L(() => {
-      const e = l.value.table.useDialog && !l.value.table.show, a = r.value.showTable;
+      const e = l.value.table.useDialog && !l.value.table.show, a = s.value.showTable;
       return {
         component: e ? Il : Ma,
         title: `${l.value.style.chart.title.text}${l.value.style.chart.title.subtitle.text ? `: ${l.value.style.chart.title.subtitle.text}` : ""}`,
@@ -930,11 +930,11 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         }
       };
     });
-    D(() => r.value.showTable, (e) => {
-      l.value.table.show || (e && l.value.table.useDialog && re.value ? re.value.open() : "close" in re.value && re.value.close());
+    D(() => s.value.showTable, (e) => {
+      l.value.table.show || (e && l.value.table.useDialog && se.value ? se.value.open() : "close" in se.value && se.value.close());
     });
     function cl() {
-      r.value.showTable = !1, Se.value && Se.value.setTableIconState(!1);
+      s.value.showTable = !1, Se.value && Se.value.setTableIconState(!1);
     }
     return kl({
       getData: Jl,
@@ -942,7 +942,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       generateCsv: Te,
       generatePdf: je,
       generateImage: qe,
-      toggleTable: sl,
+      toggleTable: rl,
       toggleLabels: nl,
       toggleStack: il,
       toggleTooltip: vl,
@@ -998,13 +998,13 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         hasFullscreen: l.value.userOptions.buttons.fullscreen,
         hasTable: u.value.end - u.value.start <= 730 && l.value.userOptions.buttons.table,
         isFullscreen: ue.value,
-        isTooltip: r.value.showTooltip,
-        isStacked: r.value.stacked,
+        isTooltip: s.value.showTooltip,
+        isStacked: s.value.stacked,
         titles: { ...l.value.userOptions.buttonTitles },
         chartElement: I.value,
         position: l.value.userOptions.position,
         hasAnnotator: l.value.userOptions.buttons.annotator,
-        isAnnotation: me.value,
+        isAnnotation: be.value,
         callbacks: l.value.userOptions.callbacks,
         printScale: l.value.userOptions.print.scale,
         tableDialog: l.value.table.useDialog,
@@ -1012,7 +1012,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         onGeneratePdf: p(je),
         onGenerateCsv: Te,
         onGenerateImage: p(qe),
-        onToggleTable: sl,
+        onToggleTable: rl,
         onToggleLabels: nl,
         onToggleStack: il,
         onToggleTooltip: vl,
@@ -1023,71 +1023,71 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       }, yl({ _: 2 }, [
         e.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: b(({ isOpen: o, color: s }) => [
-            k(e.$slots, "menuIcon", V(G({ isOpen: o, color: s })), void 0, !0)
+          fn: m(({ isOpen: o, color: r }) => [
+            k(e.$slots, "menuIcon", V(G({ isOpen: o, color: r })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: b(() => [
+          fn: m(() => [
             k(e.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: b(() => [
+          fn: m(() => [
             k(e.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: b(() => [
+          fn: m(() => [
             k(e.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.$slots.optionImg ? {
           name: "optionImg",
-          fn: b(() => [
+          fn: m(() => [
             k(e.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.$slots.optionTable ? {
           name: "optionTable",
-          fn: b(() => [
+          fn: m(() => [
             k(e.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         e.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: b(() => [
+          fn: m(() => [
             k(e.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         e.$slots.optionStack ? {
           name: "optionStack",
-          fn: b(() => [
+          fn: m(() => [
             k(e.$slots, "optionStack", {}, void 0, !0)
           ]),
           key: "7"
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: b(({ toggleFullscreen: o, isFullscreen: s }) => [
-            k(e.$slots, "optionFullscreen", V(G({ toggleFullscreen: o, isFullscreen: s })), void 0, !0)
+          fn: m(({ toggleFullscreen: o, isFullscreen: r }) => [
+            k(e.$slots, "optionFullscreen", V(G({ toggleFullscreen: o, isFullscreen: r })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: b(({ toggleAnnotator: o, isAnnotator: s }) => [
-            k(e.$slots, "optionAnnotator", V(G({ toggleAnnotator: o, isAnnotator: s })), void 0, !0)
+          fn: m(({ toggleAnnotator: o, isAnnotator: r }) => [
+            k(e.$slots, "optionAnnotator", V(G({ toggleAnnotator: o, isAnnotator: r })), void 0, !0)
           ]),
           key: "9"
         } : void 0
@@ -1124,7 +1124,7 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
           }
         }, null, 8, ["config"])),
         fl(p($l), {
-          show: r.value.showTooltip && ye.value,
+          show: s.value.showTooltip && ye.value,
           backgroundColor: l.value.style.chart.tooltip.backgroundColor,
           color: l.value.style.chart.tooltip.color,
           fontSize: l.value.style.chart.tooltip.fontSize,
@@ -1137,16 +1137,16 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
           content: fe.value,
           isFullscreen: ue.value,
           backgroundOpacity: l.value.style.chart.tooltip.backgroundOpacity,
-          isCustom: p(bl)(l.value.style.chart.tooltip.customFormat),
+          isCustom: p(ml)(l.value.style.chart.tooltip.customFormat),
           smooth: l.value.style.chart.tooltip.smooth,
           backdropFilter: l.value.style.chart.tooltip.backdropFilter,
           smoothForce: l.value.style.chart.tooltip.smoothForce,
           smoothSnapThreshold: l.value.style.chart.tooltip.smoothSnapThreshold
         }, {
-          "tooltip-before": b(() => [
+          "tooltip-before": m(() => [
             k(e.$slots, "tooltip-before", V(G({ ...Pe.value })), void 0, !0)
           ]),
-          "tooltip-after": b(() => [
+          "tooltip-after": m(() => [
             k(e.$slots, "tooltip-after", V(G({ ...Pe.value })), void 0, !0)
           ]),
           _: 3
@@ -1183,13 +1183,15 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
           refreshEndPoint: l.value.style.chart.zoom.endIndex !== null ? l.value.style.chart.zoom.endIndex + 1 : T.value,
           enableRangeHandles: l.value.style.chart.zoom.enableRangeHandles,
           enableSelectionDrag: l.value.style.chart.zoom.enableSelectionDrag,
+          focusOnDrag: l.value.style.chart.zoom.focusOnDrag,
+          focusRangeRatio: l.value.style.chart.zoom.focusRangeRatio,
           onReset: el
         }, {
-          "reset-action": b(({ reset: o }) => [
+          "reset-action": m(({ reset: o }) => [
             k(e.$slots, "reset-action", V(G({ reset: o })), void 0, !0)
           ]),
           _: 3
-        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"])) : H("", !0)
+        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag", "focusOnDrag", "focusRangeRatio"])) : H("", !0)
       ], 4),
       Y("div", {
         id: `legend-bottom-${_.value}`
@@ -1208,10 +1210,10 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
             key: `legend_${we.value}`,
             onClickMarker: a[3] || (a[3] = ({ i: o }) => ol(o))
           }, {
-            item: b(({ legend: o, index: s }) => [
+            item: m(({ legend: o, index: r }) => [
               Y("div", {
                 onClick: (i) => o.segregate(),
-                style: le(`opacity:${$.value.includes(s) ? 0.5 : 1}`)
+                style: le(`opacity:${$.value.includes(r) ? 0.5 : 1}`)
               }, Oe(o.name), 13, Na)
             ]),
             _: 1
@@ -1234,24 +1236,24 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       ], 512)) : H("", !0),
       ge.value && l.value.userOptions.buttons.table ? (S(), F(oa(ie.value.component), ua({ key: 5 }, ie.value.props, {
         ref_key: "tableUnit",
-        ref: re,
+        ref: se,
         onClose: cl
       }), yl({
-        content: b(() => [
+        content: m(() => [
           (S(), F(p(wl), {
             key: `table_${Ce.value}`,
-            colNames: be.value.colNames,
-            head: be.value.head,
-            body: be.value.body,
-            config: be.value.config,
+            colNames: me.value.colNames,
+            head: me.value.head,
+            body: me.value.body,
+            config: me.value.config,
             title: l.value.table.useDialog ? "" : ie.value.title,
             withCloseButton: !l.value.table.useDialog,
             onClose: cl
           }, {
-            th: b(({ th: o }) => [
+            th: m(({ th: o }) => [
               Y("div", { innerHTML: o }, null, 8, Ya)
             ]),
-            td: b(({ td: o }) => [
+            td: m(({ td: o }) => [
               gl(Oe(o), 1)
             ]),
             _: 1
@@ -1261,14 +1263,14 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
       }, [
         l.value.table.useDialog ? {
           name: "title",
-          fn: b(() => [
+          fn: m(() => [
             gl(Oe(ie.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         l.value.table.useDialog ? {
           name: "actions",
-          fn: b(() => [
+          fn: m(() => [
             Y("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
@@ -1288,12 +1290,12 @@ const Pa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
         parent: I.value,
         backgroundColor: l.value.style.chart.backgroundColor,
         color: l.value.style.chart.color,
-        active: me.value,
+        active: be.value,
         onClose: Ie
       }, null, 8, ["parent", "backgroundColor", "color", "active"])) : H("", !0)
     ], 46, Pa));
   }
-}, tt = /* @__PURE__ */ Fa(_a, [["__scopeId", "data-v-0db6c29f"]]);
+}, tt = /* @__PURE__ */ Fa(_a, [["__scopeId", "data-v-c6565152"]]);
 export {
   tt as default
 };