From 09e25e6a02a851fe69e5871dd9a2ae5320f61b18 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 15 Mar 2019 13:09:19 +0900
Subject: [PATCH] Better queue chart

---
 src/client/app/admin/views/queue.vue | 14 ++++++++------
 src/daemons/queue-stats.ts           |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/client/app/admin/views/queue.vue b/src/client/app/admin/views/queue.vue
index 63ff87e7d3..3c23444c4d 100644
--- a/src/client/app/admin/views/queue.vue
+++ b/src/client/app/admin/views/queue.vue
@@ -9,7 +9,7 @@
 				<ui-input :value="latestStats.deliver.activeSincePrevTick | number" type="text" readonly>
 					<span>Process</span>
 					<template #prefix><fa :icon="fasPlayCircle"/></template>
-					<template #suffix>jobs/s</template>
+					<template #suffix>jobs/tick</template>
 				</ui-input>
 				<ui-input :value="latestStats.deliver.active | number" type="text" readonly>
 					<span>Active</span>
@@ -36,7 +36,7 @@
 				<ui-input :value="latestStats.inbox.activeSincePrevTick | number" type="text" readonly>
 					<span>Process</span>
 					<template #prefix><fa :icon="fasPlayCircle"/></template>
-					<template #suffix>jobs/s</template>
+					<template #suffix>jobs/tick</template>
 				</ui-input>
 				<ui-input :value="latestStats.inbox.active | number" type="text" readonly>
 					<span>Active</span>
@@ -131,8 +131,10 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		const chartOpts = {
+		const chartOpts = id => ({
 			chart: {
+				id,
+				group: 'queue',
 				type: 'area',
 				height: 200,
 				animations: {
@@ -186,10 +188,10 @@ export default Vue.extend({
 				show: false,
 				min: 0,
 			}
-		};
+		});
 
-		this.inboxChart = new ApexCharts(this.$refs.inboxChart, chartOpts);
-		this.deliverChart = new ApexCharts(this.$refs.deliverChart, chartOpts);
+		this.inboxChart = new ApexCharts(this.$refs.inboxChart, chartOpts('a'));
+		this.deliverChart = new ApexCharts(this.$refs.deliverChart, chartOpts('b'));
 
 		this.inboxChart.render();
 		this.deliverChart.render();
diff --git a/src/daemons/queue-stats.ts b/src/daemons/queue-stats.ts
index 8c879c4ef0..00709f2607 100644
--- a/src/daemons/queue-stats.ts
+++ b/src/daemons/queue-stats.ts
@@ -4,7 +4,7 @@ import { deliverQueue, inboxQueue } from '../queue';
 
 const ev = new Xev();
 
-const interval = 1000;
+const interval = 2000;
 
 /**
  * Report queue stats regularly