diff --git a/frontend/src/components/Stats/SpiderStats.vue b/frontend/src/components/Stats/SpiderStats.vue index 6abb9527..5bc5608b 100644 --- a/frontend/src/components/Stats/SpiderStats.vue +++ b/frontend/src/components/Stats/SpiderStats.vue @@ -41,13 +41,13 @@ -

{{$t('Tasks by Status')}}

+

{{$t('Long Tasks')}}

-

{{$t('Tasks by Status')}}

+

{{$t('Daily Duration')}}

@@ -74,9 +74,22 @@ export default { type: 'pie', radius: ['50%', '70%'], data: this.statusStats.map(d => { + let color + if (d.name === 'SUCCESS') { + color = '#67c23a' + } else if (d.name === 'STARTED') { + color = '#e6a23c' + } else if (d.name === 'FAILURE') { + color = '#f56c6c' + } else { + color = 'grey' + } return { name: this.$t(d.name), - value: d.value + value: d.value, + itemStyle: { + color + } } }) }] @@ -112,9 +125,38 @@ export default { chart.setOption(option) }, + renderDurationLine () { + const chart = echarts.init(this.$el.querySelector('#duration-line')) + const option = { + grid: { + top: 20, + bottom: 40 + }, + xAxis: { + type: 'category', + data: this.dailyStats.map(d => d.date) + }, + yAxis: { + type: 'value' + }, + series: [{ + type: 'line', + data: this.dailyStats.map(d => d.duration), + areaStyle: {}, + smooth: true + }], + tooltip: { + trigger: 'axis', + show: true + } + } + chart.setOption(option) + }, + render () { this.renderTaskPie() this.renderTaskLine() + this.renderDurationLine() }, update () {