vue-data-ui 3.0.22 → 3.1.0

package/dist/vue-ui-quadrant-CMevCtXH.js

@@ -0,0 +1,1483 @@
+import { defineAsyncComponent as F, computed as x, ref as y, toRefs as Ct, watch as pe, shallowRef as Ke, onMounted as qt, onBeforeUnmount as St, createElementBlock as n, openBlock as s, unref as i, normalizeStyle as C, normalizeClass as T, createBlock as X, createCommentVNode as h, createElementVNode as c, createVNode as se, createSlots as et, withCtx as m, renderSlot as $, normalizeProps as U, guardReactiveProps as G, Fragment as S, renderList as Y, toDisplayString as k, Teleport as zt, resolveDynamicComponent as Tt, mergeProps as At, createTextVNode as tt, nextTick as lt } from "vue";
+import { u as Wt, c as at, t as Xt, a as Yt, p as ge, b as Mt, o as Ot, f as Q, d as Nt, e as Bt, Y as Ft, k as R, i as P, X as Rt, s as re, x as Pt, Z as Vt, I as Ht, F as It, v as Dt, w as Et, y as Ut, z as Gt } from "./index-CDQbCd41.js";
+import { t as Qt, u as Jt } from "./useResponsive-DfdjqQps.js";
+import { u as jt } from "./usePrinter-Bnl1YeUU.js";
+import { u as ut } from "./useNestedProp-BPEHGiYX.js";
+import { u as Zt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Kt } from "./useChartAccessibility-9icAAmYg.js";
+import el from "./img-JOqdlnUs.js";
+import tl from "./Title-Dq2_Z9kR.js";
+import { _ as ot } from "./Shape-Dj2Hl33H.js";
+import ll from "./Legend-2-dC7DVb.js";
+import { u as al, B as ul } from "./BaseScanner-BgWxam9d.js";
+import { _ as ol } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const sl = ["id"], rl = ["id"], nl = ["xmlns", "viewBox", "id"], il = ["x", "y", "width", "height"], vl = ["id"], dl = ["stop-color"], cl = ["stop-color"], hl = { key: 1 }, yl = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], bl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], fl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], pl = { key: 2 }, gl = ["points", "fill"], ml = ["points", "fill"], xl = ["points", "fill"], $l = ["points", "fill"], kl = { key: 3 }, Ll = ["y", "fill", "font-size"], wl = ["x", "y", "fill", "font-size"], _l = ["x", "y", "fill", "font-size"], Cl = ["y", "fill", "font-size"], ql = { key: 4 }, Sl = ["x", "y", "font-size", "fill"], zl = ["x", "y", "font-size", "fill"], Tl = ["x", "y", "font-size", "fill"], Al = ["id", "font-size", "transform", "fill"], Wl = ["id", "font-size", "transform", "fill"], Xl = ["id", "font-size", "transform", "fill"], Yl = { key: 5 }, Ml = ["fill", "points"], Ol = ["x", "y", "width", "height"], Nl = ["x", "y", "width", "height"], Bl = ["x", "y", "width", "height"], Fl = ["x", "y", "width", "height"], Rl = {
+  key: 0,
+  style: { "pointer-events": "none" }
+}, Pl = ["x", "y", "font-size", "fill"], Vl = ["x", "y", "font-size", "fill", "innerHTML"], Hl = { key: 0 }, Il = ["x", "y", "onMouseover", "onMouseleave", "onClick"], Dl = {
+  key: 8,
+  class: "vue-ui-dna"
+}, El = ["points", "fill"], Ul = ["points", "fill"], Gl = ["points", "fill"], Ql = ["points", "fill"], Jl = { key: 9 }, jl = ["x", "y", "font-size", "fill", "font-weight"], Zl = { key: 10 }, Kl = ["x", "y", "fill"], ea = ["x", "y", "fill"], ta = ["x", "y", "fill"], la = ["x", "y", "fill"], aa = ["stroke", "d"], ua = ["stroke", "d"], oa = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, sa = ["id"], ra = ["onClick"], na = {
+  key: 0,
+  height: "14",
+  width: "14",
+  viewBox: "0 0 20 20"
+}, ia = ["innerHTML"], va = {
+  __name: "vue-ui-quadrant",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectPlot", "selectSide", "selectLegend"],
+  setup(st, { expose: rt, emit: nt }) {
+    const it = F(() => import("./Tooltip-Y219DXZO.js")), vt = F(() => import("./BaseIcon-DHtro8us.js")), dt = F(() => import("./vue-ui-accordion-Bf_LHFFX.js")), ct = F(() => import("./DataTable-DJjA2_wf.js")), ht = F(() => import("./PenAndPaper-B7QEDgx4.js")), yt = F(() => import("./UserOptions-BuGfCdAY.js")), bt = F(() => import("./PackageVersion-DU12WH3O.js")), ft = F(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_quadrant: pt } = Wt(), M = st, me = x(() => !!M.dataset && M.dataset.length), w = y(at()), ne = nt, gt = y(null), ie = y(!1), ve = y(""), xe = y(0), p = y(!1), A = y(null), $e = y(null), ke = y(null), Le = y(null), we = y(null), _e = y(0), Ce = y(0), qe = y(0), Se = y(!1), J = y(null), e = y(ce()), { loading: ze, FINAL_DATASET: Te } = al({
+      ...Ct(M),
+      FINAL_CONFIG: e,
+      prepareConfig: ce,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await lt(), g.value.showTable = e.value.table.show;
+        });
+      },
+      skeletonDataset: [
+        {
+          name: "_",
+          shape: "circle",
+          color: "#CACACA",
+          series: [
+            { name: "_", x: -6, y: -4 },
+            { name: "_", x: -5, y: -2 },
+            { name: "_", x: -4, y: -1 },
+            { name: "_", x: -3, y: -0.5 },
+            { name: "_", x: -2, y: -0.25 },
+            { name: "_", x: -1, y: -0.135 },
+            { name: "_", x: 0, y: 0 },
+            { name: "_", x: 1, y: 0.135 },
+            { name: "_", x: 2, y: 0.25 },
+            { name: "_", x: 3, y: 0.5 },
+            { name: "_", x: 4, y: 1 },
+            { name: "_", x: 5, y: 2 },
+            { name: "_", x: 6, y: 4 }
+          ]
+        }
+      ],
+      skeletonConfig: Xt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              layout: {
+                grid: {
+                  stroke: "#6A6A6A",
+                  graduations: {
+                    stroke: "#6A6A6A",
+                    color: "#6A6A6A90"
+                  },
+                  xAxis: {
+                    auto: !0
+                  },
+                  yAxis: {
+                    auto: !0
+                  }
+                },
+                labels: {
+                  quadrantLabels: { show: !1 },
+                  plotLabels: { show: !1 },
+                  axisLabels: { show: !1 }
+                },
+                plots: {
+                  outlineColor: "#6A6A6A"
+                }
+              },
+              legend: {
+                backgroundColor: "transparent"
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: de, setUserOptionsVisibility: Ae, keepUserOptionState: We } = Zt({ config: e.value }), { svgRef: Xe } = Kt({ config: e.value.style.chart.title });
+    function ce() {
+      const l = ut({
+        userConfig: M.config,
+        defaultConfig: pt
+      });
+      return l.theme ? {
+        ...ut({
+          userConfig: Mt.vue_ui_quadrant[l.theme] || M.config,
+          defaultConfig: l
+        }),
+        customPalette: Yt[l.theme] || ge
+      } : l;
+    }
+    pe(() => M.config, (l) => {
+      e.value = ce(), de.value = !e.value.userOptions.showOnChartHover, Ye(), _e.value += 1, Ce.value += 1, qe.value += 1, g.value.plotLabels.show = e.value.style.chart.layout.labels.plotLabels.show, g.value.showTable = e.value.table.show, g.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const O = Ke(null), I = Ke(null), D = x(() => e.value.debug);
+    function Ye() {
+      if (Ot(M.dataset) ? Q({
+        componentName: "VueUiQuadrant",
+        type: "dataset",
+        debug: D.value
+      }) : M.dataset.forEach((l, u) => {
+        [null, void 0].includes(l.name) && Q({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "name",
+          index: u,
+          debug: D.value
+        }), [null, void 0].includes(l.series) ? Q({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "series",
+          index: u,
+          debug: D.value
+        }) : l.series.forEach((a, o) => {
+          [null, void 0].includes(a.name) && Q({
+            componentName: "VueUiQuadrant",
+            type: "datasetSerieAttribute",
+            property: "name",
+            key: "series",
+            index: o,
+            debug: D.value
+          });
+        });
+      }), e.value.responsive) {
+        const l = Qt(() => {
+          const { width: u, height: a } = Jt({
+            chart: A.value,
+            title: e.value.style.chart.title.text ? $e.value : null,
+            legend: e.value.style.chart.legend.show ? ke.value : null,
+            source: Le.value,
+            noTitle: we.value
+          });
+          L.value = 48, requestAnimationFrame(() => {
+            t.value.height = a, t.value.usableHeight = a - L.value * 2, t.value.width = u, t.value.usableWidth = u - L.value * 2, t.value.top = L.value, t.value.left = L.value, t.value.right = u - L.value, t.value.bottom = a - L.value, t.value.centerX = u / 2, t.value.centerY = a - a / 2, t.value.padding = L.value;
+          });
+        });
+        O.value && (I.value && O.value.unobserve(I.value), O.value.disconnect()), O.value = new ResizeObserver(l), I.value = A.value.parentNode, O.value.observe(I.value);
+      }
+    }
+    qt(() => {
+      Se.value = !0, Ye();
+    }), St(() => {
+      O.value && (I.value && O.value.unobserve(I.value), O.value.disconnect());
+    });
+    const { isPrinting: Me, isImaging: Oe, generatePdf: Ne, generateImage: Be } = jt({
+      elementId: `vue-ui-quadrant_${w.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-quadrant",
+      options: e.value.userOptions.print
+    }), mt = x(() => e.value.userOptions.show && !e.value.style.chart.title.text), Fe = x(() => Nt(e.value.customPalette)), g = y({
+      plotLabels: {
+        show: e.value.style.chart.layout.labels.plotLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), L = y(48), t = y({
+      height: e.value.style.chart.height,
+      usableHeight: e.value.style.chart.height - L.value * 2,
+      width: e.value.style.chart.width,
+      usableWidth: e.value.style.chart.width - L.value * 2,
+      top: L.value,
+      left: L.value,
+      right: e.value.style.chart.width - L.value,
+      bottom: e.value.style.chart.height - L.value,
+      centerX: e.value.style.chart.width / 2,
+      centerY: e.value.style.chart.height - e.value.style.chart.height / 2,
+      padding: L.value
+    }), v = y({
+      ...JSON.parse(JSON.stringify(t.value)),
+      startX: 0,
+      startY: 0
+    });
+    pe(() => t.value, (l) => {
+      l && (v.value = {
+        ...JSON.parse(JSON.stringify(t.value)),
+        startX: 0,
+        startY: 0
+      });
+    }, { deep: !0 });
+    const d = y(null), V = x(() => {
+      switch (d.value) {
+        case "TL":
+          return {
+            x: v.value.startX + v.value.width / 2,
+            y: v.value.height,
+            text: e.value.style.chart.layout.labels.quadrantLabels.tl.text || "Top Left",
+            fontSize: e.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
+            fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color,
+            bold: e.value.style.chart.layout.labels.quadrantLabels.tl.bold
+          };
+        case "TR":
+          return {
+            x: v.value.startX + v.value.width / 2,
+            y: v.value.height,
+            text: e.value.style.chart.layout.labels.quadrantLabels.tr.text || "Top Right",
+            fontSize: e.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
+            fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color,
+            bold: e.value.style.chart.layout.labels.quadrantLabels.tr.bold
+          };
+        case "BR":
+          return {
+            x: v.value.startX + v.value.width / 2,
+            y: v.value.height * 1.678,
+            text: e.value.style.chart.layout.labels.quadrantLabels.br.text || "Bottom Right",
+            fontSize: e.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
+            fill: e.value.style.chart.layout.labels.quadrantLabels.br.color,
+            bold: e.value.style.chart.layout.labels.quadrantLabels.br.bold
+          };
+        case "BL":
+          return {
+            x: v.value.startX + v.value.width / 2,
+            y: v.value.height * 1.678,
+            text: e.value.style.chart.layout.labels.quadrantLabels.bl.text || "Bottom Left",
+            fontSize: e.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
+            fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color,
+            bold: e.value.style.chart.layout.labels.quadrantLabels.bl.bold
+          };
+        default:
+          return { x: 0, y: 0, text: "", fontSize: 0, fill: "none", bold: !1 };
+      }
+    }), xt = y(null), ee = y(!1);
+    function j({ targetX: l, targetY: u, targetW: a, targetH: o, side: r }) {
+      d.value && Z(r);
+      const b = {
+        x: l - v.value.startX,
+        y: u - v.value.startY,
+        w: a - v.value.width,
+        h: o - v.value.height
+      }, f = e.value.zoomAnimationFrames;
+      let W = 0;
+      function Ze() {
+        ee.value = !0, v.value.startX += b.x / f, v.value.startY += b.y / f, v.value.width += b.w / f, v.value.height += b.h / f, W += 1, W < f ? xt.value = requestAnimationFrame(Ze) : ee.value = !1;
+      }
+      Ze();
+    }
+    function N(l) {
+      if (!ee.value)
+        if (p.value && d.value === l)
+          j({
+            targetX: 0,
+            targetY: 0,
+            targetW: t.value.width,
+            targetH: t.value.height
+          }), d.value = null, p.value = !1;
+        else {
+          switch (d.value = l, l) {
+            case "TL":
+              j({
+                targetX: 0,
+                targetY: 0,
+                targetW: t.value.width / 2 + t.value.left,
+                targetH: t.value.height / 2 + t.value.top,
+                side: "tl"
+              });
+              break;
+            case "TR":
+              j({
+                targetX: t.value.width / 2 - t.value.left,
+                targetY: 0,
+                targetW: t.value.width / 2 + t.value.left,
+                targetH: t.value.height / 2 + t.value.top,
+                side: "tr"
+              });
+              break;
+            case "BR":
+              j({
+                targetX: t.value.width / 2 - t.value.left,
+                targetY: t.value.height / 2 - t.value.top,
+                targetW: t.value.width / 2 + t.value.left,
+                targetH: t.value.height / 2 + t.value.top,
+                side: "br"
+              });
+              break;
+            case "BL":
+              j({
+                targetX: 0,
+                targetY: t.value.height / 2 - t.value.top,
+                targetW: t.value.width / 2 + t.value.left,
+                targetH: t.value.height / 2 + t.value.top,
+                side: "bl"
+              });
+              break;
+            default:
+              v.value.startX = 0, v.value.startY = 0, v.value.width = t.value.width, v.value.height = t.value.height;
+              break;
+          }
+          p.value = !0;
+        }
+    }
+    const $t = x(() => {
+      const l = e.value.style.chart.layout.grid.graduations.steps, u = t.value.usableWidth / (l * 2), a = t.value.top, o = [];
+      for (let r = 0; r < l; r += 1)
+        o.push({
+          x: t.value.padding + u * r,
+          y: a + t.value.usableHeight * (r / l / 2),
+          height: t.value.usableHeight * (1 - r / l),
+          width: t.value.usableWidth * (1 - r / l),
+          opacity: Math.round((r + 1) / l * 20)
+        });
+      return o;
+    }), q = x(() => {
+      let l = e.value.style.chart.layout.grid.xAxis.max, u = e.value.style.chart.layout.grid.xAxis.min, a = e.value.style.chart.layout.grid.yAxis.max, o = e.value.style.chart.layout.grid.yAxis.min;
+      return e.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(...E.value.flatMap((r) => r.series.map((b) => b.x))), u = Math.min(...E.value.flatMap((r) => r.series.map((b) => b.x)))), e.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...E.value.flatMap((r) => r.series.map((b) => b.y))), o = Math.min(...E.value.flatMap((r) => r.series.map((b) => b.y)))), {
+        x: {
+          max: l,
+          min: u
+        },
+        y: {
+          max: a,
+          min: o
+        }
+      };
+    }), B = y([]), E = x(() => Te.value.map((l, u) => ({
+      ...l,
+      series: Ft({
+        data: l.series,
+        threshold: e.value.downsample.threshold
+      }),
+      id: `cat_${u}_${w.value}`,
+      color: Bt(l.color) || Fe.value[u] || ge[u]
+    }))), kt = x(() => E.value.filter((l) => !B.value.includes(l.id))), Lt = x(() => E.value.map((l, u) => ({
+      ...l,
+      shape: l.shape || "circle",
+      series: l.series.map((a) => ({
+        ...a,
+        x: Re(a.x),
+        y: Pe(a.y),
+        xValue: a.x,
+        yValue: a.y,
+        quadrantSide: He({ x: a.x, y: a.y }),
+        categoryName: l.name,
+        shape: l.shape,
+        color: l.color
+      }))
+    }))), z = x(() => (Te.value.forEach((l, u) => {
+      l.series.forEach((a, o) => {
+        [null, void 0].includes(a.x) && Q({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "x",
+          key: "series",
+          index: o,
+          debug: D.value
+        }), [null, void 0].includes(a.y) && Q({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "y",
+          key: "series",
+          index: o,
+          debug: D.value
+        });
+      });
+    }), kt.value.map((l, u) => ({
+      ...l,
+      shape: l.shape || "circle",
+      color: l.color || Fe.value[u] || ge[u],
+      series: l.series.map((a) => ({
+        ...a,
+        x: Re(a.x),
+        y: Pe(a.y),
+        xValue: a.x,
+        yValue: a.y,
+        quadrantSide: He({ x: a.x, y: a.y }),
+        categoryName: l.name,
+        shape: l.shape,
+        color: l.color,
+        uid: at()
+      }))
+    }))));
+    function Re(l) {
+      if (l >= 0) {
+        const u = l / q.value.x.max;
+        return t.value.centerX + t.value.usableWidth / 2 * u;
+      } else {
+        const u = Math.abs(l) / Math.abs(q.value.x.min);
+        return t.value.centerX - t.value.usableWidth / 2 * u;
+      }
+    }
+    function Pe(l) {
+      if (l >= 0) {
+        const u = l / q.value.y.max;
+        return t.value.centerY + (1 - t.value.usableHeight / 2 * u);
+      } else {
+        const u = Math.abs(l) / Math.abs(q.value.y.min);
+        return t.value.centerY - (1 - t.value.usableHeight / 2 * u);
+      }
+    }
+    const te = x(() => {
+      const l = z.value.flatMap((f) => f.series.map((W) => ({
+        x: W.xValue,
+        y: W.yValue,
+        name: W.name,
+        category: W.categoryName,
+        quadrantSide: W.quadrantSide,
+        sideName: e.value.style.chart.layout.labels.quadrantLabels[W.quadrantSide].text,
+        color: f.color,
+        shape: f.shape
+      }))), u = e.value.style.chart.layout.grid.xAxis.name || "x", a = e.value.style.chart.layout.grid.yAxis.name || "y", o = [e.value.translations.category, e.value.translations.item, u, a, e.value.translations.side], r = l.map((f) => [f.category, f.name, f.x, f.y, f.sideName || f.quadrantSide]), b = l.map((f) => ({
+        shape: f.shape,
+        color: f.color
+      }));
+      return { head: o, body: r, itsShapes: b, tableData: l };
+    }), le = x(() => {
+      const l = te.value.head, u = te.value.tableData.map((o) => [
+        {
+          shape: o.shape,
+          color: o.color,
+          name: o.category
+        },
+        o.name,
+        R(
+          e.value.style.chart.layout.labels.plotLabels.x.formatter,
+          o.x,
+          P({
+            v: o.x,
+            r: e.value.style.chart.layout.labels.plotLabels.rounding
+          })
+        ),
+        R(
+          e.value.style.chart.layout.labels.plotLabels.y.formatter,
+          o.y,
+          P({
+            v: o.y,
+            r: e.value.style.chart.layout.labels.plotLabels.rounding
+          })
+        ),
+        o.sideName || o.quadrantSide
+      ]), a = {
+        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: l, body: u, config: a, colNames: l };
+    });
+    function he(l) {
+      B.value.includes(l) ? B.value = B.value.filter((a) => a !== l) : B.value.push(l);
+      const u = Ue();
+      ne("selectLegend", u);
+    }
+    const Ve = x(() => Lt.value.map((l) => ({
+      name: l.name,
+      shape: l.shape,
+      color: l.color,
+      id: l.id,
+      opacity: B.value.includes(l.id) ? 0.5 : 1,
+      segregate: () => he(l.id),
+      isSegregated: B.value.includes(l.id)
+    }))), wt = x(() => ({
+      cy: "quadrant-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 He(l) {
+      switch (!0) {
+        case (l.x >= 0 && l.y >= 0):
+          return "tr";
+        case (l.x >= 0 && l.y < 0):
+          return "br";
+        case (l.x < 0 && l.y < 0):
+          return "bl";
+        case (l.x < 0 && l.y >= 0):
+          return "tl";
+        default:
+          return "";
+      }
+    }
+    const ae = y(null), ue = y(null), ye = y(null);
+    function Ie(l, u, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: u, seriesIndex: a }), ae.value = u.uid, ue.value = {
+        color: l.color,
+        shape: l.shape
+      }, ye.value = {
+        datapoint: u,
+        seriesIndex: a,
+        series: z.value,
+        config: e.value
+      }, ie.value = !0;
+      const o = e.value.style.chart.tooltip.customFormat;
+      if (Ut(o) && Gt(() => o({
+        seriesIndex: a,
+        datapoint: u,
+        series: z.value,
+        config: e.value
+      })))
+        ve.value = o({
+          seriesIndex: a,
+          datapoint: u,
+          series: z.value,
+          config: e.value
+        });
+      else {
+        let r = "";
+        u.quadrantSide && (r += `<div style="color:${e.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].color};font-weight:${e.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].bold ? "bold" : "400"}">${e.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].text}</div>`), r += `<div>${l.name}</div>`, r += `<div style="padding-bottom:6px;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};margin-bottom:3px">${u.name}</div>`, r += `<div>${e.value.style.chart.layout.grid.xAxis.name ? e.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${R(
+          e.value.style.chart.layout.labels.plotLabels.x.formatter,
+          u.xValue,
+          P({
+            v: u.xValue,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: u, category: l, categoryIndex: a }
+        )}</b></div>`, r += `<div>${e.value.style.chart.layout.grid.yAxis.name ? e.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${R(
+          e.value.style.chart.layout.labels.plotLabels.y.formatter,
+          u.yValue,
+          P({
+            v: u.yValue,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: u, category: l, categoryIndex: a }
+        )}</b></div>`, ve.value = `<div style="text-align:left;font-size:${e.value.style.chart.tooltip.fontSize}px">${r}</div>`;
+      }
+    }
+    function De(l, u) {
+      ie.value = !1, ae.value = null, ue.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: u });
+    }
+    function Ee(l, u, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: u, seriesIndex: a });
+      const o = {
+        category: l.name,
+        shape: l.shape,
+        itemName: u.name,
+        x: u.xValue,
+        y: u.yValue,
+        quadrantSide: u.quadrantSide,
+        sideName: e.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].text
+      };
+      ne("selectPlot", o);
+    }
+    function Z(l) {
+      if (!l) return;
+      const u = z.value.flatMap((o) => o.series.filter((r) => r.quadrantSide === l).map((r) => ({
+        category: r.categoryName,
+        itemName: r.name,
+        x: r.xValue,
+        y: r.yValue
+      }))), a = {
+        quadrantSide: l,
+        sideName: e.value.style.chart.layout.labels.quadrantLabels[l].text,
+        items: [...u]
+      };
+      ne("selectSide", a);
+    }
+    const _ = x(() => ({
+      TL: {
+        tl: {
+          x: t.value.left + t.value.usableWidth / 4 - 20,
+          y: 0,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color
+        },
+        tr: {
+          x: t.value.left + t.value.usableWidth / 4,
+          y: 0,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color
+        },
+        br: {
+          x: t.value.left + t.value.usableWidth / 4,
+          y: 20,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.br.color
+        },
+        bl: {
+          x: t.value.left + t.value.usableWidth / 4 - 20,
+          y: 20,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color
+        },
+        crosshairs: {
+          horizontal: `M ${t.value.left + t.value.usableWidth / 4 - 20},20 ${t.value.left + t.value.usableWidth / 4 + 20},20`,
+          vertical: `M ${t.value.left + t.value.usableWidth / 4},0 ${t.value.left + t.value.usableWidth / 4},40`
+        }
+      },
+      TR: {
+        tl: {
+          x: t.value.centerX + t.value.usableWidth / 4 - 20,
+          y: 0,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color
+        },
+        tr: {
+          x: t.value.centerX + t.value.usableWidth / 4,
+          y: 0,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color
+        },
+        br: {
+          x: t.value.centerX + t.value.usableWidth / 4,
+          y: 20,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.br.color
+        },
+        bl: {
+          x: t.value.centerX + t.value.usableWidth / 4 - 20,
+          y: 20,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color
+        },
+        crosshairs: {
+          horizontal: `M ${t.value.centerX + t.value.usableWidth / 4 - 20},20 ${t.value.centerX + t.value.usableWidth / 4 + 20},20`,
+          vertical: `M ${t.value.centerX + t.value.usableWidth / 4},0 ${t.value.centerX + t.value.usableWidth / 4},40`
+        }
+      },
+      BR: {
+        tl: {
+          x: t.value.centerX + t.value.usableWidth / 4 - 20,
+          y: t.value.centerY - 48,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color
+        },
+        tr: {
+          x: t.value.centerX + t.value.usableWidth / 4,
+          y: t.value.centerY - 48,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color
+        },
+        br: {
+          x: t.value.centerX + t.value.usableWidth / 4,
+          y: t.value.centerY - 28,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.br.color
+        },
+        bl: {
+          x: t.value.centerX + t.value.usableWidth / 4 - 20,
+          y: t.value.centerY - 28,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color
+        },
+        crosshairs: {
+          horizontal: `M ${t.value.centerX + t.value.usableWidth / 4 - 20},${t.value.centerY - 28} ${t.value.centerX + t.value.usableWidth / 4 + 20},${t.value.centerY - 28}`,
+          vertical: `M ${t.value.centerX + t.value.usableWidth / 4},${t.value.centerY - 48} ${t.value.centerX + t.value.usableWidth / 4},${t.value.centerY - 8}`
+        }
+      },
+      BL: {
+        tl: {
+          x: t.value.left + t.value.usableWidth / 4 - 20,
+          y: t.value.centerY - 48,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color
+        },
+        tr: {
+          x: t.value.left + t.value.usableWidth / 4,
+          y: t.value.centerY - 48,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color
+        },
+        br: {
+          x: t.value.left + t.value.usableWidth / 4,
+          y: t.value.centerY - 28,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.br.color
+        },
+        bl: {
+          x: t.value.left + t.value.usableWidth / 4 - 20,
+          y: t.value.centerY - 28,
+          fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color
+        },
+        crosshairs: {
+          horizontal: `M ${t.value.left + t.value.usableWidth / 4 - 20},${t.value.centerY - 28} ${t.value.left + t.value.usableWidth / 4 + 20},${t.value.centerY - 28}`,
+          vertical: `M ${t.value.left + t.value.usableWidth / 4},${t.value.centerY - 48} ${t.value.left + t.value.usableWidth / 4},${t.value.centerY - 8}`
+        }
+      }
+    }));
+    function Ue() {
+      return z.value.map((l) => ({
+        color: l.color,
+        name: l.name,
+        shape: l.shape,
+        series: l.series.map((u) => ({
+          name: u.name,
+          x: u.xValue,
+          y: u.yValue,
+          quadrantSide: u.quadrantSide,
+          sideName: e.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].text
+        }))
+      }));
+    }
+    function be(l = null) {
+      lt(() => {
+        const u = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = te.value.head, o = te.value.body, r = u.concat([a]).concat(o), b = Dt(r);
+        l ? l(b) : Et({ csvContent: b, title: e.value.style.chart.title.text || "vue-ui-quadrant" });
+      });
+    }
+    const H = y(!1);
+    function Ge(l) {
+      H.value = l, xe.value += 1;
+    }
+    function Qe() {
+      g.value.showTable = !g.value.showTable;
+    }
+    function Je() {
+      g.value.plotLabels.show = !g.value.plotLabels.show;
+    }
+    function je() {
+      g.value.showTooltip = !g.value.showTooltip;
+    }
+    const oe = y(!1);
+    function fe() {
+      oe.value = !oe.value;
+    }
+    async function _t({ scale: l = 2 } = {}) {
+      if (!A.value) return;
+      const { width: u, height: a } = A.value.getBoundingClientRect(), o = u / a, { imageUri: r, base64: b } = await el({ domElement: A.value, base64: !0, img: !0, scale: l });
+      return {
+        imageUri: r,
+        base64: b,
+        title: e.value.style.chart.title.text,
+        width: u,
+        height: a,
+        aspectRatio: o
+      };
+    }
+    const K = x(() => {
+      const l = e.value.table.useDialog && !e.value.table.show, u = g.value.showTable;
+      return {
+        component: l ? ft : dt,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: l ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: H.value,
+          fullscreenParent: A.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: u,
+            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
+            }
+          }
+        }
+      };
+    });
+    return pe(() => g.value.showTable, (l) => {
+      e.value.table.show || (l && e.value.table.useDialog && J.value ? J.value.open() : "close" in J.value && J.value.close());
+    }), rt({
+      getData: Ue,
+      getImage: _t,
+      generatePdf: Ne,
+      generateCsv: be,
+      generateImage: Be,
+      toggleTable: Qe,
+      toggleLabels: Je,
+      toggleTooltip: je,
+      toggleAnnotator: fe,
+      toggleFullscreen: Ge
+    }), (l, u) => (s(), n("div", {
+      class: T(`vue-ui-quadrant ${H.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "quadrantChart",
+      ref: A,
+      id: `vue-ui-quadrant_${w.value}`,
+      style: C(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: u[16] || (u[16] = () => i(Ae)(!0)),
+      onMouseleave: u[17] || (u[17] = () => i(Ae)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (s(), X(i(ht), {
+        key: 0,
+        svgRef: i(Xe),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: oe.value,
+        onClose: fe
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      mt.value ? (s(), n("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: we,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.chart.title.text ? (s(), n("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: $e,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (s(), X(tl, {
+          key: `table_${_e.value}`,
+          config: {
+            title: {
+              cy: "quadrant-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "quadrant-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : h("", !0),
+      c("div", {
+        id: `legend-top-${w.value}`
+      }, null, 8, rl),
+      e.value.userOptions.show && me.value && (i(We) || i(de)) ? (s(), X(i(yt), {
+        ref_key: "details",
+        ref: gt,
+        key: `user_options_${xe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: i(Oe),
+        isPrinting: i(Me),
+        uid: w.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        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: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: H.value,
+        isTooltip: g.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: A.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: oe.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Ge,
+        onGeneratePdf: i(Ne),
+        onGenerateCsv: be,
+        onGenerateImage: i(Be),
+        onToggleTable: Qe,
+        onToggleLabels: Je,
+        onToggleTooltip: je,
+        onToggleAnnotator: fe,
+        style: C({
+          visibility: i(We) ? i(de) ? "visible" : "hidden" : "visible"
+        })
+      }, et({ _: 2 }, [
+        l.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: m(({ isOpen: a, color: o }) => [
+            $(l.$slots, "menuIcon", U(G({ isOpen: a, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: m(() => [
+            $(l.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: m(() => [
+            $(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: m(() => [
+            $(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: m(() => [
+            $(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: m(() => [
+            $(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        l.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: m(() => [
+            $(l.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: m(({ toggleFullscreen: a, isFullscreen: o }) => [
+            $(l.$slots, "optionFullscreen", U(G({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        l.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: m(({ toggleAnnotator: a, isAnnotator: o }) => [
+            $(l.$slots, "optionAnnotator", U(G({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      (s(), n("svg", {
+        ref_key: "svgRef",
+        ref: Xe,
+        xmlns: i(Rt),
+        class: T({ "vue-data-ui-fullscreen--on": H.value, "vue-data-ui-fulscreen--off": !H.value }),
+        viewBox: `${v.value.startX} ${v.value.startY} ${v.value.width} ${v.value.height}`,
+        style: C(`max-width:100%;overflow:hidden;background:transparent;color:${e.value.style.chart.color}`),
+        id: `svg_${w.value}`
+      }, [
+        se(i(bt)),
+        l.$slots["chart-background"] ? (s(), n("foreignObject", {
+          key: 0,
+          x: v.value.startX,
+          y: v.value.startY,
+          width: v.value.width,
+          height: v.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          $(l.$slots, "chart-background", {}, void 0, !0)
+        ], 8, il)) : h("", !0),
+        c("defs", null, [
+          (s(!0), n(S, null, Y(z.value, (a, o) => (s(), n("radialGradient", {
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%",
+            id: `quadrant_gradient_${w.value}_${o}`
+          }, [
+            c("stop", {
+              offset: "0%",
+              "stop-color": i(re)(i(Pt)(a.color, 0.05), e.value.style.chart.layout.areas.opacity)
+            }, null, 8, dl),
+            c("stop", {
+              offset: "100%",
+              "stop-color": i(re)(a.color, e.value.style.chart.layout.areas.opacity)
+            }, null, 8, cl)
+          ], 8, vl))), 256))
+        ]),
+        e.value.style.chart.layout.grid.graduations.show ? (s(), n("g", hl, [
+          (s(!0), n(S, null, Y($t.value, (a) => (s(), n("rect", {
+            fill: e.value.style.chart.layout.grid.graduations.fill ? i(re)(e.value.style.chart.layout.grid.graduations.color, a.opacity) : "none",
+            x: a.x,
+            y: a.y,
+            height: a.height <= 0 ? 1e-3 : a.height,
+            width: a.width <= 0 ? 1e-3 : a.width,
+            "stroke-width": e.value.style.chart.layout.grid.graduations.strokeWidth,
+            stroke: e.value.style.chart.layout.grid.graduations.stroke,
+            rx: e.value.style.chart.layout.grid.graduations.roundingForce
+          }, null, 8, yl))), 256))
+        ])) : h("", !0),
+        c("line", {
+          x1: t.value.left,
+          y1: t.value.centerY,
+          x2: t.value.right,
+          y2: t.value.centerY,
+          stroke: e.value.style.chart.layout.grid.stroke,
+          "stroke-width": e.value.style.chart.layout.grid.strokeWidth
+        }, null, 8, bl),
+        c("line", {
+          x1: t.value.centerX,
+          y1: t.value.top,
+          x2: t.value.centerX,
+          y2: t.value.bottom,
+          stroke: e.value.style.chart.layout.grid.stroke,
+          "stroke-width": e.value.style.chart.layout.grid.strokeWidth
+        }, null, 8, fl),
+        e.value.style.chart.layout.grid.showArrows ? (s(), n("g", pl, [
+          c("polygon", {
+            points: `${t.value.right - 8},${t.value.centerY - 6} ${t.value.right},${t.value.centerY} ${t.value.right - 8},${t.value.centerY + 6}`,
+            fill: e.value.style.chart.layout.grid.stroke,
+            stroke: "none"
+          }, null, 8, gl),
+          c("polygon", {
+            points: `${t.value.left + 8},${t.value.centerY - 6} ${t.value.left},${t.value.centerY} ${t.value.left + 8},${t.value.centerY + 6}`,
+            fill: e.value.style.chart.layout.grid.stroke,
+            stroke: "none"
+          }, null, 8, ml),
+          c("polygon", {
+            points: `${t.value.centerX - 6},${t.value.top + 8} ${t.value.centerX},${t.value.top} ${t.value.centerX + 6},${t.value.top + 8}`,
+            fill: e.value.style.chart.layout.grid.stroke,
+            stroke: "none"
+          }, null, 8, xl),
+          c("polygon", {
+            points: `${t.value.centerX - 6},${t.value.bottom - 8} ${t.value.centerX},${t.value.bottom} ${t.value.centerX + 6},${t.value.bottom - 8}`,
+            fill: e.value.style.chart.layout.grid.stroke,
+            stroke: "none"
+          }, null, 8, $l)
+        ])) : h("", !0),
+        e.value.style.chart.layout.labels.quadrantLabels.show && !p.value ? (s(), n("g", kl, [
+          e.value.style.chart.layout.labels.quadrantLabels.tl.text ? (s(), n("text", {
+            key: 0,
+            x: 0,
+            y: t.value.top - t.value.padding / 2,
+            "text-anchor": "start",
+            fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color,
+            "font-size": e.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
+            style: C(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
+            onClick: u[0] || (u[0] = (a) => Z("tl"))
+          }, k(e.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, Ll)) : h("", !0),
+          e.value.style.chart.layout.labels.quadrantLabels.tr.text ? (s(), n("text", {
+            key: 1,
+            x: t.value.width,
+            y: t.value.top - t.value.padding / 2,
+            "text-anchor": "end",
+            fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color,
+            "font-size": e.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
+            style: C(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
+            onClick: u[1] || (u[1] = (a) => Z("tr"))
+          }, k(e.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, wl)) : h("", !0),
+          e.value.style.chart.layout.labels.quadrantLabels.br.text ? (s(), n("text", {
+            key: 2,
+            x: t.value.width,
+            y: t.value.bottom + t.value.padding * 0.7,
+            "text-anchor": "end",
+            fill: e.value.style.chart.layout.labels.quadrantLabels.br.color,
+            "font-size": e.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
+            style: C(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
+            onClick: u[2] || (u[2] = (a) => Z("br"))
+          }, k(e.value.style.chart.layout.labels.quadrantLabels.br.text), 13, _l)) : h("", !0),
+          e.value.style.chart.layout.labels.quadrantLabels.bl.text ? (s(), n("text", {
+            key: 3,
+            x: 0,
+            y: t.value.bottom + t.value.padding * 0.7,
+            "text-anchor": "start",
+            fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color,
+            "font-size": e.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
+            style: C(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
+            onClick: u[3] || (u[3] = (a) => Z("bl"))
+          }, k(e.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, Cl)) : h("", !0)
+        ])) : h("", !0),
+        e.value.style.chart.layout.labels.axisLabels.show ? (s(), n("g", ql, [
+          c("text", {
+            x: t.value.centerX,
+            y: t.value.top - t.value.padding / 6,
+            "text-anchor": "middle",
+            "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
+            fill: e.value.style.chart.layout.labels.axisLabels.color.positive
+          }, k(i(R)(
+            e.value.style.chart.layout.labels.plotLabels.y.formatter,
+            q.value.y.max,
+            i(P)({
+              v: q.value.y.max,
+              r: e.value.style.chart.layout.labels.plotLabels.rounding
+            })
+          )), 9, Sl),
+          c("text", {
+            x: t.value.centerX,
+            y: t.value.top - t.value.padding / 2,
+            "text-anchor": "middle",
+            "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
+            fill: e.value.style.chart.layout.labels.axisLabels.color.positive
+          }, k(e.value.style.chart.layout.grid.yAxis.name), 9, zl),
+          c("text", {
+            x: t.value.centerX,
+            y: t.value.bottom + t.value.padding * 0.35,
+            "text-anchor": "middle",
+            "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
+            fill: e.value.style.chart.layout.labels.axisLabels.color.negative
+          }, k(i(R)(
+            e.value.style.chart.layout.labels.plotLabels.y.formatter,
+            q.value.y.min,
+            i(P)({
+              v: q.value.y.min,
+              r: e.value.style.chart.layout.labels.plotLabels.rounding
+            })
+          )), 9, Tl),
+          c("text", {
+            id: `xLabelMin_${w.value}`,
+            "text-anchor": "middle",
+            "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
+            transform: `translate(${t.value.padding - e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(-90)`,
+            fill: e.value.style.chart.layout.labels.axisLabels.color.negative
+          }, k(i(R)(
+            e.value.style.chart.layout.labels.plotLabels.x.formatter,
+            q.value.x.min,
+            i(P)({
+              v: q.value.x.min,
+              r: e.value.style.chart.layout.labels.plotLabels.rounding
+            })
+          )), 9, Al),
+          c("text", {
+            id: `xLabelMax_${w.value}`,
+            "text-anchor": "middle",
+            "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
+            transform: `translate(${t.value.width - t.value.padding + e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(90)`,
+            fill: e.value.style.chart.layout.labels.axisLabels.color.positive
+          }, k(i(R)(
+            e.value.style.chart.layout.labels.plotLabels.x.formatter,
+            q.value.x.max,
+            i(P)({
+              v: q.value.x.max,
+              r: e.value.style.chart.layout.labels.plotLabels.rounding
+            })
+          )), 9, Wl),
+          c("text", {
+            id: `xLabelMaxName_${w.value}`,
+            "text-anchor": "middle",
+            "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
+            transform: `translate(${t.value.width - e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(90)`,
+            fill: e.value.style.chart.layout.labels.axisLabels.color.positive
+          }, k(e.value.style.chart.layout.grid.xAxis.name), 9, Xl)
+        ])) : h("", !0),
+        e.value.style.chart.layout.areas.show ? (s(), n("g", Yl, [
+          (s(!0), n(S, null, Y(z.value, (a, o) => (s(), n("g", null, [
+            a.series.length > 2 ? (s(), n("polygon", {
+              key: 0,
+              "data-cy-quadrant-area": "",
+              fill: e.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${w.value}_${o})` : i(re)(a.color, e.value.style.chart.layout.areas.opacity),
+              points: i(Vt)(a)
+            }, null, 8, Ml)) : h("", !0)
+          ]))), 256))
+        ])) : h("", !0),
+        c("g", null, [
+          c("rect", {
+            onClick: u[4] || (u[4] = (a) => N("TL")),
+            x: t.value.left,
+            y: t.value.top,
+            width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
+            height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
+            fill: "transparent",
+            class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
+          }, null, 10, Ol),
+          c("rect", {
+            onClick: u[5] || (u[5] = (a) => N("TR")),
+            x: t.value.centerX,
+            y: t.value.top,
+            width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
+            height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
+            fill: "transparent",
+            class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
+          }, null, 10, Nl),
+          c("rect", {
+            onClick: u[6] || (u[6] = (a) => N("BR")),
+            x: t.value.centerX,
+            y: t.value.centerY,
+            width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
+            height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
+            fill: "transparent",
+            class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
+          }, null, 10, Bl),
+          c("rect", {
+            onClick: u[7] || (u[7] = (a) => N("BL")),
+            x: t.value.left,
+            y: t.value.centerY,
+            width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
+            height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
+            fill: "transparent",
+            class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
+          }, null, 10, Fl)
+        ]),
+        e.value.style.chart.layout.labels.plotLabels.showAsTag ? (s(), n(S, { key: 7 }, [
+          g.value.plotLabels.show ? (s(), n("g", Hl, [
+            (s(!0), n(S, null, Y(z.value, (a, o) => (s(), n(S, null, [
+              (s(!0), n(S, null, Y(a.series, (r) => (s(), n("foreignObject", {
+                style: { overflow: "visible" },
+                height: "10",
+                width: "100",
+                x: r.x - 50,
+                y: r.y - e.value.style.chart.layout.labels.plotLabels.fontSize,
+                onMouseover: (b) => Ie(a, r, o),
+                onMouseleave: (b) => De(r, o),
+                onClick: (b) => Ee(a, r, o)
+              }, [
+                c("div", {
+                  style: C(`color:${i(It)(a.color)};margin: 0 auto; font-size:${e.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: fit-content;`)
+                }, k(r.name), 5)
+              ], 40, Il))), 256))
+            ], 64))), 256))
+          ])) : h("", !0)
+        ], 64)) : (s(), n(S, { key: 6 }, [
+          (s(!0), n(S, null, Y(z.value, (a, o) => (s(), n("g", null, [
+            (s(!0), n(S, null, Y(a.series, (r) => (s(), X(ot, {
+              color: a.color,
+              isSelected: ae.value && r.uid === ae.value,
+              plot: r,
+              radius: e.value.style.chart.layout.plots.radius / (p.value ? 1.5 : 1),
+              shape: a.shape,
+              stroke: e.value.style.chart.layout.plots.outline ? e.value.style.chart.layout.plots.outlineColor : "none",
+              strokeWidth: e.value.style.chart.layout.plots.outlineWidth,
+              onMouseenter: (b) => Ie(a, r, o),
+              onMouseleave: (b) => De(r, o),
+              onClick: (b) => Ee(a, r, o)
+            }, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseenter", "onMouseleave", "onClick"]))), 256))
+          ]))), 256)),
+          g.value.plotLabels.show ? (s(), n("g", Rl, [
+            (s(!0), n(S, null, Y(z.value, (a) => (s(), n("g", null, [
+              (s(!0), n(S, null, Y(a.series, (o) => (s(), n("g", null, [
+                String(o.name).includes(`
+`) ? (s(), n("text", {
+                  key: 1,
+                  x: o.x,
+                  y: o.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius,
+                  "text-anchor": "middle",
+                  "font-size": e.value.style.chart.layout.labels.plotLabels.fontSize / (p.value ? 1.5 : 1),
+                  fill: e.value.style.chart.layout.labels.plotLabels.color,
+                  innerHTML: i(Ht)({
+                    content: String(o.name),
+                    fontSize: e.value.style.chart.layout.labels.plotLabels.fontSize / (p.value ? 1.5 : 1),
+                    fill: e.value.style.chart.layout.labels.plotLabels.color,
+                    x: o.x,
+                    y: o.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius
+                  })
+                }, null, 8, Vl)) : (s(), n("text", {
+                  key: 0,
+                  x: o.x,
+                  y: o.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius,
+                  "text-anchor": "middle",
+                  "font-size": e.value.style.chart.layout.labels.plotLabels.fontSize / (p.value ? 1.5 : 1),
+                  fill: e.value.style.chart.layout.labels.plotLabels.color
+                }, k(o.name), 9, Pl))
+              ]))), 256))
+            ]))), 256))
+          ])) : h("", !0)
+        ], 64)),
+        p.value ? (s(), n("g", Dl, [
+          d.value === "TL" ? (s(), n("polygon", {
+            key: 0,
+            points: `${t.value.left - 1},${t.value.centerY} ${t.value.centerX},${t.value.centerY} ${t.value.centerX},${t.value.top - 1} ${t.value.right},${t.value.top - 1} ${t.value.right},${t.value.bottom} ${t.value.left - 1},${t.value.bottom} ${t.value.left - 1},${t.value.centerY}`,
+            fill: e.value.style.chart.backgroundColor,
+            style: { opacity: "1" }
+          }, null, 8, El)) : h("", !0),
+          d.value === "TR" ? (s(), n("polygon", {
+            key: 1,
+            points: `${t.value.left},${t.value.top - 1} ${t.value.centerX},${t.value.top - 1} ${t.value.centerX},${t.value.centerY} ${t.value.right + 1},${t.value.centerY} ${t.value.right + 1},${t.value.bottom} ${t.value.left},${t.value.bottom} ${t.value.left},${t.value.top - 1}`,
+            fill: e.value.style.chart.backgroundColor,
+            style: { opacity: "1" }
+          }, null, 8, Ul)) : h("", !0),
+          d.value === "BR" ? (s(), n("polygon", {
+            key: 2,
+            points: `${t.value.left},${t.value.top} ${t.value.right + 1},${t.value.top} ${t.value.right + 1},${t.value.centerY} ${t.value.centerX},${t.value.centerY} ${t.value.centerX},${t.value.bottom + 1} ${t.value.left},${t.value.bottom + 1} ${t.value.left},${t.value.top}`,
+            fill: e.value.style.chart.backgroundColor,
+            style: { opacity: "1" }
+          }, null, 8, Gl)) : h("", !0),
+          d.value === "BL" ? (s(), n("polygon", {
+            key: 3,
+            points: `${t.value.left - 1},${t.value.top} ${t.value.right},${t.value.top} ${t.value.right},${t.value.bottom + 1} ${t.value.centerX},${t.value.bottom + 1} ${t.value.centerX},${t.value.centerY} ${t.value.left - 1},${t.value.centerY} ${t.value.left - 1},${t.value.top}`,
+            fill: e.value.style.chart.backgroundColor,
+            style: { opacity: "1" }
+          }, null, 8, Ql)) : h("", !0)
+        ])) : h("", !0),
+        d.value && !ee.value ? (s(), n("g", Jl, [
+          c("text", {
+            x: V.value.x,
+            y: V.value.y - V.value.fontSize / 1.5,
+            "font-size": V.value.fontSize / 1.5,
+            fill: V.value.fill,
+            "text-anchor": "middle",
+            "font-weight": V.value.bold ? "bold" : "normal"
+          }, k(V.value.text), 9, jl)
+        ])) : h("", !0),
+        p.value && d.value ? (s(), n("g", Zl, [
+          c("rect", {
+            x: _.value[d.value].tl.x,
+            y: _.value[d.value].tl.y,
+            height: "20",
+            width: "20",
+            fill: _.value[d.value].tl.fill,
+            style: C(`cursor: pointer; opacity: ${d.value === "TL" ? 1 : 0.2}`),
+            onClick: u[8] || (u[8] = (a) => N("TL")),
+            class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "TL" })
+          }, null, 14, Kl),
+          c("rect", {
+            x: _.value[d.value].tr.x,
+            y: _.value[d.value].tr.y,
+            height: "20",
+            width: "20",
+            fill: _.value[d.value].tr.fill,
+            style: C(`cursor: pointer; opacity: ${d.value === "TR" ? 1 : 0.2}`),
+            onClick: u[9] || (u[9] = (a) => N("TR")),
+            class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "TR" })
+          }, null, 14, ea),
+          c("rect", {
+            x: _.value[d.value].br.x,
+            y: _.value[d.value].br.y,
+            height: "20",
+            width: "20",
+            fill: _.value[d.value].br.fill,
+            style: C(`cursor: pointer; opacity: ${d.value === "BR" ? 1 : 0.2}`),
+            onClick: u[10] || (u[10] = (a) => N("BR")),
+            class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "BR" })
+          }, null, 14, ta),
+          c("rect", {
+            x: _.value[d.value].bl.x,
+            y: _.value[d.value].bl.y,
+            height: "20",
+            width: "20",
+            fill: _.value[d.value].bl.fill,
+            style: C(`cursor: pointer; opacity: ${d.value === "BL" ? 1 : 0.2}`),
+            onClick: u[11] || (u[11] = (a) => N("BL")),
+            class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "BL" })
+          }, null, 14, la),
+          c("path", {
+            class: "vue-ui-quadrant-minimap-crosshairs",
+            stroke: e.value.style.chart.backgroundColor,
+            "stroke-width": 1,
+            d: _.value[d.value].crosshairs.horizontal
+          }, null, 8, aa),
+          c("path", {
+            class: "vue-ui-quadrant-minimap-crosshairs",
+            stroke: e.value.style.chart.backgroundColor,
+            "stroke-width": 1,
+            d: _.value[d.value].crosshairs.vertical
+          }, null, 8, ua)
+        ])) : h("", !0),
+        $(l.$slots, "svg", { svg: t.value }, void 0, !0)
+      ], 14, nl)),
+      l.$slots.watermark ? (s(), n("div", oa, [
+        $(l.$slots, "watermark", U(G({ isPrinting: i(Me) || i(Oe) })), void 0, !0)
+      ])) : h("", !0),
+      c("div", {
+        id: `legend-bottom-${w.value}`
+      }, null, 8, sa),
+      Se.value ? (s(), X(zt, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${w.value}` : `#legend-bottom-${w.value}`
+      }, [
+        c("div", {
+          ref_key: "chartLegend",
+          ref: ke
+        }, [
+          e.value.style.chart.legend.show ? (s(), X(ll, {
+            key: `legend_${qe.value}`,
+            legendSet: Ve.value,
+            config: wt.value,
+            onClickMarker: u[12] || (u[12] = ({ legend: a }) => he(a.id))
+          }, {
+            item: m(({ legend: a }) => [
+              i(ze) ? h("", !0) : (s(), n("div", {
+                key: 0,
+                onClick: (o) => he(a.id),
+                style: C(`opacity:${B.value.includes(a.id) ? 0.5 : 1}`)
+              }, k(a.name), 13, ra))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : $(l.$slots, "legend", {
+            key: 1,
+            legend: Ve.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : h("", !0),
+      l.$slots.source ? (s(), n("div", {
+        key: 6,
+        ref_key: "source",
+        ref: Le,
+        dir: "auto"
+      }, [
+        $(l.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      se(i(it), {
+        show: g.value.showTooltip && ie.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: A.value,
+        content: ve.value,
+        isFullscreen: H.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter
+      }, {
+        "tooltip-before": m(() => [
+          $(l.$slots, "tooltip-before", U(G({ ...ye.value })), void 0, !0)
+        ]),
+        "tooltip-after": m(() => [
+          $(l.$slots, "tooltip-after", U(G({ ...ye.value })), void 0, !0)
+        ]),
+        default: m(() => [
+          e.value.style.chart.tooltip.showShape ? (s(), n("svg", na, [
+            se(ot, {
+              plot: { x: 10, y: 10 },
+              shape: ue.value.shape,
+              color: ue.value.color,
+              radius: 8,
+              stroke: e.value.style.chart.layout.plots.outline ? e.value.style.chart.layout.plots.outlineColor : "none",
+              "stroke-width": e.value.style.chart.layout.plots.outlineWidth
+            }, null, 8, ["shape", "color", "stroke", "stroke-width"])
+          ])) : h("", !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
+      me.value ? (s(), X(Tt(K.value.component), At({ key: 7 }, K.value.props, {
+        ref_key: "tableUnit",
+        ref: J,
+        onClose: u[15] || (u[15] = (a) => g.value.showTable = !1)
+      }), et({
+        content: m(() => [
+          (s(), X(i(ct), {
+            key: `table_${Ce.value}`,
+            colNames: le.value.colNames,
+            head: le.value.head,
+            body: le.value.body,
+            config: le.value.config,
+            title: e.value.table.useDialog ? "" : K.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: u[14] || (u[14] = (a) => g.value.showTable = !1)
+          }, {
+            th: m(({ th: a }) => [
+              tt(k(a), 1)
+            ]),
+            td: m(({ td: a }) => [
+              c("div", {
+                innerHTML: a.name || a
+              }, null, 8, ia)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: m(() => [
+            tt(k(K.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: m(() => [
+            c("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: u[13] || (u[13] = (a) => be(e.value.userOptions.callbacks.csv))
+            }, [
+              se(i(vt), {
+                name: "excel",
+                stroke: K.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : h("", !0),
+      i(ze) ? (s(), X(ul, { key: 8 })) : h("", !0)
+    ], 46, sl));
+  }
+}, wa = /* @__PURE__ */ ol(va, [["__scopeId", "data-v-bdd60f91"]]);
+export {
+  wa as default
+};