show history graph for detection report

app/Http/Controllers/MarkController.php

@@ -50,6 +50,17 @@ class MarkController extends Controller
 
     }
 
+    public function extractPoints(array $evidences) : array
+    {
+        $points = [];
+        foreach ($evidences as $evidence) {
+            $points[] = new \App\TimePoint(
+                    $evidence["time"],
+                    $evidence["score"]);
+        }
+        return $points;
+    }
+
     public function evidence(string $id)
     {
         $time_window = 3600; // in seconds
@@ -62,10 +73,13 @@ class MarkController extends Controller
             $references[] = $this->server->findEvidenceById($id);
         }
 
+        $history = $this->server->findEvidenceSince($ev["label"], $ev["subject"], $since);
+
         return view(
                 'app.evidence',[
                     "evidence" => $ev,
-                    "history" => $this->server->findEvidenceSince($ev["label"], $ev["subject"], $since),
+                    "history" => $history,
+                    "history_points" => $this->extractPoints($history),
                     "references" => $references]);
     }
 }

app/TimePoint.php

+<?php
+namespace App;
+
+/**
+ * Description of Point
+ *
+ * @author tibo
+ */
+class TimePoint
+{
+    public $t = 0;
+    public $y = 0;
+
+    public function __construct($t, $y)
+    {
+        $this->t = $t;
+        $this->y = $y;
+    }
+}

resources/views/app/evidence.blade.php

@@ -2,84 +2,134 @@
 
 @section('content')
 <div class="container-fluid">
+    <h1>{{ implode("", $evidence["subject"]) }}</h1>
 
-<h1>{{ implode("", $evidence["subject"]) }}</h1>
+    <p>Report id: <b>{{ $evidence["id"] }}</b></p>
+    <p>Subject: <b>{{ implode("", $evidence["subject"]) }}</b></p>
+    <p>Score: <b>{{ $evidence["score"] }}</b></p>
+    <p>Timestamp: {{ $evidence["time"] }}</p>
 
-<p>Report id: <b>{{ $evidence["id"] }}</b></p>
-<p>Subject: <b>{{ implode("", $evidence["subject"]) }}</b></p>
-<p>Score: <b>{{ $evidence["score"] }}</b></p>
-<p>Timestamp: {{ $evidence["time"] }}</p>
-
-<div class="card my-4">
-    <div class="card-body">
-        {!! $evidence["report"] !!}
+    <div class="card my-4">
+        <div class="card-body">
+            {!! $evidence["report"] !!}
+        </div>
     </div>
-</div>
 
-<h3>Detector : {{ $evidence["profile"]["label"] }}</h3>
-<p>Algorithm: {{ $evidence["profile"]["className"] }}</p>
-<p>Trigger label: {{ $evidence["profile"]["triggerLabel"] }}</p>
-<p>Parameters:</p>
+    <h3>Detector : {{ $evidence["profile"]["label"] }}</h3>
+    <p>Algorithm: {{ $evidence["profile"]["className"] }}</p>
+    <p>Trigger label: {{ $evidence["profile"]["triggerLabel"] }}</p>
+    <p>Parameters:</p>
+
+    <ul>
+        @foreach ($evidence["profile"]["parameters"] as $key => $value)
+        <li>{{ $key }} : {{ $value }}</li>
+        @endforeach
+    </ul>
+
+    <h3>Data requests</h3>
+
+    <p>This detector has queried following data:</p>
 
-<ul>
-    @foreach ($evidence["profile"]["parameters"] as $key => $value)
-    <li>{{ $key }} : {{ $value }}</li>
+    <table class="table table-striped">
+    @foreach ($evidence["requests"] as $r)
+    <tr>
+        <td>{{ $r }}</td>
+        <td class="text-right">
+            <a href="/report/{{ $evidence["id"] }}/data/{{ 0 }} " class="btn btn-primary btn-sm">
+                <i class="fas fa-search"></i> Inspect
+            </a>
+        </td>
+    </tr>
     @endforeach
-</ul>
+    </table>
 
-<h3>Data requests</h3>
+    <h3>History</h3>
 
-<p>This detector has queried following data:</p>
+    <p>This detector also produced following scores...</p>
 
-<table class="table table-striped">
-@foreach ($evidence["requests"] as $r)
-<tr>
-    <td>{{ $r }}</td>
-    <td class="text-right">
-        <a href="/report/{{ $evidence["id"] }}/data/{{ 0 }} " class="btn btn-primary btn-sm">
-            <i class="fas fa-search"></i> Inspect
-        </a>
-    </td>
-</tr>
-@endforeach
-</table>
+    <canvas id="chart-report-history"></canvas>
 
-<h3>History</h3>
+    <table class="table table-striped">
+        @foreach ($history as $r)
+        <tr>
+            <td>{{ $r["score"] }}</td>
+            <td>{{ $r["time"] }}</td>
+            <td class="text-right">
+                <a href="/app/evidence/{{ $r["id"] }}" class="btn btn-sm btn-primary">
+                    <i class="fas fa-search"></i> Inspect
+                </a>
+            </td>
+        </tr>
+        @endforeach
+    </table>
 
-<p>This detector also produced following scores...</p>
+    <h3>References</h3>
 
-<canvas id="chart-report-history"></canvas>
+    This detector used following evidences to compute a score.
 
-<table class="table table-striped">
-    @foreach ($history as $r)
+    <table class="table table-striped">
+    @foreach ($references as $r)
     <tr>
+        <td>{{ $r["label"] }}</td>
         <td>{{ $r["score"] }}</td>
         <td>{{ $r["time"] }}</td>
         <td class="text-right">
-            <a href="/app/evidence/{{ $r["id"] }}" class="btn btn-sm btn-primary">
-                <i class="fas fa-search"></i> Inspect
-            </a>
+            <a href="/app/evidence/{{ $r["id"] }}" class="btn btn-sm btn-primary"><i class="fas fa-search"></i> Inspect</a>
         </td>
     </tr>
     @endforeach
-</table>
-
-<h3>References</h3>
-
-This detector used following evidences to compute a score.
-
-<table class="table table-striped">
-@foreach ($references as $r)
-<tr>
-    <td>{{ $r["label"] }}</td>
-    <td>{{ $r["score"] }}</td>
-    <td>{{ $r["time"] }}</td>
-    <td class="text-right">
-        <a href="/app/evidence/{{ $r["id"] }}" class="btn btn-sm btn-primary"><i class="fas fa-search"></i> Inspect</a>
-    </td>
-</tr>
-@endforeach
-</table>
-
+    </table>
 </div>
+
+<!-- moment.js is used to parse unixtimestamp -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
+<script>
+var ctx = document.getElementById('chart-report-history').getContext('2d');
+
+var chart = new Chart(ctx, {
+    // The type of chart we want to create
+    type: 'line',
+
+    // The data for our dataset
+    data: {
+        datasets: [{
+            borderColor: 'rgb(255, 99, 132)',
+            data: @json($history_points)
+        }]
+    },
+
+    // Configuration options go here
+    options: {
+        aspectRatio: 5,
+        legend: {
+            display: false,
+        },
+        elements: {
+            line: {
+                tension: 0 // disables bezier curves
+            }
+        },
+        scales: {
+            xAxes: [{
+                type: 'time',
+                display: true,
+                scaleLabel: {
+                    display: true,
+                    labelString: 'Time'
+                }
+            }],
+            yAxes: [{
+                ticks: {
+                    beginAtZero:true
+                },
+                scaleLabel: {
+                    display: true,
+                    labelString: 'Score'
+                }
+            }]
+        }
+    }
+});
+</script>
 @endsection
\ No newline at end of file