Better queue chart

This commit is contained in:
syuilo 2019-03-15 13:09:19 +09:00
parent bf5d43054b
commit 09e25e6a02
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 9 additions and 7 deletions

View file

@ -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();

View file

@ -4,7 +4,7 @@ import { deliverQueue, inboxQueue } from '../queue';
const ev = new Xev();
const interval = 1000;
const interval = 2000;
/**
* Report queue stats regularly