@devgateway/dvz-ui-react 1.9.6 → 1.9.7

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

@@ -1,164 +1,163 @@
-var X = Object.defineProperty;
-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 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";
-import * as ie from "topojson-client";
-import oe from "./legend.js";
+import { jsxs as b, Fragment as Ke, jsx as p } from "react/jsx-runtime";
+import { injectIntl as nr, FormattedMessage as ar } from "react-intl";
+import * as c from "d3";
+import { Icon as te, Popup as or, Message as xe, Container as Qe, Segment as sr, Dimmer as ir, Loader as cr, Grid as Fe } from "semantic-ui-react";
+import { useState as re, useRef as L, useEffect as et } from "react";
+import ur from "./legend.js";
 import { formatContent as k } from "../common/MapTooltip.js";
-import T from "../../utils/deviceType.js";
-import ae from "geostats";
-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 = (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 (!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,
-  tablet: 4,
-  midTablet: 2,
-  laptop: 2,
-  desktop: 2,
-  wide: 2
-}, ce = {
-  mobile: 330,
-  tablet: 250,
-  midTablet: 250,
-  laptop: 200,
-  desktop: 100,
-  wide: 100
-}, Z = {
-  mobile: 250,
-  tablet: 250,
-  midTablet: 250,
-  laptop: 0,
-  desktop: 0,
-  wide: 0
-}, he = {
-  greens: [
-    "#ccffdd",
-    "#b3ffcc",
-    "#99ffbb",
-    "#80ffaa",
-    "#66ff99",
-    "#4dff88",
-    "#33ff77",
-    "#1aff66",
-    "#00ff55",
-    "#00e64d"
-  ],
-  greys: [
-    "#f2f2f2",
-    "#e6e6e6",
-    "#d9d9d9",
-    "#cccccc",
-    "#bfbfbf",
-    "#b3b3b3",
-    "#a6a6a6",
-    "#999999",
-    "#8c8c8c",
-    "#808080"
-  ],
-  oranges: [
-    "#fff0e6",
-    "#ffe0cc",
-    "#ffd1b3",
-    "#ffc299",
-    "#ffb380",
-    "#ffa366",
-    "#ff944d",
-    "#ff8533",
-    "#ff751a",
-    "#ff6600"
-  ],
-  purples: [
-    "#ffe6ff",
-    "#ffccff",
-    "#ffb3ff",
-    "#ff99ff",
-    "#ff80ff",
-    "#ff66ff",
-    "#ff4dff",
-    "#ff33ff",
-    "#ff1aff",
-    "#ff00ff"
-  ],
-  reds: [
-    "#ffe6e6",
-    "#ffcccc",
-    "#ffb3b3",
-    "#ff9999",
-    "#ff8080",
-    "#ff6666",
-    "#ff4d4d",
-    "#ff3333",
-    "#ff1a1a",
-    "#ff0000"
-  ],
-  blues: [
-    "#e6eeff",
-    "#ccddff",
-    "#b3ccff",
-    "#99bbff",
-    "#80aaff",
-    "#6699ff",
-    "#4d88ff",
-    "#3377ff",
-    "#1a66ff",
-    "#0055ff"
-  ]
-}, de = ["mobile", "tablet", "midTablet"].includes(
-  T()
-), $ = ["mobile", "tablet"].includes(T());
-class ue extends V.Component {
-  constructor(e) {
-    var s;
-    super(e);
-    H(this, "handleScroll", () => {
-      let e = null;
-      clearTimeout(e), e = setTimeout(() => {
-        g.select(this.getMapId()).selectAll(".map-labels-container").size() > 0 || this.updateFeatures(this.getFeatures(), !1);
-      }, 300);
-    });
-    this.mapContainer = V.createRef(), this.state = { mainLayer: null, layers: null }, this.classColor = this.classColor.bind(this), this.featuresZoom = this.featuresZoom.bind(this), this.fullView = this.fullView.bind(this), this.onZoomIn = this.onZoomIn.bind(this), this.onZoomOut = this.onZoomOut.bind(this), this.onReset = this.onReset.bind(this), this.onClick = this.onClick.bind(this), this.showTooltip = this.showTooltip.bind(this), this.mousemove = this.mousemove.bind(this), this.mouseout = this.mouseout.bind(this), this.updateFeatures = this.updateFeatures.bind(this), this.d3Map = this.d3Map.bind(this), this.getFeatures = this.getFeatures.bind(this), this.boundingExtent = this.boundingExtent.bind(this), this.getMapId = this.getMapId.bind(this), this.zoomed = this.zoomed.bind(this), this.zoomEnd = this.zoomEnd.bind(this), this.drawPoints = this.drawPoints.bind(this), this.extractFeatures = this.extractFeatures.bind(this), this.getLayers = this.getLayers.bind(this), this.onPointClick = this.onPointClick.bind(this), this.onPolygonClick = this.onPolygonClick.bind(this), this.getCenter = this.getCenter.bind(this), this.mapPosition = null, this.zooming = !1, this.translateValue = pe[T()], this.projection = g.geoMercator().scale(e.scale).center(e.center).translate([this.getWidth() / this.translateValue, this.getHeight() / 2]), this.path = g.geoPath().projection(this.projection), this.zoom = g.zoom().scaleExtent([1, 16]).on("zoom", this.zoomed).on("end", this.zoomEnd), this.centered = null, this.state = {
-      selectedMeasure: e.transformedData && e.transformedData.measures && e.transformedData.measures.length > 1 ? e.transformedData.measures[0] : null,
-      generatedBreaks: [],
-      selectedPolygon: null,
-      layersLoading: !1
-    }, 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").style("pointer-events", "none"), console.log("Map props", this.metadataTypes);
+import N from "../../utils/deviceType.js";
+import { deviceTranslateMap as pr, getFilters as we, deviceMapHeight as dr, deviceMapWidth as tt, getHighlightedLocationColor as mr, getTranslatedItemLabel as fr, SHOW_ALL as rt, SHOW_IF_HAS_DATA as lt, LOCATION as nt, generateBreaks as gr, fillColor as hr, classColor as yr, getTranslatedLocationName as Ae, getLabelBoxWidth as vr, getLabelBoxHeight as br, createLabel as Lr, extractFeatures as xr } from "./mapHelpers.js";
+import { Config as Fr } from "../../conf/index.js";
+const wr = ["mobile", "tablet", "midTablet"].includes(
+  N()
+), at = ["mobile", "tablet"].includes(N());
+function Ar(O) {
+  const {
+    unique: Me,
+    editing: j,
+    source: Te,
+    center: le,
+    scale: ke,
+    height: Ne,
+    width: ot,
+    topoJSONField: st,
+    mappingField: y,
+    transformedData: u,
+    legendBreaks: Ee,
+    mapLabelField: x,
+    mapLabelShowValue: ne,
+    showOverallValue: ze,
+    measureSelectorLabel: Ie,
+    valueFormat: Ce,
+    autoGenerateBreaks: De,
+    showNoDataLabel: Pe,
+    numberOfBreaks: it,
+    colorScheme: ct,
+    symbols: Se,
+    tooltipTheme: ut,
+    labelFontSize: K,
+    labelFontColor: Oe,
+    labelFontWeight: pt,
+    legendFontSize: dt,
+    customTooltips: mt,
+    tooltipFontSize: ft,
+    showAdminUnitLabel: ae,
+    mapNoDataColor: We,
+    mapBoundaryColor: gt,
+    mapFocusBoundaryColor: ht,
+    highlightedLocation: C,
+    tooltipFormat: Re,
+    showNoDataTooltip: yt,
+    fields: vt,
+    mapContainerBgColor: bt,
+    mapPosition: h,
+    mainLayerId: W,
+    enabledLayers: D,
+    pointLabelColor: Lt,
+    pointLabelFormat: xt,
+    highlightedLocLabelFormat: Ft,
+    mapType: H,
+    defaultPointColor: Be,
+    zoomOnFilter: wt,
+    zoomOnFilterField: P,
+    noDataText: At,
+    labelsExclusionList: oe,
+    showShadingLayerLabels: _e,
+    appliedFilters: m,
+    intl: F,
+    legendTitle: Mt,
+    nationalAverageLabel: Tt,
+    zoomEnabled: se,
+    showTooltip: ie
+  } = O;
+  console.log("Map props:", O);
+  const [R, kt] = re(
+    () => u && u.measures && u.measures.length > 1 ? u.measures[0] : null
+  ), [$, Nt] = re(null), [je, ce] = re(!1), [B, ue] = re(null), pe = L(null), w = L(null), v = L(null), U = L(null), A = L(null), He = L(null), E = L(null), $e = L(!1), de = L(null), me = L(null), M = L({}), fe = L(null), J = (u == null ? void 0 : u.types) || [];
+  function ge() {
+    return pe.current ? pe.current.offsetWidth : ot;
+  }
+  function he() {
+    return Ne;
+  }
+  A.current === null && (A.current = c.zoom().scaleExtent([1, 16]).on("zoom", (e) => M.current.zoomed(e)).on("end", (e) => M.current.zoomEnd(e))), v.current === null && (He.current = pr[N()], v.current = c.geoMercator().scale(ke).center(le).translate([ge() / He.current, he() / 2]), U.current = c.geoPath().projection(v.current));
+  function g() {
+    return ".map.wrapper." + Me;
+  }
+  function z() {
+    let e = R;
+    return !e && u && u.measures && u.measures.length > 1 && (e = u.measures[0]), e;
+  }
+  function Ue() {
+    return B && B.length > 0 ? B.map((t) => {
+      const o = D.find((n) => n.id == t.id);
+      return t.index = o ? o.index : 0, t;
+    }).sort((t, o) => parseInt(t.index) < parseInt(o.index) ? 1 : parseInt(t.index) > parseInt(o.index) ? -1 : 0) : [];
+  }
+  function Et() {
+    const e = Ue();
+    let t;
+    return e && (t = e.filter((o) => o.id == W || o.id == null)[0] || e[0]), t ? t.data : null;
   }
-  componentDidCatch(e, s) {
-    console.log(e);
+  function Ve(e) {
+    return xr(e, st);
   }
-  componentWillUnmount() {
-    window.removeEventListener("scroll", this.handleScroll);
+  function X() {
+    const e = Et(), t = Ue();
+    if (e) {
+      let o = [];
+      try {
+        o = Ve(e), o.map((l) => {
+          l.properties.layerId = W;
+          const r = t.find(
+            (a) => String(a.id) === String(W)
+          );
+          return r && (l.properties.layerMappingField = r.layerMappingField, l.properties.layerDatasource = r.layerDatasource, l.properties.layerApiField = r.layerApiField, l.properties.layerLocale = r.layerLocale, l.properties.displayLayerLabels = r.displayLayerLabels), D.forEach((a) => {
+            String(a.id) == W && Object.keys(a || {}).forEach((s) => {
+              l.properties[s] = a[s];
+            });
+          }), l;
+        }), t && t.forEach((l) => {
+          if (l.id != W) {
+            let r = Ve(l.data);
+            r = r.map((a) => (a.properties.layerId = l.id, a.properties.layerMappingField = l.layerMappingField, a.properties.layerDatasource = l.layerDatasource, a.properties.layerApiField = l.layerApiField, a.properties.layerLocale = l.layerLocale, a.properties.displayLayerLabels = l.displayLayerLabels, a)), o = [...r, ...o];
+          }
+        });
+      } catch (l) {
+        console.log("error updating features .." + l);
+      }
+      const n = o.filter((l) => l.properties != null);
+      let i = u.locationsData;
+      return u.measures && u.measures.length > 1 && (i = u.locationsData.filter(
+        (l) => l.measure === z()
+      )), n.map((l) => {
+        if (i) {
+          const r = i.find((a) => {
+            const s = a.label ? ("" + a.label).toLowerCase() : "", d = l.properties[y] ? l.properties[y].toLowerCase() : "";
+            return s === d;
+          });
+          if (r) {
+            let a = r.measure;
+            u.measureLabelMap && r.measure && u.measureLabelMap[r.measure] && (a = u.measureLabelMap[r.measure]), l.properties.value = r.value, l.properties.measure = r.measure, l.properties.measureLabel = a, l.properties.children = r.children, l.properties.variables = r.variables, l.properties.hasDataRow = !0, Object.keys(r).forEach((s) => {
+              l.properties[s] = r[s];
+            });
+          } else
+            l.properties.value = null, l.properties.measure = null, l.properties.children = null, l.properties.measureLabel = null, l.properties.hasDataRow = !1;
+        }
+      }), n;
+    }
+    return [];
   }
-  loadLayers() {
-    const { source: e, mainLayerId: s, enabledLayers: i } = this.props;
-    if (this.setState({
-      layers: [],
-      layersLoading: !0
-    }), i && i.length > 0) {
-      const o = [];
-      i.forEach((t) => {
-        o.push(
-          new Promise((a, n) => {
-            g.json(re.REACT_APP_WP_API + "/wp/v2/media/" + t.id).then((l) => {
-              a({
+  function Ge() {
+    if (ue([]), ce(!0), D && D.length > 0) {
+      const e = [];
+      D.forEach((t) => {
+        e.push(
+          new Promise((o) => {
+            c.json(Fr.REACT_APP_WP_API + "/wp/v2/media/" + t.id).then((n) => {
+              o({
                 id: t.id,
-                url: l.source_url,
+                url: n.source_url,
                 index: t.index,
                 layerMappingField: t.layerMappingField,
                 layerDatasource: t.datasource,
@@ -166,8 +165,8 @@ class ue extends V.Component {
                 layerLocale: t.locale,
                 displayLayerLabels: t.displayLayerLabels
               });
-            }).catch(function(l) {
-              a({
+            }).catch(function() {
+              o({
                 id: t.id,
                 url: null,
                 index: t.index,
@@ -180,15 +179,15 @@ class ue extends V.Component {
             });
           })
         );
-      }), Promise.all(o).then((t) => {
-        const a = [];
+      }), Promise.all(e).then((t) => {
+        const o = [];
         t.forEach((n) => {
-          n.url && a.push(
-            new Promise((l, r) => {
-              g.json(n.url).then((h) => {
-                l({
+          n.url && o.push(
+            new Promise((i) => {
+              c.json(n.url).then((l) => {
+                i({
                   id: n.id,
-                  data: h,
+                  data: l,
                   index: n.index,
                   layerMappingField: n.layerMappingField,
                   layerDatasource: n.layerDatasource,
@@ -199,855 +198,540 @@ class ue extends V.Component {
               });
             })
           );
-        }), Promise.all(a).then((n) => {
-          this.setState({
-            layers: n,
-            layersLoading: !1
-          });
+        }), Promise.all(o).then((n) => {
+          ue(n), ce(!1);
         });
       });
     } else
-      g.json(e).then((o) => {
-        this.setState({
-          layers: [
-            {
-              id: null,
-              url: e,
-              data: o,
-              index: 0,
-              layerMappingField: null,
-              layerDatasource: null,
-              layerApiField: null,
-              layerLocale: null,
-              displayLayerLabels: !1
-            }
-          ],
-          layersLoading: !1
-        });
+      c.json(Te).then((e) => {
+        ue([
+          {
+            id: null,
+            url: Te,
+            data: e,
+            index: 0,
+            layerMappingField: null,
+            layerDatasource: null,
+            layerApiField: null,
+            layerLocale: null,
+            displayLayerLabels: !1
+          }
+        ]), ce(!1);
       });
   }
-  getMainLayer() {
-    const e = this.getLayers(), { mainLayerId: s, enabledLayers: i } = this.props;
-    let o;
-    return e && (o = e.filter(
-      (t) => t.id == s || t.id == null
-    )[0] || e[0]), o ? o.data : null;
+  function zt(e) {
+    c.select(g()).select("svg").selectAll("circle").attr("r", e.k > 1 ? 6 / e.k : 6);
   }
-  componentDidUpdate(e, s, i) {
-    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) => {
-        d[f] != null && d[f] instanceof Array && v.push(
-          ...d[f].filter(
-            (y) => y != Number.MIN_SAFE_INTEGER
-          )
-        );
-      }), p && Object.keys(p).forEach((f) => {
-        p[f] != null && p[f] instanceof Array && c.push(
-          ...p[f].filter((y) => y != Number.MIN_SAFE_INTEGER)
-        );
-      }), v.length > 0 && c.length == 0 && this.onReset();
-    }
-    this.tooltip.style("visibility", "hidden"), e.enabledLayers.length != this.props.enabledLayers.length && this.loadLayers();
-    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 || 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;
-  }
-  getWidth() {
-    return this.mapContainer.current ? this.mapContainer.current.offsetWidth : this.props.width;
-  }
-  boundingExtent(e) {
-    let s, i, o, t;
-    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],
-      [i, t]
-    ];
+  function _(e) {
+    return vr(e, x);
   }
-  onReset() {
-    this.mapPosition = null, this.tooltip.style("visibility", "hidden"), this.fullView();
+  function Q() {
+    return br(ne);
   }
-  resizeLabels(e) {
-    const { labelFontSize: s, mapLabelField: i } = this.props;
-    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) / 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);
+  function ye(e) {
+    return e.properties.LABEL_LATITUDE && e.properties.LABEL_LONGITUDE ? v.current([
+      e.properties.LABEL_LONGITUDE,
+      e.properties.LABEL_LATITUDE
+    ]) : U.current.centroid(e);
+  }
+  function It(e) {
+    c.select(g()).selectAll(".map-labels-container").each((t, o, n) => {
+      const i = c.select(n[o]), l = i.select("div"), r = e.k > 1 ? e.k : 1, a = K / r;
+      l.style("font-size", `${a}px`);
+      const s = ye(t), d = _(t) / r, f = s[0] - d / 2, T = e.k > 1 ? 10 / e.k : 10, S = s[1] - T;
+      i.attr("x", f).attr("y", S).attr("width", _(t) / r).attr("height", Q() / r);
     });
   }
-  resizePointLabels(e) {
-    const { labelFontSize: s } = this.props;
-    g.select(this.getMapId()).selectAll(".point-labels-container").each((i, o, t) => {
-      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;
-      a.attr("x", u).attr("y", m).attr("width", p).attr("height", d);
+  function Ct(e) {
+    c.select(g()).selectAll(".point-labels-container").each((t, o, n) => {
+      const i = c.select(n[o]), l = i.select("div"), r = e.k > 1 ? e.k : 1, a = K / r;
+      l.style("font-size", `${a}px`);
+      const s = v.current([
+        t.geometry.coordinates[1],
+        t.geometry.coordinates[0]
+      ]), d = (_(t) + 20) / r, f = Q() / r, T = s[0] - d / 2, S = s[1] - f / 2;
+      i.attr("x", T).attr("y", S).attr("width", d).attr("height", f);
     });
   }
-  resizeCircles(e) {
-    g.select(this.getMapId()).select("svg").selectAll("circle").attr("r", e.k > 1 ? 6 / e.k : 6);
-  }
-  zoomed(e) {
-    this.tooltip.style("visibility", "hidden");
-    const s = e.transform;
-    g.select(this.getMapId()).select("svg").select("g").attr("transform", s), this.resizeCircles(s), this.resizeLabels(s), this.resizePointLabels(s);
+  function Dt(e) {
+    w.current.style("visibility", "hidden");
+    const t = e.transform;
+    c.select(g()).select("svg").select("g").attr("transform", t), zt(t), It(t), Ct(t);
   }
-  zoomEnd(e) {
-    const { editing: s } = this.props, i = e.transform;
-    this.mapPosition = { k: i.k, x: i.x, y: i.y }, s && window.parent.postMessage(
-      { type: "map", value: JSON.stringify(this.mapPosition) },
+  function Pt(e) {
+    const t = e.transform;
+    E.current = { k: t.k, x: t.x, y: t.y }, j && window.parent.postMessage(
+      { type: "map", value: JSON.stringify(E.current) },
       "*"
     );
   }
-  classColor(e) {
-    let { zoomEnabled: s } = this.props;
-    return s || (s = !!["mobile", "tablet", "midTablet"].includes(
-      T()
-    )), s ? "active zoom-enabled" : "active";
+  function St() {
+    const e = c.select(g()).select("svg");
+    e.select("g").selectAll(".active").attr("class", function() {
+      return c.select(this).attr("class").replace(/background/gi, "");
+    });
+    let o = c.zoomIdentity;
+    h && !j ? o = o.translate(h.x, h.y).scale(h.k) : o = o.translate(0, 0).scale(1), e.transition().duration(300).call(A.current.transform, o);
   }
-  generateBreaks(e) {
-    const { autoGenerateBreaks: s, numberOfBreaks: i, colorScheme: o } = this.props, t = [];
-    if (s && e && e.length > 0) {
-      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 r = new ae(n);
-        r.setPrecision(2);
-        const h = n.length > 1 ? n.length - 1 : n.length;
-        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)
-          ), u.color = l[d], t.push(u);
-        }), t;
-      }
-    }
-    return t;
+  function Je() {
+    E.current = null, w.current.style("visibility", "hidden"), St();
   }
-  getBreaks() {
-    const { legendBreaks: e, autoGenerateBreaks: s } = this.props;
-    if (s) {
-      const i = this.getFeatures();
-      return this.generateBreaks(i);
+  function Ot() {
+    c.select(g()).select("svg").transition().call(A.current.scaleBy, 1.5);
+  }
+  function Wt() {
+    c.select(g()).select("svg").transition().call(A.current.scaleBy, 0.6667);
+  }
+  function Z() {
+    if (De) {
+      const e = X();
+      return gr(e, {
+        autoGenerateBreaks: De,
+        numberOfBreaks: it,
+        colorScheme: ct
+      });
     } else {
-      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 a = Object.keys(this.props.appliedFilters);
-          return o.filters.filter((l) => {
-            if (a.indexOf(l.field) != -1) {
-              const r = this.props.appliedFilters[l.field], h = l.values;
-              return r.join(",").indexOf(h) != -1;
+      let e = Ee;
+      return z() && (e = Ee.filter((t) => t.measure === z()).filter((t) => {
+        if (t.filters && t.filters.length > 0 && m && JSON.stringify(m) !== "{}") {
+          const n = Object.keys(m);
+          return t.filters.filter((l) => {
+            if (n.indexOf(l.field) != -1) {
+              const r = m[l.field], a = l.values;
+              return r.join(",").indexOf(a) != -1;
             }
             return !1;
           }).length > 0;
         }
         return !0;
-      })), i;
+      })), e;
     }
   }
-  fillColor(e, s) {
-    const { mapNoDataColor: i, mainLayerId: o } = this.props;
-    let t;
-    if (e.properties && e.properties.variables && this.state.selectedMeasure && e.properties.value != null) {
-      const n = le + this.state.selectedMeasure;
-      if (t = e.properties.variables[n.trim()], t)
-        return t;
-    }
-    if (e.properties.value != null && (o && e.properties.layerId === o || !o)) {
-      const n = s.find((l) => {
-        if (l.min != null && l.max != null)
-          return e.properties.value >= l.min && e.properties.value <= l.max;
-        if (l.min != null)
-          return e.properties.value >= l.min;
-        if (l.max != null)
-          return e.properties.value <= l.max;
-      });
-      return n && n.color ? n.color : i;
-    }
-    const a = this.props.enabledLayers.filter(
-      (n) => n.id === e.properties.layerId
-    )[0];
-    return a && a.bgColor && a.bgColor != "undefined" ? a.bgColor : i;
-  }
-  setValues() {
-    const e = this.getFeatures();
-    g.select(this.getMapId()).select("svg").select("g").selectAll("path").data(e).join("path").attr("d", this.path);
+  function ve(e, t) {
+    return hr(e, t, {
+      mapNoDataColor: We,
+      mainLayerId: W,
+      enabledLayers: D,
+      selectedMeasure: R
+    });
   }
-  getLabelPosition(e) {
-    return e.properties.LABEL_LATITUDE && e.properties.LABEL_LONGITUDE ? this.projection([
-      e.properties.LABEL_LONGITUDE,
-      e.properties.LABEL_LATITUDE
-    ]) : this.path.centroid(e);
+  function Rt(e) {
+    return Lr(
+      e,
+      {
+        mapLabelField: x,
+        mapLabelShowValue: ne,
+        intl: F,
+        valueFormat: Ce,
+        showNoDataLabel: Pe,
+        showAdminUnitLabel: ae,
+        noDataText: At,
+        selectedMeasure: z()
+      },
+      J,
+      k
+    );
   }
-  updateFeatures(e, s) {
-    const { mapLabelField: i, symbols: o, highlightedLocation: t } = this.props, a = [
-      ...e.filter((n) => t != n.properties[i]),
-      ...e.filter((n) => t == n.properties[i])
+  function Xe(e, t) {
+    const o = [
+      ...e.filter((n) => C != n.properties[x]),
+      ...e.filter((n) => C == n.properties[x])
     ];
-    this.drawPolygons(a), this.drawLabels(a), this.drawPoints(a, s), o.length > 0 && this.addSymbols(o, a);
+    _t(o), Bt(o), jt(o, t), Se.length > 0 && Ht(Se, o);
   }
-  drawLabels(e) {
-    const {
-      mapLabelField: s,
-      mapLabelShowValue: i,
-      intl: o,
-      valueFormat: t,
-      showNoDataLabel: a,
-      labelFontColor: n,
-      labelFontWeight: l,
-      labelFontSize: r,
-      showAdminUnitLabel: h,
-      mapType: p,
-      noDataText: d,
-      labelsExclusionList: u
-    } = this.props, m = g.select(this.getMapId()).select("svg").select("g");
-    if (m.selectAll(".map-labels-container").size() > 0) {
+  function Bt(e) {
+    const t = c.select(g()).select("svg").select("g");
+    if (t.selectAll(".map-labels-container").size() > 0) {
       console.log("Labels already exist, skipping redraw...");
       return;
     }
-    m.selectAll(".map-labels").data(
-      e.filter((c) => u && u.length > 0 ? !u.includes(c.properties[s]) : !0)
-    ).enter().append("foreignObject").attr("class", "map-labels-container").attr("x", (c) => {
-      const f = this.getLabelPosition(c);
-      if (c.properties[s]) {
-        const y = this.getLabelBoxWidth(c);
-        return f[0] - y / 2;
+    t.selectAll(".map-labels").data(
+      e.filter((n) => oe && oe.length > 0 ? !oe.includes(n.properties[x]) : !0)
+    ).enter().append("foreignObject").attr("class", "map-labels-container").attr("x", (n) => {
+      const i = ye(n);
+      if (n.properties[x]) {
+        const l = _(n);
+        return i[0] - l / 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) => `${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));
+      return i[0];
+    }).attr("y", (n) => ye(n)[1] - 10).attr("width", (n) => _(n)).attr("height", (n) => Q()).attr("font-size", () => `${K}px`).attr("overflow", "visible").attr("opacity", 1).style("display", (n) => ae === rt || ae === lt && n.properties.hasDataRow || n.properties.displayLayerLabels ? "block" : "none").attr("pointer-events", H == "POINTS_MAP" ? "none" : "all").on("mouseover", V).on("mousemove", Y).on("mouseout", G).append("xhtml:div").style("font-size", () => `${K}px`).style("color", () => Oe).style("font-weight", () => pt).style("background-color", (n) => n.properties.hasDataRow && ne && (n.properties.value != null || n.properties.value == null && Pe) ? "#fff6e1" : "none").style("border-radius", () => "4px").style("line-height", "95%").style("text-align", "center").html((n) => Rt(n));
   }
-  getTranslatedLocationName(e, s, i) {
-    if (e.properties.displayLayerLabels && e.properties.layerLocale) {
-      const o = e.properties.layerMappingField || s, t = e.properties[o];
-      return O(this.metadataTypes, t, e.properties.layerLocale);
-    }
-    return e.properties[s];
-  }
-  createLabel(e) {
-    const {
-      mapLabelField: s,
-      mapLabelShowValue: i,
-      intl: o,
-      valueFormat: t,
-      showNoDataLabel: a,
-      showAdminUnitLabel: n,
-      noDataText: l
-    } = this.props;
-    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);
-      r = O(this.metadataTypes, p, d);
-      const u = e.properties.abbrev;
-      if (r && r.length > ne && u && (r = u), i)
-        if (e.properties.value != null) {
-          const m = e.properties.variables || {};
-          r += "<br><span class='map-label-value'>" + k(
-            t,
-            {
-              value: e.properties.value,
-              measure: this.getSelectedMeasure(),
-              ...m
-            },
-            o
-          ) + "</span>";
-        } else
-          a == !0 && e.properties.value == null && e.properties.hasDataRow && (r += "<br><span class='map-label-value'>" + l + "</span>");
-    }
-    return r;
-  }
-  drawPolygons(e) {
-    const {
-      mapLabelField: s,
-      mapBoundaryColor: i,
-      mapFocusBoundaryColor: o,
-      highlightedLocation: t
-    } = 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")
+  function _t(e) {
+    const t = Z(), o = c.select(g()).select("svg").select("g"), n = e.filter(
+      (i) => i.geometry && i.geometry && (i.geometry.type == "Polygon" || i.geometry.type == "MultiPolygon")
     );
-    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: a,
-      defaultPointColor: n,
-      appliedFilters: l,
-      zoomOnFilterField: r,
-      noDataText: h,
-      showShadingLayerLabels: p
-    } = this.props, d = g.select(this.getMapId()).select("svg").select("g");
-    let u = [];
-    if (a.pointsData) {
-      let c = this.state.selectedPolygon;
-      s && l && l[r] && (c = l[r]), u = a.pointsData.filter((f) => f.lat && f.lng && f.label == c).map((f) => ({
+    n.length > 0 && o.selectAll("path").data(n).join("path").attr("d", U.current).attr("fill", (i) => ve(i, t)).attr("stroke-width", (i) => C == i.properties[x] ? 1.2 : 0.4).attr("stroke", (i) => C == i.properties[x] ? ht : gt).on("click", Ut);
+  }
+  function jt(e, t) {
+    const o = c.select(g()).select("svg").select("g");
+    let n = [];
+    if (u.pointsData) {
+      let r = $;
+      t && m && m[P] && (r = m[P]), n = u.pointsData.filter((a) => a.lat && a.lng && a.label == r).map((a) => ({
         properties: {
-          label: f.label,
-          lat: f.lat,
-          lng: f.lng,
-          value: f.value,
-          variables: f.variables
+          label: a.label,
+          lat: a.lat,
+          lng: a.lng,
+          value: a.value,
+          variables: a.variables
         }
-      })), d.selectAll(".circle").data(u).enter().append("circle").attr("id", (f, y) => "circle" + y).attr("cx", (f) => this.projection([
-        f.properties.lng,
-        f.properties.lat
-      ])[0]).attr("cy", (f) => this.projection([
-        f.properties.lng,
-        f.properties.lat
-      ])[1]).attr("r", (f, y) => 2).style("stroke-width", 0.5).style("fill", (f, y) => n).on("mouseover", (f, y) => this.onPointClick(f, y)).on("mouseout", this.mouseout);
+      })), o.selectAll(".circle").data(n).enter().append("circle").attr("id", (a, s) => "circle" + s).attr("cx", (a) => v.current([a.properties.lng, a.properties.lat])[0]).attr("cy", (a) => v.current([a.properties.lng, a.properties.lat])[1]).attr("r", () => 2).style("stroke-width", 0.5).style("fill", () => Be).on("mouseover", (a, s) => $t(a, s)).on("mouseout", G);
     }
-    const m = this.getBreaks();
-    let v = [];
-    p == j ? v = e.filter(
-      (c) => c.geometry && c.geometry.type == "Point"
-    ) : p == B && (v = e.filter(
-      (c) => c.geometry && c.geometry.type == "Point" && c.properties.hasDataRow
-    )), v.length > 0 && d.selectAll(".point-labels").data(v).enter().append("foreignObject").attr("id", (c, f) => "point-label" + f).attr("class", "point-labels-container").attr("x", (c) => {
-      const f = this.getLabelBoxWidth(c) + 20;
-      return this.projection([
-        c.geometry.coordinates[1],
-        c.geometry.coordinates[0]
-      ])[0] - f / 2;
-    }).attr("y", (c) => this.projection([
-      c.geometry.coordinates[1],
-      c.geometry.coordinates[0]
-    ])[1] - this.getLabelBoxHeight(c) / 2).attr("width", (c) => this.getLabelBoxWidth(c) + 20).attr("height", (c) => "1px").attr("overflow", "visible").attr("font-size", "12px").style("opacity", 1).append("xhtml:div").style("color", (c, f) => o).style("font-weight", (c) => "bold").style("background-color", (c) => this.fillColor(c, m)).style("padding", (c) => "5px 3px 5px 3px").style("border-radius", (c) => "4px").style("line-height", "100%").style("text-align", "center").html((c, f) => k(
-      t,
-      {
-        value: c.properties.value,
-        locationName: c.properties[this.props.mapLabelField]
-      },
-      i
-    )).on("mouseover", (c, f, y) => {
-      g.select(this.getMapId()).select("svg").select("g").select("#point-label" + y).raise(), this.showTooltip(c, f);
-    }).on("mousemove", this.mousemove).on("mouseout", this.mouseout);
-  }
-  addSymbols(e, s) {
-    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 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()
+    const i = Z();
+    let l = [];
+    _e == rt ? l = e.filter((r) => r.geometry && r.geometry.type == "Point") : _e == lt && (l = e.filter(
+      (r) => r.geometry && r.geometry.type == "Point" && r.properties.hasDataRow
+    )), l.length > 0 && o.selectAll(".point-labels").data(l).enter().append("foreignObject").attr("id", (r, a) => "point-label" + a).attr("class", "point-labels-container").attr("x", (r) => {
+      const a = _(r) + 20;
+      return v.current([
+        r.geometry.coordinates[1],
+        r.geometry.coordinates[0]
+      ])[0] - a / 2;
+    }).attr("y", (r) => v.current([
+      r.geometry.coordinates[1],
+      r.geometry.coordinates[0]
+    ])[1] - Q() / 2).attr("width", (r) => _(r) + 20).attr("height", () => "1px").attr("overflow", "visible").attr("font-size", "12px").style("opacity", 1).append("xhtml:div").style("color", () => Lt).style("font-weight", () => "bold").style("background-color", (r) => ve(r, i)).style("padding", () => "5px 3px 5px 3px").style("border-radius", () => "4px").style("line-height", "100%").style("text-align", "center").html(
+      (r) => k(
+        xt,
+        {
+          value: r.properties.value,
+          locationName: r.properties[x]
+        },
+        F
+      )
+    ).on("mouseover", (r, a, s) => {
+      c.select(g()).select("svg").select("g").select("#point-label" + s).raise(), V(r, a);
+    }).on("mousemove", Y).on("mouseout", G);
+  }
+  function Ht(e, t) {
+    const o = c.select(g()).select("svg").select("g");
+    e.forEach((n) => {
+      if (n.field && n.image && n.values) {
+        const i = t.filter((r) => {
+          const a = nt == n.field ? y : "value", s = (r.properties[a] || (r.properties.variables ? r.properties.variables[a] : "")) + "", f = (n.values + "").split(",");
+          return r.properties.LATITUDE && r.properties.LONGITUDE && f.filter(
+            (T) => T.trim().toLowerCase() == s.trim().toLowerCase()
           ).length > 0;
-        }), n = 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()
+        }), l = t.filter((r) => {
+          const a = nt == n.field ? y : "value", s = (r.properties[a] || (r.properties.variables ? r.properties.variables[a] : "")) + "", f = (n.values + "").split(",");
+          return !r.properties.LATITUDE && !r.properties.LONGITUDE && f.filter(
+            (T) => T.trim().toLowerCase() == s.trim().toLowerCase()
           ).length > 0;
         });
-        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);
+        o.selectAll("image").data(i).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + n.image).attr(
+          "transform",
+          (r) => "translate(" + v.current([r.properties.LONGITUDE, r.properties.LATITUDE]) + ")"
+        ).on("mouseover", V).on("mousemove", Y).on("mouseout", G), o.selectAll("image").data(l).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + n.image).attr("x", (r) => U.current.centroid(r)[0] - 20).attr("y", (r) => U.current.centroid(r)[1]).on("mouseover", V).on("mousemove", Y).on("mouseout", G);
       }
     });
   }
-  getLabelBoxHeight() {
-    const { mapLabelShowValue: e } = this.props;
-    return e ? 30 : 25;
-  }
-  getLabelBoxWidth(e) {
-    const { mapLabelField: s } = this.props, i = 80;
-    if (e.properties[s]) {
-      const o = e.properties[s].length;
-      return o < 10 ? i : o * 8;
-    }
-    return 0;
-  }
-  featuresZoom(e, s, i) {
-    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 - 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)
-    ) : o.transition().duration(450).call(
-      this.zoom.transform,
-      g.zoomIdentity.translate(u[0], u[1]).scale(d)
-    ).on("end", i);
-  }
-  fullView() {
-    const { mapPosition: e, editing: s } = this.props, i = g.select(this.getMapId()).select("svg");
-    i.select("g").selectAll(".active").attr("class", function() {
-      return g.select(this).attr("class").replace(/background/gi, "");
-    });
-    let t = g.zoomIdentity;
-    e && !s ? t = t.translate(e.x, e.y).scale(e.k) : t = t.translate(0, 0).scale(1), i.transition().duration(300).call(this.zoom.transform, t);
-  }
-  showTooltip(e, s) {
-    let {
-      showTooltip: i,
-      zoomEnabled: o,
-      tooltipTheme: t,
-      customTooltips: a,
-      tooltipFontSize: n,
-      tooltipFormat: l,
-      intl: r,
-      mappingField: h,
-      showNoDataTooltip: p,
-      fields: d,
-      mapType: u,
-      noDataText: m
-    } = this.props;
-    if (o = !!["mobile", "tablet", "midTablet"].includes(
-      T()
-    ), i && s.properties.value != null || i && p) {
-      g.select(this.getMapId()).select("svg").select("g").selectAll(".active").attr("class", (A) => A.properties[h] === s.properties[h] ? "focus" + (o ? " zoom-enabled" : "") : "active" + (o ? " zoom-enabled" : ""));
-      const f = l || `{locationName} %({value},2) 
- {label}: %({value},2)`, y = s.properties.variables || {}, I = {
-        ...s.properties,
-        value: s.properties.value,
-        measure: this.getSelectedMeasure(),
-        measureLabel: s.properties.measureLabel,
-        locationName: this.getTranslatedLocationName(s, h, r),
-        label: this.getTranslatedLocationName(s, h, r),
-        ...y
+  function V(e, t) {
+    console.log("Showing tooltip for data:", t);
+    const o = ["mobile", "tablet", "midTablet"].includes(
+      N()
+    );
+    if (ie && t.properties.value !== null || ie && yt) {
+      c.select(g()).select("svg").select("g").selectAll(".active").attr("class", (s) => s.properties[y] === t.properties[y] ? "focus" + (o ? " zoom-enabled" : "") : "active" + (o ? " zoom-enabled" : ""));
+      const l = Re || `{locationName} %({value},2) 
+ {label}: %({value},2)`, r = t.properties.variables || {}, a = {
+        ...t.properties,
+        value: t.properties.value,
+        measure: z(),
+        measureLabel: t.properties.measureLabel,
+        locationName: Ae(t, y, J),
+        label: Ae(t, y, J),
+        ...r,
+        ...we(m)
+        // expose applied filter params (e.g. {year}) to the tooltip
       };
-      this.tooltip.attr("class", t).style("position", "absolute").style("visibility", "hidden").style("visibility", "visible").html((A) => {
-        let L = `<div style='font-size:${n}px;' class='tooltip-content' >`;
-        if (s.properties.value != null) {
-          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, 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,
-              measure: this.getSelectedMeasure(),
-              measureLabel: s.properties.measureLabel,
-              ...y
+      w.current.attr("class", ut).style("position", "absolute").style("visibility", "hidden").style("visibility", "visible").html(() => {
+        let s = `<div style='font-size:${ft}px;' class='tooltip-content' >`;
+        if (t.properties.value != null) {
+          const d = l.split(`
+`), f = d[0], T = d.length > 1 ? d[1] : null;
+          let S = 1, ee;
+          vt.length > 1 && H != "POINTS_MAP" ? (S = d.length > 2 ? 2 : 1, ee = d[S]) : ee = null, f && (s += k(f, a, F)), T && (s.endsWith("<hr>") || (s += "<hr>"), s += k(T, a, F)), ee && t.properties.children && t.properties.children.forEach((I) => {
+            const Le = {
+              value: I.value,
+              label: I.label,
+              measure: z(),
+              measureLabel: t.properties.measureLabel,
+              ...r,
+              ...I.variables,
+              ...we(m)
             };
-            L.endsWith("<hr>") || (L += "<hr>"), L += k(
-              P,
-              J,
-              r
-            );
-          }), x.length > z + 1 && (L.endsWith("<hr>") || (L += "<hr>"), x.forEach((C, _) => {
-            _ > 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;
+            s.endsWith("<hr>") || (s += "<hr>"), s += k(ee, Le, F);
+          }), d.length > S + 1 && (s.endsWith("<hr>") || (s += "<hr>"), d.forEach((I, Le) => {
+            Le > S && (s.endsWith("<hr>") || (s += "<hr>"), s += k(I, a, F));
+          })), mt.filter(
+            (I) => I.location === t.properties[y]
+          ).forEach((I) => {
+            s.endsWith("<hr>") || (s += "<hr>"), s += I.tooltip;
           });
         } else {
-          const x = l || `{locationName} %({value},2) 
- {label}: %({value},2)`, D = {
+          const d = Re || `{locationName} %({value},2) 
+ {label}: %({value},2)`, f = {
             value: null,
-            measure: this.getSelectedMeasure(),
-            measureLabel: s.properties.measureLabel,
-            locationName: this.getTranslatedLocationName(s, h, r),
-            ...y
+            measure: z(),
+            measureLabel: t.properties.measureLabel,
+            locationName: Ae(t, y, J),
+            ...r
           };
-          L += k(x, D, r), L += "</div>";
+          s += k(d, f, F), s += "</div>";
         }
-        return L;
+        return s;
       });
     }
   }
-  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.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"), this.positionTooltip(e)), e.stopPropagation(), e.preventDefault();
+  function Ze(e) {
+    const o = w.current.node(), n = o ? o.offsetWidth : 0, i = window.scrollX + document.documentElement.clientWidth;
+    let l = e.pageX;
+    n && l + n > i && (l = e.pageX - n, l < window.scrollX && (l = window.scrollX)), w.current.style("top", e.pageY + "px").style("left", l + "px").style("margin-left", "8px");
   }
-  onPointClick(e, s, i) {
-    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");
+  function Y(e) {
+    Ze(e);
   }
-  onPolygonClick(e, s) {
-    const { mappingField: i } = this.props;
-    this.state.selectedPolygon !== s.properties[i] && s.properties.value !== null && this.setState({ selectedPolygon: s.properties[i] });
+  function G() {
+    ie && (c.select(g()).select("svg").select("g").selectAll(".focus").attr("class", "active"), w.current.style("visibility", "hidden"));
   }
-  onZoomIn(e) {
-    g.select(this.getMapId()).select("svg").transition().call(this.zoom.scaleBy, 1.5);
-  }
-  onZoomOut() {
-    g.select(this.getMapId()).select("svg").transition().call(this.zoom.scaleBy, 0.6667);
-  }
-  getSelectedMeasure() {
-    let e = this.state.selectedMeasure;
-    return !e && this.props.transformedData && this.props.transformedData.measures && this.props.transformedData.measures.length > 1 && (e = this.props.transformedData.measures[0]), e;
-  }
-  getCollectionField(e) {
-    const { topoJSONField: s } = this.props;
-    if (e && e.objects) {
-      const i = Object.keys(e.objects);
-      for (const o in i) {
-        const t = i[o];
-        if (e.objects[t].type == "GeometryCollection")
-          return t;
-      }
-    }
-    return s;
-  }
-  extractFeatures(e) {
-    const s = this.getCollectionField(e);
-    return e && e.objects && e.objects[s] ? ie.feature(e, e.objects[s]).features : e && e.features ? e.features : [];
-  }
-  getLayers() {
-    const { layers: e } = this.state, { enabledLayers: s } = this.props;
-    return e && e.length > 0 ? e.map((o) => {
-      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: a, enabledLayers: n } = this.props;
-      let l = [];
-      try {
-        l = this.extractFeatures(e), l.map((p) => {
-          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) == a && Object.keys(u || {}).forEach((m) => {
-              p.properties[m] = u[m];
-            });
-          }), p;
-        }), s && s.forEach((p) => {
-          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];
-          }
-        });
-      } catch (p) {
-        console.log("error updating features .." + p);
-      }
-      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()
-      )), 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() : "";
-            return m === v;
-          });
-          if (d) {
-            let u = d.measure;
-            i.measureLabelMap && d.measure && i.measureLabelMap[d.measure] && (u = i.measureLabelMap[d.measure]), p.properties.value = d.value, p.properties.measure = d.measure, p.properties.measureLabel = u, p.properties.children = d.children, p.properties.variables = d.variables, p.properties.hasDataRow = !0, Object.keys(d).forEach((m) => {
-              p.properties[m] = d[m];
-            });
-          } else
-            p.properties.value = null, p.properties.measure = null, p.properties.children = null, p.properties.measureLabel = null, p.properties.hasDataRow = !1;
-        }
-      }), r;
-    }
-    return [];
+  function $t(e, t, o) {
+    V(e, t), w.current.style("visibility", "visible"), Ze(e);
+    const n = c.select(g()).select("svg").select("g");
+    n.selectAll("circle").style("fill", Be).style("stroke", "none"), n.select("#circle" + o).raise().style("fill", "#fff");
   }
-  getMapId() {
-    const { unique: e } = this.props;
-    return ".map.wrapper." + e;
+  function Ut(e, t) {
+    $ !== t.properties[y] && t.properties.value !== null && Nt(t.properties[y]);
   }
-  filterUpdated(e, s) {
-    const { zoomOnFilterField: i } = this.props, o = e && e.appliedFilters || {}, t = this.props.appliedFilters || {};
-    let a = !1;
-    return o[i] != t[i] && (a = !0), a;
+  function Vt(e) {
+    const t = e && e.appliedFilters || {}, o = m || {};
+    return t[P] != o[P];
   }
-  getCenter(e, s) {
-    const { zoomOnFilter: i, zoomOnFilterField: o, mappingField: t, appliedFilters: a } = this.props;
-    let n = null;
-    if (i && o) {
-      let l = this.state.selectedPolygon;
-      s && a && a[o] && (l = a[o]);
-      const r = e.filter(
-        (h) => h.properties != null && h.properties[t] == l
+  function Gt(e, t) {
+    let o = null;
+    if (wt && P) {
+      let n = $;
+      t && m && m[P] && (n = m[P]);
+      const i = e.filter(
+        (l) => l.properties != null && l.properties[y] == n
       )[0];
-      r && r.properties != null && r.properties.value && (n = r);
+      i && i.properties != null && i.properties.value && (o = i);
     }
-    return n;
-  }
-  area(e) {
-    let s = 0;
-    const i = e.coordinates.length > 1 ? e.coordinates[0][0] : e.coordinates[0];
-    for (let o = 0; o < i.length - 1; o++)
-      s += i[o][0] * i[o + 1][1] - i[o + 1][0] * i[o][1];
-    return 0.5 * s;
-  }
-  centroid(e) {
-    const s = [0, 0], i = e.coordinates.length > 1 ? e.coordinates[0][0] : e.coordinates[0];
-    for (let t = 0; t < i.length - 1; t++)
-      s[0] += (i[t][0] + i[t + 1][0]) * (i[t][0] * i[t + 1][1] - i[t + 1][0] * i[t][1]), s[1] += (i[t][1] + i[t + 1][1]) * (i[t][0] * i[t + 1][1] - i[t + 1][0] * i[t][1]);
-    const o = this.area(e);
-    return s[0] /= o * 6, s[1] /= o * 6, s;
-  }
-  d3Map(e, s) {
-    let { zoomEnabled: i, mapContainerBgColor: o, mapPosition: t, editing: a, mapType: n } = this.props;
-    i || (i = !!["mobile", "tablet"].includes(T()));
-    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 = 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(
-      this.zoom.transform,
-      g.zoomIdentity.translate(t.x, t.y).scale(t.k)
-    ), n === "POINTS_MAP")) {
-      const v = {
+    return o;
+  }
+  function Jt() {
+    return yr(se);
+  }
+  function Xt(e, t) {
+    let o = se;
+    o || (o = ["mobile", "tablet"].includes(N()));
+    const n = Z(), i = c.select(g());
+    let l = i.select("svg"), r = ge();
+    r === 0 ? r = window.innerWidth + tt[N()] : r += tt[N()];
+    const a = he() - 100;
+    if (l.empty() ? l = i.append("svg") : l.selectAll("*").remove(), l.attr("style", `background-color:${bt};`).attr("viewBox", `0 0 ${r} ${a}`).attr("preserveAspectRatio", "xMidYMid meet"), l.append("g").selectAll("path").data(e).enter().append("path").attr("fill", (d) => ve(d, n)).attr("d", c.geoPath().projection(v.current)).attr("class", () => Jt()).on("mouseover", H !== "POINTS_MAP" ? V : null).on("mousemove", H !== "POINTS_MAP" ? Y : null).on("mouseout", H !== "POINTS_MAP" ? G : null), E.current && l.transition().duration(300).call(
+      A.current.transform,
+      c.zoomIdentity.translate(E.current.x, E.current.y).scale(E.current.k)
+    ), !E.current && h && h.x && h.y && h.k && (l.transition().duration(300).call(
+      A.current.transform,
+      c.zoomIdentity.translate(h.x, h.y).scale(h.k)
+    ), H === "POINTS_MAP")) {
+      const f = {
         mobile: 100,
         tablet: 0,
         midTablet: 0,
         desktop: 0,
         laptop: 0,
         wide: 0
-      }[T()];
-      h.transition().duration(300).call(
-        this.zoom.transform,
-        g.zoomIdentity.translate(t.x + v, t.y).scale(t.k)
+      }[N()];
+      l.transition().duration(300).call(
+        A.current.transform,
+        c.zoomIdentity.translate(h.x + f, h.y).scale(h.k)
       );
     }
-    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 = [
-        (m[0][0] + m[1][0]) / 2,
-        (m[0][1] + m[1][1]) / 2
+    o || j ? l.call(A.current) : l.on("dblclick.zoom", null);
+    const s = Gt(e, t);
+    if (s) {
+      const d = U.current.bounds(s), f = [
+        (d[0][0] + d[1][0]) / 2,
+        (d[0][1] + d[1][1]) / 2
       ];
-      h.transition().duration(750).call(
-        this.zoom.transform,
-        g.zoomIdentity.translate(p / 2, d / 2).scale(12).translate(-v[0], -v[1])
+      l.transition().duration(750).call(
+        A.current.transform,
+        c.zoomIdentity.translate(r / 2, a / 2).scale(12).translate(-f[0], -f[1])
       );
     }
   }
-  getAvg() {
-    const { transformedData: e } = this.props;
-    return e.nationalData.value;
-  }
-  selectedMeasureChanged(e) {
-    this.state.selectedMeasure != e && this.setState({ selectedMeasure: e });
+  function Zt() {
+    return u.nationalData.value;
   }
-  getFilters() {
-    const { appliedFilters: e } = this.props, s = {};
-    return e && Object.keys(e).forEach((o) => {
-      const t = e[o];
-      t && (s[o] = Array.isArray(t) ? t.join(" ,") : t);
-    }), s;
+  function Yt(e) {
+    R != e && kt(e);
   }
-  getHighlightedLocationData() {
-    const { highlightedLocation: e, transformedData: s } = this.props;
-    let i = s.locationsData;
-    return s.measures && s.measures.length > 1 && (i = s.locationsData.filter(
-      (t) => t.measure === this.getSelectedMeasure()
-    )), i.find(
-      (t) => t.label === e
-    );
+  function qt() {
+    let e = u.locationsData;
+    return u.measures && u.measures.length > 1 && (e = u.locationsData.filter(
+      (t) => t.measure === z()
+    )), e.find((t) => t.label === C);
   }
-  getTranslatedHighlightedLocationName() {
-    const { highlightedLocation: e, mapLabelField: s, intl: i } = this.props;
-    if (!e)
+  function Kt() {
+    if (!C)
       return null;
-    const t = this.getFeatures().find(
-      (a) => a.properties[s] === e
+    const t = X().find(
+      (o) => o.properties[x] === C
     );
     if (t && t.properties.displayLayerLabels && t.properties.layerLocale) {
-      const a = t.properties.layerMappingField || s, n = t.properties[a];
-      return O(this.metadataTypes, n, t.properties.layerLocale);
+      const o = t.properties.layerMappingField || x, n = t.properties[o];
+      return fr(
+        J,
+        n,
+        t.properties.layerLocale
+      );
     }
-    return e;
+    return C;
   }
-  getHighlightedLocationColor(e) {
-    const s = this.getBreaks(), { mapNoDataColor: i } = this.props, o = e ? e.value : null;
-    if (o != null) {
-      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;
-    }
-    return i;
+  function Qt(e) {
+    return mr(e, Z(), We);
   }
-  renderLoader() {
-    return /* @__PURE__ */ b(U, { className: "loading", children: /* @__PURE__ */ b(
-      Q,
-      {
-        basic: !0,
-        padded: !0,
-        textAlign: "center",
-        style: { margin: "30px" },
-        children: /* @__PURE__ */ b(ee, { active: !0, inverted: !0, children: /* @__PURE__ */ b(te, { size: "medium" }) })
-      }
-    ) });
+  function er() {
+    return /* @__PURE__ */ p(Qe, { className: "loading", children: /* @__PURE__ */ p(sr, { basic: !0, padded: !0, textAlign: "center", style: { margin: "30px" }, children: /* @__PURE__ */ p(ir, { active: !0, inverted: !0, children: /* @__PURE__ */ p(cr, { size: "medium" }) }) }) });
   }
-  noMapSelected() {
-    return /* @__PURE__ */ M(N, { icon: !0, warning: !0, children: [
-      /* @__PURE__ */ b(E, { name: "map outline" }),
-      /* @__PURE__ */ M(N.Content, { children: [
-        /* @__PURE__ */ b(N.Header, { children: "No map selected" }),
+  function tr() {
+    return /* @__PURE__ */ b(xe, { icon: !0, warning: !0, children: [
+      /* @__PURE__ */ p(te, { name: "map outline" }),
+      /* @__PURE__ */ b(xe.Content, { children: [
+        /* @__PURE__ */ p(xe.Header, { children: "No map selected" }),
         "Pick one from the list in the ",
-        /* @__PURE__ */ b("strong", { children: "Map Layers" }),
+        /* @__PURE__ */ p("strong", { children: "Map Layers" }),
         " section."
       ] })
     ] });
   }
-  render() {
-    let {
-      app: e,
-      legendTitle: s,
-      nationalAverageLabel: i,
-      intl: o,
-      zoomEnabled: t,
-      transformedData: a,
-      measureSelectorLabel: n,
-      valueFormat: l,
-      showOverallValue: r,
-      unique: h,
-      highlightedLocation: p,
-      labelFontColor: d,
-      legendFontSize: u,
-      editing: m,
-      highlightedLocLabelFormat: v,
-      noDataText: c
-    } = this.props;
-    t || (t = !!["mobile", "tablet", "midTablet"].includes(
-      T()
-    ));
-    const f = this.getAvg(), y = this.getFilters(), I = this.getHighlightedLocationData(), A = {
-      backgroundColor: this.getHighlightedLocationColor(I),
-      color: d,
-      fontSize: u + "px"
+  M.current.zoomed = Dt, M.current.zoomEnd = Pt, M.current.getFeatures = X, M.current.updateFeatures = Xe, M.current.getMapId = g, fe.current || (fe.current = () => {
+    let e = null;
+    clearTimeout(e), e = setTimeout(() => {
+      c.select(M.current.getMapId()).selectAll(".map-labels-container").size() > 0 || M.current.updateFeatures(M.current.getFeatures(), !1);
+    }, 300);
+  }), et(() => {
+    const e = fe.current;
+    return window.addEventListener("scroll", e, { passive: !0 }), window.addEventListener("touchmove", e, { passive: !0 }), Ge(), w.current = c.select("body").append("div").style("position", "absolute").style("visibility", "hidden").style("pointer-events", "none"), () => {
+      var t;
+      window.removeEventListener("scroll", e), window.removeEventListener("touchmove", e), (t = w.current) == null || t.remove();
     };
-    m && (A.marginTop = "25px");
-    const L = () => /* @__PURE__ */ M(U, { fluid: !0, className: "footnote ", children: [
-      /* @__PURE__ */ M(S, { columns: 2, 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,
-            { value: f },
-            o
-          ) })
-        ] }) }),
-        /* @__PURE__ */ b(
-          S.Column,
-          {
-            textAlign: "right",
-            width: e !== "csv" && r ? 12 : 16,
-            children: /* @__PURE__ */ b(
-              oe,
-              {
-                filteredBreaks: this.getBreaks(),
-                formattedLegendTitle: k(
-                  s,
-                  { ...y },
-                  o
-                ),
-                selectedMeasure: this.state.selectedMeasure,
-                ...this.props
-              }
-            )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ b("div", { className: "measure-selector", children: /* @__PURE__ */ M("ul", { children: [
-        n && /* @__PURE__ */ b("li", { children: /* @__PURE__ */ b("span", { className: "label", children: n }) }),
-        a && a.measures && a.measures.length > 1 && a.measures.map((x) => /* @__PURE__ */ M("li", { onClick: this.selectedMeasureChanged.bind(this, x), children: [
-          /* @__PURE__ */ b(
-            "input",
+  }, []), et(() => {
+    if (!$e.current) {
+      $e.current = !0, de.current = O, me.current = { selectedMeasure: R, layers: B, selectedPolygon: $ };
+      return;
+    }
+    const e = de.current, t = me.current;
+    if (P) {
+      const i = [], l = [], r = e.appliedFilters;
+      r && Object.keys(r).forEach((a) => {
+        r[a] != null && r[a] instanceof Array && i.push(
+          ...r[a].filter((s) => s != Number.MIN_SAFE_INTEGER)
+        );
+      }), m && Object.keys(m).forEach((a) => {
+        m[a] != null && m[a] instanceof Array && l.push(
+          ...m[a].filter((s) => s != Number.MIN_SAFE_INTEGER)
+        );
+      }), i.length > 0 && l.length == 0 && Je();
+    }
+    w.current.style("visibility", "hidden"), e.enabledLayers.length != D.length && Ge();
+    const o = X();
+    e.center !== le && (E.current = null, v.current.scale(ke).center(le).translate([ge() / 2, he() / 2]));
+    const n = Vt(e);
+    Xt(o, n), B && u && (u != e.transformedData || B != t.layers || R != t.selectedMeasure || $ != t.selectedPolygon || e.mainLayerId !== W || JSON.stringify(e.enabledLayers) != JSON.stringify(D)) && Xe(X(), n), de.current = O, me.current = { selectedMeasure: R, layers: B, selectedPolygon: $ };
+  });
+  let be = se;
+  be || (be = !!["mobile", "tablet", "midTablet"].includes(
+    N()
+  ));
+  const rr = Zt(), lr = we(m), q = qt(), Ye = {
+    backgroundColor: Qt(q),
+    color: Oe,
+    fontSize: dt + "px"
+  };
+  j && (Ye.marginTop = "25px");
+  const qe = () => /* @__PURE__ */ b(Qe, { fluid: !0, className: "footnote ", children: [
+    /* @__PURE__ */ b(Fe, { columns: 2, children: [
+      O.app !== "csv" && ze && /* @__PURE__ */ p(Fe.Column, { textAlign: "left", width: 4, children: /* @__PURE__ */ b("div", { className: "national-average-div", children: [
+        /* @__PURE__ */ p("span", { className: "national-avg-label", children: Tt }),
+        /* @__PURE__ */ p("span", { className: "national-avg-value", children: k(Ce, { value: rr }, F) })
+      ] }) }),
+      /* @__PURE__ */ p(
+        Fe.Column,
+        {
+          textAlign: "right",
+          width: O.app !== "csv" && ze ? 12 : 16,
+          children: /* @__PURE__ */ p(
+            ur,
             {
-              checked: this.getSelectedMeasure() === x,
-              type: "radio",
-              value: x
+              filteredBreaks: Z(),
+              formattedLegendTitle: k(Mt, { ...lr }, F),
+              selectedMeasure: R,
+              ...O
             }
-          ),
-          /* @__PURE__ */ b("label", { children: a.measureLabelMap[x] || x })
-        ] }))
-      ] }) })
-    ] });
-    return /* @__PURE__ */ M("div", { className: "map component wp-data-viz-map", ref: this.mapContainer, children: [
-      this.state.layersLoading && (m ? this.noMapSelected() : this.renderLoader()),
-      !this.state.layersLoading && /* @__PURE__ */ M(R, { children: [
-        !$ && /* @__PURE__ */ b(L, {}),
-        /* @__PURE__ */ M(
-          "div",
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ p("div", { className: "measure-selector", children: /* @__PURE__ */ b("ul", { children: [
+      Ie && /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p("span", { className: "label", children: Ie }) }),
+      u && u.measures && u.measures.length > 1 && u.measures.map((e) => /* @__PURE__ */ b("li", { onClick: () => Yt(e), children: [
+        /* @__PURE__ */ p(
+          "input",
           {
-            className: "map wrapper scaling-svg-container " + h,
-            style: {
-              height: this.props.height - ce[T()] + "px"
-            },
-            children: [
-              I ? /* @__PURE__ */ b(
-                "div",
-                {
-                  className: "highlighted-loc-info",
-                  style: A,
-                  children: /* @__PURE__ */ M("span", { children: [
-                    " ",
-                    k(
-                      v,
-                      {
-                        value: I.value,
-                        locationName: this.getTranslatedHighlightedLocationName() || I.label,
-                        measureName: I.measure
-                      },
-                      o
-                    )
-                  ] })
-                }
-              ) : /* @__PURE__ */ b(R, { children: " " }),
-              (m || t) && !de && /* @__PURE__ */ M("div", { className: "control panel ignore", children: [
-                /* @__PURE__ */ b("div", { className: "zoom plus", onClick: this.onZoomIn, children: /* @__PURE__ */ b(E, { name: "plus", size: "large" }) }),
-                /* @__PURE__ */ b("div", { className: "zoom minus", onClick: this.onZoomOut, children: /* @__PURE__ */ b(E, { name: "minus", size: "large" }) }),
-                /* @__PURE__ */ b(
-                  se,
-                  {
-                    content: /* @__PURE__ */ b(
-                      K,
-                      {
-                        id: "map.reset.tooltip",
-                        defaultMessage: "Reset zoom"
-                      }
-                    ),
-                    trigger: /* @__PURE__ */ b("div", { className: "reset", onClick: this.onReset, children: /* @__PURE__ */ b(E, { name: "repeat", size: "large" }) })
-                  }
-                )
-              ] })
-            ]
+            checked: z() === e,
+            type: "radio",
+            value: e,
+            readOnly: !0
           }
         ),
-        $ && /* @__PURE__ */ b(L, {})
-      ] })
-    ] });
-  }
+        /* @__PURE__ */ p("label", { children: u.measureLabelMap[e] || e })
+      ] }, e))
+    ] }) })
+  ] });
+  return /* @__PURE__ */ b("div", { className: "map component wp-data-viz-map", ref: pe, children: [
+    je && (j ? tr() : er()),
+    !je && /* @__PURE__ */ b(Ke, { children: [
+      !at && /* @__PURE__ */ p(qe, {}),
+      /* @__PURE__ */ b(
+        "div",
+        {
+          className: "map wrapper scaling-svg-container " + Me,
+          style: { height: Ne - dr[N()] + "px" },
+          children: [
+            q ? /* @__PURE__ */ p("div", { className: "highlighted-loc-info", style: Ye, children: /* @__PURE__ */ b("span", { children: [
+              " ",
+              k(
+                Ft,
+                {
+                  value: q.value,
+                  locationName: Kt() || q.label,
+                  measureName: q.measure
+                },
+                F
+              )
+            ] }) }) : /* @__PURE__ */ p(Ke, { children: " " }),
+            (j || be) && !wr && /* @__PURE__ */ b("div", { className: "control panel ignore", children: [
+              /* @__PURE__ */ p("div", { className: "zoom plus", onClick: Ot, children: /* @__PURE__ */ p(te, { name: "plus", size: "large" }) }),
+              /* @__PURE__ */ p("div", { className: "zoom minus", onClick: Wt, children: /* @__PURE__ */ p(te, { name: "minus", size: "large" }) }),
+              /* @__PURE__ */ p(
+                or,
+                {
+                  content: /* @__PURE__ */ p(ar, { id: "map.reset.tooltip", defaultMessage: "Reset zoom" }),
+                  trigger: /* @__PURE__ */ p("div", { className: "reset", onClick: Je, children: /* @__PURE__ */ p(te, { name: "repeat", size: "large" }) })
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      at && /* @__PURE__ */ p(qe, {})
+    ] })
+  ] });
 }
-const Te = Y(ue);
+const Sr = nr(Ar);
 export {
-  Te as default,
-  O as getTranslatedItemLabel
+  Sr as default,
+  fr as getTranslatedItemLabel
 };