Added Skill Gap Chart

lighthouse-na · Apr 2, 2024 · 4ccc360 · 4ccc360
1 parent 42a401e
commit 4ccc360
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 70 deletions.
diff --git a/app/Http/Controllers/Assessment/AssessmentController.php b/app/Http/Controllers/Assessment/AssessmentController.php
@@ -47,7 +47,7 @@ public function storeEmployee(User $user, assessment $assessment, jcp $jcp)
         //competency score
         $maxScore = count($data['questions']) * 5;
 
-        $mean = (array_sum($data['questions']) / $maxScore) * 100;
+        $mean = round((array_sum($data['questions']) / $maxScore) * 100);
 
         //Update enroll status
         // $user->assessments()->updateExistingPivot($assessment->id, ['status' => 1]);

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1 +1,2 @@
 import './bootstrap';
+import './dash-chart.js';
diff --git a/resources/js/dash-chart.js b/resources/js/dash-chart.js
@@ -0,0 +1,51 @@
+import Chart from 'chart.js/auto';
+
+const data = {
+    labels: [
+      'Advanced Digital',
+      'Basic Digital',
+      'Knowledge',
+      'Behavioral',
+      'Soft Skills'
+
+    ],
+    datasets: [{
+      label: 'JCP',
+      data: [90, 60, 80, 85, 80],
+      fill: true,
+      backgroundColor: 'rgba(159, 43, 104, 0.2)',
+      borderColor: 'rgb(159, 43, 104)',
+      pointBackgroundColor: 'rgb(159, 43, 104)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgb(159, 43, 104)'
+    },
+    {
+      label: 'ECP',
+      data: [10,18,65,75,60],
+      fill: true,
+      backgroundColor: 'rgba(255, 87, 51, 0.2)',
+      borderColor: 'rgb(255, 87, 51 )',
+      pointBackgroundColor: 'rgb(255, 87, 51 )',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgb(255, 87, 51 )'
+    }
+]
+};
+
+const config = {
+    type: 'radar',
+    data: data,
+    options: {
+      elements: {
+        line: {
+          borderWidth: 3
+        }
+      }
+    },
+};
+new Chart(
+    document.getElementById('SkillGapChart'),
+    config
+);
diff --git a/resources/views/directories/assessments/index.blade.php b/resources/views/directories/assessments/index.blade.php
@@ -2,7 +2,7 @@
 <x-app-layout>
     <x-slot name="header">
         <h2 class="">
-            {{ __('Assesments') }}
+            {{ __('Assesments Directory') }}
         </h2>
     </x-slot>
     <div class="py-6 px-6">

diff --git a/resources/views/directories/qualifications/index.blade.php b/resources/views/directories/qualifications/index.blade.php
@@ -3,7 +3,6 @@
     <x-slot name="header">
         <h2 class="">
 
-            {{ __('Assesments') }}
 
             {{ __('Qualifications Directory') }}
 

diff --git a/resources/views/livewire/dashboard/dash-info.blade.php b/resources/views/livewire/dashboard/dash-info.blade.php
@@ -2,19 +2,13 @@
     <div class="p-4 rounded-lg dark:border-gray-700">
        <div class="grid grid-cols-3 gap-4 mb-4">
           <div class="flex flex-col h-auto">
-            <div class="flex mb-1 grow border rounded-t-lg dark:bg-gray-800 px-6 pt-3">
-                <div class="header">
-                    <h3 class="leading-none text-gray-900 dark:text-white">Assessments Due</h3>
-                </div>
-                <div class="">
-                </div>
-             </div>
-             <div class="flex grow  border rounded-b-lg dark:bg-gray-800 px-6 pt-3 ">
+
+             <div class="flex flex-col grow  border rounded-lg dark:bg-gray-800 px-6 pt-3 ">
                 <div class="header">
-                    <h3 class="leading-none text-gray-900 dark:text-white">Skill Points</h3>
+                    <h3 class="leading-none text-gray-900 dark:text-white">My Skill Gap</h3>
                 </div>
-                <div class="">
-
+                <div class="m-auto w-90" >
+                    <canvas id="SkillGapChart"></canvas>
                 </div>
              </div>
 
@@ -127,13 +121,7 @@
             </div>
           </div>
        </div>
-       <div class="flex items-center justify-center border  h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800">
-          <p class="text-2xl text-gray-400 dark:text-gray-500">
-             <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
-             </svg>
-          </p>
-       </div>
+
        <div class="grid grid-cols-2 gap-4 mb-4">
           <div class="flex items-center justify-center rounded bg-gray-50 border h-28 dark:bg-gray-800">
              <p class="text-2xl text-gray-400 dark:text-gray-500">
@@ -142,13 +130,14 @@
                 </svg>
              </p>
           </div>
-          <div class="flex items-center justify-center rounded bg-gray-50 border  h-28 dark:bg-gray-800">
-             <p class="text-2xl text-gray-400 dark:text-gray-500">
-                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
-                </svg>
-             </p>
-          </div>
+          <div class="flex items-center justify-center rounded bg-gray-50 border h-28 dark:bg-gray-800">
+            <p class="text-2xl text-gray-400 dark:text-gray-500">
+               <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+               </svg>
+            </p>
+         </div>
+
 
        </div>
     </div>

diff --git a/resources/views/livewire/system/assessments/assessments-table.blade.php b/resources/views/livewire/system/assessments/assessments-table.blade.php
@@ -15,7 +15,7 @@
             </thead>
             @forelse ($assessments as $assessment)
                 <tr class="cursor-pointer hover:bg-gray-50" onclick="window.location.href = '#'">
-                    <td class="px-6 py-4 whitespace-nowrap">{{ $assessment->assessment_name }}</td>
+                    <td class="px-6 py-4 whitespace-nowrap">{{ $assessment->assessment_title }}</td>
                     <td class="px-6 py-4 whitespace-nowrap">{{ $assessment->created_at }}</td>
                     <td class="px-6 py-4 whitespace-nowrap">{{ $assessment->updated_at }}</td>
                     <td class="w-9 text-center">

diff --git a/storage/framework/views/25b474a0f26957d618e971858ee16bc2.php b/storage/framework/views/25b474a0f26957d618e971858ee16bc2.php
@@ -12,22 +12,14 @@
      <?php $__env->slot('header', null, []); ?> 
         <h2 class="">
 
-            <?php echo e(__('Qualifications Directory')); ?>
-
-
-
-            <?php echo e(__('Assesments')); ?>
-
 
             <?php echo e(__('Qualifications Directory')); ?>
 
 
-
         </h2>
      <?php $__env->endSlot(); ?>
     <div class="py-6 px-6">
         <div class="">
-
             <?php
 $__split = function ($name, $params = []) {
     return [$name, $params];
@@ -44,7 +36,6 @@
 unset($__split);
 if (isset($__slots)) unset($__slots);
 ?>
-
         </div>
     </div>
  <?php echo $__env->renderComponent(); ?>

diff --git a/storage/framework/views/61fb610abd610eb2cd8a0b9a70bab458.php b/storage/framework/views/61fb610abd610eb2cd8a0b9a70bab458.php
@@ -116,8 +116,7 @@
                 <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search skills directory..." class="mb-4 p-2 w-full border border-gray-300 rounded-md">
 
             </div>
-
-            <div class="flex-initial w-auto ml-3 mb-4">
+           <div class="flex-initial w-auto ml-3 mb-4">
 
                 <button class="flex flex-row p-2 w-28 bg-indigo-400 hover:bg-indigo-500 text-white transition ease-in-out duration-300 rounded-md">
                     <?php if (isset($component)) { $__componentOriginal643fe1b47aec0b76658e1a0200b34b2c = $component; } ?>
@@ -158,7 +157,6 @@
                 <th class="px-6 py-3 text-center uppercase ">Actions</th>
 
 
-
                 <!-- Add more table headers as needed -->
             </tr>
         </thead>
@@ -169,11 +167,7 @@
                             <?php echo e($skill->skill_title); ?>
 
                     </td>
-
-                    <td class="px-6 py-4 whitespace-nowrap"><?php echo e($skill->skill_description); ?></td>
-
                     <td class="px-6 py-4 whitespace-nowrap truncate"><?php echo e(Str::limit($skill->skill_description, 50, $end='...')); ?></td>
-
                     <td class="w-9 text-center">
                         <div class="ms-3 mx-auto">
                             <?php if (isset($component)) { $__componentOriginaldf8083d4a852c446488d8d384bbc7cbe = $component; } ?>

diff --git a/storage/framework/views/fdbb313c3f89aa1e079e4d88102701b5.php b/storage/framework/views/fdbb313c3f89aa1e079e4d88102701b5.php
@@ -2,19 +2,13 @@
     <div class="p-4 rounded-lg dark:border-gray-700">
        <div class="grid grid-cols-3 gap-4 mb-4">
           <div class="flex flex-col h-auto">
-            <div class="flex mb-1 grow border rounded-t-lg dark:bg-gray-800 px-6 pt-3">
-                <div class="header">
-                    <h3 class="leading-none text-gray-900 dark:text-white">Assessments Due</h3>
-                </div>
-                <div class="">
-                </div>
-             </div>
-             <div class="flex grow  border rounded-b-lg dark:bg-gray-800 px-6 pt-3 ">
+
+             <div class="flex flex-col grow  border rounded-lg dark:bg-gray-800 px-6 pt-3 ">
                 <div class="header">
-                    <h3 class="leading-none text-gray-900 dark:text-white">Skill Points</h3>
+                    <h3 class="leading-none text-gray-900 dark:text-white">My Skill Gap</h3>
                 </div>
-                <div class="">
-
+                <div class="m-auto w-90" >
+                    <canvas id="SkillGapChart"></canvas>
                 </div>
              </div>
 
@@ -167,13 +161,7 @@
             </div>
           </div>
        </div>
-       <div class="flex items-center justify-center border  h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800">
-          <p class="text-2xl text-gray-400 dark:text-gray-500">
-             <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
-             </svg>
-          </p>
-       </div>
+
        <div class="grid grid-cols-2 gap-4 mb-4">
           <div class="flex items-center justify-center rounded bg-gray-50 border h-28 dark:bg-gray-800">
              <p class="text-2xl text-gray-400 dark:text-gray-500">
@@ -182,13 +170,14 @@
                 </svg>
              </p>
           </div>
-          <div class="flex items-center justify-center rounded bg-gray-50 border  h-28 dark:bg-gray-800">
-             <p class="text-2xl text-gray-400 dark:text-gray-500">
-                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
-                </svg>
-             </p>
-          </div>
+          <div class="flex items-center justify-center rounded bg-gray-50 border h-28 dark:bg-gray-800">
+            <p class="text-2xl text-gray-400 dark:text-gray-500">
+               <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+               </svg>
+            </p>
+         </div>
+
 
        </div>
     </div>