import { useCssVars as De, computed as g, openBlock as u, createElementBlock as m, createVNode as se, renderSlot as d, createElementVNode as S, normalizeStyle as j, pushScopeId as Ee, popScopeId as Ge, ref as n, watch as le, onMounted as Le, onBeforeUnmount as Xe, unref as h, createBlock as P, createCommentVNode as y, createSlots as je, withCtx as p, normalizeProps as A, guardReactiveProps as _, normalizeClass as ke, Fragment as qe, renderList as He, toDisplayString as we, createTextVNode as Ye, nextTick as $e } from "vue";
import { u as Je, a4 as Ke, v as Qe, c as xe, t as Ze, a as et, p as X, o as tt, e as Se, g as ot, f as at, X as lt, q as st, r as nt, x as rt } from "./index-CxkSLqkR.js";
import { _ as ut } from "./Title-DlWf9Ddn.js";
import { u as it, U as ct } from "./usePrinter-C6iBjau1.js";
import { d as dt, t as vt, u as ht } from "./useResponsive-CoxXLe23.js";
import mt from "./vue-ui-accordion-ElsMWD7y.js";
import { D as pt } from "./DataTable-BE81z-1L.js";
import ft from "./BaseIcon-BjMszQcM.js";
import { _ as Fe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
import { u as Te } from "./useNestedProp-Cl0RLl8U.js";
import { _ as gt } from "./PackageVersion-CZWTAkjP.js";
import { _ as bt } from "./Tooltip-CvkadVaG.js";
import { P as yt } from "./PenAndPaper-B-Xy37LR.js";
import { u as Ct } from "./useUserOptionState-BIvW1Kz7.js";
const kt = (c) => (Ee("data-v-b4e6aee9"), c = c(), Ge(), c), wt = { "data-html2canvas-ignore": "" }, $t = {
  key: 0,
  class: "reset-wrapper"
}, xt = {
  key: 1,
  class: "reset-wrapper"
}, St = { class: "mono-slicer" }, Tt = /* @__PURE__ */ kt(() => /* @__PURE__ */ S("div", { class: "slider-track" }, null, -1)), Ft = ["min", "max", "value"], Nt = {
  __name: "MonoSlicer",
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 0
    },
    inputColor: {
      type: String,
      default: "#1A1A1A"
    },
    background: {
      type: String,
      default: "#FFFFFF"
    },
    borderColor: {
      type: String,
      default: "#FFFFFF"
    },
    selectColor: {
      type: String,
      default: "#4A4A4A"
    },
    textColor: {
      type: String,
      default: "#1A1A1A"
    },
    useResetSlot: {
      type: Boolean,
      default: !1
    },
    value: {
      type: Number,
      default: 0
    },
    source: {
      type: Number,
      default: 0
    }
  },
  emits: ["update:value", "reset"],
  setup(c, { emit: U }) {
    const r = c;
    De((x) => ({
      "782b8172": q.value,
      "102109e6": I.value,
      "642212d7": $.value,
      "1f5369d4": c.selectColor,
      "22b98ab8": T.value
    }));
    const q = g(() => r.inputColor), T = g(() => r.background), $ = g(() => `${r.selectColor}33`), I = g(() => r.borderColor);
    function M() {
      U("reset");
    }
    const C = g(() => {
      const x = r.max - r.min, k = 0, F = (r.value - r.min) / x * 100;
      return {
        left: `${k}%`,
        width: `${F - k}%`,
        background: r.selectColor
      };
    });
    return (x, k) => (u(), m("div", wt, [
      c.value !== c.source ? (u(), m("div", $t, [
        c.useResetSlot ? d(x.$slots, "reset-action", {
          key: 1,
          reset: M
        }, void 0, !0) : (u(), m("button", {
          key: 0,
          "data-cy-reset": "",
          tabindex: "0",
          role: "button",
          class: "vue-data-ui-refresh-button",
          onClick: M
        }, [
          se(ft, {
            name: "refresh",
            stroke: c.textColor
          }, null, 8, ["stroke"])
        ]))
      ])) : (u(), m("div", xt)),
      S("div", St, [
        Tt,
        S("div", {
          class: "range-highlight",
          style: j(C.value)
        }, null, 4),
        S("input", {
          type: "range",
          min: c.min,
          max: c.max,
          value: Number(c.value),
          onInput: k[0] || (k[0] = (F) => U("update:value", Number(F.target.value)))
        }, null, 40, Ft)
      ])
    ]));
  }
}, zt = /* @__PURE__ */ Fe(Nt, [["__scopeId", "data-v-b4e6aee9"]]), Ot = ["id"], Pt = ["xmlns", "viewBox"], At = ["width", "height"], _t = ["transform"], It = ["fill", "font-weight", "x", "y", "font-size", "transform", "onMouseover"], Mt = {
  key: 4,
  class: "vue-data-ui-watermark"
}, Wt = ["innerHTML"], Rt = {
  __name: "vue-ui-word-cloud",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: [Array, String],
      default() {
        return [];
      }
    }
  },
  setup(c, { expose: U }) {
    const r = c, { vue_ui_word_cloud: q } = Je(), T = g({
      get() {
        return !!r.dataset && r.dataset.length;
      },
      set(t) {
        return t;
      }
    }), $ = n(typeof r.dataset == "string" ? Ke(r.dataset) : r.dataset.map((t, a) => ({
      ...t,
      value: Qe(t.value)
    }))), I = n(xe()), M = n(0), C = n(null), x = n(null), k = n(null), F = n(0), ne = n(0), H = n(!1), e = g({
      get: () => ie(),
      set: (t) => t
    }), { userOptionsVisible: Y, setUserOptionsVisibility: re, keepUserOptionState: ue } = Ct({ config: e.value });
    function ie() {
      const t = Te({
        userConfig: r.config,
        defaultConfig: q
      });
      return t.theme ? {
        ...Te({
          userConfig: Ze.vue_ui_word_cloud[t.theme] || r.config,
          defaultConfig: t
        }),
        customPalette: et[t.theme] || X
      } : t;
    }
    le(() => r.config, (t) => {
      e.value = ie(), Y.value = !e.value.userOptions.showOnChartHover, de(), F.value += 1, ne.value += 1, J(), v.value.showTable = e.value.table.show, v.value.showTooltip = e.value.style.chart.tooltip.show;
    }, { deep: !0 });
    const ce = n(null), N = n(0), s = n({
      width: e.value.style.chart.width,
      height: e.value.style.chart.height,
      maxFontSize: e.value.style.chart.words.maxFontSize,
      minFontSize: e.value.style.chart.words.minFontSize
    }), Ne = vt(() => {
      const { width: t, height: a } = ht({
        chart: C.value,
        title: e.value.style.chart.title.text ? x.value : null,
        slicer: e.value.style.chart.zoom.show && ce.value,
        source: k.value
      });
      requestAnimationFrame(() => {
        s.value.width = t, s.value.height = a, $e(Q);
      });
    });
    le(() => N.value, () => {
      ze();
    });
    const ze = dt(() => {
      Q();
    }, 10);
    function J() {
      N.value = K.value;
    }
    const V = n(null);
    Le(() => {
      de(), J();
    });
    function de() {
      tt(r.dataset) ? Se({
        componentName: "VueUiWordCloud",
        type: "dataset"
      }) : $.value.forEach((t, a) => {
        ot({
          datasetObject: t,
          requiredAttributes: ["name", "value"]
        }).forEach((o) => {
          T.value = !1, Se({
            componentName: "VueUiWordCloud",
            type: "datasetSerieAttribute",
            property: o,
            index: a
          });
        });
      }), e.value.responsive && (V.value = new ResizeObserver(Ne), V.value.observe(C.value.parentNode));
    }
    Xe(() => {
      V.value && V.value.disconnect();
    });
    const { isPrinting: ve, isImaging: he, generatePdf: me, generateImage: pe } = it({
      elementId: `wordCloud_${I.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-word-cloud"
    }), v = n({
      showTable: e.value.table.show,
      showTooltip: e.value.style.chart.tooltip.show
    });
    function Oe(t, a, o = "Arial") {
      const l = document.createElement("canvas").getContext("2d");
      return l.font = `${a}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${o}`, {
        width: l.measureText(t).width + e.value.style.chart.words.proximity,
        height: a
      };
    }
    function Pe(t, a) {
      return t.x < a.x + a.width && t.x + t.width > a.x && t.y < a.y + a.height && t.y + t.height > a.y;
    }
    function Ae(t, a, o) {
      const i = [], l = { x: -a / 2, y: -o / 2, width: a, height: o }, f = 0, b = 0;
      return t.forEach((O) => {
        let oe = !1;
        for (let L = 0; L < Math.max(a, o) / 2 && !oe; L += e.value.style.chart.words.packingWeight)
          for (let ae = 0; ae < 360 && !oe; ae += e.value.style.chart.words.packingWeight) {
            const Ce = ae * Math.PI / 180, We = f + L * Math.cos(Ce) - O.width / 2, Re = b + L * Math.sin(Ce) - O.height / 2, w = { ...O, x: We, y: Re }, Ue = w.x >= l.x && w.y >= l.y && w.x + w.width <= l.x + l.width && w.y + w.height <= l.y + l.height, Ve = i.some((Be) => Pe(w, Be));
            Ue && !Ve && (i.push(w), oe = !0);
          }
      }), i;
    }
    const W = n([]);
    le(() => r.dataset, Q, { immediate: !0 });
    const K = g(() => Math.round(Math.min(...$.value.map((t) => t.value)))), fe = g(() => Math.round(Math.max(...$.value.map((t) => t.value))));
    function Q() {
      const t = [...$.value].filter((l) => l.value >= N.value).map((l) => l.value), a = Math.max(...t), o = Math.min(...t), i = [...$.value].filter((l) => l.value >= N.value).map((l, f) => {
        let b = (l.value - o) / (a - o) * (s.value.maxFontSize - s.value.minFontSize) + s.value.minFontSize;
        b = isNaN(b) ? s.value.minFontSize : b;
        const O = Oe(l.name, b);
        return {
          ...l,
          id: xe(),
          fontSize: b,
          width: O.width,
          height: O.height,
          color: e.value.style.chart.words.usePalette ? e.value.customPalette[f] || e.value.customPalette[f % e.value.customPalette.length] || X[f] || X[f % X.length] : e.value.style.chart.words.color
        };
      });
      W.value = Ae(i, s.value.width, s.value.height).sort((l, f) => f.fontSize - l.fontSize);
    }
    const B = g(() => {
      const t = W.value.map((o) => ({
        name: o.name,
        color: o.color
      })), a = W.value.map((o) => o.value);
      return { head: t, body: a };
    });
    function ge() {
      $e(() => {
        const t = B.value.head.map((i, l) => [[
          i.name
        ], [B.value.body[l]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(t), o = st(a);
        nt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
      });
    }
    const D = g(() => {
      const t = [
        e.value.table.columnNames.series,
        e.value.table.columnNames.value
      ], a = B.value.head.map((l, f) => {
        const b = at({ p: e.value.table.td.prefix, v: B.value.body[f], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
        return [
          {
            color: l.color,
            name: l.name
          },
          b
        ];
      }), 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.series,
          e.value.table.columnNames.value
        ],
        head: t,
        body: a,
        config: o
      };
    }), E = n(!1);
    function _e(t) {
      E.value = t, M.value += 1;
    }
    function Ie() {
      return W.value;
    }
    function be() {
      v.value.showTable = !v.value.showTable;
    }
    function ye() {
      v.value.showTooltip = !v.value.showTooltip;
    }
    const G = n(!1);
    function Z() {
      G.value = !G.value;
    }
    U({
      getData: Ie,
      generateCsv: ge,
      generatePdf: me,
      generateImage: pe,
      toggleTable: be,
      toggleTooltip: ye,
      toggleAnnotator: Z
    });
    const z = n(null), R = n(!1), ee = n(""), te = n(null);
    function Me(t) {
      if (!v.value.showTooltip) return;
      z.value = t.id, te.value = { datapoint: t, config: e.value };
      const a = e.value.style.chart.tooltip.customFormat;
      if (R.value = !1, rt(a))
        try {
          const o = a({
            datapoint: t,
            config: e.value
          });
          typeof o == "string" && (ee.value = o, R.value = !0);
        } catch {
          console.warn("Custom format cannot be applied."), R.value = !1;
        }
      if (!R.value) {
        let o = `<svg viewBox="0 0 10 10" height="${e.value.style.chart.tooltip.fontSize}"><circle cx="5" cy="5" r="5" fill="${t.color}"/></svg><span>${t.name}:</span><b>${(t.value || 0).toFixed(e.value.style.chart.tooltip.roundingValue)}</b>`;
        ee.value = `<div dir="auto" style="display:flex; gap:4px; align-items:center; jsutify-content:center;">${o}</div>`;
      }
      H.value = !0;
    }
    return (t, a) => (u(), m("div", {
      class: "vue-ui-word-cloud",
      ref_key: "wordCloudChart",
      ref: C,
      id: `wordCloud_${I.value}`,
      style: j(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
      onMouseenter: a[3] || (a[3] = () => h(re)(!0)),
      onMouseleave: a[4] || (a[4] = () => h(re)(!1))
    }, [
      e.value.userOptions.buttons.annotator ? (u(), P(yt, {
        key: 0,
        parent: C.value,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        active: G.value,
        onClose: Z
      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
      e.value.style.chart.title.text ? (u(), m("div", {
        key: 1,
        ref_key: "chartTitle",
        ref: x,
        style: "width:100%;background:transparent;padding-bottom:24px"
      }, [
        (u(), P(ut, {
          key: `title_${F.value}`,
          config: {
            title: {
              ...e.value.style.chart.title
            },
            subtitle: {
              ...e.value.style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 512)) : y("", !0),
      e.value.userOptions.show && T.value && (h(ue) || h(Y)) ? (u(), P(ct, {
        ref: "details",
        key: `user_option_${M.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: h(ve),
        isImaging: h(he),
        uid: I.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: E.value,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: C.value,
        position: e.value.userOptions.position,
        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
        isTooltip: v.value.showTooltip,
        hasAnnotator: e.value.userOptions.buttons.annotator,
        isAnnotation: G.value,
        onToggleFullscreen: _e,
        onGeneratePdf: h(me),
        onGenerateCsv: ge,
        onGenerateImage: h(pe),
        onToggleTable: be,
        onToggleTooltip: ye,
        onToggleAnnotator: Z,
        style: j({
          visibility: h(ue) ? h(Y) ? "visible" : "hidden" : "visible"
        })
      }, je({ _: 2 }, [
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: p(() => [
            d(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: p(() => [
            d(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: p(() => [
            d(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionTable ? {
          name: "optionTable",
          fn: p(() => [
            d(t.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: p(({ toggleFullscreen: o, isFullscreen: i }) => [
            d(t.$slots, "optionFullscreen", A(_({ toggleFullscreen: o, isFullscreen: i })), void 0, !0)
          ]),
          key: "4"
        } : void 0,
        t.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: p(({ toggleAnnotator: o, isAnnotator: i }) => [
            d(t.$slots, "optionAnnotator", A(_({ toggleAnnotator: o, isAnnotator: i })), void 0, !0)
          ]),
          key: "5"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
      T.value ? (u(), m("svg", {
        key: 3,
        class: ke({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
        xmlns: h(lt),
        viewBox: `0 0 ${s.value.width <= 0 ? 10 : s.value.width} ${s.value.height <= 0 ? 10 : s.value.height}`,
        style: "overflow:visible;background:transparent;"
      }, [
        se(gt),
        t.$slots["chart-background"] ? (u(), m("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: s.value.width <= 0 ? 10 : s.value.width,
          height: s.value.height <= 0 ? 10 : s.value.height,
          style: {
            pointerEvents: "none"
          }
        }, [
          d(t.$slots, "chart-background", {}, void 0, !0)
        ], 8, At)) : y("", !0),
        S("g", {
          transform: `translate(${(s.value.width <= 0 ? 10 : s.value.width) / 2}, ${(s.value.height <= 0 ? 10 : s.value.height) / 2})`
        }, [
          (u(!0), m(qe, null, He(W.value, (o, i) => (u(), m("g", null, [
            (u(), m("text", {
              fill: o.color,
              "font-weight": e.value.style.chart.words.bold ? "bold" : "normal",
              key: i,
              x: o.x,
              y: o.y,
              "font-size": o.fontSize,
              transform: `translate(${o.width / 2}, ${o.height / 2})`,
              class: ke({ animated: e.value.useCssAnimation, "word-selected": z.value && z.value === o.id && v.value.showTooltip, "word-not-selected": z.value && z.value !== o.id && v.value.showTooltip }),
              "text-anchor": "middle",
              "dominant-baseline": "central",
              onMouseover: (l) => Me(o),
              onMouseleave: a[0] || (a[0] = (l) => {
                z.value = null, H.value = !1;
              }),
              style: j(`animation-delay:${i * e.value.animationDelayMs}ms !important;`)
            }, we(o.name), 47, It))
          ]))), 256))
        ], 8, _t),
        d(t.$slots, "svg", {
          svg: { height: s.value.height, width: s.value.width }
        }, void 0, !0)
      ], 10, Pt)) : y("", !0),
      t.$slots.watermark ? (u(), m("div", Mt, [
        d(t.$slots, "watermark", A(_({ isPrinting: h(ve) || h(he) })), void 0, !0)
      ])) : y("", !0),
      se(bt, {
        show: v.value.showTooltip && H.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: C.value,
        content: ee.value,
        isCustom: R.value
      }, {
        "tooltip-before": p(() => [
          d(t.$slots, "tooltip-before", A(_({ ...te.value })), void 0, !0)
        ]),
        "tooltip-after": p(() => [
          d(t.$slots, "tooltip-after", A(_({ ...te.value })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
      S("div", {
        ref_key: "chartSlicer",
        ref: ce,
        style: "width:100%;background:transparent",
        "data-html2canvas-ignore": ""
      }, [
        e.value.style.chart.zoom.show && K.value < fe.value ? (u(), P(zt, {
          key: 0,
          value: N.value,
          "onUpdate:value": a[1] || (a[1] = (o) => N.value = o),
          min: K.value,
          max: fe.value,
          textColor: e.value.style.chart.color,
          inputColor: e.value.style.chart.zoom.color,
          selectColor: e.value.style.chart.zoom.highlightColor,
          useResetSlot: e.value.style.chart.zoom.useResetSlot,
          background: e.value.style.chart.zoom.color,
          borderColor: e.value.style.chart.backgroundColor,
          source: e.value.style.chart.width,
          onReset: J
        }, {
          "reset-action": p(({ reset: o }) => [
            d(t.$slots, "reset-action", A(_({ reset: o })), void 0, !0)
          ]),
          _: 3
        }, 8, ["value", "min", "max", "textColor", "inputColor", "selectColor", "useResetSlot", "background", "borderColor", "source"])) : y("", !0)
      ], 512),
      t.$slots.source ? (u(), m("div", {
        key: 5,
        ref_key: "source",
        ref: k,
        dir: "auto"
      }, [
        d(t.$slots, "source", {}, void 0, !0)
      ], 512)) : y("", !0),
      T.value ? (u(), P(mt, {
        key: 6,
        hideDetails: "",
        config: {
          open: v.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: p(() => [
          (u(), P(pt, {
            key: `table_${ne.value}`,
            colNames: D.value.colNames,
            head: D.value.head,
            body: D.value.body,
            config: D.value.config,
            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
            onClose: a[2] || (a[2] = (o) => v.value.showTable = !1)
          }, {
            th: p(({ th: o }) => [
              S("div", {
                innerHTML: o,
                style: { display: "flex", "align-items": "center" }
              }, null, 8, Wt)
            ]),
            td: p(({ td: o }) => [
              Ye(we(o.name || o), 1)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"]))
        ]),
        _: 1
      }, 8, ["config"])) : y("", !0)
    ], 44, Ot));
  }
}, Qt = /* @__PURE__ */ Fe(Rt, [["__scopeId", "data-v-71c044b2"]]);
export {
  Qt as default
};
