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'),
]
];
}