mario-education 2.4.170-level → 2.4.172-level

package/dist/index.js

@@ -28429,9 +28429,9 @@ var INITIAl_STUDENT_DASHBOARD = {
   totalOneToOne: 0,
   totalTimeConference: 0,
   totalTimeOneToOne: 0,
-  totalCheckIn: 0
+  totalCheckIn: 0,
+  schoolName: ""
 };
-var COLOR_CHART_AND_PERCENTS = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
 var COLOR_CHART_BUBBLE = ["#169490", "#316CD9", "#FFB04F", "#0F9655"];
 var PERCENT = [100, 80, 60, 40, 20, 0];
 var GENDER_OPTION = [{
@@ -29871,7 +29871,8 @@ var useChartDatas = function useChartDatas() {
     avgQuestionLastMonth: avgQuestionLastMonth,
     studentPressure: studentPressure,
     dataOverallReadyToLearn: dataOverallReadyToLearn,
-    readinessToLearning: readinessToLearning
+    readinessToLearning: readinessToLearning,
+    listTotalTime: listTotalTime
   };
 };
 
@@ -30688,13 +30689,17 @@ var LineChart = function LineChart(_ref) {
 var OverallDonutChart = function OverallDonutChart(_ref) {
   var series = _ref.series,
       colors = _ref.colors,
-      label = _ref.label;
+      label = _ref.label,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "100%" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 250 : _ref$height;
   return React__default.createElement(Chart, {
     options: overallDonutCHartOptions(label, colors),
     series: series,
     type: "donut",
-    width: "100%",
-    height: 250
+    width: width,
+    height: height
   });
 };
 
@@ -30711,7 +30716,10 @@ var GenerateChartData = function GenerateChartData(_ref) {
       avgQuestionLastMonth = _ref.avgQuestionLastMonth,
       isShowExpandIcon = _ref.isShowExpandIcon,
       onExpand = _ref.onExpand,
-      timeOfDay = _ref.timeOfDay;
+      timeOfDay = _ref.timeOfDay,
+      isPrint = _ref.isPrint,
+      width = _ref.width,
+      height = _ref.height;
   var avgs = [];
 
   var _loop = function _loop(i) {
@@ -30748,7 +30756,7 @@ var GenerateChartData = function GenerateChartData(_ref) {
   return React__default.createElement("div", {
     key: name,
     className: "w-100 h-100 " + styles$1["column-chart-percent"]
-  }, React__default.createElement("div", {
+  }, !isPrint && React__default.createElement("div", {
     className: "" + styles$1["header-chart-generate"]
   }, React__default.createElement("p", {
     className: "" + styles$1["title-chart-generate"]
@@ -30767,6 +30775,7 @@ var GenerateChartData = function GenerateChartData(_ref) {
     var isStressQuestion = item.name.toLocaleLowerCase().includes("stress");
     var classArrowUp = !isStressQuestion ? "arrow-up" : "arrow-down";
     var classArrowDown = !isStressQuestion ? "arrow-down" : "arrow-up";
+    if (isPrint && !activeColumn[index]) return null;
     return React__default.createElement("div", {
       hidden: !item.name,
       className: "" + styles$1["item-checkbox"],
@@ -30820,7 +30829,7 @@ var GenerateChartData = function GenerateChartData(_ref) {
       className: "" + styles$1["month-text"]
     }, "vs last " + timeOfDay))));
   })), React__default.createElement("div", {
-    className: "w-100"
+    className: "w-100 " + (isPrint && typeChart === TYPECHART.DONUT ? "d-flex justify-content-center" : "")
   }, typeChart === TYPECHART.AREA && React__default.createElement(AreaChart, {
     months: months,
     activeColumn: activeColumn,
@@ -30842,7 +30851,9 @@ var GenerateChartData = function GenerateChartData(_ref) {
   }), typeChart === TYPECHART.DONUT && React__default.createElement(OverallDonutChart, {
     series: seriesDonut,
     colors: colors,
-    label: label
+    label: label,
+    width: width,
+    height: height
   })));
 };
 
@@ -30927,7 +30938,9 @@ var CustomArcLabel = function CustomArcLabel(_ref) {
 var TopLearningStrategy = function TopLearningStrategy(_ref2) {
   var _data$learningStrateg, _learningStrategies$f, _learningStrategies$f2;
 
-  var data = _ref2.data;
+  var data = _ref2.data,
+      learningStrategyId = _ref2.learningStrategyId,
+      topLearningStrategyId = _ref2.topLearningStrategyId;
   if (!data) return React__default.createElement(Loading, null);
   var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   var isMobileScreen = screenWidth < 576;
@@ -31048,7 +31061,10 @@ var TopLearningStrategy = function TopLearningStrategy(_ref2) {
     className: "" + styles$1["title-chart"]
   }, t(topLearningStrategyName)), React__default.createElement("p", {
     className: "" + styles$1["description-chart"]
-  }, "The Effectiveness of Learning Strategies by Student's feedback"))), seriesLearningStrategy.some(function (i) {
+  }, "The Effectiveness of Learning Strategies by Student's feedback"))), React__default.createElement("div", {
+    className: "w-100 h-100",
+    id: learningStrategyId
+  }, seriesLearningStrategy.some(function (i) {
     return i.data;
   }) ? React__default.createElement("div", {
     style: {
@@ -31065,7 +31081,7 @@ var TopLearningStrategy = function TopLearningStrategy(_ref2) {
     src: "images/chart-top-learning.png"
   }), React__default.createElement("p", {
     className: "" + styles$1["name-chart"]
-  }, "Perceived Usefulness")), React__default.createElement(reactstrap.Col, {
+  }, "Perceived Usefulness"))), React__default.createElement(reactstrap.Col, {
     md: 5,
     className: "" + styles$1["box-top-5-most"]
   }, React__default.createElement("div", {
@@ -31076,7 +31092,10 @@ var TopLearningStrategy = function TopLearningStrategy(_ref2) {
     className: "" + styles$1["title-chart"]
   }, t(topMostUsedStrategiesName)), React__default.createElement("p", {
     className: "" + styles$1["description-chart"]
-  }, "How many times a strategy has been chosen"))), dataConvert.length > 0 ? React__default.createElement(pie.ResponsivePie, {
+  }, "How many times a strategy has been chosen"))), React__default.createElement("div", {
+    className: "w-100 h-100",
+    id: topLearningStrategyId
+  }, dataConvert.length > 0 ? React__default.createElement(pie.ResponsivePie, {
     data: dataConvert,
     margin: screenWidth > 550 ? largeMarginChart : smallMarginChart,
     innerRadius: 0.5,
@@ -31091,7 +31110,7 @@ var TopLearningStrategy = function TopLearningStrategy(_ref2) {
     style: {
       fontSize: "14px"
     }
-  }, t("no_data"))))));
+  }, t("no_data")))))));
 };
 
 var propsAreEqual = function propsAreEqual(preProps, nextProps) {
@@ -31101,7 +31120,8 @@ var propsAreEqual = function propsAreEqual(preProps, nextProps) {
 var TopLearningStrategy$1 = React__default.memo(TopLearningStrategy, propsAreEqual);
 
 var BubbleChartCustom = function BubbleChartCustom(_ref) {
-  var data = _ref.data;
+  var data = _ref.data,
+      isPrint = _ref.isPrint;
 
   var _useTranslation = marioCore.useTranslation(),
       t = _useTranslation.t;
@@ -31115,7 +31135,7 @@ var BubbleChartCustom = function BubbleChartCustom(_ref) {
   var seriesName = seriesNameBubbleChartCustom(data);
   return React__default.createElement("div", {
     className: "" + styles$1["size-100"]
-  }, React__default.createElement("div", {
+  }, !isPrint && React__default.createElement("div", {
     className: "" + styles$1["block-header-chart"]
   }, React__default.createElement("p", {
     className: styles$1["title-chart"] + " " + styles$1["ml-10"]
@@ -31439,88 +31459,240 @@ var DashboardToPDF = function DashboardToPDF(props) {
       dayOfWeekConference = props.dayOfWeekConference,
       avgConferenceLastMonth = props.avgConferenceLastMonth,
       readinessToLearning = props.readinessToLearning,
-      studentPressure = props.studentPressure;
+      studentPressure = props.studentPressure,
+      dataOverallReadyToLearn = props.dataOverallReadyToLearn,
+      schoolName = props.schoolName;
 
   var _useTranslation = marioCore.useTranslation(),
       t = _useTranslation.t;
 
   var dispatch = reactRedux.useDispatch();
 
+  var getWidthOfWord = function getWidthOfWord(character, 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 = character;
+    document.body.appendChild(dummyElement);
+    var width = dummyElement.offsetWidth;
+    document.body.removeChild(dummyElement);
+    return width;
+  };
+
   var generatePDF = function generatePDF() {
     try {
-      var _temp42 = function _temp42() {
+      var _temp40 = function _temp40() {
         dispatch(marioCore.setLoading(false));
       };
 
       dispatch(marioCore.setLoading(true));
 
-      var _temp43 = _catch(function () {
-        function _temp39() {
-          function _temp37() {
-            function _temp35() {
-              function _temp33() {
-                function _temp31() {
-                  function _temp29() {
-                    function _temp27() {
-                      function _temp25() {
-                        doc.save("DashBoard.pdf");
+      var _temp41 = _catch(function () {
+        function _temp37() {
+          function _temp35() {
+            function _temp33() {
+              function _temp31() {
+                function _temp29() {
+                  function _temp27() {
+                    function _temp25() {
+                      function _temp23() {
+                        function _temp21() {
+                          doc.save("DashBoard.pdf");
+                        }
+
+                        var _temp20 = function () {
+                          if (selectedToPDF.includes(topLearningStrategyName)) {
+                            return Promise.resolve(createImageHeader()).then(function () {
+                              doc.setFontSize(14);
+                              doc.setTextColor("#000");
+                              doc.setFont("Helvetica", "normal", "bold");
+                              doc.text(t(topLearningStrategyName), left, 70);
+                              doc.setFontSize(12);
+                              doc.setTextColor("#3D3D3D");
+                              doc.setFont("Helvetica", "normal", "normal");
+                              doc.text("The Effectiveness of Learning Strategies by Student's feedback", left, line + 4);
+                              var chart = document.getElementById(topLearningStrategyName);
+                              return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                                line += 12;
+                                left = 20;
+                                var chartWidth = 420;
+                                var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                                doc.addImage(canvas.toDataURL("image/png"), 10, line, chartWidth, chartHeight);
+                                doc.addPage();
+                                line = 80;
+                                left = 20;
+                                return Promise.resolve(createImageHeader()).then(function () {
+                                  doc.setFontSize(14);
+                                  doc.setFont("Helvetica", "normal", "bold");
+                                  doc.setTextColor("#000");
+                                  doc.text(t(topMostUsedStrategiesName), left, 70);
+                                  doc.setFontSize(12);
+                                  doc.setTextColor("#3D3D3D");
+                                  doc.setFont("Helvetica", "normal", "normal");
+                                  doc.text("How many times a strategy has been chosen", left, line + 4);
+                                  var topChart = document.getElementById(topMostUsedStrategiesName);
+                                  return Promise.resolve(html2canvas(topChart)).then(function (topCanvas) {
+                                    doc.setFontSize(8);
+                                    line += 16;
+                                    var topChartWidth = 420;
+                                    var topChartHeight = topChart && topChart.clientWidth ? topChartWidth * topChart.clientHeight / topChart.clientWidth : heightChart;
+                                    doc.addImage(topCanvas.toDataURL("image/png"), 10, line + 20, topChartWidth, topChartHeight);
+                                  });
+                                });
+                              });
+                            });
+                          }
+                        }();
+
+                        return _temp20 && _temp20.then ? _temp20.then(_temp21) : _temp21(_temp20);
                       }
 
-                      var _temp24 = function () {
-                        if (selectedToPDF.includes(topLearningStrategyName)) {
-                          var chart = document.getElementById("learning_strategy");
-                          return Promise.resolve(html2canvas(chart)).then(function (canvas) {
-                            doc.setFontSize(8);
-                            left = 20;
-                            doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, 450, 150);
-                            doc.setFontSize(8);
+                      var _temp22 = function () {
+                        if (selectedToPDF.includes(learningProcessName)) {
+                          return Promise.resolve(createImageHeader()).then(function () {
+                            doc.setFontSize(14);
+                            doc.setFont("Helvetica", "normal", "bold");
+                            doc.text(t(learningProcessName), left, 70);
+                            line += 20;
+                            var chart = document.getElementById("learning_progress");
+                            return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                              function _temp19() {
+                                left = 20;
+                                line += questions.length * 10;
+                                var chartWidth = 420;
+                                var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                                doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, chartWidth, chartHeight);
+                                chartCount++;
+
+                                if (chartCount < selectedToPDF.length) {
+                                  doc.addPage();
+                                  line = 80;
+                                  left = 20;
+                                }
+                              }
+
+                              var lineOptionPrecess = line;
+                              doc.setFontSize(8);
+                              var questions = seriesConference.map(function (r) {
+                                return r.name;
+                              });
+                              var COLORS = ["#73C8E5", "#F9F871", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"];
+
+                              var _temp18 = _forTo(monthsConference, function (index) {
+                                var _line = line;
+                                doc.setFontSize(12);
+                                doc.setFont("Helvetica", "normal", "bold");
+                                doc.text(monthsConference[index], left, _line);
+                                doc.setFontSize(8);
+
+                                for (var indexResult = 0; indexResult < (seriesConference === null || seriesConference === void 0 ? void 0 : seriesConference.length); indexResult++) {
+                                  var avg = seriesConference[indexResult].data[index];
+
+                                  if (avg != 0) {
+                                    var questionText = questions[indexResult];
+
+                                    if (questionText != "") {
+                                      doc.setDrawColor(0);
+                                      doc.setFillColor(COLORS[indexResult]);
+                                      doc.roundedRect(left, _line + 5, 5, 5, 1, 1, "F");
+                                      doc.setFont("Helvetica", "normal", "bold");
+                                      doc.text(questionText + ":", left + 8, _line + 10);
+                                      doc.setFont("Helvetica", "normal", "normal");
+                                      doc.text((avg === null || avg === void 0 ? void 0 : avg.toFixed(2)) + "%", left + (questionText === null || questionText === void 0 ? void 0 : questionText.length) * 2.5 + 20.5, _line + 10);
+                                    }
+
+                                    _line += 10;
+
+                                    if (_line > lineOptionPrecess) {
+                                      lineOptionPrecess = _line;
+                                    }
+                                  }
+                                }
+
+                                left += 100;
+
+                                if (left + 105 > WIDTH_PAPER) {
+                                  left = 20;
+                                  line = lineOptionPrecess + 25;
+                                }
+
+                                var _temp17 = function () {
+                                  if (line + 150 > HEIGHT_PAPER) {
+                                    doc.addPage();
+                                    return Promise.resolve(createImageHeader()).then(function () {
+                                      line = 80;
+                                      left = 20;
+                                    });
+                                  }
+                                }();
+
+                                if (_temp17 && _temp17.then) return _temp17.then(function () {});
+                              });
+
+                              return _temp18 && _temp18.then ? _temp18.then(_temp19) : _temp19(_temp18);
+                            });
                           });
                         }
                       }();
 
-                      return _temp24 && _temp24.then ? _temp24.then(_temp25) : _temp25(_temp24);
+                      return _temp22 && _temp22.then ? _temp22.then(_temp23) : _temp23(_temp22);
                     }
 
-                    var _temp26 = function () {
-                      if (selectedToPDF.includes(learningProcessName)) {
-                        var _temp44 = function _temp44() {
+                    var _temp24 = function () {
+                      if (selectedToPDF.includes(successIndicatorsName)) {
+                        return Promise.resolve(createImageHeader()).then(function () {
                           doc.setFontSize(14);
                           doc.setFont("Helvetica", "normal", "bold");
-                          doc.text(t(learningProcessName), left, line);
-                          line += 20;
-                          var chart = document.getElementById("learning_progress");
+                          doc.text(t(successIndicatorsName), left, line);
+                          line += 40;
+                          var chart = document.getElementById("success_indicators");
                           return Promise.resolve(html2canvas(chart)).then(function (canvas) {
-                            function _temp21() {
-                              left = 20;
-                              doc.addImage(canvas.toDataURL("image/png"), 10, line + 70, 420, heightChart);
-                              doc.setFontSize(8);
-                              doc.addPage();
-                              line = 80;
+                            function _temp16() {
                               left = 20;
+                              line += questions.length * 10;
+                              var chartWidth = 420;
+                              var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                              doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, chartWidth, chartHeight);
+                              chartCount++;
+
+                              if (chartCount < selectedToPDF.length) {
+                                doc.addPage();
+                                line = 80;
+                                left = 20;
+                              }
                             }
 
-                            var lineOptionPrecess = line;
+                            var lineOptionCheckIn = line;
                             doc.setFontSize(8);
-                            var questions = seriesConference.map(function (r) {
+                            var questions = successIndicatorsData.map(function (r) {
                               return r.name;
                             });
-
-                            var _temp20 = _forTo(monthsConference, function (index) {
+                            var COLORS = ["#73C8E5", "#FFB04F", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"];
+                            var indexCheckIn = 0;
+
+                            var _temp15 = _for(function () {
+                              return indexCheckIn < monthsOneToOne.length;
+                            }, function () {
+                              return indexCheckIn++;
+                            }, function () {
                               var _line = line;
                               doc.setFontSize(12);
                               doc.setFont("Helvetica", "normal", "bold");
-                              doc.text(monthsConference[index], left, _line);
+                              doc.text(monthsOneToOne[indexCheckIn], left, _line);
                               doc.setFontSize(8);
 
-                              for (var indexResult = 0; indexResult < (seriesConference === null || seriesConference === void 0 ? void 0 : seriesConference.length); indexResult++) {
-                                var avg = seriesConference[indexResult].data[index];
+                              for (var indexResult = 0; indexResult < (successIndicatorsData === null || successIndicatorsData === void 0 ? void 0 : successIndicatorsData.length); indexResult++) {
+                                var avg = successIndicatorsData[indexResult].data[indexCheckIn];
 
                                 if (avg != 0) {
                                   var questionText = questions[indexResult];
 
                                   if (questionText != "") {
                                     doc.setDrawColor(0);
-                                    doc.setFillColor(COLOR_CHART_AND_PERCENTS[indexResult]);
+                                    doc.setFillColor(COLORS[indexResult]);
                                     doc.roundedRect(left, _line + 5, 5, 5, 1, 1, "F");
                                     doc.setFont("Helvetica", "normal", "bold");
                                     doc.text(questionText + ":", left + 8, _line + 10);
@@ -31530,8 +31702,8 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                                   _line += 10;
 
-                                  if (_line > lineOptionPrecess) {
-                                    lineOptionPrecess = _line;
+                                  if (_line > lineOptionCheckIn) {
+                                    lineOptionCheckIn = _line;
                                   }
                                 }
                               }
@@ -31540,10 +31712,10 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                               if (left + 105 > WIDTH_PAPER) {
                                 left = 20;
-                                line = lineOptionPrecess + 25;
+                                line = lineOptionCheckIn + 25;
                               }
 
-                              var _temp19 = function () {
+                              var _temp14 = function () {
                                 if (line + 150 > HEIGHT_PAPER) {
                                   doc.addPage();
                                   return Promise.resolve(createImageHeader()).then(function () {
@@ -31553,185 +31725,124 @@ var DashboardToPDF = function DashboardToPDF(props) {
                                 }
                               }();
 
-                              if (_temp19 && _temp19.then) return _temp19.then(function () {});
+                              if (_temp14 && _temp14.then) return _temp14.then(function () {});
                             });
 
-                            return _temp20 && _temp20.then ? _temp20.then(_temp21) : _temp21(_temp20);
+                            return _temp15 && _temp15.then ? _temp15.then(_temp16) : _temp16(_temp15);
                           });
-                        };
-
-                        var _temp45 = function () {
-                          if (line > HEIGHT_PAPER / 2) {
-                            line = 80;
-                            left = 20;
-                            doc.addPage();
-                            return Promise.resolve(createImageHeader()).then(function () {});
-                          }
-                        }();
-
-                        return _temp45 && _temp45.then ? _temp45.then(_temp44) : _temp44(_temp45);
+                        });
                       }
                     }();
 
-                    return _temp26 && _temp26.then ? _temp26.then(_temp27) : _temp27(_temp26);
+                    return _temp24 && _temp24.then ? _temp24.then(_temp25) : _temp25(_temp24);
                   }
 
-                  var _temp28 = function () {
+                  var _temp26 = function () {
                     if (selectedToPDF.includes(studentStressByZone)) {
-                      var _temp46 = function _temp46() {
+                      var _temp42 = function _temp42() {
                         doc.setFontSize(14);
                         doc.setFont("Helvetica", "normal", "bold");
-                        doc.text(t(studentStressByZone), left, line);
+                        doc.text(t(studentStressByZone), left, line <= 85 ? 70 : line);
                         line += 20;
                         var chart = document.getElementById("student_stress_by_zone");
                         return Promise.resolve(html2canvas(chart)).then(function (canvas) {
-                          doc.addImage(canvas.toDataURL("image/png"), 10, line, 420, heightChart);
-                          line += heightChart + 20;
+                          var chartWidth = 460;
+                          var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                          doc.addImage(canvas.toDataURL("image/png"), 10, line, chartWidth, chartHeight);
+                          chartCount++;
+
+                          if (chartCount < selectedToPDF.length) {
+                            doc.addPage();
+                            line = 80;
+                            left = 20;
+                          }
                         });
                       };
 
-                      var _temp47 = function () {
-                        if (line > HEIGHT_PAPER / 2) {
-                          line = 80;
-                          left = 20;
-                          doc.addPage();
+                      if (line > HEIGHT_PAPER / 2) {
+                        line = 80;
+                        left = 20;
+                        doc.addPage();
+                      }
+
+                      var _temp43 = function () {
+                        if (line <= 85) {
                           return Promise.resolve(createImageHeader()).then(function () {});
                         }
                       }();
 
-                      return _temp47 && _temp47.then ? _temp47.then(_temp46) : _temp46(_temp47);
+                      return _temp43 && _temp43.then ? _temp43.then(_temp42) : _temp42(_temp43);
                     }
                   }();
 
-                  return _temp28 && _temp28.then ? _temp28.then(_temp29) : _temp29(_temp28);
+                  return _temp26 && _temp26.then ? _temp26.then(_temp27) : _temp27(_temp26);
                 }
 
-                var _temp30 = function () {
+                var _temp28 = function () {
                   if (selectedToPDF.includes(studentDistribution)) {
-                    var _temp48 = function _temp48() {
-                      var chart = document.getElementById("student_distribution");
+                    var _temp44 = function _temp44() {
+                      doc.setFontSize(14);
+                      doc.setFont("Helvetica", "normal", "bold");
+                      doc.text(t(studentDistribution), left, line <= 85 ? 70 : line);
+                      var chart = document.getElementById(studentDistribution);
                       return Promise.resolve(html2canvas(chart)).then(function (canvas) {
-                        doc.addImage(canvas.toDataURL("image/png"), 10, line, 420, heightChart);
-                        line += heightChart + 20;
+                        var chartWidth = 420;
+                        line += 20;
+                        var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                        doc.addImage(canvas.toDataURL("image/png"), 10, line, chartWidth, chartHeight);
+                        chartCount++;
+                        line += heightChart;
+
+                        if (chartCount < selectedToPDF.length && !selectedToPDF.includes(studentStressByZone)) {
+                          doc.addPage();
+                          line = 80;
+                          left = 20;
+                        }
                       });
                     };
 
-                    var _temp49 = function () {
-                      if (line > HEIGHT_PAPER / 2) {
-                        line = 80;
-                        left = 20;
-                        doc.addPage();
+                    if (line > HEIGHT_PAPER / 2) {
+                      line = 80;
+                      left = 20;
+                      doc.addPage();
+                    }
+
+                    var _temp45 = function () {
+                      if (line <= 85) {
                         return Promise.resolve(createImageHeader()).then(function () {});
                       }
                     }();
 
-                    return _temp49 && _temp49.then ? _temp49.then(_temp48) : _temp48(_temp49);
+                    return _temp45 && _temp45.then ? _temp45.then(_temp44) : _temp44(_temp45);
                   }
                 }();
 
-                return _temp30 && _temp30.then ? _temp30.then(_temp31) : _temp31(_temp30);
+                return _temp28 && _temp28.then ? _temp28.then(_temp29) : _temp29(_temp28);
               }
 
-              var _temp32 = function () {
-                if (selectedToPDF.includes(successIndicatorsName)) {
-                  var _temp50 = function _temp50() {
+              var _temp30 = function () {
+                if (selectedToPDF.includes(overallReadinessToLearn)) {
+                  return Promise.resolve(createImageHeader()).then(function () {
                     doc.setFontSize(14);
                     doc.setFont("Helvetica", "normal", "bold");
-                    doc.text(t(successIndicatorsName), left, line);
-                    line += 20;
-                    var chart = document.getElementById("success_indicators");
+                    doc.text(t(overallReadinessToLearn), left, 70);
+                    var chart = document.getElementById(overallReadinessToLearn);
                     return Promise.resolve(html2canvas(chart)).then(function (canvas) {
-                      function _temp12() {
-                        left = 20;
-                        line += questions.length * 10;
-                        doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, 420, heightChart);
-                        doc.setFontSize(8);
-                        line += heightChart + 20;
-                      }
-
-                      var lineOptionCheckIn = line;
-                      doc.setFontSize(8);
-                      var questions = successIndicatorsData.map(function (r) {
-                        return r.name;
-                      });
-                      var indexCheckIn = 0;
-
-                      var _temp11 = _for(function () {
-                        return indexCheckIn < monthsOneToOne.length;
-                      }, function () {
-                        return indexCheckIn++;
-                      }, function () {
-                        var _line = line;
-                        doc.setFontSize(12);
-                        doc.setFont("Helvetica", "normal", "bold");
-                        doc.text(monthsOneToOne[indexCheckIn], left, _line);
-                        doc.setFontSize(8);
-
-                        for (var indexResult = 0; indexResult < (successIndicatorsData === null || successIndicatorsData === void 0 ? void 0 : successIndicatorsData.length); indexResult++) {
-                          var avg = successIndicatorsData[indexResult].data[indexCheckIn];
-
-                          if (avg != 0) {
-                            var questionText = questions[indexResult];
-
-                            if (questionText != "") {
-                              doc.setDrawColor(0);
-                              doc.setFillColor(COLOR_CHART_AND_PERCENTS[indexResult]);
-                              doc.roundedRect(left, _line + 5, 5, 5, 1, 1, "F");
-                              doc.setFont("Helvetica", "normal", "bold");
-                              doc.text(questionText + ":", left + 8, _line + 10);
-                              doc.setFont("Helvetica", "normal", "normal");
-                              doc.text((avg === null || avg === void 0 ? void 0 : avg.toFixed(2)) + "%", left + (questionText === null || questionText === void 0 ? void 0 : questionText.length) * 2.5 + 20.5, _line + 10);
-                            }
-
-                            _line += 10;
-
-                            if (_line > lineOptionCheckIn) {
-                              lineOptionCheckIn = _line;
-                            }
-                          }
-                        }
-
-                        left += 100;
-
-                        if (left + 105 > WIDTH_PAPER) {
-                          left = 20;
-                          line = lineOptionCheckIn + 25;
-                        }
-
-                        var _temp10 = function () {
-                          if (line + 150 > HEIGHT_PAPER) {
-                            doc.addPage();
-                            return Promise.resolve(createImageHeader()).then(function () {
-                              line = 80;
-                              left = 20;
-                            });
-                          }
-                        }();
-
-                        if (_temp10 && _temp10.then) return _temp10.then(function () {});
-                      });
-
-                      return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
-                    });
-                  };
-
-                  var _temp51 = function () {
-                    if (line > HEIGHT_PAPER / 2) {
-                      line = 80;
                       left = 20;
-                      doc.addPage();
-                      return Promise.resolve(createImageHeader()).then(function () {});
-                    }
-                  }();
-
-                  return _temp51 && _temp51.then ? _temp51.then(_temp50) : _temp50(_temp51);
+                      var chartWidth = 420;
+                      var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                      doc.addImage(canvas.toDataURL("image/png"), 10, line, chartWidth, chartHeight);
+                      chartCount++;
+                      line += heightChart + 20;
+                    });
+                  });
                 }
               }();
 
-              return _temp32 && _temp32.then ? _temp32.then(_temp33) : _temp33(_temp32);
+              return _temp30 && _temp30.then ? _temp30.then(_temp31) : _temp31(_temp30);
             }
 
-            var _temp34 = function () {
+            var _temp32 = function () {
               if (selectedToPDF.includes(preparednessChartName)) {
                 return Promise.resolve(createImageHeader()).then(function () {
                   doc.setFontSize(14);
@@ -31743,11 +31854,19 @@ var DashboardToPDF = function DashboardToPDF(props) {
                     function _temp9() {
                       left = 20;
                       line += questions.length * 10;
-                      doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, 420, heightChart);
-                      doc.setFontSize(8);
-                      line += heightChart + 20;
+                      var chartWidth = 420;
+                      var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                      doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, chartWidth, chartHeight);
+                      chartCount++;
+
+                      if (chartCount < selectedToPDF.length) {
+                        doc.addPage();
+                        line = 80;
+                        left = 20;
+                      }
                     }
 
+                    line += 20;
                     var lineOptionCheckIn = line;
                     doc.setFontSize(8);
                     var questions = preparednessData.map(function (r) {
@@ -31765,6 +31884,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                       doc.setFont("Helvetica", "normal", "bold");
                       doc.text(monthsOneToOne[indexCheckIn], left, _line);
                       doc.setFontSize(8);
+                      var COLORS = ["#169490", "#316CD9", "#FFB04F"];
 
                       for (var indexResult = 0; indexResult < (preparednessData === null || preparednessData === void 0 ? void 0 : preparednessData.length); indexResult++) {
                         var avg = preparednessData[indexResult].data[indexCheckIn];
@@ -31774,7 +31894,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                           if (questionText != "") {
                             doc.setDrawColor(0);
-                            doc.setFillColor(COLOR_CHART_AND_PERCENTS[indexResult]);
+                            doc.setFillColor(COLORS[indexResult]);
                             doc.roundedRect(left, _line + 5, 5, 5, 1, 1, "F");
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(questionText + ":", left + 8, _line + 10);
@@ -31816,10 +31936,10 @@ var DashboardToPDF = function DashboardToPDF(props) {
               }
             }();
 
-            return _temp34 && _temp34.then ? _temp34.then(_temp35) : _temp35(_temp34);
+            return _temp32 && _temp32.then ? _temp32.then(_temp33) : _temp33(_temp32);
           }
 
-          var _temp36 = function () {
+          var _temp34 = function () {
             if (selectedToPDF.includes(averageStudentStressName)) {
               return Promise.resolve(createImageHeader()).then(function () {
                 doc.setFontSize(14);
@@ -31830,13 +31950,19 @@ var DashboardToPDF = function DashboardToPDF(props) {
                 return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                   function _temp6() {
                     left = 20;
-                    doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, 420, heightChart);
-                    doc.setFontSize(8);
-                    doc.addPage();
-                    line = 80;
-                    left = 20;
+                    var chartWidth = 420;
+                    var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                    doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, chartWidth, chartHeight);
+                    chartCount++;
+
+                    if (chartCount < selectedToPDF.length) {
+                      doc.addPage();
+                      line = 80;
+                      left = 20;
+                    }
                   }
 
+                  line += 20;
                   var lineOptionCheckIn = line;
                   doc.setFontSize(8);
                   var questions = stressData.map(function (r) {
@@ -31863,7 +31989,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                         if (questionText != "") {
                           doc.setDrawColor(0);
-                          doc.setFillColor(COLOR_CHART_AND_PERCENTS[indexResult]);
+                          doc.setFillColor("#C44140");
                           doc.roundedRect(left, _line + 5, 5, 5, 1, 1, "F");
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(questionText + ":", left + 8, _line + 10);
@@ -31905,7 +32031,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
             }
           }();
 
-          return _temp36 && _temp36.then ? _temp36.then(_temp37) : _temp37(_temp36);
+          return _temp34 && _temp34.then ? _temp34.then(_temp35) : _temp35(_temp34);
         }
 
         var doc = new jsPDF({
@@ -31916,12 +32042,18 @@ var DashboardToPDF = function DashboardToPDF(props) {
         var WIDTH_PAPER = doc.internal.pageSize.width;
         var HEIGHT_PAPER = doc.internal.pageSize.height;
         var heightChart = 200;
+        var splitShoolName = doc.splitTextToSize(schoolName, 120);
+        var chartCount = 0;
+        var schoolWidth = schoolName.length <= 18 ? getWidthOfWord(schoolName, "18px", "bold") : getWidthOfWord(splitShoolName.join(""), "18px", "bold");
 
         var createImageHeader = function createImageHeader() {
           try {
             var imageLogo = document.getElementById("header-logo");
             return Promise.resolve(html2canvas(imageLogo)).then(function (imageLogoCanvas) {
               doc.addImage(imageLogoCanvas.toDataURL("image/png", 1.0), "png", 20, 20, 90, 25);
+              doc.setFontSize(18);
+              doc.setFont("Helvetica", "normal", "bold");
+              doc.text(schoolName.length <= 18 ? schoolName : splitShoolName[0] + "...", (WIDTH_PAPER - schoolWidth) / 2 + 15, 40);
               doc.setFontSize(10);
               doc.setFont("Helvetica", "italic", "normal");
               doc.text("From: " + moment(startTime).format("DD/MM/YYYY"), 310, 40);
@@ -31938,7 +32070,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
         var line = 85;
         var left = 20;
 
-        var _temp38 = function () {
+        var _temp36 = function () {
           if (selectedToPDF.includes(averageStudentSafetyName)) {
             return Promise.resolve(createImageHeader()).then(function () {
               doc.setFontSize(14);
@@ -31948,16 +32080,19 @@ var DashboardToPDF = function DashboardToPDF(props) {
               return Promise.resolve(html2canvas(chart)).then(function (canvas) {
                 function _temp3() {
                   left = 20;
-                  doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, 420, heightChart);
-                  line = line + heightChart + 30;
+                  var chartWidth = 420;
+                  var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+                  doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, chartWidth, chartHeight);
+                  chartCount++;
 
-                  if (line + 150 > HEIGHT_PAPER) {
+                  if (chartCount < selectedToPDF.length) {
                     doc.addPage();
                     line = 80;
                     left = 20;
                   }
                 }
 
+                line += 20;
                 var lineOptionCheckIn = line;
                 doc.setFontSize(8);
                 var questions = safetyData.map(function (r) {
@@ -31984,7 +32119,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                       if (questionText != "") {
                         doc.setDrawColor(0);
-                        doc.setFillColor(COLOR_CHART_AND_PERCENTS[indexResult]);
+                        doc.setFillColor("#0F9655");
                         doc.roundedRect(left, _line + 5, 5, 5, 1, 1, "F");
                         doc.setFont("Helvetica", "normal", "bold");
                         doc.text(questionText + ":", left + 8, _line + 10);
@@ -32026,7 +32161,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
           }
         }();
 
-        return _temp38 && _temp38.then ? _temp38.then(_temp39) : _temp39(_temp38);
+        return _temp36 && _temp36.then ? _temp36.then(_temp37) : _temp37(_temp36);
       }, function (err) {
         console.log(err);
         dispatch(marioCore.setAlert({
@@ -32035,7 +32170,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
         }));
       });
 
-      return Promise.resolve(_temp43 && _temp43.then ? _temp43.then(_temp42) : _temp42(_temp43));
+      return Promise.resolve(_temp41 && _temp41.then ? _temp41.then(_temp40) : _temp40(_temp41));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -32087,7 +32222,8 @@ var DashboardToPDF = function DashboardToPDF(props) {
     months: monthsOneToOne,
     dayOfWeek: dayOfWeekOneToOne,
     avgQuestionLastMonth: avgQuestionLastMonth,
-    timeOfDay: timeOfDay
+    timeOfDay: timeOfDay,
+    isPrint: true
   })), React__default.createElement("div", {
     id: "success_indicators",
     style: {
@@ -32102,21 +32238,38 @@ var DashboardToPDF = function DashboardToPDF(props) {
     months: monthsOneToOne,
     dayOfWeek: dayOfWeekOneToOne,
     timeOfDay: timeOfDay,
-    colors: ["#73C8E5", "#FFB04F", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"]
+    colors: ["#73C8E5", "#FFB04F", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"],
+    isPrint: true
   })), React__default.createElement("div", {
-    id: "student_distribution",
+    id: overallReadinessToLearn,
     style: {
       display: "block",
       width: "45%"
     }
-  }, React__default.createElement(BubbleChartCustom$1, {
-    data: readinessToLearning
+  }, React__default.createElement(GenerateChartData, {
+    isPrint: true,
+    colors: ["#D9EEE4", "#FAF0F0"],
+    name: t(overallReadinessToLearn),
+    typeChart: TYPECHART.DONUT,
+    months: [],
+    activeColumn: [true, true],
+    avgQuestionLastMonth: dataOverallReadyToLearn.overViewQuestionLastMonth,
+    series: dataOverallReadyToLearn.resultQuestion,
+    timeOfDay: timeOfDay,
+    dayOfWeek: [],
+    width: 320,
+    height: 320
   })), React__default.createElement("div", {
-    id: "student_stress_by_zone",
+    id: studentDistribution,
     style: {
       display: "block",
       width: "45%"
     }
+  }, React__default.createElement(BubbleChartCustom$1, {
+    data: readinessToLearning,
+    isPrint: true
+  })), React__default.createElement("div", {
+    id: "student_stress_by_zone"
   }, React__default.createElement(StudentPressureChart, {
     studentPressure: studentPressure
   })), React__default.createElement("div", {
@@ -32133,11 +32286,19 @@ var DashboardToPDF = function DashboardToPDF(props) {
     months: monthsConference,
     dayOfWeek: dayOfWeekConference,
     avgQuestionLastMonth: avgConferenceLastMonth,
-    timeOfDay: timeOfDay
+    timeOfDay: timeOfDay,
+    isPrint: true
   })), React__default.createElement("div", {
-    id: "learning_strategy"
+    style: {
+      display: "block",
+      width: "75%"
+    }
   }, React__default.createElement(TopLearningStrategy$1, {
-    data: topLearningStrategiesData
+    data: topLearningStrategiesData,
+    learningStrategyId: topLearningStrategyName
+  })), React__default.createElement("div", null, React__default.createElement(TopLearningStrategy$1, {
+    data: topLearningStrategiesData,
+    topLearningStrategyId: topMostUsedStrategiesName
   }))), React__default.createElement("div", {
     className: "" + styles$1["image-logo"],
     id: "header-logo"
@@ -32314,7 +32475,8 @@ var Dashboard = function Dashboard() {
       avgQuestionLastMonth = _useChartDatas.avgQuestionLastMonth,
       studentPressure = _useChartDatas.studentPressure,
       dataOverallReadyToLearn = _useChartDatas.dataOverallReadyToLearn,
-      readinessToLearning = _useChartDatas.readinessToLearning;
+      readinessToLearning = _useChartDatas.readinessToLearning,
+      listTotalTime = _useChartDatas.listTotalTime;
 
   var _useBehavior = useBehavior(),
       chartIsOpened = _useBehavior.chartIsOpened,
@@ -32403,7 +32565,9 @@ var Dashboard = function Dashboard() {
     dayOfWeekConference: dayOfWeekConference,
     avgConferenceLastMonth: avgConferenceLastMonth,
     readinessToLearning: readinessToLearning,
-    studentPressure: studentPressure
+    studentPressure: studentPressure,
+    dataOverallReadyToLearn: dataOverallReadyToLearn,
+    schoolName: listTotalTime.schoolName
   }))), React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
   }, React__default.createElement("div", {
@@ -33905,7 +34069,7 @@ var TYPECHART$1;
   TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
 })(TYPECHART$1 || (TYPECHART$1 = {}));
 
-var COLOR_CHART_AND_PERCENTS$1 = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
+var COLOR_CHART_AND_PERCENTS = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
 
 var COLOR_CHART_AND_PIE = ["#5A7F05", "#C94645", "#FFB04F"];
 var COLOR_LABEL_PIE = ["#006E60", "#FF7670", "#994700"];
@@ -33920,7 +34084,7 @@ var INIT_TOP_MOST_SURVEY_USED = {
   sendDateSurvey: new Date(),
   percentSurvey: 0
 };
-var COLOR_CHART_AND_PERCENTS$2 = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
+var COLOR_CHART_AND_PERCENTS$1 = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
 var DEFAULT_START_DATE$1 = moment().subtract(2, 'months').startOf("day").valueOf();
 var DEFAULT_END_DATE$1 = moment().endOf("day").valueOf();
 var CALENDAR_OPTIONS$1 = [{
@@ -34757,13 +34921,13 @@ var optionColumnChartAndPercents$1 = function optionColumnChartAndPercents(month
     fill: {
       opacity: isRidgeCharts ? 0.2 : 1
     },
-    colors: COLOR_CHART_AND_PERCENTS$2.filter(function (_, index) {
+    colors: COLOR_CHART_AND_PERCENTS$1.filter(function (_, index) {
       return activeData[index];
     }),
     stroke: {
       curve: "smooth",
       show: true,
-      colors: isRidgeCharts ? COLOR_CHART_AND_PERCENTS$2.filter(function (_, index) {
+      colors: isRidgeCharts ? COLOR_CHART_AND_PERCENTS$1.filter(function (_, index) {
         return activeData[index];
       }) : ["#fff"],
       width: 3,
@@ -34853,13 +35017,13 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData, n
         return 0.6;
       })
     },
-    colors: COLOR_CHART_AND_PERCENTS$2.filter(function (_, index) {
+    colors: COLOR_CHART_AND_PERCENTS$1.filter(function (_, index) {
       return activeData[index];
     }),
     stroke: {
       curve: "smooth",
       show: true,
-      colors: COLOR_CHART_AND_PERCENTS$2.filter(function (_, index) {
+      colors: COLOR_CHART_AND_PERCENTS$1.filter(function (_, index) {
         return activeData[index];
       }),
       width: newseries === null || newseries === void 0 ? void 0 : newseries.map(function (item) {
@@ -35248,7 +35412,7 @@ var ChartViewDashboard = function ChartViewDashboard(_ref) {
       className: "" + styles$2["item-checkbox"],
       key: index
     }, React__default.createElement(CheckboxCustom$1, {
-      background: COLOR_CHART_AND_PERCENTS$1[index],
+      background: COLOR_CHART_AND_PERCENTS[index],
       width: 16,
       height: 16,
       isActive: activeColumn[index],
@@ -35298,7 +35462,7 @@ var ChartViewDashboard = function ChartViewDashboard(_ref) {
     }, React__default.createElement("div", {
       className: "" + styles$2["mark-custom"],
       style: {
-        backgroundColor: COLOR_CHART_AND_PERCENTS$1[index]
+        backgroundColor: COLOR_CHART_AND_PERCENTS[index]
       }
     }), React__default.createElement("label", {
       className: "" + styles$2["label-legend-custom"]