'student_profile_updates'

.idea/workspace.xml

@@ -55,6 +55,7 @@
       <workItem from="1624999713528" duration="30000" />
       <workItem from="1625431857632" duration="186000" />
       <workItem from="1625432234857" duration="334000" />
+      <workItem from="1625686864504" duration="307000" />
     </task>
     <servers />
   </component>

UI/src/view/pages/StudentProfile.vue

@@ -11,7 +11,7 @@
                 <h5 class="text-dark mb-0">{{ student.first_name }} {{student.last_name}}</h5>
                 <p class="text-muted mb-0">{{ student.username }}</p>
                 <p class="text-muted mb-0">{{ student.email }}</p>
-                <p class="text-muted mb-0">{{ student.grade }}</p>
+                <p class="text-muted mb-0">{{ student.grade  }}</p>
                 <p class="text-muted mb-0">{{ student.contact }}</p>
                 <p class="text-muted mb-0">Next Level Expectation: {{ nextLevel }}</p>
               </div>
@@ -36,7 +36,7 @@
           <div class="card-body">
             <p class="text-center text-dark mb-2" style="font-size: 4em;"><i class="fas fa-chart-area"></i></p>
             <p class="text-center font-weight-bold text-dark">Works</p>
-            <p class="text-center text-muted">{{ works.grade }}</p>
+            <p class="text-center text-muted">{{ works!= null ? works.grade : '' }}</p>
 
           </div>
         </div>
@@ -65,11 +65,14 @@
 <script>
   import Chart from 'chart.js';
   import ApiService from '../../services/api.service'
+  import axios from 'axios'
   export default {
     name: "StudentProfile",
     data() {
       return {
-        student: {},
+        student: {
+          grade:null
+        },
         attendance: null,
         works: null,
         chartData: [],
@@ -87,14 +90,13 @@
     },
     methods: {
       showStudentProgress() {
-        ApiService.get('/students/prediction/' + this.$route.params.id)
-          .then(({
-            data
-          }) => {
+        axios.get("http://127.0.0.1:5000/prediction/"+ this.$route.params.id)
+        .then(({data}) => {
             var ctx = document.getElementById('myChart');
-            if (data.result != null) {
-              let actual=[]; let predicted = [];
-              data.result .forEach(element => {
+            if (data != null) {
+              let actual=[]; let predicted = []; let _labels = [];
+              data.forEach((element,index) => {
+                _labels.push(index++);
                 actual.push(element.actual);
                 predicted.push(element.predicted);
               });
@@ -103,25 +105,17 @@
               new Chart(ctx, {
                 type: 'line',
                 data: {
-                  labels: ['Case 1', 'Case 2', 'Case 3', 'Case 4', 'Case 5'],
+                  labels: _labels,
                   datasets: [{
                     label: ['Actual'],
                     data: actual,
                     backgroundColor: [
                       'rgba(255, 99, 132, 0.2)',
                       'rgba(54, 162, 235, 0.2)',
-                      'rgba(255, 206, 86, 0.2)',
-                      'rgba(75, 192, 192, 0.2)',
-                      'rgba(153, 102, 255, 0.2)',
-                      'rgba(255, 159, 64, 0.2)'
                     ],
                     borderColor: [
                       'rgba(255, 99, 132, 1)',
                       'rgba(54, 162, 235, 1)',
-                      'rgba(255, 206, 86, 1)',
-                      'rgba(75, 192, 192, 1)',
-                      'rgba(153, 102, 255, 1)',
-                      'rgba(255, 159, 64, 1)'
                     ],
                     borderWidth: 1
                   },
@@ -131,20 +125,10 @@
                     backgroundColor: [
                       'rgba(54, 162, 235, 0.2)',
                       'rgba(255, 99, 132, 0.2)',
-                      
-                      'rgba(255, 206, 86, 0.2)',
-                      'rgba(75, 192, 192, 0.2)',
-                      'rgba(153, 102, 255, 0.2)',
-                      'rgba(255, 159, 64, 0.2)'
                     ],
                     borderColor: [
                       'rgba(54, 162, 235, 1)',
                       'rgba(255, 99, 132, 1)',
-                      
-                      'rgba(255, 206, 86, 1)',
-                      'rgba(75, 192, 192, 1)',
-                      'rgba(153, 102, 255, 1)',
-                      'rgba(255, 159, 64, 1)'
                     ],
                     borderWidth: 1
                   }]