@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) • 13.4 kB
JavaScript
"use strict";var M=Object.defineProperty;var v=(h,u,s)=>u in h?M(h,u,{enumerable:!0,configurable:!0,writable:!0,value:s}):h[u]=s;var y=(h,u,s)=>v(h,typeof u!="symbol"?u+"":u,s);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),O=require("react"),C=require("semantic-ui-react"),w=require("./Background.js"),L=require("./Stomach.js"),j=require("./Liver.js"),q=require("./Bounds.js"),S=require("./Blood.js"),x=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"),f=require("react-intl"),W=require("../../translations/en.json.js"),_=require("../../translations/fr.json.js"),z=require("../../translations/am.json.js"),b=require("../../utils/deviceType.js");function R(h){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const s in h)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(h,s);Object.defineProperty(u,s,e.get?e:{enumerable:!0,get:()=>h[s]})}}return u.default=h,Object.freeze(u)}const p=R(D);class Y extends O.Component{constructor(s){super(s);y(this,"localeYDims",{en:"60",fr:"40",am:"40"});y(this,"localeXdims",{en:"-250",fr:"-280",am:"-280"});y(this,"titleDims",{am:160,fr:180,en:180});y(this,"titleLineWidths",{Cancers:{am:125,fr:58,en:58},OtherConditions:{am:158,fr:118,en:118}});y(this,"mobileOptions",{Cancers:{x:this.titleDims[this.props.intl.locale],y:25},OtherConditions:{x:this.isIphone()&&this.props.intl.locale==="am"?370:350,y:25},viewBoxDims:"0 0 550 520"});this.state={counter:0,isMobile:["mobile","tablet"].includes(b.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),this.messages={en:W.default,fr:_.default,am:z.default}}updateLayout(){this.setState({isMobile:["mobile","tablet"].includes(b.default())})}getScreenOrientation(){var s;return((s=window.screen.orientation)==null?void 0:s.type)||(window.innerWidth>window.innerHeight?"landscape-primary":"portrait-primary")}isIphone(){const s=navigator.userAgent.toLowerCase();return/iphone/i.test(s)}handleOrientationChange(){setTimeout(()=>{this.setState({orientation:this.getScreenOrientation()},()=>{this.updateLayout(),this.updateSvgLabels()})},100)}handleTextClick(s){if(!this.state.isMobile)return;const e=s.target.closest("svg"),t=s.target.closest(".title"),r=s.target.closest(".title-rect");if(t||r){[...e.querySelectorAll(".title, .title-rect, .title-line")].forEach(a=>a.classList.remove("on"));const d=t||r,i=d.getAttribute("data-option");d.classList.add("on");const c=d.closest("g"),m=c.querySelector(".title-rect"),n=c.querySelector(".title");m&&m.classList.add("on"),n&&n.classList.add("on");const g=c.querySelector(".title-line");g&&g.classList.add("on"),i&&this.setState({selectedOption:i})}}onMouseOut(){p.select(".body.parts").selectAll("g.system").transition().duration(0).delay(200).style("opacity",1),p.select(".body.parts").selectAll("circle").remove(),p.select(".body.parts").selectAll("line").remove()}onMouseOver(s,e,t){const r=p.select(".body.parts"),d=r.select(s);s&&(r.selectAll("g.system").transition().duration(200).style("opacity",0),d.transition().style("opacity",1));const i=e.node().getBBox();let c,m,n,g;i.x<0?(c=i.x+i.width+5,n=c>0?30:-5,m=i.y+i.height/2,g=i.y+i.height/2):(c=i.x-5,n=140,m=i.y+i.height/2,g=i.y+i.height/2),r.select("svg").append("line").attr("x1",c).attr("y1",m).attr("x2",c).attr("y2",m).transition().duration(100).attr("x2",n).attr("y2",g),r.select("svg").append("line").attr("x1",n).attr("y1",i.y+i.height/2).attr("x2",n).attr("y2",i.y+i.height/2).transition().duration(100).delay(100).attr("x2",t.tx).attr("y2",t.ty),r.select("svg").append("circle").attr("r",0).attr("cx",t.tx).attr("cy",t.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,e=document.querySelector("svg");if(!e)return;[...e.querySelectorAll(".title, .title-rect, .title-line")].forEach(i=>i.classList.remove("on"));const t=e.querySelector(`[data-option="${s}"].title`),r=e.querySelector(`[data-option="${s}"].title-rect`);let d=null;if(t||r){const i=(t||r).closest("g");d=i?i.querySelector(".title-line"):null}t&&t.classList.add("on"),r&&r.classList.add("on"),d&&d.classList.add("on")}updateSvgLabels(){const s=p.select(".body.parts"),e=this.props.intl,t=this.messages[e.locale],r=[{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}],d=[{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:i,isMobile:c}=this.state,m=i==="Cancers"?r:d;let n=60;const g=(a,o)=>c&&this.props.intl.locale==="am"?140:c?160:-250;e.locale==="en"?c?s.select("svg").selectAll("text.label").data(m).enter().append("text").attr("class","label").attr("x",g).attr("y",(a,o)=>n+o*25).text(a=>a.label):(n=90,s.select("svg").selectAll("text.left").data(r).enter().append("text").attr("class","label").attr("x",(a,o)=>-250).attr("y",(a,o)=>n+o*25).text(a=>a.label),s.select("svg").selectAll("text.right").data(d).enter().append("text").attr("class","label").attr("x",(a,o)=>200).attr("y",(a,o)=>n+o*25).text(a=>a.label)):(e.locale==="fr"||e.locale==="am")&&(c?s.select("svg").selectAll("text.label").data(m).enter().append("text").attr("class","label").attr("x",g).attr("y",(a,o)=>n+o*25).text(a=>a.label):(s.select("svg").selectAll("text.left").data(r).enter().append("text").attr("class","label").attr("x",(a,o)=>-280).attr("y",(a,o)=>n+o*25).text(a=>a.label),s.select("svg").selectAll("text.right").data(d).enter().append("text").attr("class","label").attr("x",(a,o)=>200).attr("y",(a,o)=>n+o*25).text(a=>a.label))),s.select("svg").selectAll("text.label").on("mouseover",(a,o)=>{this.onMouseOver(o.selector,p.select(a.currentTarget),o,{tx:o.tx,ty:o.ty})}).on("mouseout",(a,o)=>{this.onMouseOut()})}componentDidUpdate(s,e){(e.selectedOption!==this.state.selectedOption||e.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 l.jsx(C.Container,{className:"body parts",children:l.jsxs("svg",{className:"body root",viewBox:this.state.isMobile?this.mobileOptions.viewBoxDims:"-300 0 900 520",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx(w.default,{className:"backGround"}),l.jsx(q.default,{className:"system bounds"}),l.jsx(E.default,{className:"system head"}),l.jsx(x.default,{className:"system larynx"}),l.jsx(x.default,{className:"system lungs"}),l.jsx(L.default,{className:"system stomach"}),l.jsx(j.default,{className:"system liver"}),l.jsx(T.default,{className:"system brain"}),l.jsx(N.default,{className:"system eyes"}),l.jsx(S.default,{className:"system blood"}),l.jsx(k.default,{className:"system heart"}),l.jsx(A.default,{className:"system erectile"}),l.jsx(B.default,{className:"system Ectopic"}),l.jsxs("g",{onClick:this.handleTextClick,children:[l.jsx("rect",{className:"title-rect","data-option":"Cancers",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"}),l.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","data-option":"Cancers",children:l.jsx(f.FormattedMessage,{id:"ailments.title",defaultMessage:"{cancers}",values:{cancers:this.messages[this.props.intl.locale]["ailments.title"]}})}),this.state.isMobile&&l.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:this.titleLineWidths.Cancers[this.props.intl.locale]||this.titleLineWidths.Cancers.en,height:"3",fill:"#E5EBED"})]}),l.jsxs("g",{onClick:this.handleTextClick,children:[l.jsx("rect",{className:"title-rect","data-option":"OtherConditions",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"}),l.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","data-option":"OtherConditions",children:l.jsx(f.FormattedMessage,{id:"ailments.otherConditions",defaultMessage:"{otherConditions}",values:{otherConditions:this.messages[this.props.intl.locale]["ailments.otherConditions"]}})}),this.state.isMobile&&l.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:this.titleLineWidths.OtherConditions[this.props.intl.locale]||this.titleLineWidths.OtherConditions.en,height:"3",fill:"#E5EBED"})]})]})})}}const I=f.injectIntl(Y);exports.default=I;