Small updates to the dashboard removing unnecessery css and making the row...

Small updates to the dashboard removing unnecessery css and making the row displaying the bubble graph bigger. Also added the functionality for the detail donut view of the # of evidence per agent

resources/views/app/dashboard.blade.php

@@ -11,9 +11,30 @@
     .donut-chart-legend {
       font-family: 'Open Sans', sans-serif;
     }
+    /* legend */
+    .legend {
+      font-size: 14px;
+    }
+    rect {
+      cursor: pointer; 
+      stroke-width: 2;
+    }
+    rect.disabled {
+      fill: transparent !important;
+    }
+
+    /* chart */
+    #detail-donut {
+      height: 800px;
+      margin: 0 auto;
+      position: relative;
+      display: block;
+      width: 800px; 
+    }
+
 </style>
 
-<div style="width: 100%; height: 100%" id="container">
+<div class="container-fluid" id="container">
     <div class="row">
         <div class="col-4 card" id="data-donut" style="justify-content: center; align-items: center;">
             <h4>RawData Entries</h4>
@@ -28,11 +49,13 @@
         </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 class="col-12 card" id="evidence-count-big" style="display: none; justify-content: center; align-items: center;">
+            <h4> Total Evidences Selected Count: <span class="new-total-holder"></span> </h4>
+            <p class="font">Uncheck categories to recalculate.</p>
+            <div id="detail-donut"></div>
         </div>
     </div>
-    <div class="row">
+    <div class="row vh-100">
         <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>
@@ -57,8 +80,7 @@
                 </table>
             </div>
         </div>
-        <div class="col card" id="visualization">
-        </div>
+        <div class="col card" id="visualization"></div>
     </div>
 </div>
 
@@ -71,6 +93,7 @@
     var rawdata_container = document.getElementById("data-donut");
     var evidence_container = document.getElementById("evidence-donut");
     var evidence_count = document.getElementById("evidence-count");
+    var detail_evidence_count = document.getElementById("detail-donut");
     var agents = @json($graph_elements);
     var agents_data = [];
     agents.forEach(function (arrayItem){
@@ -102,9 +125,11 @@
                 height: 200,
                 data: agents_data
             });
+            DetailDonut(agents_data, detail_evidence_count);
         });
         @include('scripts.half-donut-script')
         @include('scripts.simple-donut-script')
+        @include('scripts.detail-donut-script');
     });
 </script>