@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.
52 lines (51 loc) • 1.76 kB
JavaScript
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 {
constructor(t) {
super(t), this.state = {}, this.divRef = n.createRef(), this.createProjection = this.createProjection.bind(this);
}
createProjection() {
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: o, projection: e } = this.createProjection();
this.setState({ path: o, projection: e });
}
componentDidUpdate(t, o, e) {
if (t.height !== this.props.height || t.width !== this.props.width || t.projectionName !== this.props.projectionName) {
const { path: i, projection: r } = this.createProjection();
this.setState({ path: i, projection: r });
}
}
render() {
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: i,
height: e,
style: {
margin: "auto",
backgroundColor: o,
height: `${e}px`,
width: `${i}px`
},
children: h.map(d, (j) => n.cloneElement(j, {
...this.state,
initialPosition: s,
editing: t,
height: e,
width: i,
settings: a,
projection: this.state.projection
}))
}
);
}
}
export {
f as default
};