github.com/covergates/covergates@v0.2.2-0.20201009050117-42ef8a19fb95/web/src/components/ReportTimeline.vue (about)

     1  <template>
     2    <v-card flat>
     3      <v-card-title class="primary white--text">Default Branch Timeline</v-card-title>
     4      <v-card-text>
     5        <v-timeline dense clipped>
     6          <v-timeline-item
     7            fill-dot
     8            color="accent"
     9            small
    10            right
    11            v-for="(report, index) in history"
    12            :key="index"
    13          >
    14            <v-card>
    15              <v-list-item>
    16                <v-progress-circular
    17                  size="48"
    18                  :value="coverage(report)"
    19                  class="d-none d-sm-flex"
    20                  color="accent"
    21                >{{coverage(report)}}</v-progress-circular>
    22                <v-list-item-content class="ml-5">
    23                  <v-list-item-title>{{shortSHA(report)}}</v-list-item-title>
    24                  <v-list-item-subtitle class="d-flex d-sm-none primary--text">{{coverage(report)}}%</v-list-item-subtitle>
    25                  <v-list-item-subtitle>{{uploadData(report)}}</v-list-item-subtitle>
    26                </v-list-item-content>
    27                <v-list-item-action class="d-flex align-center justify-center">
    28                  <v-btn small color="accent" class="d-none d-sm-flex" :to="reportLink(report)">Report</v-btn>
    29                  <v-btn class="d-flex d-sm-none" fab x-small color="accent" :to="reportLink(report)">
    30                    <v-icon>mdi-file-chart</v-icon>
    31                  </v-btn>
    32                </v-list-item-action>
    33              </v-list-item>
    34            </v-card>
    35          </v-timeline-item>
    36        </v-timeline>
    37      </v-card-text>
    38    </v-card>
    39  </template>
    40  
    41  <script lang="ts">
    42  import { Location } from 'vue-router';
    43  import { Component } from 'vue-property-decorator';
    44  import Vue from '@/vue';
    45  
    46  @Component
    47  export default class ReportTimeline extends Vue {
    48    get history(): Report[] {
    49      return this.$store.state.report.history;
    50    }
    51  
    52    coverage(report: Report): number {
    53      if (report.coverages.length <= 0) {
    54        return 0;
    55      }
    56      let sum = 0;
    57      for (const coverage of report.coverages) {
    58        sum += coverage.statementCoverage;
    59      }
    60      return Math.round((sum / report.coverages.length) * 1000) / 10;
    61    }
    62  
    63    shortSHA(report: Report): string {
    64      return report.commit.substr(0, 16);
    65    }
    66  
    67    uploadData(report: Report): string {
    68      if (report.createdAt) {
    69        const date = new Date(report.createdAt);
    70        return date.toLocaleDateString();
    71      } else {
    72        return '';
    73      }
    74    }
    75  
    76    coverageColor(report: Report): string {
    77      const cov = this.coverage(report);
    78      if (cov > 80) {
    79        return 'green';
    80      } else if (cov > 40) {
    81        return 'amber';
    82      } else {
    83        return 'red';
    84      }
    85    }
    86  
    87    reportLink(report: Report): Location {
    88      return {
    89        name: 'report-overview',
    90        query: {
    91          ref: report.commit
    92        }
    93      };
    94    }
    95  }
    96  </script>
    97  
    98  <style lang="scss">
    99  .v-timeline-item__opposite {
   100    max-width: 100px !important;
   101  }
   102  </style>