@devgateway/dvz-ui-react/dist/esm/embeddable/d3Map/BaseLayer.js

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.

import { jsx as g } from "react/jsx-runtime";
import u from "react";
import * as b from "d3";
import R from "./Layer.js";
class L extends R {
  constructor() {
    super(), this.gRef = u.createRef();
  }
  createPaths(t) {
    const {
      path: s,
      fillColor: o,
      borderColor: a,
      projection: r
    } = this.props;
    this.gRef && this.gRef.current && (this.g = b.select(this.gRef.current), b.select(this.gRef.current.parentElement), this.g.attr("class", "base-layer"), this.g.selectAll("path").remove(), this.g.selectAll(".label").remove(), this.g.selectAll("path").data(t.features).enter().append("path").attr("fill", o).attr("stroke", a).attr("id", "state-borders").attr("d", s), this.props.transform && this.g.attr("transform", this.props.transform));
  }
  createLabels(t) {
    const {
      path: s,
      labelFilter: o = [],
      labelSettings: a = {},
      labelField: r,
      labelFontSize: l,
      labelColor: i,
      projection: n
    } = this.props;
    if (this.gRef && this.gRef.current) {
      this.g = b.select(this.gRef.current);
      const c = this.props.transform ? this.props.transform.k : 1;
      this.g.selectAll(".label").data(t.features.filter((e) => o.indexOf(e.properties[r]) == -1)).enter().append("text").attr("class", "label").attr("font-size", (e) => Math.min(l * 1 / c, l / 2) + "px").text(function(e) {
        return e.properties[r];
      }).attr("color", i).attr("fill", i).attr("transform", function(e) {
        const f = a[e.properties[r] + "_rotation"] || 0, h = a[e.properties[r] + "_offsetX"] || 0, p = a[e.properties[r] + "_offsetY"] || 0, m = s.centroid(e)[0] + h / n.scale(), d = s.centroid(e)[1] + p / n.scale();
        return "translate(" + [m, d] + "),rotate(" + (f || 0) + ")";
      }), this.props.transform && this.g.attr("transform", this.props.transform);
    }
  }
  createLayer(t) {
    this.createPaths(t), this.createLabels(t);
  }
  componentDidUpdate(t, s, o) {
    const {
      name: a,
      file: r,
      path: l,
      transform: i,
      labelFilter: n = [],
      labelField: c,
      labelFontSize: e,
      labelColor: f,
      fillColor: h,
      borderColor: p,
      projection: m,
      update: d
    } = this.props;
    (r !== t.file || l !== t.path || m !== t.projection || i !== t.transform || n !== t.labelFilter || c !== t.labelField || e !== t.labelFontSize || f !== t.labelColor || h !== t.fillColor || p !== t.borderColor) && this.create();
  }
  render() {
    const { name: t, height: s, width: o } = this.props;
    return /* @__PURE__ */ g("g", { className: "base", ref: this.gRef });
  }
}
export {
  L as default
};