@devgateway/dvz-ui-react 1.0.0

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

@@ -0,0 +1,248 @@
+import { jsx as P } 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 {
+  constructor() {
+    super(), this.createDataLayer = this.createDataLayer.bind(this);
+  }
+  createDataLayer(a) {
+    const {
+      app: y,
+      svg: v,
+      format: l,
+      id: b,
+      file: S,
+      path: c,
+      onLayerCreated: F,
+      labelFilter: A = [],
+      labelField: T,
+      labelFontSize: E,
+      labelColor: z,
+      fillColor: _,
+      borderColor: o,
+      tooltip: u,
+      markFillColor: h,
+      markLabelColor: L,
+      markBorderColor: I,
+      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,
+      defaultSize: N
+    });
+    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,
+            meta: {
+              [i]: r.properties.meta ? r.properties.meta.value : "",
+              ...r.properties.meta,
+              value: r.properties._value
+            }
+          };
+          this.showToolTip(u, e, C.getColor(r.properties._value));
+        }
+      }).on("mouseleave", (t) => {
+        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) => {
+      }));
+    }
+  }
+  create() {
+    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;
+        } else
+          s.properties._value = null;
+        return s;
+      }), N = { ...L, features: I };
+      this.createDataLayer(N);
+    });
+  }
+  componentDidUpdate(a, y, v) {
+    const { projection: l } = this.props;
+    this.create();
+  }
+  componentDidMount() {
+    this.create(), this.props.zoom.current.fullView();
+  }
+  render() {
+    const {
+      id: a,
+      file: y,
+      path: v,
+      zoom: l,
+      labelFilter: b = [],
+      labelField: S,
+      labelFontSize: c,
+      labelColor: F,
+      fillColor: A,
+      borderColor: T,
+      featureJoinAttribute: E,
+      apiJoinAttribute: z,
+      dvzProxyDatasetId: _,
+      editing: o
+    } = this.props;
+    return /* @__PURE__ */ P("g", { id: "data-" + a, className: "data " + a, ref: this.gRef });
+  }
+}
+const it = (f) => {
+  const {
+    id: a,
+    unique: y,
+    filters: v,
+    csv: l,
+    app: b,
+    group: S = "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,
+    {
+      editing: F,
+      params: _,
+      app: b,
+      csv: decodeURIComponent(l),
+      group: S,
+      ignoreErrors: !0,
+      isSvg: !0,
+      store: [b, y, a],
+      source: c + (A != "none" ? "/" + A : ""),
+      children: /* @__PURE__ */ P(et, { children: /* @__PURE__ */ P(ot, { ...f }) })
+    }
+  );
+}, ht = rt(it);
+export {
+  ht as default
+};

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

@@ -0,0 +1,186 @@
+import { jsx as L } 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 {
+  constructor() {
+    super(), this.createDataLayer = this.createDataLayer.bind(this);
+  }
+  createDataLayer(r) {
+    const {
+      format: s,
+      path: o,
+      tooltip: v,
+      markFillColor: m,
+      markBorderColor: k,
+      markSizeScale: x,
+      //circle size
+      featureJoinAttribute: p,
+      apiJoinAttribute: A,
+      projection: b,
+      breaks: w,
+      markSizeScale2: g,
+      //arrow size
+      measures: n,
+      zoom: C,
+      offsetPixels: y = 10
+    } = this.props, I = n[0], D = new K({
+      breaks: w,
+      defaultFillColor: m,
+      defaultBorderColor: k,
+      defaultSize: g
+    });
+    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 = {
+            type: "LineString",
+            coordinates: [
+              b.invert(a),
+              // Start in geo coords
+              R
+              // 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];
+              });
+              debugger;
+              const W = {
+                ...J,
+                ...T,
+                meta: {
+                  [A]: t.properties.meta ? t.properties.meta.value : "",
+                  ...t.properties.meta,
+                  value: d
+                }
+              };
+              this.showToolTip(v, W, D.getColor(e.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);
+          });
+        });
+      });
+    }), 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) => {
+        this.showToolTip("{name_en}", t.properties, "");
+      }).on("mouseout", (u) => {
+        this.hiddenToolTip();
+      });
+    });
+  }
+  create() {
+    const {
+      app: r,
+      name: s,
+      file: o,
+      path: v,
+      csv: m,
+      zoom: k,
+      labelFilter: x = [],
+      labelField: p,
+      labelFontSize: A,
+      labelColor: b,
+      fillColor: w,
+      borderColor: g,
+      featureJoinAttribute: n,
+      editing: C,
+      data: y,
+      breaks: I,
+      markFillColor: D,
+      markSizeScale: O,
+      measures: F,
+      flowValuesFrom: z
+    } = 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;
+          }
+        } 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);
+        }
+        return e;
+      }), d = { ...t, features: u };
+      this.createDataLayer(d);
+    });
+  }
+  componentDidUpdate(r, s, o) {
+    const { projection: v } = this.props;
+    this.create();
+  }
+  componentDidMount() {
+    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 Z = (E) => {
+  const {
+    id: r,
+    unique: s,
+    filters: o,
+    csv: v,
+    app: m,
+    group: k = "default",
+    flowOrigin: x,
+    editing: p,
+    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,
+    {
+      editing: p,
+      params: w,
+      app: m,
+      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 }) })
+    }
+  );
+}, lt = H(Z);
+export {
+  lt as default
+};

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

@@ -0,0 +1,146 @@
+import { jsx as y } from "react/jsx-runtime";
+import L from "react";
+import j from "../data/DataProvider.js";
+import A from "../data/DataConsumer.js";
+import * as p from "d3";
+import { injectIntl as E } from "react-intl";
+import * as F from "react-dom";
+import I from "./Tooltip.js";
+class P extends L.Component {
+  constructor() {
+    super(), this.create = this.create.bind(this), this.showToolTip = this.showToolTip.bind(this), this.moveToolTip = this.moveToolTip.bind(this), this.gRef = L.createRef();
+  }
+  showToolTip(o, c, r, s) {
+    const n = p.select("body").append("div").attr("class", "d3MapTooltip").style("position", "absolute").html("").style("left", s.pageX + 15 + "px").style("top", s.pageY - 50 + "px");
+    F.render(/* @__PURE__ */ y(
+      I,
+      {
+        intl: this.props.intl,
+        tooltip: o,
+        data: c,
+        tooltipEnableMarkdown: !1
+      }
+    ), n._groups[0][0]);
+  }
+  moveToolTip(o) {
+    p.select(".d3MapTooltip").style("left", o.pageX + 15 + "px").style("top", o.pageY - 50 + "px");
+  }
+  hiddenToolTip(o) {
+    p.selectAll(".d3MapTooltip").remove();
+  }
+  create() {
+    const {
+      app: o,
+      tooltip: c,
+      data: r,
+      markFillColor: s,
+      markBorderColor: n,
+      markSizeScale: d,
+      markerLabelSize: D,
+      measures: S,
+      projection: h,
+      id: x,
+      useBreaks: k,
+      breaks: l,
+      pointDimensionStyles: f = [],
+      pointStyleBy: m,
+      dimension2: g,
+      visible: u = !0
+    } = this.props, v = p.scaleThreshold().domain(l.map((e) => e.end)).range(l.map((e) => e.size)), R = p.scaleThreshold().domain(l.map((e) => e.end)).range(l.map((e) => e.color)), w = p.scaleThreshold().domain(l.map((e) => e.end)).range(l.map((e) => e.borderColor));
+    let z = [];
+    const T = p.select(this.gRef.current);
+    if (o != "csv" && r && r.children)
+      z = r.children.map((e) => {
+        const i = e.value.split(",");
+        let a = { color: s, size: d, border: n }, t = 1;
+        return m === "measure" ? (t = e[S[0]], a = { color: R(t), size: v(t), border: w(t) }) : m === "dimension" && e.children && (t = e.children[0].value, a = {
+          color: f[t + "_color"] || s,
+          size: f[t + "_size"] || d,
+          border: f[t + "_border"] || n
+        }), {
+          x: i[0],
+          y: i[1],
+          value: t,
+          metadata: e,
+          pointStyle: a
+        };
+      });
+    else if (o == "csv") {
+      const e = r.meta.fields[0], i = r.meta.fields[1], a = r.meta.fields[2];
+      z = r.data.map((t) => {
+        let M = { color: s, size: d, border: n };
+        return {
+          x: t[e],
+          y: t[i],
+          value: t[a],
+          meta: t,
+          pointStyle: M
+        };
+      });
+    }
+    const B = (e) => {
+      const { pointStyleBy: i, dimension2: a } = this.props, t = {};
+      return i === "dimension" && a != "none" && (t[a] = e.metadata.children[0].value), { ...t, ...e, ...e.metadata };
+    }, C = this.props.transform ? this.props.transform.k : 1;
+    T.attr("class", "lat-long " + x), T.selectAll(".latLong").remove(), T.selectAll(".latLong").data(z).enter().append("circle").attr("cx", function(e) {
+      return h([e.y, e.x])[0];
+    }).attr("cy", function(e) {
+      return h([e.y, e.x])[1];
+    }).attr("class", "latLong").attr("r", (e) => e.pointStyle.size * 1 / C).attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("stroke", (e) => e.pointStyle.border).attr("fill", (e) => e.pointStyle.color).on("mouseenter", (e, i) => {
+      this.showToolTip(c, B(i), i.pointStyle.color, e);
+    }).on("mousemove", (e, i) => {
+      this.moveToolTip(e);
+    }).on("mouseleave", (e, i) => {
+      this.hiddenToolTip(e);
+    }), this.props.transform && T.attr("transform", this.props.transform);
+  }
+  componentDidUpdate(o, c, r) {
+    const { projection: s } = this.props;
+    this.create();
+  }
+  componentDidMount() {
+    this.create();
+  }
+  render() {
+    const {
+      id: o
+    } = this.props;
+    return /* @__PURE__ */ y("g", { className: "latLong " + o, ref: this.gRef });
+  }
+}
+const _ = (b) => {
+  const {
+    id: o,
+    unique: c,
+    filters: r,
+    csv: s,
+    app: n,
+    group: d = "default",
+    apiJoinAttribute: D,
+    editing: S,
+    dimension2: h,
+    pointStyleBy: x,
+    dvzProxyDatasetId: k,
+    settings: l
+  } = b, f = x === "dimension" && h != "none" ? "/" + h : "", m = {}, g = r || {};
+  return g && g.forEach && g.forEach((u) => {
+    u.value != null && u.value.filter((v) => v != null && v.toString().trim() != "").length > 0 && (m[u.param] = u.value);
+  }), k && (m.dvzProxyDatasetId = k), /* @__PURE__ */ y(
+    j,
+    {
+      editing: S,
+      params: m,
+      app: n,
+      csv: decodeURIComponent(s),
+      group: d,
+      ignoreErrors: !0,
+      isSvg: !0,
+      store: [n, c, o],
+      source: [D + f],
+      children: /* @__PURE__ */ y(A, { children: /* @__PURE__ */ y(P, { ...b }) })
+    }
+  );
+}, N = E(_);
+export {
+  N as default
+};

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

@@ -0,0 +1,59 @@
+import { jsx as n } from "react/jsx-runtime";
+import l from "react";
+import { createRoot as a } from "react-dom/client";
+import * as s from "d3";
+import p from "./Tooltip.js";
+let w = class extends l.Component {
+  constructor() {
+    super(), this.loadJSON = this.loadJSON.bind(this), this.create = this.create.bind(this), this.createLayer = this.createLayer.bind(this), this.loadJSON = this.loadJSON.bind(this), this.showToolTip = this.showToolTip.bind(this), this.moveToolTip = this.moveToolTip.bind(this), this.gRef = l.createRef(), this.state = { json: null };
+  }
+  loadJSON(e) {
+    return new Promise((t, i) => {
+      s.json(e).then((function(r, o) {
+        o && console.log("Error loading JSON: " + o), t(r);
+      }).bind(this));
+    });
+  }
+  createLayer(e) {
+    alert("please implement createLayer");
+  }
+  create() {
+    const {
+      file: e
+    } = this.props;
+    this.state.json ? this.createLayer(this.state.json) : this.loadJSON(e).then((t) => {
+      this.createLayer(t);
+    });
+  }
+  showToolTip(e, t, i, r) {
+    if (t) {
+      debugger;
+      const o = s.select("body").append("div").attr("class", "d3MapTooltip").style("position", "absolute").html("").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
+      a(o._groups[0][0]).render(/* @__PURE__ */ n(
+        p,
+        {
+          intl: this.props.intl,
+          tooltip: e,
+          data: t,
+          tooltipEnableMarkdown: !1
+        }
+      ));
+    }
+  }
+  moveToolTip(e) {
+    s.select(".d3MapTooltip").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
+  }
+  hiddenToolTip(e) {
+    s.selectAll(".d3MapTooltip").remove();
+  }
+  componentDidMount() {
+    this.create(), this.props.zoom && this.props.current && this.props.zoom.current.fullView();
+  }
+  render() {
+    const { name: e, height: t, width: i } = this.props;
+    return /* @__PURE__ */ n("g", { className: "layer", ref: this.gRef });
+  }
+};
+export {
+  w as default
+};