@opengis/bi/dist/vs-map-cluster-YdXTBIVf.js

BI data visualization module

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
};