@devgateway/dvz-ui-react
Version:
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.
2 lines (1 loc) • 12.2 kB
JavaScript
"use strict";var M=Object.defineProperty;var v=(c,d,s)=>d in c?M(c,d,{enumerable:!0,configurable:!0,writable:!0,value:s}):c[d]=s;var x=(c,d,s)=>v(c,typeof d!="symbol"?d+"":d,s);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),O=require("react"),C=require("semantic-ui-react"),w=require("./Background.js"),j=require("./Stomach.js"),L=require("./Liver.js"),q=require("./Bounds.js"),S=require("./Blood.js"),f=require("./Lungs.js"),E=require("./Head.js"),N=require("./Eyes.js"),T=require("./Brain.js"),k=require("./Heart.js"),A=require("./Erectile.js"),D=require("d3"),B=require("./Ectopic.js"),b=require("react-intl"),z=require("../../translations/en.json.js"),H=require("../../translations/fr.json.js"),p=require("../../utils/deviceType.js");function Y(c){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const s in c)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(c,s);Object.defineProperty(d,s,t.get?t:{enumerable:!0,get:()=>c[s]})}}return d.default=c,Object.freeze(d)}const g=Y(D);class _ extends O.Component{constructor(s){super(s);x(this,"mobileOptions",{Cancers:{x:180,y:25},OtherConditions:{x:320,y:25},viewBoxDims:"0 0 500 520"});x(this,"localeYDims",{en:"60",fr:"40"});x(this,"localeXdims",{en:"-250",fr:"-280"});this.state={counter:0,isMobile:["mobile","tablet"].includes(p.default()),isClicked:!1,selectedOption:"Cancers",orientation:this.getScreenOrientation()},this.onMouseOut=this.onMouseOut.bind(this),this.onMouseOver=this.onMouseOver.bind(this),this.updateLayout=this.updateLayout.bind(this),this.updateSvgLabels=this.updateSvgLabels.bind(this),this.handleTextClick=this.handleTextClick.bind(this),this.handleOrientationChange=this.handleOrientationChange.bind(this)}updateLayout(){this.setState({isMobile:["mobile","tablet"].includes(p.default())})}getScreenOrientation(){var s;return((s=window.screen.orientation)==null?void 0:s.type)||(window.innerWidth>window.innerHeight?"landscape-primary":"portrait-primary")}handleOrientationChange(){setTimeout(()=>{this.setState({orientation:this.getScreenOrientation()},()=>{this.updateLayout(),this.updateSvgLabels()})},100)}handleTextClick(s){if(!this.state.isMobile)return;const t=s.target.closest("svg"),e=s.target.closest(".title"),o=s.target.closest(".title-rect");if(e||o){[...t.querySelectorAll(".title, .title-rect, .title-line")].forEach(u=>u.classList.remove("on"));const h=e||o;h.classList.add("on");const r=h.closest("g").querySelector(".title-line");r&&r.classList.add("on"),this.setState({selectedOption:e?e.innerHTML:o.nextSibling.innerHTML})}}onMouseOut(){g.select(".body.parts").selectAll("g.system").transition().duration(0).delay(200).style("opacity",1),g.select(".body.parts").selectAll("circle").remove(),g.select(".body.parts").selectAll("line").remove()}onMouseOver(s,t,e){const o=g.select(".body.parts"),h=o.select(s);s&&(o.selectAll("g.system").transition().duration(200).style("opacity",0),h.transition().style("opacity",1));const r=t.node().getBBox();let u,m,n,y;r.x<0?(u=r.x+r.width+5,n=u>0?30:-5,m=r.y+r.height/2,y=r.y+r.height/2):(u=r.x-5,n=140,m=r.y+r.height/2,y=r.y+r.height/2),o.select("svg").append("line").attr("x1",u).attr("y1",m).attr("x2",u).attr("y2",m).transition().duration(100).attr("x2",n).attr("y2",y),o.select("svg").append("line").attr("x1",n).attr("y1",r.y+r.height/2).attr("x2",n).attr("y2",r.y+r.height/2).transition().duration(100).delay(100).attr("x2",e.tx).attr("y2",e.ty),o.select("svg").append("circle").attr("r",0).attr("cx",e.tx).attr("cy",e.ty).attr("opacity",.6).attr("fill","#000").transition().delay(200).duration(30).attr("r",6)}componentDidMount(){window.addEventListener("resize",this.updateLayout),window.screen.orientation?window.screen.orientation.addEventListener("change",this.handleOrientationChange):window.addEventListener("resize",this.handleOrientationChange),this.updateLayout(),this.updateSvgLabels(),this.addOnClassToSelectedElements()}addOnClassToSelectedElements(){const{selectedOption:s}=this.state,t=document.querySelector("svg");let e,o;s==="Cancers"?(e=t.querySelector(".title"),o=t.querySelector(".title-line")):s==="OtherConditions"&&(e=t.querySelectorAll(".title")[1],o=t.querySelectorAll(".title-line")[1]),e&&o&&(e.classList.add("on"),o.classList.add("on"))}updateSvgLabels(){const s=g.select(".body.parts");let t={en:z.default,fr:H.default};const e=this.props.intl;t=t[e.locale];const o=[{label:e.formatMessage({id:"oropharyngeal.cancer",defaultMessage:t["oropharyngeal.cancer"]}),selector:".stomach",tx:90,ty:60},{label:e.formatMessage({id:"laryngeal.cancer",defaultMessage:t["laryngeal.cancer"]}),selector:".larynx",tx:80,ty:90},{label:e.formatMessage({id:"oesophageal.ancer",defaultMessage:t["oesophageal.cancer"]}),selector:".stomach",tx:77,ty:95},{label:e.formatMessage({id:"tracheal.bronchial.lung.cancer",defaultMessage:t["tracheal.bronchial.lung.cancer"]}),selector:".larynx",tx:e.locale==="en"?80:90,ty:120},{label:e.formatMessage({id:"acute.myeloid.leukaemia",defaultMessage:t["acute.myeloid.leukaemia"]}),selector:".blood",tx:90,ty:200},{label:e.formatMessage({id:"stomach.cancer",defaultMessage:t["stomach.cancer"]}),selector:".stomach",tx:80,ty:150},{label:e.formatMessage({id:"liver.cancer",defaultMessage:t["liver.cancer"]}),selector:".stomach",tx:80,ty:150},{label:e.formatMessage({id:"pancreatic.cancer",defaultMessage:t["pancreatic.cancer"]}),selector:".stomach",tx:105,ty:160},{label:e.formatMessage({id:"colorectal.cancer",defaultMessage:t["colorectal.cancer"]}),selector:".stomach",tx:85,ty:250},{label:e.formatMessage({id:"kidney.cancer",defaultMessage:t["kidney.cancer"]}),selector:".stomach",tx:65,ty:185},{label:e.formatMessage({id:"bladder.cancer",defaultMessage:t["bladder.cancer"]}),selector:".erectile",tx:85,ty:250},{label:e.formatMessage({id:"cervical.cancer",defaultMessage:t["cervical.cancer"]}),selector:".Ectopic",tx:85,ty:275}],h=[{label:e.formatMessage({id:"stroke",defaultMessage:t.stroke}),selector:".brain",tx:97,ty:39},{label:e.formatMessage({id:"blindness.decreased.eyesight",defaultMessage:t["blindness.decreased.eyesight"]}),selector:".eyes",tx:97,ty:39},{label:e.formatMessage({id:"periodontitis",defaultMessage:t.periodontitis}),selector:".stomach",tx:90,ty:60},{label:e.formatMessage({id:"aortic.aneurysm",defaultMessage:t["aortic.aneurysm"]}),selector:".blood",tx:90,ty:120},{label:e.formatMessage({id:"heart.disease",defaultMessage:t["heart.disease"]}),selector:".heart",tx:90,ty:140},{label:e.formatMessage({id:"pneumonia",defaultMessage:t.pneumonia}),selector:".lungs",tx:85,ty:130},{label:e.formatMessage({id:"atherosclerotic.peripheral.vascular.disease",defaultMessage:t["atherosclerotic.peripheral.vascular.disease"]}),selector:".blood",tx:90,ty:380},{label:e.formatMessage({id:"copd",defaultMessage:t.copd}),selector:".lungs",tx:85,ty:130},{label:e.formatMessage({id:"tuberculosis",defaultMessage:t.tuberculosis}),selector:".lungs",tx:85,ty:130},{label:e.formatMessage({id:"asthma",defaultMessage:t.asthma}),selector:".lungs",tx:85,ty:130},{label:e.formatMessage({id:"diabetes",defaultMessage:t.diabetes}),selector:".stomach",tx:105,ty:160},{label:e.formatMessage({id:"hip.fractures",defaultMessage:t["hip.fractures"]}),selector:".bounds",tx:90,ty:230},{label:e.formatMessage({id:"rheumatoid.arthritis",defaultMessage:t["rheumatoid.arthritis"]}),selector:".bounds",tx:134,ty:275},{label:e.formatMessage({id:"impaired.immune.function",defaultMessage:t["impaired.immune.function"]}),selector:null,tx:85,ty:130},{label:e.formatMessage({id:"erectile.dysfunction",defaultMessage:t["erectile.dysfunction"]}),selector:".erectile",tx:107,ty:290},{label:e.formatMessage({id:"reduced.fertility.men",defaultMessage:t["reduced.fertility.men"]}),selector:".erectile",tx:95,ty:290},{label:e.formatMessage({id:"ectopic.pregnancy",defaultMessage:t["ectopic.pregnancy"]}),selector:".Ectopic",tx:90,ty:250},{label:e.formatMessage({id:"reduced.fertility.women",defaultMessage:t["reduced.fertility.women"]}),selector:".Ectopic",tx:95,ty:242}];s.select("svg").selectAll("text.label").remove();const{selectedOption:r,isMobile:u}=this.state,m=r==="Cancers"?o:h;let n=60;const y=(a,l)=>u?160:-250;e.locale==="en"?u?s.select("svg").selectAll("text.label").data(m).enter().append("text").attr("class","label").attr("x",y).attr("y",(a,l)=>n+l*25).text(a=>a.label):(n=90,s.select("svg").selectAll("text.left").data(o).enter().append("text").attr("class","label").attr("x",(a,l)=>-250).attr("y",(a,l)=>n+l*25).text(a=>a.label),s.select("svg").selectAll("text.rigth").data(h).enter().append("text").attr("class","label").attr("x",(a,l)=>200).attr("y",(a,l)=>n+l*25).text(a=>a.label)):u?s.select("svg").selectAll("text.label").data(m).enter().append("text").attr("class","label").attr("x",y).attr("y",(a,l)=>n+l*25).text(a=>a.label):(s.select("svg").selectAll("text.left").data(o).enter().append("text").attr("class","label").attr("x",(a,l)=>-280).attr("y",(a,l)=>n+l*25).text(a=>a.label),s.select("svg").selectAll("text.right").data(h).enter().append("text").attr("class","label").attr("x",(a,l)=>200).attr("y",(a,l)=>n+l*25).text(a=>a.label)),s.select("svg").selectAll("text.label").on("mouseover",(a,l)=>{this.onMouseOver(l.selector,g.select(a.currentTarget),l,{tx:l.tx,ty:l.ty})}).on("mouseout",(a,l)=>{this.onMouseOut()})}componentDidUpdate(s,t){(t.selectedOption!==this.state.selectedOption||t.orientation!==this.state.orientation)&&(this.updateSvgLabels(),this.addOnClassToSelectedElements())}componentWillUnmount(){window.removeEventListener("resize",this.updateLayout),window.screen.orientation?window.screen.orientation.removeEventListener("change",this.handleOrientationChange):window.removeEventListener("resize",this.handleOrientationChange)}render(){return i.jsx(C.Container,{className:"body parts",children:i.jsxs("svg",{className:"body root",viewBox:this.state.isMobile?this.mobileOptions.viewBoxDims:"-300 0 900 520",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx(w.default,{className:"backGround"}),i.jsx(q.default,{className:"system bounds"}),i.jsx(E.default,{className:"system head"}),i.jsx(f.default,{className:"system larynx"}),i.jsx(f.default,{className:"system lungs"}),i.jsx(j.default,{className:"system stomach"}),i.jsx(L.default,{className:"system liver"}),i.jsx(T.default,{className:"system brain"}),i.jsx(N.default,{className:"system eyes"}),i.jsx(S.default,{className:"system blood"}),i.jsx(k.default,{className:"system heart"}),i.jsx(A.default,{className:"system erectile"}),i.jsx(B.default,{className:"system Ectopic"}),i.jsxs("g",{onClick:this.handleTextClick,children:[i.jsx("rect",{className:"title-rect",x:this.state.isMobile?this.mobileOptions.Cancers.x-20:"",y:this.state.isMobile?this.mobileOptions.Cancers.y-20:this.localeYDims[this.props.intl.locale],rx:"5",ry:"5",width:"100",height:"30"}),i.jsx("text",{x:this.state.isMobile?this.mobileOptions.Cancers.x:this.localeXdims[this.props.intl.locale],y:this.state.isMobile?this.mobileOptions.Cancers.y:this.localeYDims[this.props.intl.locale],className:"title",children:i.jsx(b.FormattedMessage,{id:"ailments.title",defaultMessage:"Cancers"})}),this.state.isMobile&&i.jsx("rect",{className:"title-line",x:this.state.isMobile?this.mobileOptions.Cancers.x-18:"-250",y:this.state.isMobile?this.mobileOptions.Cancers.y+7:"",width:"58",height:"3",fill:"#E5EBED"})]}),i.jsxs("g",{onClick:this.handleTextClick,children:[i.jsx("rect",{className:"title-rect",x:this.state.isMobile?this.mobileOptions.OtherConditions.x-65:"",y:this.state.isMobile?this.mobileOptions.OtherConditions.y-20:this.localeYDims[this.props.intl.locale],rx:"5",ry:"5",width:"155",height:"30"}),i.jsx("text",{x:this.state.isMobile?this.mobileOptions.OtherConditions.x-50:"200",y:this.state.isMobile?this.mobileOptions.OtherConditions.y:this.localeYDims[this.props.intl.locale],className:"title",children:i.jsx(b.FormattedMessage,{id:"ailments.otherConditions",defaultMessage:"Other conditions"})}),this.state.isMobile&&i.jsx("rect",{className:"title-line",x:this.state.isMobile?this.mobileOptions.OtherConditions.x-68:"200",y:this.state.isMobile?this.mobileOptions.OtherConditions.y+7:"60",width:"118",height:"3",fill:"#E5EBED"})]})]})})}}const P=b.injectIntl(_);exports.default=P;