mario-education 2.4.175-level → 2.4.176-level

package/dist/index.js

@@ -31226,7 +31226,7 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
   }, {
     label: "STRAIN",
     value: studentPressure.strainStudent,
-    tooltip: "Manageable levels of stress allowing me to perform at my best."
+    tooltip: "Still in control but starting to feel the pressure."
   }, {
     label: "OVERWHELMED",
     value: studentPressure.burnoutStudent,
@@ -31238,8 +31238,8 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
       tooltipVisible = _useState[0],
       setTooltipVisible = _useState[1];
 
-  var _useState2 = React.useState(false),
-      isInfoTooltip = _useState2[0],
+  var _useState2 = React.useState(""),
+      infoTooltip = _useState2[0],
       setInfoTooltip = _useState2[1];
 
   var _useState3 = React.useState(0),
@@ -31265,7 +31265,7 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
     dummyElement.style.whiteSpace = "wrap";
     dummyElement.style.fontSize = fontSize;
     dummyElement.style.width = "162px";
-    dummyElement.style.padding = "5px 5px 5px 10px";
+    dummyElement.style.padding = "5px 5px 5px 8px";
     dummyElement.innerHTML = text;
     document.body.appendChild(dummyElement);
     var height = dummyElement.offsetHeight;
@@ -31273,24 +31273,38 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
     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 == "OVERWHELMED" ? 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) {
-    setTooltipVisible(tip);
-    setInfoTooltip(true);
-    setTooltipX(x);
+  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(false);
+    setInfoTooltip("");
   };
 
   var handleDotLeave = function handleDotLeave() {
@@ -31366,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, _data7;
+              var _data3, _data4, _data5, _data5$value, _data5$value$length, _data8, _data9;
 
               var circleX = circleSpacing * i + alignment;
               var radius = !isMobileScreen ? 15 : 12;
@@ -31375,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);
@@ -31390,15 +31409,17 @@ 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 tooltip = (_data7 = data[i - 1]) === null || _data7 === void 0 ? void 0 : _data7.tooltip;
+              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>";
@@ -31424,13 +31445,14 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
 
               labelText.textContent = label;
               svg.appendChild(labelText);
-              infoIconContainer.setAttribute("x", "" + (circleX + 8 + labelText.getBoundingClientRect().width / 2));
-              infoIconContainer.setAttribute("y", "" + (circleY - radius - 20 - labelText.getBoundingClientRect().height / 2));
+              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(circleX + 8 + labelText.getBoundingClientRect().width / 2, circleY - radius - 16 - labelText.getBoundingClientRect().height / 2, tooltip);
+                return handleEnterInfoIcon(infoX, infoY + 4, tooltip, label);
               });
               infoIconContainer.addEventListener("mouseleave", handleLeaveInfoIcon);
-              labelText.getBoundingClientRect();
               svg.appendChild(infoIconContainer);
             };
 
@@ -31449,29 +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 (isInfoTooltip && tooltipVisible) return getHeightFromText(tooltipVisible, "12px");
+    if (!!infoTooltip && !!tooltipVisible) return getHeightFromText(infoTooltip, "12px");
     return 0;
-  }, [isInfoTooltip, tooltipVisible]);
+  }, [infoTooltip, tooltipVisible]);
   return React__default.createElement("svg", {
     ref: svgRef,
     width: chartWidth,
     height: chartHeight + 50
   }, !!tooltipVisible && React__default.createElement("g", {
-    transform: "translate(" + (isInfoTooltip ? tooltipX - 81 : tooltipX - 100) + "," + Math.max(0, isInfoTooltip ? tooltipY - heightInfoTooltip - 30 : tooltipY - tooltipHeight - 100) + ")"
+    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: isInfoTooltip ? 162 : 200,
-    height: isInfoTooltip ? heightInfoTooltip + 10 : 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", {
@@ -31480,10 +31515,10 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
     fill: "#fff",
     fontSize: "12px",
     textAnchor: "start"
-  }, !isInfoTooltip && tooltipStudents.length + " students are " + tooltipVisible), isInfoTooltip && React__default.createElement("foreignObject", {
+  }, !infoTooltip && tooltipStudents.length + " students are " + tooltipVisible), !!infoTooltip && React__default.createElement("foreignObject", {
     x: "0",
     y: "10",
-    width: isInfoTooltip ? 162 : 200,
+    width: infoTooltip ? 162 : 200,
     height: heightInfoTooltip
   }, React__default.createElement("div", {
     style: {
@@ -31491,7 +31526,7 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
       color: "#fff",
       fontSize: "12px"
     }
-  }, tooltipVisible)), !isInfoTooltip && React__default.createElement("foreignObject", {
+  }, infoTooltip)), !infoTooltip && React__default.createElement("foreignObject", {
     x: "0",
     y: "30",
     width: "200",
@@ -31499,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", {
@@ -31518,8 +31553,8 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
       }
     }), React__default.createElement("span", null, label));
   }))), React__default.createElement("foreignObject", {
-    y: isInfoTooltip ? heightInfoTooltip + 10 : tooltipHeight + 40,
-    x: isInfoTooltip ? 82 : 94,
+    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", {