mario-education 2.4.185-level → 2.4.187-level

package/dist/index.js

@@ -1244,6 +1244,7 @@ var FILTER_NAME;
   FILTER_NAME["EndDate"] = "end_date";
   FILTER_NAME["FavoriteSurvey"] = "favorite_survey";
   FILTER_NAME["AcademicYear"] = "academic_year";
+  FILTER_NAME["ShowBy"] = "show_by";
 })(FILTER_NAME || (FILTER_NAME = {}));
 
 var header$1 = "Conference rubric";
@@ -22525,6 +22526,13 @@ var FILTER_YEAR;
   FILTER_YEAR[FILTER_YEAR["LAST_DAY"] = 4] = "LAST_DAY";
 })(FILTER_YEAR || (FILTER_YEAR = {}));
 
+var FILTER_SHOW_BY;
+
+(function (FILTER_SHOW_BY) {
+  FILTER_SHOW_BY["MONTH"] = "Month";
+  FILTER_SHOW_BY["WEEK"] = "Week";
+})(FILTER_SHOW_BY || (FILTER_SHOW_BY = {}));
+
 var TYPECHART;
 
 (function (TYPECHART) {
@@ -28759,7 +28767,7 @@ var convertDataToSeriesBullderChart = function convertDataToSeriesBullderChart(d
     };
   });
 };
-var optionColumnChartAndPercents = function optionColumnChartAndPercents(months, activeData, isRidgeCharts, colors, dayOfWeek) {
+var optionColumnChartAndPercents = function optionColumnChartAndPercents(months, activeData, isRidgeCharts, colors, dayOfWeek, isCountSeries) {
   return {
     chart: {
       height: 350,
@@ -28840,7 +28848,8 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
           cssClass: "apexcharts-yaxis-label"
         },
         formatter: function formatter(value) {
-          return value + "%";
+          var roundedValue = Math.round(value);
+          return !isCountSeries ? roundedValue + "%" : roundedValue.toString();
         },
         offsetX: 0,
         offsetY: 0,
@@ -28972,7 +28981,7 @@ var optionLineChart = function optionLineChart(months, activeData, colors, dayOf
     }
   };
 };
-var overallDonutCHartOptions = function overallDonutCHartOptions(labelNames, colors) {
+var overallDonutCHartOptions = function overallDonutCHartOptions(labelNames, colors, isCountSeries, textColors) {
   return {
     legend: {
       show: false,
@@ -29000,15 +29009,20 @@ var overallDonutCHartOptions = function overallDonutCHartOptions(labelNames, col
       theme: "palette5",
       y: {
         formatter: function formatter(value) {
-          return value.toFixed(1).toString() + "%";
+          return !isCountSeries ? value.toFixed(1).toString() + "%" : value.toString();
         }
       }
     },
     colors: colors,
     dataLabels: {
       enabled: true,
+      formatter: function formatter(val, opt) {
+        var _opt$w, _opt$w$globals, _opt$w$globals$series;
+
+        return !isCountSeries ? val.toFixed(1) + "%" : opt === null || opt === void 0 ? void 0 : (_opt$w = opt.w) === null || _opt$w === void 0 ? void 0 : (_opt$w$globals = _opt$w.globals) === null || _opt$w$globals === void 0 ? void 0 : (_opt$w$globals$series = _opt$w$globals.series) === null || _opt$w$globals$series === void 0 ? void 0 : _opt$w$globals$series[opt === null || opt === void 0 ? void 0 : opt.seriesIndex];
+      },
       style: {
-        colors: ["#242424", "#242424"],
+        colors: textColors || ["#242424", "#242424"],
         fontSize: "12px",
         fontFamily: "Poppins-Regular !important"
       },
@@ -29094,6 +29108,13 @@ var handleAveraged = function handleAveraged(points) {
   }, 0);
   return total / points.length;
 };
+var handleGenerateAvgQuestion = function handleGenerateAvgQuestion(data, avgContent) {
+  var _handleAveraged$toFix, _handleAveraged, _data$reduce;
+
+  return !avgContent ? "AVR. " + ((_handleAveraged$toFix = (_handleAveraged = handleAveraged(data)) === null || _handleAveraged === void 0 ? void 0 : _handleAveraged.toFixed(2)) != null ? _handleAveraged$toFix : 0) + "%" : ((_data$reduce = data.reduce(function (accumulator, currentValue) {
+    return accumulator + currentValue;
+  }, 0)) != null ? _data$reduce : 0) + " " + avgContent;
+};
 
 var REPORT_URL = marioCore.BASE_URL + "/api/report";
 var BAND_SCORE = marioCore.BASE_URL + "/api/bandScore";
@@ -29169,11 +29190,6 @@ var getGrades = function getGrades(studentUserId, academicYearId) {
 var getBandScore = function getBandScore() {
   return marioCore.api.get("" + BAND_SCORE);
 };
-var getTopMostSurveyUsed = function getTopMostSurveyUsed(filter) {
-  return marioCore.api.get(REPORT_URL + "/top-most-survey-used", {
-    params: filter
-  });
-};
 var getAllTotalSurvey = function getAllTotalSurvey(filter) {
   return marioCore.api.get(REPORT_URL + "/dashboard-survey-total", {
     params: filter
@@ -29189,6 +29205,11 @@ var getDashboardTemplateSurvey = function getDashboardTemplateSurvey(filters) {
     params: filters
   });
 };
+var getDashboardTotalSurvey = function getDashboardTotalSurvey(filters) {
+  return marioCore.api.get(REPORT_URL + "/get-dashboard-total-survey", {
+    params: filters
+  });
+};
 var getAllAcademicYearApi = function getAllAcademicYearApi(filters) {
   return marioCore.api.get(ACADEMIC_YEAR_URL$1, {
     params: filters
@@ -30152,6 +30173,27 @@ var SelectFilter = function SelectFilter(_ref) {
     }
   };
 
+  var onChangeShowBy = function onChangeShowBy(showBy) {
+    console.log({
+      showBy: showBy
+    });
+    setLabelBox(_extends({}, labelBox, {
+      showBy: showBy
+    }));
+
+    if (!showBy) {
+      !!onChangeFilters && onChangeFilters({
+        showBy: "",
+        optionDate: ""
+      });
+    } else {
+      !!onChangeFilters && onChangeFilters({
+        showBy: showBy.showBy,
+        optionDate: showBy.value
+      });
+    }
+  };
+
   var handleResetCalendar = function handleResetCalendar() {
     setLabelBox(_extends({}, labelBox, {
       calendarTime: undefined
@@ -30163,6 +30205,16 @@ var SelectFilter = function SelectFilter(_ref) {
     });
   };
 
+  var handleResetShowBy = function handleResetShowBy() {
+    setLabelBox(_extends({}, labelBox, {
+      showBy: undefined
+    }));
+    !!onChangeFilters && onChangeFilters({
+      showBy: "",
+      optionDate: ""
+    });
+  };
+
   var onChangeBandScore = function onChangeBandScore(score) {
     setLabelBox(_extends({}, labelBox, {
       bandScore: score.value
@@ -30526,6 +30578,56 @@ var SelectFilter = function SelectFilter(_ref) {
       }))));
     }
 
+    if (name == FILTER_NAME.ShowBy) {
+      var showByOption = option === null || option === void 0 ? void 0 : option.find(function (i) {
+        var _labelBox$showBy;
+
+        return i.label === ((_labelBox$showBy = labelBox.showBy) === null || _labelBox$showBy === void 0 ? void 0 : _labelBox$showBy.label);
+      });
+      return React__default.createElement("div", {
+        key: "" + name,
+        className: styles["block-filter-component"] + " ",
+        ref: ref
+      }, React__default.createElement("button", {
+        onClick: handleToggleCollapse,
+        className: styles["btn-filter"] + " d-flex align-items-center cursor-pointer"
+      }, React__default.createElement("img", {
+        src: "" + icon,
+        alt: name
+      }), React__default.createElement("p", {
+        className: styles["color-filter"] + " my-0 mx-2"
+      }, !labelBox.showBy ? "" + t('Show by') : showByOption === null || showByOption === void 0 ? void 0 : showByOption.label), !!showByOption && !!labelBox.showBy && React__default.createElement(io.IoMdClose, {
+        className: "mx-2",
+        onClick: handleResetShowBy
+      }), !isOpenCollapse ? React__default.createElement(fi.FiChevronDown, null) : React__default.createElement(fi.FiChevronUp, null)), React__default.createElement("div", {
+        className: styles["select-filter-component"] + " " + (!isOpenCollapse && "" + styles["hidden"])
+      }, React__default.createElement(reactstrap.Form, {
+        className: styles["box-select"] + " " + styles["box-select-format"]
+      }, option === null || option === void 0 ? void 0 : option.map(function (e) {
+        var _labelBox$showBy2;
+
+        return React__default.createElement(reactstrap.FormGroup, {
+          check: true,
+          className: "my-2 px-3",
+          key: "" + e.label
+        }, React__default.createElement(reactstrap.Input, {
+          id: e.label,
+          name: "calendar",
+          value: [e.label],
+          type: "radio",
+          className: "" + styles["radio-btn"],
+          checked: ((_labelBox$showBy2 = labelBox.showBy) === null || _labelBox$showBy2 === void 0 ? void 0 : _labelBox$showBy2.label) === e.label,
+          onChange: function onChange() {
+            return onChangeShowBy(e);
+          }
+        }), React__default.createElement(reactstrap.Label, {
+          check: true,
+          "for": e.label,
+          className: "" + styles["box-select-label"]
+        }, React__default.createElement("p", null, e.label)));
+      }))));
+    }
+
     if (name == FILTER_NAME.FavoriteSurvey) {
       var _option$find5;
 
@@ -30600,8 +30702,9 @@ var AreaChart = function AreaChart(_ref) {
       months = _ref.months,
       activeColumn = _ref.activeColumn,
       colors = _ref.colors,
-      dayOfWeek = _ref.dayOfWeek;
-  var options = optionColumnChartAndPercents(months, activeColumn, true, colors, dayOfWeek);
+      dayOfWeek = _ref.dayOfWeek,
+      isCountSeries = _ref.isCountSeries;
+  var options = optionColumnChartAndPercents(months, activeColumn, true, colors, dayOfWeek, isCountSeries);
   options.tooltip = {
     custom: function custom(_ref2) {
       var dataPointIndex = _ref2.dataPointIndex,
@@ -30611,7 +30714,7 @@ var AreaChart = function AreaChart(_ref) {
       return "<div class=" + styles$1["custom-tooltip"] + "> \n               <p class=" + styles$1["custom-tooltip-month"] + "> " + dayOfWeek[dataPointIndex] + " </p>\n               " + seriesItem.map(function (r, index) {
         var _r$data$dataPointInde;
 
-        return "<div key={" + index + "} class=" + styles$1["tooltip-data-box"] + ">\n                      <div class=" + styles$1["tooltip-data-cursor"] + " style=\"background: " + colorsItem[index] + "\"></div>\n                      <div class=" + styles$1["tooltip-data"] + ">\n                        <p  class=" + styles$1["name"] + ">" + r.name + ":</p>\n                        <p class=" + styles$1["data"] + ">" + ((_r$data$dataPointInde = r.data[dataPointIndex]) === null || _r$data$dataPointInde === void 0 ? void 0 : _r$data$dataPointInde.toFixed(2)) + "%</p>\n                      </div>\n                    </div>";
+        return "<div key={" + index + "} class=" + styles$1["tooltip-data-box"] + ">\n                      <div class=" + styles$1["tooltip-data-cursor"] + " style=\"background: " + colorsItem[index] + "\"></div>\n                      <div class=" + styles$1["tooltip-data"] + ">\n                        <p  class=" + styles$1["name"] + ">" + r.name + ":</p>\n                        <p class=" + styles$1["data"] + ">" + (!isCountSeries ? ((_r$data$dataPointInde = r.data[dataPointIndex]) === null || _r$data$dataPointInde === void 0 ? void 0 : _r$data$dataPointInde.toFixed(2)) + "%" : r.data[dataPointIndex]) + "</p>\n                      </div>\n                    </div>";
       }) + "\n            </div>";
     }
   };
@@ -30675,9 +30778,11 @@ var OverallDonutChart = function OverallDonutChart(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? "100%" : _ref$width,
       _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 250 : _ref$height;
+      height = _ref$height === void 0 ? 250 : _ref$height,
+      isCountSeries = _ref.isCountSeries,
+      textColors = _ref.textColors;
   return React__default.createElement(Chart, {
-    options: overallDonutCHartOptions(label, colors),
+    options: overallDonutCHartOptions(label, colors, isCountSeries, textColors),
     series: series,
     type: "donut",
     width: width,
@@ -30701,7 +30806,9 @@ var GenerateChartData = function GenerateChartData(_ref) {
       timeOfDay = _ref.timeOfDay,
       isPrint = _ref.isPrint,
       width = _ref.width,
-      height = _ref.height;
+      height = _ref.height,
+      avgContent = _ref.avgContent,
+      textColors = _ref.textColors;
   var avgs = [];
 
   var _loop = function _loop(i) {
@@ -30752,7 +30859,7 @@ var GenerateChartData = function GenerateChartData(_ref) {
   })), React__default.createElement("div", {
     className: styles$1["listItem"] + " " + (!onActiveColumn && styles$1["ml-10"])
   }, series.map(function (item, index) {
-    var _handleAveraged$toFix, _handleAveraged, _Math$abs, _Math$abs2;
+    var _handleGenerateAvgQue, _Math$abs, _Math$abs2;
 
     var isStressQuestion = item.name.toLocaleLowerCase().includes("stress");
     var classArrowUp = !isStressQuestion ? "arrow-up" : "arrow-down";
@@ -30782,7 +30889,7 @@ var GenerateChartData = function GenerateChartData(_ref) {
       className: "" + styles$1["label-chart"]
     }, item.name)), React__default.createElement("p", {
       className: "" + styles$1["avr-question"]
-    }, "AVR. " + ((_handleAveraged$toFix = (_handleAveraged = handleAveraged(item.data)) === null || _handleAveraged === void 0 ? void 0 : _handleAveraged.toFixed(2)) != null ? _handleAveraged$toFix : 0) + "%"), React__default.createElement("div", {
+    }, "" + ((_handleGenerateAvgQue = handleGenerateAvgQuestion(item.data, avgContent)) != null ? _handleGenerateAvgQue : 0)), React__default.createElement("div", {
       hidden: avgs.length == 0 || !timeOfDay,
       className: "" + styles$1["volatility"]
     }, avgs[index] < 0 ? React__default.createElement("div", {
@@ -30813,6 +30920,7 @@ var GenerateChartData = function GenerateChartData(_ref) {
   })), React__default.createElement("div", {
     className: "w-100 " + (isPrint && typeChart === TYPECHART.DONUT ? "d-flex justify-content-center" : "")
   }, typeChart === TYPECHART.AREA && React__default.createElement(AreaChart, {
+    isCountSeries: !!avgContent,
     months: months,
     activeColumn: activeColumn,
     series: newSeries,
@@ -30831,11 +30939,13 @@ var GenerateChartData = function GenerateChartData(_ref) {
     dayOfWeek: dayOfWeek,
     colors: colors
   }), typeChart === TYPECHART.DONUT && React__default.createElement(OverallDonutChart, {
+    isCountSeries: !!avgContent,
     series: seriesDonut,
     colors: colors,
     label: label,
     width: width,
-    height: height
+    height: height,
+    textColors: textColors
   })));
 };
 
@@ -32463,7 +32573,7 @@ var useExportSessionCsv = function useExportSessionCsv() {
     var headers = "Student Name,ID/Email,Question,Answer,Teacher,Start Time";
 
     if (startDate || endDate) {
-      headers = "" + (moment(startDate).isValid() ? moment(startDate).format("DD/MM/YYYY") : '') + (moment(startDate).isValid() && moment(endDate).isValid() ? '-' : '') + moment(endDate).format("DD/MM/YYYY") + "\n" + headers;
+      headers = "\"" + (moment(startDate).isValid() ? 'From: ' + moment(startDate).format("DD/MM/YYYY") : '') + (moment(startDate).isValid() && moment(endDate).isValid() ? ' - ' : '') + (moment(endDate).isValid() ? 'To: ' + moment(endDate).format("DD/MM/YYYY") : '') + "\"\n" + headers;
     }
 
     var questions = data.questions,
@@ -34146,7 +34256,7 @@ var AdminTraining = function AdminTraining() {
   })));
 };
 
-var styles$2 = {"dashboard-card":"_3U9cF","quantity-table":"_3lYP4","label-chart":"_EIKHR","size-icon":"_3waCS","block-dashboard":"_2n_zv","size-arrow":"_36sKX","color-down":"_1TjNf","color-up":"_i4rwq","box-filter":"_BlYR7","title-card":"_3fBK1","value-card":"_2w6yc","deviant-card":"_1aq6C","filter-card":"_2lX51","box-skill-item":"_jGO7A","numerical-order":"_2dXys","backoround-top-skill":"_3-8WB","color-filter":"_5QHKk","btn-filter":"_2UyJG","block-collapse":"_1SL-6","form-date-picker":"_pKQ8e","bock-filter-left":"_2eZGm","bock-filter-right":"_dz04Q","form-filter-right":"_OhjkA","form-filter-left":"_-q4tF","bock-filter-wrap":"_nukn6","title-card-box":"_2ysrj","box-item":"_37HdU","image-no-data":"_-jYtE","image-grade":"_2FOHk","chart-data":"_38Xgv","apexcharts-datalabels":"_3m9ET","apexcharts-pie-label":"_3QJAM","image-custom":"_11W3J","image-special-need":"_2-frJ","title-dashboard":"_1_YyD","box-chart":"_xbK6p","block-filter-right":"_11sYZ","shadow-lg":"_rFfwe","chart-header-wrapper":"_zLI7s","devide-component":"_OoZLR","header-chart":"_3mzht","header-left":"_2gXQT","icon-chart":"_3XABq","header-right":"_1FHsv","header-title":"_2JBD5","button-export":"_2OEd7","button-content":"_2nyRe","button-icon":"_31EdD","icon-config":"_TmymT","cursor-pointer":"_3X_ow","btn-show-chart":"_1qdL4","checkbox-chart":"_PghQI","column-chart-percent":"_12jqi","chart-background":"_2rwg5","custom-marker":"_3iwnG","mark-custom":"_rKYWD","item-legend":"_n_lnI","label-legend-custom":"_3hlTa","mark-legend":"_1LGIl","percent":"_1mr1m","listItem":"_E_ciE","item":"_27ojF","student-by-age":"_2KJYt","total-student":"_hEgnv","pie-chart":"_34-k0","options-gender":"_119UL","legend":"_tlvnI","text-lengend":"_2Ehxf","student-by-grade":"_L1RnZ","bubble-chart-custom":"_18zab","x-axis-custom-wrap":"_1NRsG","axis-content":"_1jDpB","legend-wrap":"_93MRp","list-percent":"_3ipHU","percent-item":"_35mGN","chart-custom":"_1769M","chart-buddle":"_ton1p","title-grade":"_2LTMk","title-modal":"_3f2-D","header-desc-modal":"_19k86","form-checkbox":"_2ZpLB","checkbox-content":"_jLDZ4","btn-export":"_2sMK7","title-chart":"_1E7vX","image-logo":"_3Xggx","chart-to-canvas":"_3zQW_","box-chart-title":"_2HMn5","chart-view-dashboard":"_1qtzK","chart-left":"_g4q-z","chart-right":"_9ibzA","block-header-chart":"_1s7DG","item-checkbox":"_5wSJP","check-box":"_1h1ro","legend-pie-custom":"_2MTrM","legend-item":"_2kriq","color-box":"_jOIdn","filter-mobile-block":"_1bZCU","filter-wrapper-mobile":"_FjhpG","gap-8px":"_4SQcs"};
+var styles$2 = {"dashboard-card":"_3U9cF","quantity-table":"_3lYP4","label-chart":"_EIKHR","size-icon":"_3waCS","survey-dashboard-chart":"_Dr0mP","survey-donut-chart":"_2aFDQ","size-arrow":"_36sKX","color-down":"_1TjNf","color-up":"_i4rwq","box-filter":"_BlYR7","title-card":"_3fBK1","value-card":"_2w6yc","deviant-card":"_1aq6C","filter-card":"_2lX51","box-skill-item":"_jGO7A","numerical-order":"_2dXys","backoround-top-skill":"_3-8WB","color-filter":"_5QHKk","btn-filter":"_2UyJG","block-collapse":"_1SL-6","form-date-picker":"_pKQ8e","bock-filter-left":"_2eZGm","bock-filter-right":"_dz04Q","form-filter-right":"_OhjkA","form-filter-left":"_-q4tF","bock-filter-wrap":"_nukn6","title-card-box":"_2ysrj","box-item":"_37HdU","image-no-data":"_-jYtE","image-grade":"_2FOHk","chart-data":"_38Xgv","apexcharts-datalabels":"_3m9ET","apexcharts-pie-label":"_3QJAM","image-custom":"_11W3J","image-special-need":"_2-frJ","title-dashboard":"_1_YyD","box-chart":"_xbK6p","block-filter-right":"_11sYZ","shadow-lg":"_rFfwe","chart-header-wrapper":"_zLI7s","devide-component":"_OoZLR","header-chart":"_3mzht","header-left":"_2gXQT","icon-chart":"_3XABq","header-right":"_1FHsv","header-title":"_2JBD5","button-export":"_2OEd7","button-content":"_2nyRe","button-icon":"_31EdD","icon-config":"_TmymT","cursor-pointer":"_3X_ow","btn-show-chart":"_1qdL4","checkbox-chart":"_PghQI","column-chart-percent":"_12jqi","chart-background":"_2rwg5","custom-marker":"_3iwnG","mark-custom":"_rKYWD","item-legend":"_n_lnI","label-legend-custom":"_3hlTa","mark-legend":"_1LGIl","percent":"_1mr1m","listItem":"_E_ciE","item":"_27ojF","student-by-age":"_2KJYt","total-student":"_hEgnv","pie-chart":"_34-k0","options-gender":"_119UL","legend":"_tlvnI","text-lengend":"_2Ehxf","student-by-grade":"_L1RnZ","bubble-chart-custom":"_18zab","x-axis-custom-wrap":"_1NRsG","axis-content":"_1jDpB","legend-wrap":"_93MRp","list-percent":"_3ipHU","percent-item":"_35mGN","chart-custom":"_1769M","chart-buddle":"_ton1p","title-grade":"_2LTMk","title-modal":"_3f2-D","header-desc-modal":"_19k86","form-checkbox":"_2ZpLB","checkbox-content":"_jLDZ4","btn-export":"_2sMK7","title-chart":"_1E7vX","image-logo":"_3Xggx","chart-to-canvas":"_3zQW_","box-chart-title":"_2HMn5","chart-view-dashboard":"_1qtzK","chart-left":"_g4q-z","chart-right":"_9ibzA","block-header-chart":"_1s7DG","item-checkbox":"_5wSJP","check-box":"_1h1ro","legend-pie-custom":"_2MTrM","legend-item":"_2kriq","color-box":"_jOIdn","filter-mobile-block":"_1bZCU","block-dashboard":"_2n_zv","filter-wrapper-mobile":"_FjhpG","gap-8px":"_4SQcs"};
 
 var LegalGenderType$1;
 
@@ -34183,22 +34293,11 @@ var TYPECHART$1;
   TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
 })(TYPECHART$1 || (TYPECHART$1 = {}));
 
-var COLOR_CHART_AND_PERCENTS = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
-
-var COLOR_CHART_AND_PIE = ["#5A7F05", "#C94645", "#FFB04F"];
-var COLOR_LABEL_PIE = ["#006E60", "#FF7670", "#994700"];
 var GRAGE_DEFAULT$1 = ["K", "G", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
-var LABEL_NAME_PIE_CHART = ["Green", "Red", "Yellow"];
 var INITIAl_STUDENT_DASHBOARD$1 = {
   responseRate: 0,
   totalSurvey: 0
 };
-var INIT_TOP_MOST_SURVEY_USED = {
-  nameSurvey: "",
-  sendDateSurvey: new Date(),
-  percentSurvey: 0
-};
-var COLOR_CHART_AND_PERCENTS$1 = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
 var DEFAULT_START_DATE$1 = moment().subtract(2, 'months').startOf("day").valueOf();
 var DEFAULT_END_DATE$1 = moment().endOf("day").valueOf();
 var CALENDAR_OPTIONS$1 = [{
@@ -34214,7 +34313,13 @@ var CALENDAR_OPTIONS$1 = [{
   startDate: moment().startOf("month").valueOf(),
   endDate: moment().endOf("month").valueOf()
 }];
-var COLOR_NAME = ["Green", "Red", "Yellow"];
+var SHOW_BY_OPTIONS = [{
+  label: "Weeks",
+  showBy: "Week"
+}, {
+  label: "Months",
+  showBy: "Month"
+}];
 var TYPECHART$2;
 
 (function (TYPECHART) {
@@ -34222,10 +34327,9 @@ var TYPECHART$2;
   TYPECHART[TYPECHART["BAR"] = 1] = "BAR";
   TYPECHART[TYPECHART["LINE"] = 2] = "LINE";
   TYPECHART[TYPECHART["BOTH"] = 3] = "BOTH";
+  TYPECHART[TYPECHART["DONUT"] = 4] = "DONUT";
 })(TYPECHART$2 || (TYPECHART$2 = {}));
 
-var topMostSurveyNameUsed = "top_5_most_survey_used";
-
 var TotalCard$1 = function TotalCard(_ref) {
   var icon = _ref.icon,
       title = _ref.title,
@@ -34256,103 +34360,6 @@ var gradeOptions$1 = function gradeOptions(grades, studentUserId) {
     };
   });
 };
-var topMostSurveyChartOptions = function topMostSurveyChartOptions(labelNames, percentSurvey, isDonutChart) {
-  return {
-    legend: {
-      show: false,
-      fontFamily: 'Poppins-Regular !important'
-    },
-    chart: {
-      type: "bar",
-      toolbar: {
-        show: false
-      }
-    },
-    noData: {
-      text: "No data",
-      align: 'center',
-      verticalAlign: 'middle'
-    },
-    grid: {
-      strokeDashArray: 5,
-      borderColor: "#D3D3D3"
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        distributed: true,
-        borderRadius: 5
-      }
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: ["#fff"]
-    },
-    colors: ["#316CD9", "#5a89e1", "#83a7e8", "#adc4f0", "#eaf0fb"],
-    xaxis: {
-      categories: labelNames,
-      labels: {
-        show: true,
-        style: {
-          colors: ["#808080"],
-          fontSize: "14px",
-          fontFamily: 'Poppins-Regular !important',
-          fontWeight: 400,
-          cssClass: "apexcharts-yaxis-label"
-        }
-      }
-    },
-    labels: labelNames,
-    tooltip: {
-      x: {
-        formatter: function formatter(value) {
-          return value.toString();
-        }
-      },
-      y: {
-        formatter: function formatter(value) {
-          return value.toFixed(2).toString();
-        }
-      }
-    },
-    yaxis: {
-      min: 0,
-      max: 100,
-      labels: {
-        show: true,
-        align: "left",
-        minWidth: 0,
-        style: {
-          fontSize: "14px",
-          fontFamily: 'Poppins-Regular !important',
-          fontWeight: 400,
-          cssClass: "apexcharts-yaxis-label"
-        },
-        offsetX: 0,
-        offsetY: 0,
-        rotate: 0
-      }
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function formatter(val, opts) {
-        if (!val) {
-          return "";
-        }
-
-        if (!isDonutChart) {
-          return typeof val === "number" ? val.toFixed(2) + "%" : "" + val;
-        } else {
-          return percentSurvey[opts.seriesIndex];
-        }
-      },
-      style: {
-        colors: ["#FFFFFF", "#FFFFFF", "#FFFFFF", "#FFFFFF", "#242424"]
-      }
-    }
-  };
-};
 var getLastQuarterRange$1 = function getLastQuarterRange() {
   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();
@@ -34389,14 +34396,6 @@ var filterYearData$1 = [{
   endDate: moment().utc().add(-1, "days").endOf("day").valueOf()
 }];
 
-var handleViewSeriesActive = function handleViewSeriesActive(active) {
-  var _active$filter;
-
-  var item = ((_active$filter = active.filter(function (r) {
-    return r == true;
-  })) === null || _active$filter === void 0 ? void 0 : _active$filter.length) || 0;
-  return Array.from(Array(item).keys());
-};
 var convertDataToDataChart$1 = function convertDataToDataChart(data) {
   if (data.length > 0) {
     return data.reduce(function (acc, cur) {
@@ -34410,32 +34409,19 @@ var convertDataToDataChart$1 = function convertDataToDataChart(data) {
 
   return [];
 };
-var convertToSeriesTemplate = function convertToSeriesTemplate(data) {
+var convertToSeriesTemplate = function convertToSeriesTemplate(data, exact) {
   return convertDataToDataChart$1(data).map(function (dataName) {
     return {
       name: dataName,
       data: data.map(function (i) {
         var questionItem = i.surveyTemplate.find(function (question) {
-          return question.templateName.includes(dataName);
+          return exact ? question.templateName == dataName : question.templateName.includes(dataName);
         });
         return !!questionItem ? questionItem.avgTemplateSurvey : 0;
       })
     };
   });
 };
-var mergeBarChartAndArea = function mergeBarChartAndArea(series) {
-  var barChartSeries = series.map(function (i) {
-    return _extends({}, i, {
-      type: "bar"
-    });
-  });
-  var areaChartSeries = series.map(function (i) {
-    return _extends({}, i, {
-      type: "area"
-    });
-  });
-  return [].concat(barChartSeries, areaChartSeries);
-};
 var convertToAvg = function convertToAvg(dataCharts, data, months) {
   var result = dataCharts.map(function (dataName) {
     return Number(data.map(function (i) {
@@ -34456,7 +34442,7 @@ var useDashboard$1 = function useDashboard() {
   var dispatch = reactRedux.useDispatch();
 
   var _useState = React.useState({
-    calendar: "",
+    showBy: "",
     studentIds: [],
     studentId: undefined,
     teacherId: undefined,
@@ -34474,53 +34460,65 @@ var useDashboard$1 = function useDashboard() {
       listSurveyTotal = _useState2[0],
       setListSurveyTotal = _useState2[1];
 
-  var _useState3 = React.useState([INIT_TOP_MOST_SURVEY_USED]),
-      topMostSurveyUsed = _useState3[0],
-      setTopMostSurveyUsed = _useState3[1];
+  var _useState3 = React.useState([true]),
+      activeColumnResult = _useState3[0],
+      setActiveColumnResult = _useState3[1];
 
   var _useState4 = React.useState([]),
-      templateSurveyDashboard = _useState4[0],
-      setTemplateSurveyDashboard = _useState4[1];
+      avgResult = _useState4[0],
+      setAvgResult = _useState4[1];
 
-  var _useState5 = React.useState([true]),
-      activeColumnResult = _useState5[0],
-      setActiveColumnResult = _useState5[1];
+  var _useState5 = React.useState([]),
+      avgTotal = _useState5[0],
+      setAvgTotal = _useState5[1];
 
   var _useState6 = React.useState([]),
-      avgResult = _useState6[0],
-      setAvgResult = _useState6[1];
+      seriesResult = _useState6[0],
+      setSeriesResult = _useState6[1];
 
   var _useState7 = React.useState([]),
-      seriseResult = _useState7[0],
-      setSeriesResult = _useState7[1];
+      monthsSeriesResult = _useState7[0],
+      setMonthsSeriesResult = _useState7[1];
 
-  var _useState8 = React.useState([TYPECHART$2.BAR]),
-      typeChartList = _useState8[0],
-      setTypeChartList = _useState8[1];
+  var _useState8 = React.useState([]),
+      seriesTotal = _useState8[0],
+      setSeriesTotal = _useState8[1];
 
-  var _useState9 = React.useState(),
-      surveyFlagData = _useState9[0],
-      setSurveyFlagData = _useState9[1];
+  var _useState9 = React.useState([]),
+      monthsSeriesTotal = _useState9[0],
+      setMonthsSeriesTotal = _useState9[1];
 
   var _useState10 = React.useState([]),
-      studentByGrade = _useState10[0],
-      setStudentByGrade = _useState10[1];
+      surveyFlagData = _useState10[0],
+      setSurveyFlagData = _useState10[1];
+
+  var _useState11 = React.useState([]),
+      studentByGrade = _useState11[0],
+      setStudentByGrade = _useState11[1];
 
   var user = reactRedux.useSelector(function (state) {
     return state.common.user;
   });
 
-  var _useState11 = React.useState(undefined),
-      studentDefault = _useState11[0],
-      setStudentDefault = _useState11[1];
+  var _useState12 = React.useState(undefined),
+      studentDefault = _useState12[0],
+      setStudentDefault = _useState12[1];
+
+  var _useState13 = React.useState(""),
+      genderOfStudent = _useState13[0],
+      setGenderOfStudent = _useState13[1];
+
+  var _useState14 = React.useState(false),
+      isShowFilterMobile = _useState14[0],
+      setIsShowFilterMobile = _useState14[1];
 
-  var _useState12 = React.useState(""),
-      genderOfStudent = _useState12[0],
-      setGenderOfStudent = _useState12[1];
+  var _useState15 = React.useState([]),
+      dayOfWeekTotal = _useState15[0],
+      setDayOfWeekTotal = _useState15[1];
 
-  var _useState13 = React.useState(false),
-      isShowFilterMobile = _useState13[0],
-      setIsShowFilterMobile = _useState13[1];
+  var _useState16 = React.useState([]),
+      dayOfWeekResult = _useState16[0],
+      setDayOfWeekResult = _useState16[1];
 
   var handleChangeFilters = function handleChangeFilters(event) {
     var _extends2;
@@ -34629,7 +34627,7 @@ var useDashboard$1 = function useDashboard() {
     try {
       document.title = TITLE$B;
       dispatch(marioCore.setLoading(true));
-      return Promise.resolve(Promise.any([callApi(getAllTotalSurvey, setListSurveyTotal, []), callApi(getStudentByGrade, setStudentByGrade, []), callApi(getTopMostSurveyUsed, setTopMostSurveyUsed, []), callApi(getDashboardFlagSurvey, setSurveyFlagData, [])])).then(function () {
+      return Promise.resolve(Promise.any([callApi(getAllTotalSurvey, setListSurveyTotal, []), callApi(getStudentByGrade, setStudentByGrade, [])])).then(function () {
         dispatch(marioCore.setLoading(false));
       });
     } catch (e) {
@@ -34638,8 +34636,6 @@ var useDashboard$1 = function useDashboard() {
   }, [filter]);
 
   var handleActiveColumnOneToOne = function handleActiveColumnOneToOne(index) {
-    var _convertToSeriesTempl;
-
     var newActiveColumn = [].concat(activeColumnResult);
 
     if (newActiveColumn.filter(function (r) {
@@ -34654,25 +34650,8 @@ var useDashboard$1 = function useDashboard() {
 
     newActiveColumn[index] = !newActiveColumn[index];
     setActiveColumnResult(newActiveColumn);
-    setSeriesResult((_convertToSeriesTempl = convertToSeriesTemplate(templateSurveyDashboard)) === null || _convertToSeriesTempl === void 0 ? void 0 : _convertToSeriesTempl.filter(function (_, idx) {
-      return newActiveColumn[idx];
-    }));
   };
 
-  var onChangeChart = React.useCallback(function (type) {
-    var indexType = typeChartList.findIndex(function (r) {
-      return r === type;
-    });
-    var newListTypeChart = typeChartList || [];
-
-    if (indexType >= 0) {
-      newListTypeChart.length > 1 && newListTypeChart.splice(indexType, 1);
-    } else {
-      newListTypeChart.push(type);
-    }
-
-    setTypeChartList([].concat(newListTypeChart));
-  }, [typeChartList]);
   var getDashBoardTemplate = React.useCallback(function () {
     try {
       var _temp9 = function _temp9() {
@@ -34686,22 +34665,14 @@ var useDashboard$1 = function useDashboard() {
           if (!!res) {
             var dataConvert = convertToSeriesTemplate(res.data);
             var dataChart = convertDataToDataChart$1(res.data);
-            var avg = convertToAvg(dataChart, res.data, res.data.map(function (r) {
+            var months = res.data.map(function (r) {
               return r.month || "";
-            }));
+            });
+            var avg = convertToAvg(dataChart, res.data, months);
+            setDayOfWeekResult(months);
             setAvgResult(avg);
-            setTemplateSurveyDashboard(res.data);
-            setSeriesResult(dataConvert.filter(function (_, idx) {
-              return activeColumnResult[idx];
-            }));
-
-            if (activeColumnResult.filter(function (r) {
-              return r == true;
-            }).length == 0 || activeColumnResult.length != activeColumnResult.length) {
-              setActiveColumnResult([true].concat(dataConvert.map(function (_i) {
-                return false;
-              }).splice(0, dataConvert.length - 1)));
-            }
+            setSeriesResult(dataConvert);
+            setMonthsSeriesResult(months);
           }
         });
       }, function (err) {
@@ -34718,10 +34689,88 @@ var useDashboard$1 = function useDashboard() {
       return Promise.reject(e);
     }
   }, [filter, activeColumnResult]);
+  var getDashboardTotal = React.useCallback(function () {
+    try {
+      var _temp13 = function _temp13() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp14 = _catch(function () {
+        return Promise.resolve(getDashboardTotalSurvey(filter)).then(function (res) {
+          if (!!res) {
+            var dataConvert = convertToSeriesTemplate(res.data, true);
+            var dataChart = convertDataToDataChart$1(res.data);
+            var months = res.data.map(function (r) {
+              return r.month || "";
+            });
+            var avg = convertToAvg(dataChart, res.data, months);
+            setDayOfWeekTotal(months);
+            setAvgTotal(avg);
+            setSeriesTotal(dataConvert);
+            setMonthsSeriesTotal(months);
+          }
+        });
+      }, function (err) {
+        var _err$response4, _err$response4$data;
+
+        dispatch(marioCore.setAlert({
+          type: "danger",
+          message: ((_err$response4 = err.response) === null || _err$response4 === void 0 ? void 0 : (_err$response4$data = _err$response4.data) === null || _err$response4$data === void 0 ? void 0 : _err$response4$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp14 && _temp14.then ? _temp14.then(_temp13) : _temp13(_temp14));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [JSON.stringify(filter)]);
+  var getDashboardFlags = React.useCallback(function () {
+    try {
+      var _temp17 = function _temp17() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp18 = _catch(function () {
+        return Promise.resolve(getDashboardFlagSurvey(filter)).then(function (res) {
+          var data = res.data;
+
+          if (!!data) {
+            setSurveyFlagData([{
+              name: "Red",
+              data: [data.numberSurveyRed || 0]
+            }, {
+              name: "Yellow",
+              data: [data.numberSurveyYellow || 0]
+            }, {
+              name: "Green",
+              data: [data.numberSurveyBlue || 0]
+            }]);
+          }
+        });
+      }, function (err) {
+        var _err$response5, _err$response5$data;
+
+        dispatch(marioCore.setAlert({
+          type: "danger",
+          message: ((_err$response5 = err.response) === null || _err$response5 === void 0 ? void 0 : (_err$response5$data = _err$response5.data) === null || _err$response5$data === void 0 ? void 0 : _err$response5$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp18 && _temp18.then ? _temp18.then(_temp17) : _temp17(_temp18));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [JSON.stringify(filter)]);
   React.useEffect(function () {
     getData();
     getDashBoardTemplate();
-  }, [filter]);
+    getDashboardTotal();
+    getDashboardFlags();
+  }, [JSON.stringify(filter)]);
   React.useEffect(function () {
     !!filter.studentUserId && callApiByStudentUserId(getGrades, handleSaveGradeFilter, filter.studentUserId, []);
   }, [filter.studentUserId]);
@@ -34739,23 +34788,24 @@ var useDashboard$1 = function useDashboard() {
     handleFilterStudent: handleFilterStudent,
     handleFilterTeacher: handleFilterTeacher,
     onChangeFilters: onChangeFilters,
-    topMostSurveyUsed: topMostSurveyUsed,
     surveyFlagData: surveyFlagData,
-    templateSurveyDashboard: templateSurveyDashboard,
     avgResult: avgResult,
-    seriseResult: seriseResult,
+    seriesResult: seriesResult,
     activeColumnResult: activeColumnResult,
+    avgTotal: avgTotal,
+    seriesTotal: seriesTotal,
     handleActiveColumnOneToOne: handleActiveColumnOneToOne,
-    typeChartList: typeChartList,
-    onChangeChart: onChangeChart,
     isShowFilterMobile: isShowFilterMobile,
-    setIsShowFilterMobile: setIsShowFilterMobile
+    setIsShowFilterMobile: setIsShowFilterMobile,
+    dayOfWeekTotal: dayOfWeekTotal,
+    dayOfWeekResult: dayOfWeekResult,
+    monthsSeriesResult: monthsSeriesResult,
+    monthsSeriesTotal: monthsSeriesTotal
   };
 };
 
 var useChartDatas$1 = function useChartDatas() {
   var _useDashboard = useDashboard$1(),
-      topMostSurveyUsed = _useDashboard.topMostSurveyUsed,
       handleChangeFilters = _useDashboard.handleChangeFilters,
       user = _useDashboard.user,
       studentDefault = _useDashboard.studentDefault,
@@ -34764,15 +34814,19 @@ var useChartDatas$1 = function useChartDatas() {
       listSurveyTotal = _useDashboard.listSurveyTotal,
       onChangeFilters = _useDashboard.onChangeFilters,
       surveyFlagData = _useDashboard.surveyFlagData,
-      templateSurveyDashboard = _useDashboard.templateSurveyDashboard,
       avgResult = _useDashboard.avgResult,
-      seriseResult = _useDashboard.seriseResult,
       activeColumnResult = _useDashboard.activeColumnResult,
       handleActiveColumnOneToOne = _useDashboard.handleActiveColumnOneToOne,
-      typeChartList = _useDashboard.typeChartList,
-      onChangeChart = _useDashboard.onChangeChart,
       isShowFilterMobile = _useDashboard.isShowFilterMobile,
-      setIsShowFilterMobile = _useDashboard.setIsShowFilterMobile;
+      setIsShowFilterMobile = _useDashboard.setIsShowFilterMobile,
+      dayOfWeekTotal = _useDashboard.dayOfWeekTotal,
+      avgTotal = _useDashboard.avgTotal,
+      dayOfWeekResult = _useDashboard.dayOfWeekResult,
+      genderOfStudent = _useDashboard.genderOfStudent,
+      seriesTotal = _useDashboard.seriesTotal,
+      seriesResult = _useDashboard.seriesResult,
+      monthsSeriesResult = _useDashboard.monthsSeriesResult,
+      monthsSeriesTotal = _useDashboard.monthsSeriesTotal;
 
   var _useState = React.useState([]),
       selectedToPrint = _useState[0],
@@ -34790,7 +34844,11 @@ var useChartDatas$1 = function useChartDatas() {
     grade: -1,
     bandScore: -1,
     favoriteSurvey: -1,
-    academicYearId: -1
+    academicYearId: -1,
+    showBy: {
+      value: FILTER_SHOW_BY.WEEK,
+      label: "Weeks"
+    }
   }),
       labelBox = _useState2[0],
       setLabelBox = _useState2[1];
@@ -34838,10 +34896,10 @@ var useChartDatas$1 = function useChartDatas() {
   };
 
   var LIST_FILTERS_LEFT = [{
-    name: FILTER_NAME.Calendar,
+    name: FILTER_NAME.ShowBy,
     icon: "/images/calendar.svg",
     handleChangeFilters: handleChangeFilters,
-    option: CALENDAR_OPTIONS$1,
+    option: SHOW_BY_OPTIONS,
     labelBox: labelBox,
     setLabelBox: setLabelBox
   }, {
@@ -34915,678 +34973,22 @@ var useChartDatas$1 = function useChartDatas() {
     checkSelectedItem: checkSelectedItem,
     selectedToPrint: selectedToPrint,
     setSelectedToPrint: setSelectedToPrint,
-    topMostSurveyUsed: topMostSurveyUsed,
     surveyFlagData: surveyFlagData,
-    templateSurveyDashboard: templateSurveyDashboard,
     avgResult: avgResult,
-    seriseResult: seriseResult,
     activeColumnResult: activeColumnResult,
     handleActiveColumnOneToOne: handleActiveColumnOneToOne,
-    typeChartList: typeChartList,
-    onChangeChart: onChangeChart,
     isShowFilterMobile: isShowFilterMobile,
-    setIsShowFilterMobile: setIsShowFilterMobile
-  };
-};
-
-var Loading$1 = function Loading() {
-  return React__default.createElement("div", {
-    className: "d-flex align-items-center justify-content-center"
-  }, React__default.createElement("div", {
-    className: "spinner-grow",
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  }, "Loading...")), React__default.createElement("div", {
-    className: "spinner-grow mx-2",
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  }, "Loading...")), React__default.createElement("div", {
-    className: "spinner-grow",
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  }, "Loading...")));
-};
-
-var TopMostSurveyUsed = function TopMostSurveyUsed(_ref) {
-  var data = _ref.data;
-  if (!data) return React__default.createElement(Loading$1, null);
-
-  var _useTranslation = marioCore.useTranslation(),
-      t = _useTranslation.t;
-
-  var labelNames = data === null || data === void 0 ? void 0 : data.map(function (i) {
-    return i.nameSurvey;
-  });
-  var labelTimes = data === null || data === void 0 ? void 0 : data.map(function (i) {
-    return marioCore.utcToLocalTime(i.sendDateSurvey.toString(), "Do MMMM yyyy - hh:mm A");
-  });
-  console.log({
-    labelTimes: labelTimes
-  });
-  var percentSurvey = data === null || data === void 0 ? void 0 : data.map(function (i) {
-    return i.percentSurvey;
-  });
-  var seriesLearningStrategy = [{
-    name: "Perceived Usefulness",
-    data: percentSurvey
-  }];
-  return React__default.createElement("div", {
-    className: "h-100 w-100 " + styles$2["chart-background"] + " pl-4"
-  }, React__default.createElement("div", {
-    className: "" + styles$2["block-header-chart"]
-  }, React__default.createElement("div", {
-    className: "" + styles$2["block-header-name"]
-  }, React__default.createElement("p", {
-    className: "" + styles$2["title-chart"]
-  }, t(topMostSurveyNameUsed)))), seriesLearningStrategy.some(function (i) {
-    return i.data;
-  }) ? React__default.createElement("div", null, React__default.createElement(Chart, {
-    options: topMostSurveyChartOptions(labelNames, percentSurvey),
-    series: seriesLearningStrategy,
-    type: "bar",
-    width: "100%",
-    height: 450
-  })) : React__default.createElement("img", {
-    className: styles$2["image-no-data"] + " " + styles$2["image-custom"],
-    src: "images/chart-top-learning.png"
-  }));
-};
-
-var propsAreEqual$2 = function propsAreEqual(preProps, nextProps) {
-  return JSON.stringify(preProps) === JSON.stringify(nextProps);
-};
-
-var TopMostSurveyUsed$1 = React__default.memo(TopMostSurveyUsed, propsAreEqual$2);
-
-var maxSeries = function maxSeries(series) {
-  var max = 0;
-
-  for (var i = 0; i < series.length; i++) {
-    max = Math.max.apply(Math, series[i].data.concat([max]));
-  }
-
-  return max;
-};
-var optionColumnChartAndPercents$1 = function optionColumnChartAndPercents(months, activeData, isRidgeCharts, isShowChartLabel, percentData, series) {
-  return {
-    chart: {
-      height: 350,
-      stacked: false,
-      toolbar: {
-        show: false,
-        "export": {
-          png: {
-            filename: "test"
-          }
-        }
-      }
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 5
-      }
-    },
-    dataLabels: {
-      enabled: false
-    },
-    fill: {
-      opacity: isRidgeCharts ? 0.2 : 1
-    },
-    colors: COLOR_CHART_AND_PERCENTS$1.filter(function (_, index) {
-      return activeData[index];
-    }),
-    stroke: {
-      curve: "smooth",
-      show: true,
-      colors: isRidgeCharts ? COLOR_CHART_AND_PERCENTS$1.filter(function (_, index) {
-        return activeData[index];
-      }) : ["#fff"],
-      width: 3,
-      dashArray: 0
-    },
-    xaxis: {
-      categories: months,
-      labels: {
-        show: months.length > 0 ? true : false,
-        style: {
-          colors: ["#808080"],
-          fontSize: "16px",
-          fontFamily: "Roboto",
-          fontWeight: 400,
-          cssClass: "apexcharts-yaxis-label"
-        }
-      },
-      axisTicks: {
-        show: months.length > 0 ? true : false
-      }
-    },
-    yaxis: {
-      tickAmount: 2,
-      min: 0,
-      max: percentData ? 100 : maxSeries(series || []),
-      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 "" + (!percentData ? value : value + "%");
-        },
-        offsetX: 0,
-        offsetY: 0,
-        rotate: 0
-      },
-      decimalsInFloat: 0
-    },
-    tooltip: {
-      shared: false,
-      y: {
-        formatter: function formatter(value) {
-          return "" + (!percentData ? value : value.toFixed(2) + "%");
-        }
-      },
-      onDatasetHover: {
-        highlightDataSeries: true
-      }
-    },
-    legend: {
-      show: isShowChartLabel
-    }
-  };
-};
-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$1.filter(function (_, index) {
-      return activeData[index];
-    }),
-    stroke: {
-      curve: "smooth",
-      show: true,
-      colors: COLOR_CHART_AND_PERCENTS$1.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: {
-      shared: false,
-      enabledOnSeries: handleViewSeriesActive(activeData),
-      y: {
-        formatter: function formatter(value) {
-          return value.toFixed(2) + "%";
-        }
-      },
-      onDatasetHover: {
-        highlightDataSeries: true
-      }
-    },
-    legend: {
-      show: false
-    }
+    setIsShowFilterMobile: setIsShowFilterMobile,
+    dayOfWeekTotal: dayOfWeekTotal,
+    avgTotal: avgTotal,
+    dayOfWeekResult: dayOfWeekResult,
+    genderOfStudent: genderOfStudent,
+    seriesTotal: seriesTotal,
+    seriesResult: seriesResult,
+    monthsSeriesResult: monthsSeriesResult,
+    monthsSeriesTotal: monthsSeriesTotal
   };
 };
-var pieChartOptions = {
-  labels: LABEL_NAME_PIE_CHART,
-  colors: COLOR_LABEL_PIE,
-  legend: {
-    show: false
-  },
-  chart: {
-    height: "100%"
-  },
-  plotOptions: {
-    pie: {
-      donut: {
-        size: "15%"
-      }
-    }
-  },
-  dataLabels: {
-    enabled: false
-  },
-  fill: {
-    colors: COLOR_CHART_AND_PIE
-  },
-  stroke: {
-    colors: COLOR_CHART_AND_PIE,
-    width: 1
-  },
-  states: {
-    normal: {
-      filter: {
-        type: "none",
-        value: 0
-      }
-    },
-    hover: {
-      filter: {
-        type: "none",
-        value: 0
-      }
-    },
-    active: {
-      filter: {
-        type: "none",
-        value: 0
-      }
-    }
-  }
-};
-
-var useContainerDimensions = function useContainerDimensions(myRef) {
-  var _myRef$current;
-
-  var _useState = React.useState({
-    width: 0,
-    height: 0
-  }),
-      dimensions = _useState[0],
-      setDimensions = _useState[1];
-
-  React.useEffect(function () {
-    var getDimensions = function getDimensions() {
-      return {
-        width: myRef.current.offsetWidth,
-        height: myRef.current.offsetHeight
-      };
-    };
-
-    var handleResize = function handleResize() {
-      setDimensions(getDimensions());
-    };
-
-    if (myRef.current) {
-      setDimensions(getDimensions());
-    }
-
-    window.addEventListener("resize", handleResize);
-    return function () {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [myRef === null || myRef === void 0 ? void 0 : (_myRef$current = myRef.current) === null || _myRef$current === void 0 ? void 0 : _myRef$current.offsetWidth]);
-  return dimensions;
-};
-
-var PieChart = function PieChart(_ref) {
-  var data = _ref.data,
-      name = _ref.name;
-  var ref = React.useRef(null);
-
-  var _useContainerDimensio = useContainerDimensions(ref),
-      width = _useContainerDimensio.width;
-
-  var screenWidth = window.innerWidth;
-  if (!data) return React__default.createElement("div", {
-    className: "flex justify-content-center align-items-center",
-    style: {
-      height: 450
-    }
-  }, React__default.createElement("div", null, "No Data"));
-  var series = [data.numberSurveyBlue, data.numberSurveyRed, data.numberSurveyYellow];
-  return React__default.createElement("div", {
-    className: styles$2["pie-chart"],
-    ref: ref
-  }, React__default.createElement("div", {
-    className: styles$2["box-chart-title"]
-  }, React__default.createElement("p", {
-    className: styles$2["title-chart"] + " pl-4 pl-md-0"
-  }, name)), React__default.createElement("div", {
-    className: styles$2["box-chart"] + " " + (width == 0 && styles$2["h-75"])
-  }, React__default.createElement(Chart, {
-    options: pieChartOptions,
-    series: series,
-    type: "donut",
-    width: (screenWidth < 768 ? width * 0.7 : screenWidth > 2100 ? "370px" : width) || "100%",
-    height: (screenWidth < 768 ? width * 0.7 : screenWidth > 2100 ? "370px" : width) || "100%"
-  }), React__default.createElement("div", {
-    className: "" + styles$2["legend-pie-custom"]
-  }, COLOR_NAME.map(function (color, index) {
-    return React__default.createElement("div", {
-      className: "" + styles$2["legend-item"]
-    }, React__default.createElement("div", {
-      className: "" + styles$2["color-box"],
-      style: {
-        backgroundColor: COLOR_CHART_AND_PIE[index]
-      }
-    }), React__default.createElement("div", {
-      className: "" + styles$2["text"]
-    }, color));
-  }))));
-};
-
-var BarChart$1 = function BarChart(_ref) {
-  var series = _ref.series,
-      months = _ref.months,
-      activeColumn = _ref.activeColumn,
-      isShowChartLabel = _ref.isShowChartLabel,
-      percentData = _ref.percentData;
-  return React__default.createElement(Chart, {
-    options: optionColumnChartAndPercents$1(months, activeColumn, false, isShowChartLabel, percentData, series),
-    type: "bar",
-    series: series,
-    width: "100%",
-    height: 450
-  });
-};
-
-var CheckboxCustom$1 = function CheckboxCustom(_ref) {
-  var _ref$background = _ref.background,
-      background = _ref$background === void 0 ? "#2B4DC0" : _ref$background,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 16 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 16 : _ref$height,
-      _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className,
-      onClick = _ref.onClick;
-  return React__default.createElement("div", {
-    className: className,
-    onClick: onClick,
-    style: {
-      cursor: "pointer"
-    }
-  }, isActive ? React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: width,
-    height: height,
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, React__default.createElement("rect", {
-    x: "2.5",
-    y: "2.5",
-    width: "19",
-    height: "19",
-    rx: "1.5",
-    fill: background,
-    stroke: background
-  }), React__default.createElement("path", {
-    d: "M7.3335 12.6667L10.0002 15.3334L16.6668 8.66669",
-    stroke: "white",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  })) : React__default.createElement("div", {
-    style: {
-      width: width,
-      height: height,
-      background: "#FCFCFC",
-      border: "1px solid #CCCCCC",
-      borderRadius: 2,
-      cursor: "pointer",
-      marginTop: 3
-    }
-  }));
-};
-
-var ChoiceChartType = function ChoiceChartType(_ref) {
-  var onChangeChart = _ref.onChangeChart,
-      _ref$typeChart = _ref.typeChart,
-      typeChart = _ref$typeChart === void 0 ? [TYPECHART$2.BAR] : _ref$typeChart,
-      options = _ref.options;
-  return React__default.createElement("div", {
-    className: "d-flex align-items-center d-inline-block"
-  }, React__default.createElement("div", {
-    className: "d-flex align-items-center px-2 " + styles$2["checkbox-chart"]
-  }, React__default.createElement("div", {
-    className: "pr-4 d-flex align-items-center",
-    onClick: function onClick() {
-      return onChangeChart === null || onChangeChart === void 0 ? void 0 : onChangeChart(options[0].value);
-    },
-    style: {
-      cursor: "pointer"
-    }
-  }, React__default.createElement(CheckboxCustom$1, {
-    width: 16,
-    height: 16,
-    isActive: typeChart.includes(TYPECHART$2.BOTH),
-    className: "pr-2 d-flex align-items-center"
-  }), React__default.createElement("label", {
-    className: "" + styles$2["label-chart"],
-    style: {
-      color: "#252733",
-      marginBottom: 0,
-      cursor: "pointer"
-    }
-  }, "Ridge charts"))), React__default.createElement("div", {
-    className: "d-inline-block " + styles$2["checkbox-chart"]
-  }, React__default.createElement("div", {
-    className: "pr-4 d-flex align-items-center",
-    onClick: function onClick() {
-      return onChangeChart === null || onChangeChart === void 0 ? void 0 : onChangeChart(options[1].value);
-    },
-    style: {
-      cursor: "pointer"
-    }
-  }, React__default.createElement(CheckboxCustom$1, {
-    width: 16,
-    height: 16,
-    isActive: typeChart.includes(TYPECHART$2.LINE) || typeChart.includes(TYPECHART$2.BAR),
-    className: "pr-2 d-flex align-items-center"
-  }), React__default.createElement("label", {
-    className: "" + styles$2["label-chart"],
-    style: {
-      color: "#252733",
-      marginBottom: 0,
-      cursor: "pointer"
-    }
-  }, options[1].value === TYPECHART$2.BAR ? "Bar charts" : "Line charts"))));
-};
-
-var AreaChart$1 = function AreaChart(_ref) {
-  var series = _ref.series,
-      months = _ref.months,
-      activeColumn = _ref.activeColumn,
-      percentData = _ref.percentData;
-  return React__default.createElement(Chart, {
-    options: optionColumnChartAndPercents$1(months, activeColumn, true, false, percentData),
-    type: "area",
-    series: series,
-    width: "100%",
-    height: 450
-  });
-};
-
-var BarAndAreaChart = function BarAndAreaChart(_ref) {
-  var series = _ref.series,
-      months = _ref.months,
-      activeColumn = _ref.activeColumn;
-  var newseries = mergeBarChartAndArea(series);
-  return React__default.createElement(Chart, {
-    options: optionBarChartAndArea(months, activeColumn, newseries),
-    series: newseries,
-    width: "100%",
-    height: 450
-  });
-};
-
-var ChartViewDashboard = function ChartViewDashboard(_ref) {
-  var data = _ref.data,
-      typeChart = _ref.typeChart,
-      onActiveColumn = _ref.onActiveColumn,
-      activeColumn = _ref.activeColumn,
-      series = _ref.series,
-      avg = _ref.avg,
-      months = _ref.months,
-      onChangeChart = _ref.onChangeChart,
-      optionType = _ref.optionType,
-      name = _ref.name,
-      _ref$isShowChartLabel = _ref.isShowChartLabel,
-      isShowChartLabel = _ref$isShowChartLabel === void 0 ? false : _ref$isShowChartLabel,
-      _ref$percentData = _ref.percentData,
-      percentData = _ref$percentData === void 0 ? true : _ref$percentData,
-      classFontSize = _ref.classFontSize;
-
-  var _useTranslation = marioCore.useTranslation(),
-      t = _useTranslation.t;
-
-  if (!data) return React__default.createElement("div", {
-    className: "flex justify-content-center align-items-center",
-    style: {
-      height: 450
-    }
-  }, React__default.createElement("p", null, t("no_data")));
-  return React__default.createElement("div", {
-    key: name,
-    className: " " + styles$2["size-100"] + " " + styles$2[classFontSize != null ? classFontSize : '']
-  }, React__default.createElement("div", {
-    className: "" + styles$2["block-header-chart"]
-  }, React__default.createElement("p", {
-    className: "" + styles$2["title-chart"]
-  }, t(name)), !!onChangeChart && !!optionType && React__default.createElement(ChoiceChartType, {
-    onChangeChart: onChangeChart,
-    options: optionType,
-    typeChart: typeChart
-  })), React__default.createElement("div", {
-    className: "" + styles$2["column-chart-percent"]
-  }, !!onActiveColumn && React__default.createElement("div", {
-    className: "" + styles$2["listItem"]
-  }, data.map(function (month, index) {
-    return React__default.createElement("div", {
-      className: "" + styles$2["item-checkbox"],
-      key: index
-    }, React__default.createElement(CheckboxCustom$1, {
-      background: COLOR_CHART_AND_PERCENTS[index],
-      width: 16,
-      height: 16,
-      isActive: activeColumn[index],
-      className: "" + styles$2["check-box"],
-      onClick: function onClick() {
-        return onActiveColumn === null || onActiveColumn === void 0 ? void 0 : onActiveColumn(index);
-      }
-    }), React__default.createElement("label", {
-      className: "" + styles$2["label-chart"],
-      style: {
-        color: !activeColumn[index] ? "#CCCCCC" : "#4D4D4D",
-        marginBottom: 0,
-        cursor: "pointer"
-      },
-      onClick: function onClick() {
-        return onActiveColumn === null || onActiveColumn === void 0 ? void 0 : onActiveColumn(index);
-      }
-    }, month));
-  })), React__default.createElement("div", {
-    className: "w-100",
-    style: {
-      height: 450
-    }
-  }, typeChart.includes(TYPECHART$1.BOTH) && typeChart.length == 1 && React__default.createElement(AreaChart$1, {
-    months: months,
-    activeColumn: activeColumn,
-    series: series,
-    percentData: percentData
-  }), typeChart.includes(TYPECHART$1.BAR) && typeChart.length == 1 && React__default.createElement(BarChart$1, {
-    months: months,
-    activeColumn: activeColumn,
-    series: series,
-    isShowChartLabel: isShowChartLabel,
-    percentData: percentData
-  }), typeChart.includes(TYPECHART$1.BOTH) && typeChart.includes(TYPECHART$1.BAR) && React__default.createElement(BarAndAreaChart, {
-    months: months,
-    activeColumn: activeColumn,
-    series: series
-  })), !!avg && React__default.createElement("div", {
-    className: "" + styles$2["listItem"]
-  }, data.map(function (month, index) {
-    return avg[index] > 0 && React__default.createElement("div", {
-      className: "" + styles$2["item-legend"],
-      key: index
-    }, React__default.createElement("div", {
-      className: "" + styles$2["item"]
-    }, React__default.createElement("div", {
-      className: "" + styles$2["mark-custom"],
-      style: {
-        backgroundColor: COLOR_CHART_AND_PERCENTS[index]
-      }
-    }), React__default.createElement("label", {
-      className: "" + styles$2["label-legend-custom"]
-    }, month)), React__default.createElement("div", {
-      className: "" + styles$2["percent"]
-    }, React__default.createElement("label", {
-      className: "" + styles$2["m-0"]
-    }, avg[index].toFixed(2))));
-  }))));
-};
 
 var SurveyDashboard = function SurveyDashboard() {
   var _useTranslation = marioCore.useTranslation(),
@@ -35598,24 +35000,25 @@ var SurveyDashboard = function SurveyDashboard() {
       LIST_FILTERS_RIGHT = _useChartDatas.LIST_FILTERS_RIGHT,
       totalCardData = _useChartDatas.totalCardData,
       onChangeFilters = _useChartDatas.onChangeFilters,
-      topMostSurveyUsed = _useChartDatas.topMostSurveyUsed,
       surveyFlagData = _useChartDatas.surveyFlagData,
-      templateSurveyDashboard = _useChartDatas.templateSurveyDashboard,
-      avgResult = _useChartDatas.avgResult,
-      seriseResult = _useChartDatas.seriseResult,
       activeColumnResult = _useChartDatas.activeColumnResult,
       handleActiveColumnOneToOne = _useChartDatas.handleActiveColumnOneToOne,
-      typeChartList = _useChartDatas.typeChartList,
-      onChangeChart = _useChartDatas.onChangeChart,
       isShowFilterMobile = _useChartDatas.isShowFilterMobile,
-      setIsShowFilterMobile = _useChartDatas.setIsShowFilterMobile;
+      setIsShowFilterMobile = _useChartDatas.setIsShowFilterMobile,
+      dayOfWeekTotal = _useChartDatas.dayOfWeekTotal,
+      dayOfWeekResult = _useChartDatas.dayOfWeekResult,
+      seriesTotal = _useChartDatas.seriesTotal,
+      seriesResult = _useChartDatas.seriesResult,
+      monthsSeriesResult = _useChartDatas.monthsSeriesResult,
+      monthsSeriesTotal = _useChartDatas.monthsSeriesTotal;
 
-  console.log({
-    LIST_FILTERS_RIGHT: LIST_FILTERS_RIGHT
-  });
   return React__default.createElement("div", {
     className: styles$2["block-dashboard"] + " mb-5"
-  }, React__default.createElement("div", {
+  }, React__default.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: [".survey-donut-chart .apexcharts-tooltip{", "color: #FFFFFF!important;", "}"].join('')
+    }
+  }), React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
   }, React__default.createElement("div", {
     className: "d-flex align-items-center mx-3"
@@ -35714,46 +35117,52 @@ var SurveyDashboard = function SurveyDashboard() {
       filter: item.filter
     });
   })), React__default.createElement("div", {
-    className: "shadow-lg mb-3 " + styles$2["chart-header-wrapper"]
+    className: "shadow-lg mb-3 py-3 " + styles$2["chart-header-wrapper"] + " " + styles$2["survey-dashboard-chart"] + " survey-dashboard-chart"
   }, React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+    xs: 12,
+    sm: 12,
     md: 7
-  }, React__default.createElement(TopMostSurveyUsed$1, {
-    data: topMostSurveyUsed
+  }, React__default.createElement(GenerateChartData, {
+    avgContent: "SURVEYS",
+    colors: ["#C44140", "#0F9655"],
+    name: "Total Survey",
+    typeChart: TYPECHART$2.AREA,
+    activeColumn: [true, true],
+    series: seriesTotal,
+    months: monthsSeriesTotal,
+    dayOfWeek: dayOfWeekTotal,
+    avgQuestionLastMonth: []
+  })), React__default.createElement(reactstrap.Col, {
+    xs: 12,
+    sm: 12,
+    md: 5,
+    className: "survey-donut-chart " + styles$2["survey-donut-chart"]
+  }, React__default.createElement(GenerateChartData, {
+    avgContent: "FLAGS",
+    colors: ["#C44140", "#FFB04F", "#0F9655"],
+    textColors: ["#FFFFFF", "#FFFFFF", "#FFFFFF"],
+    name: "Flags",
+    typeChart: TYPECHART$2.DONUT,
+    months: [],
+    activeColumn: [true, true, true],
+    avgQuestionLastMonth: [],
+    series: surveyFlagData,
+    width: 250,
+    height: 250,
+    dayOfWeek: []
   })), React__default.createElement(reactstrap.Col, {
-    md: 5
-  }, React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
-    md: 9,
-    lg: 7,
-    style: {
-      margin: "0 auto"
-    }
-  }, React__default.createElement(PieChart, {
-    data: surveyFlagData,
-    name: "Flag"
-  })))))), React__default.createElement(reactstrap.Row, {
-    className: styles$2["chart-view-dashboard"] + " mt-4"
-  }, React__default.createElement(reactstrap.Col, {
     md: 12
-  }, React__default.createElement(ChartViewDashboard, {
-    name: "survey_result",
-    data: convertDataToDataChart$1(templateSurveyDashboard),
-    months: templateSurveyDashboard.map(function (r) {
-      return r.month || "";
-    }),
-    series: seriseResult,
+  }, React__default.createElement(GenerateChartData, {
+    colors: ["#73C8E5", "#FFB04F", "#D7B0DE", "#E56362", "#169490", "#D3D3D3", "#316CD9"],
+    name: "Survey Results",
+    typeChart: TYPECHART$2.AREA,
     activeColumn: activeColumnResult,
+    series: seriesResult,
+    months: monthsSeriesResult,
+    dayOfWeek: dayOfWeekResult,
     onActiveColumn: handleActiveColumnOneToOne,
-    typeChart: typeChartList,
-    onChangeChart: onChangeChart,
-    avg: avgResult,
-    optionType: [{
-      label: "Ridge charts",
-      value: TYPECHART$2.BOTH
-    }, {
-      label: "Bar charts",
-      value: TYPECHART$2.BAR
-    }]
-  }))));
+    avgQuestionLastMonth: []
+  })))));
 };
 
 var USER_URL$4 = marioCore.BASE_URL + "/api/User";