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

Charting

This commit is contained in:
Marcel Pociot 2018-12-04 01:03:47 +01:00
parent cdf229bfa1
commit 1f0a153acc
3 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,15 +4,13 @@
<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://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>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
@ -20,7 +18,7 @@
<div class="card col-xs-12 mt-4">
<div class="card-header">
<form id="connect" class="form-inline" role="form">
<label class="my-1 mr-2" for="app">app:</label>
<label class="my-1 mr-2" for="app">App:</label>
<select class="form-control form-control-sm mr-2" name="app" id="app" v-model="app">
<option v-for="app in apps" :value="app">@{{ app.name }}</option>
</select>
@ -36,8 +34,9 @@
<div id="status"></div>
</div>
<div class="card-body">
<div v-if="connected" id="statisticsChart" style="width: 100%; height: 250px;">
<div v-if="connected && app.statisticsEnabled">
<h4>Peak Connections</h4>
<div id="statisticsChart" style="width: 100%; height: 250px;"></div>
</div>
<div v-if="connected">
<h4>Event Creator</h4>
@ -148,16 +147,12 @@
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,
}
]
});
this.chart = Plotly.plot('statisticsChart', [{
x: data.peak_connections.x,
y: data.peak_connections.y,
mode: 'lines',
line: {color: '#80CAF6'}
}]);
});
},
@ -183,10 +178,12 @@
subscribeToStatistics() {
this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\Dashboard\DashboardLogger::LOG_CHANNEL_PREFIX }}statistics')
.bind('statistics-updated', (data) => {
this.chart.push([{
time: data.time,
y: data.peak_connection_count
}]);
var update = {
x: [[data.time]],
y: [[data.peak_connection_count]]
};
Plotly.extendTraces('statisticsChart', update, [0]);
});
},

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

@ -11,13 +11,16 @@ class DashboardApiController
$peakConnections = $statistics->map(function ($statistic) {
return [
'time' => $statistic->created_at->timestamp,
'y' => $statistic->peak_connection_count
'timestamp' => (string)$statistic->created_at,
'count' => $statistic->peak_connection_count
];
})->reverse()->values();
})->reverse();
return [
'peak_connections' => $peakConnections
'peak_connections' => [
'x' => $peakConnections->pluck('timestamp'),
'y' => $peakConnections->pluck('count'),
]
];
}
}

12
src/Statistics/Events/StatisticsUpdated.php
View File

@ -11,7 +11,7 @@ class StatisticsUpdated implements ShouldBroadcast
{
use SerializesModels;
protected $statisticModel;
public $statisticModel;
public function __construct($statisticModel)
{
@ -21,11 +21,11 @@ class StatisticsUpdated implements ShouldBroadcast
public function broadcastWith()
{
return [
'time' => $this->statisticModel->created_at->timestamp,
'app_id' => $this->statisticModel->appId,
'peak_connection_count' => $this->statisticModel->peakConnectionCount,
'websocket_message_count' => $this->statisticModel->webSocketMessageCount,
'api_message_count' => $this->statisticModel->apiMessageCount,
'time' => (string)$this->statisticModel->created_at,
'app_id' => $this->statisticModel->app_id,
'peak_connection_count' => $this->statisticModel->peak_connection_count,
'websocket_message_count' => $this->statisticModel->websocket_message_count,
'api_message_count' => $this->statisticModel->api_message_count,
];
}