@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.
249 lines (248 loc) • 11.5 kB
JavaScript
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
};