-
-
+
Event Creator
@@ -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]);
});
},
diff --git a/src/Dashboard/Http/Controllers/DashboardApiController.php b/src/Dashboard/Http/Controllers/DashboardApiController.php
index b406503..a3831e7 100644
--- a/src/Dashboard/Http/Controllers/DashboardApiController.php
+++ b/src/Dashboard/Http/Controllers/DashboardApiController.php
@@ -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'),
+ ]
];
}
}
\ No newline at end of file
diff --git a/src/Statistics/Events/StatisticsUpdated.php b/src/Statistics/Events/StatisticsUpdated.php
index 128a25b..1fb1f56 100644
--- a/src/Statistics/Events/StatisticsUpdated.php
+++ b/src/Statistics/Events/StatisticsUpdated.php
@@ -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,
];
}