<template>
  <div>
    <div id="chart">
      <apexchart
        type="rangeBar"
        height="350"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          data: [
            {
              x: 'Analysis',
              y: [
                new Date('2019-02-27').getTime(),
                new Date('2019-03-04').getTime(),
              ],
              fillColor: '#008FFB',
            },
            {
              x: 'Design',
              y: [
                new Date('2019-03-04').getTime(),
                new Date('2019-03-08').getTime(),
              ],
              fillColor: '#00E396',
            },
            {
              x: 'Coding',
              y: [
                new Date('2019-03-07').getTime(),
                new Date('2019-03-10').getTime(),
              ],
              fillColor: '#775DD0',
            },
            {
              x: 'Testing',
              y: [
                new Date('2019-03-08').getTime(),
                new Date('2019-03-12').getTime(),
              ],
              fillColor: '#FEB019',
            },
            {
              x: 'Deployment',
              y: [
                new Date('2019-03-12').getTime(),
                new Date('2019-03-17').getTime(),
              ],
              fillColor: '#FF4560',
            },
          ],
        },
      ],
      chartOptions: {
        chart: {
          height: 350,
          type: 'rangeBar',
        },
        title: {
          text: 'Project Phases (per-bar colors)',
        },
        plotOptions: {
          bar: {
            horizontal: true,
            distributed: true,
            dataLabels: {
              hideOverflowingLabels: false,
            },
          },
        },
        dataLabels: {
          enabled: true,
          formatter: function (val, opts) {
            var label = opts.w.globals.labels[opts.dataPointIndex]
            var diff = Math.round((val[1] - val[0]) / (1000 * 60 * 60 * 24))
            return label + ': ' + diff + (diff > 1 ? ' days' : ' day')
          },
          style: {
            colors: ['#f3f4f5', '#fff'],
          },
        },
        xaxis: {
          type: 'datetime',
        },
        yaxis: {
          show: false,
        },
        grid: {
          row: {
            colors: ['#f3f4f5', '#fff'],
            opacity: 1,
          },
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 650px;
  margin: 35px auto;
}
</style>