<template>
  <div>
    <highcharts :options="chartOptions.line" />
  </div>
</template>

<script>
import { setTime, Series, setCategories } from './helpers';
import { Chart } from 'highcharts-vue';

export default {
  components: {
    highcharts: Chart,
  },
  props: {
    timeScale: {
      type: String,
      default: 'hour',
    },
  },
  computed: {
    chartOptions() {
      return {
        line: {
          chart: {
            type: 'areaspline',
            margin: [12, 50, 32, 60],
            height: '320px',
          },
          title: null,
          xAxis: {
            categories: setTime(6, this.timeScale),
            title: null,
            labels: {
              step: 1,
            },
            minorGridLineColor: '#1A3E5B1A',
          },
          yAxis: {
            categories: setCategories(2.5, 'A'),
            min: 0,
            max: 4,
            title: null,
            tickInterval: 1,
            minorGridLineColor: '#1A3E5B1A',
          },
          series: Series['power'].map((item) => ({
            ...item,
            marker: {
              enabled: false,
            },
          })),
          legend: {
            enabled: false,
          },
          tooltip: {
            enabled: false,
            crosshairs: false,
          },
          plotOptions: {
            series: {
              showInLegend: true,
            },
            areaspline: {
              fillOpacity: 0,
            },
          },
        },
      };
    },
  },
};
</script>
<style lang="scss">
.highcharts-credits {
  display: none;
}

.highcharts-plot-line-label {
  transform: translate(-15px, 0) !important;
}
</style>
