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