@devgateway/dvz-ui-react 1.0.0

package/dist/esm/embeddable/body/index.js

@@ -0,0 +1,510 @@
+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
+};