@opengis/bi
Version:
BI data visualization module
286 lines (284 loc) • 11.3 kB
JavaScript
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
};