vue-data-ui 3.15.12 → 3.16.1

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

@@ -0,0 +1,1759 @@
+import { defineAsyncComponent as R, computed as m, ref as h, toRefs as sl, watch as Fe, shallowRef as xt, onMounted as nl, onBeforeUnmount as rl, openBlock as n, createElementBlock as r, unref as v, normalizeStyle as _, normalizeClass as O, createElementVNode as d, toDisplayString as w, createBlock as B, createCommentVNode as y, withCtx as p, renderSlot as g, normalizeProps as T, guardReactiveProps as q, createSlots as $t, createVNode as de, Fragment as A, renderList as N, mergeProps as kt, Teleport as il, resolveDynamicComponent as vl, createTextVNode as wt, nextTick as Ce } from "vue";
+import { j as Lt, t as dl, m as cl, p as Ie, o as hl, q as ae, n as yl, s as bl, ak as fl, k as D, l as H, X as pl, u as Se, v as gl, al as ml, Z as xl, W as $l, a0 as kl, a1 as wl, T as Ll, U as Cl } from "./lib-DBptbyyI.js";
+import { t as Sl, u as _l } from "./useResponsive-DfdjqQps.js";
+import { u as Tl } from "./useConfig-DO94Aj5s.js";
+import { u as ql, B as Al } from "./BaseScanner-BhhkKVoj.js";
+import { u as zl } from "./usePrinter-CEpYU3r5.js";
+import { u as Wl } from "./useSvgExport-ByUukOZt.js";
+import { u as Xl } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as Re } from "./useNestedProp-Bf5XFbs8.js";
+import { u as Pl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Yl } from "./useChartAccessibility-9icAAmYg.js";
+import Ml from "./img-LXxMLmCg.js";
+import Ol from "./Title-BeMKE1cj.js";
+import { _ as Ct } from "./Shape-BKRUOeKk.js";
+import Bl from "./vue_ui_quadrant-DjRs--Uz.js";
+import Nl from "./Legend-CS7Xo5LK.js";
+import { A as Vl } from "./A11yDataTable-KcVAX2cP.js";
+import { B as Fl } from "./BaseLegendToggle-BQVIawmA.js";
+import { _ as Il } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative" } }, Ul = ["xmlns", "aria-describedby", "viewBox", "id"], Ql = ["x", "y", "width", "height"], Gl = ["id"], Kl = ["stop-color"], jl = ["stop-color"], Jl = { key: 1 }, Zl = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], ea = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ta = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], la = { key: 2 }, aa = ["points", "fill"], oa = ["points", "fill"], ua = ["points", "fill"], sa = ["points", "fill"], na = { key: 3 }, ra = ["y", "fill", "font-size"], ia = ["x", "y", "fill", "font-size"], va = ["x", "y", "fill", "font-size"], da = ["y", "fill", "font-size"], ca = { key: 4 }, ha = ["x", "y", "font-size", "fill"], ya = ["x", "y", "font-size", "fill"], ba = ["x", "y", "font-size", "fill"], fa = ["id", "font-size", "transform", "fill"], pa = ["id", "font-size", "transform", "fill"], ga = ["id", "font-size", "transform", "fill"], ma = { key: 5 }, xa = ["fill", "points"], $a = ["x", "y", "width", "height"], ka = ["x", "y", "width", "height"], wa = ["x", "y", "width", "height"], La = ["x", "y", "width", "height"], Ca = ["x", "y", "onMouseenter", "onMouseleave", "onClick"], Sa = ["data-a11y-plot-id", "cx", "cy", "r", "aria-label"], _a = ["data-a11y-plot-id", "cx", "cy", "r", "aria-label"], Ta = {
+  key: 0,
+  style: { "pointer-events": "none" }
+}, qa = ["x", "y", "font-size", "fill"], Aa = ["x", "y", "font-size", "fill", "innerHTML"], za = { key: 0 }, Wa = ["x", "y", "onMouseover", "onMouseleave", "onClick"], Xa = {
+  key: 8,
+  class: "vue-ui-dna"
+}, Pa = ["points", "fill"], Ya = ["points", "fill"], Ma = ["points", "fill"], Oa = ["points", "fill"], Ba = { key: 9 }, Na = ["x", "y", "font-size", "fill", "font-weight"], Va = { key: 10 }, Fa = ["x", "y", "fill"], Ia = ["x", "y", "fill"], Ra = ["x", "y", "fill"], Da = ["x", "y", "fill"], Ha = ["stroke", "d"], Ea = ["stroke", "d"], Ua = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Qa = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Ga = ["id"], Ka = ["onClick"], ja = {
+  key: 0,
+  height: "14",
+  width: "14",
+  viewBox: "0 0 20 20"
+}, Ja = ["innerHTML"], Za = {
+  __name: "vue-ui-quadrant",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectPlot", "selectSide", "selectLegend", "copyAlt"],
+  setup(St, { expose: _t, emit: Tt }) {
+    const qt = R(() => import("./Tooltip-Bf-kM3_A.js")), At = R(() => import("./BaseIcon-Cb3zzG6s.js")), zt = R(() => import("./vue-ui-accordion-nvggWcGN.js")), Wt = R(() => import("./DataTable-DT2kIdQ6.js")), Xt = R(() => import("./PenAndPaper-Ct3qJ4lA.js")), Pt = R(() => import("./UserOptions-rW2fRf3V.js")), Yt = R(() => import("./PackageVersion-DPO-OOVI.js")), Mt = R(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_quadrant: Ot } = Tl(), { isThemeValid: Bt, warnInvalidTheme: Nt } = Xl(), M = St, De = m(() => !!M.dataset && M.dataset.length), $ = h(Lt()), ce = Tt, he = h(!1), _e = h(""), He = h(0), x = h(!1), V = h(null), Ee = h(null), Ue = h(null), Qe = h(null), Ge = h(null), Ke = h(0), je = h(0), Je = h(0), Ze = h(!1), oe = h(null), Te = h(null), ye = h(!1), be = h(!1), j = h(null), fe = h(null), et = h({ x: 0, y: 0 }), qe = h("pointer"), pe = h(!1), e = h(ze()), X = m(() => e.value.userOptions.useCursorPointer), Vt = m(() => ({
+      defaultConfig: {
+        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"
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: ge, FINAL_DATASET: tt } = ql({
+      ...sl(M),
+      FINAL_CONFIG: e,
+      prepareConfig: ze,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Ce(), k.value.showTable = e.value.table.show;
+        });
+      },
+      skeletonDataset: M.config?.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: dl({
+        defaultConfig: e.value,
+        userConfig: Vt.value
+      })
+    }), { userOptionsVisible: Ae, setUserOptionsVisibility: lt, keepUserOptionState: at } = Pl({ config: e.value }), { svgRef: E } = Yl({ config: e.value.style.chart.title });
+    function ze() {
+      const l = Re({
+        userConfig: M.config,
+        defaultConfig: Ot
+      }), o = l.theme;
+      if (!o) return l;
+      if (!Bt.value(l))
+        return Nt(l), l;
+      const a = Re({
+        userConfig: Bl[o] || M.config,
+        defaultConfig: l
+      }), s = Re({
+        userConfig: M.config,
+        defaultConfig: a
+      });
+      return {
+        ...s,
+        customPalette: s.customPalette.length ? s.customPalette : cl[o] || Ie
+      };
+    }
+    Fe(() => M.config, (l) => {
+      e.value = ze(), Ae.value = !e.value.userOptions.showOnChartHover, ot(), Ke.value += 1, je.value += 1, Je.value += 1, k.value.plotLabels.show = e.value.style.chart.layout.labels.plotLabels.show, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const F = xt(null), J = xt(null), Z = m(() => e.value.debug);
+    function ot() {
+      if (hl(M.dataset) ? ae({
+        componentName: "VueUiQuadrant",
+        type: "dataset",
+        debug: Z.value
+      }) : M.dataset.forEach((l, o) => {
+        [null, void 0].includes(l.name) && ae({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "name",
+          index: o,
+          debug: Z.value
+        }), [null, void 0].includes(l.series) ? ae({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "series",
+          index: o,
+          debug: Z.value
+        }) : l.series.forEach((a, s) => {
+          [null, void 0].includes(a.name) && ae({
+            componentName: "VueUiQuadrant",
+            type: "datasetSerieAttribute",
+            property: "name",
+            key: "series",
+            index: s,
+            debug: Z.value
+          });
+        });
+      }), e.value.responsive) {
+        const l = Sl(() => {
+          const { width: o, height: a } = _l({
+            chart: V.value,
+            title: e.value.style.chart.title.text ? Ee.value : null,
+            legend: e.value.style.chart.legend.show ? Ue.value : null,
+            source: Qe.value,
+            noTitle: Ge.value
+          });
+          L.value = 48, requestAnimationFrame(() => {
+            t.value.height = a, t.value.usableHeight = a - L.value * 2, t.value.width = o, t.value.usableWidth = o - L.value * 2, t.value.top = L.value, t.value.left = L.value, t.value.right = o - L.value, t.value.bottom = a - L.value, t.value.centerX = o / 2, t.value.centerY = a - a / 2, t.value.padding = L.value;
+          });
+        });
+        F.value && (J.value && F.value.unobserve(J.value), F.value.disconnect()), F.value = new ResizeObserver(l), J.value = V.value.parentNode, F.value.observe(J.value);
+      }
+    }
+    nl(() => {
+      Ze.value = !0, ot();
+    }), rl(() => {
+      F.value && (J.value && F.value.unobserve(J.value), F.value.disconnect());
+    });
+    const { isPrinting: We, isImaging: Xe, generatePdf: ut, generateImage: st } = zl({
+      elementId: `vue-ui-quadrant_${$.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-quadrant",
+      options: e.value.userOptions.print
+    }), Ft = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), nt = m(() => yl(e.value.customPalette)), k = h({
+      plotLabels: {
+        show: e.value.style.chart.layout.labels.plotLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), L = h(48), t = h({
+      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
+    }), b = h({
+      ...JSON.parse(JSON.stringify(t.value)),
+      startX: 0,
+      startY: 0
+    });
+    Fe(() => t.value, (l) => {
+      l && (b.value = {
+        ...JSON.parse(JSON.stringify(t.value)),
+        startX: 0,
+        startY: 0
+      });
+    }, { deep: !0 });
+    const f = h(null), U = m(() => {
+      switch (f.value) {
+        case "TL":
+          return {
+            x: b.value.startX + b.value.width / 2,
+            y: b.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: b.value.startX + b.value.width / 2,
+            y: b.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: b.value.startX + b.value.width / 2,
+            y: b.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: b.value.startX + b.value.width / 2,
+            y: b.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 };
+      }
+    }), It = h(null), me = h(!1);
+    function ue({ targetX: l, targetY: o, targetW: a, targetH: s, side: u }) {
+      f.value && re(u);
+      const i = {
+        x: l - b.value.startX,
+        y: o - b.value.startY,
+        w: a - b.value.width,
+        h: s - b.value.height
+      }, c = e.value.zoomAnimationFrames;
+      let Y = 0;
+      function we() {
+        me.value = !0, b.value.startX += i.x / c, b.value.startY += i.y / c, b.value.width += i.w / c, b.value.height += i.h / c, Y += 1, Y < c ? It.value = requestAnimationFrame(we) : me.value = !1;
+      }
+      we();
+    }
+    function I(l) {
+      if (!me.value)
+        if (x.value && f.value === l)
+          ue({
+            targetX: 0,
+            targetY: 0,
+            targetW: t.value.width,
+            targetH: t.value.height
+          }), f.value = null, x.value = !1;
+        else {
+          switch (f.value = l, l) {
+            case "TL":
+              ue({
+                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":
+              ue({
+                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":
+              ue({
+                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":
+              ue({
+                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:
+              b.value.startX = 0, b.value.startY = 0, b.value.width = t.value.width, b.value.height = t.value.height;
+              break;
+          }
+          x.value = !0;
+        }
+    }
+    const Rt = m(() => {
+      const l = e.value.style.chart.layout.grid.graduations.steps, o = t.value.usableWidth / (l * 2), a = t.value.top, s = [];
+      for (let u = 0; u < l; u += 1)
+        s.push({
+          x: t.value.padding + o * u,
+          y: a + t.value.usableHeight * (u / l / 2),
+          height: t.value.usableHeight * (1 - u / l),
+          width: t.value.usableWidth * (1 - u / l),
+          opacity: Math.round((u + 1) / l * 20)
+        });
+      return s;
+    }), z = m(() => {
+      let l = e.value.style.chart.layout.grid.xAxis.max, o = e.value.style.chart.layout.grid.xAxis.min, a = e.value.style.chart.layout.grid.yAxis.max, s = e.value.style.chart.layout.grid.yAxis.min;
+      return e.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(...ee.value.flatMap((u) => u.series.map((i) => i.x))), o = Math.min(...ee.value.flatMap((u) => u.series.map((i) => i.x)))), e.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...ee.value.flatMap((u) => u.series.map((i) => i.y))), s = Math.min(...ee.value.flatMap((u) => u.series.map((i) => i.y)))), {
+        x: {
+          max: l,
+          min: o
+        },
+        y: {
+          max: a,
+          min: s
+        }
+      };
+    }), C = h([]), ee = m(() => tt.value.map((l, o) => ({
+      ...l,
+      series: fl({
+        data: l.series,
+        threshold: e.value.downsample.threshold
+      }),
+      id: `cat_${o}_${$.value}`,
+      color: bl(l.color) || nt.value[o] || Ie[o]
+    }))), Pe = m(() => ee.value.filter((l) => !C.value.includes(l.id))), Dt = m(() => ee.value.map((l, o) => ({
+      ...l,
+      shape: l.shape || "circle",
+      series: l.series.map((a) => ({
+        ...a,
+        x: rt(a.x),
+        y: it(a.y),
+        xValue: a.x,
+        yValue: a.y,
+        quadrantSide: dt({ x: a.x, y: a.y }),
+        categoryName: l.name,
+        shape: l.shape,
+        color: l.color
+      }))
+    }))), W = m(() => (tt.value.forEach((l, o) => {
+      l.series.forEach((a, s) => {
+        [null, void 0].includes(a.x) && ae({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "x",
+          key: "series",
+          index: s,
+          debug: Z.value
+        }), [null, void 0].includes(a.y) && ae({
+          componentName: "VueUiQuadrant",
+          type: "datasetSerieAttribute",
+          property: "y",
+          key: "series",
+          index: s,
+          debug: Z.value
+        });
+      });
+    }), Pe.value.map((l, o) => ({
+      ...l,
+      shape: l.shape || "circle",
+      color: l.color || nt.value[o] || Ie[o],
+      series: l.series.map((a) => ({
+        ...a,
+        x: rt(a.x),
+        y: it(a.y),
+        xValue: a.x,
+        yValue: a.y,
+        quadrantSide: dt({ x: a.x, y: a.y }),
+        categoryName: l.name,
+        shape: l.shape,
+        color: l.color,
+        uid: Lt()
+      }))
+    }))));
+    function rt(l) {
+      if (l >= 0) {
+        const o = l / z.value.x.max;
+        return t.value.centerX + t.value.usableWidth / 2 * o;
+      } else {
+        const o = Math.abs(l) / Math.abs(z.value.x.min);
+        return t.value.centerX - t.value.usableWidth / 2 * o;
+      }
+    }
+    function it(l) {
+      if (l >= 0) {
+        const o = l / z.value.y.max;
+        return t.value.centerY + (1 - t.value.usableHeight / 2 * o);
+      } else {
+        const o = Math.abs(l) / Math.abs(z.value.y.min);
+        return t.value.centerY - (1 - t.value.usableHeight / 2 * o);
+      }
+    }
+    const xe = m(() => {
+      const l = W.value.flatMap((c) => c.series.map((Y) => ({
+        x: Y.xValue,
+        y: Y.yValue,
+        name: Y.name,
+        category: Y.categoryName,
+        quadrantSide: Y.quadrantSide,
+        sideName: e.value.style.chart.layout.labels.quadrantLabels[Y.quadrantSide].text,
+        color: c.color,
+        shape: c.shape
+      }))), o = e.value.style.chart.layout.grid.xAxis.name || "x", a = e.value.style.chart.layout.grid.yAxis.name || "y", s = [e.value.translations.category, e.value.translations.item, o, a, e.value.translations.side], u = l.map((c) => [c.category, c.name, c.x, c.y, c.sideName || c.quadrantSide]), i = l.map((c) => ({
+        shape: c.shape,
+        color: c.color
+      }));
+      return { head: s, body: u, itsShapes: i, tableData: l };
+    }), te = m(() => {
+      const l = xe.value.head, o = xe.value.tableData.map((u) => [
+        {
+          shape: u.shape,
+          color: u.color,
+          name: u.category
+        },
+        u.name,
+        D(
+          e.value.style.chart.layout.labels.plotLabels.x.formatter,
+          u.x,
+          H({
+            v: u.x,
+            r: e.value.style.chart.layout.labels.plotLabels.rounding
+          })
+        ),
+        D(
+          e.value.style.chart.layout.labels.plotLabels.y.formatter,
+          u.y,
+          H({
+            v: u.y,
+            r: e.value.style.chart.layout.labels.plotLabels.rounding
+          })
+        ),
+        u.sideName || u.quadrantSide
+      ]), a = o.map((u) => u.map((i, c) => c === 0 ? i.name ?? "" : i)), s = {
+        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: o, a11yBody: a, config: s, colNames: l };
+    });
+    function Ht() {
+      C.value.length ? C.value = [] : Q.value.forEach((l) => {
+        C.value.push(l.id);
+      });
+    }
+    function se(l) {
+      C.value.includes(l) ? C.value = C.value.filter((a) => a !== l) : C.value.push(l);
+      const o = ct();
+      ce("selectLegend", o);
+    }
+    const Q = m(() => Dt.value.map((l) => ({
+      name: l.name,
+      shape: l.shape,
+      color: l.color,
+      id: l.id,
+      opacity: C.value.includes(l.id) ? 0.5 : 1,
+      segregate: () => se(l.id),
+      isSegregated: C.value.includes(l.id)
+    })));
+    function vt(l) {
+      if (!Q.value.length)
+        return e.value.debug && console.warn("VueUiQuadrant - There are no series to show."), null;
+      const o = Q.value.find((a) => a.name === l);
+      return o || (e.value.debug && console.warn(`VueUiQuadrant - Series name not found "${l}"`), null);
+    }
+    function Et(l) {
+      const o = vt(l);
+      o !== null && C.value.includes(o.id) && se(o.id);
+    }
+    function Ut(l) {
+      const o = vt(l);
+      o !== null && (C.value.includes(o.id) || se(o.id));
+    }
+    const Qt = m(() => ({
+      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 dt(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 G = h(null), ne = h(null), Ye = h(null);
+    function Me() {
+      G.value = null, ne.value = null, j.value = null, fe.value = null, he.value = !1;
+    }
+    function Gt(l) {
+      if (!E.value || !l) return;
+      const o = `[data-a11y-plot-id="${l}"]`, a = E.value.querySelector(o);
+      if (!a) return;
+      const s = a.getBoundingClientRect();
+      et.value = {
+        x: s.left + s.width / 2,
+        y: s.top + s.height / 2
+      };
+    }
+    function $e(l, o, a, s = "pointer", u = null) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: a }), G.value = o.uid, ne.value = {
+        color: l.color,
+        shape: l.shape
+      }, qe.value = s, j.value = u, fe.value = o.uid, Ye.value = {
+        datapoint: o,
+        seriesIndex: a,
+        series: W.value,
+        config: e.value
+      };
+      const i = e.value.style.chart.tooltip.customFormat;
+      if (Ll(i) && Cl(() => i({
+        seriesIndex: a,
+        datapoint: o,
+        series: W.value,
+        config: e.value
+      })))
+        _e.value = i({
+          seriesIndex: a,
+          datapoint: o,
+          series: W.value,
+          config: e.value
+        });
+      else {
+        let c = "";
+        o.quadrantSide && (c += `<div style="color:${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].color};font-weight:${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].bold ? "bold" : "400"}">${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text}</div>`), c += `<div>${l.name}</div>`, c += `<div style="padding-bottom:6px;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};margin-bottom:3px">${o.name}</div>`, c += `<div>${e.value.style.chart.layout.grid.xAxis.name ? e.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${D(
+          e.value.style.chart.layout.labels.plotLabels.x.formatter,
+          o.xValue,
+          H({
+            v: o.xValue,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: o, category: l, categoryIndex: a }
+        )}</b></div>`, c += `<div>${e.value.style.chart.layout.grid.yAxis.name ? e.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${D(
+          e.value.style.chart.layout.labels.plotLabels.y.formatter,
+          o.yValue,
+          H({
+            v: o.yValue,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: o, category: l, categoryIndex: a }
+        )}</b></div>`, _e.value = `<div style="text-align:left;font-size:${e.value.style.chart.tooltip.fontSize}px">${c}</div>`;
+      }
+      s === "keyboard" && Ce(() => {
+        Gt(o.uid);
+      }), he.value = !0;
+    }
+    function Oe(l, o) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o }), !(fe.value === l.uid && qe.value === "keyboard") && (he.value = !1, G.value = null, ne.value = null);
+    }
+    function ke(l, o, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: a });
+      const s = {
+        category: l.name,
+        shape: l.shape,
+        itemName: o.name,
+        x: o.xValue,
+        y: o.yValue,
+        quadrantSide: o.quadrantSide,
+        sideName: e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text
+      };
+      ce("selectPlot", s);
+    }
+    function re(l) {
+      if (!l) return;
+      const o = W.value.flatMap((s) => s.series.filter((u) => u.quadrantSide === l).map((u) => ({
+        category: u.categoryName,
+        itemName: u.name,
+        x: u.xValue,
+        y: u.yValue
+      }))), a = {
+        quadrantSide: l,
+        sideName: e.value.style.chart.layout.labels.quadrantLabels[l].text,
+        items: [...o]
+      };
+      ce("selectSide", a);
+    }
+    const S = m(() => ({
+      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 ct() {
+      return W.value.map((l) => ({
+        color: l.color,
+        name: l.name,
+        shape: l.shape,
+        series: l.series.map((o) => ({
+          name: o.name,
+          x: o.xValue,
+          y: o.yValue,
+          quadrantSide: o.quadrantSide,
+          sideName: e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text
+        }))
+      }));
+    }
+    function Be(l = null) {
+      Ce(() => {
+        const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = xe.value.head, s = xe.value.body, u = o.concat([a]).concat(s), i = kl(u);
+        l ? l(i) : wl({ csvContent: i, title: e.value.style.chart.title.text || "vue-ui-quadrant" });
+      });
+    }
+    const K = h(!1);
+    function ht(l) {
+      K.value = l, He.value += 1;
+    }
+    function yt() {
+      k.value.showTable = !k.value.showTable;
+    }
+    function bt() {
+      k.value.plotLabels.show = !k.value.plotLabels.show;
+    }
+    function ft() {
+      k.value.showTooltip = !k.value.showTooltip;
+    }
+    const ie = h(!1);
+    function Ne() {
+      ie.value = !ie.value;
+    }
+    async function Kt({ scale: l = 2 } = {}) {
+      if (!V.value) return;
+      const { width: o, height: a } = V.value.getBoundingClientRect(), s = o / a, { imageUri: u, base64: i } = await Ml({ domElement: V.value, base64: !0, img: !0, scale: l });
+      return {
+        imageUri: u,
+        base64: i,
+        title: e.value.style.chart.title.text,
+        width: o,
+        height: a,
+        aspectRatio: s
+      };
+    }
+    const ve = m(() => {
+      const l = e.value.table.useDialog && !e.value.table.show, o = k.value.showTable;
+      return {
+        component: l ? Mt : zt,
+        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: K.value,
+          fullscreenParent: V.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: X.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: o,
+            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
+            }
+          }
+        }
+      };
+    });
+    Fe(() => k.value.showTable, (l) => {
+      e.value.table.show || (l && e.value.table.useDialog && oe.value ? oe.value.open() : "close" in oe.value && oe.value.close());
+    });
+    function pt() {
+      k.value.showTable = !1, Te.value && Te.value.setTableIconState(!1);
+    }
+    const jt = m(() => e.value.style.chart.backgroundColor), Jt = m(() => e.value.style.chart.legend), Zt = m(() => e.value.style.chart.title), { exportSvg: el, getSvg: tl } = Wl({
+      svg: E,
+      title: Zt,
+      legend: Jt,
+      legendItems: Q,
+      backgroundColor: jt
+    });
+    async function gt({ isCb: l }) {
+      be.value = !0, await Ce();
+      try {
+        if (l) {
+          const { blob: o, url: a, text: s, dataUrl: u } = await tl();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: o, url: a, text: s, dataUrl: u }));
+        } else
+          await Promise.resolve(el());
+      } finally {
+        be.value = !1;
+      }
+    }
+    function ll(l) {
+      if (l?.stage === "start") {
+        ye.value = !0;
+        return;
+      }
+      if (l?.stage === "end") {
+        ye.value = !1;
+        return;
+      }
+      st();
+    }
+    async function mt() {
+      if (ce("copyAlt", {
+        config: e.value,
+        dataset: Pe.value
+      }), !e.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
+        config: e.value,
+        dataset: Pe.value
+      }));
+    }
+    function al() {
+      j.value = null, fe.value = null, pe.value = !0;
+    }
+    function ol() {
+      Me(), pe.value = !1;
+    }
+    function ul(l) {
+      if (!E.value || ie.value || document.activeElement !== E.value || !P.value.length) return;
+      const o = l.key === "ArrowLeft" || l.key === "ArrowUp", a = l.key === "ArrowRight" || l.key === "ArrowDown", s = l.key === "Enter" || l.key === " ", u = l.key === "Escape";
+      if (!o && !a && !s && !u) return;
+      if (l.preventDefault(), l.stopPropagation(), u) {
+        Me();
+        return;
+      }
+      if (s) {
+        if (j.value === null) return;
+        const le = P.value[j.value];
+        if (!le) return;
+        ke(le.category, le.plot, le.categoryIndex);
+        return;
+      }
+      let i = j.value;
+      const c = G.value ? P.value.findIndex((le) => le.plot.uid === G.value) : null, Y = i !== null && i >= 0 && i < P.value.length, we = c !== null && c >= 0 && c < P.value.length;
+      Y ? (i += a ? 1 : -1, i < 0 && (i = P.value.length - 1), i >= P.value.length && (i = 0)) : we ? (i = a ? c + 1 : c - 1, i >= P.value.length && (i = 0), i < 0 && (i = P.value.length - 1)) : a ? i = 0 : i = P.value.length - 1;
+      const Le = P.value[i];
+      Le && $e(Le.category, Le.plot, Le.categoryIndex, "keyboard", i);
+    }
+    const Ve = m(() => {
+      const l = te.value?.colNames ?? [], o = te.value?.a11yBody ?? [];
+      return { headers: l, rows: o };
+    }), P = m(() => W.value.flatMap((l, o) => l.series.map((a) => ({
+      category: l,
+      plot: a,
+      categoryIndex: o
+    }))));
+    return _t({
+      getData: ct,
+      getImage: Kt,
+      generatePdf: ut,
+      generateCsv: Be,
+      generateImage: st,
+      generateSvg: gt,
+      hideSeries: Ut,
+      showSeries: Et,
+      toggleTable: yt,
+      toggleLabels: bt,
+      toggleTooltip: ft,
+      toggleAnnotator: Ne,
+      toggleFullscreen: ht,
+      copyAlt: mt
+    }), (l, o) => (n(), r("div", {
+      class: O(`vue-data-ui-component vue-ui-quadrant ${K.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "quadrantChart",
+      ref: V,
+      id: `vue-ui-quadrant_${$.value}`,
+      style: _(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: o[14] || (o[14] = () => v(lt)(!0)),
+      onMouseleave: o[15] || (o[15] = () => {
+        v(lt)(!1), pe.value || Me();
+      })
+    }, [
+      d("div", {
+        id: `chart-instructions-${$.value}`,
+        class: "sr-only"
+      }, [
+        d("p", null, w(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, Dl),
+      Ve.value?.rows?.length ? (n(), B(Vl, {
+        key: 0,
+        uid: $.value,
+        head: Ve.value.headers,
+        body: Ve.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : y("", !0),
+      e.value.userOptions.buttons.annotator ? (n(), B(v(Xt), {
+        key: 1,
+        svgRef: v(E),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: ie.value,
+        isCursorPointer: X.value,
+        onClose: Ne
+      }, {
+        "annotator-action-close": p(() => [
+          g(l.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": p(({ color: a }) => [
+          g(l.$slots, "annotator-action-color", T(q({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": p(({ mode: a }) => [
+          g(l.$slots, "annotator-action-draw", T(q({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": p(({ disabled: a }) => [
+          g(l.$slots, "annotator-action-undo", T(q({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": p(({ disabled: a }) => [
+          g(l.$slots, "annotator-action-redo", T(q({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": p(({ disabled: a }) => [
+          g(l.$slots, "annotator-action-delete", T(q({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : y("", !0),
+      Ft.value ? (n(), r("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: Ge,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : y("", !0),
+      e.value.style.chart.title.text ? (n(), r("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: Ee,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (n(), B(Ol, {
+          key: `table_${Ke.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)) : y("", !0),
+      d("div", {
+        id: `legend-top-${$.value}`
+      }, null, 8, Hl),
+      e.value.userOptions.show && De.value && (v(at) || v(Ae)) ? (n(), B(v(Pt), {
+        ref_key: "userOptionsRef",
+        ref: Te,
+        key: `user_options_${He.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: v(Xe),
+        isPrinting: v(We),
+        uid: $.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,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: K.value,
+        isTooltip: k.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: V.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: ie.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: X.value,
+        onToggleFullscreen: ht,
+        onGeneratePdf: v(ut),
+        onGenerateCsv: Be,
+        onGenerateImage: ll,
+        onGenerateSvg: gt,
+        onToggleTable: yt,
+        onToggleLabels: bt,
+        onToggleTooltip: ft,
+        onToggleAnnotator: Ne,
+        onCopyAlt: mt,
+        style: _({
+          visibility: v(at) ? v(Ae) ? "visible" : "hidden" : "visible"
+        })
+      }, $t({ _: 2 }, [
+        l.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: p(({ isOpen: a, color: s }) => [
+            g(l.$slots, "menuIcon", T(q({ isOpen: a, color: s })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: p(() => [
+            g(l.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: p(() => [
+            g(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: p(() => [
+            g(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: p(() => [
+            g(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: p(() => [
+            g(l.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: p(() => [
+            g(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        l.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: p(() => [
+            g(l.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: p(({ toggleFullscreen: a, isFullscreen: s }) => [
+            g(l.$slots, "optionFullscreen", T(q({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        l.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: p(({ toggleAnnotator: a, isAnnotator: s }) => [
+            g(l.$slots, "optionAnnotator", T(q({ toggleAnnotator: a, isAnnotator: s })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0,
+        l.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: p(({ altCopy: a }) => [
+            g(l.$slots, "optionAltCopy", T(q({ altCopy: a })), void 0, !0)
+          ]),
+          key: "10"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : y("", !0),
+      d("div", El, [
+        (n(), r("svg", {
+          ref_key: "svgRef",
+          ref: E,
+          xmlns: v(pl),
+          "aria-describedby": `chart-instructions-${$.value}`,
+          class: O({ "vue-data-ui-fullscreen--on": K.value, "vue-data-ui-fulscreen--off": !K.value }),
+          viewBox: `${b.value.startX} ${b.value.startY} ${b.value.width} ${b.value.height}`,
+          style: _(`max-width:100%;overflow:hidden;background:transparent;color:${e.value.style.chart.color}`),
+          id: `svg_${$.value}`,
+          tabindex: "0",
+          onFocus: al,
+          onBlur: ol,
+          onKeydown: ul
+        }, [
+          de(v(Yt)),
+          l.$slots["chart-background"] ? (n(), r("foreignObject", {
+            key: 0,
+            x: b.value.startX,
+            y: b.value.startY,
+            width: b.value.width,
+            height: b.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            g(l.$slots, "chart-background", {}, void 0, !0)
+          ], 8, Ql)) : y("", !0),
+          d("defs", null, [
+            (n(!0), r(A, null, N(W.value, (a, s) => (n(), r("radialGradient", {
+              cx: "50%",
+              cy: "50%",
+              r: "50%",
+              fx: "50%",
+              fy: "50%",
+              id: `quadrant_gradient_${$.value}_${s}`
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": v(Se)(v(gl)(a.color, 0.05), e.value.style.chart.layout.areas.opacity)
+              }, null, 8, Kl),
+              d("stop", {
+                offset: "100%",
+                "stop-color": v(Se)(a.color, e.value.style.chart.layout.areas.opacity)
+              }, null, 8, jl)
+            ], 8, Gl))), 256))
+          ]),
+          e.value.style.chart.layout.grid.graduations.show ? (n(), r("g", Jl, [
+            (n(!0), r(A, null, N(Rt.value, (a) => (n(), r("rect", {
+              fill: e.value.style.chart.layout.grid.graduations.fill ? v(Se)(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, Zl))), 256))
+          ])) : y("", !0),
+          d("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, ea),
+          d("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, ta),
+          e.value.style.chart.layout.grid.showArrows ? (n(), r("g", la, [
+            d("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, aa),
+            d("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, oa),
+            d("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, ua),
+            d("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, sa)
+          ])) : y("", !0),
+          e.value.style.chart.layout.labels.quadrantLabels.show && !x.value ? (n(), r("g", na, [
+            e.value.style.chart.layout.labels.quadrantLabels.tl.text ? (n(), r("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: _(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
+              onClick: o[0] || (o[0] = (a) => re("tl"))
+            }, w(e.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, ra)) : y("", !0),
+            e.value.style.chart.layout.labels.quadrantLabels.tr.text ? (n(), r("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: _(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
+              onClick: o[1] || (o[1] = (a) => re("tr"))
+            }, w(e.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, ia)) : y("", !0),
+            e.value.style.chart.layout.labels.quadrantLabels.br.text ? (n(), r("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: _(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
+              onClick: o[2] || (o[2] = (a) => re("br"))
+            }, w(e.value.style.chart.layout.labels.quadrantLabels.br.text), 13, va)) : y("", !0),
+            e.value.style.chart.layout.labels.quadrantLabels.bl.text ? (n(), r("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: _(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
+              onClick: o[3] || (o[3] = (a) => re("bl"))
+            }, w(e.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, da)) : y("", !0)
+          ])) : y("", !0),
+          e.value.style.chart.layout.labels.axisLabels.show ? (n(), r("g", ca, [
+            d("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
+            }, w(v(D)(
+              e.value.style.chart.layout.labels.plotLabels.y.formatter,
+              z.value.y.max,
+              v(H)({
+                v: z.value.y.max,
+                r: e.value.style.chart.layout.labels.plotLabels.rounding
+              })
+            )), 9, ha),
+            d("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
+            }, w(e.value.style.chart.layout.grid.yAxis.name), 9, ya),
+            d("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
+            }, w(v(D)(
+              e.value.style.chart.layout.labels.plotLabels.y.formatter,
+              z.value.y.min,
+              v(H)({
+                v: z.value.y.min,
+                r: e.value.style.chart.layout.labels.plotLabels.rounding
+              })
+            )), 9, ba),
+            d("text", {
+              id: `xLabelMin_${$.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
+            }, w(v(D)(
+              e.value.style.chart.layout.labels.plotLabels.x.formatter,
+              z.value.x.min,
+              v(H)({
+                v: z.value.x.min,
+                r: e.value.style.chart.layout.labels.plotLabels.rounding
+              })
+            )), 9, fa),
+            d("text", {
+              id: `xLabelMax_${$.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
+            }, w(v(D)(
+              e.value.style.chart.layout.labels.plotLabels.x.formatter,
+              z.value.x.max,
+              v(H)({
+                v: z.value.x.max,
+                r: e.value.style.chart.layout.labels.plotLabels.rounding
+              })
+            )), 9, pa),
+            d("text", {
+              id: `xLabelMaxName_${$.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
+            }, w(e.value.style.chart.layout.grid.xAxis.name), 9, ga)
+          ])) : y("", !0),
+          e.value.style.chart.layout.areas.show ? (n(), r("g", ma, [
+            (n(!0), r(A, null, N(W.value, (a, s) => (n(), r("g", null, [
+              a.series.length > 2 ? (n(), r("polygon", {
+                key: 0,
+                "data-cy-quadrant-area": "",
+                fill: e.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${$.value}_${s})` : v(Se)(a.color, e.value.style.chart.layout.areas.opacity),
+                points: v(ml)(a)
+              }, null, 8, xa)) : y("", !0)
+            ]))), 256))
+          ])) : y("", !0),
+          d("g", null, [
+            d("rect", {
+              onClick: o[4] || (o[4] = (a) => I("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: O({ "vue-data-ui-zoom-plus": !x.value, "vue-data-ui-zoom-minus": x.value })
+            }, null, 10, $a),
+            d("rect", {
+              onClick: o[5] || (o[5] = (a) => I("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: O({ "vue-data-ui-zoom-plus": !x.value, "vue-data-ui-zoom-minus": x.value })
+            }, null, 10, ka),
+            d("rect", {
+              onClick: o[6] || (o[6] = (a) => I("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: O({ "vue-data-ui-zoom-plus": !x.value, "vue-data-ui-zoom-minus": x.value })
+            }, null, 10, wa),
+            d("rect", {
+              onClick: o[7] || (o[7] = (a) => I("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: O({ "vue-data-ui-zoom-plus": !x.value, "vue-data-ui-zoom-minus": x.value })
+            }, null, 10, La)
+          ]),
+          e.value.style.chart.layout.labels.plotLabels.showAsTag ? (n(), r(A, { key: 7 }, [
+            k.value.plotLabels.show ? (n(), r("g", za, [
+              (n(!0), r(A, null, N(W.value, (a, s) => (n(), r(A, null, [
+                (n(!0), r(A, null, N(a.series, (u) => (n(), r("foreignObject", {
+                  style: { overflow: "visible" },
+                  height: "10",
+                  width: "100",
+                  x: u.x - 50,
+                  y: u.y - e.value.style.chart.layout.labels.plotLabels.fontSize,
+                  onMouseover: (i) => $e(a, u, s),
+                  onMouseleave: (i) => Oe(u, s),
+                  onClick: (i) => ke(a, u, s)
+                }, [
+                  d("div", {
+                    style: _(`color:${v($l)(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;`)
+                  }, w(u.name), 5)
+                ], 40, Wa))), 256))
+              ], 64))), 256))
+            ])) : y("", !0)
+          ], 64)) : (n(), r(A, { key: 6 }, [
+            (n(!0), r(A, null, N(W.value, (a, s) => (n(), r("g", null, [
+              l.$slots.datapoint && !v(ge) ? (n(!0), r(A, { key: 0 }, N(a.series, (u) => (n(), r("g", {
+                key: u.uid
+              }, [
+                (n(), r("foreignObject", {
+                  x: u.x - 1,
+                  y: u.y - 1,
+                  width: "2",
+                  height: "2",
+                  style: { overflow: "visible", "pointer-events": "none" },
+                  onMouseenter: (i) => $e(a, u, s),
+                  onMouseleave: (i) => Oe(u, s),
+                  onClick: (i) => ke(a, u, s)
+                }, [
+                  g(l.$slots, "datapoint", kt({ ref_for: !0 }, { datapoint: u }), void 0, !0)
+                ], 40, Ca)),
+                d("circle", {
+                  "data-a11y-plot-id": u.uid,
+                  cx: u.x,
+                  cy: u.y,
+                  r: Math.max(e.value.style.chart.layout.plots.radius / (x.value ? 1.5 : 1), 10),
+                  fill: "transparent",
+                  "aria-label": `${a.name} ${u.name}: ${e.value.style.chart.layout.grid.xAxis.name || "x"} ${u.xValue}, ${e.value.style.chart.layout.grid.yAxis.name || "y"} ${u.yValue}`,
+                  style: { "pointer-events": "none" }
+                }, null, 8, Sa)
+              ]))), 128)) : (n(!0), r(A, { key: 1 }, N(a.series, (u, i) => (n(), r("g", {
+                key: u.uid
+              }, [
+                de(Ct, {
+                  color: a.color,
+                  isSelected: G.value && u.uid === G.value,
+                  plot: u,
+                  radius: e.value.style.chart.layout.plots.radius / (x.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: (c) => $e(a, u, s, "pointer"),
+                  onMouseleave: (c) => Oe(u, s),
+                  onClick: (c) => ke(a, u, s)
+                }, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseenter", "onMouseleave", "onClick"]),
+                d("circle", {
+                  "data-dom-to-png-ignore": "",
+                  "data-a11y-plot-id": u.uid,
+                  cx: u.x,
+                  cy: u.y,
+                  r: Math.max(e.value.style.chart.layout.plots.radius / (x.value ? 1.5 : 1), 10),
+                  fill: "transparent",
+                  "aria-label": `${a.name} ${u.name}: ${e.value.style.chart.layout.grid.xAxis.name || "x"} ${u.xValue}, ${e.value.style.chart.layout.grid.yAxis.name || "y"} ${u.yValue}`,
+                  style: { "pointer-events": "none" }
+                }, null, 8, _a)
+              ]))), 128))
+            ]))), 256)),
+            k.value.plotLabels.show ? (n(), r("g", Ta, [
+              (n(!0), r(A, null, N(W.value, (a) => (n(), r("g", null, [
+                (n(!0), r(A, null, N(a.series, (s) => (n(), r("g", null, [
+                  String(s.name).includes(`
+`) ? (n(), r("text", {
+                    key: 1,
+                    x: s.x,
+                    y: s.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 / (x.value ? 1.5 : 1),
+                    fill: e.value.style.chart.layout.labels.plotLabels.color,
+                    innerHTML: v(xl)({
+                      content: String(s.name),
+                      fontSize: e.value.style.chart.layout.labels.plotLabels.fontSize / (x.value ? 1.5 : 1),
+                      fill: e.value.style.chart.layout.labels.plotLabels.color,
+                      x: s.x,
+                      y: s.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius
+                    })
+                  }, null, 8, Aa)) : (n(), r("text", {
+                    key: 0,
+                    x: s.x,
+                    y: s.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 / (x.value ? 1.5 : 1),
+                    fill: e.value.style.chart.layout.labels.plotLabels.color
+                  }, w(s.name), 9, qa))
+                ]))), 256))
+              ]))), 256))
+            ])) : y("", !0)
+          ], 64)),
+          x.value ? (n(), r("g", Xa, [
+            f.value === "TL" ? (n(), r("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, Pa)) : y("", !0),
+            f.value === "TR" ? (n(), r("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, Ya)) : y("", !0),
+            f.value === "BR" ? (n(), r("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, Ma)) : y("", !0),
+            f.value === "BL" ? (n(), r("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, Oa)) : y("", !0)
+          ])) : y("", !0),
+          f.value && !me.value ? (n(), r("g", Ba, [
+            d("text", {
+              x: U.value.x,
+              y: U.value.y - U.value.fontSize / 1.5,
+              "font-size": U.value.fontSize / 1.5,
+              fill: U.value.fill,
+              "text-anchor": "middle",
+              "font-weight": U.value.bold ? "bold" : "normal"
+            }, w(U.value.text), 9, Na)
+          ])) : y("", !0),
+          x.value && f.value ? (n(), r("g", Va, [
+            d("rect", {
+              x: S.value[f.value].tl.x,
+              y: S.value[f.value].tl.y,
+              height: "20",
+              width: "20",
+              fill: S.value[f.value].tl.fill,
+              style: _(`cursor: ${X.value ? "pointer" : "default"}; opacity: ${f.value === "TL" ? 1 : 0.2}`),
+              onClick: o[8] || (o[8] = (a) => I("TL")),
+              class: O({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": f.value !== "TL" })
+            }, null, 14, Fa),
+            d("rect", {
+              x: S.value[f.value].tr.x,
+              y: S.value[f.value].tr.y,
+              height: "20",
+              width: "20",
+              fill: S.value[f.value].tr.fill,
+              style: _(`cursor: ${X.value ? "pointer" : "default"}; opacity: ${f.value === "TR" ? 1 : 0.2}`),
+              onClick: o[9] || (o[9] = (a) => I("TR")),
+              class: O({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": f.value !== "TR" })
+            }, null, 14, Ia),
+            d("rect", {
+              x: S.value[f.value].br.x,
+              y: S.value[f.value].br.y,
+              height: "20",
+              width: "20",
+              fill: S.value[f.value].br.fill,
+              style: _(`cursor: ${X.value ? "pointer" : "default"}; opacity: ${f.value === "BR" ? 1 : 0.2}`),
+              onClick: o[10] || (o[10] = (a) => I("BR")),
+              class: O({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": f.value !== "BR" })
+            }, null, 14, Ra),
+            d("rect", {
+              x: S.value[f.value].bl.x,
+              y: S.value[f.value].bl.y,
+              height: "20",
+              width: "20",
+              fill: S.value[f.value].bl.fill,
+              style: _(`cursor: ${X.value ? "pointer" : "default"}; opacity: ${f.value === "BL" ? 1 : 0.2}`),
+              onClick: o[11] || (o[11] = (a) => I("BL")),
+              class: O({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": f.value !== "BL" })
+            }, null, 14, Da),
+            d("path", {
+              class: "vue-ui-quadrant-minimap-crosshairs",
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": 1,
+              d: S.value[f.value].crosshairs.horizontal
+            }, null, 8, Ha),
+            d("path", {
+              class: "vue-ui-quadrant-minimap-crosshairs",
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": 1,
+              d: S.value[f.value].crosshairs.vertical
+            }, null, 8, Ea)
+          ])) : y("", !0),
+          g(l.$slots, "svg", {
+            svg: {
+              ...t.value,
+              isPrintingImg: v(We) | v(Xe) | ye.value,
+              isPrintingSvg: be.value
+            }
+          }, void 0, !0)
+        ], 46, Ul)),
+        l.$slots.hint ? (n(), r("div", Ua, [
+          g(l.$slots, "hint", T(q({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: pe.value })), void 0, !0)
+        ])) : y("", !0)
+      ]),
+      l.$slots.watermark ? (n(), r("div", Qa, [
+        g(l.$slots, "watermark", T(q({ isPrinting: v(We) || v(Xe) || ye.value || be.value })), void 0, !0)
+      ])) : y("", !0),
+      d("div", {
+        id: `legend-bottom-${$.value}`
+      }, null, 8, Ga),
+      Ze.value ? (n(), B(il, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${$.value}` : `#legend-bottom-${$.value}`
+      }, [
+        d("div", {
+          ref_key: "chartLegend",
+          ref: Ue
+        }, [
+          e.value.style.chart.legend.show ? (n(), B(Nl, {
+            key: `legend_${Je.value}`,
+            legendSet: Q.value,
+            config: Qt.value,
+            isCursorPointer: X.value,
+            onClickMarker: o[12] || (o[12] = ({ legend: a }) => se(a.id))
+          }, {
+            item: p(({ legend: a }) => [
+              v(ge) ? y("", !0) : (n(), r("div", {
+                key: 0,
+                onClick: (s) => se(a.id),
+                style: _(`opacity:${C.value.includes(a.id) ? 0.5 : 1}`)
+              }, w(a.name), 13, Ka))
+            ]),
+            legendToggle: p(() => [
+              Q.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !v(ge) ? (n(), B(Fl, {
+                key: 0,
+                backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
+                color: e.value.style.chart.legend.selectAllToggle.color,
+                fontSize: e.value.style.chart.legend.fontSize,
+                checked: C.value.length > 0,
+                isCursorPointer: X.value,
+                onToggle: Ht
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : y("", !0)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config", "isCursorPointer"])) : g(l.$slots, "legend", {
+            key: 1,
+            legend: Q.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : y("", !0),
+      l.$slots.source ? (n(), r("div", {
+        key: 7,
+        ref_key: "source",
+        ref: Qe,
+        dir: "auto"
+      }, [
+        g(l.$slots, "source", {}, void 0, !0)
+      ], 512)) : y("", !0),
+      de(v(qt), {
+        teleportTo: e.value.style.chart.tooltip.teleportTo,
+        show: k.value.showTooltip && he.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: V.value,
+        content: _e.value,
+        isFullscreen: K.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,
+        smoothForce: e.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold,
+        isA11yMode: qe.value === "keyboard",
+        a11yPosition: et.value
+      }, {
+        "tooltip-before": p(() => [
+          g(l.$slots, "tooltip-before", T(q({ ...Ye.value })), void 0, !0)
+        ]),
+        "tooltip-after": p(() => [
+          g(l.$slots, "tooltip-after", T(q({ ...Ye.value })), void 0, !0)
+        ]),
+        default: p(() => [
+          e.value.style.chart.tooltip.showShape ? (n(), r("svg", ja, [
+            de(Ct, {
+              plot: { x: 10, y: 10 },
+              shape: ne.value.shape,
+              color: ne.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"])
+          ])) : y("", !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      De.value && e.value.userOptions.buttons.table ? (n(), B(vl(ve.value.component), kt({ key: 8 }, ve.value.props, {
+        ref_key: "tableUnit",
+        ref: oe,
+        onClose: pt
+      }), $t({
+        content: p(() => [
+          (n(), B(v(Wt), {
+            key: `table_${je.value}`,
+            colNames: te.value.colNames,
+            head: te.value.head,
+            body: te.value.body,
+            config: te.value.config,
+            title: e.value.table.useDialog ? "" : ve.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: X.value,
+            onClose: pt
+          }, {
+            th: p(({ th: a }) => [
+              wt(w(a), 1)
+            ]),
+            td: p(({ td: a }) => [
+              d("div", {
+                innerHTML: a.name || a
+              }, null, 8, Ja)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: p(() => [
+            wt(w(ve.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: p(() => [
+            d("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: o[13] || (o[13] = (a) => Be(e.value.userOptions.callbacks.csv)),
+              style: _({ cursor: X.value ? "pointer" : "default" })
+            }, [
+              de(v(At), {
+                name: "fileCsv",
+                stroke: ve.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : y("", !0),
+      g(l.$slots, "skeleton", {}, () => [
+        v(ge) ? (n(), B(Al, { key: 0 })) : y("", !0)
+      ], !0)
+    ], 46, Rl));
+  }
+}, xo = /* @__PURE__ */ Il(Za, [["__scopeId", "data-v-89557c20"]]);
+export {
+  xo as default
+};