mario-education 2.4.31-admin → 2.4.35-admin

package/dist/index.modern.js

@@ -19879,9 +19879,9 @@ var useBehavior = function useBehavior(initialTypeChart) {
       teacherUserId = _useState[0],
       setTeacherUserId = _useState[1];
 
-  var _useState2 = useState(initialTypeChart.map(function () {
+  var _useState2 = useState([true].concat(initialTypeChart.map(function () {
     return false;
-  })),
+  }).splice(0, initialTypeChart.length - 2))),
       chartIsOpened = _useState2[0],
       setChartIsOpened = _useState2[1];
 
@@ -19895,7 +19895,7 @@ var useBehavior = function useBehavior(initialTypeChart) {
     setChartIsOpened(newStateChart);
   };
 
-  var onChangeChart = function onChangeChart(idx, type) {
+  var onChangeChart = function onChangeChart(idx, type, options) {
     switch (type) {
       case TYPECHART.AREA:
         if (typeChartList[idx] === TYPECHART.BAR || typeChartList[idx] === TYPECHART.LINE) {
@@ -19907,7 +19907,7 @@ var useBehavior = function useBehavior(initialTypeChart) {
 
         if (typeChartList[idx] === TYPECHART.BOTH) {
           setTypeChartList(typeChartList.map(function (cur, index) {
-            return index === idx ? initialTypeChart[idx] : cur;
+            return index === idx ? options[1].value : cur;
           }));
         }
 
@@ -25727,7 +25727,7 @@ var gradeOptions = function gradeOptions(grades, studentUserId) {
     };
   });
 };
-var learningStrategyChartOptions = function learningStrategyChartOptions(labelNames, usageCountList) {
+var learningStrategyChartOptions = function learningStrategyChartOptions(labelNames, usageCountList, screenWidth) {
   return {
     chart: {
       type: "bar",
@@ -25784,7 +25784,7 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
         show: true,
         align: "left",
         minWidth: 0,
-        maxWidth: 120,
+        maxWidth: screenWidth,
         style: {
           colors: [],
           fontSize: "14px",
@@ -26626,9 +26626,6 @@ var BarAndAreaChart = function BarAndAreaChart(_ref) {
       _ref$isHasLineChart = _ref.isHasLineChart,
       isHasLineChart = _ref$isHasLineChart === void 0 ? false : _ref$isHasLineChart;
   var newseries = mergeBarChartAndArea(series, isHasLineChart);
-  console.log({
-    newseries: newseries
-  });
   return React.createElement(Chart, {
     options: optionBarChartAndArea(months, activeColumn, newseries),
     series: newseries,
@@ -26660,7 +26657,8 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
       activeColumn = _ref.activeColumn,
       series = _ref.series,
       avg = _ref.avg,
-      months = _ref.months;
+      months = _ref.months,
+      isPDF = _ref.isPDF;
   if (!data) return React.createElement("div", {
     className: "flex justify-content-center align-items-center",
     style: {
@@ -26669,7 +26667,7 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
   }, React.createElement("div", null, "No Data"));
   return React.createElement("div", {
     className: "w-100 h-100 " + styles$1["column-chart-percent"]
-  }, React.createElement("div", {
+  }, !isPDF && React.createElement("div", {
     className: "w-full d-flex gap-2 flex-wrap " + styles$1["listItem"]
   }, data.map(function (month, index) {
     return React.createElement("div", {
@@ -26717,7 +26715,7 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
     months: months,
     activeColumn: activeColumn,
     series: series
-  })), React.createElement("div", {
+  })), !isPDF && React.createElement("div", {
     className: "w-100 d-flex gap-2 flex-wrap  " + styles$1["listItem"]
   }, data.map(function (month, index) {
     return React.createElement("div", {
@@ -26926,16 +26924,17 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
   });
   var maxData = Math.max.apply(Math, usageCount);
   var serieslearningStrategy = [{
-    name: "Usage Point",
+    name: "Perceived Usage",
     data: learningStrategies === null || learningStrategies === void 0 ? void 0 : learningStrategies.map(function (i) {
       return average(i.usagePoint);
     })
   }, {
-    name: "Usage Count",
+    name: "Total Number of Times Selected",
     data: learningStrategies === null || learningStrategies === void 0 ? void 0 : learningStrategies.map(function (i) {
       return i.usageCount / maxData * 100;
     })
   }];
+  var screenWidth = (window.innerWidth - 256) / 100 * 30;
   return React.createElement("div", {
     className: "h-100 w-100 " + styles$1["chart-background"]
   }, React.createElement("div", {
@@ -26943,7 +26942,7 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
   }, serieslearningStrategy.some(function (i) {
     return i.data;
   }) ? React.createElement(Chart, {
-    options: learningStrategyChartOptions(labelNames, usageCount),
+    options: learningStrategyChartOptions(labelNames, usageCount, screenWidth),
     series: serieslearningStrategy,
     type: "bar",
     width: "100%",
@@ -27162,12 +27161,14 @@ var useDashboard = function useDashboard() {
   };
 
   useEffect(function () {
-    setSeriesOneToOne(newSeriesOneToOne);
-    setActiveColumnOneToOne(dataConvertedOneToOne.map(function (_i) {
-      return true;
-    }));
+    setActiveColumnOneToOne([true].concat(dataConvertedOneToOne.map(function (_i) {
+      return false;
+    }).splice(0, dataConvertedOneToOne.length - 2)));
     setAvgOneToOne(newAvgOneToOne === null || newAvgOneToOne === void 0 ? void 0 : newAvgOneToOne.map(function (_, index) {
-      return newAvgOneToOne[index];
+      return activeColumnOneToOne[index] ? newAvgOneToOne[index] : 0;
+    }));
+    setSeriesOneToOne(newSeriesOneToOne === null || newSeriesOneToOne === void 0 ? void 0 : newSeriesOneToOne.filter(function (_, idx) {
+      return activeColumnOneToOne[idx];
     }));
   }, [chartOneToOneData.overviewQuestionChoice]);
 
@@ -27203,12 +27204,14 @@ var useDashboard = function useDashboard() {
   };
 
   useEffect(function () {
-    setSeriesClassReflection(newSeriesClassReflection);
-    setActiveColumnClassReflection(dataConvertedClassReflection.map(function (_i) {
-      return true;
+    setSeriesClassReflection(newSeriesClassReflection === null || newSeriesClassReflection === void 0 ? void 0 : newSeriesClassReflection.filter(function (_, idx) {
+      return activeColumnClassReflection[idx];
     }));
+    setActiveColumnClassReflection([true].concat(dataConvertedClassReflection.map(function (_i) {
+      return false;
+    }).splice(0, dataConvertedClassReflection.length - 2)));
     setAvgClassReflection(newAvgClassReflection === null || newAvgClassReflection === void 0 ? void 0 : newAvgClassReflection.map(function (_, index) {
-      return newAvgClassReflection[index];
+      return activeColumnClassReflection[index] ? newAvgClassReflection[index] : 0;
     }));
   }, [chartClassReflection.overviewQuestionChoice]);
 
@@ -27244,12 +27247,14 @@ var useDashboard = function useDashboard() {
   };
 
   useEffect(function () {
-    setSeriesConference(newSeriesConference);
-    setActiveColumnConference(dataConvertedConference === null || dataConvertedConference === void 0 ? void 0 : dataConvertedConference.map(function (_i) {
-      return true;
+    setSeriesConference(newSeriesConference === null || newSeriesConference === void 0 ? void 0 : newSeriesConference.filter(function (_, idx) {
+      return activeColumnConference[idx];
     }));
+    setActiveColumnConference([true].concat(dataConvertedConference === null || dataConvertedConference === void 0 ? void 0 : dataConvertedConference.map(function (_i) {
+      return false;
+    }).splice(0, dataConvertedConference.length - 2)));
     setAvgConference(newAvgConference === null || newAvgConference === void 0 ? void 0 : newAvgConference.map(function (_, idx) {
-      return newAvgConference[idx];
+      return activeColumnConference[idx] ? newAvgConference[idx] : 0;
     }));
   }, [chartConference === null || chartConference === void 0 ? void 0 : chartConference.overviewQuestionChoice]);
 
@@ -27596,21 +27601,21 @@ var useChartDatas = function useChartDatas() {
     studentId: filter.studentId
   }];
   var chartDashBoards = [{
-    id: "high_impact_learning_strategie",
-    label: "High Impact Learning Strategie",
+    id: "readiness_to_learn",
+    label: "Readiness to Learn",
     children: function children(_) {
-      return React.createElement(TopLearningStrategy$1, {
-        data: topLearningStrategies
+      return React.createElement(BubbleChartCustom$1, {
+        data: readinessToLearning
       });
     },
     isShowChangeChart: false,
     options: []
   }, {
-    id: "readiness_to_learn",
-    label: "Readiness to learn",
+    id: "high_impact_learning_strategie",
+    label: "High Impact Learning Strategies",
     children: function children(_) {
-      return React.createElement(BubbleChartCustom$1, {
-        data: readinessToLearning
+      return React.createElement(TopLearningStrategy$1, {
+        data: topLearningStrategies
       });
     },
     isShowChangeChart: false,
@@ -27618,7 +27623,7 @@ var useChartDatas = function useChartDatas() {
   }, {
     id: "1_to_1",
     label: "1 To 1",
-    children: function children(typeChart) {
+    children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedOneToOne,
         id: "1_to_1",
@@ -27627,7 +27632,8 @@ var useChartDatas = function useChartDatas() {
         activeColumn: activeColumnOneToOne,
         series: seriesOneToOne,
         avg: avgOneToOne,
-        months: monthsOneToOne
+        months: monthsOneToOne,
+        isPDF: isPDF
       });
     },
     isShowChangeChart: true,
@@ -27641,7 +27647,7 @@ var useChartDatas = function useChartDatas() {
   }, {
     id: "class_reflection",
     label: "Class Reflection",
-    children: function children(typeChart) {
+    children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedClassReflection,
         typeChart: typeChart,
@@ -27651,7 +27657,8 @@ var useChartDatas = function useChartDatas() {
         activeColumn: activeColumnClassReflection,
         series: seriesClassRefection,
         avg: avgClassReflection,
-        months: monthsClassReflection
+        months: monthsClassReflection,
+        isPDF: isPDF
       });
     },
     isShowChangeChart: true,
@@ -27665,7 +27672,7 @@ var useChartDatas = function useChartDatas() {
   }, {
     id: "conference",
     label: "Conference",
-    children: function children(typeChart) {
+    children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedConference,
         typeChart: typeChart,
@@ -27674,7 +27681,8 @@ var useChartDatas = function useChartDatas() {
         activeColumn: activeColumnConference,
         series: seriesConference,
         avg: avgConference,
-        months: monthsConference
+        months: monthsConference,
+        isPDF: isPDF
       });
     },
     isShowChangeChart: true,
@@ -27688,7 +27696,7 @@ var useChartDatas = function useChartDatas() {
   }, {
     id: "safety",
     label: "Safety",
-    children: function children(typeChart) {
+    children: function children(typeChart, isPDF) {
       return React.createElement(ColumnChartAndPercent$1, {
         data: dataConvertedSafety,
         typeChart: typeChart,
@@ -27698,7 +27706,8 @@ var useChartDatas = function useChartDatas() {
         activeColumn: activeColumnSafety,
         series: seriesSafety,
         avg: avgSafety,
-        months: monthsSafety
+        months: monthsSafety,
+        isPDF: isPDF
       });
     },
     isShowChangeChart: true,
@@ -27711,7 +27720,7 @@ var useChartDatas = function useChartDatas() {
     }]
   }, {
     id: "Student_by_age",
-    label: "Student by age",
+    label: "Student by Designation",
     children: function children(_, columnFlex) {
       return React.createElement(StudentByAgeAndGender$1, {
         columnFlex: columnFlex,
@@ -27733,7 +27742,7 @@ var useChartDatas = function useChartDatas() {
     options: []
   }];
   var initialTypeChart = chartDashBoards.map(function (i) {
-    return i.options.length > 0 ? i.options[1].value : TYPECHART.BAR;
+    return i.options.length > 0 ? i.options[0].value : TYPECHART.AREA;
   });
   var totalCardData = [{
     icon: "images/icon_chart.png",
@@ -27788,7 +27797,19 @@ var useChartDatas = function useChartDatas() {
     topLearningStrategies: topLearningStrategies,
     chartClassReflection: chartClassReflection,
     chartConference: chartConference,
-    safety: safety
+    safety: safety,
+    dataConvertedOneToOne: dataConvertedOneToOne,
+    activeColumnOneToOne: activeColumnOneToOne,
+    avgOneToOne: avgOneToOne,
+    dataConvertedClassReflection: dataConvertedClassReflection,
+    activeColumnClassReflection: activeColumnClassReflection,
+    avgClassReflection: avgClassReflection,
+    dataConvertedConference: dataConvertedConference,
+    activeColumnConference: activeColumnConference,
+    avgConference: avgConference,
+    dataConvertedSafety: dataConvertedSafety,
+    activeColumnSafety: activeColumnSafety,
+    avgSafety: avgSafety
   };
 };
 
@@ -28295,7 +28316,19 @@ var DashboardToPDF = function DashboardToPDF(props) {
       topLearningStrategies = props.topLearningStrategies,
       chartClassReflection = props.chartClassReflection,
       chartConference = props.chartConference,
-      safety = props.safety;
+      safety = props.safety,
+      dataConvertedOneToOne = props.dataConvertedOneToOne,
+      activeColumnOneToOne = props.activeColumnOneToOne,
+      avgOneToOne = props.avgOneToOne,
+      dataConvertedClassReflection = props.dataConvertedClassReflection,
+      activeColumnClassReflection = props.activeColumnClassReflection,
+      avgClassReflection = props.avgClassReflection,
+      dataConvertedConference = props.dataConvertedConference,
+      activeColumnConference = props.activeColumnConference,
+      avgConference = props.avgConference,
+      dataConvertedSafety = props.dataConvertedSafety,
+      activeColumnSafety = props.activeColumnSafety,
+      avgSafety = props.avgSafety;
   var dispatch = useDispatch();
   var chartHightImpactLearningStrategie = selectedToPDF.find(function (i) {
     return i.id === "high_impact_learning_strategie";
@@ -28405,71 +28438,87 @@ var DashboardToPDF = function DashboardToPDF(props) {
                             var _safety$overviewQuest;
 
                             if (safety.overviewQuestionChoice[i].resultQuestion[0].questionId != 0) {
-                              var _sortedResultQuestion, _sortedResultQuestion2, _sortedResultQuestion3, _sortedResultQuestion4, _sortedResultQuestion5, _sortedResultQuestion6;
+                              var _sortedResultQuestion, _sortedResultQuestion2, _safety$overviewQuest2;
 
                               var sortedResultQuestions = safety.overviewQuestionChoice[i].resultQuestion.sort(function (a, b) {
                                 return a.avgOfStudentChoice < b.avgOfStudentChoice ? 1 : -1;
                               });
                               var bestResultQuestion1 = ((_sortedResultQuestion = sortedResultQuestions[0]) === null || _sortedResultQuestion === void 0 ? void 0 : _sortedResultQuestion.questionText.slice(3, (_sortedResultQuestion2 = sortedResultQuestions[0]) === null || _sortedResultQuestion2 === void 0 ? void 0 : _sortedResultQuestion2.questionText.indexOf("</p>"))) || "";
-                              var bestResultQuestion2 = ((_sortedResultQuestion3 = sortedResultQuestions[1]) === null || _sortedResultQuestion3 === void 0 ? void 0 : _sortedResultQuestion3.questionText.slice(3, (_sortedResultQuestion4 = sortedResultQuestions[1]) === null || _sortedResultQuestion4 === void 0 ? void 0 : _sortedResultQuestion4.questionText.indexOf("</p>"))) || "";
-                              var bestResultQuestion3 = ((_sortedResultQuestion5 = sortedResultQuestions[2]) === null || _sortedResultQuestion5 === void 0 ? void 0 : _sortedResultQuestion5.questionText.slice(3, (_sortedResultQuestion6 = sortedResultQuestions[2]) === null || _sortedResultQuestion6 === void 0 ? void 0 : _sortedResultQuestion6.questionText.indexOf("</p>"))) || "";
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(safety.overviewQuestionChoice[i].month, left, line + 20);
 
                               if (bestResultQuestion1 != "") {
-                                var _sortedResultQuestion7;
+                                var _sortedResultQuestion3;
 
                                 doc.setFont("Helvetica", "normal", "bold");
                                 doc.text(bestResultQuestion1, left + 10, line + 30);
                                 doc.setFont("Helvetica", "normal", "normal");
-                                doc.text(((_sortedResultQuestion7 = sortedResultQuestions[0]) === null || _sortedResultQuestion7 === void 0 ? void 0 : _sortedResultQuestion7.avgOfStudentChoice.toFixed(1)) + "%", left + (bestResultQuestion1 === null || bestResultQuestion1 === void 0 ? void 0 : bestResultQuestion1.length) * 4 + 15, line + 30);
+                                doc.text(((_sortedResultQuestion3 = sortedResultQuestions[0]) === null || _sortedResultQuestion3 === void 0 ? void 0 : _sortedResultQuestion3.avgOfStudentChoice.toFixed(1)) + "%", left + (bestResultQuestion1 === null || bestResultQuestion1 === void 0 ? void 0 : bestResultQuestion1.length) * 4 + 15, line + 30);
                                 doc.setDrawColor(0);
                                 doc.setFillColor(64, 210, 204);
                                 doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
                               }
 
-                              if (bestResultQuestion2 != "") {
-                                var _sortedResultQuestion8;
-
-                                doc.setFont("Helvetica", "normal", "bold");
-                                doc.text(bestResultQuestion2, left + 10, line + 40);
-                                doc.setFont("Helvetica", "normal", "normal");
-                                doc.text(((_sortedResultQuestion8 = sortedResultQuestions[1]) === null || _sortedResultQuestion8 === void 0 ? void 0 : _sortedResultQuestion8.avgOfStudentChoice.toFixed(1)) + "%", left + (bestResultQuestion2 === null || bestResultQuestion2 === void 0 ? void 0 : bestResultQuestion2.length) * 4 + 15, line + 40);
-                                doc.setDrawColor(0);
-                                doc.setFillColor(120, 182, 226);
-                                doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
-                              }
-
-                              if (bestResultQuestion3 != "") {
-                                var _sortedResultQuestion9;
-
-                                doc.setFont("Helvetica", "normal", "bold");
-                                doc.text(bestResultQuestion3, left + 10, line + 50);
-                                doc.setFont("Helvetica", "normal", "normal");
-                                doc.text(((_sortedResultQuestion9 = sortedResultQuestions[2]) === null || _sortedResultQuestion9 === void 0 ? void 0 : _sortedResultQuestion9.avgOfStudentChoice.toFixed(1)) + "%", left + (bestResultQuestion3 === null || bestResultQuestion3 === void 0 ? void 0 : bestResultQuestion3.length) * 4 + 15, line + 50);
-                                doc.setDrawColor(0);
-                                doc.setFillColor(255, 176, 79);
-                                doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
-                              }
-
                               if ((bestResultQuestion1 === null || bestResultQuestion1 === void 0 ? void 0 : bestResultQuestion1.length) * 5 + 5 + 10 > 100) {
                                 left = left + (bestResultQuestion1 === null || bestResultQuestion1 === void 0 ? void 0 : bestResultQuestion1.length) * 5 + 20;
-                              } else if ((bestResultQuestion2 === null || bestResultQuestion2 === void 0 ? void 0 : bestResultQuestion2.length) * 5 + 5 + 10 > 100) {
-                                left = left + (bestResultQuestion2 === null || bestResultQuestion2 === void 0 ? void 0 : bestResultQuestion2.length) * 5 + 20;
-                              } else if ((bestResultQuestion3 === null || bestResultQuestion3 === void 0 ? void 0 : bestResultQuestion3.length) * 5 + 5 + 10 > 100) {
-                                left = left + (bestResultQuestion3 === null || bestResultQuestion3 === void 0 ? void 0 : bestResultQuestion3.length) * 5 + 20;
                               } else {
                                 left = left + 100;
                               }
 
-                              if (left + 80 > WIDTH_PAPER) {
+                              if (left + (safety === null || safety === void 0 ? void 0 : (_safety$overviewQuest2 = safety.overviewQuestionChoice[i + 1]) === null || _safety$overviewQuest2 === void 0 ? void 0 : _safety$overviewQuest2.month.length) * 20 > WIDTH_PAPER) {
                                 left = 20;
-                                line += 60;
+                                line += 30;
                               }
                             }
                           }
 
-                          doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                          doc.setFont("Helvetica", "normal", "normal");
+                          left = 20;
+
+                          for (var i = 0; i < dataConvertedSafety.length; i++) {
+                            if (activeColumnSafety[i]) {
+                              doc.setDrawColor(0);
+                              doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                              doc.roundedRect(left, line + 60, 5, 5, 1, 1, "F");
+                              doc.setTextColor("#252733");
+                              doc.text(dataConvertedSafety[i], left + 7, line + 65);
+                            } else {
+                              doc.setDrawColor(0);
+                              doc.setFillColor("#CCCCCC");
+                              doc.roundedRect(left, line + 60, 5, 5, 1, 1, "F");
+                              doc.setTextColor("#CCCCCC");
+                              doc.text(dataConvertedSafety[i], left + 7, line + 65);
+                            }
+
+                            left = left + dataConvertedSafety[i].length * 3 + 15;
+                          }
+
+                          left = 20;
+                          doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 70, 420, 140);
+
+                          for (var i = 0; i < dataConvertedSafety.length; i++) {
+                            if (activeColumnSafety[i]) {
+                              doc.setDrawColor(0);
+                              doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                              doc.roundedRect(left, line + 215, 5, 5, 1, 1, "F");
+                              doc.setTextColor("#252733");
+                              doc.setFont("Helvetica", "normal", "normal");
+                              doc.text(dataConvertedSafety[i], left + 7, line + 220);
+                              doc.setFont("Helvetica", "normal", "bold");
+                              doc.text(avgSafety[i] + "%", left, line + 227);
+                            } else {
+                              doc.setDrawColor(0);
+                              doc.setFillColor("#CCCCCC");
+                              doc.roundedRect(left, line + 215, 5, 5, 1, 1, "F");
+                              doc.setTextColor("#CCCCCC");
+                              doc.setFont("Helvetica", "normal", "normal");
+                              doc.text(dataConvertedSafety[i], left + 7, line + 220);
+                              doc.setFont("Helvetica", "normal", "bold");
+                              doc.text("0.00%", left, line + 227);
+                            }
+
+                            left = left + dataConvertedSafety[i].length * 3 + 15;
+                          }
                         });
                       });
                     }
@@ -28482,7 +28531,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                   if (!!chartConferecePDF) {
                     var _selectedToPDF4;
 
-                    var line = 80;
+                    var line = 70;
                     var left = 20;
                     if (selectedToPDF.indexOf(chartConferecePDF) != 0 && ((_selectedToPDF4 = selectedToPDF[selectedToPDF.indexOf(chartConferecePDF) - 1]) === null || _selectedToPDF4 === void 0 ? void 0 : _selectedToPDF4.id) != null) doc.addPage();
                     return Promise.resolve(createImageHeader()).then(function () {
@@ -28497,87 +28546,87 @@ var DashboardToPDF = function DashboardToPDF(props) {
                           var _chartConference$over;
 
                           if (chartConference.overviewQuestionChoice[i].resultQuestion[0].questionId != 0 || chartConference.overviewQuestionChoice[i].resultQuestion[0].questionText != "") {
-                            var _sortedResultQuestion10, _sortedResultQuestion11, _sortedResultQuestion12, _sortedResultQuestion13, _sortedResultQuestion14, _sortedResultQuestion15;
+                            var _sortedResultQuestion4, _sortedResultQuestion5, _sortedResultQuestion6, _sortedResultQuestion7, _sortedResultQuestion8, _sortedResultQuestion9, _chartConference$over2;
 
                             var sortedResultQuestions = chartConference.overviewQuestionChoice[i].resultQuestion.sort(function (a, b) {
                               return a.avgOfStudentChoice < b.avgOfStudentChoice ? 1 : -1;
                             });
-                            var resultQuestion1 = ((_sortedResultQuestion10 = sortedResultQuestions[0]) === null || _sortedResultQuestion10 === void 0 ? void 0 : _sortedResultQuestion10.questionText) || "";
-                            var resultQuestion2 = ((_sortedResultQuestion11 = sortedResultQuestions[1]) === null || _sortedResultQuestion11 === void 0 ? void 0 : _sortedResultQuestion11.questionText) || "";
-                            var resultQuestion3 = ((_sortedResultQuestion12 = sortedResultQuestions[2]) === null || _sortedResultQuestion12 === void 0 ? void 0 : _sortedResultQuestion12.questionText) || "";
-                            var resultQuestion4 = ((_sortedResultQuestion13 = sortedResultQuestions[3]) === null || _sortedResultQuestion13 === void 0 ? void 0 : _sortedResultQuestion13.questionText) || "";
-                            var resultQuestion5 = ((_sortedResultQuestion14 = sortedResultQuestions[4]) === null || _sortedResultQuestion14 === void 0 ? void 0 : _sortedResultQuestion14.questionText) || "";
-                            var resultQuestion6 = ((_sortedResultQuestion15 = sortedResultQuestions[5]) === null || _sortedResultQuestion15 === void 0 ? void 0 : _sortedResultQuestion15.questionText) || "";
+                            var resultQuestion1 = ((_sortedResultQuestion4 = sortedResultQuestions[0]) === null || _sortedResultQuestion4 === void 0 ? void 0 : _sortedResultQuestion4.questionText) || "";
+                            var resultQuestion2 = ((_sortedResultQuestion5 = sortedResultQuestions[1]) === null || _sortedResultQuestion5 === void 0 ? void 0 : _sortedResultQuestion5.questionText) || "";
+                            var resultQuestion3 = ((_sortedResultQuestion6 = sortedResultQuestions[2]) === null || _sortedResultQuestion6 === void 0 ? void 0 : _sortedResultQuestion6.questionText) || "";
+                            var resultQuestion4 = ((_sortedResultQuestion7 = sortedResultQuestions[3]) === null || _sortedResultQuestion7 === void 0 ? void 0 : _sortedResultQuestion7.questionText) || "";
+                            var resultQuestion5 = ((_sortedResultQuestion8 = sortedResultQuestions[4]) === null || _sortedResultQuestion8 === void 0 ? void 0 : _sortedResultQuestion8.questionText) || "";
+                            var resultQuestion6 = ((_sortedResultQuestion9 = sortedResultQuestions[5]) === null || _sortedResultQuestion9 === void 0 ? void 0 : _sortedResultQuestion9.questionText) || "";
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(chartConference.overviewQuestionChoice[i].month, left, line + 20);
 
                             if (resultQuestion1 != "") {
-                              var _sortedResultQuestion16;
+                              var _sortedResultQuestion10;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion1, left + 10, line + 30);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion16 = sortedResultQuestions[0]) === null || _sortedResultQuestion16 === void 0 ? void 0 : _sortedResultQuestion16.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 17, line + 30);
+                              doc.text(((_sortedResultQuestion10 = sortedResultQuestions[0]) === null || _sortedResultQuestion10 === void 0 ? void 0 : _sortedResultQuestion10.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 17, line + 30);
                               doc.setDrawColor(0);
                               doc.setFillColor(64, 210, 204);
                               doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion2 != "") {
-                              var _sortedResultQuestion17;
+                              var _sortedResultQuestion11;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion2, left + 10, line + 40);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion17 = sortedResultQuestions[1]) === null || _sortedResultQuestion17 === void 0 ? void 0 : _sortedResultQuestion17.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 17, line + 40);
+                              doc.text(((_sortedResultQuestion11 = sortedResultQuestions[1]) === null || _sortedResultQuestion11 === void 0 ? void 0 : _sortedResultQuestion11.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 17, line + 40);
                               doc.setDrawColor(0);
                               doc.setFillColor(120, 182, 226);
                               doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion3 != "") {
-                              var _sortedResultQuestion18;
+                              var _sortedResultQuestion12;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion3, left + 10, line + 50);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion18 = sortedResultQuestions[2]) === null || _sortedResultQuestion18 === void 0 ? void 0 : _sortedResultQuestion18.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 17, line + 50);
+                              doc.text(((_sortedResultQuestion12 = sortedResultQuestions[2]) === null || _sortedResultQuestion12 === void 0 ? void 0 : _sortedResultQuestion12.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 17, line + 50);
                               doc.setDrawColor(0);
                               doc.setFillColor(255, 176, 79);
                               doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion4 != "") {
-                              var _sortedResultQuestion19;
+                              var _sortedResultQuestion13;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion4, left + 10, line + 60);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion19 = sortedResultQuestions[2]) === null || _sortedResultQuestion19 === void 0 ? void 0 : _sortedResultQuestion19.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 17, line + 60);
+                              doc.text(((_sortedResultQuestion13 = sortedResultQuestions[2]) === null || _sortedResultQuestion13 === void 0 ? void 0 : _sortedResultQuestion13.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 17, line + 60);
                               doc.setDrawColor(0);
                               doc.setFillColor(206, 74, 73);
                               doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion5 != "") {
-                              var _sortedResultQuestion20;
+                              var _sortedResultQuestion14;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion5, left + 10, line + 70);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion20 = sortedResultQuestions[2]) === null || _sortedResultQuestion20 === void 0 ? void 0 : _sortedResultQuestion20.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 17, line + 70);
+                              doc.text(((_sortedResultQuestion14 = sortedResultQuestions[2]) === null || _sortedResultQuestion14 === void 0 ? void 0 : _sortedResultQuestion14.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 17, line + 70);
                               doc.setDrawColor(0);
                               doc.setFillColor(27, 183, 177);
                               doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
                             }
 
                             if (resultQuestion6 != "") {
-                              var _sortedResultQuestion21;
+                              var _sortedResultQuestion15;
 
                               doc.setFont("Helvetica", "normal", "bold");
                               doc.text(resultQuestion6, left + 10, line + 80);
                               doc.setFont("Helvetica", "normal", "normal");
-                              doc.text(((_sortedResultQuestion21 = sortedResultQuestions[2]) === null || _sortedResultQuestion21 === void 0 ? void 0 : _sortedResultQuestion21.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 3 + 17, line + 80);
+                              doc.text(((_sortedResultQuestion15 = sortedResultQuestions[2]) === null || _sortedResultQuestion15 === void 0 ? void 0 : _sortedResultQuestion15.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 3 + 17, line + 80);
                               doc.setDrawColor(0);
                               doc.setFillColor(75, 146, 206);
                               doc.roundedRect(left, line + 75, 5, 5, 1, 1, "F");
@@ -28599,14 +28648,60 @@ var DashboardToPDF = function DashboardToPDF(props) {
                               left = left + 100;
                             }
 
-                            if (left + 80 > WIDTH_PAPER) {
+                            if (left + (chartConference === null || chartConference === void 0 ? void 0 : (_chartConference$over2 = chartConference.overviewQuestionChoice[i + 1]) === null || _chartConference$over2 === void 0 ? void 0 : _chartConference$over2.month.length) * 20 > WIDTH_PAPER) {
                               left = 20;
-                              line += 90;
+                              line += 80;
                             }
                           }
                         }
 
-                        doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                        doc.setFont("Helvetica", "normal", "normal");
+                        left = 20;
+
+                        for (var i = 0; i < dataConvertedConference.length; i++) {
+                          if (activeColumnConference[i]) {
+                            doc.setDrawColor(0);
+                            doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                            doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                            doc.setTextColor("#252733");
+                            doc.text(dataConvertedConference[i], left + 7, line + 100);
+                          } else {
+                            doc.setDrawColor(0);
+                            doc.setFillColor("#CCCCCC");
+                            doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                            doc.setTextColor("#CCCCCC");
+                            doc.text(dataConvertedConference[i], left + 7, line + 100);
+                          }
+
+                          left = left + dataConvertedConference[i].length * 3 + 15;
+                        }
+
+                        left = 20;
+                        doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 105, 420, 140);
+
+                        for (var i = 0; i < dataConvertedConference.length; i++) {
+                          if (activeColumnConference[i]) {
+                            doc.setDrawColor(0);
+                            doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                            doc.roundedRect(left, line + 250, 5, 5, 1, 1, "F");
+                            doc.setTextColor("#252733");
+                            doc.setFont("Helvetica", "normal", "normal");
+                            doc.text(dataConvertedConference[i], left + 7, line + 255);
+                            doc.setFont("Helvetica", "normal", "bold");
+                            doc.text(avgConference[i] + "%", left, line + 262);
+                          } else {
+                            doc.setDrawColor(0);
+                            doc.setFillColor("#CCCCCC");
+                            doc.roundedRect(left, line + 250, 5, 5, 1, 1, "F");
+                            doc.setTextColor("#CCCCCC");
+                            doc.setFont("Helvetica", "normal", "normal");
+                            doc.text(dataConvertedConference[i], left + 7, line + 255);
+                            doc.setFont("Helvetica", "normal", "bold");
+                            doc.text("0.00%", left, line + 262);
+                          }
+
+                          left = left + dataConvertedConference[i].length * 3 + 15;
+                        }
                       });
                     });
                   }
@@ -28619,7 +28714,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                 if (!!chartClassReflectionPDF) {
                   var _selectedToPDF5;
 
-                  var line = 80;
+                  var line = 70;
                   var left = 20;
                   if (selectedToPDF.indexOf(chartClassReflectionPDF) != 0 && ((_selectedToPDF5 = selectedToPDF[selectedToPDF.indexOf(chartClassReflectionPDF) - 1]) === null || _selectedToPDF5 === void 0 ? void 0 : _selectedToPDF5.id) != null) doc.addPage();
                   return Promise.resolve(createImageHeader()).then(function () {
@@ -28634,74 +28729,74 @@ var DashboardToPDF = function DashboardToPDF(props) {
                         var _chartClassReflection;
 
                         if (chartClassReflection.overviewQuestionChoice[i].resultQuestion[0].questionId != 0) {
-                          var _sortedResultQuestion22, _sortedResultQuestion23, _sortedResultQuestion24, _sortedResultQuestion25, _sortedResultQuestion26, _sortedResultQuestion27, _sortedResultQuestion28, _sortedResultQuestion29, _sortedResultQuestion30, _sortedResultQuestion31;
+                          var _sortedResultQuestion16, _sortedResultQuestion17, _sortedResultQuestion18, _sortedResultQuestion19, _sortedResultQuestion20, _sortedResultQuestion21, _sortedResultQuestion22, _sortedResultQuestion23, _sortedResultQuestion24, _sortedResultQuestion25, _chartClassReflection2;
 
                           var sortedResultQuestions = chartClassReflection.overviewQuestionChoice[i].resultQuestion.sort(function (a, b) {
                             return a.avgOfStudentChoice < b.avgOfStudentChoice ? 1 : -1;
                           });
-                          var resultQuestion1 = ((_sortedResultQuestion22 = sortedResultQuestions[0]) === null || _sortedResultQuestion22 === void 0 ? void 0 : _sortedResultQuestion22.questionText.slice(3, (_sortedResultQuestion23 = sortedResultQuestions[0]) === null || _sortedResultQuestion23 === void 0 ? void 0 : _sortedResultQuestion23.questionText.indexOf("</p>"))) || "";
-                          var resultQuestion2 = ((_sortedResultQuestion24 = sortedResultQuestions[1]) === null || _sortedResultQuestion24 === void 0 ? void 0 : _sortedResultQuestion24.questionText.slice(3, (_sortedResultQuestion25 = sortedResultQuestions[1]) === null || _sortedResultQuestion25 === void 0 ? void 0 : _sortedResultQuestion25.questionText.indexOf("</p>"))) || "";
-                          var resultQuestion3 = ((_sortedResultQuestion26 = sortedResultQuestions[2]) === null || _sortedResultQuestion26 === void 0 ? void 0 : _sortedResultQuestion26.questionText.slice(3, (_sortedResultQuestion27 = sortedResultQuestions[2]) === null || _sortedResultQuestion27 === void 0 ? void 0 : _sortedResultQuestion27.questionText.indexOf("</p>"))) || "";
-                          var resultQuestion4 = ((_sortedResultQuestion28 = sortedResultQuestions[3]) === null || _sortedResultQuestion28 === void 0 ? void 0 : _sortedResultQuestion28.questionText.slice(3, (_sortedResultQuestion29 = sortedResultQuestions[3]) === null || _sortedResultQuestion29 === void 0 ? void 0 : _sortedResultQuestion29.questionText.indexOf("</p>"))) || "";
-                          var resultQuestion5 = ((_sortedResultQuestion30 = sortedResultQuestions[4]) === null || _sortedResultQuestion30 === void 0 ? void 0 : _sortedResultQuestion30.questionText.slice(3, (_sortedResultQuestion31 = sortedResultQuestions[4]) === null || _sortedResultQuestion31 === void 0 ? void 0 : _sortedResultQuestion31.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion1 = ((_sortedResultQuestion16 = sortedResultQuestions[0]) === null || _sortedResultQuestion16 === void 0 ? void 0 : _sortedResultQuestion16.questionText.slice(3, (_sortedResultQuestion17 = sortedResultQuestions[0]) === null || _sortedResultQuestion17 === void 0 ? void 0 : _sortedResultQuestion17.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion2 = ((_sortedResultQuestion18 = sortedResultQuestions[1]) === null || _sortedResultQuestion18 === void 0 ? void 0 : _sortedResultQuestion18.questionText.slice(3, (_sortedResultQuestion19 = sortedResultQuestions[1]) === null || _sortedResultQuestion19 === void 0 ? void 0 : _sortedResultQuestion19.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion3 = ((_sortedResultQuestion20 = sortedResultQuestions[2]) === null || _sortedResultQuestion20 === void 0 ? void 0 : _sortedResultQuestion20.questionText.slice(3, (_sortedResultQuestion21 = sortedResultQuestions[2]) === null || _sortedResultQuestion21 === void 0 ? void 0 : _sortedResultQuestion21.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion4 = ((_sortedResultQuestion22 = sortedResultQuestions[3]) === null || _sortedResultQuestion22 === void 0 ? void 0 : _sortedResultQuestion22.questionText.slice(3, (_sortedResultQuestion23 = sortedResultQuestions[3]) === null || _sortedResultQuestion23 === void 0 ? void 0 : _sortedResultQuestion23.questionText.indexOf("</p>"))) || "";
+                          var resultQuestion5 = ((_sortedResultQuestion24 = sortedResultQuestions[4]) === null || _sortedResultQuestion24 === void 0 ? void 0 : _sortedResultQuestion24.questionText.slice(3, (_sortedResultQuestion25 = sortedResultQuestions[4]) === null || _sortedResultQuestion25 === void 0 ? void 0 : _sortedResultQuestion25.questionText.indexOf("</p>"))) || "";
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(chartClassReflection.overviewQuestionChoice[i].month, left, line + 20);
 
                           if (resultQuestion1 != "") {
-                            var _sortedResultQuestion32;
+                            var _sortedResultQuestion26;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion1, left + 10, line + 30);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion32 = sortedResultQuestions[0]) === null || _sortedResultQuestion32 === void 0 ? void 0 : _sortedResultQuestion32.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 15, line + 30);
+                            doc.text(((_sortedResultQuestion26 = sortedResultQuestions[0]) === null || _sortedResultQuestion26 === void 0 ? void 0 : _sortedResultQuestion26.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 15, line + 30);
                             doc.setDrawColor(0);
                             doc.setFillColor(64, 210, 204);
                             doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
                           }
 
                           if (resultQuestion2 != "") {
-                            var _sortedResultQuestion33;
+                            var _sortedResultQuestion27;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion2, left + 10, line + 40);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion33 = sortedResultQuestions[1]) === null || _sortedResultQuestion33 === void 0 ? void 0 : _sortedResultQuestion33.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 15, line + 40);
+                            doc.text(((_sortedResultQuestion27 = sortedResultQuestions[1]) === null || _sortedResultQuestion27 === void 0 ? void 0 : _sortedResultQuestion27.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 15, line + 40);
                             doc.setDrawColor(0);
                             doc.setFillColor(120, 182, 226);
                             doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
                           }
 
                           if (resultQuestion3 != "") {
-                            var _sortedResultQuestion34;
+                            var _sortedResultQuestion28;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion3, left + 10, line + 50);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion34 = sortedResultQuestions[2]) === null || _sortedResultQuestion34 === void 0 ? void 0 : _sortedResultQuestion34.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 15, line + 50);
+                            doc.text(((_sortedResultQuestion28 = sortedResultQuestions[2]) === null || _sortedResultQuestion28 === void 0 ? void 0 : _sortedResultQuestion28.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 15, line + 50);
                             doc.setDrawColor(0);
                             doc.setFillColor(255, 176, 79);
                             doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
                           }
 
                           if (resultQuestion4 != "") {
-                            var _sortedResultQuestion35;
+                            var _sortedResultQuestion29;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion4, left + 10, line + 60);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion35 = sortedResultQuestions[3]) === null || _sortedResultQuestion35 === void 0 ? void 0 : _sortedResultQuestion35.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 15, line + 60);
+                            doc.text(((_sortedResultQuestion29 = sortedResultQuestions[3]) === null || _sortedResultQuestion29 === void 0 ? void 0 : _sortedResultQuestion29.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 15, line + 60);
                             doc.setDrawColor(0);
                             doc.setFillColor(206, 74, 73);
                             doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
                           }
 
                           if (resultQuestion5 != "") {
-                            var _sortedResultQuestion36;
+                            var _sortedResultQuestion30;
 
                             doc.setFont("Helvetica", "normal", "bold");
                             doc.text(resultQuestion5, left + 10, line + 70);
                             doc.setFont("Helvetica", "normal", "normal");
-                            doc.text(((_sortedResultQuestion36 = sortedResultQuestions[4]) === null || _sortedResultQuestion36 === void 0 ? void 0 : _sortedResultQuestion36.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 15, line + 70);
+                            doc.text(((_sortedResultQuestion30 = sortedResultQuestions[4]) === null || _sortedResultQuestion30 === void 0 ? void 0 : _sortedResultQuestion30.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 15, line + 70);
                             doc.setDrawColor(0);
                             doc.setFillColor(27, 183, 177);
                             doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
@@ -28721,14 +28816,64 @@ var DashboardToPDF = function DashboardToPDF(props) {
                             left = left + 80;
                           }
 
-                          if (left + 80 > WIDTH_PAPER) {
+                          console.log({
+                            left: left
+                          });
+
+                          if (left + (chartClassReflection === null || chartClassReflection === void 0 ? void 0 : (_chartClassReflection2 = chartClassReflection.overviewQuestionChoice[i + 1]) === null || _chartClassReflection2 === void 0 ? void 0 : _chartClassReflection2.month.length) * 20 > WIDTH_PAPER) {
                             left = 20;
-                            line += 75;
+                            line += 55;
                           }
                         }
                       }
 
-                      doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                      doc.setFont("Helvetica", "normal", "normal");
+                      left = 20;
+
+                      for (var i = 0; i < dataConvertedClassReflection.length; i++) {
+                        if (activeColumnClassReflection[i]) {
+                          doc.setDrawColor(0);
+                          doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                          doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                          doc.setTextColor("#252733");
+                          doc.text(dataConvertedClassReflection[i], left + 7, line + 100);
+                        } else {
+                          doc.setDrawColor(0);
+                          doc.setFillColor("#CCCCCC");
+                          doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                          doc.setTextColor("#CCCCCC");
+                          doc.text(dataConvertedClassReflection[i], left + 7, line + 100);
+                        }
+
+                        left = left + dataConvertedClassReflection[i].length * 3 + 15;
+                      }
+
+                      left = 20;
+                      doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 105, 420, 140);
+
+                      for (var i = 0; i < dataConvertedClassReflection.length; i++) {
+                        if (activeColumnClassReflection[i]) {
+                          doc.setDrawColor(0);
+                          doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                          doc.roundedRect(left, line + 250, 5, 5, 1, 1, "F");
+                          doc.setTextColor("#252733");
+                          doc.setFont("Helvetica", "normal", "normal");
+                          doc.text(dataConvertedClassReflection[i], left + 7, line + 255);
+                          doc.setFont("Helvetica", "normal", "bold");
+                          doc.text(avgClassReflection[i] + "%", left, line + 262);
+                        } else {
+                          doc.setDrawColor(0);
+                          doc.setFillColor("#CCCCCC");
+                          doc.roundedRect(left, line + 250, 5, 5, 1, 1, "F");
+                          doc.setTextColor("#CCCCCC");
+                          doc.setFont("Helvetica", "normal", "normal");
+                          doc.text(dataConvertedClassReflection[i], left + 7, line + 255);
+                          doc.setFont("Helvetica", "normal", "bold");
+                          doc.text("0.00%", left, line + 262);
+                        }
+
+                        left = left + dataConvertedClassReflection[i].length * 3 + 15;
+                      }
                     });
                   });
                 }
@@ -28741,7 +28886,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
               if (!!chartOneToOne) {
                 var _selectedToPDF6;
 
-                var line = 80;
+                var line = 70;
                 var left = 20;
                 if (selectedToPDF.indexOf(chartOneToOne) != 0 && ((_selectedToPDF6 = selectedToPDF[selectedToPDF.indexOf(chartOneToOne) - 1]) === null || _selectedToPDF6 === void 0 ? void 0 : _selectedToPDF6.id) != null) doc.addPage();
                 return Promise.resolve(createImageHeader()).then(function () {
@@ -28756,126 +28901,126 @@ var DashboardToPDF = function DashboardToPDF(props) {
                       var _chartOneToOneData$ov;
 
                       if (chartOneToOneData.overviewQuestionChoice[i].resultQuestion[0].questionId != 0) {
-                        var _sortedResultQuestion37, _sortedResultQuestion38, _sortedResultQuestion39, _sortedResultQuestion40, _sortedResultQuestion41, _sortedResultQuestion42, _sortedResultQuestion43, _sortedResultQuestion44, _sortedResultQuestion45, _sortedResultQuestion46, _sortedResultQuestion47, _sortedResultQuestion48, _sortedResultQuestion49, _sortedResultQuestion50, _sortedResultQuestion51, _sortedResultQuestion52, _sortedResultQuestion53, _sortedResultQuestion54;
+                        var _sortedResultQuestion31, _sortedResultQuestion32, _sortedResultQuestion33, _sortedResultQuestion34, _sortedResultQuestion35, _sortedResultQuestion36, _sortedResultQuestion37, _sortedResultQuestion38, _sortedResultQuestion39, _sortedResultQuestion40, _sortedResultQuestion41, _sortedResultQuestion42, _sortedResultQuestion43, _sortedResultQuestion44, _sortedResultQuestion45, _sortedResultQuestion46, _sortedResultQuestion47, _sortedResultQuestion48, _chartOneToOneData$ov2;
 
                         var sortedResultQuestions = chartOneToOneData.overviewQuestionChoice[i].resultQuestion.sort(function (a, b) {
                           return a.avgOfStudentChoice < b.avgOfStudentChoice ? 1 : -1;
                         });
-                        var resultQuestion1 = ((_sortedResultQuestion37 = sortedResultQuestions[0]) === null || _sortedResultQuestion37 === void 0 ? void 0 : _sortedResultQuestion37.questionText.slice(3, (_sortedResultQuestion38 = sortedResultQuestions[0]) === null || _sortedResultQuestion38 === void 0 ? void 0 : _sortedResultQuestion38.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion2 = ((_sortedResultQuestion39 = sortedResultQuestions[1]) === null || _sortedResultQuestion39 === void 0 ? void 0 : _sortedResultQuestion39.questionText.slice(3, (_sortedResultQuestion40 = sortedResultQuestions[1]) === null || _sortedResultQuestion40 === void 0 ? void 0 : _sortedResultQuestion40.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion3 = ((_sortedResultQuestion41 = sortedResultQuestions[2]) === null || _sortedResultQuestion41 === void 0 ? void 0 : _sortedResultQuestion41.questionText.slice(3, (_sortedResultQuestion42 = sortedResultQuestions[2]) === null || _sortedResultQuestion42 === void 0 ? void 0 : _sortedResultQuestion42.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion4 = ((_sortedResultQuestion43 = sortedResultQuestions[3]) === null || _sortedResultQuestion43 === void 0 ? void 0 : _sortedResultQuestion43.questionText.slice(3, (_sortedResultQuestion44 = sortedResultQuestions[3]) === null || _sortedResultQuestion44 === void 0 ? void 0 : _sortedResultQuestion44.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion5 = ((_sortedResultQuestion45 = sortedResultQuestions[4]) === null || _sortedResultQuestion45 === void 0 ? void 0 : _sortedResultQuestion45.questionText.slice(3, (_sortedResultQuestion46 = sortedResultQuestions[4]) === null || _sortedResultQuestion46 === void 0 ? void 0 : _sortedResultQuestion46.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion6 = ((_sortedResultQuestion47 = sortedResultQuestions[5]) === null || _sortedResultQuestion47 === void 0 ? void 0 : _sortedResultQuestion47.questionText.slice(3, (_sortedResultQuestion48 = sortedResultQuestions[5]) === null || _sortedResultQuestion48 === void 0 ? void 0 : _sortedResultQuestion48.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion7 = ((_sortedResultQuestion49 = sortedResultQuestions[6]) === null || _sortedResultQuestion49 === void 0 ? void 0 : _sortedResultQuestion49.questionText.slice(3, (_sortedResultQuestion50 = sortedResultQuestions[6]) === null || _sortedResultQuestion50 === void 0 ? void 0 : _sortedResultQuestion50.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion8 = ((_sortedResultQuestion51 = sortedResultQuestions[7]) === null || _sortedResultQuestion51 === void 0 ? void 0 : _sortedResultQuestion51.questionText.slice(3, (_sortedResultQuestion52 = sortedResultQuestions[7]) === null || _sortedResultQuestion52 === void 0 ? void 0 : _sortedResultQuestion52.questionText.indexOf("</p>"))) || "";
-                        var resultQuestion9 = ((_sortedResultQuestion53 = sortedResultQuestions[8]) === null || _sortedResultQuestion53 === void 0 ? void 0 : _sortedResultQuestion53.questionText.slice(3, (_sortedResultQuestion54 = sortedResultQuestions[8]) === null || _sortedResultQuestion54 === void 0 ? void 0 : _sortedResultQuestion54.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion1 = ((_sortedResultQuestion31 = sortedResultQuestions[0]) === null || _sortedResultQuestion31 === void 0 ? void 0 : _sortedResultQuestion31.questionText.slice(3, (_sortedResultQuestion32 = sortedResultQuestions[0]) === null || _sortedResultQuestion32 === void 0 ? void 0 : _sortedResultQuestion32.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion2 = ((_sortedResultQuestion33 = sortedResultQuestions[1]) === null || _sortedResultQuestion33 === void 0 ? void 0 : _sortedResultQuestion33.questionText.slice(3, (_sortedResultQuestion34 = sortedResultQuestions[1]) === null || _sortedResultQuestion34 === void 0 ? void 0 : _sortedResultQuestion34.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion3 = ((_sortedResultQuestion35 = sortedResultQuestions[2]) === null || _sortedResultQuestion35 === void 0 ? void 0 : _sortedResultQuestion35.questionText.slice(3, (_sortedResultQuestion36 = sortedResultQuestions[2]) === null || _sortedResultQuestion36 === void 0 ? void 0 : _sortedResultQuestion36.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion4 = ((_sortedResultQuestion37 = sortedResultQuestions[3]) === null || _sortedResultQuestion37 === void 0 ? void 0 : _sortedResultQuestion37.questionText.slice(3, (_sortedResultQuestion38 = sortedResultQuestions[3]) === null || _sortedResultQuestion38 === void 0 ? void 0 : _sortedResultQuestion38.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion5 = ((_sortedResultQuestion39 = sortedResultQuestions[4]) === null || _sortedResultQuestion39 === void 0 ? void 0 : _sortedResultQuestion39.questionText.slice(3, (_sortedResultQuestion40 = sortedResultQuestions[4]) === null || _sortedResultQuestion40 === void 0 ? void 0 : _sortedResultQuestion40.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion6 = ((_sortedResultQuestion41 = sortedResultQuestions[5]) === null || _sortedResultQuestion41 === void 0 ? void 0 : _sortedResultQuestion41.questionText.slice(3, (_sortedResultQuestion42 = sortedResultQuestions[5]) === null || _sortedResultQuestion42 === void 0 ? void 0 : _sortedResultQuestion42.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion7 = ((_sortedResultQuestion43 = sortedResultQuestions[6]) === null || _sortedResultQuestion43 === void 0 ? void 0 : _sortedResultQuestion43.questionText.slice(3, (_sortedResultQuestion44 = sortedResultQuestions[6]) === null || _sortedResultQuestion44 === void 0 ? void 0 : _sortedResultQuestion44.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion8 = ((_sortedResultQuestion45 = sortedResultQuestions[7]) === null || _sortedResultQuestion45 === void 0 ? void 0 : _sortedResultQuestion45.questionText.slice(3, (_sortedResultQuestion46 = sortedResultQuestions[7]) === null || _sortedResultQuestion46 === void 0 ? void 0 : _sortedResultQuestion46.questionText.indexOf("</p>"))) || "";
+                        var resultQuestion9 = ((_sortedResultQuestion47 = sortedResultQuestions[8]) === null || _sortedResultQuestion47 === void 0 ? void 0 : _sortedResultQuestion47.questionText.slice(3, (_sortedResultQuestion48 = sortedResultQuestions[8]) === null || _sortedResultQuestion48 === void 0 ? void 0 : _sortedResultQuestion48.questionText.indexOf("</p>"))) || "";
                         doc.setFont("Helvetica", "normal", "bold");
                         doc.text(chartOneToOneData.overviewQuestionChoice[i].month, left, line + 20);
 
                         if (resultQuestion1 != "") {
-                          var _sortedResultQuestion55;
+                          var _sortedResultQuestion49;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion1, left + 10, line + 30);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion55 = sortedResultQuestions[0]) === null || _sortedResultQuestion55 === void 0 ? void 0 : _sortedResultQuestion55.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 17, line + 30);
+                          doc.text(((_sortedResultQuestion49 = sortedResultQuestions[0]) === null || _sortedResultQuestion49 === void 0 ? void 0 : _sortedResultQuestion49.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 3 + 17, line + 30);
                           doc.setDrawColor(0);
                           doc.setFillColor(64, 210, 204);
                           doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion2 != "") {
-                          var _sortedResultQuestion56;
+                          var _sortedResultQuestion50;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion2, left + 10, line + 40);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion56 = sortedResultQuestions[1]) === null || _sortedResultQuestion56 === void 0 ? void 0 : _sortedResultQuestion56.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 17, line + 40);
+                          doc.text(((_sortedResultQuestion50 = sortedResultQuestions[1]) === null || _sortedResultQuestion50 === void 0 ? void 0 : _sortedResultQuestion50.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 3 + 17, line + 40);
                           doc.setDrawColor(0);
                           doc.setFillColor(120, 182, 226);
                           doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion3 != "") {
-                          var _sortedResultQuestion57;
+                          var _sortedResultQuestion51;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion3, left + 10, line + 50);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion57 = sortedResultQuestions[2]) === null || _sortedResultQuestion57 === void 0 ? void 0 : _sortedResultQuestion57.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 17, line + 50);
+                          doc.text(((_sortedResultQuestion51 = sortedResultQuestions[2]) === null || _sortedResultQuestion51 === void 0 ? void 0 : _sortedResultQuestion51.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 3 + 17, line + 50);
                           doc.setDrawColor(0);
                           doc.setFillColor(255, 176, 79);
                           doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion4 != "") {
-                          var _sortedResultQuestion58;
+                          var _sortedResultQuestion52;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion4, left + 10, line + 60);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion58 = sortedResultQuestions[3]) === null || _sortedResultQuestion58 === void 0 ? void 0 : _sortedResultQuestion58.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 17, line + 60);
+                          doc.text(((_sortedResultQuestion52 = sortedResultQuestions[3]) === null || _sortedResultQuestion52 === void 0 ? void 0 : _sortedResultQuestion52.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 3 + 17, line + 60);
                           doc.setDrawColor(0);
                           doc.setFillColor(206, 74, 73);
                           doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion5 != "") {
-                          var _sortedResultQuestion59;
+                          var _sortedResultQuestion53;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion5, left + 10, line + 70);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion59 = sortedResultQuestions[4]) === null || _sortedResultQuestion59 === void 0 ? void 0 : _sortedResultQuestion59.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 17, line + 70);
+                          doc.text(((_sortedResultQuestion53 = sortedResultQuestions[4]) === null || _sortedResultQuestion53 === void 0 ? void 0 : _sortedResultQuestion53.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 3 + 17, line + 70);
                           doc.setDrawColor(0);
                           doc.setFillColor(27, 183, 177);
                           doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion6 != "") {
-                          var _sortedResultQuestion60;
+                          var _sortedResultQuestion54;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion6, left + 10, line + 80);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion60 = sortedResultQuestions[5]) === null || _sortedResultQuestion60 === void 0 ? void 0 : _sortedResultQuestion60.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 3 + 17, line + 80);
+                          doc.text(((_sortedResultQuestion54 = sortedResultQuestions[5]) === null || _sortedResultQuestion54 === void 0 ? void 0 : _sortedResultQuestion54.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 3 + 17, line + 80);
                           doc.setDrawColor(0);
                           doc.setFillColor(75, 146, 206);
                           doc.roundedRect(left, line + 75, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion7 != "") {
-                          var _sortedResultQuestion61;
+                          var _sortedResultQuestion55;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion7, left + 10, line + 90);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion61 = sortedResultQuestions[6]) === null || _sortedResultQuestion61 === void 0 ? void 0 : _sortedResultQuestion61.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion7 === null || resultQuestion7 === void 0 ? void 0 : resultQuestion7.length) * 3 + 17, line + 90);
+                          doc.text(((_sortedResultQuestion55 = sortedResultQuestions[6]) === null || _sortedResultQuestion55 === void 0 ? void 0 : _sortedResultQuestion55.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion7 === null || resultQuestion7 === void 0 ? void 0 : resultQuestion7.length) * 3 + 17, line + 90);
                           doc.setDrawColor(0);
                           doc.setFillColor(240, 148, 34);
                           doc.roundedRect(left, line + 85, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion8 != "") {
-                          var _sortedResultQuestion62;
+                          var _sortedResultQuestion56;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion8, left + 10, line + 100);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion62 = sortedResultQuestions[7]) === null || _sortedResultQuestion62 === void 0 ? void 0 : _sortedResultQuestion62.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion8 === null || resultQuestion8 === void 0 ? void 0 : resultQuestion8.length) * 3 + 17, line + 100);
+                          doc.text(((_sortedResultQuestion56 = sortedResultQuestions[7]) === null || _sortedResultQuestion56 === void 0 ? void 0 : _sortedResultQuestion56.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion8 === null || resultQuestion8 === void 0 ? void 0 : resultQuestion8.length) * 3 + 17, line + 100);
                           doc.setDrawColor(0);
                           doc.setFillColor(162, 51, 51);
                           doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
                         }
 
                         if (resultQuestion9 != "") {
-                          var _sortedResultQuestion63;
+                          var _sortedResultQuestion57;
 
                           doc.setFont("Helvetica", "normal", "bold");
                           doc.text(resultQuestion9, left + 10, line + 110);
                           doc.setFont("Helvetica", "normal", "normal");
-                          doc.text(((_sortedResultQuestion63 = sortedResultQuestions[8]) === null || _sortedResultQuestion63 === void 0 ? void 0 : _sortedResultQuestion63.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion9 === null || resultQuestion9 === void 0 ? void 0 : resultQuestion9.length) * 3 + 17, line + 110);
+                          doc.text(((_sortedResultQuestion57 = sortedResultQuestions[8]) === null || _sortedResultQuestion57 === void 0 ? void 0 : _sortedResultQuestion57.avgOfStudentChoice.toFixed(1)) + "%", left + (resultQuestion9 === null || resultQuestion9 === void 0 ? void 0 : resultQuestion9.length) * 3 + 17, line + 110);
                           doc.setDrawColor(0);
                           doc.setFillColor(11, 153, 148);
                           doc.roundedRect(left, line + 105, 5, 5, 1, 1, "F");
@@ -28883,14 +29028,60 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
                         left = left + 100;
 
-                        if (left + 80 > WIDTH_PAPER) {
+                        if (left + (chartOneToOneData === null || chartOneToOneData === void 0 ? void 0 : (_chartOneToOneData$ov2 = chartOneToOneData.overviewQuestionChoice[i + 1]) === null || _chartOneToOneData$ov2 === void 0 ? void 0 : _chartOneToOneData$ov2.month.length) * 10 > WIDTH_PAPER) {
                           left = 20;
                           line += 110;
                         }
                       }
                     }
 
-                    doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 120, 420, 170);
+                    doc.setFont("Helvetica", "normal", "normal");
+                    left = 20;
+
+                    for (var i = 0; i < dataConvertedOneToOne.length; i++) {
+                      if (activeColumnOneToOne[i]) {
+                        doc.setDrawColor(0);
+                        doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                        doc.roundedRect(left, line + 130, 5, 5, 1, 1, "F");
+                        doc.setTextColor("#252733");
+                        doc.text(dataConvertedOneToOne[i], left + 7, line + 135);
+                      } else {
+                        doc.setDrawColor(0);
+                        doc.setFillColor("#CCCCCC");
+                        doc.roundedRect(left, line + 130, 5, 5, 1, 1, "F");
+                        doc.setTextColor("#CCCCCC");
+                        doc.text(dataConvertedOneToOne[i], left + 7, line + 135);
+                      }
+
+                      left = left + dataConvertedOneToOne[i].length * 3 + 15;
+                    }
+
+                    left = 20;
+                    doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 140, 420, 170);
+
+                    for (var i = 0; i < dataConvertedOneToOne.length; i++) {
+                      if (activeColumnOneToOne[i]) {
+                        doc.setDrawColor(0);
+                        doc.setFillColor(COLOR_CHART_AND_PERCENTS[i]);
+                        doc.roundedRect(left, line + 315, 5, 5, 1, 1, "F");
+                        doc.setTextColor("#252733");
+                        doc.setFont("Helvetica", "normal", "normal");
+                        doc.text(dataConvertedOneToOne[i], left + 7, line + 320);
+                        doc.setFont("Helvetica", "normal", "bold");
+                        doc.text(avgOneToOne[i] + "%", left, line + 327);
+                      } else {
+                        doc.setDrawColor(0);
+                        doc.setFillColor("#CCCCCC");
+                        doc.roundedRect(left, line + 315, 5, 5, 1, 1, "F");
+                        doc.setTextColor("#CCCCCC");
+                        doc.setFont("Helvetica", "normal", "normal");
+                        doc.text(dataConvertedOneToOne[i], left + 7, line + 320);
+                        doc.setFont("Helvetica", "normal", "bold");
+                        doc.text("0.00%", left, line + 327);
+                      }
+
+                      left = left + dataConvertedOneToOne[i].length * 3 + 15;
+                    }
                   });
                 });
               }
@@ -28903,7 +29094,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
             if (!!chartReadinessToLearn) {
               var _selectedToPDF7;
 
-              var line = 80;
+              var line = 70;
               var left = 20;
               if (selectedToPDF.indexOf(chartReadinessToLearn) != 0 && ((_selectedToPDF7 = selectedToPDF[selectedToPDF.indexOf(chartReadinessToLearn) - 1]) === null || _selectedToPDF7 === void 0 ? void 0 : _selectedToPDF7.id) != null) doc.addPage();
               return Promise.resolve(createImageHeader()).then(function () {
@@ -28932,7 +29123,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
           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, 100, 30);
+              doc.addImage(imageLogoCanvas.toDataURL("image/png", 1.0), "png", 20, 20, 90, 25);
             });
           } catch (e) {
             return Promise.reject(e);
@@ -28944,7 +29135,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
 
         var _temp15 = function () {
           if (!!chartHightImpactLearningStrategie) {
-            var line = 80;
+            var line = 70;
             var left = 20;
             if (selectedToPDF.indexOf(chartHightImpactLearningStrategie) != 0 && selectedToPDF[selectedToPDF.indexOf(chartHightImpactLearningStrategie) - 1].id != null) doc.addPage();
             return Promise.resolve(createImageHeader()).then(function () {
@@ -28970,7 +29161,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
                     doc.text(topLearningStrategies.learningStrategies[j].learningStrategyName, left, line + 20);
                     doc.setFont("Helvetica", "normal", "normal");
                     doc.text("Usage count: " + topLearningStrategies.learningStrategies[j].usageCount || "0", left, line + 30);
-                    doc.text("Usage point: " + avgSumUsagePoint, left, line + 40);
+                    doc.text("Usage point: " + avgSumUsagePoint.toFixed(2), left, line + 40);
                     left = left + (((_topLearningStrategie4 = topLearningStrategies.learningStrategies[j].learningStrategyName) === null || _topLearningStrategie4 === void 0 ? void 0 : _topLearningStrategie4.length) * 4 > 45 ? ((_topLearningStrategie5 = topLearningStrategies.learningStrategies[j].learningStrategyName) === null || _topLearningStrategie5 === void 0 ? void 0 : _topLearningStrategie5.length) * 4 : 60) + 15;
 
                     if (left + ((_topLearningStrategie6 = topLearningStrategies.learningStrategies[j + 1]) === null || _topLearningStrategie6 === void 0 ? void 0 : (_topLearningStrategie7 = _topLearningStrategie6.learningStrategyName) === null || _topLearningStrategie7 === void 0 ? void 0 : _topLearningStrategie7.length) * 5 + 15 > WIDTH_PAPER) {
@@ -29014,25 +29205,25 @@ var DashboardToPDF = function DashboardToPDF(props) {
     id: chartOneToOne.id
   }, chartOneToOne.children(typeChartList[initialData.map(function (i) {
     return i.id;
-  }).indexOf(chartOneToOne === null || chartOneToOne === void 0 ? void 0 : chartOneToOne.id)]))), !!chartClassReflectionPDF && React.createElement("div", {
+  }).indexOf(chartOneToOne === null || chartOneToOne === void 0 ? void 0 : chartOneToOne.id)], true))), !!chartClassReflectionPDF && React.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React.createElement("div", {
     id: chartClassReflectionPDF.id
   }, chartClassReflectionPDF.children(typeChartList[initialData.map(function (i) {
     return i.id;
-  }).indexOf(chartClassReflectionPDF === null || chartClassReflectionPDF === void 0 ? void 0 : chartClassReflectionPDF.id)]))), !!chartConferecePDF && React.createElement("div", {
+  }).indexOf(chartClassReflectionPDF === null || chartClassReflectionPDF === void 0 ? void 0 : chartClassReflectionPDF.id)], true))), !!chartConferecePDF && React.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React.createElement("div", {
     id: chartConferecePDF.id
   }, chartConferecePDF.children(typeChartList[initialData.map(function (i) {
     return i.id;
-  }).indexOf(chartConferecePDF === null || chartConferecePDF === void 0 ? void 0 : chartConferecePDF.id)]))), !!chartSafety && React.createElement("div", {
+  }).indexOf(chartConferecePDF === null || chartConferecePDF === void 0 ? void 0 : chartConferecePDF.id)], true))), !!chartSafety && React.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React.createElement("div", {
     id: chartSafety.id
   }, chartSafety.children(typeChartList[initialData.map(function (i) {
     return i.id;
-  }).indexOf(chartSafety === null || chartSafety === void 0 ? void 0 : chartSafety.id)]))), !!chartStudentByAge && React.createElement("div", {
+  }).indexOf(chartSafety === null || chartSafety === void 0 ? void 0 : chartSafety.id)], true))), !!chartStudentByAge && React.createElement("div", {
     className: "" + styles$1["chart-to-canvas"]
   }, React.createElement("div", {
     id: chartStudentByAge.id
@@ -29072,7 +29263,19 @@ var Dashboard = function Dashboard() {
       topLearningStrategies = _useChartDatas.topLearningStrategies,
       chartClassReflection = _useChartDatas.chartClassReflection,
       chartConference = _useChartDatas.chartConference,
-      safety = _useChartDatas.safety;
+      safety = _useChartDatas.safety,
+      dataConvertedOneToOne = _useChartDatas.dataConvertedOneToOne,
+      activeColumnOneToOne = _useChartDatas.activeColumnOneToOne,
+      avgOneToOne = _useChartDatas.avgOneToOne,
+      dataConvertedClassReflection = _useChartDatas.dataConvertedClassReflection,
+      activeColumnClassReflection = _useChartDatas.activeColumnClassReflection,
+      avgClassReflection = _useChartDatas.avgClassReflection,
+      dataConvertedConference = _useChartDatas.dataConvertedConference,
+      activeColumnConference = _useChartDatas.activeColumnConference,
+      avgConference = _useChartDatas.avgConference,
+      dataConvertedSafety = _useChartDatas.dataConvertedSafety,
+      activeColumnSafety = _useChartDatas.activeColumnSafety,
+      avgSafety = _useChartDatas.avgSafety;
 
   var _useBehavior = useBehavior(initialTypeChart),
       chartIsOpened = _useBehavior.chartIsOpened,
@@ -29131,7 +29334,19 @@ var Dashboard = function Dashboard() {
     topLearningStrategies: topLearningStrategies,
     chartClassReflection: chartClassReflection,
     chartConference: chartConference,
-    safety: safety
+    safety: safety,
+    dataConvertedOneToOne: dataConvertedOneToOne,
+    activeColumnOneToOne: activeColumnOneToOne,
+    avgOneToOne: avgOneToOne,
+    dataConvertedClassReflection: dataConvertedClassReflection,
+    activeColumnClassReflection: activeColumnClassReflection,
+    avgClassReflection: avgClassReflection,
+    dataConvertedConference: dataConvertedConference,
+    activeColumnConference: activeColumnConference,
+    avgConference: avgConference,
+    dataConvertedSafety: dataConvertedSafety,
+    activeColumnSafety: activeColumnSafety,
+    avgSafety: avgSafety
   }))), React.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
   }, React.createElement("div", {
@@ -29206,7 +29421,7 @@ var Dashboard = function Dashboard() {
       isShowChangeChart: chartDashBoard.isShowChangeChart,
       typeChart: typeChartList[index],
       onChangeChart: function onChangeChart(type) {
-        return _onChangeChart(index, type);
+        return _onChangeChart(index, type, chartDashBoard === null || chartDashBoard === void 0 ? void 0 : chartDashBoard.options);
       },
       isOpen: chartIsOpened[index],
       options: chartDashBoard.options