@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
187 lines (186 loc) • 7.64 kB
JavaScript
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
};