<template>
  <v-card color="main_accent" outlined shaped>
    <div>
      <p></p>
      <h3 align="center">Week Summary</h3>
      <div id="chart">
        <apexchart class="ma-5" type="bar" width="100%"  :options="chartOptions" :series="series"></apexchart>
      </div>
    </div>
  </v-card>
</template>


<script>
import VueApexCharts from "vue-apexcharts";
export default {
  name: "WeekSummary",
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series: [
        {
          name: "Working Hours",
          data: [6, 4, 8, 8, 9, 2]
        },
        {
          name: "Pause Hours",
          data: [1, 0.5, 2, 1, 3, 0.2]
        }
      ],
      chartOptions: {
        chart: {
          type: "bar",
          stacked: true,
          background: "#202020",
          toolbar: {
            show: true,
            offsetX: 0,
            offsetY: 0,
            tools: {
              download: true,
              selection: true,
              zoom: false,
              zoomin: false,
              zoomout: false,
              pan: false,
              reset: false,
              customIcons: []
            },
            autoSelected: "zoom"
          }
        },
        colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
        theme: {
          mode: "dark"
        },
        dataLabels: {
          enabled: false
        },
        tooltip: {
          enabled: true,
          followCursor: true,
          x: {
            show: false
          },
          y: {
            formatter: function(value) {
              var decimalTimeString = value;
              var decimalTime = parseFloat(decimalTimeString);
              decimalTime = decimalTime * 60 * 60;
              var hours = Math.floor(decimalTime / (60 * 60));
              decimalTime = decimalTime - hours * 60 * 60;
              var minutes = Math.floor(decimalTime / 60);
              decimalTime = decimalTime - minutes * 60;
              var seconds = Math.round(decimalTime);
              if (hours < 10) {
                hours = "0" + hours;
              }
              if (minutes < 10) {
                minutes = "0" + minutes;
              }
              if (seconds < 10) {
                seconds = "0" + seconds;
              }
              return hours + ":" + minutes + ":" + seconds;
            }
          }
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              legend: {
                position: "bottom",
                offsetX: -10,
                offsetY: 0
              }
            }
          }
        ],
        plotOptions: {
          bar: {
            horizontal: false
          }
        },
        xaxis: {
          type: "datetime",
          categories: [
            "01/01/2011 GMT",
            "01/02/2011 GMT",
            "01/03/2011 GMT",
            "01/04/2011 GMT",
            "01/05/2011 GMT",
            "01/06/2011 GMT"
          ]
        },
        legend: {
          show: false,
          position: "left",
          offsetY: 40
        },
        fill: {
          opacity: 1
        }
      }
    };
  }
};
</script>


<style scoped>
</style>