@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.
185 lines (184 loc) • 7.85 kB
JavaScript
import { jsx as F } from "react/jsx-runtime";
import "react";
import q from "./BaseLayer.js";
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(i) {
const {
format: s,
path: a,
tooltip: v,
markFillColor: y,
markBorderColor: k,
markSizeScale: L,
//circle size
featureJoinAttribute: m,
apiJoinAttribute: A,
projection: w,
breaks: C,
markSizeScale2: x,
//arrow size
measures: u,
zoom: g,
offsetPixels: n = 10,
waitForFilters: V
} = this.props, E = u[0], D = new Q({
breaks: C,
defaultFillColor: y,
defaultBorderColor: k,
defaultSize: x
});
s.style === "compacted" || s.style, s.style, s.currency, parseInt(s.minimumFractionDigits), parseInt(s.maximumFractionDigits);
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: [
w.invert(d),
// Start in geo coords
U
// New endpoint before d2
]
}, 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];
});
const Y = {
...J,
...j,
meta: {
[A]: t.properties.meta ? t.properties.meta.value : "",
...t.properties.meta,
value: e
}
};
this.showToolTip(v, Y, D.getColor(r.properties._value));
}
}).on("mouseout", (S) => {
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");
});
});
}), 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", (l) => {
this.hiddenToolTip();
});
});
}
create() {
const {
app: i,
name: s,
file: a,
path: v,
csv: y,
zoom: k,
labelFilter: L = [],
labelField: m,
labelFontSize: A,
labelColor: w,
fillColor: C,
borderColor: x,
featureJoinAttribute: u,
editing: g,
data: n,
breaks: V,
markFillColor: E,
markSizeScale: D,
measures: P,
flowValuesFrom: I
} = this.props;
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 (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;
}), l = { ...b, features: t };
this.createDataLayer(l);
});
}
componentDidUpdate(i, s, a) {
const { projection: v } = this.props;
this.create();
}
componentDidMount() {
this.create(), this.props.zoom.current.fullView();
}
render() {
const { id: i } = this.props;
return /* @__PURE__ */ F("g", { id: "data-" + i, className: "data " + i, ref: this.gRef, children: /* @__PURE__ */ F("defs", {}) });
}
}
const $ = (z) => {
const {
id: i,
unique: s,
filters: a,
csv: v,
app: y,
group: k = "default",
flowOrigin: L,
editing: m,
flowDestination: A,
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: m,
params: x,
waitForFilters: C,
app: y,
csv: decodeURIComponent(v),
group: k,
ignoreErrors: !0,
isSvg: !0,
store: [y, s, i],
source: L + "/" + A,
children: /* @__PURE__ */ F(H, { children: /* @__PURE__ */ F(Z, { ...z }) })
}
);
}, pt = X($);
export {
pt as default
};