vue-data-ui 2.3.29 → 2.3.31

package/dist/{vue-ui-parallel-coordinate-plot-CP4V0K8m.js → vue-ui-parallel-coordinate-plot-BALCmQ5Z.js}

@@ -1,20 +1,20 @@
-import { computed as y, ref as f, onMounted as Ie, onBeforeUnmount as Ne, openBlock as u, createElementBlock as i, normalizeClass as E, normalizeStyle as _, createVNode as K, createCommentVNode as g, createBlock as D, unref as z, createSlots as Pe, withCtx as b, renderSlot as x, normalizeProps as j, guardReactiveProps as R, Fragment as C, renderList as A, createElementVNode as F, toDisplayString as P, createTextVNode as Le } from "vue";
-import { u as Se, c as Q, t as Oe, a as De, p as U, o as We, e as ye, g as Be, b as Ee, d as je, A as Re, L as Ue, M as Ve, N as Ge, X as He, w as fe, f as ge, x as Xe, q as Ye, r as qe, C as V } from "./index-BlXzlBwZ.js";
-import { t as Je, u as Ke } from "./useResponsive-NZB-WLRF.js";
-import { _ as Qe } from "./Title-eBTH8iGJ.js";
-import { L as Ze } from "./Legend-CkQ_zypV.js";
-import { _ as et } from "./Tooltip-B11OahTD.js";
-import { _ as tt } from "./Shape-B4gGeBLI.js";
-import { u as at, U as lt } from "./usePrinter-CZ8F5Cth.js";
-import { D as ot } from "./DataTable-CsPidn0_.js";
-import st from "./vue-ui-accordion-wHRG3nXl.js";
-import nt from "./vue-ui-skeleton-CJ2R5R6u.js";
-import { u as be } from "./useNestedProp-BoNl5H_z.js";
-import { _ as ut } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events": "none" } }, vt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], dt = ["x", "y", "fill", "font-size", "font-weight"], ht = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pt = ["x", "y", "fill", "font-size", "font-weight"], mt = { key: 0 }, yt = ["x", "y", "font-size", "fill"], ft = ["width", "x", "y"], gt = { style: { width: "100%" } }, bt = ["x", "y", "fill", "font-weight", "font-size", "onMouseenter"], xt = ["d", "stroke", "stroke-width", "onMouseenter"], kt = {
+import { computed as y, ref as f, onMounted as Ne, onBeforeUnmount as Pe, openBlock as u, createElementBlock as i, normalizeClass as E, normalizeStyle as _, createVNode as K, createCommentVNode as g, createBlock as D, unref as T, createSlots as Le, withCtx as b, renderSlot as x, normalizeProps as j, guardReactiveProps as R, Fragment as C, renderList as z, createElementVNode as I, toDisplayString as P, createTextVNode as Se } from "vue";
+import { u as Oe, c as Q, t as De, a as We, p as U, o as Be, e as ye, g as Ee, b as je, d as Re, A as Ue, L as Ve, M as Ge, N as He, X as Xe, w as fe, i as ge, f as be, x as Ye, q as qe, r as Je, C as V } from "./index-BJ6NXF-z.js";
+import { t as Ke, u as Qe } from "./useResponsive-NZB-WLRF.js";
+import { _ as Ze } from "./Title-CKSMMGjd.js";
+import { L as et } from "./Legend-3WC5-bUm.js";
+import { _ as tt } from "./Tooltip-C9Q2lE3W.js";
+import { _ as at } from "./Shape-C4kR-mjQ.js";
+import { u as lt, U as ot } from "./usePrinter-BUIam1ao.js";
+import { D as st } from "./DataTable-DqPGv4Ms.js";
+import nt from "./vue-ui-accordion-GCDGaaYO.js";
+import ut from "./vue-ui-skeleton-DdAE1RlM.js";
+import { u as xe } from "./useNestedProp-AR9tJrsp.js";
+import { _ as it } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const rt = ["id"], ct = ["xmlns", "viewBox"], vt = { style: { "pointer-events": "none" } }, dt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ht = ["x", "y", "fill", "font-size", "font-weight"], pt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], mt = ["x", "y", "fill", "font-size", "font-weight"], yt = { key: 0 }, ft = ["x", "y", "font-size", "fill"], gt = ["width", "x", "y"], bt = { style: { width: "100%" } }, xt = ["x", "y", "fill", "font-weight", "font-size", "onMouseenter"], kt = ["d", "stroke", "stroke-width", "onMouseenter"], Ct = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, Ct = ["onClick"], wt = ["innerHTML"], $t = {
+}, wt = ["onClick"], $t = ["innerHTML"], _t = {
   __name: "vue-ui-parallel-coordinate-plot",
   props: {
     config: {
@@ -31,86 +31,86 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup(xe, { expose: ke, emit: Z }) {
-    const M = xe, { vue_ui_parallel_coordinate_plot: Ce } = Se(), I = y({
+  setup(ke, { expose: Ce, emit: Z }) {
+    const M = ke, { vue_ui_parallel_coordinate_plot: we } = Oe(), F = y({
       get() {
         return !!M.dataset && M.dataset.length;
       },
-      set(t) {
-        return t;
+      set(a) {
+        return a;
       }
     }), ee = f(0), L = f(null), te = f(null), ae = f(null), G = f(Q()), S = f(!1);
-    function we(t) {
-      S.value = t, ee.value += 1;
+    function $e(a) {
+      S.value = a, ee.value += 1;
     }
     const e = y(() => {
-      const t = be({
+      const a = xe({
         userConfig: M.config,
-        defaultConfig: Ce
+        defaultConfig: we
       });
-      return t.theme ? {
-        ...be({
-          userConfig: Oe.vue_ui_parallel_coordinate_plot[t.theme] || M.config,
-          defaultConfig: t
+      return a.theme ? {
+        ...xe({
+          userConfig: De.vue_ui_parallel_coordinate_plot[a.theme] || M.config,
+          defaultConfig: a
         }),
-        customPalette: De[t.theme] || U
-      } : t;
+        customPalette: We[a.theme] || U
+      } : a;
     }), W = f(null);
-    Ie(() => {
-      if (We(M.dataset) ? ye({
+    Ne(() => {
+      if (Be(M.dataset) ? ye({
         componentName: "VueUiParallelCoordinatePlot",
         type: "dataset"
-      }) : M.dataset.forEach((t, l) => {
-        Be({
-          datasetObject: t,
+      }) : M.dataset.forEach((a, l) => {
+        Ee({
+          datasetObject: a,
           requiredAttributes: ["name", "series"]
-        }).forEach((a) => {
-          I.value = !1, ye({
+        }).forEach((t) => {
+          F.value = !1, ye({
             componentName: "VueUiParallelCoordinatePlot",
             type: "datasetSerieAttribute",
-            property: a,
+            property: t,
             index: l
           });
         });
       }), e.value.responsive) {
-        const t = Je(() => {
-          const { width: l, height: a } = Ke({
+        const a = Ke(() => {
+          const { width: l, height: t } = Qe({
             chart: L.value,
             title: e.value.style.chart.title.text ? te.value : null,
             legend: e.value.style.chart.legend.show ? ae.value : null
           });
-          c.value.width = l, c.value.height = a, c.value.plotSize = V({
-            relator: Math.min(l, a),
+          c.value.width = l, c.value.height = t, c.value.plotSize = V({
+            relator: Math.min(l, t),
             adjuster: 600,
             source: e.value.style.chart.plots.radius,
             threshold: 2,
             fallback: 2
           }), c.value.ticksFontSize = V({
-            relator: Math.min(l, a),
+            relator: Math.min(l, t),
             adjuster: 600,
             source: e.value.style.chart.yAxis.labels.ticks.fontSize,
             threshold: 10,
             fallback: 10
           }), c.value.datapointFontSize = V({
-            relator: Math.min(l, a),
+            relator: Math.min(l, t),
             adjuster: 600,
             source: e.value.style.chart.yAxis.labels.datapoints.fontSize,
             threshold: 10,
             fallback: 10
           }), c.value.axisNameFontSize = V({
-            relator: Math.min(l, a),
+            relator: Math.min(l, t),
             adjuster: 600,
             source: e.value.style.chart.yAxis.labels.axisNamesFontSize,
             threshold: 12,
             fallback: 12
           });
         });
-        W.value = new ResizeObserver(t), W.value.observe(L.value.parentNode);
+        W.value = new ResizeObserver(a), W.value.observe(L.value.parentNode);
       }
-    }), Ne(() => {
+    }), Pe(() => {
       W.value && W.value.disconnect();
     });
-    const { isPrinting: le, isImaging: oe, generatePdf: se, generateImage: ne } = at({
+    const { isPrinting: le, isImaging: oe, generatePdf: se, generateImage: ne } = lt({
       elementId: `pcp_${G.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-parallel-coordinate-plot"
     }), c = f({
@@ -123,46 +123,46 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
       datapointFontSize: e.value.style.chart.yAxis.labels.datapoints.fontSize,
       axisNameFontSize: e.value.style.chart.yAxis.labels.axisNamesFontSize
     }), v = y(() => {
-      const { top: t, right: l, bottom: a, left: o } = e.value.style.chart.padding, n = c.value.height, s = c.value.width;
+      const { top: a, right: l, bottom: t, left: o } = e.value.style.chart.padding, n = c.value.height, s = c.value.width;
       return {
         chartHeight: n,
         chartWidth: s,
-        height: n - t - a,
+        height: n - a - t,
         width: s - o - l,
-        top: t,
+        top: a,
         left: o,
         right: s - l,
-        bottom: n - a
+        bottom: n - t
       };
-    }), $e = y(() => Ee(e.value.customPalette)), p = f({
+    }), _e = y(() => je(e.value.customPalette)), m = f({
       dataLabels: {
         show: e.value.style.chart.yAxis.labels.datapoints.show
       },
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     }), w = f([]);
-    function ue(t) {
-      w.value.includes(t) ? w.value = w.value.filter((l) => l !== t) : w.value.push(t);
+    function ue(a) {
+      w.value.includes(a) ? w.value = w.value.filter((l) => l !== a) : w.value.push(a);
     }
-    const T = y(() => M.dataset.map((t, l) => {
-      const a = je(t.color) || $e.value[l] || U[l] || U[l % U.length];
+    const A = y(() => M.dataset.map((a, l) => {
+      const t = Re(a.color) || _e.value[l] || U[l] || U[l % U.length];
       return {
-        ...t,
-        series: t.series.map((o) => ({
+        ...a,
+        series: a.series.map((o) => ({
           ...o,
           id: Q(),
-          color: a
+          color: t
         })),
         seriesIndex: l,
-        color: a,
+        color: t,
         id: Q(),
-        shape: t.shape || "circle"
+        shape: a.shape || "circle"
       };
-    })), _e = y(() => T.value.map((t) => ({
-      ...t,
-      opacity: w.value.includes(t.id) ? 0.5 : 1,
-      segregate: () => ue(t.id),
-      isSegregated: w.value.includes(t.id)
+    })), Ae = y(() => A.value.map((a) => ({
+      ...a,
+      opacity: w.value.includes(a.id) ? 0.5 : 1,
+      segregate: () => ue(a.id),
+      isSegregated: w.value.includes(a.id)
     }))), Te = y(() => ({
       cy: "pcp-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
@@ -171,102 +171,112 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
     })), ie = y(() => Math.max(
-      ...T.value.filter((t) => !w.value.includes(t.id)).map((t) => Math.max(...t.series.flatMap((l) => l.values.length)))
-    )), k = y(() => v.value.width / ie.value), H = y(() => T.value.filter((t) => !w.value.includes(t.id))), h = y(() => {
-      let t = [];
+      ...A.value.filter((a) => !w.value.includes(a.id)).map((a) => Math.max(...a.series.flatMap((l) => l.values.length)))
+    )), k = y(() => v.value.width / ie.value), H = y(() => A.value.filter((a) => !w.value.includes(a.id))), p = y(() => {
+      let a = [];
       for (let l = 0; l < ie.value; l += 1) {
-        const a = Math.min(...H.value.flatMap((m) => m.series.map((B) => B.values[l] || 0) || 0)), o = Math.max(...H.value.flatMap((m) => m.series.map((B) => B.values[l] || 0) || 0)), n = o === a ? a / 4 : a, s = o === a ? o * 2 : o, r = Re(n, s, e.value.style.chart.yAxis.scaleTicks), $ = r.ticks.map((m, B) => {
-          const Me = r.min < 0 ? m + Math.abs(r.min) : m - Math.abs(r.min), Fe = r.min < 0 ? r.max + Math.abs(r.min) : r.max - Math.abs(r.min);
+        const t = Math.min(...H.value.flatMap((d) => d.series.map((B) => B.values[l] || 0) || 0)), o = Math.max(...H.value.flatMap((d) => d.series.map((B) => B.values[l] || 0) || 0)), n = o === t ? t / 4 : t, s = o === t ? o * 2 : o, r = Ue(n, s, e.value.style.chart.yAxis.scaleTicks), $ = r.ticks.map((d, B) => {
+          const Ie = r.min < 0 ? d + Math.abs(r.min) : d - Math.abs(r.min), Fe = r.min < 0 ? r.max + Math.abs(r.min) : r.max - Math.abs(r.min);
           return {
-            y: v.value.bottom - v.value.height * (Me / Fe),
+            y: v.value.bottom - v.value.height * (Ie / Fe),
             x: v.value.left + k.value * l + k.value / 2,
-            value: m
+            value: d
           };
         });
-        t.push({
+        a.push({
           scale: r,
           ticks: $,
           name: e.value.style.chart.yAxis.labels.axisNames[l] || `Y-${l + 1}`
         });
       }
-      return t;
-    }), X = y(() => H.value.map((t, l) => ({
-      ...t,
-      series: t.series.map((a, o) => ({
-        ...a,
-        datapoints: a.values.map((n, s) => {
-          const r = h.value[s].scale.min < 0 ? (n || 0) + Math.abs(h.value[s].scale.min) : (n || 0) - Math.abs(h.value[s].scale.min), $ = h.value[s].scale.min < 0 ? h.value[s].scale.max + Math.abs(h.value[s].scale.min) : h.value[s].scale.max - Math.abs(h.value[s].scale.min);
+      return a;
+    }), X = y(() => H.value.map((a, l) => ({
+      ...a,
+      series: a.series.map((t, o) => ({
+        ...t,
+        datapoints: t.values.map((n, s) => {
+          const r = p.value[s].scale.min < 0 ? (n || 0) + Math.abs(p.value[s].scale.min) : (n || 0) - Math.abs(p.value[s].scale.min), $ = p.value[s].scale.min < 0 ? p.value[s].scale.max + Math.abs(p.value[s].scale.min) : p.value[s].scale.max - Math.abs(p.value[s].scale.min);
           return {
-            name: a.name,
-            seriesName: t.name,
+            name: t.name,
+            seriesName: a.name,
             axisIndex: s,
             datapointIndex: o,
             seriesIndex: l,
             value: n || 0,
             x: v.value.left + k.value * s + k.value / 2,
             y: v.value.bottom - v.value.height * (r / $),
-            comment: a.comments && a.comments[s] || ""
+            comment: t.comments && t.comments[s] || ""
           };
         })
       }))
-    })).map((t) => ({
-      ...t,
-      series: t.series.map((l) => {
-        const a = Ue(l.datapoints), o = Ve(l.datapoints, 0.12), n = Ge(e.value.style.chart.lines.smooth ? `M ${o}` : `M ${a}`);
+    })).map((a) => ({
+      ...a,
+      series: a.series.map((l) => {
+        const t = Ve(l.datapoints), o = Ge(l.datapoints, 0.12), n = He(e.value.style.chart.lines.smooth ? `M ${o}` : `M ${t}`);
         return {
           ...l,
           smoothPath: o,
-          straightPath: a,
+          straightPath: t,
           pathLength: n
         };
       })
     })));
-    function re({ value: t, index: l }) {
-      return ge({
-        p: e.value.style.chart.yAxis.labels.prefixes[l] || "",
-        v: t,
-        s: e.value.style.chart.yAxis.labels.suffixes[l] || "",
-        r: e.value.style.chart.yAxis.labels.roundings[l] || 0
-      });
+    function re({ value: a, index: l, datapoint: t }) {
+      return ge(
+        e.value.style.chart.yAxis.labels.formatters[l] || null,
+        a,
+        be({
+          p: e.value.style.chart.yAxis.labels.prefixes[l] || "",
+          v: a,
+          s: e.value.style.chart.yAxis.labels.suffixes[l] || "",
+          r: e.value.style.chart.yAxis.labels.roundings[l] || 0
+        }),
+        { datapoint: t, seriesIndex: l }
+      );
     }
-    const d = f(null), Y = f(null), O = f(!1), q = f("");
-    function J({ shape: t, serieName: l, serie: a, relativeIndex: o, seriesIndex: n }) {
-      Y.value = { serie: a, relativeIndex: o, seriesIndex: n, series: T.value, scales: h.value }, O.value = !0, d.value = a.id;
+    const h = f(null), Y = f(null), O = f(!1), q = f("");
+    function J({ shape: a, serieName: l, serie: t, relativeIndex: o, seriesIndex: n }) {
+      Y.value = { serie: t, relativeIndex: o, seriesIndex: n, series: A.value, scales: p.value }, O.value = !0, h.value = t.id;
       let s = "";
       const r = e.value.style.chart.tooltip.customFormat;
-      fe(r) && Xe(() => r({
-        serie: a,
-        seriesIndex: a.seriesIndex,
-        series: T.value,
+      fe(r) && Ye(() => r({
+        serie: t,
+        seriesIndex: t.seriesIndex,
+        series: A.value,
         config: e.value,
-        scales: h.value
+        scales: p.value
       })) ? q.value = r({
-        serie: a,
-        seriesIndex: a.seriesIndex,
-        series: T.value,
+        serie: t,
+        seriesIndex: t.seriesIndex,
+        series: A.value,
         config: e.value,
-        scales: h.value
-      }) : (s += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l ? l + " - " : ""}${a.name}</div>`, h.value.map(($) => $.name).forEach(($, m) => {
+        scales: p.value
+      }) : (s += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l ? l + " - " : ""}${t.name}</div>`, p.value.map(($) => $.name).forEach(($, d) => {
         s += `
                 <div class="vue-ui-tooltip-item" style="text-align:left">
                     <span>${$}: </span>
                     <span>
-                        ${ge({
-          p: e.value.style.chart.yAxis.labels.prefixes[m] || "",
-          v: a.datapoints[m].value,
-          s: e.value.style.chart.yAxis.labels.suffixes[m] || "",
-          r: e.value.style.chart.yAxis.labels.roundings[m] || ""
-        })}    
+                        ${ge(
+          e.value.style.chart.yAxis.labels.formatters[d] || null,
+          t.datapoints[d].value,
+          be({
+            p: e.value.style.chart.yAxis.labels.prefixes[d] || "",
+            v: t.datapoints[d].value,
+            s: e.value.style.chart.yAxis.labels.suffixes[d] || "",
+            r: e.value.style.chart.yAxis.labels.roundings[d] || ""
+          }),
+          { datapoint: t.datapoints[d], seriesIndex: d }
+        )}    
                     </span>
                 </div>
-            `, e.value.style.chart.comments.showInTooltip && a.datapoints[m].comment && (s += `<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[m].comment}</div>`);
+            `, e.value.style.chart.comments.showInTooltip && t.datapoints[d].comment && (s += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; border-left: 1px solid ${t.color}">${t.datapoints[d].comment}</div>`);
       }), q.value = `<div>${s}</div>`);
     }
     function ze() {
-      return T.value;
+      return A.value;
     }
     const N = y(() => {
-      const t = [e.value.table.columnNames.series].concat([e.value.table.columnNames.item]).concat(h.value.map((n) => n.name)), l = X.value.flatMap((n, s) => n.series.map((r) => [n.name].concat([r.name]).concat(r.values))), a = {
+      const a = [e.value.table.columnNames.series].concat([e.value.table.columnNames.item]).concat(p.value.map((n) => n.name)), l = X.value.flatMap((n, s) => n.series.map((r) => [n.name].concat([r.name]).concat(r.values))), t = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -278,11 +288,11 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
           outline: e.value.table.td.outline
         },
         breakpoint: e.value.table.responsiveBreakpoint
-      }, o = [e.value.table.columnNames.series].concat([e.value.table.columnNames.item]).concat(h.value.map((n) => n.name));
+      }, o = [e.value.table.columnNames.series].concat([e.value.table.columnNames.item]).concat(p.value.map((n) => n.name));
       return {
         body: l,
-        head: t,
-        config: a,
+        head: a,
+        config: t,
         colNames: o
       };
     }), ce = y(() => X.value.length === 0 ? { head: [], body: [], config: {}, columnNames: [] } : {
@@ -290,29 +300,29 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
       body: N.value.body
     });
     function ve() {
-      const t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], l = ce.value.head, a = ce.value.body, o = t.concat([l]).concat(a), n = Ye(o);
-      qe({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-parallel-coordinate-plot" });
+      const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], l = ce.value.head, t = ce.value.body, o = a.concat([l]).concat(t), n = qe(o);
+      Je({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-parallel-coordinate-plot" });
     }
-    function Ae(t) {
-      Z("selectDatapoint", t);
+    function Me(a) {
+      Z("selectDatapoint", a);
     }
-    function de(t) {
+    function de(a) {
       Z("selectLegend", {
-        ...t,
-        isSegregated: !t.isSegregated,
-        opacity: t.isSegregated ? 1 : 0.5
+        ...a,
+        isSegregated: !a.isSegregated,
+        opacity: a.isSegregated ? 1 : 0.5
       });
     }
     function he() {
-      p.value.showTable = !p.value.showTable;
+      m.value.showTable = !m.value.showTable;
     }
     function pe() {
-      p.value.dataLabels.show = !p.value.dataLabels.show;
+      m.value.dataLabels.show = !m.value.dataLabels.show;
     }
     function me() {
-      p.value.showTooltip = !p.value.showTooltip;
+      m.value.showTooltip = !m.value.showTooltip;
     }
-    return ke({
+    return Ce({
       getData: ze,
       generateCsv: ve,
       generatePdf: se,
@@ -320,7 +330,7 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
       toggleTable: he,
       toggleLabels: pe,
       toggleTooltip: me
-    }), (t, l) => (u(), i("div", {
+    }), (a, l) => (u(), i("div", {
       ref_key: "pcpChart",
       ref: L,
       class: E(`vue-ui-pcp ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
@@ -333,7 +343,7 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
         ref: te,
         style: _(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:24px`)
       }, [
-        K(Qe, {
+        K(Ze, {
           config: {
             title: {
               cy: "pcp-div-title",
@@ -346,13 +356,13 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
           }
         }, null, 8, ["config"])
       ], 4)) : g("", !0),
-      e.value.userOptions.show && I.value ? (u(), D(lt, {
+      e.value.userOptions.show && F.value ? (u(), D(ot, {
         ref: "details",
         key: `user_options_${ee.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: z(le),
-        isImaging: z(oe),
+        isPrinting: T(le),
+        isImaging: T(oe),
         uid: G.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -362,140 +372,140 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: S.value,
-        isTooltip: p.value.showTooltip,
+        isTooltip: m.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: L.value,
-        onToggleFullscreen: we,
-        onGeneratePdf: z(se),
+        onToggleFullscreen: $e,
+        onGeneratePdf: T(se),
         onGenerateCsv: ve,
-        onGenerateImage: z(ne),
+        onGenerateImage: T(ne),
         onToggleTable: he,
         onToggleLabels: pe,
         onToggleTooltip: me
-      }, Pe({ _: 2 }, [
-        t.$slots.optionPdf ? {
+      }, Le({ _: 2 }, [
+        a.$slots.optionPdf ? {
           name: "optionPdf",
           fn: b(() => [
-            x(t.$slots, "optionPdf", {}, void 0, !0)
+            x(a.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
-        t.$slots.optionCsv ? {
+        a.$slots.optionCsv ? {
           name: "optionCsv",
           fn: b(() => [
-            x(t.$slots, "optionCsv", {}, void 0, !0)
+            x(a.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
-        t.$slots.optionImg ? {
+        a.$slots.optionImg ? {
           name: "optionImg",
           fn: b(() => [
-            x(t.$slots, "optionImg", {}, void 0, !0)
+            x(a.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
-        t.$slots.optionTable ? {
+        a.$slots.optionTable ? {
           name: "optionTable",
           fn: b(() => [
-            x(t.$slots, "optionTable", {}, void 0, !0)
+            x(a.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
-        t.$slots.optionLabels ? {
+        a.$slots.optionLabels ? {
           name: "optionLabels",
           fn: b(() => [
-            x(t.$slots, "optionLabels", {}, void 0, !0)
+            x(a.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
-        t.$slots.optionFullscreen ? {
+        a.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: b(({ toggleFullscreen: a, isFullscreen: o }) => [
-            x(t.$slots, "optionFullscreen", j(R({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          fn: b(({ toggleFullscreen: t, isFullscreen: o }) => [
+            x(a.$slots, "optionFullscreen", j(R({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
           ]),
           key: "5"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : g("", !0),
-      I.value ? (u(), i("svg", {
+      F.value ? (u(), i("svg", {
         key: 2,
-        xmlns: z(He),
+        xmlns: T(Xe),
         class: E({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value }),
         viewBox: `0 0 ${v.value.chartWidth <= 0 ? 10 : v.value.chartWidth} ${v.value.chartHeight <= 0 ? 10 : v.value.chartHeight}`,
         style: _(`max-width:100%; overflow: visible; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
       }, [
-        (u(!0), i(C, null, A(h.value, (a, o) => (u(), i("g", ct, [
-          F("line", {
+        (u(!0), i(C, null, z(p.value, (t, o) => (u(), i("g", vt, [
+          I("line", {
             x1: v.value.left + k.value * o + k.value / 2,
             x2: v.value.left + k.value * o + k.value / 2,
             y1: v.value.top,
             y2: v.value.bottom,
             stroke: e.value.style.chart.yAxis.stroke,
             "stroke-width": e.value.style.chart.yAxis.strokeWidth
-          }, null, 8, vt),
-          F("text", {
+          }, null, 8, dt),
+          I("text", {
             x: v.value.left + k.value * o + k.value / 2,
             y: v.value.top - 24,
             fill: e.value.style.chart.yAxis.labels.axisNamesColor,
             "font-size": c.value.axisNameFontSize,
             "font-weight": e.value.style.chart.yAxis.labels.axisNamesBold ? "bold" : "",
             "text-anchor": "middle"
-          }, P(a.name), 9, dt),
+          }, P(t.name), 9, ht),
           e.value.style.chart.yAxis.labels.ticks.show ? (u(), i(C, { key: 0 }, [
-            (u(!0), i(C, null, A(a.ticks, (n) => (u(), i("line", {
+            (u(!0), i(C, null, z(t.ticks, (n) => (u(), i("line", {
               x1: n.x,
               x2: n.x - 10,
               y1: n.y,
               y2: n.y,
               stroke: e.value.style.chart.yAxis.stroke,
               "stroke-width": e.value.style.chart.yAxis.strokeWidth,
-              style: _(`opacity:${d.value && !p.value.showTooltip ? 0.2 : 1}`)
-            }, null, 12, ht))), 256)),
-            (u(!0), i(C, null, A(a.ticks, (n) => (u(), i("text", {
+              style: _(`opacity:${h.value && !m.value.showTooltip ? 0.2 : 1}`)
+            }, null, 12, pt))), 256)),
+            (u(!0), i(C, null, z(t.ticks, (n) => (u(), i("text", {
               x: n.x - 12 + e.value.style.chart.yAxis.labels.ticks.offsetX,
               y: n.y + e.value.style.chart.yAxis.labels.ticks.offsetY + c.value.ticksFontSize / 3,
               fill: e.value.style.chart.yAxis.labels.ticks.color,
               "text-anchor": "end",
               "font-size": c.value.ticksFontSize,
               "font-weight": e.value.style.chart.yAxis.labels.ticks.bold ? "bold" : "normal",
-              style: _(`opacity:${d.value && !p.value.showTooltip ? 0.2 : 1}`)
-            }, P(re({ value: n.value, index: o })), 13, pt))), 256))
+              style: _(`opacity:${h.value && !m.value.showTooltip ? 0.2 : 1}`)
+            }, P(re({ value: n.value, index: o, datapoint: n })), 13, mt))), 256))
           ], 64)) : g("", !0)
         ]))), 256)),
-        (u(!0), i(C, null, A(X.value, (a) => (u(), i("g", null, [
-          (u(!0), i(C, null, A(a.series, (o, n) => (u(), i("g", null, [
-            e.value.style.chart.plots.show ? (u(), i("g", mt, [
-              (u(!0), i(C, null, A(o.datapoints, (s) => (u(), D(tt, {
+        (u(!0), i(C, null, z(X.value, (t) => (u(), i("g", null, [
+          (u(!0), i(C, null, z(t.series, (o, n) => (u(), i("g", null, [
+            e.value.style.chart.plots.show ? (u(), i("g", yt, [
+              (u(!0), i(C, null, z(o.datapoints, (s) => (u(), D(at, {
                 plot: { x: s.x, y: s.y },
-                color: a.color,
-                shape: a.shape,
-                radius: a.shape === "triangle" ? c.value.plotSize * 1.2 : c.value.plotSize,
+                color: t.color,
+                shape: t.shape,
+                radius: t.shape === "triangle" ? c.value.plotSize * 1.2 : c.value.plotSize,
                 stroke: e.value.style.chart.backgroundColor,
                 strokeWidth: 0.5,
                 onMouseenter: (r) => J({
-                  shape: a.shape,
-                  serieName: a.name,
+                  shape: t.shape,
+                  serieName: t.name,
                   serie: o,
                   relativeIndex: n,
                   seriesIndex: o.seriesIndex
                 }),
                 onMouseleave: l[0] || (l[0] = (r) => {
-                  d.value = null, O.value = !1;
+                  h.value = null, O.value = !1;
                 }),
-                style: _(`opacity:${d.value ? d.value === o.id ? e.value.style.chart.plots.opacity : 0.2 : e.value.style.chart.plots.opacity}`),
-                onClick: () => Ae(s)
+                style: _(`opacity:${h.value ? h.value === o.id ? e.value.style.chart.plots.opacity : 0.2 : e.value.style.chart.plots.opacity}`),
+                onClick: () => Me(s)
               }, null, 8, ["plot", "color", "shape", "radius", "stroke", "onMouseenter", "style", "onClick"]))), 256)),
-              p.value.showTooltip ? g("", !0) : (u(), i(C, { key: 0 }, [
-                d.value && d.value === o.id && o.datapoints.length ? (u(), i("text", {
+              m.value.showTooltip ? g("", !0) : (u(), i(C, { key: 0 }, [
+                h.value && h.value === o.id && o.datapoints.length ? (u(), i("text", {
                   key: 0,
                   x: o.datapoints[0].x - c.value.ticksFontSize,
                   y: o.datapoints[0].y + c.value.ticksFontSize / 3,
                   "text-anchor": "end",
                   "font-size": c.value.ticksFontSize,
-                  fill: a.color,
+                  fill: t.color,
                   "font-weight": "bold"
-                }, P(o.name), 9, yt)) : g("", !0)
+                }, P(o.name), 9, ft)) : g("", !0)
               ], 64)),
-              e.value.style.chart.comments.show ? (u(!0), i(C, { key: 1 }, A(o.datapoints, (s) => (u(), i("g", null, [
+              e.value.style.chart.comments.show ? (u(!0), i(C, { key: 1 }, z(o.datapoints, (s) => (u(), i("g", null, [
                 s.comment ? (u(), i("foreignObject", {
                   key: 0,
                   style: { overflow: "visible" },
@@ -504,60 +514,60 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
                   x: s.x - e.value.style.chart.comments.width / 2 + e.value.style.chart.comments.offsetX,
                   y: s.y + e.value.style.chart.comments.offsetY + 6
                 }, [
-                  F("div", gt, [
-                    x(t.$slots, "plot-comment", {
-                      plot: { ...s, color: a.color }
+                  I("div", bt, [
+                    x(a.$slots, "plot-comment", {
+                      plot: { ...s, color: t.color }
                     }, void 0, !0)
                   ])
-                ], 8, ft)) : g("", !0)
+                ], 8, gt)) : g("", !0)
               ]))), 256)) : g("", !0)
             ])) : g("", !0),
-            p.value.dataLabels.show || d.value && d.value === o.id ? (u(!0), i(C, { key: 1 }, A(o.datapoints, (s, r) => (u(), i("text", {
+            m.value.dataLabels.show || h.value && h.value === o.id ? (u(!0), i(C, { key: 1 }, z(o.datapoints, (s, r) => (u(), i("text", {
               x: s.x + 12 + e.value.style.chart.yAxis.labels.datapoints.offsetX,
               y: s.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,
+              fill: e.value.style.chart.yAxis.labels.datapoints.useSerieColor ? t.color : e.value.style.chart.yAxis.labels.datapoints.color,
               "text-anchor": "start",
               "font-weight": e.value.style.chart.yAxis.labels.datapoints.bold ? "bold" : "normal",
               class: E({ "vue-ui-pcp-animated": !1, "vue-ui-pcp-transition": !0 }),
               "font-size": c.value.datapointFontSize,
               onMouseenter: ($) => J({
-                shape: a.shape,
-                serieName: a.name,
+                shape: t.shape,
+                serieName: t.name,
                 serie: o,
                 relativeIndex: n,
                 seriesIndex: o.seriesIndex
               }),
               onMouseleave: l[1] || (l[1] = ($) => {
-                d.value = null, O.value = !1;
+                h.value = null, O.value = !1;
               }),
-              style: _(`opacity:${d.value ? d.value === o.id ? 1 : 0.2 : 1}`)
-            }, P(re({ value: s.value, index: r })), 45, bt))), 256)) : g("", !0),
-            F("path", {
+              style: _(`opacity:${h.value ? h.value === o.id ? 1 : 0.2 : 1}`)
+            }, P(re({ value: s.value, index: r, datapoint: s })), 45, xt))), 256)) : g("", !0),
+            I("path", {
               d: `M${e.value.style.chart.lines.smooth ? o.smoothPath : o.straightPath}`,
-              stroke: a.color,
+              stroke: t.color,
               "stroke-width": e.value.style.chart.lines.strokeWidth,
               fill: "none",
               class: E({ "vue-ui-pcp-animated vue-data-ui-line-animated": e.value.useCssAnimation, "vue-ui-pcp-transition": !0 }),
               onMouseenter: (s) => J({
-                shape: a.shape,
-                serieName: a.name,
+                shape: t.shape,
+                serieName: t.name,
                 serie: o,
                 relativeIndex: n,
                 seriesIndex: o.seriesIndex
               }),
               onMouseleave: l[2] || (l[2] = (s) => {
-                d.value = null, O.value = !1;
+                h.value = null, O.value = !1;
               }),
-              style: _(`opacity:${d.value ? d.value === o.id ? e.value.style.chart.lines.opacity : 0.2 : e.value.style.chart.lines.opacity}; stroke-dasharray:${o.pathLength}; stroke-dashoffset: ${e.value.useCssAnimation ? o.pathLength : 0}`)
-            }, null, 46, xt)
+              style: _(`opacity:${h.value ? h.value === o.id ? e.value.style.chart.lines.opacity : 0.2 : e.value.style.chart.lines.opacity}; stroke-dasharray:${o.pathLength}; stroke-dashoffset: ${e.value.useCssAnimation ? o.pathLength : 0}`)
+            }, null, 46, kt)
           ]))), 256))
         ]))), 256)),
-        x(t.$slots, "svg", { svg: v.value }, void 0, !0)
-      ], 14, rt)) : g("", !0),
-      t.$slots.watermark ? (u(), i("div", kt, [
-        x(t.$slots, "watermark", j(R({ isPrinting: z(le) || z(oe) })), void 0, !0)
+        x(a.$slots, "svg", { svg: v.value }, void 0, !0)
+      ], 14, ct)) : g("", !0),
+      a.$slots.watermark ? (u(), i("div", Ct, [
+        x(a.$slots, "watermark", j(R({ isPrinting: T(le) || T(oe) })), void 0, !0)
       ])) : g("", !0),
-      I.value ? g("", !0) : (u(), D(nt, {
+      F.value ? g("", !0) : (u(), D(ut, {
         key: 4,
         config: {
           type: "parallelCoordinatePlot",
@@ -566,34 +576,34 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
           }
         }
       }, null, 8, ["config"])),
-      F("div", {
+      I("div", {
         ref_key: "chartLegend",
         ref: ae
       }, [
-        e.value.style.chart.legend.show && I.value ? (u(), D(Ze, {
+        e.value.style.chart.legend.show && F.value ? (u(), D(et, {
           key: 0,
-          legendSet: _e.value,
+          legendSet: Ae.value,
           config: Te.value,
-          onClickMarker: l[3] || (l[3] = ({ legend: a }) => {
-            ue(a.id), de(a);
+          onClickMarker: l[3] || (l[3] = ({ legend: t }) => {
+            ue(t.id), de(t);
           })
         }, {
-          item: b(({ legend: a, index: o }) => [
-            F("div", {
+          item: b(({ legend: t, index: o }) => [
+            I("div", {
               onClick: (n) => {
-                a.segregate(), de(a);
+                t.segregate(), de(t);
               },
-              style: _(`opacity:${w.value.includes(a.id) ? 0.5 : 1}`)
-            }, P(a.name), 13, Ct)
+              style: _(`opacity:${w.value.includes(t.id) ? 0.5 : 1}`)
+            }, P(t.name), 13, wt)
           ]),
           _: 1
-        }, 8, ["legendSet", "config"])) : x(t.$slots, "legend", {
+        }, 8, ["legendSet", "config"])) : x(a.$slots, "legend", {
           key: 1,
-          legend: T.value
+          legend: A.value
         }, void 0, !0)
       ], 512),
-      K(et, {
-        show: p.value.showTooltip && O.value,
+      K(tt, {
+        show: m.value.showTooltip && O.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         fontSize: e.value.style.chart.tooltip.fontSize,
@@ -605,21 +615,21 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: L.value,
         content: q.value,
-        isCustom: z(fe)(e.value.style.chart.tooltip.customFormat)
+        isCustom: T(fe)(e.value.style.chart.tooltip.customFormat)
       }, {
         "tooltip-before": b(() => [
-          x(t.$slots, "tooltip-before", j(R({ ...Y.value })), void 0, !0)
+          x(a.$slots, "tooltip-before", j(R({ ...Y.value })), void 0, !0)
         ]),
         "tooltip-after": b(() => [
-          x(t.$slots, "tooltip-after", j(R({ ...Y.value })), void 0, !0)
+          x(a.$slots, "tooltip-after", j(R({ ...Y.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      I.value ? (u(), D(st, {
+      F.value ? (u(), D(nt, {
         key: 5,
         hideDetails: "",
         config: {
-          open: p.value.showTable,
+          open: m.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -632,28 +642,28 @@ const it = ["id"], rt = ["xmlns", "viewBox"], ct = { style: { "pointer-events":
         }
       }, {
         content: b(() => [
-          K(ot, {
+          K(st, {
             colNames: N.value.colNames,
             head: N.value.head,
             body: N.value.body,
             config: N.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: l[4] || (l[4] = (a) => p.value.showTable = !1)
+            onClose: l[4] || (l[4] = (t) => m.value.showTable = !1)
           }, {
-            th: b(({ th: a }) => [
-              F("div", { innerHTML: a }, null, 8, wt)
+            th: b(({ th: t }) => [
+              I("div", { innerHTML: t }, null, 8, $t)
             ]),
-            td: b(({ td: a }) => [
-              Le(P(a), 1)
+            td: b(({ td: t }) => [
+              Se(P(t), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"])
         ]),
         _: 1
       }, 8, ["config"])) : g("", !0)
-    ], 14, it));
+    ], 14, rt));
   }
-}, Wt = /* @__PURE__ */ ut($t, [["__scopeId", "data-v-9a771dc6"]]);
+}, Bt = /* @__PURE__ */ it(_t, [["__scopeId", "data-v-b44d373d"]]);
 export {
-  Wt as default
+  Bt as default
 };