@devgateway/dvz-ui-react/dist/cjs/embeddable/d3Map/DataLayer.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 Z=require("react/jsx-runtime");require("react");const pe=require("./BaseLayer.js"),ce=require("../data/DataProvider.js"),ue=require("../data/DataConsumer.js"),de=require("d3"),he=require("react-intl"),Y=require("./BreaksStyles.js"),oe=require("./GradientColors.js");function fe(h){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const i in h)if(i!=="default"){const f=Object.getOwnPropertyDescriptor(h,i);Object.defineProperty(t,i,f.get?f:{enumerable:!0,get:()=>h[i]})}}return t.default=h,Object.freeze(t)}const M=fe(de),W=h=>h?h.toString().replace(/ /g,"_"):"",S=h=>h?"pattern_"+W(h):"";class me extends pe.default{constructor(){super(),this.state={geoJson:null,json:null},this.getTooltipVariables=this.getTooltipVariables.bind(this),this.resize=this.resize.bind(this),this.createLayer=this.createLayer.bind(this),this.createCentroids=this.createCentroids.bind(this),this.createPatterns=this.createPatterns.bind(this),this.createPaths=this.createPaths.bind(this)}createLayer(t){const i=this.joinData(t,this.props.app,this.props.featureJoinAttribute,this.props.data,this.props.measures,this.props.patternDiscriminator);this.createDataLayer(i),this.props.onReady&&this.props.onReady()}resize(){const{markerLabelSize:t,markFillColor:i,markBorderColor:f,markSizeScale:s,measures:u,data:m,breaks:c,gradientScheme:z,gradientReverse:l,labelFontSize:g}=this.props,n=this.props.transform?this.props.transform.k:1;super.resize();const d=new Y.default({breaks:c,defaultFillColor:i,defaultBorderColor:f,defaultSize:s});new oe.default({data:m.children,measure:u[0],defaultFillColor:i,gradientScheme:z,gradientReverse:l}),this.g.selectAll(".centroids .point").attr("r",p=>d.getSize(p.properties._value)*1/n),this.g.selectAll(".point-label").attr("font-size",p=>t*(1/n)+"px")}getTooltipVariables(t){const{apiJoinAttribute:i}=this.props;return t.properties._value?{...t.properties,meta:{[i]:t.properties.meta?t.properties.meta.value:"",...t.properties.meta,value:t.properties._value}}:{}}createDataLayer(t){const{app:i,svg:f,format:s,id:u,file:m,path:c,onLayerCreated:z,labelFilter:l=[],labelField:g,labelFontSize:n,labelColor:d,fillColor:p,borderColor:b,tooltip:D,markFillColor:v,markLabelColor:T,markBorderColor:J,markSizeScale:j,markerLabelSize:H,featureJoinAttribute:ee,apiJoinAttribute:K,measures:N,editing:te,data:L,patternDiscriminator:_,patternDiscriminatorLabel:Q,breaks:q,gradientScheme:I,gradientReverse:$,patterns:w,projection:re,useBreaks:X,useGradients:V,useCentroidPoint:O,usePattern:G,waitForFilters:ae,intl:E,patternsVisible:R=!0,togglePatterns:B,colorLayerVisible:U=!0,visible:ie}=this.props;if(this.gRef&&this.gRef.current){this.g=M.select(this.gRef.current),this.g.attr("class","base-layer");const F=t.features.filter(A=>A.properties._value!=null);this.createPaths(t),O||this.createColors(F),G&&this.createPatterns(t),g!="none"&&this.createLabels(t),O&&this.createCentroids(F)}}createColors(t){const{app:i,svg:f,format:s,id:u,file:m,path:c,onLayerCreated:z,labelFilter:l=[],labelField:g,labelFontSize:n,labelColor:d,fillColor:p,borderColor:b,tooltip:D,markFillColor:v,markLabelColor:T,markBorderColor:J,markSizeScale:j,markerLabelSize:H,featureJoinAttribute:ee,apiJoinAttribute:K,measures:N,editing:te,data:L,patternDiscriminator:_,patternDiscriminatorLabel:Q,breaks:q,gradientScheme:I,gradientReverse:$,patterns:w,projection:re,useBreaks:X,useGradients:V,useCentroidPoint:O,usePattern:G,waitForFilters:ae,intl:E,patternsVisible:R=!0,togglePatterns:B,colorLayerVisible:U=!0,visible:ie}=this.props,F=new Y.default({breaks:q,defaultFillColor:v,defaultBorderColor:J,defaultSize:j}),A=new oe.default({data:L.children,measure:N[0],defaultFillColor:v,gradientScheme:I,gradientReverse:$});this.g&&(this.g.selectAll("path").attr("fill",o=>!o||!o.properties||!o.properties._value?p:V?A.getColor(o.properties._value):F.getColor(o.properties._value)).attr("stroke",b).attr("id","state-borders").attr("d",c).on("mouseenter",(o,C)=>{C.properties._value&&this.showToolTip(D,this.getTooltipVariables(C),V?A.getColor(C.properties._value):F.getColor(C.properties._value),C)}).on("mouseleave",o=>{this.hiddenToolTip(o)}).on("mousemove",o=>{this.moveToolTip(o)}),U||this.g.selectAll(".borders").style("fill",this.props.fillColor),this.g.attr("transform",this.props.transform))}createCentroids(t){const{app:i,svg:f,format:s,id:u,file:m,path:c,onLayerCreated:z,labelFilter:l=[],labelField:g,labelFontSize:n,labelColor:d,fillColor:p,borderColor:b,tooltip:D,markFillColor:v,markLabelColor:T,markBorderColor:J,markSizeScale:j,markerLabelSize:H,featureJoinAttribute:ee,apiJoinAttribute:K,measures:N,editing:te,data:L,patternDiscriminator:_,patternDiscriminatorLabel:Q,breaks:q,gradientScheme:I,gradientReverse:$,patterns:w,projection:re,useBreaks:X,useGradients:V,useCentroidPoint:O,usePattern:G,waitForFilters:ae,intl:E,patternsVisible:R=!0,togglePatterns:B,colorLayerVisible:U=!0,visible:ie}=this.props,F=new Y.default({breaks:q,defaultFillColor:v,defaultBorderColor:J,defaultSize:j}),A=new oe.default({data:L.children,measure:N[0],defaultFillColor:v,gradientScheme:I,gradientReverse:$});if(this.g){const o={style:s.style==="compacted"?"decimal":s.style,notation:s.style==="compacted"?"compact":"standard",currency:s.currency,minimumFractionDigits:parseInt(s.minimumFractionDigits),maximumFractionDigits:parseInt(s.maximumFractionDigits)},C=this.props.transform?this.props.transform.k:1;this.g.selectAll(".centroids").remove();const y=this.g.selectAll("centroids").data(t).enter().append("g").attr("class","centroids");y.append("circle").attr("fill",a=>V?A.getColor(a.properties._value):F.getColor(a.properties._value,!0)).attr("stroke",J).attr("class","point").attr("stroke-width",2).style("vector-effect","non-scaling-stroke").attr("cx",a=>c.centroid(a)[0]).attr("cy",a=>c.centroid(a)[1]).attr("r",a=>F.getSize(a.properties._value)*1/C).on("mouseenter",(a,e)=>{if(e.properties._value){const k={...e.properties,meta:{[K]:e.properties.meta?e.properties.meta.value:"",...e.properties.meta,value:e.properties._value}};this.showToolTip(D,k,V?A.getColor(e.properties._value):F.getColor(e.properties._value))}}).on("mouseleave",a=>{this.hiddenToolTip()}),y.append("text").attr("class","point-label").attr("x",a=>c.centroid(a)[0]).attr("y",a=>c.centroid(a)[1]).attr("font-size",a=>H*(1/C)+"px").attr("text-anchor","middle").attr("dominant-baseline","middle").style("pointer-events","none").attr("fill",T).text(a=>E.formatNumber(s.style==="percent"?a.properties._value/100:a.properties._value,o)).on("mouseover",a=>{}),U||this.g.selectAll(".centroids").style("display","none")}}createPatterns(t){const{app:i,svg:f,format:s,id:u,file:m,path:c,onLayerCreated:z,labelFilter:l=[],labelField:g,labelFontSize:n,labelColor:d,fillColor:p,borderColor:b,tooltip:D,markFillColor:v,markLabelColor:T,markBorderColor:J,markSizeScale:j,markerLabelSize:H,featureJoinAttribute:ee,apiJoinAttribute:K,measures:N,editing:te,data:L,patternDiscriminator:_,patternDiscriminatorLabel:Q,breaks:q,gradientScheme:I,gradientReverse:$,patterns:w,projection:re,useBreaks:X,useGradients:V,useCentroidPoint:O,usePattern:G,waitForFilters:ae,intl:E,patternsVisible:R=!0,togglePatterns:B,colorLayerVisible:U=!0,visible:ie}=this.props,F=new Y.default({breaks:q,defaultFillColor:v,defaultBorderColor:J,defaultSize:j}),A=this.props.transform?this.props.transform.k:1,o=10*1/A,C=10*1/A;let y=[];if(i=="csv"&&_!="none")y=[...new Set(L.data.map(e=>e[_]))].map(e=>({key:e,type:w[e+"_symbol"],color:w[e+"_color"],rotation:w[e+"_rotation"]}));else if(_!="none"){const e=L.metadata?L.metadata.types.filter(k=>k.dimension==_):[];y=e&&e.length>0?e[0].items.map(k=>{const x=k.value;return{key:x,type:w[x+"_symbol"],color:w[x+"_color"],rotation:w[x+"_rotation"]}}):[]}this.g.selectAll("defs").remove();const a=this.g.append("defs");if(a.selectAll("pattern").remove(),a.selectAll("pattern").data(y).enter().append("pattern").attr("id",e=>S(e.key)).attr("patternUnits","userSpaceOnUse").attr("width",o).attr("height",C).attr("x",0).attr("y",0).attr("patternTransform",e=>`rotate(${e.rotation})`),y.forEach(e=>{e.type==="lines"&&a.select("#"+S(e.key)).append("rect").attr("x",.05).attr("width",o/2).attr("height",C).attr("opacity",1).attr("fill",e.color),e.type==="squares"&&a.select("#"+S(e.key)).append("rect").attr("width",o/2).attr("height",C/2).attr("fill",e.color).attr("opacity",1).attr("stroke-width",1),e.type==="dots"&&a.select("#"+S(e.key)).append("circle").attr("cx",o/2).attr("cy",C/2).attr("r",o/2.5).attr("fill",e.color).attr("opacity",1).attr("stroke-width",1),e.type==="triangle"&&a.select("#"+S(e.key)).append("polygon").attr("points",`${o/2} 0, 0 ${o}, ${o}  ${o} `).attr("fill",e.color).attr("opacity",1).attr("stroke-width",1)}),y=y.filter(e=>e.type!=null).sort((e,k)=>new Intl.Collator(E.locale,{caseFirst:"upper",numeric:!0,sensitivity:"variant"}).compare(e.key,k.key)),G&&t&&t.features){this.g.selectAll(".shape-pattern").remove(),R&&t.features.forEach(r=>{let P=[];r.properties&&r.properties.meta&&(P=i!="csv"?r.properties.meta[_]?r.properties.meta[_]:[]:[r.properties.meta[_]],P&&P.length>0&&P.forEach(le=>{this.g.append("path").attr("d",c(r)).datum(le).attr("class","shape-pattern").attr("opacity",se=>{if(X)return .7}).attr("fill",se=>"transparent").attr("style",()=>"none;fill:url(#"+S(le)+");").on("mouseenter",()=>{this.showToolTip(D,this.getTooltipVariables(r),V?gradientColors.getColor(r.properties._value):F.getColor(r.properties._value))}).on("mousemove",se=>{this.moveToolTip()}).on("mouseleave",se=>{this.hiddenToolTip()})}))}),M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(u)}`).select("svg").remove();const e=M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(u)}`).append("svg");e.attr("height",30+y.length*23+"px");const k=e.append("svg").append("g"),x=k.append("defs");x.selectAll("pattern").remove(),R&&(x.selectAll("pattern").data(y).enter().append("pattern").attr("id",r=>"l_"+S(r.key)).attr("patternUnits","userSpaceOnUse").attr("width",5).attr("height",5).attr("x",0).attr("y",0).attr("patternTransform",r=>`rotate(${r.rotation?r.rotation:0})`),y.forEach(r=>{r.type==="lines"&&x.select("#l_"+S(r.key)).append("rect").attr("x",0).attr("width",1).attr("height",10).attr("opacity",.75).attr("fill",r.color),r.type==="squares"&&x.select("#l_"+S(r.key)).append("rect").attr("width",3).attr("height",3).attr("fill",r.color).attr("opacity",1).attr("stroke-width",1),r.type==="dots"&&x.select("#l_"+S(r.key)).append("circle").attr("cx",2).attr("cy",2).attr("r",2).attr("fill",r.color).attr("opacity",1).attr("stroke-width",1),r.type==="triangle"&&x.select("#l_"+S(r.key)).append("polygon").attr("points","5,0 8,8 0,5").attr("fill",r.color).attr("opacity",1).attr("stroke-width",1)}));let ne=R?"☑ ":"☐ ";k.append("text").attr("class","patterns-checkbox").attr("x",10).attr("y",20).text(r=>ne).attr("font-size","22px").on("click",()=>{B&&B(u)}),k.append("text").attr("class","patterns-title").attr("x",25).attr("y",7).text(r=>i==="csv"?_:Q).on("click",()=>{B&&B(u)}),R&&(k.selectAll(".legend-squares").data(y).enter().append("rect").attr("width",15).attr("height",15).attr("y",(r,P)=>P*22+30).attr("x",15).attr("stroke",b).attr("style",r=>"none;fill:url(#l_"+S(r.key)+");"),k.selectAll(".patterns-labels").data(y).enter().append("text").attr("class","patterns-labels").attr("y",(r,P)=>P*22+30).attr("x",32).text(r=>r.key))}}joinData(t,i,f,s,u,m){const c=t.features.map(l=>{const g=l.properties[f];if(i!="csv"&&s&&s.children){const n=s.children.filter(d=>d.value==g);if(n.length>0){const d=n[0][u[0]];if(l.properties.meta=n[0],l.properties._value=d,m&&m!="none"){const p=n[0]&&n[0].children?n[0].children.filter(b=>b.type==m).map(b=>b.value):[];l.properties.meta[m]=p}}else l.properties._value=null}else if(i=="csv"){const n=s.data.filter(d=>d[s.meta.fields[0]]==g);n.length>0?(l.properties.meta=n[0],l.properties._value=n[0][s.meta.fields[1]]):l.properties._value=null}else l.properties._value=null;return l});return{...t,features:c}}componentDidUpdate(t,i,f){const{app:s,file:u,featureJoinAttribute:m,data:c,measures:z,patternDiscriminator:l,editing:g,usePattern:n}=this.props;if((g||JSON.stringify(t.data)!==JSON.stringify(c))&&this.create(),t.visible!=this.props.visible){debugger;this.g.style("display",this.props.visible?"":"none")}if(t.patternsVisible!=this.props.patternsVisible){const p=M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(this.props.id)}`);p.select(".patterns-checkbox").text(this.props.patternsVisible?"☑ ":"☐ "),p.selectAll(".patterns-labels").style("display",this.props.patternsVisible?"":"none"),p.selectAll("rect").style("display",this.props.patternsVisible?"":"none"),p.select("svg").attr("height",this.props.patternsVisible?30+(p.selectAll("rect").size()-1)*23+"px":"30px"),this.g.selectAll(".shape-pattern").style("display",this.props.patternsVisible?"":"none")}t.colorLayerVisible!=this.props.colorLayerVisible&&(this.g.selectAll(".borders").style("fill",d=>{debugger;return this.props.colorLayerVisible?null:this.props.fillColor}),this.g.selectAll(".centroids").style("display",this.props.colorLayerVisible?"block":"none")),t.usePattern!=this.props.usePattern&&(this.props.usePattern||M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(this.props.id)}`).select("svg").remove()),this.g&&this.resize()}componentDidMount(){super.componentDidMount()}render(){const{id:t,file:i,path:f,zoom:s,labelFilter:u=[],labelField:m,labelFontSize:c,labelColor:z,fillColor:l,borderColor:g,featureJoinAttribute:n,apiJoinAttribute:d,dvzProxyDatasetId:p,editing:b}=this.props;return Z.jsx("g",{id:"data-"+t,className:"data "+t,ref:this.gRef})}}const ge=h=>{const{id:t,unique:i,filters:f,csv:s,app:u,group:m="default",apiJoinAttribute:c,editing:z,patternDiscriminator:l,dvzProxyDatasetId:g,intl:n,settings:d,waitForFilters:p}=h,b={},D=f||{};return D&&D.forEach&&D.forEach(v=>{v.value!=null&&v.value.filter(T=>T!=null&&T.toString().trim()!="").length>0&&(b[v.param]=v.value)}),g&&(b.dvzProxyDatasetId=g),Z.jsx(ce.default,{waitForFilters:p,editing:z,params:b,app:u,csv:decodeURIComponent(s),group:m,ignoreErrors:!0,isSvg:!0,store:[u,i,t],source:c+(l!="none"?"/"+l:""),children:Z.jsx(ue.default,{children:Z.jsx(me,{...h})})})},be=he.injectIntl(ge);exports.default=be;