vue-data-ui 2.3.2 → 2.3.4

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

@@ -0,0 +1,1178 @@
+import { computed as g, ref as h, onMounted as Re, onBeforeUnmount as Ve, watch as He, openBlock as o, createElementBlock as i, normalizeClass as z, normalizeStyle as k, createVNode as Z, createCommentVNode as c, createBlock as D, unref as _, createSlots as Oe, withCtx as $, renderSlot as S, normalizeProps as ue, guardReactiveProps as oe, createElementVNode as v, Fragment as w, renderList as W, toDisplayString as m, createTextVNode as Ie, nextTick as De } from "vue";
+import { u as Ee, c as qe, t as Ue, a as Ge, p as se, o as Qe, e as F, b as Je, r as K, d as je, X as Ze, s as Ke, N as et, C as tt, v as lt, w as at, n as ut, q as ot } from "./index-uOtklCCx.js";
+import { t as st, u as rt } from "./useResponsive-NZB-WLRF.js";
+import { _ as it } from "./Title-2iks1ziC.js";
+import { u as nt, U as vt } from "./usePrinter-B6xQCyL-.js";
+import { _ as dt } from "./Tooltip-C3phqKuU.js";
+import { _ as _e } from "./Shape-CjLV0scA.js";
+import { L as ct } from "./Legend-CxvJTjEm.js";
+import { D as ht } from "./DataTable-CwaOlAsy.js";
+import yt from "./vue-ui-skeleton-BM9rwmxY.js";
+import bt from "./vue-ui-accordion-HJPf7My0.js";
+import { u as Se } from "./useNestedProp-BgWkUab_.js";
+import { _ as ft } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const pt = ["id"], gt = ["xmlns", "viewBox", "id"], mt = ["id"], xt = ["stop-color"], $t = ["stop-color"], kt = { key: 0 }, Lt = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], wt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], qt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], _t = { key: 1 }, St = ["points", "fill"], Ct = ["points", "fill"], zt = ["points", "fill"], Tt = ["points", "fill"], Wt = { key: 2 }, Xt = ["y", "fill", "font-size"], Yt = ["x", "y", "fill", "font-size"], Mt = ["x", "y", "fill", "font-size"], Nt = ["y", "fill", "font-size"], At = { key: 3 }, Bt = ["x", "y", "font-size", "fill"], Ft = ["x", "y", "font-size", "fill"], Pt = ["x", "y", "font-size", "fill"], Rt = ["id", "font-size", "transform", "fill"], Vt = ["id", "font-size", "transform", "fill"], Ht = ["id", "font-size", "transform", "fill"], Ot = { key: 4 }, It = ["fill", "points"], Dt = ["x", "y", "width", "height"], Et = ["x", "y", "width", "height"], Ut = ["x", "y", "width", "height"], Gt = ["x", "y", "width", "height"], Qt = { key: 0 }, Jt = ["x", "y", "font-size", "fill"], jt = { key: 0 }, Zt = ["x", "y", "onMouseover", "onClick"], Kt = {
+  key: 7,
+  class: "vue-ui-dna"
+}, el = ["points", "fill"], tl = ["points", "fill"], ll = ["points", "fill"], al = ["points", "fill"], ul = { key: 8 }, ol = ["x", "y", "font-size", "fill", "font-weight"], sl = { key: 9 }, rl = ["x", "y", "fill"], il = ["x", "y", "fill"], nl = ["x", "y", "fill"], vl = ["x", "y", "fill"], dl = ["stroke", "d"], cl = ["stroke", "d"], hl = ["onClick"], yl = {
+  key: 0,
+  height: "14",
+  width: "14",
+  viewBox: "0 0 20 20"
+}, bl = ["innerHTML"], fl = {
+  __name: "vue-ui-quadrant",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectPlot", "selectSide", "selectLegend"],
+  setup(Ce, { expose: ze, emit: ee }) {
+    const X = Ce, { vue_ui_quadrant: Te } = Ee(), E = g(() => !!X.dataset && X.dataset.length), C = h(qe()), We = h(null), U = h(!1), te = h(""), re = h(0), f = h(!1), P = h(null), ie = h(null), ne = h(null), t = g(() => {
+      const l = Se({
+        userConfig: X.config,
+        defaultConfig: Te
+      });
+      return l.theme ? {
+        ...Se({
+          userConfig: Ue.vue_ui_quadrant[l.theme] || X.config,
+          defaultConfig: l
+        }),
+        customPalette: Ge[l.theme] || se
+      } : l;
+    }), G = h(null);
+    Re(() => {
+      if (Qe(X.dataset) ? F({
+        componentName: "VueUiQuadrant",
+        type: "dataset"
+      }) : X.dataset.forEach((l, u) => {
+        [null, void 0].includes(l.name) && F({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "name",
+          index: u
+        }), [null, void 0].includes(l.series) ? F({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "series",
+          index: u
+        }) : l.series.forEach((a, s) => {
+          [null, void 0].includes(a.name) && F({
+            componentName: "VueUiQuadrant",
+            type: "datasetSerieAttribute",
+            property: "name",
+            key: "series",
+            index: s
+          });
+        });
+      }), t.value.responsive) {
+        const l = st(() => {
+          const { width: u, height: a } = rt({
+            chart: P.value,
+            title: t.value.style.chart.title.text ? ie.value : null,
+            legend: t.value.style.chart.legend.show ? ne.value : null
+          });
+          p.value = 48, e.value.height = a, e.value.usableHeight = a - p.value * 2, e.value.width = u, e.value.usableWidth = u - p.value * 2, e.value.top = p.value, e.value.left = p.value, e.value.right = u - p.value, e.value.bottom = a - p.value, e.value.centerX = u / 2, e.value.centerY = a - a / 2, e.value.padding = p.value;
+        });
+        G.value = new ResizeObserver(l), G.value.observe(P.value.parentNode);
+      }
+    }), Ve(() => {
+      G.value && G.value.disconnect();
+    });
+    const { isPrinting: Xe, isImaging: Ye, generatePdf: ve, generateImage: de } = nt({
+      elementId: `vue-ui-quadrant_${C.value}`,
+      fileName: t.value.style.chart.title.text || "vue-ui-quadrant"
+    }), ce = g(() => Je(t.value.customPalette)), L = h({
+      plotLabels: {
+        show: t.value.style.chart.layout.labels.plotLabels.show
+      },
+      showTable: t.value.table.show,
+      showTooltip: t.value.style.chart.tooltip.show
+    }), p = h(48), e = h({
+      height: t.value.style.chart.height,
+      usableHeight: t.value.style.chart.height - p.value * 2,
+      width: t.value.style.chart.width,
+      usableWidth: t.value.style.chart.width - p.value * 2,
+      top: p.value,
+      left: p.value,
+      right: t.value.style.chart.width - p.value,
+      bottom: t.value.style.chart.height - p.value,
+      centerX: t.value.style.chart.width / 2,
+      centerY: t.value.style.chart.height - t.value.style.chart.height / 2,
+      padding: p.value
+    }), d = h({
+      ...JSON.parse(JSON.stringify(e.value)),
+      startX: 0,
+      startY: 0
+    });
+    He(() => e.value, (l) => {
+      l && (d.value = {
+        ...JSON.parse(JSON.stringify(e.value)),
+        startX: 0,
+        startY: 0
+      });
+    }, { deep: !0 });
+    const n = h(null), A = g(() => {
+      switch (n.value) {
+        case "TL":
+          return {
+            x: d.value.startX + d.value.width / 2,
+            y: d.value.height,
+            text: t.value.style.chart.layout.labels.quadrantLabels.tl.text || "Top Left",
+            fontSize: t.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
+            fill: t.value.style.chart.layout.labels.quadrantLabels.tl.color,
+            bold: t.value.style.chart.layout.labels.quadrantLabels.tl.bold
+          };
+        case "TR":
+          return {
+            x: d.value.startX + d.value.width / 2,
+            y: d.value.height,
+            text: t.value.style.chart.layout.labels.quadrantLabels.tr.text || "Top Right",
+            fontSize: t.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
+            fill: t.value.style.chart.layout.labels.quadrantLabels.tr.color,
+            bold: t.value.style.chart.layout.labels.quadrantLabels.tr.bold
+          };
+        case "BR":
+          return {
+            x: d.value.startX + d.value.width / 2,
+            y: d.value.height * 1.678,
+            text: t.value.style.chart.layout.labels.quadrantLabels.br.text || "Bottom Right",
+            fontSize: t.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
+            fill: t.value.style.chart.layout.labels.quadrantLabels.br.color,
+            bold: t.value.style.chart.layout.labels.quadrantLabels.br.bold
+          };
+        case "BL":
+          return {
+            x: d.value.startX + d.value.width / 2,
+            y: d.value.height * 1.678,
+            text: t.value.style.chart.layout.labels.quadrantLabels.bl.text || "Bottom Left",
+            fontSize: t.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
+            fill: t.value.style.chart.layout.labels.quadrantLabels.bl.color,
+            bold: t.value.style.chart.layout.labels.quadrantLabels.bl.bold
+          };
+        default:
+          return { x: 0, y: 0, text: "", fontSize: 0, fill: "none", bold: !1 };
+      }
+    }), Me = h(null), Q = h(!1);
+    function R({ targetX: l, targetY: u, targetW: a, targetH: s, side: r }) {
+      n.value && O(r);
+      const y = {
+        x: l - d.value.startX,
+        y: u - d.value.startY,
+        w: a - d.value.width,
+        h: s - d.value.height
+      }, b = t.value.zoomAnimationFrames;
+      let T = 0;
+      function we() {
+        Q.value = !0, d.value.startX += y.x / b, d.value.startY += y.y / b, d.value.width += y.w / b, d.value.height += y.h / b, T += 1, T < b ? Me.value = requestAnimationFrame(we) : Q.value = !1;
+      }
+      we();
+    }
+    function Y(l) {
+      if (!Q.value)
+        if (f.value && n.value === l)
+          R({
+            targetX: 0,
+            targetY: 0,
+            targetW: e.value.width,
+            targetH: e.value.height
+          }), n.value = null, f.value = !1;
+        else {
+          switch (n.value = l, l) {
+            case "TL":
+              R({
+                targetX: 0,
+                targetY: 0,
+                targetW: e.value.width / 2 + e.value.left,
+                targetH: e.value.height / 2 + e.value.top,
+                side: "tl"
+              });
+              break;
+            case "TR":
+              R({
+                targetX: e.value.width / 2 - e.value.left,
+                targetY: 0,
+                targetW: e.value.width / 2 + e.value.left,
+                targetH: e.value.height / 2 + e.value.top,
+                side: "tr"
+              });
+              break;
+            case "BR":
+              R({
+                targetX: e.value.width / 2 - e.value.left,
+                targetY: e.value.height / 2 - e.value.top,
+                targetW: e.value.width / 2 + e.value.left,
+                targetH: e.value.height / 2 + e.value.top,
+                side: "br"
+              });
+              break;
+            case "BL":
+              R({
+                targetX: 0,
+                targetY: e.value.height / 2 - e.value.top,
+                targetW: e.value.width / 2 + e.value.left,
+                targetH: e.value.height / 2 + e.value.top,
+                side: "bl"
+              });
+              break;
+            default:
+              d.value.startX = 0, d.value.startY = 0, d.value.width = e.value.width, d.value.height = e.value.height;
+              break;
+          }
+          f.value = !0;
+        }
+    }
+    const Ne = g(() => {
+      const l = t.value.style.chart.layout.grid.graduations.steps, u = e.value.usableWidth / (l * 2), a = e.value.top, s = [];
+      for (let r = 0; r < l; r += 1)
+        s.push({
+          x: e.value.padding + u * r,
+          y: a + e.value.usableHeight * (r / l / 2),
+          height: e.value.usableHeight * (1 - r / l),
+          width: e.value.usableWidth * (1 - r / l),
+          opacity: K[Math.round((r + 1) / l * 20)]
+        });
+      return s;
+    }), M = g(() => {
+      let l = t.value.style.chart.layout.grid.xAxis.max, u = t.value.style.chart.layout.grid.xAxis.min, a = t.value.style.chart.layout.grid.yAxis.max, s = t.value.style.chart.layout.grid.yAxis.min;
+      return t.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(...B.value.flatMap((r) => r.series.map((y) => y.x))), u = Math.min(...B.value.flatMap((r) => r.series.map((y) => y.x)))), t.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...B.value.flatMap((r) => r.series.map((y) => y.y))), s = Math.min(...B.value.flatMap((r) => r.series.map((y) => y.y)))), {
+        x: {
+          max: l,
+          min: u
+        },
+        y: {
+          max: a,
+          min: s
+        }
+      };
+    }), N = h([]), B = g(() => X.dataset.map((l, u) => ({
+      ...l,
+      id: `cat_${u}_${C.value}`,
+      color: je(l.color) || ce.value[u] || se[u]
+    }))), Ae = g(() => B.value.filter((l) => !N.value.includes(l.id))), Be = g(() => B.value.map((l, u) => ({
+      ...l,
+      shape: l.shape || "circle",
+      series: l.series.map((a) => ({
+        ...a,
+        x: he(a.x),
+        y: ye(a.y),
+        xValue: a.x,
+        yValue: a.y,
+        quadrantSide: fe({ x: a.x, y: a.y }),
+        categoryName: l.name,
+        shape: l.shape,
+        color: l.color
+      }))
+    }))), q = g(() => (X.dataset.forEach((l, u) => {
+      l.series.forEach((a, s) => {
+        [null, void 0].includes(a.x) && F({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "x",
+          key: "series",
+          index: s
+        }), [null, void 0].includes(a.y) && F({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "y",
+          key: "series",
+          index: s
+        });
+      });
+    }), Ae.value.map((l, u) => ({
+      ...l,
+      shape: l.shape || "circle",
+      color: l.color || ce.value[u] || se[u],
+      series: l.series.map((a) => ({
+        ...a,
+        x: he(a.x),
+        y: ye(a.y),
+        xValue: a.x,
+        yValue: a.y,
+        quadrantSide: fe({ x: a.x, y: a.y }),
+        categoryName: l.name,
+        shape: l.shape,
+        color: l.color,
+        uid: qe()
+      }))
+    }))));
+    function he(l) {
+      if (l >= 0) {
+        const u = l / M.value.x.max;
+        return e.value.centerX + e.value.usableWidth / 2 * u;
+      } else {
+        const u = Math.abs(l) / Math.abs(M.value.x.min);
+        return e.value.centerX - e.value.usableWidth / 2 * u;
+      }
+    }
+    function ye(l) {
+      if (l >= 0) {
+        const u = l / M.value.y.max;
+        return e.value.centerY + (1 - e.value.usableHeight / 2 * u);
+      } else {
+        const u = Math.abs(l) / Math.abs(M.value.y.min);
+        return e.value.centerY - (1 - e.value.usableHeight / 2 * u);
+      }
+    }
+    const J = g(() => {
+      const l = q.value.flatMap((b) => b.series.map((T) => ({
+        x: T.xValue,
+        y: T.yValue,
+        name: T.name,
+        category: T.categoryName,
+        quadrantSide: T.quadrantSide,
+        sideName: t.value.style.chart.layout.labels.quadrantLabels[T.quadrantSide].text,
+        color: b.color,
+        shape: b.shape
+      }))), u = t.value.style.chart.layout.grid.xAxis.name || "x", a = t.value.style.chart.layout.grid.yAxis.name || "y", s = [t.value.translations.category, t.value.translations.item, u, a, t.value.translations.side], r = l.map((b) => [b.category, b.name, b.x, b.y, b.sideName || b.quadrantSide]), y = l.map((b) => ({
+        shape: b.shape,
+        color: b.color
+      }));
+      return { head: s, body: r, itsShapes: y, tableData: l };
+    }), j = g(() => {
+      const l = J.value.head, u = J.value.tableData.map((s) => [
+        {
+          shape: s.shape,
+          color: s.color,
+          name: s.category
+        },
+        s.name,
+        s.x,
+        s.y,
+        s.sideName || s.quadrantSide
+      ]), a = {
+        th: {
+          backgroundColor: t.value.table.th.backgroundColor,
+          color: t.value.table.th.color,
+          outline: t.value.table.th.outline
+        },
+        td: {
+          backgroundColor: t.value.table.td.backgroundColor,
+          color: t.value.table.td.color,
+          outline: t.value.table.td.outline
+        },
+        breakpoint: t.value.table.responsiveBreakpoint
+      };
+      return { head: l, body: u, config: a, colNames: l };
+    });
+    function le(l) {
+      N.value.includes(l) ? N.value = N.value.filter((a) => a !== l) : N.value.push(l);
+      const u = me();
+      ee("selectLegend", u);
+    }
+    const be = g(() => Be.value.map((l) => ({
+      name: l.name,
+      shape: l.shape,
+      color: l.color,
+      id: l.id,
+      opacity: N.value.includes(l.id) ? 0.5 : 1,
+      segregate: () => le(l.id),
+      isSegregated: N.value.includes(l.id)
+    }))), Fe = g(() => ({
+      cy: "quadrant-div-legend",
+      backgroundColor: t.value.style.chart.legend.backgroundColor,
+      color: t.value.style.chart.legend.color,
+      fontSize: t.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
+    }));
+    function fe(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 V = h(null), H = h(null), ae = h(null);
+    function pe(l, u, a) {
+      V.value = u.uid, H.value = {
+        color: l.color,
+        shape: l.shape
+      }, ae.value = {
+        datapoint: u,
+        seriesIndex: a,
+        series: q.value,
+        config: t.value
+      }, U.value = !0;
+      const s = t.value.style.chart.tooltip.customFormat;
+      if (lt(s) && at(() => s({
+        seriesIndex: a,
+        datapoint: u,
+        series: q.value,
+        config: t.value
+      })))
+        te.value = s({
+          seriesIndex: a,
+          datapoint: u,
+          series: q.value,
+          config: t.value
+        });
+      else {
+        let r = "";
+        u.quadrantSide && (r += `<div style="color:${t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].color};font-weight:${t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].bold ? "bold" : "400"}">${t.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 ${t.value.style.chart.tooltip.borderColor};margin-bottom:3px">${u.name}</div>`, r += `<div>${t.value.style.chart.layout.grid.xAxis.name ? t.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${u.xValue.toFixed(t.value.style.chart.tooltip.roundingValue)}</b></div>`, r += `<div>${t.value.style.chart.layout.grid.yAxis.name ? t.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${u.yValue.toFixed(t.value.style.chart.tooltip.roundingValue)}</b></div>`, te.value = `<div style="text-align:left;font-size:${t.value.style.chart.tooltip.fontSize}px">${r}</div>`;
+      }
+    }
+    function ge(l, u) {
+      const a = {
+        category: l.name,
+        shape: l.shape,
+        itemName: u.name,
+        x: u.xValue,
+        y: u.yValue,
+        quadrantSide: u.quadrantSide,
+        sideName: t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].text
+      };
+      ee("selectPlot", a);
+    }
+    function O(l) {
+      if (!l) return;
+      const u = q.value.flatMap((s) => s.series.filter((r) => r.quadrantSide === l).map((r) => ({
+        category: r.categoryName,
+        itemName: r.name,
+        x: r.xValue,
+        y: r.yValue
+      }))), a = {
+        quadrantSide: l,
+        sideName: t.value.style.chart.layout.labels.quadrantLabels[l].text,
+        items: [...u]
+      };
+      ee("selectSide", a);
+    }
+    const x = g(() => ({
+      TL: {
+        tl: {
+          x: e.value.left + e.value.usableWidth / 4 - 20,
+          y: 0,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.tl.color
+        },
+        tr: {
+          x: e.value.left + e.value.usableWidth / 4,
+          y: 0,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.tr.color
+        },
+        br: {
+          x: e.value.left + e.value.usableWidth / 4,
+          y: 20,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.br.color
+        },
+        bl: {
+          x: e.value.left + e.value.usableWidth / 4 - 20,
+          y: 20,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.bl.color
+        },
+        crosshairs: {
+          horizontal: `M ${e.value.left + e.value.usableWidth / 4 - 20},20 ${e.value.left + e.value.usableWidth / 4 + 20},20`,
+          vertical: `M ${e.value.left + e.value.usableWidth / 4},0 ${e.value.left + e.value.usableWidth / 4},40`
+        }
+      },
+      TR: {
+        tl: {
+          x: e.value.centerX + e.value.usableWidth / 4 - 20,
+          y: 0,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.tl.color
+        },
+        tr: {
+          x: e.value.centerX + e.value.usableWidth / 4,
+          y: 0,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.tr.color
+        },
+        br: {
+          x: e.value.centerX + e.value.usableWidth / 4,
+          y: 20,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.br.color
+        },
+        bl: {
+          x: e.value.centerX + e.value.usableWidth / 4 - 20,
+          y: 20,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.bl.color
+        },
+        crosshairs: {
+          horizontal: `M ${e.value.centerX + e.value.usableWidth / 4 - 20},20 ${e.value.centerX + e.value.usableWidth / 4 + 20},20`,
+          vertical: `M ${e.value.centerX + e.value.usableWidth / 4},0 ${e.value.centerX + e.value.usableWidth / 4},40`
+        }
+      },
+      BR: {
+        tl: {
+          x: e.value.centerX + e.value.usableWidth / 4 - 20,
+          y: e.value.centerY - 48,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.tl.color
+        },
+        tr: {
+          x: e.value.centerX + e.value.usableWidth / 4,
+          y: e.value.centerY - 48,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.tr.color
+        },
+        br: {
+          x: e.value.centerX + e.value.usableWidth / 4,
+          y: e.value.centerY - 28,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.br.color
+        },
+        bl: {
+          x: e.value.centerX + e.value.usableWidth / 4 - 20,
+          y: e.value.centerY - 28,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.bl.color
+        },
+        crosshairs: {
+          horizontal: `M ${e.value.centerX + e.value.usableWidth / 4 - 20},${e.value.centerY - 28} ${e.value.centerX + e.value.usableWidth / 4 + 20},${e.value.centerY - 28}`,
+          vertical: `M ${e.value.centerX + e.value.usableWidth / 4},${e.value.centerY - 48} ${e.value.centerX + e.value.usableWidth / 4},${e.value.centerY - 8}`
+        }
+      },
+      BL: {
+        tl: {
+          x: e.value.left + e.value.usableWidth / 4 - 20,
+          y: e.value.centerY - 48,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.tl.color
+        },
+        tr: {
+          x: e.value.left + e.value.usableWidth / 4,
+          y: e.value.centerY - 48,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.tr.color
+        },
+        br: {
+          x: e.value.left + e.value.usableWidth / 4,
+          y: e.value.centerY - 28,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.br.color
+        },
+        bl: {
+          x: e.value.left + e.value.usableWidth / 4 - 20,
+          y: e.value.centerY - 28,
+          fill: t.value.style.chart.layout.labels.quadrantLabels.bl.color
+        },
+        crosshairs: {
+          horizontal: `M ${e.value.left + e.value.usableWidth / 4 - 20},${e.value.centerY - 28} ${e.value.left + e.value.usableWidth / 4 + 20},${e.value.centerY - 28}`,
+          vertical: `M ${e.value.left + e.value.usableWidth / 4},${e.value.centerY - 48} ${e.value.left + e.value.usableWidth / 4},${e.value.centerY - 8}`
+        }
+      }
+    }));
+    function me() {
+      return q.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: t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].text
+        }))
+      }));
+    }
+    function xe() {
+      De(() => {
+        const l = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], u = J.value.head, a = J.value.body, s = l.concat([u]).concat(a), r = ut(s);
+        ot({ csvContent: r, title: t.value.style.chart.title.text || "vue-ui-quadrant" });
+      });
+    }
+    const I = h(!1);
+    function Pe(l) {
+      I.value = l, re.value += 1;
+    }
+    function $e() {
+      L.value.showTable = !L.value.showTable;
+    }
+    function ke() {
+      L.value.plotLabels.show = !L.value.plotLabels.show;
+    }
+    function Le() {
+      L.value.showTooltip = !L.value.showTooltip;
+    }
+    return ze({
+      getData: me,
+      generatePdf: ve,
+      generateCsv: xe,
+      generateImage: de,
+      toggleTable: $e,
+      toggleLabels: ke,
+      toggleTooltip: Le
+    }), (l, u) => (o(), i("div", {
+      class: z(`vue-ui-quadrant ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "quadrantChart",
+      ref: P,
+      id: `vue-ui-quadrant_${C.value}`,
+      style: k(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;${t.value.style.chart.title.text ? "" : "padding-top: 36px"};background:${t.value.style.chart.backgroundColor};${t.value.responsive ? "height: 100%" : ""}`)
+    }, [
+      t.value.style.chart.title.text ? (o(), i("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: ie,
+        style: k(`width:100%;background:${t.value.style.chart.backgroundColor};padding-bottom:12px`)
+      }, [
+        Z(it, {
+          config: {
+            title: {
+              cy: "quadrant-title",
+              ...t.value.style.chart.title
+            },
+            subtitle: {
+              cy: "quadrant-subtitle",
+              ...t.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"])
+      ], 4)) : c("", !0),
+      t.value.userOptions.show && E.value ? (o(), D(vt, {
+        ref_key: "details",
+        ref: We,
+        key: `user_options_${re.value}`,
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        isImaging: _(Ye),
+        isPrinting: _(Xe),
+        uid: C.value,
+        hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
+        hasPdf: t.value.userOptions.buttons.pdf,
+        hasImg: t.value.userOptions.buttons.img,
+        hasXls: t.value.userOptions.buttons.csv,
+        hasTable: t.value.userOptions.buttons.table,
+        hasLabel: t.value.userOptions.buttons.labels,
+        hasFullscreen: t.value.userOptions.buttons.fullscreen,
+        isFullscreen: I.value,
+        isTooltip: L.value.showTooltip,
+        titles: { ...t.value.userOptions.buttonTitles },
+        chartElement: P.value,
+        onToggleFullscreen: Pe,
+        onGeneratePdf: _(ve),
+        onGenerateCsv: xe,
+        onGenerateImage: _(de),
+        onToggleTable: $e,
+        onToggleLabels: ke,
+        onToggleTooltip: Le
+      }, Oe({ _: 2 }, [
+        l.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: $(() => [
+            S(l.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: $(() => [
+            S(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: $(() => [
+            S(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: $(() => [
+            S(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: $(() => [
+            S(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: $(() => [
+            S(l.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: $(({ toggleFullscreen: a, isFullscreen: s }) => [
+            S(l.$slots, "optionFullscreen", ue(oe({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : c("", !0),
+      E.value ? (o(), i("svg", {
+        key: 2,
+        xmlns: _(Ze),
+        class: z({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
+        viewBox: `${d.value.startX} ${d.value.startY} ${d.value.width} ${d.value.height}`,
+        style: k(`max-width:100%;overflow:${f.value ? "hidden" : "visible"};background:${t.value.style.chart.backgroundColor};color:${t.value.style.chart.color}`),
+        id: `svg_${C.value}`
+      }, [
+        v("defs", null, [
+          (o(!0), i(w, null, W(q.value, (a, s) => (o(), i("radialGradient", {
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%",
+            id: `quadrant_gradient_${C.value}_${s}`
+          }, [
+            v("stop", {
+              offset: "0%",
+              "stop-color": `${_(Ke)(a.color, 0.05)}${_(K)[t.value.style.chart.layout.areas.opacity]}`
+            }, null, 8, xt),
+            v("stop", {
+              offset: "100%",
+              "stop-color": a.color + _(K)[t.value.style.chart.layout.areas.opacity]
+            }, null, 8, $t)
+          ], 8, mt))), 256))
+        ]),
+        t.value.style.chart.layout.grid.graduations.show ? (o(), i("g", kt, [
+          (o(!0), i(w, null, W(Ne.value, (a) => (o(), i("rect", {
+            fill: t.value.style.chart.layout.grid.graduations.fill ? `${t.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": t.value.style.chart.layout.grid.graduations.strokeWidth,
+            stroke: t.value.style.chart.layout.grid.graduations.stroke,
+            rx: t.value.style.chart.layout.grid.graduations.roundingForce
+          }, null, 8, Lt))), 256))
+        ])) : c("", !0),
+        v("line", {
+          x1: e.value.left,
+          y1: e.value.centerY,
+          x2: e.value.right,
+          y2: e.value.centerY,
+          stroke: t.value.style.chart.layout.grid.stroke,
+          "stroke-width": t.value.style.chart.layout.grid.strokeWidth
+        }, null, 8, wt),
+        v("line", {
+          x1: e.value.centerX,
+          y1: e.value.top,
+          x2: e.value.centerX,
+          y2: e.value.bottom,
+          stroke: t.value.style.chart.layout.grid.stroke,
+          "stroke-width": t.value.style.chart.layout.grid.strokeWidth
+        }, null, 8, qt),
+        t.value.style.chart.layout.grid.showArrows ? (o(), i("g", _t, [
+          v("polygon", {
+            points: `${e.value.right - 8},${e.value.centerY - 6} ${e.value.right},${e.value.centerY} ${e.value.right - 8},${e.value.centerY + 6}`,
+            fill: t.value.style.chart.layout.grid.stroke,
+            stroke: "none"
+          }, null, 8, St),
+          v("polygon", {
+            points: `${e.value.left + 8},${e.value.centerY - 6} ${e.value.left},${e.value.centerY} ${e.value.left + 8},${e.value.centerY + 6}`,
+            fill: t.value.style.chart.layout.grid.stroke,
+            stroke: "none"
+          }, null, 8, Ct),
+          v("polygon", {
+            points: `${e.value.centerX - 6},${e.value.top + 8} ${e.value.centerX},${e.value.top} ${e.value.centerX + 6},${e.value.top + 8}`,
+            fill: t.value.style.chart.layout.grid.stroke,
+            stroke: "none"
+          }, null, 8, zt),
+          v("polygon", {
+            points: `${e.value.centerX - 6},${e.value.bottom - 8} ${e.value.centerX},${e.value.bottom} ${e.value.centerX + 6},${e.value.bottom - 8}`,
+            fill: t.value.style.chart.layout.grid.stroke,
+            stroke: "none"
+          }, null, 8, Tt)
+        ])) : c("", !0),
+        t.value.style.chart.layout.labels.quadrantLabels.show && !f.value ? (o(), i("g", Wt, [
+          t.value.style.chart.layout.labels.quadrantLabels.tl.text ? (o(), i("text", {
+            key: 0,
+            x: 0,
+            y: e.value.top - e.value.padding / 2,
+            "text-anchor": "start",
+            fill: t.value.style.chart.layout.labels.quadrantLabels.tl.color,
+            "font-size": t.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
+            style: k(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
+            onClick: u[0] || (u[0] = (a) => O("tl"))
+          }, m(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, Xt)) : c("", !0),
+          t.value.style.chart.layout.labels.quadrantLabels.tr.text ? (o(), i("text", {
+            key: 1,
+            x: e.value.width,
+            y: e.value.top - e.value.padding / 2,
+            "text-anchor": "end",
+            fill: t.value.style.chart.layout.labels.quadrantLabels.tr.color,
+            "font-size": t.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
+            style: k(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
+            onClick: u[1] || (u[1] = (a) => O("tr"))
+          }, m(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, Yt)) : c("", !0),
+          t.value.style.chart.layout.labels.quadrantLabels.br.text ? (o(), i("text", {
+            key: 2,
+            x: e.value.width,
+            y: e.value.bottom + e.value.padding * 0.7,
+            "text-anchor": "end",
+            fill: t.value.style.chart.layout.labels.quadrantLabels.br.color,
+            "font-size": t.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
+            style: k(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
+            onClick: u[2] || (u[2] = (a) => O("br"))
+          }, m(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, Mt)) : c("", !0),
+          t.value.style.chart.layout.labels.quadrantLabels.bl.text ? (o(), i("text", {
+            key: 3,
+            x: 0,
+            y: e.value.bottom + e.value.padding * 0.7,
+            "text-anchor": "start",
+            fill: t.value.style.chart.layout.labels.quadrantLabels.bl.color,
+            "font-size": t.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
+            style: k(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
+            onClick: u[3] || (u[3] = (a) => O("bl"))
+          }, m(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, Nt)) : c("", !0)
+        ])) : c("", !0),
+        t.value.style.chart.layout.labels.axisLabels.show ? (o(), i("g", At, [
+          v("text", {
+            x: e.value.centerX,
+            y: e.value.top - e.value.padding / 6,
+            "text-anchor": "middle",
+            "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
+            fill: t.value.style.chart.layout.labels.axisLabels.color.positive
+          }, m(M.value.y.max), 9, Bt),
+          v("text", {
+            x: e.value.centerX,
+            y: e.value.top - e.value.padding / 2,
+            "text-anchor": "middle",
+            "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
+            fill: t.value.style.chart.layout.labels.axisLabels.color.positive
+          }, m(t.value.style.chart.layout.grid.yAxis.name), 9, Ft),
+          v("text", {
+            x: e.value.centerX,
+            y: e.value.bottom + e.value.padding * 0.35,
+            "text-anchor": "middle",
+            "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
+            fill: t.value.style.chart.layout.labels.axisLabels.color.negative
+          }, m(M.value.y.min), 9, Pt),
+          v("text", {
+            id: `xLabelMin_${C.value}`,
+            "text-anchor": "middle",
+            "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
+            transform: `translate(${e.value.padding - t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(-90)`,
+            fill: t.value.style.chart.layout.labels.axisLabels.color.negative
+          }, m(M.value.x.min), 9, Rt),
+          v("text", {
+            id: `xLabelMax_${C.value}`,
+            "text-anchor": "middle",
+            "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
+            transform: `translate(${e.value.width - e.value.padding + t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(90)`,
+            fill: t.value.style.chart.layout.labels.axisLabels.color.positive
+          }, m(M.value.x.max), 9, Vt),
+          v("text", {
+            id: `xLabelMaxName_${C.value}`,
+            "text-anchor": "middle",
+            "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
+            transform: `translate(${e.value.width - t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(90)`,
+            fill: t.value.style.chart.layout.labels.axisLabels.color.positive
+          }, m(t.value.style.chart.layout.grid.xAxis.name), 9, Ht)
+        ])) : c("", !0),
+        t.value.style.chart.layout.areas.show ? (o(), i("g", Ot, [
+          (o(!0), i(w, null, W(q.value, (a, s) => (o(), i("g", null, [
+            a.series.length > 2 ? (o(), i("polygon", {
+              key: 0,
+              "data-cy-quadrant-area": "",
+              fill: t.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${C.value}_${s})` : `${a.color}${_(K)[t.value.style.chart.layout.areas.opacity]}`,
+              points: _(et)(a)
+            }, null, 8, It)) : c("", !0)
+          ]))), 256))
+        ])) : c("", !0),
+        v("g", null, [
+          v("rect", {
+            onClick: u[4] || (u[4] = (a) => Y("TL")),
+            x: e.value.left,
+            y: e.value.top,
+            width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
+            height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
+            fill: "transparent",
+            class: z({ "vue-data-ui-zoom-plus": !f.value, "vue-data-ui-zoom-minus": f.value })
+          }, null, 10, Dt),
+          v("rect", {
+            onClick: u[5] || (u[5] = (a) => Y("TR")),
+            x: e.value.centerX,
+            y: e.value.top,
+            width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
+            height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
+            fill: "transparent",
+            class: z({ "vue-data-ui-zoom-plus": !f.value, "vue-data-ui-zoom-minus": f.value })
+          }, null, 10, Et),
+          v("rect", {
+            onClick: u[6] || (u[6] = (a) => Y("BR")),
+            x: e.value.centerX,
+            y: e.value.centerY,
+            width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
+            height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
+            fill: "transparent",
+            class: z({ "vue-data-ui-zoom-plus": !f.value, "vue-data-ui-zoom-minus": f.value })
+          }, null, 10, Ut),
+          v("rect", {
+            onClick: u[7] || (u[7] = (a) => Y("BL")),
+            x: e.value.left,
+            y: e.value.centerY,
+            width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
+            height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
+            fill: "transparent",
+            class: z({ "vue-data-ui-zoom-plus": !f.value, "vue-data-ui-zoom-minus": f.value })
+          }, null, 10, Gt)
+        ]),
+        t.value.style.chart.layout.labels.plotLabels.showAsTag ? (o(), i(w, { key: 6 }, [
+          L.value.plotLabels.show ? (o(), i("g", jt, [
+            (o(!0), i(w, null, W(q.value, (a, s) => (o(), i(w, null, [
+              (o(!0), i(w, null, W(a.series, (r) => (o(), i("foreignObject", {
+                style: { overflow: "visible" },
+                height: "10",
+                width: "100",
+                x: r.x - 50,
+                y: r.y - t.value.style.chart.layout.labels.plotLabels.fontSize,
+                onMouseover: (y) => pe(a, r, s),
+                onMouseleave: u[9] || (u[9] = (y) => {
+                  U.value = !1, V.value = null, H.value = null;
+                }),
+                onClick: (y) => ge(a, r)
+              }, [
+                v("div", {
+                  style: k(`color:${_(tt)(a.color)};margin: 0 auto; font-size:${t.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: ${t.value.style.chart.layout.labels.plotLabels.fontSize * 1.5}px`)
+                }, m(r.name), 5)
+              ], 40, Zt))), 256))
+            ], 64))), 256))
+          ])) : c("", !0)
+        ], 64)) : (o(), i(w, { key: 5 }, [
+          (o(!0), i(w, null, W(q.value, (a, s) => (o(), i("g", null, [
+            (o(!0), i(w, null, W(a.series, (r) => (o(), D(_e, {
+              color: a.color,
+              isSelected: V.value && r.uid === V.value,
+              plot: r,
+              radius: t.value.style.chart.layout.plots.radius / (f.value ? 1.5 : 1),
+              shape: a.shape,
+              stroke: t.value.style.chart.layout.plots.outline ? t.value.style.chart.layout.plots.outlineColor : "none",
+              strokeWidth: t.value.style.chart.layout.plots.outlineWidth,
+              onMouseover: (y) => pe(a, r, s),
+              onMouseleave: u[8] || (u[8] = (y) => {
+                U.value = !1, V.value = null, H.value = null;
+              }),
+              onClick: (y) => ge(a, r)
+            }, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseover", "onClick"]))), 256))
+          ]))), 256)),
+          L.value.plotLabels.show ? (o(), i("g", Qt, [
+            (o(!0), i(w, null, W(q.value, (a) => (o(), i("g", null, [
+              (o(!0), i(w, null, W(a.series, (s) => (o(), i("text", {
+                x: s.x,
+                y: s.y + t.value.style.chart.layout.labels.plotLabels.offsetY + t.value.style.chart.layout.plots.radius,
+                "text-anchor": "middle",
+                "font-size": t.value.style.chart.layout.labels.plotLabels.fontSize / (f.value ? 1.5 : 1),
+                fill: t.value.style.chart.layout.labels.plotLabels.color
+              }, m(s.name), 9, Jt))), 256))
+            ]))), 256))
+          ])) : c("", !0)
+        ], 64)),
+        f.value ? (o(), i("g", Kt, [
+          n.value === "TL" ? (o(), i("polygon", {
+            key: 0,
+            points: `${e.value.left - 1},${e.value.centerY} ${e.value.centerX},${e.value.centerY} ${e.value.centerX},${e.value.top - 1} ${e.value.right},${e.value.top - 1} ${e.value.right},${e.value.bottom} ${e.value.left - 1},${e.value.bottom} ${e.value.left - 1},${e.value.centerY}`,
+            fill: t.value.style.chart.backgroundColor,
+            style: { opacity: "1" }
+          }, null, 8, el)) : c("", !0),
+          n.value === "TR" ? (o(), i("polygon", {
+            key: 1,
+            points: `${e.value.left},${e.value.top - 1} ${e.value.centerX},${e.value.top - 1} ${e.value.centerX},${e.value.centerY} ${e.value.right + 1},${e.value.centerY} ${e.value.right + 1},${e.value.bottom} ${e.value.left},${e.value.bottom} ${e.value.left},${e.value.top - 1}`,
+            fill: t.value.style.chart.backgroundColor,
+            style: { opacity: "1" }
+          }, null, 8, tl)) : c("", !0),
+          n.value === "BR" ? (o(), i("polygon", {
+            key: 2,
+            points: `${e.value.left},${e.value.top} ${e.value.right + 1},${e.value.top} ${e.value.right + 1},${e.value.centerY} ${e.value.centerX},${e.value.centerY} ${e.value.centerX},${e.value.bottom + 1} ${e.value.left},${e.value.bottom + 1} ${e.value.left},${e.value.top}`,
+            fill: t.value.style.chart.backgroundColor,
+            style: { opacity: "1" }
+          }, null, 8, ll)) : c("", !0),
+          n.value === "BL" ? (o(), i("polygon", {
+            key: 3,
+            points: `${e.value.left - 1},${e.value.top} ${e.value.right},${e.value.top} ${e.value.right},${e.value.bottom + 1} ${e.value.centerX},${e.value.bottom + 1} ${e.value.centerX},${e.value.centerY} ${e.value.left - 1},${e.value.centerY} ${e.value.left - 1},${e.value.top}`,
+            fill: t.value.style.chart.backgroundColor,
+            style: { opacity: "1" }
+          }, null, 8, al)) : c("", !0)
+        ])) : c("", !0),
+        n.value && !Q.value ? (o(), i("g", ul, [
+          v("text", {
+            x: A.value.x,
+            y: A.value.y - A.value.fontSize / 1.5,
+            "font-size": A.value.fontSize / 1.5,
+            fill: A.value.fill,
+            "text-anchor": "middle",
+            "font-weight": A.value.bold ? "bold" : "normal"
+          }, m(A.value.text), 9, ol)
+        ])) : c("", !0),
+        f.value && n.value ? (o(), i("g", sl, [
+          v("rect", {
+            x: x.value[n.value].tl.x,
+            y: x.value[n.value].tl.y,
+            height: "20",
+            width: "20",
+            fill: x.value[n.value].tl.fill,
+            style: k(`cursor: pointer; opacity: ${n.value === "TL" ? 1 : 0.2}`),
+            onClick: u[10] || (u[10] = (a) => Y("TL")),
+            class: z({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": n.value !== "TL" })
+          }, null, 14, rl),
+          v("rect", {
+            x: x.value[n.value].tr.x,
+            y: x.value[n.value].tr.y,
+            height: "20",
+            width: "20",
+            fill: x.value[n.value].tr.fill,
+            style: k(`cursor: pointer; opacity: ${n.value === "TR" ? 1 : 0.2}`),
+            onClick: u[11] || (u[11] = (a) => Y("TR")),
+            class: z({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": n.value !== "TR" })
+          }, null, 14, il),
+          v("rect", {
+            x: x.value[n.value].br.x,
+            y: x.value[n.value].br.y,
+            height: "20",
+            width: "20",
+            fill: x.value[n.value].br.fill,
+            style: k(`cursor: pointer; opacity: ${n.value === "BR" ? 1 : 0.2}`),
+            onClick: u[12] || (u[12] = (a) => Y("BR")),
+            class: z({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": n.value !== "BR" })
+          }, null, 14, nl),
+          v("rect", {
+            x: x.value[n.value].bl.x,
+            y: x.value[n.value].bl.y,
+            height: "20",
+            width: "20",
+            fill: x.value[n.value].bl.fill,
+            style: k(`cursor: pointer; opacity: ${n.value === "BL" ? 1 : 0.2}`),
+            onClick: u[13] || (u[13] = (a) => Y("BL")),
+            class: z({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": n.value !== "BL" })
+          }, null, 14, vl),
+          v("path", {
+            class: "vue-ui-quadrant-minimap-crosshairs",
+            stroke: t.value.style.chart.backgroundColor,
+            "stroke-width": 1,
+            d: x.value[n.value].crosshairs.horizontal
+          }, null, 8, dl),
+          v("path", {
+            class: "vue-ui-quadrant-minimap-crosshairs",
+            stroke: t.value.style.chart.backgroundColor,
+            "stroke-width": 1,
+            d: x.value[n.value].crosshairs.vertical
+          }, null, 8, cl)
+        ])) : c("", !0),
+        S(l.$slots, "svg", { svg: e.value }, void 0, !0)
+      ], 14, gt)) : c("", !0),
+      E.value ? c("", !0) : (o(), D(yt, {
+        key: 3,
+        config: {
+          type: "quadrant",
+          style: {
+            backgroundColor: t.value.style.chart.backgroundColor,
+            quadrant: {
+              grid: {
+                color: t.value.style.chart.layout.grid.stroke
+              },
+              plots: {
+                color: t.value.style.chart.layout.grid.stroke,
+                radius: 1
+              }
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      v("div", {
+        ref_key: "chartLegend",
+        ref: ne
+      }, [
+        t.value.style.chart.legend.show ? (o(), D(ct, {
+          key: 0,
+          legendSet: be.value,
+          config: Fe.value,
+          onClickMarker: u[14] || (u[14] = ({ legend: a }) => le(a.id))
+        }, {
+          item: $(({ legend: a }) => [
+            v("div", {
+              "data-cy-legend-item": "",
+              onClick: (s) => le(a.id),
+              style: k(`opacity:${N.value.includes(a.id) ? 0.5 : 1}`)
+            }, m(a.name), 13, hl)
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config"])) : S(l.$slots, "legend", {
+          key: 1,
+          legend: be.value
+        }, void 0, !0)
+      ], 512),
+      Z(dt, {
+        show: L.value.showTooltip && U.value,
+        backgroundColor: t.value.style.chart.tooltip.backgroundColor,
+        color: t.value.style.chart.tooltip.color,
+        borderRadius: t.value.style.chart.tooltip.borderRadius,
+        borderColor: t.value.style.chart.tooltip.borderColor,
+        borderWidth: t.value.style.chart.tooltip.borderWidth,
+        fontSize: t.value.style.chart.tooltip.fontSize,
+        backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
+        parent: P.value,
+        content: te.value,
+        isCustom: t.value.style.chart.tooltip.customFormat && typeof t.value.style.chart.tooltip.customFormat == "function"
+      }, {
+        "tooltip-before": $(() => [
+          S(l.$slots, "tooltip-before", ue(oe({ ...ae.value })), void 0, !0)
+        ]),
+        "tooltip-after": $(() => [
+          S(l.$slots, "tooltip-after", ue(oe({ ...ae.value })), void 0, !0)
+        ]),
+        default: $(() => [
+          t.value.style.chart.tooltip.showShape ? (o(), i("svg", yl, [
+            Z(_e, {
+              plot: { x: 10, y: 10 },
+              shape: H.value.shape,
+              color: H.value.color,
+              radius: 8,
+              stroke: t.value.style.chart.layout.plots.outline ? t.value.style.chart.layout.plots.outlineColor : "none",
+              "stroke-width": t.value.style.chart.layout.plots.outlineWidth
+            }, null, 8, ["shape", "color", "stroke", "stroke-width"])
+          ])) : c("", !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "parent", "content", "isCustom"]),
+      E.value ? (o(), D(bt, {
+        key: 4,
+        hideDetails: "",
+        config: {
+          open: L.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: t.value.style.chart.backgroundColor,
+            color: t.value.style.chart.color
+          },
+          head: {
+            backgroundColor: t.value.style.chart.backgroundColor,
+            color: t.value.style.chart.color
+          }
+        }
+      }, {
+        content: $(() => [
+          Z(ht, {
+            colNames: j.value.colNames,
+            head: j.value.head,
+            body: j.value.body,
+            config: j.value.config,
+            title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? ` : ${t.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: u[15] || (u[15] = (a) => L.value.showTable = !1)
+          }, {
+            th: $(({ th: a }) => [
+              Ie(m(a), 1)
+            ]),
+            td: $(({ td: a }) => [
+              v("div", {
+                innerHTML: a.name || a
+              }, null, 8, bl)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"])
+        ]),
+        _: 1
+      }, 8, ["config"])) : c("", !0)
+    ], 14, pt));
+  }
+}, Tl = /* @__PURE__ */ ft(fl, [["__scopeId", "data-v-a556d197"]]);
+export {
+  Tl as default
+};