mario-education 2.4.171-level → 2.4.173-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 = [{
@@ -29673,6 +29673,12 @@ var useChartDatas = function useChartDatas() {
       handleActiveColumnConference = _useDashboard.handleActiveColumnConference,
       activeColumnConference = _useDashboard.activeColumnConference;
 
+  var schoolName = reactRedux.useSelector(function (state) {
+    var _state$common, _state$common$user;
+
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.schoolName;
+  });
+
   var _useState = React.useState([]),
       selectedToPrint = _useState[0],
       setSelectedToPrint = _useState[1];
@@ -29871,7 +29877,8 @@ var useChartDatas = function useChartDatas() {
     avgQuestionLastMonth: avgQuestionLastMonth,
     studentPressure: studentPressure,
     dataOverallReadyToLearn: dataOverallReadyToLearn,
-    readinessToLearning: readinessToLearning
+    readinessToLearning: readinessToLearning,
+    schoolName: schoolName
   };
 };
 
@@ -30688,13 +30695,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 +30722,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 +30762,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 +30781,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 +30835,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 +30857,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,9 +30944,18 @@ 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,
+      width = _ref2.width,
+      isPrint = _ref2.isPrint;
   if (!data) return React__default.createElement(Loading, null);
   var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+  if (width) {
+    screenWidth = width;
+  }
+
   var isMobileScreen = screenWidth < 576;
   var learningStrategies = (data === null || data === void 0 ? void 0 : (_data$learningStrateg = data.learningStrategies) === null || _data$learningStrateg === void 0 ? void 0 : _data$learningStrateg.sort(function (a, b) {
     return average(b.usagePoint) - average(a.usagePoint);
@@ -31038,8 +31064,8 @@ var TopLearningStrategy = function TopLearningStrategy(_ref2) {
     className: "h-100 w-100 " + styles$1["chart-background"] + " pl-4"
   }, React__default.createElement(reactstrap.Row, {
     className: "d-flex"
-  }, React__default.createElement(reactstrap.Col, {
-    md: 7
+  }, (!isPrint || isPrint && learningStrategyId) && React__default.createElement(reactstrap.Col, {
+    md: isPrint ? 12 : 7
   }, React__default.createElement("div", {
     className: "" + styles$1["block-header-chart"]
   }, React__default.createElement("div", {
@@ -31048,7 +31074,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,8 +31094,8 @@ 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, {
-    md: 5,
+  }, "Perceived Usefulness"))), (!isPrint || isPrint && topLearningStrategyId) && React__default.createElement(reactstrap.Col, {
+    md: isPrint ? 12 : 5,
     className: "" + styles$1["box-top-5-most"]
   }, React__default.createElement("div", {
     className: "" + styles$1["block-header-chart"]
@@ -31076,7 +31105,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 +31123,7 @@ var TopLearningStrategy = function TopLearningStrategy(_ref2) {
     style: {
       fontSize: "14px"
     }
-  }, t("no_data"))))));
+  }, t("no_data")))))));
 };
 
 var propsAreEqual = function propsAreEqual(preProps, nextProps) {
@@ -31101,7 +31133,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 +31148,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,299 +31472,431 @@ 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 _temp46 = function _temp46() {
         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 _temp47 = _catch(function () {
+        function _temp43() {
+          function _temp41() {
+            function _temp39() {
+              function _temp37() {
+                function _temp35() {
+                  function _temp33() {
+                    function _temp31() {
+                      function _temp29() {
+                        function _temp27() {
+                          doc.save("DashBoard.pdf");
+                        }
+
+                        var _temp26 = 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 _temp26 && _temp26.then ? _temp26.then(_temp27) : _temp27(_temp26);
                       }
 
-                      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 _temp28 = 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 _temp25() {
+                                function _temp23() {
+                                  doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, chartWidth, chartHeight);
+                                  chartCount++;
+
+                                  if (chartCount < selectedToPDF.length) {
+                                    doc.addPage();
+                                    line = 80;
+                                    left = 20;
+                                  }
+                                }
+
+                                left = 20;
+                                line += questions.length * 10;
+                                var chartWidth = 420;
+                                var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
+
+                                var _temp22 = function () {
+                                  if (line + chartHeight + 20 > HEIGHT_PAPER) {
+                                    doc.addPage();
+                                    return Promise.resolve(createImageHeader()).then(function () {
+                                      line = 80;
+                                      left = 20;
+                                      doc.setFontSize(14);
+                                      doc.setFont("Helvetica", "normal", "bold");
+                                      doc.text(t(learningProcessName), left, line);
+                                      line += 10;
+                                    });
+                                  }
+                                }();
+
+                                return _temp22 && _temp22.then ? _temp22.then(_temp23) : _temp23(_temp22);
+                              }
+
+                              var lineOptionPrecess = line;
+                              doc.setFontSize(8);
+                              var questions = seriesConference.map(function (r) {
+                                return r.name;
+                              });
+                              var COLORS = ["#73C8E5", "#F9F871", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"];
+
+                              var _temp24 = function () {
+                                if (seriesConference !== null && seriesConference !== void 0 && seriesConference.length) {
+                                  return _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 + 20;
+                                    }
+
+                                    var _temp21 = function () {
+                                      if (line + 150 > HEIGHT_PAPER) {
+                                        doc.addPage();
+                                        return Promise.resolve(createImageHeader()).then(function () {
+                                          line = 80;
+                                          left = 20;
+                                        });
+                                      }
+                                    }();
+
+                                    if (_temp21 && _temp21.then) return _temp21.then(function () {});
+                                  });
+                                }
+                              }();
+
+                              return _temp24 && _temp24.then ? _temp24.then(_temp25) : _temp25(_temp24);
+                            });
                           });
                         }
                       }();
 
-                      return _temp24 && _temp24.then ? _temp24.then(_temp25) : _temp25(_temp24);
+                      return _temp28 && _temp28.then ? _temp28.then(_temp29) : _temp29(_temp28);
                     }
 
-                    var _temp26 = function () {
-                      if (selectedToPDF.includes(learningProcessName)) {
-                        var _temp44 = function _temp44() {
+                    var _temp30 = 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;
-                              left = 20;
-                            }
+                            function _temp20() {
+                              function _temp18() {
+                                doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, chartWidth, chartHeight);
+                                chartCount++;
 
-                            var lineOptionPrecess = line;
-                            doc.setFontSize(8);
-                            var questions = seriesConference.map(function (r) {
-                              return r.name;
-                            });
-
-                            var _temp20 = _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(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 > lineOptionPrecess) {
-                                    lineOptionPrecess = _line;
-                                  }
+                                if (chartCount < selectedToPDF.length) {
+                                  doc.addPage();
+                                  line = 80;
+                                  left = 20;
                                 }
                               }
 
-                              left += 100;
-
-                              if (left + 105 > WIDTH_PAPER) {
-                                left = 20;
-                                line = lineOptionPrecess + 25;
-                              }
+                              left = 20;
+                              line += questions.length * 10;
+                              var chartWidth = 420;
+                              var chartHeight = chart && chart.clientWidth ? chartWidth * chart.clientHeight / chart.clientWidth : heightChart;
 
-                              var _temp19 = function () {
-                                if (line + 150 > HEIGHT_PAPER) {
+                              var _temp17 = function () {
+                                if (line + chartHeight + 20 > HEIGHT_PAPER) {
                                   doc.addPage();
                                   return Promise.resolve(createImageHeader()).then(function () {
                                     line = 80;
                                     left = 20;
+                                    doc.setFontSize(14);
+                                    doc.setFont("Helvetica", "normal", "bold");
+                                    doc.text(t(successIndicatorsName), left, line);
+                                    line += 10;
                                   });
                                 }
                               }();
 
-                              if (_temp19 && _temp19.then) return _temp19.then(function () {});
+                              return _temp17 && _temp17.then ? _temp17.then(_temp18) : _temp18(_temp17);
+                            }
+
+                            var lineOptionCheckIn = line;
+                            doc.setFontSize(8);
+                            var questions = successIndicatorsData.map(function (r) {
+                              return r.name;
                             });
+                            var COLORS = ["#73C8E5", "#FFB04F", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"];
+
+                            var _temp19 = function () {
+                              if (successIndicatorsData !== null && successIndicatorsData !== void 0 && successIndicatorsData.length) {
+                                return _forTo(monthsOneToOne, function (indexCheckIn) {
+                                  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(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 > lineOptionCheckIn) {
+                                        lineOptionCheckIn = _line;
+                                      }
+                                    }
+                                  }
 
-                            return _temp20 && _temp20.then ? _temp20.then(_temp21) : _temp21(_temp20);
-                          });
-                        };
+                                  left += 100;
 
-                        var _temp45 = function () {
-                          if (line > HEIGHT_PAPER / 2) {
-                            line = 80;
-                            left = 20;
-                            doc.addPage();
-                            return Promise.resolve(createImageHeader()).then(function () {});
-                          }
-                        }();
+                                  if (left + 105 > WIDTH_PAPER) {
+                                    left = 20;
+                                    line = lineOptionCheckIn + 20;
+                                  }
+
+                                  var _temp16 = function () {
+                                    if (line + 150 > HEIGHT_PAPER) {
+                                      doc.addPage();
+                                      return Promise.resolve(createImageHeader()).then(function () {
+                                        line = 80;
+                                        left = 20;
+                                      });
+                                    }
+                                  }();
+
+                                  if (_temp16 && _temp16.then) return _temp16.then(function () {});
+                                });
+                              }
+                            }();
 
-                        return _temp45 && _temp45.then ? _temp45.then(_temp44) : _temp44(_temp45);
+                            return _temp19 && _temp19.then ? _temp19.then(_temp20) : _temp20(_temp19);
+                          });
+                        });
                       }
                     }();
 
-                    return _temp26 && _temp26.then ? _temp26.then(_temp27) : _temp27(_temp26);
+                    return _temp30 && _temp30.then ? _temp30.then(_temp31) : _temp31(_temp30);
                   }
 
-                  var _temp28 = function () {
+                  var _temp32 = function () {
                     if (selectedToPDF.includes(studentStressByZone)) {
-                      var _temp46 = function _temp46() {
+                      var _temp48 = function _temp48() {
                         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 _temp49 = function () {
+                        if (line <= 85) {
                           return Promise.resolve(createImageHeader()).then(function () {});
                         }
                       }();
 
-                      return _temp47 && _temp47.then ? _temp47.then(_temp46) : _temp46(_temp47);
+                      return _temp49 && _temp49.then ? _temp49.then(_temp48) : _temp48(_temp49);
                     }
                   }();
 
-                  return _temp28 && _temp28.then ? _temp28.then(_temp29) : _temp29(_temp28);
+                  return _temp32 && _temp32.then ? _temp32.then(_temp33) : _temp33(_temp32);
                 }
 
-                var _temp30 = function () {
+                var _temp34 = function () {
                   if (selectedToPDF.includes(studentDistribution)) {
-                    var _temp48 = function _temp48() {
-                      var chart = document.getElementById("student_distribution");
+                    var _temp50 = function _temp50() {
+                      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 _temp51 = function () {
+                      if (line <= 85) {
                         return Promise.resolve(createImageHeader()).then(function () {});
                       }
                     }();
 
-                    return _temp49 && _temp49.then ? _temp49.then(_temp48) : _temp48(_temp49);
+                    return _temp51 && _temp51.then ? _temp51.then(_temp50) : _temp50(_temp51);
                   }
                 }();
 
-                return _temp30 && _temp30.then ? _temp30.then(_temp31) : _temp31(_temp30);
+                return _temp34 && _temp34.then ? _temp34.then(_temp35) : _temp35(_temp34);
               }
 
-              var _temp32 = function () {
-                if (selectedToPDF.includes(successIndicatorsName)) {
-                  var _temp50 = function _temp50() {
+              var _temp36 = 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 _temp36 && _temp36.then ? _temp36.then(_temp37) : _temp37(_temp36);
             }
 
-            var _temp34 = function () {
+            var _temp38 = function () {
               if (selectedToPDF.includes(preparednessChartName)) {
                 return Promise.resolve(createImageHeader()).then(function () {
                   doc.setFontSize(14);
@@ -31740,86 +31905,113 @@ var DashboardToPDF = function DashboardToPDF(props) {
                   line += 20;
                   var chart = document.getElementById("preparedness");
                   return Promise.resolve(html2canvas(chart)).then(function (canvas) {
-                    function _temp9() {
+                    function _temp11() {
+                      function _temp9() {
+                        doc.addImage(canvas.toDataURL("image/png"), 10, line + 20, chartWidth, chartHeight);
+                        chartCount++;
+
+                        if (chartCount < selectedToPDF.length) {
+                          doc.addPage();
+                          line = 80;
+                          left = 20;
+                        }
+                      }
+
                       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;
+
+                      var _temp8 = function () {
+                        if (line + chartHeight + 20 > HEIGHT_PAPER) {
+                          doc.addPage();
+                          return Promise.resolve(createImageHeader()).then(function () {
+                            line = 80;
+                            left = 20;
+                            doc.setFontSize(14);
+                            doc.setFont("Helvetica", "normal", "bold");
+                            doc.text("Readiness To Learn", left, line);
+                            line += 10;
+                          });
+                        }
+                      }();
+
+                      return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
                     }
 
+                    line += 20;
                     var lineOptionCheckIn = line;
                     doc.setFontSize(8);
                     var questions = preparednessData.map(function (r) {
                       return r.name;
                     });
-                    var indexCheckIn = 0;
-
-                    var _temp8 = _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 < (preparednessData === null || preparednessData === void 0 ? void 0 : preparednessData.length); indexResult++) {
-                        var avg = preparednessData[indexResult].data[indexCheckIn];
+                    var _temp10 = function () {
+                      if (preparednessData !== null && preparednessData !== void 0 && preparednessData.length) {
+                        return _forTo(monthsOneToOne, function (indexCheckIn) {
+                          var _line = line;
+                          doc.setFontSize(12);
+                          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];
+
+                            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);
+                              }
 
-                        if (avg != 0) {
-                          var questionText = questions[indexResult];
+                              _line += 10;
 
-                          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);
+                              if (_line > lineOptionCheckIn) {
+                                lineOptionCheckIn = _line;
+                              }
+                            }
                           }
 
-                          _line += 10;
+                          left += 100;
 
-                          if (_line > lineOptionCheckIn) {
-                            lineOptionCheckIn = _line;
+                          if (left + 105 > WIDTH_PAPER) {
+                            left = 20;
+                            line = lineOptionCheckIn + 20;
                           }
-                        }
-                      }
 
-                      left += 100;
+                          var _temp7 = function () {
+                            if (line + 150 > HEIGHT_PAPER) {
+                              doc.addPage();
+                              return Promise.resolve(createImageHeader()).then(function () {
+                                line = 80;
+                                left = 20;
+                              });
+                            }
+                          }();
 
-                      if (left + 105 > WIDTH_PAPER) {
-                        left = 20;
-                        line = lineOptionCheckIn + 25;
+                          if (_temp7 && _temp7.then) return _temp7.then(function () {});
+                        });
                       }
+                    }();
 
-                      var _temp7 = function () {
-                        if (line + 150 > HEIGHT_PAPER) {
-                          doc.addPage();
-                          return Promise.resolve(createImageHeader()).then(function () {
-                            line = 80;
-                            left = 20;
-                          });
-                        }
-                      }();
-
-                      if (_temp7 && _temp7.then) return _temp7.then(function () {});
-                    });
-
-                    return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
+                    return _temp10 && _temp10.then ? _temp10.then(_temp11) : _temp11(_temp10);
                   });
                 });
               }
             }();
 
-            return _temp34 && _temp34.then ? _temp34.then(_temp35) : _temp35(_temp34);
+            return _temp38 && _temp38.then ? _temp38.then(_temp39) : _temp39(_temp38);
           }
 
-          var _temp36 = function () {
+          var _temp40 = function () {
             if (selectedToPDF.includes(averageStudentStressName)) {
               return Promise.resolve(createImageHeader()).then(function () {
                 doc.setFontSize(14);
@@ -31830,13 +32022,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 +32061,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);
@@ -31883,7 +32081,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                     if (left + 105 > WIDTH_PAPER) {
                       left = 20;
-                      line = lineOptionCheckIn + 25;
+                      line = lineOptionCheckIn + 20;
                     }
 
                     var _temp4 = function () {
@@ -31905,7 +32103,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
             }
           }();
 
-          return _temp36 && _temp36.then ? _temp36.then(_temp37) : _temp37(_temp36);
+          return _temp40 && _temp40.then ? _temp40.then(_temp41) : _temp41(_temp40);
         }
 
         var doc = new jsPDF({
@@ -31916,12 +32114,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 +32142,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
         var line = 85;
         var left = 20;
 
-        var _temp38 = function () {
+        var _temp42 = function () {
           if (selectedToPDF.includes(averageStudentSafetyName)) {
             return Promise.resolve(createImageHeader()).then(function () {
               doc.setFontSize(14);
@@ -31948,16 +32152,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 +32191,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);
@@ -32004,7 +32211,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                   if (left + 105 > WIDTH_PAPER) {
                     left = 20;
-                    line = lineOptionCheckIn + 25;
+                    line = lineOptionCheckIn + 20;
                   }
 
                   var _temp = function () {
@@ -32026,7 +32233,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
           }
         }();
 
-        return _temp38 && _temp38.then ? _temp38.then(_temp39) : _temp39(_temp38);
+        return _temp42 && _temp42.then ? _temp42.then(_temp43) : _temp43(_temp42);
       }, function (err) {
         console.log(err);
         dispatch(marioCore.setAlert({
@@ -32035,7 +32242,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
         }));
       });
 
-      return Promise.resolve(_temp43 && _temp43.then ? _temp43.then(_temp42) : _temp42(_temp43));
+      return Promise.resolve(_temp47 && _temp47.then ? _temp47.then(_temp46) : _temp46(_temp47));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -32044,11 +32251,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
   return React__default.createElement("div", null, React__default.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React__default.createElement("div", {
-    id: "safety",
-    style: {
-      display: "block",
-      width: "45%"
-    }
+    id: "safety"
   }, React__default.createElement(GenerateChartData, {
     colors: ["#0F9655"],
     typeChart: TYPECHART.AREA,
@@ -32057,13 +32260,10 @@ var DashboardToPDF = function DashboardToPDF(props) {
     months: monthsOneToOne,
     dayOfWeek: dayOfWeekOneToOne,
     avgQuestionLastMonth: avgQuestionLastMonth,
-    timeOfDay: timeOfDay
+    timeOfDay: timeOfDay,
+    isPrint: true
   })), React__default.createElement("div", {
-    id: "stress",
-    style: {
-      display: "block",
-      width: "45%"
-    }
+    id: "stress"
   }, React__default.createElement(GenerateChartData, {
     colors: ["#C44140"],
     typeChart: TYPECHART.LINE,
@@ -32072,13 +32272,10 @@ var DashboardToPDF = function DashboardToPDF(props) {
     months: monthsOneToOne,
     dayOfWeek: dayOfWeekOneToOne,
     avgQuestionLastMonth: avgQuestionLastMonth,
-    timeOfDay: timeOfDay
+    timeOfDay: timeOfDay,
+    isPrint: true
   })), React__default.createElement("div", {
-    id: "preparedness",
-    style: {
-      display: "block",
-      width: "45%"
-    }
+    id: "preparedness"
   }, React__default.createElement(GenerateChartData, {
     colors: ["#169490", "#316CD9", "#FFB04F"],
     typeChart: TYPECHART.LINE,
@@ -32087,13 +32284,10 @@ 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: {
-      display: "block",
-      width: "45%"
-    }
+    id: "success_indicators"
   }, React__default.createElement(GenerateChartData, {
     typeChart: TYPECHART.AREA,
     activeColumn: activeColumnSuccessIndicators,
@@ -32102,29 +32296,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",
-    style: {
-      display: "block",
-      width: "45%"
-    }
+    id: overallReadinessToLearn
+  }, 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: studentDistribution
   }, React__default.createElement(BubbleChartCustom$1, {
-    data: readinessToLearning
+    data: readinessToLearning,
+    isPrint: true
   })), React__default.createElement("div", {
     id: "student_stress_by_zone",
     style: {
-      display: "block",
-      width: "45%"
+      width: "1280px"
     }
   }, React__default.createElement(StudentPressureChart, {
-    studentPressure: studentPressure
+    studentPressure: studentPressure,
+    width: 1280
   })), React__default.createElement("div", {
-    id: "learning_progress",
-    style: {
-      display: "block",
-      width: "45%"
-    }
+    id: "learning_progress"
   }, React__default.createElement(GenerateChartData, {
     colors: ["#73C8E5", "#F9F871", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"],
     typeChart: TYPECHART.AREA,
@@ -32133,11 +32336,18 @@ var DashboardToPDF = function DashboardToPDF(props) {
     months: monthsConference,
     dayOfWeek: dayOfWeekConference,
     avgQuestionLastMonth: avgConferenceLastMonth,
-    timeOfDay: timeOfDay
-  })), React__default.createElement("div", {
-    id: "learning_strategy"
-  }, React__default.createElement(TopLearningStrategy$1, {
-    data: topLearningStrategiesData
+    timeOfDay: timeOfDay,
+    isPrint: true
+  })), React__default.createElement("div", null, React__default.createElement(TopLearningStrategy$1, {
+    data: topLearningStrategiesData,
+    learningStrategyId: topLearningStrategyName,
+    width: 800,
+    isPrint: true
+  })), React__default.createElement("div", null, React__default.createElement(TopLearningStrategy$1, {
+    data: topLearningStrategiesData,
+    topLearningStrategyId: topMostUsedStrategiesName,
+    width: 800,
+    isPrint: true
   }))), React__default.createElement("div", {
     className: "" + styles$1["image-logo"],
     id: "header-logo"
@@ -32314,7 +32524,8 @@ var Dashboard = function Dashboard() {
       avgQuestionLastMonth = _useChartDatas.avgQuestionLastMonth,
       studentPressure = _useChartDatas.studentPressure,
       dataOverallReadyToLearn = _useChartDatas.dataOverallReadyToLearn,
-      readinessToLearning = _useChartDatas.readinessToLearning;
+      readinessToLearning = _useChartDatas.readinessToLearning,
+      schoolName = _useChartDatas.schoolName;
 
   var _useBehavior = useBehavior(),
       chartIsOpened = _useBehavior.chartIsOpened,
@@ -32403,7 +32614,9 @@ var Dashboard = function Dashboard() {
     dayOfWeekConference: dayOfWeekConference,
     avgConferenceLastMonth: avgConferenceLastMonth,
     readinessToLearning: readinessToLearning,
-    studentPressure: studentPressure
+    studentPressure: studentPressure,
+    dataOverallReadyToLearn: dataOverallReadyToLearn,
+    schoolName: schoolName
   }))), React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
   }, React__default.createElement("div", {
@@ -33905,7 +34118,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 +34133,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 +34970,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 +35066,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 +35461,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 +35511,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"]