mario-education 2.4.15-beta → 2.4.18-beta

package/dist/MarioFramework.Education/ClientApp/src/containers/Dashboard/configs/constants.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const colors: string[];
 export declare const INITIAL_BEST_FRIENDS: {
     friends: number;
@@ -16,4 +15,4 @@ export declare const LEARNING_STRATEGY_CHART_COLORS: string[];
 export declare const LEARNING_STRATEGY_INIT: {
     learningStrategies: never[];
 };
-export declare const GRAGE_DEFAULT: import("react").ReactText[];
+export declare const GRAGE_DEFAULT: string[];

package/dist/MarioFramework.Education/ClientApp/src/containers/Dashboard/configs/utils.d.ts

@@ -30,8 +30,9 @@ export declare const mtssOptions: {
 export declare const learningStrategyChartOptions: (labelNames: string[], usageCountList: number[]) => ApexOptions;
 export declare const ReadinessToLearnOptions: (questionTexts: string[]) => ApexOptions;
 export declare const optionsChartGrade: (maxDatas: number, colorCharts: string[]) => ApexOptions;
-export declare const studentBySpecialNeedOptions: (seriesValue: IseriesChart) => ApexOptions;
+export declare const studentBySpecialNeedOptions: (seriesValue: IseriesChart, colors: string[]) => ApexOptions;
 export declare const seriesConvert: (gradeAndQuantity: IStudentByGrade[]) => ISeries[];
 export declare const maxSeries: (series: ISeries[]) => number;
 export declare const average: (arr: number[]) => number;
 export declare const colorCharts: (series: ISeries[]) => string[];
+export declare const colorChartsSpecialNeedOptions: (series: IseriesChart[]) => string[];

package/dist/index.css

@@ -229,7 +229,6 @@ h6._3zOGW {
 
 ._6yLxd {
   min-width: 200px;
-  margin-left: 20px;
   margin-bottom: 10px;
   height: 100%;
   background-color: hsl(0, 0%, 100%);
@@ -245,6 +244,7 @@ h6._3zOGW {
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
+    padding: 0px 16px;
 }
 
 ._3e2pi {
@@ -261,7 +261,7 @@ h6._3zOGW {
     height: 38px;
 }
 ._1DlZ4{
-  min-width: 180px;
+  width: 220px;
   margin-right: 20px;
   margin-bottom: 10px;
   height: 38px;
@@ -293,7 +293,8 @@ h6._3zOGW {
 
 ._2PMoX {
     height: auto;
-    width: 100%;
+    width: auto;
+    max-width: 315px;
 }
 
 ._2asi- ._muT01 ._35BzZ {

package/dist/index.js

@@ -19095,7 +19095,7 @@ var INITIAL_ACTIVITY_FRIENDS = {
 var LEARNING_STRATEGY_INIT = {
   learningStrategies: []
 };
-var GRAGE_DEFAULT = ["K", "G", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+var GRAGE_DEFAULT = ["K", "G", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 
 var TITLE$s = "Dashboard";
 
@@ -19673,6 +19673,26 @@ var optionsChartGrade = function optionsChartGrade(maxDatas, colorCharts) {
         colors: ["#4B92CE"]
       }
     },
+    states: {
+      normal: {
+        filter: {
+          type: "none",
+          value: 0
+        }
+      },
+      hover: {
+        filter: {
+          type: "none",
+          value: 0
+        }
+      },
+      active: {
+        filter: {
+          type: "none",
+          value: 0
+        }
+      }
+    },
     legend: {
       show: false
     },
@@ -19697,20 +19717,22 @@ var optionsChartGrade = function optionsChartGrade(maxDatas, colorCharts) {
       axisTicks: {
         show: false
       }
+    },
+    tooltip: {
+      x: {
+        formatter: function formatter(value) {
+          return "Grade " + value;
+        }
+      },
+      y: {
+        formatter: function formatter(value) {
+          return value.toFixed(0);
+        }
+      }
     }
   };
 };
-var colorRandoms = new Array(1000).fill("").map(function () {
-  var letters = '0123456789ABCDEF'.split('');
-  var color = '#';
-
-  for (var i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-
-  return color;
-});
-var studentBySpecialNeedOptions = function studentBySpecialNeedOptions(seriesValue) {
+var studentBySpecialNeedOptions = function studentBySpecialNeedOptions(seriesValue, colors) {
   return {
     legend: {
       show: false
@@ -19740,7 +19762,7 @@ var studentBySpecialNeedOptions = function studentBySpecialNeedOptions(seriesVal
         }
       }
     },
-    colors: colorRandoms,
+    colors: colors,
     dataLabels: {
       enabled: false
     },
@@ -19829,6 +19851,35 @@ var colorCharts = function colorCharts(series) {
     }
   });
 };
+var colorChartsSpecialNeedOptions = function colorChartsSpecialNeedOptions(series) {
+  return series[0].data.map(function (i) {
+    switch (i) {
+      case 1:
+        return "#40D2CC";
+
+      case 2:
+        return "#0D9994";
+
+      case 3:
+        return "#78B6E2";
+
+      case 4:
+        return "#1D74C5";
+
+      case 5:
+        return "#FFB04F";
+
+      case 6:
+        return "#DD7B00";
+
+      case 7:
+        return "#CE4A49";
+
+      default:
+        return "#850000";
+    }
+  });
+};
 
 var ReadinessToLearn = function ReadinessToLearn(_ref) {
   var data = _ref.data;
@@ -19965,7 +20016,7 @@ var CustomBarChart = function CustomBarChart(_ref) {
       offsetX: 20,
       markers: {
         width: 12,
-        radius: 0
+        radius: 3
       }
     },
     stroke: {
@@ -19974,7 +20025,7 @@ var CustomBarChart = function CustomBarChart(_ref) {
     markers: {
       size: 5
     },
-    colors: ["#40D2CC", "#78B6E2", "#FFB04F", "#78B6E2", "#0D9994", "#1C77AC", "#4992BD", "#77ADCD", "#3DCBCB", "#1DBAB4", "#61CBCB"],
+    colors: ["#40D2CC", "#78B6E2", "#FFB04F", "#CE4A49", "#1CB7B1", "#4B92CE", "#F09422", "#A23333", "#0D9994", "#1D74C5", "#DD7B00"],
     xaxis: {
       categories: chatMonth
     },
@@ -19986,7 +20037,7 @@ var CustomBarChart = function CustomBarChart(_ref) {
         offsetX: -20,
         show: true,
         formatter: function formatter(val) {
-          return chartName === "Safety" ? val + "%" : "" + (val === null || val === void 0 ? void 0 : val.toFixed(0));
+          return chartName === "Safety" ? val + "%" : "" + (val === null || val === void 0 ? void 0 : val.toFixed(2));
         }
       }
     }
@@ -20075,7 +20126,7 @@ var StudentByGrade = function StudentByGrade(_ref) {
   var data = _ref.data;
   var newData = GRAGE_DEFAULT.map(function (i) {
     return data.find(function (j) {
-      return i === parseInt(j.grade) || i === j.grade;
+      return i === j.grade.toString();
     }) || {
       grade: i.toString(),
       quantity: 0
@@ -20090,10 +20141,12 @@ var StudentByGrade = function StudentByGrade(_ref) {
     type: "bar",
     width: "100%",
     height: 450
-  }) : React__default.createElement("img", {
+  }) : React__default.createElement("div", {
+    className: "d-flex justify-content-center align-items-center"
+  }, React__default.createElement("img", {
     className: "" + styles$1["image-no-data"],
     src: "images/grade.png"
-  }));
+  })));
 };
 
 var labelNames = ["Male", "Female"];
@@ -20169,7 +20222,7 @@ var StudentWithSpecialNeeds = function StudentWithSpecialNeeds(_ref) {
   }, series[0].data.some(function (i) {
     return i;
   }) ? React__default.createElement(ReactApexChart, {
-    options: studentBySpecialNeedOptions(series[0]),
+    options: studentBySpecialNeedOptions(series[0], colorChartsSpecialNeedOptions(series)),
     series: series,
     type: "bar",
     width: "100%",
@@ -20577,7 +20630,8 @@ var Dashboard = function Dashboard() {
     children: React__default.createElement(TopLearningStrategy, {
       data: topLearningStrategies
     })
-  }, {
+  }];
+  var listChartStudentLeft = [{
     label: "Students by Grade",
     children: React__default.createElement(StudentByGrade, {
       data: studentByGrade
@@ -20630,7 +20684,8 @@ var Dashboard = function Dashboard() {
     children: React__default.createElement(ReadinessToLearn, {
       data: readinessToLearning
     })
-  }, {
+  }];
+  var listChartStudentRight = [{
     label: "Students by Gender",
     children: React__default.createElement(StudentByGender, {
       data: studentByGender
@@ -20730,6 +20785,9 @@ var Dashboard = function Dashboard() {
       }));
     } else {
       setTeacherId(0);
+      setFilter(_extends({}, filter, {
+        teacherId: undefined
+      }));
     }
   };
 
@@ -20817,42 +20875,38 @@ var Dashboard = function Dashboard() {
     },
     value: handleFormatDate(filter.endDate),
     min: handleFormatDate(filter.startDate)
-  }))), React__default.createElement("div", {
-    className: "" + styles$1["bock-filter-right"]
-  }, React__default.createElement("div", {
-    className: "" + styles$1["bock-filter-wrap"]
-  }, React__default.createElement("div", {
-    className: "" + styles$1["form-filter-right"]
+  })), React__default.createElement("div", {
+    className: "" + styles$1["form-filter-left"]
   }, React__default.createElement(TeacherItemSelector, {
     onChange: handleFilterTeacher,
     defaultValue: teacherId
   })), React__default.createElement("div", {
-    className: "" + styles$1["form-filter-right"]
+    className: "" + styles$1["form-filter-left"]
   }, React__default.createElement(StudentItemSelector, {
     onChange: handleFilterStudent,
     value: studentId,
     studentDefault: studentDefault
   })), React__default.createElement("div", {
-    className: "" + styles$1["form-filter-right"]
+    className: "" + styles$1["form-filter-left"]
   }, React__default.createElement(InputSelector, {
     options: genderOptions,
     onChange: handleFilterGender,
     placeholder: "Select Gender"
   })), React__default.createElement("div", {
-    className: "" + styles$1["form-filter-right"]
+    className: "" + styles$1["form-filter-left"]
   }, React__default.createElement(InputSelector, {
     options: gradeOptions(grades),
     onChange: handleFilterGrades,
     placeholder: "Select Grade",
     isMultiSelect: true
   })), React__default.createElement("div", {
-    className: "" + styles$1["form-filter-right"]
+    className: "" + styles$1["form-filter-left"]
   }, React__default.createElement(InputSelector, {
     options: mtssOptions,
     onChange: handleFilterMtss,
     placeholder: "Select MTSS"
-  }))), React__default.createElement("div", {
-    className: "" + styles$1["form-filter-right"]
+  })), React__default.createElement("div", {
+    className: "" + styles$1["form-filter-left"]
   }, React__default.createElement(SubmitButton, {
     text: "Filter",
     onClick: onFilter,
@@ -20899,6 +20953,30 @@ var Dashboard = function Dashboard() {
     });
   })), React__default.createElement(reactstrap.Row, {
     className: "my-2"
+  }, React__default.createElement(reactstrap.Col, {
+    xs: 12,
+    xl: 8
+  }, listChartStudentLeft.map(function (i) {
+    return React__default.createElement(reactstrap.Col, {
+      key: i.label,
+      className: "mb-4 p-0"
+    }, React__default.createElement(DashboardCard, {
+      label: i.label,
+      children: i.children
+    }));
+  })), React__default.createElement(reactstrap.Col, {
+    xs: 12,
+    xl: 4
+  }, listChartStudentRight.map(function (i) {
+    return React__default.createElement(reactstrap.Col, {
+      key: i.label,
+      className: "mb-4 p-0"
+    }, React__default.createElement(DashboardCard, {
+      label: i.label,
+      children: i.children
+    }));
+  }))), React__default.createElement(reactstrap.Row, {
+    className: "my-2"
   }, listChartBottom.map(function (i, index) {
     return React__default.createElement(reactstrap.Col, {
       xs: 12,