@devgateway/dvz-ui-react 1.9.4 → 1.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/common.css +1 -1
- package/dist/cjs/embeddable/chart/LineLayer.js +1 -1
- package/dist/cjs/embeddable/chart/Tooltip.js +1 -1
- package/dist/cjs/embeddable/common/ChartTooltip.js +1 -1
- package/dist/cjs/embeddable/map/legend.js +1 -1
- package/dist/cjs/embeddable/map/map.js +4 -4
- package/dist/cjs/styles.css +1 -1
- package/dist/esm/common.css +1 -1
- package/dist/esm/embeddable/chart/LineLayer.js +55 -51
- package/dist/esm/embeddable/chart/Tooltip.js +83 -51
- package/dist/esm/embeddable/common/ChartTooltip.js +28 -27
- package/dist/esm/embeddable/map/legend.js +31 -35
- package/dist/esm/embeddable/map/map.js +121 -116
- package/dist/esm/styles.css +1 -1
- package/dist/types/embeddable/chart/Tooltip.d.ts +2 -0
- package/package.json +1 -1
package/dist/cjs/common.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.buttonBack___1mlaL,.buttonFirst___2rhFr,.buttonLast___2yuh0,.buttonNext___2mOCa,.buttonNext___3Lm3s,.dot___3c3SI{cursor:pointer}.image___xtQGH{display:block;width:100%;height:100%}.spinner___27VUp{position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);width:30px;height:30px;animation-name:spin___S3UuE;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;border:4px solid #a9a9a9;border-top-color:#000;border-radius:30px}@keyframes spin___S3UuE{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.container___2O72F{position:relative;overflow:hidden;height:100%;width:100%}.overlay___IV4qY{position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;cursor:zoom-in;transition:opacity .3s,transform .3s}.hover___MYy31,.loading___1pvNI,.zoom___3kqYk{opacity:1}.imageLoadingSpinnerContainer___3UIPD{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}.slide___3-Nqo{position:relative;display:block;box-sizing:border-box;height:0;margin:0;list-style-type:none}.slide___3-Nqo:focus{outline:none!important}.slideHorizontal___1NzNV{float:left}[dir=rtl] .slideHorizontal___1NzNV{direction:rtl;transform:scaleX(-1)}.slideInner___2mfX9{position:absolute;top:0;left:0;width:100%;height:100%}.focusRing___1airF{position:absolute;top:5px;right:5px;bottom:5px;left:5px;pointer-events:none;outline-width:5px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.focusRing___1airF{outline-style:auto;outline-color:-webkit-focus-ring-color}}.horizontalSlider___281Ls{position:relative;overflow:hidden}.horizontalSlider___281Ls:not(.touchDisabled___2qs4y){touch-action:pan-y pinch-zoom}[dir=rtl] .horizontalSlider___281Ls{direction:ltr;transform:scaleX(-1)}.horizontalSliderTray___1L-0W{overflow:hidden;width:100%}.verticalSlider___34ZFD{position:relative;overflow:hidden}.verticalSliderTray___267D8{overflow:hidden}.verticalTray___12Key{float:left}.verticalSlideTrayWrap___2nO7o{overflow:hidden}.sliderTray___-vHFQ{display:block;list-style:none;padding:0;margin:0}.sliderAnimation___300FY{transition:transform .5s;transition-timing-function:cubic-bezier(.645,.045,.355,1);will-change:transform}.masterSpinnerContainer___1Z6hB{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}:root{--header-height: 90px;--footer-height: 227px !important}html{font-size:18px!important}body{height:100%;padding:0;margin:0;font-family:Open Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#000;background-color:transparent!important;font-size:18px!important}a{outline:0;border:none;box-shadow:none;-moz-outline-style:none}a:hover,a:focus{outline:0;border:none;box-shadow:none;-moz-outline-style:none}.edit-post-visual-editor .tabacoo-wrap,#root .tabacoo-wrap{border-bottom:1px solid #e0e0e0}.edit-post-visual-editor .tabacoo-wrap .wp-block-column:nth-child(1),#root .tabacoo-wrap .wp-block-column:nth-child(1){padding-right:15px;border-right:1px solid #e0e0e0;margin-right:20px}.edit-post-visual-editor .tabacoo-wrap .wp-block-column li,#root .tabacoo-wrap .wp-block-column li{list-style-type:none;color:#333;margin-top:10px;position:relative}.edit-post-visual-editor .tabacoo-wrap .wp-block-column li:before,#root .tabacoo-wrap .wp-block-column li:before{content:"";position:absolute;left:-27px;top:5px;width:15px;height:15px;border-radius:100px;background:#5baf95}.edit-post-visual-editor .tabacoo-wrap .wp-block-column li strong,#root .tabacoo-wrap .wp-block-column li strong{font-size:22px;margin-bottom:5px;display:block;color:#5baf95}.edit-post-visual-editor iframe,#root iframe{margin:0;padding:0}.edit-post-visual-editor code,#root code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.edit-post-visual-editor .ui,#root .ui{font-family:Open Sans,sans-serif}.edit-post-visual-editor .ui.container.narrow,#root .ui.container.narrow{max-width:1080px}.edit-post-visual-editor .ui.container.fluid.desktop,#root .ui.container.fluid.desktop{max-width:1366px!important}.edit-post-visual-editor .ui.primary.button,#root .ui.primary.button{background-color:#5089a6}.edit-post-visual-editor .ui.secondary.button,#root .ui.secondary.button{background-color:#5baf95}h1.type{font-size:1rem;padding:0;margin:0;color:#5089a6;font-family:Open Sans,sans-serif}.ui.container.editing{margin:0!important;padding:5px!important}.ui.container.editing .ui.container{width:100%!important;margin-left:0!important;margin-right:0!important}.map-tooltip-light{font-size:1em;color:#1e1e1e;border-radius:5px;background-color:#f7f7f7!important;min-width:220px}.map-tooltip-light .tooltip-content{padding:5px}.map-tooltip-light .tooltip-content hr{margin:3px -5px;border-bottom:none}.map-tooltip-light .tooltip-content b{color:unset}.map-tooltip-light .header{padding:5px;border-bottom:1px solid #DDD}.map-tooltip-light .value{color:#1e1e1e;font-weight:700;margin-left:5px}.map-tooltip-light .footer{padding:5px}.map-tooltip-light .footer .confidence{font-weight:700;color:#1e1e1e}.map-tooltip-light .footer hr{margin:3px -5px}.map-tooltip-light .footer b{color:#1e1e1e}.map-tooltip-dark{font-size:1em;color:#fff;border-radius:5px;background-color:#5c5c5c!important;min-width:220px}.map-tooltip-dark .tooltip-content{padding:5px}.map-tooltip-dark .tooltip-content hr{margin:3px -5px;border-bottom:none}.map-tooltip-dark .header{padding:5px;border-bottom:1px solid #DDD}.map-tooltip-dark .value{color:#fff;font-weight:700;margin-left:5px}.map-tooltip-dark .footer{padding:5px}.map-tooltip-dark .footer .confidence{font-weight:700;color:#fff}.map-tooltip-dark .footer hr{margin:3px -5px;border-bottom:none}.map-tooltip-dark .footer b{color:#fff}.ui.container.filter .menu{z-index:1600}.d3MapTooltip{font-family:Roboto;font-size:13px;border-radius:5%;background-color:#3c434a;padding:5px;opacity:.9;color:#fff;min-width:200px;border:1px solid #000}
|
|
1
|
+
.buttonBack___1mlaL,.buttonFirst___2rhFr,.buttonLast___2yuh0,.buttonNext___2mOCa,.buttonNext___3Lm3s,.dot___3c3SI{cursor:pointer}.image___xtQGH{display:block;width:100%;height:100%}.spinner___27VUp{position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);width:30px;height:30px;animation-name:spin___S3UuE;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;border:4px solid #a9a9a9;border-top-color:#000;border-radius:30px}@keyframes spin___S3UuE{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.container___2O72F{position:relative;overflow:hidden;height:100%;width:100%}.overlay___IV4qY{position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;cursor:zoom-in;transition:opacity .3s,transform .3s}.hover___MYy31,.loading___1pvNI,.zoom___3kqYk{opacity:1}.imageLoadingSpinnerContainer___3UIPD{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}.slide___3-Nqo{position:relative;display:block;box-sizing:border-box;height:0;margin:0;list-style-type:none}.slide___3-Nqo:focus{outline:none!important}.slideHorizontal___1NzNV{float:left}[dir=rtl] .slideHorizontal___1NzNV{direction:rtl;transform:scaleX(-1)}.slideInner___2mfX9{position:absolute;top:0;left:0;width:100%;height:100%}.focusRing___1airF{position:absolute;top:5px;right:5px;bottom:5px;left:5px;pointer-events:none;outline-width:5px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.focusRing___1airF{outline-style:auto;outline-color:-webkit-focus-ring-color}}.horizontalSlider___281Ls{position:relative;overflow:hidden}.horizontalSlider___281Ls:not(.touchDisabled___2qs4y){touch-action:pan-y pinch-zoom}[dir=rtl] .horizontalSlider___281Ls{direction:ltr;transform:scaleX(-1)}.horizontalSliderTray___1L-0W{overflow:hidden;width:100%}.verticalSlider___34ZFD{position:relative;overflow:hidden}.verticalSliderTray___267D8{overflow:hidden}.verticalTray___12Key{float:left}.verticalSlideTrayWrap___2nO7o{overflow:hidden}.sliderTray___-vHFQ{display:block;list-style:none;padding:0;margin:0}.sliderAnimation___300FY{transition:transform .5s;transition-timing-function:cubic-bezier(.645,.045,.355,1);will-change:transform}.masterSpinnerContainer___1Z6hB{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}:root{--header-height: 90px;--footer-height: 227px !important}html{font-size:18px!important}body{height:100%;padding:0;margin:0;font-family:Open Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#000;background-color:transparent!important;font-size:18px!important}a{outline:0;border:none;box-shadow:none;-moz-outline-style:none}a:hover,a:focus{outline:0;border:none;box-shadow:none;-moz-outline-style:none}.edit-post-visual-editor .tabacoo-wrap,#root .tabacoo-wrap{border-bottom:1px solid #e0e0e0}.edit-post-visual-editor .tabacoo-wrap .wp-block-column:nth-child(1),#root .tabacoo-wrap .wp-block-column:nth-child(1){padding-right:15px;border-right:1px solid #e0e0e0;margin-right:20px}.edit-post-visual-editor .tabacoo-wrap .wp-block-column li,#root .tabacoo-wrap .wp-block-column li{list-style-type:none;color:#333;margin-top:10px;position:relative}.edit-post-visual-editor .tabacoo-wrap .wp-block-column li:before,#root .tabacoo-wrap .wp-block-column li:before{content:"";position:absolute;left:-27px;top:5px;width:15px;height:15px;border-radius:100px;background:#5baf95}.edit-post-visual-editor .tabacoo-wrap .wp-block-column li strong,#root .tabacoo-wrap .wp-block-column li strong{font-size:22px;margin-bottom:5px;display:block;color:#5baf95}.edit-post-visual-editor iframe,#root iframe{margin:0;padding:0}.edit-post-visual-editor code,#root code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.edit-post-visual-editor .ui,#root .ui{font-family:Open Sans,sans-serif}.edit-post-visual-editor .ui.container.narrow,#root .ui.container.narrow{max-width:1080px}.edit-post-visual-editor .ui.container.fluid.desktop,#root .ui.container.fluid.desktop{max-width:1366px!important}.edit-post-visual-editor .ui.primary.button,#root .ui.primary.button{background-color:#5089a6}.edit-post-visual-editor .ui.secondary.button,#root .ui.secondary.button{background-color:#5baf95}h1.type{font-size:1rem;padding:0;margin:0;color:#5089a6;font-family:Open Sans,sans-serif}.ui.container.editing{margin:0!important;padding:5px!important}.ui.container.editing .ui.container{width:100%!important;margin-left:0!important;margin-right:0!important}.map-tooltip-light{font-size:1em;color:#1e1e1e;border-radius:5px;background-color:#f7f7f7!important;min-width:220px;max-width:320px;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;pointer-events:none}.map-tooltip-light .tooltip-content{padding:5px}.map-tooltip-light .tooltip-content hr{margin:3px -5px;border-bottom:none}.map-tooltip-light .tooltip-content b{color:unset}.map-tooltip-light .header{padding:5px;border-bottom:1px solid #DDD}.map-tooltip-light .value{color:#1e1e1e;font-weight:700;margin-left:5px}.map-tooltip-light .footer{padding:5px}.map-tooltip-light .footer .confidence{font-weight:700;color:#1e1e1e}.map-tooltip-light .footer hr{margin:3px -5px}.map-tooltip-light .footer b{color:#1e1e1e}.map-tooltip-dark{font-size:1em;color:#fff;border-radius:5px;background-color:#5c5c5c!important;min-width:220px;max-width:320px;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;pointer-events:none}.map-tooltip-dark .tooltip-content{padding:5px}.map-tooltip-dark .tooltip-content hr{margin:3px -5px;border-bottom:none}.map-tooltip-dark .header{padding:5px;border-bottom:1px solid #DDD}.map-tooltip-dark .value{color:#fff;font-weight:700;margin-left:5px}.map-tooltip-dark .footer{padding:5px}.map-tooltip-dark .footer .confidence{font-weight:700;color:#fff}.map-tooltip-dark .footer hr{margin:3px -5px;border-bottom:none}.map-tooltip-dark .footer b{color:#fff}.ui.container.filter .menu{z-index:1600}.d3MapTooltip{font-family:Roboto;font-size:13px;border-radius:5%;background-color:#3c434a;padding:5px;opacity:.9;color:#fff;min-width:200px;border:1px solid #000}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react/jsx-runtime"),R=require("react"),W=require("d3-shape"),X=require("d3"),Y=require("./Tooltip.js"),H=require("react-intl");function k(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const h=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(i,t,h.get?h:{enumerable:!0,get:()=>n[t]})}}return i.default=n,Object.freeze(i)}const B=k(X),F=(n,i,t,h,u,b,q,A)=>H.injectIntl(o=>{const{intl:T}=o;let l=h==="grouped";if(n){const{bars:M,xScale:p,yScale:w,innerWidth:_,innerHeight:I}=o;let s=new Set,f=[],r=0;M&&M.length>0?(s=new Set(o.bars.map(e=>e.data.indexValue)),f=n.data.filter(e=>Array.from(s).find(y=>y==e[0])),r=t==="horizontal"?o.bars[0].height:o.bars[0].width):(l=!1,n.data&&(n.data.forEach(e=>{e&&s.add(e[0])}),f=n.data,r=t==="horizontal"?I/s.size:_/s.size));let a,c;t==="horizontal"?(c=1,a=0):(c=0,a=1);const j=W.line();j.x(e=>t==="horizontal"?p(e[c]):p(e[c])+r*(l?u.length:1)/2).y(e=>t==="horizontal"?w(e[a])+r*(l?u.length:1)/2:w(e[a]));const d=B.select("#root").append("div").attr("class","chart tooltip").style("transition","all 1s ease-out;").style("background-color",i).style("position","absolute").style("visibility","hidden");return v.jsxs(R.Fragment,{children:[v.jsx("path",{d:j(f),fill:"none","stroke-width":"4",stroke:`${i}`,style:{pointerEvents:"none"}}),f.map(e=>{const S=t==="horizontal"?r*(l?u.length:1)/2:0,y=t==="horizontal"?0:r*(l?u.length:1)/2;return v.jsx("circle",{onMouseOver:g=>{d.style("visibility","visible")},onMouseMove:g=>{if(b&&b.trim().length>0){d.html(Y.formatContent(b,{x:e[0],y:e[1],title:q,measure:A},T));const m=d.node().getBoundingClientRect(),x=8,z=window.scrollX+x,L=window.scrollX+window.innerWidth-m.width-x,O=window.scrollY+x,D=window.scrollY+window.innerHeight-m.height-x,E=Math.min(Math.max(g.pageX-m.width,z),Math.max(z,L)),P=Math.min(Math.max(g.pageY-m.height,O),Math.max(O,D));d.style("top",P+"px").style("left",E+"px")}},onMouseOut:g=>d.style("visibility","hidden"),cx:p(e[c])+y,cy:w(e[a])+S,r:7,fill:i,style:{pointerEvents:"all",cursor:"pointer"}},e.index)})]})}else return null});exports.default=F;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),h=require("react"),E=require("react-markdown"),A=require("remark-gfm"),F=require("rehype-raw"),y=require("string-template"),_=/(\+?\%)[\(]([A-z0-9,.,-]+)\)/gi,j=/(\+?\#)[\(]([A-z0-9,.,-]+)\)/gi,q=/(\+?\#C)[\(]([A-z0-9,.,-]+)\)/gi,f=8,g=(r,e,n,i=0)=>r<f?f-r:e>n-f?n-f-e-i:0,p=r=>{if(!r||typeof window>"u")return;r.style.transform="";const e=r.getBoundingClientRect(),{innerWidth:n,innerHeight:i}=window,t=n<768?12:40,s=g(e.left,e.right,n,t),l=g(e.top,e.bottom,i);(s||l)&&(r.style.transform=`translate(${Math.round(s)}px, ${Math.round(l)}px)`)},M=6,L=60,v=(r=[])=>{const e=h.useRef(null);return h.useLayoutEffect(()=>{const n=e.current;if(!n||typeof window>"u"||!window.requestAnimationFrame){p(n);return}let i=null;const t=()=>{i!=null&&window.cancelAnimationFrame(i);let l=null,o=0;const a=c=>{p(n),o=n.style.transform===l?o+1:0,l=n.style.transform,i=o>=M||c>=L?null:window.requestAnimationFrame(()=>a(c+1))};a(0)};t();const s=typeof ResizeObserver<"u"?new ResizeObserver(t):null;return s==null||s.observe(n),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{i!=null&&window.cancelAnimationFrame(i),s==null||s.disconnect(),window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}},r),e},d=(r,e,n,i,t,s)=>{if(!t||!t.formatNumber)return e;let l,o=e;for(;(l=r.exec(e))!==null;){const a=l[2],c=l[1],R=((w,x=2)=>t.formatNumber(i?w/100:w,{maximumFractionDigits:x,...n,signDisplay:c&&c.startsWith("+")?"never":"auto"})).apply(void 0,a.split(","));o=o.replaceAll(l[0],R)}return o},T=(r,e,n,i)=>{if(!r||!e)return"";e.field&&e[`_${e.field}`]&&(e._value=e[`_${e.field}`]),!e.field&&e.category&&(e.field=e.category);let t=i?y(r,e):y(r,e).replace(/(?:\r\n|\r|\n)/g,"<br>");return t=d(_,t,{style:"percent"},!0,n),t=d(j,t,{style:"decimal"},!1,n),t=d(q,t,{notation:"compact"},!1,n),t},N=({tooltip:r,d:e,intl:n,tooltipEnableMarkdown:i})=>{let t="";if(e&&r){const l=e.datum||e.point||e,{data:o}=l||{};if(o){const a=e.value||(e.datum?e.datum.value:null)||(e.point?e.point.data.y:null);let c;o.variables?c=typeof o.variables[e.id]=="object"?o.variables[e.id]:o.variables:c=o;const m={field:e.point?e.point.serieId:e.id||"",...c,value:a};o.measureFieldName&&o.variables&&(m.populationValue=o.variables[o.measureFieldName+"Population"]),t=T(r,m,n,i)}}const s=v([t,i]);return t?i?u.jsx("div",{ref:s,className:"chart tooltip",children:u.jsx(E,{children:t,remarkPlugins:[A],rehypePlugins:[F]})}):u.jsx("div",{ref:s,className:"chart tooltip",children:u.jsx("div",{dangerouslySetInnerHTML:{__html:t}})}):u.jsx("div",{})};exports.clampTooltipToViewport=p;exports.default=N;exports.formatContent=T;exports.useClampTooltipToViewport=v;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime");require("react");const x=require("react-markdown"),y=require("remark-gfm"),j=require("rehype-raw"),v=require("string-template"),q=require("../chart/Tooltip.js"),T=/(\+?\%)[\(]([A-z0-9,.,-]+)\)/gi,b=/(\+?\#)[\(]([A-z0-9,.,-]+)\)/gi,C=/(\+?\#C)[\(]([A-z0-9,.,-]+)\)/gi,p=(i,e,o,s,t,r)=>{let n,a=e;for(;(n=i.exec(e))!==null;){const u=n[2],c=n[1],g=((f,h=2)=>t.formatNumber(s?f/100:f,{maximumFractionDigits:h,...o,signDisplay:c&&c.startsWith("+")?"never":"auto"})).apply(void 0,u.split(","));a=a.replaceAll(n[0],g)}return a},d=(i,e,o,s)=>{let t=s?v(i,e):v(i,e).replace(/(?:\r\n|\r|\n)/g,"<br>");return t=p(T,t,{style:"percent"},!0,o),t=p(b,t,{style:"decimal"},!1,o),t=p(C,t,{notation:"compact"},!1,o),t},F=({tooltip:i,d:e,intl:o,tooltipEnableMarkdown:s})=>{const{color:t,data:r}=e.datum||e.point||e,n=e.value||(e.datum?e.datum.value:null)||(e.point?e.point.data.y:null);let a="";if(r){const c=r.variables?r.variables[e.id]||r.variables:r,m={field:e.point?e.point.serieId:e.id,...c,value:n};r.measureFieldName&&(m.populationValue=r.variables[r.measureFieldName+"Population"]),a=d(i,m,o,s)}const u=q.useClampTooltipToViewport([a,s]);return r?s?l.jsx("div",{ref:u,className:"chart tooltip",children:l.jsx(x,{children:a,remarkPlugins:[y],rehypePlugins:[j]})}):l.jsx("div",{ref:u,className:"chart tooltip",children:l.jsx("div",{dangerouslySetInnerHTML:{__html:a}})}):l.jsx("div",{})};exports.default=F;exports.formatContent=d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),g=require("react");class h extends g.Component{constructor(t){super(t)}formatNumber(t){const{intl:i,format:s}=this.props;return i.formatNumber(s.style==="percent"?t/100:t,{style:s.style,notation:s.notation,maximumFractionDigits:s.maximumFractionDigits,minimuFractionDigits:0,currency:s.currency})}render(){const{filteredBreaks:t,formattedLegendTitle:i,showLegendLabels:s,symbols:r,legendFontSize:c,legendFontWeight:d,autoGenerateBreaks:a,intl:N,numberFormat:b,mapNoDataColor:u,showNoDataLegendItem:o,noDataText:x}=this.props,n={fontSize:c+"px",fontWeight:d};return l.jsxs("div",{className:"legend-container",children:[l.jsx("div",{className:"legend-title-container",children:l.jsx("span",{className:"legend-title",children:t&&t.length>0?i:""})}),l.jsx("div",{className:"legend",children:l.jsxs("ul",{className:"legend-items-container",children:[t&&t.map((e,m)=>l.jsxs("li",{className:"legend-item",children:[l.jsx("span",{className:"symbol",style:{backgroundColor:e.color}}),s&&!a&&l.jsx("span",{className:"legend-label",style:n,children:e.label}),(!s||a)&&e.min!=null&&e.max!=null&&l.jsxs("span",{className:"legend-label",style:n,children:[this.formatNumber(e.min)," -"," ",this.formatNumber(e.max)]}),(!s||a)&&e.min==null&&e.max!=null&&l.jsxs("span",{className:"legend-label",style:n,children:[" ","< ",this.formatNumber(e.max)]}),(!s||a)&&e.min!=null&&e.max==null&&l.jsxs("span",{className:"legend-label",style:n,children:[" ","> ",this.formatNumber(e.min)," "]})]},"lg"+m)),console.log("showNoDataLegendItem",o),o&&l.jsxs("li",{className:"legend-item",children:[l.jsx("span",{className:"symbol",style:{backgroundColor:u}}),l.jsx("span",{className:"legend-label",style:n,children:x})]}),r&&r.map((e,m)=>l.jsxs("li",{className:"legend-item",children:[e.image&&l.jsx("img",{style:{width:"40px",height:"40px",marginTop:"-8px",marginRight:"-4px"},src:"/"+e.image}),l.jsx("span",{className:"legend-label",style:n,children:e.label?e.label:""})]},"k"+m))]})})]})}}exports.default=h;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"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)
|
|
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,
|
|
3
|
-
`),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,
|
|
4
|
-
{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;
|
|
1
|
+
"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"),W=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=r=>(r==null?void 0:r.trim().toLowerCase())??"",o=i(F),t=i(e).toUpperCase(),a=s.find(r=>i(r.value)===o||r.code.trim().toLowerCase()===o)??null;if(!a)return F;const n=t&&a.labels&&a.labels[t]?a.labels[t]:a.value;return(n==null?void 0:n.trim())||a.value.trim()}const ee="_Color_",_="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},oe={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"]},ae=["mobile","tablet","midTablet"].includes(T.default()),H=["mobile","tablet"].includes(T.default());class re extends W.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=W.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").style("pointer-events","none"),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 o=[];i.forEach(t=>{o.push(new Promise((a,n)=>{b.json(K.Config.REACT_APP_WP_API+"/wp/v2/media/"+t.id).then(l=>{a({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){a({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(o).then(t=>{const a=[];t.forEach(n=>{n.url&&a.push(new Promise((l,r)=>{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(a).then(n=>{this.setState({layers:n,layersLoading:!1})})})}else b.json(e).then(o=>{this.setState({layers:[{id:null,url:e,data:o,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 o;return e&&(o=e.filter(t=>t.id==s||t.id==null)[0]||e[0]),o?o.data:null}componentDidUpdate(e,s,i){const{selectedMeasure:o,layers:t,selectedPolygon:a}=this.state,n=this.getMainLayer(),{transformedData:l,intl:r,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||o!=s.selectedMeasure||a!=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,o,t;for(const a in e){const[[n,l],[r,h]]=this.path.bounds(e[a]);(n<s||s==null)&&(s=n),(r>i||i==null)&&(i=r),(l<o||o==null)&&(o=l),(h>t||t==null)&&(t=h)}return[[s,o],[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((o,t,a)=>{const n=b.select(a[t]),l=n.select("div"),r=e.k>1?e.k:1,h=s/r;l.style("font-size",`${h}px`);const p=this.getLabelPosition(o),d=this.getLabelBoxWidth(o)/r,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(o)/r).attr("height",this.getLabelBoxHeight(o)/r)})}resizePointLabels(e){const{labelFontSize:s}=this.props;b.select(this.getMapId()).selectAll(".point-labels-container").each((i,o,t)=>{const a=b.select(t[o]),n=a.select("div"),l=e.k>1?e.k:1,r=s/l;n.style("font-size",`${r}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;a.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:o}=this.props,t=[];if(s&&e&&e.length>0){const a=e.filter(r=>r.properties&&r.properties.value!=null).map(r=>r.properties.value.toFixed(2)),n=[];a.forEach(r=>{if(r>0){const h=r*.99,p=r*1.01;n.indexOf(h)===-1&&n.push(h),n.indexOf(p)===-1&&n.push(p)}});const l=oe[o];if(n.length>0){const r=new Y(n);r.setPrecision(2);const h=n.length>1?n.length-1:n.length;return r.getJenks(Math.min(i,h)),r.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(o=>o.measure===this.getSelectedMeasure()).filter(o=>{if(o.filters&&o.filters.length>0&&this.props.appliedFilters&&JSON.stringify(this.props.appliedFilters)!=="{}"){const a=Object.keys(this.props.appliedFilters);return o.filters.filter(l=>{if(a.indexOf(l.field)!=-1){const r=this.props.appliedFilters[l.field],h=l.values;return r.join(",").indexOf(h)!=-1}return!1}).length>0}return!0})),i}}fillColor(e,s){const{mapNoDataColor:i,mainLayerId:o}=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&&(o&&e.properties.layerId===o||!o)){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 a=this.props.enabledLayers.filter(n=>n.id===e.properties.layerId)[0];return a&&a.bgColor&&a.bgColor!="undefined"?a.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:o,highlightedLocation:t}=this.props,a=[...e.filter(n=>t!=n.properties[i]),...e.filter(n=>t==n.properties[i])];this.drawPolygons(a),this.drawLabels(a),this.drawPoints(a,s),o.length>0&&this.addSymbols(o,a)}drawLabels(e){const{mapLabelField:s,mapLabelShowValue:i,intl:o,valueFormat:t,showNoDataLabel:a,labelFontColor:n,labelFontWeight:l,labelFontSize:r,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)=>`${r}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=>`${r}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&&a)?"#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 o=e.properties.layerMappingField||s,t=e.properties[o];return P(this.metadataTypes,t,e.properties.layerLocale)}return e.properties[s]}createLabel(e){const{mapLabelField:s,mapLabelShowValue:i,intl:o,valueFormat:t,showNoDataLabel:a,showAdminUnitLabel:n,noDataText:l}=this.props;let r="";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||(o==null?void 0:o.locale);r=P(this.metadataTypes,p,d);const u=e.properties.abbrev;if(r&&r.length>te&&u&&(r=u),i)if(e.properties.value!=null){const m=e.properties.variables||{};r+="<br><span class='map-label-value'>"+j.formatContent(t,{value:e.properties.value,measure:this.getSelectedMeasure(),...m},o)+"</span>"}else a==!0&&e.properties.value==null&&e.properties.hasDataRow&&(r+="<br><span class='map-label-value'>"+l+"</span>")}return r}drawPolygons(e){const{mapLabelField:s,mapBoundaryColor:i,mapFocusBoundaryColor:o,highlightedLocation:t}=this.props,a=this.getBreaks(),n=b.select(this.getMapId()).select("svg").select("g"),l=e.filter(r=>r.geometry&&r.geometry&&(r.geometry.type=="Polygon"||r.geometry.type=="MultiPolygon"));l.length>0&&n.selectAll("path").data(l).join("path").attr("d",this.path).attr("fill",r=>this.fillColor(r,a)).attr("stroke-width",r=>t==r.properties[s]?1.2:.4).attr("stroke",r=>t==r.properties[s]?o:i).on("click",this.onPolygonClick)}drawPoints(e,s){const{intl:i,pointLabelColor:o,pointLabelFormat:t,transformedData:a,defaultPointColor:n,appliedFilters:l,zoomOnFilterField:r,noDataText:h,showShadingLayerLabels:p}=this.props,d=b.select(this.getMapId()).select("svg").select("g");let u=[];if(a.pointsData){let c=this.state.selectedPolygon;s&&l&&l[r]&&(c=l[r]),u=a.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)=>o).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,o=b.select(this.getMapId()).select("svg").select("g");e.forEach(t=>{if(t.field&&t.image&&t.values){const a=s.filter(l=>{const r=_==t.field?i:"value",h=(l.properties[r]||(l.properties.variables?l.properties.variables[r]:""))+"",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 r=_==t.field?i:"value",h=(l.properties[r]||(l.properties.variables?l.properties.variables[r]:""))+"",d=(t.values+"").split(",");return!l.properties.LATITUDE&&!l.properties.LONGITUDE&&d.filter(u=>u.trim().toLowerCase()==h.trim().toLowerCase()).length>0});o.selectAll("image").data(a).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),o.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 o=e.properties[s].length;return o<10?i:o*8}return 0}featuresZoom(e,s,i){const o=b.select(this.getMapId()).select("svg"),t=this.boundingExtent(e),[[a,n],[l,r]]=t,h=this.getWidth(),p=this.getHeight(),d=Math.min(8,.9/Math.max((l-a)/h,(r-n)/p)),u=[h/2-(a+l)/2,p/2-(n+r)/2];s?o.call(this.zoom.transform,b.zoomIdentity.translate(u[0],u[1]).scale(d)):o.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:o,tooltipTheme:t,customTooltips:a,tooltipFontSize:n,tooltipFormat:l,intl:r,mappingField:h,showNoDataTooltip:p,fields:d,mapType:u,noDataText:m}=this.props;if(o=!!["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"+(o?" zoom-enabled":""):"active"+(o?" zoom-enabled":""));const f=l||`{locationName} %({value},2)
|
|
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,r),label:this.getTranslatedLocationName(s,h,r),...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(`
|
|
3
|
+
`),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,r)),N&&(L.endsWith("<hr>")||(L+="<hr>"),L+=j.formatContent(N,C,r)),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,r)}),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,r))})),a.filter(I=>I.location===s.properties[h]).forEach(I=>{L.endsWith("<hr>")||(L+="<hr>"),L+=I.tooltip})}else{const w=l||`{locationName} %({value},2)
|
|
4
|
+
{label}: %({value},2)`,D={value:null,measure:this.getSelectedMeasure(),measureLabel:s.properties.measureLabel,locationName:this.getTranslatedLocationName(s,h,r),...y};L+=j.formatContent(w,D,r),L+="</div>"}return L})}}positionTooltip(e){const i=this.tooltip.node(),o=i?i.offsetWidth:0,t=window.scrollX+document.documentElement.clientWidth;let a=e.pageX;o&&a+o>t&&(a=e.pageX-o,a<window.scrollX&&(a=window.scrollX)),this.tooltip.style("top",e.pageY+"px").style("left",a+"px").style("margin-left","8px")}mousemove(e,s){this.positionTooltip(e)}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"),this.positionTooltip(e)),e.stopPropagation(),e.preventDefault()}onPointClick(e,s,i){this.showTooltip(e,s),this.tooltip.style("visibility","visible"),this.positionTooltip(e);const o=b.select(this.getMapId()).select("svg").select("g");o.selectAll("circle").style("fill",this.props.defaultPointColor).style("stroke","none"),o.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 o in i){const t=i[o];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(o=>{const t=s.find(a=>a.id==o.id);return o.index=t?t.index:0,o}).sort((o,t)=>parseInt(o.index)<parseInt(t.index)?1:parseInt(o.index)>parseInt(t.index)?-1:0):[]}getFeatures(){const e=this.getMainLayer(),s=this.getLayers();if(e){const{transformedData:i,mappingField:o,app:t,mainLayerId:a,enabledLayers:n}=this.props;let l=[];try{l=this.extractFeatures(e),l.map(p=>{p.properties.layerId=a;const d=s.find(u=>String(u.id)===String(a));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)==a&&Object.keys(u||{}).forEach(m=>{p.properties[m]=u[m]})}),p}),s&&s.forEach(p=>{if(p.id!=a){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 r=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())),r.map(p=>{if(h){const d=h.find(u=>{const m=u.label?(""+u.label).toLowerCase():"",v=p.properties[o]?p.properties[o].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}}),r}return[]}getMapId(){const{unique:e}=this.props;return".map.wrapper."+e}filterUpdated(e,s){const{zoomOnFilterField:i}=this.props,o=e&&e.appliedFilters||{},t=this.props.appliedFilters||{};let a=!1;return o[i]!=t[i]&&(a=!0),a}getCenter(e,s){const{zoomOnFilter:i,zoomOnFilterField:o,mappingField:t,appliedFilters:a}=this.props;let n=null;if(i&&o){let l=this.state.selectedPolygon;s&&a&&a[o]&&(l=a[o]);const r=e.filter(h=>h.properties!=null&&h.properties[t]==l)[0];r&&r.properties!=null&&r.properties.value&&(n=r)}return n}area(e){let s=0;const i=e.coordinates.length>1?e.coordinates[0][0]:e.coordinates[0];for(let o=0;o<i.length-1;o++)s+=i[o][0]*i[o+1][1]-i[o+1][0]*i[o][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 o=this.area(e);return s[0]/=o*6,s[1]/=o*6,s}d3Map(e,s){let{zoomEnabled:i,mapContainerBgColor:o,mapPosition:t,editing:a,mapType:n}=this.props;i||(i=!!["mobile","tablet"].includes(T.default()));const l=this.getBreaks(),r=b.select(this.getMapId());let h=r.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=r.append("svg"):h.selectAll("*").remove(),h.attr("style",`background-color:${o};`).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||a?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(o=>{const t=e[o];t&&(s[o]=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(a=>a.properties[s]===e);if(t&&t.properties.displayLayerLabels&&t.properties.layerLocale){const a=t.properties.layerMappingField||s,n=t.properties[a];return P(this.metadataTypes,n,t.properties.layerLocale)}return e}getHighlightedLocationColor(e){const s=this.getBreaks(),{mapNoDataColor:i}=this.props,o=e?e.value:null;if(o!=null){const t=s.find(a=>{if(a.min!=null&&a.max!=null)return o>=a.min&&o<=a.max;if(a.min!=null)return o>=a.min;if(a.max!=null)return o<=a.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:o,zoomEnabled:t,transformedData:a,measureSelectorLabel:n,valueFormat:l,showOverallValue:r,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"&&r&&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},o)})]})}),g.jsx(M.Grid.Column,{textAlign:"right",width:e!=="csv"&&r?12:16,children:g.jsx(X.default,{filteredBreaks:this.getBreaks(),formattedLegendTitle:j.formatContent(s,{...y},o),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})}),a&&a.measures&&a.measures.length>1&&a.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:a.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},o)]})}):g.jsx(g.Fragment,{children:" "}),(m||t)&&!ae&&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;
|