mario-education 2.4.174-level → 2.4.176-level

package/dist/index.js

@@ -31212,20 +31212,25 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
   var chartHeight = isMobileScreen ? chartWidth / 1.5 : chartWidth / 3.12;
   var colors = ["#C44140", "#81C935", "#0F9655", "#FFB04F", "#C44140"];
   var data = [{
-    label: "BOREOUT",
-    value: studentPressure.boreOutStudent
+    label: "UNMOTIVATED",
+    value: studentPressure.boreOutStudent,
+    tooltip: "Not enough challenge, leading to boredom and lack of interest."
   }, {
     label: "COMFORT",
-    value: studentPressure.comfortStudent
+    value: studentPressure.comfortStudent,
+    tooltip: "Calm and relaxed but not enough motivation to perform at my best."
   }, {
     label: "STRETCH",
-    value: studentPressure.stretchStudent
+    value: studentPressure.stretchStudent,
+    tooltip: "Manageable levels of stress allowing me to perform at my best."
   }, {
     label: "STRAIN",
-    value: studentPressure.strainStudent
+    value: studentPressure.strainStudent,
+    tooltip: "Still in control but starting to feel the pressure."
   }, {
-    label: "BURNOUT",
-    value: studentPressure.burnoutStudent
+    label: "OVERWHELMED",
+    value: studentPressure.burnoutStudent,
+    tooltip: "Too much pressure and really struggling to manage my workload."
   }];
   var xAxistLabels = ["Low", "Moderate", "High", "Very High"];
 
@@ -31233,30 +31238,75 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
       tooltipVisible = _useState[0],
       setTooltipVisible = _useState[1];
 
-  var _useState2 = React.useState(0),
-      tooltipX = _useState2[0],
-      setTooltipX = _useState2[1];
+  var _useState2 = React.useState(""),
+      infoTooltip = _useState2[0],
+      setInfoTooltip = _useState2[1];
 
   var _useState3 = React.useState(0),
-      tooltipY = _useState3[0],
-      setTooltipY = _useState3[1];
+      tooltipX = _useState3[0],
+      setTooltipX = _useState3[1];
 
-  var _useState4 = React.useState([]),
-      tooltipStudents = _useState4[0],
-      setTooltipStudents = _useState4[1];
+  var _useState4 = React.useState(0),
+      tooltipY = _useState4[0],
+      setTooltipY = _useState4[1];
 
-  var _useState5 = React.useState(""),
-      colorTooltip = _useState5[0],
-      setColorTooltip = _useState5[1];
+  var _useState5 = React.useState([]),
+      tooltipStudents = _useState5[0],
+      setTooltipStudents = _useState5[1];
+
+  var _useState6 = React.useState(""),
+      colorTooltip = _useState6[0],
+      setColorTooltip = _useState6[1];
+
+  var getHeightFromText = function getHeightFromText(text, fontSize) {
+    var dummyElement = document.createElement("span");
+    dummyElement.style.visibility = "hidden";
+    dummyElement.style.position = "absolute";
+    dummyElement.style.whiteSpace = "wrap";
+    dummyElement.style.fontSize = fontSize;
+    dummyElement.style.width = "162px";
+    dummyElement.style.padding = "5px 5px 5px 8px";
+    dummyElement.innerHTML = text;
+    document.body.appendChild(dummyElement);
+    var height = dummyElement.offsetHeight;
+    document.body.removeChild(dummyElement);
+    return height;
+  };
+
+  var getWidthFromText = function getWidthFromText(text, fontSize, fontWeight) {
+    var dummyElement = document.createElement("span");
+    dummyElement.style.visibility = "hidden";
+    dummyElement.style.position = "absolute";
+    dummyElement.style.whiteSpace = "nowrap";
+    dummyElement.style.fontSize = fontSize;
+    dummyElement.style.fontWeight = fontWeight;
+    dummyElement.innerHTML = text;
+    document.body.appendChild(dummyElement);
+    var width = dummyElement.offsetWidth;
+    document.body.removeChild(dummyElement);
+    return width;
+  };
 
   var handleDotHover = function handleDotHover(students, x, y, label, color) {
     setTooltipStudents(Array.from(new Set(students)));
-    setTooltipX(isMobileScreen && label == "BURNOUT" ? x - 45 : x);
+    setTooltipX(isMobileScreen && label == data[data.length - 1].label ? x - 45 : x);
     setTooltipY(y);
     setTooltipVisible(label);
     setColorTooltip(color);
   };
 
+  var handleEnterInfoIcon = function handleEnterInfoIcon(x, y, tip, label) {
+    setTooltipVisible(label);
+    setInfoTooltip(tip);
+    setTooltipX(isMobileScreen && label == data[data.length - 1].label ? x - 15 : x);
+    setTooltipY(y);
+  };
+
+  var handleLeaveInfoIcon = function handleLeaveInfoIcon() {
+    setTooltipVisible("");
+    setInfoTooltip("");
+  };
+
   var handleDotLeave = function handleDotLeave() {
     setTooltipVisible("");
   };
@@ -31269,7 +31319,7 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
         try {
           var _ret = function () {
             var styleElement = document.createElementNS("http://www.w3.org/2000/svg", "style");
-            styleElement.textContent = "\n                    text {\n                        font-size: 12px;\n                    }";
+            styleElement.textContent = "\n                    text {\n                        font-size: 12px;\n                    }\n                    .info-stress-icon:hover circle{\n                        stroke: #316CD9\n                    }\n                    .info-stress-icon:hover polyline{\n                        stroke: #316CD9\n                    }\n                    .tooltip-chart{\n                        content: \"\";\n                        display: block;\n                        width: 0; \n                        height: 0; \n                        border-left: 5px solid transparent;\n                        border-right: 5px solid transparent;\n                        border-top: 5px solid #242424CC;\n                    }\n                    ";
             svg.appendChild(styleElement);
             var xAxis = document.createElementNS("http://www.w3.org/2000/svg", "line");
             xAxis.setAttribute("x1", "50");
@@ -31330,7 +31380,7 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
             var circleY = !isMobileScreen ? chartHeight - 30 : chartHeight - 24;
 
             var _loop = function _loop(i) {
-              var _data3, _data3$value, _data3$value$length, _data6;
+              var _data3, _data4, _data5, _data5$value, _data5$value$length, _data8, _data9;
 
               var circleX = circleSpacing * i + alignment;
               var radius = !isMobileScreen ? 15 : 12;
@@ -31339,12 +31389,17 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
               circle.setAttribute("cy", "" + circleY);
               circle.setAttribute("r", "" + radius);
               circle.setAttribute("fill", colors[i - 1]);
+              circle.style.cursor = "pointer";
               circle.addEventListener("mouseenter", function () {
                 var _data, _data2;
 
                 handleDotHover((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.value, circleX, circleY, (_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.label, colors[i - 1]);
               });
-              circle.addEventListener("mouseleave", handleDotLeave);
+              var lineHeight = 20;
+              var tooltipHeight = ((_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.value.length) * lineHeight * 6;
+              var widthLabel = getWidthFromText((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.label, "9px", "bold");
+              var isScrollStudents = tooltipHeight + 30 > chartHeight - 100 - (isMobileScreen ? widthLabel : 0);
+              if (isScrollStudents) circle.addEventListener("click", handleDotLeave);else circle.addEventListener("mouseleave", handleDotLeave);
               svg.appendChild(circle);
               var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
               text.setAttribute("x", "" + circleX);
@@ -31354,14 +31409,28 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
               text.setAttribute("text-anchor", "middle");
               text.setAttribute("dominant-baseline", "middle");
               text.setAttribute("style", "cursor: default");
-              text.textContent = (_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : (_data3$value = _data3.value) === null || _data3$value === void 0 ? void 0 : (_data3$value$length = _data3$value.length) === null || _data3$value$length === void 0 ? void 0 : _data3$value$length.toString();
+              text.textContent = (_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : (_data5$value = _data5.value) === null || _data5$value === void 0 ? void 0 : (_data5$value$length = _data5$value.length) === null || _data5$value$length === void 0 ? void 0 : _data5$value$length.toString();
+              text.style.cursor = "pointer";
               text.addEventListener("mouseenter", function () {
-                var _data4, _data5;
+                var _data6, _data7;
 
-                handleDotHover((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.value, circleX, circleY, (_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : _data5.label, colors[i - 1]);
+                handleDotHover((_data6 = data[i - 1]) === null || _data6 === void 0 ? void 0 : _data6.value, circleX, circleY, (_data7 = data[i - 1]) === null || _data7 === void 0 ? void 0 : _data7.label, colors[i - 1]);
               });
+              if (isScrollStudents) text.addEventListener("click", handleDotLeave);else text.addEventListener("mouseleave", handleDotLeave);
               svg.appendChild(text);
-              var label = (_data6 = data[i - 1]) === null || _data6 === void 0 ? void 0 : _data6.label;
+              var label = (_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.label;
+              var tooltip = (_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.tooltip;
+              var infoIconContainer = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
+              var infoIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+              infoIcon.innerHTML = "<rect width=\"256\" height=\"256\" fill=\"none\"></rect><circle cx=\"128\" cy=\"128\" r=\"96\" fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"></circle><polyline fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\" points=\"120 120 128 120 128 176 136 176\"></polyline><circle cx=\"128\" cy=\"84\" r=\"12\"></circle>";
+              infoIcon.setAttribute("width", "16");
+              infoIcon.setAttribute("height", "16");
+              infoIcon.setAttribute("viewBox", "0 0 256 256");
+              infoIconContainer.setAttribute("width", "16");
+              infoIconContainer.setAttribute("height", "20");
+              infoIconContainer.style.cursor = "pointer";
+              infoIconContainer.classList.add("info-stress-icon");
+              infoIconContainer.appendChild(infoIcon);
               var labelText = document.createElementNS("http://www.w3.org/2000/svg", "text");
               labelText.setAttribute("x", "" + circleX);
               labelText.setAttribute("y", "" + (circleY - radius - 12));
@@ -31376,6 +31445,15 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
 
               labelText.textContent = label;
               svg.appendChild(labelText);
+              var infoX = isMobileScreen ? circleX - 8 : circleX + 8 + labelText.getBoundingClientRect().width / 2;
+              var infoY = isMobileScreen ? circleY - radius - 32 - labelText.getBoundingClientRect().height : circleY - radius - 20 - labelText.getBoundingClientRect().height / 2;
+              infoIconContainer.setAttribute("x", "" + infoX);
+              infoIconContainer.setAttribute("y", "" + infoY);
+              infoIconContainer.addEventListener("mouseenter", function () {
+                return handleEnterInfoIcon(infoX, infoY + 4, tooltip, label);
+              });
+              infoIconContainer.addEventListener("mouseleave", handleLeaveInfoIcon);
+              svg.appendChild(infoIconContainer);
             };
 
             for (var i = 1; i <= data.length; i++) {
@@ -31393,25 +31471,42 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
         }
       };
 
-      while (svg.firstChild) {
-        svg.firstChild.remove();
-      }
+      try {
+        while (svg.firstChild) {
+          while (svg.firstChild.firstChild) {
+            svg.firstChild.firstChild.remove();
+          }
+
+          svg.firstChild.remove();
+        }
 
-      drawChart();
+        drawChart();
+      } catch (err) {
+        console.log("err: ", err);
+      }
     }
-  }, [chartWidth, studentPressure]);
+  }, [chartWidth, chartHeight, JSON.stringify(studentPressure)]);
+  var widthLabel = React.useMemo(function () {
+    if (!!tooltipVisible) return getWidthFromText(tooltipVisible, "9px", "bold");
+    return 0;
+  }, [tooltipVisible]);
   var lineHeight = 20;
-  var tooltipHeight = tooltipStudents.length * lineHeight;
-  var maxHeightTooltip = tooltipHeight + 30 > chartHeight - 50 ? chartHeight - 50 : tooltipHeight + 30;
+  var tooltipHeight = tooltipStudents.length * lineHeight * 6;
+  var isScrollStudents = tooltipHeight + 30 > chartHeight - 100 - (isMobileScreen ? widthLabel : 0);
+  var maxHeightTooltip = isScrollStudents ? chartHeight - 100 - (isMobileScreen ? widthLabel : 0) : tooltipHeight + 30;
+  var heightInfoTooltip = React.useMemo(function () {
+    if (!!infoTooltip && !!tooltipVisible) return getHeightFromText(infoTooltip, "12px");
+    return 0;
+  }, [infoTooltip, tooltipVisible]);
   return React__default.createElement("svg", {
     ref: svgRef,
     width: chartWidth,
     height: chartHeight + 50
   }, !!tooltipVisible && React__default.createElement("g", {
-    transform: "translate(" + (tooltipX - 100) + "," + Math.max(0, tooltipY - tooltipHeight - 80) + ")"
+    transform: "translate(" + (infoTooltip ? tooltipX - 81 : tooltipX - 100) + "," + Math.max(0, infoTooltip ? tooltipY - heightInfoTooltip - 30 : isMobileScreen ? tooltipY - tooltipHeight - 100 - widthLabel : tooltipY - tooltipHeight - 100) + ")"
   }, React__default.createElement("rect", {
-    width: "200",
-    height: maxHeightTooltip + 10,
+    width: infoTooltip ? 162 : 200,
+    height: infoTooltip ? heightInfoTooltip + 10 : maxHeightTooltip + 10,
     fill: "rgba(36, 36, 36, 0.8)",
     rx: "5"
   }), React__default.createElement("text", {
@@ -31420,7 +31515,18 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
     fill: "#fff",
     fontSize: "12px",
     textAnchor: "start"
-  }, tooltipStudents.length + " students are " + tooltipVisible), React__default.createElement("foreignObject", {
+  }, !infoTooltip && tooltipStudents.length + " students are " + tooltipVisible), !!infoTooltip && React__default.createElement("foreignObject", {
+    x: "0",
+    y: "10",
+    width: infoTooltip ? 162 : 200,
+    height: heightInfoTooltip
+  }, React__default.createElement("div", {
+    style: {
+      padding: "0px 5px 5px 10px",
+      color: "#fff",
+      fontSize: "12px"
+    }
+  }, infoTooltip)), !infoTooltip && React__default.createElement("foreignObject", {
     x: "0",
     y: "30",
     width: "200",
@@ -31428,12 +31534,12 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
   }, React__default.createElement("div", {
     style: {
       overflowY: "auto",
-      maxHeight: maxHeightTooltip - 20 + "px",
+      maxHeight: (isScrollStudents ? maxHeightTooltip - 30 : maxHeightTooltip - 20) + "px",
       padding: "5px 5px 5px 10px",
       color: "#fff",
       fontSize: "12px"
     }
-  }, tooltipStudents.map(function (label, index) {
+  }, [].concat(tooltipStudents, tooltipStudents, tooltipStudents, tooltipStudents, tooltipStudents, tooltipStudents).map(function (label, index) {
     return React__default.createElement("div", {
       key: index
     }, React__default.createElement("span", {
@@ -31446,7 +31552,14 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
         marginRight: "10px"
       }
     }), React__default.createElement("span", null, label));
-  })))));
+  }))), React__default.createElement("foreignObject", {
+    y: infoTooltip ? heightInfoTooltip + 10 : Math.min(tooltipHeight + 40, maxHeightTooltip + 10),
+    x: infoTooltip ? isMobileScreen && tooltipVisible === data[data.length - 1].label ? 99 : 84 : isMobileScreen && tooltipVisible === "OVERWHELMED" ? 139 : 94,
+    width: 10,
+    height: 10
+  }, React__default.createElement("div", {
+    className: "tooltip-chart"
+  }))));
 };
 
 var headerLogo = "../images/main-logo-blue.png";