@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.
511 lines (510 loc) • 17.4 kB
JavaScript
var v = Object.defineProperty;
var O = (g, d, s) => d in g ? v(g, d, { enumerable: !0, configurable: !0, writable: !0, value: s }) : g[d] = s;
var p = (g, d, s) => O(g, typeof d != "symbol" ? d + "" : d, s);
import { jsx as l, jsxs as b } from "react/jsx-runtime";
import C from "react";
import { Container as w } from "semantic-ui-react";
import L from "./Background.js";
import S from "./Stomach.js";
import E from "./Liver.js";
import N from "./Bounds.js";
import T from "./Blood.js";
import f from "./Lungs.js";
import k from "./Head.js";
import A from "./Eyes.js";
import D from "./Brain.js";
import B from "./Heart.js";
import q from "./Erectile.js";
import * as u from "d3";
import Y from "./Ectopic.js";
import { injectIntl as z, FormattedMessage as x } from "react-intl";
import $ from "../../translations/en.json.js";
import j from "../../translations/fr.json.js";
import M from "../../utils/deviceType.js";
class H extends C.Component {
constructor(s) {
super(s);
p(this, "mobileOptions", {
Cancers: {
x: 180,
y: 25
},
OtherConditions: {
x: 320,
y: 25
},
viewBoxDims: "0 0 500 520"
});
p(this, "localeYDims", {
en: "60",
fr: "40"
});
p(this, "localeXdims", {
en: "-250",
fr: "-280"
});
this.state = {
counter: 0,
isMobile: ["mobile", "tablet"].includes(M()),
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(M()) });
}
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"), r = s.target.closest(".title-rect");
if (e || r) {
[...t.querySelectorAll(".title, .title-rect, .title-line")].forEach(
(c) => c.classList.remove("on")
);
const m = e || r;
m.classList.add("on");
const o = m.closest("g").querySelector(".title-line");
o && o.classList.add("on"), this.setState({
selectedOption: e ? e.innerHTML : r.nextSibling.innerHTML
});
}
}
onMouseOut() {
u.select(".body.parts").selectAll("g.system").transition().duration(0).delay(200).style("opacity", 1), u.select(".body.parts").selectAll("circle").remove(), u.select(".body.parts").selectAll("line").remove();
}
onMouseOver(s, t, e) {
const r = u.select(".body.parts"), m = r.select(s);
s && (r.selectAll("g.system").transition().duration(200).style("opacity", 0), m.transition().style("opacity", 1));
const o = t.node().getBBox();
let c, h, n, y;
o.x < 0 ? (c = o.x + o.width + 5, n = c > 0 ? 30 : -5, h = o.y + o.height / 2, y = o.y + o.height / 2) : (c = o.x - 5, n = 140, h = o.y + o.height / 2, y = o.y + o.height / 2), r.select("svg").append("line").attr("x1", c).attr("y1", h).attr("x2", c).attr("y2", h).transition().duration(100).attr("x2", n).attr("y2", y), r.select("svg").append("line").attr("x1", n).attr("y1", o.y + o.height / 2).attr("x2", n).attr("y2", o.y + o.height / 2).transition().duration(100).delay(100).attr("x2", e.tx).attr("y2", e.ty), r.select("svg").append("circle").attr("r", 0).attr("cx", e.tx).attr("cy", e.ty).attr("opacity", 0.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, r;
s === "Cancers" ? (e = t.querySelector(".title"), r = t.querySelector(".title-line")) : s === "OtherConditions" && (e = t.querySelectorAll(".title")[1], r = t.querySelectorAll(".title-line")[1]), e && r && (e.classList.add("on"), r.classList.add("on"));
}
updateSvgLabels() {
const s = u.select(".body.parts");
let t = {
en: $,
fr: j
};
const e = this.props.intl;
t = t[e.locale];
const 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
}
], m = [
{
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: o, isMobile: c } = this.state, h = o === "Cancers" ? r : m;
let n = 60;
const y = (a, i) => c ? 160 : -250;
e.locale === "en" ? c ? s.select("svg").selectAll("text.label").data(h).enter().append("text").attr("class", "label").attr("x", y).attr("y", (a, i) => n + i * 25).text((a) => a.label) : (n = 90, s.select("svg").selectAll("text.left").data(r).enter().append("text").attr("class", "label").attr("x", (a, i) => -250).attr("y", (a, i) => n + i * 25).text((a) => a.label), s.select("svg").selectAll("text.rigth").data(m).enter().append("text").attr("class", "label").attr("x", (a, i) => 200).attr("y", (a, i) => n + i * 25).text((a) => a.label)) : c ? s.select("svg").selectAll("text.label").data(h).enter().append("text").attr("class", "label").attr("x", y).attr("y", (a, i) => n + i * 25).text((a) => a.label) : (s.select("svg").selectAll("text.left").data(r).enter().append("text").attr("class", "label").attr("x", (a, i) => -280).attr("y", (a, i) => n + i * 25).text((a) => a.label), s.select("svg").selectAll("text.right").data(m).enter().append("text").attr("class", "label").attr("x", (a, i) => 200).attr("y", (a, i) => n + i * 25).text((a) => a.label)), s.select("svg").selectAll("text.label").on("mouseover", (a, i) => {
this.onMouseOver(i.selector, u.select(a.currentTarget), i, {
tx: i.tx,
ty: i.ty
});
}).on("mouseout", (a, i) => {
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 /* @__PURE__ */ l(w, { className: "body parts", children: /* @__PURE__ */ b(
"svg",
{
className: "body root",
viewBox: this.state.isMobile ? this.mobileOptions.viewBoxDims : "-300 0 900 520",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ l(L, { className: "backGround" }),
/* @__PURE__ */ l(N, { className: "system bounds" }),
/* @__PURE__ */ l(k, { className: "system head" }),
/* @__PURE__ */ l(f, { className: "system larynx" }),
/* @__PURE__ */ l(f, { className: "system lungs" }),
/* @__PURE__ */ l(S, { className: "system stomach" }),
/* @__PURE__ */ l(E, { className: "system liver" }),
/* @__PURE__ */ l(D, { className: "system brain" }),
/* @__PURE__ */ l(A, { className: "system eyes" }),
/* @__PURE__ */ l(T, { className: "system blood" }),
/* @__PURE__ */ l(B, { className: "system heart" }),
/* @__PURE__ */ l(q, { className: "system erectile" }),
/* @__PURE__ */ l(Y, { className: "system Ectopic" }),
/* @__PURE__ */ b("g", { onClick: this.handleTextClick, children: [
/* @__PURE__ */ l(
"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"
}
),
/* @__PURE__ */ l(
"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: /* @__PURE__ */ l(x, { id: "ailments.title", defaultMessage: "Cancers" })
}
),
this.state.isMobile && /* @__PURE__ */ l(
"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"
}
)
] }),
/* @__PURE__ */ b("g", { onClick: this.handleTextClick, children: [
/* @__PURE__ */ l(
"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"
}
),
/* @__PURE__ */ l(
"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: /* @__PURE__ */ l(
x,
{
id: "ailments.otherConditions",
defaultMessage: "Other conditions"
}
)
}
),
this.state.isMobile && /* @__PURE__ */ l(
"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 oe = z(H);
export {
oe as default
};