mario-education 2.4.26-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) {
@@ -19638,7 +19682,41 @@ var CompareTeacher = function CompareTeacher() {
   }, "No compare result."))));
 };
 
-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 LegalGenderType;
+
+(function (LegalGenderType) {
+  LegalGenderType[LegalGenderType["Male"] = 0] = "Male";
+  LegalGenderType[LegalGenderType["Female"] = 1] = "Female";
+})(LegalGenderType || (LegalGenderType = {}));
+
+var MtssType;
+
+(function (MtssType) {
+  MtssType[MtssType["Tier1"] = 0] = "Tier1";
+  MtssType[MtssType["Tier2"] = 1] = "Tier2";
+  MtssType[MtssType["Tier3"] = 2] = "Tier3";
+})(MtssType || (MtssType = {}));
+
+var FILTER_YEAR;
+
+(function (FILTER_YEAR) {
+  FILTER_YEAR[FILTER_YEAR["THIS_YEAR"] = 0] = "THIS_YEAR";
+  FILTER_YEAR[FILTER_YEAR["LAST_YEAR"] = 1] = "LAST_YEAR";
+  FILTER_YEAR[FILTER_YEAR["LAST_QUARTER"] = 2] = "LAST_QUARTER";
+  FILTER_YEAR[FILTER_YEAR["LAST_MONTH"] = 3] = "LAST_MONTH";
+  FILTER_YEAR[FILTER_YEAR["LAST_DAY"] = 4] = "LAST_DAY";
+})(FILTER_YEAR || (FILTER_YEAR = {}));
+
+var TYPECHART;
+
+(function (TYPECHART) {
+  TYPECHART[TYPECHART["AREA"] = 0] = "AREA";
+  TYPECHART[TYPECHART["BAR"] = 1] = "BAR";
+  TYPECHART[TYPECHART["LINE"] = 2] = "LINE";
+  TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
+})(TYPECHART || (TYPECHART = {}));
+
+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,
@@ -19690,6 +19768,201 @@ var CheckboxCustom = function CheckboxCustom(_ref) {
   }));
 };
 
+var PlusButton = function PlusButton(_ref) {
+  var _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+  return React.createElement("div", {
+    style: {
+      transform: isActive ? "rotate(45deg)" : ""
+    }
+  }, React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, React.createElement("rect", {
+    width: "24",
+    height: "24",
+    rx: "12",
+    fill: !isActive ? "#808080" : "#D9D9D9"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M12.7143 7H11.2857V11.2857H7V12.7143H11.2857V17H12.7143V12.7143H17V11.2857H12.7143V7Z",
+    fill: "white"
+  })));
+};
+
+var HeaderChart = function HeaderChart(_ref) {
+  var title = _ref.title,
+      isOpen = _ref.isOpen,
+      onToggle = _ref.onToggle,
+      _ref$isShowChangeChar = _ref.isShowChangeChart,
+      isShowChangeChart = _ref$isShowChangeChar === void 0 ? false : _ref$isShowChangeChar,
+      _ref$typeChart = _ref.typeChart,
+      typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart,
+      onChangeChart = _ref.onChangeChart,
+      options = _ref.options;
+  return React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center " + styles$1["header-chart"] + " "
+  }, React.createElement("div", {
+    className: "" + styles$1["header-left"]
+  }, React.createElement("span", {
+    className: styles$1["header-title"] + " pr-2"
+  }, title), React.createElement("i", {
+    className: styles$1["icon-chart"] + " fal fa-info-circle cursor-pointer"
+  })), React.createElement("div", {
+    className: "" + styles$1["header-right"]
+  }, isOpen && isShowChangeChart && (options === null || options === void 0 ? void 0 : options.length) && React.createElement("div", {
+    className: "d-flex align-items-center d-inline-block pr-4"
+  }, React.createElement("div", {
+    className: "d-flex align-items-center px-2 " + styles$1["checkbox-chart"]
+  }, React.createElement("div", {
+    className: "pr-4 d-flex",
+    onClick: function onClick() {
+      return onChangeChart(options[0].value);
+    },
+    style: {
+      cursor: "pointer"
+    }
+  }, React.createElement(CheckboxCustom, {
+    width: 16,
+    height: 16,
+    isActive: typeChart === options[0].value || typeChart === TYPECHART.BOTH,
+    className: "pr-2"
+  }), React.createElement("label", {
+    className: "" + styles$1["label-chart"],
+    style: {
+      color: "#252733",
+      marginBottom: 0,
+      cursor: "pointer"
+    }
+  }, "Ridge charts"))), React.createElement("div", {
+    className: "d-inline-block px-2  " + styles$1["checkbox-chart"]
+  }, React.createElement("div", {
+    className: "pr-4 d-flex",
+    onClick: function onClick() {
+      return onChangeChart(options[1].value);
+    },
+    style: {
+      cursor: "pointer"
+    }
+  }, React.createElement(CheckboxCustom, {
+    width: 16,
+    height: 16,
+    isActive: typeChart === options[1].value || typeChart === TYPECHART.BOTH,
+    className: "pr-2"
+  }), React.createElement("label", {
+    className: "" + styles$1["label-chart"],
+    style: {
+      color: "#252733",
+      marginBottom: 0,
+      cursor: "pointer"
+    }
+  }, options[1].value === TYPECHART.BAR ? "Bar charts" : "Line charts")))), React.createElement("i", {
+    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"]
+  }), React.createElement("div", {
+    onClick: onToggle,
+    className: styles$1["btn-show-chart"],
+    style: {
+      cursor: "pointer"
+    }
+  }, React.createElement(PlusButton, {
+    isActive: isOpen
+  }))));
+};
+
+var useBehavior = function useBehavior(initialTypeChart) {
+  var _useState = useState(""),
+      teacherUserId = _useState[0],
+      setTeacherUserId = _useState[1];
+
+  var _useState2 = useState(initialTypeChart.map(function () {
+    return false;
+  })),
+      chartIsOpened = _useState2[0],
+      setChartIsOpened = _useState2[1];
+
+  var _useState3 = useState(initialTypeChart),
+      typeChartList = _useState3[0],
+      setTypeChartList = _useState3[1];
+
+  var onToggle = function onToggle(idx) {
+    var newStateChart = [].concat(chartIsOpened);
+    newStateChart[idx] = !newStateChart[idx];
+    setChartIsOpened(newStateChart);
+  };
+
+  var onChangeChart = function onChangeChart(idx, type) {
+    switch (type) {
+      case TYPECHART.AREA:
+        if (typeChartList[idx] === TYPECHART.BAR || typeChartList[idx] === TYPECHART.LINE) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.BOTH : cur;
+          }));
+          return;
+        }
+
+        if (typeChartList[idx] === TYPECHART.BOTH) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? initialTypeChart[idx] : cur;
+          }));
+        }
+
+        return;
+
+      case TYPECHART.BAR:
+        if (typeChartList[idx] === TYPECHART.AREA) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.BOTH : cur;
+          }));
+          return;
+        }
+
+        if (typeChartList[idx] === TYPECHART.BOTH) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.AREA : cur;
+          }));
+        }
+
+        return;
+
+      case TYPECHART.LINE:
+        if (typeChartList[idx] === TYPECHART.AREA) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.BOTH : cur;
+          }));
+          return;
+        }
+
+        if (typeChartList[idx] === TYPECHART.BOTH) {
+          setTypeChartList(typeChartList.map(function (cur, index) {
+            return index === idx ? TYPECHART.AREA : cur;
+          }));
+        }
+
+        return;
+
+      default:
+        return;
+    }
+  };
+
+  var changeCurrentTeacherUserId = function changeCurrentTeacherUserId(userId) {
+    setTeacherUserId(userId);
+  };
+
+  return {
+    chartIsOpened: chartIsOpened,
+    onToggle: onToggle,
+    onChangeChart: onChangeChart,
+    typeChartList: typeChartList,
+    teacherUserId: teacherUserId,
+    changeCurrentTeacherUserId: changeCurrentTeacherUserId
+  };
+};
+
 var INITIAL_BEST_FRIENDS = {
   friends: 0,
   couldBeFriends: 0,
@@ -25442,31 +25715,6 @@ var moment = createCommonjsModule(function (module, exports) {
 })));
 });
 
-var LegalGenderType;
-
-(function (LegalGenderType) {
-  LegalGenderType[LegalGenderType["Male"] = 0] = "Male";
-  LegalGenderType[LegalGenderType["Female"] = 1] = "Female";
-})(LegalGenderType || (LegalGenderType = {}));
-
-var MtssType;
-
-(function (MtssType) {
-  MtssType[MtssType["Tier1"] = 0] = "Tier1";
-  MtssType[MtssType["Tier2"] = 1] = "Tier2";
-  MtssType[MtssType["Tier3"] = 2] = "Tier3";
-})(MtssType || (MtssType = {}));
-
-var FILTER_YEAR;
-
-(function (FILTER_YEAR) {
-  FILTER_YEAR[FILTER_YEAR["THIS_YEAR"] = 0] = "THIS_YEAR";
-  FILTER_YEAR[FILTER_YEAR["LAST_YEAR"] = 1] = "LAST_YEAR";
-  FILTER_YEAR[FILTER_YEAR["LAST_QUARTER"] = 2] = "LAST_QUARTER";
-  FILTER_YEAR[FILTER_YEAR["LAST_MONTH"] = 3] = "LAST_MONTH";
-  FILTER_YEAR[FILTER_YEAR["LAST_DAY"] = 4] = "LAST_DAY";
-})(FILTER_YEAR || (FILTER_YEAR = {}));
-
 var gradeOptions = function gradeOptions(grades, studentUserId) {
   var result = !studentUserId ? GRAGE_DEFAULT : GRAGE_DEFAULT.filter(function (val) {
     return grades.indexOf(val) != -1;
@@ -25491,7 +25739,8 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
         horizontal: true,
         dataLabels: {
           position: "top"
-        }
+        },
+        borderRadius: 5
       }
     },
     stroke: {
@@ -25501,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: {
@@ -25518,6 +25777,8 @@ var learningStrategyChartOptions = function learningStrategyChartOptions(labelNa
       }
     },
     yaxis: {
+      min: 0,
+      max: 100,
       labels: {
         show: true,
         align: "left",
@@ -25525,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"
         },
@@ -25643,6 +25904,11 @@ var studentByAgeOptions = function studentByAgeOptions(series) {
     dataLabels: {
       enabled: false
     },
+    plotOptions: {
+      bar: {
+        borderRadius: 5
+      }
+    },
     grid: {
       borderColor: "#F6F6F6"
     },
@@ -25682,7 +25948,8 @@ var studentByAgeOptions = function studentByAgeOptions(series) {
       position: "top",
       horizontalAlign: "left",
       fontSize: "14px",
-      offsetY: -5
+      offsetY: 0,
+      fontFamily: "Roboto"
     }
   };
 };
@@ -25729,9 +25996,6 @@ var pieChartOptions = {
       }
     }
   },
-  chart: {
-    offsetY: 20
-  },
   dataLabels: {
     enabled: false
   },
@@ -25827,14 +26091,13 @@ var getConvertMinuteToHour = function getConvertMinuteToHour(timeSecond) {
 
   return hTime;
 };
-var readinesToLearnoptions = function readinesToLearnoptions(data, seriesName) {
+var readinesToLearnoptions = function readinesToLearnoptions(seriesName) {
   return {
     chart: {
       height: 450,
       toolbar: {
         show: false
-      },
-      offsetY: -20
+      }
     },
     dataLabels: {
       enabled: false
@@ -25849,6 +26112,9 @@ var readinesToLearnoptions = function readinesToLearnoptions(data, seriesName) {
       tickPlacement: "between",
       labels: {
         show: false
+      },
+      tooltip: {
+        enabled: false
       }
     },
     yaxis: {
@@ -25857,7 +26123,7 @@ var readinesToLearnoptions = function readinesToLearnoptions(data, seriesName) {
       tickAmount: 10,
       labels: {
         formatter: function formatter(value) {
-          return value + "%";
+          return Math.round(value) !== value ? value.toFixed(2) + "%" : value + "%";
         }
       }
     },
@@ -25867,16 +26133,16 @@ var readinesToLearnoptions = function readinesToLearnoptions(data, seriesName) {
         show: false
       },
       y: {
-        formatter: function formatter(_, opts) {
-          var _data$opts$seriesInde;
-
-          return (_data$opts$seriesInde = data[opts.seriesIndex]) === null || _data$opts$seriesInde === void 0 ? void 0 : _data$opts$seriesInde.studentPercentQuestion[opts.dataPointIndex].studentName;
-        },
+        formatter: undefined,
         title: {
           formatter: function formatter() {
-            return "Student:";
+            return "Percent";
           }
         }
+      },
+      z: {
+        formatter: undefined,
+        title: "Student: "
       }
     },
     labels: seriesName,
@@ -25905,7 +26171,7 @@ var convertDataToSeriesBullderChart = function convertDataToSeriesBullderChart(d
     return {
       name: i.questionText.replace("<p>", "").replace("</p>", ""),
       data: ((_i$studentPercentQues = i.studentPercentQuestion) === null || _i$studentPercentQues === void 0 ? void 0 : _i$studentPercentQues.map(function (question) {
-        return [getRandomArbitrary((index + 1) * 1000 - 330, (index + 1) * 1000 + 330), question.percentQuestion];
+        return [getRandomArbitrary((index + 1) * 1000 - 330, (index + 1) * 1000 + 330), question.percentQuestion, question.studentName];
       })) || []
     };
   });
@@ -25916,7 +26182,17 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
       height: 350,
       stacked: false,
       toolbar: {
-        show: false
+        show: false,
+        "export": {
+          png: {
+            filename: "test"
+          }
+        }
+      }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 5
       }
     },
     dataLabels: {
@@ -25990,7 +26266,7 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
     }
   };
 };
-var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
+var optionLineChart = function optionLineChart(months, activeData) {
   return {
     chart: {
       height: 350,
@@ -26003,14 +26279,14 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
       enabled: false
     },
     fill: {
-      opacity: 0.5
+      opacity: 1
     },
     colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
       return activeData[index];
     }),
     stroke: {
-      curve: "straight",
-      show: false,
+      curve: "smooth",
+      show: true,
       colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
         return activeData[index];
       }),
@@ -26070,6 +26346,104 @@ var optionBarChartAndArea = function optionBarChartAndArea(months, activeData) {
     }
   };
 };
+var optionBarChartAndArea = function optionBarChartAndArea(months, activeData, newseries) {
+  return {
+    chart: {
+      height: 350,
+      stacked: false,
+      toolbar: {
+        show: false
+      }
+    },
+    plotOptions: {
+      bar: {
+        columnWidth: "50%",
+        borderRadius: 5
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    fill: {
+      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: true,
+      colors: COLOR_CHART_AND_PERCENTS.filter(function (_, index) {
+        return activeData[index];
+      }),
+      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: {
+      categories: months,
+      labels: {
+        show: true,
+        style: {
+          colors: ["#808080"],
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        }
+      }
+    },
+    yaxis: {
+      tickAmount: 2,
+      min: 0,
+      max: 100,
+      labels: {
+        show: true,
+        align: "right",
+        minWidth: 0,
+        maxWidth: 160,
+        style: {
+          colors: ["#808080"],
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        },
+        formatter: function formatter(value) {
+          return value + "%";
+        },
+        offsetX: 0,
+        offsetY: 0,
+        rotate: 0
+      },
+      decimalsInFloat: 0
+    },
+    tooltip: {
+      y: {
+        formatter: function formatter(value) {
+          return value.toFixed(2) + "%";
+        }
+      },
+      onDatasetHover: {
+        highlightDataSeries: true
+      }
+    },
+    legend: {
+      show: false
+    }
+  };
+};
 var convertDataToDataChart = function convertDataToDataChart(data) {
   return data.reduce(function (acc, cur) {
     return [].concat(acc, cur.resultQuestion.map(function (i) {
@@ -26110,10 +26484,10 @@ var seriesNameBubbleChartCustom = function seriesNameBubbleChartCustom(series) {
     return i.questionText.replace("<p>", "").replace("</p>", "");
   });
 };
-var mergeBarChartAndArea = function mergeBarChartAndArea(series) {
+var mergeBarChartAndArea = function mergeBarChartAndArea(series, isHasLineChart) {
   var barChartSeries = series.map(function (i) {
     return _extends({}, i, {
-      type: "bar"
+      type: isHasLineChart ? "line" : "bar"
     });
   });
   var areaChartSeries = series.map(function (i) {
@@ -26124,9 +26498,9 @@ var mergeBarChartAndArea = function mergeBarChartAndArea(series) {
   return [].concat(barChartSeries, areaChartSeries);
 };
 var getLastQuarterRange = function getLastQuarterRange() {
-  var curQuarter = moment().quarter();
-  var start = moment().quarter(curQuarter).startOf("quarter").valueOf();
-  var end = moment().quarter(curQuarter).endOf("quarter").valueOf();
+  var lastQuarter = moment().utc().quarter() - 1;
+  var start = lastQuarter ? moment().utc().quarter(lastQuarter).startOf("quarter").valueOf() : moment().add(-1, "years").utc().quarter(4).startOf("quarter").valueOf();
+  var end = lastQuarter ? moment().utc().quarter(lastQuarter).endOf("quarter").valueOf() : moment().add(-1, "years").utc().quarter(4).endOf("quarter").valueOf();
   return {
     start: start,
     end: end
@@ -26135,30 +26509,89 @@ var getLastQuarterRange = function getLastQuarterRange() {
 var filterYearData = [{
   label: "This Year",
   value: FILTER_YEAR.THIS_YEAR,
-  startDate: moment().startOf("year").valueOf(),
-  endDate: moment().endOf("day").valueOf()
+  startDate: moment().utc().startOf("year").valueOf(),
+  endDate: moment().utc().endOf("day").valueOf()
 }, {
   label: "Last Year",
   value: FILTER_YEAR.LAST_YEAR,
-  startDate: moment().add(-1, "years").startOf("year").valueOf(),
-  endDate: moment().add(-1, "years").endOf("year").valueOf()
+  startDate: moment().utc().add(-1, "years").startOf("year").valueOf(),
+  endDate: moment().utc().add(-1, "years").endOf("year").valueOf()
 }, {
   label: "Last Quarter",
   value: FILTER_YEAR.LAST_QUARTER,
   startDate: getLastQuarterRange().start,
   endDate: getLastQuarterRange().end
 }, {
-  label: "Last 30 day",
+  label: "Last 30 Day",
   value: FILTER_YEAR.LAST_MONTH,
-  startDate: moment().add(-1, "months").startOf("month").valueOf(),
-  endDate: moment().add(-1, "months").endOf("month").valueOf()
+  startDate: moment().utc().add(-30, "days").startOf("day").valueOf(),
+  endDate: moment().utc().endOf("day").valueOf()
 }, {
   label: "Last Day",
   value: FILTER_YEAR.LAST_DAY,
-  startDate: moment().add(-1, "days").startOf("day").valueOf(),
-  endDate: moment().add(-1, "days").endOf("day").valueOf()
+  startDate: moment().utc().add(-1, "days").startOf("day").valueOf(),
+  endDate: moment().utc().add(-1, "days").endOf("day").valueOf()
 }];
 
+var BubbleChartCustom = function BubbleChartCustom(_ref) {
+  var data = _ref.data;
+  if (!data) return React.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React.createElement("div", null, "No Data"));
+  var seriesName = seriesNameBubbleChartCustom(data);
+  return React.createElement("div", {
+    className: styles$1["bubble-chart-custom"]
+  }, React.createElement("div", {
+    className: styles$1["chart-custom"]
+  }, React.createElement("div", {
+    className: styles$1["list-percent"]
+  }, PERCENT.map(function (i, index) {
+    return React.createElement("div", {
+      className: "" + styles$1["percent-item"],
+      key: index
+    }, i, "%");
+  })), React.createElement("div", {
+    className: styles$1["chart-buddle"]
+  }, React.createElement("div", null, React.createElement(Chart, {
+    options: readinesToLearnoptions(seriesName),
+    type: "scatter",
+    series: convertDataToSeriesBullderChart(data),
+    width: "100%",
+    height: 450
+  }))), React.createElement("div", {
+    className: styles$1["x-axis-custom-wrap"]
+  }, React.createElement("div", {
+    className: styles$1["axis-content"]
+  }, seriesName.map(function (i, index) {
+    return React.createElement("div", {
+      key: index
+    }, i);
+  }))), React.createElement("div", {
+    className: styles$1["legend-wrap"]
+  }, seriesName.map(function (i, index) {
+    return React.createElement("div", {
+      className: "" + styles$1["item"],
+      key: index
+    }, React.createElement("div", {
+      className: "" + styles$1["mark-custom"],
+      style: {
+        backgroundColor: COLOR_CHART_BUBBLE[index]
+      }
+    }), React.createElement("label", {
+      className: "" + styles$1["label-legend-custom"]
+    }, i));
+  }))));
+};
+
+function propsAreEqual(prevProps, nextProps) {
+  return JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.data) === JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.data);
+}
+
+var BubbleChartCustom$1 = React.memo(BubbleChartCustom, propsAreEqual);
+
 var AreaChart = function AreaChart(_ref) {
   var series = _ref.series,
       months = _ref.months,
@@ -26188,77 +26621,56 @@ var BarChart = function BarChart(_ref) {
 var BarAndAreaChart = function BarAndAreaChart(_ref) {
   var series = _ref.series,
       months = _ref.months,
-      activeColumn = _ref.activeColumn;
-  var newseries = mergeBarChartAndArea(series);
+      activeColumn = _ref.activeColumn,
+      _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
   });
 };
 
-var TYPECHART;
-
-(function (TYPECHART) {
-  TYPECHART[TYPECHART["AREA"] = 0] = "AREA";
-  TYPECHART[TYPECHART["BAR"] = 1] = "BAR";
-  TYPECHART[TYPECHART["BOTH"] = 2] = "BOTH";
-})(TYPECHART || (TYPECHART = {}));
+var LineChart = function LineChart(_ref) {
+  var series = _ref.series,
+      months = _ref.months,
+      activeColumn = _ref.activeColumn;
+  return React.createElement(Chart, {
+    options: optionLineChart(months, activeColumn),
+    type: "line",
+    series: series,
+    width: "100%",
+    height: 450
+  });
+};
 
 var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
   var data = _ref.data,
       _ref$typeChart = _ref.typeChart,
-      typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart;
-
-  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];
-      }));
+      typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart,
+      _ref$isHasLineChart = _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
     }
-  }, [data]);
+  }, React.createElement("div", null, "No 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
@@ -26281,7 +26693,7 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
       onClick: function onClick() {
         return onActiveColumn(index);
       }
-    }, column));
+    }, month));
   })), React.createElement("div", {
     className: "w-100",
     style: {
@@ -26296,12 +26708,17 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
     activeColumn: activeColumn,
     series: series
   }), typeChart === TYPECHART.BOTH && React.createElement(BarAndAreaChart, {
+    months: months,
+    activeColumn: activeColumn,
+    series: series,
+    isHasLineChart: isHasLineChart
+  }), typeChart === TYPECHART.LINE && React.createElement(LineChart, {
     months: months,
     activeColumn: activeColumn,
     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
@@ -26314,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"
@@ -26322,226 +26739,23 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
   })));
 };
 
-var propsAreEqual = function propsAreEqual(preProps, nextProps) {
+var propsAreEqual$1 = function propsAreEqual(preProps, nextProps) {
   return JSON.stringify(preProps) === JSON.stringify(nextProps);
 };
 
-var ColumnChartAndPercent$1 = React.memo(ColumnChartAndPercent, propsAreEqual);
-
-var PlusButton = function PlusButton(_ref) {
-  var _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive;
-  return React.createElement("div", {
-    style: {
-      transform: isActive ? "rotate(45deg)" : ""
-    }
-  }, React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, React.createElement("rect", {
-    width: "24",
-    height: "24",
-    rx: "12",
-    fill: !isActive ? "#808080" : "#D9D9D9"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M12.7143 7H11.2857V11.2857H7V12.7143H11.2857V17H12.7143V12.7143H17V11.2857H12.7143V7Z",
-    fill: "white"
-  })));
-};
-
-var HeaderChart = function HeaderChart(_ref) {
-  var title = _ref.title,
-      isOpen = _ref.isOpen,
-      onToggle = _ref.onToggle,
-      _ref$isShowChangeChar = _ref.isShowChangeChart,
-      isShowChangeChart = _ref$isShowChangeChar === void 0 ? false : _ref$isShowChangeChar,
-      _ref$typeChart = _ref.typeChart,
-      typeChart = _ref$typeChart === void 0 ? TYPECHART.BAR : _ref$typeChart,
-      onChangeChart = _ref.onChangeChart;
-  return React.createElement("div", {
-    className: "d-flex justify-content-between align-items-center " + styles$1["header-chart"] + " "
-  }, React.createElement("div", {
-    className: "" + styles$1["header-left"]
-  }, React.createElement("span", {
-    className: styles$1["header-title"] + " pr-2"
-  }, title), React.createElement("i", {
-    className: styles$1["icon-chart"] + " fal fa-info-circle cursor-pointer"
-  })), React.createElement("div", {
-    className: "" + styles$1["header-right"]
-  }, isOpen && isShowChangeChart && React.createElement("div", {
-    className: "d-flex align-items-center d-inline-block pr-4"
-  }, React.createElement("div", {
-    className: "d-flex align-items-center px-2 " + styles$1["checkbox-chart"]
-  }, React.createElement("div", {
-    className: "pr-4 d-flex",
-    onClick: function onClick() {
-      return onChangeChart(TYPECHART.AREA);
-    },
-    style: {
-      cursor: "pointer"
-    }
-  }, React.createElement(CheckboxCustom, {
-    width: 16,
-    height: 16,
-    isActive: typeChart === TYPECHART.AREA || typeChart === TYPECHART.BOTH,
-    className: "pr-2"
-  }), React.createElement("label", {
-    className: "" + styles$1["label-chart"],
-    style: {
-      color: "#252733",
-      marginBottom: 0,
-      cursor: "pointer"
-    }
-  }, "Ridge charts"))), React.createElement("div", {
-    className: "d-inline-block px-2  " + styles$1["checkbox-chart"]
-  }, React.createElement("div", {
-    className: "pr-4 d-flex",
-    onClick: function onClick() {
-      return onChangeChart(TYPECHART.BAR);
-    },
-    style: {
-      cursor: "pointer"
-    }
-  }, React.createElement(CheckboxCustom, {
-    width: 16,
-    height: 16,
-    isActive: typeChart === TYPECHART.BAR || typeChart === TYPECHART.BOTH,
-    className: "pr-2"
-  }), React.createElement("label", {
-    className: "" + styles$1["label-chart"],
-    style: {
-      color: "#252733",
-      marginBottom: 0,
-      cursor: "pointer"
-    }
-  }, "Line charts")))), React.createElement("i", {
-    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"]
-  }), React.createElement("div", {
-    onClick: onToggle,
-    className: styles$1["btn-show-chart"],
-    style: {
-      cursor: "pointer"
-    }
-  }, React.createElement(PlusButton, {
-    isActive: isOpen
-  }))));
-};
-
-var INITIAL_CHART_STATUS = [false, false, false, false, false, false, false, false, false];
-var INITIAL_TYPE_CHART = [TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR, TYPECHART.BAR];
-
-var useBehavior = function useBehavior() {
-  var _useState = useState([].concat(INITIAL_CHART_STATUS)),
-      chartIsOpened = _useState[0],
-      setChartIsOpened = _useState[1];
-
-  var _useState2 = useState(INITIAL_TYPE_CHART),
-      typeChartList = _useState2[0],
-      setTypeChartList = _useState2[1];
-
-  var onToggle = function onToggle(idx) {
-    var newStateChart = [].concat(chartIsOpened);
-    newStateChart[idx] = !newStateChart[idx];
-    setChartIsOpened(newStateChart);
-  };
-
-  var onChangeChart = function onChangeChart(idx, type) {
-    if (type !== typeChartList[idx] && typeChartList[idx] !== TYPECHART.BOTH) {
-      setTypeChartList(typeChartList.map(function (cur, index) {
-        return index === idx ? TYPECHART.BOTH : cur;
-      }));
-      return;
-    }
-
-    if (typeChartList[idx] === TYPECHART.BOTH && type === TYPECHART.AREA) {
-      setTypeChartList(typeChartList.map(function (cur, index) {
-        return index === idx ? TYPECHART.BAR : cur;
-      }));
-      return;
-    }
-
-    if (typeChartList[idx] === TYPECHART.BOTH && type === TYPECHART.BAR) {
-      setTypeChartList(typeChartList.map(function (cur, index) {
-        return index === idx ? TYPECHART.AREA : cur;
-      }));
-      return;
-    }
-
-    setTypeChartList(typeChartList.map(function (cur, index) {
-      return index === idx ? type : cur;
-    }));
-  };
-
-  return {
-    chartIsOpened: chartIsOpened,
-    onToggle: onToggle,
-    onChangeChart: onChangeChart,
-    typeChartList: typeChartList
-  };
-};
-
-var BubbleChartCustom = function BubbleChartCustom(_ref) {
-  var data = _ref.data;
-  var seriesName = seriesNameBubbleChartCustom(data);
-  return React.createElement("div", {
-    className: styles$1["bubble-chart-custom"]
-  }, React.createElement("div", {
-    className: styles$1["chart-custom"]
-  }, React.createElement("div", {
-    className: styles$1["list-percent"]
-  }, PERCENT.map(function (i, index) {
-    return React.createElement("div", {
-      className: "" + styles$1["percent-item"],
-      key: index
-    }, i, "%");
-  })), React.createElement("div", {
-    className: styles$1["chart-buddle"]
-  }, React.createElement("div", null, React.createElement(Chart, {
-    options: readinesToLearnoptions(data, seriesName),
-    type: "scatter",
-    series: convertDataToSeriesBullderChart(data),
-    width: "100%",
-    height: 450
-  }))), React.createElement("div", {
-    className: styles$1["x-axis-custom-wrap"]
-  }, React.createElement("div", {
-    className: styles$1["axis-content"]
-  }, seriesName.map(function (i, index) {
-    return React.createElement("div", {
-      key: index
-    }, i);
-  }))), React.createElement("div", {
-    className: styles$1["legend-wrap"]
-  }, seriesName.map(function (i, index) {
-    return React.createElement("div", {
-      className: "" + styles$1["item"],
-      key: index
-    }, React.createElement("div", {
-      className: "" + styles$1["mark-custom"],
-      style: {
-        backgroundColor: COLOR_CHART_BUBBLE[index]
-      }
-    }), React.createElement("label", {
-      className: "" + styles$1["label-legend-custom"]
-    }, i));
-  }))));
-};
-
-function propsAreEqual$1(prevProps, nextProps) {
-  return JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.data) === JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.data);
-}
-
-var BubbleChartCustom$1 = React.memo(BubbleChartCustom, propsAreEqual$1);
+var ColumnChartAndPercent$1 = React.memo(ColumnChartAndPercent, propsAreEqual$1);
 
 var CustomPieChart = function CustomPieChart(_ref) {
   var data = _ref.data;
+  if (!data) return React.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React.createElement("div", null, "No Data"));
   var series = Object.values(data).reverse();
-  var femalePropotion = Number((series[0] / (series[0] + series[1]) * 100).toFixed(2));
+  var femalePropotion = series[0] / (series[0] + series[1]) * 100;
+  var roundFemalePropotion = Math.round(femalePropotion) !== femalePropotion ? femalePropotion.toFixed(2) : femalePropotion;
   return React.createElement("div", {
     className: styles$1["pie-chart"]
   }, series.filter(function (i) {
@@ -26569,7 +26783,7 @@ var CustomPieChart = function CustomPieChart(_ref) {
     className: styles$1["text-lengend"]
   }, series[1]), React.createElement("div", {
     className: styles$1["text-lengend"]
-  }, "(", (100 - femalePropotion).toFixed(2), "%)")), React.createElement("div", {
+  }, "(", 100 - Number(roundFemalePropotion), "%)")), React.createElement("div", {
     className: styles$1["legend"]
   }, React.createElement("div", {
     className: styles$1["mark-custom"],
@@ -26582,7 +26796,7 @@ var CustomPieChart = function CustomPieChart(_ref) {
     className: styles$1["text-lengend"]
   }, series[0]), React.createElement("div", {
     className: styles$1["text-lengend"]
-  }, "(", femalePropotion, "%)")))) : React.createElement("img", {
+  }, "(", roundFemalePropotion, "%)")))) : React.createElement("img", {
     className: "" + styles$1["image-no-data"],
     src: "images/no-data-haft-pie.png"
   }));
@@ -26590,6 +26804,12 @@ var CustomPieChart = function CustomPieChart(_ref) {
 
 var StudentByAge = function StudentByAge(_ref) {
   var data = _ref.data;
+  if (!data) return React.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React.createElement("div", null, "No Data"));
   var series = convertDataStudentByAgeToSeries(data);
   var totalStudent = totalStudentByAge(data);
   return React.createElement("div", {
@@ -26612,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
   })));
@@ -26634,6 +26856,12 @@ var StudentByAgeAndGender$1 = React.memo(StudentByAgeAndGender, propsAreEqual$2)
 
 var StudentByGrade = function StudentByGrade(_ref) {
   var data = _ref.data;
+  if (!data) return React.createElement("div", {
+    className: "flex justify-content-center align-items-center",
+    style: {
+      height: 450
+    }
+  }, React.createElement("div", null, "No Data"));
   var series = convertDataToSeriesStudentByGrade(data);
   var totalStudent = findTotalStudentByGrade(data);
   return React.createElement("div", {
@@ -26799,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({
@@ -26841,62 +27071,271 @@ var useDashboard = function useDashboard() {
       chartClassReflection = _useState7[0],
       setChartClassReflection = _useState7[1];
 
-  var _useState8 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      chartConference = _useState8[0],
-      setChartConference = _useState8[1];
+  var _useState8 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      chartConference = _useState8[0],
+      setChartConference = _useState8[1];
+
+  var _useState9 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      learningProgress = _useState9[0],
+      setLearningProgress = _useState9[1];
+
+  var _useState10 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
+      safety = _useState10[0],
+      setSafety = _useState10[1];
+
+  var _useState11 = useState(),
+      friendCircles = _useState11[0],
+      setFriendCircles = _useState11[1];
+
+  var _useState12 = useState(),
+      activityCircles = _useState12[0],
+      setActivityCircles = _useState12[1];
+
+  var _useState13 = useState([]),
+      studentBySpecialNeed = _useState13[0],
+      setStudentBySpecialNeed = _useState13[1];
+
+  var _useState14 = useState(INITIAL_AGE_OF_STUDENT),
+      studentByAge = _useState14[0],
+      setStudentByAge = _useState14[1];
+
+  var _useState15 = useState(INITIAL_STUDENT_BY_GENDER),
+      studentByGender = _useState15[0],
+      setStudentByGender = _useState15[1];
+
+  var _useState16 = useState([]),
+      topSkill = _useState16[0],
+      setTopSkill = _useState16[1];
+
+  var _useState17 = useState([]),
+      bandScore = _useState17[0],
+      setBandScore = _useState17[1];
+
+  var user = useSelector(function (state) {
+    return state.common.user;
+  });
+
+  var _useState18 = useState(undefined),
+      studentDefault = _useState18[0],
+      setStudentDefault = _useState18[1];
+
+  var _useState19 = useState(""),
+      genderOfStudent = _useState19[0],
+      setGenderOfStudent = _useState19[1];
+
+  var handleChangeFilters = function handleChangeFilters(event) {
+    var _extends2;
+
+    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;
+    }));
+  };
 
-  var _useState9 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      learningProgress = _useState9[0],
-      setLearningProgress = _useState9[1];
+  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 _useState10 = useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      safety = _useState10[0],
-      setSafety = _useState10[1];
+  var _useState29 = useState([]),
+      activeColumnSafety = _useState29[0],
+      setActiveColumnSafety = _useState29[1];
 
-  var _useState11 = useState(),
-      friendCircles = _useState11[0],
-      setFriendCircles = _useState11[1];
+  var _useState30 = useState([]),
+      seriesSafety = _useState30[0],
+      setSeriesSafety = _useState30[1];
 
-  var _useState12 = useState(),
-      activityCircles = _useState12[0],
-      setActivityCircles = _useState12[1];
+  var _useState31 = useState(INITIAL_AVG),
+      avgSafety = _useState31[0],
+      setAvgSafety = _useState31[1];
 
-  var _useState13 = useState([]),
-      studentBySpecialNeed = _useState13[0],
-      setStudentBySpecialNeed = _useState13[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 _useState14 = useState(INITIAL_AGE_OF_STUDENT),
-      studentByAge = _useState14[0],
-      setStudentByAge = _useState14[1];
+  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;
+    }));
+  };
 
-  var _useState15 = useState(INITIAL_STUDENT_BY_GENDER),
-      studentByGender = _useState15[0],
-      setStudentByGender = _useState15[1];
+  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 _useState16 = useState([]),
-      topSkill = _useState16[0],
-      setTopSkill = _useState16[1];
+  var _useState32 = useState([]),
+      selectedToPrint = _useState32[0],
+      setSelectedToPrint = _useState32[1];
 
-  var _useState17 = useState([]),
-      bandScore = _useState17[0],
-      setBandScore = _useState17[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;
+    });
 
-  var user = useSelector(function (state) {
-    return state.common.user;
-  });
+    if (checked) {
+      if (!!data.id && !foundItem) {
+        updateSelectToPrint.push({
+          id: data.id,
+          identification: data.id,
+          label: data.label,
+          children: data.children,
+          chartType: chartType
+        });
+      }
 
-  var _useState18 = useState(undefined),
-      studentDefault = _useState18[0],
-      setStudentDefault = _useState18[1];
+      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);
 
-  var _useState19 = useState(""),
-      genderOfStudent = _useState19[0],
-      setGenderOfStudent = _useState19[1];
+      updateSelectToPrint[_itemIndex].id = null;
+      updateSelectToPrint[_itemIndex].children = null;
+    }
 
-  var handleChangeFilters = function handleChangeFilters(event) {
-    var _extends2;
+    setSelectedToPrint(updateSelectToPrint);
+  };
 
-    setFilter(_extends({}, filter, (_extends2 = {}, _extends2[event.target.name] = event.target.value, _extends2)));
+  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) {
@@ -27051,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,
@@ -27072,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,
@@ -27122,70 +27609,124 @@ var useChartDatas = function useChartDatas() {
         data: topLearningStrategies
       });
     },
-    isShowChangeChart: false
+    isShowChangeChart: false,
+    options: []
   }, {
-    id: "Readiness_to_learn",
+    id: "readiness_to_learn",
     label: "Readiness to learn",
     children: function children(_) {
       return React.createElement(BubbleChartCustom$1, {
         data: readinessToLearning
       });
     },
-    isShowChangeChart: false
+    isShowChangeChart: false,
+    options: []
   }, {
     id: "1_to_1",
     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
+    isShowChangeChart: true,
+    options: [{
+      label: "Ridge charts",
+      value: TYPECHART.AREA
+    }, {
+      label: "Bar charts",
+      value: TYPECHART.BAR
+    }]
   }, {
     id: "class_reflection",
     label: "Class Reflection",
     children: function children(typeChart) {
       return React.createElement(ColumnChartAndPercent$1, {
-        data: chartClassReflection.overviewQuestionChoice,
+        data: dataConvertedClassReflection,
         typeChart: typeChart,
-        id: "class_reflection"
+        id: "class_reflection",
+        isHasLineChart: true,
+        onActiveColumn: handleActiveColumnClassReflection,
+        activeColumn: activeColumnClassReflection,
+        series: seriesClassRefection,
+        avg: avgClassReflection,
+        months: monthsClassReflection
       });
     },
-    isShowChangeChart: true
+    isShowChangeChart: true,
+    options: [{
+      label: "Ridge charts",
+      value: TYPECHART.AREA
+    }, {
+      label: "Line charts",
+      value: TYPECHART.LINE
+    }]
   }, {
     id: "conference",
     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
+    isShowChangeChart: true,
+    options: [{
+      label: "Ridge charts",
+      value: TYPECHART.AREA
+    }, {
+      label: "Bar charts",
+      value: TYPECHART.BAR
+    }]
   }, {
     id: "safety",
     label: "Safety",
     children: function children(typeChart) {
       return React.createElement(ColumnChartAndPercent$1, {
-        data: safety.overviewQuestionChoice,
+        data: dataConvertedSafety,
         typeChart: typeChart,
-        id: "safety"
+        id: "safety",
+        isHasLineChart: true,
+        onActiveColumn: handleActiveColumnSafety,
+        activeColumn: activeColumnSafety,
+        series: seriesSafety,
+        avg: avgSafety,
+        months: monthsSafety
       });
     },
-    isShowChangeChart: true
+    isShowChangeChart: true,
+    options: [{
+      label: "Ridge charts",
+      value: TYPECHART.AREA
+    }, {
+      label: "Line charts",
+      value: TYPECHART.LINE
+    }]
   }, {
     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
       });
     },
-    isShowChangeChart: false
+    isShowChangeChart: false,
+    options: []
   }, {
     id: "student_by_grade",
     label: "Students by Grade",
@@ -27194,8 +27735,12 @@ var useChartDatas = function useChartDatas() {
         data: studentByGrade
       });
     },
-    isShowChangeChart: false
+    isShowChangeChart: false,
+    options: []
   }];
+  var initialTypeChart = chartDashBoards.map(function (i) {
+    return i.options.length > 0 ? i.options[1].value : TYPECHART.BAR;
+  });
   var totalCardData = [{
     icon: "images/icon_chart.png",
     title: "Total 1-to-1:",
@@ -27239,7 +27784,8 @@ var useChartDatas = function useChartDatas() {
     LIST_FILTERS_LEFT: LIST_FILTERS_LEFT,
     LIST_FILTERS_RIGHT: LIST_FILTERS_RIGHT,
     totalCardData: totalCardData,
-    onChangeFilters: onChangeFilters
+    onChangeFilters: onChangeFilters,
+    initialTypeChart: initialTypeChart
   };
 };
 
@@ -27248,7 +27794,9 @@ var StudentItemSelector = function StudentItemSelector(_ref) {
       onChange = _ref.onChange,
       externalStudentIds = _ref.externalStudentIds,
       studentDefault = _ref.studentDefault,
-      teacherUserId = _ref.teacherUserId;
+      teacherUserId = _ref.teacherUserId,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? "Search student" : _ref$placeholder;
   var dispatch = useDispatch();
 
   var _useState = useState([]),
@@ -27326,7 +27874,7 @@ var StudentItemSelector = function StudentItemSelector(_ref) {
       return setSearchString(inputValue);
     },
     isLoading: isLoading,
-    placeholder: "Search student",
+    placeholder: placeholder,
     defaultValue: value,
     onChange: onChange,
     isClearable: true
@@ -27381,16 +27929,18 @@ var TeacherItemSelector = function TeacherItemSelector(_ref) {
 };
 
 var SelectFilter = function SelectFilter(_ref) {
-  var teacherId = _ref.teacherId,
-      studentUserId = _ref.studentUserId,
+  var studentUserId = _ref.studentUserId,
       studentId = _ref.studentId,
-      teacherUserId = _ref.teacherUserId,
       studentDefault = _ref.studentDefault,
       handleChangeFilters = _ref.handleChangeFilters,
       name = _ref.name,
       icon = _ref.icon,
       option = _ref.option,
-      onChangeFilters = _ref.onChangeFilters;
+      onChangeFilters = _ref.onChangeFilters,
+      btnStyle = _ref.btnStyle,
+      filter = _ref.filter,
+      teacherUserId = _ref.teacherUserId,
+      changeCurrentTeacherUserId = _ref.changeCurrentTeacherUserId;
 
   var _useState = useState(false),
       isOpenCollapse = _useState[0],
@@ -27661,6 +28211,7 @@ var SelectFilter = function SelectFilter(_ref) {
       }, React.createElement(TeacherItemSelector, {
         onChange: function onChange(e) {
           handleChangeFilters(e);
+          !!changeCurrentTeacherUserId && changeCurrentTeacherUserId(e.teacherUserId || "");
 
           if (!(e !== null && e !== void 0 && e.label)) {
             setTeacherName("");
@@ -27668,7 +28219,7 @@ var SelectFilter = function SelectFilter(_ref) {
             setTeacherName(e.label);
           }
         },
-        defaultValue: teacherId,
+        defaultValue: filter === null || filter === void 0 ? void 0 : filter.teacherId,
         studentUserId: studentUserId || ""
       })));
     }
@@ -27679,7 +28230,8 @@ var SelectFilter = function SelectFilter(_ref) {
         className: styles["block-filter-component"] + " "
       }, React.createElement("button", {
         onClick: handleToggleCollapse,
-        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer",
+        style: btnStyle
       }, React.createElement("img", {
         src: "" + icon,
         alt: name
@@ -27693,14 +28245,14 @@ var SelectFilter = function SelectFilter(_ref) {
 
           if (!(e !== null && e !== void 0 && e.label)) {
             setStudentName("");
-            setTeacherName("");
           } else {
             setStudentName(e.label);
           }
         },
         value: studentId,
         studentDefault: studentDefault,
-        teacherUserId: teacherUserId
+        teacherUserId: teacherUserId,
+        placeholder: "Type 2 characters to search"
       })));
     }
 
@@ -27729,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,
@@ -27737,17 +29061,69 @@ var Dashboard = function Dashboard() {
       LIST_FILTERS_LEFT = _useChartDatas.LIST_FILTERS_LEFT,
       LIST_FILTERS_RIGHT = _useChartDatas.LIST_FILTERS_RIGHT,
       totalCardData = _useChartDatas.totalCardData,
-      onChangeFilters = _useChartDatas.onChangeFilters;
+      onChangeFilters = _useChartDatas.onChangeFilters,
+      initialTypeChart = _useChartDatas.initialTypeChart;
 
-  var _useBehavior = useBehavior(),
+  var _useBehavior = useBehavior(initialTypeChart),
       chartIsOpened = _useBehavior.chartIsOpened,
       _onToggle = _useBehavior.onToggle,
       _onChangeChart = _useBehavior.onChangeChart,
-      typeChartList = _useBehavior.typeChartList;
+      typeChartList = _useBehavior.typeChartList,
+      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"
@@ -27758,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", {
@@ -27789,7 +29166,13 @@ var Dashboard = function Dashboard() {
       filter: filter,
       studentId: e.studentId || 0,
       studentDefault: e.studentDefault,
-      onChangeFilters: onChangeFilters
+      onChangeFilters: onChangeFilters,
+      teacherUserId: teacherUserId,
+      changeCurrentTeacherUserId: changeCurrentTeacherUserId,
+      btnStyle: e.name === FILTER_NAME.StudentName ? {
+        minWidth: 220,
+        justifyContent: "center"
+      } : {}
     });
   }))), React.createElement("div", {
     className: "d-flex align-items-center justify-content-between flex-wrap mb-3"
@@ -27816,7 +29199,8 @@ var Dashboard = function Dashboard() {
       onChangeChart: function onChangeChart(type) {
         return _onChangeChart(index, type);
       },
-      isOpen: chartIsOpened[index]
+      isOpen: chartIsOpened[index],
+      options: chartDashBoard.options
     }), React.createElement(Collapse, {
       isOpen: chartIsOpened[index]
     }, chartDashBoard.children(typeChartList[index])));