@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.
51 lines (50 loc) • 1.72 kB
JavaScript
import { jsx as m } 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: i, width: e, scale: o = 200, center: r = [0, 0], projectionName: c } = this.props, s = p[c]().fitSize([e, i]).scale(o).center(r).translate([e / 2, i / 2]);
return { path: p.geoPath().projection(s), projection: s };
}
componentDidMount() {
const { svg: t } = this.props, { path: i, projection: e } = this.createProjection();
this.setState({ path: i, projection: e });
}
componentDidUpdate(t, i, e) {
if (t.height !== this.props.height || t.width !== this.props.width || t.projectionName !== this.props.projectionName) {
const { path: o, projection: r } = this.createProjection();
this.setState({ path: o, projection: r });
}
}
render() {
const { editing: t, backgroundColor: i, height: e, width: o, scale: r = 190, center: c = [0, 0], initialPosition: s, settings: a } = this.props, d = h.toArray(this.props.children);
return /* @__PURE__ */ m(
"div",
{
className: "projected",
width: o,
height: e,
style: {
margin: "auto",
backgroundColor: i,
height: `${e}px`,
width: `${o}px`
},
children: h.map(d, (l) => n.cloneElement(l, {
...this.state,
initialPosition: s,
editing: t,
height: e,
width: o,
settings: a
}))
}
);
}
}
export {
f as default
};