vue-data-ui 3.10.0 → 3.10.2

package/dist/{vue-ui-strip-plot-B7W1EZdY.js → vue-ui-strip-plot-CJ1Zkrhq.js}

@@ -1,39 +1,43 @@
-import { defineAsyncComponent as T, computed as h, ref as i, toRefs as Ht, watch as q, shallowRef as Xe, onMounted as Ut, onBeforeUnmount as Ye, watchEffect as Vt, createElementBlock as u, openBlock as r, unref as c, normalizeStyle as J, normalizeClass as R, createBlock as O, createCommentVNode as f, createVNode as ge, withCtx as v, renderSlot as d, normalizeProps as m, guardReactiveProps as C, createSlots as qe, createElementVNode as k, Fragment as x, renderList as $, toDisplayString as S, mergeProps as Je, resolveDynamicComponent as jt, createTextVNode as Ke, nextTick as Xt } from "vue";
-import { c as me, t as Yt, i as qt, j as P, o as Qe, g as Ce, l as Ze, k as Jt, m as et, U as Kt, N as Qt, d as K, X as Zt, a as ke, $ as el, au as tl, q as ll, u as al, y as tt, a2 as ol, v as sl, r as rl, _ as nl } from "./lib-2iaAPQ_c.js";
-import { t as lt, u as ul } from "./useResponsive-DfdjqQps.js";
-import { u as il, a as xe } from "./useNestedProp-BCt4DMkT.js";
-import { u as cl, B as vl } from "./BaseScanner-BMpwQAfz.js";
-import { u as dl } from "./usePrinter-ChVMpU2f.js";
-import { u as hl } from "./useSvgExport-ByUukOZt.js";
-import { u as bl } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as fl } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as pl } from "./useChartAccessibility-9icAAmYg.js";
-import { u as yl } from "./useTimeLabelCollider-CIsgDrl9.js";
-import gl from "./img-CqYIrJ8I.js";
-import { _ as ml } from "./Shape-12_eh8zD.js";
-import Cl from "./Title-B5L2jweB.js";
-import { _ as kl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", grid: { stroke: "#5A5A5A", horizontalGrid: { stroke: "#4A4A4A" }, verticalGrid: { stroke: "#4A4A4A" } }, plots: { stroke: "#1A1A1A" }, labels: { bestPlotLabel: { color: "#CCCCCC" }, axis: { color: "#CCCCCC" }, xAxisLabels: { color: "#CCCCCC" }, yAxisLabels: { color: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, ot = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", grid: { stroke: "#5D4037", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#FFF8E1" }, labels: { bestPlotLabel: { color: "#424242" }, axis: { color: "#424242" }, xAxisLabels: { color: "#424242" }, yAxisLabels: { color: "#424242" } }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, st = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", grid: { stroke: "#5D4037", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#1E1E1E" }, labels: { bestPlotLabel: { color: "#BDBDBD" }, axis: { color: "#BDBDBD" }, xAxisLabels: { color: "#BDBDBD" }, yAxisLabels: { color: "#BDBDBD" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, rt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", grid: { stroke: "#5F6A5F", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#00FF00" }, labels: { bestPlotLabel: { color: "#AACCAA" }, axis: { color: "#99CC99" }, xAxisLabels: { color: "#99CC99" }, yAxisLabels: { color: "#99CC99" } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, nt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", grid: { show: !1, horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#fbfafa" }, labels: { bestPlotLabel: { color: "#A0AC94" }, axis: { color: "#A0AC94" }, xAxisLabels: { color: "#A0AC94" }, yAxisLabels: { show: !1, color: "#A0AC94" } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, ut = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", grid: { stroke: "#829C98", horizontalGrid: { stroke: "#829C98" }, verticalGrid: { stroke: "#829C98" } }, plots: { stroke: "#404C5A" }, labels: { bestPlotLabel: { color: "#61747E" }, axis: { color: "#61747E" }, xAxisLabels: { color: "#61747E" }, yAxisLabels: { color: "#61747E" } }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, it = {
+import { defineAsyncComponent as T, computed as h, ref as u, toRefs as Vt, watch as q, shallowRef as Xe, onMounted as jt, onBeforeUnmount as Ye, watchEffect as Xt, createElementBlock as i, openBlock as r, unref as c, normalizeStyle as J, normalizeClass as R, createBlock as O, createCommentVNode as f, createVNode as ge, withCtx as v, renderSlot as d, normalizeProps as m, guardReactiveProps as C, createSlots as qe, createElementVNode as k, Fragment as A, renderList as $, toDisplayString as S, mergeProps as Je, resolveDynamicComponent as Yt, createTextVNode as Ke, nextTick as qt } from "vue";
+import { c as me, t as Jt, i as Kt, j as P, o as Qe, g as Ce, l as Ze, k as Qt, m as et, U as Zt, N as el, d as K, X as tl, a as ke, $ as ll, au as ol, q as al, u as sl, y as tt, a2 as rl, v as nl, r as il, _ as ul } from "./lib-CVHM9FhP.js";
+import { t as lt, u as cl } from "./useResponsive-DfdjqQps.js";
+import { u as vl, a as Ae } from "./useNestedProp-Ckf_2P_V.js";
+import { u as dl, B as hl } from "./BaseScanner-BMpwQAfz.js";
+import { u as bl } from "./usePrinter-1NmjuP-i.js";
+import { u as fl } from "./useSvgExport-ByUukOZt.js";
+import { u as pl } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as yl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as gl } from "./useChartAccessibility-9icAAmYg.js";
+import { u as ml } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Cl from "./img-6fNF_rG0.js";
+import { _ as kl } from "./Shape-PzdCMGsP.js";
+import Al from "./Title-NgeRXqRA.js";
+import { _ as xl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ot = { userOptions: { show: !1 }, style: { chart: { grid: { horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { gradient: { show: !1 } } } } }, at = { userOptions: { show: !1 }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", grid: { stroke: "#5A5A5A", horizontalGrid: { show: !1, stroke: "#4A4A4A" }, verticalGrid: { show: !1, stroke: "#4A4A4A" } }, plots: { stroke: "#1A1A1A", gradient: { show: !1 } }, labels: { bestPlotLabel: { color: "#CCCCCC" }, axis: { color: "#CCCCCC" }, xAxisLabels: { color: "#CCCCCC" }, yAxisLabels: { color: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#3A3A3A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", grid: { stroke: "#5A5A5A", horizontalGrid: { stroke: "#4A4A4A" }, verticalGrid: { stroke: "#4A4A4A" } }, plots: { stroke: "#1A1A1A" }, labels: { bestPlotLabel: { color: "#CCCCCC" }, axis: { color: "#CCCCCC" }, xAxisLabels: { color: "#CCCCCC" }, yAxisLabels: { color: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, rt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", grid: { stroke: "#5D4037", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#FFF8E1" }, labels: { bestPlotLabel: { color: "#424242" }, axis: { color: "#424242" }, xAxisLabels: { color: "#424242" }, yAxisLabels: { color: "#424242" } }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, nt = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", grid: { stroke: "#5D4037", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#1E1E1E" }, labels: { bestPlotLabel: { color: "#BDBDBD" }, axis: { color: "#BDBDBD" }, xAxisLabels: { color: "#BDBDBD" }, yAxisLabels: { color: "#BDBDBD" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, it = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", grid: { stroke: "#5F6A5F", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#00FF00" }, labels: { bestPlotLabel: { color: "#AACCAA" }, axis: { color: "#99CC99" }, xAxisLabels: { color: "#99CC99" }, yAxisLabels: { color: "#99CC99" } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, ut = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", grid: { show: !1, horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#fbfafa" }, labels: { bestPlotLabel: { color: "#A0AC94" }, axis: { color: "#A0AC94" }, xAxisLabels: { color: "#A0AC94" }, yAxisLabels: { show: !1, color: "#A0AC94" } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, ct = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", grid: { stroke: "#829C98", horizontalGrid: { stroke: "#829C98" }, verticalGrid: { stroke: "#829C98" } }, plots: { stroke: "#404C5A" }, labels: { bestPlotLabel: { color: "#61747E" }, axis: { color: "#61747E" }, xAxisLabels: { color: "#61747E" }, yAxisLabels: { color: "#61747E" } }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, vt = {
   default: {},
-  dark: at,
-  celebration: ot,
-  celebrationNight: st,
-  hack: rt,
-  zen: nt,
-  concrete: ut
-}, va = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  minimal: ot,
+  minimalDark: at,
+  dark: st,
+  celebration: rt,
+  celebrationNight: nt,
+  hack: it,
+  zen: ut,
+  concrete: ct
+}, bo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: ot,
-  celebrationNight: st,
-  concrete: ut,
-  dark: at,
-  default: it,
-  hack: rt,
-  zen: nt
-}, Symbol.toStringTag, { value: "Module" })), xl = ["id"], Al = ["xmlns", "viewBox"], wl = ["x", "y", "width", "height"], Ll = { key: 1 }, _l = { key: 0 }, Tl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], $l = { key: 1 }, Sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Dl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ol = ["x", "y", "fill", "font-size"], Pl = ["transform", "font-size", "fill", "text-anchor"], zl = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], Bl = ["fill", "font-size", "transform"], El = ["fill", "font-size", "x", "y"], Nl = ["x1", "x2", "y1", "y2", "stroke"], Ml = ["cx", "cy", "fill"], Gl = ["cx", "cy", "fill"], Il = ["id"], Rl = ["stop-color"], Wl = ["stop-color"], Hl = ["stop-color"], Ul = { key: 0 }, Vl = ["x", "y", "font-size", "fill"], jl = {
+  celebration: rt,
+  celebrationNight: nt,
+  concrete: ct,
+  dark: st,
+  default: vt,
+  hack: it,
+  minimal: ot,
+  minimalDark: at,
+  zen: ut
+}, Symbol.toStringTag, { value: "Module" })), wl = ["id"], Ll = ["xmlns", "viewBox"], _l = ["x", "y", "width", "height"], Tl = { key: 1 }, $l = { key: 0 }, Sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Dl = { key: 1 }, Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ol = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], zl = ["x", "y", "fill", "font-size"], Bl = ["transform", "font-size", "fill", "text-anchor"], El = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], Nl = ["fill", "font-size", "transform"], Gl = ["fill", "font-size", "x", "y"], Ml = ["x1", "x2", "y1", "y2", "stroke"], Il = ["cx", "cy", "fill"], Rl = ["cx", "cy", "fill"], Wl = ["id"], Hl = ["stop-color"], Ul = ["stop-color"], Vl = ["stop-color"], jl = { key: 0 }, Xl = ["x", "y", "font-size", "fill"], Yl = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Xl = ["innerHTML"], Yl = {
+}, ql = ["innerHTML"], Jl = {
   __name: "vue-ui-strip-plot",
   props: {
     config: {
@@ -50,16 +54,16 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
     }
   },
   emits: ["selectDatapoint"],
-  setup(ct, { expose: vt, emit: dt }) {
-    const ht = T(() => import("./Tooltip-DpfUZbt7.js")), bt = T(() => import("./BaseIcon-B9bGT7HU.js")), ft = T(() => import("./vue-ui-accordion-CAXPDm31.js")), pt = T(() => import("./DataTable-DEwh__D8.js")), yt = T(() => import("./UserOptions-5pXc4J-c.js")), gt = T(() => import("./PenAndPaper-CulSakut.js")), mt = T(() => import("./PackageVersion-C-JOGZBL.js")), Ct = T(() => import("./BaseDraggableDialog-O2XSymlZ.js")), { vue_ui_strip_plot: kt } = il(), { isThemeValid: xt, warnInvalidTheme: At } = bl(), g = ct, wt = dt, W = h({
+  setup(dt, { expose: ht, emit: bt }) {
+    const ft = T(() => import("./Tooltip-B6qvABDL.js")), pt = T(() => import("./BaseIcon-4uOct8re.js")), yt = T(() => import("./vue-ui-accordion-DFKaB_05.js")), gt = T(() => import("./DataTable-DyoDzNNY.js")), mt = T(() => import("./UserOptions-CX7Xsusk.js")), Ct = T(() => import("./PenAndPaper-LTuSTmWE.js")), kt = T(() => import("./PackageVersion-CQxJyGQr.js")), At = T(() => import("./BaseDraggableDialog-BQYfVNu8.js")), { vue_ui_strip_plot: xt } = vl(), { isThemeValid: wt, warnInvalidTheme: Lt } = pl(), g = dt, _t = bt, W = h({
       get() {
         return !!g.dataset && g.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), Q = i(me()), Ae = i(0), Z = i(!1), ee = i(""), w = i(null), we = i(null), Le = i(null), _e = i(null), Te = i(!1), $e = i(0), Se = i(0), N = i(null), te = i(null), le = i(null), ae = i(null), H = i(null), oe = i(null), e = i(ce()), { loading: se, FINAL_DATASET: re, manualLoading: ne } = cl({
-      ...Ht(g),
+    }), Q = u(me()), xe = u(0), Z = u(!1), ee = u(""), w = u(null), we = u(null), Le = u(null), _e = u(null), Te = u(!1), $e = u(0), Se = u(0), N = u(null), te = u(null), le = u(null), oe = u(null), H = u(null), ae = u(null), e = u(ce()), { loading: se, FINAL_DATASET: re, manualLoading: ne } = dl({
+      ...Vt(g),
       FINAL_CONFIG: e,
       prepareConfig: ce,
       skeletonDataset: [
@@ -109,7 +113,7 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
           ]
         }
       ],
-      skeletonConfig: Yt({
+      skeletonConfig: Jt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -148,34 +152,34 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
           }
         }
       })
-    }), { userOptionsVisible: ue, setUserOptionsVisibility: De, keepUserOptionState: Fe } = fl({ config: e.value }), { svgRef: ie } = pl({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: ie, setUserOptionsVisibility: De, keepUserOptionState: Fe } = yl({ config: e.value }), { svgRef: ue } = gl({ config: e.value.style.chart.title });
     function ce() {
-      const t = xe({
+      const t = Ae({
         userConfig: g.config,
-        defaultConfig: kt
-      }), a = t.theme;
-      if (!a) return t;
-      if (!xt.value(t))
-        return At(t), t;
-      const l = xe({
-        userConfig: it[a] || g.config,
+        defaultConfig: xt
+      }), o = t.theme;
+      if (!o) return t;
+      if (!wt.value(t))
+        return Lt(t), t;
+      const l = Ae({
+        userConfig: vt[o] || g.config,
         defaultConfig: t
-      }), o = xe({
+      }), a = Ae({
         userConfig: g.config,
         defaultConfig: l
       });
       return {
-        ...o,
-        customPalette: o.customPalette.length ? o.customPalette : qt[a] || P
+        ...a,
+        customPalette: a.customPalette.length ? a.customPalette : Kt[o] || P
       };
     }
     q(() => g.config, async (t) => {
-      se.value || (e.value = ce()), ue.value = !e.value.userOptions.showOnChartHover, Oe(), $e.value += 1, Se.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, B.value = e.value.style.chart.width, _.value = e.value.style.chart.height, G.value = e.value.style.chart.plots.radius;
+      se.value || (e.value = ce()), ie.value = !e.value.userOptions.showOnChartHover, Oe(), $e.value += 1, Se.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, B.value = e.value.style.chart.width, _.value = e.value.style.chart.height, M.value = e.value.style.chart.plots.radius;
     }, { deep: !0 }), q(() => g.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (ne.value = !1);
     }, { deep: !0 });
     const L = Xe(null), z = Xe(null);
-    Ut(() => {
+    jt(() => {
       Oe();
     });
     const ve = h(() => !!e.value.debug);
@@ -184,7 +188,7 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
         componentName: "VueUiStripPlot",
         type: "dataset",
         debug: ve.value
-      }), ne.value = !0) : g.dataset.forEach((t, a) => {
+      }), ne.value = !0) : g.dataset.forEach((t, o) => {
         Ze({
           datasetObject: t,
           requiredAttributes: ["name", "plots"]
@@ -193,10 +197,10 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
             componentName: "VueUiStripPlot",
             type: "datasetSerieAttribute",
             property: l,
-            index: a,
+            index: o,
             debug: ve.value
           });
-        }), t.plots && t.plots.forEach((l, o) => {
+        }), t.plots && t.plots.forEach((l, a) => {
           Ze({
             datasetObject: l,
             requiredAttributes: ["name", "value"]
@@ -205,48 +209,48 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
               componentName: "VueUiStripPlot",
               type: "datasetSerieAttribute",
               property: n,
-              index: `${a},${o}`,
+              index: `${o},${a}`,
               debug: ve.value
             });
           });
         });
       }), Qe(g.dataset) || (ne.value = e.value.loading), e.value.responsive) {
         const t = lt(() => {
-          const { width: a, height: l } = ul({
+          const { width: o, height: l } = cl({
             chart: w.value,
             title: e.value.style.chart.title.text ? we.value : null,
             source: Le.value,
             noTitle: _e.value
           });
           requestAnimationFrame(() => {
-            _t.value = l, B.value = Math.max(0.1, a), _.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? G.value = ol({
-              relator: Math.min(l, a),
+            $t.value = l, B.value = Math.max(0.1, o), _.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? M.value = rl({
+              relator: Math.min(l, o),
               adjuster: 600,
               source: e.value.style.chart.plots.radius,
               threshold: 6,
               fallback: 6
-            }) : G.value = e.value.style.chart.plots.radius;
+            }) : M.value = e.value.style.chart.plots.radius;
           });
         });
         L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect()), L.value = new ResizeObserver(t), z.value = w.value.parentNode, L.value.observe(z.value);
       }
       Te.value = !0, setTimeout(() => {
-        M.value = !1;
-      }, Dt.value * 50);
+        G.value = !1;
+      }, Ot.value * 50);
     }
     Ye(() => {
       L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect());
     });
-    const { isPrinting: Pe, isImaging: ze, generatePdf: Be, generateImage: Ee } = dl({
+    const { isPrinting: Pe, isImaging: ze, generatePdf: Be, generateImage: Ee } = bl({
       elementId: `strip-plot_${Q.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-strip-plot",
       options: e.value.userOptions.print
-    }), Lt = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ne = h(() => Jt(e.value.customPalette)), M = i(e.value.useCssAnimation), U = i({
+    }), Tt = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ne = h(() => Qt(e.value.customPalette)), G = u(e.value.useCssAnimation), U = u({
       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
-    }), B = i(e.value.style.chart.width), _ = i(e.value.style.chart.height), _t = i(e.value.style.chart.height), G = i(e.value.style.chart.plots.radius), p = i({
+    }), B = u(e.value.style.chart.width), _ = u(e.value.style.chart.height), $t = u(e.value.style.chart.height), M = u(e.value.style.chart.plots.radius), p = u({
       showTable: e.value.table.show,
       dataLabels: {
         show: e.value.style.chart.labels.bestPlotLabel.show
@@ -260,113 +264,113 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
           show: e.value.style.chart.labels.bestPlotLabel.show
         },
         showTooltip: e.value.style.chart.tooltip.show
-      }, B.value = e.value.style.chart.width, _.value = e.value.style.chart.height, G.value = e.value.style.chart.plots.radius;
+      }, B.value = e.value.style.chart.width, _.value = e.value.style.chart.height, M.value = e.value.style.chart.plots.radius;
     }, { immediate: !0 });
-    const de = h(() => Math.min(G.value, s.value.stripWidth / 2 * 0.9));
-    function Tt() {
+    const de = h(() => Math.min(M.value, s.value.stripWidth / 2 * 0.9));
+    function St() {
       let t = 0;
-      oe.value && (t = Array.from(oe.value.querySelectorAll("text")).reduce((o, n) => {
+      ae.value && (t = Array.from(ae.value.querySelectorAll("text")).reduce((a, n) => {
         const b = n.getComputedTextLength();
-        return b > o ? b : o;
+        return b > a ? b : a;
       }, 0));
-      const a = ae.value ? ae.value.getBoundingClientRect().width : 0;
-      return t + a + (a ? 24 : 0);
+      const o = oe.value ? oe.value.getBoundingClientRect().width : 0;
+      return t + o + (o ? 24 : 0);
     }
-    const he = i(0), $t = lt((t) => {
+    const he = u(0), Dt = lt((t) => {
       he.value = t;
     }, 100);
-    Vt((t) => {
-      const a = H.value;
-      if (!a) return;
-      const l = new ResizeObserver((o) => {
-        $t(o[0].contentRect.height);
+    Xt((t) => {
+      const o = H.value;
+      if (!o) return;
+      const l = new ResizeObserver((a) => {
+        Dt(a[0].contentRect.height);
       });
-      l.observe(a), t(() => l.disconnect());
+      l.observe(o), t(() => l.disconnect());
     }), Ye(() => {
       he.value = 0;
     });
-    const St = h(() => {
+    const Ft = h(() => {
       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 = he.value + 12), t + a;
+      let o = 0;
+      return H.value && (o = he.value + 12), t + o;
     }), s = h(() => {
-      const t = Tt(), a = U.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5, l = B.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, b = _.value - U.value.bottom - St.value, E = Math.max(0, b - n), je = Array.isArray(re.value) ? re.value.length : 0, Wt = je > 0 ? o / je : 0;
+      const t = St(), o = U.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5, l = B.value - U.value.right, a = Math.max(0, l - o), n = U.value.top + e.value.style.chart.plots.radius + e.value.style.chart.labels.bestPlotLabel.fontSize, b = _.value - U.value.bottom - Ft.value, E = Math.max(0, b - n), je = Array.isArray(re.value) ? re.value.length : 0, Ut = je > 0 ? a / je : 0;
       return {
-        left: a,
+        left: o,
         right: l,
         top: n,
         bottom: b,
-        width: o,
+        width: a,
         height: E,
-        stripWidth: Wt,
+        stripWidth: Ut,
         absoluteHeight: _.value
       };
-    }), V = h(() => re.value.map((t, a) => {
+    }), V = h(() => re.value.map((t, o) => {
       const l = me();
       return {
         ...t,
         id: l,
-        color: t.color ? et(t.color) : Ne.value[a] || P[a] || P[a % P.length],
-        plots: t.plots.map((o, n) => ({
-          ...o,
-          value: Kt(o.value),
+        color: t.color ? et(t.color) : Ne.value[o] || P[o] || P[o % P.length],
+        plots: t.plots.map((a, n) => ({
+          ...a,
+          value: Zt(a.value),
           parentId: l,
           parentName: t.name,
-          parentIndex: a,
+          parentIndex: o,
           plotIndex: n,
-          color: t.color ? et(t.color) : Ne.value[a] || P[a] || P[a % P.length],
+          color: t.color ? et(t.color) : Ne.value[o] || P[o] || P[o % P.length],
           id: me()
-        })).sort((o, n) => o.value - n.value)
+        })).sort((a, n) => a.value - n.value)
       };
-    })), A = h(() => (V.value || []).map((t, a) => ({
+    })), x = h(() => (V.value || []).map((t, o) => ({
       ...t,
       plots: t.plots.map((l) => ({
         ...l,
-        x: s.value.left + (a + 1) * s.value.stripWidth - s.value.stripWidth / 2
+        x: s.value.left + (o + 1) * s.value.stripWidth - s.value.stripWidth / 2
       }))
-    }))), Dt = h(() => Math.max(...A.value.map((t) => t.plots.length))), be = h(() => {
-      const t = A.value.flatMap((a) => a.plots.map((l) => l.value));
+    }))), Ot = h(() => Math.max(...x.value.map((t) => t.plots.length))), be = h(() => {
+      const t = x.value.flatMap((o) => o.plots.map((l) => l.value));
       return {
         max: Math.max(...t),
         min: Math.min(...t)
       };
-    }), D = h(() => Qt(be.value.min < 0 ? be.value.min : 0, be.value.max, e.value.style.chart.grid.scaleSteps)), Ft = h(() => (A.value || []).map((t, a) => ({
+    }), D = h(() => el(be.value.min < 0 ? be.value.min : 0, be.value.max, e.value.style.chart.grid.scaleSteps)), Pt = h(() => (x.value || []).map((t, o) => ({
       ...t,
       plots: t.plots.map((l) => ({
         ...l,
         y: s.value.bottom - (l.value + Math.abs(D.value.min)) / (D.value.max + Math.abs(D.value.min)) * s.value.height
       }))
-    }))), Me = h(() => D.value.ticks.map((t) => ({
+    }))), Ge = h(() => D.value.ticks.map((t) => ({
       y: s.value.bottom - s.value.height * ((t + Math.abs(D.value.min)) / (D.value.max + Math.abs(D.value.min))),
       x1: s.value.left,
       x2: s.value.right,
       value: t
-    }))), fe = i(null), y = i(null);
-    function Ot({ datapoint: t, seriesIndex: a }) {
-      Z.value = !1, y.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }))), fe = u(null), y = u(null);
+    function zt({ datapoint: t, seriesIndex: o }) {
+      Z.value = !1, y.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
     }
-    function Pt({ datapoint: t, seriesIndex: a }) {
-      wt("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    function Bt({ datapoint: t, seriesIndex: o }) {
+      _t("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
     }
-    function zt({ 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, y.value = t;
+    function Et({ datapoint: t, seriesIndex: o }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), fe.value = { datapoint: t, seriesIndex: o, config: e.value, series: V.value }, Z.value = !0, y.value = t;
       const l = e.value.style.chart.tooltip.customFormat;
-      if (tt(l) && nl(() => l({
-        seriesIndex: a,
+      if (tt(l) && ul(() => l({
+        seriesIndex: o,
         datapoint: t,
         series: V.value,
         config: e.value
       })))
         ee.value = l({
-          seriesIndex: a,
+          seriesIndex: o,
           datapoint: t,
           series: V.value,
           config: e.value
         });
       else {
-        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(
+        let a = "";
+        a += `<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>`, a += `<div>${ke(
           e.value.style.chart.labels.formatter,
           t.value,
           K({
@@ -375,30 +379,30 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
             s: e.value.style.chart.labels.suffix,
             r: e.value.style.chart.tooltip.roundingValue
           }),
-          { datapoint: t, seriesIndex: a }
-        )}</div>`, ee.value = `<div>${o}</div>`;
+          { datapoint: t, seriesIndex: o }
+        )}</div>`, ee.value = `<div>${a}</div>`;
       }
     }
     const j = h(() => {
-      const t = A.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 = A.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 };
+      const t = x.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((a, n) => n.value - a.value).map((a) => ({
+        name: `${l.name} - ${a.name}`,
+        color: a.color
+      }))), o = x.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((a, n) => n.value - a.value).map((a) => a.value));
+      return { head: t, body: o };
     });
     function pe(t = null) {
-      Xt(() => {
-        const a = j.value.head.map((n, b) => [[
+      qt(() => {
+        const o = j.value.head.map((n, b) => [[
           n.name
-        ], [j.value.body[b]]]), 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 = sl(l);
-        t ? t(o) : rl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
+        ], [j.value.body[b]]]), 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(o), a = nl(l);
+        t ? t(a) : il({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
       });
     }
     const X = h(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value
-      ], a = j.value.head.map((n, b) => {
+      ], o = j.value.head.map((n, b) => {
         const E = K({
           p: e.value.style.chart.labels.prefix,
           v: j.value.body[b],
@@ -431,15 +435,15 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
           e.value.table.columnNames.value
         ],
         head: t,
-        body: a,
+        body: o,
         config: l
       };
-    }), F = i(!1);
-    function Ge(t) {
-      F.value = t, Ae.value += 1;
+    }), F = u(!1);
+    function Me(t) {
+      F.value = t, xe.value += 1;
     }
-    function Bt() {
-      return A.value;
+    function Nt() {
+      return x.value;
     }
     function Ie() {
       p.value.showTable = !p.value.showTable;
@@ -450,27 +454,27 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
     function We() {
       p.value.showTooltip = !p.value.showTooltip;
     }
-    const Y = i(!1);
+    const Y = u(!1);
     function ye() {
       Y.value = !Y.value;
     }
-    async function Et({ scale: t = 2 } = {}) {
+    async function Gt({ scale: t = 2 } = {}) {
       if (!w.value) return;
-      const { width: a, height: l } = w.value.getBoundingClientRect(), o = a / l, { imageUri: n, base64: b } = await gl({ domElement: w.value, base64: !0, img: !0, scale: t });
+      const { width: o, height: l } = w.value.getBoundingClientRect(), a = o / l, { imageUri: n, base64: b } = await Cl({ domElement: w.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: n,
         base64: b,
         title: e.value.style.chart.title.text,
-        width: a,
+        width: o,
         height: l,
-        aspectRatio: o
+        aspectRatio: a
       };
     }
-    const He = h(() => A.value.map((t) => t.name)), Nt = i({ start: 0, end: A.value.length });
-    yl({
+    const He = h(() => x.value.map((t) => t.name)), Mt = u({ start: 0, end: x.value.length });
+    ml({
       timeLabelsEls: H,
       timeLabels: He,
-      slicer: Nt,
+      slicer: Mt,
       configRef: e,
       rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
       autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
@@ -481,9 +485,9 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
       rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
     });
     const I = h(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, a = p.value.showTable;
+      const t = e.value.table.useDialog && !e.value.table.show, o = p.value.showTable;
       return {
-        component: t ? Ct : ft,
+        component: t ? At : yt,
         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,
@@ -496,7 +500,7 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
         } : {
           hideDetails: !0,
           config: {
-            open: a,
+            open: o,
             maxHeight: 1e4,
             body: {
               backgroundColor: e.value.style.chart.backgroundColor,
@@ -516,21 +520,21 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
     function Ue() {
       p.value.showTable = !1, te.value && te.value.setTableIconState(!1);
     }
-    const Mt = h(() => e.value.style.chart.backgroundColor), Gt = h(() => e.value.style.chart.title), { exportSvg: It, getSvg: Rt } = hl({
-      svg: ie,
-      title: Gt,
-      backgroundColor: Mt
+    const It = h(() => e.value.style.chart.backgroundColor), Rt = h(() => e.value.style.chart.title), { exportSvg: Wt, getSvg: Ht } = fl({
+      svg: ue,
+      title: Rt,
+      backgroundColor: It
     });
     async function Ve({ isCb: t }) {
       if (t) {
-        const { blob: a, url: l, text: o, dataUrl: n } = await Rt();
-        e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: n });
+        const { blob: o, url: l, text: a, dataUrl: n } = await Ht();
+        e.value.userOptions.callbacks.svg({ blob: o, url: l, text: a, dataUrl: n });
       } else
-        It();
+        Wt();
     }
-    return vt({
-      getData: Bt,
-      getImage: Et,
+    return ht({
+      getData: Nt,
+      getImage: Gt,
       generatePdf: Be,
       generateCsv: pe,
       generateImage: Ee,
@@ -539,19 +543,19 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
       toggleLabels: Re,
       toggleTooltip: We,
       toggleAnnotator: ye,
-      toggleFullscreen: Ge
-    }), (t, a) => (r(), u("div", {
+      toggleFullscreen: Me
+    }), (t, o) => (r(), i("div", {
       ref_key: "stripPlotChart",
       ref: w,
       class: R(`vue-data-ui-component vue-ui-strip-plot ${F.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] = () => c(De)(!0)),
-      onMouseleave: a[2] || (a[2] = () => c(De)(!1))
+      onMouseenter: o[1] || (o[1] = () => c(De)(!0)),
+      onMouseleave: o[2] || (o[2] = () => c(De)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), O(c(gt), {
+      e.value.userOptions.buttons.annotator ? (r(), O(c(Ct), {
         key: 0,
-        svgRef: c(ie),
+        svgRef: c(ue),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: Y.value,
@@ -577,20 +581,20 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
-      Lt.value ? (r(), u("div", {
+      Tt.value ? (r(), i("div", {
         key: 1,
         ref_key: "noTitle",
         ref: _e,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : f("", !0),
-      e.value.style.chart.title.text ? (r(), u("div", {
+      e.value.style.chart.title.text ? (r(), i("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: we,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (r(), O(Cl, {
+        (r(), O(Al, {
           key: `title_${$e.value}`,
           config: {
             title: {
@@ -604,10 +608,10 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
           }
         }, null, 8, ["config"]))
       ], 512)) : f("", !0),
-      e.value.userOptions.show && W.value && (c(Fe) || c(ue)) ? (r(), O(c(yt), {
+      e.value.userOptions.show && W.value && (c(Fe) || c(ie)) ? (r(), O(c(mt), {
         ref_key: "userOptionsRef",
         ref: te,
-        key: `user_option_${Ae.value}`,
+        key: `user_option_${xe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: c(Pe),
@@ -631,7 +635,7 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: Ge,
+        onToggleFullscreen: Me,
         onGeneratePdf: c(Be),
         onGenerateCsv: pe,
         onGenerateImage: c(Ee),
@@ -641,13 +645,13 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
         onToggleTooltip: We,
         onToggleAnnotator: ye,
         style: J({
-          visibility: c(Fe) ? c(ue) ? "visible" : "hidden" : "visible"
+          visibility: c(Fe) ? c(ie) ? "visible" : "hidden" : "visible"
         })
       }, qe({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: v(({ isOpen: l, color: o }) => [
-            d(t.$slots, "menuIcon", m(C({ isOpen: l, color: o })), void 0, !0)
+          fn: v(({ isOpen: l, color: a }) => [
+            d(t.$slots, "menuIcon", m(C({ isOpen: l, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -702,29 +706,29 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: v(({ toggleFullscreen: l, isFullscreen: o }) => [
-            d(t.$slots, "optionFullscreen", m(C({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          fn: v(({ toggleFullscreen: l, isFullscreen: a }) => [
+            d(t.$slots, "optionFullscreen", m(C({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: v(({ toggleAnnotator: l, isAnnotator: o }) => [
-            d(t.$slots, "optionAnnotator", m(C({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          fn: v(({ toggleAnnotator: l, isAnnotator: a }) => [
+            d(t.$slots, "optionAnnotator", m(C({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
           ]),
           key: "9"
         } : void 0
       ]), 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"])) : f("", !0),
-      (r(), u("svg", {
+      (r(), i("svg", {
         ref_key: "svgRef",
-        ref: ie,
-        xmlns: c(Zt),
+        ref: ue,
+        xmlns: c(tl),
         class: R({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
         viewBox: `0 0 ${B.value} ${_.value}`,
         style: J(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
       }, [
-        ge(c(mt)),
-        t.$slots["chart-background"] ? (r(), u("foreignObject", {
+        ge(c(kt)),
+        t.$slots["chart-background"] ? (r(), i("foreignObject", {
           key: 0,
           x: s.value.left,
           y: s.value.top,
@@ -735,10 +739,10 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
           }
         }, [
           d(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, wl)) : f("", !0),
-        e.value.style.chart.grid.show ? (r(), u("g", Ll, [
-          e.value.style.chart.grid.horizontalGrid.show ? (r(), u("g", _l, [
-            (r(!0), u(x, null, $(Me.value, (l) => (r(), u("line", {
+        ], 8, _l)) : f("", !0),
+        e.value.style.chart.grid.show ? (r(), i("g", Tl, [
+          e.value.style.chart.grid.horizontalGrid.show ? (r(), i("g", $l, [
+            (r(!0), i(A, null, $(Ge.value, (l) => (r(), i("line", {
               x1: l.x1,
               x2: l.x2,
               y1: l.y,
@@ -747,19 +751,19 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
               "stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
               "stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray,
               "stroke-linecap": "round"
-            }, null, 8, Tl))), 256))
+            }, null, 8, Sl))), 256))
           ])) : f("", !0),
-          e.value.style.chart.grid.verticalGrid.show ? (r(), u("g", $l, [
-            (r(!0), u(x, null, $(A.value, (l, o) => (r(), u("line", {
-              x1: s.value.left + (o + 1) * s.value.stripWidth,
-              x2: s.value.left + (o + 1) * s.value.stripWidth,
+          e.value.style.chart.grid.verticalGrid.show ? (r(), i("g", Dl, [
+            (r(!0), i(A, null, $(x.value, (l, a) => (r(), i("line", {
+              x1: s.value.left + (a + 1) * s.value.stripWidth,
+              x2: s.value.left + (a + 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, Sl))), 256))
+            }, null, 8, Fl))), 256))
           ])) : f("", !0),
           k("line", {
             x1: s.value.left,
@@ -769,7 +773,7 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
             stroke: e.value.style.chart.grid.stroke,
             "stroke-width": e.value.style.chart.grid.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, Dl),
+          }, null, 8, Ol),
           k("line", {
             x1: s.value.left,
             x2: s.value.right,
@@ -778,14 +782,14 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
             stroke: e.value.style.chart.grid.stroke,
             "stroke-width": e.value.style.chart.grid.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, Fl)
+          }, null, 8, Pl)
         ])) : f("", !0),
-        e.value.style.chart.labels.yAxisLabels.show ? (r(), u("g", {
+        e.value.style.chart.labels.yAxisLabels.show ? (r(), i("g", {
           key: 2,
           ref_key: "scaleLabels",
-          ref: oe
+          ref: ae
         }, [
-          (r(!0), u(x, null, $(Me.value, (l, o) => (r(), u("text", {
+          (r(!0), i(A, null, $(Ge.value, (l, a) => (r(), i("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,
@@ -800,50 +804,50 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
               s: e.value.style.chart.labels.suffix,
               r: e.value.style.chart.labels.yAxisLabels.rounding
             }),
-            { datapoint: l, seriesIndex: o }
-          )), 9, Ol))), 256))
+            { datapoint: l, seriesIndex: a }
+          )), 9, zl))), 256))
         ], 512)) : f("", !0),
-        e.value.style.chart.labels.xAxisLabels.show ? (r(), u("g", {
+        e.value.style.chart.labels.xAxisLabels.show ? (r(), i("g", {
           key: 3,
           ref_key: "timeLabelsEls",
           ref: H
         }, [
-          (r(!0), u(x, null, $(He.value, (l, o) => (r(), u("g", null, [
+          (r(!0), i(A, null, $(He.value, (l, a) => (r(), i("g", null, [
             String(l).includes(`
-`) ? (r(), u("text", {
+`) ? (r(), i("text", {
               key: 1,
               class: "vue-ui-strip-plot-category-name",
-              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})`,
+              transform: `translate(${s.value.left + (a + 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: c(el)({
-                content: c(tl)(String(l)),
+              innerHTML: c(ll)({
+                content: c(ol)(String(l)),
                 fontSize: e.value.style.chart.labels.xAxisLabels.fontSize,
                 fill: e.value.style.chart.labels.xAxisLabels.color,
                 x: 0,
                 y: 0
               })
-            }, null, 8, zl)) : (r(), u("text", {
+            }, null, 8, El)) : (r(), i("text", {
               key: 0,
               class: "vue-ui-strip-plot-category-name",
-              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})`,
+              transform: `translate(${s.value.left + (a + 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"
-            }, S(String(l)), 9, Pl))
+            }, S(String(l)), 9, Bl))
           ]))), 256))
         ], 512)) : f("", !0),
-        e.value.style.chart.labels.axis.yLabel ? (r(), u("text", {
+        e.value.style.chart.labels.axis.yLabel ? (r(), i("text", {
           key: 4,
           ref_key: "yAxisLabel",
-          ref: ae,
+          ref: oe,
           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}, ${s.value.top + s.value.height / 2}) rotate(-90)`,
           "text-anchor": "middle"
-        }, S(e.value.style.chart.labels.axis.yLabel), 9, Bl)) : f("", !0),
-        e.value.style.chart.labels.axis.xLabel ? (r(), u("text", {
+        }, S(e.value.style.chart.labels.axis.yLabel), 9, Nl)) : f("", !0),
+        e.value.style.chart.labels.axis.xLabel ? (r(), i("text", {
           key: 5,
           ref_key: "xAxisLabel",
           ref: le,
@@ -852,8 +856,8 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
           x: s.value.left + s.value.width / 2,
           y: _.value - e.value.style.chart.labels.axis.fontSize / 3,
           "text-anchor": "middle"
-        }, S(e.value.style.chart.labels.axis.xLabel), 9, El)) : f("", !0),
-        y.value ? (r(), u(x, { key: 6 }, [
+        }, S(e.value.style.chart.labels.axis.xLabel), 9, Gl)) : f("", !0),
+        y.value ? (r(), i(A, { key: 6 }, [
           k("line", {
             x1: s.value.left,
             x2: s.value.right,
@@ -862,65 +866,65 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
             stroke: y.value.color,
             "stroke-width": 1,
             class: R({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, Nl),
+          }, null, 10, Ml),
           k("circle", {
             cx: s.value.left,
             cy: y.value.y,
             r: 3,
             fill: y.value.color,
             class: R({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, Ml),
+          }, null, 10, Il),
           k("circle", {
             cx: s.value.right,
             cy: y.value.y,
             r: 3,
             fill: y.value.color,
             class: R({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, Gl)
+          }, null, 10, Rl)
         ], 64)) : f("", !0),
         k("defs", null, [
-          (r(!0), u(x, null, $(A.value, (l) => (r(), u("radialGradient", {
+          (r(!0), i(A, null, $(x.value, (l) => (r(), i("radialGradient", {
             id: l.id,
             fy: "30%"
           }, [
             k("stop", {
               offset: "10%",
-              "stop-color": c(ll)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
-            }, null, 8, Rl),
+              "stop-color": c(al)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Hl),
             k("stop", {
               offset: "90%",
-              "stop-color": c(al)(l.color, 0.1)
-            }, null, 8, Wl),
+              "stop-color": c(sl)(l.color, 0.1)
+            }, null, 8, Ul),
             k("stop", {
               offset: "100%",
               "stop-color": l.color
-            }, null, 8, Hl)
-          ], 8, Il))), 256))
+            }, null, 8, Vl)
+          ], 8, Wl))), 256))
         ]),
-        (r(!0), u(x, null, $(Ft.value, (l, o) => (r(), u(x, null, [
-          (r(!0), u(x, null, $(l.plots, (n, b) => (r(), O(ml, Je({ ref_for: !0 }, t.$attrs, {
+        (r(!0), i(A, null, $(Pt.value, (l, a) => (r(), i(A, null, [
+          (r(!0), i(A, null, $(l.plots, (n, b) => (r(), O(kl, Je({ ref_for: !0 }, t.$attrs, {
             plot: { x: n.x, y: Te.value ? n.y : s.value.top },
             radius: y.value && y.value.id === n.id ? de.value * 1.5 : de.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:${y.value ? y.value.id === n.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${M.value ? `transition-delay:${b * 50}ms` : ""}`,
-            class: { "vue-ui-strip-plot-animated": e.value.useCssAnimation && M.value && !c(se), "vue-ui-strip-plot-select-circle": e.value.useCssAnimation && !M.value },
-            onMouseenter: (E) => zt({ datapoint: n, seriesIndex: b }),
-            onMouseleave: (E) => Ot({ datapoint: n, seriesIndex: b }),
-            onClick: (E) => Pt({ datapoint: n, seriesIndex: b })
+            style: `transition: all 0.2s ease-in-out; opacity:${y.value ? y.value.id === n.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${G.value ? `transition-delay:${b * 50}ms` : ""}`,
+            class: { "vue-ui-strip-plot-animated": e.value.useCssAnimation && G.value && !c(se), "vue-ui-strip-plot-select-circle": e.value.useCssAnimation && !G.value },
+            onMouseenter: (E) => Et({ datapoint: n, seriesIndex: b }),
+            onMouseleave: (E) => zt({ datapoint: n, seriesIndex: b }),
+            onClick: (E) => Bt({ datapoint: n, seriesIndex: b })
           }), null, 16, ["plot", "radius", "shape", "stroke", "strokeWidth", "color", "style", "class", "onMouseenter", "onMouseleave", "onClick"]))), 256)),
-          p.value.dataLabels.show ? (r(), u("g", Ul, [
-            (r(!0), u(x, null, $(l.plots, (n, b) => (r(), u(x, null, [
-              b === l.plots.length - 1 || y.value && y.value.id === n.id && !p.value.showTooltip ? (r(), u("text", {
+          p.value.dataLabels.show ? (r(), i("g", jl, [
+            (r(!0), i(A, null, $(l.plots, (n, b) => (r(), i(A, null, [
+              b === l.plots.length - 1 || y.value && y.value.id === n.id && !p.value.showTooltip ? (r(), i("text", {
                 key: 0,
                 x: n.x,
                 y: n.y + e.value.style.chart.labels.bestPlotLabel.offsetY - de.value * (y.value && y.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 && M.value ? 0 : 1};transition:opacity 0.2s ease-in;`)
+                style: J(`opacity:${e.value.useCssAnimation && G.value ? 0 : 1};transition:opacity 0.2s ease-in;`)
               }, S(n.name) + " " + S(e.value.style.chart.labels.bestPlotLabel.showValue ? c(ke)(
                 e.value.style.chart.labels.formatter,
                 n.value,
@@ -931,16 +935,16 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
                   r: e.value.style.chart.labels.bestPlotLabel.rounding
                 }),
                 { datapoint: n, seriesIndex: b }
-              ) : ""), 13, Vl)) : f("", !0)
+              ) : ""), 13, Xl)) : f("", !0)
             ], 64))), 256))
           ])) : f("", !0)
         ], 64))), 256)),
         d(t.$slots, "svg", { svg: s.value }, void 0, !0)
-      ], 14, Al)),
-      t.$slots.watermark ? (r(), u("div", jl, [
+      ], 14, Ll)),
+      t.$slots.watermark ? (r(), i("div", Yl, [
         d(t.$slots, "watermark", m(C({ isPrinting: c(Pe) || c(ze) })), void 0, !0)
       ])) : f("", !0),
-      t.$slots.source ? (r(), u("div", {
+      t.$slots.source ? (r(), i("div", {
         key: 5,
         ref_key: "source",
         ref: Le,
@@ -948,7 +952,7 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
       }, [
         d(t.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      ge(c(ht), {
+      ge(c(ft), {
         teleportTo: e.value.style.chart.tooltip.teleportTo,
         show: p.value.showTooltip && Z.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
@@ -977,13 +981,13 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      W.value && e.value.userOptions.buttons.table ? (r(), O(jt(I.value.component), Je({ key: 6 }, I.value.props, {
+      W.value && e.value.userOptions.buttons.table ? (r(), O(Yt(I.value.component), Je({ key: 6 }, I.value.props, {
         ref_key: "tableUnit",
         ref: N,
         onClose: Ue
       }), qe({
         content: v(() => [
-          (r(), O(c(pt), {
+          (r(), O(c(gt), {
             key: `table_${Se.value}`,
             colNames: X.value.colNames,
             head: X.value.head,
@@ -997,7 +1001,7 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
               k("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Xl)
+              }, null, 8, ql)
             ]),
             td: v(({ td: l }) => [
               Ke(S(l.name || l), 1)
@@ -1020,9 +1024,9 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
             k("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: a[0] || (a[0] = (l) => pe(e.value.userOptions.callbacks.csv))
+              onClick: o[0] || (o[0] = (l) => pe(e.value.userOptions.callbacks.csv))
             }, [
-              ge(c(bt), {
+              ge(c(pt), {
                 name: "excel",
                 stroke: I.value.props.color
               }, null, 8, ["stroke"])
@@ -1031,15 +1035,15 @@ const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", gri
           key: "1"
         } : void 0
       ]), 1040)) : f("", !0),
-      c(se) ? (r(), O(vl, { key: 7 })) : f("", !0)
-    ], 46, xl));
+      c(se) ? (r(), O(hl, { key: 7 })) : f("", !0)
+    ], 46, wl));
   }
-}, ql = /* @__PURE__ */ kl(Yl, [["__scopeId", "data-v-9134dd49"]]), da = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Kl = /* @__PURE__ */ xl(Jl, [["__scopeId", "data-v-9134dd49"]]), fo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: ql
+  default: Kl
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  va as a,
-  da as b,
-  ql as v
+  bo as a,
+  fo as b,
+  Kl as v
 };