@opengis/bi/dist/vs-funnel-bar-DaSadldj.js

BI data visualization module

import { _ as c, c as h, a as l, b as d, d as p } from "./import-file-BBYAWahU.js";
import { openBlock as u, createElementBlock as f } from "vue";
const o = typeof window < "u" ? window.echarts : null, m = {
  name: "VsFunnelBar",
  mixins: [h],
  data() {
    return {
      chartInstance: null,
      uniqueID: null
    };
  },
  async mounted() {
    this.uniqueID = this.widget, await this.$nextTick(), await this.getData();
    const { series: t } = this.prepareData();
    t && this.initChart(t);
  },
  methods: {
    buildTooltipForDonut(t, s) {
      const { name: e, value: a, percent: r } = t;
      return `
        <div style="background-color:${s[0]};font-size: 12px; font-family: Helvetica, Arial, sans-serif;color:#ffff; padding:5px; border-radius:5px; ![box-shadow:none]">
          ${d(e)}: ${p(a)} (${r}%)
        </div>`;
    },
    onChangedData() {
      try {
        if (this.sourceData) {
          const { series: t, xs: s, ys: e } = this.prepareData();
          t && (this == null || this.initChart(t, s, e));
        }
      } catch {
      }
    },
    prepareData() {
      try {
        const t = (this.sourceData || []).map((e) => ({
          name: e[this.dimensions[0]],
          value: parseFloat((e == null ? void 0 : e[this.dimensions[1]]) ?? (e == null ? void 0 : e.metric) ?? 0) || 0
        }));
        return { series: [
          {
            name: this.titleCharts ? this.titleCharts : this.dimensions[0],
            type: "funnel",
            ...l(this.styleData),
            data: t,
            height: "80%",
            emphasis: {
              label: {
                show: !1
              }
            }
          }
        ] };
      } catch (t) {
        console.error(t);
      }
    },
    async initChart(t) {
      var s, e;
      try {
        const a = this.$refs.chart, r = o == null ? void 0 : o.init(a);
        if (!r) return;
        const n = {
          series: t,
          ...l(this.styleData),
          tooltip: {
            show: ((e = (s = this.styleData) == null ? void 0 : s.tooltip) == null ? void 0 : e.show) !== !1,
            trigger: "item",
            confine: !0,
            formatter: (i) => this.buildTooltipForDonut(i, [i.color]),
            borderWidth: 0,
            appendToBody: !1,
            borderColor: "transparent",
            textStyle: {
              color: "#000"
            },
            padding: [10, 15],
            shadowColor: "transparent",
            backgroundColor: "transparent"
          },
          itemStyle: {
            height: "15px"
          },
          legend: {
            borderRadius: 10,
            type: "scroll",
            itemWidth: 14,
            itemHeight: 14,
            ...this.styleData.legend
          },
          labelLine: {
            show: !1
          },
          grid: {
            bottom: "0"
          }
        };
        r.setOption(n), r.resize(), window.addEventListener("resize", () => {
          r.resize();
        });
      } catch (a) {
        console.error(a);
      }
    }
  }
}, y = ["id"];
function D(t, s, e, a, r, n) {
  return u(), f("div", {
    ref: "chart",
    id: r.uniqueID,
    class: "h-[90%] custom-scrollbar min-h-[200px]"
  }, null, 8, y);
}
const w = /* @__PURE__ */ c(m, [["render", D]]);
export {
  w as default
};