mario-education 2.4.149-level → 2.4.151-level

package/dist/index.js

@@ -22504,7 +22504,7 @@ var TYPECHART;
   TYPECHART[TYPECHART["DONUT"] = 4] = "DONUT";
 })(TYPECHART || (TYPECHART = {}));
 
-var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","cursor-pointer":"_11Xjn","btn-show-chart":"_2htKu","rotate-180":"_q1nUO","header-chart-generate":"_s8xMf","block-header-chart":"_tHUJ_","name-chart":"_3xKHX","title-chart":"_pFFg9","description-chart":"_3hqV3","title-chart-generate":"_3rdqX","expand-icon":"_nwv00","custom-tooltip":"_29aQo","custom-tooltip-month":"_2SJIY","tooltip-data-cursor":"_2lZv_","tooltip-data-box":"_8NzTd","tooltip-data":"_1EP1I","name":"_1J69a","data":"_3-8OW","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","item-checkbox":"_3dK0P","box-checkbox":"_1bHgZ","check-box":"_QwDVv","item-detail":"_1QgWc","question":"_348ls","avr-question":"_1VfnR","volatility":"_3eW34","arr":"_1bljF","month-text":"_30y0h","arrow":"_1HtM3","arrow-up":"_3qqQU","percent-text":"_2Fgfn","arrow-down":"_1yXO7","point-custom":"_2JNm-","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","label-chart":"_24PRg","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","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b","chart-pdf":"_sQ21k","box-top-5-most":"_3Eas5"};
+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","cursor-pointer":"_11Xjn","btn-show-chart":"_2htKu","rotate-180":"_q1nUO","header-chart-generate":"_s8xMf","block-header-chart":"_tHUJ_","name-chart":"_3xKHX","title-chart":"_pFFg9","description-chart":"_3hqV3","title-chart-generate":"_3rdqX","expand-icon":"_nwv00","custom-tooltip":"_29aQo","custom-tooltip-month":"_2SJIY","tooltip-data-cursor":"_2lZv_","tooltip-data-box":"_8NzTd","tooltip-data":"_1EP1I","name":"_1J69a","data":"_3-8OW","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","item-checkbox":"_3dK0P","box-checkbox":"_1bHgZ","check-box":"_QwDVv","item-detail":"_1QgWc","question":"_348ls","avr-question":"_1VfnR","volatility":"_3eW34","arr":"_1bljF","month-text":"_30y0h","arrow":"_1HtM3","arrow-up":"_3qqQU","percent-text":"_2Fgfn","arrow-down":"_1yXO7","point-custom":"_2JNm-","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","label-chart":"_24PRg","list-percent":"_1PPhv","percent-item":"_1rjWR","chart-custom":"_f-Ti4","title-grade":"_1hZ_V","title-modal":"_3L9WC","header-desc-modal":"_1TFtP","form-checkbox":"_37aqf","checkbox-content":"_1iabV","btn-export":"_1eQAg","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b","chart-pdf":"_sQ21k","box-top-5-most":"_3Eas5","filter-mobile-block":"_1tKnn","filter-wrapper-mobile":"_1Zuq3","total-card-wrapper":"_1i0El"};
 
 var CheckboxCustom = function CheckboxCustom(_ref) {
   var _ref$background = _ref.background,
@@ -28369,11 +28369,6 @@ var LEARNING_STRATEGY_INIT = {
   learningStrategies: []
 };
 var GRAGE_DEFAULT = ["K", "G", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
-var INITIAl_COLUNM_CHART_AND_PERCENT = {
-  overviewQuestionChoice: [],
-  type: "",
-  overViewQuestionLastMonth: []
-};
 var INITIAL_AGE_OF_STUDENT = {
   ageOfFeMaleStudent: {
     nineToTwelve: 0,
@@ -28403,6 +28398,7 @@ var INITIAl_STUDENT_DASHBOARD = {
   totalCheckIn: 0
 };
 var COLOR_CHART_AND_PERCENTS = ["#73C8E5", "#97AFB9", "#FFB04F", "#FF7670", "#00B8B2", "#00B8FF", "#C6A762", "#C94645", "#006E60", "#336DDA", "#994700"];
+var COLOR_CHART_BUBBLE = ["#169490", "#316CD9", "#FFB04F", "#0F9655"];
 var GENDER_OPTION = [{
   value: -1,
   label: "All"
@@ -28456,8 +28452,9 @@ var learningProcessName = "learning_process";
 var topLearningStrategyName = "learning_strategies";
 var topMostUsedStrategiesName = "top_5_most_used_strategies";
 var overallReadinessToLearn = "overall_readiness_to_learn";
-var studentPressureName = "student_pressure";
-var chartNames = [averageStudentSafetyName, averageStudentStressName, preparednessChartName, overallReadinessToLearn, successIndicatorsName, learningProcessName, topLearningStrategyName, studentPressureName];
+var studentStressByZone = "student_stress_by_zone";
+var studentDistribution = "student_distribution";
+var chartNames = [averageStudentSafetyName, averageStudentStressName, preparednessChartName, overallReadinessToLearn, successIndicatorsName, learningProcessName, topLearningStrategyName, studentStressByZone, studentDistribution];
 
 var gradeOptions = function gradeOptions(grades, studentUserId) {
   var result = !studentUserId ? GRAGE_DEFAULT : GRAGE_DEFAULT.filter(function (val) {
@@ -28600,6 +28597,156 @@ var getConvertMinuteToHour = function getConvertMinuteToHour(timeSecond) {
 
   return hTime;
 };
+
+var readinesToLearnoptions = function readinesToLearnoptions(seriesName, data) {
+  var history = reactRouterDom.useHistory();
+  data === null || data === void 0 ? void 0 : data.forEach(function (element) {
+    var _element$studentPerce;
+
+    element === null || element === void 0 ? void 0 : (_element$studentPerce = element.studentPercentQuestion) === null || _element$studentPerce === void 0 ? void 0 : _element$studentPerce.forEach(function (item) {
+    });
+  });
+  return {
+    colors: COLOR_CHART_BUBBLE,
+    chart: {
+      height: 250,
+      toolbar: {
+        show: false
+      },
+      events: {
+        dataPointSelection: function dataPointSelection(_event, chartContext, config) {
+          var studentName = chartContext.data.threeDSeries[config.dataPointIndex];
+          var series = config.w.config.series[config.seriesIndex].data;
+          var student = series.find(function (r) {
+            return r.includes(studentName);
+          });
+          !!student && history.push("/student-detail/overview/" + student[student.length - 1] + "?isReadOnly=true");
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    fill: {
+      opacity: 0.8
+    },
+    grid: {
+      strokeDashArray: 5,
+      borderColor: "#D3D3D3",
+      xaxis: {
+        lines: {
+          show: true
+        }
+      }
+    },
+    xaxis: {
+      tickAmount: 4,
+      tickPlacement: "between",
+      labels: {
+        show: true,
+        style: {
+          colors: "#FFFFFF"
+        }
+      },
+      tooltip: {
+        enabled: false
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: [{
+      min: 0,
+      max: 100,
+      tickAmount: 5,
+      axisBorder: {
+        show: true
+      },
+      labels: {
+        style: {
+          colors: "#D3D3D3",
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        },
+        formatter: function formatter(value) {
+          return Math.round(value) !== value ? value.toFixed(2) + "%" : value + "%";
+        }
+      }
+    }, {
+      min: 0,
+      max: 100,
+      tickAmount: 5,
+      opposite: true,
+      axisBorder: {
+        show: true
+      },
+      labels: {
+        style: {
+          colors: "#D3D3D3",
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          fontWeight: 400,
+          cssClass: "apexcharts-yaxis-label"
+        },
+        formatter: function formatter(value) {
+          return Math.round(value) !== value ? value.toFixed(2) + "%" : value + "%";
+        }
+      }
+    }],
+    tooltip: {
+      enabled: true,
+      x: {
+        show: false
+      },
+      y: {
+        formatter: undefined,
+        title: {
+          formatter: function formatter() {
+            return "Percent";
+          }
+        }
+      },
+      z: {
+        formatter: undefined,
+        title: "Student: "
+      }
+    },
+    labels: seriesName,
+    legend: {
+      show: false,
+      offsetY: 18,
+      markers: {
+        width: 12,
+        height: 12,
+        radius: 2
+      },
+      position: "bottom",
+      horizontalAlign: "center"
+    }
+  };
+};
+
+var getRandomArbitrary = function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+};
+
+var convertDataToSeriesBullderChart = function convertDataToSeriesBullderChart(data) {
+  return data.map(function (i, index) {
+    var _i$studentPercentQues;
+
+    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, question.studentName, question.studentId];
+      })) || []
+    };
+  });
+};
 var optionColumnChartAndPercents = function optionColumnChartAndPercents(months, activeData, isRidgeCharts, colors, dayOfWeek) {
   return {
     chart: {
@@ -28889,15 +29036,10 @@ var convertToSeriesColumnChartAndPercent = function convertToSeriesColumnChartAn
     };
   });
 };
-var convertToSeriesColumnChartAndPercentProgress = function convertToSeriesColumnChartAndPercentProgress(data) {
-  return [{
-    name: "",
-    data: data.map(function (i) {
-      return i.resultQuestion.reduce(function (a, b) {
-        return a + b.avgOfStudentChoice;
-      }, 0);
-    })
-  }];
+var seriesNameBubbleChartCustom = function seriesNameBubbleChartCustom(series) {
+  return series.map(function (i) {
+    return i.questionText.replace("<p>", "").replace("</p>", "");
+  });
 };
 var getLastQuarterRange = function getLastQuarterRange() {
   var lastQuarter = moment().utc().quarter() - 1;
@@ -28949,6 +29091,11 @@ var getAllTotalTime = function getAllTotalTime(filter) {
     params: filter
   });
 };
+var getReadinessToLearning = function getReadinessToLearning(filter) {
+  return marioCore.api.get(REPORT_URL + "/top-readiness-learn", {
+    params: filter
+  });
+};
 var getTopLearningStrategies = function getTopLearningStrategies(filter) {
   return marioCore.api.get(REPORT_URL + "/top-learning-strategies", {
     params: filter
@@ -29039,8 +29186,6 @@ var getAllAcademicYearApi = function getAllAcademicYearApi(filters) {
 var TITLE$y = "Dashboard";
 
 var useDashboard = function useDashboard() {
-  var _learningProgress$ove;
-
   var dispatch = reactRedux.useDispatch();
 
   var _useState = React.useState({
@@ -29065,17 +29210,17 @@ var useDashboard = function useDashboard() {
       listTotalTime = _useState2[0],
       setListTotalTime = _useState2[1];
 
-  var _useState3 = React.useState(LEARNING_STRATEGY_INIT),
-      topLearningStrategies = _useState3[0],
-      setTopLearningStrategies = _useState3[1];
+  var _useState3 = React.useState([]),
+      readinessToLearning = _useState3[0],
+      setReadinessToLearning = _useState3[1];
 
-  var _useState4 = React.useState([]),
-      studentByGrade = _useState4[0],
-      setStudentByGrade = _useState4[1];
+  var _useState4 = React.useState(LEARNING_STRATEGY_INIT),
+      topLearningStrategies = _useState4[0],
+      setTopLearningStrategies = _useState4[1];
 
-  var _useState5 = React.useState(INITIAl_COLUNM_CHART_AND_PERCENT),
-      learningProgress = _useState5[0],
-      setLearningProgress = _useState5[1];
+  var _useState5 = React.useState([]),
+      studentByGrade = _useState5[0],
+      setStudentByGrade = _useState5[1];
 
   var _useState6 = React.useState(),
       friendCircles = _useState6[0],
@@ -29240,13 +29385,65 @@ var useDashboard = function useDashboard() {
       dataOverallReadyToLearn = _useState27[0],
       setDataOverallReadyToLearn = _useState27[1];
 
-  var seriesLearningProgress = convertToSeriesColumnChartAndPercentProgress(learningProgress === null || learningProgress === void 0 ? void 0 : learningProgress.overviewQuestionChoice);
-  var monthsLearningProgress = learningProgress === null || learningProgress === void 0 ? void 0 : (_learningProgress$ove = learningProgress.overviewQuestionChoice) === null || _learningProgress$ove === void 0 ? void 0 : _learningProgress$ove.map(function (i) {
-    return (i === null || i === void 0 ? void 0 : i.month) || "";
-  });
-  var dayOfWeekLearningProgress = learningProgress === null || learningProgress === void 0 ? void 0 : learningProgress.overviewQuestionChoice.map(function (r) {
-    return marioCore.utcToLocalTime(r.startDate, "DD-MM-yyyy") + " - " + marioCore.utcToLocalTime(r.endDate, "DD-MM-yyyy");
-  });
+  var _useState28 = React.useState([]),
+      seriesConference = _useState28[0],
+      setSeriesConference = _useState28[1];
+
+  var _useState29 = React.useState([]),
+      activeColumnConference = _useState29[0],
+      setActiveColumnConference = _useState29[1];
+
+  var _useState30 = React.useState([]),
+      avgConferenceLastMonth = _useState30[0],
+      setAvgConferenceLastMonth = _useState30[1];
+
+  var _useState31 = React.useState([]),
+      dataConvertedConference = _useState31[0],
+      setDataConvertedConference = _useState31[1];
+
+  var _useState32 = React.useState([]),
+      monthsConference = _useState32[0],
+      setMonthsConference = _useState32[1];
+
+  var _useState33 = React.useState([]),
+      dayOfWeekConference = _useState33[0],
+      setDayOfWeekConference = _useState33[1];
+
+  var handleSetDataChartConference = function handleSetDataChartConference(data) {
+    var _data$overviewQuestio2;
+
+    var questions = convertDataToDataChart(data === null || data === void 0 ? void 0 : data.overviewQuestionChoice);
+    var months = (data === null || data === void 0 ? void 0 : (_data$overviewQuestio2 = data.overviewQuestionChoice) === null || _data$overviewQuestio2 === void 0 ? void 0 : _data$overviewQuestio2.map(function (i) {
+      return (i === null || i === void 0 ? void 0 : i.month) || "";
+    })) || [];
+    var newSeriesConference = convertToSeriesColumnChartAndPercent(questions, data === null || data === void 0 ? void 0 : data.overviewQuestionChoice);
+    var dayOfWeeks = data.overviewQuestionChoice.map(function (r) {
+      return marioCore.utcToLocalTime(r.startDate, "DD-MM-yyyy") + " - " + marioCore.utcToLocalTime(r.endDate, "DD-MM-yyyy");
+    });
+
+    if (newSeriesConference.length >= 0) {
+      if (activeColumnConference.filter(function (r) {
+        return r == true;
+      }).length == 0 || activeColumnConference.length != newSeriesConference.length) {
+        setActiveColumnConference([true].concat(newSeriesConference.map(function (_i) {
+          return false;
+        }).splice(0, newSeriesConference.length - 1)));
+      }
+    }
+
+    setDataConvertedConference(questions);
+    setDayOfWeekConference(dayOfWeeks);
+    setMonthsConference(months);
+    setSeriesConference(newSeriesConference);
+    setAvgConferenceLastMonth(data.overViewQuestionLastMonth);
+  };
+
+  var handleActiveColumnConference = function handleActiveColumnConference(index) {
+    var newActiveColumn = [].concat(activeColumnConference);
+    newActiveColumn[index] = !newActiveColumn[index];
+    setActiveColumnConference(newActiveColumn);
+  };
+
   var callApi = React.useCallback(function (apiCaller, setData, defaultData, type) {
     try {
       var _temp2 = _catch(function () {
@@ -29356,7 +29553,7 @@ var useDashboard = function useDashboard() {
     try {
       document.title = TITLE$y;
       dispatch(marioCore.setLoading(true));
-      return Promise.resolve(Promise.any([callApi(getAllTotalTime, setListTotalTime, []), callApi(getTopLearningStrategies, setTopLearningStrategies, []), callApi(getStudentByGrade, setStudentByGrade, []), callApi(getOverviewQuestionChart, handleSetDataChartOneToOne, [], "OneToOne"), callApi(getOverviewQuestionChart, setLearningProgress, [], "LearningProgress"), callApi(getFriendCircleItems, setFriendCircles, INITIAL_BEST_FRIENDS), callApi(getActivityCircleItems, setActivityCircles, INITIAL_ACTIVITY_FRIENDS), callApi(getStudentBySpecialNeed, setStudentBySpecialNeed, []), callApi(getStudentByAge, setStudentByAge, INITIAL_AGE_OF_STUDENT), callApi(getStudentByGender, setStudentByGender, []), callApi(getStudentPressure, setStudentPressure, initStudentPressure), callApi(getOverallReadinessToLearn, setDataOverallReadyToLearn, INITIAL_OVERALL_READY_TO_LEARN)])).then(function () {
+      return Promise.resolve(Promise.any([callApi(getAllTotalTime, setListTotalTime, []), callApi(getReadinessToLearning, setReadinessToLearning, []), callApi(getTopLearningStrategies, setTopLearningStrategies, []), callApi(getStudentByGrade, setStudentByGrade, []), callApi(getOverviewQuestionChart, handleSetDataChartOneToOne, [], "OneToOne"), callApi(getOverviewQuestionChart, handleSetDataChartConference, [], "Conference"), callApi(getFriendCircleItems, setFriendCircles, INITIAL_BEST_FRIENDS), callApi(getActivityCircleItems, setActivityCircles, INITIAL_ACTIVITY_FRIENDS), callApi(getStudentBySpecialNeed, setStudentBySpecialNeed, []), callApi(getStudentByAge, setStudentByAge, INITIAL_AGE_OF_STUDENT), callApi(getStudentByGender, setStudentByGender, []), callApi(getStudentPressure, setStudentPressure, initStudentPressure), callApi(getOverallReadinessToLearn, setDataOverallReadyToLearn, INITIAL_OVERALL_READY_TO_LEARN)])).then(function () {
         dispatch(marioCore.setLoading(false));
       });
     } catch (e) {
@@ -29377,9 +29574,9 @@ var useDashboard = function useDashboard() {
     setFilter: setFilter,
     filter: filter,
     listTotalTime: listTotalTime,
+    readinessToLearning: readinessToLearning,
     topLearningStrategies: topLearningStrategies,
     studentByGrade: studentByGrade,
-    learningProgress: learningProgress,
     friendCircles: friendCircles,
     activityCircles: activityCircles,
     studentBySpecialNeed: studentBySpecialNeed,
@@ -29407,19 +29604,24 @@ var useDashboard = function useDashboard() {
     successIndicatorsData: successIndicatorsData,
     activeColumnSuccessIndicators: activeColumnSuccessIndicators,
     activeColumnPreparedness: activeColumnPreparedness,
-    seriesLearningProgress: seriesLearningProgress,
-    monthsLearningProgress: monthsLearningProgress,
-    dayOfWeekLearningProgress: dayOfWeekLearningProgress,
     avgQuestionLastMonth: avgQuestionLastMonth,
     gradeList: gradeList,
     studentPressure: studentPressure,
-    dataOverallReadyToLearn: dataOverallReadyToLearn
+    dataOverallReadyToLearn: dataOverallReadyToLearn,
+    seriesConference: seriesConference,
+    avgConferenceLastMonth: avgConferenceLastMonth,
+    dataConvertedConference: dataConvertedConference,
+    monthsConference: monthsConference,
+    dayOfWeekConference: dayOfWeekConference,
+    handleActiveColumnConference: handleActiveColumnConference,
+    activeColumnConference: activeColumnConference
   };
 };
 
 var useChartDatas = function useChartDatas() {
   var _useDashboard = useDashboard(),
       topLearningStrategies = _useDashboard.topLearningStrategies,
+      readinessToLearning = _useDashboard.readinessToLearning,
       handleChangeFilters = _useDashboard.handleChangeFilters,
       handleChangeAcademicYearFilters = _useDashboard.handleChangeAcademicYearFilters,
       bandScore = _useDashboard.bandScore,
@@ -29442,11 +29644,15 @@ var useChartDatas = function useChartDatas() {
       preparednessData = _useDashboard.preparednessData,
       safetyData = _useDashboard.safetyData,
       stressData = _useDashboard.stressData,
-      seriesLearningProgress = _useDashboard.seriesLearningProgress,
-      monthsLearningProgress = _useDashboard.monthsLearningProgress,
-      dayOfWeekLearningProgress = _useDashboard.dayOfWeekLearningProgress,
       avgQuestionLastMonth = _useDashboard.avgQuestionLastMonth,
-      gradeList = _useDashboard.gradeList;
+      gradeList = _useDashboard.gradeList,
+      seriesConference = _useDashboard.seriesConference,
+      avgConferenceLastMonth = _useDashboard.avgConferenceLastMonth,
+      dataConvertedConference = _useDashboard.dataConvertedConference,
+      monthsConference = _useDashboard.monthsConference,
+      dayOfWeekConference = _useDashboard.dayOfWeekConference,
+      handleActiveColumnConference = _useDashboard.handleActiveColumnConference,
+      activeColumnConference = _useDashboard.activeColumnConference;
 
   var _useState = React.useState([]),
       selectedToPrint = _useState[0],
@@ -29601,12 +29807,17 @@ var useChartDatas = function useChartDatas() {
     preparednessData: preparednessData,
     safetyData: safetyData,
     stressData: stressData,
-    seriesLearningProgress: seriesLearningProgress,
-    monthsLearningProgress: monthsLearningProgress,
-    dayOfWeekLearningProgress: dayOfWeekLearningProgress,
+    seriesConference: seriesConference,
+    avgConferenceLastMonth: avgConferenceLastMonth,
+    dataConvertedConference: dataConvertedConference,
+    monthsConference: monthsConference,
+    dayOfWeekConference: dayOfWeekConference,
+    handleActiveColumnConference: handleActiveColumnConference,
+    activeColumnConference: activeColumnConference,
     avgQuestionLastMonth: avgQuestionLastMonth,
     studentPressure: studentPressure,
-    dataOverallReadyToLearn: dataOverallReadyToLearn
+    dataOverallReadyToLearn: dataOverallReadyToLearn,
+    readinessToLearning: readinessToLearning
   };
 };
 
@@ -30322,7 +30533,7 @@ var TotalCard = function TotalCard(_ref) {
       title = _ref.title,
       value = _ref.value;
   return React__default.createElement("div", {
-    className: styles$1["title-card-box"] + " " + styles$1["box-item"] + " p-4 mb-2 shadow-md"
+    className: styles$1["title-card-box"] + " " + styles$1["box-item"] + " p-4 mb-2 mb-sm-0 mb-lg-2 shadow-md"
   }, React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-center"
   }, React__default.createElement("img", {
@@ -30352,7 +30563,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 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"] + ">" + ((_r$data$dataPointInde = r.data[dataPointIndex]) === null || _r$data$dataPointInde === void 0 ? void 0 : _r$data$dataPointInde.toFixed(2)) + "%</p>\n                      </div>\n                    </div>";
       }) + "\n            </div>";
     }
   };
@@ -30470,6 +30681,7 @@ var GenerateChartData = function GenerateChartData(_ref) {
     return r.name.charAt(0).toUpperCase() + r.name.slice(1);
   }) || [];
   return React__default.createElement("div", {
+    key: name,
     className: "w-100 h-100 " + styles$1["column-chart-percent"]
   }, React__default.createElement("div", {
     className: "" + styles$1["header-chart-generate"]
@@ -30569,6 +30781,12 @@ var GenerateChartData = function GenerateChartData(_ref) {
   })));
 };
 
+var chartPropsAreEqual = function chartPropsAreEqual(prevMovie, nextMovie) {
+  return prevMovie === nextMovie;
+};
+
+var GenerateChartData$1 = React__default.memo(GenerateChartData, chartPropsAreEqual);
+
 var Loading = function Loading() {
   return React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-center"
@@ -30800,17 +31018,19 @@ var DashboardToPDF = function DashboardToPDF(props) {
       activeColumnPreparedness = props.activeColumnPreparedness,
       activeColumnSuccessIndicators = props.activeColumnSuccessIndicators,
       avgQuestionLastMonth = props.avgQuestionLastMonth,
-      dayOfWeekLearningProgress = props.dayOfWeekLearningProgress,
       dayOfWeekOneToOne = props.dayOfWeekOneToOne,
-      monthsLearningProgress = props.monthsLearningProgress,
       monthsOneToOne = props.monthsOneToOne,
       preparednessData = props.preparednessData,
       safetyData = props.safetyData,
-      seriesLearningProgress = props.seriesLearningProgress,
       stressData = props.stressData,
       successIndicatorsData = props.successIndicatorsData,
       topLearningStrategiesData = props.topLearningStrategiesData,
-      timeOfDay = props.timeOfDay;
+      timeOfDay = props.timeOfDay,
+      seriesConference = props.seriesConference,
+      monthsConference = props.monthsConference,
+      activeColumnConference = props.activeColumnConference,
+      dayOfWeekConference = props.dayOfWeekConference,
+      avgConferenceLastMonth = props.avgConferenceLastMonth;
 
   var _useTranslation = marioCore.useTranslation(),
       t = _useTranslation.t;
@@ -31282,7 +31502,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
       display: "block",
       width: "45%"
     }
-  }, React__default.createElement(GenerateChartData, {
+  }, React__default.createElement(GenerateChartData$1, {
     colors: ["#0F9655"],
     typeChart: TYPECHART.AREA,
     activeColumn: [true],
@@ -31297,7 +31517,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
       display: "block",
       width: "45%"
     }
-  }, React__default.createElement(GenerateChartData, {
+  }, React__default.createElement(GenerateChartData$1, {
     colors: ["#C44140"],
     typeChart: TYPECHART.LINE,
     activeColumn: [true],
@@ -31312,7 +31532,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
       display: "block",
       width: "45%"
     }
-  }, React__default.createElement(GenerateChartData, {
+  }, React__default.createElement(GenerateChartData$1, {
     colors: ["#169490", "#316CD9", "#FFB04F"],
     typeChart: TYPECHART.LINE,
     activeColumn: activeColumnPreparedness,
@@ -31327,7 +31547,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
       display: "block",
       width: "45%"
     }
-  }, React__default.createElement(GenerateChartData, {
+  }, React__default.createElement(GenerateChartData$1, {
     typeChart: TYPECHART.AREA,
     activeColumn: activeColumnSuccessIndicators,
     series: successIndicatorsData,
@@ -31342,14 +31562,16 @@ var DashboardToPDF = function DashboardToPDF(props) {
       display: "block",
       width: "45%"
     }
-  }, React__default.createElement(GenerateChartData, {
-    colors: ["#73C8E5"],
+  }, React__default.createElement(GenerateChartData$1, {
+    colors: ["#73C8E5", "#F9F871", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"],
+    name: "Learning Process",
     typeChart: TYPECHART.AREA,
-    activeColumn: [true],
-    series: seriesLearningProgress,
-    months: monthsLearningProgress,
-    dayOfWeek: dayOfWeekLearningProgress,
-    avgQuestionLastMonth: []
+    activeColumn: activeColumnConference,
+    series: seriesConference,
+    months: monthsConference,
+    dayOfWeek: dayOfWeekConference,
+    avgQuestionLastMonth: avgConferenceLastMonth,
+    timeOfDay: timeOfDay
   })), React__default.createElement("div", {
     id: "learning_strategy"
   }, React__default.createElement(TopLearningStrategy$1, {
@@ -31617,6 +31839,60 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
   })))));
 };
 
+var BubbleChartCustom = function BubbleChartCustom(_ref) {
+  var data = _ref.data;
+
+  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("div", null, "No Data"));
+  var seriesName = seriesNameBubbleChartCustom(data);
+  return React__default.createElement("div", {
+    className: "" + styles$1["size-100"]
+  }, React__default.createElement("div", {
+    className: "" + styles$1["block-header-chart"]
+  }, React__default.createElement("p", {
+    className: styles$1["title-chart"] + " " + styles$1["ml-10"]
+  }, t(studentDistribution))), React__default.createElement("div", {
+    className: "" + styles$1["bubble-chart-custom"]
+  }, React__default.createElement("div", {
+    className: styles$1["chart-custom"]
+  }, React__default.createElement("div", {
+    className: styles$1["chart-buddle"]
+  }, React__default.createElement("div", null, React__default.createElement("div", {
+    className: styles$1["legend-wrap"]
+  }, seriesName.map(function (i, index) {
+    return React__default.createElement("div", {
+      className: "" + styles$1["item"],
+      key: index
+    }, React__default.createElement("div", {
+      className: "" + styles$1["mark-custom"],
+      style: {
+        backgroundColor: COLOR_CHART_BUBBLE[index]
+      }
+    }), React__default.createElement("label", {
+      className: "" + styles$1["label-legend-custom"]
+    }, i));
+  })), React__default.createElement(Chart, {
+    options: readinesToLearnoptions(seriesName, data),
+    type: "scatter",
+    series: convertDataToSeriesBullderChart(data),
+    width: "100%",
+    height: 250
+  }))))));
+};
+
+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__default.memo(BubbleChartCustom, propsAreEqual$1);
+
 var Dashboard = function Dashboard() {
   var _useChartDatas = useChartDatas(),
       user = _useChartDatas.user,
@@ -31638,12 +31914,16 @@ var Dashboard = function Dashboard() {
       preparednessData = _useChartDatas.preparednessData,
       safetyData = _useChartDatas.safetyData,
       stressData = _useChartDatas.stressData,
-      seriesLearningProgress = _useChartDatas.seriesLearningProgress,
-      monthsLearningProgress = _useChartDatas.monthsLearningProgress,
-      dayOfWeekLearningProgress = _useChartDatas.dayOfWeekLearningProgress,
+      seriesConference = _useChartDatas.seriesConference,
+      avgConferenceLastMonth = _useChartDatas.avgConferenceLastMonth,
+      monthsConference = _useChartDatas.monthsConference,
+      dayOfWeekConference = _useChartDatas.dayOfWeekConference,
+      activeColumnConference = _useChartDatas.activeColumnConference,
+      handleActiveColumnConference = _useChartDatas.handleActiveColumnConference,
       avgQuestionLastMonth = _useChartDatas.avgQuestionLastMonth,
       studentPressure = _useChartDatas.studentPressure,
-      dataOverallReadyToLearn = _useChartDatas.dataOverallReadyToLearn;
+      dataOverallReadyToLearn = _useChartDatas.dataOverallReadyToLearn,
+      readinessToLearning = _useChartDatas.readinessToLearning;
 
   var _useBehavior = useBehavior(),
       chartIsOpened = _useBehavior.chartIsOpened,
@@ -31662,6 +31942,10 @@ var Dashboard = function Dashboard() {
       isExpandChart = _useState2[0],
       setIsExpandChart = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      isShowFilterMobile = _useState3[0],
+      setIsShowFilterMobile = _useState3[1];
+
   var toggle = function toggle() {
     setSelectedToPrint([]);
     setModal(!modal);
@@ -31711,16 +31995,18 @@ var Dashboard = function Dashboard() {
     activeColumnPreparedness: activeColumnPreparedness,
     activeColumnSuccessIndicators: activeColumnSuccessIndicators,
     avgQuestionLastMonth: avgQuestionLastMonth,
-    dayOfWeekLearningProgress: dayOfWeekLearningProgress,
     dayOfWeekOneToOne: dayOfWeekOneToOne,
-    monthsLearningProgress: monthsLearningProgress,
     monthsOneToOne: monthsOneToOne,
     preparednessData: preparednessData,
     safetyData: safetyData,
-    seriesLearningProgress: seriesLearningProgress,
     stressData: stressData,
     successIndicatorsData: successIndicatorsData,
-    timeOfDay: filter.optionDate
+    timeOfDay: filter.optionDate,
+    seriesConference: seriesConference,
+    monthsConference: monthsConference,
+    activeColumnConference: activeColumnConference,
+    dayOfWeekConference: dayOfWeekConference,
+    avgConferenceLastMonth: avgConferenceLastMonth
   }))), React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
   }, React__default.createElement("div", {
@@ -31742,9 +32028,53 @@ var Dashboard = function Dashboard() {
   })), React__default.createElement("p", {
     className: styles$1["button-content"] + " mb-0"
   }, t("export_to_pdf")))), React__default.createElement("div", {
-    className: "d-flex justify-content-between flex-wrap my-2"
+    className: styles$1['filter-mobile-block'] + " p-3 my-4"
   }, React__default.createElement("div", {
-    className: "d-flex"
+    onClick: function onClick() {
+      return setIsShowFilterMobile(!isShowFilterMobile);
+    },
+    className: "d-flex justify-content-between cursor-pointer"
+  }, React__default.createElement("span", {
+    className: "font-weight-bold"
+  }, "Filter"), isShowFilterMobile ? React__default.createElement(fi.FiChevronUp, {
+    size: "1.5rem"
+  }) : React__default.createElement(fi.FiChevronDown, {
+    size: "1.5rem"
+  })), isShowFilterMobile ? React__default.createElement("div", {
+    className: "d-flex flex-column " + styles$1["filter-wrapper-mobile"]
+  }, React__default.createElement("div", {
+    className: "d-flex flex-column mt-3 " + styles$1["filter-wrapper-mobile"]
+  }, LIST_FILTERS_LEFT.map(function (e) {
+    return React__default.createElement(SelectFilter, {
+      name: e.name,
+      icon: e.icon,
+      handleChangeFilters: e.handleChangeFilters,
+      filter: filter,
+      option: e.option,
+      onChangeFilters: onChangeFilters
+    });
+  })), React__default.createElement("div", {
+    className: "d-flex flex-column " + styles$1["filter-wrapper-mobile"]
+  }, LIST_FILTERS_RIGHT.map(function (e) {
+    return React__default.createElement(SelectFilter, {
+      name: e.name,
+      icon: e.icon,
+      handleChangeFilters: e.handleChangeFilters,
+      filter: filter,
+      studentId: e.studentId || 0,
+      studentDefault: e.studentDefault,
+      onChangeFilters: onChangeFilters,
+      teacherUserId: teacherUserId,
+      changeCurrentTeacherUserId: changeCurrentTeacherUserId,
+      btnStyle: e.name === FILTER_NAME.StudentName ? {
+        minWidth: 220,
+        justifyContent: "center"
+      } : {}
+    });
+  }))) : null), React__default.createElement("div", {
+    className: "d-none d-sm-flex justify-content-between flex-wrap my-2"
+  }, React__default.createElement("div", {
+    className: "d-flex flex-wrap"
   }, LIST_FILTERS_LEFT.map(function (e) {
     return React__default.createElement(SelectFilter, {
       name: e.name,
@@ -31773,7 +32103,7 @@ var Dashboard = function Dashboard() {
       } : {}
     });
   }))), React__default.createElement("div", {
-    className: "d-flex align-items-center justify-content-between flex-wrap mb-3"
+    className: styles$1["total-card-wrapper"] + " d-flex align-items-center justify-content-center justify-content-lg-between flex-wrap mb-3"
   }, totalCardData.map(function (item) {
     return React__default.createElement(TotalCard, {
       icon: item.icon,
@@ -31797,8 +32127,8 @@ var Dashboard = function Dashboard() {
   }, React__default.createElement(reactstrap.Row, {
     className: "d-flex"
   }, React__default.createElement(reactstrap.Col, {
-    md: !isExpandChart ? 6 : 12
-  }, React__default.createElement(GenerateChartData, {
+    md: !isExpandChart && chartIsOpened[0] ? 6 : 12
+  }, React__default.createElement(GenerateChartData$1, {
     isShowExpandIcon: true,
     colors: ["#0F9655"],
     name: t(averageStudentSafetyName),
@@ -31813,7 +32143,7 @@ var Dashboard = function Dashboard() {
   })), React__default.createElement(reactstrap.Col, {
     md: !isExpandChart ? 6 : 12,
     className: ""
-  }, React__default.createElement(GenerateChartData, {
+  }, React__default.createElement(GenerateChartData$1, {
     isShowExpandIcon: true,
     colors: ["#C44140"],
     name: t(averageStudentStressName),
@@ -31829,7 +32159,7 @@ var Dashboard = function Dashboard() {
     className: "d-flex"
   }, React__default.createElement(reactstrap.Col, {
     md: 7
-  }, React__default.createElement(GenerateChartData, {
+  }, React__default.createElement(GenerateChartData$1, {
     colors: ["#169490", "#316CD9", "#FFB04F"],
     name: t(preparednessChartName),
     typeChart: TYPECHART.AREA,
@@ -31842,7 +32172,7 @@ var Dashboard = function Dashboard() {
     timeOfDay: filter.optionDate
   })), React__default.createElement(reactstrap.Col, {
     md: 5
-  }, React__default.createElement(GenerateChartData, {
+  }, React__default.createElement(GenerateChartData$1, {
     colors: ["#D9EEE4", "#FAF0F0"],
     name: t(overallReadinessToLearn),
     typeChart: TYPECHART.DONUT,
@@ -31852,7 +32182,7 @@ var Dashboard = function Dashboard() {
     series: dataOverallReadyToLearn.resultQuestion,
     timeOfDay: filter.optionDate,
     dayOfWeek: []
-  }))), React__default.createElement(GenerateChartData, {
+  }))), React__default.createElement(GenerateChartData$1, {
     name: t(successIndicatorsName),
     typeChart: TYPECHART.AREA,
     onActiveColumn: handleActiveColumnOneToOne,
@@ -31863,11 +32193,13 @@ var Dashboard = function Dashboard() {
     dayOfWeek: dayOfWeekOneToOne,
     timeOfDay: filter.optionDate,
     colors: ["#73C8E5", "#F9F871", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"]
+  }), React__default.createElement(BubbleChartCustom$1, {
+    data: readinessToLearning
   }), React__default.createElement("div", {
     className: "" + styles$1["mt-15"]
   }, React__default.createElement("p", {
     className: "" + styles$1["title-chart"]
-  }, "Student Stress by Zone"), React__default.createElement("div", {
+  }, t(studentStressByZone)), React__default.createElement("div", {
     className: "" + styles$1["box-chart-pressure"]
   }, React__default.createElement(StudentPressureChart, {
     studentPressure: studentPressure
@@ -31882,15 +32214,17 @@ var Dashboard = function Dashboard() {
     index: 1
   }), React__default.createElement(reactstrap.Collapse, {
     isOpen: chartIsOpened[1]
-  }, React__default.createElement(GenerateChartData, {
-    colors: ["#73C8E5"],
+  }, React__default.createElement(GenerateChartData$1, {
+    colors: ["#73C8E5", "#F9F871", "#D7B0DE", "#E56362", "#5A7F05", "#D3D3D3"],
     name: t(learningProcessName),
     typeChart: TYPECHART.AREA,
-    activeColumn: [true],
-    series: seriesLearningProgress,
-    months: monthsLearningProgress,
-    dayOfWeek: dayOfWeekLearningProgress,
-    avgQuestionLastMonth: []
+    onActiveColumn: handleActiveColumnConference,
+    activeColumn: activeColumnConference,
+    series: seriesConference,
+    months: monthsConference,
+    dayOfWeek: dayOfWeekConference,
+    avgQuestionLastMonth: avgConferenceLastMonth,
+    timeOfDay: filter.optionDate
   }), React__default.createElement(TopLearningStrategy$1, {
     data: topLearningStrategies
   }))));
@@ -33929,11 +34263,11 @@ var TopMostSurveyUsed = function TopMostSurveyUsed(_ref) {
   }));
 };
 
-var propsAreEqual$1 = function propsAreEqual(preProps, nextProps) {
+var propsAreEqual$2 = function propsAreEqual(preProps, nextProps) {
   return JSON.stringify(preProps) === JSON.stringify(nextProps);
 };
 
-var TopMostSurveyUsed$1 = React__default.memo(TopMostSurveyUsed, propsAreEqual$1);
+var TopMostSurveyUsed$1 = React__default.memo(TopMostSurveyUsed, propsAreEqual$2);
 
 var maxSeries = function maxSeries(series) {
   var max = 0;
@@ -34648,7 +34982,8 @@ var SurveyDashboard = function SurveyDashboard() {
   })), React__default.createElement(reactstrap.Col, {
     md: 5
   }, React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
-    md: 7,
+    md: 9,
+    lg: 7,
     style: {
       margin: "0 auto"
     }