<template>
  <div>
    <div id="chart">
      <apexchart
        type="area"
        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: [
        {
          name: 'Gateway 1',
          data: [
            {
              x: 'Dec 23 2024',
              y: null,
            },
            {
              x: 'Dec 24 2024',
              y: 44,
            },
            {
              x: 'Dec 25 2024',
              y: 31,
            },
            {
              x: 'Dec 26 2024',
              y: 38,
            },
            {
              x: 'Dec 27 2024',
              y: null,
            },
            {
              x: 'Dec 28 2024',
              y: 32,
            },
            {
              x: 'Dec 29 2024',
              y: 55,
            },
            {
              x: 'Dec 30 2024',
              y: 51,
            },
            {
              x: 'Dec 31 2024',
              y: 67,
            },
            {
              x: 'Jan 01 2025',
              y: 22,
            },
            {
              x: 'Jan 02 2025',
              y: 34,
            },
            {
              x: 'Jan 03 2025',
              y: null,
            },
            {
              x: 'Jan 04 2025',
              y: null,
            },
            {
              x: 'Jan 05 2025',
              y: 11,
            },
            {
              x: 'Jan 06 2025',
              y: 4,
            },
            {
              x: 'Jan 07 2025',
              y: 15,
            },
            {
              x: 'Jan 08 2025',
              y: null,
            },
            {
              x: 'Jan 09 2025',
              y: 9,
            },
            {
              x: 'Jan 10 2025',
              y: 34,
            },
            {
              x: 'Jan 11 2025',
              y: null,
            },
            {
              x: 'Jan 12 2025',
              y: null,
            },
            {
              x: 'Jan 13 2025',
              y: 13,
            },
            {
              x: 'Jan 14 2025',
              y: null,
            },
          ],
        },
      ],
      chartOptions: {
        chart: {
          type: 'area',
          height: 350,
          animations: {
            enabled: false,
          },
          zoom: {
            enabled: false,
          },
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: 'straight',
        },
        fill: {
          type: 'gradient',
          gradient: {
            opacityFrom: 0.5,
            opacityTo: 0.1,
          },
        },
        markers: {
          size: 5,
          hover: {
            size: 9,
          },
        },
        title: {
          text: 'Sensor Uptime',
        },
        subtitle: {
          text: 'Dropped readings (null values) leave gaps in the area',
        },
        tooltip: {
          intersect: true,
          shared: false,
        },
        xaxis: {
          type: 'datetime',
        },
        yaxis: {
          title: {
            text: 'Throughput (Mbps)',
          },
        },
      },
    }
  },
}
</script>

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