@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";const $=require("react/jsx-runtime");require("react");const Z=require("./BaseLayer.js"),tt=require("../data/DataProvider.js"),et=require("../data/DataConsumer.js"),rt=require("d3"),at=require("react-intl"),ot=require("./BreaksStyles.js");function it(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const f=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(a,s,f.get?f:{enumerable:!0,get:()=>o[s]})}}return a.default=o,Object.freeze(a)}const E=it(rt),j=o=>o?o.toString().replace(/ /g,"_"):"",c=o=>o?"pattern_"+j(o):"";class st extends Z{constructor(){super(),this.createDataLayer=this.createDataLayer.bind(this)}createDataLayer(a){const{app:s,svg:f,format:n,id:b,file:A,path:h,onLayerCreated:F,labelFilter:S=[],labelField:T,labelFontSize:J,labelColor:z,fillColor:_,borderColor:i,tooltip:d,markFillColor:g,markLabelColor:L,markBorderColor:q,markSizeScale:N,markerLabelSize:p,featureJoinAttribute:O,apiJoinAttribute:l,measures:k,editing:U,data:x,patternDiscriminator:v,patternDiscriminatorLabel:G,breaks:H,patterns:D,projection:pt,useBreaks:K,useCentroidPoint:B,usePattern:Q,intl:V}=this.props,w=new ot({breaks:H,defaultFillColor:g,defaultBorderColor:q,defaultSize:N});if(this.gRef&&this.gRef.current){this.g=E.select(this.gRef.current);const X={style:n.style==="compacted"?"decimal":n.style,notation:n.style==="compacted"?"compact":"standard",currency:n.currency,minimumFractionDigits:parseInt(n.minimumFractionDigits),maximumFractionDigits:parseInt(n.maximumFractionDigits)},M=a.features.filter(t=>t.properties._value!=null),W=t=>t.properties._value?{...t.properties,meta:{[l]:t.properties.meta?t.properties.meta.value:"",...t.properties.meta,value:t.properties._value}}:{};this.g.attr("class","base-layer"),this.createPaths(a),this.g.selectAll(".point").remove(),this.g.selectAll(".point-label").remove(),this.g.selectAll(".shape-pattern").remove(),this.g.selectAll("defs").remove();const I=this.props.transform?this.props.transform.k:1,y=10*1/I,P=10*1/I,C=this.g.append("defs");let u=[];if(s=="csv"&&v!="none")u=[...new Set(x.data.map(t=>t[v]))].map(t=>({key:t,type:D[t+"_symbol"],color:D[t+"_color"],rotation:D[t+"_rotation"]}));else if(v!="none"){const t=x.metadata.types.filter(r=>r.dimension==v);debugger;u=t&&t.length>0?t[0].items.map(r=>{const e=r.value;return{key:e,type:D[e+"_symbol"],color:D[e+"_color"],rotation:D[e+"_rotation"]}}):[]}if(C.selectAll("pattern").remove(),C.selectAll("pattern").data(u).enter().append("pattern").attr("id",t=>c(t.key)).attr("patternUnits","userSpaceOnUse").attr("width",y).attr("height",P).attr("x",0).attr("y",0).attr("patternTransform",t=>`rotate(${t.rotation})`),u.forEach(t=>{t.type==="lines"&&C.select("#"+c(t.key)).append("rect").attr("x",.05).attr("width",y/2).attr("height",P).attr("opacity",1).attr("fill",t.color),t.type==="squares"&&C.select("#"+c(t.key)).append("rect").attr("width",y/2).attr("height",P/2).attr("fill",t.color).attr("opacity",1).attr("stroke-width",1),t.type==="dots"&&C.select("#"+c(t.key)).append("circle").attr("cx",y/2).attr("cy",P/2).attr("r",y/2.5).attr("fill",t.color).attr("opacity",1).attr("stroke-width",1),t.type==="triangle"&&C.select("#"+c(t.key)).append("polygon").attr("points",`${y/2} 0, 0 ${y}, ${y}  ${y} `).attr("fill",t.color).attr("opacity",1).attr("stroke-width",1)}),B||(this.g.selectAll("path").attr("fill",t=>!t||!t.properties||!t.properties._value?_:w.getColor(t.properties._value)).attr("stroke",i).attr("id","state-borders").attr("d",h).on("mouseenter",(t,r)=>{r.properties._value&&this.showToolTip(d,W(r),w.getColor(r.properties._value),r)}).on("mouseleave",t=>{this.hiddenToolTip(t)}).on("mousemove",t=>{this.moveToolTip(t)}),this.createLabels(a)),Q&&a&&a.features){debugger;a.features.forEach(e=>{let m=[];e.properties&&e.properties.meta&&(m=s!="csv"?e.properties.meta[v]?e.properties.meta[v]:[]:[e.properties.meta[v]],m&&m.length>0&&m.forEach(Y=>{this.g.append("path").attr("d",h(e)).attr("class","shape-pattern").attr("opacity",R=>{if(K)return .7}).attr("fill",R=>"transparent").attr("style",()=>"none;fill:url(#"+c(Y)+");").on("mouseenter",()=>{this.showToolTip(d,W(e),w.getColor(e.properties._value))}).on("mousemove",R=>{this.moveToolTip()}).on("mouseleave",R=>{this.hiddenToolTip()})}))});debugger;u=u.filter(e=>e.type!=null).sort((e,m)=>new Intl.Collator(V.locale,{caseFirst:"upper",numeric:!0,sensitivity:"variant"}).compare(e.key,m.key)),E.select(this.gRef.current.parentNode.parentNode).select(`.layer_${j(b)}`).select("svg").remove();const t=E.select(this.gRef.current.parentNode.parentNode).select(`.layer_${j(b)}`).append("svg"),r=t.append("defs");r.selectAll("pattern").remove(),r.selectAll("pattern").data(u).enter().append("pattern").attr("id",e=>"l_"+c(e.key)).attr("patternUnits","userSpaceOnUse").attr("width",5).attr("height",5).attr("x",0).attr("y",0).attr("patternTransform",e=>`rotate(${e.rotation?e.rotation:0})`),u.forEach(e=>{e.type==="lines"&&r.select("#l_"+c(e.key)).append("rect").attr("x",0).attr("width",1).attr("height",10).attr("opacity",.75).attr("fill",e.color),e.type==="squares"&&r.select("#l_"+c(e.key)).append("rect").attr("width",3).attr("height",3).attr("fill",e.color).attr("opacity",1).attr("stroke-width",1),e.type==="dots"&&r.select("#l_"+c(e.key)).append("circle").attr("cx",2).attr("cy",2).attr("r",2).attr("fill",e.color).attr("opacity",1).attr("stroke-width",1),e.type==="triangle"&&r.select("#l_"+c(e.key)).append("polygon").attr("points","5,0 8,8 0,5").attr("fill",e.color).attr("opacity",1).attr("stroke-width",1)}),t.attr("width","150px").attr("height",u.length*30+"px"),t.append("text").attr("class","patterns-title").attr("y",5).attr("x",12).text(e=>s==="csv"?v:G),t.selectAll(".legend-squares").data(u).enter().append("rect").attr("width",18).attr("height",18).attr("y",(e,m)=>m*22+25).attr("x",20).attr("stroke",i).attr("style",e=>"none;fill:url(#l_"+c(e.key)+");"),t.selectAll(".patterns-labels").data(u).enter().append("text").attr("class","patterns-labels").attr("y",(e,m)=>m*22+25).attr("x",40).text(e=>e.key)}B&&(this.createLabels(a),this.g.selectAll(".point").data(M).enter().append("circle").attr("fill",t=>w.getColor(t.properties._value,!0)).attr("stroke",q).attr("class","point").attr("stroke-width",2).style("vector-effect","non-scaling-stroke").attr("cx",t=>h.centroid(t)[0]).attr("cy",t=>h.centroid(t)[1]).attr("r",t=>w.getSize(t.properties._value)*1/I).on("mouseenter",(t,r)=>{if(r.properties._value){const e={...r.properties,meta:{[l]:r.properties.meta?r.properties.meta.value:"",...r.properties.meta,value:r.properties._value}};this.showToolTip(d,e,w.getColor(r.properties._value))}}).on("mouseleave",t=>{this.hiddenToolTip()}),this.g.selectAll(".point-label").data(M).enter().append("text").attr("class","point-label").attr("x",t=>h.centroid(t)[0]).attr("y",t=>h.centroid(t)[1]).attr("font-size",t=>p*(1/I)+"px").attr("fill",L).text(t=>V.formatNumber(n.style==="percent"?t.properties._value/100:t.properties._value,X)).on("mouseover",t=>{}))}}create(){const{app:a,name:s,file:f,path:n,zoom:b,labelFilter:A=[],labelField:h,labelFontSize:F,labelColor:S,fillColor:T,borderColor:J,featureJoinAttribute:z,editing:_,data:i,measures:d,patternDiscriminator:g}=this.props;f!="none"&&this.loadJSON(f).then(L=>{const q=L.features.map(p=>{const O=p.properties[z];if(a!="csv"&&i&&i.children){const l=i.children.filter(k=>k.value==O);if(l.length>0){const k=l[0][d[0]];if(p.properties.meta=l[0],p.properties._value=k,g&&g!="none"){const U=l[0]&&l[0].children?l[0].children.filter(x=>x.type==g).map(x=>x.value):[];p.properties.meta[g]=U}}else p.properties._value=null}else if(a=="csv"){const l=i.data.filter(k=>k[i.meta.fields[0]]==O);l.length>0?(p.properties.meta=l[0],p.properties._value=l[0][i.meta.fields[1]]):p.properties._value=null}else p.properties._value=null;return p}),N={...L,features:q};this.createDataLayer(N)})}componentDidUpdate(a,s,f){const{projection:n}=this.props;this.create()}componentDidMount(){this.create(),this.props.zoom.current.fullView()}render(){const{id:a,file:s,path:f,zoom:n,labelFilter:b=[],labelField:A,labelFontSize:h,labelColor:F,fillColor:S,borderColor:T,featureJoinAttribute:J,apiJoinAttribute:z,dvzProxyDatasetId:_,editing:i}=this.props;return $.jsx("g",{id:"data-"+a,className:"data "+a,ref:this.gRef})}}const lt=o=>{const{id:a,unique:s,filters:f,csv:n,app:b,group:A="default",apiJoinAttribute:h,editing:F,patternDiscriminator:S,dvzProxyDatasetId:T,intl:J,settings:z}=o,_={},i=f||{};return i&&i.forEach&&i.forEach(d=>{d.value!=null&&d.value.filter(g=>g!=null&&g.toString().trim()!="").length>0&&(_[d.param]=d.value)}),T&&(_.dvzProxyDatasetId=T),$.jsx(tt,{editing:F,params:_,app:b,csv:decodeURIComponent(n),group:A,ignoreErrors:!0,isSvg:!0,store:[b,s,a],source:h+(S!="none"?"/"+S:""),children:$.jsx(et,{children:$.jsx(st,{...o})})})},nt=at.injectIntl(lt);module.exports=nt;