{% extends "base.html" %}

{% block title %}AS215085 - Router tools | Akvorado{% endblock %}

{% block page_header %}<H3>Stats</H3>{% endblock %}

{% block content %}
	<script src="../static/js/chart.js"></script>
	<script src="../static/js/pages/akvorado.js"></script>
	<script src="../static/js/chartjs-adapter-date-fns"></script>
    <section id="pie-charts">
	    <div class="stats-overview-container">
	        <h2>Overview</h2>
	    	<div id="stats-container" style="text-align: right;">
                <p><span id="flowRate">Loading...</span> Flows/s</p>
                <p><span id="exporterCount">Loading...</span> Exporters</p>
            </div>
		</div>
        <div id="achart-container">
            <div class="achart-wrapper" id="src-as-chart">
                <h5>Top source AS</h5>
                <canvas id="pieChart1"></canvas>
                <div id="legend1" class="alegend"></div>
            </div>
            <div class="achart-wrapper" id="source-ports-chart">
                <h5>Top source ports</h5>
                <canvas id="pieChart2"></canvas>
                <div id="legend2" class="alegend"></div>
            </div>
            <div class="achart-wrapper" id="protocols-chart">
                <h5>Top protocols</h5>
                <canvas id="pieChart3"></canvas>
                <div id="legend3" class="alegend"></div>
            </div>
            <div class="achart-wrapper" id="source-countries-chart">
                <h5>Top source countries</h5>
                <canvas id="pieChart4"></canvas>
                <div id="legend4" class="alegend"></div>
            </div>
            <div class="achart-wrapper" id="source-etype-chart">
                <h5>IPv4/IPv6</h5>
                <canvas id="pieChart5"></canvas>
                <div id="legend5" class="alegend"></div>
            </div>
        </div>
    </section>
    <section id="graph">
	    <h2>Flow graph</h2>
        <div class="achart-wrapper-chart">
            <canvas id="liveChart"></canvas>
        </div>
    </section>
    <section id="graph-librenms">
	    <h2>Interface graph</h2>
        <div>
            <center><p><b>24H LAN interface {{ interface_name }}</b></p>
            {% if error %}
                <h2 style="color: red;"><strong>Error:</strong> Interface <strong>{{ interface_name }}</strong> not found.</h2></center>
            {% else %}
                <img src="data:image/svg+xml;base64,{{ daily }}" alt="Day"></center>
            {% endif %}
        </div>
    </section>
{% endblock %}