timestrap-django

  1<template>
  2  <div class="row chartjs-wrapper bg-secondary pt-4 pb-2">
  3    <canvas
  4      id="chartjs-1"
  5      class="chartjs"/>
  6  </div>
  7</template>
  8
  9
 10<script>
 11import Chart from 'chart.js';
 12
 13
 14export default {
 15  props: [
 16    'entries',
 17  ],
 18  data() {
 19    return {
 20      renderedChart: false,
 21    };
 22  },
 23  watch: {
 24    entries() {
 25      this.destroy();
 26      this.update();
 27    },
 28  },
 29  mounted() {
 30    this.update();
 31  },
 32  destroyed() {
 33    this.destroy();
 34  },
 35  methods: {
 36    update() {
 37      let chartDates = [];
 38      let chartDurations = [];
 39      let entryBlock;
 40      for (entryBlock in this.entries) {
 41        chartDates.push(this.$moment(this.entries[entryBlock].date).format('MMMM Do'));
 42        let entry;
 43        let totalTime = 0;
 44        for (entry in this.entries[entryBlock].entries) {
 45          totalTime = totalTime + this.entries[entryBlock].entries[entry].duration;
 46        }
 47        totalTime = Math.round(totalTime * 10) / 10;
 48        chartDurations.push(totalTime);
 49      }
 50
 51      this.renderedChart = new Chart(document.getElementById('chartjs-1'), {
 52        type: 'bar',
 53        data: {
 54          labels: chartDates,
 55          datasets: [{
 56            backgroundColor: [
 57              'rgba(255, 99, 132, 0.2)',
 58              'rgba(54, 162, 235, 0.2)',
 59              'rgba(255, 206, 86, 0.2)',
 60              'rgba(75, 192, 192, 0.2)',
 61              'rgba(153, 102, 255, 0.2)',
 62            ],
 63            borderColor: [
 64              'rgba(255,99,132,1)',
 65              'rgba(54, 162, 235, 1)',
 66              'rgba(255, 206, 86, 1)',
 67              'rgba(75, 192, 192, 1)',
 68              'rgba(153, 102, 255, 1)',
 69            ],
 70            borderWidth: 1,
 71            data: chartDurations,
 72          }],
 73        },
 74        options: {
 75          maintainAspectRatio: false,
 76          legend: {
 77            display: false,
 78          },
 79          scales: {
 80            yAxes: [{
 81              ticks: {
 82                beginAtZero: true,
 83                fontColor: 'rgba(255, 255, 255, 1)',
 84              },
 85              gridLines: {
 86                color: 'rgba(255, 255, 255, .2)',
 87                zeroLineColor: 'rgba(255, 255, 255, .6)',
 88              },
 89            }],
 90            xAxes: [{
 91              ticks: {
 92                fontColor: 'rgba(255, 255, 255, 1)',
 93              },
 94              gridLines: {
 95                color: 'rgba(255, 255, 255, .2)',
 96              },
 97            }],
 98          },
 99        },
100      });
101    },
102    destroy() {
103      if (this.renderedChart) this.renderedChart.destroy();
104    },
105  },
106};
107</script>
108
109
110<style lang="scss" scoped>
111.chartjs-wrapper {
112  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/imgs/background.jpg');
113  background-size: cover;
114  background-position: center center;
115  height: 250px;
116}
117</style>