vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,265 lines • 51.4 kB
JavaScript
import { defineAsyncComponent as ce, ref as h, toRefs as bo, computed as d, watch as ne, nextTick as re, onBeforeUnmount as Nt, onMounted as Co, createElementBlock as N, openBlock as g, normalizeStyle as fe, normalizeClass as wt, createCommentVNode as M, createBlock as V, createVNode as Pt, unref as y, withCtx as F, renderSlot as b, normalizeProps as $, guardReactiveProps as T, createSlots as Ao, createElementVNode as ie, Fragment as de, renderList as me, mergeProps as ko, toDisplayString as Fo } from "vue";
import { c as No, t as wo, m as Ee, X as Po, y as $t } from "./lib-BwysEpWI.js";
import { u as $o } from "./usePanZoom-CDF7rb3o.js";
import { t as To, u as xo } from "./useResponsive-DfdjqQps.js";
import { u as Eo, a as Ie } from "./useNestedProp-OFRiX4kU.js";
import { u as Io, B as Bo } from "./BaseScanner-BMpwQAfz.js";
import { u as So } from "./usePrinter-BJzHDpYF.js";
import { u as Oo } from "./useSvgExport-ByUukOZt.js";
import { u as Mo } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Ro } from "./useUserOptionState-BIvW1Kz7.js";
import { u as _o } from "./useChartAccessibility-9icAAmYg.js";
import jo from "./img-DKigoPDs.js";
import { g as Go } from "./geoProjections-D0Vxsz_O.js";
import zo from "./Title-DGnfNZuO.js";
import { B as Tt } from "./BaseZoomControls-C0H509ZF.js";
import { _ as Do } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Et = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", controls: { backgroundColor: "#2A2A2A", buttonColor: "#2A2A2A", color: "#CCCCCC", border: "1px solid #4A4A4A" }, territory: { fill: "#2A2A2A", stroke: "#5A5A5A", hover: { fill: "#3A3A3A", stroke: "#6A6A6A" } }, points: { stroke: "#1A1A1A", fill: "#CCCCCC", labels: { color: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } } }, It = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", controls: { backgroundColor: "#FFF8E1", buttonColor: "#FFF8E1", color: "#424242", border: "1px solid #d9bbb2" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, territory: { fill: "#e3dcc8", stroke: "#f7c0b0", hover: { fill: "#FFECB3", stroke: "#FF8A65" } }, points: { stroke: "#FFF8E1", fill: "#424242", labels: { color: "#424242" } } } } }, Bt = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", controls: { backgroundColor: "#1E1E1E", buttonColor: "#1E1E1E", color: "#BDBDBD", border: "1px solid #3A3A3A" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, territory: { fill: "#2A1E1E", stroke: "#6e483c", hover: { fill: "#403e39", stroke: "#805244" } }, points: { stroke: "#1E1E1E", fill: "#BDBDBD", labels: { color: "#BDBDBD" } } } } }, St = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", controls: { backgroundColor: "#fbfafa", buttonColor: "#fbfafa", color: "#99AA99", border: "1px solid #ebded3" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" }, territory: { fill: "#e6e2df", stroke: "#fbfafa", hover: { fill: "#dbd5d0", stroke: "#fbfafa" } }, points: { stroke: "#fbfafa", fill: "#8A9892", labels: { color: "#8A9892" } } } } }, Ot = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", controls: { backgroundColor: "#1A1A1A", buttonColor: "#1A1A1A", color: "#99AA99", border: "1px solid #1e361e" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" }, territory: { fill: "#1A1F1A", stroke: "#2c5c2c", hover: { fill: "#3A3A3A", stroke: "#66CC66" } }, points: { stroke: "#2c5c2c", fill: "#66CC66", labels: { color: "#99AA99" } } } } }, Mt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", controls: { backgroundColor: "#f6f6fb", buttonColor: "#f6f6fb", color: "#50606C", border: "1px solid #98aab8", borderRadius: "0" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" }, territory: { fill: "#cfdae3", stroke: "#98aab8", hover: { fill: "#bcc8d1", stroke: "#50606C" } }, points: { stroke: "#f6f6fb", fill: "#50606C", labels: { color: "#50606C" } } } } }, Rt = {
default: {},
dark: Et,
celebration: It,
celebrationNight: Bt,
zen: St,
hack: Ot,
concrete: Mt
}, pn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: It,
celebrationNight: Bt,
concrete: Mt,
dark: Et,
default: Rt,
hack: Ot,
zen: St
}, Symbol.toStringTag, { value: "Module" })), Zo = ["id"], Lo = ["xmlns", "viewBox", "id"], Wo = ["transform"], Yo = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], qo = ["d", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Ho = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseenter"], Xo = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Uo = ["x", "y", "fill", "font-size"], Vo = {
key: 5,
class: "vue-data-ui-watermark"
}, xt = 1.5, Jo = {
__name: "vue-ui-geo",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: [Array, Object],
default() {
return [];
}
}
},
setup(_t, { expose: jt }) {
const Gt = ce(() => import("./Tooltip-TDyKgLB6.js")), zt = ce(() => import("./UserOptions-CzJWRC4s.js")), Dt = ce(() => import("./PenAndPaper-DxIUvoQ8.js")), Zt = ce(() => import("./PackageVersion-BLzm8l_I.js")), J = _t, { vue_ui_geo: Lt } = Eo(), { isThemeValid: Wt, warnInvalidTheme: Yt } = Mo(), R = h(No()), he = h(0), Be = h(0), I = h(null), _ = h(!1), le = h(null), Se = h(null), Oe = h(null), Me = h(null), L = h(null), W = h(null), Re = h(null), _e = h(null), j = h(!1);
function je(e) {
j.value = e, he.value += 1;
}
function ve() {
const e = Ie({
userConfig: J.config,
defaultConfig: Lt
}), o = e.theme;
if (!o) return e;
if (!Wt.value(e))
return Yt(e), e;
const t = Ie({
userConfig: Rt[o] || J.config,
defaultConfig: e
});
return Ie({
userConfig: J.config,
defaultConfig: t
});
}
const r = h(ve()), { userOptionsVisible: Ge, keepUserOptionState: ze } = Ro({
config: r.value
}), { svgRef: ae } = _o({
config: r.value.style.chart.title
}), { loading: pe, FINAL_DATASET: qt } = Io({
...bo(J),
FINAL_CONFIG: r,
prepareConfig: ve,
allowEmptyDataset: !0,
skeletonDataset: [],
skeletonConfig: wo({
defaultConfig: r.value,
userConfig: {
map: {
geoJson: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: { name: "Island A" },
geometry: {
type: "Polygon",
coordinates: [
[
[-6, 2],
[-4, 2],
[-4, 4],
[-6, 4],
[-6, 2]
]
]
}
},
{
type: "Feature",
properties: { name: "Island B" },
geometry: {
type: "Polygon",
coordinates: [
[
[-2, -1],
[1, -1],
[1, 2],
[-2, 2],
[-2, -1]
]
]
}
},
{
type: "Feature",
properties: { name: "Island C" },
geometry: {
type: "Polygon",
coordinates: [
[
[3, -3],
[5, -3],
[5, -1],
[3, -1],
[3, -3]
]
]
}
},
{
type: "Feature",
properties: { name: "Island D" },
geometry: {
type: "Polygon",
coordinates: [
[
[4, 3],
[7, 3],
[7, 5],
[4, 5],
[4, 3]
]
]
}
}
]
}
},
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
territory: {
fill: "#99999950",
stroke: "#8A8A8A",
strokeWidth: 0.5
}
}
}
}
})
}), { isPrinting: De, isImaging: Ze, generatePdf: Le, generateImage: We } = So({
elementId: `vue-ui-geo_${R.value}`,
fileName: r.value.style.chart.title.text || "vue-ui-geo",
options: r.value.userOptions.print
}), Ht = d(() => r.value.style.chart.controls.show ? r.value.style.chart.controls.position === "top" ? Re.value?.$el ?? null : r.value.style.chart.controls.position === "bottom" ? _e.value?.$el ?? null : null : null);
function ge() {
L.value && (W.value && L.value.unobserve(W.value), L.value.disconnect(), L.value = null, W.value = null);
}
const Y = d(() => !!r.value.responsive && !j.value);
ne(
() => j.value,
async (e) => {
if (e) {
ge(), q.value = Number(r.value.style.chart.dimensions.width) || q.value, G.value = Number(r.value.style.chart.dimensions.height) || G.value, await re(), _.value = !1, requestAnimationFrame(() => {
_.value || ue();
});
return;
}
r.value.responsive && (await re(), ye());
}
);
function ye() {
if (ge(), !Y.value) return;
const e = To(() => {
if (!I.value) return;
const { width: o, height: t } = xo({
chart: I.value,
noTitle: Ye.value ? Oe.value : null,
title: r.value.style.chart.title.text ? Se.value : null,
legend: Ht.value,
source: Me.value
});
requestAnimationFrame(() => {
q.value = Math.max(0.1, Number(o) || 0.1), G.value = Math.max(0.1, Number(t) || 0.1) - 24;
});
});
L.value = new ResizeObserver(e), W.value = I.value ? I.value.parentNode : null, W.value && L.value.observe(W.value), e();
}
const Ye = d(() => r.value.userOptions.show && !r.value.style.chart.title.text), K = h({
showTooltip: r.value.style.chart.tooltip.show
}), B = h(r.value.style.chart.zoom.active);
ne(
() => J.config,
() => {
r.value = ve(), K.value.showTooltip = r.value.style.chart.tooltip.show, B.value = r.value.style.chart.zoom.active, q.value = r.value.style.chart.dimensions.width, G.value = r.value.style.chart.dimensions.height, ye(), Be.value += 1, he.value += 1;
},
{ deep: !0 }
);
const { projections: qe } = Go, He = d(() => r.value?.projection || "equirectangular"), Xt = d(() => {
const e = qe?.[He.value];
return typeof e == "function" ? e : qe.equirectangular;
}), Xe = d(() => r.value.map.geoJson ?? null), Ue = {
aitoff: { width: 1e3, height: 500 },
azimuthalEquidistant: { width: 1e3, height: 1e3 },
bonne: { width: 1e3, height: 1e3 },
equirectangular: { width: 1e3, height: 700 },
gallPeters: { width: 1e3, height: 800 },
globe: { width: 1e3, height: 1e3 },
hammer: { width: 1e3, height: 500 },
mercator: { width: 1e3, height: 750 },
mollweide: { width: 1e3, height: 600 },
robinson: { width: 1e3, height: 600 },
sinusoidal: { width: 1e3, height: 500 },
vanDerGrinten: { width: 1e3, height: 1e3 },
winkelTripel: { width: 1e3, height: 1e3 }
}, q = h(r.value.style.chart.dimensions.width), G = h(r.value.style.chart.dimensions.height), be = d(() => {
const e = Ue[He.value] || Ue.equirectangular;
return { width: e.width, height: e.height };
}), P = d(() => {
const e = be.value, o = q.value, t = G.value, n = Number.isFinite(o) && o > 0, i = Number.isFinite(t) && t > 0;
if (n && i)
return { width: o, height: t };
if (n && !i) {
const l = e.height / e.width;
return { width: o, height: o * l };
}
if (!n && i) {
const l = e.width / e.height;
return { width: t * l, height: t };
}
return { width: e.width, height: e.height };
}), Ut = d(() => {
const e = r.value?.map?.center, o = [0, 0];
if (!Array.isArray(e) || e.length !== 2) return o;
const t = Number(e[0]), n = Number(e[1]);
return !Number.isFinite(t) || !Number.isFinite(n) ? o : [t, n];
});
function H([e, o]) {
return Xt.value(
[e, o],
be.value.width,
be.value.height,
Ut.value
);
}
function Vt(e, o = {}) {
const {
defaultName: t = "",
namePropertyCandidates: n = [
"name",
"nom",
"admin",
"NAME",
"label",
"title",
"description",
"DESCRIPTION",
"NAME_1",
"NAME_2",
"NAME_3",
"NAME_EN",
"name:en",
"name_en",
"localname",
"local_name"
],
includeNullGeometries: i = !1
} = o, l = { type: "FeatureCollection", features: [] };
function a(u) {
return u !== null && typeof u == "object" && !Array.isArray(u);
}
function c(u) {
return !a(u) || typeof u.type != "string" ? !1 : u.type === "GeometryCollection" ? Array.isArray(u.geometries) : Object.hasOwn(u, "coordinates");
}
function f(u) {
if (!a(u)) return "";
for (const v of n) {
const A = u[v];
if (typeof A == "string" && A.trim())
return A.trim();
}
return "";
}
function s({ geometry: u, properties: v, fallbackName: A, featureIndex: m }) {
const p = a(v) ? { ...v } : {}, O = f(p), k = t ? `${t} ${m + 1}` : "", U = O || (typeof A == "string" ? A.trim() : "") || k;
return !p.name && U && (p.name = U), {
type: "Feature",
geometry: u,
properties: p
};
}
function w(u, v, A, m, p) {
const O = Array.isArray(u?.geometries) ? u.geometries : [];
let k = m;
for (let U = 0; U < O.length; U += 1) {
const D = O[U];
if (D) {
if (a(D) && D.type === "GeometryCollection") {
k = w(
D,
v,
A,
k,
p
);
continue;
}
if (c(D)) {
if (D.coordinates == null && D.type !== "GeometryCollection") {
i && (p.push(
s({
geometry: null,
properties: v,
fallbackName: A,
featureIndex: k
})
), k += 1);
continue;
}
p.push(
s({
geometry: D,
properties: v,
fallbackName: A,
featureIndex: k
})
), k += 1;
}
}
}
return k;
}
function C(u, v, A = 0) {
let m = A;
if (u == null) return m;
if (Array.isArray(u)) {
for (const p of u)
m = C(p, v, m);
return m;
}
if (!a(u) || typeof u.type != "string")
return m;
if (u.type === "FeatureCollection") {
const p = Array.isArray(u.features) ? u.features : [];
for (const O of p)
m = C(O, v, m);
return m;
}
if (u.type === "Feature") {
const p = a(u.properties) ? u.properties : {}, O = f(p), k = u.geometry ?? null;
return k == null ? (i && (v.push(
s({
geometry: null,
properties: p,
fallbackName: O,
featureIndex: m
})
), m += 1), m) : a(k) && k.type === "GeometryCollection" ? w(
k,
p,
O,
m,
v
) : (c(k) && (v.push(
s({
geometry: k,
properties: p,
fallbackName: O,
featureIndex: m
})
), m += 1), m);
}
return u.type === "GeometryCollection" ? w(u, {}, "", m, v) : (c(u) && (v.push(
s({
geometry: u,
properties: {},
fallbackName: "",
featureIndex: m
})
), m += 1), m);
}
const E = [];
return C(e, E, 0), { ...l, features: E };
}
function Jt(e) {
const o = Array.isArray(e?.features) ? e.features : [];
function t(n) {
if (!n || typeof n != "object") return "";
const i = [
n.name,
n.nom,
n.admin,
n.NAME,
n.label,
n.title,
n.description,
n.DESCRIPTION,
n.NAME_1,
n.NAME_2,
n.NAME_3,
n.NAME_EN,
n["name:en"],
n.name_en,
n.localname,
n.local_name
];
for (const l of i)
if (typeof l == "string" && l.trim()) return l.trim();
for (const l of Object.values(n))
if (typeof l == "string" && l.trim()) return l.trim();
return "";
}
return o.filter((n) => n && n.type === "Feature" && n.geometry).map((n, i) => {
const l = n.properties || {}, a = t(l);
return {
feature: n,
geometry: n.geometry,
properties: l,
name: a,
uid: `map-feature-${R.value}-${i}`,
index: i
};
});
}
const Kt = d(
() => Vt(Xe.value, {
defaultName: "",
includeNullGeometries: !1
})
), se = d(
() => Jt(Kt.value)
);
function Ce(e) {
if (!e || typeof e.type != "string") return "";
if (e.type === "GeometryCollection")
return (Array.isArray(e.geometries) ? e.geometries : []).map((l) => Ce(l)).filter(Boolean).join(" ");
const o = (i) => {
if (!Array.isArray(i) || i.length < 2) return null;
const l = Number(i[0]), a = Number(i[1]);
if (!Number.isFinite(l) || !Number.isFinite(a)) return null;
const c = H([l, a]);
if (!Array.isArray(c) || c.length < 2) return null;
const f = Number(c[0]), s = Number(c[1]);
return !Number.isFinite(f) || !Number.isFinite(s) ? null : [f, s];
}, t = (i) => {
const l = (i || []).map(o).filter(Boolean);
return l.length < 2 ? "" : "M" + l.map(([a, c]) => `${a},${c}`).join("L");
}, n = (i) => (i || []).map((l) => {
const a = t(l);
return a ? a + "Z" : "";
}).filter(Boolean).join(" ");
return e.type === "Polygon" ? n(e.coordinates) : e.type === "MultiPolygon" ? (e.coordinates || []).map(n).filter(Boolean).join(" ") : e.type === "LineString" ? t(e.coordinates) : e.type === "MultiLineString" ? (e.coordinates || []).map(t).filter(Boolean).join(" ") : "";
}
function Ve(e) {
return e ? e.type === "GeometryCollection" ? (Array.isArray(e.geometries) ? e.geometries : []).flatMap((t) => Ve(t)) : e.type === "Point" ? Array.isArray(e.coordinates) ? [e.coordinates] : [] : e.type === "MultiPoint" ? Array.isArray(e.coordinates) ? e.coordinates : [] : [] : [];
}
function Je(e) {
return !e || typeof e.type != "string" ? !1 : e.type === "GeometryCollection" ? (Array.isArray(e.geometries) ? e.geometries : []).some((t) => Je(t)) : e.type === "Point" || e.type === "MultiPoint";
}
const Qt = d(
() => se.value.filter((e) => {
const o = e.geometry;
return o ? o.type === "GeometryCollection" ? (Array.isArray(o.geometries) ? o.geometries : []).some(
(n) => n?.type === "Polygon" || n?.type === "MultiPolygon"
) : o.type === "Polygon" || o.type === "MultiPolygon" : !1;
})
), eo = d(
() => se.value.filter((e) => {
const o = e.geometry;
return o ? o.type === "GeometryCollection" ? (Array.isArray(o.geometries) ? o.geometries : []).some(
(n) => n?.type === "LineString" || n?.type === "MultiLineString"
) : o.type === "LineString" || o.type === "MultiLineString" : !1;
})
), to = d(
() => se.value.filter((e) => {
const o = e.geometry;
return o ? Je(o) : !1;
})
), Ke = d(() => Qt.value.map((e) => {
const o = Ce(e.geometry);
return o ? { ...e, path: o } : null;
}).filter(Boolean)), Qe = d(() => eo.value.map((e) => {
const o = Ce(e.geometry);
return o ? { ...e, path: o } : null;
}).filter(Boolean)), et = d(() => {
const e = [];
function o(t = {}) {
const n = t?.style && typeof t.style == "object" ? t.style : {}, i = t.radius ?? t.r ?? n.radius ?? n.r, l = t.color ?? t.fill ?? n.color ?? n.fill, a = t.stroke ?? n.stroke, c = t.strokeWidth ?? t.stroke_width ?? n.strokeWidth ?? n.stroke_width, f = Number.isFinite(Number(i)) ? Number(i) : Number(r.value.style.chart.points.radius), s = l != null && String(l).trim() ? Ee(String(l).trim()) : r.value.style.chart.points.fill, w = a != null && String(a).trim() ? Ee(String(a).trim()) : r.value.style.chart.points.stroke, C = Number.isFinite(Number(c)) ? Number(c) : Number(r.value.style.chart.points.strokeWidth);
return { radius: f, fill: s, stroke: w, strokeWidth: C };
}
for (const t of to.value) {
const n = Ve(t.geometry);
for (let i = 0; i < n.length; i += 1) {
const l = n[i];
if (!Array.isArray(l) || l.length < 2) continue;
const a = Number(l[0]), c = Number(l[1]);
if (!Number.isFinite(a) || !Number.isFinite(c)) continue;
const f = H([a, c]), s = f?.[0], w = f?.[1];
if (!Number.isFinite(s) || !Number.isFinite(w)) continue;
const C = t?.feature?.properties && typeof t.feature.properties == "object" ? t.feature.properties : {}, E = o(C);
e.push({
uid: `${t.uid}-geojson-point-${i}`,
name: t.name || "",
x: s,
y: w,
...E,
originalFeature: t.feature,
featureIndex: t.index,
pointIndex: i
});
}
}
return e;
});
function tt(e) {
if (!e || typeof e.type != "string") return [];
const o = [], t = (i) => {
if (!Array.isArray(i) || i.length < 2) return;
const l = Number(i[0]), a = Number(i[1]);
if (!Number.isFinite(l) || !Number.isFinite(a)) return;
const c = H([l, a]), f = c?.[0], s = c?.[1];
!Number.isFinite(f) || !Number.isFinite(s) || o.push([f, s]);
}, n = (i) => {
if (Array.isArray(i)) {
if (i.length >= 2 && typeof i[0] == "number" && typeof i[1] == "number") {
t(i);
return;
}
for (const l of i)
n(l);
}
};
if (e.type === "GeometryCollection" && Array.isArray(e.geometries)) {
for (const i of e.geometries)
o.push(...tt(i));
return o;
}
return e.type === "Point" ? (t(e.coordinates), o) : e.type === "MultiPoint" ? ((e.coordinates || []).forEach(t), o) : (n(e.coordinates), o);
}
function oo(e) {
const o = [];
for (const f of e)
o.push(...tt(f.geometry));
if (!o.length) return null;
let t = 1 / 0, n = 1 / 0, i = -1 / 0, l = -1 / 0;
for (const [f, s] of o)
f < t && (t = f), s < n && (n = s), f > i && (i = f), s > l && (l = s);
const a = i - t, c = l - n;
return !(a > 0) || !(c > 0) ? null : { minX: t, minY: n, maxX: i, maxY: l, width: a, height: c };
}
const no = d(() => oo(se.value));
function ro({ bounds: e, targetWidth: o, targetHeight: t, padding: n }) {
if (!e || !(e.width > 0) || !(e.height > 0))
return { scale: 1, translateX: 0, translateY: 0, transform: "" };
const i = Number.isFinite(Number(n)) ? Number(n) : 0, l = Math.max(1, o - i * 2), a = Math.max(1, t - i * 2), c = l / e.width, f = a / e.height, s = Math.min(c, f), w = e.width * s, C = e.height * s, E = i + (l - w) / 2, u = i + (a - C) / 2, v = E - e.minX * s, A = u - e.minY * s;
return {
scale: s,
translateX: v,
translateY: A,
transform: `translate(${v} ${A}) scale(${s})`
};
}
const ot = d(() => {
const e = no.value;
if (!e) return { scale: 1, translateX: 0, translateY: 0, transform: "" };
const o = r.value?.map?.fitPadding, t = Number.isFinite(Number(o)) ? Number(o) : 0;
return ro({
bounds: e,
targetWidth: P.value.width,
targetHeight: P.value.height,
padding: t
});
}), io = d(() => {
const e = P.value.width, o = P.value.height;
return `0 0 ${e} ${o}`;
}), {
viewBox: Q,
resetZoom: nt,
setInitialViewBox: Ae,
scale: rt,
zoomByFactor: it
} = $o(
ae,
{ x: 0, y: 0, width: P.value.width, height: P.value.height },
1,
B
);
function lo() {
B.value = !B.value;
}
function lt(e) {
const o = ot.value, t = Number(o?.scale) || 1, n = Number(o?.translateX) || 0, i = Number(o?.translateY) || 0;
return {
x: e.x * t + n,
y: e.y * t + i
};
}
function at() {
const e = r.value?.map?.center, o = Number(e?.[0]), t = Number(e?.[1]), n = Array.isArray(e) && e.length === 2 && Number.isFinite(o) && Number.isFinite(t) && (o !== 0 || t !== 0), i = P.value.width, l = P.value.height;
if (!n)
return { x: 0, y: 0, width: i, height: l };
const a = H([o, t]), c = a?.[0], f = a?.[1];
if (!Number.isFinite(c) || !Number.isFinite(f))
return { x: 0, y: 0, width: i, height: l };
const s = lt({ x: c, y: f });
return {
x: s.x - i / 2,
y: s.y - l / 2,
width: i,
height: l
};
}
function ue() {
const e = at();
Ae(e, { overwriteCurrentIfNotZoomed: !0 }), _.value = !0;
}
const st = d(() => {
const e = Q.value;
return e ? `${e.x} ${e.y} ${e.width} ${e.height}` : io.value;
});
function ke() {
it(xt, !0);
}
function Fe() {
it(1 / xt, !0);
}
async function ut() {
const e = at();
Ae(e, { overwriteCurrentIfNotZoomed: !0 }), nt(!0);
}
ne(
() => [
r.value.projection,
r.value.map.center?.[0],
r.value.map.center?.[1],
r.value.map.fitPadding,
Xe.value
],
async () => {
_.value = !1, await re(), requestAnimationFrame(() => {
_.value || ue();
});
},
{ deep: !1 }
), ne(
() => [q.value, G.value, Y.value],
async () => {
Y.value && (await re(), Ae(
{ x: 0, y: 0, width: P.value.width, height: P.value.height },
{ overwriteCurrentIfNotZoomed: !0 }
), _.value = !1, requestAnimationFrame(() => {
_.value || ue();
}));
},
{ flush: "post" }
);
function ao(e) {
return e ? e.type === "FeatureCollection" && Array.isArray(e.features) ? e.features.filter((o) => o?.type === "Feature" && o.geometry?.type === "Point").map((o, t) => {
const n = o.properties || {}, i = n.name || n.label || n.title || `Point ${t + 1}`, l = o.geometry.coordinates;
return {
uid: `map-point-${R.value}-${t}`,
name: i,
coordinates: l,
color: n.color ?? null,
radius: n.radius ?? null,
hoverRadiusRatio: r.value.style.chart.points.hoverRadiusRatio,
description: n.description ?? null,
original: o,
index: t
};
}) : Array.isArray(e) ? e.map((o, t) => {
let n = null, i = `Point ${t + 1}`, l = null, a = null, c = null;
Array.isArray(o) && o.length >= 2 ? n = [Number(o[0]), Number(o[1])] : o && typeof o == "object" && (Array.isArray(o.coordinates) && o.coordinates.length >= 2 ? n = [Number(o.coordinates[0]), Number(o.coordinates[1])] : Number.isFinite(Number(o.lon)) && Number.isFinite(Number(o.lat)) && (n = [Number(o.lon), Number(o.lat)]), typeof o.name == "string" && o.name.trim() && (i = o.name), o.description != null && (l = o.description), o.color != null && (a = o.color), o.radius != null && (c = o.radius));
const f = n ? n[0] : NaN, s = n ? n[1] : NaN;
return !Number.isFinite(f) || !Number.isFinite(s) ? null : {
uid: `map-point-${R.value}-${t}`,
name: i,
coordinates: [f, s],
color: a,
radius: c,
hoverRadiusRatio: r.value.style.chart.points.hoverRadiusRatio,
description: l,
original: o,
index: t
};
}).filter(Boolean) : typeof e == "object" ? Object.entries(e).map(([o, t], n) => {
if (!t || typeof t != "object") return null;
const i = Array.isArray(t.coordinates) ? t.coordinates : null;
if (!i || i.length < 2) return null;
const l = Number(i[0]), a = Number(i[1]);
return !Number.isFinite(l) || !Number.isFinite(a) ? null : {
uid: `map-point-${R.value}-${n}-${o}`,
name: t.name || o,
coordinates: [l, a],
color: t.color ?? null,
radius: t.radius ?? null,
hoverRadiusRatio: r.value.style.chart.points.hoverRadiusRatio,
description: t.description ?? null,
original: t,
index: n
};
}).filter(Boolean) : [] : [];
}
const ct = d(() => ao(qt.value)), ft = d(() => ct.value.map((e) => {
const o = H(e.coordinates), t = o?.[0], n = o?.[1];
return !Number.isFinite(t) || !Number.isFinite(n) ? null : {
...e,
x: t,
y: n,
fill: e.color ? Ee(e.color) : r.value.style.chart.points.fill,
radius: Number.isFinite(Number(e.radius)) ? Number(e.radius) : r.value.style.chart.points.radius
};
}).filter(Boolean)), Ne = h(!1), we = h(""), z = h(!1), ee = h(null), x = h(null);
function Pe(e) {
we.value = e, Ne.value = !0;
}
function te() {
Ne.value = !1, we.value = "";
}
function $e(e) {
return String(e ?? "").replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">").replaceAll('"', """).replaceAll("'", "'");
}
function so(e) {
le.value = {
datapoint: e,
seriesIndex: e.index,
series: ct.value,
config: r.value
}, z.value = !1;
const o = r.value.style.chart.tooltip.customFormat;
if ($t(o))
try {
const i = o(le.value);
if (typeof i == "string")
return z.value = !0, i;
} catch {
console.warn("Custom format cannot be applied."), z.value = !1;
}
const t = $e(e.name), n = e.description != null ? `<div style="margin-top:6px">${$e(e.description)}</div>` : "";
return `<div><div style="font-weight:600">${t}</div>${n}</div>`;
}
function dt(e) {
z.value = !1;
const o = r.value.style.chart.tooltip.customFormat;
if ($t(o))
try {
const n = o({
datapoint: e,
config: r.value
});
if (typeof n == "string")
return z.value = !0, n;
} catch {
console.warn("Custom format cannot be applied."), z.value = !1;
}
const t = typeof e?.name == "string" ? e.name.trim() : "";
return t ? `<div><div style="font-weight:600">${$e(t)}</div></div>` : (z.value = !1, "");
}
function mt(e) {
if (r.value.events.territoryEnter && r.value.events.territoryEnter({
datapoint: e,
seriesIndex: e.index
}), !(typeof e?.name == "string" ? e.name.trim() : "") && !r.value.style.chart.territory.hover.enabledWhenEmpty) {
x.value = null, te();
return;
}
x.value = e.uid, Pe(dt(e));
}
function ht(e) {
x.value = null, te(), r.value.events.territoryLeave && r.value.events.territoryLeave({
datapoint: e,
seriesIndex: e.index
});
}
function vt(e) {
r.value.events.territoryClick && r.value.events.territoryClick({
datapoint: e,
seriesIndex: e.index
});
}
function pt(e) {
ee.value = e.uid, Pe(so(e)), r.value.events.datapointEnter && r.value.events.datapointEnter({
datapoint: e,
seriesIndex: e.index
});
}
function gt(e) {
ee.value = null, te(), r.value.events.datapointLeave && r.value.events.datapointLeave({
datapoint: e,
seriesIndex: e.index
});
}
const yt = d(() => !!r.value.events.datapointClick && typeof r.value.events.datapointClick == "function");
function bt(e) {
yt.value && r.value.events.datapointClick({
datapoint: e,
seriesIndex: e.index
});
}
const S = d(() => r.value.style.chart.territory), Ct = d(() => r.value.style.chart.points);
function uo(e) {
const o = typeof e?.name == "string" ? e.name.trim() : "";
if (!o) {
x.value = null, te();
return;
}
const t = {
name: o,
uid: e.uid,
index: e.featureIndex,
properties: {}
};
x.value = e.uid, Pe(dt(t));
}
function co() {
x.value = null, te();
}
const oe = h(!1);
function Te() {
oe.value = !oe.value;
}
ne(
() => oe.value,
(e) => {
B.value = !e;
}
);
function At() {
K.value.showTooltip = !K.value.showTooltip;
}
const fo = d(() => r.value.style.chart.backgroundColor), mo = d(() => r.value.style.chart.title), { exportSvg: ho, getSvg: vo } = Oo({
svg: ae,
title: mo,
legend: void 0,
legendItems: void 0,
backgroundColor: fo
});
async function kt({ isCb: e }) {
if (e) {
const { blob: o, url: t, text: n, dataUrl: i } = await vo();
r.value.userOptions.callbacks.svg({ blob: o, url: t, text: n, dataUrl: i });
} else
ho();
}
async function po({ scale: e = 2 } = {}) {
if (!I.value) return;
const { width: o, height: t } = I.value.getBoundingClientRect(), n = o / t, { imageUri: i, base64: l } = await jo({
domElement: I.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: l,
title: r.value.style.chart.title.text,
width: o,
height: t,
aspectRatio: n
};
}
const Z = h(!1);
let X = null;
function go() {
B.value && (Z.value = !0);
}
function xe() {
Z.value = !1;
}
function yo() {
B.value && (Z.value = !0, X && clearTimeout(X), X = setTimeout(() => {
Z.value = !1, X = null;
}, 140));
}
Nt(() => {
X && clearTimeout(X);
});
async function Ft([e, o], { animated: t = !0 } = {}) {
const n = Number(e), i = Number(o);
if (!Number.isFinite(n) || !Number.isFinite(i)) return;
const l = H([n, i]), a = l?.[0], c = l?.[1];
if (!Number.isFinite(a) || !Number.isFinite(c)) return;
const f = lt({ x: a, y: c }), s = Q.value ? { ...Q.value } : { x: 0, y: 0, width: P.value.width, height: P.value.height }, w = {
x: f.x - s.width / 2,
y: f.y - s.height / 2,
width: s.width,
height: s.height
};
if (!t) {
Q.value = w;
return;
}
const C = { ...s }, E = { ...w }, u = 250;
let v = null;
const A = (m) => {
v == null && (v = m);
const p = Math.min((m - v) / u, 1);
Q.value = {
x: C.x + (E.x - C.x) * p,
y: C.y + (E.y - C.y) * p,
width: C.width + (E.width - C.width) * p,
height: C.height + (E.height - C.height) * p
}, p < 1 && requestAnimationFrame(A);
};
requestAnimationFrame(A);
}
return Co(async () => {
ye(), await re(), requestAnimationFrame(() => {
_.value || (ue(), (r.value.map.center?.[0] || r.value.map.center?.[1]) && Ft(r.value.map.center, { animated: !1 }));
});
}), Nt(() => {
ge();
}), jt({
getImage: po,
generatePdf: Le,
generateImage: We,
generateSvg: kt,
toggleTooltip: At,
toggleAnnotator: Te,
toggleFullscreen: je,
zoomIn: ke,
zoomOut: Fe,
resetZoom: nt,
focusLocation: Ft
}), (e, o) => (g(), N("div", {
class: wt(`vue-data-ui-component vue-ui-geo ${j.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${Y.value ? "vue-ui-geo-responsive" : ""} ${Z.value ? "vue-ui-geo-interacting" : ""}`),
ref_key: "geoChart",
ref: I,
id: `map_${R.value}`,
dir: "auto",
style: fe({
fontFamily: r.value.style.fontFamily,
width: "100%",
backgroundColor: r.value.style.chart.backgroundColor,
height: Y.value ? `${G.value}px` : void 0
})
}, [
Ye.value ? (g(), N("div", {
key: 0,
ref_key: "noTitle",
ref: Oe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : M("", !0),
r.value.style.chart.title.text ? (g(), N("div", {
key: 1,
ref_key: "chartTitle",
ref: Se,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(g(), V(zo, {
key: `title_${Be.value}`,
config: {
title: {
cy: "geo-title",
...r.value.style.chart.title
},
subtitle: {
cy: "geo-subtitle",
...r.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : M("", !0),
r.value.userOptions.buttons.annotator ? (g(), V(y(Dt), {
key: 2,
svgRef: y(ae),
backgroundColor: r.value.style.chart.backgroundColor,
color: r.value.style.chart.color,
active: oe.value,
onClose: Te
}, {
"annotator-action-close": F(() => [
b(e.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": F(({ color: t }) => [
b(e.$slots, "annotator-action-color", $(T({ color: t })), void 0, !0)
]),
"annotator-action-draw": F(({ mode: t }) => [
b(e.$slots, "annotator-action-draw", $(T({ mode: t })), void 0, !0)
]),
"annotator-action-undo": F(({ disabled: t }) => [
b(e.$slots, "annotator-action-undo", $(T({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": F(({ disabled: t }) => [
b(e.$slots, "annotator-action-redo", $(T({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": F(({ disabled: t }) => [
b(e.$slots, "annotator-action-delete", $(T({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : M("", !0),
r.value.userOptions.show && (y(ze) || y(Ge)) ? (g(), V(y(zt), {
ref: "userOptionsRef",
key: `user_options_${he.value}`,
backgroundColor: r.value.style.chart.backgroundColor,
color: r.value.style.chart.color,
isPrinting: y(De),
isImaging: y(Ze),
uid: R.value,
hasXls: !1,
hasTable: !1,
hasTooltip: r.value.userOptions.buttons.tooltip && r.value.style.chart.tooltip.show,
hasPdf: r.value.userOptions.buttons.pdf,
hasImg: r.value.userOptions.buttons.img,
hasSvg: r.value.userOptions.buttons.svg,
hasFullscreen: r.value.userOptions.buttons.fullscreen,
hasAnnotator: r.value.userOptions.buttons.annotator,
hasZoom: r.value.userOptions.buttons.zoom,
isZoom: B.value,
isFullscreen: j.value,
isTooltip: K.value.showTooltip,
titles: { ...r.value.userOptions.buttonTitles },
chartElement: I.value,
position: r.value.userOptions.position,
isAnnotation: oe.value,
callbacks: r.value.userOptions.callbacks,
printScale: r.value.userOptions.print.scale,
onToggleFullscreen: je,
onGeneratePdf: y(Le),
onGenerateImage: y(We),
onGenerateSvg: kt,
onToggleTooltip: At,
onToggleAnnotator: Te,
onToggleZoom: lo,
style: fe({
visibility: y(ze) ? y(Ge) ? "visible" : "hidden" : "visible"
})
}, Ao({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: F(({ isOpen: t, color: n }) => [
b(e.$slots, "menuIcon", $(T({ isOpen: t, color: n })), void 0, !0)
]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: F(() => [
b(e.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: F(() => [
b(e.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: F(() => [
b(e.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: F(() => [
b(e.$slots, "optionSvg", {}, void 0, !0)
]),
key: "4"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: F(({ toggleFullscreen: t, isFullscreen: n }) => [
b(e.$slots, "optionFullscreen", $(T({ toggleFullscreen: t, isFullscreen: n })), void 0, !0)
]),
key: "5"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: F(({ toggleAnnotator: t, isAnnotator: n }) => [
b(e.$slots, "optionAnnotator", $(T({ toggleAnnotator: t, isAnnotator: n })), void 0, !0)
]),
key: "6"
} : void 0,
e.$slots.optionZoom ? {
name: "optionZoom",
fn: F(({ toggleZoom: t, isZoomLocked: n }) => [
b(e.$slots, "optionZoom", $(T({ toggleZoom: t, isZoomLocked: n })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "hasAnnotator", "hasZoom", "isZoom", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : M("", !0),
r.value.style.chart.controls.position === "top" && r.value.style.chart.controls.show && !y(pe) ? (g(), V(Tt, {
key: 4,
ref_key: "zoomControlsTop",
ref: Re,
config: r.value,
scale: y(rt),
isFullscreen: j.value,
onZoomIn: ke,
onZoomOut: Fe,
onResetZoom: ut
}, null, 8, ["config", "scale", "isFullscreen"])) : M("", !0),
(g(), N("svg", {
ref_key: "svgRef",
ref: ae,
xmlns: y(Po),
viewBox: st.value,
preserveAspectRatio: "xMidYMid meet",
style: fe({
display: "block",
width: "100%",
height: Y.value ? `${G.value}px` : "auto",
background: r.value.style.chart.backgroundColor,
touchAction: B.value ? "none" : "auto",
cursor: B.value ? Z.value ? "grabbing" : "grab" : "default"
}),
id: `vue-ui-geo_${R.value}`,
onPointerdown: go,
onPointerup: xe,
onPointercancel: xe,
onPointerleave: xe,
onWheel: yo
}, [
Pt(y(Zt)),
ie("g", {
transform: ot.value.transform,
style: fe({ pointerEvents: Z.value ? "none" : "auto" })
}, [
ie("g", null, [
(g(!0), N(de, null, me(Ke.value, (t) => (g(), N("path", {
class: "vue-ui-geo-territory",
key: t.uid,
d: t.path,
fill: x.value === t.uid ? S.value.hover.fill : S.value.fill,
stroke: x.value === t.uid ? S.value.hover.stroke : S.value.stroke,
"stroke-width": x.value === t.uid ? S.value.hover.strokeWidth : S.value.strokeWidth,
"vector-effect": "non-scaling-stroke",
onMouseenter: (n) => mt(t),
onMouseleave: (n) => ht(t),
onClick: (n) => vt(t)
}, null, 40, Yo))), 128))
]),
ie("g", null, [
(g(!0), N(de, null, me(Qe.value, (t) => (g(), N("path", {
class: "vue-ui-geo-territory",
key: t.uid,
d: t.path,
fill: "none",
stroke: x.value === t.uid ? S.value.hover.stroke : S.value.stroke,
"stroke-width": x.value === t.uid ? S.value.hover.strokeWidth : S.value.strokeWidth,
"vector-effect": "non-scaling-stroke",
onMouseenter: (n) => mt(t),
onMouseleave: (n) => ht(t),
onClick: (n) => vt(t)
}, null, 40, qo))), 128))
]),
ie("g", null, [
(g(!0), N(de, null, me(et.value, (t) => (g(), N("circle", {
key: t.uid,
cx: t.x,
cy: t.y,
r: t.radius,
fill: t.fill,
stroke: t.stroke,
"stroke-width": t.strokeWidth,
"vector-effect": "non-scaling-stroke",
onMouseenter: (n) => uo(t),
onMouseleave: co
}, null, 40, Ho))), 128))
]),
(g(!0), N(de, null, me(ft.value, (t) => (g(), N("g", {
key: t.uid
}, [
b(e.$slots, "datapoint", ko({ ref_for: !0 }, {
point: t,
onPointEnter: pt,
onPointLeave: gt,
onPointClick: bt,
highlighted: ee.value === t.uid
}), () => [
ie("circle", {
class: wt({
"vue-ui-geo-point": !0,
"vue-ui-geo-point-with-event": yt.value
}),
cx: t.x,
cy: t.y,
r: ee.value === t.uid ? t.radius * t.hoverRadiusRatio : t.radius,
fill: t.fill,
stroke: Ct.value.stroke,
"stroke-width": Ct.value.strokeWidth,
"vector-effect": "non-scaling-stroke",
onMouseenter: (n) => pt(t),
onMouseleave: (n) => gt(t),
onClick: (n) => bt(t)
}, null, 42, Xo)
], !0),
r.value.style.chart.points.labels.show ? (g(), N("text", {
key: 0,
class: "vue-ui-geo-point-label",
x: t.x,
y: t.y + (ee.value === t.uid ? t.radius * t.hoverRadiusRatio : t.radius) + r.value.style.chart.points.labels.offsetY + 1 * r.value.style.chart.points.labels.fontSizeRatio,
"text-anchor": "middle",
fill: r.value.style.chart.points.labels.color,
"font-size": 1 * r.value.style.chart.points.labels.fontSizeRatio
}, Fo(t.name), 9, Uo)) : M("", !0)
]))), 128)),
b(e.$slots, "svg", {
svg: {
drawingArea: st.value,
data: {
areaPaths: Ke.value,
linePaths: Qe.value,
geoJsonPoints: et.value,
projectedPoints: ft.value
}
}
}, void 0, !0)
], 12, Wo)
], 44, Lo)),
e.$slots.watermark ? (g(), N("div", Vo, [
b(e.$slots, "watermark", $(T({ isPrinting: y(De) || y(Ze) })), void 0, !0)
])) : M("", !0),
r.value.style.chart.controls.position === "bottom" && r.value.style.chart.controls.show && !y(pe) ? (g(), V(Tt, {
key: 6,
ref_key: "zoomControlsBottom",
ref: _e,
config: r.value,
scale: y(rt),
isFullscreen: j.value,
onZoomIn: ke,
onZoomOut: Fe,
onResetZoom: ut
}, null, 8, ["config", "scale", "isFullscreen"])) : M("", !0),
Pt(y(Gt), {
show: K.value.showTooltip && Ne.value,
backgroundColor: r.value.style.chart.tooltip.backgroundColor,
color: r.value.style.chart.tooltip.color,
fontSize: r.value.style.chart.tooltip.fontSize,
borderRadius: r.value.style.chart.tooltip.borderRadius,
borderColor: r.value.style.chart.tooltip.borderColor,
borderWidth: r.value.style.chart.tooltip.borderWidth,
backgroundOpacity: r.value.style.chart.tooltip.backgroundOpacity,
position: r.value.style.chart.tooltip.position,
offsetY: r.value.style.chart.tooltip.offsetY,
parent: I.value,
content: we.value,
isCustom: z.value,
isFulls