@opengis/bi 1.1.0 → 1.1.2

package/dist/vs-map-CwR6ZYur.js

@@ -0,0 +1,285 @@
+import { c as L, l as $, p as T, V as B, a as H, b as O, d as F, m as S, e as N } from "./vs-list-1QDnN3pH.js";
+import { _ as C, c as P } from "./import-file-XFI3CaVb.js";
+import { resolveComponent as u, createElementBlock as p, openBlock as i, Fragment as v, createElementVNode as r, createBlock as E, createCommentVNode as m, createVNode as f, Teleport as R, toDisplayString as b, renderList as k, normalizeStyle as I, normalizeClass as V } from "vue";
+const A = {
+  components: { legendIcon: $, closeIcon: L },
+  props: {
+    mapId: { type: String },
+    colors: { type: Array },
+    sizes: { type: Array, default: () => [] },
+    cluster: { type: [Boolean, String] },
+    color: { type: String, default: "gray" },
+    colorTitle: { type: String },
+    sizesTitle: { type: String },
+    resizeItem: { type: [Boolean, String], default: !1 },
+    changeOpacityItem: { type: [Boolean, String], default: !1 }
+  },
+  data() {
+    return {
+      isOpenLegend: !1,
+      palette: T
+      // palette: ['#69D2E7', 'yellow', '#FE4365'],
+    };
+  },
+  computed: {
+    borderRadius() {
+      return this.cluster ? "rounded-sm" : "rounded-full";
+    },
+    sortedSizes() {
+      return [...this.sizes].sort((e, t) => e - t);
+    },
+    maxWidht() {
+      var s;
+      const e = ((s = this.sizes) == null ? void 0 : s.length) - 1;
+      return this.calcSize(e);
+    }
+  },
+  methods: {
+    sizeClass(e) {
+      return this.resizeItem ? `h-[${this.calcSize(e)}] w-[${this.calcSize(e)}] ${this.borderRadius}` : `h-[18px] w-[18px] ${this.borderRadius}`;
+    },
+    calcSize(e) {
+      return `${10 + e * 2}px`;
+    },
+    getOpacity(e) {
+      return (e + 1) / this.sortedSizes.length;
+    }
+  }
+}, G = { class: "w-full absolute max-w-[200px] bg-white border rounded-lg bottom-[10px] right-[50px]" }, W = { class: "flex items-center justify-between border-b border-[#0000001A] px-2" }, Z = { class: "w-full flex flex-col gap-[8px] px-2 py-2 max-h-[200px] overflow-auto [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent" }, q = {
+  key: 0,
+  class: "flex flex-col w-full"
+}, j = {
+  key: 0,
+  class: "text-xs font-semibold leading-[1.2] text-[#1F2937] mb-[8px]"
+}, J = { class: "flex flex-col gap-[6px]" }, K = { class: "text-xs text-[#1F2937] font-normal leading-[1.2]" }, Q = {
+  key: 1,
+  class: "flex flex-col w-full"
+}, U = {
+  key: 0,
+  class: "text-xs font-semibold leading-[1.2] text-[#1F2937] mb-[8px]"
+}, X = { class: "flex flex-col gap-[6px]" }, Y = { class: "flex flex-row items-center justify-start" }, D = { class: "text-xs text-[#1F2937] font-normal leading-[1.2]" };
+function ee(e, t, s, o, l, a) {
+  var x, y;
+  const n = u("legendIcon"), h = u("closeIcon");
+  return i(), p(v, null, [
+    r("div", {
+      class: "flex justify-center items-center rounded-md w-[32px] h-[32px] cursor-pointer bg-white p-1 border-[2px]",
+      onClick: t[0] || (t[0] = (d) => l.isOpenLegend = !l.isOpenLegend)
+    }, [
+      f(n)
+    ]),
+    l.isOpenLegend ? (i(), E(R, {
+      key: 0,
+      to: `#wrapper-${s.mapId}`
+    }, [
+      r("div", G, [
+        r("div", W, [
+          t[2] || (t[2] = r("h3", { class: "text-[16px] font-normal text-black" }, "Легенда", -1)),
+          r("button", {
+            type: "button",
+            class: "inline-flex items-center text-sm font-medium text-gray-500 rounded-lg gap-x-2 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:text-blue-500 dark:focus:text-blue-500",
+            onClick: t[1] || (t[1] = (d) => l.isOpenLegend = !1)
+          }, [
+            f(h, { class: "w-[20px]" })
+          ])
+        ]),
+        r("div", Z, [
+          (x = s.colors) != null && x.length ? (i(), p("div", q, [
+            s.colorTitle ? (i(), p("h4", j, b(s.colorTitle), 1)) : m("", !0),
+            r("div", J, [
+              (i(!0), p(v, null, k(s.colors, (d, c) => (i(), p("div", {
+                key: c,
+                class: "flex items-center gap-[10px]"
+              }, [
+                d.color ? (i(), p("div", {
+                  key: 0,
+                  class: "w-[12px] h-[12px] rounded-full",
+                  style: I({
+                    backgroundColor: d.color
+                  })
+                }, null, 4)) : m("", !0),
+                r("p", K, b(d.text || d.val), 1)
+              ]))), 128))
+            ])
+          ])) : m("", !0),
+          (y = s.sizes) != null && y.length ? (i(), p("div", Q, [
+            e.sizeTitle ? (i(), p("h4", U, b(e.sizeTitle), 1)) : m("", !0),
+            r("div", X, [
+              a.sortedSizes.length ? (i(!0), p(v, { key: 0 }, k(a.sortedSizes, (d, c) => {
+                var g, w, z, _, M;
+                return i(), p("div", null, [
+                  r("div", Y, [
+                    r("div", {
+                      class: V([a.maxWidht ? `w-[${a.maxWidht}]` : "", "mr-[10px]"])
+                    }, [
+                      r("div", {
+                        class: V(a.sizeClass(c)),
+                        style: I({
+                          backgroundColor: ((w = (g = l.palette) == null ? void 0 : g[s.color]) == null ? void 0 : w[c]) || s.color
+                        })
+                      }, null, 6)
+                    ], 2),
+                    r("p", D, b(c === ((z = a.sortedSizes) == null ? void 0 : z.length) - 1 ? ">" + d : c == ((_ = a.sortedSizes) == null ? void 0 : _.length) - 1 ? ">" + a.sortedSizes[((M = a.sortedSizes) == null ? void 0 : M.length) - 1] : d + "-" + a.sortedSizes[c + 1]), 1)
+                  ])
+                ]);
+              }), 256)) : m("", !0)
+            ])
+          ])) : m("", !0)
+        ])
+      ])
+    ], 8, ["to"])) : m("", !0)
+  ], 64);
+}
+const te = /* @__PURE__ */ C(A, [["render", ee]]), se = {
+  components: {
+    VsMapSetting: F,
+    VsMapSlotLayers: O,
+    VsMapLegend: te,
+    VsMapGoHome: H,
+    VsList: B
+  },
+  data() {
+    return {
+      mapId: `map-${Math.floor(Math.random() * 1e3)}`,
+      layerId: `layer${Math.floor(Math.random() * 1e3)}`,
+      map: null,
+      hoverData: null,
+      data: null,
+      coordinatesByMouse: [],
+      showSetting: !1,
+      popup: null,
+      color: "#69D2E7"
+    };
+  },
+  methods: {
+    async createMap() {
+      const e = {
+        version: 8,
+        glyphs: "https://cdn.softpro.ua/data/fonts/{fontstack}/{range}.pbf",
+        sources: {},
+        layers: []
+      };
+      this.map = await new S.Map({
+        container: this.mapId,
+        style: e,
+        center: [31, 48.5],
+        zoom: 5,
+        minZoom: 3,
+        maxZoom: 20,
+        attributionControl: !1
+      }), this.map.addControl(
+        new S.NavigationControl({
+          visualizePitch: !0
+        })
+      ), this.map.on("load", () => {
+        this.loadHandler();
+      }), this.map.on("mousemove", (t) => {
+        this.moveMouseHadler(t);
+      }), this.map.on("mouseout", () => {
+        var t;
+        this.showLegend = !1, this.showSetting = !1, this.coordinatesByMouse = 0, (t = this.popup) == null || t.remove();
+      });
+    },
+    getPopoverTitle(e) {
+      var t, s, o, l, a;
+      return (s = (t = this.data) == null ? void 0 : t.colors) != null && s.find((n) => n.val === e) ? (a = (l = (o = this.data) == null ? void 0 : o.colors) == null ? void 0 : l.find((n) => n.val === e)) == null ? void 0 : a.text : e;
+    },
+    moveMouseHadler(e) {
+      var t;
+      try {
+        const s = this.map.queryRenderedFeatures(e.point), o = ((t = s[0]) == null ? void 0 : t.properties) || {};
+        if (!s.length) {
+          this.map.getCanvas().style.cursor = "", this.popupElement && this.popupElement.remove();
+          return;
+        }
+        this.map.getCanvas().style.cursor = "pointer", this.popupElement && this.popupElement.remove(), this.popupElement = document.createElement("div"), this.popupElement.className = "absolute text-gray-800 border border-gray-200 rounded-lg shadow-md min-w-28", this.popupElement.style.backgroundColor = "rgba(255, 255, 255, 0.7)", this.popupElement.innerHTML = `<div class="font-semibold text-sm border-b border-solid border-gray-200 text-gray-800 rounded-t-lg  px-2 py-1">
+        ${this.getPopoverTitle((o == null ? void 0 : o.x) || (o == null ? void 0 : o.title) || (o == null ? void 0 : o.name)) || ""}
+        </div>
+    
+        <div class="flex justify-between items-center text-xs px-2 py-0.5 text-gray-500 ">
+          <span class="flex items-center">
+            <span class="font-medium mr-[6px]">Значення</span>
+          </span>
+          <span>${(o == null ? void 0 : o.metric) || 0}</span>
+        </div>`;
+        const l = this.map.project(e.lngLat);
+        this.popupElement.style.left = `${l.x}px`, this.popupElement.style.top = `${l.y - 60}px`, this.map.getContainer().appendChild(this.popupElement);
+      } catch (s) {
+        console.error(s);
+      }
+    }
+  }
+}, oe = {
+  mixins: [P, N, se],
+  name: "VsMap",
+  async mounted() {
+    await this.getMapData(), await this.createMap();
+  },
+  methods: {
+    async getMapData() {
+      const t = await (await fetch(
+        `/api/bi-map?widget=${this.widget}&dashboard=${this.dashboard}`
+      )).json();
+      this.data = t;
+    },
+    async loadHandler() {
+      const e = ["#69D2E7", "yellow", "#FE4365"], t = this.data.colors ? ["match", ["get", "x"]].concat(
+        this.data.colors.reduce(
+          (a, n, h) => a.concat(n.val, (n == null ? void 0 : n.color) || e[h]),
+          []
+        )
+      ).concat(["gray"]) : "blue", s = [5, 7, 9, 11, 13], o = this.data.sizes ? ["case"] : 5;
+      this.data.sizes && (this.data.sizes.reverse().forEach((a, n) => {
+        o.push([">", ["get", "metric"], a]), o.push(s[n]);
+      }), o.push(5));
+      const l = {
+        type: "circle",
+        color: t,
+        width: 2,
+        radius: o,
+        stroke: "#eee"
+      };
+      Object.assign(l, this.data.style || {}), this.addVtileLayer({
+        id: "bi",
+        url: `${window.top.location.origin}/api/bi-vtile/{z}/{x}/{y}.vmt?widget=${this.widget}&dashboard=${this.dashboard}&nocache=1`,
+        style: l
+      });
+    }
+  }
+}, ae = ["id"], le = ["id"], re = { class: "absolute flex flex-col right-[10px] top-[105px] gap-1" };
+function ne(e, t, s, o, l, a) {
+  var d, c, g;
+  const n = u("VsMapSetting"), h = u("VsMapSlotLayers"), x = u("VsMapLegend"), y = u("VsMapGoHome");
+  return i(), p("div", {
+    class: "relative w-full h-full",
+    id: `wrapper-${e.mapId}`
+  }, [
+    r("div", {
+      id: e.mapId,
+      class: "w-full flex items-end relative h-[250px]"
+    }, null, 8, le),
+    e.showSetting ? (i(), E(n, {
+      key: 0,
+      map: e.map,
+      coordinates: e.coordinatesByMouse
+    }, null, 8, ["map", "coordinates"])) : m("", !0),
+    f(h, { map: e.map }, null, 8, ["map"]),
+    r("div", re, [
+      f(x, {
+        mapId: e.mapId,
+        colors: (d = e.data) == null ? void 0 : d.colors,
+        sizes: (c = e.data) == null ? void 0 : c.sizes,
+        color: e.color,
+        resizeItem: "true"
+      }, null, 8, ["mapId", "colors", "sizes", "color"]),
+      f(y, {
+        map: e.map,
+        bbox: (g = e.data) == null ? void 0 : g.bounds
+      }, null, 8, ["map", "bbox"])
+    ])
+  ], 8, ae);
+}
+const ce = /* @__PURE__ */ C(oe, [["render", ne]]);
+export {
+  ce as default
+};

package/dist/vs-map-cluster-YdXTBIVf.js

@@ -0,0 +1,314 @@
+import { c as G, l as A, p as R, b as P, V as Z, a as q, d as D, e as K, m as H } from "./vs-list-1QDnN3pH.js";
+import { _ as V, V as W, c as J, e as Q, I as U, g as X } from "./import-file-XFI3CaVb.js";
+import { createElementBlock as m, createCommentVNode as S, openBlock as p, createElementVNode as l, normalizeClass as I, Fragment as N, renderList as O, toDisplayString as F, normalizeStyle as Y, resolveComponent as g, withDirectives as z, createBlock as M, resolveDynamicComponent as j, createVNode as w, vShow as C } from "vue";
+const $ = {
+  components: { legendIcon: A, closeIcon: G },
+  props: {
+    mapId: { type: String },
+    colors: { type: Array },
+    sizes: { type: Array, default: () => [] },
+    cluster: { type: [Boolean, String] },
+    color: { type: String, default: "gray" },
+    colorTitle: { type: String },
+    sizesTitle: { type: String },
+    resizeItem: { type: [Boolean, String], default: !1 },
+    changeOpacityItem: { type: [Boolean, String], default: !1 }
+  },
+  data() {
+    return {
+      isOpenLegend: !1,
+      palette: R
+      // palette: ['#69D2E7', 'yellow', '#FE4365'],
+    };
+  },
+  computed: {
+    borderRadius() {
+      return this.cluster ? "rounded-sm" : "rounded-full";
+    },
+    sortedSizes() {
+      return [...this.sizes].sort((t, s) => t - s);
+    },
+    maxWidht() {
+      var n;
+      const t = ((n = this.sizes) == null ? void 0 : n.length) - 1;
+      return this.calcSize(t);
+    }
+  },
+  methods: {
+    sizeClass(t) {
+      return this.resizeItem ? `h-[${this.calcSize(t)}] w-[${this.calcSize(t)}] ${this.borderRadius}` : `h-[10px]  ${this.borderRadius}`;
+    },
+    calcSize(t) {
+      return `${10 + t * 2}px`;
+    },
+    getOpacity(t) {
+      return (t + 1) / this.sortedSizes.length;
+    }
+  }
+}, ee = {
+  key: 0,
+  class: "absolute flex items-end w-fit bottom-[10px] max-w-[80%] left-[50%] translate-x-[-50%] bg-[rgba(255,255,255,0.7)] p-[10px] rounded"
+}, te = { class: "w-[80px] mr-[10px]" }, se = ["title"], oe = { class: "text-[10px] mb-[2px] text-[#1F2937] font-normal leading-[1.2]" };
+function re(t, s, n, a, e, o) {
+  var d;
+  return (d = n.sizes) != null && d.length ? (p(), m("div", ee, [
+    l("div", te, [
+      s[0] || (s[0] = l("p", { class: "text-[10px] mb-[2px] text-[#1F2937] leading-[1.2]" }, " Дані відсутні ", -1)),
+      l("div", {
+        class: I([o.sizeClass(t.index), "w-full border border-gray-500"])
+      }, null, 2)
+    ]),
+    o.sortedSizes.length ? (p(!0), m(N, { key: 0 }, O(o.sortedSizes, (c, i) => {
+      var h, u, _, y, f, b, v, x;
+      return p(), m("div", {
+        class: "w-[80px]",
+        title: i === ((h = o.sortedSizes) == null ? void 0 : h.length) - 1 ? ">" + c : i == ((u = o.sortedSizes) == null ? void 0 : u.length) - 1 ? ">" + o.sortedSizes[((_ = o.sortedSizes) == null ? void 0 : _.length) - 1] : c + "-" + o.sortedSizes[i + 1]
+      }, [
+        l("p", oe, F(i === ((y = o.sortedSizes) == null ? void 0 : y.length) - 1 ? ">" + parseInt(c) : i == ((f = o.sortedSizes) == null ? void 0 : f.length) - 1 ? ">" + parseInt(o.sortedSizes[((b = o.sortedSizes) == null ? void 0 : b.length) - 1]) : parseInt(c) + "-" + parseInt(o.sortedSizes[i + 1])), 1),
+        l("div", {
+          class: I([o.sizeClass(i), "w-full border border-r-0 border-gray-500"]),
+          style: Y({
+            backgroundColor: ((x = (v = e.palette) == null ? void 0 : v[n.color]) == null ? void 0 : x[i]) || n.color
+          })
+        }, null, 6)
+      ], 8, se);
+    }), 256)) : S("", !0)
+  ])) : S("", !0);
+}
+const ae = /* @__PURE__ */ V($, [["render", re]]), ne = {}, le = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "icon icon-tabler icons-tabler-outline icon-tabler-map"
+};
+function ie(t, s) {
+  return p(), m("svg", le, s[0] || (s[0] = [
+    l("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    l("path", { d: "M3 7l6 -3l6 3l6 -3v13l-6 3l-6 -3l-6 3v-13" }, null, -1),
+    l("path", { d: "M9 4v13" }, null, -1),
+    l("path", { d: "M15 7v13" }, null, -1)
+  ]));
+}
+const pe = /* @__PURE__ */ V(ne, [["render", ie]]), ce = {
+  mixins: [J, K],
+  components: {
+    VsMapSetting: D,
+    VsClusterLegend: ae,
+    VsMapGoHome: q,
+    VsList: Z,
+    VsMapSlotLayers: P,
+    // VsListbar,
+    VsBar: W
+  },
+  data() {
+    return {
+      baseColor: "pink",
+      kattotg: "",
+      options: [
+        { id: "map", text: "Карта", component: pe },
+        { id: "table", text: "Таблиця", component: U },
+        { id: "chart", text: "Віджет", component: X }
+      ],
+      activeTab: "map",
+      mapId: `map-${Math.floor(Math.random() * 1e3)}`,
+      layerId: `layer${Math.floor(Math.random() * 1e3)}`,
+      map: null,
+      hoverData: null,
+      data: null,
+      coordinatesByMouse: [],
+      showSetting: !1,
+      popup: null,
+      color: "#69D2E7",
+      label: "<div><icon-map/></div>"
+    };
+  },
+  async mounted() {
+    await this.getMapData(), await this.createMap();
+  },
+  watch: {
+    kattotg() {
+      this.loadHandler();
+    }
+  },
+  methods: {
+    async getMapData() {
+      const t = await Q.get(
+        `/bi-cluster?widget=${this.widget}&dashboard=${this.dashboard}`
+      );
+      this.data = t.data, this.$emit("update:widgetData", this.data), setTimeout(() => {
+        var s;
+        return (s = this.map) == null ? void 0 : s.resize();
+      });
+    },
+    async loadHandler() {
+      var a, e, o, d;
+      this.baseColor = ((a = this.data.style) == null ? void 0 : a.color) || "blue";
+      const t = ["case"];
+      (d = (o = (e = this.data) == null ? void 0 : e.sizes) == null ? void 0 : o.toReversed()) == null || d.forEach((c, i) => {
+        var h, u;
+        t.push([">", ["get", "metric"], c]), t.push((u = (h = R[this.baseColor]) == null ? void 0 : h.toReversed()) == null ? void 0 : u[i]), i++;
+      }), t.push("gray");
+      const s = {
+        type: "polygon",
+        color: t,
+        opacity: 0.4
+      };
+      Object.assign(s, this.data.style || {}), this.map.getSource("bi") || this.addVtileLayer({
+        id: "bi",
+        url: `${window.location.origin}/api/bi-cluster-vtile/{z}/{x}/{y}.vmt?widget=${this.widget}&dashboard=${this.dashboard}&nocache=1`,
+        style: s
+      }), this.map.getLayer("highlighted") && this.map.removeLayer("highlighted"), this.map.getSource("highlighted") && this.map.removeSource("highlighted");
+      const n = ["case"];
+      this.kattotg && n.push(
+        ["==", ["to-string", ["get", "name"]], String(this.kattotg)],
+        "red"
+      ), n.push("transparent"), this.map.addLayer({
+        id: "highlighted",
+        type: "fill",
+        source: "bi",
+        "source-layer": "bi",
+        paint: {
+          "fill-color": n,
+          "fill-opacity": 0.6
+        }
+      });
+    },
+    async createMap() {
+      const t = {
+        version: 8,
+        glyphs: "https://cdn.softpro.ua/data/fonts/{fontstack}/{range}.pbf",
+        sources: {},
+        layers: []
+      };
+      this.map = await new H.Map({
+        container: this.mapId,
+        style: t,
+        center: [31, 48.5],
+        zoom: 5,
+        minZoom: 3,
+        maxZoom: 20,
+        attributionControl: !1
+      }), this.map.addControl(
+        new H.NavigationControl({
+          visualizePitch: !0
+        })
+      ), this.map.on("load", () => {
+        this.loadHandler();
+      }), this.map.on("mousemove", (s) => {
+        this.moveMouseHadler(s);
+      }), this.map.on("mouseout", () => {
+        var s;
+        this.showLegend = !1, this.showSetting = !1, this.coordinatesByMouse = 0, (s = this.popup) == null || s.remove();
+      });
+    },
+    moveMouseHadler(t) {
+      var s;
+      try {
+        const n = this.map.queryRenderedFeatures(t.point), a = ((s = n[0]) == null ? void 0 : s.properties) || {};
+        if (!n.length) {
+          this.map.getCanvas().style.cursor = "", this.popupElement && this.popupElement.remove();
+          return;
+        }
+        this.map.getCanvas().style.cursor = "pointer", this.popupElement && this.popupElement.remove(), this.popupElement = document.createElement("div"), this.popupElement.className = "absolute text-gray-800 border border-gray-200 rounded-lg shadow-md min-w-28", this.popupElement.style.backgroundColor = "rgba(255, 255, 255, 0.7)", this.popupElement.innerHTML = `<div class="px-2 py-1 text-sm font-semibold text-gray-800 border-b border-gray-200 border-solid rounded-t-lg">
+        ${(a == null ? void 0 : a.x) || (a == null ? void 0 : a.title) || (a == null ? void 0 : a.name) || ""}
+        </div>
+    
+        <div class="flex justify-between items-center text-xs px-2 py-0.5 text-gray-500 ">
+          <span class="flex items-center">
+            <span class="font-medium mr-[6px]">Значення</span>
+          </span>
+          <span>${(a == null ? void 0 : a.metric) || 0}</span>
+        </div>`;
+        const e = this.map.project(t.lngLat);
+        this.popupElement.style.left = `${e.x}px`, this.popupElement.style.top = `${e.y - 60}px`, this.map.getContainer().appendChild(this.popupElement);
+      } catch (n) {
+        console.error(n);
+      }
+    }
+  }
+}, de = { class: "h-full" }, he = { class: "flex items-start justify-between mb-[6px] w-full" }, ue = { class: "text-gray-800 font-[600]" }, me = { class: "flex gap-2" }, ge = ["onClick"], ye = ["id"], fe = ["id"], be = { class: "absolute flex flex-col right-[10px] top-[105px] gap-1" }, ve = { class: "h-[calc(250px)]" };
+function xe(t, s, n, a, e, o) {
+  var y, f, b, v, x, k, L, E, B, T;
+  const d = g("VsMapSetting"), c = g("VsMapSlotLayers"), i = g("VsMapGoHome"), h = g("VsClusterLegend"), u = g("VsList"), _ = g("VsBar");
+  return p(), m("div", de, [
+    l("div", he, [
+      l("h3", ue, F(t.title), 1),
+      l("div", me, [
+        (p(!0), m(N, null, O(e.options, (r) => (p(), m("button", {
+          class: I(["p-1 text-gray-700 border rounded", [e.activeTab === (r == null ? void 0 : r.id) ? "ring-2 ring-blue-500" : ""]]),
+          onClick: (_e) => e.activeTab = r == null ? void 0 : r.id
+        }, [
+          (p(), M(j(r == null ? void 0 : r.component), {
+            height: "16",
+            width: "16"
+          }))
+        ], 10, ge))), 256))
+      ])
+    ]),
+    z(l("div", {
+      class: "relative w-full h-[calc(100%-40px)]",
+      id: `wrapper-${e.mapId}`
+    }, [
+      l("div", {
+        id: e.mapId,
+        class: "h-[calc(100%-40px)] w-full flex items-end min-h-[250px]"
+      }, null, 8, fe),
+      e.showSetting ? (p(), M(d, {
+        key: 0,
+        map: e.map,
+        coordinates: e.coordinatesByMouse
+      }, null, 8, ["map", "coordinates"])) : S("", !0),
+      w(c, { map: e.map }, null, 8, ["map"]),
+      l("div", be, [
+        w(i, {
+          map: e.map,
+          bbox: (y = e.data) == null ? void 0 : y.bounds
+        }, null, 8, ["map", "bbox"])
+      ]),
+      w(h, {
+        mapId: e.mapId,
+        colors: (f = e.data) == null ? void 0 : f.colors,
+        sizes: (b = e.data) == null ? void 0 : b.sizes,
+        color: e.baseColor,
+        changeOpacityItem: "true",
+        cluster: "true"
+      }, null, 8, ["mapId", "colors", "sizes", "color"])
+    ], 8, ye), [
+      [C, e.activeTab == "map"]
+    ]),
+    z(w(u, {
+      mapId: e.mapId,
+      source: (v = e.data) == null ? void 0 : v.rows,
+      total: ((x = e.data) == null ? void 0 : x.total) || 0,
+      count: ((k = e.data) == null ? void 0 : k.count) || 0,
+      onKattotg: s[0] || (s[0] = (r) => e.kattotg = r)
+    }, null, 8, ["mapId", "source", "total", "count"]), [
+      [C, e.activeTab == "table"]
+    ]),
+    z(l("div", ve, [
+      (E = (L = e.data) == null ? void 0 : L.rows) != null && E.length ? (p(), M(_, {
+        key: 0,
+        source: (T = (B = e.data) == null ? void 0 : B.rows) == null ? void 0 : T.map((r) => ({
+          title: r == null ? void 0 : r.title,
+          metric: r == null ? void 0 : r.metric
+        }))
+      }, null, 8, ["source"])) : S("", !0)
+    ], 512), [
+      [C, e.activeTab == "chart"]
+    ])
+  ]);
+}
+const Me = /* @__PURE__ */ V(ce, [["render", xe]]);
+export {
+  Me as default
+};

package/dist/vs-number-CRUhHKym.js

@@ -0,0 +1,55 @@
+import { _ as c, c as o, f as n } from "./import-file-XFI3CaVb.js";
+import { createElementBlock as i, openBlock as m, toDisplayString as s } from "vue";
+const u = {
+  name: "VsNumber",
+  mixins: [o],
+  data() {
+    return {
+      number: ""
+    };
+  },
+  computed: {
+    formattedNumber() {
+      return n(this.number);
+    },
+    prefix() {
+      var e, t;
+      return (e = this.styleData) != null && e.prefix ? (t = this.styleData) == null ? void 0 : t.prefix : "";
+    }
+  },
+  watch: {
+    sourceData: {
+      async handler() {
+        this.getNumber();
+      },
+      deep: !0
+    }
+  },
+  async mounted() {
+    await this.getData(), this.getNumber();
+  },
+  methods: {
+    onChangedData() {
+      try {
+        this.sourceData && this.getNumber();
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    async getNumber() {
+      var e, t;
+      try {
+        this.number = ((t = this.sourceData[0]) == null ? void 0 : t[Object.keys((e = this.sourceData) == null ? void 0 : e[0])]) || 0;
+      } catch (r) {
+        console.error(r);
+      }
+    }
+  }
+}, h = { class: "text-lg lg:text-xl xl:text-2xl text-gray-800 h-[32px] flex items-center" };
+function x(e, t, r, f, l, a) {
+  return m(), i("div", h, s(a.prefix) + s(a.formattedNumber), 1);
+}
+const b = /* @__PURE__ */ c(u, [["render", x]]);
+export {
+  b as default
+};