diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php index f18a6de..4f13d57 100644 --- a/resources/views/dashboard.blade.php +++ b/resources/views/dashboard.blade.php @@ -35,7 +35,7 @@
-

Peak Connections

+

Realtime Statistics

@@ -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]); }); }, diff --git a/src/Dashboard/Http/Controllers/DashboardApiController.php b/src/Dashboard/Http/Controllers/DashboardApiController.php index a3831e7..c8e620d 100644 --- a/src/Dashboard/Http/Controllers/DashboardApiController.php +++ b/src/Dashboard/Http/Controllers/DashboardApiController.php @@ -9,17 +9,27 @@ class DashboardApiController $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'), ] ]; }