wip

mpociot · mpociot · commit 84b8895ff82e · 2018-12-03T22:59:50.000+01:00
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -4,12 +4,15 @@
     <title>WebSockets Dashboard</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.min.css" />
     <script
             src="https://code.jquery.com/jquery-3.3.1.min.js"
             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
             crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
     <script src="https://js.pusher.com/4.3/pusher.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
+    <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.min.js"></script>
 </head>
 
 <body>
@@ -33,6 +36,9 @@
             <div id="status"></div>
         </div>
         <div class="card-body">
+            <div v-if="connected" id="statisticsChart" style="width: 100%; height: 250px;">
+
+            </div>
             <div v-if="connected">
                 <h4>Event Creator</h4>
                 <form>
@@ -88,6 +94,7 @@
 
         data: {
             connected: false,
+            chart: null,
             pusher: null,
             port: 6001,
             app: null,
@@ -121,6 +128,8 @@
 
                 this.pusher.connection.bind('connected', () => {
                     this.connected = true;
+
+                    this.loadChart();
                 });
 
                 this.pusher.connection.bind('disconnected', () => {
@@ -135,6 +144,21 @@
                 this.pusher.disconnect();
             },
 
+            loadChart() {
+                $.getJSON('/{{ request()->path() }}/api/'+this.app.id+'/statistics', (data) => {
+                    this.chart = $('#statisticsChart').epoch({
+                        type: 'time.line',
+                        axes: ['left', 'right', 'bottom'],
+                        data: [
+                            {
+                                label: "Peak Connections",
+                                values: data.peak_connections,
+                            }
+                        ]
+                    });
+                });
+            },
+
             subscribeToAllChannels() {
                 [
                     'disconnection',
diff --git a/src/Dashboard/Http/Controllers/DashboardApiController.php b/src/Dashboard/Http/Controllers/DashboardApiController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers;
+
+class DashboardApiController
+{
+    public function getStatistics($appId)
+    {
+        $webSocketsStatisticsEntryModelClass = config('websockets.statistics_model');
+        $statistics = $webSocketsStatisticsEntryModelClass::where('app_id', $appId)->latest()->limit(120)->get();
+
+        $peakConnections = $statistics->map(function ($statistic) {
+            return [
+                'time' => $statistic->created_at->timestamp,
+                'y' => $statistic->peak_connection_count
+            ];
+        })->reverse()->values();
+
+        return [
+            'peak_connections' => $peakConnections
+        ];
+    }
+}
diff --git a/src/WebSocketsServiceProvider.php b/src/WebSocketsServiceProvider.php
@@ -3,6 +3,7 @@
 namespace BeyondCode\LaravelWebSockets;
 
 use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\AuthenticateDashboard;
+use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\DashboardApiController;
 use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\SendMessage;
 use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\ShowDashboard;
 use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize;
@@ -65,6 +66,7 @@ protected function registerRouteMacro()
         Route::macro('webSockets', function($prefix = 'laravel-websockets') {
             Route::prefix($prefix)->namespace('\\')->middleware(Authorize::class)->group(function() {
                 Route::get('/',  ShowDashboard::class);
+                Route::get('/api/{appId}/statistics',  DashboardApiController::class.'@getStatistics');
                 Route::post('auth', AuthenticateDashboard::class);
                 Route::post('event', SendMessage::class);
             });
