@extends('welcome')

@section('content')
  <div class="title m-b-md">
    Monitoring {{ $type }} on OkU TT
  </div>
    Parametre</br>
    Analyza uzivatela: {{ $user }} <br/>
    Datum od: {{ $start }} <br/>
    Datum do: {{ $end }} <br/>
    
    <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
    <script>
 

Plotly.d3.csv("{!! route('csv',['type' => $type, 'start'=> $start, 'end'=> $end, 'user'=> $user]) !!}", function(err, rows){

function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}


var trace1 = {
type: "scatter",
mode: "lines",
name: "Recived bytes",
x: unpack(rows, 'Date'),
y: unpack(rows, 'Recv'),
line: {color: '#17BECF'}
}

var trace2 = {
type: "scatter",
mode: "lines",
name: "Send bytes",
x: unpack(rows, 'Date'),
y: unpack(rows, 'Send'),
line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];

var layout = {
title: 'Bandwidth',
xaxis: {
  
  type: 'date'
},
yaxis: {
  autorange: true,
  //tickformat: '.2f',
  type: 'linear'
}
};

Plotly.newPlot('myDiv', data, layout);
})



    </script>
@endsection