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

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

    let last_time = null;
    let last_total = 0;
    let last_free = 0;
    let last_used = 0;

    for (var index = 0; index < this.raw_data.length; ++index) {
        let row = this.raw_data[index];
        let memory = [row["memory_total"],row["memory_used"], row["memory_free"]];
        memory = memory.map(function (x) {
            if (x > 8*1024) { return Math.floor(x/1024) } 
            else {return x} 
        }); 
        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(),0,0,0]);
          }

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

          last_time = time;
 
          continue;
        }

        this.series.push([time.toDate()].concat(memory));

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

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