{% extends "sysadmin/base.html" %}
{% load seahub_tags i18n staticfiles %}

{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery-ui.datepicker.min.css" />
{% endblock %}

{% block cur_statistic %}tab-cur{% endblock %}

{% block right_panel %}
<div class="tabnav ovhd">
    <ul class="tabnav-tabs fleft">
        <li class="tabnav-tab"><a href="{% url 'sys_statistic_file' %}">{% trans "File" %}</a></li>
        <li class="tabnav-tab"><a href="{% url 'sys_statistic_storage' %}">{% trans "Storage" %}</a></li>
        <li class="tabnav-tab"><a href="{% url 'sys_statistic_user' %}">{% trans "Users" %}</a></li>
        <li class="tabnav-tab tabnav-tab-cur"><a href="{% url 'sys_statistic_traffic' %}">{% trans "Traffic" %}</a></li>
    </ul>
</div>

{% if traffic_stats_enabled %}
<ul class="traffic-tab-nav">
    <li class="tab tab-cur">
        <a href="{% url 'sys_statistic_traffic' %}" class="a">{% trans "System" %}</a>
    </li>
    <li class="tab">
        <a href="{{ SITE_ROOT }}sys/trafficadmin/" class="a">{% trans "Share Link" %}</a>
    </li>
</ul>
{% endif %}

<div class="system-statistic-time-range ovhd">
    <div class="sf-btn-group fleft">
        <button class="sf-btn-group-btn sf-btn-group-btn-first sf-btn-group-btn-cur" id="7-days">{% trans "7 Days" %}</button>
        <button class="sf-btn-group-btn" id="30-days">{% trans "30 Days" %}</button>
        <button class="sf-btn-group-btn sf-btn-group-btn-last" id="1-year">{% trans "1 Year" %}</button>
    </div>

    <form action="" class="fleft date-custom-form">
        <input type="text" name="start" class="input" placeholder="yyyy-mm-dd" />
        <span> - </span>
        <input type="text" name="end" class="input" placeholder="yyyy-mm-dd" />
        <button type="submit" class="submit">{% trans "Submit" %}</button>
        <span class="error hide"></span>
    </form>
</div>

<div id="statistic-chart">
    <span class="loading-icon loading-tip"></span>
    <div> {# `<div>` is needed for `<canvas>`, as the plugin requires. #}
        <canvas class="traffic-chart total-traffic-chart hide"></canvas>
    </div>
    <div>
        <canvas class="traffic-chart web-traffic-chart hide"></canvas>
    </div>
    <div>
        <canvas class="traffic-chart link-traffic-chart hide"></canvas>
    </div>
    <div>
        <canvas class="traffic-chart sync-traffic-chart hide"></canvas>
    </div>
    <p class="error hide"></p>
</div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript" src="{{MEDIA_URL}}js/Chart.bundle.min.js"></script>
<script type="text/javascript" src="{% static "scripts/lib/jquery-ui.min.js" %}"></script>
<script type="text/javascript">

// date picker for date-custom
$.datepicker.setDefaults({
    hideIfNoPrevNext: true,
    maxDate: 0, // today (The maximum selectable date)
    dateFormat: 'yy-mm-dd'
});
$('.date-custom-form .input').datepicker();

// get time string '%Y-%m-%d %H:%M:%S'
function getTimeStr(time) { // time: in milliseconds
    var time_obj = new Date(time);

    var year = time_obj.getFullYear();
    var month = time_obj.getMonth() + 1;
    var date = time_obj.getDate();
    var hour = time_obj.getHours();

    var numberToString = function(number) {
        var str = number + '';
        return str.length == 2 ? str : '0' + str;
    };

    var time_str = [year, numberToString(month), numberToString(date)].join('-') +
        ' ' + [numberToString(hour), '00', '00'].join(':');
    return time_str;
};

var $chart = $('#statistic-chart');
function getStatistic(options) {
    var $loading = $('.loading-icon', $chart);
    var $error = $('.error', $chart);
    var $canvas = $('.traffic-chart', $chart);

    $.ajax({
        url: '{% url 'api-v2.1-admin-statistics-system-traffic' %}',
        cache: false,
        data: options,
        dataType: 'json',
        success: function(data) {
            $error.hide();
            $canvas.show();
            renderChart(data, options.group_by);
        },
        error: function(xhr) {
            $canvas.hide();
            $error.html("{% trans "Error" %}").show();
        },
        complete: function() {
            $loading.hide();
        }
    });
}

// by time range
function getStatisticByTimeRange(range) {
    var hour_ms = 60 * 60 * 1000;
    var day_ms = 24 * hour_ms;

    var now = new Date();
    var now_ms = now.getTime(); // ms: milliseconds

    var today = new Date();
    // set time to be '00:00:00'
    var today_ms = today.setHours(0, 0, 0);

    var start_ms;
    var end_ms = today_ms;
    var group_by = 'day';

    switch(range) {
        case '24h': // 24 hours
            start_ms = now_ms - day_ms;
            end_ms = now_ms - hour_ms;
            group_by = 'hour';
            break;
        case '7d': // 7 days
            start_ms = today_ms - 6 * day_ms; // 'today' is included
            break;
        case '30d': // 30 days
            start_ms = today_ms - 29 * day_ms;
            break;
        case '1y': // 1 year
            start_ms = today_ms - 364 * day_ms;
            break;
    }

    getStatistic({
        start: getTimeStr(start_ms),
        end: getTimeStr(end_ms),
        group_by: group_by
    });
}

// render chart
var totalTrafficChart,
    linkTrafficChart,
    syncTrafficChart,
    webTrafficChart;

var $totalTrafficCanvas = $('.total-traffic-chart', $chart),
    $linkTrafficCanvas = $('.link-traffic-chart', $chart),
    $syncTrafficCanvas = $('.sync-traffic-chart', $chart),
    $webTrafficCanvas = $('.web-traffic-chart', $chart);

function renderChart(data, group_by) {
    var labels = [];
    var total_upload = [],
        total_download = [],
        link_upload = [],
        link_download = [],
        sync_upload = [],
        sync_download = [],
        web_upload = [],
        web_download = [];

    var item;
    var datetime_ms, datetime_str;
    for (var i = 0, len = data.length; i < len; i++) {
        item = data[i];

        // datetime: 2017-06-21T07:58:01+00:00
        datetime_ms = Date.parse(item.datetime);
        datetime_str = getTimeStr(datetime_ms);
        if (group_by == 'hour') {
            // time shown in '%H:%M'
            labels.push(datetime_str.substr(11,5));
        } else {
            // time shown in '%Y-%m-%d'
            labels.push(datetime_str.substr(0, 10));
        }

        total_upload.push(
            item['link-file-upload'] +
            item['sync-file-upload'] +
            item['web-file-upload']);

        total_download.push(
            item['link-file-download'] +
            item['sync-file-download'] +
            item['web-file-download']);

        link_upload.push(item['link-file-upload']);
        link_download.push(item['link-file-download']);
        sync_upload.push(item['sync-file-upload']);
        sync_download.push(item['sync-file-download']);
        web_upload.push(item['web-file-upload']);
        web_download.push(item['web-file-download']);
    }

    var getConfig = function(options) {
        return config = {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: "{% trans "Upload" context "upload traffic" %}",
                        data: options.data.upload,
                        borderColor: '#fd913a',
                        backgroundColor: '#fd913a'
                    },
                    {
                        label: "{% trans "Download" context "download traffic" %}",
                        data: options.data.download,
                        borderColor: '#57cd6b',
                        backgroundColor: '#57cd6b'
                    }
                ]
            }, // 'data' ends here
            options: {
                title: {
                    display: true,
                    fontSize: 14,
                    text: options.title
                },
                elements: {
                    line: {
                        fill: false,
                        tension: 0, // disable bezier curves, i.e, draw straight lines
                        borderWidth: 2
                    }
                },
                legend: {
                    labels: {
                        usePointStyle: true
                    }
                },
                layout: {
                    padding: {
                        right: 100
                    }
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data.datasets[tooltipItem.datasetIndex].label + ': '
                                + quotaSizeFormat(tooltipItem.yLabel);
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            suggestedMax: 10*1000*1000, // 10 MB
                            callback: function(value, index, values) {
                                return quotaSizeFormat(value);
                            }
                        }
                    }]
                }
            }
        };
    };

    var totalTrafficChartOptions = {
        title: "{% trans "Total Traffic" %}",
        data: {
            upload: total_upload,
            download: total_download
        }
    };
    var linkTrafficChartOptions = {
        title: "{% trans "Share Link Traffic" %}",
        data: {
            upload: link_upload,
            download: link_download
        }
    };
    var syncTrafficChartOptions = {
        title: "{% trans "Sync Traffic" %}",
        data: {
            upload: sync_upload,
            download: sync_download
        }
    };
    var webTrafficChartOptions = {
        title: "{% trans "Web Traffic" %}",
        data: {
            upload: web_upload,
            download: web_download
        }
    };

    if (totalTrafficChart) { // chart instance already exists
        totalTrafficChart.destroy();
        linkTrafficChart.destroy();
        syncTrafficChart.destroy();
        webTrafficChart.destroy();

        totalTrafficChart = new Chart($totalTrafficCanvas,
            getConfig(totalTrafficChartOptions));
        linkTrafficChart = new Chart($linkTrafficCanvas,
            getConfig(linkTrafficChartOptions));
        syncTrafficChart = new Chart($syncTrafficCanvas,
            getConfig(syncTrafficChartOptions));
        webTrafficChart = new Chart($webTrafficCanvas,
            getConfig(webTrafficChartOptions));

    } else {
        totalTrafficChart = new Chart($totalTrafficCanvas,
            getConfig(totalTrafficChartOptions));
        linkTrafficChart = new Chart($linkTrafficCanvas,
            getConfig(linkTrafficChartOptions));
        syncTrafficChart = new Chart($syncTrafficCanvas,
            getConfig(syncTrafficChartOptions));
        webTrafficChart = new Chart($webTrafficCanvas,
            getConfig(webTrafficChartOptions));
    }
}

// data shown in default
getStatisticByTimeRange('7d');

// click btns
$rangeBtns = $('.system-statistic-time-range button');

$('#7-days').on('click', function() {
    getStatisticByTimeRange('7d');
    $rangeBtns.removeClass('sf-btn-group-btn-cur');
    $(this).addClass('sf-btn-group-btn-cur');
});
$('#30-days').on('click', function() {
    getStatisticByTimeRange('30d');
    $rangeBtns.removeClass('sf-btn-group-btn-cur');
    $(this).addClass('sf-btn-group-btn-cur');
});
$('#1-year').on('click', function() {
    getStatisticByTimeRange('1y');
    $rangeBtns.removeClass('sf-btn-group-btn-cur');
    $(this).addClass('sf-btn-group-btn-cur');
});

// custom time range
$('.date-custom-form').on('submit', function() {
    var $form = $(this);
    var $start = $('[name="start"]', $form);
    var $end = $('[name="end"]', $form);
    var $error = $('.error', $form);

    var start_date = $start.val();
    var end_date = $end.val();

    if (!start_date || !end_date) {
        return false;
    }

    // 'date' can be picked from datepicker, also directly input
    var date_pattern = /^([012]\d{3})\-(0[1-9]|1[012])\-(0[1-9]|[12]\d|3[01])$/;
    if (!date_pattern.test(start_date)) {
        $error.html("{% trans "Invalid start date, should be yyyy-mm-dd" %}").removeClass('hide');
        return false;
    }
    if (!date_pattern.test(end_date)) {
        $error.html("{% trans "Invalid end date, should be yyyy-mm-dd" %}").removeClass('hide');
        return false;
    }

    if (start_date > end_date) {
        $error.html("{% trans "Start date should be earlier than end date." %}").removeClass('hide');
        return false;
    }

    $error.addClass('hide');

    var options = {
        start: start_date + ' 00:00:00',
        end: end_date + ' 00:00:00',
        group_by: 'day'
    };
    getStatistic(options);

    $rangeBtns.removeClass('sf-btn-group-btn-cur');

    return false;
});
</script>
{% endblock %}
