blax-software
/
laravel-websockets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
Marcel Pociot 2018-12-04 09:03:27 +01:00
parent e1eecbc4e2
commit df257254e5
2 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
resources/views/dashboard.blade.php
View File

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

18
src/Dashboard/Http/Controllers/DashboardApiController.php
View File

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