@devgateway/dvz-ui-react 1.0.6 → 1.1.0

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

@@ -1,144 +1,140 @@
-import { jsx as L } from "react/jsx-runtime";
+import { jsx as F } from "react/jsx-runtime";
 import "react";
 import q from "./BaseLayer.js";
-import Y from "../data/DataProvider.js";
-import G from "../data/DataConsumer.js";
-import * as j from "d3";
-import { injectIntl as H } from "react-intl";
-import X from "papaparse";
-import K from "./BreaksStyles.js";
-class Q extends q {
+import G from "../data/DataProvider.js";
+import H from "../data/DataConsumer.js";
+import * as O from "d3";
+import { injectIntl as X } from "react-intl";
+import K from "papaparse";
+import Q from "./BreaksStyles.js";
+class Z extends q {
   constructor() {
     super(), this.createDataLayer = this.createDataLayer.bind(this);
   }
-  createDataLayer(r) {
+  createDataLayer(i) {
     const {
       format: s,
-      path: o,
+      path: a,
       tooltip: v,
-      markFillColor: m,
+      markFillColor: y,
       markBorderColor: k,
-      markSizeScale: x,
+      markSizeScale: L,
       //circle size
-      featureJoinAttribute: p,
+      featureJoinAttribute: m,
       apiJoinAttribute: A,
-      projection: b,
-      breaks: w,
-      markSizeScale2: g,
+      projection: w,
+      breaks: C,
+      markSizeScale2: x,
       //arrow size
-      measures: n,
-      zoom: C,
-      offsetPixels: y = 10
-    } = this.props, I = n[0], D = new K({
-      breaks: w,
-      defaultFillColor: m,
+      measures: u,
+      zoom: g,
+      offsetPixels: n = 10,
+      waitForFilters: V
+    } = this.props, E = u[0], D = new Q({
+      breaks: C,
+      defaultFillColor: y,
       defaultBorderColor: k,
-      defaultSize: g
+      defaultSize: x
     });
     s.style === "compacted" || s.style, s.style, s.currency, parseInt(s.minimumFractionDigits), parseInt(s.maximumFractionDigits);
-    const O = r.features.filter((t) => t.properties._value != null);
-    this.g = j.select(this.gRef.current), this.g.attr("class", "base-layer"), this.props.transform && this.g.attr("transform", this.props.transform), this.g.selectAll(".flow-line").remove(), this.g.selectAll(".start-point").remove(), this.g.selectAll(".end-point").remove(), this.g.select("defs").selectAll("*").remove();
-    const F = this.props.transform ? this.props.transform.k : 1, z = [];
-    O.forEach((t) => {
-      z.push(t), t.properties.destinations.forEach((u) => {
-        const d = u[I];
-        debugger;
-        r.features.filter((e) => e.properties[p] == u.value).forEach((e) => {
-          e.properties.meta = u;
-          const _ = t.properties[p], i = t.properties[p] + "--" + e.properties[p], a = o.centroid(t), l = o.centroid(e), f = l[0] - a[0], P = l[1] - a[1], B = Math.sqrt(f * f + P * P), V = f / B, M = P / B, N = [
-            l[0] - V * y,
-            l[1] - M * y
-          ], R = b.invert(N), U = {
+    const P = i.features.filter((t) => t.properties._value != null);
+    this.g = O.select(this.gRef.current), this.g.attr("class", "base-layer"), this.props.transform && this.g.attr("transform", this.props.transform), this.g.selectAll(".flow-line").remove(), this.g.selectAll(".start-point").remove(), this.g.selectAll(".end-point").remove(), this.g.select("defs").selectAll("*").remove();
+    const I = this.props.transform ? this.props.transform.k : 1, b = [];
+    P.forEach((t) => {
+      b.push(t), t.properties.destinations.sort((l, e) => l[E] - e[E]).forEach((l) => {
+        const e = l[E];
+        i.features.filter((r) => r.properties[m] == l.value).forEach((r) => {
+          r.properties.meta = l;
+          const p = t.properties[m], o = t.properties[m] + "--" + r.properties[m], d = a.centroid(t), f = a.centroid(r), _ = f[0] - d[0], T = f[1] - d[1], B = Math.sqrt(_ * _ + T * T), M = _ / B, N = T / B, R = [
+            f[0] - M * n,
+            f[1] - N * n
+          ], U = w.invert(R), W = {
             type: "LineString",
             coordinates: [
-              b.invert(a),
+              w.invert(d),
               // Start in geo coords
-              R
+              U
               // New endpoint before d2
             ]
-          };
-          this.g.select("defs").append("marker").attr("id", "arrow" + i).attr("markerUnits", "strokeWidth").attr("markerWidth", "6").attr("markerHeight", "6").attr("viewBox", "0 0 24 24").attr("refX", "6").attr("refY", "6").attr("orient", "auto").append("path").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("style", (S) => "fill: " + D.getColor(d) + ";");
-          const h = this.g;
-          this.g.append("path").attr("d", o(U)).attr("class", "flow-line").style("fill", "none").style("cursor", "pointer").style("stroke-dasharray", "0").style("stroke", (S) => D.getColor(d)).style("stroke-width", (S) => D.getSize(d)).attr("marker-end", "url(#arrow" + i + ")").on("mouseenter", (S, $) => {
-            if (h.selectAll("marker").transition().duration("200").style("opacity", 0), h.selectAll(".start-point").transition().duration("200").style("opacity", 0), h.selectAll(".flow-line").transition().duration("200").style("opacity", 0), j.select(S.target).transition().duration("200").style("opacity", 1), h.selectAll("#arrow" + i).transition().duration("200").style("opacity", 1), h.selectAll(".start-point.circle_" + _).transition().duration("200").style("opacity", 1), d) {
-              debugger;
-              const J = {}, T = {};
-              Object.keys(t.properties).forEach((c) => {
-                J["origin_" + c] = t.properties[c];
-              }), Object.keys(e.properties).forEach((c) => {
-                T["target_" + c] = e.properties[c];
-              }), Object.keys(e.properties.meta).forEach((c) => {
-                T["target_" + c] = e.properties.meta[c];
+          }, c = this.g.append("g");
+          this.g.select("defs").append("marker").attr("id", "arrow" + o).attr("markerUnits", "strokeWidth").attr("markerWidth", "6").attr("markerHeight", "6").attr("viewBox", "0 0 24 24").attr("refX", "6").attr("refY", "6").attr("orient", "auto").append("path").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("style", (S) => "fill: " + D.getColor(e) + ";"), c.append("path").attr("d", a(W)).attr("id", o).attr("class", "flow-line").style("fill", "none").style("cursor", "pointer").style("stroke-dasharray", "0").style("stroke", (S) => D.getColor(e)).style("stroke-width", (S) => D.getSize(e)).attr("marker-end", "url(#arrow" + o + ")").on("mouseenter", (S, tt) => {
+            if (c.selectAll("marker").transition().duration("200").style("opacity", 0), c.selectAll(".start-point").transition().duration("200").style("opacity", 0), c.selectAll(".flow-line").transition().duration("200").style("opacity", 0), O.select(S.target).transition().duration("200").style("opacity", 1), c.selectAll("#arrow" + o).transition().duration("200").style("opacity", 1), c.selectAll(".start-point.circle_" + p).transition().duration("200").style("opacity", 1), e) {
+              const J = {}, j = {};
+              Object.keys(t.properties).forEach((h) => {
+                J["origin_" + h] = t.properties[h];
+              }), Object.keys(r.properties).forEach((h) => {
+                j["target_" + h] = r.properties[h];
+              }), Object.keys(r.properties.meta).forEach((h) => {
+                j["target_" + h] = r.properties.meta[h];
               });
-              debugger;
-              const W = {
+              const Y = {
                 ...J,
-                ...T,
+                ...j,
                 meta: {
                   [A]: t.properties.meta ? t.properties.meta.value : "",
                   ...t.properties.meta,
-                  value: d
+                  value: e
                 }
               };
-              this.showToolTip(v, W, D.getColor(e.properties._value));
+              this.showToolTip(v, Y, D.getColor(r.properties._value));
             }
           }).on("mouseout", (S) => {
-            this.hiddenToolTip(), j.selectAll(".flow-line").transition().duration("100").style("opacity", 1), h.selectAll(".start-point").transition().duration("100").style("opacity", 1), h.selectAll("marker").transition().duration("100").style("opacity", 1);
-          });
+            this.hiddenToolTip(), O.selectAll(".flow-line").transition().duration("100").style("opacity", 1), c.selectAll(".start-point").transition().duration("100").style("opacity", 1), c.selectAll("marker").transition().duration("100").style("opacity", 1);
+          }), c.append("text").append("textPath").attr("xlink:href", o).style("text-anchor", "middle").attr("startOffset", "50%").attr("fill", "#fff").text("Yay, my text is on a wavy path");
         });
       });
-    }), z.forEach((t) => {
-      this.g.append("circle").attr("fill", m).attr("stroke", k).attr("class", "start-point circle_" + t.properties[p]).attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", o.centroid(t)[0]).attr("cy", o.centroid(t)[1]).attr("r", () => x * 1 / F).on("mouseenter", (u) => {
+    }), b.forEach((t) => {
+      this.g.append("circle").attr("fill", y).attr("stroke", k).attr("class", "start-point circle_" + t.properties[m]).attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", a.centroid(t)[0]).attr("cy", a.centroid(t)[1]).attr("r", () => L * 1 / I).on("mouseenter", (l) => {
         this.showToolTip("{name_en}", t.properties, "");
-      }).on("mouseout", (u) => {
+      }).on("mouseout", (l) => {
         this.hiddenToolTip();
       });
     });
   }
   create() {
     const {
-      app: r,
+      app: i,
       name: s,
-      file: o,
+      file: a,
       path: v,
-      csv: m,
+      csv: y,
       zoom: k,
-      labelFilter: x = [],
-      labelField: p,
+      labelFilter: L = [],
+      labelField: m,
       labelFontSize: A,
-      labelColor: b,
-      fillColor: w,
-      borderColor: g,
-      featureJoinAttribute: n,
-      editing: C,
-      data: y,
-      breaks: I,
-      markFillColor: D,
-      markSizeScale: O,
-      measures: F,
-      flowValuesFrom: z
+      labelColor: w,
+      fillColor: C,
+      borderColor: x,
+      featureJoinAttribute: u,
+      editing: g,
+      data: n,
+      breaks: V,
+      markFillColor: E,
+      markSizeScale: D,
+      measures: P,
+      flowValuesFrom: I
     } = this.props;
-    o != "none" && this.loadJSON(o).then((t) => {
-      const u = t.features.map((e) => {
-        const _ = e.properties[n];
-        if (r != "csv" && y && y.children) {
-          const i = y.children.filter((a) => a.value.indexOf(_) > -1);
-          if (i.length > 0) {
-            const a = i[0][F[0]];
-            e.properties.meta = i[0], e.properties._value = a, e.properties.destinations = i[0].children;
+    a != "none" && this.loadJSON(a).then((b) => {
+      const t = b.features.map((e) => {
+        const r = e.properties[u];
+        if (i != "csv" && n && n.children) {
+          const p = n.children.filter((o) => o.value.indexOf(r) > -1);
+          if (p.length > 0) {
+            const o = p[0][P[0]];
+            e.properties.meta = p[0], e.properties._value = o, e.properties.destinations = p[0].children;
           }
-        } else if (r == "csv") {
-          const i = X.parse(m, { header: !0, dynamicTyping: !0 }), a = e.properties[n];
-          i.data.filter((f) => f.origin == a);
-          const l = i.data.filter((f) => f.origin == a)[0];
-          l != null && (alert("CSV Not implemented Yet, please do it if you have time"), e.properties.meta = l, e.properties._value = l.value, e.properties.destinations = l.destination);
+        } else if (i == "csv") {
+          const p = K.parse(y, { header: !0, dynamicTyping: !0 }), o = e.properties[u];
+          p.data.filter((f) => f.origin == o);
+          const d = p.data.filter((f) => f.origin == o)[0];
+          d != null && (alert("CSV Not implemented Yet, please do it if you have time"), e.properties.meta = d, e.properties._value = d.value, e.properties.destinations = d.destination);
         }
         return e;
-      }), d = { ...t, features: u };
-      this.createDataLayer(d);
+      }), l = { ...b, features: t };
+      this.createDataLayer(l);
     });
   }
-  componentDidUpdate(r, s, o) {
+  componentDidUpdate(i, s, a) {
     const { projection: v } = this.props;
     this.create();
   }
@@ -146,41 +142,43 @@ class Q extends q {
     this.create(), this.props.zoom.current.fullView();
   }
   render() {
-    const { id: r } = this.props;
-    return /* @__PURE__ */ L("g", { id: "data-" + r, className: "data " + r, ref: this.gRef, children: /* @__PURE__ */ L("defs", {}) });
+    const { id: i } = this.props;
+    return /* @__PURE__ */ F("g", { id: "data-" + i, className: "data " + i, ref: this.gRef, children: /* @__PURE__ */ F("defs", {}) });
   }
 }
-const Z = (E) => {
+const $ = (z) => {
   const {
-    id: r,
+    id: i,
     unique: s,
-    filters: o,
+    filters: a,
     csv: v,
-    app: m,
+    app: y,
     group: k = "default",
-    flowOrigin: x,
-    editing: p,
+    flowOrigin: L,
+    editing: m,
     flowDestination: A,
-    dvzProxyDatasetId: b
-  } = E, w = { dvzProxyDatasetId: b }, g = o || {};
-  return g && g.forEach && g.forEach((n) => {
-    n.value != null && n.value.filter((C) => C != null && C.toString().trim() != "").length > 0 && (w[n.param] = n.value);
-  }), /* @__PURE__ */ L(
-    Y,
+    dvzProxyDatasetId: w,
+    waitForFilters: C
+  } = z, x = { dvzProxyDatasetId: w }, u = a || {};
+  return u && u.forEach && u.forEach((g) => {
+    g.value != null && g.value.filter((n) => n != null && n.toString().trim() != "").length > 0 && (x[g.param] = g.value);
+  }), /* @__PURE__ */ F(
+    G,
     {
-      editing: p,
-      params: w,
-      app: m,
+      editing: m,
+      params: x,
+      waitForFilters: C,
+      app: y,
       csv: decodeURIComponent(v),
       group: k,
       ignoreErrors: !0,
       isSvg: !0,
-      store: [m, s, r],
-      source: x + "/" + A,
-      children: /* @__PURE__ */ L(G, { children: /* @__PURE__ */ L(Q, { ...E }) })
+      store: [y, s, i],
+      source: L + "/" + A,
+      children: /* @__PURE__ */ F(H, { children: /* @__PURE__ */ F(Z, { ...z }) })
     }
   );
-}, lt = H(Z);
+}, pt = X($);
 export {
-  lt as default
+  pt as default
 };

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

@@ -0,0 +1,155 @@
+const c = [
+  {
+    value: "blues",
+    label: "blues",
+    startColor: "#f7fbff",
+    endColor: "#08306b"
+  },
+  {
+    value: "greens",
+    label: "greens",
+    startColor: "#f7fcf5",
+    endColor: "#00441b"
+  },
+  {
+    value: "greys",
+    label: "greys",
+    startColor: "#ffffff",
+    endColor: "#000000"
+  },
+  {
+    value: "oranges",
+    label: "oranges",
+    startColor: "#fff5eb",
+    endColor: "#7f2704"
+  },
+  {
+    value: "purples",
+    label: "purples",
+    startColor: "#fcfbfd",
+    endColor: "#3f007d"
+  },
+  {
+    value: "reds",
+    label: "reds",
+    startColor: "#fff5f0",
+    endColor: "#67000d"
+  },
+  {
+    value: "blue_green",
+    label: "blue_green",
+    startColor: "#f7fcfd",
+    endColor: "#00441b"
+  },
+  {
+    value: "blue_purple",
+    label: "blue_purple",
+    startColor: "#f7fcfd",
+    endColor: "#4d004b"
+  },
+  {
+    value: "green_blue",
+    label: "green_blue",
+    startColor: "#f7fcf0",
+    endColor: "#084081"
+  },
+  {
+    value: "orange_red",
+    label: "orange_red",
+    startColor: "#fff7ec",
+    endColor: "#7f0000"
+  },
+  {
+    value: "purple_blue_green",
+    label: "purple_blue_green",
+    startColor: "#fff7fb",
+    endColor: "#014636"
+  },
+  {
+    value: "purple_blue",
+    label: "purple_blue",
+    startColor: "#fff7fb",
+    endColor: "#023858"
+  },
+  {
+    value: "purple_red",
+    label: "purple_red",
+    startColor: "#f7f4f9",
+    endColor: "#67001f"
+  },
+  {
+    value: "red_purple",
+    label: "red_purple",
+    startColor: "#fff7f3",
+    endColor: "#49006a"
+  },
+  {
+    value: "yellow_green_blue",
+    label: "yellow_green_blue",
+    startColor: "#ffffd9",
+    endColor: "#081d58"
+  },
+  {
+    value: "yellow_green",
+    label: "yellow_green",
+    startColor: "#ffffe5",
+    endColor: "#004529"
+  },
+  {
+    value: "yellow_orange_brown",
+    label: "yellow_orange_brown",
+    startColor: "#ffffe5",
+    endColor: "#662506"
+  },
+  {
+    value: "yellow_orange_red",
+    label: "yellow_orange_red",
+    startColor: "#ffffcc",
+    endColor: "#800026"
+  }
+];
+class _ {
+  constructor(s) {
+    const { gradientScheme: r, gradientReverse: o, data: t = [], defaultFillColor: u, measure: f } = s;
+    this.defaultFillColor = u, this.measure = f, this.valueColors = this.createGradient(r, t, o), this.getColor = this.getColor.bind(this);
+  }
+  createGradient(s, r, o) {
+    const t = c.find((e) => e.value == s) || {
+      startColor: "#ffffff",
+      endColor: "#000000"
+    }, u = r.slice().sort((e, l) => e[this.measure] - l[this.measure]);
+    function f(e) {
+      return e = e.replace(/^#/, ""), e.length === 3 && (e = e.split("").map((l) => l + l).join("")), {
+        r: parseInt(e.substr(0, 2), 16),
+        g: parseInt(e.substr(2, 2), 16),
+        b: parseInt(e.substr(4, 2), 16)
+      };
+    }
+    function i({ r: e, g: l, b: C }) {
+      const n = (b) => b.toString(16).padStart(2, "0");
+      return `#${n(e)}${n(l)}${n(C)}`;
+    }
+    const a = f(o ? t.endColor : t.startColor), d = f(o ? t.startColor : t.endColor), g = [];
+    for (let e = 0; e < r.length; e++) {
+      const l = e / (r.length - 1), C = Math.round(a.r + (d.r - a.r) * l), n = Math.round(a.g + (d.g - a.g) * l), b = Math.round(a.b + (d.b - a.b) * l);
+      g.push({ value: u[e][this.measure], color: i({ r: C, g: n, b }) });
+    }
+    return g;
+  }
+  getColor(s) {
+    if (this.valueColors.length > 0) {
+      const r = this.valueColors.find((o) => o.value == s);
+      return (r == null ? void 0 : r.color) || this.defaultFillColor;
+    }
+    return this.defaultFillColor;
+  }
+  getStartColor() {
+    return this.valueColors[0].color;
+  }
+  getEndColor() {
+    return this.valueColors.at(-1).color;
+  }
+}
+export {
+  _ as default
+};