crawlab/frontend/src/components/Stats/SpiderStats.vue

<template>
  <div class="spider-stats" v-loading="loading">
    <!--overall stats-->
    <el-row>
      <div class="metric-list">
        <metric-card label="30-Day Tasks"
                     icon="fa fa-play"
                     :value="overviewStats.task_count"
                     type="danger"/>
        <metric-card label="30-Day Results"
                     icon="fa fa-table"
                     :value="overviewStats.result_count"
                     type="primary"/>
        <metric-card label="Success Rate"
                     icon="fa fa-check"
                     :value="getPercentStr(overviewStats.success_rate)"
                     type="success"/>
        <metric-card label="Avg Duration (sec)"
                     icon="fa fa-hourglass"
                     :value="getDecimal(overviewStats.avg_runtime_duration)"
                     type="warning"/>
      </div>
    </el-row>
    <!--./overall stats-->

    <el-row>
      <el-col :span="24">
        <el-card class="chart-wrapper">
          <h4>{{$t('Daily Tasks')}}</h4>
          <div id="task-line" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card class="chart-wrapper">
          <h4>{{$t('Daily Avg Duration (sec)')}}</h4>
          <div id="duration-line" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  mapState
} from 'vuex'
import MetricCard from './MetricCard'
import echarts from 'echarts'

export default {
  name: 'SpiderStats',
  components: { MetricCard },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    renderTaskLine () {
      const chart = echarts.init(this.$el.querySelector('#task-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.task_count),
          areaStyle: {},
          smooth: true
        }],
        tooltip: {
          trigger: 'axis',
          show: true
        }
      }
      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.avg_runtime_duration),
          areaStyle: {},
          smooth: true
        }],
        tooltip: {
          trigger: 'axis',
          show: true
        }
      }
      chart.setOption(option)
    },

    render () {
      this.renderTaskLine()
      this.renderDurationLine()
    },

    update () {
      this.loading = true
      this.$store.dispatch('spider/getSpiderStats')
        .then(() => {
          this.render()
        })
        .catch(() => {
          this.$message.error(this.$t('An error happened when fetching the data'))
        })
        .finally(() => {
          this.loading = false
        })
    },

    getPercentStr (value) {
      if (value === undefined) return 'NA'
      return (value * 100).toFixed(2) + '%'
    },

    getDecimal (value) {
      if (value === undefined) return 'NA'
      return value.toFixed(2)
    }
  },
  computed: {
    ...mapState('spider', [
      'overviewStats',
      'statusStats',
      'nodeStats',
      'dailyStats'
    ])
  },
  mounted () {
  }
}
</script>

<style scoped>
  .metric-list {
    display: flex;
  }

  .metric-list .metric-card {
    flex-basis: 25%;
  }

  .chart-wrapper {
    margin-top: 20px;
  }

  .chart {
    width: 100%;
    height: 240px;
  }

  .table {
    height: 240px;
  }

  h4 {
    display: inline-block;
    margin: 0
  }
</style>