import { useSlots as tt, onMounted as Fe, computed as h, ref as d, watch as ze, onBeforeUnmount as lt, openBlock as n, createElementBlock as i, normalizeClass as Ne, unref as e, normalizeStyle as E, createBlock as z, createCommentVNode as y, createSlots as at, withCtx as m, renderSlot as g, normalizeProps as q, guardReactiveProps as H, createVNode as Be, createElementVNode as k, Fragment as I, renderList as U, mergeProps as ot, toDisplayString as S, createTextVNode as Ve, nextTick as st } from "vue";
import { u as rt, c as nt, t as ut, a as it, p as N, o as ct, e as re, g as dt, b as ht, i as G, f as x, X as vt, s as pt, w as ft, G as yt, L as gt, d as mt, x as bt, y as wt, q as kt, r as xt } from "./index-WrV3SAID.js";
import { t as Ct, u as $t } from "./useResponsive-CoxXLe23.js";
import { _ as _t } from "./Title-BR-xoRp4.js";
import { u as Tt, U as It } from "./usePrinter-kVpf1iV8.js";
import { _ as St } from "./Tooltip-ho4JxRm-.js";
import { D as Pt } from "./DataTable-DNPvKWC0.js";
import { L as Lt } from "./Legend-7H4oi6Sq.js";
import Ot from "./vue-ui-skeleton-Qec_XSRf.js";
import At from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Me } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Ft } from "./PackageVersion-1NslmM8M.js";
import { P as zt } from "./PenAndPaper-BF1ZRVm3.js";
import { u as Nt } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as Bt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Vt = ["id"], Mt = ["xmlns", "viewBox"], Dt = ["id"], Ut = ["stop-color"], Gt = ["stop-color"], Rt = ["id"], Wt = ["x", "y", "height", "width"], jt = ["height", "width"], Et = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], qt = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], Ht = ["x", "y", "height", "width", "filter"], Xt = { key: 0 }, Yt = { key: 1 }, Jt = { key: 2 }, Kt = { key: 3 }, Qt = ["onMouseover", "x", "y", "height", "width"], Zt = {
  key: 5,
  class: "vue-data-ui-watermark"
}, el = ["onClick"], tl = { key: 0 }, ll = { key: 1 }, al = ["innerHTML"], ol = {
  __name: "vue-ui-waffle",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectLegend"],
  setup(De, { expose: Ue, emit: Ge }) {
    const { vue_ui_waffle: Re } = rt(), b = De, We = tt();
    Fe(() => {
      We["chart-background"] && console.warn("VueUiWaffle does not support the #chart-background slot.");
    });
    const X = h(() => !!b.dataset && b.dataset.length), P = d(nt()), je = d(null), Z = d(!1), ee = d(""), B = d(null), ne = d(0), V = d(null), ue = d(null), ie = d(null), ce = d(null), de = d(null), he = d(0), ve = d(0), pe = d(0), t = h({
      get: () => ge(),
      set: (l) => l
    }), { userOptionsVisible: te, setUserOptionsVisibility: fe, keepUserOptionState: ye } = Nt({ config: t.value });
    function ge() {
      const l = Me({
        userConfig: b.config,
        defaultConfig: Re
      });
      return l.theme ? {
        ...Me({
          userConfig: ut.vue_ui_waffle[l.theme] || b.config,
          defaultConfig: l
        }),
        customPalette: it[l.theme] || N
      } : l;
    }
    ze(() => b.config, (l) => {
      t.value = ge(), te.value = !t.value.showOnChartHover, me(), he.value += 1, ve.value += 1, pe.value += 1;
    }, { deep: !0 });
    const Y = d(null);
    function me() {
      if (ct(b.dataset) ? re({
        componentName: "VueUiWaffle",
        type: "dataset"
      }) : b.dataset.forEach((l, o) => {
        dt({
          datasetObject: l,
          requiredAttributes: ["name", "values"]
        }).forEach((a) => {
          re({
            componentName: "VueUiWaffle",
            type: "datasetSerieAttribute",
            property: a,
            index: o
          });
        });
      }), t.value.responsive) {
        const l = Ct(() => {
          const { width: o, height: a } = $t({
            chart: V.value,
            title: t.value.style.chart.title.text ? ue.value : null,
            legend: t.value.style.chart.legend.show ? ie.value : null,
            source: ce.value,
            noTitle: de.value
          });
          L.value.width = o, L.value.height = a, C.value.width = o, C.value.height = a;
        });
        Y.value = new ResizeObserver(l), Y.value.observe(V.value.parentNode);
      }
    }
    Fe(() => {
      me();
    }), lt(() => {
      Y.value && Y.value.disconnect();
    });
    const { isPrinting: be, isImaging: we, generatePdf: ke, generateImage: xe } = Tt({
      elementId: `vue-ui-waffle_${P.value}`,
      fileName: t.value.style.chart.title.text || "vue-ui-waffle"
    }), Ee = h(() => t.value.userOptions.show && !t.value.style.chart.title.text), Ce = h(() => ht(t.value.customPalette)), T = d({
      showTable: t.value.table.show,
      showTooltip: t.value.style.chart.tooltip.show
    }), L = d({
      height: 512,
      width: 512
    }), C = d({
      top: 0,
      left: 0,
      height: 512,
      width: 512
    }), O = h(() => (C.value.width - t.value.style.chart.layout.grid.size * t.value.style.chart.layout.grid.spaceBetween) / t.value.style.chart.layout.grid.size), A = h(() => (C.value.height - t.value.style.chart.layout.grid.size * t.value.style.chart.layout.grid.spaceBetween) / t.value.style.chart.layout.grid.size), R = h(() => C.value.width / t.value.style.chart.layout.grid.size), J = h(() => C.value.height / t.value.style.chart.layout.grid.size);
    function $e(l) {
      const o = t.value.style.chart.layout.grid.size * t.value.style.chart.layout.grid.size, a = l.reduce((w, se) => w + se, 0), s = l.map((w) => w / a * o), r = s.map(Math.floor), c = s.map((w) => w % 1);
      let f = o - r.reduce((w, se) => w + se, 0);
      for (; f > 0; ) {
        let w = c.indexOf(Math.max(...c));
        r[w] += 1, c[w] = 0, f -= 1;
      }
      return r;
    }
    function _e() {
      return b.dataset.map((l, o) => ({
        ...l,
        color: mt(l.color) || Ce.value[o] || N[o] || N[o % N.length],
        uid: `serie_${o}`,
        absoluteIndex: o
      }));
    }
    const Te = h(() => _e()), v = d(Te.value);
    ze(() => b.dataset, (l) => {
      v.value = _e();
    }, { deep: !0 });
    const qe = h(() => {
      const l = v.value.filter((o, a) => !p.value.includes(o.uid)).map((o, a) => (o.values || []).reduce((s, r) => s + r, 0));
      return $e(l);
    }), He = h(() => {
      const l = v.value.map((o, a) => (o.values || []).reduce((s, r) => s + r));
      return $e(l);
    }), W = h(() => (b.dataset.forEach((l, o) => {
      [null, void 0].includes(l.values) && re({
        componentName: "VueUiWaffle",
        type: "datasetSerieAttribute",
        property: "values (number[])",
        index: o
      });
    }), v.value.filter((l, o) => !p.value.includes(l.uid)).map((l, o) => ({
      absoluteIndex: l.absoluteIndex,
      uid: l.uid,
      name: l.name,
      color: l.color,
      value: (l.values || []).reduce((a, s) => a + s, 0),
      absoluteValues: l.values || [],
      proportion: qe.value[o]
    })))), Xe = h(() => v.value.map((l, o) => ({
      absoluteIndex: l.absoluteIndex,
      uid: l.uid,
      name: l.name,
      color: l.color,
      value: (l.values || []).reduce((a, s) => a + s, 0),
      absoluteValues: l.values || [],
      proportion: He.value[o]
    })));
    function Ye() {
      return Xe.value.map((l) => ({
        name: l.name,
        color: l.color,
        value: l.value,
        proportion: l.proportion
      }));
    }
    const Je = h(() => {
      let l = 0;
      return W.value.map((o, a) => {
        const s = l, r = s + o.proportion, c = [];
        for (let f = Math.floor(s); f < Math.floor(r); f += 1)
          c.push(f);
        return l = r, {
          ...o,
          start: s,
          rects: c
        };
      });
    }), u = h(() => Je.value.flatMap((l, o) => l.rects.map((a, s) => ({
      isFirst: s === 0,
      isLongEnough: a.length > 2,
      name: l.name,
      color: l.color,
      value: l.value,
      serieIndex: o,
      absoluteStartIndex: s < 3,
      serieId: l.uid,
      ...l
    }))).map((l, o) => ({
      ...l,
      isAbsoluteFirst: o % t.value.style.chart.layout.grid.size === 0
    }))), j = h(() => {
      const l = [];
      for (let o = 0; o < t.value.style.chart.layout.grid.size; o += 1)
        for (let a = 0; a < t.value.style.chart.layout.grid.size; a += 1)
          l.push({
            isStartOfLine: a === 0,
            position: t.value.style.chart.layout.grid.vertical ? o : a,
            x: (t.value.style.chart.layout.grid.vertical ? o : a) * (O.value + t.value.style.chart.layout.grid.spaceBetween),
            y: (t.value.style.chart.layout.grid.vertical ? a : o) * (A.value + t.value.style.chart.layout.grid.spaceBetween) + C.value.top
          });
      return l;
    }), p = d([]), F = d(!1), Ie = d(null), Se = d(null);
    function Pe(l) {
      if (!t.value.useAnimation) {
        p.value.includes(l) ? p.value = p.value.filter((r) => r !== l) : p.value.length < M.value.length - 1 && M.value.length > 1 && p.value.push(l);
        return;
      }
      const o = Te.value.find((r) => r.uid === l).values.reduce((r, c) => r + c, 0), a = v.value.find((r) => r.uid === l).values.reduce((r, c) => r + c, 0);
      let s = a;
      if (p.value.includes(l)) {
        let c = function() {
          s > r ? (cancelAnimationFrame(Ie.value), v.value = v.value.map((f, w) => f.uid === l ? {
            ...f,
            values: [r]
          } : f), F.value = !1) : (F.value = !0, s += r * 0.025, v.value = v.value.map((f, w) => f.uid === l ? {
            ...f,
            values: [s]
          } : f), Ie.value = requestAnimationFrame(c));
        };
        p.value = p.value.filter((f) => f !== l);
        const r = o;
        c();
      } else if (p.value.length < M.value.length - 1 && M.value.length > 1) {
        let r = function() {
          s < a / 100 ? (cancelAnimationFrame(Se.value), p.value.push(l), v.value = v.value.map((c, f) => c.uid === l ? {
            ...c,
            values: [0]
          } : c), F.value = !1) : (F.value = !0, s /= 1.15, v.value = v.value.map((c) => c.uid === l ? {
            ...c,
            values: [s]
          } : c), Se.value = requestAnimationFrame(r));
        };
        r();
      }
      Ze("selectLegend", W.value.map((r) => ({
        name: r.name,
        color: r.color,
        value: r.value,
        proportion: r.proportion / Math.pow(t.value.style.chart.layout.grid.size, 2)
      })));
    }
    const M = h(() => v.value.map((l, o) => ({
      name: l.name,
      color: l.color || Ce[o] || N[o] || N[o % N.length],
      value: (l.values || []).reduce((a, s) => a + s, 0),
      uid: l.uid,
      shape: "square"
    })).map((l) => ({
      ...l,
      proportion: l.value / v.value.map((o) => (o.values || []).reduce((a, s) => a + s, 0)).reduce((o, a) => o + a, 0),
      opacity: p.value.includes(l.uid) ? 0.5 : 1,
      segregate: () => Pe(l.uid),
      isSegregated: p.value.includes(l.uid)
    }))), Ke = h(() => ({
      cy: "waffle-div-legend",
      backgroundColor: t.value.style.chart.legend.backgroundColor,
      color: t.value.style.chart.legend.color,
      fontSize: t.value.style.chart.legend.fontSize,
      paddingBottom: 12,
      fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
    })), $ = h(() => W.value.map((l) => l.value).reduce((l, o) => l + o, 0)), le = d(null);
    function Qe(l) {
      if (p.value.length === b.dataset.length) return;
      const o = u.value[l];
      le.value = {
        datapoint: o,
        seriesIndex: o.absoluteIndex,
        series: v.value,
        config: t.value
      }, Z.value = !0, B.value = u.value[l].serieIndex;
      const a = t.value.style.chart.tooltip.customFormat;
      if (bt(a) && wt(() => a({
        seriesIndex: u.value[l].absoluteIndex,
        datapoint: o,
        series: v.value,
        config: t.value
      })))
        ee.value = a({
          seriesIndex: u.value[l].absoluteIndex,
          datapoint: o,
          series: v.value,
          config: t.value
        });
      else {
        let s = "";
        if (s += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${o.name}</div>`, s += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" stroke="none" rx="1" fill="${o.color}" /></svg>`, t.value.style.chart.tooltip.showValue && (s += `<b>${G(
          t.value.style.chart.layout.labels.dataLabels.formatter,
          o.value,
          x({
            p: t.value.style.chart.layout.labels.dataLabels.prefix,
            v: o.value,
            s: t.value.style.chart.layout.labels.dataLabels.suffix,
            r: t.value.style.chart.tooltip.roundingValue
          }),
          {
            datapoint: o,
            seriesIndex: u.value[l].absoluteIndex,
            series: v.value
          }
        )}</b>`), t.value.style.chart.tooltip.showPercentage) {
          const r = x({
            v: o.value / $.value * 100,
            s: "%",
            r: t.value.style.chart.tooltip.roundingPercentage
          });
          t.value.style.chart.tooltip.showValue ? s += `<span>(${r})</span></div>` : s += `<b>${r}%</b></div>`;
        }
        ee.value = s;
      }
    }
    const Ze = Ge, _ = h(() => {
      const l = W.value.map((a) => ({
        name: a.name,
        color: a.color
      })), o = W.value.map((a) => a.value);
      return { head: l, body: o };
    });
    function ae(l) {
      return t.value.useBlurOnHover && ![null, void 0].includes(B.value) && B.value !== l ? `url(#blur_${P.value})` : "";
    }
    function Le() {
      st(() => {
        const l = _.value.head.map((s, r) => [[
          s.name
        ], [_.value.body[r]], [isNaN(_.value.body[r] / $.value) ? "-" : _.value.body[r] / $.value * 100]]), o = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), a = kt(o);
        xt({ csvContent: a, title: t.value.style.chart.title.text || "vue-ui-waffle" });
      });
    }
    const K = h(() => {
      const l = [
        ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
        G(
          t.value.style.chart.layout.labels.dataLabels.formatter,
          $.value,
          x({
            p: t.value.style.chart.layout.labels.dataLabels.prefix,
            v: $.value,
            s: t.value.style.chart.layout.labels.dataLabels.suffix,
            r: t.value.table.td.roundingValue
          })
        ),
        "100%"
      ], o = _.value.head.map((r, c) => [
        {
          color: r.color,
          name: r.name
        },
        G(
          t.value.style.chart.layout.labels.dataLabels.formatter,
          _.value.body[c],
          x({
            p: t.value.style.chart.layout.labels.dataLabels.prefix,
            v: _.value.body[c],
            s: t.value.style.chart.layout.labels.dataLabels.suffix,
            r: t.value.table.td.roundingValue
          })
        ),
        isNaN(_.value.body[c] / $.value) ? "-" : x({
          v: _.value.body[c] / $.value * 100,
          s: "%",
          r: t.value.table.td.roundingPercentage
        })
      ]), a = {
        th: {
          backgroundColor: t.value.table.th.backgroundColor,
          color: t.value.table.th.color,
          outline: t.value.table.th.outline
        },
        td: {
          backgroundColor: t.value.table.td.backgroundColor,
          color: t.value.table.td.color,
          outline: t.value.table.td.outline
        },
        shape: "square",
        breakpoint: t.value.table.responsiveBreakpoint
      }, s = [
        t.value.table.columnNames.series,
        t.value.table.columnNames.value,
        t.value.table.columnNames.percentage
      ];
      return {
        head: l,
        body: o,
        config: a,
        colNames: s
      };
    }), D = d(!1);
    function et(l) {
      D.value = l, ne.value += 1;
    }
    function Oe() {
      T.value.showTable = !T.value.showTable;
    }
    function Ae() {
      T.value.showTooltip = !T.value.showTooltip;
    }
    const Q = d(!1);
    function oe() {
      Q.value = !Q.value;
    }
    return Ue({
      getData: Ye,
      generatePdf: ke,
      generateCsv: Le,
      generateImage: xe,
      toggleTable: Oe,
      toggleTooltip: Ae,
      toggleAnnotator: oe
    }), (l, o) => (n(), i("div", {
      class: Ne(`vue-ui-waffle ${e(D) ? "vue-data-ui-wrapper-fullscreen" : ""}`),
      ref_key: "waffleChart",
      ref: V,
      id: `vue-ui-waffle_${e(P)}`,
      style: E(`font-family:${e(t).style.fontFamily};width:100%; text-align:center;background:${e(t).style.chart.backgroundColor};${e(t).responsive ? "height: 100%" : ""}`),
      onMouseenter: o[3] || (o[3] = () => e(fe)(!0)),
      onMouseleave: o[4] || (o[4] = () => e(fe)(!1))
    }, [
      e(t).userOptions.buttons.annotator ? (n(), z(zt, {
        key: 0,
        parent: e(V),
        backgroundColor: e(t).style.chart.backgroundColor,
        color: e(t).style.chart.color,
        active: e(Q),
        onClose: oe
      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
      e(Ee) ? (n(), i("div", {
        key: 1,
        ref_key: "noTitle",
        ref: de,
        class: "vue-data-ui-no-title-space",
        style: "height:36px; width: 100%;background:transparent"
      }, null, 512)) : y("", !0),
      e(t).style.chart.title.text ? (n(), i("div", {
        key: 2,
        ref_key: "chartTitle",
        ref: ue,
        style: "width:100%;background:transparent;padding-bottom:12px"
      }, [
        (n(), z(_t, {
          key: `title_${e(he)}`,
          config: {
            title: {
              cy: "waffle-title",
              ...e(t).style.chart.title
            },
            subtitle: {
              cy: "waffle-subtitle",
              ...e(t).style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 512)) : y("", !0),
      e(t).userOptions.show && e(X) && (e(ye) || e(te)) ? (n(), z(It, {
        ref_key: "details",
        ref: je,
        key: `user_options_${e(ne)}`,
        backgroundColor: e(t).style.chart.backgroundColor,
        color: e(t).style.chart.color,
        isPrinting: e(be),
        isImaging: e(we),
        uid: e(P),
        hasTooltip: e(t).userOptions.buttons.tooltip && e(t).style.chart.tooltip.show,
        hasPdf: e(t).userOptions.buttons.pdf,
        hasImg: e(t).userOptions.buttons.img,
        hasXls: e(t).userOptions.buttons.csv,
        hasTable: e(t).userOptions.buttons.table,
        hasFullscreen: e(t).userOptions.buttons.fullscreen,
        isFullscreen: e(D),
        isTooltip: e(T).showTooltip,
        titles: { ...e(t).userOptions.buttonTitles },
        chartElement: e(V),
        position: e(t).userOptions.position,
        hasAnnotator: e(t).userOptions.buttons.annotator,
        isAnnotation: e(Q),
        onToggleFullscreen: et,
        onGeneratePdf: e(ke),
        onGenerateCsv: Le,
        onGenerateImage: e(xe),
        onToggleTable: Oe,
        onToggleTooltip: Ae,
        onToggleAnnotator: oe,
        style: E({
          visibility: e(ye) ? e(te) ? "visible" : "hidden" : "visible"
        })
      }, at({ _: 2 }, [
        l.$slots.optionTooltip ? {
          name: "optionTooltip",
          fn: m(() => [
            g(l.$slots, "optionTooltip", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        l.$slots.optionPdf ? {
          name: "optionPdf",
          fn: m(() => [
            g(l.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        l.$slots.optionCsv ? {
          name: "optionCsv",
          fn: m(() => [
            g(l.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        l.$slots.optionImg ? {
          name: "optionImg",
          fn: m(() => [
            g(l.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        l.$slots.optionTable ? {
          name: "optionTable",
          fn: m(() => [
            g(l.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        l.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: m(({ toggleFullscreen: a, isFullscreen: s }) => [
            g(l.$slots, "optionFullscreen", q(H({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
          ]),
          key: "5"
        } : void 0,
        l.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: m(({ toggleAnnotator: a, isAnnotator: s }) => [
            g(l.$slots, "optionAnnotator", q(H({ toggleAnnotator: a, isAnnotator: s })), void 0, !0)
          ]),
          key: "6"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
      e(X) ? (n(), i("svg", {
        key: 4,
        xmlns: e(vt),
        class: Ne({ "vue-data-ui-fullscreen--on": e(D), "vue-data-ui-fulscreen--off": !e(D) }),
        viewBox: `0 0 ${e(L).width <= 0 ? 10 : e(L).width} ${e(L).height <= 0 ? 10 : e(L).height}`,
        style: E(`max-width:100%;overflow:visible;background:transparent;color:${e(t).style.chart.color}`)
      }, [
        Be(Ft),
        k("defs", null, [
          (n(!0), i(I, null, U(e(u), (a, s) => (n(), i("radialGradient", {
            cx: "50%",
            cy: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%",
            id: `gradient_${e(P)}_${s}`
          }, [
            k("stop", {
              offset: "0%",
              "stop-color": e(pt)(e(ft)(a.color, 0.05), 100 - e(t).style.chart.layout.rect.gradientIntensity)
            }, null, 8, Ut),
            k("stop", {
              offset: "100%",
              "stop-color": a.color
            }, null, 8, Gt)
          ], 8, Dt))), 256))
        ]),
        k("defs", null, [
          k("filter", {
            id: `blur_${e(P)}`,
            x: "-50%",
            y: "-50%",
            width: "200%",
            height: "200%"
          }, o[5] || (o[5] = [
            k("feGaussianBlur", {
              in: "SourceGraphic",
              stdDeviation: 2
            }, null, -1),
            k("feColorMatrix", {
              type: "saturate",
              values: "0"
            }, null, -1)
          ]), 8, Rt)
        ]),
        e(t).useCustomCells && e(u).length ? (n(!0), i(I, { key: 0 }, U(e(j), (a, s) => (n(), i("foreignObject", {
          x: a.x,
          y: a.y,
          height: e(A) <= 0 ? 1e-4 : e(A),
          width: e(O) <= 0 ? 1e-4 : e(O),
          class: "vue-ui-waffle-custom-cell-foreignObject"
        }, [
          g(l.$slots, "cell", ot({ ref_for: !0 }, { cell: { ...a, color: e(u)[s].color, ...e(u)[s] }, isSelected: [null, void 0].includes(e(B)) ? !0 : e(u)[s].serieIndex === e(B) }), void 0, !0)
        ], 8, Wt))), 256)) : y("", !0),
        !e(u).length && !e(t).useCustomCells ? (n(), i("rect", {
          key: 1,
          x: 12,
          y: 12,
          height: e(C).height - 24,
          width: e(C).width - 24,
          rx: 3,
          fill: "none",
          stroke: "black"
        }, null, 8, jt)) : e(u).length && !e(t).useCustomCells ? (n(), i(I, { key: 2 }, [
          (n(!0), i(I, null, U(e(j), (a, s) => (n(), i("rect", {
            rx: e(t).style.chart.layout.rect.rounded ? e(t).style.chart.layout.rect.rounding : 0,
            x: a.x + e(t).style.chart.layout.grid.spaceBetween / 2,
            y: a.y + e(t).style.chart.layout.grid.spaceBetween / 2,
            height: e(A) <= 0 ? 1e-4 : e(A),
            width: e(O) <= 0 ? 1e-4 : e(O),
            fill: "white",
            stroke: e(t).style.chart.layout.rect.stroke,
            "stroke-width": e(t).style.chart.layout.rect.strokeWidth,
            filter: ae(e(u)[s].serieIndex)
          }, null, 8, Et))), 256)),
          (n(!0), i(I, null, U(e(j), (a, s) => (n(), i("rect", {
            rx: e(t).style.chart.layout.rect.rounded ? e(t).style.chart.layout.rect.rounding : 0,
            x: a.x + e(t).style.chart.layout.grid.spaceBetween / 2,
            y: a.y + e(t).style.chart.layout.grid.spaceBetween / 2,
            height: e(A) <= 0 ? 1e-4 : e(A),
            width: e(O) <= 0 ? 1e-4 : e(O),
            fill: e(t).style.chart.layout.rect.useGradient && e(t).style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${e(P)}_${s})` : e(u)[s].color,
            stroke: e(t).style.chart.layout.rect.stroke,
            "stroke-width": e(t).style.chart.layout.rect.strokeWidth,
            filter: ae(e(u)[s].serieIndex)
          }, null, 8, qt))), 256))
        ], 64)) : y("", !0),
        (n(!0), i(I, null, U(e(j), (a, s) => (n(), i(I, null, [
          e(u).length && !e(F) && !e(t).style.chart.layout.grid.vertical && e(t).style.chart.layout.labels.captions.show && (e(u)[s].isFirst && a.position < e(t).style.chart.layout.grid.size - 2 || e(u)[s].isAbsoluteFirst && s % e(t).style.chart.layout.grid.size === 0 && e(u)[s].absoluteStartIndex) ? (n(), i("foreignObject", {
            key: 0,
            x: a.x + e(t).style.chart.layout.labels.captions.offsetX + e(t).style.chart.layout.grid.spaceBetween / 2,
            y: a.y + e(t).style.chart.layout.labels.captions.offsetY + e(t).style.chart.layout.grid.spaceBetween / 2,
            height: e(J) <= 0 ? 1e-4 : e(J),
            width: e(R) * e(t).style.chart.layout.grid.size <= 0 ? 1e-4 : e(R) * e(t).style.chart.layout.grid.size,
            filter: ae(e(u)[s].serieIndex)
          }, [
            k("div", {
              class: "vue-ui-waffle-caption",
              style: E(`height: 100%; width: 100%; font-size:${e(t).style.chart.layout.labels.captions.fontSize}px;display:flex;align-items:center;justify-content:flex-start;padding: 0 ${e(R) / 12}px;color:${e(yt)(e(u)[s].color)};gap:2px`)
            }, [
              e(t).style.chart.layout.labels.captions.showSerieName ? (n(), i("span", Xt, S(e(t).style.chart.layout.labels.captions.serieNameAbbreviation ? e(gt)({ source: e(u)[s].name, length: e(t).style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : e(u)[s].name) + ": ", 1)) : y("", !0),
              e(t).style.chart.layout.labels.captions.showPercentage ? (n(), i("span", Yt, S(e(x)({ v: e(u)[s].proportion, s: "%", r: e(t).style.chart.layout.labels.captions.roundingPercentage })), 1)) : y("", !0),
              e(t).style.chart.layout.labels.captions.showPercentage && e(t).style.chart.layout.labels.captions.showValue ? (n(), i("span", Jt, " (" + S(e(G)(
                e(t).style.chart.layout.labels.dataLabels.formatter,
                e(u)[s].value,
                e(x)({
                  p: e(t).style.chart.layout.labels.dataLabels.prefix,
                  v: e(u)[s].value,
                  s: e(t).style.chart.layout.labels.dataLabels.suffix,
                  r: e(t).style.chart.layout.labels.captions.roundingValue
                }),
                { datapoint: e(u)[s], position: a }
              )) + ") ", 1)) : y("", !0),
              !e(t).style.chart.layout.labels.captions.showPercentage && e(t).style.chart.layout.labels.captions.showValue ? (n(), i("span", Kt, S(e(G)(
                e(t).style.chart.layout.labels.dataLabels.formatter,
                e(u)[s].value,
                e(x)({
                  p: e(t).style.chart.layout.labels.dataLabels.prefix,
                  v: e(u)[s].value,
                  s: e(t).style.chart.layout.labels.dataLabels.suffix,
                  r: e(t).style.chart.layout.labels.captions.roundingValue
                }),
                { datapoint: e(u)[s], position: a }
              )), 1)) : y("", !0)
            ], 4)
          ], 8, Ht)) : y("", !0)
        ], 64))), 256)),
        (n(!0), i(I, null, U(e(j), (a, s) => (n(), i("rect", {
          onMouseover: (r) => Qe(s),
          onMouseleave: o[0] || (o[0] = (r) => {
            Z.value = !1, B.value = null;
          }),
          x: a.x + e(t).style.chart.layout.grid.spaceBetween / 2,
          y: a.y + e(t).style.chart.layout.grid.spaceBetween / 2,
          height: e(J) <= 0 ? 1e-4 : e(J),
          width: e(R) <= 0 ? 1e-4 : e(R),
          fill: "transparent",
          stroke: "none"
        }, null, 40, Qt))), 256)),
        g(l.$slots, "svg", { svg: e(L) }, void 0, !0)
      ], 14, Mt)) : y("", !0),
      l.$slots.watermark ? (n(), i("div", Zt, [
        g(l.$slots, "watermark", q(H({ isPrinting: e(be) || e(we) })), void 0, !0)
      ])) : y("", !0),
      e(X) ? y("", !0) : (n(), z(Ot, {
        key: 6,
        config: {
          type: "waffle",
          style: {
            backgroundColor: e(t).style.chart.backgroundColor,
            waffle: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      k("div", {
        ref_key: "chartLegend",
        ref: ie
      }, [
        e(t).style.chart.legend.show ? (n(), z(Lt, {
          key: `legend_${e(pe)}`,
          legendSet: e(M),
          config: e(Ke),
          onClickMarker: o[1] || (o[1] = ({ legend: a }) => Pe(a.uid))
        }, {
          item: m(({ legend: a }) => [
            k("div", {
              onClick: (s) => a.segregate(),
              style: E(`opacity:${e(p).includes(a.uid) ? 0.5 : 1}`)
            }, [
              Ve(S(a.name) + ": " + S(e(G)(
                e(t).style.chart.layout.labels.dataLabels.formatter,
                a.value,
                e(x)({
                  p: e(t).style.chart.layout.labels.dataLabels.prefix,
                  v: a.value,
                  s: e(t).style.chart.layout.labels.dataLabels.suffix,
                  r: e(t).style.chart.legend.roundingValue,
                  isAnimating: e(F)
                }),
                { datapoint: a }
              )) + " ", 1),
              e(p).includes(a.uid) ? (n(), i("span", ll, " ( - % ) ")) : (n(), i("span", tl, " (" + S(isNaN(a.value / e($)) ? "-" : e(x)({ v: a.value / e($) * 100, s: "%", r: e(t).style.chart.legend.roundingPercentage, isAnimating: e(F) })) + ") ", 1))
            ], 12, el)
          ]),
          _: 1
        }, 8, ["legendSet", "config"])) : g(l.$slots, "legend", {
          key: 1,
          legend: e(M)
        }, void 0, !0)
      ], 512),
      l.$slots.source ? (n(), i("div", {
        key: 7,
        ref_key: "source",
        ref: ce,
        dir: "auto"
      }, [
        g(l.$slots, "source", {}, void 0, !0)
      ], 512)) : y("", !0),
      Be(St, {
        show: e(T).showTooltip && e(Z) && e(p).length < b.dataset.length,
        backgroundColor: e(t).style.chart.tooltip.backgroundColor,
        color: e(t).style.chart.tooltip.color,
        borderRadius: e(t).style.chart.tooltip.borderRadius,
        borderColor: e(t).style.chart.tooltip.borderColor,
        borderWidth: e(t).style.chart.tooltip.borderWidth,
        backgroundOpacity: e(t).style.chart.tooltip.backgroundOpacity,
        position: e(t).style.chart.tooltip.position,
        offsetY: e(t).style.chart.tooltip.offsetY,
        parent: e(V),
        content: e(ee),
        isCustom: e(t).style.chart.tooltip.customFormat && typeof e(t).style.chart.tooltip.customFormat == "function",
        fontSize: e(t).style.chart.tooltip.fontSize,
        isFullscreen: e(D)
      }, {
        "tooltip-before": m(() => [
          g(l.$slots, "tooltip-before", q(H({ ...e(le) })), void 0, !0)
        ]),
        "tooltip-after": m(() => [
          g(l.$slots, "tooltip-after", q(H({ ...e(le) })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen"]),
      e(X) ? (n(), z(At, {
        key: 8,
        hideDetails: "",
        config: {
          open: e(T).showTable,
          maxHeight: 1e4,
          body: {
            backgroundColor: e(t).style.chart.backgroundColor,
            color: e(t).style.chart.color
          },
          head: {
            backgroundColor: e(t).style.chart.backgroundColor,
            color: e(t).style.chart.color
          }
        }
      }, {
        content: m(() => [
          (n(), z(Pt, {
            key: `table_${e(ve)}`,
            colNames: e(K).colNames,
            head: e(K).head,
            body: e(K).body,
            config: e(K).config,
            title: `${e(t).style.chart.title.text}${e(t).style.chart.title.subtitle.text ? ` : ${e(t).style.chart.title.subtitle.text}` : ""}`,
            onClose: o[2] || (o[2] = (a) => e(T).showTable = !1)
          }, {
            th: m(({ th: a }) => [
              k("div", {
                innerHTML: a,
                style: { display: "flex", "align-items": "center" }
              }, null, 8, al)
            ]),
            td: m(({ td: a }) => [
              Ve(S(a.name || a), 1)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"]))
        ]),
        _: 1
      }, 8, ["config"])) : y("", !0)
    ], 46, Vt));
  }
}, wl = /* @__PURE__ */ Bt(ol, [["__scopeId", "data-v-fe02d91c"]]);
export {
  wl as default
};
