import { computed as g, onMounted as et, ref as b, watch as tt, createElementBlock as m, openBlock as c, unref as d, normalizeStyle as P, normalizeClass as Ae, createBlock as Y, createCommentVNode as T, createElementVNode as B, createVNode as ce, createSlots as ot, withCtx as w, renderSlot as k, normalizeProps as D, guardReactiveProps as R, Fragment as U, renderList as V, toDisplayString as W, createTextVNode as lt, nextTick as at } from "vue";
import { u as nt, o as st, e as rt, c as de, t as ut, p as S, a as it, b as ct, v as $, d as dt, f as j, X as vt, G as Me, J as ft, i as ve, q as ht, r as pt, x as gt } from "./index-lwwgkcGL.js";
import { _ as mt } from "./Title-C9AEelQ1.js";
import { u as yt, U as bt } from "./usePrinter-BCTMiyK9.js";
import { D as kt } from "./DataTable-C0D_esqj.js";
import Ct from "./vue-ui-accordion-CJnR6fHi.js";
import wt from "./vue-ui-skeleton-BufuSja5.js";
import { u as He } from "./useNestedProp-TXT2IHSL.js";
import { _ as $t } from "./PackageVersion-C-ytTlJe.js";
import { _ as _t } from "./PenAndPaper-__UJ-k8q.js";
import { u as xt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Tt } from "./useChartAccessibility-BWojgys7.js";
import { _ as Nt } from "./Tooltip-5snNLRyR.js";
import { L as Ot } from "./Legend-0b4003Zt.js";
import { _ as St } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ft = ["id"], Lt = {
  key: 1,
  ref: "noTitle",
  class: "vue-data-ui-no-title-space",
  style: "height:36px; width: 100%;background:transparent"
}, Pt = {
  key: 2,
  style: "width:100%;background:transparent;padding-bottom:24px"
}, It = ["xmlns", "viewBox"], Et = ["width", "height"], zt = ["id"], At = ["stop-color"], Mt = ["stop-color"], Ht = ["d", "fill", "stroke", "stroke-width"], Yt = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "onMouseenter"], Bt = ["x", "y", "font-size", "fill"], Dt = ["x", "y", "font-size", "fill"], Rt = {
  key: 4,
  class: "vue-data-ui-watermark"
}, Gt = ["onClick"], Ut = {
  key: 6,
  ref: "source",
  dir: "auto"
}, Vt = ["innerHTML"], Wt = {
  __name: "vue-ui-flow",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  setup(Ye, { expose: Be }) {
    const { vue_ui_flow: De } = nt(), _ = Ye, Q = g(() => !!_.dataset && _.dataset.length);
    et(() => {
      fe();
    });
    function fe() {
      st(_.dataset) && rt({
        componentName: "VueUiFlow",
        type: "dataset"
      });
    }
    const ee = b(de()), te = b(null), he = b(0), pe = b(0), oe = b(!1), le = b(""), Re = b(null), z = b(!1);
    function Ge(t) {
      z.value = t, he.value += 1;
    }
    const e = g({
      get: () => be(),
      set: (t) => t
    }), { userOptionsVisible: ae, setUserOptionsVisibility: ge, keepUserOptionState: me } = xt({ config: e.value }), { svgRef: ye } = Tt({
      config: e.value.style.chart.title
    });
    function be() {
      const t = He({
        userConfig: _.config,
        defaultConfig: De
      });
      let l = t;
      return t.theme ? l = {
        ...He({
          userConfig: it.vue_ui_flow[t.theme] || _.config,
          defaultConfig: t
        }),
        customPalette: ut[t.theme] || S
      } : l = t, l.nodeCategories = _.config.nodeCategories || {}, l.nodeCategoryColors = _.config.nodeCategoryColors || {}, l;
    }
    tt(
      () => _.config,
      (t) => {
        e.value = be(), ae.value = !e.value.userOptions.showOnChartHover, fe(), pe.value += 1, N.value.showTable = e.value.table.show;
      },
      { deep: !0 }
    );
    const { isPrinting: ke, isImaging: Ce, generatePdf: we, generateImage: $e } = yt({
      elementId: `flow_${ee.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-flow",
      options: e.value.userOptions.print
    }), Ue = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), X = g(() => ct(e.value.customPalette)), _e = g(() => e.value.style.chart.nodes.gap), A = g(() => e.value.style.chart.nodes.width), N = b({
      showTable: e.value.table.show,
      showTooltip: e.value.style.chart.tooltip.show
    }), Ve = g(() => e.value.style.chart.links.width), ne = g(() => !_.dataset || !_.dataset.length ? [] : _.dataset.map((t, l) => [
      t[0],
      t[1],
      $(t[2]),
      t[3] ? dt(t[3]) : X.value[l] || X.value[l % X.value.length] || S[l] || S[l % S.length]
    ])), xe = g(() => {
      const t = {};
      function l(a) {
        t[a] || (t[a] = { inflow: 0, outflow: 0 });
      }
      ne.value.forEach(([a, s, h]) => {
        l(a), l(s), t[a].outflow += h, t[s].inflow += h;
      });
      let o = 0;
      for (const a in t) {
        const s = Math.max(t[a].inflow, t[a].outflow);
        o = Math.max(o, s);
      }
      return o;
    });
    function We(t) {
      return t / xe.value * 100 + e.value.style.chart.nodes.minHeight;
    }
    function je(t) {
      const l = e.value.style.chart.nodes.minHeight;
      return (t - l) / 100 * xe.value;
    }
    function Xe(t) {
      const l = {}, o = {};
      function a(n, u) {
        l[n] || (l[n] = {
          height: 0,
          level: null,
          inflow: 0,
          outflow: 0,
          uid: de()
        }), l[n].level === null && (l[n].level = u), o[u] || (o[u] = []), o[u].includes(n) || o[u].push(n);
      }
      t.forEach(([n, u, i]) => {
        var r;
        const v = ((r = l[n]) == null ? void 0 : r.level) ?? 0, p = v + 1;
        a(n, v), a(u, p), l[n].children || (l[n].children = []), l[n].children.push({ target: u, value: i }), l[n].outflow += i, l[u].inflow += i;
      });
      const s = new Set(t.map(([n]) => n)), h = new Set(t.map(([, n]) => n)), F = Array.from(s).filter((n) => !h.has(n)), H = {};
      F.forEach((n, u) => {
        H[n] = X.value[u] || S[u % S.length];
      });
      const x = {};
      t.forEach(([n, u, i, v]) => {
        v && (x[n] = v, x[u] = v);
      }), Object.keys(l).forEach((n, u) => {
        var p, r;
        const i = (p = e.value.nodeCategories) == null ? void 0 : p[n], v = i ? (r = e.value.nodeCategoryColors) == null ? void 0 : r[i] : null;
        l[n].color = x[n] || // 1) explicit
        v || // 2) category
        (F.includes(n) ? H[n] : null) || // 3) root
        S[u % S.length];
      });
      for (const n in l)
        l[n].height = We(
          Math.max(l[n].inflow, l[n].outflow)
        ), l[n].name = n;
      const O = {};
      for (const n in o) {
        let u = 0;
        o[n].forEach((i, v) => {
          const p = l[i];
          O[i] = {
            x: parseInt(n, 10) * Ve.value + e.value.style.chart.padding.left,
            y: u,
            absoluteY: u,
            height: p.height,
            i: v,
            color: p.color,
            value: je(p.height)
          }, u += p.height + _e.value;
        });
      }
      const E = [];
      for (const n of Object.keys(l)) {
        let u = O[n].absoluteY + e.value.style.chart.padding.top;
        const i = l[n], v = O[n];
        i.children && i.children.forEach(({ target: p, value: r }) => {
          const f = O[p], L = l[p], K = $(u), Ee = $(
            u + r / i.outflow * v.height
          ), ie = $(
            f.y + e.value.style.chart.padding.top
          ), ze = $(
            ie + r / L.inflow * f.height
          );
          E.push({
            id: de(),
            source: n,
            target: p,
            path: `M ${$(v.x + A.value)} ${K} L ${$(v.x + A.value)} ${Ee} L ${$(f.x)} ${ze} L ${$(f.x)} ${ie} Z`,
            value: r,
            sourceColor: i.color,
            targetColor: L.color
          }), u += Ee - K, O[p].y += ze - ie;
        });
      }
      return { nodeCoordinates: O, links: E };
    }
    const y = g(() => {
      const t = Xe(_.dataset);
      return {
        nodes: Object.keys(t.nodeCoordinates).map((l, o) => ({
          ...t.nodeCoordinates[l],
          name: l
        })),
        links: t.links
      };
    });
    g(() => qe(y.value.nodes));
    function qe(t) {
      const l = {};
      for (const a in t) {
        const { x: s, height: h } = t[a];
        l[s] || (l[s] = 0), l[s] += h + _e.value;
      }
      return Math.max(...Object.values(l));
    }
    const G = g(() => {
      const { top: t, right: l, bottom: o, left: a } = e.value.style.chart.padding, s = Math.max(...y.value.nodes.map((x) => x.x)), h = a + s + A.value + l, F = Math.max(
        ...y.value.nodes.map((x) => x.absoluteY + x.height)
      ), H = t + F + o;
      return { width: h, height: H };
    });
    function Je(t) {
      const l = {}, o = {}, a = /* @__PURE__ */ new Set();
      return ne.value.forEach(([s, h, F]) => {
        l[s] || (l[s] = []), o[h] || (o[h] = []), l[s].push(h), o[h].push(s);
      }), l[t] && l[t].forEach((s) => a.add(s)), o[t] && o[t].forEach((s) => a.add(s)), Array.from(a).concat(t);
    }
    const C = b(null), M = b(null), se = b(null), q = b(!1);
    function Ze(t) {
      I.value = [], C.value = Je(t.name), M.value = t.name;
      const l = t.name, o = ne.value;
      let a = 0, s = 0, h = [], F = [];
      const H = new Set(o.map(([r]) => r)), x = new Set(o.map(([, r]) => r)), Ie = Array.from(H).filter((r) => !x.has(r)), O = o.filter(([r]) => Ie.includes(r)).reduce((r, [f, L, K]) => r + K, 0), E = {};
      y.value.nodes.forEach((r) => {
        E[r.name] = r.color;
      }), o.forEach(([r, f, L]) => {
        f === l && (a += L, h.push({ source: r, value: L, color: E[r] })), r === l && (s += L, F.push({ target: f, value: L, color: E[f] }));
      });
      const n = Math.max(a, s), u = O > 0 ? n / O * 100 : 0, i = {
        name: l,
        inflow: a,
        outflow: s,
        from: h,
        to: F,
        percentOfTotal: u,
        color: E[l] || "#000000"
      };
      se.value = { datapoint: i }, oe.value = !0;
      let v = "";
      const p = e.value.style.chart.tooltip.customFormat;
      if (q.value = !1, gt(p))
        try {
          const r = p({
            datapoint: i,
            series: y.value,
            config: e.value
          });
          typeof r == "string" && (le.value = r, q.value = !0);
        } catch {
          console.warn("Custom format cannot be applied.");
        }
      if (!q.value) {
        const r = e.value.style.chart.tooltip.showPercentage ? `<div>${j({
          p: e.value.style.chart.tooltip.translations.percentOfTotal,
          v: i.percentOfTotal,
          s: "%",
          r: e.value.style.chart.tooltip.roundingPercentage
        })}</div>` : "";
        v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;"><span style="margin-right:4px; color:${i.color}">⏹</span>${i.name}${r}</div>`, i.from.length && (v += `<div>${e.value.style.chart.tooltip.translations.from}</div>`, i.from.forEach((f) => {
          v += `<div><span style="color:${f.color}">⏹←</span> ${f.source}: ${ve(
            e.value.style.chart.nodes.labels.formatter,
            f.value,
            j({
              p: e.value.style.chart.nodes.labels.prefix,
              v: f.value,
              s: e.value.style.chart.nodes.labels.suffix,
              r: e.value.style.chart.nodes.labels.rounding
            })
          )}</div>`;
        })), i.to.length && (v += `<div style="margin-top:6px;">${e.value.style.chart.tooltip.translations.to}</div>`, i.to.forEach((f) => {
          v += `<div><span style="color:${f.color}">⏹→</span> ${f.target}: ${ve(
            e.value.style.chart.nodes.labels.formatter,
            f.value,
            j({
              p: e.value.style.chart.nodes.labels.prefix,
              v: f.value,
              s: e.value.style.chart.nodes.labels.suffix,
              r: e.value.style.chart.nodes.labels.rounding
            })
          )}</div>`;
        })), le.value = v;
      }
    }
    function Te() {
      C.value = null, M.value = null, oe.value = !1;
    }
    const Ne = g(() => y.value.links.map(
      ({ source: t, target: l, sourceColor: o, targetColor: a, value: s }) => ({
        source: t,
        target: l,
        sourceColor: o,
        targetColor: a,
        value: s
      })
    ));
    function Oe() {
      at(() => {
        const t = Ne.value.map((a, s) => [[a.source], [a.target], [a.value]]), l = [
          [e.value.style.chart.title.text],
          [e.value.style.chart.title.subtitle.text],
          [
            [e.value.table.columnNames.source],
            [e.value.table.columnNames.target],
            [e.value.table.columnNames.value]
          ]
        ].concat(t), o = ht(l);
        pt({
          csvContent: o,
          title: e.value.style.chart.title.text || "vue-ui-flow"
        });
      });
    }
    const J = g(() => {
      const t = [
        e.value.table.columnNames.source,
        e.value.table.columnNames.target,
        e.value.table.columnNames.value
      ], l = Ne.value.map((s, h) => [
        {
          color: s.sourceColor,
          name: s.source
        },
        {
          color: s.targetColor,
          name: s.target
        },
        j({
          p: e.value.style.chart.nodes.labels.prefix,
          v: s.value,
          s: e.value.style.chart.nodes.labels.suffix,
          r: e.value.style.chart.nodes.labels.rounding
        })
      ]), o = {
        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 {
        colNames: [
          e.value.table.columnNames.source,
          e.value.table.columnNames.target,
          e.value.table.columnNames.value
        ],
        head: t,
        body: l,
        config: o
      };
    });
    function Ke() {
      return y.value;
    }
    function Se() {
      N.value.showTable = !N.value.showTable;
    }
    const Z = b(!1);
    function re() {
      Z.value = !Z.value;
    }
    function Fe() {
      N.value.showTooltip = !N.value.showTooltip;
    }
    const Le = g(() => {
      const t = new Set(
        y.value.nodes.map(
          (l) => e.value.nodeCategories[l.name] || "__uncategorized__"
        )
      );
      return Array.from(t).map((l) => ({
        name: l,
        color: e.value.nodeCategoryColors[l] || S[0],
        shape: "square",
        count: y.value.nodes.filter(
          (o) => (e.value.nodeCategories[o.name] || "__uncategorized__") === l
        ).length
      })).map((l, o) => ({
        ...l,
        segregate: () => ue({ legend: l, i: o }),
        opacity: I.value.length ? I.value.includes(o) ? 1 : 0.5 : 1
      }));
    }), Pe = g(
      () => Le.value.filter((t) => t.name !== "__uncategorized__")
    ), I = b([]);
    function ue({ legend: t, i: l }) {
      var a;
      const o = t.name;
      if ((a = C.value) != null && a.every(
        (s) => e.value.nodeCategories[s] === o
      )) {
        C.value = null, M.value = null, I.value = [];
        return;
      }
      I.value = [l], C.value = y.value.nodes.filter((s) => e.value.nodeCategories[s.name] === o).map((s) => s.name), M.value = null;
    }
    const Qe = g(() => ({
      cy: "flow-legend",
      backgroundColor: e.value.style.chart.legend.backgroundColor,
      color: e.value.style.chart.legend.color,
      fontSize: e.value.style.chart.legend.fontSize,
      paddingBottom: e.value.style.chart.legend.paddingBottom,
      fontWeight: e.value.style.chart.legend.bold ? "bold" : "normal"
    }));
    return Be({
      getData: Ke,
      generateCsv: Oe,
      generateImage: $e,
      generatePdf: we,
      toggleTable: Se,
      toggleAnnotator: re,
      toggleTooltip: Fe,
      drillCategory: ue,
      unselectNode: Te
    }), (t, l) => (c(), m("div", {
      ref_key: "flowChart",
      ref: te,
      class: Ae(`vue-ui-flow ${z.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
      style: P(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
      id: `flow_${ee.value}`,
      onMouseenter: l[3] || (l[3] = () => d(ge)(!0)),
      onMouseleave: l[4] || (l[4] = () => d(ge)(!1))
    }, [
      e.value.userOptions.buttons.annotator ? (c(), Y(_t, {
        key: 0,
        svgRef: d(ye),
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        active: Z.value,
        onClose: re
      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : T("", !0),
      Ue.value ? (c(), m("div", Lt, null, 512)) : T("", !0),
      e.value.style.chart.title.text ? (c(), m("div", Pt, [
        (c(), Y(mt, {
          key: `title_${pe.value}`,
          config: {
            title: {
              cy: "flow-title",
              ...e.value.style.chart.title
            },
            subtitle: {
              cy: "flow-subtitle",
              ...e.value.style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ])) : T("", !0),
      e.value.userOptions.show && Q.value && (d(me) || d(ae)) ? (c(), Y(bt, {
        ref: "details",
        key: `user_option_${he.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: d(ke),
        isImaging: d(Ce),
        uid: ee.value,
        hasPdf: e.value.userOptions.buttons.pdf,
        hasXls: e.value.userOptions.buttons.csv,
        hasImg: e.value.userOptions.buttons.img,
        hasTable: e.value.userOptions.buttons.table,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        isFullscreen: z.value,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: te.value,
        position: e.value.userOptions.position,
        hasAnnotator: e.value.userOptions.buttons.annotator,
        isAnnotation: Z.value,
        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
        isTooltip: N.value.showTooltip,
        onToggleTooltip: Fe,
        onToggleFullscreen: Ge,
        onGeneratePdf: d(we),
        onGenerateCsv: Oe,
        onGenerateImage: d($e),
        onToggleTable: Se,
        onToggleAnnotator: re,
        style: P({
          visibility: d(me) ? d(ae) ? "visible" : "hidden" : "visible"
        })
      }, ot({ _: 2 }, [
        t.$slots.menuIcon ? {
          name: "menuIcon",
          fn: w(({ isOpen: o, color: a }) => [
            k(t.$slots, "menuIcon", D(R({ isOpen: o, color: a })), void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionTooltip ? {
          name: "optionTooltip",
          fn: w(() => [
            k(t.$slots, "optionTooltip", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: w(() => [
            k(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: w(() => [
            k(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: w(() => [
            k(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        t.$slots.optionTable ? {
          name: "optionTable",
          fn: w(() => [
            k(t.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "5"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: w(({ toggleFullscreen: o, isFullscreen: a }) => [
            k(t.$slots, "optionFullscreen", D(R({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
          ]),
          key: "6"
        } : void 0,
        t.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: w(({ toggleAnnotator: o, isAnnotator: a }) => [
            k(t.$slots, "optionAnnotator", D(R({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
          ]),
          key: "7"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "hasTooltip", "isTooltip", "onGeneratePdf", "onGenerateImage", "style"])) : T("", !0),
      (c(), m("svg", {
        ref_key: "svgRef",
        ref: ye,
        xmlns: d(vt),
        viewBox: `0 0 ${G.value.width} ${G.value.height}`,
        class: Ae({
          "vue-data-ui-fullscreen--on": z.value,
          "vue-data-ui-fulscreen--off": !z.value
        }),
        style: P(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
      }, [
        ce($t),
        t.$slots["chart-background"] ? (c(), m("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: G.value.width,
          height: G.value.height,
          style: {
            pointerEvents: "none"
          }
        }, [
          k(t.$slots, "chart-background", {}, void 0, !0)
        ], 8, Et)) : T("", !0),
        B("defs", null, [
          (c(!0), m(U, null, V(y.value.links, (o, a) => (c(), m("linearGradient", {
            id: o.id,
            x1: "0%",
            y1: "0%",
            x2: "100%",
            y2: "0%"
          }, [
            B("stop", {
              offset: "0%",
              "stop-color": o.sourceColor
            }, null, 8, At),
            B("stop", {
              offset: "100%",
              "stop-color": o.targetColor
            }, null, 8, Mt)
          ], 8, zt))), 256))
        ]),
        (c(!0), m(U, null, V(y.value.links, (o) => (c(), m("path", {
          class: "vue-ui-flow-link",
          d: o.path,
          fill: `url(#${o.id})`,
          stroke: e.value.style.chart.links.stroke,
          "stroke-width": e.value.style.chart.links.strokeWidth,
          style: P(`
                    opacity:${C.value ? C.value.includes(o.source) && C.value.includes(o.target) ? 1 : 0.3 : M.value ? [o.target, o.source].includes(M.value) ? 1 : 0.3 : e.value.style.chart.links.opacity}
                `)
        }, null, 12, Ht))), 256)),
        (c(!0), m(U, null, V(y.value.nodes, (o, a) => (c(), m("rect", {
          class: "vue-ui-flow-node",
          x: o.x,
          y: d($)(o.absoluteY) + e.value.style.chart.padding.top,
          height: d($)(o.height),
          width: A.value,
          fill: o.color,
          stroke: e.value.style.chart.nodes.stroke,
          "stroke-width": e.value.style.chart.nodes.strokeWidth,
          onMouseenter: (s) => Ze(o),
          onMouseleave: l[0] || (l[0] = (s) => Te()),
          style: P(`opacity:${C.value ? C.value.includes(o.name) ? 1 : 0.3 : 1}`)
        }, null, 44, Yt))), 256)),
        (c(!0), m(U, null, V(y.value.nodes, (o, a) => (c(), m("text", {
          x: o.x + A.value / 2,
          y: d($)(
            o.absoluteY + o.height / 2 - e.value.style.chart.nodes.labels.fontSize / 4
          ) + e.value.style.chart.padding.top,
          "font-size": e.value.style.chart.nodes.labels.fontSize,
          fill: d(Me)(o.color),
          "text-anchor": "middle",
          style: P(`pointer-events: none; opacity:${C.value ? C.value.includes(o.name) ? 1 : 0 : 1}`)
        }, W(e.value.style.chart.nodes.labels.abbreviation.use ? d(ft)({
          source: o.name,
          length: e.value.style.chart.nodes.labels.abbreviation.length
        }) : o.name), 13, Bt))), 256)),
        (c(!0), m(U, null, V(y.value.nodes, (o, a) => (c(), m("text", {
          x: o.x + A.value / 2,
          y: d($)(
            o.absoluteY + o.height / 2 + e.value.style.chart.nodes.labels.fontSize
          ) + e.value.style.chart.padding.top,
          "font-size": e.value.style.chart.nodes.labels.fontSize,
          fill: d(Me)(o.color),
          "text-anchor": "middle",
          style: P(`pointer-events: none; opacity:${C.value ? C.value.includes(o.name) ? 1 : 0 : 1}`)
        }, W(d(ve)(
          e.value.style.chart.nodes.labels.formatter,
          o.value,
          d(j)({
            p: e.value.style.chart.nodes.labels.prefix,
            v: o.value,
            s: e.value.style.chart.nodes.labels.suffix,
            r: e.value.style.chart.nodes.labels.rounding
          }),
          { datapoint: o, seriesIndex: a }
        )), 13, Dt))), 256)),
        k(t.$slots, "svg", { svg: G.value }, void 0, !0)
      ], 14, It)),
      t.$slots.watermark ? (c(), m("div", Rt, [
        k(t.$slots, "watermark", D(R({ isPrinting: d(ke) || d(Ce) })), void 0, !0)
      ])) : T("", !0),
      Q.value ? T("", !0) : (c(), Y(wt, {
        key: 5,
        config: {
          type: "flow",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor
          }
        }
      }, null, 8, ["config"])),
      B("div", {
        ref_key: "chartLegend",
        ref: Re
      }, [
        e.value.style.chart.legend.show && Pe.value.length ? (c(), Y(Ot, {
          key: 0,
          legendSet: Pe.value,
          config: Qe.value,
          onClickMarker: l[1] || (l[1] = (o) => ue(o))
        }, {
          item: w(({ legend: o, index: a }) => [
            B("div", {
              onClick: (s) => o.segregate(),
              style: P(`opacity:${I.value.length ? I.value.includes(a) ? 1 : 0.5 : 1}`)
            }, W(o.name) + " (" + W(o.count) + ") ", 13, Gt)
          ]),
          _: 1
        }, 8, ["legendSet", "config"])) : T("", !0),
        k(t.$slots, "legend", { legend: Le.value }, void 0, !0)
      ], 512),
      t.$slots.source ? (c(), m("div", Ut, [
        k(t.$slots, "source", {}, void 0, !0)
      ], 512)) : T("", !0),
      ce(Nt, {
        show: N.value.showTooltip && oe.value,
        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
        color: e.value.style.chart.tooltip.color,
        fontSize: e.value.style.chart.tooltip.fontSize,
        borderRadius: e.value.style.chart.tooltip.borderRadius,
        borderColor: e.value.style.chart.tooltip.borderColor,
        borderWidth: e.value.style.chart.tooltip.borderWidth,
        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
        position: e.value.style.chart.tooltip.position,
        offsetY: e.value.style.chart.tooltip.offsetY,
        parent: te.value,
        content: le.value,
        isCustom: q.value,
        isFullscreen: z.value
      }, {
        "tooltip-before": w(() => [
          k(t.$slots, "tooltip-before", D(R({ ...se.value })), void 0, !0)
        ]),
        "tooltip-after": w(() => [
          k(t.$slots, "tooltip-after", D(R({ ...se.value })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen"]),
      Q.value ? (c(), Y(Ct, {
        key: 7,
        hideDetails: "",
        config: {
          open: N.value.showTable,
          maxHeight: 1e4,
          body: {
            backgroundColor: e.value.style.chart.backgroundColor,
            color: e.value.style.chart.color
          },
          head: {
            backgroundColor: e.value.style.chart.backgroundColor,
            color: e.value.style.chart.color
          }
        }
      }, {
        content: w(() => [
          ce(kt, {
            colNames: J.value.colNames,
            head: J.value.head,
            body: J.value.body,
            config: J.value.config,
            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
            onClose: l[2] || (l[2] = (o) => N.value.showTable = !1)
          }, {
            th: w(({ th: o }) => [
              B("div", {
                innerHTML: o,
                style: { display: "flex", "align-items": "center" }
              }, null, 8, Vt)
            ]),
            td: w(({ td: o }) => [
              lt(W(o.name || o), 1)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"])
        ]),
        _: 1
      }, 8, ["config"])) : T("", !0)
    ], 46, Ft));
  }
}, uo = /* @__PURE__ */ St(Wt, [["__scopeId", "data-v-6fcb877a"]]);
export {
  uo as default
};
