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

BI data visualization module

import { _ as J, a as K, p as N, c as Q, V as U, b as X, d as Y, e as $, l as D } from "./vs-list-BZGanNJB.js";
import { e as j, _ as O, V as ee, c as te, g as se, h as oe, i as re } from "./import-file-BBYAWahU.js";
import { openBlock as c, createElementBlock as b, createElementVNode as n, normalizeClass as T, Fragment as P, renderList as W, toDisplayString as Z, normalizeStyle as ae, createCommentVNode as L, createBlock as V, unref as ie, mergeProps as le, resolveComponent as v, resolveDynamicComponent as ne, withDirectives as E, createVNode as C, vShow as B } from "vue";
/**
 * @license lucide-vue-next v0.577.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const ce = j("map", [
  [
    "path",
    {
      d: "M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z",
      key: "169xi5"
    }
  ],
  ["path", { d: "M15 5.764v15", key: "1pn4in" }],
  ["path", { d: "M9 3.236v15", key: "1uimfh" }]
]), pe = {
  components: { legendIcon: K, closeIcon: J },
  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: N
      // palette: ['#69D2E7', 'yellow', '#FE4365'],
    };
  },
  computed: {
    borderRadius() {
      return this.cluster ? "rounded-sm" : "rounded-full";
    },
    sortedSizes() {
      return [...this.sizes].sort((s, a) => s - a);
    },
    maxWidht() {
      var r;
      const s = ((r = this.sizes) == null ? void 0 : r.length) - 1;
      return this.calcSize(s);
    }
  },
  methods: {
    sizeClass(s) {
      return this.resizeItem ? `h-[${this.calcSize(s)}] w-[${this.calcSize(s)}] ${this.borderRadius}` : `h-[10px]  ${this.borderRadius}`;
    },
    calcSize(s) {
      return `${10 + s * 2}px`;
    },
    getOpacity(s) {
      return (s + 1) / this.sortedSizes.length;
    }
  }
}, de = {
  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"
}, he = { class: "w-[80px] mr-[10px]" }, ue = ["title"], me = { class: "text-[10px] mb-[2px] text-[#1F2937] font-normal leading-[1.2]" };
function ge(s, a, r, t, e, o) {
  var x;
  return (x = r.sizes) != null && x.length ? (c(), b("div", de, [
    n("div", he, [
      a[0] || (a[0] = n("p", { class: "text-[10px] mb-[2px] text-[#1F2937] leading-[1.2]" }, " Дані відсутні ", -1)),
      n("div", {
        class: T([o.sizeClass(s.index), "w-full border border-gray-500"])
      }, null, 2)
    ]),
    o.sortedSizes.length ? (c(!0), b(P, { key: 0 }, W(o.sortedSizes, (d, l) => {
      var h, p, _, u, m, g, y, f;
      return c(), b("div", {
        class: "w-[80px]",
        title: l === ((h = o.sortedSizes) == null ? void 0 : h.length) - 1 ? ">" + d : l == ((p = o.sortedSizes) == null ? void 0 : p.length) - 1 ? ">" + o.sortedSizes[((_ = o.sortedSizes) == null ? void 0 : _.length) - 1] : d + "-" + o.sortedSizes[l + 1]
      }, [
        n("p", me, Z(l === ((u = o.sortedSizes) == null ? void 0 : u.length) - 1 ? ">" + parseInt(d) : l == ((m = o.sortedSizes) == null ? void 0 : m.length) - 1 ? ">" + parseInt(o.sortedSizes[((g = o.sortedSizes) == null ? void 0 : g.length) - 1]) : parseInt(d) + "-" + parseInt(o.sortedSizes[l + 1])), 1),
        n("div", {
          class: T([o.sizeClass(l), "w-full border border-r-0 border-gray-500"]),
          style: ae({
            backgroundColor: ((f = (y = e.palette) == null ? void 0 : y[r.color]) == null ? void 0 : f[l]) || r.color
          })
        }, null, 6)
      ], 8, ue);
    }), 256)) : L("", !0)
  ])) : L("", !0);
}
const ye = /* @__PURE__ */ O(pe, [["render", ge]]), fe = {
  __name: "icon-map",
  setup(s) {
    return (a, r) => (c(), V(ie(ce), le(a.$attrs, { size: 24 }), null, 16));
  }
}, xe = {
  mixins: [te, $],
  components: {
    VsMapSetting: Y,
    VsClusterLegend: ye,
    VsMapGoHome: X,
    VsList: U,
    VsMapSlotLayers: Q,
    // VsListbar,
    VsBar: ee
  },
  data() {
    return {
      baseColor: "pink",
      kattotg: "",
      options: [
        { id: "map", text: "Карта", component: fe },
        { id: "table", text: "Таблиця", component: oe },
        { id: "chart", text: "Віджет", component: re }
      ],
      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() {
      var t, e;
      if (this.prefetchedData) {
        this.data = this.prefetchedData, this.$emit("update:widgetData", this.data), setTimeout(() => {
          var o;
          return (o = this.map) == null ? void 0 : o.resize();
        });
        return;
      }
      const s = ((t = this.resolveWidgetId) == null ? void 0 : t.call(this)) || this.widget, a = ((e = this.resolveDashboardId) == null ? void 0 : e.call(this)) || this.dashboard, r = await se.get(
        `/bi-cluster?widget=${s}&dashboard=${a}`
      );
      this.data = r, this.$emit("update:widgetData", this.data), setTimeout(() => {
        var o;
        return (o = this.map) == null ? void 0 : o.resize();
      });
    },
    async loadHandler() {
      var u, m, g, y, f, w, z, S, M, I, i, k, H, A;
      this.baseColor = ((u = this.data.style) == null ? void 0 : u.color) || "blue";
      const s = ["case"];
      (y = (g = (m = this.data) == null ? void 0 : m.sizes) == null ? void 0 : g.toReversed()) == null || y.forEach((q, F) => {
        var R, G;
        s.push([">", ["get", "metric"], q]), s.push((G = (R = N[this.baseColor]) == null ? void 0 : R.toReversed()) == null ? void 0 : G[F]), F++;
      }), s.push("gray");
      const a = ((f = this.data) == null ? void 0 : f.config) || {}, r = a.geojson || ((w = this.data) == null ? void 0 : w.geojson) || (a.type === "FeatureCollection" ? a : null), t = a.service === "geojson" || ((z = this.data) == null ? void 0 : z.service) === "geojson" || a.source === "geojson" || /geojson/i.test(a.url || ((S = this.data) == null ? void 0 : S.url) || "") || (r == null ? void 0 : r.type) === "FeatureCollection" || Array.isArray(r == null ? void 0 : r.features), e = this.data.style || {}, o = {
        type: t ? e.type || "point" : "polygon",
        color: s,
        opacity: 0.4,
        ...e
      };
      (I = (M = this.data) == null ? void 0 : M.sizes) != null && I.length && Array.isArray(s) && (o.color = s);
      const x = ((i = this.resolveWidgetId) == null ? void 0 : i.call(this)) || this.widget, d = ((k = this.resolveDashboardId) == null ? void 0 : k.call(this)) || this.dashboard, l = ((H = this.resolvePrefix) == null ? void 0 : H.call(this)) || "/api";
      this.map.getSource("bi") || (t ? this.addGeoJsonLayer({
        id: "bi",
        url: a.url || ((A = this.data) == null ? void 0 : A.url),
        data: r,
        style: o
      }) : this.addVtileLayer({
        id: "bi",
        url: `${window.location.origin}${l}/bi-cluster-vtile/{z}/{x}/{y}.vmt?widget=${x}&dashboard=${d}&nocache=1`,
        style: o
      })), this.map.getLayer("highlighted") && this.map.removeLayer("highlighted"), this.map.getSource("highlighted") && this.map.removeSource("highlighted");
      const h = this.kattotg ? ["case", ["==", ["to-string", ["get", "name"]], String(this.kattotg)], "red", "transparent"] : "transparent", p = o.type === "line" ? "line" : o.type === "polygon" ? "fill" : "circle", _ = {
        id: "highlighted",
        type: p,
        source: "bi",
        ...t || p === "circle" ? {} : { "source-layer": "bi" },
        paint: p === "line" ? {
          "line-color": h,
          "line-opacity": 0.9,
          "line-width": 3
        } : p === "circle" ? {
          "circle-color": h,
          "circle-radius": 9,
          "circle-opacity": 0.6
        } : {
          "fill-color": h,
          "fill-opacity": 0.6
        }
      };
      this.map.addLayer(_);
    },
    async createMap() {
      var r, t;
      const s = await D();
      if (!s) return;
      const a = {
        version: 8,
        glyphs: "https://cdn.softpro.ua/data/fonts/{fontstack}/{range}.pbf",
        sources: {},
        layers: []
      };
      this.map = await new s.Map({
        container: this.mapId,
        style: a,
        center: [31, 48.5],
        zoom: ((t = (r = this.data) == null ? void 0 : r.style) == null ? void 0 : t.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", (e) => {
        this.moveMouseHadler(e);
      }), this.map.on("mouseout", () => {
        var e;
        this.showLegend = !1, this.showSetting = !1, this.coordinatesByMouse = 0, (e = this.popup) == null || e.remove();
      });
    },
    moveMouseHadler(s) {
      var a;
      try {
        const r = this.map.queryRenderedFeatures(s.point), t = ((a = r[0]) == null ? void 0 : a.properties) || {};
        if (!r.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">
        ${(t == null ? void 0 : t.title) || (t == null ? void 0 : t.name) || (t == null ? void 0 : t.x) || ""}
        </div>
        ${t != null && t.x && (t == null ? void 0 : t.x) !== ((t == null ? void 0 : t.title) || (t == null ? void 0 : t.name)) ? `
        <div class="px-2 py-0.5 text-[11px] text-gray-500 border-b border-gray-200">
          ${t == null ? void 0 : t.x}
        </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>${(t == null ? void 0 : t.metric) || 0}</span>
        </div>`;
        const e = this.map.project(s.lngLat);
        this.popupElement.style.left = `${e.x}px`, this.popupElement.style.top = `${e.y - 60}px`, this.map.getContainer().appendChild(this.popupElement);
      } catch (r) {
        console.error(r);
      }
    }
  }
}, _e = { class: "h-full" }, ve = { class: "flex items-start justify-between mb-[6px] w-full" }, be = { class: "text-gray-800 font-[600]" }, we = { class: "flex gap-2" }, ze = ["onClick"], Se = ["id"], Me = ["id"], Ie = { class: "absolute flex flex-col right-[10px] top-[105px] gap-1" }, Ce = { class: "h-[calc(250px)]" };
function Ve(s, a, r, t, e, o) {
  var u, m, g, y, f, w, z, S, M, I;
  const x = v("VsMapSetting"), d = v("VsMapSlotLayers"), l = v("VsMapGoHome"), h = v("VsClusterLegend"), p = v("VsList"), _ = v("VsBar");
  return c(), b("div", _e, [
    n("div", ve, [
      n("h3", be, Z(s.title), 1),
      n("div", we, [
        (c(!0), b(P, null, W(e.options, (i) => (c(), b("button", {
          class: T(["p-1 text-gray-700 border rounded", [e.activeTab === (i == null ? void 0 : i.id) ? "ring-2 ring-blue-500" : ""]]),
          onClick: (k) => e.activeTab = i == null ? void 0 : i.id
        }, [
          (c(), V(ne(i == null ? void 0 : i.component), {
            height: "16",
            width: "16"
          }))
        ], 10, ze))), 256))
      ])
    ]),
    E(n("div", {
      class: "relative w-full h-[calc(100%-40px)]",
      id: `wrapper-${e.mapId}`
    }, [
      n("div", {
        id: e.mapId,
        class: "h-full w-full flex items-end min-h-[250px]"
      }, null, 8, Me),
      e.showSetting ? (c(), V(x, {
        key: 0,
        map: e.map,
        coordinates: e.coordinatesByMouse
      }, null, 8, ["map", "coordinates"])) : L("", !0),
      C(d, { map: e.map }, null, 8, ["map"]),
      n("div", Ie, [
        C(l, {
          map: e.map,
          bbox: (u = e.data) == null ? void 0 : u.bounds
        }, null, 8, ["map", "bbox"])
      ]),
      C(h, {
        mapId: e.mapId,
        colors: (m = e.data) == null ? void 0 : m.colors,
        sizes: (g = e.data) == null ? void 0 : g.sizes,
        color: e.baseColor,
        changeOpacityItem: "true",
        cluster: "true"
      }, null, 8, ["mapId", "colors", "sizes", "color"])
    ], 8, Se), [
      [B, e.activeTab == "map"]
    ]),
    E(C(p, {
      mapId: e.mapId,
      source: (y = e.data) == null ? void 0 : y.rows,
      total: ((f = e.data) == null ? void 0 : f.total) || 0,
      count: ((w = e.data) == null ? void 0 : w.count) || 0,
      onKattotg: a[0] || (a[0] = (i) => e.kattotg = i)
    }, null, 8, ["mapId", "source", "total", "count"]), [
      [B, e.activeTab == "table"]
    ]),
    E(n("div", Ce, [
      (S = (z = e.data) == null ? void 0 : z.rows) != null && S.length ? (c(), V(_, {
        key: 0,
        source: (I = (M = e.data) == null ? void 0 : M.rows) == null ? void 0 : I.map((i) => ({
          title: i == null ? void 0 : i.title,
          metric: i == null ? void 0 : i.metric
        }))
      }, null, 8, ["source"])) : L("", !0)
    ], 512), [
      [B, e.activeTab == "chart"]
    ])
  ]);
}
const Be = /* @__PURE__ */ O(xe, [["render", Ve]]);
export {
  Be as default
};