Chart.vue

<template>
    <v-card 
        dense
        height="400"
        class="elevation-0"
        :disabled="step < 4"
    >
      <v-toolbar
          class="elevation-0 "
          dense
      >
          <v-toolbar-title>통계</v-toolbar-title>
          <v-spacer></v-spacer>
      </v-toolbar>
      <div v-if="result.length !== 0" class=" pa-0 ma-0">
        <DoughnutChart
            class="mt-3 pa-0 ma-0"
            :chart-data="totalColl"
            :height="220"
            :percent="percent"
        />
        <v-card-text>
          <v-list-item>
            <v-list-item-subtitle>응답 속도 합계</v-list-item-subtitle>
            <v-list-item-title>{{total === 0 ? 0 +' sec' : total.toFixed(2) + ' sec'}}</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-subtitle>응답 속도 평균</v-list-item-subtitle>
            <v-list-item-title>{{total/counter === 0 ? 0 +' sec' : (total/counter).toFixed(2) + ' sec'}} </v-list-item-title>
          </v-list-item>
        </v-card-text>
      </div>
    </v-card>
</template>

<script>
import DoughnutChart from '../../components/DoughnutChart.vue'

export default {
    data () {
      return {
        total:0,
        totalColl:{},
        success:0,
        fail:0,
        percent:0
      }
    },

    props: {
        step:Number,
        wpo:String,
        infos:Array,
        project:Object,
        result:Array,
        counter:Number
    },

    mounted(){
      this.totalColl = {
          labels: ['성공','실패'],
          datasets: [
              {
                  backgroundColor: ['#4CAF50' ,'#F44336'],
                  data: [ this.success ,this.fail],
              }
          ],
      }
    },

    components: {
        DoughnutChart,
    },

    watch:{
        result(current){
          
          if(current.length !== 0){
            
            this.total = this.total + current[current.length-1]['time']
            current[current.length-1]['result'] === 0 ?  ++ this.fail : ++this.success  
            
            this.percent = Math.round((100 * this.success ) / this.counter)

            this.totalColl = {
                labels: ['성공','실패'],
                datasets: [
                    {
                        backgroundColor: ['#4CAF50' ,'#F44336'],
                        data: [ this.success ,this.fail],
                    }
                ],
            }
          }
        }
    }

}
</script>

<style>

</style>