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