@devgateway/dvz-ui-react 1.9.4 → 1.9.6

package/dist/esm/embeddable/map/map.js

@@ -1,8 +1,8 @@
 var X = Object.defineProperty;
-var Y = (w, F, e) => F in w ? X(w, F, { enumerable: !0, configurable: !0, writable: !0, value: e }) : w[F] = e;
-var H = (w, F, e) => Y(w, typeof F != "symbol" ? F + "" : F, e);
+var q = (w, F, e) => F in w ? X(w, F, { enumerable: !0, configurable: !0, writable: !0, value: e }) : w[F] = e;
+var H = (w, F, e) => q(w, typeof F != "symbol" ? F + "" : F, e);
 import { jsx as b, jsxs as M, Fragment as R } from "react/jsx-runtime";
-import { injectIntl as q, FormattedMessage as K } from "react-intl";
+import { injectIntl as Y, FormattedMessage as K } from "react-intl";
 import * as g from "d3";
 import { Container as U, Segment as Q, Dimmer as ee, Loader as te, Message as N, Icon as E, Popup as se, Grid as S } from "semantic-ui-react";
 import V from "react";
@@ -15,12 +15,12 @@ import { Config as re } from "../../conf/index.js";
 function O(w, F, e) {
   var l;
   if (!(w != null && w.length)) return F;
-  const s = ((l = w[0]) == null ? void 0 : l.items) ?? [], i = (a) => (a == null ? void 0 : a.trim().toLowerCase()) ?? "", o = i(F), t = i(e).toUpperCase(), r = s.find(
-    (a) => i(a.value) === o || a.code.trim().toLowerCase() === o
+  const s = ((l = w[0]) == null ? void 0 : l.items) ?? [], i = (r) => (r == null ? void 0 : r.trim().toLowerCase()) ?? "", o = i(F), t = i(e).toUpperCase(), a = s.find(
+    (r) => i(r.value) === o || r.code.trim().toLowerCase() === o
   ) ?? null;
-  if (!r) return F;
-  const n = t && r.labels && r.labels[t] ? r.labels[t] : r.value;
-  return (n == null ? void 0 : n.trim()) || r.value.trim();
+  if (!a) return F;
+  const n = t && a.labels && a.labels[t] ? a.labels[t] : a.value;
+  return (n == null ? void 0 : n.trim()) || a.value.trim();
 }
 const le = "_Color_", G = "location", j = "showAll", B = "ifUnitHasData", ne = 10, pe = {
   mobile: 4,
@@ -137,7 +137,7 @@ class ue extends V.Component {
     }, this.metadataTypes = ((s = e.transformedData) == null ? void 0 : s.types) || [];
   }
   componentDidMount() {
-    window.addEventListener("scroll", this.handleScroll, { passive: !0 }), window.addEventListener("touchmove", this.handleScroll, { passive: !0 }), this.loadLayers(), this.tooltip = g.select("body").append("div").style("position", "absolute").style("visibility", "hidden"), console.log("Map props", this.metadataTypes);
+    window.addEventListener("scroll", this.handleScroll, { passive: !0 }), window.addEventListener("touchmove", this.handleScroll, { passive: !0 }), this.loadLayers(), this.tooltip = g.select("body").append("div").style("position", "absolute").style("visibility", "hidden").style("pointer-events", "none"), console.log("Map props", this.metadataTypes);
   }
   componentDidCatch(e, s) {
     console.log(e);
@@ -154,9 +154,9 @@ class ue extends V.Component {
       const o = [];
       i.forEach((t) => {
         o.push(
-          new Promise((r, n) => {
+          new Promise((a, n) => {
             g.json(re.REACT_APP_WP_API + "/wp/v2/media/" + t.id).then((l) => {
-              r({
+              a({
                 id: t.id,
                 url: l.source_url,
                 index: t.index,
@@ -167,7 +167,7 @@ class ue extends V.Component {
                 displayLayerLabels: t.displayLayerLabels
               });
             }).catch(function(l) {
-              r({
+              a({
                 id: t.id,
                 url: null,
                 index: t.index,
@@ -181,10 +181,10 @@ class ue extends V.Component {
           })
         );
       }), Promise.all(o).then((t) => {
-        const r = [];
+        const a = [];
         t.forEach((n) => {
-          n.url && r.push(
-            new Promise((l, a) => {
+          n.url && a.push(
+            new Promise((l, r) => {
               g.json(n.url).then((h) => {
                 l({
                   id: n.id,
@@ -199,7 +199,7 @@ class ue extends V.Component {
               });
             })
           );
-        }), Promise.all(r).then((n) => {
+        }), Promise.all(a).then((n) => {
           this.setState({
             layers: n,
             layersLoading: !1
@@ -234,7 +234,7 @@ class ue extends V.Component {
     )[0] || e[0]), o ? o.data : null;
   }
   componentDidUpdate(e, s, i) {
-    const { selectedMeasure: o, layers: t, selectedPolygon: r } = this.state, n = this.getMainLayer(), { transformedData: l, intl: a, zoomOnFilterField: h, appliedFilters: p } = this.props, { appliedFilters: d } = e;
+    const { selectedMeasure: o, layers: t, selectedPolygon: a } = this.state, n = this.getMainLayer(), { transformedData: l, intl: r, zoomOnFilterField: h, appliedFilters: p } = this.props, { appliedFilters: d } = e;
     if (h) {
       const v = [], c = [];
       d && Object.keys(d).forEach((f) => {
@@ -253,7 +253,7 @@ class ue extends V.Component {
     const u = this.getFeatures();
     e.center !== this.props.center && (this.mapPosition = null, this.projection.scale(this.props.scale).center(this.props.center).translate([this.getWidth() / 2, this.getHeight() / 2]));
     const m = this.filterUpdated(e, s);
-    this.d3Map(u, m), t && l && (l != e.transformedData || t != s.layers || o != s.selectedMeasure || r != s.selectedPolygon || n != s.mainLayer || e.mainLayerId !== this.props.mainLayerId || JSON.stringify(e.enabledLayers) != JSON.stringify(this.props.enabledLayers)) && this.updateFeatures(this.getFeatures(), m);
+    this.d3Map(u, m), t && l && (l != e.transformedData || t != s.layers || o != s.selectedMeasure || a != s.selectedPolygon || n != s.mainLayer || e.mainLayerId !== this.props.mainLayerId || JSON.stringify(e.enabledLayers) != JSON.stringify(this.props.enabledLayers)) && this.updateFeatures(this.getFeatures(), m);
   }
   getHeight() {
     return this.props.height;
@@ -263,9 +263,9 @@ class ue extends V.Component {
   }
   boundingExtent(e) {
     let s, i, o, t;
-    for (const r in e) {
-      const [[n, l], [a, h]] = this.path.bounds(e[r]);
-      (n < s || s == null) && (s = n), (a > i || i == null) && (i = a), (l < o || o == null) && (o = l), (h > t || t == null) && (t = h);
+    for (const a in e) {
+      const [[n, l], [r, h]] = this.path.bounds(e[a]);
+      (n < s || s == null) && (s = n), (r > i || i == null) && (i = r), (l < o || o == null) && (o = l), (h > t || t == null) && (t = h);
     }
     return [
       [s, o],
@@ -277,23 +277,23 @@ class ue extends V.Component {
   }
   resizeLabels(e) {
     const { labelFontSize: s, mapLabelField: i } = this.props;
-    g.select(this.getMapId()).selectAll(".map-labels-container").each((o, t, r) => {
-      const n = g.select(r[t]), l = n.select("div"), a = e.k > 1 ? e.k : 1, h = s / a;
+    g.select(this.getMapId()).selectAll(".map-labels-container").each((o, t, a) => {
+      const n = g.select(a[t]), l = n.select("div"), r = e.k > 1 ? e.k : 1, h = s / r;
       l.style("font-size", `${h}px`);
-      const p = this.getLabelPosition(o), d = this.getLabelBoxWidth(o) / a, u = p[0] - d / 2, m = e.k > 1 ? 10 / e.k : 10, v = p[1] - m;
-      n.attr("x", u).attr("y", v).attr("width", this.getLabelBoxWidth(o) / a).attr("height", this.getLabelBoxHeight(o) / a);
+      const p = this.getLabelPosition(o), d = this.getLabelBoxWidth(o) / r, u = p[0] - d / 2, m = e.k > 1 ? 10 / e.k : 10, v = p[1] - m;
+      n.attr("x", u).attr("y", v).attr("width", this.getLabelBoxWidth(o) / r).attr("height", this.getLabelBoxHeight(o) / r);
     });
   }
   resizePointLabels(e) {
     const { labelFontSize: s } = this.props;
     g.select(this.getMapId()).selectAll(".point-labels-container").each((i, o, t) => {
-      const r = g.select(t[o]), n = r.select("div"), l = e.k > 1 ? e.k : 1, a = s / l;
-      n.style("font-size", `${a}px`);
+      const a = g.select(t[o]), n = a.select("div"), l = e.k > 1 ? e.k : 1, r = s / l;
+      n.style("font-size", `${r}px`);
       const h = this.projection([
         i.geometry.coordinates[1],
         i.geometry.coordinates[0]
       ]), p = (this.getLabelBoxWidth(i) + 20) / l, d = this.getLabelBoxHeight(i) / l, u = h[0] - p / 2, m = h[1] - d / 2;
-      r.attr("x", u).attr("y", m).attr("width", p).attr("height", d);
+      a.attr("x", u).attr("y", m).attr("width", p).attr("height", d);
     });
   }
   resizeCircles(e) {
@@ -320,19 +320,19 @@ class ue extends V.Component {
   generateBreaks(e) {
     const { autoGenerateBreaks: s, numberOfBreaks: i, colorScheme: o } = this.props, t = [];
     if (s && e && e.length > 0) {
-      const r = e.filter((a) => a.properties && a.properties.value != null).map((a) => a.properties.value.toFixed(2)), n = [];
-      r.forEach((a) => {
-        if (a > 0) {
-          const h = a * 0.99, p = a * 1.01;
+      const a = e.filter((r) => r.properties && r.properties.value != null).map((r) => r.properties.value.toFixed(2)), n = [];
+      a.forEach((r) => {
+        if (r > 0) {
+          const h = r * 0.99, p = r * 1.01;
           n.indexOf(h) === -1 && n.push(h), n.indexOf(p) === -1 && n.push(p);
         }
       });
       const l = he[o];
       if (n.length > 0) {
-        const a = new ae(n);
-        a.setPrecision(2);
+        const r = new ae(n);
+        r.setPrecision(2);
         const h = n.length > 1 ? n.length - 1 : n.length;
-        return a.getJenks(Math.min(i, h)), a.ranges.forEach((p, d) => {
+        return r.getJenks(Math.min(i, h)), r.ranges.forEach((p, d) => {
           const u = {};
           u.min = parseFloat(p.substr(0, p.indexOf("-") - 1)) + (d > 0 ? 0.01 : 0), u.max = parseFloat(
             p.substr(p.indexOf("-") + 2, p.length)
@@ -351,11 +351,11 @@ class ue extends V.Component {
       let i = e;
       return this.getSelectedMeasure() && (i = e.filter((o) => o.measure === this.getSelectedMeasure()).filter((o) => {
         if (o.filters && o.filters.length > 0 && this.props.appliedFilters && JSON.stringify(this.props.appliedFilters) !== "{}") {
-          const r = Object.keys(this.props.appliedFilters);
+          const a = Object.keys(this.props.appliedFilters);
           return o.filters.filter((l) => {
-            if (r.indexOf(l.field) != -1) {
-              const a = this.props.appliedFilters[l.field], h = l.values;
-              return a.join(",").indexOf(h) != -1;
+            if (a.indexOf(l.field) != -1) {
+              const r = this.props.appliedFilters[l.field], h = l.values;
+              return r.join(",").indexOf(h) != -1;
             }
             return !1;
           }).length > 0;
@@ -383,10 +383,10 @@ class ue extends V.Component {
       });
       return n && n.color ? n.color : i;
     }
-    const r = this.props.enabledLayers.filter(
+    const a = this.props.enabledLayers.filter(
       (n) => n.id === e.properties.layerId
     )[0];
-    return r && r.bgColor && r.bgColor != "undefined" ? r.bgColor : i;
+    return a && a.bgColor && a.bgColor != "undefined" ? a.bgColor : i;
   }
   setValues() {
     const e = this.getFeatures();
@@ -399,11 +399,11 @@ class ue extends V.Component {
     ]) : this.path.centroid(e);
   }
   updateFeatures(e, s) {
-    const { mapLabelField: i, symbols: o, highlightedLocation: t } = this.props, r = [
+    const { mapLabelField: i, symbols: o, highlightedLocation: t } = this.props, a = [
       ...e.filter((n) => t != n.properties[i]),
       ...e.filter((n) => t == n.properties[i])
     ];
-    this.drawPolygons(r), this.drawLabels(r), this.drawPoints(r, s), o.length > 0 && this.addSymbols(o, r);
+    this.drawPolygons(a), this.drawLabels(a), this.drawPoints(a, s), o.length > 0 && this.addSymbols(o, a);
   }
   drawLabels(e) {
     const {
@@ -411,10 +411,10 @@ class ue extends V.Component {
       mapLabelShowValue: i,
       intl: o,
       valueFormat: t,
-      showNoDataLabel: r,
+      showNoDataLabel: a,
       labelFontColor: n,
       labelFontWeight: l,
-      labelFontSize: a,
+      labelFontSize: r,
       showAdminUnitLabel: h,
       mapType: p,
       noDataText: d,
@@ -433,7 +433,7 @@ class ue extends V.Component {
         return f[0] - y / 2;
       }
       return f[0];
-    }).attr("y", (c) => this.getLabelPosition(c)[1] - 10).attr("width", (c) => this.getLabelBoxWidth(c)).attr("height", (c) => this.getLabelBoxHeight(c)).attr("font-size", (c, f) => `${a}px`).attr("overflow", "visible").attr("opacity", 1).style("display", (c) => h === j || h === B && c.properties.hasDataRow || c.properties.displayLayerLabels ? "block" : "none").attr("pointer-events", p == "POINTS_MAP" ? "none" : "all").on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout).append("xhtml:div").style("font-size", (c) => `${a}px`).style("color", (c, f) => n).style("font-weight", (c) => l).style("background-color", (c) => c.properties.hasDataRow && i && (c.properties.value != null || c.properties.value == null && r) ? "#fff6e1" : "none").style("border-radius", (c) => "4px").style("line-height", "95%").style("text-align", "center").html((c, f) => this.createLabel(c));
+    }).attr("y", (c) => this.getLabelPosition(c)[1] - 10).attr("width", (c) => this.getLabelBoxWidth(c)).attr("height", (c) => this.getLabelBoxHeight(c)).attr("font-size", (c, f) => `${r}px`).attr("overflow", "visible").attr("opacity", 1).style("display", (c) => h === j || h === B && c.properties.hasDataRow || c.properties.displayLayerLabels ? "block" : "none").attr("pointer-events", p == "POINTS_MAP" ? "none" : "all").on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout).append("xhtml:div").style("font-size", (c) => `${r}px`).style("color", (c, f) => n).style("font-weight", (c) => l).style("background-color", (c) => c.properties.hasDataRow && i && (c.properties.value != null || c.properties.value == null && a) ? "#fff6e1" : "none").style("border-radius", (c) => "4px").style("line-height", "95%").style("text-align", "center").html((c, f) => this.createLabel(c));
   }
   getTranslatedLocationName(e, s, i) {
     if (e.properties.displayLayerLabels && e.properties.layerLocale) {
@@ -448,19 +448,19 @@ class ue extends V.Component {
       mapLabelShowValue: i,
       intl: o,
       valueFormat: t,
-      showNoDataLabel: r,
+      showNoDataLabel: a,
       showAdminUnitLabel: n,
       noDataText: l
     } = this.props;
-    let a = "";
+    let r = "";
     if (n == j || n == B && e.properties.hasDataRow || e.properties.displayLayerLabels) {
       const h = e.properties.displayLayerLabels && e.properties.layerMappingField ? e.properties.layerMappingField : s, p = e.properties[h], d = e.properties.layerLocale || (o == null ? void 0 : o.locale);
-      a = O(this.metadataTypes, p, d);
+      r = O(this.metadataTypes, p, d);
       const u = e.properties.abbrev;
-      if (a && a.length > ne && u && (a = u), i)
+      if (r && r.length > ne && u && (r = u), i)
         if (e.properties.value != null) {
           const m = e.properties.variables || {};
-          a += "<br><span class='map-label-value'>" + k(
+          r += "<br><span class='map-label-value'>" + k(
             t,
             {
               value: e.properties.value,
@@ -470,9 +470,9 @@ class ue extends V.Component {
             o
           ) + "</span>";
         } else
-          r == !0 && e.properties.value == null && e.properties.hasDataRow && (a += "<br><span class='map-label-value'>" + l + "</span>");
+          a == !0 && e.properties.value == null && e.properties.hasDataRow && (r += "<br><span class='map-label-value'>" + l + "</span>");
     }
-    return a;
+    return r;
   }
   drawPolygons(e) {
     const {
@@ -480,27 +480,27 @@ class ue extends V.Component {
       mapBoundaryColor: i,
       mapFocusBoundaryColor: o,
       highlightedLocation: t
-    } = this.props, r = this.getBreaks(), n = g.select(this.getMapId()).select("svg").select("g"), l = e.filter(
-      (a) => a.geometry && a.geometry && (a.geometry.type == "Polygon" || a.geometry.type == "MultiPolygon")
+    } = this.props, a = this.getBreaks(), n = g.select(this.getMapId()).select("svg").select("g"), l = e.filter(
+      (r) => r.geometry && r.geometry && (r.geometry.type == "Polygon" || r.geometry.type == "MultiPolygon")
     );
-    l.length > 0 && n.selectAll("path").data(l).join("path").attr("d", this.path).attr("fill", (a) => this.fillColor(a, r)).attr("stroke-width", (a) => t == a.properties[s] ? 1.2 : 0.4).attr("stroke", (a) => t == a.properties[s] ? o : i).on("click", this.onPolygonClick);
+    l.length > 0 && n.selectAll("path").data(l).join("path").attr("d", this.path).attr("fill", (r) => this.fillColor(r, a)).attr("stroke-width", (r) => t == r.properties[s] ? 1.2 : 0.4).attr("stroke", (r) => t == r.properties[s] ? o : i).on("click", this.onPolygonClick);
   }
   drawPoints(e, s) {
     const {
       intl: i,
       pointLabelColor: o,
       pointLabelFormat: t,
-      transformedData: r,
+      transformedData: a,
       defaultPointColor: n,
       appliedFilters: l,
-      zoomOnFilterField: a,
+      zoomOnFilterField: r,
       noDataText: h,
       showShadingLayerLabels: p
     } = this.props, d = g.select(this.getMapId()).select("svg").select("g");
     let u = [];
-    if (r.pointsData) {
+    if (a.pointsData) {
       let c = this.state.selectedPolygon;
-      s && l && l[a] && (c = l[a]), u = r.pointsData.filter((f) => f.lat && f.lng && f.label == c).map((f) => ({
+      s && l && l[r] && (c = l[r]), u = a.pointsData.filter((f) => f.lat && f.lng && f.label == c).map((f) => ({
         properties: {
           label: f.label,
           lat: f.lat,
@@ -546,18 +546,18 @@ class ue extends V.Component {
     const { mappingField: i } = this.props, o = g.select(this.getMapId()).select("svg").select("g");
     e.forEach((t) => {
       if (t.field && t.image && t.values) {
-        const r = s.filter((l) => {
-          const a = G == t.field ? i : "value", h = (l.properties[a] || (l.properties.variables ? l.properties.variables[a] : "")) + "", d = (t.values + "").split(",");
+        const a = s.filter((l) => {
+          const r = G == t.field ? i : "value", h = (l.properties[r] || (l.properties.variables ? l.properties.variables[r] : "")) + "", d = (t.values + "").split(",");
           return l.properties.LATITUDE && l.properties.LONGITUDE && d.filter(
             (u) => u.trim().toLowerCase() == h.trim().toLowerCase()
           ).length > 0;
         }), n = s.filter((l) => {
-          const a = G == t.field ? i : "value", h = (l.properties[a] || (l.properties.variables ? l.properties.variables[a] : "")) + "", d = (t.values + "").split(",");
+          const r = G == t.field ? i : "value", h = (l.properties[r] || (l.properties.variables ? l.properties.variables[r] : "")) + "", d = (t.values + "").split(",");
           return !l.properties.LATITUDE && !l.properties.LONGITUDE && d.filter(
             (u) => u.trim().toLowerCase() == h.trim().toLowerCase()
           ).length > 0;
         });
-        o.selectAll("image").data(r).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + t.image).attr("transform", (l) => "translate(" + this.projection([l.properties.LONGITUDE, l.properties.LATITUDE]) + ")").on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout), o.selectAll("image").data(n).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + t.image).attr("x", (l) => this.path.centroid(l)[0] - 20).attr("y", (l) => this.path.centroid(l)[1]).on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout);
+        o.selectAll("image").data(a).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + t.image).attr("transform", (l) => "translate(" + this.projection([l.properties.LONGITUDE, l.properties.LATITUDE]) + ")").on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout), o.selectAll("image").data(n).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + t.image).attr("x", (l) => this.path.centroid(l)[0] - 20).attr("y", (l) => this.path.centroid(l)[1]).on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout);
       }
     });
   }
@@ -574,10 +574,10 @@ class ue extends V.Component {
     return 0;
   }
   featuresZoom(e, s, i) {
-    const o = g.select(this.getMapId()).select("svg"), t = this.boundingExtent(e), [[r, n], [l, a]] = t, h = this.getWidth(), p = this.getHeight(), d = Math.min(
+    const o = g.select(this.getMapId()).select("svg"), t = this.boundingExtent(e), [[a, n], [l, r]] = t, h = this.getWidth(), p = this.getHeight(), d = Math.min(
       8,
-      0.9 / Math.max((l - r) / h, (a - n) / p)
-    ), u = [h / 2 - (r + l) / 2, p / 2 - (n + a) / 2];
+      0.9 / Math.max((l - a) / h, (r - n) / p)
+    ), u = [h / 2 - (a + l) / 2, p / 2 - (n + r) / 2];
     s ? o.call(
       this.zoom.transform,
       g.zoomIdentity.translate(u[0], u[1]).scale(d)
@@ -599,10 +599,10 @@ class ue extends V.Component {
       showTooltip: i,
       zoomEnabled: o,
       tooltipTheme: t,
-      customTooltips: r,
+      customTooltips: a,
       tooltipFontSize: n,
       tooltipFormat: l,
-      intl: a,
+      intl: r,
       mappingField: h,
       showNoDataTooltip: p,
       fields: d,
@@ -619,8 +619,8 @@ class ue extends V.Component {
         value: s.properties.value,
         measure: this.getSelectedMeasure(),
         measureLabel: s.properties.measureLabel,
-        locationName: this.getTranslatedLocationName(s, h, a),
-        label: this.getTranslatedLocationName(s, h, a),
+        locationName: this.getTranslatedLocationName(s, h, r),
+        label: this.getTranslatedLocationName(s, h, r),
         ...y
       };
       this.tooltip.attr("class", t).style("position", "absolute").style("visibility", "hidden").style("visibility", "visible").html((A) => {
@@ -629,7 +629,7 @@ class ue extends V.Component {
           const x = f.split(`
 `), D = x[0], W = x.length > 1 ? x[1] : null;
           let z = 1, P;
-          d.length > 1 && u != "POINTS_MAP" ? (z = x.length > 2 ? 2 : 1, P = x[z]) : P = null, D && (L += k(D, I, a)), W && (L.endsWith("<hr>") || (L += "<hr>"), L += k(W, I, a)), P && s.properties.children && s.properties.children.forEach((C, _) => {
+          d.length > 1 && u != "POINTS_MAP" ? (z = x.length > 2 ? 2 : 1, P = x[z]) : P = null, D && (L += k(D, I, r)), W && (L.endsWith("<hr>") || (L += "<hr>"), L += k(W, I, r)), P && s.properties.children && s.properties.children.forEach((C, _) => {
             const J = {
               value: C.value,
               label: C.label,
@@ -640,11 +640,11 @@ class ue extends V.Component {
             L.endsWith("<hr>") || (L += "<hr>"), L += k(
               P,
               J,
-              a
+              r
             );
           }), x.length > z + 1 && (L.endsWith("<hr>") || (L += "<hr>"), x.forEach((C, _) => {
-            _ > z && (L.endsWith("<hr>") || (L += "<hr>"), L += k(C, I, a));
-          })), r.filter(
+            _ > z && (L.endsWith("<hr>") || (L += "<hr>"), L += k(C, I, r));
+          })), a.filter(
             (C) => C.location === s.properties[h]
           ).forEach((C) => {
             L.endsWith("<hr>") || (L += "<hr>"), L += C.tooltip;
@@ -655,27 +655,32 @@ class ue extends V.Component {
             value: null,
             measure: this.getSelectedMeasure(),
             measureLabel: s.properties.measureLabel,
-            locationName: this.getTranslatedLocationName(s, h, a),
+            locationName: this.getTranslatedLocationName(s, h, r),
             ...y
           };
-          L += k(x, D, a), L += "</div>";
+          L += k(x, D, r), L += "</div>";
         }
         return L;
       });
     }
   }
+  positionTooltip(e) {
+    const i = this.tooltip.node(), o = i ? i.offsetWidth : 0, t = window.scrollX + document.documentElement.clientWidth;
+    let a = e.pageX;
+    o && a + o > t && (a = e.pageX - o, a < window.scrollX && (a = window.scrollX)), this.tooltip.style("top", e.pageY + "px").style("left", a + "px").style("margin-left", "8px");
+  }
   mousemove(e, s) {
-    this.tooltip.style("top", e.pageY + "px").style("left", e.pageX + 5 + "px");
+    this.positionTooltip(e);
   }
   mouseout(e, s) {
     const { showTooltip: i } = this.props;
     i && (g.select(this.getMapId()).select("svg").select("g").selectAll(".focus").attr("class", "active"), this.tooltip.style("visibility", "hidden"));
   }
   onClick(e, s) {
-    s.properties && this.tooltip.style("visibility", "visible").style("top", e.pageY + "px").style("left", e.pageX + 5 + "px"), e.stopPropagation(), e.preventDefault();
+    s.properties && (this.tooltip.style("visibility", "visible"), this.positionTooltip(e)), e.stopPropagation(), e.preventDefault();
   }
   onPointClick(e, s, i) {
-    this.showTooltip(e, s), this.tooltip.style("visibility", "visible").style("top", e.pageY + "px").style("left", e.pageX + 5 + "px");
+    this.showTooltip(e, s), this.tooltip.style("visibility", "visible"), this.positionTooltip(e);
     const o = g.select(this.getMapId()).select("svg").select("g");
     o.selectAll("circle").style("fill", this.props.defaultPointColor).style("stroke", "none"), o.select("#circle" + i).raise().style("fill", "#fff");
   }
@@ -712,26 +717,26 @@ class ue extends V.Component {
   getLayers() {
     const { layers: e } = this.state, { enabledLayers: s } = this.props;
     return e && e.length > 0 ? e.map((o) => {
-      const t = s.find((r) => r.id == o.id);
+      const t = s.find((a) => a.id == o.id);
       return o.index = t ? t.index : 0, o;
     }).sort((o, t) => parseInt(o.index) < parseInt(t.index) ? 1 : parseInt(o.index) > parseInt(t.index) ? -1 : 0) : [];
   }
   getFeatures() {
     const e = this.getMainLayer(), s = this.getLayers();
     if (e) {
-      const { transformedData: i, mappingField: o, app: t, mainLayerId: r, enabledLayers: n } = this.props;
+      const { transformedData: i, mappingField: o, app: t, mainLayerId: a, enabledLayers: n } = this.props;
       let l = [];
       try {
         l = this.extractFeatures(e), l.map((p) => {
-          p.properties.layerId = r;
-          const d = s.find((u) => String(u.id) === String(r));
+          p.properties.layerId = a;
+          const d = s.find((u) => String(u.id) === String(a));
           return d && (p.properties.layerMappingField = d.layerMappingField, p.properties.layerDatasource = d.layerDatasource, p.properties.layerApiField = d.layerApiField, p.properties.layerLocale = d.layerLocale, p.properties.displayLayerLabels = d.displayLayerLabels), n.forEach((u) => {
-            String(u.id) == r && Object.keys(u || {}).forEach((m) => {
+            String(u.id) == a && Object.keys(u || {}).forEach((m) => {
               p.properties[m] = u[m];
             });
           }), p;
         }), s && s.forEach((p) => {
-          if (p.id != r) {
+          if (p.id != a) {
             let d = this.extractFeatures(p.data);
             d = d.map((u) => (u.properties.layerId = p.id, u.properties.layerMappingField = p.layerMappingField, u.properties.layerDatasource = p.layerDatasource, u.properties.layerApiField = p.layerApiField, u.properties.layerLocale = p.layerLocale, u.properties.displayLayerLabels = p.displayLayerLabels, u)), l = [...d, ...l];
           }
@@ -739,11 +744,11 @@ class ue extends V.Component {
       } catch (p) {
         console.log("error updating features .." + p);
       }
-      const a = l.filter((p) => p.properties != null);
+      const r = l.filter((p) => p.properties != null);
       let h = i.locationsData;
       return i.measures && i.measures.length > 1 && (h = i.locationsData.filter(
         (p) => p.measure === this.getSelectedMeasure()
-      )), a.map((p) => {
+      )), r.map((p) => {
         if (h) {
           const d = h.find((u) => {
             const m = u.label ? ("" + u.label).toLowerCase() : "", v = p.properties[o] ? p.properties[o].toLowerCase() : "";
@@ -757,7 +762,7 @@ class ue extends V.Component {
           } else
             p.properties.value = null, p.properties.measure = null, p.properties.children = null, p.properties.measureLabel = null, p.properties.hasDataRow = !1;
         }
-      }), a;
+      }), r;
     }
     return [];
   }
@@ -767,19 +772,19 @@ class ue extends V.Component {
   }
   filterUpdated(e, s) {
     const { zoomOnFilterField: i } = this.props, o = e && e.appliedFilters || {}, t = this.props.appliedFilters || {};
-    let r = !1;
-    return o[i] != t[i] && (r = !0), r;
+    let a = !1;
+    return o[i] != t[i] && (a = !0), a;
   }
   getCenter(e, s) {
-    const { zoomOnFilter: i, zoomOnFilterField: o, mappingField: t, appliedFilters: r } = this.props;
+    const { zoomOnFilter: i, zoomOnFilterField: o, mappingField: t, appliedFilters: a } = this.props;
     let n = null;
     if (i && o) {
       let l = this.state.selectedPolygon;
-      s && r && r[o] && (l = r[o]);
-      const a = e.filter(
+      s && a && a[o] && (l = a[o]);
+      const r = e.filter(
         (h) => h.properties != null && h.properties[t] == l
       )[0];
-      a && a.properties != null && a.properties.value && (n = a);
+      r && r.properties != null && r.properties.value && (n = r);
     }
     return n;
   }
@@ -798,13 +803,13 @@ class ue extends V.Component {
     return s[0] /= o * 6, s[1] /= o * 6, s;
   }
   d3Map(e, s) {
-    let { zoomEnabled: i, mapContainerBgColor: o, mapPosition: t, editing: r, mapType: n } = this.props;
+    let { zoomEnabled: i, mapContainerBgColor: o, mapPosition: t, editing: a, mapType: n } = this.props;
     i || (i = !!["mobile", "tablet"].includes(T()));
-    const l = this.getBreaks(), a = g.select(this.getMapId());
-    let h = a.select("svg"), p = this.getWidth();
+    const l = this.getBreaks(), r = g.select(this.getMapId());
+    let h = r.select("svg"), p = this.getWidth();
     p === 0 ? p = window.innerWidth + Z[T()] : p += Z[T()];
     const d = this.getHeight() - 100;
-    if (h.empty() ? h = a.append("svg") : h.selectAll("*").remove(), h.attr("style", `background-color:${o};`).attr("viewBox", `0 0 ${p} ${d}`).attr("preserveAspectRatio", "xMidYMid meet"), h.append("g").selectAll("path").data(e).enter().append("path").attr("fill", (m) => this.fillColor(m, l)).attr("d", g.geoPath().projection(this.projection)).attr("class", (m) => this.classColor(m)).on("mouseover", n !== "POINTS_MAP" ? this.showTooltip : null).on("mousemove", n !== "POINTS_MAP" ? this.mousemove : null).on("mouseout", n !== "POINTS_MAP" ? this.mouseout : null), this.mapPosition && h.transition().duration(300).call(
+    if (h.empty() ? h = r.append("svg") : h.selectAll("*").remove(), h.attr("style", `background-color:${o};`).attr("viewBox", `0 0 ${p} ${d}`).attr("preserveAspectRatio", "xMidYMid meet"), h.append("g").selectAll("path").data(e).enter().append("path").attr("fill", (m) => this.fillColor(m, l)).attr("d", g.geoPath().projection(this.projection)).attr("class", (m) => this.classColor(m)).on("mouseover", n !== "POINTS_MAP" ? this.showTooltip : null).on("mousemove", n !== "POINTS_MAP" ? this.mousemove : null).on("mouseout", n !== "POINTS_MAP" ? this.mouseout : null), this.mapPosition && h.transition().duration(300).call(
       this.zoom.transform,
       g.zoomIdentity.translate(this.mapPosition.x, this.mapPosition.y).scale(this.mapPosition.k)
     ), !this.mapPosition && t && t.x && t.y && t.k && (h.transition().duration(300).call(
@@ -824,7 +829,7 @@ class ue extends V.Component {
         g.zoomIdentity.translate(t.x + v, t.y).scale(t.k)
       );
     }
-    i || r ? h.call(this.zoom) : h.on("dblclick.zoom", null);
+    i || a ? h.call(this.zoom) : h.on("dblclick.zoom", null);
     const u = this.getCenter(e, s);
     if (u) {
       const m = this.path.bounds(u), v = [
@@ -865,10 +870,10 @@ class ue extends V.Component {
     if (!e)
       return null;
     const t = this.getFeatures().find(
-      (r) => r.properties[s] === e
+      (a) => a.properties[s] === e
     );
     if (t && t.properties.displayLayerLabels && t.properties.layerLocale) {
-      const r = t.properties.layerMappingField || s, n = t.properties[r];
+      const a = t.properties.layerMappingField || s, n = t.properties[a];
       return O(this.metadataTypes, n, t.properties.layerLocale);
     }
     return e;
@@ -876,13 +881,13 @@ class ue extends V.Component {
   getHighlightedLocationColor(e) {
     const s = this.getBreaks(), { mapNoDataColor: i } = this.props, o = e ? e.value : null;
     if (o != null) {
-      const t = s.find((r) => {
-        if (r.min != null && r.max != null)
-          return o >= r.min && o <= r.max;
-        if (r.min != null)
-          return o >= r.min;
-        if (r.max != null)
-          return o <= r.max;
+      const t = s.find((a) => {
+        if (a.min != null && a.max != null)
+          return o >= a.min && o <= a.max;
+        if (a.min != null)
+          return o >= a.min;
+        if (a.max != null)
+          return o <= a.max;
       });
       return t && t.color ? t.color : i;
     }
@@ -918,10 +923,10 @@ class ue extends V.Component {
       nationalAverageLabel: i,
       intl: o,
       zoomEnabled: t,
-      transformedData: r,
+      transformedData: a,
       measureSelectorLabel: n,
       valueFormat: l,
-      showOverallValue: a,
+      showOverallValue: r,
       unique: h,
       highlightedLocation: p,
       labelFontColor: d,
@@ -941,7 +946,7 @@ class ue extends V.Component {
     m && (A.marginTop = "25px");
     const L = () => /* @__PURE__ */ M(U, { fluid: !0, className: "footnote ", children: [
       /* @__PURE__ */ M(S, { columns: 2, children: [
-        e !== "csv" && a && /* @__PURE__ */ b(S.Column, { textAlign: "left", width: 4, children: /* @__PURE__ */ M("div", { className: "national-average-div", children: [
+        e !== "csv" && r && /* @__PURE__ */ b(S.Column, { textAlign: "left", width: 4, children: /* @__PURE__ */ M("div", { className: "national-average-div", children: [
           /* @__PURE__ */ b("span", { className: "national-avg-label", children: i }),
           /* @__PURE__ */ b("span", { className: "national-avg-value", children: k(
             l,
@@ -953,7 +958,7 @@ class ue extends V.Component {
           S.Column,
           {
             textAlign: "right",
-            width: e !== "csv" && a ? 12 : 16,
+            width: e !== "csv" && r ? 12 : 16,
             children: /* @__PURE__ */ b(
               oe,
               {
@@ -972,7 +977,7 @@ class ue extends V.Component {
       ] }),
       /* @__PURE__ */ b("div", { className: "measure-selector", children: /* @__PURE__ */ M("ul", { children: [
         n && /* @__PURE__ */ b("li", { children: /* @__PURE__ */ b("span", { className: "label", children: n }) }),
-        r && r.measures && r.measures.length > 1 && r.measures.map((x) => /* @__PURE__ */ M("li", { onClick: this.selectedMeasureChanged.bind(this, x), children: [
+        a && a.measures && a.measures.length > 1 && a.measures.map((x) => /* @__PURE__ */ M("li", { onClick: this.selectedMeasureChanged.bind(this, x), children: [
           /* @__PURE__ */ b(
             "input",
             {
@@ -981,7 +986,7 @@ class ue extends V.Component {
               value: x
             }
           ),
-          /* @__PURE__ */ b("label", { children: r.measureLabelMap[x] || x })
+          /* @__PURE__ */ b("label", { children: a.measureLabelMap[x] || x })
         ] }))
       ] }) })
     ] });
@@ -1041,7 +1046,7 @@ class ue extends V.Component {
     ] });
   }
 }
-const Te = q(ue);
+const Te = Y(ue);
 export {
   Te as default,
   O as getTranslatedItemLabel