@devgateway/dvz-ui-react/dist/cjs/embeddable/map/map.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";var q=Object.defineProperty;var Z=(x,F,e)=>F in x?q(x,F,{enumerable:!0,configurable:!0,writable:!0,value:e}):x[F]=e;var B=(x,F,e)=>Z(x,typeof F!="symbol"?F+"":F,e);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),U=require("react-intl"),$=require("d3"),M=require("semantic-ui-react"),_=require("react"),J=require("topojson-client"),X=require("./legend.js"),j=require("../common/MapTooltip.js"),T=require("../../utils/deviceType.js"),Y=require("geostats"),K=require("../../conf/index.js");function V(x){const F=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(x){for(const e in x)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(x,e);Object.defineProperty(F,e,s.get?s:{enumerable:!0,get:()=>x[e]})}}return F.default=x,Object.freeze(F)}const b=V($),Q=V(J);function P(x,F,e){var l;if(!(x!=null&&x.length))return F;const s=((l=x[0])==null?void 0:l.items)??[],i=o=>(o==null?void 0:o.trim().toLowerCase())??"",a=i(F),t=i(e).toUpperCase(),r=s.find(o=>i(o.value)===a||o.code.trim().toLowerCase()===a)??null;if(!r)return F;const n=t&&r.labels&&r.labels[t]?r.labels[t]:r.value;return(n==null?void 0:n.trim())||r.value.trim()}const ee="_Color_",W="location",E="showAll",S="ifUnitHasData",te=10,se={mobile:4,tablet:4,midTablet:2,laptop:2,desktop:2,wide:2},ie={mobile:330,tablet:250,midTablet:250,laptop:200,desktop:100,wide:100},R={mobile:250,tablet:250,midTablet:250,laptop:0,desktop:0,wide:0},ae={greens:["#ccffdd","#b3ffcc","#99ffbb","#80ffaa","#66ff99","#4dff88","#33ff77","#1aff66","#00ff55","#00e64d"],greys:["#f2f2f2","#e6e6e6","#d9d9d9","#cccccc","#bfbfbf","#b3b3b3","#a6a6a6","#999999","#8c8c8c","#808080"],oranges:["#fff0e6","#ffe0cc","#ffd1b3","#ffc299","#ffb380","#ffa366","#ff944d","#ff8533","#ff751a","#ff6600"],purples:["#ffe6ff","#ffccff","#ffb3ff","#ff99ff","#ff80ff","#ff66ff","#ff4dff","#ff33ff","#ff1aff","#ff00ff"],reds:["#ffe6e6","#ffcccc","#ffb3b3","#ff9999","#ff8080","#ff6666","#ff4d4d","#ff3333","#ff1a1a","#ff0000"],blues:["#e6eeff","#ccddff","#b3ccff","#99bbff","#80aaff","#6699ff","#4d88ff","#3377ff","#1a66ff","#0055ff"]},oe=["mobile","tablet","midTablet"].includes(T.default()),H=["mobile","tablet"].includes(T.default());class re extends _.Component{constructor(e){var s;super(e);B(this,"handleScroll",()=>{let e=null;clearTimeout(e),e=setTimeout(()=>{b.select(this.getMapId()).selectAll(".map-labels-container").size()>0||this.updateFeatures(this.getFeatures(),!1)},300)});this.mapContainer=_.createRef(),this.state={mainLayer:null,layers:null},this.classColor=this.classColor.bind(this),this.featuresZoom=this.featuresZoom.bind(this),this.fullView=this.fullView.bind(this),this.onZoomIn=this.onZoomIn.bind(this),this.onZoomOut=this.onZoomOut.bind(this),this.onReset=this.onReset.bind(this),this.onClick=this.onClick.bind(this),this.showTooltip=this.showTooltip.bind(this),this.mousemove=this.mousemove.bind(this),this.mouseout=this.mouseout.bind(this),this.updateFeatures=this.updateFeatures.bind(this),this.d3Map=this.d3Map.bind(this),this.getFeatures=this.getFeatures.bind(this),this.boundingExtent=this.boundingExtent.bind(this),this.getMapId=this.getMapId.bind(this),this.zoomed=this.zoomed.bind(this),this.zoomEnd=this.zoomEnd.bind(this),this.drawPoints=this.drawPoints.bind(this),this.extractFeatures=this.extractFeatures.bind(this),this.getLayers=this.getLayers.bind(this),this.onPointClick=this.onPointClick.bind(this),this.onPolygonClick=this.onPolygonClick.bind(this),this.getCenter=this.getCenter.bind(this),this.mapPosition=null,this.zooming=!1,this.translateValue=se[T.default()],this.projection=b.geoMercator().scale(e.scale).center(e.center).translate([this.getWidth()/this.translateValue,this.getHeight()/2]),this.path=b.geoPath().projection(this.projection),this.zoom=b.zoom().scaleExtent([1,16]).on("zoom",this.zoomed).on("end",this.zoomEnd),this.centered=null,this.state={selectedMeasure:e.transformedData&&e.transformedData.measures&&e.transformedData.measures.length>1?e.transformedData.measures[0]:null,generatedBreaks:[],selectedPolygon:null,layersLoading:!1},this.metadataTypes=((s=e.transformedData)==null?void 0:s.types)||[]}componentDidMount(){window.addEventListener("scroll",this.handleScroll,{passive:!0}),window.addEventListener("touchmove",this.handleScroll,{passive:!0}),this.loadLayers(),this.tooltip=b.select("body").append("div").style("position","absolute").style("visibility","hidden"),console.log("Map props",this.metadataTypes)}componentDidCatch(e,s){console.log(e)}componentWillUnmount(){window.removeEventListener("scroll",this.handleScroll)}loadLayers(){const{source:e,mainLayerId:s,enabledLayers:i}=this.props;if(this.setState({layers:[],layersLoading:!0}),i&&i.length>0){const a=[];i.forEach(t=>{a.push(new Promise((r,n)=>{b.json(K.Config.REACT_APP_WP_API+"/wp/v2/media/"+t.id).then(l=>{r({id:t.id,url:l.source_url,index:t.index,layerMappingField:t.layerMappingField,layerDatasource:t.datasource,layerApiField:t.apiField,layerLocale:t.locale,displayLayerLabels:t.displayLayerLabels})}).catch(function(l){r({id:t.id,url:null,index:t.index,layerMappingField:t.layerMappingField,layerDatasource:t.datasource,layerApiField:t.apiField,layerLocale:t.locale,displayLayerLabels:t.displayLayerLabels})})}))}),Promise.all(a).then(t=>{const r=[];t.forEach(n=>{n.url&&r.push(new Promise((l,o)=>{b.json(n.url).then(h=>{l({id:n.id,data:h,index:n.index,layerMappingField:n.layerMappingField,layerDatasource:n.layerDatasource,layerApiField:n.layerApiField,layerLocale:n.layerLocale,displayLayerLabels:n.displayLayerLabels})})}))}),Promise.all(r).then(n=>{this.setState({layers:n,layersLoading:!1})})})}else b.json(e).then(a=>{this.setState({layers:[{id:null,url:e,data:a,index:0,layerMappingField:null,layerDatasource:null,layerApiField:null,layerLocale:null,displayLayerLabels:!1}],layersLoading:!1})})}getMainLayer(){const e=this.getLayers(),{mainLayerId:s,enabledLayers:i}=this.props;let a;return e&&(a=e.filter(t=>t.id==s||t.id==null)[0]||e[0]),a?a.data:null}componentDidUpdate(e,s,i){const{selectedMeasure:a,layers:t,selectedPolygon:r}=this.state,n=this.getMainLayer(),{transformedData:l,intl:o,zoomOnFilterField:h,appliedFilters:p}=this.props,{appliedFilters:d}=e;if(h){const v=[],c=[];d&&Object.keys(d).forEach(f=>{d[f]!=null&&d[f]instanceof Array&&v.push(...d[f].filter(y=>y!=Number.MIN_SAFE_INTEGER))}),p&&Object.keys(p).forEach(f=>{p[f]!=null&&p[f]instanceof Array&&c.push(...p[f].filter(y=>y!=Number.MIN_SAFE_INTEGER))}),v.length>0&&c.length==0&&this.onReset()}this.tooltip.style("visibility","hidden"),e.enabledLayers.length!=this.props.enabledLayers.length&&this.loadLayers();const u=this.getFeatures();e.center!==this.props.center&&(this.mapPosition=null,this.projection.scale(this.props.scale).center(this.props.center).translate([this.getWidth()/2,this.getHeight()/2]));const m=this.filterUpdated(e,s);this.d3Map(u,m),t&&l&&(l!=e.transformedData||t!=s.layers||a!=s.selectedMeasure||r!=s.selectedPolygon||n!=s.mainLayer||e.mainLayerId!==this.props.mainLayerId||JSON.stringify(e.enabledLayers)!=JSON.stringify(this.props.enabledLayers))&&this.updateFeatures(this.getFeatures(),m)}getHeight(){return this.props.height}getWidth(){return this.mapContainer.current?this.mapContainer.current.offsetWidth:this.props.width}boundingExtent(e){let s,i,a,t;for(const r in e){const[[n,l],[o,h]]=this.path.bounds(e[r]);(n<s||s==null)&&(s=n),(o>i||i==null)&&(i=o),(l<a||a==null)&&(a=l),(h>t||t==null)&&(t=h)}return[[s,a],[i,t]]}onReset(){this.mapPosition=null,this.tooltip.style("visibility","hidden"),this.fullView()}resizeLabels(e){const{labelFontSize:s,mapLabelField:i}=this.props;b.select(this.getMapId()).selectAll(".map-labels-container").each((a,t,r)=>{const n=b.select(r[t]),l=n.select("div"),o=e.k>1?e.k:1,h=s/o;l.style("font-size",`${h}px`);const p=this.getLabelPosition(a),d=this.getLabelBoxWidth(a)/o,u=p[0]-d/2,m=e.k>1?10/e.k:10,v=p[1]-m;n.attr("x",u).attr("y",v).attr("width",this.getLabelBoxWidth(a)/o).attr("height",this.getLabelBoxHeight(a)/o)})}resizePointLabels(e){const{labelFontSize:s}=this.props;b.select(this.getMapId()).selectAll(".point-labels-container").each((i,a,t)=>{const r=b.select(t[a]),n=r.select("div"),l=e.k>1?e.k:1,o=s/l;n.style("font-size",`${o}px`);const h=this.projection([i.geometry.coordinates[1],i.geometry.coordinates[0]]),p=(this.getLabelBoxWidth(i)+20)/l,d=this.getLabelBoxHeight(i)/l,u=h[0]-p/2,m=h[1]-d/2;r.attr("x",u).attr("y",m).attr("width",p).attr("height",d)})}resizeCircles(e){b.select(this.getMapId()).select("svg").selectAll("circle").attr("r",e.k>1?6/e.k:6)}zoomed(e){this.tooltip.style("visibility","hidden");const s=e.transform;b.select(this.getMapId()).select("svg").select("g").attr("transform",s),this.resizeCircles(s),this.resizeLabels(s),this.resizePointLabels(s)}zoomEnd(e){const{editing:s}=this.props,i=e.transform;this.mapPosition={k:i.k,x:i.x,y:i.y},s&&window.parent.postMessage({type:"map",value:JSON.stringify(this.mapPosition)},"*")}classColor(e){let{zoomEnabled:s}=this.props;return s||(s=!!["mobile","tablet","midTablet"].includes(T.default())),s?"active zoom-enabled":"active"}generateBreaks(e){const{autoGenerateBreaks:s,numberOfBreaks:i,colorScheme:a}=this.props,t=[];if(s&&e&&e.length>0){const r=e.filter(o=>o.properties&&o.properties.value!=null).map(o=>o.properties.value.toFixed(2)),n=[];r.forEach(o=>{if(o>0){const h=o*.99,p=o*1.01;n.indexOf(h)===-1&&n.push(h),n.indexOf(p)===-1&&n.push(p)}});const l=ae[a];if(n.length>0){const o=new Y(n);o.setPrecision(2);const h=n.length>1?n.length-1:n.length;return o.getJenks(Math.min(i,h)),o.ranges.forEach((p,d)=>{const u={};u.min=parseFloat(p.substr(0,p.indexOf("-")-1))+(d>0?.01:0),u.max=parseFloat(p.substr(p.indexOf("-")+2,p.length)),u.color=l[d],t.push(u)}),t}}return t}getBreaks(){const{legendBreaks:e,autoGenerateBreaks:s}=this.props;if(s){const i=this.getFeatures();return this.generateBreaks(i)}else{let i=e;return this.getSelectedMeasure()&&(i=e.filter(a=>a.measure===this.getSelectedMeasure()).filter(a=>{if(a.filters&&a.filters.length>0&&this.props.appliedFilters&&JSON.stringify(this.props.appliedFilters)!=="{}"){const r=Object.keys(this.props.appliedFilters);return a.filters.filter(l=>{if(r.indexOf(l.field)!=-1){const o=this.props.appliedFilters[l.field],h=l.values;return o.join(",").indexOf(h)!=-1}return!1}).length>0}return!0})),i}}fillColor(e,s){const{mapNoDataColor:i,mainLayerId:a}=this.props;let t;if(e.properties&&e.properties.variables&&this.state.selectedMeasure&&e.properties.value!=null){const n=ee+this.state.selectedMeasure;if(t=e.properties.variables[n.trim()],t)return t}if(e.properties.value!=null&&(a&&e.properties.layerId===a||!a)){const n=s.find(l=>{if(l.min!=null&&l.max!=null)return e.properties.value>=l.min&&e.properties.value<=l.max;if(l.min!=null)return e.properties.value>=l.min;if(l.max!=null)return e.properties.value<=l.max});return n&&n.color?n.color:i}const r=this.props.enabledLayers.filter(n=>n.id===e.properties.layerId)[0];return r&&r.bgColor&&r.bgColor!="undefined"?r.bgColor:i}setValues(){const e=this.getFeatures();b.select(this.getMapId()).select("svg").select("g").selectAll("path").data(e).join("path").attr("d",this.path)}getLabelPosition(e){return e.properties.LABEL_LATITUDE&&e.properties.LABEL_LONGITUDE?this.projection([e.properties.LABEL_LONGITUDE,e.properties.LABEL_LATITUDE]):this.path.centroid(e)}updateFeatures(e,s){const{mapLabelField:i,symbols:a,highlightedLocation:t}=this.props,r=[...e.filter(n=>t!=n.properties[i]),...e.filter(n=>t==n.properties[i])];this.drawPolygons(r),this.drawLabels(r),this.drawPoints(r,s),a.length>0&&this.addSymbols(a,r)}drawLabels(e){const{mapLabelField:s,mapLabelShowValue:i,intl:a,valueFormat:t,showNoDataLabel:r,labelFontColor:n,labelFontWeight:l,labelFontSize:o,showAdminUnitLabel:h,mapType:p,noDataText:d,labelsExclusionList:u}=this.props,m=b.select(this.getMapId()).select("svg").select("g");if(m.selectAll(".map-labels-container").size()>0){console.log("Labels already exist, skipping redraw...");return}m.selectAll(".map-labels").data(e.filter(c=>u&&u.length>0?!u.includes(c.properties[s]):!0)).enter().append("foreignObject").attr("class","map-labels-container").attr("x",c=>{const f=this.getLabelPosition(c);if(c.properties[s]){const y=this.getLabelBoxWidth(c);return f[0]-y/2}return f[0]}).attr("y",c=>this.getLabelPosition(c)[1]-10).attr("width",c=>this.getLabelBoxWidth(c)).attr("height",c=>this.getLabelBoxHeight(c)).attr("font-size",(c,f)=>`${o}px`).attr("overflow","visible").attr("opacity",1).style("display",c=>h===E||h===S&&c.properties.hasDataRow||c.properties.displayLayerLabels?"block":"none").attr("pointer-events",p=="POINTS_MAP"?"none":"all").on("mouseover",this.showTooltip).on("mousemove",this.mousemove).on("mouseout",this.mouseout).append("xhtml:div").style("font-size",c=>`${o}px`).style("color",(c,f)=>n).style("font-weight",c=>l).style("background-color",c=>c.properties.hasDataRow&&i&&(c.properties.value!=null||c.properties.value==null&&r)?"#fff6e1":"none").style("border-radius",c=>"4px").style("line-height","95%").style("text-align","center").html((c,f)=>this.createLabel(c))}getTranslatedLocationName(e,s,i){if(e.properties.displayLayerLabels&&e.properties.layerLocale){const a=e.properties.layerMappingField||s,t=e.properties[a];return P(this.metadataTypes,t,e.properties.layerLocale)}return e.properties[s]}createLabel(e){const{mapLabelField:s,mapLabelShowValue:i,intl:a,valueFormat:t,showNoDataLabel:r,showAdminUnitLabel:n,noDataText:l}=this.props;let o="";if(n==E||n==S&&e.properties.hasDataRow||e.properties.displayLayerLabels){const h=e.properties.displayLayerLabels&&e.properties.layerMappingField?e.properties.layerMappingField:s,p=e.properties[h],d=e.properties.layerLocale||(a==null?void 0:a.locale);o=P(this.metadataTypes,p,d);const u=e.properties.abbrev;if(o&&o.length>te&&u&&(o=u),i)if(e.properties.value!=null){const m=e.properties.variables||{};o+="<br><span class='map-label-value'>"+j.formatContent(t,{value:e.properties.value,measure:this.getSelectedMeasure(),...m},a)+"</span>"}else r==!0&&e.properties.value==null&&e.properties.hasDataRow&&(o+="<br><span class='map-label-value'>"+l+"</span>")}return o}drawPolygons(e){const{mapLabelField:s,mapBoundaryColor:i,mapFocusBoundaryColor:a,highlightedLocation:t}=this.props,r=this.getBreaks(),n=b.select(this.getMapId()).select("svg").select("g"),l=e.filter(o=>o.geometry&&o.geometry&&(o.geometry.type=="Polygon"||o.geometry.type=="MultiPolygon"));l.length>0&&n.selectAll("path").data(l).join("path").attr("d",this.path).attr("fill",o=>this.fillColor(o,r)).attr("stroke-width",o=>t==o.properties[s]?1.2:.4).attr("stroke",o=>t==o.properties[s]?a:i).on("click",this.onPolygonClick)}drawPoints(e,s){const{intl:i,pointLabelColor:a,pointLabelFormat:t,transformedData:r,defaultPointColor:n,appliedFilters:l,zoomOnFilterField:o,noDataText:h,showShadingLayerLabels:p}=this.props,d=b.select(this.getMapId()).select("svg").select("g");let u=[];if(r.pointsData){let c=this.state.selectedPolygon;s&&l&&l[o]&&(c=l[o]),u=r.pointsData.filter(f=>f.lat&&f.lng&&f.label==c).map(f=>({properties:{label:f.label,lat:f.lat,lng:f.lng,value:f.value,variables:f.variables}})),d.selectAll(".circle").data(u).enter().append("circle").attr("id",(f,y)=>"circle"+y).attr("cx",f=>this.projection([f.properties.lng,f.properties.lat])[0]).attr("cy",f=>this.projection([f.properties.lng,f.properties.lat])[1]).attr("r",(f,y)=>2).style("stroke-width",.5).style("fill",(f,y)=>n).on("mouseover",(f,y)=>this.onPointClick(f,y)).on("mouseout",this.mouseout)}const m=this.getBreaks();let v=[];p==E?v=e.filter(c=>c.geometry&&c.geometry.type=="Point"):p==S&&(v=e.filter(c=>c.geometry&&c.geometry.type=="Point"&&c.properties.hasDataRow)),v.length>0&&d.selectAll(".point-labels").data(v).enter().append("foreignObject").attr("id",(c,f)=>"point-label"+f).attr("class","point-labels-container").attr("x",c=>{const f=this.getLabelBoxWidth(c)+20;return this.projection([c.geometry.coordinates[1],c.geometry.coordinates[0]])[0]-f/2}).attr("y",c=>this.projection([c.geometry.coordinates[1],c.geometry.coordinates[0]])[1]-this.getLabelBoxHeight(c)/2).attr("width",c=>this.getLabelBoxWidth(c)+20).attr("height",c=>"1px").attr("overflow","visible").attr("font-size","12px").style("opacity",1).append("xhtml:div").style("color",(c,f)=>a).style("font-weight",c=>"bold").style("background-color",c=>this.fillColor(c,m)).style("padding",c=>"5px 3px 5px 3px").style("border-radius",c=>"4px").style("line-height","100%").style("text-align","center").html((c,f)=>j.formatContent(t,{value:c.properties.value,locationName:c.properties[this.props.mapLabelField]},i)).on("mouseover",(c,f,y)=>{b.select(this.getMapId()).select("svg").select("g").select("#point-label"+y).raise(),this.showTooltip(c,f)}).on("mousemove",this.mousemove).on("mouseout",this.mouseout)}addSymbols(e,s){const{mappingField:i}=this.props,a=b.select(this.getMapId()).select("svg").select("g");e.forEach(t=>{if(t.field&&t.image&&t.values){const r=s.filter(l=>{const o=W==t.field?i:"value",h=(l.properties[o]||(l.properties.variables?l.properties.variables[o]:""))+"",d=(t.values+"").split(",");return l.properties.LATITUDE&&l.properties.LONGITUDE&&d.filter(u=>u.trim().toLowerCase()==h.trim().toLowerCase()).length>0}),n=s.filter(l=>{const o=W==t.field?i:"value",h=(l.properties[o]||(l.properties.variables?l.properties.variables[o]:""))+"",d=(t.values+"").split(",");return!l.properties.LATITUDE&&!l.properties.LONGITUDE&&d.filter(u=>u.trim().toLowerCase()==h.trim().toLowerCase()).length>0});a.selectAll("image").data(r).enter().append("image").attr("width",40).attr("height",40).attr("class","map-symbol").attr("xlink:href","/"+t.image).attr("transform",l=>"translate("+this.projection([l.properties.LONGITUDE,l.properties.LATITUDE])+")").on("mouseover",this.showTooltip).on("mousemove",this.mousemove).on("mouseout",this.mouseout),a.selectAll("image").data(n).enter().append("image").attr("width",40).attr("height",40).attr("class","map-symbol").attr("xlink:href","/"+t.image).attr("x",l=>this.path.centroid(l)[0]-20).attr("y",l=>this.path.centroid(l)[1]).on("mouseover",this.showTooltip).on("mousemove",this.mousemove).on("mouseout",this.mouseout)}})}getLabelBoxHeight(){const{mapLabelShowValue:e}=this.props;return e?30:25}getLabelBoxWidth(e){const{mapLabelField:s}=this.props,i=80;if(e.properties[s]){const a=e.properties[s].length;return a<10?i:a*8}return 0}featuresZoom(e,s,i){const a=b.select(this.getMapId()).select("svg"),t=this.boundingExtent(e),[[r,n],[l,o]]=t,h=this.getWidth(),p=this.getHeight(),d=Math.min(8,.9/Math.max((l-r)/h,(o-n)/p)),u=[h/2-(r+l)/2,p/2-(n+o)/2];s?a.call(this.zoom.transform,b.zoomIdentity.translate(u[0],u[1]).scale(d)):a.transition().duration(450).call(this.zoom.transform,b.zoomIdentity.translate(u[0],u[1]).scale(d)).on("end",i)}fullView(){const{mapPosition:e,editing:s}=this.props,i=b.select(this.getMapId()).select("svg");i.select("g").selectAll(".active").attr("class",function(){return b.select(this).attr("class").replace(/background/gi,"")});let t=b.zoomIdentity;e&&!s?t=t.translate(e.x,e.y).scale(e.k):t=t.translate(0,0).scale(1),i.transition().duration(300).call(this.zoom.transform,t)}showTooltip(e,s){let{showTooltip:i,zoomEnabled:a,tooltipTheme:t,customTooltips:r,tooltipFontSize:n,tooltipFormat:l,intl:o,mappingField:h,showNoDataTooltip:p,fields:d,mapType:u,noDataText:m}=this.props;if(a=!!["mobile","tablet","midTablet"].includes(T.default()),i&&s.properties.value!=null||i&&p){b.select(this.getMapId()).select("svg").select("g").selectAll(".active").attr("class",k=>k.properties[h]===s.properties[h]?"focus"+(a?" zoom-enabled":""):"active"+(a?" zoom-enabled":""));const f=l||`{locationName} %({value},2) 
 {label}: %({value},2)`,y=s.properties.variables||{},C={...s.properties,value:s.properties.value,measure:this.getSelectedMeasure(),measureLabel:s.properties.measureLabel,locationName:this.getTranslatedLocationName(s,h,o),label:this.getTranslatedLocationName(s,h,o),...y};this.tooltip.attr("class",t).style("position","absolute").style("visibility","hidden").style("visibility","visible").html(k=>{let L=`<div style='font-size:${n}px;' class='tooltip-content' >`;if(s.properties.value!=null){const w=f.split(`
`),D=w[0],N=w.length>1?w[1]:null;let A=1,z;d.length>1&&u!="POINTS_MAP"?(A=w.length>2?2:1,z=w[A]):z=null,D&&(L+=j.formatContent(D,C,o)),N&&(L.endsWith("<hr>")||(L+="<hr>"),L+=j.formatContent(N,C,o)),z&&s.properties.children&&s.properties.children.forEach((I,O)=>{const G={value:I.value,label:I.label,measure:this.getSelectedMeasure(),measureLabel:s.properties.measureLabel,...y};L.endsWith("<hr>")||(L+="<hr>"),L+=j.formatContent(z,G,o)}),w.length>A+1&&(L.endsWith("<hr>")||(L+="<hr>"),w.forEach((I,O)=>{O>A&&(L.endsWith("<hr>")||(L+="<hr>"),L+=j.formatContent(I,C,o))})),r.filter(I=>I.location===s.properties[h]).forEach(I=>{L.endsWith("<hr>")||(L+="<hr>"),L+=I.tooltip})}else{const w=l||`{locationName} %({value},2) 
 {label}: %({value},2)`,D={value:null,measure:this.getSelectedMeasure(),measureLabel:s.properties.measureLabel,locationName:this.getTranslatedLocationName(s,h,o),...y};L+=j.formatContent(w,D,o),L+="</div>"}return L})}}mousemove(e,s){this.tooltip.style("top",e.pageY+"px").style("left",e.pageX+5+"px")}mouseout(e,s){const{showTooltip:i}=this.props;i&&(b.select(this.getMapId()).select("svg").select("g").selectAll(".focus").attr("class","active"),this.tooltip.style("visibility","hidden"))}onClick(e,s){s.properties&&this.tooltip.style("visibility","visible").style("top",e.pageY+"px").style("left",e.pageX+5+"px"),e.stopPropagation(),e.preventDefault()}onPointClick(e,s,i){this.showTooltip(e,s),this.tooltip.style("visibility","visible").style("top",e.pageY+"px").style("left",e.pageX+5+"px");const a=b.select(this.getMapId()).select("svg").select("g");a.selectAll("circle").style("fill",this.props.defaultPointColor).style("stroke","none"),a.select("#circle"+i).raise().style("fill","#fff")}onPolygonClick(e,s){const{mappingField:i}=this.props;this.state.selectedPolygon!==s.properties[i]&&s.properties.value!==null&&this.setState({selectedPolygon:s.properties[i]})}onZoomIn(e){b.select(this.getMapId()).select("svg").transition().call(this.zoom.scaleBy,1.5)}onZoomOut(){b.select(this.getMapId()).select("svg").transition().call(this.zoom.scaleBy,.6667)}getSelectedMeasure(){let e=this.state.selectedMeasure;return!e&&this.props.transformedData&&this.props.transformedData.measures&&this.props.transformedData.measures.length>1&&(e=this.props.transformedData.measures[0]),e}getCollectionField(e){const{topoJSONField:s}=this.props;if(e&&e.objects){const i=Object.keys(e.objects);for(const a in i){const t=i[a];if(e.objects[t].type=="GeometryCollection")return t}}return s}extractFeatures(e){const s=this.getCollectionField(e);return e&&e.objects&&e.objects[s]?Q.feature(e,e.objects[s]).features:e&&e.features?e.features:[]}getLayers(){const{layers:e}=this.state,{enabledLayers:s}=this.props;return e&&e.length>0?e.map(a=>{const t=s.find(r=>r.id==a.id);return a.index=t?t.index:0,a}).sort((a,t)=>parseInt(a.index)<parseInt(t.index)?1:parseInt(a.index)>parseInt(t.index)?-1:0):[]}getFeatures(){const e=this.getMainLayer(),s=this.getLayers();if(e){const{transformedData:i,mappingField:a,app:t,mainLayerId:r,enabledLayers:n}=this.props;let l=[];try{l=this.extractFeatures(e),l.map(p=>{p.properties.layerId=r;const d=s.find(u=>String(u.id)===String(r));return d&&(p.properties.layerMappingField=d.layerMappingField,p.properties.layerDatasource=d.layerDatasource,p.properties.layerApiField=d.layerApiField,p.properties.layerLocale=d.layerLocale,p.properties.displayLayerLabels=d.displayLayerLabels),n.forEach(u=>{String(u.id)==r&&Object.keys(u||{}).forEach(m=>{p.properties[m]=u[m]})}),p}),s&&s.forEach(p=>{if(p.id!=r){let d=this.extractFeatures(p.data);d=d.map(u=>(u.properties.layerId=p.id,u.properties.layerMappingField=p.layerMappingField,u.properties.layerDatasource=p.layerDatasource,u.properties.layerApiField=p.layerApiField,u.properties.layerLocale=p.layerLocale,u.properties.displayLayerLabels=p.displayLayerLabels,u)),l=[...d,...l]}})}catch(p){console.log("error updating features .."+p)}const o=l.filter(p=>p.properties!=null);let h=i.locationsData;return i.measures&&i.measures.length>1&&(h=i.locationsData.filter(p=>p.measure===this.getSelectedMeasure())),o.map(p=>{if(h){const d=h.find(u=>{const m=u.label?(""+u.label).toLowerCase():"",v=p.properties[a]?p.properties[a].toLowerCase():"";return m===v});if(d){let u=d.measure;i.measureLabelMap&&d.measure&&i.measureLabelMap[d.measure]&&(u=i.measureLabelMap[d.measure]),p.properties.value=d.value,p.properties.measure=d.measure,p.properties.measureLabel=u,p.properties.children=d.children,p.properties.variables=d.variables,p.properties.hasDataRow=!0,Object.keys(d).forEach(m=>{p.properties[m]=d[m]})}else p.properties.value=null,p.properties.measure=null,p.properties.children=null,p.properties.measureLabel=null,p.properties.hasDataRow=!1}}),o}return[]}getMapId(){const{unique:e}=this.props;return".map.wrapper."+e}filterUpdated(e,s){const{zoomOnFilterField:i}=this.props,a=e&&e.appliedFilters||{},t=this.props.appliedFilters||{};let r=!1;return a[i]!=t[i]&&(r=!0),r}getCenter(e,s){const{zoomOnFilter:i,zoomOnFilterField:a,mappingField:t,appliedFilters:r}=this.props;let n=null;if(i&&a){let l=this.state.selectedPolygon;s&&r&&r[a]&&(l=r[a]);const o=e.filter(h=>h.properties!=null&&h.properties[t]==l)[0];o&&o.properties!=null&&o.properties.value&&(n=o)}return n}area(e){let s=0;const i=e.coordinates.length>1?e.coordinates[0][0]:e.coordinates[0];for(let a=0;a<i.length-1;a++)s+=i[a][0]*i[a+1][1]-i[a+1][0]*i[a][1];return .5*s}centroid(e){const s=[0,0],i=e.coordinates.length>1?e.coordinates[0][0]:e.coordinates[0];for(let t=0;t<i.length-1;t++)s[0]+=(i[t][0]+i[t+1][0])*(i[t][0]*i[t+1][1]-i[t+1][0]*i[t][1]),s[1]+=(i[t][1]+i[t+1][1])*(i[t][0]*i[t+1][1]-i[t+1][0]*i[t][1]);const a=this.area(e);return s[0]/=a*6,s[1]/=a*6,s}d3Map(e,s){let{zoomEnabled:i,mapContainerBgColor:a,mapPosition:t,editing:r,mapType:n}=this.props;i||(i=!!["mobile","tablet"].includes(T.default()));const l=this.getBreaks(),o=b.select(this.getMapId());let h=o.select("svg"),p=this.getWidth();p===0?p=window.innerWidth+R[T.default()]:p+=R[T.default()];const d=this.getHeight()-100;if(h.empty()?h=o.append("svg"):h.selectAll("*").remove(),h.attr("style",`background-color:${a};`).attr("viewBox",`0 0 ${p} ${d}`).attr("preserveAspectRatio","xMidYMid meet"),h.append("g").selectAll("path").data(e).enter().append("path").attr("fill",m=>this.fillColor(m,l)).attr("d",b.geoPath().projection(this.projection)).attr("class",m=>this.classColor(m)).on("mouseover",n!=="POINTS_MAP"?this.showTooltip:null).on("mousemove",n!=="POINTS_MAP"?this.mousemove:null).on("mouseout",n!=="POINTS_MAP"?this.mouseout:null),this.mapPosition&&h.transition().duration(300).call(this.zoom.transform,b.zoomIdentity.translate(this.mapPosition.x,this.mapPosition.y).scale(this.mapPosition.k)),!this.mapPosition&&t&&t.x&&t.y&&t.k&&(h.transition().duration(300).call(this.zoom.transform,b.zoomIdentity.translate(t.x,t.y).scale(t.k)),n==="POINTS_MAP")){const v={mobile:100,tablet:0,midTablet:0,desktop:0,laptop:0,wide:0}[T.default()];h.transition().duration(300).call(this.zoom.transform,b.zoomIdentity.translate(t.x+v,t.y).scale(t.k))}i||r?h.call(this.zoom):h.on("dblclick.zoom",null);const u=this.getCenter(e,s);if(u){const m=this.path.bounds(u),v=[(m[0][0]+m[1][0])/2,(m[0][1]+m[1][1])/2];h.transition().duration(750).call(this.zoom.transform,b.zoomIdentity.translate(p/2,d/2).scale(12).translate(-v[0],-v[1]))}}getAvg(){const{transformedData:e}=this.props;return e.nationalData.value}selectedMeasureChanged(e){this.state.selectedMeasure!=e&&this.setState({selectedMeasure:e})}getFilters(){const{appliedFilters:e}=this.props,s={};return e&&Object.keys(e).forEach(a=>{const t=e[a];t&&(s[a]=Array.isArray(t)?t.join(" ,"):t)}),s}getHighlightedLocationData(){const{highlightedLocation:e,transformedData:s}=this.props;let i=s.locationsData;return s.measures&&s.measures.length>1&&(i=s.locationsData.filter(t=>t.measure===this.getSelectedMeasure())),i.find(t=>t.label===e)}getTranslatedHighlightedLocationName(){const{highlightedLocation:e,mapLabelField:s,intl:i}=this.props;if(!e)return null;const t=this.getFeatures().find(r=>r.properties[s]===e);if(t&&t.properties.displayLayerLabels&&t.properties.layerLocale){const r=t.properties.layerMappingField||s,n=t.properties[r];return P(this.metadataTypes,n,t.properties.layerLocale)}return e}getHighlightedLocationColor(e){const s=this.getBreaks(),{mapNoDataColor:i}=this.props,a=e?e.value:null;if(a!=null){const t=s.find(r=>{if(r.min!=null&&r.max!=null)return a>=r.min&&a<=r.max;if(r.min!=null)return a>=r.min;if(r.max!=null)return a<=r.max});return t&&t.color?t.color:i}return i}renderLoader(){return g.jsx(M.Container,{className:"loading",children:g.jsx(M.Segment,{basic:!0,padded:!0,textAlign:"center",style:{margin:"30px"},children:g.jsx(M.Dimmer,{active:!0,inverted:!0,children:g.jsx(M.Loader,{size:"medium"})})})})}noMapSelected(){return g.jsxs(M.Message,{icon:!0,warning:!0,children:[g.jsx(M.Icon,{name:"map outline"}),g.jsxs(M.Message.Content,{children:[g.jsx(M.Message.Header,{children:"No map selected"}),"Pick one from the list in the ",g.jsx("strong",{children:"Map Layers"})," section."]})]})}render(){let{app:e,legendTitle:s,nationalAverageLabel:i,intl:a,zoomEnabled:t,transformedData:r,measureSelectorLabel:n,valueFormat:l,showOverallValue:o,unique:h,highlightedLocation:p,labelFontColor:d,legendFontSize:u,editing:m,highlightedLocLabelFormat:v,noDataText:c}=this.props;t||(t=!!["mobile","tablet","midTablet"].includes(T.default()));const f=this.getAvg(),y=this.getFilters(),C=this.getHighlightedLocationData(),k={backgroundColor:this.getHighlightedLocationColor(C),color:d,fontSize:u+"px"};m&&(k.marginTop="25px");const L=()=>g.jsxs(M.Container,{fluid:!0,className:"footnote ",children:[g.jsxs(M.Grid,{columns:2,children:[e!=="csv"&&o&&g.jsx(M.Grid.Column,{textAlign:"left",width:4,children:g.jsxs("div",{className:"national-average-div",children:[g.jsx("span",{className:"national-avg-label",children:i}),g.jsx("span",{className:"national-avg-value",children:j.formatContent(l,{value:f},a)})]})}),g.jsx(M.Grid.Column,{textAlign:"right",width:e!=="csv"&&o?12:16,children:g.jsx(X.default,{filteredBreaks:this.getBreaks(),formattedLegendTitle:j.formatContent(s,{...y},a),selectedMeasure:this.state.selectedMeasure,...this.props})})]}),g.jsx("div",{className:"measure-selector",children:g.jsxs("ul",{children:[n&&g.jsx("li",{children:g.jsx("span",{className:"label",children:n})}),r&&r.measures&&r.measures.length>1&&r.measures.map(w=>g.jsxs("li",{onClick:this.selectedMeasureChanged.bind(this,w),children:[g.jsx("input",{checked:this.getSelectedMeasure()===w,type:"radio",value:w}),g.jsx("label",{children:r.measureLabelMap[w]||w})]}))]})})]});return g.jsxs("div",{className:"map component wp-data-viz-map",ref:this.mapContainer,children:[this.state.layersLoading&&(m?this.noMapSelected():this.renderLoader()),!this.state.layersLoading&&g.jsxs(g.Fragment,{children:[!H&&g.jsx(L,{}),g.jsxs("div",{className:"map wrapper scaling-svg-container "+h,style:{height:this.props.height-ie[T.default()]+"px"},children:[C?g.jsx("div",{className:"highlighted-loc-info",style:k,children:g.jsxs("span",{children:[" ",j.formatContent(v,{value:C.value,locationName:this.getTranslatedHighlightedLocationName()||C.label,measureName:C.measure},a)]})}):g.jsx(g.Fragment,{children:" "}),(m||t)&&!oe&&g.jsxs("div",{className:"control panel ignore",children:[g.jsx("div",{className:"zoom plus",onClick:this.onZoomIn,children:g.jsx(M.Icon,{name:"plus",size:"large"})}),g.jsx("div",{className:"zoom minus",onClick:this.onZoomOut,children:g.jsx(M.Icon,{name:"minus",size:"large"})}),g.jsx(M.Popup,{content:g.jsx(U.FormattedMessage,{id:"map.reset.tooltip",defaultMessage:"Reset zoom"}),trigger:g.jsx("div",{className:"reset",onClick:this.onReset,children:g.jsx(M.Icon,{name:"repeat",size:"large"})})})]})]}),H&&g.jsx(L,{})]})]})}}const le=U.injectIntl(re);exports.default=le;exports.getTranslatedItemLabel=P;