<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: 'Network Graph',
        xlabel: 'Dátum',
        labels: ['Dátum','Prijate','Odoslane'],
        ylabel: 'Bytes',
        labelsKMG2: true,
        fillGraph: true
      },
      series: [],
    };
  },
    created: function () {
    // `this` points to the vm instance
    console.log('created');

    let last_time = null;
    let last_recv = 0;
    let last_sent = 0;

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

        let time = moment(created_at);

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

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

          last_time = time;
          last_recv = 0;
          last_sent = 0;

          continue;
        }

        let rb = recv - last_recv;
        let sb = sent - last_sent;
        let lt = time.unix() - last_time.unix();

        this.series.push([time.toDate(),rb/lt,sb/lt]);

        last_time = time;
        last_recv = recv;
        last_sent = sent;

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

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