Charting

mpociot · mpociot · commit 1f0a153acc9d · 2018-12-04T01:03:47.000+01:00
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -4,23 +4,21 @@
     <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>
 <div class="container" id="app">
     <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]);
                     });
             },
 
diff --git a/src/Dashboard/Http/Controllers/DashboardApiController.php b/src/Dashboard/Http/Controllers/DashboardApiController.php
@@ -11,13 +11,16 @@ public function getStatistics($appId)
 
         $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'),
+            ]
         ];
     }
 }
diff --git 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 @@ public function __construct($statisticModel)
     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,
         ];
     }
 

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ class StatisticsUpdated implements ShouldBroadcast`
`11`	`11`	`{`
`12`	`12`	`use SerializesModels;`
`13`	`13`
`14`		`- protected $statisticModel;`
	`14`	`+ public $statisticModel;`
`15`	`15`
`16`	`16`	`public function __construct($statisticModel)`
`17`	`17`	`{`
`@@ -21,11 +21,11 @@ public function __construct($statisticModel)`
`21`	`21`	`public function broadcastWith()`
`22`	`22`	`{`
`23`	`23`	`return [`
`24`		`- 'time' => $this->statisticModel->created_at->timestamp,`
`25`		`- 'app_id' => $this->statisticModel->appId,`
`26`		`- 'peak_connection_count' => $this->statisticModel->peakConnectionCount,`
`27`		`- 'websocket_message_count' => $this->statisticModel->webSocketMessageCount,`
`28`		`- 'api_message_count' => $this->statisticModel->apiMessageCount,`
	`24`	`+ 'time' => (string)$this->statisticModel->created_at,`
	`25`	`+ 'app_id' => $this->statisticModel->app_id,`
	`26`	`+ 'peak_connection_count' => $this->statisticModel->peak_connection_count,`
	`27`	`+ 'websocket_message_count' => $this->statisticModel->websocket_message_count,`
	`28`	`+ 'api_message_count' => $this->statisticModel->api_message_count,`
`29`	`29`	`];`
`30`	`30`	`}`
`31`	`31`