mario-education 2.4.173-level → 2.4.175-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: "Manageable levels of stress allowing me to perform at my best."
   }, {
-    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,61 @@ 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(false),
+      isInfoTooltip = _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 10px";
+    dummyElement.innerHTML = text;
+    document.body.appendChild(dummyElement);
+    var height = dummyElement.offsetHeight;
+    document.body.removeChild(dummyElement);
+    return height;
+  };
 
   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 == "OVERWHELMED" ? x - 45 : x);
     setTooltipY(y);
     setTooltipVisible(label);
     setColorTooltip(color);
   };
 
+  var handleEnterInfoIcon = function handleEnterInfoIcon(x, y, tip) {
+    setTooltipVisible(tip);
+    setInfoTooltip(true);
+    setTooltipX(x);
+    setTooltipY(y);
+  };
+
+  var handleLeaveInfoIcon = function handleLeaveInfoIcon() {
+    setTooltipVisible("");
+    setInfoTooltip(false);
+  };
+
   var handleDotLeave = function handleDotLeave() {
     setTooltipVisible("");
   };
@@ -31269,7 +31305,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 +31366,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, _data3$value, _data3$value$length, _data6, _data7;
 
               var circleX = circleSpacing * i + alignment;
               var radius = !isMobileScreen ? 15 : 12;
@@ -31362,6 +31398,18 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
               });
               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 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 +31424,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));
+              infoIconContainer.addEventListener("mouseenter", function () {
+                return handleEnterInfoIcon(circleX + 8 + labelText.getBoundingClientRect().width / 2, circleY - radius - 16 - labelText.getBoundingClientRect().height / 2, tooltip);
+              });
+              infoIconContainer.addEventListener("mouseleave", handleLeaveInfoIcon);
+              labelText.getBoundingClientRect();
+              svg.appendChild(infoIconContainer);
             };
 
             for (var i = 1; i <= data.length; i++) {
@@ -31403,15 +31459,19 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
   var lineHeight = 20;
   var tooltipHeight = tooltipStudents.length * lineHeight;
   var maxHeightTooltip = tooltipHeight + 30 > chartHeight - 50 ? chartHeight - 50 : tooltipHeight + 30;
+  var heightInfoTooltip = React.useMemo(function () {
+    if (isInfoTooltip && tooltipVisible) return getHeightFromText(tooltipVisible, "12px");
+    return 0;
+  }, [isInfoTooltip, 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(" + (isInfoTooltip ? tooltipX - 81 : tooltipX - 100) + "," + Math.max(0, isInfoTooltip ? tooltipY - heightInfoTooltip - 30 : tooltipY - tooltipHeight - 100) + ")"
   }, React__default.createElement("rect", {
-    width: "200",
-    height: maxHeightTooltip + 10,
+    width: isInfoTooltip ? 162 : 200,
+    height: isInfoTooltip ? heightInfoTooltip + 10 : maxHeightTooltip + 10,
     fill: "rgba(36, 36, 36, 0.8)",
     rx: "5"
   }), React__default.createElement("text", {
@@ -31420,7 +31480,18 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
     fill: "#fff",
     fontSize: "12px",
     textAnchor: "start"
-  }, tooltipStudents.length + " students are " + tooltipVisible), React__default.createElement("foreignObject", {
+  }, !isInfoTooltip && tooltipStudents.length + " students are " + tooltipVisible), isInfoTooltip && React__default.createElement("foreignObject", {
+    x: "0",
+    y: "10",
+    width: isInfoTooltip ? 162 : 200,
+    height: heightInfoTooltip
+  }, React__default.createElement("div", {
+    style: {
+      padding: "0px 5px 5px 10px",
+      color: "#fff",
+      fontSize: "12px"
+    }
+  }, tooltipVisible)), !isInfoTooltip && React__default.createElement("foreignObject", {
     x: "0",
     y: "30",
     width: "200",
@@ -31446,7 +31517,14 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
         marginRight: "10px"
       }
     }), React__default.createElement("span", null, label));
-  })))));
+  }))), React__default.createElement("foreignObject", {
+    y: isInfoTooltip ? heightInfoTooltip + 10 : tooltipHeight + 40,
+    x: isInfoTooltip ? 82 : 94,
+    width: 10,
+    height: 10
+  }, React__default.createElement("div", {
+    className: "tooltip-chart"
+  }))));
 };
 
 var headerLogo = "../images/main-logo-blue.png";