@opengis/bi/dist/vs-donut-al85JwBt.js

BI data visualization module

import { _ as y, c as D, i as g, a as c, b as h, P as l } from "./import-file-XFI3CaVb.js";
import { createElementBlock as b, openBlock as x } from "vue";
const _ = {
  name: "VsPie",
  props: ["currentWidget"],
  mixins: [D],
  data() {
    return {
      chartInstance: null,
      // Unused variable – оставлен для потенциального будущего использования
      resizeObserver: null
    };
  },
  computed: {
    // Генерируем уникальный ID на основе свойства widget из миксина
    uniqueID() {
      return this.widget;
    }
  },
  async mounted() {
    var r;
    await this.$nextTick(), await this.getData();
    const { series: t } = this.prepareData() || {};
    t && this.initChart(t);
    const e = (r = this.$refs) == null ? void 0 : r.chart;
    e && (this.resizeObserver = new ResizeObserver(() => {
      this.chartInstance && this.chartInstance.resize();
    }), this.resizeObserver.observe(e));
  },
  beforeUnmount() {
    var t;
    (t = this.resizeObserver) == null || t.disconnect();
  },
  methods: {
    // Не используется, оставлен для потенциального будущего применения
    onChangedData() {
      try {
        if (this.sourceData) {
          const { series: t, xs: e, ys: r } = this.prepareData();
          t && this.initChart(t, e, r);
        }
      } catch (t) {
        console.error(t);
      }
    },
    buildTooltipForDonut(t, e) {
      const { name: r, value: i, percent: a } = t;
      return `
        <div style="background-color:${e[0]}; font-size:12px; font-family:Helvetica, Arial, sans-serif; color:#ffff; padding:5px; border-radius:5px;">
          ${r == null ? void 0 : r.replace("null", "Не визначено")}: ${c(i)} (${a}%)
        </div>`;
    },
    prepareData() {
      var t, e, r;
      try {
        const i = Array.from(
          new Set(this.sourceData.map((s) => s[this.dimensions[0]]))
        ), a = Array.from(
          new Set(this.sourceData.map((s) => s[this.dimensions[1]]))
        ), n = parseInt(
          this.sourceData.reduce((s, o) => s + parseFloat(o == null ? void 0 : o.metric), 0),
          10
        ), d = i.map((s, o) => {
          const f = (a[o] / n * 100).toFixed(2);
          return {
            name: `${s} (${f}%)`,
            value: a[o]
          };
        }), u = ((t = this.styleData) == null ? void 0 : t.innerRadius) || "80%", p = ((e = this.styleData) == null ? void 0 : e.outerRadius) || "100%", m = [u, p];
        return this.styleData.legend = l.getLegendOpions({
          borderRadius: 10,
          height: "100%",
          padding: 10,
          bottom: "0",
          type: "scroll",
          itemWidth: 14,
          itemHeight: 14,
          formatter: (s) => s == null ? void 0 : s.replace("null", "Не визначено"),
          ...this.styleData.legend
        }), this.styleData.label = l.getLabelOptions(
          this.styleData.label
        ), this.styleData.show_legend = ((r = this.styleData) == null ? void 0 : r.show_legend) || !0, { series: [
          {
            name: this.titleCharts ? this.titleCharts : this.dimensions[0],
            type: "pie",
            radius: m,
            center: ["50%", "60%"],
            height: "75%",
            ...h(this.styleData),
            data: d
          }
        ] };
      } catch (i) {
        return console.error(i), null;
      }
    },
    async initChart(t) {
      try {
        const e = this.$refs.chart;
        this.chartInstance = g(e);
        const r = parseInt(
          this.sourceData.reduce((a, n) => a + parseFloat(n == null ? void 0 : n.metric), 0),
          10
        ), i = {
          tooltip: {
            trigger: "item",
            formatter: (a) => this.buildTooltipForDonut(a, [a.color]),
            borderWidth: 0,
            appendToBody: !0,
            borderColor: "transparent",
            textStyle: { color: "#000" },
            padding: [15, 15],
            shadowColor: "transparent",
            backgroundColor: "transparent"
          },
          series: t,
          ...h({ ...this.styleData }),
          title: {
            text: c(r),
            left: "center",
            top: "41%",
            textStyle: {
              color: "black",
              fontWeight: 400,
              fontSize: "22px"
            }
          }
        };
        this.chartInstance.setOption(i), this.$emit("update:currentWidget", this.chartInstance), this.chartInstance.resize(), window.addEventListener("resize", () => {
          this.chartInstance.resize();
        });
      } catch (e) {
        console.error(e);
      }
    }
  }
}, $ = ["id"];
function I(t, e, r, i, a, n) {
  return x(), b("div", {
    id: n.uniqueID,
    ref: "chart",
    class: "h-full min-h-[200px] flex items-center"
  }, null, 8, $);
}
const C = /* @__PURE__ */ y(_, [["render", I]]);
export {
  C as default
};