Merge branch 'master' of github.com:beyondcode/laravel-websockets

Author: freekmurze

resources/views/dashboard.blade.php

@@ -35,7 +35,7 @@
         </div>
         <div class="card-body">
             <div v-if="connected && app.statisticsEnabled">
-                <h4>Peak Connections</h4>
+                <h4>Realtime Statistics</h4>
                 <div id="statisticsChart" style="width: 100%; height: 250px;"></div>
             </div>
             <div v-if="connected">
@@ -147,19 +147,38 @@
 
             loadChart() {
                 $.getJSON('/{{ request()->path() }}/api/'+this.app.id+'/statistics', (data) => {
-                        this.chart = Plotly.plot('statisticsChart', [{
-                        x: data.peak_connections.x,
-                        y: data.peak_connections.y,
-                        mode: 'lines',
-                        line: {color: '#80CAF6'}
-                    }], {
-                    margin: {
-                        l: 0,
-                        r: 0,
-                        b: 0,
-                        t: 50,
-                        pad: 4
-                    } });
+
+                    let chartData = [
+                        {
+                            x: data.peak_connections.x,
+                            y: data.peak_connections.y,
+                            type: 'lines',
+                            name: '# Peak Connections'
+                        },
+                        {
+                            x: data.websocket_message_count.x,
+                            y: data.websocket_message_count.y,
+                            type: 'bar',
+                            name: '# Websocket Messages'
+                        },
+                        {
+                            x: data.api_message_count.x,
+                            y: data.api_message_count.y,
+                            type: 'bar',
+                            name: '# API Messages'
+                        }
+                    ];
+                    let layout = {
+                        margin: {
+                            l: 50,
+                            r: 0,
+                            b: 50,
+                            t: 50,
+                            pad: 4
+                        }
+                    };
+
+                    this.chart = Plotly.newPlot('statisticsChart', chartData, layout);
                 });
             },
 
@@ -186,11 +205,11 @@
                 this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\Dashboard\DashboardLogger::LOG_CHANNEL_PREFIX }}statistics')
                     .bind('statistics-updated', (data) => {
                             var update = {
-                                x:  [[data.time]],
-                                y: [[data.peak_connection_count]]
+                                x:  [[data.time], [data.time], [data.time]],
+                                y: [[data.peak_connection_count], [data.websocket_message_count], [data.api_message_count]]
                             };
 
-                            Plotly.extendTraces('statisticsChart', update, [0]);
+                            Plotly.extendTraces('statisticsChart', update, [0, 1, 2]);
                     });
             },
 

src/Dashboard/Http/Controllers/DashboardApiController.php

@@ -9,17 +9,27 @@ public function getStatistics($appId)
         $webSocketsStatisticsEntryModelClass = config('websockets.statistics_model');
         $statistics = $webSocketsStatisticsEntryModelClass::where('app_id', $appId)->latest()->limit(120)->get();
 
-        $peakConnections = $statistics->map(function ($statistic) {
+        $statisticData = $statistics->map(function ($statistic) {
             return [
                 'timestamp' => (string)$statistic->created_at,
-                'count' => $statistic->peak_connection_count
+                'peak_connection_count' => $statistic->peak_connection_count,
+                'websocket_message_count' => $statistic->websocket_message_count,
+                'api_message_count' => $statistic->api_message_count,
             ];
         })->reverse();
 
         return [
             'peak_connections' => [
-                'x' => $peakConnections->pluck('timestamp'),
-                'y' => $peakConnections->pluck('count'),
+                'x' => $statisticData->pluck('timestamp'),
+                'y' => $statisticData->pluck('peak_connection_count'),
+            ],
+            'websocket_message_count' => [
+                'x' => $statisticData->pluck('timestamp'),
+                'y' => $statisticData->pluck('websocket_message_count'),
+            ],
+            'api_message_count' => [
+                'x' => $statisticData->pluck('timestamp'),
+                'y' => $statisticData->pluck('api_message_count'),
             ]
         ];
     }