@devgateway/dvz-ui-react 1.4.0 → 1.5.1

package/dist/esm/embeddable/big-number-trend/index.js

@@ -1,5 +1,5 @@
-import { jsx as o, jsxs as E } from "react/jsx-runtime";
-import { useRef as q, useState as A } from "react";
+import { jsx as o, jsxs as A } from "react/jsx-runtime";
+import { useRef as V, useState as q } from "react";
 import { Container as H } from "semantic-ui-react";
 import J from "../data/DataProvider.js";
 import $ from "../data/DataConsumer.js";
@@ -10,14 +10,14 @@ import G from "string-template";
 const K = (f) => {
   const {
     editing: c = !1,
-    unique: h,
+    unique: g,
     intl: u,
-    childContent: g,
+    childContent: h,
     "data-csv": m = "",
     "data-dvz-proxy-dataset-id": b,
     "data-no-data-message": T = "No data matches your selection",
-    "data-view-mode": F = "info",
-    "data-height": v,
+    "data-view-mode": v = "info",
+    "data-height": F,
     "data-app": x,
     "data-measures": C = "{}",
     "data-format": z = "{}",
@@ -31,15 +31,15 @@ const K = (f) => {
     "data-dimension1": r,
     "data-show-percentage-change": S = "false",
     "data-wait-for-filters": D = "false",
-    "data-no-data-text": I = "-"
-  } = f, w = u.locale, j = q(null), s = (n) => c ? n : decodeURIComponent(n), l = (n) => {
+    "data-no-data-text": w = "-"
+  } = f, I = u.locale, j = V(null), s = (n) => c ? n : decodeURIComponent(n), l = (n) => {
     try {
       return JSON.parse(s(n));
     } catch {
       console.error("error parsing value:" + n);
     }
     return null;
-  }, t = l(z), O = t ? {
+  }, t = l(z), E = t ? {
     style: t.style === "compacted" ? "decimal" : t.style,
     notation: t.style === "compacted" ? "compact" : "standard",
     currency: t.currency,
@@ -50,31 +50,31 @@ const K = (f) => {
     currency: "USD",
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
-  }, [X, Y] = A(F), V = c ? v - 80 : v - 40, P = {}, M = l(N) || {};
+  }, [X, Y] = q(v), O = c ? F - 80 : F - 40, P = {}, M = l(N) || {};
   M && M.forEach && M.forEach((n) => {
     n.value != null && n.value.filter((U) => U != null && U.toString().trim() != "").length > 0 && (P[n.param] = n.value);
   }), b && (P.dvzProxyDatasetId = b);
   const R = [];
-  return r != "none" && R.push(r), /* @__PURE__ */ o("div", { ref: j, children: /* @__PURE__ */ o(H, { className: "chart container big-number-trend-container", style: { height: v + "px" }, fluid: !0, children: /* @__PURE__ */ o(
+  return r != "none" && R.push(r), /* @__PURE__ */ o("div", { ref: j, children: /* @__PURE__ */ o(H, { className: "chart container big-number-trend-container", style: { height: F + "px" }, fluid: !0, children: /* @__PURE__ */ o(
     J,
     {
-      style: { height: `${V}px` },
+      style: { height: `${O}px` },
       params: P,
       app: x,
       group: y,
       csv: m,
       editing: c,
       waitForFilters: D === "true",
-      store: [x, h, ...R],
+      store: [x, g, ...R],
       source: R.join("/"),
       children: /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(
         L,
         {
           editing: c,
-          locale: w,
+          locale: I,
           intl: u,
           app: x,
-          format: O,
+          format: E,
           dimension1: r,
           measure: l(C)[0] || null,
           label: p,
@@ -83,7 +83,7 @@ const K = (f) => {
           labelFontSize: a,
           percentFontSize: d,
           showPercentageChange: S == "true" || S == !0,
-          noDataText: I
+          noDataText: w
         }
       ) })
     }
@@ -91,14 +91,14 @@ const K = (f) => {
 }, L = (f) => {
   const {
     editing: c,
-    app: h,
+    app: g,
     measure: u,
-    dimension1: g,
+    dimension1: h,
     data: m,
     format: b,
     label: T,
-    textColor: F,
-    bigNumberFontSize: v,
+    textColor: v,
+    bigNumberFontSize: F,
     percentFontSize: x,
     labelFontSize: C,
     showPercentageChange: z,
@@ -106,7 +106,7 @@ const K = (f) => {
     noDataText: N
   } = f;
   let e = [], i, a;
-  if (h == "csv") {
+  if (g == "csv") {
     const { data: s, meta: { fields: l } } = m;
     i = l[0], a = l[1], e = m.data.map((t) => ({
       value: t[i],
@@ -114,35 +114,35 @@ const K = (f) => {
       [i]: t[i]
     }));
   } else
-    e = !m.children || m.children.length == 0 ? [] : m.children, a = u, i = g, e = e.map((s) => ({
+    e = !m.children || m.children.length == 0 ? [] : m.children, a = u, i = h, e = e.map((s) => ({
       value: s.value,
       [a]: s[a],
       [i]: s.value
     }));
   let d = null, p = null, r, S, D;
   e.length > 0 && (e = e.sort((s, l) => B(!1, y.locale, s.value, l.value)), d = e[e.length - 1][a], e.length > 1 && (p = e[e.length - 2][a]), D = y.formatNumber(b.style === "percent" ? d / 100 : d, { ...b }), p && (r = (d - p) / p, S = y.formatNumber(r, { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2 }))), d == null && (D = N);
-  const I = {
-    color: decodeURIComponent(F),
-    fontSize: v + "px"
-  }, w = {
-    color: decodeURIComponent(F),
+  const w = {
+    color: decodeURIComponent(v),
+    fontSize: F + "px"
+  }, I = {
+    color: decodeURIComponent(v),
     fontSize: x + "px"
   }, j = {
-    color: decodeURIComponent(F),
+    color: decodeURIComponent(v),
     fontSize: C + "px"
   };
-  return /* @__PURE__ */ E("div", { className: "trend", children: [
+  return /* @__PURE__ */ A("div", { className: "trend", children: [
     /* @__PURE__ */ o("div", { className: "label", style: j, children: G(T, e[e.length - 1]) }),
-    /* @__PURE__ */ E("div", { className: "number-and-icon", children: [
-      /* @__PURE__ */ o("span", { className: "number", style: I, children: D }),
-      r && /* @__PURE__ */ o("div", { className: r > 0 ? "icon trend up" : "icon trend down" })
+    /* @__PURE__ */ A("div", { className: "number-and-icon", children: [
+      /* @__PURE__ */ o("span", { className: "number", style: w, children: D }),
+      r && /* @__PURE__ */ o("img", { src: r > 0 ? "/trend-up.svg" : "/trend-down.svg", alt: "Arrow", className: "icon" })
     ] }),
-    z && r && /* @__PURE__ */ o("div", { className: "percentage", style: w, children: S })
+    z && r && /* @__PURE__ */ o("div", { className: "percentage", style: I, children: S })
   ] });
 }, Q = (f, c) => {
-  const { "data-app": h, "data-group": u } = c, g = f.getIn(["data", "measures", h, u]);
-  return g ? {
-    injectedMeasures: g
+  const { "data-app": g, "data-group": u } = c, h = f.getIn(["data", "measures", g, u]);
+  return h ? {
+    injectedMeasures: h
   } : {};
 }, W = {}, se = k(Q, W)(K);
 export {

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

@@ -1,47 +1,69 @@
 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";
+var C = (g, p, s) => p in g ? v(g, p, { enumerable: !0, configurable: !0, writable: !0, value: s }) : g[p] = s;
+var u = (g, p, s) => C(g, typeof p != "symbol" ? p + "" : p, s);
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import O from "react";
+import { Container as L } from "semantic-ui-react";
+import w 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 A from "./Blood.js";
+import b from "./Lungs.js";
+import T from "./Head.js";
+import k 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 * as y from "d3";
+import W from "./Ectopic.js";
+import { injectIntl as $, FormattedMessage as x } from "react-intl";
+import Y from "../../translations/en.json.js";
+import z from "../../translations/fr.json.js";
+import G from "../../translations/am.json.js";
 import M from "../../utils/deviceType.js";
-class H extends C.Component {
+class I extends O.Component {
   constructor(s) {
     super(s);
-    p(this, "mobileOptions", {
+    u(this, "localeYDims", {
+      en: "60",
+      fr: "40",
+      am: "40"
+    });
+    u(this, "localeXdims", {
+      en: "-250",
+      fr: "-280",
+      am: "-280"
+    });
+    u(this, "titleDims", {
+      am: 160,
+      fr: 180,
+      en: 180
+    });
+    u(this, "titleLineWidths", {
       Cancers: {
-        x: 180,
+        am: 125,
+        // Wider for Amharic text
+        fr: 58,
+        en: 58
+      },
+      OtherConditions: {
+        am: 158,
+        // Much wider for Amharic text
+        fr: 118,
+        en: 118
+      }
+    });
+    u(this, "mobileOptions", {
+      Cancers: {
+        x: this.titleDims[this.props.intl.locale],
         y: 25
       },
       OtherConditions: {
-        x: 320,
+        x: this.isIphone() && this.props.intl.locale === "am" ? 370 : 350,
         y: 25
       },
-      viewBoxDims: "0 0 500 520"
-    });
-    p(this, "localeYDims", {
-      en: "60",
-      fr: "40"
-    });
-    p(this, "localeXdims", {
-      en: "-250",
-      fr: "-280"
+      viewBoxDims: "0 0 550 520"
     });
     this.state = {
       counter: 0,
@@ -49,7 +71,11 @@ class H extends C.Component {
       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.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: Y,
+      fr: z,
+      am: G
+    };
   }
   updateLayout() {
     this.setState({ isMobile: ["mobile", "tablet"].includes(M()) });
@@ -58,6 +84,10 @@ class H extends C.Component {
     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() }, () => {
@@ -67,28 +97,30 @@ class H extends C.Component {
   }
   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 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 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
+      const d = t || r, i = d.getAttribute("data-option");
+      d.classList.add("on");
+      const c = d.closest("g"), h = c.querySelector(".title-rect"), n = c.querySelector(".title");
+      h && h.classList.add("on"), n && n.classList.add("on");
+      const m = c.querySelector(".title-line");
+      m && m.classList.add("on"), i && this.setState({
+        selectedOption: i
       });
     }
   }
   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();
+    y.select(".body.parts").selectAll("g.system").transition().duration(0).delay(200).style("opacity", 1), y.select(".body.parts").selectAll("circle").remove(), y.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);
+  onMouseOver(s, e, t) {
+    const r = y.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, h, n, m;
+    i.x < 0 ? (c = i.x + i.width + 5, n = c > 0 ? 30 : -5, h = i.y + i.height / 2, m = i.y + i.height / 2) : (c = i.x - 5, n = 140, h = i.y + i.height / 2, m = i.y + i.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", m), 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", 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(
@@ -97,19 +129,21 @@ class H extends C.Component {
     ) : 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"));
+    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 = u.select(".body.parts");
-    let t = {
-      en: $,
-      fr: j
-    };
-    const e = this.props.intl;
-    t = t[e.locale];
-    const r = [
+    const s = y.select(".body.parts"), e = this.props.intl, t = this.messages[e.locale], r = [
       {
         label: e.formatMessage({
           id: "oropharyngeal.cancer",
@@ -218,7 +252,7 @@ class H extends C.Component {
         tx: 85,
         ty: 275
       }
-    ], m = [
+    ], d = [
       {
         label: e.formatMessage({
           id: "stroke",
@@ -383,20 +417,20 @@ class H extends C.Component {
       }
     ];
     s.select("svg").selectAll("text.label").remove();
-    const { selectedOption: o, isMobile: c } = this.state, h = o === "Cancers" ? r : m;
+    const { selectedOption: i, isMobile: c } = this.state, h = i === "Cancers" ? r : d;
     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
+    const m = (a, l) => c && this.props.intl.locale === "am" ? 140 : c ? 160 : -250;
+    e.locale === "en" ? c ? s.select("svg").selectAll("text.label").data(h).enter().append("text").attr("class", "label").attr("x", m).attr("y", (a, l) => n + l * 25).text((a) => a.label) : (n = 90, s.select("svg").selectAll("text.left").data(r).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.right").data(d).enter().append("text").attr("class", "label").attr("x", (a, l) => 200).attr("y", (a, l) => n + l * 25).text((a) => a.label)) : (e.locale === "fr" || e.locale === "am") && (c ? s.select("svg").selectAll("text.label").data(h).enter().append("text").attr("class", "label").attr("x", m).attr("y", (a, l) => n + l * 25).text((a) => a.label) : (s.select("svg").selectAll("text.left").data(r).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(d).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, y.select(a.currentTarget), l, {
+        tx: l.tx,
+        ty: l.ty
       });
-    }).on("mouseout", (a, i) => {
+    }).on("mouseout", (a, l) => {
       this.onMouseOut();
     });
   }
-  componentDidUpdate(s, t) {
-    (t.selectedOption !== this.state.selectedOption || t.orientation !== this.state.orientation) && (this.updateSvgLabels(), this.addOnClassToSelectedElements());
+  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(
@@ -405,31 +439,32 @@ class H extends C.Component {
     ) : window.removeEventListener("resize", this.handleOrientationChange);
   }
   render() {
-    return /* @__PURE__ */ l(w, { className: "body parts", children: /* @__PURE__ */ b(
+    return /* @__PURE__ */ o(L, { className: "body parts", children: /* @__PURE__ */ f(
       "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(
+          /* @__PURE__ */ o(w, { className: "backGround" }),
+          /* @__PURE__ */ o(N, { className: "system bounds" }),
+          /* @__PURE__ */ o(T, { className: "system head" }),
+          /* @__PURE__ */ o(b, { className: "system larynx" }),
+          /* @__PURE__ */ o(b, { className: "system lungs" }),
+          /* @__PURE__ */ o(S, { className: "system stomach" }),
+          /* @__PURE__ */ o(E, { className: "system liver" }),
+          /* @__PURE__ */ o(D, { className: "system brain" }),
+          /* @__PURE__ */ o(k, { className: "system eyes" }),
+          /* @__PURE__ */ o(A, { className: "system blood" }),
+          /* @__PURE__ */ o(B, { className: "system heart" }),
+          /* @__PURE__ */ o(q, { className: "system erectile" }),
+          /* @__PURE__ */ o(W, { className: "system Ectopic" }),
+          /* @__PURE__ */ f("g", { onClick: this.handleTextClick, children: [
+            /* @__PURE__ */ o(
               "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",
@@ -438,32 +473,41 @@ class H extends C.Component {
                 height: "30"
               }
             ),
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ o(
               "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" })
+                "data-option": "Cancers",
+                children: /* @__PURE__ */ o(
+                  x,
+                  {
+                    id: "ailments.title",
+                    defaultMessage: "{cancers}",
+                    values: { cancers: this.messages[this.props.intl.locale]["ailments.title"] }
+                  }
+                )
               }
             ),
-            this.state.isMobile && /* @__PURE__ */ l(
+            this.state.isMobile && /* @__PURE__ */ o(
               "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",
+                width: this.titleLineWidths.Cancers[this.props.intl.locale] || this.titleLineWidths.Cancers.en,
                 height: "3",
                 fill: "#E5EBED"
               }
             )
           ] }),
-          /* @__PURE__ */ b("g", { onClick: this.handleTextClick, children: [
-            /* @__PURE__ */ l(
+          /* @__PURE__ */ f("g", { onClick: this.handleTextClick, children: [
+            /* @__PURE__ */ o(
               "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",
@@ -472,28 +516,30 @@ class H extends C.Component {
                 height: "30"
               }
             ),
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ o(
               "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(
+                "data-option": "OtherConditions",
+                children: /* @__PURE__ */ o(
                   x,
                   {
                     id: "ailments.otherConditions",
-                    defaultMessage: "Other conditions"
+                    defaultMessage: "{otherConditions}",
+                    values: { otherConditions: this.messages[this.props.intl.locale]["ailments.otherConditions"] }
                   }
                 )
               }
             ),
-            this.state.isMobile && /* @__PURE__ */ l(
+            this.state.isMobile && /* @__PURE__ */ o(
               "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",
+                width: this.titleLineWidths.OtherConditions[this.props.intl.locale] || this.titleLineWidths.OtherConditions.en,
                 height: "3",
                 fill: "#E5EBED"
               }
@@ -504,7 +550,7 @@ class H extends C.Component {
     ) });
   }
 }
-const oe = z(H);
+const ne = $(I);
 export {
-  oe as default
+  ne as default
 };