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