<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sarcharts {{ hostname }}</title>
    <link rel="stylesheet" href="html/css/sarcharts.css" />
    <script src="html/js/jquery.js"></script>
    <script src="html/js/chart.umd.js"></script>
    <script src="html/js/hammer.min.js"></script>
    <script src="html/js/chartjs-plugin-zoom.min.js"></script>

</head>
<body>
  {% include "header.html" %}
  <div class="menucontainer">
    <ul>
  {% for item in details['datasets'].keys() %}
    {% if item != "" %}
      <li class="i_inactive"><a href='#'>{{ item }}</a></li>
    {% endif %}
  {% endfor %}
    </ul>
  </div>
    <div class="chart">
      <canvas id="chartcanvas"></canvas>
    </div>
<script>
$('.i_inactive').click(function() {
  $(".i_active").attr("class","i_inactive");
  $(this).attr("class","i_active");
  showChart($(this).text());
});

function showChart(name) {
  myChart.destroy();
  myChart = new Chart(ctx, {
    type: 'line',
      data: {
        labels: myCharts[name]['labels'],
        datasets: myCharts[name]['datasets']
      },
    options: {
      maintainAspectRatio: false,
      responsive: true,
      plugins: {
        legend: {
          position: 'top'
        },
        zoom: {
          zoom: {
            drag: {
              enabled: true
            },
            wheel: {
              enabled: true,
            },
            pinch: {
              enabled: true
            },
            mode: 'x',
          }
        }
      }
    }
  });
}

var myCharts = {
  {% for item, data in details['datasets'].items() %}
  '{{ item }}': {
    'labels': {{ details['labels'] }},
    'datasets': [
    {% for i in range(data|length) %}
      {
      {{ "hidden: true," if data[i]['label'] in details['hidden'] else "" }}
      label: '{{ data[i]['label'] }}',
      data: {{ data[i]['values'] }},
      borderColor: 'rgb({{ colors[i] }} 0.3)',
      backgroundColor: 'rgb({{ colors[i] }})'
      }{{ ", " if not loop.last else "" }}
    {% endfor %}
    ]
  }{{ ", " if not loop.last else "" }}
  {% endfor %}
}

var ctx = document.getElementById('chartcanvas').getContext('2d');
var myChart = new Chart(ctx);

$(document).ready(function () {
  showChart($('.i_inactive').first().text());
  $('.i_inactive').first().attr("class", "i_active");
});

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