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