<template>
   <div>
     <dygraphs width="800" :graphData="series" :graphOptions="options"></dygraphs>
   </div>
</template>

<script>
export default {
  props: ['raw_data'],
  name: "LineBase",
  data() {
    return {
      options: {
        legend: 'always',
        title: 'Load Graph',
        xlabel: 'Dátum',
        labels: ['Dátum','Zatazenie'],
        ylabel: 'Percent',
        fillGraph: true
      },
      series: [],
    };
  },
    created: function () {
    // `this` points to the vm instance
    console.log('created load');

    let last_time = null;
    let last_load = null;

    for (var index = 0; index < this.raw_data.length; ++index) {
        let row = this.raw_data[index];
        let load = row["load"];
        let created_at = row["created_at"];

        let time = moment(created_at);

        if (last_time == null || time.unix() - last_time.unix() > 900 ) {
          if (last_time != null) {
            this.series.push([last_time.toDate(),null]);
          }

          this.series.push([time.toDate(),null]);

          last_time = time;
          last_load = null;

          continue;
        }

        this.series.push([time.toDate(),load]);

        last_time = time;
        last_load = load;
    }
    console.log(this.series);
  }
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
}
</style>
