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

BI data visualization module

import { _ as n, c, i as h, b as o, d as l, a as d } from "./import-file-XFI3CaVb.js";
import { createElementBlock as p, openBlock as u } from "vue";
const m = {
  name: "VsFunnelBar",
  mixins: [c],
  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, r) {
      const { name: s, value: a, percent: e } = t;
      return `
        <div style="background-color:${r[0]};font-size: 12px; font-family: Helvetica, Arial, sans-serif;color:#ffff; padding:5px; border-radius:5px; ![box-shadow:none]">
          ${l(s)}: ${d(a)} (${e}%)
        </div>`;
    },
    onChangedData() {
      try {
        if (this.sourceData) {
          const { series: t, xs: r, ys: s } = this.prepareData();
          t && (this == null || this.initChart(t, r, s));
        }
      } catch {
      }
    },
    prepareData() {
      try {
        const t = Array.from(
          new Set(this.sourceData.map((e) => e[this.dimensions[0]]))
        ), r = Array.from(
          new Set(this.sourceData.map((e) => e[this.dimensions[1]]))
        ), s = t.map((e, i) => ({
          name: e,
          value: r[i]
        }));
        return { series: [
          {
            name: this.titleCharts ? this.titleCharts : this.dimensions[0],
            type: "funnel",
            ...o(this.styleData),
            data: s,
            height: "80%",
            emphasis: {
              label: {
                show: !1
              }
            }
          }
        ] };
      } catch (t) {
        console.error(t);
      }
    },
    async initChart(t) {
      try {
        const r = this.$refs.chart, s = h(r), a = {
          series: t,
          ...o(this.styleData),
          tooltip: {
            trigger: "item",
            formatter: (e) => this.buildTooltipForDonut(e, [e.color]),
            borderWidth: 0,
            appendToBody: !0,
            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"
          }
        };
        s.setOption(a), s.resize(), window.addEventListener("resize", () => {
          s.resize();
        });
      } catch (r) {
        console.error(r);
      }
    }
  }
}, f = ["id"];
function y(t, r, s, a, e, i) {
  return u(), p("div", {
    ref: "chart",
    id: e.uniqueID,
    class: "h-[90%] custom-scrollbar min-h-[200px]"
  }, null, 8, f);
}
const g = /* @__PURE__ */ n(m, [["render", y]]);
export {
  g as default
};