mario-education 2.4.8-beta → 2.4.9-beta

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

@@ -11,3 +11,4 @@ export declare const INITIAL_ACTIVITY_FRIENDS: {
     interested: number;
     curious: number;
 };
+export declare const LEARNING_STRATEGY_CHART_COLORS: string[];

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

@@ -1,3 +1,4 @@
+import { ApexOptions } from "apexcharts";
 import { IOptionSelector } from "../../../components/Select/InputSelector";
 import { IActivityCircle, IsyntheticFriendCircle, LegalGenderType } from "./types";
 export declare const getColors: (length: number) => string[];
@@ -9,7 +10,7 @@ export declare const friendCircleItems: ({ bestFriends, friends, couldBeFriends,
     width: number;
     height: number;
 }[];
-export declare const activityCircleItems: ({ like, love, interested, curious, }: IActivityCircle) => {
+export declare const activityCircleItems: ({ like, love, interested, curious }: IActivityCircle) => {
     id: number;
     name: string;
     number: number;
@@ -22,3 +23,4 @@ export declare const genderOptions: {
     value: LegalGenderType;
     label: string;
 }[];
+export declare const learningStrategyChartOptions: (labelNames: string[]) => ApexOptions;

package/dist/index.css

@@ -286,6 +286,12 @@ h6._3zOGW {
         max-width: 70%;
     }
 }
+
+._CHu-i {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 116%;
+}
 ._2Q9xO{
   border-radius: 50%;
   display: flex;

package/dist/index.js

@@ -18505,6 +18505,7 @@ var INITIAL_ACTIVITY_FRIENDS = {
   interested: 0,
   curious: 0
 };
+var LEARNING_STRATEGY_CHART_COLORS = ["#40D2CC", "#1D74C5", "#78B6E2", "#FFC783", "#0D9994"];
 
 var TITLE$r = "Dashboard";
 
@@ -18703,7 +18704,7 @@ var useDashboard = function useDashboard() {
   };
 };
 
-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-gender":"_31VDE","form-filter-grade":"_1Pm1w","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-custom":"_3pkbc","image-special-need":"_16MpB"};
+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-gender":"_31VDE","form-filter-grade":"_1Pm1w","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i"};
 
 var DashboardCard = function DashboardCard(_ref) {
   var label = _ref.label,
@@ -18822,23 +18823,101 @@ var Loading = function Loading() {
   }, "Loading...")));
 };
 
-var colors = ["#40D2CC", "#1D74C5", "#78B6E2", "#FFC783", "#0D9994"];
-
-var TopLearningStrategy = function TopLearningStrategy(_ref) {
-  var _data$learningStrateg;
-
-  var data = _ref.data;
-  if (!data) return React__default.createElement(Loading, null);
-
-  var _useState = React.useState(true),
-      isNoData = _useState[0],
-      setIsNoData = _useState[1];
-
-  var _useState2 = React.useState([]),
-      series = _useState2[0],
-      setSeries = _useState2[1];
-
-  var options = {
+var friendCircleItems = function friendCircleItems(_ref) {
+  var _ref$bestFriends = _ref.bestFriends,
+      bestFriends = _ref$bestFriends === void 0 ? 0 : _ref$bestFriends,
+      _ref$friends = _ref.friends,
+      friends = _ref$friends === void 0 ? 0 : _ref$friends,
+      _ref$couldBeFriends = _ref.couldBeFriends,
+      couldBeFriends = _ref$couldBeFriends === void 0 ? 0 : _ref$couldBeFriends,
+      _ref$supportive = _ref.supportive,
+      supportive = _ref$supportive === void 0 ? 0 : _ref$supportive;
+  return [{
+    id: 1,
+    name: "Best Friends",
+    number: bestFriends,
+    background: "#9DECF9",
+    width: 207,
+    height: 207
+  }, {
+    id: 2,
+    name: "Friend",
+    number: friends,
+    background: "#B2F5EA",
+    width: 145,
+    height: 145
+  }, {
+    id: 3,
+    name: "Supportive",
+    number: supportive,
+    background: "#CEEDFF",
+    width: 140,
+    height: 140
+  }, {
+    id: 4,
+    name: "Could be Friend",
+    number: couldBeFriends,
+    background: "#E2E8F0",
+    width: 150,
+    height: 150
+  }];
+};
+var activityCircleItems = function activityCircleItems(_ref2) {
+  var _ref2$like = _ref2.like,
+      like = _ref2$like === void 0 ? 0 : _ref2$like,
+      _ref2$love = _ref2.love,
+      love = _ref2$love === void 0 ? 0 : _ref2$love,
+      _ref2$interested = _ref2.interested,
+      interested = _ref2$interested === void 0 ? 0 : _ref2$interested,
+      _ref2$curious = _ref2.curious,
+      curious = _ref2$curious === void 0 ? 0 : _ref2$curious;
+  return [{
+    id: 1,
+    name: "Like",
+    number: like,
+    background: "#9DECF9",
+    width: 207,
+    height: 207
+  }, {
+    id: 2,
+    name: "Love",
+    number: love,
+    background: "#B2F5EA",
+    width: 145,
+    height: 145
+  }, {
+    id: 3,
+    name: "Interested",
+    number: interested,
+    background: "#CEEDFF",
+    width: 148,
+    height: 148
+  }, {
+    id: 4,
+    name: "Curious",
+    number: curious,
+    background: "#E2E8F0",
+    width: 150,
+    height: 150
+  }];
+};
+var gradeOptions = function gradeOptions(grades) {
+  return grades.map(function (grade, index) {
+    return {
+      label: grade,
+      value: index
+    };
+  });
+};
+var genderOptions = [{
+  value: LegalGenderType.Male,
+  label: "Male"
+}, {
+  value: LegalGenderType.Female,
+  label: "Female"
+}];
+var learningStrategyChartOptions = function learningStrategyChartOptions(labelNames) {
+  return {
     chart: {
       width: 350,
       type: "pie"
@@ -18855,31 +18934,80 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
         fontFamily: undefined
       }
     },
-    labels: (data === null || data === void 0 ? void 0 : (_data$learningStrateg = data.learningStrategies) === null || _data$learningStrateg === void 0 ? void 0 : _data$learningStrateg.map(function (i) {
-      return i.learningStrategyName;
-    })) || [],
-    colors: colors,
+    labels: labelNames,
+    colors: LEARNING_STRATEGY_CHART_COLORS,
     legend: {
       show: true,
-      position: "bottom"
+      position: "bottom",
+      markers: {
+        radius: 2
+      }
+    },
+    tooltip: {
+      enabled: true,
+      enabledOnSeries: undefined,
+      shared: true,
+      followCursor: false,
+      intersect: false,
+      inverseOrder: false,
+      custom: undefined,
+      fillSeriesColor: false,
+      theme: "light",
+      style: {
+        fontSize: "16px",
+        fontFamily: undefined
+      },
+      onDatasetHover: {
+        highlightDataSeries: false
+      },
+      fixed: {
+        enabled: false,
+        position: "topRight",
+        offsetX: 0,
+        offsetY: 0
+      }
+    },
+    stroke: {
+      width: 0
     }
   };
-  React.useEffect(function () {
-    var _data$learningStrateg2;
+};
 
-    var result = [];
-    data === null || data === void 0 ? void 0 : (_data$learningStrateg2 = data.learningStrategies) === null || _data$learningStrateg2 === void 0 ? void 0 : _data$learningStrateg2.map(function (i) {
-      result.push(i.usageCount);
-      if (i.usageCount > 0) setIsNoData(false);
-    });
-    setSeries(result);
+var TopLearningStrategy = function TopLearningStrategy(_ref) {
+  var data = _ref.data;
+  if (!data) return React__default.createElement(Loading, null);
+
+  var _useState = React.useState([]),
+      series = _useState[0],
+      setSeries = _useState[1];
+
+  var _useState2 = React.useState([]),
+      labelNames = _useState2[0],
+      setLabelNames = _useState2[1];
+
+  React.useEffect(function () {
+    if (data !== null && data !== void 0 && data.learningStrategies) {
+      var learningStrategies = data.learningStrategies.filter(function (i) {
+        return i.usageCount;
+      }) || [];
+      var usageCounts = learningStrategies.map(function (i) {
+        return i.usageCount;
+      });
+      setSeries(usageCounts);
+      var learningStrategyNames = learningStrategies.map(function (i) {
+        return i.learningStrategyName;
+      });
+      setLabelNames(learningStrategyNames);
+    }
   }, [data]);
   return React__default.createElement("div", {
     className: "d-flex h-100 justify-content-center"
   }, React__default.createElement("div", {
     className: "d-flex align-items-end justify-content-center"
-  }, !isNoData ? React__default.createElement(ReactApexChart, {
-    options: options,
+  }, series.some(function (i) {
+    return i;
+  }) ? React__default.createElement(ReactApexChart, {
+    options: learningStrategyChartOptions(labelNames),
     series: series,
     type: "pie",
     height: 350
@@ -18949,7 +19077,7 @@ var CustomBarChart = function CustomBarChart(_ref) {
     markers: {
       size: 5
     },
-    colors: ["#40D2CC", "#78B6E2", "#40D2CC", "#6D88E8", "#1E80B9", "#1C77AC", "#4992BD", "#77ADCD", "#3DCBCB", "#1DBAB4", "#61CBCB"],
+    colors: ["#40D2CC", "#1D74C5", "#FFB04F", "#78B6E2", "#0D9994", "#1C77AC", "#4992BD", "#77ADCD", "#3DCBCB", "#1DBAB4", "#61CBCB"],
     xaxis: {
       categories: chatMonth
     },
@@ -18978,7 +19106,7 @@ var CustomBarChart = function CustomBarChart(_ref) {
           data: []
         };
       })) || [];
-      var listMonth = chatMonth;
+      var listMonth = [];
       data === null || data === void 0 ? void 0 : (_data$overviewQuestio = data.overviewQuestionChoice) === null || _data$overviewQuestio === void 0 ? void 0 : _data$overviewQuestio.map(function (element) {
         var _element$resultQuesti;
 
@@ -19042,15 +19170,13 @@ var CustomBarChart = function CustomBarChart(_ref) {
 };
 
 var StudentByGrade = function StudentByGrade(_ref) {
-  var data = _ref.data;
+  var _series$, _series$$data;
 
-  var _useState = React.useState(true),
-      isNoData = _useState[0],
-      setIsNoData = _useState[1];
+  var data = _ref.data;
 
-  var _useState2 = React.useState([]),
-      series = _useState2[0],
-      setSeries = _useState2[1];
+  var _useState = React.useState([]),
+      series = _useState[0],
+      setSeries = _useState[1];
 
   var options = {
     chart: {
@@ -19063,15 +19189,21 @@ var StudentByGrade = function StudentByGrade(_ref) {
       bar: {
         borderRadius: 2,
         horizontal: true,
+        distributed: true,
         dataLabels: {
-          position: "right"
+          position: "top"
         }
       }
     },
+    legend: {
+      show: false
+    },
     dataLabels: {
-      enabled: false,
+      enabled: true,
+      offsetY: 16,
+      offsetX: 17,
       style: {
-        fontSize: "12px",
+        fontSize: "16px",
         colors: ["#1D74C5", "#78B6E2", "#78B6E2", "#A4D1F0", "#4B92CE"]
       }
     },
@@ -19110,13 +19242,15 @@ var StudentByGrade = function StudentByGrade(_ref) {
     var result = [];
     data === null || data === void 0 ? void 0 : data.map(function (i) {
       result.push(i.quantity);
-      if (i.quantity > 0) setIsNoData(false);
     });
     setSeries([{
+      name: "Student",
       data: result
     }]);
   }, [data]);
-  return React__default.createElement("div", null, !isNoData ? React__default.createElement(ReactApexChart, {
+  return React__default.createElement("div", null, (_series$ = series[0]) !== null && _series$ !== void 0 && (_series$$data = _series$.data) !== null && _series$$data !== void 0 && _series$$data.some(function (i) {
+    return i;
+  }) ? React__default.createElement(ReactApexChart, {
     options: options,
     series: series,
     type: "bar",
@@ -19201,6 +19335,9 @@ var StudentWithSpecialNeeds = function StudentWithSpecialNeeds(_ref) {
           size: "50px"
         }
       }
+    },
+    stroke: {
+      width: 0
     }
   };
   React.useEffect(function () {
@@ -19218,7 +19355,7 @@ var StudentWithSpecialNeeds = function StudentWithSpecialNeeds(_ref) {
     series: series,
     type: "donut",
     width: "100%",
-    height: 350
+    height: 300
   }) : React__default.createElement("img", {
     className: styles$1["image-no-data"] + " " + styles$1["image-special-need"],
     src: "images/donut-data.png"
@@ -19369,100 +19506,6 @@ var CircleChart = function CircleChart(_ref) {
   })));
 };
 
-var friendCircleItems = function friendCircleItems(_ref) {
-  var _ref$bestFriends = _ref.bestFriends,
-      bestFriends = _ref$bestFriends === void 0 ? 0 : _ref$bestFriends,
-      _ref$friends = _ref.friends,
-      friends = _ref$friends === void 0 ? 0 : _ref$friends,
-      _ref$couldBeFriends = _ref.couldBeFriends,
-      couldBeFriends = _ref$couldBeFriends === void 0 ? 0 : _ref$couldBeFriends,
-      _ref$supportive = _ref.supportive,
-      supportive = _ref$supportive === void 0 ? 0 : _ref$supportive;
-  return [{
-    id: 1,
-    name: "Best Friends",
-    number: bestFriends,
-    background: "#9DECF9",
-    width: 207,
-    height: 207
-  }, {
-    id: 2,
-    name: "Friend",
-    number: friends,
-    background: "#B2F5EA",
-    width: 145,
-    height: 145
-  }, {
-    id: 3,
-    name: "Supportive",
-    number: supportive,
-    background: "#CEEDFF",
-    width: 140,
-    height: 140
-  }, {
-    id: 4,
-    name: "Could be Friend",
-    number: couldBeFriends,
-    background: "#E2E8F0",
-    width: 150,
-    height: 150
-  }];
-};
-var activityCircleItems = function activityCircleItems(_ref2) {
-  var _ref2$like = _ref2.like,
-      like = _ref2$like === void 0 ? 0 : _ref2$like,
-      _ref2$love = _ref2.love,
-      love = _ref2$love === void 0 ? 0 : _ref2$love,
-      _ref2$interested = _ref2.interested,
-      interested = _ref2$interested === void 0 ? 0 : _ref2$interested,
-      _ref2$curious = _ref2.curious,
-      curious = _ref2$curious === void 0 ? 0 : _ref2$curious;
-  return [{
-    id: 1,
-    name: "Like",
-    number: like,
-    background: "#9DECF9",
-    width: 207,
-    height: 207
-  }, {
-    id: 2,
-    name: "Love",
-    number: love,
-    background: "#B2F5EA",
-    width: 145,
-    height: 145
-  }, {
-    id: 3,
-    name: "Interested",
-    number: interested,
-    background: "#CEEDFF",
-    width: 148,
-    height: 148
-  }, {
-    id: 4,
-    name: "Curious",
-    number: curious,
-    background: "#E2E8F0",
-    width: 150,
-    height: 150
-  }];
-};
-var gradeOptions = function gradeOptions(grades) {
-  return grades.map(function (grade, index) {
-    return {
-      label: grade,
-      value: index
-    };
-  });
-};
-var genderOptions = [{
-  value: LegalGenderType.Male,
-  label: "Male"
-}, {
-  value: LegalGenderType.Female,
-  label: "Female"
-}];
-
 var InputSelector = function InputSelector(_ref) {
   var onChange = _ref.onChange,
       placeholder = _ref.placeholder,
@@ -19690,7 +19733,15 @@ var Dashboard = function Dashboard() {
     className: "" + styles$1["block-dashboard"]
   }, React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
-  }, React__default.createElement("h4", null, "Hey ", user.lastName), React__default.createElement("div", {
+  }, React__default.createElement("div", {
+    className: "d-flex align-items-center mx-3"
+  }, React__default.createElement("h4", {
+    className: styles$1["title-dashboard"] + " m-0"
+  }, "Hey ", user.lastName, "!"), React__default.createElement("img", {
+    className: "mx-2",
+    src: "images/waving-hand.png",
+    alt: ""
+  })), React__default.createElement("div", {
     className: "text-center"
   }, React__default.createElement("button", {
     id: "toggler",
@@ -19713,14 +19764,16 @@ var Dashboard = function Dashboard() {
     onChange: function onChange(e) {
       return handleChangeStartTime(e.target.value);
     },
-    value: handleFormatDate(filter.startDate)
+    value: handleFormatDate(filter.startDate),
+    max: handleFormatDate(filter.endDate)
   }), React__default.createElement("input", {
     type: "date",
     className: "" + styles$1["form-date-picker"],
     onChange: function onChange(e) {
       return handleChangeEndTime(e.target.value);
     },
-    value: handleFormatDate(filter.endDate)
+    value: handleFormatDate(filter.endDate),
+    min: handleFormatDate(filter.startDate)
   })), React__default.createElement("div", {
     className: "" + styles$1["bock-filter-right"]
   }, React__default.createElement("div", {