vue-data-ui 3.0.0-next.9 → 3.0.1

package/dist/vue-ui-history-plot-bbNxldYG.js

@@ -0,0 +1,1074 @@
+import { defineAsyncComponent as X, ref as v, shallowRef as Fe, computed as d, onMounted as kt, onBeforeUnmount as wt, toRefs as At, watch as ie, watchEffect as Ct, createElementBlock as r, openBlock as o, unref as u, normalizeStyle as _, normalizeClass as O, renderSlot as p, createBlock as I, createCommentVNode as h, createElementVNode as M, createVNode as Xe, createSlots as _t, withCtx as m, normalizeProps as R, guardReactiveProps as Y, Fragment as b, renderList as g, toDisplayString as z, createTextVNode as Lt, nextTick as $t } from "vue";
+import { u as St, c as Re, o as Ye, f as De, g as Tt, t as Mt, d as zt, e as Nt, p as Z, D as Be, k as D, i as B, X as Ot, l as It, j as Pt, I as Ft, F as Xt, E as P, a as Rt, b as Yt, C as J, v as Dt, w as Bt, y as Et } from "./index-Dzc2Gi60.js";
+import { t as Ee, u as Ht } from "./useResponsive-DfdjqQps.js";
+import { u as jt, B as Wt } from "./useLoading-D7YHNtLX.js";
+import { u as Ut } from "./usePrinter-DBRh8ZvS.js";
+import { u as He } from "./useNestedProp-CjnS13nF.js";
+import { u as Gt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Vt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as qt } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Zt from "./Legend-CMvJ6X5j.js";
+import Jt from "./Title-xTWR-Vil.js";
+import Kt from "./img-Vb4QHAHI.js";
+import { _ as Qt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const el = ["id"], tl = ["xmlns", "viewBox"], ll = ["x", "y", "width", "height"], al = { key: 1 }, sl = ["id"], ol = ["stop-color"], rl = ["stop-color"], nl = ["stop-color"], il = { key: 2 }, ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], cl = { key: 3 }, vl = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], hl = ["x", "y", "fill", "font-size"], yl = ["transform", "font-size", "fill", "font-weight"], dl = { key: 6 }, fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], xl = { key: 7 }, pl = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], ml = ["transform", "fill", "font-size", "text-anchor"], bl = ["x", "y", "font-size", "fill", "font-weight"], gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], kl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], wl = ["d", "stroke", "stroke-width"], Al = ["d", "stroke", "stroke-width"], Cl = ["cx", "cy", "fill", "r"], _l = ["cx", "cy", "fill", "r", "stroke", "stroke-width"], Ll = { key: 1 }, $l = ["x", "y", "font-size", "fill", "font-weight"], Sl = ["x", "y", "font-size", "fill", "font-weight", "innerHTML"], Tl = { key: 2 }, Ml = ["x", "y", "font-size", "font-weight", "fill"], zl = ["cx", "cy", "r", "onMouseenter", "onMouseleave", "onClick"], Nl = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Ol = ["onClick"], Il = ["innerHTML"], Pl = {
+  __name: "vue-ui-history-plot",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint"],
+  setup(je, { expose: We, emit: Ue }) {
+    const Ge = X(() => import("./vue-ui-accordion-CPk8wAuj.js")), Ve = X(() => import("./DataTable-ClgCsiJA.js")), qe = X(() => import("./PackageVersion-CD5VH_Al.js")), Ze = X(() => import("./PenAndPaper-D3WRn-G2.js")), Je = X(() => import("./Tooltip-BH3CiANh.js")), Ke = X(() => import("./UserOptions-CKKPgDLV.js")), { vue_ui_history_plot: Qe } = St(), y = je, L = v(null), ue = v(null), ce = v(0), ve = v(null), he = v(0), ye = v(0), de = v(0), $ = Fe(null), F = Fe(null), fe = v(null), E = v(Re()), K = v(!1), Q = v(""), w = v([]), j = v(!1), A = v(null), H = v(!1), xe = v(null), ee = v(null), te = v(null), W = v(null), le = v(null), U = d({
+      get: () => !!y.dataset && y.dataset.length,
+      set: (t) => t
+    }), pe = Ue;
+    kt(be);
+    const me = d(() => !!e.value.debug);
+    function be() {
+      if (Ye(y.dataset) ? (De({
+        componentName: "VueUiHistoryPlot",
+        type: "dataset",
+        debug: me.value
+      }), se.value = !0) : y.dataset.forEach((t, a) => {
+        Tt({
+          datasetObject: t,
+          requiredAttributes: ["name", "values"]
+        }).forEach((l) => {
+          U.value = !1, De({
+            componentName: "VueUiHistoryPlot",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: me.value
+          });
+        });
+      }), Ye(y.dataset) || (se.value = e.value.loading), e.value.responsive) {
+        const t = Ee(() => {
+          const { width: a, height: l } = Ht({
+            chart: L.value,
+            title: e.value.style.chart.title.text ? ue.value : null,
+            noTitle: fe.value,
+            legend: e.value.style.chart.legend.show ? ve.value : null,
+            source: xe.value
+          });
+          requestAnimationFrame(() => {
+            f.value.width = a, f.value.height = l, e.value.responsiveProportionalSizing ? (n.value.plots = P({
+              relator: Math.min(a, l),
+              adjuster: 600,
+              source: e.value.style.chart.plots.radius,
+              threshold: 3,
+              fallback: 3
+            }), n.value.indexLabels = P({
+              relator: Math.min(a, l),
+              adjuster: 600,
+              source: e.value.style.chart.plots.indexLabels.fontSize,
+              threshold: 6,
+              fallback: 6
+            }), n.value.labels = P({
+              relator: Math.min(a, l),
+              adjuster: 600,
+              source: e.value.style.chart.plots.labels.fontSize,
+              threshold: 6,
+              fallback: 6
+            }), n.value.xAxisLabels = P({
+              relator: Math.min(a, l),
+              adjuster: 600,
+              source: e.value.style.chart.axes.x.labels.fontSize,
+              threshold: 6,
+              fallback: 6
+            }), n.value.xAxisName = P({
+              relator: Math.min(a, l),
+              adjuster: 600,
+              source: e.value.style.chart.axes.x.name.fontSize,
+              threshold: 6,
+              fallback: 6
+            }), n.value.yAxisLabels = P({
+              relator: Math.min(a, l),
+              adjuster: 600,
+              source: e.value.style.chart.axes.y.labels.fontSize,
+              threshold: 6,
+              fallback: 6
+            }), n.value.yAxisName = P({
+              relator: Math.min(a, l),
+              adjuster: 600,
+              source: e.value.style.chart.axes.y.name.fontSize,
+              threshold: 6,
+              fallback: 6
+            })) : (n.value.plots = e.value.style.chart.plots.radius, n.value.indexLabels = e.value.style.chart.plots.indexLabels.fontSize, n.value.labels = e.value.style.chart.plots.labels.fontSize, n.value.xAxisLabels = e.value.style.chart.axes.x.labels.fontSize, n.value.xAxisName = e.value.style.chart.axes.x.name.fontSize, n.value.yAxisLabels = e.value.style.chart.axes.y.labels.fontSize, n.value.yAxisName = e.value.style.chart.axes.y.name.fontSize);
+          });
+        });
+        $.value && (F.value && $.value.unobserve(F.value), $.value.disconnect()), $.value = new ResizeObserver(t), F.value = L.value.parentNode, $.value.observe(F.value);
+      }
+    }
+    wt(() => {
+      $.value && (F.value && $.value.unobserve(F.value), $.value.disconnect());
+    });
+    function ae() {
+      const t = He({
+        userConfig: y.config,
+        defaultConfig: Qe
+      });
+      let a = {};
+      return t.theme ? a = {
+        ...He({
+          userConfig: Yt.vue_ui_history_plot[t.theme] || y.config,
+          defaultConfig: t
+        }),
+        customPalette: Rt[t.theme] || Z
+      } : a = t, y.config && J(y.config, "style.chart.axes.x.scaleMin") ? a.style.chart.axes.x.scaleMin = y.config.style.chart.axes.x.scaleMin : a.style.chart.axes.x.scaleMin = null, y.config && J(y.config, "style.chart.axes.x.scaleMax") ? a.style.chart.axes.x.scaleMax = y.config.style.chart.axes.x.scaleMax : a.style.chart.axes.x.scaleMax = null, y.config && J(y.config, "style.chart.axes.y.scaleMin") ? a.style.chart.axes.y.scaleMin = y.config.style.chart.axes.y.scaleMin : a.style.chart.axes.y.scaleMin = null, y.config && J(y.config, "style.chart.axes.y.scaleMax") ? a.style.chart.axes.y.scaleMax = y.config.style.chart.axes.y.scaleMax : a.style.chart.axes.y.scaleMax = null, a;
+    }
+    const e = v(ae()), { loading: S, FINAL_DATASET: et, manualLoading: se } = jt({
+      ...At(y),
+      FINAL_CONFIG: e,
+      prepareConfig: ae,
+      skeletonDataset: [
+        {
+          name: "",
+          color: "#CACACA",
+          values: [
+            { label: "", x: 1, y: 9 },
+            { label: "", x: 4, y: 1 },
+            { label: "", x: 7, y: 9 },
+            { label: "", x: 9, y: 4 }
+          ]
+        }
+      ],
+      skeletonConfig: Mt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              axes: {
+                x: {
+                  scaleMin: 0,
+                  scaleMax: 10,
+                  labels: { show: !1 },
+                  name: { text: "" }
+                },
+                y: {
+                  scaleMin: 0,
+                  scaleMax: 10,
+                  labels: { show: !1 },
+                  name: { text: "" }
+                }
+              },
+              grid: {
+                xAxis: {
+                  stroke: "#6A6A6A"
+                },
+                horizontalLines: {
+                  stroke: "#6A6A6A50"
+                },
+                yAxis: {
+                  stroke: "#6A6A6A"
+                },
+                verticalLines: {
+                  stroke: "#6A6A6A50"
+                }
+              },
+              legend: {
+                backgroundColor: "transparent"
+              },
+              paths: {
+                useSerieColor: !1,
+                stroke: "#6A6A6A"
+              },
+              plots: {
+                stroke: "#6A6A6A",
+                indexLabels: { show: !1 },
+                labels: { show: !1 }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: oe, setUserOptionsVisibility: ge, keepUserOptionState: ke } = Gt({ config: e.value }), { svgRef: we } = Vt({ config: e.value.style.chart.title });
+    ie(() => y.config, (t) => {
+      S.value || (e.value = ae()), oe.value = !e.value.userOptions.showOnChartHover, be(), ce.value += 1, ye.value += 1, he.value += 1, f.value.height = e.value.style.chart.height, f.value.width = e.value.style.chart.width, n.value.plots = e.value.style.chart.plots.radius, n.value.indexLabels = e.value.style.chart.plots.indexLabels.fontSize, n.value.labels = e.value.style.chart.plots.labels.fontSize, n.value.xAxisLabels = e.value.style.chart.axes.x.labels.fontSize, n.value.xAxisName = e.value.style.chart.axes.x.name.fontSize, n.value.yAxisLabels = e.value.style.chart.axes.y.labels.fontSize, n.value.yAxisName = e.value.style.chart.axes.y.name.fontSize, C.value.showTable = e.value.table.show, C.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 }), ie(() => y.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (se.value = !1);
+    }, { deep: !0 });
+    const { isPrinting: Ae, isImaging: Ce, generatePdf: _e, generateImage: Le } = Ut({
+      elementId: `history_plot_${E.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-history-plot",
+      options: e.value.userOptions.print
+    }), tt = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), lt = d(() => zt(e.value.customPalette)), C = v({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    ie(e, () => {
+      C.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    const f = v({
+      height: e.value.style.chart.height,
+      width: e.value.style.chart.width
+    }), at = d(() => f.value.width), st = d(() => f.value.height);
+    function ot() {
+      let t = 0;
+      le.value && (t = Array.from(le.value.querySelectorAll("text")).reduce((i, s) => {
+        const k = s.getComputedTextLength();
+        return k > i ? k : i;
+      }, 0));
+      const a = te.value ? te.value.getBoundingClientRect().width : 0;
+      return t + a + (a ? 24 : 0);
+    }
+    const $e = v(0), rt = Ee((t) => {
+      $e.value = t;
+    });
+    Ct((t) => {
+      const a = W.value;
+      if (!a) return;
+      const l = new ResizeObserver((i) => {
+        rt(i[0].contentRect.height);
+      });
+      l.observe(a), t(() => l.disconnect());
+    });
+    const Se = d(() => {
+      let t = 0;
+      ee.value && (t = ee.value.getBBox().height + n.value.xAxisName / 2);
+      let a = 0;
+      return W.value && (a = $e.value), t + a;
+    }), c = d(() => {
+      const t = e.value.style.chart.padding.left, a = e.value.style.chart.padding.top, l = ot(), i = e.value.style.chart.plots.radius;
+      return {
+        left: t + l + e.value.style.chart.axes.y.name.offsetX,
+        top: a + i,
+        right: f.value.width - e.value.style.chart.padding.right - i - e.value.style.chart.axes.y.name.offsetX,
+        bottom: f.value.height - e.value.style.chart.padding.bottom - Se.value - i - e.value.style.chart.axes.x.name.offsetY,
+        width: f.value.width - t - e.value.style.chart.padding.right - l - i - e.value.style.chart.axes.y.name.offsetX,
+        height: f.value.height - a - e.value.style.chart.padding.bottom - Se.value - i * 2 - e.value.style.chart.axes.x.name.offsetY
+      };
+    }), n = v({
+      plots: e.value.style.chart.plots.radius,
+      indexLabels: e.value.style.chart.plots.indexLabels.fontSize,
+      labels: e.value.style.chart.plots.labels.fontSize,
+      xAxisLabels: e.value.style.chart.axes.x.labels.fontSize,
+      xAxisName: e.value.style.chart.axes.x.name.fontSize,
+      yAxisLabels: e.value.style.chart.axes.y.labels.fontSize,
+      yAxisName: e.value.style.chart.axes.y.name.fontSize
+    }), T = d(() => et.value.map((t, a) => ({
+      ...t,
+      color: t.color ? Nt(t.color) : lt.value[a] || Z[a] || Z[a % Z.length],
+      seriesIndex: a
+    }))), nt = d(() => Math.max(...T.value.filter((t) => !w.value.includes(t.seriesIndex)).flatMap((t) => t.values.map((a) => a.x)))), it = d(() => {
+      const t = Math.min(...T.value.filter((a) => !w.value.includes(a.seriesIndex)).flatMap((a) => a.values.map((l) => l.x)));
+      return t < 0 ? t : 0;
+    }), ut = d(() => Math.max(...T.value.filter((t) => !w.value.includes(t.seriesIndex)).flatMap((t) => t.values.map((a) => a.y)))), ct = d(() => {
+      const t = Math.min(...T.value.filter((a) => !w.value.includes(a.seriesIndex)).flatMap((a) => a.values.map((l) => l.y)));
+      return t < 0 ? t : 0;
+    }), x = d(() => {
+      const t = Be(
+        e.value.style.chart.axes.x.scaleMin === null ? it.value : e.value.style.chart.axes.x.scaleMin,
+        e.value.style.chart.axes.x.scaleMax === null ? nt.value : e.value.style.chart.axes.x.scaleMax,
+        e.value.style.chart.axes.x.ticks
+      ), a = Be(
+        e.value.style.chart.axes.y.scaleMin === null ? ct.value : e.value.style.chart.axes.y.scaleMin,
+        e.value.style.chart.axes.y.scaleMax === null ? ut.value : e.value.style.chart.axes.y.scaleMax,
+        e.value.style.chart.axes.y.ticks
+      );
+      return {
+        x: t,
+        y: a,
+        tickX: t.ticks.map((l) => ({
+          x: c.value.left + (l - t.min) / (t.max - t.min) * c.value.width,
+          y1: c.value.top,
+          y2: c.value.bottom,
+          value: l
+        })),
+        tickY: a.ticks.map((l) => ({
+          y: c.value.bottom - (l - a.min) / (a.max - a.min) * c.value.height,
+          x1: c.value.left,
+          x2: c.value.right,
+          value: l
+        }))
+      };
+    });
+    function vt(t) {
+      const a = x.value.x.min < 0 ? Math.abs(x.value.x.min) : x.value.x.min > 0 ? -x.value.x.min : 0;
+      return c.value.left + ((t || 0) + a) / (x.value.x.max + a) * c.value.width;
+    }
+    function ht(t) {
+      const a = x.value.y.min < 0 ? Math.abs(x.value.y.min) : x.value.y.min > 0 ? -x.value.y.min : 0;
+      return c.value.bottom - ((t || 0) + a) / (x.value.y.max + a) * c.value.height;
+    }
+    const N = d(() => T.value.filter((t) => !w.value.includes(t.seriesIndex)).map((t, a) => {
+      const l = t.values.map((s, k) => ({
+        valueX: s.x,
+        valueY: s.y,
+        label: s.label,
+        x: vt(s.x),
+        y: ht(s.y),
+        color: t.color,
+        seriesName: t.name,
+        id: Re()
+      })), i = l.map((s) => `${s.x},${s.y} `).join("").trim();
+      return {
+        ...t,
+        plots: l,
+        path: `M${i}`
+      };
+    }));
+    function Te(t) {
+      w.value.includes(t) ? w.value = w.value.filter((a) => a !== t) : w.value.push(t);
+    }
+    const Me = d(() => T.value.map((t) => ({
+      ...t,
+      opacity: w.value.includes(t.seriesIndex) ? 0.5 : 1,
+      segregate: () => Te(t.seriesIndex),
+      isSegregated: w.value.includes(t.seriesIndex),
+      shape: "circle"
+    }))), yt = d(() => ({
+      cy: "history-plot-div-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    }));
+    function dt({ datapoint: t, plotIndex: a, seriesIndex: l }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), pe("selectDatapoint", t);
+    }
+    function ze(t) {
+      pe("selectLegend", {
+        ...t,
+        isSegregated: !t.isSegregated,
+        opacity: t.isSegregated ? 1 : 0.5
+      });
+    }
+    function Ne(t) {
+      j.value = t, de.value += 1;
+    }
+    const re = v(null);
+    function ft({ datapoint: t, plotIndex: a, seriesIndex: l }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), K.value = !1, A.value = null;
+    }
+    function xt({ datapoint: t, plotIndex: a, seriesIndex: l }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), re.value = { datapoint: t, seriesIndex: l, plotIndex: a, config: e.value, series: T.value }, A.value = t;
+      const i = e.value.style.chart.tooltip.customFormat;
+      if (H.value = !1, Et(i))
+        try {
+          const s = i({
+            seriesIndex: l,
+            datapoint: t,
+            plotIndex: a,
+            series: T.value,
+            config: e.value
+          });
+          typeof s == "string" && (Q.value = s, H.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied."), H.value = !1;
+        }
+      if (!H.value) {
+        let s = "";
+        s += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};margin-bottom:3px;padding-bottom:6px;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg><span>${t.seriesName}</span></div>`, s += `<div>${t.label}</div>`, s += `<div>${e.value.style.chart.axes.x.name.text || "x"}: ${D(
+          e.value.style.chart.axes.x.labels.formatter,
+          t.valueX,
+          B({
+            p: e.value.style.chart.axes.x.labels.prefix,
+            v: t.valueX,
+            s: e.value.style.chart.axes.x.labels.suffix,
+            r: e.value.style.chart.axes.x.labels.rounding
+          })
+        )}</div>`, s += `<div>${e.value.style.chart.axes.y.name.text || "y"}: ${D(
+          e.value.style.chart.axes.y.labels.formatter,
+          t.valueY,
+          B({
+            p: e.value.style.chart.axes.y.labels.prefix,
+            v: t.valueY,
+            s: e.value.style.chart.axes.y.labels.suffix,
+            r: e.value.style.chart.axes.y.labels.rounding
+          })
+        )}</div>`, Q.value = `<div>${s}</div>`;
+      }
+      K.value = !0;
+    }
+    d(() => ({ head: N.value.map((a) => ({
+      name: a.name,
+      color: a.color
+    })) }));
+    const G = d(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.datapoint,
+        e.value.table.columnNames.x,
+        e.value.table.columnNames.y
+      ], a = N.value.flatMap((i) => i.plots.map((s) => [
+        {
+          color: s.color,
+          name: s.seriesName
+        },
+        s.label,
+        D(
+          e.value.style.chart.axes.x.labels.formatter,
+          s.valueX,
+          B({
+            p: e.value.style.chart.axes.x.labels.prefix,
+            v: s.valueX,
+            s: e.value.style.chart.axes.x.labels.suffix,
+            r: e.value.style.chart.axes.x.labels.rounding
+          })
+        ),
+        D(
+          e.value.style.chart.axes.y.labels.formatter,
+          s.valueY,
+          B({
+            p: e.value.style.chart.axes.y.labels.prefix,
+            v: s.valueY,
+            s: e.value.style.chart.axes.y.labels.suffix,
+            r: e.value.style.chart.axes.y.labels.rounding
+          })
+        )
+      ])), l = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      };
+      return {
+        head: t,
+        body: a,
+        config: l,
+        colNames: t
+      };
+    });
+    function Oe(t = null) {
+      $t(() => {
+        const a = [
+          [e.value.table.columnNames.series],
+          [e.value.table.columnNames.datapoint],
+          [e.value.table.columnNames.x],
+          [e.value.table.columnNames.y]
+        ], l = N.value.flatMap((k) => k.plots.map((q) => [
+          [q.seriesName],
+          [q.label],
+          [q.valueX],
+          [q.valueY]
+        ])), i = [
+          [e.value.style.chart.title.text],
+          [e.value.style.chart.title.subtitle.text],
+          a
+        ].concat(l), s = Dt(i);
+        t ? t(s) : Bt({
+          csvContent: s,
+          title: e.value.style.chart.title.text || "vue-ui-history-plot"
+        });
+      });
+    }
+    const V = v(!1);
+    function ne() {
+      V.value = !V.value;
+    }
+    function Ie() {
+      C.value.showTable = !C.value.showTable;
+    }
+    function Pe() {
+      C.value.showTooltip = !C.value.showTooltip;
+    }
+    function pt() {
+      return N.value;
+    }
+    async function mt({ scale: t = 2 } = {}) {
+      if (!L.value) return;
+      const { width: a, height: l } = L.value.getBoundingClientRect(), i = a / l, { imageUri: s, base64: k } = await Kt({ domElement: L.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: s,
+        base64: k,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: i
+      };
+    }
+    const bt = d(() => x.value.tickX), gt = d(() => ({ start: 0, end: x.value.tickX.length }));
+    return qt({
+      timeLabelsEls: W,
+      timeLabels: bt,
+      slicer: gt,
+      configRef: e,
+      rotationPath: ["style", "chart", "axes", "x", "labels", "rotation"],
+      autoRotatePath: ["style", "chart", "axes", "x", "labels", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: at,
+      height: st,
+      targetClass: ".vue-ui-history-plot-x-axis-scale",
+      rotation: e.value.style.chart.axes.x.labels.autoRotate.angle
+    }), We({
+      getData: pt,
+      getImage: mt,
+      generatePdf: _e,
+      generateCsv: Oe,
+      generateImage: Le,
+      toggleTable: Ie,
+      toggleTooltip: Pe,
+      toggleAnnotator: ne,
+      toggleFullscreen: Ne
+    }), (t, a) => (o(), r("div", {
+      id: `history_plot_${E.value}`,
+      ref_key: "historyPlotChart",
+      ref: L,
+      class: O({ "vue-ui-history-plot": !0, "vue-data-ui-wrapper-fullscreen": j.value }),
+      style: _(`background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: a[2] || (a[2] = () => u(ge)(!0)),
+      onMouseleave: a[3] || (a[3] = () => u(ge)(!1))
+    }, [
+      p(t.$slots, "userConfig", {}, void 0, !0),
+      e.value.userOptions.buttons.annotator ? (o(), I(u(Ze), {
+        key: 0,
+        svgRef: u(we),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: V.value,
+        onClose: ne
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      tt.value ? (o(), r("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: fe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.chart.title.text ? (o(), r("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ue,
+        class: "vue-ui-xy-title",
+        style: _(`font-family:${e.value.style.fontFamily}`)
+      }, [
+        (o(), I(Jt, {
+          key: `title_${ce.value}`,
+          config: {
+            title: {
+              cy: "history-plot-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "history-plot-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 4)) : h("", !0),
+      e.value.userOptions.show && U.value && (u(ke) || u(oe)) ? (o(), I(u(Ke), {
+        ref: "details",
+        key: `user_option_${de.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: u(Ae),
+        isImaging: u(Ce),
+        uid: E.value,
+        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: !1,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: j.value,
+        chartElement: L.value,
+        position: e.value.userOptions.position,
+        isTooltip: C.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: V.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Ne,
+        onGeneratePdf: u(_e),
+        onGenerateCsv: Oe,
+        onGenerateImage: u(Le),
+        onToggleTable: Ie,
+        onToggleTooltip: Pe,
+        onToggleAnnotator: ne,
+        style: _({
+          visibility: u(ke) ? u(oe) ? "visible" : "hidden" : "visible"
+        })
+      }, _t({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: m(({ isOpen: l, color: i }) => [
+            p(t.$slots, "menuIcon", R(Y({ isOpen: l, color: i })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: m(() => [
+            p(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: m(() => [
+            p(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: m(() => [
+            p(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: m(() => [
+            p(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: m(() => [
+            p(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: m(({ toggleFullscreen: l, isFullscreen: i }) => [
+            p(t.$slots, "optionFullscreen", R(Y({ toggleFullscreen: l, isFullscreen: i })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: m(({ toggleAnnotator: l, isAnnotator: i }) => [
+            p(t.$slots, "optionAnnotator", R(Y({ toggleAnnotator: l, isAnnotator: i })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      (o(), r("svg", {
+        ref_key: "svgRef",
+        ref: we,
+        xmlns: u(Ot),
+        viewBox: `0 0 ${f.value.width < 0 ? 0.1 : f.value.width} ${f.value.height < 0 ? 0.1 : f.value.height}`,
+        style: _(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        Xe(u(qe)),
+        t.$slots["chart-background"] ? (o(), r("foreignObject", {
+          key: 0,
+          x: c.value.left,
+          y: c.value.top,
+          width: c.value.width <= 0 ? 10 : c.value.width,
+          height: c.value.height <= 0 ? 10 : c.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          p(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ll)) : h("", !0),
+        e.value.style.chart.plots.gradient.show ? (o(), r("defs", al, [
+          (o(!0), r(b, null, g(N.value, (l, i) => (o(), r("radialGradient", {
+            id: `gradient_${i}_${E.value}`,
+            fy: "30%"
+          }, [
+            M("stop", {
+              offset: "10%",
+              "stop-color": u(It)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, ol),
+            M("stop", {
+              offset: "90%",
+              "stop-color": u(Pt)(l.color, 0.1)
+            }, null, 8, rl),
+            M("stop", {
+              offset: "100%",
+              "stop-color": l.color
+            }, null, 8, nl)
+          ], 8, sl))), 256))
+        ])) : h("", !0),
+        e.value.style.chart.grid.verticalLines.show ? (o(), r("g", il, [
+          (o(!0), r(b, null, g(x.value.tickX, (l) => (o(), r("line", {
+            x1: l.x,
+            x2: l.x,
+            y1: l.y1,
+            y2: l.y2,
+            stroke: e.value.style.chart.grid.verticalLines.stroke,
+            "stroke-width": e.value.style.chart.grid.verticalLines.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, ul))), 256))
+        ])) : h("", !0),
+        e.value.style.chart.axes.y.labels.show ? (o(), r("g", cl, [
+          (o(!0), r(b, null, g(x.value.tickY, (l) => (o(), r("line", {
+            stroke: e.value.style.chart.grid.verticalLines.stroke,
+            "stroke-width": e.value.style.chart.grid.verticalLines.strokeWidth,
+            "stroke-linecap": "round",
+            x1: c.value.left - 5,
+            x2: c.value.left,
+            y1: l.y,
+            y2: l.y
+          }, null, 8, vl))), 256))
+        ])) : h("", !0),
+        e.value.style.chart.axes.y.labels.show ? (o(), r("g", {
+          key: 4,
+          ref_key: "yAxisScales",
+          ref: le
+        }, [
+          (o(!0), r(b, null, g(x.value.tickY, (l) => (o(), r("text", {
+            x: c.value.left + e.value.style.chart.axes.y.labels.offsetX - 4 - e.value.style.chart.plots.radius,
+            y: l.y + n.value.yAxisLabels / 3,
+            fill: e.value.style.chart.axes.y.labels.color,
+            "font-size": n.value.yAxisLabels,
+            "text-anchor": "end"
+          }, z(u(D)(
+            e.value.style.chart.axes.y.labels.formatter,
+            l.value,
+            u(B)({
+              p: e.value.style.chart.axes.y.labels.prefix,
+              v: l.value,
+              s: e.value.style.chart.axes.y.labels.suffix,
+              r: e.value.style.chart.axes.y.labels.rounding
+            })
+          )), 9, hl))), 256))
+        ], 512)) : h("", !0),
+        e.value.style.chart.axes.y.name.text ? (o(), r("text", {
+          key: 5,
+          ref_key: "yAxisLabel",
+          ref: te,
+          transform: `translate(${n.value.yAxisName}, ${f.value.height / 2 + e.value.style.chart.axes.y.name.offsetY}), rotate(-90)`,
+          "font-size": n.value.yAxisName,
+          fill: e.value.style.chart.axes.y.name.color,
+          "font-weight": e.value.style.chart.axes.y.name.bold ? "bold" : "normal",
+          "text-anchor": "middle"
+        }, z(e.value.style.chart.axes.y.name.text), 9, yl)) : h("", !0),
+        e.value.style.chart.grid.horizontalLines.show ? (o(), r("g", dl, [
+          (o(!0), r(b, null, g(x.value.tickY, (l) => (o(), r("line", {
+            x1: l.x1,
+            x2: l.x2,
+            y1: l.y,
+            y2: l.y,
+            stroke: e.value.style.chart.grid.horizontalLines.stroke,
+            "stroke-width": e.value.style.chart.grid.horizontalLines.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, fl))), 256))
+        ])) : h("", !0),
+        e.value.style.chart.axes.x.labels.show ? (o(), r("g", xl, [
+          (o(!0), r(b, null, g(x.value.tickX, (l) => (o(), r("line", {
+            stroke: e.value.style.chart.grid.verticalLines.stroke,
+            "stroke-width": e.value.style.chart.grid.verticalLines.strokeWidth,
+            "stroke-linecap": "round",
+            x1: l.x,
+            x2: l.x,
+            y1: c.value.bottom,
+            y2: c.value.bottom + 5
+          }, null, 8, pl))), 256))
+        ])) : h("", !0),
+        e.value.style.chart.axes.x.labels.show ? (o(), r("g", {
+          key: 8,
+          ref_key: "xAxisScales",
+          ref: W
+        }, [
+          (o(!0), r(b, null, g(x.value.tickX, (l) => (o(), r("text", {
+            class: "vue-ui-history-plot-x-axis-scale",
+            transform: `translate(${l.x}, ${c.value.bottom + e.value.style.chart.axes.x.labels.offsetY + n.value.xAxisLabels + e.value.style.chart.plots.radius}), rotate(${e.value.style.chart.axes.x.labels.rotation})`,
+            fill: e.value.style.chart.axes.x.labels.color,
+            "font-size": n.value.xAxisLabels,
+            "text-anchor": e.value.style.chart.axes.x.labels.rotation > 0 ? "start" : e.value.style.chart.axes.x.labels.rotation < 0 ? "end" : "middle"
+          }, z(u(D)(
+            e.value.style.chart.axes.x.labels.formatter,
+            l.value,
+            u(B)({
+              p: e.value.style.chart.axes.x.labels.prefix,
+              v: l.value,
+              s: e.value.style.chart.axes.x.labels.suffix,
+              r: e.value.style.chart.axes.x.labels.rounding
+            })
+          )), 9, ml))), 256))
+        ], 512)) : h("", !0),
+        e.value.style.chart.axes.x.name.text ? (o(), r("text", {
+          key: 9,
+          ref_key: "xAxisLabel",
+          ref: ee,
+          x: f.value.width / 2 + e.value.style.chart.axes.x.name.offsetX,
+          y: f.value.height,
+          "font-size": n.value.xAxisName,
+          fill: e.value.style.chart.axes.x.name.color,
+          "font-weight": e.value.style.chart.axes.x.name.bold ? "bold" : "normal",
+          "text-anchor": "middle"
+        }, z(e.value.style.chart.axes.x.name.text), 9, bl)) : h("", !0),
+        e.value.style.chart.grid.xAxis.show ? (o(), r("line", {
+          key: 10,
+          x1: c.value.left,
+          x2: c.value.left + c.value.width,
+          y1: c.value.bottom,
+          y2: c.value.bottom,
+          stroke: e.value.style.chart.grid.xAxis.stroke,
+          "stroke-width": e.value.style.chart.grid.xAxis.strokeWidth,
+          "stroke-linecap": "round"
+        }, null, 8, gl)) : h("", !0),
+        e.value.style.chart.grid.yAxis.show ? (o(), r("line", {
+          key: 11,
+          x1: c.value.left,
+          x2: c.value.left,
+          y1: c.value.top,
+          y2: c.value.bottom,
+          stroke: e.value.style.chart.grid.yAxis.stroke,
+          "stroke-width": e.value.style.chart.grid.yAxis.strokeWidth,
+          "stroke-linecap": "round"
+        }, null, 8, kl)) : h("", !0),
+        (o(!0), r(b, null, g(N.value, (l, i) => (o(), r("g", null, [
+          e.value.style.chart.paths.show ? (o(), r("g", {
+            key: 0,
+            style: _({
+              opacity: A.value === null ? 1 : 0.3
+            })
+          }, [
+            M("path", {
+              d: l.path,
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": e.value.style.chart.paths.strokeWidth + 4,
+              fill: "none",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: O({ animated: e.value.useCssAnimation && !u(S) })
+            }, null, 10, wl),
+            M("path", {
+              d: l.path,
+              stroke: e.value.style.chart.paths.useSerieColor ? l.color : e.value.style.chart.paths.stroke,
+              "stroke-width": e.value.style.chart.paths.strokeWidth,
+              fill: "none",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: O({ animated: e.value.useCssAnimation && !u(S) })
+            }, null, 10, Al)
+          ], 4)) : h("", !0),
+          (o(!0), r(b, null, g(l.plots, (s) => (o(), r("circle", {
+            cx: s.x,
+            cy: s.y,
+            fill: e.value.style.chart.backgroundColor,
+            r: n.value.plots,
+            stroke: "none"
+          }, null, 8, Cl))), 256)),
+          (o(!0), r(b, null, g(l.plots, (s) => (o(), r("circle", {
+            cx: s.x,
+            cy: s.y,
+            fill: e.value.style.chart.plots.gradient.show ? `url(#gradient_${i}_${E.value})` : s.color,
+            r: n.value.plots,
+            stroke: e.value.style.chart.plots.stroke,
+            "stroke-width": e.value.style.chart.plots.strokeWidth,
+            class: O({ animated: e.value.useCssAnimation && !u(S) }),
+            style: _({
+              opacity: A.value === null || A.value.id === s.id ? 1 : 0.3,
+              transition: "opacity 0.2s ease-in-out"
+            })
+          }, null, 14, _l))), 256)),
+          e.value.style.chart.plots.labels.show ? (o(), r("g", Ll, [
+            (o(!0), r(b, null, g(l.plots, (s) => (o(), r("g", null, [
+              String(s.label).includes(`
+`) ? (o(), r("text", {
+                key: 1,
+                x: s.x + e.value.style.chart.plots.labels.offsetX,
+                y: s.y + e.value.style.chart.plots.labels.offsetY + n.value.plots + n.value.labels,
+                "font-size": n.value.labels,
+                fill: e.value.style.chart.plots.labels.color,
+                "font-weight": e.value.style.chart.plots.labels.bold ? "bold" : "normal",
+                "text-anchor": "middle",
+                class: O({ animated: e.value.useCssAnimation && !u(S) }),
+                style: _({
+                  opacity: A.value === null || A.value.id === s.id ? 1 : 0.3,
+                  transition: "opacity 0.2s ease-in-out"
+                }),
+                innerHTML: u(Ft)({
+                  content: String(s.label),
+                  fontSize: n.value.labels,
+                  fill: e.value.style.chart.plots.labels.color,
+                  x: s.x + e.value.style.chart.plots.labels.offsetX,
+                  y: s.y + e.value.style.chart.plots.labels.offsetY + n.value.plots + n.value.labels
+                })
+              }, null, 14, Sl)) : (o(), r("text", {
+                key: 0,
+                x: s.x + e.value.style.chart.plots.labels.offsetX,
+                y: s.y + e.value.style.chart.plots.labels.offsetY + n.value.plots + n.value.labels,
+                "font-size": n.value.labels,
+                fill: e.value.style.chart.plots.labels.color,
+                "font-weight": e.value.style.chart.plots.labels.bold ? "bold" : "normal",
+                "text-anchor": "middle",
+                class: O({ animated: e.value.useCssAnimation && !u(S) }),
+                style: _({
+                  opacity: A.value === null || A.value.id === s.id ? 1 : 0.3,
+                  transition: "opacity 0.2s ease-in-out"
+                })
+              }, z(s.label), 15, $l))
+            ]))), 256))
+          ])) : h("", !0),
+          e.value.style.chart.plots.indexLabels.show ? (o(), r("g", Tl, [
+            (o(!0), r(b, null, g(l.plots, (s, k) => (o(), r("text", {
+              x: s.x + e.value.style.chart.plots.indexLabels.offsetX,
+              y: s.y + e.value.style.chart.plots.indexLabels.offsetY + n.value.indexLabels / 3,
+              "font-size": n.value.indexLabels,
+              "font-weight": e.value.style.chart.plots.indexLabels.bold ? "bold" : "normal",
+              fill: e.value.style.chart.plots.indexLabels.adaptColorToBackground ? u(Xt)(l.color) : e.value.style.chart.plots.indexLabels.color,
+              "text-anchor": "middle",
+              class: O({ animated: e.value.useCssAnimation && !u(S) }),
+              style: _({
+                opacity: A.value === null || A.value.id === s.id ? 1 : 0.3,
+                transition: "opacity 0.2s ease-in-out"
+              })
+            }, z(e.value.style.chart.plots.indexLabels.startAtZero ? k : k + 1), 15, Ml))), 256))
+          ])) : h("", !0)
+        ]))), 256)),
+        (o(!0), r(b, null, g(N.value, (l) => (o(), r("g", null, [
+          (o(!0), r(b, null, g(l.plots, (i, s) => (o(), r("circle", {
+            cx: i.x,
+            cy: i.y,
+            fill: "transparent",
+            r: n.value.plots,
+            stroke: "none",
+            onMouseenter: (k) => xt({
+              datapoint: i,
+              plotIndex: s,
+              seriesIndex: l.seriesIndex
+            }),
+            onMouseleave: (k) => ft({
+              datapoint: i,
+              plotIndex: s,
+              seriesIndex: l.seriesIndex
+            }),
+            onClick: (k) => dt({
+              datapoint: i,
+              plotIndex: s,
+              seriesIndex: l.seriesIndex
+            })
+          }, null, 40, zl))), 256))
+        ]))), 256)),
+        p(t.$slots, "svg", { svg: f.value }, void 0, !0)
+      ], 12, tl)),
+      t.$slots.watermark ? (o(), r("div", Nl, [
+        p(t.$slots, "watermark", R(Y({ isPrinting: u(Ae) || u(Ce) })), void 0, !0)
+      ])) : h("", !0),
+      M("div", {
+        ref_key: "chartLegend",
+        ref: ve
+      }, [
+        e.value.style.chart.legend.show && U.value ? (o(), I(Zt, {
+          key: `legend_${he.value}`,
+          legendSet: Me.value,
+          config: yt.value,
+          onClickMarker: a[0] || (a[0] = ({ legend: l }) => {
+            Te(l.seriesIndex), ze(l);
+          })
+        }, {
+          item: m(({ legend: l, index: i }) => [
+            M("div", {
+              onClick: (s) => {
+                l.segregate(), ze(l);
+              },
+              style: _(`opacity:${w.value.includes(l.seriesIndex) ? 0.5 : 1}`)
+            }, z(l.name), 13, Ol)
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config"])) : p(t.$slots, "legend", {
+          key: 1,
+          legend: Me.value
+        }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (o(), r("div", {
+        key: 5,
+        ref_key: "source",
+        ref: xe,
+        dir: "auto"
+      }, [
+        p(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      Xe(u(Je), {
+        show: C.value.showTooltip && K.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: L.value,
+        content: Q.value,
+        isCustom: H.value,
+        isFullscreen: j.value,
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter
+      }, {
+        "tooltip-before": m(() => [
+          p(t.$slots, "tooltip-before", R(Y({ ...re.value })), void 0, !0)
+        ]),
+        "tooltip-after": m(() => [
+          p(t.$slots, "tooltip-after", R(Y({ ...re.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter"]),
+      U.value ? (o(), I(u(Ge), {
+        key: 6,
+        hideDetails: "",
+        config: {
+          open: C.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            color: e.value.style.chart.color
+          },
+          head: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            color: e.value.style.chart.color
+          }
+        }
+      }, {
+        content: m(() => [
+          (o(), I(u(Ve), {
+            key: `table_${ye.value}`,
+            colNames: G.value.colNames,
+            head: G.value.head,
+            body: G.value.body,
+            config: G.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: a[1] || (a[1] = (l) => C.value.showTable = !1)
+          }, {
+            th: m(({ th: l }) => [
+              M("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Il)
+            ]),
+            td: m(({ td: l }) => [
+              Lt(z(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : h("", !0),
+      u(S) ? (o(), I(Wt, { key: 7 })) : h("", !0)
+    ], 46, el));
+  }
+}, ql = /* @__PURE__ */ Qt(Pl, [["__scopeId", "data-v-69f5b31c"]]);
+export {
+  ql as default
+};