@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.
60 lines (59 loc) • 2.08 kB
JavaScript
import { jsx as s } from "react/jsx-runtime";
import r from "react";
import { createRoot as n } from "react-dom/client";
import * as o from "d3";
import p from "./Tooltip.js";
import { loadJSON as h } from "./Utils.js";
let g = class extends r.Component {
constructor() {
super(), this.loadJSON = this.loadJSON.bind(this), this.create = this.create.bind(this), this.createLayer = this.createLayer.bind(this), this.loadJSON = this.loadJSON.bind(this), this.showToolTip = this.showToolTip.bind(this), this.moveToolTip = this.moveToolTip.bind(this), this.gRef = r.createRef(), this.state = { json: null };
}
loadJSON(t) {
return h(t);
}
createLayer(t) {
alert("please implement createLayer");
}
applyInitialTransform() {
const { editing: t, initialPosition: e, width: i, height: a } = this.props;
o.select(this.gRef.current).attr("transform", `translate(${e.x},${e.y}) scale(${e.k})`);
}
create() {
const {
file: t
} = this.props;
this.state.json ? this.createLayer(this.state.json) : this.loadJSON(t).then((e) => {
this.createLayer(e);
});
}
showToolTip(t, e, i, a) {
if (e) {
const l = o.select("body").append("div").attr("class", "d3MapTooltip").style("position", "absolute").html("").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
n(l._groups[0][0]).render(/* @__PURE__ */ s(
p,
{
intl: this.props.intl,
tooltip: t,
data: e,
tooltipEnableMarkdown: !1
}
));
}
}
moveToolTip(t) {
o.select(".d3MapTooltip").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
}
hiddenToolTip(t) {
o.selectAll(".d3MapTooltip").remove();
}
componentDidMount() {
this.props.zoom && this.gRef.current && this.applyInitialTransform(), this.create();
}
render() {
const { name: t, height: e, width: i } = this.props;
return /* @__PURE__ */ s("g", { className: "layer", ref: this.gRef });
}
};
export {
g as default
};