<template>
  <div class="study-heat-map">
    <apexchart height="300" type="heatmap" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>

import ApexCharts from "vue-apexcharts";
export default {
  name: "StudyHeatMap",
  components: {
    apexchart: ApexCharts,
  },

  data() {
    return {
      series: [
        {
          name: "6:00 P.M.",
          data: this.generateData(5, {
            min: 0,
            max: 10,
          }),
        },
        {
          name: "7:00 P.M.",
          data: this.generateData(5, {
            min: 0,
            max: 10,
          }),
        },
        {
          name: "8:00 P.M.",
          data: this.generateData(5, {
            min: 0,
            max: 10,
          }),
        },
        {
          name: "9:00 P.M.",
          data: this.generateData(5, {
            min: 0,
            max: 10,
          }),
        },
        {
          name: "10:00 P.M.",
          data: this.generateData(5, {
            min: 0,
            max: 10,
          }),
        },
        {
          name: "11:00 P.M.",
          data: this.generateData(5, {
            min: 0,
            max: 10,
          }),
        },
      ],

      chartOptions: {
        chart: {
          height: "100%",
          width: "40%",
          type: "heatmap",
          toolbar: {
            show: false,
          },
        },
        tooltip: {
          custom: function ({ series, seriesIndex, dataPointIndex }) {
            let des=localStorage.getItem('lang')=='en'?' tutorials':' 個教材'
            return (
              '<div class="arrow_box">' +
              series[seriesIndex][dataPointIndex] + des
              +
              "</div>"
            );
          },
        },
        style: {
          fontSize: "16px",
          fontFamily: undefined,
        },
        xaxis: {
          type: "category",
          categories: this.$t('studentWeb.studyHeatMap.xAxisData'),
        },
        dataLabels: {
          enabled: false,
        },
        colors: ["#008352"],
        grid: {
          show: true,
          padding: {
            top: 20,
            right: 100,
            bottom: 40,
            left: 20,
          },
        },
      },
    };
  },
  methods: {
    generateData(count, yrange) {
      var i = 0;
      var series = [];
      while (i < count) {
        var x = (i + 1).toString();
        var y =
          Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
          yrange.min;
        series.push({
          x: x,
          y: y,
        });
        i++;
      }
      return series;
    },
  },
};
</script>
<style>
</style>

