@devgateway/dvz-ui-react 1.0.7 → 1.1.0

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

@@ -1,234 +1,346 @@
-import { jsx as e, jsxs as l, Fragment as f } from "react/jsx-runtime";
-import { useRef as P } from "react";
-import { symbol as _ } from "prop-types";
-import j from "papaparse";
-const B = ({ breaks: n, isPoint: d }) => n.length > 0 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: n.map((a, o) => a.type !== "graterThan" ? /* @__PURE__ */ l("div", { className: "break", children: [
+import { jsx as e, jsxs as i, Fragment as S } from "react/jsx-runtime";
+import { useRef as V } from "react";
+import "prop-types";
+import z from "papaparse";
+import { injectIntl as A } from "react-intl";
+import H from "../data/DataProvider.js";
+import $ from "../data/DataConsumer.js";
+import J from "./GradientColors.js";
+const G = ({ breaks: t, isPoint: o, numberFormat: c, intl: m }) => t.length > 0 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: t.map((n, l) => n.type !== "graterThan" ? /* @__PURE__ */ i("div", { className: "break", children: [
   /* @__PURE__ */ e(
     "div",
     {
-      className: `break-item ${d ? "point" : ""}`,
+      className: `break-item ${o ? "point" : ""}`,
       style: {
-        backgroundColor: a.color,
-        border: `1px solid ${a.borderColor}`
+        backgroundColor: n.color,
+        border: `1px solid ${n.borderColor}`
       }
     }
   ),
-  /* @__PURE__ */ l("div", { className: "break-label", children: [
+  /* @__PURE__ */ i("div", { className: "break-label", children: [
     " < ",
-    a.end
+    m.formatNumber(n.end, c)
   ] })
-] }) : /* @__PURE__ */ l("div", { className: "break", children: [
+] }) : /* @__PURE__ */ i("div", { className: "break", children: [
   /* @__PURE__ */ e(
     "div",
     {
-      className: `break-item ${_}`,
+      className: `break-item ${o ? "point" : ""}`,
       style: {
-        backgroundColor: a.color,
-        border: `1px solid ${a.borderColor}`
+        backgroundColor: n.color,
+        border: `1px solid ${n.borderColor}`
       }
     }
   ),
-  /* @__PURE__ */ l("div", { className: "break-label", children: [
+  /* @__PURE__ */ i("div", { className: "break-label", children: [
     " > ",
-    a.end
+    m.formatNumber(n.end, c)
   ] })
-] })) }), M = (n) => {
+] })) }), W = (t) => {
   const {
-    name: d,
-    breaks: a,
-    pointStyleBy: o,
-    dimension2: c,
-    pointDimensionStyles: s = {},
-    markFillColor: r,
-    markBorderColor: t,
-    measures: m,
-    visible: g,
-    id: v,
-    onItemClick: N,
-    customMeasuresLabels: k
-  } = n;
-  let b = m[0];
-  return k && (b = k[m[0]]), [...new Set(Object.keys(s).map((h) => h.split("_")[0]))], /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ l("div", { children: [
-    /* @__PURE__ */ l("div", { className: "legend-item", children: [
+    name: o,
+    breaks: c,
+    pointStyleBy: m,
+    dimension2: n,
+    pointDimensionStyles: l = {},
+    markFillColor: d,
+    markBorderColor: u,
+    measures: r,
+    visible: y,
+    format: g,
+    intl: N,
+    id: C,
+    onItemClick: L,
+    customMeasuresLabels: f
+  } = t, h = {
+    style: g.style === "compacted" ? "decimal" : g.style,
+    notation: g.style === "compacted" ? "compact" : "standard",
+    currency: g.currency,
+    minimumFractionDigits: parseInt(g.minimumFractionDigits),
+    maximumFractionDigits: parseInt(g.maximumFractionDigits)
+  };
+  let p = r[0];
+  return f && (p = f[r[0]]), [...new Set(Object.keys(l).map((b) => b.split("_")[0]))], /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ i("div", { className: "legend-item", children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: "legend-color legend-check",
-          onClick: (h) => N(v),
+          onClick: (b) => L(C),
           style: {
-            backgroundColor: r,
-            borderColor: t
+            backgroundColor: d,
+            borderColor: u
           },
-          children: g != !1 && /* @__PURE__ */ e(f, { children: "✓" })
+          children: y != !1 && /* @__PURE__ */ e(S, { children: "✓" })
         }
       ),
-      /* @__PURE__ */ l("div", { className: "legend-label", children: [
-        d,
+      /* @__PURE__ */ i("div", { className: "legend-label", children: [
+        o,
         " (",
-        b,
+        p,
         ")"
       ] })
     ] }),
-    g != !1 && /* @__PURE__ */ e(B, { breaks: a, symbol: "arrow" })
+    y != !1 && /* @__PURE__ */ e(G, { breaks: c, symbol: "arrow", numberFormat: h, intl: N })
   ] }) });
-}, R = (n) => {
+}, K = (t) => {
   const {
-    id: d,
-    name: a,
-    breaks: o,
-    pointStyleBy: c,
-    dimension2: s,
+    id: o,
+    name: c,
+    breaks: m,
+    intl: n,
+    pointStyleBy: l,
+    format: d,
+    dimension2: u,
     pointDimensionStyles: r = {},
-    markFillColor: t,
-    markBorderColor: m,
-    measures: g,
-    visible: v,
-    onItemClick: N,
-    customMeasuresLabels: k,
-    allCategories: b
-  } = n;
-  let h = g[0];
-  k && (h = k[g[0]]);
-  const L = s && b ? b.filter((i) => i.type.toUpperCase() == s.toUpperCase()) : [], C = (L.length > 0 ? L[0].items : []).map((i) => i.value), D = c === "dimension" ? s : h;
-  return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ l("div", { children: [
-    /* @__PURE__ */ l("div", { className: "legend-item", children: [
+    markFillColor: y,
+    markBorderColor: g,
+    measures: N,
+    visible: C,
+    onItemClick: L,
+    customMeasuresLabels: f,
+    allCategories: h,
+    showDim2OnLegends: p,
+    dim2LegendLabel: b,
+    type: D,
+    d2Click: F,
+    selectedItem: x
+  } = t, v = {
+    style: d.style === "compacted" ? "decimal" : d.style,
+    notation: d.style === "compacted" ? "compact" : "standard",
+    currency: d.currency,
+    minimumFractionDigits: parseInt(d.minimumFractionDigits),
+    maximumFractionDigits: parseInt(d.maximumFractionDigits)
+  };
+  let w = N[0];
+  f && (w = f[N[0]]);
+  const B = u && h ? h.filter((a) => a.type.toUpperCase() == u.toUpperCase()) : [], k = (B.length > 0 ? B[0].items : []).map((a) => a.value), P = l === "dimension" || p ? u : w;
+  return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ i("div", { className: "legend-item", children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: "legend-color legend-check",
-          onClick: (i) => N(d),
-          style: {
-            backgroundColor: t,
-            borderColor: m
+          onClick: (a) => L(o),
+          style: l === "measure" || p ? {} : {
+            backgroundColor: y,
+            borderColor: g
           },
-          children: v != !1 && /* @__PURE__ */ e(f, { children: "✓" })
+          children: C != !1 && /* @__PURE__ */ e(S, { children: "✓" })
         }
       ),
-      /* @__PURE__ */ l("div", { className: "legend-label", children: [
-        a,
+      /* @__PURE__ */ i("div", { className: "legend-label", children: [
+        c,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ e("div", { className: "legend-item", children: /* @__PURE__ */ e("div", { className: "legend-label", children: D }) }) }),
-    c === "dimension" && v != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: C.map((i) => /* @__PURE__ */ l("div", { className: "break", children: [
-      /* @__PURE__ */ e("div", { className: "break-item", style: {
-        backgroundColor: r[i + "_color"] || t,
-        border: `1px solid ${r[i + "_border"] || m}`
-      } }),
-      /* @__PURE__ */ e("div", { className: "break-label", children: i })
-    ] })) }),
-    c === "measure" && v != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: o.map((i, S) => /* @__PURE__ */ l("div", { className: "break", children: [
+    l === "measure" && C != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: m.map((a, R) => /* @__PURE__ */ i("div", { className: "break", children: [
       /* @__PURE__ */ e("div", { className: "break-item", style: {
-        backgroundColor: i.color,
-        border: `1px solid ${i.borderColor}`
+        backgroundColor: a.color,
+        border: `1px solid ${a.borderColor}`,
+        borderRadius: D == "dataPoints" ? "50%" : "0"
       } }),
-      /* @__PURE__ */ l("div", { className: "break-label", children: [
+      /* @__PURE__ */ i("div", { className: "break-label", children: [
         " < ",
-        i.end
+        n.formatNumber(a.end, v)
       ] })
+    ] })) }),
+    C != !1 && p != !1 && /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ e("div", { className: "legend-item", children: /* @__PURE__ */ e("div", { className: "legend-label", children: b || P }) }) }),
+    C != !1 && p != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: k.map((a) => /* @__PURE__ */ i("div", { className: "break", children: [
+      l === "measure" ? /* @__PURE__ */ e(
+        "span",
+        {
+          className: "break-item dim2-item"
+        }
+      ) : /* @__PURE__ */ e(
+        "div",
+        {
+          className: "break-item",
+          style: {
+            backgroundColor: r[a + "_color"] || y,
+            border: `1px solid ${r[a + "_border"] || g}`,
+            borderRadius: D == "dataPoints" ? "50%" : "0"
+          }
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "break-label", onClick: (R) => F(a), children: x == a ? /* @__PURE__ */ e("b", { children: a }) : a })
     ] })) })
   ] }) });
-}, T = (n) => {
-  const { fillColor: d, borderColor: a, name: o, visible: c, id: s, onItemClick: r } = n;
-  return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ l("div", { className: "legend-item", children: [
+}, Q = (t) => {
+  const { fillColor: o, borderColor: c, name: m, visible: n, id: l, onItemClick: d } = t;
+  return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ i("div", { className: "legend-item", children: [
     /* @__PURE__ */ e(
       "div",
       {
         className: "legend-color legend-check",
-        onClick: (t) => r(s),
-        style: { backgroundColor: d, borderColor: a },
-        children: c != !1 && /* @__PURE__ */ e(f, { children: "✓" })
+        onClick: (u) => d(l),
+        style: { backgroundColor: o, borderColor: c },
+        children: n != !1 && /* @__PURE__ */ e(S, { children: "✓" })
       }
     ),
-    /* @__PURE__ */ e("div", { className: "legend-label", children: o })
+    /* @__PURE__ */ e("div", { className: "legend-label", children: m })
   ] }) });
-}, U = (n) => {
+}, X = (t) => {
   const {
-    markFillColor: d,
-    fillColor: a,
-    markSizeScale: o,
-    markBorderColor: c,
-    useCentroidPoint: s,
-    name: r,
-    useBreaks: t,
-    breaks: m,
-    usePattern: g,
-    patternsData: v,
-    patternDiscriminator: N,
-    patternDiscriminatorLabel: k,
-    measures: b,
-    borderColor: h,
-    data: L,
-    app: $,
-    customMeasuresLabels: C,
-    divRef: D,
-    id: i,
-    patternWidth: S = 0.35,
-    patternHeight: q = 0.25,
-    group: I,
-    csv: w,
-    visible: y,
-    onItemClick: F
-  } = n;
-  let u = "";
-  if ($ != "csv" && C)
-    u = C[b[0]];
+    markFillColor: o,
+    fillColor: c,
+    markSizeScale: m,
+    markBorderColor: n,
+    useCentroidPoint: l,
+    name: d,
+    useBreaks: u,
+    useGradients: r,
+    breaks: y,
+    intl: g,
+    usePattern: N,
+    patternsData: C,
+    patternDiscriminator: L,
+    patternDiscriminatorLabel: f,
+    measures: h,
+    borderColor: p,
+    data: b,
+    app: D,
+    customMeasuresLabels: F,
+    divRef: x,
+    id: v,
+    patternWidth: w = 0.35,
+    patternHeight: B = 0.25,
+    group: U,
+    format: k,
+    csv: P,
+    visible: a,
+    onItemClick: R,
+    gradientScheme: O,
+    gradientReverse: T,
+    toggleColorLayer: q,
+    colorLayerVisible: _ = !0
+  } = t;
+  let I = "";
+  const M = {
+    style: k.style === "compacted" ? "decimal" : k.style,
+    notation: k.style === "compacted" ? "compact" : "standard",
+    currency: k.currency,
+    minimumFractionDigits: parseInt(k.minimumFractionDigits),
+    maximumFractionDigits: parseInt(k.maximumFractionDigits)
+  }, E = new J({
+    data: b.children,
+    measure: h[0],
+    defaultFillColor: o,
+    gradientScheme: O,
+    gradientReverse: T
+  });
+  if (D != "csv" && F)
+    I = F[h[0]];
   else {
-    const p = j.parse(w, { header: !0, dynamicTyping: !0 });
-    u = p.meta.fields.length > 0 ? p.meta.fields[1] : "";
+    const s = z.parse(P, { header: !0, dynamicTyping: !0 });
+    I = s.meta.fields.length > 0 ? s.meta.fields[1] : "";
+  }
+  const j = (s) => s ? s.toString().replace(/ /g, "_").toLocaleLowerCase() : "";
+  if (x.current) {
+    const s = x.current.querySelector(
+      `.legend.layer_${j(v)} svg`
+    );
+    s && (s.style.display = a === !1 ? "none" : "block");
   }
-  const x = (p) => p ? p.toString().replace(/ /g, "_").toLocaleLowerCase() : "";
-  return /* @__PURE__ */ e("div", { className: `legend layer_${x(i)}`, id: x(`${I} ${r} ${i}`), children: /* @__PURE__ */ l("div", { children: [
-    /* @__PURE__ */ l("div", { className: "legend-item", children: [
+  return /* @__PURE__ */ e("div", { className: `legend layer_${j(v)}`, id: j(`${U} ${d} ${v}`), children: /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ i("div", { className: "legend-item", children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: "legend-color legend-check",
-          onClick: (p) => F(i),
-          style: { backgroundColor: a, borderColor: h },
-          children: y != !1 && /* @__PURE__ */ e(f, { children: "✓" })
+          onClick: (s) => R(v),
+          style: { backgroundColor: c, borderColor: p },
+          children: a != !1 && /* @__PURE__ */ e(S, { children: "✓" })
         }
       ),
-      /* @__PURE__ */ l("div", { className: "legend-label", children: [
-        r,
-        " ",
-        !s && /* @__PURE__ */ l("span", { children: [
-          "(",
-          u,
-          ")"
-        ] })
-      ] })
+      /* @__PURE__ */ e("div", { className: "legend-label", children: d })
     ] }),
-    s && !t && y != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ l("div", { className: "break", children: [
-      /* @__PURE__ */ e("div", { className: "break-item point", style: {
-        backgroundColor: d,
-        border: `1px solid ${c}`
-      } }),
-      u
+    l && !u && a != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ i("div", { className: "break", children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: `break-item point ${_ ? "checked" : ""}`,
+          onClick: (s) => q(v),
+          style: {
+            backgroundColor: o,
+            border: `1px solid ${n}`
+          }
+        }
+      ),
+      I
     ] }) }),
-    t && y != !1 && /* @__PURE__ */ l("div", { children: [
-      s && /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ e("div", { className: "break-item", children: u }) }),
-      /* @__PURE__ */ e(B, { symbol: s ? "point" : "square", breaks: m, visible: y })
+    u && a != !1 && /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ i(
+        "div",
+        {
+          className: "legend-section-title",
+          onClick: (s) => q(v),
+          children: [
+            /* @__PURE__ */ e("div", { className: `legend-section-title-checkbox ${_ ? "checked" : ""}` }),
+            /* @__PURE__ */ e("span", { className: "measure-label", children: I })
+          ]
+        }
+      ) }),
+      _ && /* @__PURE__ */ e(
+        G,
+        {
+          isPoint: l,
+          numberFormat: M,
+          breaks: y,
+          visible: a,
+          intl: g
+        }
+      )
+    ] }),
+    r && a != !1 && /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ e("div", { className: "gradient-label", style: { float: "right" }, children: g.formatNumber(Math.max(...b.children.map((s) => s[h[0]])), M) }),
+      /* @__PURE__ */ e("div", { className: "gradient-label", style: { float: "left" }, children: g.formatNumber(Math.min(...b.children.map((s) => s[h[0]])), M) }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            background: `linear-gradient(to right, ${E.getStartColor()}, ${E.getEndColor()})`,
+            width: "200px",
+            height: "10px"
+          }
+        }
+      )
     ] })
   ] }) });
-}, W = (n) => {
-  const d = P(null), { layers: a = [], onItemClick: o, patternsData: c, group: s } = n;
-  return /* @__PURE__ */ e("div", { className: "legends", ref: d, children: a && a.map((r) => /* @__PURE__ */ l("div", { children: [
-    r.type == "base" && /* @__PURE__ */ e(T, { ...r, group: s, onItemClick: o }),
-    r.type == "data" && /* @__PURE__ */ e(
-      U,
-      {
-        group: s,
-        patternsData: c ? c[r.id] : null,
-        divRef: d,
-        ...r,
-        onItemClick: o
-      }
-    ),
-    r.type == "dataPoints" && /* @__PURE__ */ e(R, { group: s, ...r, onItemClick: o }),
-    r.type == "flow" && /* @__PURE__ */ e(M, { group: s, ...r, onItemClick: o })
-  ] })) });
-};
+}, Y = (t) => {
+  const o = V(null), { layers: c = [], onItemClick: m, patternsData: n, group: l, intl: d, toggleColorLayer: u } = t;
+  return /* @__PURE__ */ e("div", { className: "legends", ref: o, children: c && c.map((r) => /* @__PURE__ */ e(
+    H,
+    {
+      editing: r.editing,
+      params: r.params,
+      app: r.app,
+      csv: decodeURIComponent(r.csv),
+      group: l,
+      ignoreErrors: !0,
+      isSvg: !0,
+      store: [r.app, r.unique, r.id],
+      source: r.apiJoinAttribute + (r.patternDiscriminator != "none" ? "/" + r.patternDiscriminator : ""),
+      children: /* @__PURE__ */ i("div", { children: [
+        r.type == "base" && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(Q, { ...r, group: l, onItemClick: m }) }),
+        r.type == "data" && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(
+          X,
+          {
+            group: l,
+            patternsData: n ? n[r.id] : null,
+            divRef: o,
+            ...r,
+            intl: t.intl,
+            onItemClick: m,
+            toggleColorLayer: u
+          }
+        ) }),
+        r.type == "dataPoints" && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(K, { selectedItem: t.selectedItem, d2Click: t.d2Click, intl: t.intl, group: l, ...r, onItemClick: m }) }),
+        r.type == "flow" && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(W, { group: l, ...r, onItemClick: m, intl: t.intl }) })
+      ] })
+    }
+  )) });
+}, se = A(Y);
 export {
-  W as default
+  se as default
 };

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

@@ -1,43 +1,43 @@
 import { jsx as g } from "react/jsx-runtime";
 import a from "react";
-import * as s from "d3";
+import * as o from "d3";
 class u extends a.Component {
   constructor(t) {
     super(t), this.svgRef = a.createRef(), this.dragged = this.dragged.bind(this);
   }
-  componentDidUpdate(t, o, r) {
+  componentDidUpdate(t, s, r) {
     if (t.projection !== this.props.projection) {
-      const n = s.geoPath().projection(this.props.projection);
+      const n = o.geoPath().projection(this.props.projection);
       this.setState({ projection: this.props.projection, path: n });
     }
-    const { rotationEnabled: i } = this.props, e = s.select(this.svgRef.current).datum({
+    const { rotationEnabled: i } = this.props, e = o.select(this.svgRef.current).datum({
       x: 0,
       y: 0
     });
-    i ? e.call(s.drag().on("drag", this.dragged)) : e.on(".drag", null);
+    i ? e.call(o.drag().on("drag", this.dragged)) : e.on(".drag", null);
   }
   componentDidMount() {
-    const { rotationEnabled: t } = this.props, o = s.select(this.svgRef.current).datum({
+    const { rotationEnabled: t } = this.props, s = o.select(this.svgRef.current).datum({
       x: 0,
       y: 0
     });
-    t && o.call(s.drag().on("drag", this.dragged));
+    t && s.call(o.drag().on("drag", this.dragged));
   }
-  dragged(t, o) {
+  dragged(t, s) {
     const r = {
       x: 0,
       y: 0
-    }, { projection: i, width: e, height: n } = this.props, c = s.scaleLinear().domain([-e, e]).range([-180, 180]), h = s.scaleLinear().domain([-n, n]).range([90, -90]), p = {
-      x: c(o.x = t.x),
-      y: h(o.y = t.y)
+    }, { projection: i, width: e, height: n } = this.props, c = o.scaleLinear().domain([-e, e]).range([-180, 180]), h = o.scaleLinear().domain([-n, n]).range([90, -90]), p = {
+      x: c(s.x = t.x),
+      y: h(s.y = t.y)
     };
     i.rotate([r.x + p.x, r.y + p.y]);
-    const d = s.geoPath().projection(i);
+    const d = o.geoPath().projection(i);
     this.setState({ projection: i, path: d });
   }
   render() {
-    const { projection: t, width: o, height: r, path: i } = this.props;
-    return /* @__PURE__ */ g("svg", { viewBox: `0 0 ${o} ${r}`, className: "map", height: r, width: o, ref: this.svgRef, children: t && this.props.children ? this.props.children.map((e) => a.cloneElement(e, {
+    const { projection: t, width: s, height: r, path: i } = this.props;
+    return /* @__PURE__ */ g("svg", { viewBox: `0 0 ${s} ${r}`, className: "map", height: r, width: "100%", ref: this.svgRef, children: t && this.props.children ? this.props.children.map((e) => a.cloneElement(e, {
       ...this.props,
       svg: this.svgRef.current,
       ...this.state

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

@@ -1,4 +1,4 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import n, { Children as h } from "react";
 import * as p from "d3";
 class f extends n.Component {
@@ -6,40 +6,41 @@ class f extends n.Component {
     super(t), this.state = {}, this.divRef = n.createRef(), this.createProjection = this.createProjection.bind(this);
   }
   createProjection() {
-    const { editing: t, height: i, width: e, scale: o = 200, center: r = [0, 0], projectionName: c } = this.props, s = p[c]().fitSize([e, i]).scale(o).center(r).translate([e / 2, i / 2]);
+    const { editing: t, height: o, width: e, scale: i = 200, center: r = [0, 0], projectionName: c } = this.props, s = p[c]().fitSize([e, o]).scale(i).center(r).translate([e / 2, o / 2]);
     return { path: p.geoPath().projection(s), projection: s };
   }
   componentDidMount() {
-    const { svg: t } = this.props, { path: i, projection: e } = this.createProjection();
-    this.setState({ path: i, projection: e });
+    const { svg: t } = this.props, { path: o, projection: e } = this.createProjection();
+    this.setState({ path: o, projection: e });
   }
-  componentDidUpdate(t, i, e) {
+  componentDidUpdate(t, o, e) {
     if (t.height !== this.props.height || t.width !== this.props.width || t.projectionName !== this.props.projectionName) {
-      const { path: o, projection: r } = this.createProjection();
-      this.setState({ path: o, projection: r });
+      const { path: i, projection: r } = this.createProjection();
+      this.setState({ path: i, projection: r });
     }
   }
   render() {
-    const { editing: t, backgroundColor: i, height: e, width: o, scale: r = 190, center: c = [0, 0], initialPosition: s, settings: a } = this.props, d = h.toArray(this.props.children);
-    return /* @__PURE__ */ m(
+    const { editing: t, backgroundColor: o, height: e, width: i, scale: r = 190, center: c = [0, 0], initialPosition: s, settings: a } = this.props, d = h.toArray(this.props.children);
+    return /* @__PURE__ */ l(
       "div",
       {
         className: "projected",
-        width: o,
+        width: i,
         height: e,
         style: {
           margin: "auto",
-          backgroundColor: i,
+          backgroundColor: o,
           height: `${e}px`,
-          width: `${o}px`
+          width: `${i}px`
         },
-        children: h.map(d, (l) => n.cloneElement(l, {
+        children: h.map(d, (j) => n.cloneElement(j, {
           ...this.state,
           initialPosition: s,
           editing: t,
           height: e,
-          width: o,
-          settings: a
+          width: i,
+          settings: a,
+          projection: this.state.projection
         }))
       }
     );

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

@@ -0,0 +1,11 @@
+import * as i from "d3";
+const e = (r) => new Promise((t, c) => {
+  i.json(r).then(function(o, n) {
+    n && console.log("Error loading JSON: " + n), t(o);
+  }).catch(function(o) {
+    console.error("Error loading JSON:", o), c(o);
+  });
+});
+export {
+  e as loadJSON
+};