@@ -84,9 +84,29 @@ class="rounded-full px-3 py-2 text-white focus:outline-none"
8484 v-if =" connected && app.statisticsEnabled"
8585 class =" w-full my-6 px-6"
8686 >
87- <div class =" font-semibold uppercase text-gray-700" >
88- Live statistics
89- </div >
87+ <div class =" flex justify-between items-center" >
88+ <span class =" font-semibold uppercase text-gray-700" >
89+ Live statistics
90+ </span >
91+
92+ <div class =" space-x-3 flex items-center" >
93+ <div >
94+ <input
95+ type =" checkbox"
96+ v-model =" autoRefresh"
97+ class =" mr-2"
98+ />
99+ Refresh automatically
100+ </div >
101+
102+ <button
103+ @click =" loadChart"
104+ class =" rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none text-white px-3 py-1"
105+ >
106+ Refresh
107+ </button >
108+ </div >
109+ </div >
90110
91111 <div
92112 id =" statisticsChart"
@@ -222,6 +242,9 @@ class="rounded-full px-3 py-1 inline-block text-sm"
222242 connected: false ,
223243 connecting: false ,
224244 sendingEvent: false ,
245+ autoRefresh: true ,
246+ refreshInterval: {{ $refreshInterval } } ,
247+ refreshTicker: null ,
225248 chart: null ,
226249 pusher: null ,
227250 app: null ,
@@ -236,6 +259,19 @@ class="rounded-full px-3 py-1 inline-block text-sm"
236259 mounted () {
237260 this .app = this .apps [0 ] || null ;
238261 },
262+ destroyed () {
263+ if (this .refreshTicker ) {
264+ this .clearRefreshInterval ();
265+ }
266+ },
267+ watch: {
268+ connected (newVal ) {
269+ newVal ? this .startRefreshInterval () : this .clearRefreshInterval ();
270+ },
271+ autoRefresh (newVal ) {
272+ newVal ? this .startRefreshInterval () : this .clearRefreshInterval ();
273+ },
274+ },
239275 methods: {
240276 connect () {
241277 this .connecting = true ;
@@ -274,12 +310,14 @@ class="rounded-full px-3 py-1 inline-block text-sm"
274310 this .connected = false ;
275311 this .connecting = false ;
276312 this .logs = [];
313+ this .chart = null ;
277314 });
278315
279316 this .pusher .connection .bind (' error' , event => {
280317 if (event .error .data .code === 4100 ) {
281318 this .connected = false ;
282319 this .logs = [];
320+ this .chart = null ;
283321
284322 throw new Error (" Over capacity" );
285323 }
@@ -288,12 +326,12 @@ class="rounded-full px-3 py-1 inline-block text-sm"
288326 });
289327
290328 this .subscribeToAllChannels ();
291- this .subscribeToStatistics ();
292329 },
293330
294331 disconnect () {
295332 this .pusher .disconnect ();
296333 this .connecting = false ;
334+ this .chart = null ;
297335 },
298336
299337 loadChart () {
@@ -333,7 +371,10 @@ class="rounded-full px-3 py-1 inline-block text-sm"
333371 autosize: true ,
334372 };
335373
336- this .chart = Plotly .newPlot (' statisticsChart' , chartData, layout);
374+ this .chart = this .chart
375+ ? Plotly .react (' statisticsChart' , chartData, layout)
376+ : Plotly .newPlot (' statisticsChart' , chartData, layout);
377+
337378 });
338379 },
339380
@@ -348,18 +389,6 @@ class="rounded-full px-3 py-1 inline-block text-sm"
348389 });
349390 },
350391
351- subscribeToStatistics () {
352- this .pusher .subscribe (' {{ $logPrefix } } statistics' )
353- .bind (' statistics-updated' , (data ) => {
354- var update = {
355- x: [[data .time ], [data .time ], [data .time ]],
356- y: [[data .peak_connection_count ], [data .websocket_message_count ], [data .api_message_count ]],
357- };
358-
359- Plotly .extendTraces (' statisticsChart' , update, [0 , 1 , 2 ]);
360- });
361- },
362-
363392 sendEvent () {
364393 if (! this .sendingEvent ) {
365394 this .sendingEvent = true ;
@@ -415,6 +444,17 @@ class="rounded-full px-3 py-1 inline-block text-sm"
415444
416445 return ' bg-gray-700 text-white' ;
417446 },
447+
448+ startRefreshInterval () {
449+ this .refreshTicker = setInterval (function () {
450+ this .loadChart ();
451+ }.bind (this ), this .refreshInterval * 1000 );
452+ },
453+
454+ stopRefreshInterval () {
455+ clearInterval (this .refreshTicker );
456+ this .refreshTicker = null ;
457+ },
418458 },
419459 });
420460 </script >
0 commit comments