vue-data-ui 3.2.8 → 3.3.0

package/dist/{vue-ui-parallel-coordinate-plot-D_oo5lQW.js → vue-ui-parallel-coordinate-plot-CVhD6IoH.js}

@@ -1,22 +1,23 @@
-import { defineAsyncComponent as O, computed as y, ref as d, toRefs as zt, watch as Z, shallowRef as Xe, onMounted as _t, onBeforeUnmount as Ft, watchEffect as Mt, createElementBlock as u, openBlock as n, unref as v, normalizeStyle as F, normalizeClass as X, createBlock as M, createCommentVNode as m, createElementVNode as N, createVNode as pe, createSlots as Ye, withCtx as b, renderSlot as g, normalizeProps as W, guardReactiveProps as U, Fragment as A, renderList as I, toDisplayString as B, Teleport as Nt, resolveDynamicComponent as It, mergeProps as Lt, createTextVNode as qe, nextTick as Pt } from "vue";
-import { c as me, t as Ot, b as St, p as ee, o as Je, f as Ke, g as Dt, e as Rt, h as Bt, C as Et, T as Ht, U as Wt, V as Ut, X as Vt, L as jt, z as Qe, D as te, x as Gt, y as Xt, a as Ze, d as et, A as Yt } from "./lib-BEpWEyMm.js";
-import { t as tt, u as qt } from "./useResponsive-DfdjqQps.js";
-import { u as Jt, a as at } from "./useNestedProp-BOk-tPdu.js";
-import { u as Kt } from "./usePrinter-w23K-ezx.js";
-import { u as Qt, B as Zt } from "./BaseScanner-BgWxam9d.js";
-import { u as ea } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as ta } from "./useChartAccessibility-9icAAmYg.js";
-import { u as aa } from "./useTimeLabelCollider-CIsgDrl9.js";
-import { t as la } from "./themes-Dw-dDudK.js";
-import oa from "./Title-DG2nloSB.js";
-import sa from "./Legend-BpoFJ8fc.js";
-import { _ as na } from "./Shape-C_C_OmqR.js";
-import ia from "./img-DjWwQXVS.js";
-import { _ as ua } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "width", "height"], ha = { style: { "pointer-events": "none" } }, pa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ma = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ya = { key: 0 }, fa = ["x", "y", "fill", "font-size", "font-weight"], ba = ["fill", "font-size", "font-weight", "text-anchor", "transform"], ga = ["fill", "font-size", "font-weight", "text-anchor", "transform", "innerHTML"], xa = { key: 0 }, ka = ["x", "y", "font-size", "fill"], wa = ["width", "x", "y"], Ca = { style: { width: "100%" } }, Aa = ["x", "y", "fill", "font-weight", "font-size", "onMouseenter", "onMouseleave", "onClick"], $a = ["d", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Ta = ["d", "onMouseenter", "onMouseleave", "onClick"], za = {
+import { defineAsyncComponent as P, computed as p, ref as d, toRefs as Lt, watch as Z, shallowRef as qe, onMounted as St, onBeforeUnmount as Pt, watchEffect as Ot, createElementBlock as u, openBlock as n, unref as v, normalizeStyle as F, normalizeClass as X, createBlock as M, createCommentVNode as y, createElementVNode as N, createVNode as me, createSlots as Je, withCtx as b, renderSlot as g, normalizeProps as U, guardReactiveProps as W, Fragment as A, renderList as I, toDisplayString as B, Teleport as Dt, resolveDynamicComponent as Rt, mergeProps as Bt, createTextVNode as Ke, nextTick as Et } from "vue";
+import { c as ye, t as Ht, b as Ut, p as ee, o as Qe, f as Ze, g as Wt, e as Vt, h as jt, C as Gt, T as Xt, U as Yt, V as qt, X as Jt, L as Kt, z as et, D as te, x as Qt, y as Zt, a as tt, d as at, A as ea } from "./lib-GIYcnm0E.js";
+import { t as lt, u as ta } from "./useResponsive-DfdjqQps.js";
+import { u as aa, a as ot } from "./useNestedProp-mxyyqd0B.js";
+import { u as la } from "./usePrinter-DYRFiw7X.js";
+import { u as oa, B as sa } from "./BaseScanner-BgWxam9d.js";
+import { u as na } from "./useSvgExport-B7-Vrjtu.js";
+import { u as ia } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ua } from "./useChartAccessibility-9icAAmYg.js";
+import { u as ra } from "./useTimeLabelCollider-CIsgDrl9.js";
+import { t as ca } from "./themes-Dw-dDudK.js";
+import va from "./Title-D17CJXko.js";
+import da from "./Legend-DsogCeTb.js";
+import { _ as ha } from "./Shape-DJG2zW7b.js";
+import pa from "./img-6wPuVVtk.js";
+import { _ as ma } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ya = ["id"], fa = ["id"], ba = ["xmlns", "viewBox"], ga = ["x", "y", "width", "height"], xa = { style: { "pointer-events": "none" } }, ka = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], wa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ca = { key: 0 }, Aa = ["x", "y", "fill", "font-size", "font-weight"], $a = ["fill", "font-size", "font-weight", "text-anchor", "transform"], Ta = ["fill", "font-size", "font-weight", "text-anchor", "transform", "innerHTML"], za = { key: 0 }, _a = ["x", "y", "font-size", "fill"], Fa = ["width", "x", "y"], Ma = { style: { width: "100%" } }, Na = ["x", "y", "fill", "font-weight", "font-size", "onMouseenter", "onMouseleave", "onClick"], Ia = ["d", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], La = ["d", "onMouseenter", "onMouseleave", "onClick"], Sa = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, _a = ["id"], Fa = ["onClick"], Ma = ["innerHTML"], Na = {
+}, Pa = ["id"], Oa = ["onClick"], Da = ["innerHTML"], Ra = {
   __name: "vue-ui-parallel-coordinate-plot",
   props: {
     config: {
@@ -33,25 +34,25 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup(lt, { expose: ot, emit: st }) {
-    const nt = O(() => import("./Tooltip-BOXz8skU.js")), it = O(() => import("./BaseIcon-Bz-1GQhu.js")), ut = O(() => import("./vue-ui-accordion-CDIzGCG1.js")), rt = O(() => import("./DataTable-BvjacRbw.js")), ct = O(() => import("./PenAndPaper-CR8q353D.js")), vt = O(() => import("./UserOptions-DsTgvAok.js")), dt = O(() => import("./PackageVersion-C40g0Rfc.js")), ht = O(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_parallel_coordinate_plot: pt } = Jt(), $ = lt, Y = y({
+  setup(st, { expose: nt, emit: it }) {
+    const ut = P(() => import("./Tooltip-CtVdvbZi.js")), rt = P(() => import("./BaseIcon-CtqN7W_g.js")), ct = P(() => import("./vue-ui-accordion-Dch9YrCi.js")), vt = P(() => import("./DataTable-BeI6gYJX.js")), dt = P(() => import("./PenAndPaper-BxbYiPy4.js")), ht = P(() => import("./UserOptions-B3vCIe-u.js")), pt = P(() => import("./PackageVersion-C9oklnuy.js")), mt = P(() => import("./BaseDraggableDialog-q3pgSDTz.js")), { vue_ui_parallel_coordinate_plot: yt } = aa(), $ = st, Y = p({
       get() {
         return !!$.dataset && $.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), ye = d(0), z = d(null), fe = d(null), be = d(null), ge = d(null), xe = d(null), ke = d(0), we = d(0), Ce = d(0), Ae = d(!1), V = d(null), ae = d(null), le = d(null), S = d(me()), D = d(!1);
-    function $e(t) {
-      D.value = t, ye.value += 1;
+    }), fe = d(0), z = d(null), be = d(null), ge = d(null), xe = d(null), ke = d(null), we = d(0), Ce = d(0), Ae = d(0), $e = d(!1), V = d(null), ae = d(null), le = d(null), O = d(ye()), D = d(!1);
+    function Te(t) {
+      D.value = t, fe.value += 1;
     }
-    const e = d(ne()), { loading: R, FINAL_DATASET: mt, manualLoading: oe } = Qt({
-      ...zt($),
+    const e = d(ie()), { loading: R, FINAL_DATASET: ft, manualLoading: oe } = oa({
+      ...Lt($),
       FINAL_CONFIG: e,
-      prepareConfig: ne,
+      prepareConfig: ie,
       callback: () => {
         Promise.resolve().then(async () => {
-          await Pt(), p.value.showTable = e.value.table.show;
+          await Et(), m.value.showTable = e.value.table.show;
         });
       },
       skeletonDataset: [
@@ -89,7 +90,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
           ]
         }
       ],
-      skeletonConfig: Ot({
+      skeletonConfig: Ht({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -116,41 +117,41 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
           }
         }
       })
-    }), { userOptionsVisible: se, setUserOptionsVisibility: Te, keepUserOptionState: ze } = ea({ config: e.value }), { svgRef: _e } = ta({ config: e.value.style.chart.title });
-    function ne() {
-      const t = at({
+    }), { userOptionsVisible: se, setUserOptionsVisibility: ze, keepUserOptionState: _e } = ia({ config: e.value }), { svgRef: ne } = ua({ config: e.value.style.chart.title });
+    function ie() {
+      const t = ot({
         userConfig: $.config,
-        defaultConfig: pt
+        defaultConfig: yt
       });
       return t.theme ? {
-        ...at({
-          userConfig: la.vue_ui_parallel_coordinate_plot[t.theme] || $.config,
+        ...ot({
+          userConfig: ca.vue_ui_parallel_coordinate_plot[t.theme] || $.config,
           defaultConfig: t
         }),
-        customPalette: St[t.theme] || ee
+        customPalette: Ut[t.theme] || ee
       } : t;
     }
     Z(() => $.config, (t) => {
-      R.value || (e.value = ne()), se.value = !e.value.userOptions.showOnChartHover, Me(), ke.value += 1, Ce.value += 1, we.value += 1, p.value.dataLabels.show = e.value.style.chart.yAxis.labels.datapoints.show, p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show;
+      R.value || (e.value = ie()), se.value = !e.value.userOptions.showOnChartHover, Me(), we.value += 1, Ae.value += 1, Ce.value += 1, m.value.dataLabels.show = e.value.style.chart.yAxis.labels.datapoints.show, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 }), Z(() => $.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (oe.value = !1);
     }, { deep: !0 });
-    const L = Xe(null), E = Xe(null);
-    _t(() => {
-      Ae.value = !0, Me();
+    const L = qe(null), E = qe(null);
+    St(() => {
+      $e.value = !0, Me();
     });
-    const Fe = y(() => !!e.value.debug);
+    const Fe = p(() => !!e.value.debug);
     function Me() {
-      if (Je($.dataset) ? (Ke({
+      if (Qe($.dataset) ? (Ze({
         componentName: "VueUiParallelCoordinatePlot",
         type: "dataset",
         debug: Fe.value
       }), oe.value = !0) : $.dataset.forEach((t, o) => {
-        Dt({
+        Wt({
           datasetObject: t,
           requiredAttributes: ["name", "series"]
         }).forEach((a) => {
-          Y.value = !1, Ke({
+          Y.value = !1, Ze({
             componentName: "VueUiParallelCoordinatePlot",
             type: "datasetSerieAttribute",
             property: a,
@@ -158,14 +159,14 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
             debug: Fe.value
           });
         });
-      }), Je($.dataset) || (oe.value = e.value.loading), e.value.responsive) {
-        const t = tt(() => {
-          const { width: o, height: a } = qt({
+      }), Qe($.dataset) || (oe.value = e.value.loading), e.value.responsive) {
+        const t = lt(() => {
+          const { width: o, height: a } = ta({
             chart: z.value,
-            title: e.value.style.chart.title.text ? fe.value : null,
-            legend: e.value.style.chart.legend.show ? be.value : null,
-            source: ge.value,
-            noTitle: xe.value
+            title: e.value.style.chart.title.text ? be.value : null,
+            legend: e.value.style.chart.legend.show ? ge.value : null,
+            source: xe.value,
+            noTitle: ke.value
           });
           requestAnimationFrame(() => {
             c.value.width = o, c.value.height = a - 12, e.value.responsiveProportionalSizing ? (c.value.plotSize = te({
@@ -198,14 +199,14 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         L.value && (E.value && L.value.unobserve(E.value), L.value.disconnect()), L.value = new ResizeObserver(t), E.value = z.value.parentNode, L.value.observe(E.value);
       }
     }
-    Ft(() => {
+    Pt(() => {
       L.value && (E.value && L.value.unobserve(E.value), L.value.disconnect());
     });
-    const { isPrinting: Ne, isImaging: Ie, generatePdf: Le, generateImage: Pe } = Kt({
-      elementId: `pcp_${S.value}`,
+    const { isPrinting: Ne, isImaging: Ie, generatePdf: Le, generateImage: Se } = la({
+      elementId: `pcp_${O.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-parallel-coordinate-plot",
       options: e.value.userOptions.print
-    }), yt = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), c = d({
+    }), bt = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), c = d({
       height: e.value.style.chart.height,
       width: e.value.style.chart.width,
       plotSize: e.value.style.chart.plots.radius,
@@ -214,19 +215,19 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
       // ratio 42.85
       datapointFontSize: e.value.style.chart.yAxis.labels.datapoints.fontSize,
       axisNameFontSize: e.value.style.chart.yAxis.labels.axisNamesFontSize
-    }), Oe = y(() => c.value.width), Se = y(() => c.value.height), j = d(0), ft = tt((t) => {
+    }), Pe = p(() => c.value.width), Oe = p(() => c.value.height), j = d(0), gt = lt((t) => {
       j.value = t;
     }, 100);
-    Mt((t) => {
+    Ot((t) => {
       const o = le.value;
       if (!o) return;
       const a = new ResizeObserver((s) => {
-        ft(s[0].contentRect.height);
+        gt(s[0].contentRect.height);
       });
       a.observe(o), t(() => a.disconnect());
     });
-    const h = y(() => {
-      const { top: t, right: o, bottom: a, left: s } = e.value.style.chart.padding, l = Se.value, r = Oe.value;
+    const h = p(() => {
+      const { top: t, right: o, bottom: a, left: s } = e.value.style.chart.padding, l = Oe.value, r = Pe.value;
       return {
         chartHeight: Math.max(1e-3, l),
         chartWidth: Math.max(1e-3, r),
@@ -237,7 +238,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         right: r - o,
         bottom: l - a - c.value.datapointFontSize
       };
-    }), bt = y(() => Rt(e.value.customPalette)), p = d({
+    }), xt = p(() => Vt(e.value.customPalette)), m = d({
       dataLabels: {
         show: e.value.style.chart.yAxis.labels.datapoints.show
       },
@@ -245,7 +246,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
       showTooltip: e.value.style.chart.tooltip.show
     });
     Z(e, () => {
-      p.value = {
+      m.value = {
         dataLabels: {
           show: e.value.style.chart.yAxis.labels.datapoints.show
         },
@@ -257,41 +258,42 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
     function De(t) {
       _.value.includes(t) ? _.value = _.value.filter((o) => o !== t) : _.value.push(t);
     }
-    const P = y(() => mt.value.map((t, o) => {
-      const a = Bt(t.color) || bt.value[o] || ee[o] || ee[o % ee.length];
+    const S = p(() => ft.value.map((t, o) => {
+      const a = jt(t.color) || xt.value[o] || ee[o] || ee[o % ee.length];
       return {
         ...t,
         series: t.series.map((s) => ({
           ...s,
-          id: me(),
+          id: ye(),
           color: a
         })),
         seriesIndex: o,
         color: a,
-        id: me(),
+        id: ye(),
         shape: t.shape || "circle"
       };
-    })), gt = y(() => P.value.map((t) => ({
+    })), Re = p(() => S.value.map((t) => ({
       ...t,
       opacity: _.value.includes(t.id) ? 0.5 : 1,
       segregate: () => De(t.id),
-      isSegregated: _.value.includes(t.id)
-    }))), xt = y(() => ({
+      isSegregated: _.value.includes(t.id),
+      shape: "circle"
+    }))), kt = p(() => ({
       cy: "pcp-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" : ""
-    })), Re = y(() => Math.max(
-      ...P.value.filter((t) => !_.value.includes(t.id)).map((t) => Math.max(...t.series.flatMap((o) => o.values.length)))
-    )), C = y(() => h.value.width / Re.value), ie = y(() => P.value.filter((t) => !_.value.includes(t.id))), f = y(() => {
+    })), Be = p(() => Math.max(
+      ...S.value.filter((t) => !_.value.includes(t.id)).map((t) => Math.max(...t.series.flatMap((o) => o.values.length)))
+    )), C = p(() => h.value.width / Be.value), ue = p(() => S.value.filter((t) => !_.value.includes(t.id))), f = p(() => {
       let t = [];
-      for (let o = 0; o < Re.value; o += 1) {
-        const a = Math.min(...ie.value.flatMap((x) => x.series.map((k) => k.values[o] || 0) || 0)), s = Math.max(...ie.value.flatMap((x) => x.series.map((k) => k.values[o] || 0) || 0)), l = s === a ? a / 4 : a, r = s === a ? s * 2 : s, i = Et(l, r, e.value.style.chart.yAxis.scaleTicks), T = i.ticks.map((x, k) => {
-          const $t = i.min < 0 ? x + Math.abs(i.min) : x - Math.abs(i.min), Tt = i.min < 0 ? i.max + Math.abs(i.min) : i.max - Math.abs(i.min);
+      for (let o = 0; o < Be.value; o += 1) {
+        const a = Math.min(...ue.value.flatMap((x) => x.series.map((k) => k.values[o] || 0) || 0)), s = Math.max(...ue.value.flatMap((x) => x.series.map((k) => k.values[o] || 0) || 0)), l = s === a ? a / 4 : a, r = s === a ? s * 2 : s, i = Gt(l, r, e.value.style.chart.yAxis.scaleTicks), T = i.ticks.map((x, k) => {
+          const Nt = i.min < 0 ? x + Math.abs(i.min) : x - Math.abs(i.min), It = i.min < 0 ? i.max + Math.abs(i.min) : i.max - Math.abs(i.min);
           return {
-            y: h.value.bottom - h.value.height * ($t / Tt),
+            y: h.value.bottom - h.value.height * (Nt / It),
             x: h.value.left + C.value * o + C.value / 2,
             value: x
           };
@@ -303,7 +305,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         });
       }
       return t;
-    }), ue = y(() => ie.value.map((t, o) => ({
+    }), re = p(() => ue.value.map((t, o) => ({
       ...t,
       series: t.series.map((a, s) => ({
         ...a,
@@ -325,7 +327,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
     })).map((t) => ({
       ...t,
       series: t.series.map((o) => {
-        const a = Ht(o.datapoints), s = Wt(o.datapoints), l = Ut(e.value.style.chart.lines.smooth ? `M ${s}` : `M ${a}`);
+        const a = Xt(o.datapoints), s = Yt(o.datapoints), l = qt(e.value.style.chart.lines.smooth ? `M ${s}` : `M ${a}`);
         return {
           ...o,
           smoothPath: s,
@@ -334,11 +336,11 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         };
       })
     })));
-    function Be({ value: t, index: o, datapoint: a }) {
-      return Ze(
+    function Ee({ value: t, index: o, datapoint: a }) {
+      return tt(
         e.value.style.chart.yAxis.labels.formatters[o] || null,
         t,
-        et({
+        at({
           p: e.value.style.chart.yAxis.labels.prefixes[o] || "",
           v: t,
           s: e.value.style.chart.yAxis.labels.suffixes[o] || "",
@@ -347,24 +349,24 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         { datapoint: a, seriesIndex: o }
       );
     }
-    const w = d(null), re = d(null), ce = d(!1), ve = d("");
+    const w = d(null), ce = d(null), ve = d(!1), de = d("");
     function q({ shape: t, serie: o, S: a }) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: { ...o, shape: t }, seriesIndex: a }), w.value = null, ce.value = null;
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: { ...o, shape: t }, seriesIndex: a }), w.value = null, ve.value = null;
     }
     function J({ shape: t, serieName: o, serie: a, relativeIndex: s, seriesIndex: l, S: r }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: { ...a, shape: t }, seriesIndex: r }), re.value = { serie: a, relativeIndex: s, seriesIndex: l, series: P.value, scales: f.value }, ce.value = !0, w.value = a.id;
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: { ...a, shape: t }, seriesIndex: r }), ce.value = { serie: a, relativeIndex: s, seriesIndex: l, series: S.value, scales: f.value }, ve.value = !0, w.value = a.id;
       let i = "";
       const T = e.value.style.chart.tooltip.customFormat;
-      Qe(T) && Yt(() => T({
+      et(T) && ea(() => T({
         serie: a,
         seriesIndex: a.seriesIndex,
-        series: P.value,
+        series: S.value,
         config: e.value,
         scales: f.value
-      })) ? ve.value = T({
+      })) ? de.value = T({
         serie: a,
         seriesIndex: a.seriesIndex,
-        series: P.value,
+        series: S.value,
         config: e.value,
         scales: f.value
       }) : (i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${o ? o + " - " : ""}${a.name}</div>`, f.value.map((x) => x.name).forEach((x, k) => {
@@ -372,10 +374,10 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
                 <div class="vue-ui-tooltip-item" style="text-align:left">
                     <span>${x}: </span>
                     <span>
-                        ${Ze(
+                        ${tt(
           e.value.style.chart.yAxis.labels.formatters[k] || null,
           a.datapoints[k].value,
-          et({
+          at({
             p: e.value.style.chart.yAxis.labels.prefixes[k] || "",
             v: a.datapoints[k].value,
             s: e.value.style.chart.yAxis.labels.suffixes[k] || "",
@@ -386,13 +388,13 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
                     </span>
                 </div>
             `, e.value.style.chart.comments.showInTooltip && a.datapoints[k].comment && (i += `<div class="vue-data-ui-tooltip-comment" style="background:${a.color}20; padding: 6px; margin-bottom: 6px; border-left: 1px solid ${a.color}">${a.datapoints[k].comment}</div>`);
-      }), ve.value = `<div>${i}</div>`);
+      }), de.value = `<div>${i}</div>`);
     }
-    function kt() {
-      return P.value;
+    function wt() {
+      return S.value;
     }
-    const H = y(() => {
-      const t = [e.value.table.columnNames.series].concat([e.value.table.columnNames.item]).concat(f.value.map((l) => l.name)), o = ue.value.flatMap((l, r) => l.series.map((i) => [l.name].concat([i.name]).concat(i.values))), a = {
+    const H = p(() => {
+      const t = [e.value.table.columnNames.series].concat([e.value.table.columnNames.item]).concat(f.value.map((l) => l.name)), o = re.value.flatMap((l, r) => l.series.map((i) => [l.name].concat([i.name]).concat(i.values))), a = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -411,41 +413,41 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         config: a,
         colNames: s
       };
-    }), Ee = y(() => ue.value.length === 0 ? { head: [], body: [], config: {}, columnNames: [] } : {
+    }), He = p(() => re.value.length === 0 ? { head: [], body: [], config: {}, columnNames: [] } : {
       head: H.value.head,
       body: H.value.body
     });
-    function de(t = null) {
-      const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = Ee.value.head, s = Ee.value.body, l = o.concat([a]).concat(s), r = Gt(l);
-      t ? t(r) : Xt({ csvContent: r, title: e.value.style.chart.title.text || "vue-ui-parallel-coordinate-plot" });
+    function he(t = null) {
+      const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = He.value.head, s = He.value.body, l = o.concat([a]).concat(s), r = Qt(l);
+      t ? t(r) : Zt({ csvContent: r, title: e.value.style.chart.title.text || "vue-ui-parallel-coordinate-plot" });
     }
-    const He = st;
+    const Ue = it;
     function K({ serie: t, shape: o, S: a }) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: { ...t, shape: o }, seriesIndex: a }), He("selectDatapoint", t);
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: { ...t, shape: o }, seriesIndex: a }), Ue("selectDatapoint", t);
     }
     function We(t) {
-      He("selectLegend", {
+      Ue("selectLegend", {
         ...t,
         isSegregated: !t.isSegregated,
         opacity: t.isSegregated ? 1 : 0.5
       });
     }
-    function Ue() {
-      p.value.showTable = !p.value.showTable;
-    }
     function Ve() {
-      p.value.dataLabels.show = !p.value.dataLabels.show;
+      m.value.showTable = !m.value.showTable;
     }
     function je() {
-      p.value.showTooltip = !p.value.showTooltip;
+      m.value.dataLabels.show = !m.value.dataLabels.show;
+    }
+    function Ge() {
+      m.value.showTooltip = !m.value.showTooltip;
     }
     const Q = d(!1);
-    function he() {
+    function pe() {
       Q.value = !Q.value;
     }
-    async function wt({ scale: t = 2 } = {}) {
+    async function Ct({ scale: t = 2 } = {}) {
       if (!z.value) return;
-      const { width: o, height: a } = z.value.getBoundingClientRect(), s = o / a, { imageUri: l, base64: r } = await ia({ domElement: z.value, base64: !0, img: !0, scale: t });
+      const { width: o, height: a } = z.value.getBoundingClientRect(), s = o / a, { imageUri: l, base64: r } = await pa({ domElement: z.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: l,
         base64: r,
@@ -455,24 +457,24 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         aspectRatio: s
       };
     }
-    const Ct = d({ start: 0, end: 1 }), At = y(() => f.value.map((t) => t.name));
-    aa({
+    const At = d({ start: 0, end: 1 }), $t = p(() => f.value.map((t) => t.name));
+    ra({
       timeLabelsEls: le,
-      timeLabels: At,
-      slicer: Ct,
+      timeLabels: $t,
+      slicer: At,
       configRef: e,
       rotationPath: ["style", "chart", "yAxis", "labels", "axisNamesRotation"],
       autoRotatePath: ["style", "chart", "yAxis", "labels", "axisNamesAutoRotate", "enable"],
       isAutoSize: !1,
-      width: Oe,
-      height: Se,
+      width: Pe,
+      height: Oe,
       targetClass: ".vue-ui-parallel-coordinate-plot-x-label",
       rotation: e.value.style.chart.yAxis.labels.axisNamesAutoRotate.angle
     });
-    const G = y(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, o = p.value.showTable;
+    const G = p(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, o = m.value.showTable;
       return {
-        component: t ? ht : ut,
+        component: t ? mt : ct,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -499,55 +501,70 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         }
       };
     });
-    Z(() => p.value.showTable, (t) => {
+    Z(() => m.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && V.value ? V.value.open() : "close" in V.value && V.value.close());
     });
-    function Ge() {
-      p.value.showTable = !1, ae.value && ae.value.setTableIconState(!1);
+    function Xe() {
+      m.value.showTable = !1, ae.value && ae.value.setTableIconState(!1);
     }
-    return ot({
-      getData: kt,
-      getImage: wt,
-      generateCsv: de,
+    const Tt = p(() => e.value.style.chart.backgroundColor), zt = p(() => e.value.style.chart.legend), _t = p(() => e.value.style.chart.title), { exportSvg: Ft, getSvg: Mt } = na({
+      svg: ne,
+      title: _t,
+      legend: zt,
+      legendItems: Re,
+      backgroundColor: Tt
+    });
+    async function Ye({ isCb: t }) {
+      if (t) {
+        const { blob: o, url: a, text: s, dataUrl: l } = await Mt();
+        e.value.userOptions.callbacks.svg({ blob: o, url: a, text: s, dataUrl: l });
+      } else
+        Ft();
+    }
+    return nt({
+      getData: wt,
+      getImage: Ct,
+      generateCsv: he,
       generatePdf: Le,
-      generateImage: Pe,
-      toggleTable: Ue,
-      toggleLabels: Ve,
-      toggleTooltip: je,
-      toggleAnnotator: he,
-      toggleFullscreen: $e
+      generateImage: Se,
+      generateSvg: Ye,
+      toggleTable: Ve,
+      toggleLabels: je,
+      toggleTooltip: Ge,
+      toggleAnnotator: pe,
+      toggleFullscreen: Te
     }), (t, o) => (n(), u("div", {
       ref_key: "pcpChart",
       ref: z,
       class: X(`vue-data-ui-component vue-ui-pcp ${D.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: F(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      id: `pcp_${S.value}`,
-      onMouseenter: o[2] || (o[2] = () => v(Te)(!0)),
-      onMouseleave: o[3] || (o[3] = () => v(Te)(!1))
+      id: `pcp_${O.value}`,
+      onMouseenter: o[2] || (o[2] = () => v(ze)(!0)),
+      onMouseleave: o[3] || (o[3] = () => v(ze)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), M(v(ct), {
+      e.value.userOptions.buttons.annotator ? (n(), M(v(dt), {
         key: 0,
-        svgRef: v(_e),
+        svgRef: v(ne),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: Q.value,
-        onClose: he
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
-      yt.value ? (n(), u("div", {
+        onClose: pe
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
+      bt.value ? (n(), u("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: xe,
+        ref: ke,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : m("", !0),
+      }, null, 512)) : y("", !0),
       e.value.style.chart.title.text ? (n(), u("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: fe,
+        ref: be,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (n(), M(oa, {
-          key: `title_${ke.value}`,
+        (n(), M(va, {
+          key: `title_${we.value}`,
           config: {
             title: {
               cy: "pcp-div-title",
@@ -559,28 +576,29 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : m("", !0),
+      ], 512)) : y("", !0),
       N("div", {
-        id: `legend-top-${S.value}`
-      }, null, 8, ca),
-      e.value.userOptions.show && Y.value && (v(ze) || v(se)) ? (n(), M(v(vt), {
+        id: `legend-top-${O.value}`
+      }, null, 8, fa),
+      e.value.userOptions.show && Y.value && (v(_e) || v(se)) ? (n(), M(v(ht), {
         ref_key: "userOptionsRef",
         ref: ae,
-        key: `user_options_${ye.value}`,
+        key: `user_options_${fe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: v(Ne),
         isImaging: v(Ie),
-        uid: S.value,
+        uid: O.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: D.value,
-        isTooltip: p.value.showTooltip,
+        isTooltip: m.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: z.value,
         position: e.value.userOptions.position,
@@ -589,22 +607,23 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: $e,
+        onToggleFullscreen: Te,
         onGeneratePdf: v(Le),
-        onGenerateCsv: de,
-        onGenerateImage: v(Pe),
-        onToggleTable: Ue,
-        onToggleLabels: Ve,
-        onToggleTooltip: je,
-        onToggleAnnotator: he,
+        onGenerateCsv: he,
+        onGenerateImage: v(Se),
+        onGenerateSvg: Ye,
+        onToggleTable: Ve,
+        onToggleLabels: je,
+        onToggleTooltip: Ge,
+        onToggleAnnotator: pe,
         style: F({
-          visibility: v(ze) ? v(se) ? "visible" : "hidden" : "visible"
+          visibility: v(_e) ? v(se) ? "visible" : "hidden" : "visible"
         })
-      }, Ye({ _: 2 }, [
+      }, Je({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: b(({ isOpen: a, color: s }) => [
-            g(t.$slots, "menuIcon", W(U({ isOpen: a, color: s })), void 0, !0)
+            g(t.$slots, "menuIcon", U(W({ isOpen: a, color: s })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -646,27 +665,27 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: b(({ toggleFullscreen: a, isFullscreen: s }) => [
-            g(t.$slots, "optionFullscreen", W(U({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
+            g(t.$slots, "optionFullscreen", U(W({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: b(({ toggleAnnotator: a, isAnnotator: s }) => [
-            g(t.$slots, "optionAnnotator", W(U({ toggleAnnotator: a, isAnnotator: s })), void 0, !0)
+            g(t.$slots, "optionAnnotator", U(W({ toggleAnnotator: a, isAnnotator: s })), void 0, !0)
           ]),
           key: "7"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : m("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
       (n(), u("svg", {
         ref_key: "svgRef",
-        ref: _e,
-        xmlns: v(Vt),
+        ref: ne,
+        xmlns: v(Jt),
         class: X({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
         viewBox: `0 0 ${h.value.chartWidth <= 0 ? 10 : h.value.chartWidth} ${h.value.chartHeight <= 0 ? 10 : h.value.chartHeight}`,
         style: F(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        pe(v(dt)),
+        me(v(pt)),
         t.$slots["chart-background"] ? (n(), u("foreignObject", {
           key: 0,
           x: h.value.left,
@@ -678,8 +697,8 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
           }
         }, [
           g(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, da)) : m("", !0),
-        (n(!0), u(A, null, I(f.value, (a, s) => (n(), u("g", ha, [
+        ], 8, ga)) : y("", !0),
+        (n(!0), u(A, null, I(f.value, (a, s) => (n(), u("g", xa, [
           N("line", {
             x1: h.value.left + C.value * s + C.value / 2,
             x2: h.value.left + C.value * s + C.value / 2,
@@ -687,7 +706,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
             y2: h.value.bottom,
             stroke: e.value.style.chart.yAxis.stroke,
             "stroke-width": e.value.style.chart.yAxis.strokeWidth
-          }, null, 8, pa),
+          }, null, 8, ka),
           e.value.style.chart.yAxis.labels.ticks.show ? (n(), u(A, { key: 0 }, [
             (n(!0), u(A, null, I(a.ticks, (l) => (n(), u("line", {
               x1: l.x,
@@ -696,9 +715,9 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
               y2: l.y,
               stroke: e.value.style.chart.yAxis.stroke,
               "stroke-width": e.value.style.chart.yAxis.strokeWidth,
-              style: F(`opacity:${w.value && !p.value.showTooltip ? 0.2 : 1}`)
-            }, null, 12, ma))), 256)),
-            v(R) ? m("", !0) : (n(), u("g", ya, [
+              style: F(`opacity:${w.value && !m.value.showTooltip ? 0.2 : 1}`)
+            }, null, 12, wa))), 256)),
+            v(R) ? y("", !0) : (n(), u("g", Ca, [
               (n(!0), u(A, null, I(a.ticks, (l) => (n(), u("text", {
                 x: l.x - 12 + e.value.style.chart.yAxis.labels.ticks.offsetX,
                 y: l.y + e.value.style.chart.yAxis.labels.ticks.offsetY + c.value.ticksFontSize / 3,
@@ -706,10 +725,10 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
                 "text-anchor": "end",
                 "font-size": c.value.ticksFontSize,
                 "font-weight": e.value.style.chart.yAxis.labels.ticks.bold ? "bold" : "normal",
-                style: F(`opacity:${w.value && !p.value.showTooltip ? 0.2 : 1}`)
-              }, B(Be({ value: l.value, index: s, datapoint: l })), 13, fa))), 256))
+                style: F(`opacity:${w.value && !m.value.showTooltip ? 0.2 : 1}`)
+              }, B(Ee({ value: l.value, index: s, datapoint: l })), 13, Aa))), 256))
             ]))
-          ], 64)) : m("", !0)
+          ], 64)) : y("", !0)
         ]))), 256)),
         e.value.style.chart.yAxis.labels.showAxisNames ? (n(), u("g", {
           key: 1,
@@ -726,14 +745,14 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
               "font-weight": e.value.style.chart.yAxis.labels.axisNamesBold ? "bold" : "",
               "text-anchor": e.value.style.chart.yAxis.labels.axisNamesRotation === 0 ? "middle" : e.value.style.chart.yAxis.labels.axisNamesRotation < 0 ? "start" : "end",
               transform: `translate(${h.value.left + C.value * s + C.value / 2}, ${j.value - c.value.axisNameFontSize}), rotate(${e.value.style.chart.yAxis.labels.axisNamesRotation})`,
-              innerHTML: v(jt)({
+              innerHTML: v(Kt)({
                 content: String(a.name),
                 fontSize: c.value.axisNameFontSize,
                 fill: e.value.style.chart.yAxis.labels.axisNamesColor,
                 x: 0,
                 y: 0
               })
-            }, null, 8, ga)) : (n(), u("text", {
+            }, null, 8, Ta)) : (n(), u("text", {
               key: 0,
               class: "vue-ui-parallel-coordinate-plot-x-label",
               fill: e.value.style.chart.yAxis.labels.axisNamesColor,
@@ -741,13 +760,13 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
               "font-weight": e.value.style.chart.yAxis.labels.axisNamesBold ? "bold" : "",
               "text-anchor": e.value.style.chart.yAxis.labels.axisNamesRotation === 0 ? "middle" : e.value.style.chart.yAxis.labels.axisNamesRotation < 0 ? "start" : "end",
               transform: `translate(${h.value.left + C.value * s + C.value / 2}, ${j.value - c.value.axisNameFontSize}), rotate(${e.value.style.chart.yAxis.labels.axisNamesRotation})`
-            }, B(a.name), 9, ba))
+            }, B(a.name), 9, $a))
           ], 64))), 256))
-        ], 512)) : m("", !0),
-        (n(!0), u(A, null, I(ue.value, (a, s) => (n(), u("g", null, [
+        ], 512)) : y("", !0),
+        (n(!0), u(A, null, I(re.value, (a, s) => (n(), u("g", null, [
           (n(!0), u(A, null, I(a.series, (l, r) => (n(), u("g", null, [
-            e.value.style.chart.plots.show ? (n(), u("g", xa, [
-              (n(!0), u(A, null, I(l.datapoints, (i, T) => (n(), M(na, {
+            e.value.style.chart.plots.show ? (n(), u("g", za, [
+              (n(!0), u(A, null, I(l.datapoints, (i, T) => (n(), M(ha, {
                 plot: { x: i.x, y: i.y },
                 color: a.color,
                 shape: a.shape,
@@ -766,7 +785,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
                 style: F(`opacity:${w.value ? w.value === l.id ? e.value.style.chart.plots.opacity : 0.2 : e.value.style.chart.plots.opacity}`),
                 onClick: () => K({ serie: l, shape: a.shape, S: s })
               }, null, 8, ["plot", "color", "shape", "radius", "stroke", "onMouseenter", "onMouseleave", "style", "onClick"]))), 256)),
-              p.value.showTooltip ? m("", !0) : (n(), u(A, { key: 0 }, [
+              m.value.showTooltip ? y("", !0) : (n(), u(A, { key: 0 }, [
                 w.value && w.value === l.id && l.datapoints.length ? (n(), u("text", {
                   key: 0,
                   x: l.datapoints[0].x - c.value.ticksFontSize,
@@ -775,7 +794,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
                   "font-size": c.value.ticksFontSize,
                   fill: a.color,
                   "font-weight": "bold"
-                }, B(l.name), 9, ka)) : m("", !0)
+                }, B(l.name), 9, _a)) : y("", !0)
               ], 64)),
               e.value.style.chart.comments.show ? (n(!0), u(A, { key: 1 }, I(l.datapoints, (i) => (n(), u("g", null, [
                 i.comment ? (n(), u("foreignObject", {
@@ -786,15 +805,15 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
                   x: i.x - e.value.style.chart.comments.width / 2 + e.value.style.chart.comments.offsetX,
                   y: i.y + e.value.style.chart.comments.offsetY + 6
                 }, [
-                  N("div", Ca, [
+                  N("div", Ma, [
                     g(t.$slots, "plot-comment", {
                       plot: { ...i, color: a.color }
                     }, void 0, !0)
                   ])
-                ], 8, wa)) : m("", !0)
-              ]))), 256)) : m("", !0)
-            ])) : m("", !0),
-            !v(R) && (p.value.dataLabels.show || w.value && w.value === l.id) ? (n(!0), u(A, { key: 1 }, I(l.datapoints, (i, T) => (n(), u("text", {
+                ], 8, Fa)) : y("", !0)
+              ]))), 256)) : y("", !0)
+            ])) : y("", !0),
+            !v(R) && (m.value.dataLabels.show || w.value && w.value === l.id) ? (n(!0), u(A, { key: 1 }, I(l.datapoints, (i, T) => (n(), u("text", {
               x: i.x + 12 + e.value.style.chart.yAxis.labels.datapoints.offsetX,
               y: i.y + e.value.style.chart.yAxis.labels.datapoints.offsetY + c.value.datapointFontSize / 3,
               fill: e.value.style.chart.yAxis.labels.datapoints.useSerieColor ? a.color : e.value.style.chart.yAxis.labels.datapoints.color,
@@ -813,7 +832,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
               onMouseleave: (x) => q({ serie: l, shape: a.shape, S: s }),
               onClick: () => K({ serie: l, shape: a.shape, S: s }),
               style: F(`opacity:${w.value ? w.value === l.id ? 1 : 0.2 : 1}`)
-            }, B(Be({ value: i.value, index: T, datapoint: i })), 47, Aa))), 256)) : m("", !0),
+            }, B(Ee({ value: i.value, index: T, datapoint: i })), 47, Na))), 256)) : y("", !0),
             N("path", {
               d: `M${e.value.style.chart.lines.smooth ? l.smoothPath : l.straightPath}`,
               stroke: a.color,
@@ -831,8 +850,8 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
               onMouseleave: (i) => q({ serie: l, shape: a.shape, S: s }),
               onClick: () => K({ serie: l, shape: a.shape, S: s }),
               style: F(`opacity:${w.value ? w.value === l.id ? e.value.style.chart.lines.opacity : 0.2 : e.value.style.chart.lines.opacity}; stroke-dasharray:${l.pathLength}; stroke-dashoffset: ${e.value.useCssAnimation ? l.pathLength : 0}`)
-            }, null, 46, $a),
-            p.value.showTooltip ? (n(), u("path", {
+            }, null, 46, Ia),
+            m.value.showTooltip ? (n(), u("path", {
               key: 2,
               d: `M${e.value.style.chart.lines.smooth ? l.smoothPath : l.straightPath}`,
               stroke: "transparent",
@@ -850,29 +869,29 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
               onMouseleave: (i) => q({ serie: l, shape: a.shape, S: s }),
               onClick: () => K({ serie: l, shape: a.shape, S: s }),
               style: { opacity: "0" }
-            }, null, 42, Ta)) : m("", !0)
+            }, null, 42, La)) : y("", !0)
           ]))), 256))
         ]))), 256)),
         g(t.$slots, "svg", { svg: h.value }, void 0, !0)
-      ], 14, va)),
-      t.$slots.watermark ? (n(), u("div", za, [
-        g(t.$slots, "watermark", W(U({ isPrinting: v(Ne) || v(Ie) })), void 0, !0)
-      ])) : m("", !0),
+      ], 14, ba)),
+      t.$slots.watermark ? (n(), u("div", Sa, [
+        g(t.$slots, "watermark", U(W({ isPrinting: v(Ne) || v(Ie) })), void 0, !0)
+      ])) : y("", !0),
       N("div", {
-        id: `legend-bottom-${S.value}`
-      }, null, 8, _a),
-      Ae.value ? (n(), M(Nt, {
+        id: `legend-bottom-${O.value}`
+      }, null, 8, Pa),
+      $e.value ? (n(), M(Dt, {
         key: 5,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${S.value}` : `#legend-bottom-${S.value}`
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${O.value}` : `#legend-bottom-${O.value}`
       }, [
         N("div", {
           ref_key: "chartLegend",
-          ref: be
+          ref: ge
         }, [
-          e.value.style.chart.legend.show && Y.value ? (n(), M(sa, {
-            key: `legend_${we.value}`,
-            legendSet: gt.value,
-            config: xt.value,
+          e.value.style.chart.legend.show && Y.value ? (n(), M(da, {
+            key: `legend_${Ce.value}`,
+            legendSet: Re.value,
+            config: kt.value,
             onClickMarker: o[0] || (o[0] = ({ legend: a }) => {
               De(a.id), We(a);
             })
@@ -883,25 +902,25 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
                   a.segregate(), We(a);
                 },
                 style: F(`opacity:${_.value.includes(a.id) ? 0.5 : 1}`)
-              }, B(a.name), 13, Fa)
+              }, B(a.name), 13, Oa)
             ]),
             _: 1
           }, 8, ["legendSet", "config"])) : g(t.$slots, "legend", {
             key: 1,
-            legend: P.value
+            legend: S.value
           }, void 0, !0)
         ], 512)
-      ], 8, ["to"])) : m("", !0),
+      ], 8, ["to"])) : y("", !0),
       t.$slots.source ? (n(), u("div", {
         key: 6,
         ref_key: "source",
-        ref: ge,
+        ref: xe,
         dir: "auto"
       }, [
         g(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : m("", !0),
-      pe(v(nt), {
-        show: p.value.showTooltip && ce.value,
+      ], 512)) : y("", !0),
+      me(v(ut), {
+        show: m.value.showTooltip && ve.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         fontSize: e.value.style.chart.tooltip.fontSize,
@@ -912,43 +931,43 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: z.value,
-        content: ve.value,
+        content: de.value,
         isFullscreen: D.value,
-        isCustom: v(Qe)(e.value.style.chart.tooltip.customFormat),
+        isCustom: v(et)(e.value.style.chart.tooltip.customFormat),
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
         "tooltip-before": b(() => [
-          g(t.$slots, "tooltip-before", W(U({ ...re.value })), void 0, !0)
+          g(t.$slots, "tooltip-before", U(W({ ...ce.value })), void 0, !0)
         ]),
         "tooltip-after": b(() => [
-          g(t.$slots, "tooltip-after", W(U({ ...re.value })), void 0, !0)
+          g(t.$slots, "tooltip-after", U(W({ ...ce.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      Y.value && e.value.userOptions.buttons.table ? (n(), M(It(G.value.component), Lt({ key: 7 }, G.value.props, {
+      Y.value && e.value.userOptions.buttons.table ? (n(), M(Rt(G.value.component), Bt({ key: 7 }, G.value.props, {
         ref_key: "tableUnit",
         ref: V,
-        onClose: Ge
-      }), Ye({
+        onClose: Xe
+      }), Je({
         content: b(() => [
-          (n(), M(v(rt), {
-            key: `table_${Ce.value}`,
+          (n(), M(v(vt), {
+            key: `table_${Ae.value}`,
             colNames: H.value.colNames,
             head: H.value.head,
             body: H.value.body,
             config: H.value.config,
             title: e.value.table.useDialog ? "" : G.value.title,
             withCloseButton: !e.value.table.useDialog,
-            onClose: Ge
+            onClose: Xe
           }, {
             th: b(({ th: a }) => [
-              N("div", { innerHTML: a }, null, 8, Ma)
+              N("div", { innerHTML: a }, null, 8, Da)
             ]),
             td: b(({ td: a }) => [
-              qe(B(a), 1)
+              Ke(B(a), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -958,7 +977,7 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
         e.value.table.useDialog ? {
           name: "title",
           fn: b(() => [
-            qe(B(G.value.title), 1)
+            Ke(B(G.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -968,9 +987,9 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
             N("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: o[1] || (o[1] = (a) => de(e.value.userOptions.callbacks.csv))
+              onClick: o[1] || (o[1] = (a) => he(e.value.userOptions.callbacks.csv))
             }, [
-              pe(v(it), {
+              me(v(rt), {
                 name: "excel",
                 stroke: G.value.props.color
               }, null, 8, ["stroke"])
@@ -978,11 +997,11 @@ const ra = ["id"], ca = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "widt
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : m("", !0),
-      v(R) ? (n(), M(Zt, { key: 8 })) : m("", !0)
-    ], 46, ra));
+      ]), 1040)) : y("", !0),
+      v(R) ? (n(), M(sa, { key: 8 })) : y("", !0)
+    ], 46, ya));
   }
-}, Xa = /* @__PURE__ */ ua(Na, [["__scopeId", "data-v-2549113a"]]);
+}, tl = /* @__PURE__ */ ma(Ra, [["__scopeId", "data-v-3420293f"]]);
 export {
-  Xa as default
+  tl as default
 };