mario-education 2.4.27-admin → 2.4.28-admin

package/dist/index.modern.js

@@ -18,6 +18,8 @@ import { FaCheck, FaTimes, FaRegEdit } from 'react-icons/fa';
 import { Editor } from '@tinymce/tinymce-react';
 import Chart from 'react-apexcharts';
 import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
 
 // A type of promise-like that resolves synchronously and supports only one observer
 
@@ -1146,7 +1148,7 @@ var ConferenceRubricList = function ConferenceRubricList() {
   }))));
 };
 
-var styles = {"test":"_3ybTi","body-question-right":"_1H0W8","body-question":"_b-AXV","badge-icon":"_1fgfO","input-color-picker":"_2YR4l","question-list-session-template":"_114IY","delete-column-question-list-sesstion-template":"_qE7J0","conference-rubric-skill-column":"_2BV3o","conference-rubric-additional-row":"_1P4F2","conference-rubric-row-test":"_1SRmg","emotional-response":"_ZDINp","star-rating":"_Kzkzd","list-teacher-compare":"_Q0sF1","teacher-item":"_gu_yD","teacher-item-selected":"_33tYy","btn-filter":"_2VZin","block-filter-component":"_1d6uY","select-filter-component":"_1XSIo","hidden":"_3o8gR","box-select":"_3ru37","radio-btn":"_1tQvL","box-select-label":"_3VNX5"};
+var styles = {"test":"_3ybTi","body-question-right":"_1H0W8","body-question":"_b-AXV","badge-icon":"_1fgfO","input-color-picker":"_2YR4l","question-list-session-template":"_114IY","delete-column-question-list-sesstion-template":"_qE7J0","conference-rubric-skill-column":"_2BV3o","conference-rubric-additional-row":"_1P4F2","conference-rubric-row-test":"_1SRmg","emotional-response":"_ZDINp","star-rating":"_Kzkzd","list-teacher-compare":"_Q0sF1","teacher-item":"_gu_yD","teacher-item-selected":"_33tYy","btn-filter":"_2VZin","color-filter":"_2M0vR","block-filter-component":"_1d6uY","select-filter-component":"_1XSIo","hidden":"_3o8gR","box-select":"_3ru37","radio-btn":"_1tQvL","box-select-label":"_3VNX5"};
 
 var ToggleInput = function ToggleInput(_ref) {
   var value = _ref.value,
@@ -1529,6 +1531,48 @@ function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure undefined");
 }
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it;
+
+  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      return function () {
+        if (i >= o.length) return {
+          done: true
+        };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  it = o[Symbol.iterator]();
+  return it.next.bind(it);
+}
+
 var RubricItemColumnOrder;
 
 (function (RubricItemColumnOrder) {
@@ -19672,7 +19716,7 @@ var TYPECHART;
   TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
 })(TYPECHART || (TYPECHART = {}));
 
-var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","headẻ-chart":"_g5-bn","btn-show-chart":"_2htKu","checkbox-chart":"_1qXAT","column-chart-percent":"_3NgrB","chart-background":"_32fu3","custom-marker":"_DmMzw","mark-custom":"_1eUXn","item-legend":"_3hrrC","label-legend-custom":"_Q-iiW","mark-legend":"_cD4ey","label-chart":"_24PRg","percent":"_2HWhv","listItem":"_2Hdbu","item":"_3RJ2T","student-by-age":"_38ikt","total-student":"_1TnWs","pie-chart":"_3BTJi","options-gender":"_1Ws0m","legend":"_2HnO_","text-lengend":"_2BFJw","student-by-grade":"_2az-l","bubble-chart-custom":"_2j8fp","x-axis-custom-wrap":"_1BN5z","axis-content":"_1rYav","legend-wrap":"_3-zAs","list-percent":"_1PPhv","percent-item":"_1rjWR","chart-custom":"_f-Ti4","chart-buddle":"_TPa6x","title-grade":"_1hZ_V","title-chart":"_pFFg9"};
+var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","label-chart":"_24PRg","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","headẻ-chart":"_g5-bn","btn-show-chart":"_2htKu","checkbox-chart":"_1qXAT","column-chart-percent":"_3NgrB","chart-background":"_32fu3","custom-marker":"_DmMzw","mark-custom":"_1eUXn","item-legend":"_3hrrC","label-legend-custom":"_Q-iiW","mark-legend":"_cD4ey","percent":"_2HWhv","listItem":"_2Hdbu","item":"_3RJ2T","student-by-age":"_38ikt","total-student":"_1TnWs","pie-chart":"_3BTJi","options-gender":"_1Ws0m","legend":"_2HnO_","text-lengend":"_2BFJw","student-by-grade":"_2az-l","bubble-chart-custom":"_2j8fp","x-axis-custom-wrap":"_1BN5z","axis-content":"_1rYav","legend-wrap":"_3-zAs","list-percent":"_1PPhv","percent-item":"_1rjWR","chart-custom":"_f-Ti4","chart-buddle":"_TPa6x","title-grade":"_1hZ_V","title-modal":"_3L9WC","header-desc-modal":"_1TFtP","form-checkbox":"_37aqf","checkbox-content":"_1iabV","btn-export":"_1eQAg","title-chart":"_pFFg9","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b"};
 
 var CheckboxCustom = function CheckboxCustom(_ref) {
   var _ref$background = _ref.background,
@@ -25706,7 +25750,17 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
     },
     colors: ["#86BD74", "#9DD889"],
     xaxis: {
-      categories: labelNames
+      categories: labelNames,
+      labels: {
+        show: true,
+        style: {
+          colors: ["#808080"],
+          fontSize: "14px",
+          fontFamily: "Roboto",
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        }
+      }
     },
     tooltip: {
       x: {
@@ -25732,8 +25786,8 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
         maxWidth: 120,
         style: {
           colors: [],
-          fontSize: "12px",
-          fontFamily: "Helvetica, Arial, sans-serif",
+          fontSize: "14px",
+          fontFamily: "Roboto",
           fontWeight: 400,
           cssClass: "apexcharts-yaxis-label"
         },
@@ -25894,7 +25948,8 @@ var studentByAgeOptions = function studentByAgeOptions(series) {
       position: "top",
       horizontalAlign: "left",
       fontSize: "14px",
-      offsetY: -5
+      offsetY: 0,
+      fontFamily: "Roboto"
     }
   };
 };
@@ -25941,9 +25996,6 @@ var pieChartOptions = {
       }
     }
   },
-  chart: {
-    offsetY: 20
-  },
   dataLabels: {
     enabled: false
   },
@@ -26045,8 +26097,7 @@ var readinesToLearnoptions = function readinesToLearnoptions(seriesName) {
       height: 450,
       toolbar: {
         show: false
-      },
-      offsetY: -20
+      }
     },
     dataLabels: {
       enabled: false
@@ -26131,7 +26182,12 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
       height: 350,
       stacked: false,
       toolbar: {
-        show: false
+        show: false,
+        "export": {
+          png: {
+            filename: "test"
+          }
+        }
       }
     },
     plotOptions: {
@@ -26290,7 +26346,7 @@ var optionLineChart = function optionLineChart(months, activeData) {
     }
   };
 };
-var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
+var optionBarChartAndArea = function optionBarChartAndArea(months, activeData, newseries) {
   return {
     chart: {
       height: 350,
@@ -26301,6 +26357,7 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
     },
     plotOptions: {
       bar: {
+        columnWidth: "50%",
         borderRadius: 5
       }
     },
@@ -26308,18 +26365,30 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
       enabled: false
     },
     fill: {
-      opacity: 0.5
+      opacity: newseries === null || newseries === void 0 ? void 0 : newseries.map(function (item) {
+        if ((item === null || item === void 0 ? void 0 : item.type) == 'area') {
+          return 0.2;
+        }
+
+        return 0.6;
+      })
     },
     colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
       return activeData[index];
     }),
     stroke: {
       curve: "smooth",
-      show: false,
+      show: true,
       colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
         return activeData[index];
       }),
-      width: 3,
+      width: newseries === null || newseries === void 0 ? void 0 : newseries.map(function (item) {
+        if ((item === null || item === void 0 ? void 0 : item.type) == 'area') {
+          return 2;
+        }
+
+        return 0;
+      }),
       dashArray: 0
     },
     xaxis: {
@@ -26556,9 +26625,11 @@ 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),
-    type: "line",
+    options: optionBarChartAndArea(months, activeColumn, newseries),
     series: newseries,
     width: "100%",
     height: 450
@@ -26583,61 +26654,23 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
       _ref$typeChart = _ref.typeChart,
       typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart,
       _ref$isHasLineChart = _ref.isHasLineChart,
-      isHasLineChart = _ref$isHasLineChart === void 0 ? false : _ref$isHasLineChart;
+      isHasLineChart = _ref$isHasLineChart === void 0 ? false : _ref$isHasLineChart,
+      onActiveColumn = _ref.onActiveColumn,
+      activeColumn = _ref.activeColumn,
+      series = _ref.series,
+      avg = _ref.avg,
+      months = _ref.months;
   if (!data) return React.createElement("div", {
     className: "flex justify-content-center align-items-center",
     style: {
       height: 450
     }
   }, React.createElement("div", null, "No Data"));
-
-  var _useState = useState([]),
-      activeColumn = _useState[0],
-      setActiveColumn = _useState[1];
-
-  var _useState2 = useState([]),
-      series = _useState2[0],
-      setSeries = _useState2[1];
-
-  var _useState3 = useState(INITIAL_AVG),
-      avg = _useState3[0],
-      setAvg = _useState3[1];
-
-  var months = data.map(function (i) {
-    return (i === null || i === void 0 ? void 0 : i.month) || "";
-  });
-  var dataCharts = convertDataToDataChart(data);
-  var newSeries = convertToSeriesColumnChartAndPercent(dataCharts, data);
-  var newAvg = convertToAvg(dataCharts, data, months);
-
-  var onActiveColumn = function onActiveColumn(index) {
-    var newActiveColumn = [].concat(activeColumn);
-    newActiveColumn[index] = !newActiveColumn[index];
-    setActiveColumn(newActiveColumn);
-    setSeries(newSeries.filter(function (_, idx) {
-      return newActiveColumn[idx];
-    }));
-    setAvg(newAvg.map(function (_, index) {
-      return newActiveColumn[index] ? newAvg[index] : 0;
-    }));
-  };
-
-  useEffect(function () {
-    if (!!data && data !== null && data !== void 0 && data.length) {
-      setSeries(newSeries);
-      setActiveColumn(dataCharts.map(function (_i) {
-        return true;
-      }));
-      setAvg(newAvg.map(function (_, index) {
-        return newAvg[index];
-      }));
-    }
-  }, [data]);
   return React.createElement("div", {
     className: "w-100 h-100 " + styles$1["column-chart-percent"]
   }, React.createElement("div", {
     className: "w-full d-flex gap-2 flex-wrap " + styles$1["listItem"]
-  }, dataCharts.map(function (column, index) {
+  }, data.map(function (month, index) {
     return React.createElement("div", {
       className: "pr-4 d-flex",
       key: index
@@ -26660,7 +26693,7 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
       onClick: function onClick() {
         return onActiveColumn(index);
       }
-    }, column));
+    }, month));
   })), React.createElement("div", {
     className: "w-100",
     style: {
@@ -26685,7 +26718,7 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
     series: series
   })), React.createElement("div", {
     className: "w-100 d-flex gap-2 flex-wrap  " + styles$1["listItem"]
-  }, dataCharts.map(function (column, index) {
+  }, data.map(function (month, index) {
     return React.createElement("div", {
       className: "" + styles$1["item-legend"],
       key: index
@@ -26698,7 +26731,7 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
       }
     }), React.createElement("label", {
       className: "" + styles$1["label-legend-custom"]
-    }, column)), React.createElement("div", {
+    }, month)), React.createElement("div", {
       className: "" + styles$1["percent"]
     }, React.createElement("label", {
       className: "m-0"
@@ -26799,15 +26832,17 @@ var StudentByAge = function StudentByAge(_ref) {
 
 var StudentByAgeAndGender = function StudentByAgeAndGender(_ref) {
   var studentByAgeData = _ref.studentByAgeData,
-      studentByGenderData = _ref.studentByGenderData;
+      studentByGenderData = _ref.studentByGenderData,
+      columnFlex = _ref.columnFlex;
   return React.createElement(Row, {
-    className: "d-flex"
+    className: "d-flex " + (columnFlex && "flex-column")
   }, React.createElement(Col, {
     md: 6
   }, React.createElement(StudentByAge, {
     data: studentByAgeData
   })), React.createElement(Col, {
-    md: 6
+    md: 6,
+    className: "mt-5"
   }, React.createElement(CustomPieChart, {
     data: studentByGenderData
   })));
@@ -26992,6 +27027,8 @@ var DEFAULT_START_DATE = moment().startOf("year").valueOf();
 var DEFAULT_END_DATE = moment().endOf("day").valueOf();
 
 var useDashboard = function useDashboard() {
+  var _chartConference$over, _safety$overviewQuest;
+
   var dispatch = useDispatch();
 
   var _useState = useState({
@@ -27092,6 +27129,215 @@ var useDashboard = function useDashboard() {
     setFilter(_extends({}, filter, (_extends2 = {}, _extends2[event.target.name] = event.target.value, _extends2)));
   };
 
+  var _useState20 = useState([]),
+      activeColumnOneToOne = _useState20[0],
+      setActiveColumnOneToOne = _useState20[1];
+
+  var _useState21 = useState([]),
+      seriesOneToOne = _useState21[0],
+      setSeriesOneToOne = _useState21[1];
+
+  var _useState22 = useState(INITIAL_AVG),
+      avgOneToOne = _useState22[0],
+      setAvgOneToOne = _useState22[1];
+
+  var monthsOneToOne = chartOneToOneData === null || chartOneToOneData === void 0 ? void 0 : chartOneToOneData.overviewQuestionChoice.map(function (i) {
+    return (i === null || i === void 0 ? void 0 : i.month) || "";
+  });
+  var dataConvertedOneToOne = convertDataToDataChart(chartOneToOneData === null || chartOneToOneData === void 0 ? void 0 : chartOneToOneData.overviewQuestionChoice);
+  var newSeriesOneToOne = convertToSeriesColumnChartAndPercent(dataConvertedOneToOne, chartOneToOneData === null || chartOneToOneData === void 0 ? void 0 : chartOneToOneData.overviewQuestionChoice);
+  var newAvgOneToOne = convertToAvg(dataConvertedOneToOne, chartOneToOneData === null || chartOneToOneData === void 0 ? void 0 : chartOneToOneData.overviewQuestionChoice, monthsOneToOne);
+
+  var handleActiveColumnOneToOne = function handleActiveColumnOneToOne(index) {
+    var newActiveColumn = [].concat(activeColumnOneToOne);
+    newActiveColumn[index] = !newActiveColumn[index];
+    setActiveColumnOneToOne(newActiveColumn);
+    setSeriesOneToOne(newSeriesOneToOne === null || newSeriesOneToOne === void 0 ? void 0 : newSeriesOneToOne.filter(function (_, idx) {
+      return newActiveColumn[idx];
+    }));
+    setAvgOneToOne(newAvgOneToOne === null || newAvgOneToOne === void 0 ? void 0 : newAvgOneToOne.map(function (_, idx) {
+      return newActiveColumn[idx] ? newAvgOneToOne[idx] : 0;
+    }));
+  };
+
+  useEffect(function () {
+    setSeriesOneToOne(newSeriesOneToOne);
+    setActiveColumnOneToOne(dataConvertedOneToOne.map(function (_i) {
+      return true;
+    }));
+    setAvgOneToOne(newAvgOneToOne === null || newAvgOneToOne === void 0 ? void 0 : newAvgOneToOne.map(function (_, index) {
+      return newAvgOneToOne[index];
+    }));
+  }, [chartOneToOneData.overviewQuestionChoice]);
+
+  var _useState23 = useState([]),
+      activeColumnClassReflection = _useState23[0],
+      setActiveColumnClassReflection = _useState23[1];
+
+  var _useState24 = useState([]),
+      seriesClassRefection = _useState24[0],
+      setSeriesClassReflection = _useState24[1];
+
+  var _useState25 = useState(INITIAL_AVG),
+      avgClassReflection = _useState25[0],
+      setAvgClassReflection = _useState25[1];
+
+  var monthsClassReflection = chartClassReflection === null || chartClassReflection === void 0 ? void 0 : chartClassReflection.overviewQuestionChoice.map(function (i) {
+    return (i === null || i === void 0 ? void 0 : i.month) || "";
+  });
+  var dataConvertedClassReflection = convertDataToDataChart(chartClassReflection === null || chartClassReflection === void 0 ? void 0 : chartClassReflection.overviewQuestionChoice);
+  var newSeriesClassReflection = convertToSeriesColumnChartAndPercent(dataConvertedClassReflection, chartClassReflection === null || chartClassReflection === void 0 ? void 0 : chartClassReflection.overviewQuestionChoice);
+  var newAvgClassReflection = convertToAvg(dataConvertedClassReflection, chartClassReflection === null || chartClassReflection === void 0 ? void 0 : chartClassReflection.overviewQuestionChoice, monthsClassReflection);
+
+  var handleActiveColumnClassReflection = function handleActiveColumnClassReflection(index) {
+    var newActiveColumn = [].concat(activeColumnClassReflection);
+    newActiveColumn[index] = !newActiveColumn[index];
+    setActiveColumnClassReflection(newActiveColumn);
+    setSeriesClassReflection(newSeriesClassReflection === null || newSeriesClassReflection === void 0 ? void 0 : newSeriesClassReflection.filter(function (_, idx) {
+      return newActiveColumn[idx];
+    }));
+    setAvgClassReflection(newAvgClassReflection === null || newAvgClassReflection === void 0 ? void 0 : newAvgClassReflection.map(function (_, idx) {
+      return newActiveColumn[idx] ? newAvgOneToOne[idx] : 0;
+    }));
+  };
+
+  useEffect(function () {
+    setSeriesClassReflection(newSeriesClassReflection);
+    setActiveColumnClassReflection(dataConvertedClassReflection.map(function (_i) {
+      return true;
+    }));
+    setAvgClassReflection(newAvgClassReflection === null || newAvgClassReflection === void 0 ? void 0 : newAvgClassReflection.map(function (_, index) {
+      return newAvgClassReflection[index];
+    }));
+  }, [chartClassReflection.overviewQuestionChoice]);
+
+  var _useState26 = useState([]),
+      activeColumnConference = _useState26[0],
+      setActiveColumnConference = _useState26[1];
+
+  var _useState27 = useState([]),
+      seriesConference = _useState27[0],
+      setSeriesConference = _useState27[1];
+
+  var _useState28 = useState(INITIAL_AVG),
+      avgConference = _useState28[0],
+      setAvgConference = _useState28[1];
+
+  var monthsConference = chartConference === null || chartConference === void 0 ? void 0 : (_chartConference$over = chartConference.overviewQuestionChoice) === null || _chartConference$over === void 0 ? void 0 : _chartConference$over.map(function (i) {
+    return (i === null || i === void 0 ? void 0 : i.month) || "";
+  });
+  var dataConvertedConference = convertDataToDataChart(chartConference === null || chartConference === void 0 ? void 0 : chartConference.overviewQuestionChoice);
+  var newSeriesConference = convertToSeriesColumnChartAndPercent(dataConvertedConference, chartConference === null || chartConference === void 0 ? void 0 : chartConference.overviewQuestionChoice);
+  var newAvgConference = convertToAvg(dataConvertedConference, chartConference === null || chartConference === void 0 ? void 0 : chartConference.overviewQuestionChoice, monthsConference);
+
+  var handleActiveColumnConference = function handleActiveColumnConference(index) {
+    var newActiveColumn = [].concat(activeColumnConference);
+    newActiveColumn[index] = !newActiveColumn[index];
+    setActiveColumnConference(newActiveColumn);
+    setSeriesConference(newSeriesConference === null || newSeriesConference === void 0 ? void 0 : newSeriesConference.filter(function (_, idx) {
+      return newActiveColumn[idx];
+    }));
+    setAvgConference(newAvgConference === null || newAvgConference === void 0 ? void 0 : newAvgConference.map(function (_, idx) {
+      return newActiveColumn[idx] ? newAvgConference[idx] : 0;
+    }));
+  };
+
+  useEffect(function () {
+    setSeriesConference(newSeriesConference);
+    setActiveColumnConference(dataConvertedConference === null || dataConvertedConference === void 0 ? void 0 : dataConvertedConference.map(function (_i) {
+      return true;
+    }));
+    setAvgConference(newAvgConference === null || newAvgConference === void 0 ? void 0 : newAvgConference.map(function (_, idx) {
+      return newAvgConference[idx];
+    }));
+  }, [chartConference === null || chartConference === void 0 ? void 0 : chartConference.overviewQuestionChoice]);
+
+  var _useState29 = useState([]),
+      activeColumnSafety = _useState29[0],
+      setActiveColumnSafety = _useState29[1];
+
+  var _useState30 = useState([]),
+      seriesSafety = _useState30[0],
+      setSeriesSafety = _useState30[1];
+
+  var _useState31 = useState(INITIAL_AVG),
+      avgSafety = _useState31[0],
+      setAvgSafety = _useState31[1];
+
+  var monthsSafety = safety === null || safety === void 0 ? void 0 : (_safety$overviewQuest = safety.overviewQuestionChoice) === null || _safety$overviewQuest === void 0 ? void 0 : _safety$overviewQuest.map(function (i) {
+    return (i === null || i === void 0 ? void 0 : i.month) || "";
+  });
+  var dataConvertedSafety = convertDataToDataChart(safety === null || safety === void 0 ? void 0 : safety.overviewQuestionChoice);
+  var newSeriesSafety = convertToSeriesColumnChartAndPercent(dataConvertedSafety, safety === null || safety === void 0 ? void 0 : safety.overviewQuestionChoice);
+  var newAvgSafety = convertToAvg(dataConvertedSafety, safety === null || safety === void 0 ? void 0 : safety.overviewQuestionChoice, monthsSafety);
+
+  var handleActiveColumnSafety = function handleActiveColumnSafety(index) {
+    var newActiveColumn = [].concat(activeColumnSafety);
+    newActiveColumn[index] = !newActiveColumn[index];
+    setActiveColumnSafety(newActiveColumn);
+    setSeriesSafety(newSeriesSafety === null || newSeriesSafety === void 0 ? void 0 : newSeriesSafety.filter(function (_, idx) {
+      return newActiveColumn[idx];
+    }));
+    setAvgSafety(newAvgSafety === null || newAvgSafety === void 0 ? void 0 : newAvgSafety.map(function (_, idx) {
+      return newActiveColumn[idx] ? newAvgSafety[idx] : 0;
+    }));
+  };
+
+  useEffect(function () {
+    setSeriesSafety(newSeriesSafety);
+    setActiveColumnSafety(dataConvertedSafety === null || dataConvertedSafety === void 0 ? void 0 : dataConvertedSafety.map(function (_i) {
+      return true;
+    }));
+    setAvgSafety(newAvgSafety === null || newAvgSafety === void 0 ? void 0 : newAvgSafety.map(function (_, idx) {
+      return newAvgSafety[idx];
+    }));
+  }, [safety === null || safety === void 0 ? void 0 : safety.overviewQuestionChoice]);
+
+  var _useState32 = useState([]),
+      selectedToPrint = _useState32[0],
+      setSelectedToPrint = _useState32[1];
+
+  var handleSelectToPrint = function handleSelectToPrint(checked, data, chartType) {
+    var updateSelectToPrint = [].concat(selectedToPrint);
+    var foundItem = updateSelectToPrint === null || updateSelectToPrint === void 0 ? void 0 : updateSelectToPrint.find(function (e) {
+      return e.identification == data.id;
+    });
+
+    if (checked) {
+      if (!!data.id && !foundItem) {
+        updateSelectToPrint.push({
+          id: data.id,
+          identification: data.id,
+          label: data.label,
+          children: data.children,
+          chartType: chartType
+        });
+      }
+
+      if (!!data && foundItem && foundItem.id == null) {
+        var itemIndex = updateSelectToPrint.indexOf(foundItem);
+        updateSelectToPrint[itemIndex].id = data.id;
+        updateSelectToPrint[itemIndex].children = data.children;
+      }
+    } else {
+      var _itemIndex = updateSelectToPrint.indexOf(foundItem);
+
+      updateSelectToPrint[_itemIndex].id = null;
+      updateSelectToPrint[_itemIndex].children = null;
+    }
+
+    setSelectedToPrint(updateSelectToPrint);
+  };
+
+  var checkSelectedItem = function checkSelectedItem(id) {
+    for (var _iterator = _createForOfIteratorHelperLoose(selectedToPrint), _step; !(_step = _iterator()).done;) {
+      var item = _step.value;
+      if (item.id === id) return true;
+    }
+
+    return false;
+  };
+
   var callApi = useCallback(function (apiCaller, setData, defaultData, type) {
     try {
       var _temp2 = _catch(function () {
@@ -27244,20 +27490,45 @@ var useDashboard = function useDashboard() {
     setGenderOfStudent: setGenderOfStudent,
     handleFilterStudent: handleFilterStudent,
     handleFilterTeacher: handleFilterTeacher,
-    onChangeFilters: onChangeFilters
+    handleSelectToPrint: handleSelectToPrint,
+    checkSelectedItem: checkSelectedItem,
+    selectedToPrint: selectedToPrint,
+    setSelectedToPrint: setSelectedToPrint,
+    onChangeFilters: onChangeFilters,
+    handleActiveColumnOneToOne: handleActiveColumnOneToOne,
+    seriesOneToOne: seriesOneToOne,
+    avgOneToOne: avgOneToOne,
+    dataConvertedOneToOne: dataConvertedOneToOne,
+    monthsOneToOne: monthsOneToOne,
+    activeColumnOneToOne: activeColumnOneToOne,
+    handleActiveColumnClassReflection: handleActiveColumnClassReflection,
+    seriesClassRefection: seriesClassRefection,
+    avgClassReflection: avgClassReflection,
+    dataConvertedClassReflection: dataConvertedClassReflection,
+    monthsClassReflection: monthsClassReflection,
+    activeColumnClassReflection: activeColumnClassReflection,
+    handleActiveColumnConference: handleActiveColumnConference,
+    seriesConference: seriesConference,
+    avgConference: avgConference,
+    dataConvertedConference: dataConvertedConference,
+    monthsConference: monthsConference,
+    activeColumnConference: activeColumnConference,
+    handleActiveColumnSafety: handleActiveColumnSafety,
+    seriesSafety: seriesSafety,
+    avgSafety: avgSafety,
+    dataConvertedSafety: dataConvertedSafety,
+    monthsSafety: monthsSafety,
+    activeColumnSafety: activeColumnSafety
   };
 };
 
 var useChartDatas = function useChartDatas() {
   var _useDashboard = useDashboard(),
       topLearningStrategies = _useDashboard.topLearningStrategies,
-      chartOneToOneData = _useDashboard.chartOneToOneData,
       readinessToLearning = _useDashboard.readinessToLearning,
-      chartClassReflection = _useDashboard.chartClassReflection,
       studentByAge = _useDashboard.studentByAge,
       studentByGender = _useDashboard.studentByGender,
       studentByGrade = _useDashboard.studentByGrade,
-      chartConference = _useDashboard.chartConference,
       handleChangeFilters = _useDashboard.handleChangeFilters,
       bandScore = _useDashboard.bandScore,
       user = _useDashboard.user,
@@ -27265,9 +27536,32 @@ var useChartDatas = function useChartDatas() {
       handleFilterStudent = _useDashboard.handleFilterStudent,
       handleFilterTeacher = _useDashboard.handleFilterTeacher,
       filter = _useDashboard.filter,
-      safety = _useDashboard.safety,
       listTotalTime = _useDashboard.listTotalTime,
-      onChangeFilters = _useDashboard.onChangeFilters;
+      onChangeFilters = _useDashboard.onChangeFilters,
+      handleActiveColumnOneToOne = _useDashboard.handleActiveColumnOneToOne,
+      seriesOneToOne = _useDashboard.seriesOneToOne,
+      avgOneToOne = _useDashboard.avgOneToOne,
+      monthsOneToOne = _useDashboard.monthsOneToOne,
+      dataConvertedOneToOne = _useDashboard.dataConvertedOneToOne,
+      activeColumnOneToOne = _useDashboard.activeColumnOneToOne,
+      handleActiveColumnClassReflection = _useDashboard.handleActiveColumnClassReflection,
+      seriesClassRefection = _useDashboard.seriesClassRefection,
+      avgClassReflection = _useDashboard.avgClassReflection,
+      monthsClassReflection = _useDashboard.monthsClassReflection,
+      dataConvertedClassReflection = _useDashboard.dataConvertedClassReflection,
+      activeColumnClassReflection = _useDashboard.activeColumnClassReflection,
+      handleActiveColumnConference = _useDashboard.handleActiveColumnConference,
+      seriesConference = _useDashboard.seriesConference,
+      avgConference = _useDashboard.avgConference,
+      monthsConference = _useDashboard.monthsConference,
+      dataConvertedConference = _useDashboard.dataConvertedConference,
+      activeColumnConference = _useDashboard.activeColumnConference,
+      handleActiveColumnSafety = _useDashboard.handleActiveColumnSafety,
+      seriesSafety = _useDashboard.seriesSafety,
+      avgSafety = _useDashboard.avgSafety,
+      monthsSafety = _useDashboard.monthsSafety,
+      dataConvertedSafety = _useDashboard.dataConvertedSafety,
+      activeColumnSafety = _useDashboard.activeColumnSafety;
 
   var LIST_FILTERS_LEFT = [{
     name: FILTER_NAME.Calendar,
@@ -27318,7 +27612,7 @@ var useChartDatas = function useChartDatas() {
     isShowChangeChart: false,
     options: []
   }, {
-    id: "Readiness_to_learn",
+    id: "readiness_to_learn",
     label: "Readiness to learn",
     children: function children(_) {
       return React.createElement(BubbleChartCustom$1, {
@@ -27332,9 +27626,14 @@ var useChartDatas = function useChartDatas() {
     label: "1 To 1",
     children: function children(typeChart) {
       return React.createElement(ColumnChartAndPercent$1, {
-        data: chartOneToOneData.overviewQuestionChoice,
+        data: dataConvertedOneToOne,
         id: "1_to_1",
-        typeChart: typeChart
+        typeChart: typeChart,
+        onActiveColumn: handleActiveColumnOneToOne,
+        activeColumn: activeColumnOneToOne,
+        series: seriesOneToOne,
+        avg: avgOneToOne,
+        months: monthsOneToOne
       });
     },
     isShowChangeChart: true,
@@ -27350,10 +27649,15 @@ var useChartDatas = function useChartDatas() {
     label: "Class Reflection",
     children: function children(typeChart) {
       return React.createElement(ColumnChartAndPercent$1, {
-        data: chartClassReflection.overviewQuestionChoice,
+        data: dataConvertedClassReflection,
         typeChart: typeChart,
         id: "class_reflection",
-        isHasLineChart: true
+        isHasLineChart: true,
+        onActiveColumn: handleActiveColumnClassReflection,
+        activeColumn: activeColumnClassReflection,
+        series: seriesClassRefection,
+        avg: avgClassReflection,
+        months: monthsClassReflection
       });
     },
     isShowChangeChart: true,
@@ -27369,9 +27673,14 @@ var useChartDatas = function useChartDatas() {
     label: "Conference",
     children: function children(typeChart) {
       return React.createElement(ColumnChartAndPercent$1, {
-        data: chartConference.overviewQuestionChoice,
+        data: dataConvertedConference,
         typeChart: typeChart,
-        id: "conference"
+        id: "conference",
+        onActiveColumn: handleActiveColumnConference,
+        activeColumn: activeColumnConference,
+        series: seriesConference,
+        avg: avgConference,
+        months: monthsConference
       });
     },
     isShowChangeChart: true,
@@ -27387,10 +27696,15 @@ var useChartDatas = function useChartDatas() {
     label: "Safety",
     children: function children(typeChart) {
       return React.createElement(ColumnChartAndPercent$1, {
-        data: safety.overviewQuestionChoice,
+        data: dataConvertedSafety,
         typeChart: typeChart,
         id: "safety",
-        isHasLineChart: true
+        isHasLineChart: true,
+        onActiveColumn: handleActiveColumnSafety,
+        activeColumn: activeColumnSafety,
+        series: seriesSafety,
+        avg: avgSafety,
+        months: monthsSafety
       });
     },
     isShowChangeChart: true,
@@ -27404,8 +27718,9 @@ var useChartDatas = function useChartDatas() {
   }, {
     id: "Student_by_age",
     label: "Student by age",
-    children: function children(_) {
+    children: function children(_, columnFlex) {
       return React.createElement(StudentByAgeAndGender$1, {
+        columnFlex: columnFlex,
         studentByAgeData: studentByAge,
         studentByGenderData: studentByGender
       });
@@ -27966,6 +28281,778 @@ var TotalCard = function TotalCard(_ref) {
   }, value)));
 };
 
+var headerLogo = "../images/logoV1-2.png";
+
+var DashboardToPDF = function DashboardToPDF(props) {
+  var selectedToPDF = props.selectedToPDF,
+      initialData = props.initialData,
+      typeChartList = props.typeChartList;
+  var dispatch = useDispatch();
+
+  var _useDashboard = useDashboard(),
+      chartOneToOneData = _useDashboard.chartOneToOneData,
+      topLearningStrategies = _useDashboard.topLearningStrategies,
+      chartClassReflection = _useDashboard.chartClassReflection,
+      chartConference = _useDashboard.chartConference,
+      safety = _useDashboard.safety;
+
+  var chartHightImpactLearningStrategie = selectedToPDF.find(function (i) {
+    return i.id === "high_impact_learning_strategie";
+  });
+  var chartReadinessToLearn = selectedToPDF.find(function (i) {
+    return i.id === "readiness_to_learn";
+  });
+  var chartOneToOne = selectedToPDF.find(function (i) {
+    return i.id === "1_to_1";
+  });
+  var chartClassReflectionPDF = selectedToPDF.find(function (i) {
+    return i.id === "class_reflection";
+  });
+  var chartConferecePDF = selectedToPDF.find(function (i) {
+    return i.id === "conference";
+  });
+  var chartSafety = selectedToPDF.find(function (i) {
+    return i.id === "safety";
+  });
+  var chartStudentByAge = selectedToPDF.find(function (i) {
+    return i.id === "Student_by_age";
+  });
+  var chartStudentByGrade = selectedToPDF.find(function (i) {
+    return i.id === "student_by_grade";
+  });
+
+  var generatePDF = function generatePDF() {
+    try {
+      var _temp19 = function _temp19() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp20 = _catch(function () {
+        function _temp16() {
+          function _temp14() {
+            function _temp12() {
+              function _temp10() {
+                function _temp8() {
+                  function _temp6() {
+                    function _temp4() {
+                      function _temp2() {
+                        doc.save("DashBoard.pdf");
+                      }
+
+                      var _temp = function () {
+                        if (!!chartStudentByGrade) {
+                          var _selectedToPDF;
+
+                          var line = 80;
+                          var left = 20;
+                          if (selectedToPDF.indexOf(chartStudentByGrade) != 0 && ((_selectedToPDF = selectedToPDF[selectedToPDF.indexOf(chartStudentByGrade) - 1]) === null || _selectedToPDF === void 0 ? void 0 : _selectedToPDF.id) != null) doc.addPage();
+                          return Promise.resolve(createImageHeader()).then(function () {
+                            doc.setFontSize(14);
+                            doc.setFont("Helvetica", "normal", "bold");
+                            doc.text(chartStudentByGrade.label, left, line);
+                            var chart = document.getElementById("student_by_grade");
+                            return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                              doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 140);
+                            });
+                          });
+                        }
+                      }();
+
+                      return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+                    }
+
+                    var _temp3 = function () {
+                      if (!!chartStudentByAge) {
+                        var _selectedToPDF2;
+
+                        var line = 80;
+                        var left = 20;
+                        if (selectedToPDF.indexOf(chartStudentByAge) != 0 && ((_selectedToPDF2 = selectedToPDF[selectedToPDF.indexOf(chartStudentByAge) - 1]) === null || _selectedToPDF2 === void 0 ? void 0 : _selectedToPDF2.id) != null) doc.addPage();
+                        return Promise.resolve(createImageHeader()).then(function () {
+                          doc.setFontSize(14);
+                          doc.setFont("Helvetica", "normal", "bold");
+                          doc.text(chartStudentByAge.label, left, line);
+                          var chart = document.getElementById("Student_by_age");
+                          return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                            doc.addImage(canvas.toDataURL("image/png", 1.0), 20, line + 20, 800, 450);
+                          });
+                        });
+                      }
+                    }();
+
+                    return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+                  }
+
+                  var _temp5 = function () {
+                    if (!!chartSafety) {
+                      var _selectedToPDF3;
+
+                      var line = 80;
+                      var left = 20;
+                      if (selectedToPDF.indexOf(chartSafety) != 0 && ((_selectedToPDF3 = selectedToPDF[selectedToPDF.indexOf(chartSafety) - 1]) === null || _selectedToPDF3 === void 0 ? void 0 : _selectedToPDF3.id) != null) doc.addPage();
+                      return Promise.resolve(createImageHeader()).then(function () {
+                        doc.setFontSize(14);
+                        doc.setFont("Helvetica", "normal", "bold");
+                        doc.text(chartSafety.label, left, line);
+                        var chart = document.getElementById("safety");
+                        return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                          doc.setFontSize(8);
+
+                          for (var i = 0; i < ((_safety$overviewQuest = safety.overviewQuestionChoice) === null || _safety$overviewQuest === void 0 ? void 0 : _safety$overviewQuest.length); i++) {
+                            var _safety$overviewQuest;
+
+                            if (safety.overviewQuestionChoice[i].resultQuestion[0].questionId != 0) {
+                              var _sortedResultQuestion, _sortedResultQuestion2, _sortedResultQuestion3, _sortedResultQuestion4, _sortedResultQuestion5, _sortedResultQuestion6;
+
+                              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;
+
+                                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.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) {
+                                left = 20;
+                                line += 60;
+                              }
+                            }
+                          }
+
+                          doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                        });
+                      });
+                    }
+                  }();
+
+                  return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
+                }
+
+                var _temp7 = function () {
+                  if (!!chartConferecePDF) {
+                    var _selectedToPDF4;
+
+                    var line = 80;
+                    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 () {
+                      doc.setFontSize(14);
+                      doc.setFont("Helvetica", "normal", "bold");
+                      doc.text(chartConferecePDF.label, left, line);
+                      var chart = document.getElementById("conference");
+                      return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                        doc.setFontSize(8);
+
+                        for (var i = 0; i < ((_chartConference$over = chartConference.overviewQuestionChoice) === null || _chartConference$over === void 0 ? void 0 : _chartConference$over.length); i++) {
+                          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 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) || "";
+                            doc.setFont("Helvetica", "normal", "bold");
+                            doc.text(chartConference.overviewQuestionChoice[i].month, left, line + 20);
+
+                            if (resultQuestion1 != "") {
+                              var _sortedResultQuestion16;
+
+                              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.setDrawColor(0);
+                              doc.setFillColor(64, 210, 204);
+                              doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
+                            }
+
+                            if (resultQuestion2 != "") {
+                              var _sortedResultQuestion17;
+
+                              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.setDrawColor(0);
+                              doc.setFillColor(120, 182, 226);
+                              doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
+                            }
+
+                            if (resultQuestion3 != "") {
+                              var _sortedResultQuestion18;
+
+                              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.setDrawColor(0);
+                              doc.setFillColor(255, 176, 79);
+                              doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
+                            }
+
+                            if (resultQuestion4 != "") {
+                              var _sortedResultQuestion19;
+
+                              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.setDrawColor(0);
+                              doc.setFillColor(206, 74, 73);
+                              doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
+                            }
+
+                            if (resultQuestion5 != "") {
+                              var _sortedResultQuestion20;
+
+                              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.setDrawColor(0);
+                              doc.setFillColor(27, 183, 177);
+                              doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
+                            }
+
+                            if (resultQuestion6 != "") {
+                              var _sortedResultQuestion21;
+
+                              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.setDrawColor(0);
+                              doc.setFillColor(75, 146, 206);
+                              doc.roundedRect(left, line + 75, 5, 5, 1, 1, "F");
+                            }
+
+                            if ((resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 5 + 5 + 10 > 100) {
+                              left = left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 5 + 20;
+                            } else if ((resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 5 + 5 + 10 > 100) {
+                              left = left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 5 + 20;
+                            } else if ((resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 5 + 5 + 10 > 100) {
+                              left = left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 5 + 20;
+                            } else if ((resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 5 + 5 + 10 > 100) {
+                              left = left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 5 + 20;
+                            } else if ((resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 5 + 5 + 10 > 100) {
+                              left = left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 5 + 20;
+                            } else if ((resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 5 + 5 + 10 > 100) {
+                              left = left + (resultQuestion6 === null || resultQuestion6 === void 0 ? void 0 : resultQuestion6.length) * 5 + 20;
+                            } else {
+                              left = left + 100;
+                            }
+
+                            if (left + 80 > WIDTH_PAPER) {
+                              left = 20;
+                              line += 90;
+                            }
+                          }
+                        }
+
+                        doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                      });
+                    });
+                  }
+                }();
+
+                return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
+              }
+
+              var _temp9 = function () {
+                if (!!chartClassReflectionPDF) {
+                  var _selectedToPDF5;
+
+                  var line = 80;
+                  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 () {
+                    doc.setFontSize(14);
+                    doc.setFont("Helvetica", "normal", "bold");
+                    doc.text(chartClassReflectionPDF.label, left, line);
+                    var chart = document.getElementById("class_reflection");
+                    return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                      doc.setFontSize(8);
+
+                      for (var i = 0; i < ((_chartClassReflection = chartClassReflection.overviewQuestionChoice) === null || _chartClassReflection === void 0 ? void 0 : _chartClassReflection.length); i++) {
+                        var _chartClassReflection;
+
+                        if (chartClassReflection.overviewQuestionChoice[i].resultQuestion[0].questionId != 0) {
+                          var _sortedResultQuestion22, _sortedResultQuestion23, _sortedResultQuestion24, _sortedResultQuestion25, _sortedResultQuestion26, _sortedResultQuestion27, _sortedResultQuestion28, _sortedResultQuestion29, _sortedResultQuestion30, _sortedResultQuestion31;
+
+                          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>"))) || "";
+                          doc.setFont("Helvetica", "normal", "bold");
+                          doc.text(chartClassReflection.overviewQuestionChoice[i].month, left, line + 20);
+
+                          if (resultQuestion1 != "") {
+                            var _sortedResultQuestion32;
+
+                            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.setDrawColor(0);
+                            doc.setFillColor(64, 210, 204);
+                            doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
+                          }
+
+                          if (resultQuestion2 != "") {
+                            var _sortedResultQuestion33;
+
+                            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.setDrawColor(0);
+                            doc.setFillColor(120, 182, 226);
+                            doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
+                          }
+
+                          if (resultQuestion3 != "") {
+                            var _sortedResultQuestion34;
+
+                            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.setDrawColor(0);
+                            doc.setFillColor(255, 176, 79);
+                            doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
+                          }
+
+                          if (resultQuestion4 != "") {
+                            var _sortedResultQuestion35;
+
+                            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.setDrawColor(0);
+                            doc.setFillColor(206, 74, 73);
+                            doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
+                          }
+
+                          if (resultQuestion5 != "") {
+                            var _sortedResultQuestion36;
+
+                            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.setDrawColor(0);
+                            doc.setFillColor(27, 183, 177);
+                            doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
+                          }
+
+                          if ((resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 5 + 5 + 10 > 80) {
+                            left = left + (resultQuestion1 === null || resultQuestion1 === void 0 ? void 0 : resultQuestion1.length) * 5 + 15;
+                          } else if ((resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 5 + 5 + 10 > 80) {
+                            left = left + (resultQuestion2 === null || resultQuestion2 === void 0 ? void 0 : resultQuestion2.length) * 5 + 15;
+                          } else if ((resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 5 + 5 + 10 > 80) {
+                            left = left + (resultQuestion3 === null || resultQuestion3 === void 0 ? void 0 : resultQuestion3.length) * 5 + 15;
+                          } else if ((resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 5 + 5 + 10 > 80) {
+                            left = left + (resultQuestion4 === null || resultQuestion4 === void 0 ? void 0 : resultQuestion4.length) * 5 + 15;
+                          } else if ((resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 5 + 5 + 10 > 80) {
+                            left = left + (resultQuestion5 === null || resultQuestion5 === void 0 ? void 0 : resultQuestion5.length) * 5 + 15;
+                          } else {
+                            left = left + 80;
+                          }
+
+                          if (left + 80 > WIDTH_PAPER) {
+                            left = 20;
+                            line += 75;
+                          }
+                        }
+                      }
+
+                      doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 170);
+                    });
+                  });
+                }
+              }();
+
+              return _temp9 && _temp9.then ? _temp9.then(_temp10) : _temp10(_temp9);
+            }
+
+            var _temp11 = function () {
+              if (!!chartOneToOne) {
+                var _selectedToPDF6;
+
+                var line = 80;
+                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 () {
+                  doc.setFontSize(14);
+                  doc.setFont("Helvetica", "normal", "bold");
+                  doc.text(chartOneToOne.label, left, line);
+                  var chart = document.getElementById("1_to_1");
+                  return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                    doc.setFontSize(8);
+
+                    for (var i = 0; i < ((_chartOneToOneData$ov = chartOneToOneData.overviewQuestionChoice) === null || _chartOneToOneData$ov === void 0 ? void 0 : _chartOneToOneData$ov.length); i++) {
+                      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 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>"))) || "";
+                        doc.setFont("Helvetica", "normal", "bold");
+                        doc.text(chartOneToOneData.overviewQuestionChoice[i].month, left, line + 20);
+
+                        if (resultQuestion1 != "") {
+                          var _sortedResultQuestion55;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(64, 210, 204);
+                          doc.roundedRect(left, line + 25, 5, 5, 1, 1, "F");
+                        }
+
+                        if (resultQuestion2 != "") {
+                          var _sortedResultQuestion56;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(120, 182, 226);
+                          doc.roundedRect(left, line + 35, 5, 5, 1, 1, "F");
+                        }
+
+                        if (resultQuestion3 != "") {
+                          var _sortedResultQuestion57;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(255, 176, 79);
+                          doc.roundedRect(left, line + 45, 5, 5, 1, 1, "F");
+                        }
+
+                        if (resultQuestion4 != "") {
+                          var _sortedResultQuestion58;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(206, 74, 73);
+                          doc.roundedRect(left, line + 55, 5, 5, 1, 1, "F");
+                        }
+
+                        if (resultQuestion5 != "") {
+                          var _sortedResultQuestion59;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(27, 183, 177);
+                          doc.roundedRect(left, line + 65, 5, 5, 1, 1, "F");
+                        }
+
+                        if (resultQuestion6 != "") {
+                          var _sortedResultQuestion60;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(75, 146, 206);
+                          doc.roundedRect(left, line + 75, 5, 5, 1, 1, "F");
+                        }
+
+                        if (resultQuestion7 != "") {
+                          var _sortedResultQuestion61;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(240, 148, 34);
+                          doc.roundedRect(left, line + 85, 5, 5, 1, 1, "F");
+                        }
+
+                        if (resultQuestion8 != "") {
+                          var _sortedResultQuestion62;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(162, 51, 51);
+                          doc.roundedRect(left, line + 95, 5, 5, 1, 1, "F");
+                        }
+
+                        if (resultQuestion9 != "") {
+                          var _sortedResultQuestion63;
+
+                          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.setDrawColor(0);
+                          doc.setFillColor(11, 153, 148);
+                          doc.roundedRect(left, line + 105, 5, 5, 1, 1, "F");
+                        }
+
+                        left = left + 100;
+
+                        if (left + 80 > WIDTH_PAPER) {
+                          left = 20;
+                          line += 110;
+                        }
+                      }
+                    }
+
+                    doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 25, 420, 170);
+                  });
+                });
+              }
+            }();
+
+            return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
+          }
+
+          var _temp13 = function () {
+            if (!!chartReadinessToLearn) {
+              var _selectedToPDF7;
+
+              var line = 80;
+              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 () {
+                doc.setFontSize(14);
+                doc.setFont("Helvetica", "normal", "bold");
+                doc.text(chartReadinessToLearn.label, left, line);
+                var chart = document.getElementById("readiness_to_learn");
+                return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                  doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 30, 420, 150);
+                });
+              });
+            }
+          }();
+
+          return _temp13 && _temp13.then ? _temp13.then(_temp14) : _temp14(_temp13);
+        }
+
+        var doc = new jsPDF({
+          orientation: "p",
+          unit: "px",
+          format: "a4"
+        });
+        var WIDTH_PAPER = doc.internal.pageSize.width;
+
+        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, 100, 30);
+            });
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        };
+
+        var line = 80;
+        var left = 20;
+
+        var _temp15 = function () {
+          if (!!chartHightImpactLearningStrategie) {
+            var line = 80;
+            var left = 20;
+            if (selectedToPDF.indexOf(chartHightImpactLearningStrategie) != 0 && selectedToPDF[selectedToPDF.indexOf(chartHightImpactLearningStrategie) - 1].id != null) doc.addPage();
+            return Promise.resolve(createImageHeader()).then(function () {
+              doc.setFontSize(14);
+              doc.setFont("Helvetica", "normal", "bold");
+              doc.text(chartHightImpactLearningStrategie.label, left, line);
+              var chart = document.getElementById("high_impact_learning_strategie");
+              return Promise.resolve(html2canvas(chart)).then(function (canvas) {
+                doc.setFontSize(8);
+
+                for (var j = 0; j < ((_topLearningStrategie = topLearningStrategies.learningStrategies) === null || _topLearningStrategie === void 0 ? void 0 : _topLearningStrategie.length); j++) {
+                  var _topLearningStrategie, _topLearningStrategie2, _topLearningStrategie3;
+
+                  var sumUsagePoint = topLearningStrategies.learningStrategies[j].usagePoint.reduce(function (partialSum, a) {
+                    return partialSum + a;
+                  }, 0);
+                  var avgSumUsagePoint = sumUsagePoint / ((_topLearningStrategie2 = topLearningStrategies.learningStrategies[j].usagePoint) === null || _topLearningStrategie2 === void 0 ? void 0 : _topLearningStrategie2.length) || 0;
+
+                  if (topLearningStrategies.learningStrategies[j].usageCount != 0 || ((_topLearningStrategie3 = topLearningStrategies.learningStrategies[j].usagePoint) === null || _topLearningStrategie3 === void 0 ? void 0 : _topLearningStrategie3.length) > 0) {
+                    var _topLearningStrategie4, _topLearningStrategie5, _topLearningStrategie6, _topLearningStrategie7;
+
+                    doc.setFont("Helvetica", "normal", "bold");
+                    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);
+                    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) {
+                      line += 40;
+                      left = 20;
+                    }
+                  }
+                }
+
+                doc.addImage(canvas.toDataURL("image/png", 1.0), 15, line + 40, 420, 130);
+              });
+            });
+          }
+        }();
+
+        return _temp15 && _temp15.then ? _temp15.then(_temp16) : _temp16(_temp15);
+      }, function () {
+        dispatch(setAlert({
+          type: "danger",
+          message: "Can't print"
+        }));
+      });
+
+      return Promise.resolve(_temp20 && _temp20.then ? _temp20.then(_temp19) : _temp19(_temp20));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  return React.createElement("div", null, !!chartHightImpactLearningStrategie && React.createElement("div", {
+    className: "" + styles$1["chart-to-canvas"]
+  }, React.createElement("div", {
+    id: chartHightImpactLearningStrategie.id
+  }, chartHightImpactLearningStrategie.children())), !!chartReadinessToLearn && React.createElement("div", {
+    className: "" + styles$1["chart-to-canvas"]
+  }, React.createElement("div", {
+    id: chartReadinessToLearn.id
+  }, chartReadinessToLearn.children())), !!chartOneToOne && React.createElement("div", {
+    className: "" + styles$1["chart-to-canvas"]
+  }, React.createElement("div", {
+    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", {
+    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", {
+    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", {
+    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", {
+    className: "" + styles$1["chart-to-canvas"]
+  }, React.createElement("div", {
+    id: chartStudentByAge.id
+  }, chartStudentByAge.children(null, true))), !!chartStudentByGrade && React.createElement("div", {
+    className: "" + styles$1["chart-to-canvas"]
+  }, React.createElement("div", {
+    id: chartStudentByGrade.id
+  }, chartStudentByGrade.children())), React.createElement("div", {
+    className: "" + styles$1["image-logo"],
+    id: "header-logo"
+  }, React.createElement("img", {
+    src: headerLogo,
+    alt: ""
+  })), React.createElement(Button, {
+    color: "success",
+    onClick: function onClick() {
+      selectedToPDF.length > 0 && generatePDF();
+    }
+  }, "Export"));
+};
+
 var Dashboard = function Dashboard() {
   var _useChartDatas = useChartDatas(),
       chartDashBoards = _useChartDatas.chartDashBoards,
@@ -27985,9 +29072,58 @@ var Dashboard = function Dashboard() {
       teacherUserId = _useBehavior.teacherUserId,
       changeCurrentTeacherUserId = _useBehavior.changeCurrentTeacherUserId;
 
+  var _useDashboard = useDashboard(),
+      handleSelectToPrint = _useDashboard.handleSelectToPrint,
+      checkSelectedItem = _useDashboard.checkSelectedItem,
+      selectedToPrint = _useDashboard.selectedToPrint,
+      setSelectedToPrint = _useDashboard.setSelectedToPrint;
+
+  var _useState = useState(false),
+      modal = _useState[0],
+      setModal = _useState[1];
+
+  var toggle = function toggle() {
+    setSelectedToPrint([]);
+    setModal(!modal);
+  };
+
   return React.createElement("div", {
     className: "" + styles$1["block-dashboard"]
-  }, React.createElement("div", {
+  }, React.createElement(Modal, {
+    isOpen: modal,
+    toggle: toggle,
+    style: {
+      overflow: "hidden"
+    },
+    centered: true
+  }, React.createElement(ModalHeader, null, React.createElement("p", {
+    className: "" + styles$1["title-modal"]
+  }, "Export to PDF"), React.createElement("p", {
+    className: "" + styles$1["header-desc-modal"]
+  }, "The data is taken from the home screen."), React.createElement("p", {
+    className: "" + styles$1["header-desc-modal"]
+  }, "Make sure everything is set correctly before exporting.")), React.createElement(ModalBody, null, chartDashBoards === null || chartDashBoards === void 0 ? void 0 : chartDashBoards.map(function (item, index) {
+    return React.createElement(FormGroup, {
+      check: true,
+      className: "" + styles$1["form-checkbox"]
+    }, React.createElement(Input, {
+      type: "checkbox",
+      checked: checkSelectedItem(item.id),
+      onChange: function onChange(event) {
+        return handleSelectToPrint(event.target.checked, item, typeChartList[index]);
+      }
+    }), React.createElement(Label, {
+      check: true,
+      className: "" + styles$1["checkbox-content"]
+    }, item.label));
+  })), React.createElement(ModalFooter, null, React.createElement(Button, {
+    color: "light",
+    onClick: toggle
+  }, "Cancel"), React.createElement(DashboardToPDF, {
+    selectedToPDF: selectedToPrint,
+    initialData: chartDashBoards,
+    typeChartList: typeChartList
+  }))), React.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
   }, React.createElement("div", {
     className: "d-flex align-items-center mx-3"
@@ -27998,7 +29134,8 @@ var Dashboard = function Dashboard() {
     src: "images/waving-hand.png",
     alt: ""
   })), React.createElement("button", {
-    className: styles$1["button-export"] + " d-flex align-items-center border-0 p-0"
+    className: styles$1["button-export"] + " d-flex align-items-center border-0 p-0",
+    onClick: toggle
   }, React.createElement("div", {
     className: "" + styles$1["button-icon"]
   }, React.createElement("img", {