@devgateway/dvz-ui-react 1.1.0 → 1.2.0

package/dist/esm/embeddable/d3Map/DataLayer.js

@@ -7,48 +7,49 @@ import * as M from "d3";
 import { injectIntl as dt } from "react-intl";
 import Y from "./BreaksStyles.js";
 import ot from "./GradientColors.js";
-const W = (D) => D ? D.toString().replace(/ /g, "_") : "", C = (D) => D ? "pattern_" + W(D) : "";
+const W = (D) => D ? D.toString().replace(/ /g, "_") : "", k = (D) => D ? "pattern_" + W(D) : "";
 class ht extends pt {
   constructor() {
     super(), this.state = { geoJson: null, json: null }, this.getTooltipVariables = this.getTooltipVariables.bind(this), this.resize = this.resize.bind(this), this.createLayer = this.createLayer.bind(this), this.createCentroids = this.createCentroids.bind(this), this.createPatterns = this.createPatterns.bind(this), this.createPaths = this.createPaths.bind(this);
   }
   createLayer(e) {
-    const p = this.joinData(e, this.props.app, this.props.featureJoinAttribute, this.props.data, this.props.measures, this.props.patternDiscriminator);
-    this.createDataLayer(p);
+    const l = this.joinData(e, this.props.app, this.props.featureJoinAttribute, this.props.data, this.props.measures, this.props.patternDiscriminator);
+    this.createDataLayer(l), this.props.onReady && this.props.onReady();
   }
   resize() {
     const {
       markerLabelSize: e,
-      markFillColor: p,
-      markBorderColor: v,
+      markFillColor: l,
+      markBorderColor: C,
       markSizeScale: i,
       measures: u,
       data: h,
       breaks: c,
-      gradientScheme: F,
-      gradientReverse: l
-    } = this.props, d = new Y({
+      gradientScheme: x,
+      gradientReverse: o,
+      labelFontSize: f
+    } = this.props, n = this.props.transform ? this.props.transform.k : 1;
+    super.resize();
+    const d = new Y({
       breaks: c,
-      defaultFillColor: p,
-      defaultBorderColor: v,
+      defaultFillColor: l,
+      defaultBorderColor: C,
       defaultSize: i
     });
     new ot({
       data: h.children,
       measure: u[0],
-      defaultFillColor: p,
-      gradientScheme: F,
-      gradientReverse: l
-    });
-    const s = this.props.transform ? this.props.transform.k : 1;
-    this.g.selectAll(".centroids .point").attr("r", (n) => d.getSize(n.properties._value) * 1 / s), this.g.selectAll(".centroids .point-label").attr("font-size", (n) => e * (1 / s) + "px");
+      defaultFillColor: l,
+      gradientScheme: x,
+      gradientReverse: o
+    }), this.g.selectAll(".centroids .point").attr("r", (p) => d.getSize(p.properties._value) * 1 / n), this.g.selectAll(".point-label").attr("font-size", (p) => e * (1 / n) + "px");
   }
   getTooltipVariables(e) {
-    const { apiJoinAttribute: p } = this.props;
+    const { apiJoinAttribute: l } = this.props;
     return e.properties._value ? {
       ...e.properties,
       meta: {
-        [p]: e.properties.meta ? e.properties.meta.value : "",
+        [l]: e.properties.meta ? e.properties.meta.value : "",
         ...e.properties.meta,
         value: e.properties._value
       }
@@ -56,22 +57,22 @@ class ht extends pt {
   }
   createDataLayer(e) {
     const {
-      app: p,
-      svg: v,
+      app: l,
+      svg: C,
       format: i,
       id: u,
       file: h,
       path: c,
-      onLayerCreated: F,
-      labelFilter: l = [],
-      labelField: d,
-      labelFontSize: s,
-      labelColor: n,
-      fillColor: L,
-      borderColor: f,
-      tooltip: x,
-      markFillColor: g,
-      markLabelColor: P,
+      onLayerCreated: x,
+      labelFilter: o = [],
+      labelField: f,
+      labelFontSize: n,
+      labelColor: d,
+      fillColor: p,
+      borderColor: m,
+      tooltip: z,
+      markFillColor: b,
+      markLabelColor: T,
       markBorderColor: J,
       markSizeScale: N,
       markerLabelSize: H,
@@ -79,13 +80,13 @@ class ht extends pt {
       apiJoinAttribute: K,
       measures: I,
       editing: et,
-      data: z,
-      patternDiscriminator: k,
+      data: w,
+      patternDiscriminator: S,
       patternDiscriminatorLabel: Q,
       breaks: $,
       gradientScheme: G,
       gradientReverse: E,
-      patterns: w,
+      patterns: L,
       projection: rt,
       useBreaks: X,
       useGradients: V,
@@ -93,36 +94,35 @@ class ht extends pt {
       usePattern: j,
       waitForFilters: at,
       intl: q,
-      patternsVisible: B = !0,
-      togglePatterns: R,
+      patternsVisible: R = !0,
+      togglePatterns: B,
       colorLayerVisible: O = !0,
       visible: it
     } = this.props;
     if (this.gRef && this.gRef.current) {
-      debugger;
-      this.g = M.select(this.gRef.current.parentNode), this.g.attr("class", "base-layer");
-      const S = e.features.filter((A) => A.properties._value != null);
-      this.createPaths(e), U || this.createColors(S), j && this.createPatterns(e), d != "none" && this.createLabels(e), U && this.createCentroids(S);
+      this.g = M.select(this.gRef.current), this.g.attr("class", "base-layer");
+      const F = e.features.filter((A) => A.properties._value != null);
+      this.createPaths(e), U || this.createColors(F), j && this.createPatterns(e), f != "none" && this.createLabels(e), U && this.createCentroids(F);
     }
   }
   createColors(e) {
     const {
-      app: p,
-      svg: v,
+      app: l,
+      svg: C,
       format: i,
       id: u,
       file: h,
       path: c,
-      onLayerCreated: F,
-      labelFilter: l = [],
-      labelField: d,
-      labelFontSize: s,
-      labelColor: n,
-      fillColor: L,
-      borderColor: f,
-      tooltip: x,
-      markFillColor: g,
-      markLabelColor: P,
+      onLayerCreated: x,
+      labelFilter: o = [],
+      labelField: f,
+      labelFontSize: n,
+      labelColor: d,
+      fillColor: p,
+      borderColor: m,
+      tooltip: z,
+      markFillColor: b,
+      markLabelColor: T,
       markBorderColor: J,
       markSizeScale: N,
       markerLabelSize: H,
@@ -130,13 +130,13 @@ class ht extends pt {
       apiJoinAttribute: K,
       measures: I,
       editing: et,
-      data: z,
-      patternDiscriminator: k,
+      data: w,
+      patternDiscriminator: S,
       patternDiscriminatorLabel: Q,
       breaks: $,
       gradientScheme: G,
       gradientReverse: E,
-      patterns: w,
+      patterns: L,
       projection: rt,
       useBreaks: X,
       useGradients: V,
@@ -144,51 +144,48 @@ class ht extends pt {
       usePattern: j,
       waitForFilters: at,
       intl: q,
-      patternsVisible: B = !0,
-      togglePatterns: R,
+      patternsVisible: R = !0,
+      togglePatterns: B,
       colorLayerVisible: O = !0,
       visible: it
-    } = this.props, S = new Y({
+    } = this.props, F = new Y({
       breaks: $,
-      defaultFillColor: g,
+      defaultFillColor: b,
       defaultBorderColor: J,
       defaultSize: N
     }), A = new ot({
-      data: z.children,
+      data: w.children,
       measure: I[0],
-      defaultFillColor: g,
+      defaultFillColor: b,
       gradientScheme: G,
       gradientReverse: E
     });
-    if (this.g) {
-      debugger;
-      this.g.selectAll("path").attr("fill", (o) => !o || !o.properties || !o.properties._value ? L : V ? A.getColor(o.properties._value) : S.getColor(o.properties._value)).attr("stroke", f).attr("id", "state-borders").attr("d", c).on("mouseenter", (o, b) => {
-        b.properties._value && this.showToolTip(x, this.getTooltipVariables(b), V ? A.getColor(b.properties._value) : S.getColor(b.properties._value), b);
-      }).on("mouseleave", (o) => {
-        this.hiddenToolTip(o);
-      }).on("mousemove", (o) => {
-        this.moveToolTip(o);
-      }), O || this.g.selectAll(".borders").style("fill", this.props.fillColor), this.g.attr("transform", this.props.transform);
-    }
+    this.g && (this.g.selectAll("path").attr("fill", (s) => !s || !s.properties || !s.properties._value ? p : V ? A.getColor(s.properties._value) : F.getColor(s.properties._value)).attr("stroke", m).attr("id", "state-borders").attr("d", c).on("mouseenter", (s, y) => {
+      y.properties._value && this.showToolTip(z, this.getTooltipVariables(y), V ? A.getColor(y.properties._value) : F.getColor(y.properties._value), y);
+    }).on("mouseleave", (s) => {
+      this.hiddenToolTip(s);
+    }).on("mousemove", (s) => {
+      this.moveToolTip(s);
+    }), O || this.g.selectAll(".borders").style("fill", this.props.fillColor), this.g.attr("transform", this.props.transform));
   }
   createCentroids(e) {
     const {
-      app: p,
-      svg: v,
+      app: l,
+      svg: C,
       format: i,
       id: u,
       file: h,
       path: c,
-      onLayerCreated: F,
-      labelFilter: l = [],
-      labelField: d,
-      labelFontSize: s,
-      labelColor: n,
-      fillColor: L,
-      borderColor: f,
-      tooltip: x,
-      markFillColor: g,
-      markLabelColor: P,
+      onLayerCreated: x,
+      labelFilter: o = [],
+      labelField: f,
+      labelFontSize: n,
+      labelColor: d,
+      fillColor: p,
+      borderColor: m,
+      tooltip: z,
+      markFillColor: b,
+      markLabelColor: T,
       markBorderColor: J,
       markSizeScale: N,
       markerLabelSize: H,
@@ -196,13 +193,13 @@ class ht extends pt {
       apiJoinAttribute: K,
       measures: I,
       editing: et,
-      data: z,
-      patternDiscriminator: k,
+      data: w,
+      patternDiscriminator: S,
       patternDiscriminatorLabel: Q,
       breaks: $,
       gradientScheme: G,
       gradientReverse: E,
-      patterns: w,
+      patterns: L,
       projection: rt,
       useBreaks: X,
       useGradients: V,
@@ -210,35 +207,35 @@ class ht extends pt {
       usePattern: j,
       waitForFilters: at,
       intl: q,
-      patternsVisible: B = !0,
-      togglePatterns: R,
+      patternsVisible: R = !0,
+      togglePatterns: B,
       colorLayerVisible: O = !0,
       visible: it
-    } = this.props, S = new Y({
+    } = this.props, F = new Y({
       breaks: $,
-      defaultFillColor: g,
+      defaultFillColor: b,
       defaultBorderColor: J,
       defaultSize: N
     }), A = new ot({
-      data: z.children,
+      data: w.children,
       measure: I[0],
-      defaultFillColor: g,
+      defaultFillColor: b,
       gradientScheme: G,
       gradientReverse: E
     });
     if (this.g) {
-      const o = {
+      const s = {
         style: i.style === "compacted" ? "decimal" : i.style,
         notation: i.style === "compacted" ? "compact" : "standard",
         currency: i.currency,
         minimumFractionDigits: parseInt(i.minimumFractionDigits),
         maximumFractionDigits: parseInt(i.maximumFractionDigits)
-      }, b = this.props.transform ? this.props.transform.k : 1;
+      }, y = this.props.transform ? this.props.transform.k : 1;
       this.g.selectAll(".centroids").remove();
-      const m = this.g.selectAll("centroids").data(e).enter().append("g").attr("class", "centroids");
-      m.append("circle").attr("fill", (a) => V ? A.getColor(a.properties._value) : S.getColor(a.properties._value, !0)).attr("stroke", J).attr("class", "point").attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", (a) => c.centroid(a)[0]).attr("cy", (a) => c.centroid(a)[1]).attr("r", (a) => S.getSize(a.properties._value) * 1 / b).on("mouseenter", (a, t) => {
+      const g = this.g.selectAll("centroids").data(e).enter().append("g").attr("class", "centroids");
+      g.append("circle").attr("fill", (a) => V ? A.getColor(a.properties._value) : F.getColor(a.properties._value, !0)).attr("stroke", J).attr("class", "point").attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", (a) => c.centroid(a)[0]).attr("cy", (a) => c.centroid(a)[1]).attr("r", (a) => F.getSize(a.properties._value) * 1 / y).on("mouseenter", (a, t) => {
         if (t.properties._value) {
-          const y = {
+          const v = {
             ...t.properties,
             meta: {
               [K]: t.properties.meta ? t.properties.meta.value : "",
@@ -246,32 +243,32 @@ class ht extends pt {
               value: t.properties._value
             }
           };
-          this.showToolTip(x, y, V ? A.getColor(t.properties._value) : S.getColor(t.properties._value));
+          this.showToolTip(z, v, V ? A.getColor(t.properties._value) : F.getColor(t.properties._value));
         }
       }).on("mouseleave", (a) => {
         this.hiddenToolTip();
-      }), m.append("text").attr("class", "point-label").attr("x", (a) => c.centroid(a)[0]).attr("y", (a) => c.centroid(a)[1]).attr("font-size", (a) => H * (1 / b) + "px").attr("text-anchor", "middle").attr("dominant-baseline", "middle").style("pointer-events", "none").attr("fill", P).text((a) => q.formatNumber(i.style === "percent" ? a.properties._value / 100 : a.properties._value, o)).on("mouseover", (a) => {
+      }), g.append("text").attr("class", "point-label").attr("x", (a) => c.centroid(a)[0]).attr("y", (a) => c.centroid(a)[1]).attr("font-size", (a) => H * (1 / y) + "px").attr("text-anchor", "middle").attr("dominant-baseline", "middle").style("pointer-events", "none").attr("fill", T).text((a) => q.formatNumber(i.style === "percent" ? a.properties._value / 100 : a.properties._value, s)).on("mouseover", (a) => {
       }), O || this.g.selectAll(".centroids").style("display", "none");
     }
   }
   createPatterns(e) {
     const {
-      app: p,
-      svg: v,
+      app: l,
+      svg: C,
       format: i,
       id: u,
       file: h,
       path: c,
-      onLayerCreated: F,
-      labelFilter: l = [],
-      labelField: d,
-      labelFontSize: s,
-      labelColor: n,
-      fillColor: L,
-      borderColor: f,
-      tooltip: x,
-      markFillColor: g,
-      markLabelColor: P,
+      onLayerCreated: x,
+      labelFilter: o = [],
+      labelField: f,
+      labelFontSize: n,
+      labelColor: d,
+      fillColor: p,
+      borderColor: m,
+      tooltip: z,
+      markFillColor: b,
+      markLabelColor: T,
       markBorderColor: J,
       markSizeScale: N,
       markerLabelSize: H,
@@ -279,13 +276,13 @@ class ht extends pt {
       apiJoinAttribute: K,
       measures: I,
       editing: et,
-      data: z,
-      patternDiscriminator: k,
+      data: w,
+      patternDiscriminator: S,
       patternDiscriminatorLabel: Q,
       breaks: $,
       gradientScheme: G,
       gradientReverse: E,
-      patterns: w,
+      patterns: L,
       projection: rt,
       useBreaks: X,
       useGradients: V,
@@ -293,49 +290,49 @@ class ht extends pt {
       usePattern: j,
       waitForFilters: at,
       intl: q,
-      patternsVisible: B = !0,
-      togglePatterns: R,
+      patternsVisible: R = !0,
+      togglePatterns: B,
       colorLayerVisible: O = !0,
       visible: it
-    } = this.props, S = new Y({
+    } = this.props, F = new Y({
       breaks: $,
-      defaultFillColor: g,
+      defaultFillColor: b,
       defaultBorderColor: J,
       defaultSize: N
-    }), A = this.props.transform ? this.props.transform.k : 1, o = 10 * 1 / A, b = 10 * 1 / A;
-    let m = [];
-    if (p == "csv" && k != "none")
-      m = [...new Set(z.data.map((t) => t[k]))].map((t) => ({
+    }), A = this.props.transform ? this.props.transform.k : 1, s = 10 * 1 / A, y = 10 * 1 / A;
+    let g = [];
+    if (l == "csv" && S != "none")
+      g = [...new Set(w.data.map((t) => t[S]))].map((t) => ({
         key: t,
-        type: w[t + "_symbol"],
-        color: w[t + "_color"],
-        rotation: w[t + "_rotation"]
+        type: L[t + "_symbol"],
+        color: L[t + "_color"],
+        rotation: L[t + "_rotation"]
       }));
-    else if (k != "none") {
-      const t = z.metadata ? z.metadata.types.filter((y) => y.dimension == k) : [];
-      m = t && t.length > 0 ? t[0].items.map((y) => {
-        const _ = y.value;
+    else if (S != "none") {
+      const t = w.metadata ? w.metadata.types.filter((v) => v.dimension == S) : [];
+      g = t && t.length > 0 ? t[0].items.map((v) => {
+        const _ = v.value;
         return {
           key: _,
-          type: w[_ + "_symbol"],
-          color: w[_ + "_color"],
-          rotation: w[_ + "_rotation"]
+          type: L[_ + "_symbol"],
+          color: L[_ + "_color"],
+          rotation: L[_ + "_rotation"]
         };
       }) : [];
     }
     this.g.selectAll("defs").remove();
     const a = this.g.append("defs");
-    if (a.selectAll("pattern").remove(), a.selectAll("pattern").data(m).enter().append("pattern").attr("id", (t) => C(t.key)).attr("patternUnits", "userSpaceOnUse").attr("width", o).attr("height", b).attr("x", 0).attr("y", 0).attr("patternTransform", (t) => `rotate(${t.rotation})`), m.forEach((t) => {
-      t.type === "lines" && a.select("#" + C(t.key)).append("rect").attr("x", 0.05).attr("width", o / 2).attr("height", b).attr("opacity", 1).attr("fill", t.color), t.type === "squares" && a.select("#" + C(t.key)).append("rect").attr("width", o / 2).attr("height", b / 2).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "dots" && a.select("#" + C(t.key)).append("circle").attr("cx", o / 2).attr("cy", b / 2).attr("r", o / 2.5).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "triangle" && a.select("#" + C(t.key)).append("polygon").attr("points", `${o / 2} 0, 0 ${o}, ${o}  ${o} `).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1);
-    }), m = m.filter((t) => t.type != null).sort((t, y) => new Intl.Collator(q.locale, { caseFirst: "upper", numeric: !0, sensitivity: "variant" }).compare(t.key, y.key)), j && e && e.features) {
-      this.g.selectAll(".shape-pattern").remove(), B && e.features.forEach((r) => {
-        let T = [];
-        r.properties && r.properties.meta && (T = p != "csv" ? r.properties.meta[k] ? r.properties.meta[k] : [] : [r.properties.meta[k]], T && T.length > 0 && T.forEach((lt) => {
+    if (a.selectAll("pattern").remove(), a.selectAll("pattern").data(g).enter().append("pattern").attr("id", (t) => k(t.key)).attr("patternUnits", "userSpaceOnUse").attr("width", s).attr("height", y).attr("x", 0).attr("y", 0).attr("patternTransform", (t) => `rotate(${t.rotation})`), g.forEach((t) => {
+      t.type === "lines" && a.select("#" + k(t.key)).append("rect").attr("x", 0.05).attr("width", s / 2).attr("height", y).attr("opacity", 1).attr("fill", t.color), t.type === "squares" && a.select("#" + k(t.key)).append("rect").attr("width", s / 2).attr("height", y / 2).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "dots" && a.select("#" + k(t.key)).append("circle").attr("cx", s / 2).attr("cy", y / 2).attr("r", s / 2.5).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "triangle" && a.select("#" + k(t.key)).append("polygon").attr("points", `${s / 2} 0, 0 ${s}, ${s}  ${s} `).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1);
+    }), g = g.filter((t) => t.type != null).sort((t, v) => new Intl.Collator(q.locale, { caseFirst: "upper", numeric: !0, sensitivity: "variant" }).compare(t.key, v.key)), j && e && e.features) {
+      this.g.selectAll(".shape-pattern").remove(), R && e.features.forEach((r) => {
+        let P = [];
+        r.properties && r.properties.meta && (P = l != "csv" ? r.properties.meta[S] ? r.properties.meta[S] : [] : [r.properties.meta[S]], P && P.length > 0 && P.forEach((lt) => {
           this.g.append("path").attr("d", c(r)).datum(lt).attr("class", "shape-pattern").attr("opacity", (st) => {
             if (X)
               return 0.7;
-          }).attr("fill", (st) => "transparent").attr("style", () => "none;fill:url(#" + C(lt) + ");").on("mouseenter", () => {
-            this.showToolTip(x, this.getTooltipVariables(r), V ? gradientColors.getColor(r.properties._value) : S.getColor(r.properties._value));
+          }).attr("fill", (st) => "transparent").attr("style", () => "none;fill:url(#" + k(lt) + ");").on("mouseenter", () => {
+            this.showToolTip(z, this.getTooltipVariables(r), V ? gradientColors.getColor(r.properties._value) : F.getColor(r.properties._value));
           }).on("mousemove", (st) => {
             this.moveToolTip();
           }).on("mouseleave", (st) => {
@@ -343,58 +340,53 @@ class ht extends pt {
           });
         }));
       }), M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(u)}`).select("svg").remove();
-      debugger;
       const t = M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(u)}`).append("svg");
-      t.attr("height", 30 + m.length * 23 + "px");
-      const y = t.append("svg").append("g"), _ = y.append("defs");
-      _.selectAll("pattern").remove(), B && (_.selectAll("pattern").data(m).enter().append("pattern").attr("id", (r) => "l_" + C(r.key)).attr("patternUnits", "userSpaceOnUse").attr("width", 5).attr("height", 5).attr("x", 0).attr("y", 0).attr("patternTransform", (r) => `rotate(${r.rotation ? r.rotation : 0})`), m.forEach((r) => {
-        r.type === "lines" && _.select("#l_" + C(r.key)).append("rect").attr("x", 0).attr("width", 1).attr("height", 10).attr("opacity", 0.75).attr("fill", r.color), r.type === "squares" && _.select("#l_" + C(r.key)).append("rect").attr("width", 3).attr("height", 3).attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1), r.type === "dots" && _.select("#l_" + C(r.key)).append("circle").attr("cx", 2).attr("cy", 2).attr("r", 2).attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1), r.type === "triangle" && _.select("#l_" + C(r.key)).append("polygon").attr("points", "5,0 8,8 0,5").attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1);
+      t.attr("height", 30 + g.length * 23 + "px");
+      const v = t.append("svg").append("g"), _ = v.append("defs");
+      _.selectAll("pattern").remove(), R && (_.selectAll("pattern").data(g).enter().append("pattern").attr("id", (r) => "l_" + k(r.key)).attr("patternUnits", "userSpaceOnUse").attr("width", 5).attr("height", 5).attr("x", 0).attr("y", 0).attr("patternTransform", (r) => `rotate(${r.rotation ? r.rotation : 0})`), g.forEach((r) => {
+        r.type === "lines" && _.select("#l_" + k(r.key)).append("rect").attr("x", 0).attr("width", 1).attr("height", 10).attr("opacity", 0.75).attr("fill", r.color), r.type === "squares" && _.select("#l_" + k(r.key)).append("rect").attr("width", 3).attr("height", 3).attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1), r.type === "dots" && _.select("#l_" + k(r.key)).append("circle").attr("cx", 2).attr("cy", 2).attr("r", 2).attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1), r.type === "triangle" && _.select("#l_" + k(r.key)).append("polygon").attr("points", "5,0 8,8 0,5").attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1);
       }));
-      let nt = B ? "☑ " : "☐ ";
-      y.append("text").attr("class", "patterns-checkbox").attr("x", 10).attr("y", 20).text((r) => nt).attr("font-size", "22px").on("click", () => {
-        R && R(u);
-      }), y.append("text").attr("class", "patterns-title").attr("x", 25).attr("y", 7).text((r) => p === "csv" ? k : Q).on("click", () => {
-        R && R(u);
-      }), B && (y.selectAll(".legend-squares").data(m).enter().append("rect").attr("width", 15).attr("height", 15).attr("y", (r, T) => T * 22 + 30).attr("x", 15).attr("stroke", f).attr("style", (r) => "none;fill:url(#l_" + C(r.key) + ");"), y.selectAll(".patterns-labels").data(m).enter().append("text").attr("class", "patterns-labels").attr("y", (r, T) => T * 22 + 30).attr("x", 32).text((r) => r.key));
+      let nt = R ? "☑ " : "☐ ";
+      v.append("text").attr("class", "patterns-checkbox").attr("x", 10).attr("y", 20).text((r) => nt).attr("font-size", "22px").on("click", () => {
+        B && B(u);
+      }), v.append("text").attr("class", "patterns-title").attr("x", 25).attr("y", 7).text((r) => l === "csv" ? S : Q).on("click", () => {
+        B && B(u);
+      }), R && (v.selectAll(".legend-squares").data(g).enter().append("rect").attr("width", 15).attr("height", 15).attr("y", (r, P) => P * 22 + 30).attr("x", 15).attr("stroke", m).attr("style", (r) => "none;fill:url(#l_" + k(r.key) + ");"), v.selectAll(".patterns-labels").data(g).enter().append("text").attr("class", "patterns-labels").attr("y", (r, P) => P * 22 + 30).attr("x", 32).text((r) => r.key));
     }
   }
-  joinData(e, p, v, i, u, h) {
-    const c = e.features.map((l) => {
-      const d = l.properties[v];
-      if (p != "csv" && i && i.children) {
-        const s = i.children.filter((n) => n.value == d);
-        if (s.length > 0) {
-          const n = s[0][u[0]];
-          if (l.properties.meta = s[0], l.properties._value = n, h && h != "none") {
-            const L = s[0] && s[0].children ? s[0].children.filter((f) => f.type == h).map((f) => f.value) : [];
-            l.properties.meta[h] = L;
+  joinData(e, l, C, i, u, h) {
+    const c = e.features.map((o) => {
+      const f = o.properties[C];
+      if (l != "csv" && i && i.children) {
+        const n = i.children.filter((d) => d.value == f);
+        if (n.length > 0) {
+          const d = n[0][u[0]];
+          if (o.properties.meta = n[0], o.properties._value = d, h && h != "none") {
+            const p = n[0] && n[0].children ? n[0].children.filter((m) => m.type == h).map((m) => m.value) : [];
+            o.properties.meta[h] = p;
           }
         } else
-          l.properties._value = null;
-      } else if (p == "csv") {
-        const s = i.data.filter((n) => n[i.meta.fields[0]] == d);
-        s.length > 0 ? (l.properties.meta = s[0], l.properties._value = s[0][i.meta.fields[1]]) : l.properties._value = null;
+          o.properties._value = null;
+      } else if (l == "csv") {
+        const n = i.data.filter((d) => d[i.meta.fields[0]] == f);
+        n.length > 0 ? (o.properties.meta = n[0], o.properties._value = n[0][i.meta.fields[1]]) : o.properties._value = null;
       } else
-        l.properties._value = null;
-      return l;
+        o.properties._value = null;
+      return o;
     });
     return { ...e, features: c };
   }
-  componentDidUpdate(e, p, v) {
-    const { app: i, file: u, featureJoinAttribute: h, data: c, measures: F, patternDiscriminator: l, editing: d } = this.props;
-    if (d || JSON.stringify(e.data) !== JSON.stringify(c)) {
-      debugger;
-      this.create();
-    }
-    if (e.visible != this.props.visible) {
+  componentDidUpdate(e, l, C) {
+    const { app: i, file: u, featureJoinAttribute: h, data: c, measures: x, patternDiscriminator: o, editing: f, usePattern: n } = this.props;
+    if ((f || JSON.stringify(e.data) !== JSON.stringify(c)) && this.create(), e.visible != this.props.visible) {
       debugger;
       this.g.style("display", this.props.visible ? "" : "none");
     }
     if (e.patternsVisible != this.props.patternsVisible) {
-      const n = M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(this.props.id)}`);
-      n.select(".patterns-checkbox").text(this.props.patternsVisible ? "☑ " : "☐ "), n.selectAll(".patterns-labels").style("display", this.props.patternsVisible ? "" : "none"), n.selectAll("rect").style("display", this.props.patternsVisible ? "" : "none"), n.select("svg").attr("height", this.props.patternsVisible ? 30 + (n.selectAll("rect").size() - 1) * 23 + "px" : "30px"), this.g.selectAll(".shape-pattern").style("display", this.props.patternsVisible ? "" : "none");
+      const p = M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(this.props.id)}`);
+      p.select(".patterns-checkbox").text(this.props.patternsVisible ? "☑ " : "☐ "), p.selectAll(".patterns-labels").style("display", this.props.patternsVisible ? "" : "none"), p.selectAll("rect").style("display", this.props.patternsVisible ? "" : "none"), p.select("svg").attr("height", this.props.patternsVisible ? 30 + (p.selectAll("rect").size() - 1) * 23 + "px" : "30px"), this.g.selectAll(".shape-pattern").style("display", this.props.patternsVisible ? "" : "none");
     }
-    e.colorLayerVisible != this.props.colorLayerVisible && (this.g.selectAll(".borders").style("fill", (s) => {
+    e.colorLayerVisible != this.props.colorLayerVisible && (this.g.selectAll(".borders").style("fill", (d) => {
       debugger;
       return this.props.colorLayerVisible ? null : this.props.fillColor;
     }), this.g.selectAll(".centroids").style("display", this.props.colorLayerVisible ? "block" : "none")), e.usePattern != this.props.usePattern && (this.props.usePattern || M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(this.props.id)}`).select("svg").remove()), this.g && this.resize();
@@ -405,19 +397,19 @@ class ht extends pt {
   render() {
     const {
       id: e,
-      file: p,
-      path: v,
+      file: l,
+      path: C,
       zoom: i,
       labelFilter: u = [],
       labelField: h,
       labelFontSize: c,
-      labelColor: F,
-      fillColor: l,
-      borderColor: d,
-      featureJoinAttribute: s,
-      apiJoinAttribute: n,
-      dvzProxyDatasetId: L,
-      editing: f
+      labelColor: x,
+      fillColor: o,
+      borderColor: f,
+      featureJoinAttribute: n,
+      apiJoinAttribute: d,
+      dvzProxyDatasetId: p,
+      editing: m
     } = this.props;
     return /* @__PURE__ */ Z("g", { id: "data-" + e, className: "data " + e, ref: this.gRef });
   }
@@ -425,38 +417,38 @@ class ht extends pt {
 const ft = (D) => {
   const {
     id: e,
-    unique: p,
-    filters: v,
+    unique: l,
+    filters: C,
     csv: i,
     app: u,
     group: h = "default",
     apiJoinAttribute: c,
-    editing: F,
-    patternDiscriminator: l,
-    dvzProxyDatasetId: d,
-    intl: s,
-    settings: n,
-    waitForFilters: L
-  } = D, f = {}, x = v || {};
-  return x && x.forEach && x.forEach((g) => {
-    g.value != null && g.value.filter((P) => P != null && P.toString().trim() != "").length > 0 && (f[g.param] = g.value);
-  }), d && (f.dvzProxyDatasetId = d), /* @__PURE__ */ Z(
+    editing: x,
+    patternDiscriminator: o,
+    dvzProxyDatasetId: f,
+    intl: n,
+    settings: d,
+    waitForFilters: p
+  } = D, m = {}, z = C || {};
+  return z && z.forEach && z.forEach((b) => {
+    b.value != null && b.value.filter((T) => T != null && T.toString().trim() != "").length > 0 && (m[b.param] = b.value);
+  }), f && (m.dvzProxyDatasetId = f), /* @__PURE__ */ Z(
     ct,
     {
-      waitForFilters: L,
-      editing: F,
-      params: f,
+      waitForFilters: p,
+      editing: x,
+      params: m,
       app: u,
       csv: decodeURIComponent(i),
       group: h,
       ignoreErrors: !0,
       isSvg: !0,
-      store: [u, p, e],
-      source: c + (l != "none" ? "/" + l : ""),
+      store: [u, l, e],
+      source: c + (o != "none" ? "/" + o : ""),
       children: /* @__PURE__ */ Z(ut, { children: /* @__PURE__ */ Z(ht, { ...D }) })
     }
   );
-}, _t = dt(ft);
+}, Ft = dt(ft);
 export {
-  _t as default
+  Ft as default
 };