vue-data-ui 3.2.8 → 3.3.1

package/dist/{vue-ui-strip-plot-DwS52yGc.js → vue-ui-strip-plot-C5Bro8-W.js}

@@ -1,21 +1,22 @@
-import { defineAsyncComponent as L, computed as p, ref as i, toRefs as Tt, watch as q, shallowRef as Ve, onMounted as $t, onBeforeUnmount as Xe, watchEffect as St, createElementBlock as n, openBlock as r, unref as v, normalizeStyle as J, normalizeClass as E, createBlock as z, createCommentVNode as c, createVNode as be, createSlots as Ye, withCtx as b, renderSlot as y, normalizeProps as F, guardReactiveProps as I, createElementVNode as m, Fragment as g, renderList as _, toDisplayString as T, mergeProps as je, resolveDynamicComponent as Ot, createTextVNode as qe, nextTick as zt } from "vue";
-import { c as ye, t as Pt, b as Dt, p as P, o as Je, f as me, g as Ke, e as Nt, h as Qe, q as Ft, C as It, d as K, X as Mt, a as ge, L as Rt, ac as Wt, m as Bt, r as Et, z as Ze, D as Gt, x as Ht, y as Ut, A as Vt } from "./lib-BEpWEyMm.js";
-import { t as et, u as Xt } from "./useResponsive-DfdjqQps.js";
-import { u as Yt, a as tt } from "./useNestedProp-BOk-tPdu.js";
-import { u as jt, B as qt } from "./BaseScanner-BgWxam9d.js";
-import { u as Jt } from "./usePrinter-w23K-ezx.js";
-import { u as Kt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Qt } from "./useChartAccessibility-9icAAmYg.js";
-import { u as Zt } from "./useTimeLabelCollider-CIsgDrl9.js";
-import el from "./img-DjWwQXVS.js";
-import { _ as tl } from "./Shape-C_C_OmqR.js";
-import ll from "./Title-DG2nloSB.js";
-import { t as al } from "./themes-Dw-dDudK.js";
-import { _ as ol } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"], nl = { key: 1 }, il = { key: 0 }, vl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], cl = { key: 1 }, hl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], dl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], fl = ["x", "y", "fill", "font-size"], bl = ["transform", "font-size", "fill", "text-anchor"], yl = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], ml = ["fill", "font-size", "transform"], gl = ["fill", "font-size", "x", "y"], xl = ["x1", "x2", "y1", "y2", "stroke"], kl = ["cx", "cy", "fill"], wl = ["cx", "cy", "fill"], Cl = ["id"], Al = ["stop-color"], Ll = ["stop-color"], _l = ["stop-color"], Tl = { key: 0 }, $l = ["x", "y", "font-size", "fill"], Sl = {
+import { defineAsyncComponent as L, computed as c, ref as i, toRefs as Nt, watch as q, shallowRef as Xe, onMounted as Ft, onBeforeUnmount as Ye, watchEffect as Mt, createElementBlock as u, openBlock as r, unref as v, normalizeStyle as J, normalizeClass as E, createBlock as O, createCommentVNode as d, createVNode as me, createSlots as je, withCtx as b, renderSlot as y, normalizeProps as F, guardReactiveProps as M, createElementVNode as m, Fragment as g, renderList as _, toDisplayString as T, mergeProps as qe, resolveDynamicComponent as It, createTextVNode as Je, nextTick as Rt } from "vue";
+import { c as ge, t as Bt, b as Wt, p as z, o as Ke, f as xe, g as Qe, e as Et, h as Ze, q as Gt, C as Ht, d as K, X as Ut, a as ke, L as Vt, ac as Xt, m as Yt, r as jt, z as et, D as qt, x as Jt, y as Kt, A as Qt } from "./lib-CEjkWSLj.js";
+import { t as tt, u as Zt } from "./useResponsive-DfdjqQps.js";
+import { u as el, a as lt } from "./useNestedProp-Ce3PwN8T.js";
+import { u as tl, B as ll } from "./BaseScanner-BgWxam9d.js";
+import { u as al } from "./usePrinter-DJ1iH-F_.js";
+import { u as ol } from "./useSvgExport-DrjCWun4.js";
+import { u as sl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as rl } from "./useChartAccessibility-9icAAmYg.js";
+import { u as nl } from "./useTimeLabelCollider-CIsgDrl9.js";
+import ul from "./img-J2dLIr8Y.js";
+import { _ as il } from "./Shape-BceHSLHf.js";
+import vl from "./Title-Camz1Lce.js";
+import { t as cl } from "./themes-Dw-dDudK.js";
+import { _ as hl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const dl = ["id"], pl = ["xmlns", "viewBox"], fl = ["x", "y", "width", "height"], bl = { key: 1 }, yl = { key: 0 }, ml = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], gl = { key: 1 }, xl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], kl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], wl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Cl = ["x", "y", "fill", "font-size"], Al = ["transform", "font-size", "fill", "text-anchor"], Ll = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], _l = ["fill", "font-size", "transform"], Tl = ["fill", "font-size", "x", "y"], $l = ["x1", "x2", "y1", "y2", "stroke"], Sl = ["cx", "cy", "fill"], Ol = ["cx", "cy", "fill"], zl = ["id"], Pl = ["stop-color"], Dl = ["stop-color"], Nl = ["stop-color"], Fl = { key: 0 }, Ml = ["x", "y", "font-size", "fill"], Il = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Ol = ["innerHTML"], zl = {
+}, Rl = ["innerHTML"], Bl = {
   __name: "vue-ui-strip-plot",
   props: {
     config: {
@@ -32,18 +33,18 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
     }
   },
   emits: ["selectDatapoint"],
-  setup(lt, { expose: at, emit: ot }) {
-    const st = L(() => import("./Tooltip-BOXz8skU.js")), rt = L(() => import("./BaseIcon-Bz-1GQhu.js")), ut = L(() => import("./vue-ui-accordion-CDIzGCG1.js")), nt = L(() => import("./DataTable-BvjacRbw.js")), it = L(() => import("./UserOptions-DsTgvAok.js")), vt = L(() => import("./PenAndPaper-CR8q353D.js")), ct = L(() => import("./PackageVersion-C40g0Rfc.js")), ht = L(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_strip_plot: dt } = Yt(), x = lt, pt = ot, G = p({
+  setup(at, { expose: ot, emit: st }) {
+    const rt = L(() => import("./Tooltip-VOcQEHa4.js")), nt = L(() => import("./BaseIcon-eZbszQrv.js")), ut = L(() => import("./vue-ui-accordion-VTP418mC.js")), it = L(() => import("./DataTable-yAMEyP6y.js")), vt = L(() => import("./UserOptions-CSja1SGU.js")), ct = L(() => import("./PenAndPaper-Bo-lMUik.js")), ht = L(() => import("./PackageVersion-BfykJm_B.js")), dt = L(() => import("./BaseDraggableDialog-CVGErydD.js")), { vue_ui_strip_plot: pt } = el(), x = at, ft = st, G = c({
       get() {
         return !!x.dataset && x.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), Q = i(ye()), xe = i(0), Z = i(!1), ee = i(""), w = i(null), ke = i(null), we = i(null), Ce = i(null), Ae = i(!1), Le = i(0), _e = i(0), M = i(null), te = i(null), le = i(null), ae = i(null), H = i(null), oe = i(null), e = i(ne()), { loading: se, FINAL_DATASET: Te, manualLoading: re } = jt({
-      ...Tt(x),
+    }), Q = i(ge()), we = i(0), Z = i(!1), ee = i(""), w = i(null), Ce = i(null), Ae = i(null), Le = i(null), _e = i(!1), Te = i(0), $e = i(0), I = i(null), te = i(null), le = i(null), ae = i(null), H = i(null), oe = i(null), e = i(ve()), { loading: se, FINAL_DATASET: re, manualLoading: ne } = tl({
+      ...Nt(x),
       FINAL_CONFIG: e,
-      prepareConfig: ne,
+      prepareConfig: ve,
       skeletonDataset: [
         {
           name: "_",
@@ -91,7 +92,7 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
           ]
         }
       ],
-      skeletonConfig: Pt({
+      skeletonConfig: Bt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -130,98 +131,98 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
           }
         }
       })
-    }), { userOptionsVisible: ue, setUserOptionsVisibility: $e, keepUserOptionState: Se } = Kt({ config: e.value }), { svgRef: Oe } = Qt({ config: e.value.style.chart.title });
-    function ne() {
-      const t = tt({
+    }), { userOptionsVisible: ue, setUserOptionsVisibility: Se, keepUserOptionState: Oe } = sl({ config: e.value }), { svgRef: ie } = rl({ config: e.value.style.chart.title });
+    function ve() {
+      const t = lt({
         userConfig: x.config,
-        defaultConfig: dt
+        defaultConfig: pt
       });
       return t.theme ? {
-        ...tt({
-          userConfig: al.vue_ui_strip_plot[t.theme] || x.config,
+        ...lt({
+          userConfig: cl.vue_ui_strip_plot[t.theme] || x.config,
           defaultConfig: t
         }),
-        customPalette: Dt[t.theme] || P
+        customPalette: Wt[t.theme] || z
       } : t;
     }
     q(() => x.config, async (t) => {
-      se.value || (e.value = ne()), ue.value = !e.value.userOptions.showOnChartHover, ze(), Le.value += 1, _e.value += 1, h.value.dataLabels.show = e.value.style.chart.labels.bestPlotLabel.show, h.value.showTable = e.value.table.show, h.value.showTooltip = e.value.style.chart.tooltip.show, $.value = e.value.style.chart.width, C.value = e.value.style.chart.height, W.value = e.value.style.chart.plots.radius;
+      se.value || (e.value = ve()), ue.value = !e.value.userOptions.showOnChartHover, ze(), Te.value += 1, $e.value += 1, p.value.dataLabels.show = e.value.style.chart.labels.bestPlotLabel.show, p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show, D.value = e.value.style.chart.width, A.value = e.value.style.chart.height, B.value = e.value.style.chart.plots.radius;
     }, { deep: !0 }), q(() => x.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (re.value = !1);
+      Array.isArray(t) && t.length > 0 && (ne.value = !1);
     }, { deep: !0 });
-    const A = Ve(null), D = Ve(null);
-    $t(() => {
+    const C = Xe(null), P = Xe(null);
+    Ft(() => {
       ze();
     });
-    const ie = p(() => !!e.value.debug);
+    const ce = c(() => !!e.value.debug);
     function ze() {
-      if (Je(x.dataset) ? (me({
+      if (Ke(x.dataset) ? (xe({
         componentName: "VueUiStripPlot",
         type: "dataset",
-        debug: ie.value
-      }), re.value = !0) : x.dataset.forEach((t, a) => {
-        Ke({
+        debug: ce.value
+      }), ne.value = !0) : x.dataset.forEach((t, a) => {
+        Qe({
           datasetObject: t,
           requiredAttributes: ["name", "plots"]
         }).forEach((l) => {
-          G.value = !1, me({
+          G.value = !1, xe({
             componentName: "VueUiStripPlot",
             type: "datasetSerieAttribute",
             property: l,
             index: a,
-            debug: ie.value
+            debug: ce.value
           });
-        }), t.plots && t.plots.forEach((l, s) => {
-          Ke({
+        }), t.plots && t.plots.forEach((l, o) => {
+          Qe({
             datasetObject: l,
             requiredAttributes: ["name", "value"]
-          }).forEach((u) => {
-            G.value = !1, me({
+          }).forEach((n) => {
+            G.value = !1, xe({
               componentName: "VueUiStripPlot",
               type: "datasetSerieAttribute",
-              property: u,
-              index: `${a},${s}`,
-              debug: ie.value
+              property: n,
+              index: `${a},${o}`,
+              debug: ce.value
             });
           });
         });
-      }), Je(x.dataset) || (re.value = e.value.loading), e.value.responsive) {
-        const t = et(() => {
-          const { width: a, height: l } = Xt({
+      }), Ke(x.dataset) || (ne.value = e.value.loading), e.value.responsive) {
+        const t = tt(() => {
+          const { width: a, height: l } = Zt({
             chart: w.value,
-            title: e.value.style.chart.title.text ? ke.value : null,
-            source: we.value,
-            noTitle: Ce.value
+            title: e.value.style.chart.title.text ? Ce.value : null,
+            source: Ae.value,
+            noTitle: Le.value
           });
           requestAnimationFrame(() => {
-            bt.value = l, $.value = Math.max(0.1, a), C.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? W.value = Gt({
+            yt.value = l, D.value = Math.max(0.1, a), A.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? B.value = qt({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.plots.radius,
               threshold: 6,
               fallback: 6
-            }) : W.value = e.value.style.chart.plots.radius;
+            }) : B.value = e.value.style.chart.plots.radius;
           });
         });
-        A.value && (D.value && A.value.unobserve(D.value), A.value.disconnect()), A.value = new ResizeObserver(t), D.value = w.value.parentNode, A.value.observe(D.value);
+        C.value && (P.value && C.value.unobserve(P.value), C.value.disconnect()), C.value = new ResizeObserver(t), P.value = w.value.parentNode, C.value.observe(P.value);
       }
-      Ae.value = !0, setTimeout(() => {
+      _e.value = !0, setTimeout(() => {
         R.value = !1;
-      }, gt.value * 50);
+      }, kt.value * 50);
     }
-    Xe(() => {
-      A.value && (D.value && A.value.unobserve(D.value), A.value.disconnect());
+    Ye(() => {
+      C.value && (P.value && C.value.unobserve(P.value), C.value.disconnect());
     });
-    const { isPrinting: Pe, isImaging: De, generatePdf: Ne, generateImage: Fe } = Jt({
+    const { isPrinting: Pe, isImaging: De, generatePdf: Ne, generateImage: Fe } = al({
       elementId: `strip-plot_${Q.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-strip-plot",
       options: e.value.userOptions.print
-    }), ft = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ie = p(() => Nt(e.value.customPalette)), R = i(e.value.useCssAnimation), N = i({
+    }), bt = c(() => e.value.userOptions.show && !e.value.style.chart.title.text), Me = c(() => Et(e.value.customPalette)), R = i(e.value.useCssAnimation), U = i({
       top: e.value.style.chart.padding.top,
       bottom: e.value.style.chart.padding.bottom,
       left: e.value.style.chart.padding.left,
       right: e.value.style.chart.padding.right
-    }), $ = i(e.value.style.chart.width), C = i(e.value.style.chart.height), bt = i(e.value.style.chart.height), W = i(e.value.style.chart.plots.radius), h = i({
+    }), D = i(e.value.style.chart.width), A = i(e.value.style.chart.height), yt = i(e.value.style.chart.height), B = i(e.value.style.chart.plots.radius), p = i({
       showTable: e.value.table.show,
       dataLabels: {
         show: e.value.style.chart.labels.bestPlotLabel.show
@@ -229,119 +230,119 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
       showTooltip: e.value.style.chart.tooltip.show
     });
     q(e, () => {
-      h.value = {
+      p.value = {
         showTable: e.value.table.show,
         dataLabels: {
           show: e.value.style.chart.labels.bestPlotLabel.show
         },
         showTooltip: e.value.style.chart.tooltip.show
-      }, $.value = e.value.style.chart.width, C.value = e.value.style.chart.height, W.value = e.value.style.chart.plots.radius;
+      }, D.value = e.value.style.chart.width, A.value = e.value.style.chart.height, B.value = e.value.style.chart.plots.radius;
     }, { immediate: !0 });
-    const ve = p(() => Math.min(W.value, o.value.stripWidth / 2 * 0.9));
-    function yt() {
+    const he = c(() => Math.min(B.value, s.value.stripWidth / 2 * 0.9));
+    function mt() {
       let t = 0;
-      oe.value && (t = Array.from(oe.value.querySelectorAll("text")).reduce((s, u) => {
-        const f = u.getComputedTextLength();
-        return f > s ? f : s;
+      oe.value && (t = Array.from(oe.value.querySelectorAll("text")).reduce((o, n) => {
+        const h = n.getComputedTextLength();
+        return h > o ? h : o;
       }, 0));
       const a = ae.value ? ae.value.getBoundingClientRect().width : 0;
       return t + a + (a ? 24 : 0);
     }
-    const ce = i(0), mt = et((t) => {
-      ce.value = t;
+    const de = i(0), gt = tt((t) => {
+      de.value = t;
     }, 100);
-    St((t) => {
+    Mt((t) => {
       const a = H.value;
       if (!a) return;
-      const l = new ResizeObserver((s) => {
-        mt(s[0].contentRect.height);
+      const l = new ResizeObserver((o) => {
+        gt(o[0].contentRect.height);
       });
       l.observe(a), t(() => l.disconnect());
-    }), Xe(() => {
-      ce.value = 0;
+    }), Ye(() => {
+      de.value = 0;
     });
-    const Me = p(() => {
+    const xt = c(() => {
       let t = 0;
       le.value && (t = le.value.getBBox().height + e.value.style.chart.labels.axis.fontSize / 3 + 12 + e.value.style.chart.labels.axis.xLabelOffsetY);
       let a = 0;
-      return H.value && (a = ce.value + 12), t + a;
-    }), o = p(() => {
-      const t = yt(), a = $.value - t - e.value.style.chart.padding.left - e.value.style.chart.padding.right - e.value.style.chart.labels.axis.yLabelOffsetX - 5;
+      return H.value && (a = de.value + 12), t + a;
+    }), s = c(() => {
+      const t = mt(), a = U.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5, l = D.value - U.value.right, o = Math.max(0, l - a), n = U.value.top + e.value.style.chart.plots.radius + e.value.style.chart.labels.bestPlotLabel.fontSize, h = A.value - U.value.bottom - xt.value, N = Math.max(0, h - n), Ve = Array.isArray(re.value) ? re.value.length : 0, Dt = Ve > 0 ? o / Ve : 0;
       return {
-        left: N.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5,
-        right: $.value - N.value.right,
-        top: N.value.top,
-        bottom: C.value - N.value.bottom - Me.value,
-        width: a,
-        height: C.value - N.value.top - N.value.bottom - Me.value,
-        stripWidth: a / Te.value.length,
-        absoluteHeight: C.value
+        left: a,
+        right: l,
+        top: n,
+        bottom: h,
+        width: o,
+        height: N,
+        stripWidth: Dt,
+        absoluteHeight: A.value
       };
-    }), U = p(() => Te.value.map((t, a) => {
-      const l = ye();
+    }), V = c(() => re.value.map((t, a) => {
+      const l = ge();
       return {
         ...t,
         id: l,
-        color: t.color ? Qe(t.color) : Ie.value[a] || P[a] || P[a % P.length],
-        plots: t.plots.map((s, u) => ({
-          ...s,
-          value: Ft(s.value),
+        color: t.color ? Ze(t.color) : Me.value[a] || z[a] || z[a % z.length],
+        plots: t.plots.map((o, n) => ({
+          ...o,
+          value: Gt(o.value),
           parentId: l,
           parentName: t.name,
           parentIndex: a,
-          plotIndex: u,
-          color: t.color ? Qe(t.color) : Ie.value[a] || P[a] || P[a % P.length],
-          id: ye()
-        })).sort((s, u) => s.value - u.value)
+          plotIndex: n,
+          color: t.color ? Ze(t.color) : Me.value[a] || z[a] || z[a % z.length],
+          id: ge()
+        })).sort((o, n) => o.value - n.value)
       };
-    })), k = p(() => (U.value || []).map((t, a) => ({
+    })), k = c(() => (V.value || []).map((t, a) => ({
       ...t,
       plots: t.plots.map((l) => ({
         ...l,
-        x: o.value.left + (a + 1) * o.value.stripWidth - o.value.stripWidth / 2
+        x: s.value.left + (a + 1) * s.value.stripWidth - s.value.stripWidth / 2
       }))
-    }))), gt = p(() => Math.max(...k.value.map((t) => t.plots.length))), he = p(() => {
+    }))), kt = c(() => Math.max(...k.value.map((t) => t.plots.length))), pe = c(() => {
       const t = k.value.flatMap((a) => a.plots.map((l) => l.value));
       return {
         max: Math.max(...t),
         min: Math.min(...t)
       };
-    }), S = p(() => It(he.value.min < 0 ? he.value.min : 0, he.value.max, e.value.style.chart.grid.scaleSteps)), xt = p(() => (k.value || []).map((t, a) => ({
+    }), $ = c(() => Ht(pe.value.min < 0 ? pe.value.min : 0, pe.value.max, e.value.style.chart.grid.scaleSteps)), wt = c(() => (k.value || []).map((t, a) => ({
       ...t,
       plots: t.plots.map((l) => ({
         ...l,
-        y: o.value.bottom - (l.value + Math.abs(S.value.min)) / (S.value.max + Math.abs(S.value.min)) * o.value.height
+        y: s.value.bottom - (l.value + Math.abs($.value.min)) / ($.value.max + Math.abs($.value.min)) * s.value.height
       }))
-    }))), Re = p(() => S.value.ticks.map((t) => ({
-      y: o.value.bottom - o.value.height * ((t + Math.abs(S.value.min)) / (S.value.max + Math.abs(S.value.min))),
-      x1: o.value.left,
-      x2: o.value.right,
+    }))), Ie = c(() => $.value.ticks.map((t) => ({
+      y: s.value.bottom - s.value.height * ((t + Math.abs($.value.min)) / ($.value.max + Math.abs($.value.min))),
+      x1: s.value.left,
+      x2: s.value.right,
       value: t
-    }))), de = i(null), d = i(null);
-    function kt({ datapoint: t, seriesIndex: a }) {
-      Z.value = !1, d.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }))), fe = i(null), f = i(null);
+    function Ct({ datapoint: t, seriesIndex: a }) {
+      Z.value = !1, f.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
     }
-    function wt({ datapoint: t, seriesIndex: a }) {
-      pt("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    function At({ datapoint: t, seriesIndex: a }) {
+      ft("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
     }
-    function Ct({ datapoint: t, seriesIndex: a }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), de.value = { datapoint: t, seriesIndex: a, config: e.value, series: U.value }, Z.value = !0, d.value = t;
+    function Lt({ datapoint: t, seriesIndex: a }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), fe.value = { datapoint: t, seriesIndex: a, config: e.value, series: V.value }, Z.value = !0, f.value = t;
       const l = e.value.style.chart.tooltip.customFormat;
-      if (Ze(l) && Vt(() => l({
+      if (et(l) && Qt(() => l({
         seriesIndex: a,
         datapoint: t,
-        series: U.value,
+        series: V.value,
         config: e.value
       })))
         ee.value = l({
           seriesIndex: a,
           datapoint: t,
-          series: U.value,
+          series: V.value,
           config: e.value
         });
       else {
-        let s = "";
-        s += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.value.style.chart.plots.gradient.show ? `url(#${t.parentId})` : t.color}"/></svg>${t.name}</div>`, s += `<div>${ge(
+        let o = "";
+        o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.value.style.chart.plots.gradient.show ? `url(#${t.parentId})` : t.color}"/></svg>${t.name}</div>`, o += `<div>${ke(
           e.value.style.chart.labels.formatter,
           t.value,
           K({
@@ -351,41 +352,41 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
             r: e.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: t, seriesIndex: a }
-        )}</div>`, ee.value = `<div>${s}</div>`;
+        )}</div>`, ee.value = `<div>${o}</div>`;
       }
     }
-    const V = p(() => {
-      const t = k.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => ({
-        name: `${l.name} - ${s.name}`,
-        color: s.color
-      }))), a = k.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => s.value));
+    const X = c(() => {
+      const t = k.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((o, n) => n.value - o.value).map((o) => ({
+        name: `${l.name} - ${o.name}`,
+        color: o.color
+      }))), a = k.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((o, n) => n.value - o.value).map((o) => o.value));
       return { head: t, body: a };
     });
-    function pe(t = null) {
-      zt(() => {
-        const a = V.value.head.map((u, f) => [[
-          u.name
-        ], [V.value.body[f]]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value]]].concat(a), s = Ht(l);
-        t ? t(s) : Ut({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
+    function be(t = null) {
+      Rt(() => {
+        const a = X.value.head.map((n, h) => [[
+          n.name
+        ], [X.value.body[h]]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value]]].concat(a), o = Jt(l);
+        t ? t(o) : Kt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
       });
     }
-    const X = p(() => {
+    const Y = c(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value
-      ], a = V.value.head.map((u, f) => {
-        const j = K({
+      ], a = X.value.head.map((n, h) => {
+        const N = K({
           p: e.value.style.chart.labels.prefix,
-          v: V.value.body[f],
+          v: X.value.body[h],
           s: e.value.style.chart.labels.suffix,
           r: e.value.table.td.roundingValue
         });
         return [
           {
-            color: u.color,
-            name: u.name
+            color: n.color,
+            name: n.name
           },
-          j
+          N
         ];
       }), l = {
         th: {
@@ -409,63 +410,63 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
         body: a,
         config: l
       };
-    }), O = i(!1);
-    function We(t) {
-      O.value = t, xe.value += 1;
+    }), S = i(!1);
+    function Re(t) {
+      S.value = t, we.value += 1;
     }
-    function At() {
+    function _t() {
       return k.value;
     }
     function Be() {
-      h.value.showTable = !h.value.showTable;
+      p.value.showTable = !p.value.showTable;
     }
-    function Ee() {
-      h.value.dataLabels.show = !h.value.dataLabels.show;
+    function We() {
+      p.value.dataLabels.show = !p.value.dataLabels.show;
     }
-    function Ge() {
-      h.value.showTooltip = !h.value.showTooltip;
+    function Ee() {
+      p.value.showTooltip = !p.value.showTooltip;
     }
-    const Y = i(!1);
-    function fe() {
-      Y.value = !Y.value;
+    const j = i(!1);
+    function ye() {
+      j.value = !j.value;
     }
-    async function Lt({ scale: t = 2 } = {}) {
+    async function Tt({ scale: t = 2 } = {}) {
       if (!w.value) return;
-      const { width: a, height: l } = w.value.getBoundingClientRect(), s = a / l, { imageUri: u, base64: f } = await el({ domElement: w.value, base64: !0, img: !0, scale: t });
+      const { width: a, height: l } = w.value.getBoundingClientRect(), o = a / l, { imageUri: n, base64: h } = await ul({ domElement: w.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: u,
-        base64: f,
+        imageUri: n,
+        base64: h,
         title: e.value.style.chart.title.text,
         width: a,
         height: l,
-        aspectRatio: s
+        aspectRatio: o
       };
     }
-    const He = p(() => k.value.map((t) => t.name)), _t = i({ start: 0, end: k.value.length });
-    Zt({
+    const Ge = c(() => k.value.map((t) => t.name)), $t = i({ start: 0, end: k.value.length });
+    nl({
       timeLabelsEls: H,
-      timeLabels: He,
-      slicer: _t,
+      timeLabels: Ge,
+      slicer: $t,
       configRef: e,
       rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
       autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
       isAutoSize: !1,
-      width: $,
-      height: C,
+      width: D,
+      height: A,
       targetClass: ".vue-ui-strip-plot-category-name",
       rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
     });
-    const B = p(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, a = h.value.showTable;
+    const W = c(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = p.value.showTable;
       return {
-        component: t ? ht : ut,
+        component: t ? dt : ut,
         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,
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: O.value,
+          isFullscreen: S.value,
           fullscreenParent: w.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
@@ -485,55 +486,68 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
         }
       };
     });
-    q(() => h.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && M.value ? M.value.open() : "close" in M.value && M.value.close());
+    q(() => p.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && I.value ? I.value.open() : "close" in I.value && I.value.close());
     });
-    function Ue() {
-      h.value.showTable = !1, te.value && te.value.setTableIconState(!1);
+    function He() {
+      p.value.showTable = !1, te.value && te.value.setTableIconState(!1);
     }
-    return at({
-      getData: At,
-      getImage: Lt,
+    const St = c(() => e.value.style.chart.backgroundColor), Ot = c(() => e.value.style.chart.title), { exportSvg: zt, getSvg: Pt } = ol({
+      svg: ie,
+      title: Ot,
+      backgroundColor: St
+    });
+    async function Ue({ isCb: t }) {
+      if (t) {
+        const { blob: a, url: l, text: o, dataUrl: n } = await Pt();
+        e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: n });
+      } else
+        zt();
+    }
+    return ot({
+      getData: _t,
+      getImage: Tt,
       generatePdf: Ne,
-      generateCsv: pe,
+      generateCsv: be,
       generateImage: Fe,
+      generateSvg: Ue,
       toggleTable: Be,
-      toggleLabels: Ee,
-      toggleTooltip: Ge,
-      toggleAnnotator: fe,
-      toggleFullscreen: We
-    }), (t, a) => (r(), n("div", {
+      toggleLabels: We,
+      toggleTooltip: Ee,
+      toggleAnnotator: ye,
+      toggleFullscreen: Re
+    }), (t, a) => (r(), u("div", {
       ref_key: "stripPlotChart",
       ref: w,
-      class: E(`vue-data-ui-component vue-ui-strip-plot ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      class: E(`vue-data-ui-component vue-ui-strip-plot ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: J(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
       id: `strip-plot_${Q.value}`,
-      onMouseenter: a[1] || (a[1] = () => v($e)(!0)),
-      onMouseleave: a[2] || (a[2] = () => v($e)(!1))
+      onMouseenter: a[1] || (a[1] = () => v(Se)(!0)),
+      onMouseleave: a[2] || (a[2] = () => v(Se)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), z(v(vt), {
+      e.value.userOptions.buttons.annotator ? (r(), O(v(ct), {
         key: 0,
-        svgRef: v(Oe),
+        svgRef: v(ie),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: Y.value,
-        onClose: fe
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
-      ft.value ? (r(), n("div", {
+        active: j.value,
+        onClose: ye
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
+      bt.value ? (r(), u("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Ce,
+        ref: Le,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : c("", !0),
-      e.value.style.chart.title.text ? (r(), n("div", {
+      }, null, 512)) : d("", !0),
+      e.value.style.chart.title.text ? (r(), u("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ke,
+        ref: Ce,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (r(), z(ll, {
-          key: `title_${Le.value}`,
+        (r(), O(vl, {
+          key: `title_${Te.value}`,
           config: {
             title: {
               cy: "donut-div-title",
@@ -545,11 +559,11 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : c("", !0),
-      e.value.userOptions.show && G.value && (v(Se) || v(ue)) ? (r(), z(v(it), {
+      ], 512)) : d("", !0),
+      e.value.userOptions.show && G.value && (v(Oe) || v(ue)) ? (r(), O(v(vt), {
         ref_key: "userOptionsRef",
         ref: te,
-        key: `user_option_${xe.value}`,
+        key: `user_option_${we.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: v(Pe),
@@ -559,35 +573,37 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
         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,
-        isTooltip: h.value.showTooltip,
-        isFullscreen: O.value,
+        isTooltip: p.value.showTooltip,
+        isFullscreen: S.value,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: w.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: Y.value,
+        isAnnotation: j.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: We,
+        onToggleFullscreen: Re,
         onGeneratePdf: v(Ne),
-        onGenerateCsv: pe,
+        onGenerateCsv: be,
         onGenerateImage: v(Fe),
+        onGenerateSvg: Ue,
         onToggleTable: Be,
-        onToggleLabels: Ee,
-        onToggleTooltip: Ge,
-        onToggleAnnotator: fe,
+        onToggleLabels: We,
+        onToggleTooltip: Ee,
+        onToggleAnnotator: ye,
         style: J({
-          visibility: v(Se) ? v(ue) ? "visible" : "hidden" : "visible"
+          visibility: v(Oe) ? v(ue) ? "visible" : "hidden" : "visible"
         })
-      }, Ye({ _: 2 }, [
+      }, je({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: b(({ isOpen: l, color: s }) => [
-            y(t.$slots, "menuIcon", F(I({ isOpen: l, color: s })), void 0, !0)
+          fn: b(({ isOpen: l, color: o }) => [
+            y(t.$slots, "menuIcon", F(M({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -635,43 +651,43 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: b(({ toggleFullscreen: l, isFullscreen: s }) => [
-            y(t.$slots, "optionFullscreen", F(I({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
+          fn: b(({ toggleFullscreen: l, isFullscreen: o }) => [
+            y(t.$slots, "optionFullscreen", F(M({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: b(({ toggleAnnotator: l, isAnnotator: s }) => [
-            y(t.$slots, "optionAnnotator", F(I({ toggleAnnotator: l, isAnnotator: s })), void 0, !0)
+          fn: b(({ toggleAnnotator: l, isAnnotator: o }) => [
+            y(t.$slots, "optionAnnotator", F(M({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
-      (r(), n("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
+      (r(), u("svg", {
         ref_key: "svgRef",
-        ref: Oe,
-        xmlns: v(Mt),
-        class: E({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
-        viewBox: `0 0 ${$.value} ${C.value}`,
+        ref: ie,
+        xmlns: v(Ut),
+        class: E({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value }),
+        viewBox: `0 0 ${D.value} ${A.value}`,
         style: J(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
       }, [
-        be(v(ct)),
-        t.$slots["chart-background"] ? (r(), n("foreignObject", {
+        me(v(ht)),
+        t.$slots["chart-background"] ? (r(), u("foreignObject", {
           key: 0,
-          x: o.value.left,
-          y: o.value.top,
-          width: Math.max(0.1, o.value.width),
-          height: Math.max(0.1, o.value.height),
+          x: s.value.left,
+          y: s.value.top,
+          width: Math.max(0.1, s.value.width),
+          height: Math.max(0.1, s.value.height),
           style: {
             pointerEvents: "none"
           }
         }, [
           y(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, ul)) : c("", !0),
-        e.value.style.chart.grid.show ? (r(), n("g", nl, [
-          e.value.style.chart.grid.horizontalGrid.show ? (r(), n("g", il, [
-            (r(!0), n(g, null, _(Re.value, (l) => (r(), n("line", {
+        ], 8, fl)) : d("", !0),
+        e.value.style.chart.grid.show ? (r(), u("g", bl, [
+          e.value.style.chart.grid.horizontalGrid.show ? (r(), u("g", yl, [
+            (r(!0), u(g, null, _(Ie.value, (l) => (r(), u("line", {
               x1: l.x1,
               x2: l.x2,
               y1: l.y,
@@ -680,51 +696,51 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
               "stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
               "stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray,
               "stroke-linecap": "round"
-            }, null, 8, vl))), 256))
-          ])) : c("", !0),
-          e.value.style.chart.grid.verticalGrid.show ? (r(), n("g", cl, [
-            (r(!0), n(g, null, _(k.value, (l, s) => (r(), n("line", {
-              x1: o.value.left + (s + 1) * o.value.stripWidth,
-              x2: o.value.left + (s + 1) * o.value.stripWidth,
-              y1: o.value.top,
-              y2: o.value.bottom,
+            }, null, 8, ml))), 256))
+          ])) : d("", !0),
+          e.value.style.chart.grid.verticalGrid.show ? (r(), u("g", gl, [
+            (r(!0), u(g, null, _(k.value, (l, o) => (r(), u("line", {
+              x1: s.value.left + (o + 1) * s.value.stripWidth,
+              x2: s.value.left + (o + 1) * s.value.stripWidth,
+              y1: s.value.top,
+              y2: s.value.bottom,
               stroke: e.value.style.chart.grid.verticalGrid.stroke,
               "stroke-width": e.value.style.chart.grid.verticalGrid.strokeWidth,
               "stroke-dasharray": e.value.style.chart.grid.verticalGrid.strokeDasharray,
               "stroke-linecap": "round"
-            }, null, 8, hl))), 256))
-          ])) : c("", !0),
+            }, null, 8, xl))), 256))
+          ])) : d("", !0),
           m("line", {
-            x1: o.value.left,
-            x2: o.value.left,
-            y1: o.value.top,
-            y2: o.value.bottom,
+            x1: s.value.left,
+            x2: s.value.left,
+            y1: s.value.top,
+            y2: s.value.bottom,
             stroke: e.value.style.chart.grid.stroke,
             "stroke-width": e.value.style.chart.grid.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, dl),
+          }, null, 8, kl),
           m("line", {
-            x1: o.value.left,
-            x2: o.value.right,
-            y1: o.value.bottom,
-            y2: o.value.bottom,
+            x1: s.value.left,
+            x2: s.value.right,
+            y1: s.value.bottom,
+            y2: s.value.bottom,
             stroke: e.value.style.chart.grid.stroke,
             "stroke-width": e.value.style.chart.grid.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, pl)
-        ])) : c("", !0),
-        e.value.style.chart.labels.yAxisLabels.show ? (r(), n("g", {
+          }, null, 8, wl)
+        ])) : d("", !0),
+        e.value.style.chart.labels.yAxisLabels.show ? (r(), u("g", {
           key: 2,
           ref_key: "scaleLabels",
           ref: oe
         }, [
-          (r(!0), n(g, null, _(Re.value, (l, s) => (r(), n("text", {
+          (r(!0), u(g, null, _(Ie.value, (l, o) => (r(), u("text", {
             x: l.x1 + e.value.style.chart.labels.yAxisLabels.offsetX - 5,
             y: l.y + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
             fill: e.value.style.chart.labels.yAxisLabels.color,
             "font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
             "text-anchor": "end"
-          }, T(v(ge)(
+          }, T(v(ke)(
             e.value.style.chart.labels.formatter,
             l.value,
             v(K)({
@@ -733,156 +749,156 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
               s: e.value.style.chart.labels.suffix,
               r: e.value.style.chart.labels.yAxisLabels.rounding
             }),
-            { datapoint: l, seriesIndex: s }
-          )), 9, fl))), 256))
-        ], 512)) : c("", !0),
-        e.value.style.chart.labels.xAxisLabels.show ? (r(), n("g", {
+            { datapoint: l, seriesIndex: o }
+          )), 9, Cl))), 256))
+        ], 512)) : d("", !0),
+        e.value.style.chart.labels.xAxisLabels.show ? (r(), u("g", {
           key: 3,
           ref_key: "timeLabelsEls",
           ref: H
         }, [
-          (r(!0), n(g, null, _(He.value, (l, s) => (r(), n("g", null, [
+          (r(!0), u(g, null, _(Ge.value, (l, o) => (r(), u("g", null, [
             String(l).includes(`
-`) ? (r(), n("text", {
+`) ? (r(), u("text", {
               key: 1,
               class: "vue-ui-strip-plot-category-name",
-              transform: `translate(${o.value.left + (s + 1) * o.value.stripWidth - o.value.stripWidth / 2}, ${o.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
+              transform: `translate(${s.value.left + (o + 1) * s.value.stripWidth - s.value.stripWidth / 2}, ${s.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
               "font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
               fill: e.value.style.chart.labels.xAxisLabels.color,
               "text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
-              innerHTML: v(Rt)({
-                content: v(Wt)(String(l)),
+              innerHTML: v(Vt)({
+                content: v(Xt)(String(l)),
                 fontSize: e.value.style.chart.labels.xAxisLabels.fontSize,
                 fill: e.value.style.chart.labels.xAxisLabels.color,
                 x: 0,
                 y: 0
               })
-            }, null, 8, yl)) : (r(), n("text", {
+            }, null, 8, Ll)) : (r(), u("text", {
               key: 0,
               class: "vue-ui-strip-plot-category-name",
-              transform: `translate(${o.value.left + (s + 1) * o.value.stripWidth - o.value.stripWidth / 2}, ${o.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
+              transform: `translate(${s.value.left + (o + 1) * s.value.stripWidth - s.value.stripWidth / 2}, ${s.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
               "font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
               fill: e.value.style.chart.labels.xAxisLabels.color,
               "text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
-            }, T(String(l)), 9, bl))
+            }, T(String(l)), 9, Al))
           ]))), 256))
-        ], 512)) : c("", !0),
-        e.value.style.chart.labels.axis.yLabel ? (r(), n("text", {
+        ], 512)) : d("", !0),
+        e.value.style.chart.labels.axis.yLabel ? (r(), u("text", {
           key: 4,
           ref_key: "yAxisLabel",
           ref: ae,
           fill: e.value.style.chart.labels.axis.color,
           "font-size": e.value.style.chart.labels.axis.fontSize,
-          transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${o.value.top + o.value.height / 2}) rotate(-90)`,
+          transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${s.value.top + s.value.height / 2}) rotate(-90)`,
           "text-anchor": "middle"
-        }, T(e.value.style.chart.labels.axis.yLabel), 9, ml)) : c("", !0),
-        e.value.style.chart.labels.axis.xLabel ? (r(), n("text", {
+        }, T(e.value.style.chart.labels.axis.yLabel), 9, _l)) : d("", !0),
+        e.value.style.chart.labels.axis.xLabel ? (r(), u("text", {
           key: 5,
           ref_key: "xAxisLabel",
           ref: le,
           fill: e.value.style.chart.labels.axis.color,
           "font-size": e.value.style.chart.labels.axis.fontSize,
-          x: o.value.left + o.value.width / 2,
-          y: C.value - e.value.style.chart.labels.axis.fontSize / 3,
+          x: s.value.left + s.value.width / 2,
+          y: A.value - e.value.style.chart.labels.axis.fontSize / 3,
           "text-anchor": "middle"
-        }, T(e.value.style.chart.labels.axis.xLabel), 9, gl)) : c("", !0),
-        d.value ? (r(), n(g, { key: 6 }, [
+        }, T(e.value.style.chart.labels.axis.xLabel), 9, Tl)) : d("", !0),
+        f.value ? (r(), u(g, { key: 6 }, [
           m("line", {
-            x1: o.value.left,
-            x2: o.value.right,
-            y1: d.value.y,
-            y2: d.value.y,
-            stroke: d.value.color,
+            x1: s.value.left,
+            x2: s.value.right,
+            y1: f.value.y,
+            y2: f.value.y,
+            stroke: f.value.color,
             "stroke-width": 1,
             class: E({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, xl),
+          }, null, 10, $l),
           m("circle", {
-            cx: o.value.left,
-            cy: d.value.y,
+            cx: s.value.left,
+            cy: f.value.y,
             r: 3,
-            fill: d.value.color,
+            fill: f.value.color,
             class: E({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, kl),
+          }, null, 10, Sl),
           m("circle", {
-            cx: o.value.right,
-            cy: d.value.y,
+            cx: s.value.right,
+            cy: f.value.y,
             r: 3,
-            fill: d.value.color,
+            fill: f.value.color,
             class: E({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, wl)
-        ], 64)) : c("", !0),
+          }, null, 10, Ol)
+        ], 64)) : d("", !0),
         m("defs", null, [
-          (r(!0), n(g, null, _(k.value, (l) => (r(), n("radialGradient", {
+          (r(!0), u(g, null, _(k.value, (l) => (r(), u("radialGradient", {
             id: l.id,
             fy: "30%"
           }, [
             m("stop", {
               offset: "10%",
-              "stop-color": v(Bt)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
-            }, null, 8, Al),
+              "stop-color": v(Yt)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Pl),
             m("stop", {
               offset: "90%",
-              "stop-color": v(Et)(l.color, 0.1)
-            }, null, 8, Ll),
+              "stop-color": v(jt)(l.color, 0.1)
+            }, null, 8, Dl),
             m("stop", {
               offset: "100%",
               "stop-color": l.color
-            }, null, 8, _l)
-          ], 8, Cl))), 256))
+            }, null, 8, Nl)
+          ], 8, zl))), 256))
         ]),
-        (r(!0), n(g, null, _(xt.value, (l, s) => (r(), n(g, null, [
-          (r(!0), n(g, null, _(l.plots, (u, f) => (r(), z(tl, je({ ref_for: !0 }, t.$attrs, {
-            plot: { x: u.x, y: Ae.value ? u.y : o.value.top },
-            radius: d.value && d.value.id === u.id ? ve.value * 1.5 : ve.value,
+        (r(!0), u(g, null, _(wt.value, (l, o) => (r(), u(g, null, [
+          (r(!0), u(g, null, _(l.plots, (n, h) => (r(), O(il, qe({ ref_for: !0 }, t.$attrs, {
+            plot: { x: n.x, y: _e.value ? n.y : s.value.top },
+            radius: f.value && f.value.id === n.id ? he.value * 1.5 : he.value,
             shape: e.value.style.chart.plots.shape,
             stroke: e.value.style.chart.plots.stroke,
             strokeWidth: e.value.style.chart.plots.strokeWidth,
             color: e.value.style.chart.plots.gradient.show ? `url(#${l.id})` : l.color,
-            style: `transition: all 0.2s ease-in-out; opacity:${d.value ? d.value.id === u.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${R.value ? `transition-delay:${f * 50}ms` : ""}`,
+            style: `transition: all 0.2s ease-in-out; opacity:${f.value ? f.value.id === n.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${R.value ? `transition-delay:${h * 50}ms` : ""}`,
             class: { "vue-ui-strip-plot-animated": e.value.useCssAnimation && R.value && !v(se), "vue-ui-strip-plot-select-circle": e.value.useCssAnimation && !R.value },
-            onMouseenter: (j) => Ct({ datapoint: u, seriesIndex: f }),
-            onMouseleave: (j) => kt({ datapoint: u, seriesIndex: f }),
-            onClick: (j) => wt({ datapoint: u, seriesIndex: f })
+            onMouseenter: (N) => Lt({ datapoint: n, seriesIndex: h }),
+            onMouseleave: (N) => Ct({ datapoint: n, seriesIndex: h }),
+            onClick: (N) => At({ datapoint: n, seriesIndex: h })
           }), null, 16, ["plot", "radius", "shape", "stroke", "strokeWidth", "color", "style", "class", "onMouseenter", "onMouseleave", "onClick"]))), 256)),
-          h.value.dataLabels.show ? (r(), n("g", Tl, [
-            (r(!0), n(g, null, _(l.plots, (u, f) => (r(), n(g, null, [
-              f === l.plots.length - 1 || d.value && d.value.id === u.id && !h.value.showTooltip ? (r(), n("text", {
+          p.value.dataLabels.show ? (r(), u("g", Fl, [
+            (r(!0), u(g, null, _(l.plots, (n, h) => (r(), u(g, null, [
+              h === l.plots.length - 1 || f.value && f.value.id === n.id && !p.value.showTooltip ? (r(), u("text", {
                 key: 0,
-                x: u.x,
-                y: u.y + e.value.style.chart.labels.bestPlotLabel.offsetY - ve.value * (d.value && d.value.id === u.id && !h.value.showTooltip ? 2 : 1.5),
+                x: n.x,
+                y: n.y + e.value.style.chart.labels.bestPlotLabel.offsetY - he.value * (f.value && f.value.id === n.id && !p.value.showTooltip ? 2 : 1.5),
                 "font-size": e.value.style.chart.labels.bestPlotLabel.fontSize,
                 fill: e.value.style.chart.labels.bestPlotLabel.color,
                 "text-anchor": "middle",
                 style: J(`opacity:${e.value.useCssAnimation && R.value ? 0 : 1};transition:opacity 0.2s ease-in;`)
-              }, T(u.name) + " " + T(e.value.style.chart.labels.bestPlotLabel.showValue ? v(ge)(
+              }, T(n.name) + " " + T(e.value.style.chart.labels.bestPlotLabel.showValue ? v(ke)(
                 e.value.style.chart.labels.formatter,
-                u.value,
+                n.value,
                 v(K)({
                   p: `(${e.value.style.chart.labels.prefix}`,
-                  v: u.value,
+                  v: n.value,
                   s: `${e.value.style.chart.labels.suffix})`,
                   r: e.value.style.chart.labels.bestPlotLabel.rounding
                 }),
-                { datapoint: u, seriesIndex: f }
-              ) : ""), 13, $l)) : c("", !0)
+                { datapoint: n, seriesIndex: h }
+              ) : ""), 13, Ml)) : d("", !0)
             ], 64))), 256))
-          ])) : c("", !0)
+          ])) : d("", !0)
         ], 64))), 256)),
-        y(t.$slots, "svg", { svg: o.value }, void 0, !0)
-      ], 14, rl)),
-      t.$slots.watermark ? (r(), n("div", Sl, [
-        y(t.$slots, "watermark", F(I({ isPrinting: v(Pe) || v(De) })), void 0, !0)
-      ])) : c("", !0),
-      t.$slots.source ? (r(), n("div", {
+        y(t.$slots, "svg", { svg: s.value }, void 0, !0)
+      ], 14, pl)),
+      t.$slots.watermark ? (r(), u("div", Il, [
+        y(t.$slots, "watermark", F(M({ isPrinting: v(Pe) || v(De) })), void 0, !0)
+      ])) : d("", !0),
+      t.$slots.source ? (r(), u("div", {
         key: 5,
         ref_key: "source",
-        ref: we,
+        ref: Ae,
         dir: "auto"
       }, [
         y(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : c("", !0),
-      be(v(st), {
-        show: h.value.showTooltip && Z.value,
+      ], 512)) : d("", !0),
+      me(v(rt), {
+        show: p.value.showTooltip && Z.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -894,45 +910,45 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: w.value,
         content: ee.value,
-        isFullscreen: O.value,
-        isCustom: v(Ze)(e.value.style.chart.tooltip.customFormat),
+        isFullscreen: S.value,
+        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(() => [
-          y(t.$slots, "tooltip-before", F(I({ ...de.value })), void 0, !0)
+          y(t.$slots, "tooltip-before", F(M({ ...fe.value })), void 0, !0)
         ]),
         "tooltip-after": b(() => [
-          y(t.$slots, "tooltip-after", F(I({ ...de.value })), void 0, !0)
+          y(t.$slots, "tooltip-after", F(M({ ...fe.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      G.value && e.value.userOptions.buttons.table ? (r(), z(Ot(B.value.component), je({ key: 6 }, B.value.props, {
+      G.value && e.value.userOptions.buttons.table ? (r(), O(It(W.value.component), qe({ key: 6 }, W.value.props, {
         ref_key: "tableUnit",
-        ref: M,
-        onClose: Ue
-      }), Ye({
+        ref: I,
+        onClose: He
+      }), je({
         content: b(() => [
-          (r(), z(v(nt), {
-            key: `table_${_e.value}`,
-            colNames: X.value.colNames,
-            head: X.value.head,
-            body: X.value.body,
-            config: X.value.config,
-            title: e.value.table.useDialog ? "" : B.value.title,
+          (r(), O(v(it), {
+            key: `table_${$e.value}`,
+            colNames: Y.value.colNames,
+            head: Y.value.head,
+            body: Y.value.body,
+            config: Y.value.config,
+            title: e.value.table.useDialog ? "" : W.value.title,
             withCloseButton: !e.value.table.useDialog,
-            onClose: Ue
+            onClose: He
           }, {
             th: b(({ th: l }) => [
               m("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Ol)
+              }, null, 8, Rl)
             ]),
             td: b(({ td: l }) => [
-              qe(T(l.name || l), 1)
+              Je(T(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -942,7 +958,7 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
         e.value.table.useDialog ? {
           name: "title",
           fn: b(() => [
-            qe(T(B.value.title), 1)
+            Je(T(W.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -952,21 +968,21 @@ const sl = ["id"], rl = ["xmlns", "viewBox"], ul = ["x", "y", "width", "height"]
             m("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: a[0] || (a[0] = (l) => pe(e.value.userOptions.callbacks.csv))
+              onClick: a[0] || (a[0] = (l) => be(e.value.userOptions.callbacks.csv))
             }, [
-              be(v(rt), {
+              me(v(nt), {
                 name: "excel",
-                stroke: B.value.props.color
+                stroke: W.value.props.color
               }, null, 8, ["stroke"])
             ])
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : c("", !0),
-      v(se) ? (r(), z(qt, { key: 7 })) : c("", !0)
-    ], 46, sl));
+      ]), 1040)) : d("", !0),
+      v(se) ? (r(), O(ll, { key: 7 })) : d("", !0)
+    ], 46, dl));
   }
-}, Xl = /* @__PURE__ */ ol(zl, [["__scopeId", "data-v-09560ff5"]]);
+}, ta = /* @__PURE__ */ hl(Bl, [["__scopeId", "data-v-20847046"]]);
 export {
-  Xl as default
+  ta as default
 };