@opengis/bi 1.2.7 → 1.2.10

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

@@ -1,356 +0,0 @@
-import { c as F, l as G, p as T, b as A, V as P, a as Z, d as q, e as D } from "./vs-list-_I6Z56hC.js";
-import { _ as x, V as K, c as W, e as j } from "./import-file-DnbEvuUN.js";
-import { createElementBlock as p, createCommentVNode as S, openBlock as c, createElementVNode as r, normalizeClass as I, Fragment as N, renderList as R, toDisplayString as O, normalizeStyle as J, createStaticVNode as Q, resolveComponent as g, withDirectives as M, createBlock as k, resolveDynamicComponent as U, createVNode as z, vShow as C } from "vue";
-const X = {
-  components: { legendIcon: G, closeIcon: F },
-  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, s) => e - s);
-    },
-    maxWidht() {
-      var n;
-      const e = ((n = this.sizes) == null ? void 0 : n.length) - 1;
-      return this.calcSize(e);
-    }
-  },
-  methods: {
-    sizeClass(e) {
-      return this.resizeItem ? `h-[${this.calcSize(e)}] w-[${this.calcSize(e)}] ${this.borderRadius}` : `h-[10px]  ${this.borderRadius}`;
-    },
-    calcSize(e) {
-      return `${10 + e * 2}px`;
-    },
-    getOpacity(e) {
-      return (e + 1) / this.sortedSizes.length;
-    }
-  }
-}, Y = {
-  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"
-}, $ = { class: "w-[80px] mr-[10px]" }, tt = ["title"], et = { class: "text-[10px] mb-[2px] text-[#1F2937] font-normal leading-[1.2]" };
-function st(e, s, n, o, t, a) {
-  var h;
-  return (h = n.sizes) != null && h.length ? (c(), p("div", Y, [
-    r("div", $, [
-      s[0] || (s[0] = r("p", { class: "text-[10px] mb-[2px] text-[#1F2937] leading-[1.2]" }, " Дані відсутні ", -1)),
-      r("div", {
-        class: I([a.sizeClass(e.index), "w-full border border-gray-500"])
-      }, null, 2)
-    ]),
-    a.sortedSizes.length ? (c(!0), p(N, { key: 0 }, R(a.sortedSizes, (d, i) => {
-      var u, m, w, f, y, b, v, _;
-      return c(), p("div", {
-        class: "w-[80px]",
-        title: i === ((u = a.sortedSizes) == null ? void 0 : u.length) - 1 ? ">" + d : i == ((m = a.sortedSizes) == null ? void 0 : m.length) - 1 ? ">" + a.sortedSizes[((w = a.sortedSizes) == null ? void 0 : w.length) - 1] : d + "-" + a.sortedSizes[i + 1]
-      }, [
-        r("p", et, O(i === ((f = a.sortedSizes) == null ? void 0 : f.length) - 1 ? ">" + parseInt(d) : i == ((y = a.sortedSizes) == null ? void 0 : y.length) - 1 ? ">" + parseInt(a.sortedSizes[((b = a.sortedSizes) == null ? void 0 : b.length) - 1]) : parseInt(d) + "-" + parseInt(a.sortedSizes[i + 1])), 1),
-        r("div", {
-          class: I([a.sizeClass(i), "w-full border border-r-0 border-gray-500"]),
-          style: J({
-            backgroundColor: ((_ = (v = t.palette) == null ? void 0 : v[n.color]) == null ? void 0 : _[i]) || n.color
-          })
-        }, null, 6)
-      ], 8, tt);
-    }), 256)) : S("", !0)
-  ])) : S("", !0);
-}
-const ot = /* @__PURE__ */ x(X, [["render", st]]), rt = {}, nt = {
-  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 at(e, s) {
-  return c(), p("svg", nt, s[0] || (s[0] = [
-    r("path", {
-      stroke: "none",
-      d: "M0 0h24v24H0z",
-      fill: "none"
-    }, null, -1),
-    r("path", { d: "M3 7l6 -3l6 3l6 -3v13l-6 3l-6 -3l-6 3v-13" }, null, -1),
-    r("path", { d: "M9 4v13" }, null, -1),
-    r("path", { d: "M15 7v13" }, null, -1)
-  ]));
-}
-const lt = /* @__PURE__ */ x(rt, [["render", at]]), it = {}, ct = {
-  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-table"
-};
-function pt(e, s) {
-  return c(), p("svg", ct, s[0] || (s[0] = [
-    r("path", {
-      stroke: "none",
-      d: "M0 0h24v24H0z",
-      fill: "none"
-    }, null, -1),
-    r("path", { d: "M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" }, null, -1),
-    r("path", { d: "M3 10h18" }, null, -1),
-    r("path", { d: "M10 3v18" }, null, -1)
-  ]));
-}
-const dt = /* @__PURE__ */ x(it, [["render", pt]]), ht = {}, ut = {
-  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-align-box-left-stretch"
-};
-function mt(e, s) {
-  return c(), p("svg", ut, s[0] || (s[0] = [
-    Q('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"></path><path d="M9 17h-2"></path><path d="M13 12h-6"></path><path d="M11 7h-4"></path>', 5)
-  ]));
-}
-const gt = /* @__PURE__ */ x(ht, [["render", mt]]), ft = {
-  mixins: [W, D],
-  components: {
-    VsMapSetting: q,
-    VsClusterLegend: ot,
-    VsMapGoHome: Z,
-    VsList: P,
-    VsMapSlotLayers: A,
-    // VsListbar,
-    VsBar: K
-  },
-  data() {
-    return {
-      baseColor: "pink",
-      kattotg: "",
-      options: [
-        { id: "map", text: "Карта", component: lt },
-        { id: "table", text: "Таблиця", component: dt },
-        { id: "chart", text: "Віджет", component: gt }
-      ],
-      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 e = await j.get(
-        `/bi-cluster?widget=${this.widget}&dashboard=${this.dashboard}`
-      );
-      this.data = e.data, this.$emit("update:widgetData", this.data), setTimeout(() => {
-        var s;
-        return (s = this.map) == null ? void 0 : s.resize();
-      });
-    },
-    async loadHandler() {
-      var o, t, a, h;
-      this.baseColor = ((o = this.data.style) == null ? void 0 : o.color) || "blue";
-      const e = ["case"];
-      (h = (a = (t = this.data) == null ? void 0 : t.sizes) == null ? void 0 : a.toReversed()) == null || h.forEach((d, i) => {
-        var u, m;
-        e.push([">", ["get", "metric"], d]), e.push((m = (u = T[this.baseColor]) == null ? void 0 : u.toReversed()) == null ? void 0 : m[i]), i++;
-      }), e.push("gray");
-      const s = {
-        type: "polygon",
-        color: e,
-        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() {
-      var s, n;
-      const e = {
-        version: 8,
-        glyphs: "https://cdn.softpro.ua/data/fonts/{fontstack}/{range}.pbf",
-        sources: {},
-        layers: []
-      };
-      this.map = await new maplibregl.Map({
-        container: this.mapId,
-        style: e,
-        center: [31, 48.5],
-        zoom: ((n = (s = this.data) == null ? void 0 : s.style) == null ? void 0 : n.zoom) || 5,
-        minZoom: 3,
-        maxZoom: 20,
-        attributionControl: !1
-      }), this.map.addControl(
-        new maplibregl.NavigationControl({
-          visualizePitch: !0
-        })
-      ), this.map.on("load", () => {
-        this.loadHandler();
-      }), this.map.on("mousemove", (o) => {
-        this.moveMouseHadler(o);
-      }), this.map.on("mouseout", () => {
-        var o;
-        this.showLegend = !1, this.showSetting = !1, this.coordinatesByMouse = 0, (o = this.popup) == null || o.remove();
-      });
-    },
-    moveMouseHadler(e) {
-      var s;
-      try {
-        const n = this.map.queryRenderedFeatures(e.point), o = ((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">
-        ${(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 t = this.map.project(e.lngLat);
-        this.popupElement.style.left = `${t.x}px`, this.popupElement.style.top = `${t.y - 60}px`, this.map.getContainer().appendChild(this.popupElement);
-      } catch (n) {
-        console.error(n);
-      }
-    }
-  }
-}, yt = { class: "h-full" }, bt = { class: "flex items-start justify-between mb-[6px] w-full" }, vt = { class: "text-gray-800 font-[600]" }, _t = { class: "flex gap-2" }, xt = ["onClick"], wt = ["id"], zt = ["id"], St = { class: "absolute flex flex-col right-[10px] top-[105px] gap-1" }, Mt = { class: "h-[calc(250px)]" };
-function kt(e, s, n, o, t, a) {
-  var f, y, b, v, _, V, L, E, B, H;
-  const h = g("VsMapSetting"), d = g("VsMapSlotLayers"), i = g("VsMapGoHome"), u = g("VsClusterLegend"), m = g("VsList"), w = g("VsBar");
-  return c(), p("div", yt, [
-    r("div", bt, [
-      r("h3", vt, O(e.title), 1),
-      r("div", _t, [
-        (c(!0), p(N, null, R(t.options, (l) => (c(), p("button", {
-          class: I(["p-1 text-gray-700 border rounded", [t.activeTab === (l == null ? void 0 : l.id) ? "ring-2 ring-blue-500" : ""]]),
-          onClick: (Ct) => t.activeTab = l == null ? void 0 : l.id
-        }, [
-          (c(), k(U(l == null ? void 0 : l.component), {
-            height: "16",
-            width: "16"
-          }))
-        ], 10, xt))), 256))
-      ])
-    ]),
-    M(r("div", {
-      class: "relative w-full h-[calc(100%-40px)]",
-      id: `wrapper-${t.mapId}`
-    }, [
-      r("div", {
-        id: t.mapId,
-        class: "h-full w-full flex items-end min-h-[250px]"
-      }, null, 8, zt),
-      t.showSetting ? (c(), k(h, {
-        key: 0,
-        map: t.map,
-        coordinates: t.coordinatesByMouse
-      }, null, 8, ["map", "coordinates"])) : S("", !0),
-      z(d, { map: t.map }, null, 8, ["map"]),
-      r("div", St, [
-        z(i, {
-          map: t.map,
-          bbox: (f = t.data) == null ? void 0 : f.bounds
-        }, null, 8, ["map", "bbox"])
-      ]),
-      z(u, {
-        mapId: t.mapId,
-        colors: (y = t.data) == null ? void 0 : y.colors,
-        sizes: (b = t.data) == null ? void 0 : b.sizes,
-        color: t.baseColor,
-        changeOpacityItem: "true",
-        cluster: "true"
-      }, null, 8, ["mapId", "colors", "sizes", "color"])
-    ], 8, wt), [
-      [C, t.activeTab == "map"]
-    ]),
-    M(z(m, {
-      mapId: t.mapId,
-      source: (v = t.data) == null ? void 0 : v.rows,
-      total: ((_ = t.data) == null ? void 0 : _.total) || 0,
-      count: ((V = t.data) == null ? void 0 : V.count) || 0,
-      onKattotg: s[0] || (s[0] = (l) => t.kattotg = l)
-    }, null, 8, ["mapId", "source", "total", "count"]), [
-      [C, t.activeTab == "table"]
-    ]),
-    M(r("div", Mt, [
-      (E = (L = t.data) == null ? void 0 : L.rows) != null && E.length ? (c(), k(w, {
-        key: 0,
-        source: (H = (B = t.data) == null ? void 0 : B.rows) == null ? void 0 : H.map((l) => ({
-          title: l == null ? void 0 : l.title,
-          metric: l == null ? void 0 : l.metric
-        }))
-      }, null, 8, ["source"])) : S("", !0)
-    ], 512), [
-      [C, t.activeTab == "chart"]
-    ])
-  ]);
-}
-const Et = /* @__PURE__ */ x(ft, [["render", kt]]);
-export {
-  Et as default
-};