{% include "_header.html" %}          

<!------------------------------------>
<!-- header selector content starts -->
<!------------------------------------>

<div class="form-group row pt-1"> <!-- first row starts -->

<!----->
<!--1-->
<!----->

    <div class="col-3" id="header_dd_left">
      <select class="form-control" onchange="left_dd(this);" id="dd_left">
        <option value="value" selected disabled>Select metric</option>
        <option v-for="todo in todos"> || todo ||</option>
      </select>
    </div>

<!----->
<!--2-->
<!----->

    <div class="col-3" id="header_dd_right">
      <select class="form-control" onchange="right_dd(this);" id="dd_right">
         <option value="value" selected disabled>Select metric</option>
        <option v-for="todo in todos"> || todo ||</option>
      </select>
    </div>

  </div> <!-- first row ends -->

<!------------------------------->
<!-- sparklines content starts -->
<!------------------------------->

<!----->
<!--1-->
<!----->

  <div class="row"> <!-- second row starts -->
  <div class="col-12 col-lg-6 col-xl-3">
    <div class="widget widget-tile card card-border-color card-border-color-warning">
      <div class="data-info row">
        <div class="text-center">
          <span class="indicator indicator-positive mdi mdi-chevron-up mb-4"></span>
          <span class="h1" id="max_a"></span>
          <span class="h1 ml-3 mr-2"> / </span>
          <span class="h1" id="min_a"></span>
          <span class="indicator indicator-negative mdi mdi-chevron-down mb-4 ml-1"></span>
          <div class="desc text-center mb-0 pb-0" style="color: grey;"><span id='a_label'></span></div>
        </div>
      </div>
    </div>
  </div>

<!----->
<!--2-->
<!----->

  <div class="col-12 col-lg-6 col-xl-3">
    <div class="widget widget-tile card card-border-color card-border-color-warning">
      <div class="data-info row">
        <div class="text-center">
          <span class="indicator indicator-positive mdi mdi-chevron-up mb-4"></span>
          <span class="h1" id="max_b"></span>
          <span class="h1 ml-3 mr-2"> / </span>
          <span class="h1" id="min_b"></span>
          <span class="indicator indicator-negative mdi mdi-chevron-down mb-4 ml-1"></span>
          <div class="desc text-center mb-0 pb-0" style="color: grey;"><span id='b_label'></span></div>
        </div>
      </div>
    </div>
  </div>

<!----->
<!--3-->
<!----->

  <div class="col-12 col-lg-6 col-xl-3">
    <div class="widget widget-tile card card-border-color card-border-color-warning">
      <div class="chart sparkline" id="spark2"></div>
      <div class="data-info">
        <div class="desc">mean <span id='mean_a_label'></span></div>
        <div class="value"><span class="indicator indicator-positive mdi mdi-chevron-up"></span><span class="number" id="mean_a"></span>
        </div>
      </div>
    </div>
  </div>

<!----->
<!--4-->
<!----->

  <div class="col-12 col-lg-6 col-xl-3 ">
    <div class="widget widget-tile card card-border-color card-border-color-warning">
      <div class="chart sparkline" id="spark4"></div>
      <div class="data-info">
        <div class="desc">mean <span id='mean_b_label'></span></div>
        <div class="value"><span class="indicator indicator-negative mdi mdi-chevron-down"></span><span class="number" id="mean_b"></span>
        </div>
      </div>
    </div>
  </div>

</div> <!-- second row ends -->
  
<!------------------------------->
<!-- main plots content starts -->
<!------------------------------->        

<div class="row"> <!-- third row starts -->

    <div class="col-12">
      <div class="card card-border-color card-border-color-warning">
        <div class="card-body mt-5">
        <canvas id="myChart"></canvas>
        </div>
      </div>
    </div>

</div> <!-- third row ends -->


<!------------------------>
<!-- SCRIPTS START HERE -->
<!------------------------>  

{% include "_footer.html" %}

<script type="text/javascript">

//Bootstrap Slider init



var experiment_ids = {{ experiment_ids | safe }}

// initial state

function initialState() {
    generateExperimentSelector(experiment_ids)
    initialDataState(experiment_ids)
}

// idle state

// app init

$(document).ready(function(){
	App.init();
});



function updateSparksA(a, label) { 

  a = a.map(num => Number(num))
  max_a = Math.max.apply(Math, a.slice(-60))
  min_a = Math.min.apply(Math, a.slice(-60))
  javascript:document.getElementById('max_a').innerHTML = max_a.toFixed(3)
  javascript:document.getElementById('min_a').innerHTML = min_a.toFixed(3)
  javascript:document.getElementById('mean_a').innerHTML = avg(a.slice(-60)).toFixed(3)
  javascript:document.getElementById('a_label').innerHTML = label
  javascript:document.getElementById('mean_a_label').innerHTML = label


};

function updateSparksB(b, label) { 
  
  b = b.map(num => Number(num))
  max_b = Math.max.apply(Math, b.slice(-60))
  min_b = Math.min.apply(Math, b.slice(-60))
  javascript:document.getElementById('max_b').innerHTML = max_b.toFixed(3)
  javascript:document.getElementById('min_b').innerHTML = min_b.toFixed(3)

  javascript:document.getElementById('mean_b').innerHTML = avg(b.slice(-60)).toFixed(3)
  javascript:document.getElementById('b_label').innerHTML = label
  javascript:document.getElementById('mean_b_label').innerHTML = label

};

  Chart.Legend.prototype.afterFit = function() {
      this.height = this.height + 30;
  };

  var ctx = document.getElementById('myChart').getContext('2d');
  function makeChart(a, b) {
      var myChart = new Chart(ctx, {
        type: 'line',
        options: {
                responsive: true,
                elements: {
                    line: {
                        tension: .5 // disables bezier curves
                    }
                },
                animation: {
                    duration: 0 // general animation time
                },
                legend: {
                    position: 'top',
                    fontSize: 20
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                            display: true,
                            ticks: {
                                padding: 15,
                                steps: 10,
                                fontSize: 16,
                                fontColor: "#808080",
                                autoskip: true,
                                autoSkipPadding: 30,
                                maxRotation: 0,
                                maxRotation: 0
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'seconds',
                                beginAtZero: true,
                                fontSize: 16,
                                fontColor: "#808080"
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                padding: 15,
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 0.1,
                                max: 1,
                                fontSize: 16,
                                fontColor: "#808080"
                            }
                        }]
                },
                title: {
                    //display: true,
                    // text: 'Model Validation Performance',
                    fontSize: 20,
                }
            },
        data: {
          labels: range(1, b.length).slice(-60),
          datasets: [
            {
              label: document.getElementById('dd_left').value,
              backgroundColor: 'rgba(98, 98, 98, .3)',
              data: a,
              showLine: true,
              pointBorderColor: 'rgba(98, 98, 98, .6)',
            },
            {
              label: document.getElementById('dd_right').value,
              backgroundColor: 'rgba(234, 128, 95, .4)',
              data: b,
              showLine: true,
              pointBorderColor: 'rgba(234, 128, 95, .5)',
            }
          ]
        }
      });

    window.chart = myChart

    }

    function left_dd(sel) {
        var a = window.dataset.map(function(d) {return d[sel.value]});
        window.chart.data.datasets[0].data = a.slice(-60);
        window.chart.data.datasets[0].label = sel.value;
        window.chart.update();
        updateSparksA(a, sel.value)
        window.dd_left = sel.value
      
    }

    function right_dd(sel) {
        var b = window.dataset.map(function(d) {return d[sel.value]});
        window.chart.data.datasets[1].data = b.slice(-60);
        window.chart.data.datasets[1].label = sel.value;
        window.chart.update();
        updateSparksB(b, sel.value)
        window.dd_right = sel.value
    }

       setInterval(() => {
          
       var filename = '/data/' + sessionStorage.getItem('experiment_id') + '.log'
        d3.csv(filename).then(generateData);
         
         }, 1000)


    </script>
  </body>
</html>