@opengis/bi
Version:
BI data visualization module
317 lines (315 loc) • 13.4 kB
JavaScript
import { _ as F, a as H, p as O, V as D, b as P, c as j, d as A, l as G, e as N } from "./vs-list-BZGanNJB.js";
import { _ as E, c as W } from "./import-file-BBYAWahU.js";
import { resolveComponent as y, openBlock as c, createElementBlock as h, Fragment as S, createElementVNode as l, createVNode as M, createBlock as T, Teleport as R, toDisplayString as z, createCommentVNode as f, renderList as $, normalizeStyle as L, normalizeClass as V } from "vue";
const Z = {
components: { legendIcon: H, 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: O
// palette: ['#69D2E7', 'yellow', '#FE4365'],
};
},
computed: {
borderRadius() {
return this.cluster ? "rounded-sm" : "rounded-full";
},
sortedSizes() {
return [...this.sizes].sort((e, i) => e - i);
},
maxWidht() {
var t;
const e = ((t = this.sizes) == null ? void 0 : t.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;
}
}
}, q = { class: "w-full absolute max-w-[200px] bg-white border rounded-lg bottom-[10px] right-[50px]" }, J = { class: "flex items-center justify-between border-b border-[#0000001A] px-2" }, K = { 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"
}, U = {
key: 0,
class: "text-xs font-semibold leading-[1.2] text-[#1F2937] mb-[8px]"
}, X = { class: "flex flex-col gap-[6px]" }, Y = { class: "text-xs text-[#1F2937] font-normal leading-[1.2]" }, ee = {
key: 1,
class: "flex flex-col w-full"
}, te = {
key: 0,
class: "text-xs font-semibold leading-[1.2] text-[#1F2937] mb-[8px]"
}, se = { class: "flex flex-col gap-[6px]" }, oe = { class: "flex flex-row items-center justify-start" }, ae = { class: "text-xs text-[#1F2937] font-normal leading-[1.2]" };
function ie(e, i, t, s, a, o) {
var p, g;
const r = y("legendIcon"), u = y("closeIcon");
return c(), h(S, null, [
l("div", {
class: "flex justify-center items-center rounded-md w-[32px] h-[32px] cursor-pointer bg-white p-1 border-[2px]",
onClick: i[0] || (i[0] = (n) => a.isOpenLegend = !a.isOpenLegend)
}, [
M(r)
]),
a.isOpenLegend ? (c(), T(R, {
key: 0,
to: `#wrapper-${t.mapId}`
}, [
l("div", q, [
l("div", J, [
i[2] || (i[2] = l("h3", { class: "text-[16px] font-normal text-black" }, "Легенда", -1)),
l("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: i[1] || (i[1] = (n) => a.isOpenLegend = !1)
}, [
M(u, { class: "w-[20px]" })
])
]),
l("div", K, [
(p = t.colors) != null && p.length ? (c(), h("div", Q, [
t.colorTitle ? (c(), h("h4", U, z(t.colorTitle), 1)) : f("", !0),
l("div", X, [
(c(!0), h(S, null, $(t.colors, (n, d) => (c(), h("div", {
key: d,
class: "flex items-center gap-[10px]"
}, [
n.color ? (c(), h("div", {
key: 0,
class: "w-[12px] h-[12px] rounded-full",
style: L({
backgroundColor: n.color
})
}, null, 4)) : f("", !0),
l("p", Y, z(n.text || n.val), 1)
]))), 128))
])
])) : f("", !0),
(g = t.sizes) != null && g.length ? (c(), h("div", ee, [
e.sizeTitle ? (c(), h("h4", te, z(e.sizeTitle), 1)) : f("", !0),
l("div", se, [
o.sortedSizes.length ? (c(!0), h(S, { key: 0 }, $(o.sortedSizes, (n, d) => {
var m, b, v, w, _;
return c(), h("div", null, [
l("div", oe, [
l("div", {
class: V([o.maxWidht ? `w-[${o.maxWidht}]` : "", "mr-[10px]"])
}, [
l("div", {
class: V(o.sizeClass(d)),
style: L({
backgroundColor: ((b = (m = a.palette) == null ? void 0 : m[t.color]) == null ? void 0 : b[d]) || t.color
})
}, null, 6)
], 2),
l("p", ae, z(d === ((v = o.sortedSizes) == null ? void 0 : v.length) - 1 ? ">" + n : d == ((w = o.sortedSizes) == null ? void 0 : w.length) - 1 ? ">" + o.sortedSizes[((_ = o.sortedSizes) == null ? void 0 : _.length) - 1] : n + "-" + o.sortedSizes[d + 1]), 1)
])
]);
}), 256)) : f("", !0)
])
])) : f("", !0)
])
])
], 8, ["to"])) : f("", !0)
], 64);
}
const re = /* @__PURE__ */ E(Z, [["render", ie]]), le = {
components: {
VsMapSetting: A,
VsMapSlotLayers: j,
VsMapLegend: re,
VsMapGoHome: P,
VsList: D
},
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() {
var t, s;
const e = await G();
if (!e) return;
const i = {
version: 8,
glyphs: "https://cdn.softpro.ua/data/fonts/{fontstack}/{range}.pbf",
sources: {},
layers: []
};
this.map = await new e.Map({
container: this.mapId,
style: i,
center: [31, 48.5],
zoom: ((s = (t = this.data) == null ? void 0 : t.style) == null ? void 0 : s.zoom) || 5,
minZoom: 3,
maxZoom: 20,
attributionControl: !1
}), this.map.addControl(
new e.NavigationControl({
visualizePitch: !0
})
), this.map.on("load", () => {
this.loadHandler();
}), this.map.on("mousemove", (a) => {
this.moveMouseHadler(a);
}), this.map.on("mouseout", () => {
var a;
this.showLegend = !1, this.showSetting = !1, this.coordinatesByMouse = 0, (a = this.popup) == null || a.remove();
});
},
getPopoverTitle(e) {
var i, t, s, a, o;
return (t = (i = this.data) == null ? void 0 : i.colors) != null && t.find((r) => r.val === e) ? (o = (a = (s = this.data) == null ? void 0 : s.colors) == null ? void 0 : a.find((r) => r.val === e)) == null ? void 0 : o.text : e;
},
moveMouseHadler(e) {
var i;
try {
const t = this.map.queryRenderedFeatures(e.point), s = ((i = t[0]) == null ? void 0 : i.properties) || {};
if (!t.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((s == null ? void 0 : s.x) || (s == null ? void 0 : s.title) || (s == null ? void 0 : s.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>${(s == null ? void 0 : s.metric) || 0}</span>
</div>`;
const a = this.map.project(e.lngLat);
this.popupElement.style.left = `${a.x}px`, this.popupElement.style.top = `${a.y - 60}px`, this.map.getContainer().appendChild(this.popupElement);
} catch (t) {
console.error(t);
}
}
}
}, ne = {
mixins: [W, N, le],
name: "VsMap",
async mounted() {
await this.getMapData(), await this.createMap();
},
methods: {
async getMapData() {
var o, r, u;
if (this.prefetchedData) {
this.data = this.prefetchedData, this.$emit("update:widgetData", this.prefetchedData), setTimeout(() => {
var p;
return (p = this.map) == null ? void 0 : p.resize();
});
return;
}
const e = ((o = this.resolveWidgetId) == null ? void 0 : o.call(this)) || this.widget, i = ((r = this.resolveDashboardId) == null ? void 0 : r.call(this)) || this.dashboard, t = ((u = this.resolvePrefix) == null ? void 0 : u.call(this)) || "/api", a = await (await fetch(
`${t}/bi-map?widget=${e}&dashboard=${i}`
)).json();
this.data = a, this.$emit("update:widgetData", a), setTimeout(() => {
var p;
return (p = this.map) == null ? void 0 : p.resize();
});
},
async loadHandler() {
var d, m, b, v, w, _, I, C;
const e = ["#69D2E7", "yellow", "#FE4365"], i = this.data.colors ? ["match", ["get", "x"]].concat(
this.data.colors.reduce(
(k, x, B) => k.concat(x.val, (x == null ? void 0 : x.color) || e[B]),
[]
)
).concat(["gray"]) : "blue", t = [5, 7, 9, 11, 13], s = this.data.sizes ? ["case"] : 5;
this.data.sizes && (this.data.sizes.reverse().forEach((k, x) => {
s.push([">", ["get", "metric"], k]), s.push(t[x]);
}), s.push(5));
const a = {
type: "circle",
color: i,
width: 2,
radius: s,
stroke: "#eee"
};
Object.assign(a, this.data.style || {});
const o = ((d = this.data) == null ? void 0 : d.config) || {}, r = o.geojson || ((m = this.data) == null ? void 0 : m.geojson) || (o.type === "FeatureCollection" ? o : null), u = o.service === "geojson" || ((b = this.data) == null ? void 0 : b.service) === "geojson" || o.source === "geojson" || /geojson/i.test(o.url || ((v = this.data) == null ? void 0 : v.url) || "") || (r == null ? void 0 : r.type) === "FeatureCollection" || Array.isArray(r == null ? void 0 : r.features), p = ((w = this.resolveWidgetId) == null ? void 0 : w.call(this)) || this.widget, g = ((_ = this.resolveDashboardId) == null ? void 0 : _.call(this)) || this.dashboard, n = ((I = this.resolvePrefix) == null ? void 0 : I.call(this)) || "/api";
if (u) {
this.addGeoJsonLayer({
id: "bi",
url: o.url || ((C = this.data) == null ? void 0 : C.url),
data: r,
style: a
});
return;
}
this.addVtileLayer({
id: "bi",
url: `${window.top.location.origin}${n}/bi-vtile/{z}/{x}/{y}.vmt?widget=${p}&dashboard=${g}&nocache=1`,
style: a
});
}
}
}, de = { class: "w-full h-full" }, ce = { class: "flex items-start justify-between mb-[6px] w-full" }, pe = { class: "text-gray-800 font-[600]" }, he = ["id"], ue = ["id"], me = { class: "absolute flex flex-col right-[10px] top-[105px] gap-1" };
function fe(e, i, t, s, a, o) {
var n, d, m;
const r = y("VsMapSetting"), u = y("VsMapSlotLayers"), p = y("VsMapLegend"), g = y("VsMapGoHome");
return c(), h("div", de, [
l("div", ce, [
l("h5", pe, z(e.title), 1)
]),
l("div", {
class: "relative w-full h-[calc(100%-40px)]",
id: `wrapper-${e.mapId}`
}, [
l("div", {
id: e.mapId,
class: "w-full flex items-end relative h-full min-h-[250px]"
}, null, 8, ue),
e.showSetting ? (c(), T(r, {
key: 0,
map: e.map,
coordinates: e.coordinatesByMouse
}, null, 8, ["map", "coordinates"])) : f("", !0),
M(u, { map: e.map }, null, 8, ["map"]),
l("div", me, [
M(p, {
mapId: e.mapId,
colors: (n = e.data) == null ? void 0 : n.colors,
sizes: (d = e.data) == null ? void 0 : d.sizes,
color: e.color,
resizeItem: "true"
}, null, 8, ["mapId", "colors", "sizes", "color"]),
M(g, {
map: e.map,
bbox: (m = e.data) == null ? void 0 : m.bounds
}, null, 8, ["map", "bbox"])
])
], 8, he)
]);
}
const be = /* @__PURE__ */ E(ne, [["render", fe]]);
export {
be as default
};