<template>
  <div>
    <div id="wrapper">
      <div id="chart-months">
        <apexchart
          type="area"
          height="180"
          :options="chartOptions"
          :series="series"
        ></apexchart>
      </div>

      <h5 class="github-style">
        <div class="userimg">C</div>
        <div class="userdetails">
          <a class="username">coder</a>
          <span class="cmeta"> <span class="commits"></span> commits </span>
        </div>
      </h5>

      <div id="chart-years">
        <apexchart
          type="area"
          height="150"
          :options="chartOptionsYears"
          :series="seriesYears"
        ></apexchart>
      </div>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

// This demo also loads: https://apexcharts.com/samples/assets/github-data.js

// The commit history asset ends in 2018; shift every point forward 8 years
// so the demo lands in 2020-2026 without editing the asset.
var SHIFT = 8 * 365.25 * 24 * 60 * 60 * 1000
var commitSeries = githubdata.series.map(function (p) {
  return { x: p.x + SHIFT, y: p.y }
})

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          name: 'commits',
          data: commitSeries,
        },
      ],
      chartOptions: {
        chart: {
          id: 'chartyear',
          type: 'area',
          height: 180,
          background: '#F6F8FA',
          toolbar: {
            show: false,
            autoSelected: 'pan',
          },
          events: {
            mounted: function (chart) {
              var commitsEl = document.querySelector('.cmeta span.commits')
              var commits = chart.getSeriesTotalXRange(
                chart.w.globals.minX,
                chart.w.globals.maxX,
              )

              commitsEl.innerHTML = commits
            },
            updated: function (chart) {
              var commitsEl = document.querySelector('.cmeta span.commits')
              var commits = chart.getSeriesTotalXRange(
                chart.w.globals.minX,
                chart.w.globals.maxX,
              )

              commitsEl.innerHTML = commits
            },
          },
        },
        colors: ['#FF7F00'],
        stroke: {
          width: 0,
          curve: 'monotoneCubic',
        },
        dataLabels: {
          enabled: false,
        },
        fill: {
          opacity: 1,
          type: 'solid',
        },
        yaxis: {
          show: true,
          forceNiceScale: true,
        },
        xaxis: {
          type: 'datetime',
        },
      },
      seriesYears: [
        {
          name: 'commits',
          data: commitSeries,
        },
      ],
      chartOptionsYears: {
        chart: {
          height: 150,
          type: 'area',
          background: '#F6F8FA',
          toolbar: {
            autoSelected: 'selection',
          },
          brush: {
            enabled: true,
            target: 'chartyear',
          },
          selection: {
            enabled: true,
            xaxis: {
              min: new Date('15 Feb 2024').getTime(),
              max: new Date('14 Feb 2025').getTime(),
            },
          },
        },
        colors: ['#7BD39A'],
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: 0,
          curve: 'monotoneCubic',
        },
        fill: {
          opacity: 1,
          type: 'solid',
        },
        legend: {
          position: 'top',
          horizontalAlign: 'left',
        },
        xaxis: {
          type: 'datetime',
        },
      },
    }
  },
}
</script>

<style>
#wrapper {
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
  max-width: 650px;
  margin: 35px auto;
}

.github-style {
  clear: both;
  font-weight: 400;
  height: 40px;
  margin-left: 6px;
}

.github-style a {
  color: #0366d6;
  font-size: 18px;
}

.github-style .cmeta {
  display: block;
  color: #777;
  font-weight: 400;
}

.github-style .userimg {
  float: left;
  display: block;
  border-radius: 3px;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #008ffb, #00e396);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 38px;
  text-align: center;
}

.github-style .userdetails {
  float: left;
  margin-left: 10px;
}
</style>