mario-education 2.4.541-feedback → 2.4.543-feedback

package/dist/containers/Dashboard/components/GeneratePlpChart.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { IGenerateDashboardChart } from "../configs/types";
-declare const _default: React.MemoExoticComponent<({ typeChart, activeColumn, series, months, name, dayOfWeek, colors, textColors, avgQuestionLastMonth, studentCount, studentPercentage, responseStudent, classFontSize, avgContent, print, width, height, titleClassFontSize, min, hiddenKpi, timeOfDay, weeklySeries, weeks, description, skillClass, kpiClassName, lowMetricStudents, studentMetricPercent, noGradient, setOptionDate, stressValue }: IGenerateDashboardChart) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ typeChart, activeColumn, series, months, name, dayOfWeek, colors, textColors, avgQuestionLastMonth, studentCount, studentPercentage, responseStudent, classFontSize, avgContent, print, width, height, titleClassFontSize, min, hiddenKpi, timeOfDay, weeklySeries, weeks, description, skillClass, kpiClassName, lowMetricStudents, studentMetricPercent, noGradient, setOptionDate, stressValue, noAvgTotal }: IGenerateDashboardChart) => JSX.Element>;
 export default _default;

package/dist/containers/Dashboard/configs/types.d.ts

@@ -535,6 +535,7 @@ export interface IGenerateDashboardChart {
     noGradient?: boolean;
     setOptionDate?: Function;
     stressValue?: number[];
+    noAvgTotal?: boolean;
 }
 export interface IResponseStudentQuestion {
     sessionId: number;

package/dist/index.js

@@ -35011,7 +35011,7 @@ var useDashboard = function useDashboard() {
       setDayOfWeekOneToOne = _useState38[1];
 
   var handleSetDataChartOneToOne = function handleSetDataChartOneToOne(data) {
-    var _data$overviewQuestio, _data$questionChoiceW;
+    var _data$overviewQuestio, _data$questionChoiceW, _stressDataQuestion$;
 
     var questions = convertDataToDataChart(data === null || data === void 0 ? void 0 : data.overviewQuestionChoice);
     var months = (data === null || data === void 0 ? void 0 : (_data$overviewQuestio = data.overviewQuestionChoice) === null || _data$overviewQuestio === void 0 ? void 0 : _data$overviewQuestio.map(function (i) {
@@ -35072,7 +35072,7 @@ var useDashboard = function useDashboard() {
     var stressDataQuestion = newSeriesOneToOne.filter(function (r) {
       return r.name.toLocaleLowerCase() == STRESS_QUESTION;
     });
-    setStressValue(stressDataQuestion[0].data);
+    setStressValue((_stressDataQuestion$ = stressDataQuestion[0]) === null || _stressDataQuestion$ === void 0 ? void 0 : _stressDataQuestion$.data);
     setDayOfWeekOneToOne(dayOfWeeks);
     setMonthsOneToOne(months);
     setWeeksOneToOne(weeks);
@@ -35246,7 +35246,7 @@ var useDashboard = function useDashboard() {
 
       var _temp10 = _catch(function () {
         return Promise.resolve(apiCaller(studentUserId, filter.academicYearId)).then(function (res) {
-          res && setData(res.data);
+          res && setData(res === null || res === void 0 ? void 0 : res.data);
         });
       }, function (err) {
         var _err$response3, _err$response3$data;
@@ -35296,7 +35296,7 @@ var useDashboard = function useDashboard() {
     try {
       var _temp14 = _catch(function () {
         return Promise.resolve(checkHasSummarizeQuestionApi()).then(function (res) {
-          if (res && res.data) {
+          if (res && res !== null && res !== void 0 && res.data) {
             setIsExistQuestion(true);
           }
         });
@@ -35318,7 +35318,7 @@ var useDashboard = function useDashboard() {
 
       var _temp18 = _catch(function () {
         return Promise.resolve(getSummarizeReport(_extends({}, filter, questionFilters))).then(function (res) {
-          if (res.data) {
+          if (res !== null && res !== void 0 && res.data) {
             setSummarizeQuestions(res.data);
           }
         });
@@ -35414,7 +35414,7 @@ var useDashboard = function useDashboard() {
     try {
       var _temp20 = _catch(function () {
         return Promise.resolve(getStudentQuestionSkillApi(filter.studentId, filter.startDate, filter.endDate, filter.grade || [], roles, filter.academicYearId, filter.optionDate, filter.teacherId)).then(function (res) {
-          setStudentSkillQuestion(res.data);
+          setStudentSkillQuestion(res === null || res === void 0 ? void 0 : res.data);
         });
       }, function (err) {
         dispatch(marioCore.setAlert({
@@ -37700,6 +37700,7 @@ var AreaChart = function AreaChart(_ref) {
     className: "" + styles$4["block-label-y"]
   }, labelYChart$1.map(function (r) {
     return React__default.createElement("p", {
+      key: r,
       className: "" + styles$4["label"]
     }, r, "%");
   })), React__default.createElement("div", {
@@ -38114,7 +38115,7 @@ var GraphTrend = function GraphTrend(_ref) {
       backgroundColor: bgColor
     },
     className: "" + styles$2["graph-label"]
-  }, label + " | " + ((_Math$abs = Math.abs(valueData || 0)) === null || _Math$abs === void 0 ? void 0 : _Math$abs.toFixed(2))), timeOfDay && React__default.createElement("img", {
+  }, label + " | " + ((_Math$abs = Math.abs(valueData || 0)) === null || _Math$abs === void 0 ? void 0 : _Math$abs.toFixed(2)) + "%"), timeOfDay && React__default.createElement("img", {
     src: "/images/" + (value < 0 ? "trend-down.png" : "trend-up.png"),
     alt: "Graph Trend Icon"
   }));
@@ -38205,6 +38206,7 @@ var BarChart = function BarChart(_ref) {
     setOpen(!open);
   };
 
+  var selectedBarRef = React.useRef(null);
   var options = React.useMemo(function () {
     var opts = optionColumnChartAndPercents(min != null ? min : 0, months, activeColumn, false, colors, maxSeries, dayOfWeek, isCountSeries, undefined, undefined, print);
     opts.chart = {
@@ -38212,13 +38214,35 @@ var BarChart = function BarChart(_ref) {
       events: {
         dataPointSelection: function dataPointSelection(_event, _chartContext, config) {
           var dataPointIndex = config.dataPointIndex;
-          var currentTooltip = tooltipDataRef.current;
-
-          if ((currentTooltip === null || currentTooltip === void 0 ? void 0 : currentTooltip.dataPointIndex) === dataPointIndex && currentTooltip !== null && currentTooltip !== void 0 && currentTooltip.isSelect) {
+          var chartEl = document.querySelector("#apexchartsmy-bar-chart");
+          if (!chartEl) return;
+          var barEls = chartEl.querySelectorAll(".apexcharts-bar-series path");
+          if (!barEls.length) return;
+
+          if (selectedBarRef.current === dataPointIndex) {
+            selectedBarRef.current = null;
+            barEls[dataPointIndex].setAttribute("fill", "#C4D4F3");
             setTooltipData(null);
-          } else {
-            showTooltipAtIndex(dataPointIndex, true);
+            return;
+          }
+
+          if (selectedBarRef.current !== null) {
+            var prevIndex = selectedBarRef.current;
+            var prevBar = barEls[prevIndex];
+
+            if (prevBar) {
+              prevBar.setAttribute("fill", "#C4D4F3");
+            }
+          }
+
+          var newBar = barEls[dataPointIndex];
+
+          if (newBar) {
+            newBar.setAttribute("fill", "#316CD9");
           }
+
+          selectedBarRef.current = dataPointIndex;
+          showTooltipAtIndex(dataPointIndex, true);
         },
         dataPointMouseEnter: function dataPointMouseEnter(_event, _chartContext, config) {
           var dataPointIndex = config === null || config === void 0 ? void 0 : config.dataPointIndex;
@@ -38327,6 +38351,28 @@ var BarChart = function BarChart(_ref) {
   React.useEffect(function () {
     tooltipDataRef.current = tooltipData;
   }, [tooltipData]);
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      var chartEl = document.querySelector("#apexchartsmy-bar-chart");
+      if (!chartEl) return;
+
+      if (!chartEl.contains(e.target)) {
+        var barEls = chartEl.querySelectorAll(".apexcharts-bar-series path");
+        var selectedIndex = selectedBarRef.current;
+
+        if (selectedIndex !== null && barEls[selectedIndex]) {
+          barEls[selectedIndex].setAttribute("fill", "#C4D4F3");
+          selectedBarRef.current = null;
+          setTooltipData(null);
+        }
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+    return function () {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
   return React__default.createElement("div", null, React__default.createElement("div", {
     ref: chartWrapperRef,
     style: {
@@ -38546,7 +38592,8 @@ var GeneratePlpChart = function GeneratePlpChart(_ref) {
       studentMetricPercent = _ref.studentMetricPercent,
       noGradient = _ref.noGradient,
       setOptionDate = _ref.setOptionDate,
-      stressValue = _ref.stressValue;
+      stressValue = _ref.stressValue,
+      noAvgTotal = _ref.noAvgTotal;
 
   var _useTranslation = marioCore.useTranslation(),
       t = _useTranslation.t;
@@ -38618,7 +38665,7 @@ var GeneratePlpChart = function GeneratePlpChart(_ref) {
     className: "" + styles$2["header-chart-generate"]
   }, React__default.createElement(core$1.Typography, {
     className: "" + (titleClassFontSize || styles$2["title-chart"])
-  }, t(name)), (dataSeries === null || dataSeries === void 0 ? void 0 : (_dataSeries$ = dataSeries[0]) === null || _dataSeries$ === void 0 ? void 0 : (_dataSeries$$descript = _dataSeries$.description) === null || _dataSeries$$descript === void 0 ? void 0 : _dataSeries$$descript.length) > 0 && name !== lowMetricName && React__default.createElement(GraphTrend, {
+  }, t(name)), !noAvgTotal && (dataSeries === null || dataSeries === void 0 ? void 0 : (_dataSeries$ = dataSeries[0]) === null || _dataSeries$ === void 0 ? void 0 : (_dataSeries$$descript = _dataSeries$.description) === null || _dataSeries$$descript === void 0 ? void 0 : _dataSeries$$descript.length) > 0 && name !== lowMetricName && React__default.createElement(GraphTrend, {
     label: getDescriptionFromPercent((averageStressName === name ? stressValue === null || stressValue === void 0 ? void 0 : stressValue[0] : dataSeries[0].data[0]) || 0, dataSeries[0].description, name === averageStressName),
     valueData: (averageStressName === name ? stressValue === null || stressValue === void 0 ? void 0 : stressValue[0] : dataSeries[0].data[0]) || 0,
     value: avgs[0] || 0,
@@ -38933,10 +38980,11 @@ var GenerateTrendQuestion = function GenerateTrendQuestion(_ref) {
       return sum / element.data.length;
     });
   }, [series, avgQuestionLastMonth]);
-  console.log('series', series);
   return React__default.createElement(core$1.Grid, {
     className: "" + styles$2["trend-question-list"]
   }, series.map(function (item, index) {
+    var _item$data, _item$data2;
+
     return React__default.createElement(core$1.Grid, {
       key: item.name,
       className: "" + styles$2["trend-question-item"]
@@ -38949,8 +38997,9 @@ var GenerateTrendQuestion = function GenerateTrendQuestion(_ref) {
       src: "/images/" + icons[index],
       alt: ""
     })), React__default.createElement(GraphTrend, {
-      label: getDescriptionFromPercent(avgs[index] || 0, item.description) || "",
-      value: avgs[index] || 0
+      label: getDescriptionFromPercent((item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data[0]) || 0, item.description) || "",
+      value: avgs[index] || 0,
+      valueData: (item === null || item === void 0 ? void 0 : (_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2[0]) || 0
     }));
   }));
 };
@@ -39049,7 +39098,6 @@ var ReadinessToLearnTab = function ReadinessToLearnTab(_ref) {
   var sortedData = [].concat(dataReadinessOfChart).sort(function (a, b) {
     return preferredOrder.indexOf(removeHTMLTags(a.questionText)) - preferredOrder.indexOf(removeHTMLTags(b.questionText));
   });
-  console.log('dataOverallReadyToLearn.resultQuestion', dataOverallReadyToLearn.resultQuestion);
   return React__default.createElement(core$1.Grid, null, React__default.createElement(core$1.Grid, {
     className: "" + styles$2["explain"]
   }, React__default.createElement("img", {
@@ -39099,7 +39147,8 @@ var ReadinessToLearnTab = function ReadinessToLearnTab(_ref) {
     weeks: weeksOneToOne,
     weeklySeries: preparednessWeeklyData,
     noGradient: true,
-    setOptionDate: setOptionDate
+    setOptionDate: setOptionDate,
+    noAvgTotal: true
   }))), React__default.createElement(core$1.Grid, {
     className: styles$2["plp-box-chart"] + " " + styles$2["distribution-chart"]
   }, React__default.createElement(BubbleChartCustom$1, {
@@ -39154,7 +39203,8 @@ var SuccessIndicatorTab = function SuccessIndicatorTab(_ref) {
     classFontSize: classFontSize,
     handleHoverTooltip: handleHoverTooltip,
     weeks: weeksOneToOne,
-    noGradient: true
+    noGradient: true,
+    noAvgTotal: true
   }));
 };