From 7668475bd62b5b106a47ae96daf9ec87548ce314 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 13 Mar 2019 23:27:11 +0900
Subject: [PATCH] :art:

---
 .../app/admin/views/dashboard.queue-charts.vue     |  6 ++++--
 src/client/app/admin/views/queue.vue               | 14 ++++++++++++--
 src/client/app/common/views/widgets/queue.vue      |  8 ++++++++
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/client/app/admin/views/dashboard.queue-charts.vue b/src/client/app/admin/views/dashboard.queue-charts.vue
index f1d389014..d2d7811bf 100644
--- a/src/client/app/admin/views/dashboard.queue-charts.vue
+++ b/src/client/app/admin/views/dashboard.queue-charts.vue
@@ -23,6 +23,8 @@ import { faInbox } from '@fortawesome/free-solid-svg-icons';
 import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import ApexCharts from 'apexcharts';
 
+const limit = 150;
+
 export default Vue.extend({
 	data() {
 		return {
@@ -124,7 +126,7 @@ export default Vue.extend({
 		connection.on('statsLog', this.onStatsLog);
 		connection.send('requestLog', {
 			id: Math.random().toString().substr(2, 8),
-			length: 100
+			length: limit
 		});
 
 		this.$once('hook:beforeDestroy', () => {
@@ -137,7 +139,7 @@ export default Vue.extend({
 	methods: {
 		onStats(stats) {
 			this.stats.push(stats);
-			if (this.stats.length > 100) this.stats.shift();
+			if (this.stats.length > limit) this.stats.shift();
 		},
 
 		onStatsLog(statsLog) {
diff --git a/src/client/app/admin/views/queue.vue b/src/client/app/admin/views/queue.vue
index 5a44d5372..daa78f3a8 100644
--- a/src/client/app/admin/views/queue.vue
+++ b/src/client/app/admin/views/queue.vue
@@ -69,6 +69,8 @@ import * as tinycolor from 'tinycolor2';
 import { faTasks, faInbox, faStopwatch, faPlayCircle as fasPlayCircle } from '@fortawesome/free-solid-svg-icons';
 import { faPaperPlane, faStopCircle, faPlayCircle as farPlayCircle } from '@fortawesome/free-regular-svg-icons';
 
+const limit = 150;
+
 export default Vue.extend({
 	i18n: i18n('admin/views/queue.vue'),
 
@@ -91,28 +93,36 @@ export default Vue.extend({
 		stats(stats) {
 			this.inboxChart.updateSeries([{
 				name: 'Process',
+				type: 'area',
 				data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick }))
 			}, {
 				name: 'Active',
+				type: 'area',
 				data: stats.map((x, i) => ({ x: i, y: x.inbox.active }))
 			}, {
 				name: 'Waiting',
+				type: 'line',
 				data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting }))
 			}, {
 				name: 'Delayed',
+				type: 'line',
 				data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed }))
 			}]);
 			this.deliverChart.updateSeries([{
 				name: 'Process',
+				type: 'area',
 				data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick }))
 			}, {
 				name: 'Active',
+				type: 'area',
 				data: stats.map((x, i) => ({ x: i, y: x.deliver.active }))
 			}, {
 				name: 'Waiting',
+				type: 'line',
 				data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting }))
 			}, {
 				name: 'Delayed',
+				type: 'line',
 				data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed }))
 			}]);
 		}
@@ -182,7 +192,7 @@ export default Vue.extend({
 		connection.on('statsLog', this.onStatsLog);
 		connection.send('requestLog', {
 			id: Math.random().toString().substr(2, 8),
-			length: 100
+			length: limit
 		});
 
 		this.$once('hook:beforeDestroy', () => {
@@ -212,7 +222,7 @@ export default Vue.extend({
 
 		onStats(stats) {
 			this.stats.push(stats);
-			if (this.stats.length > 100) this.stats.shift();
+			if (this.stats.length > limit) this.stats.shift();
 		},
 
 		onStatsLog(statsLog) {
diff --git a/src/client/app/common/views/widgets/queue.vue b/src/client/app/common/views/widgets/queue.vue
index c28b5ea86..27ba35fbc 100644
--- a/src/client/app/common/views/widgets/queue.vue
+++ b/src/client/app/common/views/widgets/queue.vue
@@ -42,21 +42,29 @@ export default define({
 	watch: {
 		stats(stats) {
 			this.inChart.updateSeries([{
+				type: 'area',
 				data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick }))
 			}, {
+				type: 'area',
 				data: stats.map((x, i) => ({ x: i, y: x.inbox.active }))
 			}, {
+				type: 'line',
 				data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting }))
 			}, {
+				type: 'line',
 				data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed }))
 			}]);
 			this.outChart.updateSeries([{
+				type: 'area',
 				data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick }))
 			}, {
+				type: 'area',
 				data: stats.map((x, i) => ({ x: i, y: x.deliver.active }))
 			}, {
+				type: 'line',
 				data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting }))
 			}, {
+				type: 'line',
 				data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed }))
 			}]);
 		}