@devgateway/dvz-ui-react 1.0.7 → 1.1.0

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

@@ -1,248 +1,462 @@
-import { jsx as P } from "react/jsx-runtime";
+import { jsx as Z } from "react/jsx-runtime";
 import "react";
-import j from "./BaseLayer.js";
-import tt from "../data/DataProvider.js";
-import et from "../data/DataConsumer.js";
-import * as B from "d3";
-import { injectIntl as rt } from "react-intl";
-import at from "./BreaksStyles.js";
-const V = (f) => f ? f.toString().replace(/ /g, "_") : "", n = (f) => f ? "pattern_" + V(f) : "";
-class ot extends j {
+import pt from "./BaseLayer.js";
+import ct from "../data/DataProvider.js";
+import ut from "../data/DataConsumer.js";
+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) : "";
+class ht extends pt {
   constructor() {
-    super(), this.createDataLayer = this.createDataLayer.bind(this);
+    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);
   }
-  createDataLayer(a) {
+  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);
+  }
+  resize() {
     const {
-      app: y,
+      markerLabelSize: e,
+      markFillColor: p,
+      markBorderColor: v,
+      markSizeScale: i,
+      measures: u,
+      data: h,
+      breaks: c,
+      gradientScheme: F,
+      gradientReverse: l
+    } = this.props, d = new Y({
+      breaks: c,
+      defaultFillColor: p,
+      defaultBorderColor: v,
+      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");
+  }
+  getTooltipVariables(e) {
+    const { apiJoinAttribute: p } = this.props;
+    return e.properties._value ? {
+      ...e.properties,
+      meta: {
+        [p]: e.properties.meta ? e.properties.meta.value : "",
+        ...e.properties.meta,
+        value: e.properties._value
+      }
+    } : {};
+  }
+  createDataLayer(e) {
+    const {
+      app: p,
       svg: v,
-      format: l,
-      id: b,
-      file: S,
+      format: i,
+      id: u,
+      file: h,
       path: c,
       onLayerCreated: F,
-      labelFilter: A = [],
-      labelField: T,
-      labelFontSize: E,
-      labelColor: z,
-      fillColor: _,
-      borderColor: o,
-      tooltip: u,
-      markFillColor: h,
-      markLabelColor: L,
-      markBorderColor: I,
+      labelFilter: l = [],
+      labelField: d,
+      labelFontSize: s,
+      labelColor: n,
+      fillColor: L,
+      borderColor: f,
+      tooltip: x,
+      markFillColor: g,
+      markLabelColor: P,
+      markBorderColor: J,
       markSizeScale: N,
-      markerLabelSize: s,
-      featureJoinAttribute: R,
-      apiJoinAttribute: i,
-      measures: k,
-      editing: q,
-      data: x,
-      patternDiscriminator: g,
-      patternDiscriminatorLabel: M,
-      breaks: K,
-      patterns: D,
-      projection: lt,
-      useBreaks: Q,
-      useCentroidPoint: O,
-      usePattern: X,
-      intl: W
-    } = this.props, C = new at({
-      breaks: K,
-      defaultFillColor: h,
-      defaultBorderColor: I,
+      markerLabelSize: H,
+      featureJoinAttribute: tt,
+      apiJoinAttribute: K,
+      measures: I,
+      editing: et,
+      data: z,
+      patternDiscriminator: k,
+      patternDiscriminatorLabel: Q,
+      breaks: $,
+      gradientScheme: G,
+      gradientReverse: E,
+      patterns: w,
+      projection: rt,
+      useBreaks: X,
+      useGradients: V,
+      useCentroidPoint: U,
+      usePattern: j,
+      waitForFilters: at,
+      intl: q,
+      patternsVisible: B = !0,
+      togglePatterns: R,
+      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);
+    }
+  }
+  createColors(e) {
+    const {
+      app: p,
+      svg: v,
+      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,
+      markBorderColor: J,
+      markSizeScale: N,
+      markerLabelSize: H,
+      featureJoinAttribute: tt,
+      apiJoinAttribute: K,
+      measures: I,
+      editing: et,
+      data: z,
+      patternDiscriminator: k,
+      patternDiscriminatorLabel: Q,
+      breaks: $,
+      gradientScheme: G,
+      gradientReverse: E,
+      patterns: w,
+      projection: rt,
+      useBreaks: X,
+      useGradients: V,
+      useCentroidPoint: U,
+      usePattern: j,
+      waitForFilters: at,
+      intl: q,
+      patternsVisible: B = !0,
+      togglePatterns: R,
+      colorLayerVisible: O = !0,
+      visible: it
+    } = this.props, S = new Y({
+      breaks: $,
+      defaultFillColor: g,
+      defaultBorderColor: J,
       defaultSize: N
+    }), A = new ot({
+      data: z.children,
+      measure: I[0],
+      defaultFillColor: g,
+      gradientScheme: G,
+      gradientReverse: E
     });
-    if (this.gRef && this.gRef.current) {
-      this.g = B.select(this.gRef.current);
-      const Y = {
-        style: l.style === "compacted" ? "decimal" : l.style,
-        notation: l.style === "compacted" ? "compact" : "standard",
-        currency: l.currency,
-        minimumFractionDigits: parseInt(l.minimumFractionDigits),
-        maximumFractionDigits: parseInt(l.maximumFractionDigits)
-      }, G = a.features.filter((t) => t.properties._value != null), H = (t) => t.properties._value ? {
-        ...t.properties,
-        meta: {
-          [i]: t.properties.meta ? t.properties.meta.value : "",
-          ...t.properties.meta,
-          value: t.properties._value
-        }
-      } : {};
-      this.g.attr("class", "base-layer"), this.createPaths(a), this.g.selectAll(".point").remove(), this.g.selectAll(".point-label").remove(), this.g.selectAll(".shape-pattern").remove(), this.g.selectAll("defs").remove();
-      const $ = this.props.transform ? this.props.transform.k : 1, d = 10 * 1 / $, J = 10 * 1 / $, w = this.g.append("defs");
-      let p = [];
-      if (y == "csv" && g != "none")
-        p = [...new Set(x.data.map((t) => t[g]))].map((t) => ({
-          key: t,
-          type: D[t + "_symbol"],
-          color: D[t + "_color"],
-          rotation: D[t + "_rotation"]
-        }));
-      else if (g != "none") {
-        const t = x.metadata.types.filter((r) => r.dimension == g);
-        debugger;
-        p = t && t.length > 0 ? t[0].items.map((r) => {
-          const e = r.value;
-          return {
-            key: e,
-            type: D[e + "_symbol"],
-            color: D[e + "_color"],
-            rotation: D[e + "_rotation"]
-          };
-        }) : [];
-      }
-      if (w.selectAll("pattern").remove(), w.selectAll("pattern").data(p).enter().append("pattern").attr("id", (t) => n(t.key)).attr("patternUnits", "userSpaceOnUse").attr("width", d).attr("height", J).attr("x", 0).attr("y", 0).attr("patternTransform", (t) => `rotate(${t.rotation})`), p.forEach((t) => {
-        t.type === "lines" && w.select("#" + n(t.key)).append("rect").attr("x", 0.05).attr("width", d / 2).attr("height", J).attr("opacity", 1).attr("fill", t.color), t.type === "squares" && w.select("#" + n(t.key)).append("rect").attr("width", d / 2).attr("height", J / 2).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "dots" && w.select("#" + n(t.key)).append("circle").attr("cx", d / 2).attr("cy", J / 2).attr("r", d / 2.5).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "triangle" && w.select("#" + n(t.key)).append("polygon").attr("points", `${d / 2} 0, 0 ${d}, ${d}  ${d} `).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1);
-      }), O || (this.g.selectAll("path").attr("fill", (t) => !t || !t.properties || !t.properties._value ? _ : C.getColor(t.properties._value)).attr("stroke", o).attr("id", "state-borders").attr("d", c).on("mouseenter", (t, r) => {
-        r.properties._value && this.showToolTip(u, H(r), C.getColor(r.properties._value), r);
-      }).on("mouseleave", (t) => {
-        this.hiddenToolTip(t);
-      }).on("mousemove", (t) => {
-        this.moveToolTip(t);
-      }), this.createLabels(a)), X && a && a.features) {
-        debugger;
-        a.features.forEach((e) => {
-          let m = [];
-          e.properties && e.properties.meta && (m = y != "csv" ? e.properties.meta[g] ? e.properties.meta[g] : [] : [e.properties.meta[g]], m && m.length > 0 && m.forEach((Z) => {
-            this.g.append("path").attr("d", c(e)).attr("class", "shape-pattern").attr("opacity", (U) => {
-              if (Q)
-                return 0.7;
-            }).attr("fill", (U) => "transparent").attr("style", () => "none;fill:url(#" + n(Z) + ");").on("mouseenter", () => {
-              this.showToolTip(u, H(e), C.getColor(e.properties._value));
-            }).on("mousemove", (U) => {
-              this.moveToolTip();
-            }).on("mouseleave", (U) => {
-              this.hiddenToolTip();
-            });
-          }));
-        });
-        debugger;
-        p = p.filter((e) => e.type != null).sort((e, m) => new Intl.Collator(W.locale, { caseFirst: "upper", numeric: !0, sensitivity: "variant" }).compare(e.key, m.key)), B.select(this.gRef.current.parentNode.parentNode).select(`.layer_${V(b)}`).select("svg").remove();
-        const t = B.select(this.gRef.current.parentNode.parentNode).select(`.layer_${V(b)}`).append("svg"), r = t.append("defs");
-        r.selectAll("pattern").remove(), r.selectAll("pattern").data(p).enter().append("pattern").attr("id", (e) => "l_" + n(e.key)).attr("patternUnits", "userSpaceOnUse").attr("width", 5).attr("height", 5).attr("x", 0).attr("y", 0).attr("patternTransform", (e) => `rotate(${e.rotation ? e.rotation : 0})`), p.forEach((e) => {
-          e.type === "lines" && r.select("#l_" + n(e.key)).append("rect").attr("x", 0).attr("width", 1).attr("height", 10).attr("opacity", 0.75).attr("fill", e.color), e.type === "squares" && r.select("#l_" + n(e.key)).append("rect").attr("width", 3).attr("height", 3).attr("fill", e.color).attr("opacity", 1).attr("stroke-width", 1), e.type === "dots" && r.select("#l_" + n(e.key)).append("circle").attr("cx", 2).attr("cy", 2).attr("r", 2).attr("fill", e.color).attr("opacity", 1).attr("stroke-width", 1), e.type === "triangle" && r.select("#l_" + n(e.key)).append("polygon").attr("points", "5,0 8,8 0,5").attr("fill", e.color).attr("opacity", 1).attr("stroke-width", 1);
-        }), t.attr("width", "150px").attr("height", p.length * 30 + "px"), t.append("text").attr("class", "patterns-title").attr("y", 5).attr("x", 12).text((e) => y === "csv" ? g : M), t.selectAll(".legend-squares").data(p).enter().append("rect").attr("width", 18).attr("height", 18).attr("y", (e, m) => m * 22 + 25).attr("x", 20).attr("stroke", o).attr("style", (e) => "none;fill:url(#l_" + n(e.key) + ");"), t.selectAll(".patterns-labels").data(p).enter().append("text").attr("class", "patterns-labels").attr("y", (e, m) => m * 22 + 25).attr("x", 40).text((e) => e.key);
-      }
-      O && (this.createLabels(a), this.g.selectAll(".point").data(G).enter().append("circle").attr("fill", (t) => C.getColor(t.properties._value, !0)).attr("stroke", I).attr("class", "point").attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", (t) => c.centroid(t)[0]).attr("cy", (t) => c.centroid(t)[1]).attr("r", (t) => C.getSize(t.properties._value) * 1 / $).on("mouseenter", (t, r) => {
-        if (r.properties._value) {
-          const e = {
-            ...r.properties,
+    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);
+    }
+  }
+  createCentroids(e) {
+    const {
+      app: p,
+      svg: v,
+      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,
+      markBorderColor: J,
+      markSizeScale: N,
+      markerLabelSize: H,
+      featureJoinAttribute: tt,
+      apiJoinAttribute: K,
+      measures: I,
+      editing: et,
+      data: z,
+      patternDiscriminator: k,
+      patternDiscriminatorLabel: Q,
+      breaks: $,
+      gradientScheme: G,
+      gradientReverse: E,
+      patterns: w,
+      projection: rt,
+      useBreaks: X,
+      useGradients: V,
+      useCentroidPoint: U,
+      usePattern: j,
+      waitForFilters: at,
+      intl: q,
+      patternsVisible: B = !0,
+      togglePatterns: R,
+      colorLayerVisible: O = !0,
+      visible: it
+    } = this.props, S = new Y({
+      breaks: $,
+      defaultFillColor: g,
+      defaultBorderColor: J,
+      defaultSize: N
+    }), A = new ot({
+      data: z.children,
+      measure: I[0],
+      defaultFillColor: g,
+      gradientScheme: G,
+      gradientReverse: E
+    });
+    if (this.g) {
+      const o = {
+        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;
+      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) => {
+        if (t.properties._value) {
+          const y = {
+            ...t.properties,
             meta: {
-              [i]: r.properties.meta ? r.properties.meta.value : "",
-              ...r.properties.meta,
-              value: r.properties._value
+              [K]: t.properties.meta ? t.properties.meta.value : "",
+              ...t.properties.meta,
+              value: t.properties._value
             }
           };
-          this.showToolTip(u, e, C.getColor(r.properties._value));
+          this.showToolTip(x, y, V ? A.getColor(t.properties._value) : S.getColor(t.properties._value));
         }
-      }).on("mouseleave", (t) => {
+      }).on("mouseleave", (a) => {
         this.hiddenToolTip();
-      }), this.g.selectAll(".point-label").data(G).enter().append("text").attr("class", "point-label").attr("x", (t) => c.centroid(t)[0]).attr("y", (t) => c.centroid(t)[1]).attr("font-size", (t) => s * (1 / $) + "px").attr("fill", L).text((t) => W.formatNumber(l.style === "percent" ? t.properties._value / 100 : t.properties._value, Y)).on("mouseover", (t) => {
-      }));
+      }), 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) => {
+      }), O || this.g.selectAll(".centroids").style("display", "none");
     }
   }
-  create() {
+  createPatterns(e) {
     const {
-      app: a,
-      name: y,
-      file: v,
-      path: l,
-      zoom: b,
-      labelFilter: S = [],
-      labelField: c,
-      labelFontSize: F,
-      labelColor: A,
-      fillColor: T,
-      borderColor: E,
-      featureJoinAttribute: z,
-      editing: _,
-      data: o,
-      measures: u,
-      patternDiscriminator: h
-    } = this.props;
-    v != "none" && this.loadJSON(v).then((L) => {
-      const I = L.features.map((s) => {
-        const R = s.properties[z];
-        if (a != "csv" && o && o.children) {
-          const i = o.children.filter((k) => k.value == R);
-          if (i.length > 0) {
-            const k = i[0][u[0]];
-            if (s.properties.meta = i[0], s.properties._value = k, h && h != "none") {
-              const q = i[0] && i[0].children ? i[0].children.filter((x) => x.type == h).map((x) => x.value) : [];
-              s.properties.meta[h] = q;
-            }
-          } else
-            s.properties._value = null;
-        } else if (a == "csv") {
-          const i = o.data.filter((k) => k[o.meta.fields[0]] == R);
-          i.length > 0 ? (s.properties.meta = i[0], s.properties._value = i[0][o.meta.fields[1]]) : s.properties._value = null;
+      app: p,
+      svg: v,
+      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,
+      markBorderColor: J,
+      markSizeScale: N,
+      markerLabelSize: H,
+      featureJoinAttribute: tt,
+      apiJoinAttribute: K,
+      measures: I,
+      editing: et,
+      data: z,
+      patternDiscriminator: k,
+      patternDiscriminatorLabel: Q,
+      breaks: $,
+      gradientScheme: G,
+      gradientReverse: E,
+      patterns: w,
+      projection: rt,
+      useBreaks: X,
+      useGradients: V,
+      useCentroidPoint: U,
+      usePattern: j,
+      waitForFilters: at,
+      intl: q,
+      patternsVisible: B = !0,
+      togglePatterns: R,
+      colorLayerVisible: O = !0,
+      visible: it
+    } = this.props, S = new Y({
+      breaks: $,
+      defaultFillColor: g,
+      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) => ({
+        key: t,
+        type: w[t + "_symbol"],
+        color: w[t + "_color"],
+        rotation: w[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;
+        return {
+          key: _,
+          type: w[_ + "_symbol"],
+          color: w[_ + "_color"],
+          rotation: w[_ + "_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) => {
+          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));
+          }).on("mousemove", (st) => {
+            this.moveToolTip();
+          }).on("mouseleave", (st) => {
+            this.hiddenToolTip();
+          });
+        }));
+      }), 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);
+      }));
+      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));
+    }
+  }
+  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;
+          }
         } else
-          s.properties._value = null;
-        return s;
-      }), N = { ...L, features: I };
-      this.createDataLayer(N);
+          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;
+      } else
+        l.properties._value = null;
+      return l;
     });
+    return { ...e, features: c };
   }
-  componentDidUpdate(a, y, v) {
-    const { projection: l } = this.props;
-    this.create();
+  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) {
+      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");
+    }
+    e.colorLayerVisible != this.props.colorLayerVisible && (this.g.selectAll(".borders").style("fill", (s) => {
+      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();
   }
   componentDidMount() {
-    this.create(), this.props.zoom.current.fullView();
+    super.componentDidMount();
   }
   render() {
     const {
-      id: a,
-      file: y,
+      id: e,
+      file: p,
       path: v,
-      zoom: l,
-      labelFilter: b = [],
-      labelField: S,
+      zoom: i,
+      labelFilter: u = [],
+      labelField: h,
       labelFontSize: c,
       labelColor: F,
-      fillColor: A,
-      borderColor: T,
-      featureJoinAttribute: E,
-      apiJoinAttribute: z,
-      dvzProxyDatasetId: _,
-      editing: o
+      fillColor: l,
+      borderColor: d,
+      featureJoinAttribute: s,
+      apiJoinAttribute: n,
+      dvzProxyDatasetId: L,
+      editing: f
     } = this.props;
-    return /* @__PURE__ */ P("g", { id: "data-" + a, className: "data " + a, ref: this.gRef });
+    return /* @__PURE__ */ Z("g", { id: "data-" + e, className: "data " + e, ref: this.gRef });
   }
 }
-const it = (f) => {
+const ft = (D) => {
   const {
-    id: a,
-    unique: y,
+    id: e,
+    unique: p,
     filters: v,
-    csv: l,
-    app: b,
-    group: S = "default",
+    csv: i,
+    app: u,
+    group: h = "default",
     apiJoinAttribute: c,
     editing: F,
-    patternDiscriminator: A,
-    dvzProxyDatasetId: T,
-    intl: E,
-    settings: z
-  } = f, _ = {}, o = v || {};
-  return o && o.forEach && o.forEach((u) => {
-    u.value != null && u.value.filter((h) => h != null && h.toString().trim() != "").length > 0 && (_[u.param] = u.value);
-  }), T && (_.dvzProxyDatasetId = T), /* @__PURE__ */ P(
-    tt,
+    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(
+    ct,
     {
+      waitForFilters: L,
       editing: F,
-      params: _,
-      app: b,
-      csv: decodeURIComponent(l),
-      group: S,
+      params: f,
+      app: u,
+      csv: decodeURIComponent(i),
+      group: h,
       ignoreErrors: !0,
       isSvg: !0,
-      store: [b, y, a],
-      source: c + (A != "none" ? "/" + A : ""),
-      children: /* @__PURE__ */ P(et, { children: /* @__PURE__ */ P(ot, { ...f }) })
+      store: [u, p, e],
+      source: c + (l != "none" ? "/" + l : ""),
+      children: /* @__PURE__ */ Z(ut, { children: /* @__PURE__ */ Z(ht, { ...D }) })
     }
   );
-}, ht = rt(it);
+}, _t = dt(ft);
 export {
-  ht as default
+  _t as default
 };