Added the logic for displaying the EvidencesPerAgent visualization

resources/views/app/dashboard.blade.php

@@ -6,10 +6,15 @@
     .half-donut .label {
       font-size: 3rem;
     }
+    .donut-chart-svg {
+    }
+    .donut-chart-legend {
+      font-family: 'Open Sans', sans-serif;
+    }
 </style>
 
-<div style="width: 100%; height: 850px" id="container">
-    <div class="row h-100">
+<div style="width: 100%; height: 100%" id="container">
+    <div class="row">
         <div class="col-4 card" id="data-donut" style="justify-content: center; align-items: center;">
             <h4>RawData Entries</h4>
         </div>
@@ -17,8 +22,17 @@
             <h4>Evidence Entries</h4>
         </div>
         <div class="col-4 card" id="evidence-count" style="justify-content: center; align-items: center;">
-            <h4>Evidence Entries</h4>
+            <button id="donut-button" class="btn btn-primary btn-sm btn-block" >Show Detailed View</button>
+            <h4>Evidences per Agent</h4>
+            
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12 card" id="evidence-count-big" style="display: none; align">
+            <h4 class="card-title"> Big donut chart comes here </h4>
         </div>
+    </div>
+    <div class="row">
         <div class="col-sm-auto col-md-auto col-lg-auto col-xl-auto card">
             <div class="card-body">
                 <h3 class="card-title">Available Agents</h3>
@@ -33,6 +47,10 @@
                             class="btn btn-primary btn-sm">
                                 {{ $name }}
                             </button>
+                            <a href="/app/ranking/{{ $name }}"
+                            class="btn btn-secondary btn-sm">
+                                <i class="fas fa-search"></i>
+                            </a>
                         </td>
                     </tr>
                     @endforeach
@@ -42,7 +60,6 @@
         <div class="col card" id="visualization">
         </div>
     </div>
-  </div>
 </div>
 
 <div class="text-muted bottom-right">
@@ -50,25 +67,49 @@
 </div>
 
 <script type="text/javascript">
-    //Initialize the RawData and Evidence half-donut visualization
+    //Initialize the RawData/Evidence/EvidencesPerAgent visualizations
     var rawdata_container = document.getElementById("data-donut");
     var evidence_container = document.getElementById("evidence-donut");
+    var evidence_count = document.getElementById("evidence-count");
+    var agents = @json($graph_elements);
+    var agents_data = [];
+    agents.forEach(function (arrayItem){
+        var name = arrayItem.name;
+        agents_data.push({value:50, label: name});
+    })
     window.addEventListener('DOMContentLoaded', function() {
         //get the dbstatus data
         var url = "/app/dbstatus";
         var request = $.get(url);
-        //when the request is done, load the half-donut visualizations
+        
         request.done(function(response) {
+            //when the request is done, load the half-donut visualizations
             drawHalfDonut(response["db.data.count"], 1000000, rawdata_container);
             drawHalfDonut(response["db.evidence.count"], 1000000, evidence_container);
+            //create the button to show/hide the detailed evidences per agent donut visualization
+            var donut_button = document.getElementById("donut-button");
+            $("#donut-button").click(function() {
+                $(this).toggleClass('btn-primary btn-secondary');
+                $("#evidence-count-big").toggle();
+                $(this).text(function(i, text) {
+                    return text === "Hide" ? "Show Detailed View" : "Hide"; 
+                });
+            });
+            //create the small evidences per agent donut visualization
+            new SimpleDonut({
+                element: evidence_count,
+                width: 700,
+                height: 200,
+                data: agents_data
+            });
         });
         @include('scripts.half-donut-script')
+        @include('scripts.donut-script')
     });
 </script>
 
 <script type="text/javascript">
     var json_elements = @json($graph_elements);
-    console.log(json_elements);
     var container = document.getElementById("visualization");
 
     json_elements.forEach(function (arrayItem){