@devgateway/dvz-ui-react 1.0.6 → 1.1.0

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

@@ -1,146 +1,174 @@
-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 { jsx as b } from "react/jsx-runtime";
+import I from "react";
+import O from "../data/DataProvider.js";
+import _ 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 {
+import { injectIntl as j } from "react-intl";
+import * as J from "react-dom";
+import P from "./Tooltip.js";
+class U extends I.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();
+    super(), this.create = this.create.bind(this), this.showToolTip = this.showToolTip.bind(this), this.moveToolTip = this.moveToolTip.bind(this), this.resize = this.resize.bind(this), this.gRef = I.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,
+  showToolTip(e, n, r, s) {
+    const l = p.select("body").append("div").attr("class", "d3MapTooltip").style("position", "absolute").html("").style("left", s.pageX + 15 + "px").style("top", s.pageY - 50 + "px");
+    J.render(/* @__PURE__ */ b(
+      P,
       {
         intl: this.props.intl,
-        tooltip: o,
-        data: c,
+        tooltip: e,
+        data: n,
         tooltipEnableMarkdown: !1
       }
-    ), n._groups[0][0]);
+    ), l._groups[0][0]);
   }
-  moveToolTip(o) {
-    p.select(".d3MapTooltip").style("left", o.pageX + 15 + "px").style("top", o.pageY - 50 + "px");
+  moveToolTip(e) {
+    p.select(".d3MapTooltip").style("left", e.pageX + 15 + "px").style("top", e.pageY - 50 + "px");
   }
-  hiddenToolTip(o) {
+  hiddenToolTip(e) {
     p.selectAll(".d3MapTooltip").remove();
   }
   create() {
     const {
-      app: o,
-      tooltip: c,
+      app: e,
+      tooltip: n,
       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
+      markBorderColor: l,
+      markSizeScale: m,
+      markerLabelSize: g,
+      measures: y,
+      projection: c,
+      id: T,
+      format: a,
+      intl: x,
+      useBreaks: L,
+      breaks: d,
+      pointDimensionStyles: h = [],
+      pointStyleBy: f,
+      dimension2: v,
+      visible: D = !0,
+      showDim2OnLegends: A,
+      dim2LegendLabel: X
+    } = this.props, E = {
+      style: a.style === "compacted" ? "decimal" : a.style,
+      notation: a.style === "compacted" ? "compact" : "standard",
+      currency: a.currency,
+      minimumFractionDigits: parseInt(a.minimumFractionDigits),
+      maximumFractionDigits: parseInt(a.maximumFractionDigits)
+    }, B = p.scaleThreshold().domain(d.map((t) => t.end)).range(d.map((t) => m + t.size)), C = p.scaleThreshold().domain(d.map((t) => t.end)).range(d.map((t) => t.color)), M = p.scaleThreshold().domain(d.map((t) => t.end)).range(d.map((t) => t.borderColor));
+    let S = [];
+    const z = p.select(this.gRef.current);
+    if (e != "csv" && r && r.children)
+      S = r.children.map((t) => {
+        const o = t.value.split(",");
+        let u = { color: s, size: m, border: l }, i = 1;
+        return f === "measure" ? (i = t[y[0]], u = { color: C(i), size: B(i), border: M(i) }) : f === "dimension" && t.children && A && (i = t.children[0].value, u = {
+          color: h[i + "_color"] || s,
+          size: h[i + "_size"] || m,
+          border: h[i + "_border"] || l
         }), {
-          x: i[0],
-          y: i[1],
-          value: t,
-          metadata: e,
-          pointStyle: a
+          x: o[0],
+          y: o[1],
+          value: i,
+          metadata: t,
+          pointStyle: u
         };
-      });
-    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 };
+      }), S.sort((t, o) => t.pointStyle.size - o.pointStyle.size);
+    else if (e == "csv") {
+      const t = r.meta.fields[0], o = r.meta.fields[1], u = r.meta.fields[2];
+      S = r.data.map((i) => {
+        let N = { color: s, size: m, border: l };
         return {
-          x: t[e],
-          y: t[i],
-          value: t[a],
-          meta: t,
-          pointStyle: M
+          x: i[t],
+          y: i[o],
+          value: i[u],
+          meta: i,
+          pointStyle: N
         };
       });
     }
-    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);
+    const F = (t) => {
+      const { pointStyleBy: o, dimension2: u } = this.props, i = {};
+      return u != "none" && (i[u] = t.metadata.children[0].value), { ...i, ...t, ...t.metadata };
+    }, R = this.props.transform ? this.props.transform.k : 1;
+    z.attr("class", "zoomable lat-long " + T), z.selectAll(".point-group").remove();
+    const w = z.selectAll(".point-group").data(S).enter().append("g").attr("class", "point-group");
+    w.append("circle").attr("cx", function(t) {
+      return c([t.y, t.x])[0];
+    }).attr("cy", function(t) {
+      return c([t.y, t.x])[1];
+    }).attr("class", "latLong").attr("r", (t) => t.pointStyle.size * 1 / R).attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("stroke", (t) => t.pointStyle.border).attr("fill", (t) => t.pointStyle.color).on("mouseenter", (t, o) => {
+      this.showToolTip(n, F(o), o.pointStyle.color, t);
+    }).on("mousemove", (t, o) => {
+      this.moveToolTip(t);
+    }).on("mouseleave", (t, o) => {
+      this.hiddenToolTip(t);
+    }), w.append("text").attr("class", "point-label").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("x", (t) => c([t.y, t.x])[0]).attr("y", (t) => c([t.y, t.x])[1]).attr("font-size", (t) => g * (10 / R) + "px").attr("fill", "#EEE").text((t) => x.formatNumber(t.value, E)).on("mouseenter", (t, o) => {
+      this.showToolTip(n, F(o), o.pointStyle.color, t);
+    }).on("mousemove", (t, o) => {
+      this.moveToolTip(t);
+    }).on("mouseleave", (t, o) => {
+      this.hiddenToolTip(t);
+    }), this.props.transform && z.attr("transform", this.props.transform);
   }
-  componentDidUpdate(o, c, r) {
-    const { projection: s } = this.props;
-    this.create();
+  componentDidUpdate(e, n, r) {
+    const { editing: s, selectedItem: l, onZoomToPoint: m, data: g } = this.props, y = p.select(this.gRef.current);
+    if ((s || JSON.stringify(e.data) !== JSON.stringify(g)) && this.create(), e.visible != this.props.visible && p.select(this.gRef.current).style("display", this.props.visible ? "block" : "none"), l != null && this.props.selectedItem != e.selectedItem) {
+      const T = y.selectAll(".point-group circle").filter((a) => a.metadata.children.find((x) => x.value == l) != null);
+      m({ x: T.datum().x, y: T.datum().y });
+    }
+    this.resize();
+  }
+  resize() {
+    const { markerLabelSize: e } = this.props, n = p.select(this.gRef.current), r = this.props.transform ? this.props.transform.k : 1;
+    n && (n.selectAll(".point-group circle").attr("r", (s) => s.pointStyle.size * 1 / r), n.selectAll(".point-group text.point-label").attr("font-size", (s) => e * (10 / r) + "px"));
   }
   componentDidMount() {
     this.create();
   }
   render() {
     const {
-      id: o
+      id: e
     } = this.props;
-    return /* @__PURE__ */ y("g", { className: "latLong " + o, ref: this.gRef });
+    return /* @__PURE__ */ b("g", { className: "latLong " + e, ref: this.gRef });
   }
 }
-const _ = (b) => {
+const V = (k) => {
   const {
-    id: o,
-    unique: c,
+    id: e,
+    unique: n,
     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,
+    app: l,
+    group: m = "default",
+    apiJoinAttribute: g,
+    editing: y,
+    dimension2: c,
+    pointStyleBy: T,
+    dvzProxyDatasetId: a,
+    settings: x,
+    waitForFilters: L
+  } = k, d = c != "none" ? "/" + c : "", h = {}, f = r || {};
+  return f && f.forEach && f.forEach((v) => {
+    v.value != null && v.value.filter((D) => D != null && D.toString().trim() != "").length > 0 && (h[v.param] = v.value);
+  }), a && (h.dvzProxyDatasetId = a), /* @__PURE__ */ b(
+    O,
     {
-      editing: S,
-      params: m,
-      app: n,
+      editing: y,
+      params: h,
+      waitForFilters: L,
+      app: l,
       csv: decodeURIComponent(s),
-      group: d,
+      group: m,
       ignoreErrors: !0,
       isSvg: !0,
-      store: [n, c, o],
-      source: [D + f],
-      children: /* @__PURE__ */ y(A, { children: /* @__PURE__ */ y(P, { ...b }) })
+      store: [l, n, e],
+      source: [g + d],
+      children: /* @__PURE__ */ b(_, { children: /* @__PURE__ */ b(U, { ...k }) })
     }
   );
-}, N = E(_);
+}, K = j(V);
 export {
-  N as default
+  K as default
 };

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

@@ -1,59 +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 { jsx as s } from "react/jsx-runtime";
+import r from "react";
+import { createRoot as n } from "react-dom/client";
+import * as o from "d3";
 import p from "./Tooltip.js";
-let w = class extends l.Component {
+import { loadJSON as h } from "./Utils.js";
+let g = class extends r.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 };
+    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 = r.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));
-    });
+  loadJSON(t) {
+    return h(t);
   }
-  createLayer(e) {
+  createLayer(t) {
     alert("please implement createLayer");
   }
+  applyInitialTransform() {
+    const { editing: t, initialPosition: e, width: i, height: a } = this.props;
+    o.select(this.gRef.current).attr("transform", `translate(${e.x},${e.y}) scale(${e.k})`);
+  }
   create() {
     const {
-      file: e
+      file: t
     } = this.props;
-    this.state.json ? this.createLayer(this.state.json) : this.loadJSON(e).then((t) => {
-      this.createLayer(t);
+    this.state.json ? this.createLayer(this.state.json) : this.loadJSON(t).then((e) => {
+      this.createLayer(e);
     });
   }
-  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(
+  showToolTip(t, e, i, a) {
+    if (e) {
+      const l = o.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");
+      n(l._groups[0][0]).render(/* @__PURE__ */ s(
         p,
         {
           intl: this.props.intl,
-          tooltip: e,
-          data: t,
+          tooltip: t,
+          data: e,
           tooltipEnableMarkdown: !1
         }
       ));
     }
   }
-  moveToolTip(e) {
-    s.select(".d3MapTooltip").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
+  moveToolTip(t) {
+    o.select(".d3MapTooltip").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
   }
-  hiddenToolTip(e) {
-    s.selectAll(".d3MapTooltip").remove();
+  hiddenToolTip(t) {
+    o.selectAll(".d3MapTooltip").remove();
   }
   componentDidMount() {
-    this.create(), this.props.zoom && this.props.current && this.props.zoom.current.fullView();
+    this.props.zoom && this.gRef.current && this.applyInitialTransform(), this.create();
   }
   render() {
-    const { name: e, height: t, width: i } = this.props;
-    return /* @__PURE__ */ n("g", { className: "layer", ref: this.gRef });
+    const { name: t, height: e, width: i } = this.props;
+    return /* @__PURE__ */ s("g", { className: "layer", ref: this.gRef });
   }
 };
 export {
-  w as default
+  g as default
 };