@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.
175 lines (174 loc) • 6.84 kB
JavaScript
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 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.resize = this.resize.bind(this), this.gRef = I.createRef();
}
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: e,
data: n,
tooltipEnableMarkdown: !1
}
), l._groups[0][0]);
}
moveToolTip(e) {
p.select(".d3MapTooltip").style("left", e.pageX + 15 + "px").style("top", e.pageY - 50 + "px");
}
hiddenToolTip(e) {
p.selectAll(".d3MapTooltip").remove();
}
create() {
const {
app: e,
tooltip: n,
data: r,
markFillColor: s,
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: o[0],
y: o[1],
value: i,
metadata: t,
pointStyle: u
};
}), 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: i[t],
y: i[o],
value: i[u],
meta: i,
pointStyle: N
};
});
}
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(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: e
} = this.props;
return /* @__PURE__ */ b("g", { className: "latLong " + e, ref: this.gRef });
}
}
const V = (k) => {
const {
id: e,
unique: n,
filters: r,
csv: s,
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: y,
params: h,
waitForFilters: L,
app: l,
csv: decodeURIComponent(s),
group: m,
ignoreErrors: !0,
isSvg: !0,
store: [l, n, e],
source: [g + d],
children: /* @__PURE__ */ b(_, { children: /* @__PURE__ */ b(U, { ...k }) })
}
);
}, K = j(V);
export {
K as default
};