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> <title>WebSockets Dashboard</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 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 <script
src="https://code.jquery.com/jquery-3.3.1.min.js" src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://js.pusher.com/4.3/pusher.min.js"></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="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://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.min.js"></script>
</head> </head>
<body> <body>
@ -20,7 +18,7 @@
<div class="card col-xs-12 mt-4"> <div class="card col-xs-12 mt-4">
<div class="card-header"> <div class="card-header">
<form id="connect" class="form-inline" role="form"> <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"> <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> <option v-for="app in apps" :value="app">@{{ app.name }}</option>
</select> </select>
@ -36,8 +34,9 @@
<div id="status"></div> <div id="status"></div>
</div> </div>
<div class="card-body"> <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>
<div v-if="connected"> <div v-if="connected">
<h4>Event Creator</h4> <h4>Event Creator</h4>
@ -148,16 +147,12 @@
loadChart() { loadChart() {
$.getJSON('/{{ request()->path() }}/api/'+this.app.id+'/statistics', (data) => { $.getJSON('/{{ request()->path() }}/api/'+this.app.id+'/statistics', (data) => {
this.chart = $('#statisticsChart').epoch({ this.chart = Plotly.plot('statisticsChart', [{
type: 'time.line', x: data.peak_connections.x,
axes: ['left', 'right', 'bottom'], y: data.peak_connections.y,
data: [ mode: 'lines',
{ line: {color: '#80CAF6'}
label: "Peak Connections", }]);
values: data.peak_connections,
}
]
});
}); });
}, },
@ -183,10 +178,12 @@
subscribeToStatistics() { subscribeToStatistics() {
this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\Dashboard\DashboardLogger::LOG_CHANNEL_PREFIX }}statistics') this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\Dashboard\DashboardLogger::LOG_CHANNEL_PREFIX }}statistics')
.bind('statistics-updated', (data) => { .bind('statistics-updated', (data) => {
this.chart.push([{ var update = {
time: data.time, x: [[data.time]],
y: data.peak_connection_count 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) { $peakConnections = $statistics->map(function ($statistic) {
return [ return [
'time' => $statistic->created_at->timestamp, 'timestamp' => (string)$statistic->created_at,
'y' => $statistic->peak_connection_count 'count' => $statistic->peak_connection_count
]; ];
})->reverse()->values(); })->reverse();
return [ 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; use SerializesModels;
protected $statisticModel; public $statisticModel;
public function __construct($statisticModel) public function __construct($statisticModel)
{ {
@ -21,11 +21,11 @@ class StatisticsUpdated implements ShouldBroadcast
public function broadcastWith() public function broadcastWith()
{ {
return [ return [
'time' => $this->statisticModel->created_at->timestamp, 'time' => (string)$this->statisticModel->created_at,
'app_id' => $this->statisticModel->appId, 'app_id' => $this->statisticModel->app_id,
'peak_connection_count' => $this->statisticModel->peakConnectionCount, 'peak_connection_count' => $this->statisticModel->peak_connection_count,
'websocket_message_count' => $this->statisticModel->webSocketMessageCount, 'websocket_message_count' => $this->statisticModel->websocket_message_count,
'api_message_count' => $this->statisticModel->apiMessageCount, 'api_message_count' => $this->statisticModel->api_message_count,
]; ];
} }