<!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" />
    <link rel="stylesheet" href="html/css/ul-select.css" />
    <script src="html/js/jquery.js"></script>
    <script src="html/js/hammer.min.js"></script>
    <script src="html/js/ul-select.js"></script>
    <script src="html/js/chart.umd.js"></script>
    <script src="html/js/chartjs-plugin-zoom.min.js"></script>
    <script src="html/js/chartjs-plugin-annotation.min.js"></script>
    <script src="html/js/chartjs-adapter-date-fns.bundle.min.js"></script>

</head>
<body>
<section class="container">
  {% include "header.html" %}
  <div class="activities">
    <ul>
  {% for item in details['datasets'].keys() %}
    {% if item != "" %}
      <li class="i_inactive"><a href='#'>{{ item }}</a></li>
    {% endif %}
  {% endfor %}
    </ul>
  </div>
</section>
<div id="popup"></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());
});
{% for c in range(events|length) %}
  {% set event = (events.keys()|list)[c] %}
  {% for i in range(events[event]|length) %}
  {% set eventdata = events[event][i] %}
  const event{{ c }}_{{ i }} = {
    type: 'line',
    enter: function({element}) {
      element.label.options.color = "rgba({{ colors[c] }})",
      element.label.options.content = ["{{ event }}", "{{ eventdata['date'] }}"];
      return true;
    },
    leave: function({element}) {
      element.label.options.color = "rgba({{ colors[c] }}, 0.4)",
      element.label.options.content = "{{ event }}";
      return true;
    },
    click: function({element}) {
      $("#popup").show();
      $("#popup").text("{{ eventdata['text'] }}");
    },
    borderColor: "rgba({{ colors[c] }}, 0.4)",
    borderWidth: 1,
    display: (ctx) => ctx.chart.isDatasetVisible(1),
    label: {
      display: true,
      position: 'start',
      content: "{{ event }}",
      backgroundColor: 'transparent',
      opacity: 0,
      rotation: 90,
      xAdjust: 5,
      yAdjust: 15,
      font: { size: 11 },
      color: 'rgba({{ colors[c] }}, 0.4)'
    },
    scaleID: 'x',
    value: "{{ eventdata['date'] }}"
  };
  {% endfor %}
{% endfor %}

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,
      scales: {
        x: {
          type: 'time',
          time: {
            tooltipFormat: 'yyyy:LL:dd HH:mm:ss',
            displayFormats: { // https://github.com/moment/luxon/blob/master/docs/formatting.md
              'millisecond': 'yyyy:LL:dd HH:mm:ss SSS',
              'second': 'yyyy:LL:dd HH:mm:ss',
              'minute': 'yyyy:LL:dd HH:mm:ss',
              'hour': 'yyyy:LL:dd HH:mm:ss',
              'day': 'yyyy:LL:dd HH:mm:ss',
              'week': 'yyyy:LL:dd HH:mm:ss',
              'month': 'yyyy:LL:dd HH:mm:ss',
              'quarter': 'yyyy LL:dd HH:mm:ss',
              'year': 'yyyy:LL:dd HH:mm:ss'
            }
          }
        },
        y: {
          title: {
            display: false,
            text: 'value'
          }
        }
      },
      plugins: {
        legend: {
          position: 'top'
        },
        annotation: { annotations: { 
          {% for c in range(events|length) %}
            {% set event = (events.keys()|list)[c] %}{% for i in range(events[event]|length) %}event{{c}}_{{i}},{% endfor %}
          {% endfor %}
          }
        },
        zoom: {
          limits: {
            x: { min:'original', max:'original' }
          },
          zoom: {
            drag: {
              enabled: true
            },
            wheel: {
              enabled: true,
            },
            pinch: {
              enabled: true
            },
            mode: 'x',
          }
        }
      }
    }
  });
}

var myCharts = {
  {% for item, data in details['datasets'].items() %}
  '{{ item }}': {
    '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);
var mousex = 0;
var mousey = 0;
$(document).ready(function () {
  showChart($('.i_inactive').first().text());
  $('.i_inactive').first().attr("class", "i_active");

  selhost="{{ hostname }}"
  $('#hostlist').ulSelect(function(elem) {
    if (selhost != $(elem).text()) {
      selhost=$(elem).text().replace(/\s+/g, "");
      window.location = selhost+"_{{ pages[0] }}.html";
    }
  });
  selchart="{{ chart }}"
  $('#chartlist').ulSelect(function(elem) {
      selchart=$(elem).text().replace(/\s+/g, "");
      window.location = selhost+"_"+selchart+".html"
  });
  $("body").on("click",function(e) {
    if (!$(e.target).closest('#popup').length) {
        $('#popup').hide();
    }
  });
});

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