@devgateway/dvz-ui-react/dist/cjs/embeddable/d3Map/FlowLayer.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";const j=require("react/jsx-runtime");require("react");const W=require("./BaseLayer.js"),Y=require("../data/DataProvider.js"),G=require("../data/DataConsumer.js"),H=require("d3"),X=require("react-intl"),K=require("papaparse"),Q=require("./BreaksStyles.js");function Z(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>n[o]})}}return r.default=n,Object.freeze(r)}const O=Z(H);class $ extends W{constructor(){super(),this.createDataLayer=this.createDataLayer.bind(this)}createDataLayer(r){const{format:o,path:s,tooltip:k,markFillColor:d,markBorderColor:b,markSizeScale:L,featureJoinAttribute:p,apiJoinAttribute:A,projection:w,breaks:x,markSizeScale2:y,measures:l,zoom:C,offsetPixels:v=10}=this.props,P=l[0],D=new Q({breaks:x,defaultFillColor:d,defaultBorderColor:b,defaultSize:y});o.style==="compacted"||o.style,o.style,o.currency,parseInt(o.minimumFractionDigits),parseInt(o.maximumFractionDigits);const T=r.features.filter(t=>t.properties._value!=null);this.g=O.select(this.gRef.current),this.g.attr("class","base-layer"),this.props.transform&&this.g.attr("transform",this.props.transform),this.g.selectAll(".flow-line").remove(),this.g.selectAll(".start-point").remove(),this.g.selectAll(".end-point").remove(),this.g.select("defs").selectAll("*").remove();const _=this.props.transform?this.props.transform.k:1,E=[];T.forEach(t=>{E.push(t),t.properties.destinations.forEach(m=>{const f=m[P];debugger;r.features.filter(e=>e.properties[p]==m.value).forEach(e=>{e.properties.meta=m;const F=t.properties[p],i=t.properties[p]+"--"+e.properties[p],a=s.centroid(t),c=s.centroid(e),h=c[0]-a[0],q=c[1]-a[1],I=Math.sqrt(h*h+q*q),J=h/I,M=q/I,V=[c[0]-J*v,c[1]-M*v],N=w.invert(V),R={type:"LineString",coordinates:[w.invert(a),N]};this.g.select("defs").append("marker").attr("id","arrow"+i).attr("markerUnits","strokeWidth").attr("markerWidth","6").attr("markerHeight","6").attr("viewBox","0 0 24 24").attr("refX","6").attr("refY","6").attr("orient","auto").append("path").attr("d","M2,2 L10,6 L2,10 L6,6 L2,2").attr("d","M2,2 L10,6 L2,10 L6,6 L2,2").attr("style",S=>"fill: "+D.getColor(f)+";");const g=this.g;this.g.append("path").attr("d",s(R)).attr("class","flow-line").style("fill","none").style("cursor","pointer").style("stroke-dasharray","0").style("stroke",S=>D.getColor(f)).style("stroke-width",S=>D.getSize(f)).attr("marker-end","url(#arrow"+i+")").on("mouseenter",(S,rt)=>{if(g.selectAll("marker").transition().duration("200").style("opacity",0),g.selectAll(".start-point").transition().duration("200").style("opacity",0),g.selectAll(".flow-line").transition().duration("200").style("opacity",0),O.select(S.target).transition().duration("200").style("opacity",1),g.selectAll("#arrow"+i).transition().duration("200").style("opacity",1),g.selectAll(".start-point.circle_"+F).transition().duration("200").style("opacity",1),f){debugger;const B={},z={};Object.keys(t.properties).forEach(u=>{B["origin_"+u]=t.properties[u]}),Object.keys(e.properties).forEach(u=>{z["target_"+u]=e.properties[u]}),Object.keys(e.properties.meta).forEach(u=>{z["target_"+u]=e.properties.meta[u]});debugger;const U={...B,...z,meta:{[A]:t.properties.meta?t.properties.meta.value:"",...t.properties.meta,value:f}};this.showToolTip(k,U,D.getColor(e.properties._value))}}).on("mouseout",S=>{this.hiddenToolTip(),O.selectAll(".flow-line").transition().duration("100").style("opacity",1),g.selectAll(".start-point").transition().duration("100").style("opacity",1),g.selectAll("marker").transition().duration("100").style("opacity",1)})})})}),E.forEach(t=>{this.g.append("circle").attr("fill",d).attr("stroke",b).attr("class","start-point circle_"+t.properties[p]).attr("stroke-width",2).style("vector-effect","non-scaling-stroke").attr("cx",s.centroid(t)[0]).attr("cy",s.centroid(t)[1]).attr("r",()=>L*1/_).on("mouseenter",m=>{this.showToolTip("{name_en}",t.properties,"")}).on("mouseout",m=>{this.hiddenToolTip()})})}create(){const{app:r,name:o,file:s,path:k,csv:d,zoom:b,labelFilter:L=[],labelField:p,labelFontSize:A,labelColor:w,fillColor:x,borderColor:y,featureJoinAttribute:l,editing:C,data:v,breaks:P,markFillColor:D,markSizeScale:T,measures:_,flowValuesFrom:E}=this.props;s!="none"&&this.loadJSON(s).then(t=>{const m=t.features.map(e=>{const F=e.properties[l];if(r!="csv"&&v&&v.children){const i=v.children.filter(a=>a.value.indexOf(F)>-1);if(i.length>0){const a=i[0][_[0]];e.properties.meta=i[0],e.properties._value=a,e.properties.destinations=i[0].children}}else if(r=="csv"){const i=K.parse(d,{header:!0,dynamicTyping:!0}),a=e.properties[l];i.data.filter(h=>h.origin==a);const c=i.data.filter(h=>h.origin==a)[0];c!=null&&(alert("CSV Not implemented Yet, please do it if you have time"),e.properties.meta=c,e.properties._value=c.value,e.properties.destinations=c.destination)}return e}),f={...t,features:m};this.createDataLayer(f)})}componentDidUpdate(r,o,s){const{projection:k}=this.props;this.create()}componentDidMount(){this.create(),this.props.zoom.current.fullView()}render(){const{id:r}=this.props;return j.jsx("g",{id:"data-"+r,className:"data "+r,ref:this.gRef,children:j.jsx("defs",{})})}}const tt=n=>{const{id:r,unique:o,filters:s,csv:k,app:d,group:b="default",flowOrigin:L,editing:p,flowDestination:A,dvzProxyDatasetId:w}=n,x={dvzProxyDatasetId:w},y=s||{};return y&&y.forEach&&y.forEach(l=>{l.value!=null&&l.value.filter(C=>C!=null&&C.toString().trim()!="").length>0&&(x[l.param]=l.value)}),j.jsx(Y,{editing:p,params:x,app:d,csv:decodeURIComponent(k),group:b,ignoreErrors:!0,isSvg:!0,store:[d,o,r],source:L+"/"+A,children:j.jsx(G,{children:j.jsx($,{...n})})})},et=X.injectIntl(tt);module.exports=et;