import { computed as m, onMounted as He, ref as y, watch as Oe, openBlock as r, createElementBlock as h, normalizeClass as ce, normalizeStyle as _, createBlock as E, createCommentVNode as T, unref as i, createSlots as Ee, withCtx as k, renderSlot as C, normalizeProps as de, guardReactiveProps as ve, createVNode as fe, createElementVNode as S, Fragment as P, renderList as F, toDisplayString as U, createTextVNode as Se, nextTick as Me } from "vue";
import { u as ze, o as Ye, e as De, c as he, t as Ge, a as Be, p as V, b as Ae, v, f as me, X as Ue, F as ge, K as Ve, i as je, q as Xe, r as We } from "./index-DK7qqHGP.js";
import { _ as qe } from "./Title-Cxlu3Etv.js";
import { u as Ke, U as Re } from "./usePrinter-Cza87yNE.js";
import { D as Ze } from "./DataTable-B9SSwFM2.js";
import Je from "./vue-ui-accordion-5C4CP3gA.js";
import Qe from "./vue-ui-skeleton-CQnYuosp.js";
import { u as pe } from "./useNestedProp-0nRX_rTi.js";
import { _ as et } from "./PackageVersion-I1_4jcn_.js";
import { _ as tt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const lt = ["id"], ot = {
  key: 0,
  style: "width:100%;background:transparent;padding-bottom:24px"
}, at = ["xmlns", "viewBox"], nt = ["id"], st = ["stop-color"], ut = ["stop-color"], rt = ["d", "fill", "stroke", "stroke-width"], it = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "onMouseenter"], ct = ["x", "y", "font-size", "fill"], dt = ["x", "y", "font-size", "fill"], vt = {
  key: 2,
  class: "vue-data-ui-watermark"
}, ft = ["innerHTML"], ht = {
  __name: "vue-ui-flow",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  setup(be, { expose: ye }) {
    const g = be, { vue_ui_flow: ke } = ze(), M = m(() => !!g.dataset && g.dataset.length);
    He(() => {
      j();
    });
    function j() {
      Ye(g.dataset) && De({
        componentName: "VueUiFlow",
        type: "dataset"
      });
    }
    const z = y(he()), X = y(null), W = y(0), q = y(0), N = y(!1);
    function we(t) {
      N.value = t, W.value += 1;
    }
    const e = m({
      get: () => K(),
      set: (t) => t
    });
    function K() {
      const t = pe({
        userConfig: g.config,
        defaultConfig: ke
      });
      return t.theme ? {
        ...pe({
          userConfig: Ge.vue_ui_flow[t.theme] || g.config,
          defaultConfig: t
        }),
        customPalette: Be[t.theme] || V
      } : t;
    }
    Oe(() => g.config, (t) => {
      e.value = K(), j(), q.value += 1;
    }, { deep: !0 });
    const { isPrinting: R, isImaging: Z, generatePdf: J, generateImage: Q } = Ke({
      elementId: `flow_${z.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-flow"
    }), Y = m(() => Ae(e.value.customPalette)), ee = m(() => e.value.style.chart.nodes.gap), x = m(() => e.value.style.chart.nodes.width), I = y({
      showTable: e.value.table.show
    }), te = m(() => e.value.style.chart.links.width), D = m(() => !g.dataset || !g.dataset.length ? [] : g.dataset.map((t) => [
      t[0],
      t[1],
      v(t[2])
    ])), le = m(() => {
      const t = {};
      function o(n) {
        t[n] || (t[n] = { inflow: 0, outflow: 0 });
      }
      D.value.forEach(([n, a, c]) => {
        o(n), o(a), t[n].outflow += c, t[a].inflow += c;
      });
      let l = 0;
      for (const n in t) {
        const a = Math.max(t[n].inflow, t[n].outflow);
        l = Math.max(l, a);
      }
      return l;
    });
    function Ce(t) {
      return t / le.value * 100 + e.value.style.chart.nodes.minHeight;
    }
    function xe(t) {
      const o = e.value.style.chart.nodes.minHeight;
      return (t - o) / 100 * le.value;
    }
    function $e(t) {
      const o = {}, l = {};
      function n(s, u) {
        o[s] || (o[s] = { height: 0, level: null, inflow: 0, outflow: 0 }), o[s].level === null && (o[s].level = u), l[u] || (l[u] = []), l[u].includes(s) || l[u].push(s);
      }
      t.forEach(([s, u, f], $) => {
        const w = o[s] ? o[s].level : 0, O = w + 1;
        n(s, w), n(u, O), o[s].children || (o[s].children = []), o[s].children.push({ target: u, value: f }), o[s].outflow += f, o[u].inflow += f;
      }), Object.keys(o).forEach((s, u) => {
        o[s].color = Y.value[u] || Y.value[u % Y.value.length] || V[u] || V[u % d.length];
      });
      for (const s in o)
        o[s].height = Ce(Math.max(o[s].inflow, o[s].outflow)), o[s].name = s;
      const a = {};
      for (const s in l) {
        let u = 0;
        l[s].forEach((f, $) => {
          const w = o[f].height;
          a[f] = {
            x: parseInt(s, 10) * te.value + e.value.style.chart.padding.left,
            y: u,
            absoluteY: u,
            height: w,
            i: $,
            color: o[f].color,
            value: xe(w)
          }, u += w + ee.value;
        });
      }
      const c = [];
      for (const s in o) {
        let u = a[s].absoluteY;
        o[s].children && o[s].children.forEach(({ target: f, value: $ }, w) => {
          const O = a[f].y, B = a[s], A = a[f], se = v(u), ue = v(u + $ / o[s].outflow * B.height), re = v(O), ie = v(O + $ / o[f].inflow * A.height), Le = {
            id: he(),
            source: s,
            target: f,
            path: `M ${v(B.x) + v(x.value)} ${se} L ${v(B.x) + v(x.value)} ${ue} L ${v(A.x)} ${ie} L ${v(A.x)} ${re} Z`,
            value: $,
            sourceColor: o[s].color,
            targetColor: o[f].color
          };
          c.push(Le), u += ue - se, a[f].y += ie - re;
        });
      }
      return { nodeCoordinates: a, links: c };
    }
    const p = m(() => {
      const t = $e(g.dataset);
      return {
        nodes: Object.keys(t.nodeCoordinates).map((o, l) => ({
          ...t.nodeCoordinates[o],
          name: o
        })),
        links: t.links
      };
    }), _e = m(() => Ne(p.value.nodes));
    function Ne(t) {
      const o = {};
      for (const n in t) {
        const { x: a, height: c } = t[n];
        o[a] || (o[a] = 0), o[a] += c + ee.value;
      }
      return Math.max(...Object.values(o));
    }
    const G = m(() => {
      const { top: t, right: o, left: l, bottom: n } = e.value.style.chart.padding, a = D.value.length * te.value;
      return {
        height: _e.value + t + n,
        width: o + Math.max(...p.value.nodes.map((c) => c.x)) + x.value,
        left: l,
        top: t,
        right: a - o,
        p_top: t,
        p_bottom: n
      };
    });
    function Te(t) {
      const o = {}, l = {}, n = /* @__PURE__ */ new Set();
      return D.value.forEach(([a, c, s]) => {
        o[a] || (o[a] = []), l[c] || (l[c] = []), o[a].push(c), l[c].push(a);
      }), o[t] && o[t].forEach((a) => n.add(a)), l[t] && l[t].forEach((a) => n.add(a)), Array.from(n).concat(t);
    }
    const b = y(null), L = y(null);
    function Pe(t) {
      b.value = Te(t.name), L.value = t.name;
    }
    function Fe() {
      b.value = null, L.value = null;
    }
    const oe = m(() => p.value.links.map(({ source: t, target: o, sourceColor: l, targetColor: n, value: a }) => ({
      source: t,
      target: o,
      sourceColor: l,
      targetColor: n,
      value: a
    })));
    function ae() {
      Me(() => {
        const t = oe.value.map((n, a) => [
          [n.source],
          [n.target],
          [n.value]
        ]), o = [
          [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), l = Xe(o);
        We({
          csvContent: l,
          title: e.value.style.chart.title.text || "vue-ui-flow"
        });
      });
    }
    const H = m(() => {
      const t = [
        e.value.table.columnNames.source,
        e.value.table.columnNames.target,
        e.value.table.columnNames.value
      ], o = oe.value.map((a, c) => [
        {
          color: a.sourceColor,
          name: a.source
        },
        {
          color: a.targetColor,
          name: a.target
        },
        me({
          p: e.value.style.chart.nodes.labels.prefix,
          v: a.value,
          s: e.value.style.chart.nodes.labels.suffix,
          r: e.value.style.chart.nodes.labels.rounding
        })
      ]), l = {
        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: o,
        config: l
      };
    });
    function Ie() {
      return p.value;
    }
    function ne() {
      I.value.showTable = !I.value.showTable;
    }
    return ye({
      getData: Ie,
      generateCsv: ae,
      generateImage: Q,
      generatePdf: J,
      toggleTable: ne
    }), (t, o) => (r(), h("div", {
      ref_key: "flowChart",
      ref: X,
      class: ce(`vue-ui-flow ${N.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
      style: _(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
      id: `flow_${z.value}`
    }, [
      e.value.style.chart.title.text ? (r(), h("div", ot, [
        (r(), E(qe, {
          key: `title_${q.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 && M.value ? (r(), E(Re, {
        ref: "details",
        key: `user_option_${W.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: i(R),
        isImaging: i(Z),
        uid: z.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: N.value,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: X.value,
        position: e.value.userOptions.position,
        onToggleFullscreen: we,
        onGeneratePdf: i(J),
        onGenerateCsv: ae,
        onGenerateImage: i(Q),
        onToggleTable: ne
      }, Ee({ _: 2 }, [
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: k(() => [
            C(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: k(() => [
            C(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: k(() => [
            C(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionTable ? {
          name: "optionTable",
          fn: k(() => [
            C(t.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: k(({ toggleFullscreen: l, isFullscreen: n }) => [
            C(t.$slots, "optionFullscreen", de(ve({ toggleFullscreen: l, isFullscreen: n })), void 0, !0)
          ]),
          key: "4"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "onGeneratePdf", "onGenerateImage"])) : T("", !0),
      (r(), h("svg", {
        xmlns: i(Ue),
        viewBox: `0 0 ${G.value.width} ${G.value.height}`,
        class: ce({ "vue-data-ui-fullscreen--on": N.value, "vue-data-ui-fulscreen--off": !N.value }),
        style: _(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
      }, [
        fe(et),
        S("defs", null, [
          (r(!0), h(P, null, F(p.value.links, (l, n) => (r(), h("linearGradient", {
            id: l.id,
            x1: "0%",
            y1: "0%",
            x2: "100%",
            y2: "0%"
          }, [
            S("stop", {
              offset: "0%",
              "stop-color": l.sourceColor
            }, null, 8, st),
            S("stop", {
              offset: "100%",
              "stop-color": l.targetColor
            }, null, 8, ut)
          ], 8, nt))), 256))
        ]),
        (r(!0), h(P, null, F(p.value.links, (l) => (r(), h("path", {
          class: "vue-ui-flow-link",
          d: l.path,
          fill: `url(#${l.id})`,
          stroke: e.value.style.chart.links.stroke,
          "stroke-width": e.value.style.chart.links.strokeWidth,
          style: _(`opacity:${L.value ? [l.target, l.source].includes(L.value) ? 1 : 0.3 : e.value.style.chart.links.opacity}`)
        }, null, 12, rt))), 256)),
        (r(!0), h(P, null, F(p.value.nodes, (l, n) => (r(), h("rect", {
          class: "vue-ui-flow-node",
          x: l.x,
          y: i(v)(l.absoluteY),
          height: i(v)(l.height),
          width: x.value,
          fill: l.color,
          stroke: e.value.style.chart.nodes.stroke,
          "stroke-width": e.value.style.chart.nodes.strokeWidth,
          onMouseenter: (a) => Pe(l),
          onMouseleave: o[0] || (o[0] = (a) => Fe()),
          style: _(`opacity:${b.value ? b.value.includes(l.name) ? 1 : 0.2 : 1}`)
        }, null, 44, it))), 256)),
        (r(!0), h(P, null, F(p.value.nodes, (l, n) => (r(), h("text", {
          x: l.x + x.value / 2,
          y: i(v)(l.absoluteY + l.height / 2 - e.value.style.chart.nodes.labels.fontSize / 4),
          "font-size": e.value.style.chart.nodes.labels.fontSize,
          fill: i(ge)(l.color),
          "text-anchor": "middle",
          style: _(`pointer-events: none; opacity:${b.value ? b.value.includes(l.name) ? 1 : 0 : 1}`)
        }, U(e.value.style.chart.nodes.labels.abbreviation.use ? i(Ve)({ source: l.name, length: e.value.style.chart.nodes.labels.abbreviation.length }) : l.name), 13, ct))), 256)),
        (r(!0), h(P, null, F(p.value.nodes, (l, n) => (r(), h("text", {
          x: l.x + x.value / 2,
          y: i(v)(l.absoluteY + l.height / 2 + e.value.style.chart.nodes.labels.fontSize),
          "font-size": e.value.style.chart.nodes.labels.fontSize,
          fill: i(ge)(l.color),
          "text-anchor": "middle",
          style: _(`pointer-events: none; opacity:${b.value ? b.value.includes(l.name) ? 1 : 0 : 1}`)
        }, U(i(je)(
          e.value.style.chart.nodes.labels.formatter,
          l.value,
          i(me)({
            p: e.value.style.chart.nodes.labels.prefix,
            v: l.value,
            s: e.value.style.chart.nodes.labels.suffix,
            r: e.value.style.chart.nodes.labels.rounding
          }),
          { datapoint: l, seriesIndex: n }
        )), 13, dt))), 256)),
        C(t.$slots, "svg", { svg: G.value }, void 0, !0)
      ], 14, at)),
      t.$slots.watermark ? (r(), h("div", vt, [
        C(t.$slots, "watermark", de(ve({ isPrinting: i(R) || i(Z) })), void 0, !0)
      ])) : T("", !0),
      M.value ? T("", !0) : (r(), E(Qe, {
        key: 3,
        config: {
          type: "flow",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor
          }
        }
      }, null, 8, ["config"])),
      M.value ? (r(), E(Je, {
        key: 4,
        hideDetails: "",
        config: {
          open: I.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: k(() => [
          fe(Ze, {
            colNames: H.value.colNames,
            head: H.value.head,
            body: H.value.body,
            config: H.value.config,
            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
            onClose: o[1] || (o[1] = (l) => I.value.showTable = !1)
          }, {
            th: k(({ th: l }) => [
              S("div", {
                innerHTML: l,
                style: { display: "flex", "align-items": "center" }
              }, null, 8, ft)
            ]),
            td: k(({ td: l }) => [
              Se(U(l.name || l), 1)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"])
        ]),
        _: 1
      }, 8, ["config"])) : T("", !0)
    ], 14, lt));
  }
}, _t = /* @__PURE__ */ tt(ht, [["__scopeId", "data-v-53bf76e7"]]);
export {
  _t as default
};
