vue-data-ui 2.9.7-beta.0 → 2.9.7-beta.1

package/dist/{vue-ui-ridgeline-BZqkRymO.js → vue-ui-ridgeline-D1GUsvXX.js}

@@ -1,20 +1,20 @@
-import { useCssVars as xt, ref as v, reactive as bt, computed as k, onUnmounted as kt, createBlock as T, openBlock as i, Teleport as wt, createElementBlock as u, createCommentVNode as y, withModifiers as W, normalizeStyle as P, createElementVNode as h, unref as g, renderSlot as b, createVNode as qe, nextTick as Je, onMounted as Ct, onBeforeUnmount as $t, watch as He, normalizeClass as Re, createSlots as Be, withCtx as w, normalizeProps as de, guardReactiveProps as ve, Fragment as $, renderList as _, mergeProps as We, toDisplayString as G, createTextVNode as Ye } from "vue";
-import { X as Ke, u as At, c as Ve, o as St, e as $e, g as Ue, b as zt, d as Mt, p as he, ak as Ge, a7 as Lt, R as _t, G as Tt, i as fe, f as ge, t as Ot, a as Et, q as Pt, r as Dt } from "./index-DwNTTJ28.js";
+import { useCssVars as xt, ref as h, reactive as bt, computed as w, onUnmounted as kt, createBlock as T, openBlock as r, Teleport as wt, createElementBlock as u, createCommentVNode as y, withModifiers as W, normalizeStyle as P, createElementVNode as c, unref as g, renderSlot as k, createVNode as qe, nextTick as Je, onMounted as Ct, onBeforeUnmount as $t, watch as Re, normalizeClass as Be, createSlots as We, withCtx as C, normalizeProps as de, guardReactiveProps as ve, Fragment as b, renderList as M, mergeProps as Ye, toDisplayString as j, createTextVNode as Ve } from "vue";
+import { X as Ke, u as At, c as $e, o as St, e as Ae, g as Ue, b as _t, d as zt, p as he, ak as Ge, a7 as Mt, R as Lt, G as Tt, i as fe, f as ge, t as Ot, a as Et, q as Pt, r as Dt } from "./index-dZn5kXWH.js";
 import { u as Nt } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Xt } from "./useChartAccessibility-BWojgys7.js";
-import { u as It, U as Ft } from "./usePrinter-CDE1F-XN.js";
+import { u as It, U as Ft } from "./usePrinter-B5W9BghM.js";
 import { t as Ht, u as Rt } from "./useResponsive-Cw4oZ8sQ.js";
-import { u as je } from "./useNestedProp-DLKXTEny.js";
-import Bt from "./vue-ui-accordion-BqCwiS7D.js";
-import Wt from "./BaseIcon-NVebWEmm.js";
+import { u as je } from "./useNestedProp-uXqTvVZ6.js";
+import Bt from "./vue-ui-accordion-hnKAB3UB.js";
+import Wt from "./BaseIcon-xGT7xJnn.js";
 import { _ as Qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import { D as Yt } from "./DataTable-LLs37Na_.js";
-import { L as Vt } from "./Legend-Vkc-EKNB.js";
-import { _ as Ut } from "./PenAndPaper-k0VaawVj.js";
-import { _ as Gt } from "./Shape-Bfm8x-8P.js";
-import jt from "./vue-ui-skeleton-kS_CJIiv.js";
-import { _ as qt } from "./Title-IOaA-ppU.js";
-import Jt from "./vue-ui-xy-F8eArZNJ.js";
+import { D as Yt } from "./DataTable-jQUrRh9B.js";
+import { L as Vt } from "./Legend-DCwwpz6j.js";
+import { _ as Ut } from "./PenAndPaper-DgeL3oKs.js";
+import { _ as Gt } from "./Shape-Cd10Dxv4.js";
+import jt from "./vue-ui-skeleton-N92OEV1V.js";
+import { _ as qt } from "./Title-DTFwdW6y.js";
+import Jt from "./vue-ui-xy-DL8afDjw.js";
 const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body" }, ea = {
   __name: "BaseDraggableDialog",
   props: {
@@ -25,10 +25,10 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
   },
   emits: ["close"],
   setup(X, { expose: ye, emit: pe }) {
-    xt((r) => ({
+    xt((i) => ({
       19616867: X.color
     }));
-    const me = X, C = pe, L = v(!1), Y = v(!1), l = bt({
+    const me = X, $ = pe, L = h(!1), Y = h(!1), l = bt({
       left: window.innerWidth / 2 - 200,
       top: window.innerHeight / 2 - 120,
       width: 400,
@@ -47,11 +47,11 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
         Y.value || (l.left = Math.max(0, window.innerWidth / 2 - l.width / 2), l.top = Math.max(0, window.innerHeight / 2 - l.height / 2), Y.value = !0);
       });
     }
-    function j() {
-      L.value = !1, C("close");
+    function q() {
+      L.value = !1, $("close");
     }
-    ye({ open: se, close: j });
-    const V = k(() => ({
+    ye({ open: se, close: q });
+    const V = w(() => ({
       position: "fixed",
       left: `${l.left}px`,
       top: `${l.top}px`,
@@ -65,59 +65,59 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
       overflow: "visible",
       borderRadius: "2px"
     }));
-    function O(r) {
-      return r.touches && r.touches.length ? { x: r.touches[0].clientX, y: r.touches[0].clientY } : { x: r.clientX, y: r.clientY };
+    function O(i) {
+      return i.touches && i.touches.length ? { x: i.touches[0].clientX, y: i.touches[0].clientY } : { x: i.clientX, y: i.clientY };
     }
-    function q(r) {
+    function J(i) {
       var p;
-      (p = r.preventDefault) == null || p.call(r), l.dragging = !0;
-      const d = O(r);
-      l.dragOffsetX = d.x - l.left, l.dragOffsetY = d.y - l.top, document.addEventListener("mousemove", I), document.addEventListener("mouseup", F), document.addEventListener("touchmove", I, { passive: !1 }), document.addEventListener("touchend", F);
+      (p = i.preventDefault) == null || p.call(i), l.dragging = !0;
+      const v = O(i);
+      l.dragOffsetX = v.x - l.left, l.dragOffsetY = v.y - l.top, document.addEventListener("mousemove", I), document.addEventListener("mouseup", F), document.addEventListener("touchmove", I, { passive: !1 }), document.addEventListener("touchend", F);
     }
-    function I(r) {
+    function I(i) {
       var m;
       if (!l.dragging) return;
-      (m = r.preventDefault) == null || m.call(r);
-      const d = O(r);
-      let p = d.x - l.dragOffsetX, e = d.y - l.dragOffsetY;
+      (m = i.preventDefault) == null || m.call(i);
+      const v = O(i);
+      let p = v.x - l.dragOffsetX, e = v.y - l.dragOffsetY;
       p = Math.max(0, Math.min(p, window.innerWidth - l.width)), e = Math.max(0, Math.min(e, window.innerHeight - l.height)), l.left = p, l.top = e;
     }
     function F() {
       l.dragging = !1, document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", F), document.removeEventListener("touchmove", I), document.removeEventListener("touchend", F);
     }
-    function J(r) {
+    function K(i) {
       var p;
-      (p = r.preventDefault) == null || p.call(r), l.resizing = !0;
-      const d = O(r);
-      l.pointerStartX = d.x, l.pointerStartY = d.y, l.resizeStartW = l.width, l.resizeStartH = l.height, document.addEventListener("mousemove", S), document.addEventListener("mouseup", D), document.addEventListener("touchmove", S, { passive: !1 }), document.addEventListener("touchend", D);
+      (p = i.preventDefault) == null || p.call(i), l.resizing = !0;
+      const v = O(i);
+      l.pointerStartX = v.x, l.pointerStartY = v.y, l.resizeStartW = l.width, l.resizeStartH = l.height, document.addEventListener("mousemove", A), document.addEventListener("mouseup", D), document.addEventListener("touchmove", A, { passive: !1 }), document.addEventListener("touchend", D);
     }
-    function S(r) {
+    function A(i) {
       var m;
       if (!l.resizing) return;
-      (m = r.preventDefault) == null || m.call(r);
-      const d = O(r);
-      let p = d.x - l.pointerStartX, e = d.y - l.pointerStartY;
+      (m = i.preventDefault) == null || m.call(i);
+      const v = O(i);
+      let p = v.x - l.pointerStartX, e = v.y - l.pointerStartY;
       l.width = Math.max(240, l.resizeStartW + p), l.height = Math.max(400, l.resizeStartH + e);
     }
     function D() {
-      l.resizing = !1, document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", D), document.removeEventListener("touchmove", S), document.removeEventListener("touchend", D);
+      l.resizing = !1, document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", D), document.removeEventListener("touchmove", A), document.removeEventListener("touchend", D);
     }
-    function ne(r) {
+    function ne(i) {
       var p;
-      (p = r.preventDefault) == null || p.call(r), l.resizing = !0;
-      const d = O(r);
-      l.pointerStartX = d.x, l.pointerStartY = d.y, l.resizeStartW = l.width, l.resizeStartH = l.height, l.resizeStartLeft = l.left, l.resizeStartTop = l.top, document.addEventListener("mousemove", H), document.addEventListener("mouseup", f), document.addEventListener("touchmove", H, { passive: !1 }), document.addEventListener("touchend", f);
+      (p = i.preventDefault) == null || p.call(i), l.resizing = !0;
+      const v = O(i);
+      l.pointerStartX = v.x, l.pointerStartY = v.y, l.resizeStartW = l.width, l.resizeStartH = l.height, l.resizeStartLeft = l.left, l.resizeStartTop = l.top, document.addEventListener("mousemove", H), document.addEventListener("mouseup", f), document.addEventListener("touchmove", H, { passive: !1 }), document.addEventListener("touchend", f);
     }
-    function H(r) {
-      var Q;
+    function H(i) {
+      var Z;
       if (!l.resizing) return;
-      (Q = r.preventDefault) == null || Q.call(r);
-      const d = O(r);
-      let p = d.x - l.pointerStartX, e = Math.min(
+      (Z = i.preventDefault) == null || Z.call(i);
+      const v = O(i);
+      let p = v.x - l.pointerStartX, e = Math.min(
         Math.max(0, l.resizeStartLeft + p),
         l.resizeStartLeft + l.resizeStartW - 240
         // min width
-      ), m = l.resizeStartW - (e - l.resizeStartLeft), K = d.y - l.pointerStartY, re = Math.max(400, l.resizeStartH + K);
+      ), m = l.resizeStartW - (e - l.resizeStartLeft), Q = v.y - l.pointerStartY, re = Math.max(400, l.resizeStartH + Q);
       l.left = e, l.width = m, l.height = re;
     }
     function f() {
@@ -125,27 +125,27 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
     }
     return kt(() => {
       F(), D(), f();
-    }), (r, d) => (i(), T(wt, { to: "body" }, [
-      L.value ? (i(), u("div", {
+    }), (i, v) => (r(), T(wt, { to: "body" }, [
+      L.value ? (r(), u("div", {
         key: 0,
         class: "modal vue-ui-draggable-dialog",
         style: P(V.value),
-        onClick: d[0] || (d[0] = W(() => {
+        onClick: v[0] || (v[0] = W(() => {
         }, ["stop"]))
       }, [
-        h("div", {
+        c("div", {
           class: "modal-header",
           style: P({
             backgroundColor: X.headerBg,
             color: X.headerColor
           })
         }, [
-          h("span", {
+          c("span", {
             class: "drag-handle",
-            onMousedown: W(q, ["stop", "prevent"]),
-            onTouchstart: W(q, ["stop", "prevent"])
+            onMousedown: W(J, ["stop", "prevent"]),
+            onTouchstart: W(J, ["stop", "prevent"])
           }, [
-            (i(), u("svg", {
+            (r(), u("svg", {
               xmlns: g(Ke),
               width: "20",
               height: "20",
@@ -155,21 +155,21 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
               "stroke-width": "1",
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
-            }, d[1] || (d[1] = [
-              h("path", { d: "M5 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-              h("path", { d: "M5 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-              h("path", { d: "M12 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-              h("path", { d: "M12 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-              h("path", { d: "M19 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-              h("path", { d: "M19 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
+            }, v[1] || (v[1] = [
+              c("path", { d: "M5 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              c("path", { d: "M5 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              c("path", { d: "M12 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              c("path", { d: "M12 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              c("path", { d: "M19 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              c("path", { d: "M19 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
             ]), 8, Kt))
           ], 32),
-          h("span", Qt, [
-            b(r.$slots, "title", {}, void 0, !0)
+          c("span", Qt, [
+            k(i.$slots, "title", {}, void 0, !0)
           ]),
-          h("button", {
+          c("button", {
             class: "close",
-            onClick: j
+            onClick: q
           }, [
             qe(Wt, {
               name: "close",
@@ -177,15 +177,15 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
             }, null, 8, ["stroke"])
           ])
         ], 4),
-        h("div", Zt, [
-          b(r.$slots, "default", {}, void 0, !0)
+        c("div", Zt, [
+          k(i.$slots, "default", {}, void 0, !0)
         ]),
-        h("div", {
+        c("div", {
           class: "resize-handle",
-          onMousedown: W(J, ["stop", "prevent"]),
-          onTouchstart: W(J, ["stop", "prevent"])
+          onMousedown: W(K, ["stop", "prevent"]),
+          onTouchstart: W(K, ["stop", "prevent"])
         }, null, 32),
-        h("div", {
+        c("div", {
           class: "resize-handle resize-handle-left",
           onMousedown: W(ne, ["stop", "prevent"]),
           onTouchstart: W(ne, ["stop", "prevent"])
@@ -193,10 +193,10 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
       ], 4)) : y("", !0)
     ]));
   }
-}, ta = /* @__PURE__ */ Qe(ea, [["__scopeId", "data-v-f854cee8"]]), aa = ["id"], la = ["xmlns", "viewBox"], oa = ["id"], sa = ["stop-color"], na = ["stop-color"], ra = ["stop-color"], ia = ["stop-color"], ua = { key: 0 }, ca = ["fill", "d"], da = ["fill", "stroke", "stroke-width", "d"], va = ["stroke", "stroke-dasharray", "stroke-width", "d"], ha = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], fa = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], ga = ["x", "y", "font-size", "font-weight", "fill", "text-decoration", "onMouseenter", "onClick"], ya = { key: 1 }, pa = ["font-size", "fill", "font-weight", "transform", "text-anchor"], ma = ["x", "y", "width", "height", "onMouseenter", "onClick"], xa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ba = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], ka = ["x", "y", "text-anchor", "font-size", "fill"], wa = {
+}, ta = /* @__PURE__ */ Qe(ea, [["__scopeId", "data-v-f854cee8"]]), aa = ["id"], la = ["xmlns", "viewBox"], oa = ["id"], sa = ["stop-color"], na = ["stop-color"], ra = ["stop-color"], ia = ["stop-color"], ua = ["id"], ca = ["stop-color"], da = ["stop-color"], va = ["stop-color"], ha = ["stop-color"], fa = { key: 0 }, ga = ["fill", "d"], ya = ["fill", "stroke", "stroke-width", "d"], pa = ["stroke", "stroke-dasharray", "stroke-width", "d"], ma = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], xa = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], ba = ["x", "y", "font-size", "font-weight", "fill", "text-decoration", "onMouseenter", "onClick"], ka = { key: 1 }, wa = ["font-size", "fill", "font-weight", "transform", "text-anchor"], Ca = ["x", "y", "width", "height", "onMouseenter", "onClick"], $a = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Aa = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Sa = ["x", "y", "text-anchor", "font-size", "fill"], _a = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Ca = ["onClick"], $a = ["innerHTML"], Aa = {
+}, za = ["onClick"], Ma = ["innerHTML"], La = {
   __name: "vue-ui-ridgeline",
   props: {
     config: {
@@ -214,70 +214,70 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
   },
   emits: ["selectLegend", "selectDatapoint", "selectX"],
   setup(X, { expose: ye, emit: pe }) {
-    const { vue_ui_ridgeline: me } = At(), C = X, L = k({
+    const { vue_ui_ridgeline: me } = At(), $ = X, L = w({
       get() {
-        return !!C.dataset && C.dataset.length;
+        return !!$.dataset && $.dataset.length;
       },
       set(a) {
         return a;
       }
-    }), Y = pe, l = v(null), se = v(null), j = v(null), V = v(null), O = v(null), q = v(null), I = v(0), F = v(0), J = v(0), S = v(Ve()), D = v(0), ne = v(0), H = v(512), f = v(null), r = v(null), d = v(null);
+    }), Y = pe, l = h(null), se = h(null), q = h(null), V = h(null), O = h(null), J = h(null), I = h(0), F = h(0), K = h(0), A = h($e()), D = h(0), ne = h(0), H = h(512), f = h(null), i = h(null), v = h(null);
     function p() {
       const a = je({
-        userConfig: C.config,
+        userConfig: $.config,
         defaultConfig: me
       });
       return a.theme ? {
         ...je({
-          userConfig: Et.vue_ui_ridgeline[a.theme] || C.config,
+          userConfig: Et.vue_ui_ridgeline[a.theme] || $.config,
           defaultConfig: a
         }),
         customPalette: Ot[a.theme] || he
       } : a;
     }
-    const e = k({
+    const e = w({
       get: () => p(),
       set: (a) => a
-    }), m = v(Math.min(
+    }), m = h(Math.min(
       e.value.style.chart.areas.height,
       e.value.style.chart.areas.rowHeight
     )), {
-      userOptionsVisible: K,
+      userOptionsVisible: Q,
       setUserOptionsVisibility: re,
-      keepUserOptionState: Q
+      keepUserOptionState: Z
     } = Nt({ config: e.value }), { svgRef: xe } = Xt({ config: e.value.style.chart.title });
     Ct(be), $t(() => {
       V.value && V.value.disconnect();
     });
     function be() {
-      if (St(C.dataset) ? $e({
+      if (St($.dataset) ? Ae({
         componentName: "VueUiRidgeline",
         type: "dataset"
-      }) : C.dataset.forEach((a, n) => {
+      }) : $.dataset.forEach((a, n) => {
         Ue({
           datasetObject: a,
           requiredAttributes: ["name", "datapoints"]
         }).forEach((t) => {
-          L.value = !1, $e({
+          L.value = !1, Ae({
             componentName: "VueUiRidgeline",
             type: "datasetSerieAttribute",
             property: t,
             index: n
           });
-        }), a.datapoints.length && a.datapoints.forEach((t, o) => {
+        }), a.datapoints.length && a.datapoints.forEach((t, s) => {
           Ue({
             datasetObject: t,
             requiredAttributes: ["name", "values"]
-          }).forEach((s) => {
-            L.value = !1, $e({
+          }).forEach((o) => {
+            L.value = !1, Ae({
               componentName: "VueUiRidgeline",
               type: "datasetSerieAttribute",
-              property: `datapoint.${s}`,
-              index: `${n}-${o}`
+              property: `datapoint.${o}`,
+              index: `${n}-${s}`
             });
           });
         });
-      }), ne.value = C.dataset.length, m.value = Math.min(
+      }), ne.value = $.dataset.length, m.value = Math.min(
         e.value.style.chart.areas.height,
         e.value.style.chart.areas.rowHeight
       ), e.value.responsive) {
@@ -285,73 +285,75 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
           const { width: n, height: t } = Rt({
             chart: l.value,
             title: e.value.style.chart.title.text ? se.value : null,
-            legend: e.value.style.chart.legend.show ? j.value : null,
+            legend: e.value.style.chart.legend.show ? q.value : null,
             source: O.value,
-            noTitle: q.value
+            noTitle: J.value
           });
           requestAnimationFrame(() => {
-            H.value = n, m.value = t / C.dataset.length;
+            H.value = n, m.value = t / $.dataset.length;
           });
         });
         V.value = new ResizeObserver(a), V.value.observe(l.value.parentNode);
       }
     }
-    const { isPrinting: Ae, isImaging: Se, generatePdf: ze, generateImage: Me } = It({
-      elementId: `vue-ui-ridgeline_${S.value}`,
+    const { isPrinting: Se, isImaging: _e, generatePdf: ze, generateImage: Me } = It({
+      elementId: `vue-ui-ridgeline_${A.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-ridgeline",
       options: e.value.userOptions.print
-    }), Ze = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), et = k(() => zt(e.value.customPalette)), Z = v({
+    }), Ze = w(() => e.value.userOptions.show && !e.value.style.chart.title.text), et = w(() => _t(e.value.customPalette)), ee = h({
       showTable: e.value.table.show
     });
-    He(() => C.config, (a) => {
-      e.value = p(), K.value = !e.value.userOptions.showOnChartHover, be(), I.value += 1, J.value += 1, m.value = Math.min(
+    Re(() => $.config, (a) => {
+      e.value = p(), Q.value = !e.value.userOptions.showOnChartHover, be(), I.value += 1, K.value += 1, m.value = Math.min(
         e.value.style.chart.areas.height,
         e.value.style.chart.areas.rowHeight
-      ), Z.value.showTable = e.value.table.show;
-    }, { deep: !0 }), He(() => C.dataset, be, { deep: !0 });
-    const ke = k(() => e.value.style.chart.areas.height / e.value.style.chart.areas.rowHeight);
+      ), ee.value.showTable = e.value.table.show;
+    }, { deep: !0 }), Re(() => $.dataset, be, { deep: !0 });
+    const ke = w(() => e.value.style.chart.areas.height / e.value.style.chart.areas.rowHeight);
     function Le(a) {
-      N.value.includes(a) ? N.value = N.value.filter((n) => n !== a) : N.value.push(a), Y("selectLegend", ee.value);
+      N.value.includes(a) ? N.value = N.value.filter((n) => n !== a) : N.value.push(a), Y("selectLegend", G.value);
     }
-    const E = k(() => L.value ? C.dataset.map((a, n) => ({
+    const E = w(() => L.value ? $.dataset.map((a, n) => ({
       ...a,
       labelLen: lt(a.name, e.value.style.chart.yAxis.labels.fontSize),
-      uid: Ve(),
-      datapoints: a.datapoints.map((t, o) => {
-        const s = t.color ? Mt(t.color) : et.value[o] || he[o] || he[o % he.length], c = Ge(t.name);
+      uid: $e(),
+      datapoints: a.datapoints.map((t, s) => {
+        const o = t.color ? zt(t.color) : et.value[s] || he[s] || he[s % he.length];
+        console.log(o);
+        const d = Ge(t.name);
         return {
           ...t,
-          color: s,
-          id: c
+          color: o,
+          id: d
         };
       })
-    })) : []), _e = k(() => e.value.style.chart.padding.top + m.value * C.dataset.length + m.value * ke.value), z = k(() => ({
+    })) : []), Te = w(() => e.value.style.chart.padding.top + m.value * $.dataset.length + m.value * ke.value), _ = w(() => ({
       fullHeight: x.value.padding.top + x.value.padding.bottom + x.value.height,
       top: x.value.padding.top,
       left: x.value.padding.left,
       right: x.value.width - x.value.padding.right,
       bottom: x.value.padding.top + x.value.height,
       width: x.value.width - (x.value.padding.left + x.value.padding.right)
-    })), x = k(() => {
+    })), x = w(() => {
       const a = e.value.style.chart.padding;
       return {
         width: H.value,
-        height: _e.value,
+        height: Te.value,
         padding: a
       };
-    }), U = k(() => {
-      const a = Math.max(...E.value.map((c) => c.labelLen)), n = Math.max(...E.value.flatMap((c) => c.datapoints.map((M) => M.values.length))), t = x.value.padding.left + a + 16 + e.value.style.chart.yAxis.labels.offsetX, o = (z.value.width - t) / n, s = [];
-      for (let c = 0; c < n; c += 1)
-        s.push({
-          selectorX: t + o * c,
-          x: t + o * c - o / 2,
-          y: z.value.top,
-          label: e.value.style.chart.xAxis.labels.values[c] || "",
-          index: c,
-          width: o,
-          height: _e.value
+    }), U = w(() => {
+      const a = Math.max(...E.value.map((d) => d.labelLen)), n = Math.max(...E.value.flatMap((d) => d.datapoints.map((z) => z.values.length))), t = x.value.padding.left + a + 16 + e.value.style.chart.yAxis.labels.offsetX, s = (_.value.width - t) / n, o = [];
+      for (let d = 0; d < n; d += 1)
+        o.push({
+          selectorX: t + s * d,
+          x: t + s * d - s / 2,
+          y: _.value.top,
+          label: e.value.style.chart.xAxis.labels.values[d] || "",
+          index: d,
+          width: s,
+          height: Te.value
         });
-      return s;
+      return o;
     });
     function tt(a) {
       Y("selectX", E.value.map((n) => n.datapoints.map((t) => ({
@@ -362,31 +364,31 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
     function at(a, n) {
       return a.length * n / 2 + n;
     }
-    function Te(a, n, t) {
-      const o = at(n, t);
-      return a + o > z.value.right;
+    function Oe(a, n, t) {
+      const s = at(n, t);
+      return a + s > _.value.right;
     }
     function lt(a, n, t = "sans-serif") {
-      const s = document.createElement("canvas").getContext("2d"), c = typeof n == "number" ? `${n}px` : n;
-      return s.font = `${c} ${t}`, s.measureText(a).width;
+      const o = document.createElement("canvas").getContext("2d"), d = typeof n == "number" ? `${n}px` : n;
+      return o.font = `${d} ${t}`, o.measureText(a).width;
     }
-    const ee = k(() => {
+    const G = w(() => {
       m.value;
-      const a = Math.max(...E.value.map((A) => A.labelLen)), n = Math.max(...E.value.flatMap((A) => A.datapoints.map((R) => R.values.length))), t = Math.max(...E.value.flatMap((A) => A.datapoints.flatMap((R) => R.values))), o = Math.min(...E.value.flatMap((A) => A.datapoints.flatMap((R) => R.values))), s = x.value.padding.left + a + 16 + e.value.style.chart.yAxis.labels.offsetX, c = (z.value.width - s) / n, M = Math.abs(Math.min(o, 0)), Xe = t + M;
-      function Ie(A) {
-        return isNaN(A / Xe) ? 0 : A / Xe;
+      const a = Math.max(...E.value.map((S) => S.labelLen)), n = Math.max(...E.value.flatMap((S) => S.datapoints.map((R) => R.values.length))), t = Math.max(...E.value.flatMap((S) => S.datapoints.flatMap((R) => R.values))), s = Math.min(...E.value.flatMap((S) => S.datapoints.flatMap((R) => R.values))), o = x.value.padding.left + a + 16 + e.value.style.chart.yAxis.labels.offsetX, d = (_.value.width - o) / n, z = Math.abs(Math.min(s, 0)), Ie = t + z;
+      function Fe(S) {
+        return isNaN(S / Ie) ? 0 : S / Ie;
       }
-      return E.value.map((A, R) => {
-        const Fe = z.value.top + m.value * R, B = z.value.top + Fe + m.value * ke.value * (1 - Ie(M));
+      return E.value.map((S, R) => {
+        const He = _.value.top + m.value * R, B = _.value.top + He + m.value * ke.value * (1 - Fe(z));
         return {
-          ...A,
+          ...S,
           label: {
-            x: s - e.value.style.chart.yAxis.labels.fontSize,
+            x: o - e.value.style.chart.yAxis.labels.fontSize,
             y: B
           },
-          datapoints: A.datapoints.map((ae) => {
+          datapoints: S.datapoints.map((ae) => {
             const le = ae.values.map((oe, ft) => {
-              const gt = isNaN(oe) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(oe) ? 0 : oe || 0, yt = s + c * ft, pt = z.value.top + Fe + m.value * ke.value * (1 - Ie(gt + M)), mt = oe === Math.max(...ae.values);
+              const gt = isNaN(oe) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(oe) ? 0 : oe || 0, yt = o + d * ft, pt = _.value.top + He + m.value * ke.value * (1 - Fe(gt + z)), mt = oe === Math.max(...ae.values);
               return {
                 x: yt,
                 y: pt,
@@ -394,9 +396,10 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
                 isMaxPoint: mt,
                 zero: B
               };
-            }), dt = `${Lt(le, B, !1, !1)}`, vt = `M ${s},${B} ${_t(le)} ${le.at(-1).x},${B}`, ht = `M ${s},${B} ${le.at(-1).x},${B}`;
+            }), dt = `${Mt(le, B, !1, !1)}`, vt = `M ${o},${B} ${Lt(le)} ${le.at(-1).x},${B}`, ht = `M ${o},${B} ${le.at(-1).x},${B}`;
             return {
               ...ae,
+              uid: $e(),
               plots: le,
               smoothPath: dt,
               straightPath: vt,
@@ -405,45 +408,45 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
           }).filter((ae) => !N.value.includes(ae.id))
         };
       });
-    }), N = v([]);
+    }), N = h([]);
     function ot(a) {
       const n = /* @__PURE__ */ new Map();
       return a.forEach((t) => {
-        t.datapoints.forEach((o, s) => {
-          const c = Ge(o.name);
-          n.has(c) || n.set(c, {
-            id: c,
-            name: o.name,
-            color: o.color,
+        t.datapoints.forEach((s, o) => {
+          const d = Ge(s.name);
+          n.has(d) || n.set(d, {
+            id: d,
+            name: s.name,
+            color: s.color,
             shape: "circle",
-            segregate: () => Le(c),
-            isSegregated: N.value.includes(c),
-            opacity: N.value.includes(c) ? 0.5 : 1
+            segregate: () => Le(d),
+            isSegregated: N.value.includes(d),
+            opacity: N.value.includes(d) ? 0.5 : 1
           });
         });
       }), Array.from(n.values());
     }
-    const ie = k(() => ot(E.value)), st = k(() => ({
+    const ie = w(() => ot(E.value)), st = w(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), te = v(!1);
+    })), te = h(!1);
     function nt(a) {
       te.value = a, D.value += 1;
     }
-    const Oe = v({}), Ee = v([]);
+    const Ee = h({}), Pe = h([]);
     function rt(a) {
-      Y("selectDatapoint", a), e.value.style.chart.dialog.show && (Ee.value = a.datapoints.map((n) => ({
+      Y("selectDatapoint", a), e.value.style.chart.dialog.show && (Pe.value = a.datapoints.map((n) => ({
         name: n.name,
         color: n.color,
         type: "line",
         useArea: !0,
         smooth: e.value.style.chart.areas.smooth,
         series: n.values
-      })), r.value = a, Oe.value = {
+      })), i.value = a, Ee.value = {
         ...e.value.style.chart.dialog.xyChart,
         responsive: !0,
         // Overriding 
@@ -466,32 +469,32 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
             // Overriding
           }
         }
-      }, d.value && d.value.open());
+      }, v.value && v.value.open());
     }
-    const we = v(null);
+    const we = h(null);
     function it(a) {
       we.value = a;
     }
     function ut() {
       we.value = null;
     }
-    const ue = v(!1);
+    const ue = h(!1);
     function Ce() {
       ue.value = !ue.value;
     }
-    function Pe() {
-      Z.value.showTable = !Z.value.showTable;
+    function De() {
+      ee.value.showTable = !ee.value.showTable;
     }
-    const De = k(() => ({ body: ee.value.flatMap((t) => t.datapoints.flatMap((o) => ({
-      ...o,
-      rowName: `${t.name}: ${o.name}`
+    const Ne = w(() => ({ body: G.value.flatMap((t) => t.datapoints.flatMap((s) => ({
+      ...s,
+      rowName: `${t.name}: ${s.name}`
     }))).map((t) => [
       {
         name: t.rowName,
         color: t.color
       },
       ...t.values
-    ]) })), ce = k(() => {
+    ]) })), ce = w(() => {
       const a = [
         e.value.table.columnNames.series,
         ...e.value.style.chart.xAxis.labels.values
@@ -514,15 +517,15 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
           ...e.value.style.chart.xAxis.labels.values
         ],
         head: a,
-        body: De.value.body,
+        body: Ne.value.body,
         config: n
       };
     });
-    function Ne() {
+    function Xe() {
       Je(() => {
         const a = [
-          [e.value.table.columnNames.series, ...e.value.style.chart.xAxis.labels.values.map((o) => [o])],
-          ...De.value.body.map((o, s) => [o[0].name, ...o.slice(1)])
+          [e.value.table.columnNames.series, ...e.value.style.chart.xAxis.labels.values.map((s) => [s])],
+          ...Ne.value.body.map((s, o) => [s[0].name, ...s.slice(1)])
         ], n = [
           [e.value.style.chart.title.text],
           [e.value.style.chart.title.subtitle.text]
@@ -534,20 +537,20 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
       });
     }
     function ct() {
-      return ee.value;
+      return G.value;
     }
     return ye({
       getData: ct,
       generateImage: Me,
       generatePdf: ze,
-      generateCsv: Ne,
+      generateCsv: Xe,
       toggleAnnotator: Ce,
-      toggleTable: Pe
-    }), (a, n) => (i(), u("div", {
+      toggleTable: De
+    }), (a, n) => (r(), u("div", {
       ref_key: "ridgelineChart",
       ref: l,
-      class: Re(`vue-ui-ridgeline ${te.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      id: `vue-ui-ridgeline_${S.value}`,
+      class: Be(`vue-ui-ridgeline ${te.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      id: `vue-ui-ridgeline_${A.value}`,
       style: P({
         fontFamily: e.value.style.fontFamily,
         width: "100%",
@@ -558,7 +561,7 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
       onMouseenter: n[4] || (n[4] = () => g(re)(!0)),
       onMouseleave: n[5] || (n[5] = () => g(re)(!1))
     }, [
-      e.value.userOptions.buttons.annotator && g(xe) ? (i(), T(Ut, {
+      e.value.userOptions.buttons.annotator && g(xe) ? (r(), T(Ut, {
         key: 0,
         color: e.value.style.chart.color,
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -566,21 +569,21 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
         svgRef: g(xe),
         onClose: Ce
       }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : y("", !0),
-      b(a.$slots, "userConfig", {}, void 0, !0),
-      Ze.value ? (i(), u("div", {
+      k(a.$slots, "userConfig", {}, void 0, !0),
+      Ze.value ? (r(), u("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: q,
+        ref: J,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : y("", !0),
-      e.value.style.chart.title.text ? (i(), u("div", {
+      e.value.style.chart.title.text ? (r(), u("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: se,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (i(), T(qt, {
+        (r(), T(qt, {
           key: `title_${I.value}`,
           config: {
             title: {
@@ -594,14 +597,14 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
           }
         }, null, 8, ["config"]))
       ], 512)) : y("", !0),
-      e.value.userOptions.show && L.value && (g(Q) || g(K)) ? (i(), T(Ft, {
+      e.value.userOptions.show && L.value && (g(Z) || g(Q)) ? (r(), T(Ft, {
         ref: "details",
         key: `user_option_${D.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: g(Ae),
-        isImaging: g(Se),
-        uid: S.value,
+        isPrinting: g(Se),
+        isImaging: g(_e),
+        uid: A.value,
         hasTooltip: !1,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -617,167 +620,202 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: ue.value,
         style: P({
-          visibility: g(Q) ? g(K) ? "visible" : "hidden" : "visible"
+          visibility: g(Z) ? g(Q) ? "visible" : "hidden" : "visible"
         }),
         onToggleFullscreen: nt,
         onGeneratePdf: g(ze),
-        onGenerateCsv: Ne,
+        onGenerateCsv: Xe,
         onGenerateImage: g(Me),
-        onToggleTable: Pe,
+        onToggleTable: De,
         onToggleAnnotator: Ce
-      }, Be({ _: 2 }, [
+      }, We({ _: 2 }, [
         a.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: w(({ isOpen: t, color: o }) => [
-            b(a.$slots, "menuIcon", de(ve({ isOpen: t, color: o })), void 0, !0)
+          fn: C(({ isOpen: t, color: s }) => [
+            k(a.$slots, "menuIcon", de(ve({ isOpen: t, color: s })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         a.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: w(() => [
-            b(a.$slots, "optionTooltip", {}, void 0, !0)
+          fn: C(() => [
+            k(a.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         a.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: w(() => [
-            b(a.$slots, "optionPdf", {}, void 0, !0)
+          fn: C(() => [
+            k(a.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         a.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: w(() => [
-            b(a.$slots, "optionCsv", {}, void 0, !0)
+          fn: C(() => [
+            k(a.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         a.$slots.optionImg ? {
           name: "optionImg",
-          fn: w(() => [
-            b(a.$slots, "optionImg", {}, void 0, !0)
+          fn: C(() => [
+            k(a.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         a.$slots.optionTable ? {
           name: "optionTable",
-          fn: w(() => [
-            b(a.$slots, "optionTable", {}, void 0, !0)
+          fn: C(() => [
+            k(a.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         a.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: w(({ toggleFullscreen: t, isFullscreen: o }) => [
-            b(a.$slots, "optionFullscreen", de(ve({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
+          fn: C(({ toggleFullscreen: t, isFullscreen: s }) => [
+            k(a.$slots, "optionFullscreen", de(ve({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         a.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: w(({ toggleAnnotator: t, isAnnotator: o }) => [
-            b(a.$slots, "optionAnnotator", de(ve({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
+          fn: C(({ toggleAnnotator: t, isAnnotator: s }) => [
+            k(a.$slots, "optionAnnotator", de(ve({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
           ]),
           key: "7"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "style", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
-      L.value ? (i(), u("svg", {
+      L.value ? (r(), u("svg", {
         key: 4,
         ref_key: "svgRef",
         ref: xe,
         xmlns: g(Ke),
-        class: Re({ "vue-data-ui-fullscreen--on": te.value, "vue-data-ui-fulscreen--off": !te.value }),
-        viewBox: `0 0 ${x.value.width <= 0 ? 10 : x.value.width} ${z.value.fullHeight <= 0 ? 10 : z.value.fullHeight}`,
+        class: Be({ "vue-data-ui-fullscreen--on": te.value, "vue-data-ui-fulscreen--off": !te.value }),
+        viewBox: `0 0 ${x.value.width <= 0 ? 10 : x.value.width} ${_.value.fullHeight <= 0 ? 10 : _.value.fullHeight}`,
         style: P(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};${e.value.responsive ? "height: 100%; width: 100%;" : ""}`)
       }, [
-        h("defs", null, [
-          (i(!0), u($, null, _(ie.value, (t, o) => (i(), u("linearGradient", {
-            id: `gradient-${t.id}-${S.value}`,
+        c("defs", null, [
+          (r(!0), u(b, null, M(ie.value, (t, s) => (r(), u("linearGradient", {
+            id: `gradient-${t.id}-${A.value}`,
             x1: "50%",
             y1: "0%",
             x2: "50%",
             y2: "100%"
           }, [
-            h("stop", {
+            c("stop", {
               offset: "0%",
               "stop-color": t.color,
               "stop-opacity": "1"
             }, null, 8, sa),
-            h("stop", {
+            c("stop", {
               offset: "30%",
               "stop-color": t.color,
               "stop-opacity": "0.7"
             }, null, 8, na),
-            h("stop", {
+            c("stop", {
               offset: "70%",
               "stop-color": t.color,
               "stop-opacity": "0.3"
             }, null, 8, ra),
-            h("stop", {
+            c("stop", {
               offset: "100%",
               "stop-color": t.color,
               "stop-opacity": "0.1"
             }, null, 8, ia)
-          ], 8, oa))), 256))
+          ], 8, oa))), 256)),
+          (r(!0), u(b, null, M(G.value, (t, s) => (r(), u(b, null, [
+            (r(!0), u(b, null, M(t.datapoints, (o, d) => (r(), u("linearGradient", {
+              key: `grad${o.id}`,
+              id: `gradient-single-${A.value}-${o.uid}`,
+              x1: "50%",
+              y1: "0%",
+              x2: "50%",
+              y2: "100%"
+            }, [
+              c("stop", {
+                offset: "0%",
+                "stop-color": o.color,
+                "stop-opacity": "1"
+              }, null, 8, ca),
+              c("stop", {
+                offset: "30%",
+                "stop-color": o.color,
+                "stop-opacity": "0.7"
+              }, null, 8, da),
+              c("stop", {
+                offset: "70%",
+                "stop-color": o.color,
+                "stop-opacity": "0.3"
+              }, null, 8, va),
+              c("stop", {
+                offset: "100%",
+                "stop-color": o.color,
+                "stop-opacity": "0.1"
+              }, null, 8, ha)
+            ], 8, ua))), 128))
+          ], 64))), 256))
         ]),
-        a.$slots.pattern ? (i(), u("g", ua, [
-          (i(!0), u($, null, _(ie.value, (t, o) => (i(), u("defs", null, [
-            b(a.$slots, "pattern", We({ ref_for: !0 }, { variable: t, patternId: `pattern_${S.value}_${o}` }), void 0, !0)
+        a.$slots.pattern ? (r(), u("g", fa, [
+          (r(!0), u(b, null, M(ie.value, (t, s) => (r(), u("defs", null, [
+            k(a.$slots, "pattern", Ye({ ref_for: !0 }, { variable: t, patternId: `pattern_${A.value}_${s}` }), void 0, !0)
           ]))), 256))
         ])) : y("", !0),
-        (i(!0), u($, null, _(ee.value, (t, o) => (i(), u("g", null, [
-          (i(!0), u($, null, _(t.datapoints, (s, c) => (i(), u("g", null, [
-            h("path", {
+        (r(!0), u(b, null, M(G.value, (t, s) => (r(), u("g", {
+          key: `ds-${s}`
+        }, [
+          (r(!0), u(b, null, M(t.datapoints, (o, d) => (r(), u("g", {
+            key: o.id
+          }, [
+            c("path", {
               fill: e.value.style.chart.backgroundColor,
               stroke: "none",
               "stroke-linecap": "round",
-              d: e.value.style.chart.areas.smooth ? s.smoothPath : s.straightPath,
+              d: e.value.style.chart.areas.smooth ? o.smoothPath : o.straightPath,
               style: P({ opacity: e.value.style.chart.areas.opacity })
-            }, null, 12, ca),
-            h("path", {
-              fill: `url(#gradient-${s.id}-${S.value})`,
-              stroke: e.value.style.chart.areas.stroke.useSerieColor ? s.color : e.value.style.chart.areas.stroke.color,
+            }, null, 12, ga),
+            c("path", {
+              fill: e.value.style.chart.areas.useCommonColor ? `url(#gradient-${o.id}-${A.value})` : `url(#gradient-single-${A.value}-${o.uid})`,
+              stroke: e.value.style.chart.areas.stroke.useSerieColor ? o.color : e.value.style.chart.areas.stroke.color,
               "stroke-width": e.value.style.chart.areas.strokeWidth,
-              d: e.value.style.chart.areas.smooth ? s.smoothPath : s.straightPath,
+              d: e.value.style.chart.areas.smooth ? o.smoothPath : o.straightPath,
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
-            }, null, 8, da),
-            h("path", {
-              stroke: e.value.style.chart.zeroLine.useSerieColor ? s.color : e.value.style.chart.zeroLine.stroke,
+            }, null, 8, ya),
+            c("path", {
+              stroke: e.value.style.chart.zeroLine.useSerieColor ? o.color : e.value.style.chart.zeroLine.stroke,
               "stroke-dasharray": e.value.style.chart.zeroLine.strokeDasharray,
               "stroke-width": e.value.style.chart.zeroLine.strokeWidth,
-              d: s.zeroPath,
+              d: o.zeroPath,
               "stroke-linecap": "round"
-            }, null, 8, va),
-            e.value.style.chart.areas.maxPoint.show && s.plots.length > 1 ? (i(!0), u($, { key: 0 }, _(s.plots, (M) => (i(), u($, null, [
-              M.isMaxPoint ? (i(), u("line", {
+            }, null, 8, pa),
+            e.value.style.chart.areas.maxPoint.show && o.plots.length > 1 ? (r(!0), u(b, { key: 0 }, M(o.plots, (z) => (r(), u(b, null, [
+              z.isMaxPoint ? (r(), u("line", {
                 key: 0,
-                x1: M.x,
-                y1: M.y,
-                x2: M.x,
-                y2: M.zero,
-                stroke: e.value.style.chart.areas.maxPoint.adaptStrokeToBackground ? g(Tt)(s.color) : e.value.style.chart.areas.maxPoint.stroke,
+                x1: z.x,
+                y1: z.y,
+                x2: z.x,
+                y2: z.zero,
+                stroke: e.value.style.chart.areas.maxPoint.adaptStrokeToBackground ? g(Tt)(o.color) : e.value.style.chart.areas.maxPoint.stroke,
                 "stroke-width": e.value.style.chart.areas.maxPoint.strokeWidth,
                 "stroke-linecap": "round",
                 "stroke-dasharray": e.value.style.chart.areas.maxPoint.strokeDasharray
-              }, null, 8, ha)) : y("", !0)
+              }, null, 8, ma)) : y("", !0)
             ], 64))), 256)) : y("", !0),
-            s.plots.length === 1 ? (i(), u("circle", {
+            o.plots.length === 1 ? (r(), u("circle", {
               key: 1,
-              cx: s.plots[0].x,
-              cy: s.plots[0].y,
+              cx: o.plots[0].x,
+              cy: o.plots[0].y,
               stroke: e.value.style.chart.selector.dot.stroke,
               "stroke-width": e.value.style.chart.selector.dot.strokeWidth,
               r: e.value.style.chart.selector.dot.radius,
-              fill: e.value.style.chart.selector.dot.useDatapointColor ? s.color : e.value.style.chart.selector.dot.fill,
+              fill: e.value.style.chart.selector.dot.useDatapointColor ? o.color : e.value.style.chart.selector.dot.fill,
               style: {
                 pointerEvents: "none"
               }
-            }, null, 8, fa)) : y("", !0)
-          ]))), 256)),
-          h("text", {
+            }, null, 8, xa)) : y("", !0)
+          ]))), 128)),
+          c("text", {
             x: t.label.x,
             y: t.label.y,
             "text-anchor": "end",
@@ -787,48 +825,48 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
             style: P({
               cursor: e.value.style.chart.dialog.show ? "pointer" : "default"
             }),
-            "text-decoration": e.value.style.chart.dialog.show && (we.value === o || r.value && t.uid === r.value.uid) ? "underline" : "",
-            onMouseenter: (s) => it(o),
+            "text-decoration": e.value.style.chart.dialog.show && (we.value === s || i.value && t.uid === i.value.uid) ? "underline" : "",
+            onMouseenter: (o) => it(s),
             onMouseleave: ut,
-            onClick: (s) => rt(t)
-          }, G(t.name), 45, ga)
-        ]))), 256)),
-        e.value.style.chart.xAxis.labels.values.length ? (i(), u("g", ya, [
-          (i(!0), u($, null, _(U.value, (t, o) => b(a.$slots, "time-label", We({ ref_for: !0 }, {
-            show: t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (o === 0 || o === U.value.length - 1) || t && f.value && f.value.index === o || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && o % Math.floor(U.value.length / e.value.style.chart.xAxis.labels.modulo) === 0,
+            onClick: (o) => rt(t)
+          }, j(t.name), 45, ba)
+        ]))), 128)),
+        e.value.style.chart.xAxis.labels.values.length ? (r(), u("g", ka, [
+          (r(!0), u(b, null, M(U.value, (t, s) => k(a.$slots, "time-label", Ye({ ref_for: !0 }, {
+            show: t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (s === 0 || s === U.value.length - 1) || t && f.value && f.value.index === s || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && s % Math.floor(U.value.length / e.value.style.chart.xAxis.labels.modulo) === 0,
             fontSize: e.value.style.chart.xAxis.labels.fontSize,
             content: t.label,
             textAnchor: e.value.style.chart.xAxis.labels.rotation > 0 ? "start" : e.value.style.chart.xAxis.labels.rotation < 0 ? "end" : "middle",
             fill: e.value.style.chart.xAxis.labels.color,
-            transform: `translate(${t.selectorX}, ${z.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
+            transform: `translate(${t.selectorX}, ${_.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
             x: t.selectorX,
-            y: z.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY
+            y: _.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY
           }), () => [
-            t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (o === 0 || o === U.value.length - 1) || t && f.value && f.value.index === o || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && o % Math.floor(U.value.length / e.value.style.chart.xAxis.labels.modulo) === 0 ? (i(), u("text", {
+            t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (s === 0 || s === U.value.length - 1) || t && f.value && f.value.index === s || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && s % Math.floor(U.value.length / e.value.style.chart.xAxis.labels.modulo) === 0 ? (r(), u("text", {
               key: 0,
               "font-size": e.value.style.chart.xAxis.labels.fontSize,
               fill: e.value.style.chart.xAxis.labels.color,
               "font-weight": e.value.style.chart.xAxis.labels.bold ? "bold" : "normal",
-              transform: `translate(${t.selectorX}, ${z.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
+              transform: `translate(${t.selectorX}, ${_.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
               "text-anchor": e.value.style.chart.xAxis.labels.rotation > 0 ? "start" : e.value.style.chart.xAxis.labels.rotation < 0 ? "end" : "middle",
               style: P({
-                opacity: f.value ? f.value.index === o ? 1 : 0.2 : 1
+                opacity: f.value ? f.value.index === s ? 1 : 0.2 : 1
               })
-            }, G(t.label), 13, pa)) : y("", !0)
+            }, j(t.label), 13, wa)) : y("", !0)
           ], !0)), 256))
         ])) : y("", !0),
-        h("g", null, [
-          (i(!0), u($, null, _(U.value, (t, o) => (i(), u("rect", {
+        c("g", null, [
+          (r(!0), u(b, null, M(U.value, (t, s) => (r(), u("rect", {
             x: t.x,
             y: t.y,
             width: t.width < 0 ? 0.1 : t.width,
             height: t.height < 0 ? 0.1 : t.height,
             fill: "transparent",
-            onMouseenter: (s) => f.value = t,
-            onMouseleave: n[0] || (n[0] = (s) => f.value = null),
+            onMouseenter: (o) => f.value = t,
+            onMouseleave: n[0] || (n[0] = (o) => f.value = null),
             onClick: () => tt(t)
-          }, null, 40, ma))), 256)),
-          e.value.style.chart.selector.show && f.value ? (i(), u("line", {
+          }, null, 40, Ca))), 256)),
+          e.value.style.chart.selector.show && f.value ? (r(), u("line", {
             key: 0,
             x1: f.value.selectorX,
             x2: f.value.selectorX,
@@ -839,47 +877,47 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
             "stroke-dasharray": e.value.style.chart.selector.strokeDasharray,
             "stroke-linecap": "round",
             style: { pointerEvents: "none" }
-          }, null, 8, xa)) : y("", !0),
-          f.value ? (i(!0), u($, { key: 1 }, _(ee.value, (t) => (i(), u($, null, [
-            (i(!0), u($, null, _(t.datapoints, (o) => (i(), u($, null, [
-              (i(!0), u($, null, _(o.plots, (s, c) => (i(), u($, null, [
-                f.value && f.value.index === c ? (i(), u("circle", {
+          }, null, 8, $a)) : y("", !0),
+          f.value ? (r(!0), u(b, { key: 1 }, M(G.value, (t) => (r(), u(b, null, [
+            (r(!0), u(b, null, M(t.datapoints, (s) => (r(), u(b, null, [
+              (r(!0), u(b, null, M(s.plots, (o, d) => (r(), u(b, null, [
+                f.value && f.value.index === d ? (r(), u("circle", {
                   key: 0,
-                  cx: s.x,
-                  cy: s.y,
+                  cx: o.x,
+                  cy: o.y,
                   stroke: e.value.style.chart.selector.dot.stroke,
                   "stroke-width": e.value.style.chart.selector.dot.strokeWidth,
                   r: e.value.style.chart.selector.dot.radius,
-                  fill: e.value.style.chart.selector.dot.useDatapointColor ? o.color : e.value.style.chart.selector.dot.fill,
+                  fill: e.value.style.chart.selector.dot.useDatapointColor ? s.color : e.value.style.chart.selector.dot.fill,
                   style: {
                     pointerEvents: "none"
                   }
-                }, null, 8, ba)) : y("", !0),
-                f.value && f.value.index === c ? (i(), u("text", {
+                }, null, 8, Aa)) : y("", !0),
+                f.value && f.value.index === d ? (r(), u("text", {
                   key: 1,
-                  x: Te(
-                    s.x,
+                  x: Oe(
+                    o.x,
                     g(fe)(
                       e.value.style.chart.selector.labels.formatter,
-                      s.value,
+                      o.value,
                       g(ge)({
                         p: e.value.style.chart.xAxis.labels.prefix,
-                        v: s.value,
+                        v: o.value,
                         s: e.value.style.chart.xAxis.labels.suffix,
                         r: e.value.style.chart.selector.labels.rounding
                       })
                     ),
                     e.value.style.chart.selector.labels.fontSize
-                  ) ? s.x - e.value.style.chart.selector.labels.fontSize / 2 : s.x + e.value.style.chart.selector.labels.fontSize / 2,
-                  y: s.y + e.value.style.chart.selector.labels.fontSize / 3,
-                  "text-anchor": Te(
-                    s.x,
+                  ) ? o.x - e.value.style.chart.selector.labels.fontSize / 2 : o.x + e.value.style.chart.selector.labels.fontSize / 2,
+                  y: o.y + e.value.style.chart.selector.labels.fontSize / 3,
+                  "text-anchor": Oe(
+                    o.x,
                     g(fe)(
                       e.value.style.chart.selector.labels.formatter,
-                      s.value,
+                      o.value,
                       g(ge)({
                         p: e.value.style.chart.xAxis.labels.prefix,
-                        v: s.value,
+                        v: o.value,
                         s: e.value.style.chart.xAxis.labels.suffix,
                         r: e.value.style.chart.selector.labels.rounding
                       })
@@ -891,26 +929,26 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
                   style: {
                     pointerEvents: "none"
                   }
-                }, G(g(fe)(
+                }, j(g(fe)(
                   e.value.style.chart.selector.labels.formatter,
-                  s.value,
+                  o.value,
                   g(ge)({
                     p: e.value.style.chart.xAxis.labels.prefix,
-                    v: s.value,
+                    v: o.value,
                     s: e.value.style.chart.xAxis.labels.suffix,
                     r: e.value.style.chart.selector.labels.rounding
                   })
-                )), 9, ka)) : y("", !0)
+                )), 9, Sa)) : y("", !0)
               ], 64))), 256))
             ], 64))), 256))
           ], 64))), 256)) : y("", !0)
         ]),
-        b(a.$slots, "svg", { svg: x.value }, void 0, !0)
+        k(a.$slots, "svg", { svg: x.value }, void 0, !0)
       ], 14, la)) : y("", !0),
-      a.$slots.watermark ? (i(), u("div", wa, [
-        b(a.$slots, "watermark", de(ve({ isPrinting: g(Ae) || g(Se) })), void 0, !0)
+      a.$slots.watermark ? (r(), u("div", _a, [
+        k(a.$slots, "watermark", de(ve({ isPrinting: g(Se) || g(_e) })), void 0, !0)
       ])) : y("", !0),
-      L.value ? y("", !0) : (i(), T(jt, {
+      L.value ? y("", !0) : (r(), T(jt, {
         key: 6,
         config: {
           type: "ridgeline",
@@ -922,53 +960,53 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
           }
         }
       }, null, 8, ["config"])),
-      h("div", {
+      c("div", {
         ref_key: "chartLegend",
-        ref: j
+        ref: q
       }, [
-        e.value.style.chart.legend.show ? (i(), T(Vt, {
-          key: `legend_${J.value}`,
+        e.value.style.chart.legend.show ? (r(), T(Vt, {
+          key: `legend_${K.value}`,
           legendSet: ie.value,
           config: st.value,
           onClickMarker: n[1] || (n[1] = ({ legend: t }) => Le(t.id))
-        }, Be({
-          item: w(({ legend: t }) => [
-            h("div", {
+        }, We({
+          item: C(({ legend: t }) => [
+            c("div", {
               style: P(`opacity:${N.value.includes(t.id) ? 0.5 : 1}`),
-              onClick: (o) => t.segregate()
-            }, G(t.name), 13, Ca)
+              onClick: (s) => t.segregate()
+            }, j(t.name), 13, za)
           ]),
           _: 2
         }, [
           a.$slots.pattern ? {
             name: "legend-pattern",
-            fn: w(({ legend: t, index: o }) => [
+            fn: C(({ legend: t, index: s }) => [
               qe(Gt, {
                 shape: t.shape,
                 radius: 30,
                 stroke: "none",
                 plot: { x: 30, y: 30 },
-                fill: `url(#pattern_${S.value}_${o})`
+                fill: `url(#pattern_${A.value}_${s})`
               }, null, 8, ["shape", "fill"])
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["legendSet", "config"])) : y("", !0),
-        b(a.$slots, "legend", { legend: ie.value }, void 0, !0)
+        k(a.$slots, "legend", { legend: ie.value }, void 0, !0)
       ], 512),
-      a.$slots.source ? (i(), u("div", {
+      a.$slots.source ? (r(), u("div", {
         key: 7,
         ref_key: "source",
         ref: O,
         dir: "auto"
       }, [
-        b(a.$slots, "source", {}, void 0, !0)
+        k(a.$slots, "source", {}, void 0, !0)
       ], 512)) : y("", !0),
-      L.value ? (i(), T(Bt, {
+      L.value ? (r(), T(Bt, {
         key: 8,
         hideDetails: "",
         config: {
-          open: Z.value.showTable,
+          open: ee.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -980,21 +1018,21 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
           }
         }
       }, {
-        content: w(() => [
-          (i(), T(Yt, {
+        content: C(() => [
+          (r(), T(Yt, {
             key: `table_${F.value}`,
             colNames: ce.value.colNames,
             head: ce.value.head,
             body: ce.value.body,
             config: ce.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` :${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: n[2] || (n[2] = (t) => Z.value.showTable = !1)
+            onClose: n[2] || (n[2] = (t) => ee.value.showTable = !1)
           }, {
-            th: w(({ th: t }) => [
-              h("div", { innerHTML: t }, null, 8, $a)
+            th: C(({ th: t }) => [
+              c("div", { innerHTML: t }, null, 8, Ma)
             ]),
-            td: w(({ td: t }) => [
-              Ye(G(t.name ? t.name : g(fe)(
+            td: C(({ td: t }) => [
+              Ve(j(t.name ? t.name : g(fe)(
                 e.value.style.chart.selector.labels.formatter,
                 t,
                 g(ge)({
@@ -1010,31 +1048,31 @@ const Kt = ["xmlns"], Qt = { class: "modal-title" }, Zt = { class: "modal-body"
         ]),
         _: 1
       }, 8, ["config"])) : y("", !0),
-      e.value.style.chart.dialog.show ? (i(), T(ta, {
+      e.value.style.chart.dialog.show ? (r(), T(ta, {
         key: 9,
         ref_key: "dialog",
-        ref: d,
-        onClose: n[3] || (n[3] = (t) => r.value = null),
+        ref: v,
+        onClose: n[3] || (n[3] = (t) => i.value = null),
         backgroundColor: e.value.style.chart.dialog.backgroundColor,
         color: e.value.style.chart.dialog.color,
         headerBg: e.value.style.chart.dialog.header.backgroundColor,
         headerColor: e.value.style.chart.dialog.header.color
       }, {
-        title: w(() => [
-          Ye(G(r.value.name), 1)
+        title: C(() => [
+          Ve(j(i.value.name), 1)
         ]),
-        default: w(() => [
-          r.value ? (i(), T(Jt, {
+        default: C(() => [
+          i.value ? (r(), T(Jt, {
             key: 0,
-            config: Oe.value,
-            dataset: Ee.value
+            config: Ee.value,
+            dataset: Pe.value
           }, null, 8, ["config", "dataset"])) : y("", !0)
         ]),
         _: 1
       }, 8, ["backgroundColor", "color", "headerBg", "headerColor"])) : y("", !0)
     ], 46, aa));
   }
-}, Wa = /* @__PURE__ */ Qe(Aa, [["__scopeId", "data-v-2685d149"]]);
+}, ja = /* @__PURE__ */ Qe(La, [["__scopeId", "data-v-44eef3c6"]]);
 export {
-  Wa as default
+  ja as default
 };