@devgateway/dvz-ui-react/dist/cjs/embeddable/d3Map/LatLongLayer.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.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react/jsx-runtime"),O=require("react"),B=require("../data/DataProvider.js"),C=require("../data/DataConsumer.js"),N=require("d3"),P=require("react-intl"),J=require("react-dom"),U=require("./Tooltip.js");function _(p){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const r in p)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(p,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>p[r]})}}return t.default=p,Object.freeze(t)}const c=_(N),V=_(J);class X extends O.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=O.createRef()}showToolTip(t,r,o,n){const l=c.select("body").append("div").attr("class","d3MapTooltip").style("position","absolute").html("").style("left",n.pageX+15+"px").style("top",n.pageY-50+"px");V.render(x.jsx(U.default,{intl:this.props.intl,tooltip:t,data:r,tooltipEnableMarkdown:!1}),l._groups[0][0])}moveToolTip(t){c.select(".d3MapTooltip").style("left",t.pageX+15+"px").style("top",t.pageY-50+"px")}hiddenToolTip(t){c.selectAll(".d3MapTooltip").remove()}create(){const{app:t,tooltip:r,data:o,markFillColor:n,markBorderColor:l,markSizeScale:m,markerLabelSize:y,measures:b,projection:d,id:v,format:a,intl:S,useBreaks:j,breaks:u,pointDimensionStyles:f=[],pointStyleBy:g,dimension2:T,visible:k=!0,showDim2OnLegends:w,dim2LegendLabel:W}=this.props,I={style:a.style==="compacted"?"decimal":a.style,notation:a.style==="compacted"?"compact":"standard",currency:a.currency,minimumFractionDigits:parseInt(a.minimumFractionDigits),maximumFractionDigits:parseInt(a.maximumFractionDigits)},M=c.scaleThreshold().domain(u.map(e=>e.end)).range(u.map(e=>m+e.size)),q=c.scaleThreshold().domain(u.map(e=>e.end)).range(u.map(e=>e.color)),A=c.scaleThreshold().domain(u.map(e=>e.end)).range(u.map(e=>e.borderColor));let z=[];const D=c.select(this.gRef.current);if(t!="csv"&&o&&o.children)z=o.children.map(e=>{const i=e.value.split(",");let h={color:n,size:m,border:l},s=1;return g==="measure"?(s=e[b[0]],h={color:q(s),size:M(s),border:A(s)}):g==="dimension"&&e.children&&w&&(s=e.children[0].value,h={color:f[s+"_color"]||n,size:f[s+"_size"]||m,border:f[s+"_border"]||l}),{x:i[0],y:i[1],value:s,metadata:e,pointStyle:h}}),z.sort((e,i)=>e.pointStyle.size-i.pointStyle.size);else if(t=="csv"){const e=o.meta.fields[0],i=o.meta.fields[1],h=o.meta.fields[2];z=o.data.map(s=>{let E={color:n,size:m,border:l};return{x:s[e],y:s[i],value:s[h],meta:s,pointStyle:E}})}const L=e=>{const{pointStyleBy:i,dimension2:h}=this.props,s={};return h!="none"&&(s[h]=e.metadata.children[0].value),{...s,...e,...e.metadata}},R=this.props.transform?this.props.transform.k:1;D.attr("class","zoomable lat-long "+v),D.selectAll(".point-group").remove();const F=D.selectAll(".point-group").data(z).enter().append("g").attr("class","point-group");F.append("circle").attr("cx",function(e){return d([e.y,e.x])[0]}).attr("cy",function(e){return d([e.y,e.x])[1]}).attr("class","latLong").attr("r",e=>e.pointStyle.size*1/R).attr("stroke-width",2).style("vector-effect","non-scaling-stroke").attr("stroke",e=>e.pointStyle.border).attr("fill",e=>e.pointStyle.color).on("mouseenter",(e,i)=>{this.showToolTip(r,L(i),i.pointStyle.color,e)}).on("mousemove",(e,i)=>{this.moveToolTip(e)}).on("mouseleave",(e,i)=>{this.hiddenToolTip(e)}),F.append("text").attr("class","point-label").attr("text-anchor","middle").attr("dominant-baseline","middle").attr("x",e=>d([e.y,e.x])[0]).attr("y",e=>d([e.y,e.x])[1]).attr("font-size",e=>y*(10/R)+"px").attr("fill","#EEE").text(e=>S.formatNumber(e.value,I)).on("mouseenter",(e,i)=>{this.showToolTip(r,L(i),i.pointStyle.color,e)}).on("mousemove",(e,i)=>{this.moveToolTip(e)}).on("mouseleave",(e,i)=>{this.hiddenToolTip(e)}),this.props.transform&&D.attr("transform",this.props.transform)}componentDidUpdate(t,r,o){const{editing:n,selectedItem:l,onZoomToPoint:m,data:y}=this.props,b=c.select(this.gRef.current);if((n||JSON.stringify(t.data)!==JSON.stringify(y))&&this.create(),t.visible!=this.props.visible&&c.select(this.gRef.current).style("display",this.props.visible?"block":"none"),l!=null&&this.props.selectedItem!=t.selectedItem){const v=b.selectAll(".point-group circle").filter(a=>a.metadata.children.find(S=>S.value==l)!=null);m({x:v.datum().x,y:v.datum().y})}this.resize()}resize(){const{markerLabelSize:t}=this.props,r=c.select(this.gRef.current),o=this.props.transform?this.props.transform.k:1;r&&(r.selectAll(".point-group circle").attr("r",n=>n.pointStyle.size*1/o),r.selectAll(".point-group text.point-label").attr("font-size",n=>t*(10/o)+"px"))}componentDidMount(){this.create()}render(){const{id:t}=this.props;return x.jsx("g",{className:"latLong "+t,ref:this.gRef})}}const Y=p=>{const{id:t,unique:r,filters:o,csv:n,app:l,group:m="default",apiJoinAttribute:y,editing:b,dimension2:d,pointStyleBy:v,dvzProxyDatasetId:a,settings:S,waitForFilters:j}=p,u=d!="none"?"/"+d:"",f={},g=o||{};return g&&g.forEach&&g.forEach(T=>{T.value!=null&&T.value.filter(k=>k!=null&&k.toString().trim()!="").length>0&&(f[T.param]=T.value)}),a&&(f.dvzProxyDatasetId=a),x.jsx(B.default,{editing:b,params:f,waitForFilters:j,app:l,csv:decodeURIComponent(n),group:m,ignoreErrors:!0,isSvg:!0,store:[l,r,t],source:[y+u],children:x.jsx(C.default,{children:x.jsx(X,{...p})})})},G=P.injectIntl(Y);exports.default=G;