{% extends 'layout.html' %}
{% load static %}
{% load url_replace %}
{% load humanize %}

{% block title %}Statistics - {{ port.name }} |{% endblock %}

{% block head_scripts %}
    <script type="text/javascript" src="{% static 'js/port-detail.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="main-content" class="mt-2">
    {% include 'port/includes/port-header.html' with port=port %}
    {% include 'port/includes/port-tabs.html' with port_name=port.name active="stats" %}
<br>
<form method="get" action="." class="p-2 form form-inline justify-content-center">
    <lable for="days">Displaying statistics for <strong>{{ users_in_duration_count|intcomma }} users</strong> who made submissions during:</lable>
    <select onchange="this.form.submit()" id="days" name="days" class="form-control mx-2">
    {% for i in allowed_days|slice:"1:" %}
        <option value="{{ i }}" {% if days == i %}selected{% endif %}>{{ i }} days</option>
    {% endfor %}
    </select>
    <lable for="days_ago">until</lable>
    <select onchange="this.form.submit()" id="days_ago" name="days_ago" class="form-control ml-2">
        <option value="0" {% if days_ago == 0 %}selected{% endif %}>today</option>
    {% for i in allowed_days|slice:"1:" %}
        <option value="{{ i }}" {% if days_ago == i %}selected{% endif %}>{{ i }} days ago</option>
    {% endfor %}
    </select>
</form>
<br>
<h3 class="text-center bg-light p-2 rounded">Statistics for selected duration</h3>
<p class="text-center"><u>{{ start_date|date:"Y-M-d" }}</u> <span class="text-muted">to</span> <u>{{ end_date|date:"Y-M-d" }}</u></p>
    <br>
{% if count.all > 0 %}
    <div class="row">
        <div class="col-lg-6">
            <table class="table border">
                <tr>
                    <th scope="row">Total Installations</th>
                    <td>{{ count.all|intcomma }}</td>
                </tr>
                <tr>
                    <th scope="row">Requested Installations</th>
                    <td>{{ count.requested|intcomma }}</td>
                </tr>
            </table>
        </div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-lg-6" id="macos_versions">
            <p class="text-center p-0 m-0 f14 font-weight-bold"><a href="#macos_versions">macOS Versions</a></p>
            <canvas id="os_version_chart"></canvas>
            <p id="os_version_chart_loader" class="text-secondary text-center">Loading Chart <img width="30px" src="{% static 'images/tspinner.gif' %}"></p>
        </div>
        <div class="col-lg-6" id="port_versions">
            <p class="text-center p-0 m-0 f14 font-weight-bold"><a href="#port_versions">Port Versions</a></p>
            <canvas id="port_version_chart"></canvas>
            <p id="port_version_chart_loader" class="text-secondary text-center">Loading Chart <img width="30px" src="{% static 'images/tspinner.gif' %}"></p>
        </div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-lg-6" id="xcode_versions">
            <p class="text-center p-0 m-0 f14 font-weight-bold"><a href="#xcode_versions">Xcode Versions</a></p>
            <canvas id="xcode_version_chart"></canvas>
            <p id="xcode_version_chart_loader" class="text-secondary text-center">Loading Chart <img width="30px" src="{% static 'images/tspinner.gif' %}"></p>
        </div>
        <div class="col-lg-6" id="clt_versions">
            <p class="text-center p-0 m-0 f14 font-weight-bold"><a href="#clt_versions">CLT Versions</a></p>
            <canvas id="clt_version_chart"></canvas>
            <p id="clt_version_chart_loader" class="text-secondary text-center">Loading Chart <img width="30px" src="{% static 'images/tspinner.gif' %}"></p>
        </div>
    </div>
    <br>
    <br>
    <!-- TABLE FOR VARIANTS -->
    <p class="text-center p-0 m-0 f14 font-weight-bold" id="variants"><a href="#variants">Variants table</a></p>
    <table id="variants_table" class="table table-striped table-condensed">
        <thead>
        <tr class="p-0">
            <th class="pt-0 pb-0">Variants</th>
            <th class="pt-0 pb-0">Count</th>
        </tr>
        </thead>
    </table>
    <br>
    <br>
    <h3 class="bg-light p-2 rounded text-center">Monthly Statistics</h3>
    <p class="text-center">Can remain cached for up to 24 hours</p>
    <br>
    <div class="row">
        <div class="col-lg-8" id="monthly_installations">
            <p class="text-center p-0 m-0 f14 font-weight-bold"><a href="#monthly_installations">Port installations by month</a></p>
            <canvas id="monthly_chart"></canvas>
            <p id="monthly_chart_loader" class="text-secondary text-center">Loading Chart <img width="30px" src="{% static 'images/tspinner.gif' %}">
            </p>
        </div>
        <div class="col-lg-3">
        </div>
    </div>
    <br><br><hr><br><br>
    <div class="row">
        <div class="col-lg-8" id="version_monthly_installations">
            <p class="text-center p-0 m-0 f14 font-weight-bold"><a href="#version_monthly_installations">Percentage of installations per version per month</a></p>
            <canvas id="monthly_versions_chart"></canvas>
            <p id="monthly_versions_chart_loader" class="text-secondary text-center">Loading Chart <img width="30px" src="{% static 'images/tspinner.gif' %}"></p>
        </div>
        <div class="col-lg-3" id="monthly_versions_table">
        </div>
    </div>
    <br><br>


{% else %}
<div class="text-center container" style="max-width: 700px;">
    <h5>No stats available for this selection.</h5>
    <p>Try changing the range of days. Alternatively visit <a href="{% url 'stats' %}">statistics</a> page to have an overall look at the submitted
    statistics.</p>
</div>
{% endif %}
    </div>

    {% if count.all > 0 %}
    <script>
    function generateURI(){
        const days = $("#days").val();
        const days_ago = $("#days_ago").val();
        const base = "/api/v1/statistics/port";
        return base + "?name={{ port.name }}&days=" + days + "&days_ago=" + days_ago;
    }

    async function getVersionsData() {
        const response = await fetch(generateURI() + "&property=version&sort_by=version");
        const data = await response.json();
        const result = data.result;
        let x = [];
        let y = [];
        for(var i=0; i < result.length; i++){
            x.push(result[i].version);
            y.push(result[i].count);
        }
        return {x, y};
    }
    async function drawVersionsChart() {
        const ctx = document.getElementById('port_version_chart').getContext('2d');
        let data = {
            labels: [],
            datasets: []
        };
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
					title: {
						display: false,
						text: 'Port Versions'
					},
					tooltips: {
						mode: 'index',
						intersect: false
					},
					responsive: true,
					scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					},
                    legend: {
                        display: false
                    }
				}
        });
        const result = await getVersionsData();
        let keys = Object.keys(result);
        let datasets = [
            {
                label: 'Users',
                backgroundColor: getColors(1)[0],
                data: result.y,
            }
        ];
        data.labels = result.x;
        data.datasets = datasets;
        $("#port_version_chart_loader").hide();
        myChart.update();
    }

    async function getOSVersionsData() {
        const response = await fetch(generateURI() + "&property=submission__os_version&property=submission__build_arch&property=submission__cxx_stdlib&sort_by=submission__os_version");
        const data = await response.json();
        const result = data.result;
        for(let i=0; i<result.length; i++) {
            result[i]["grouper"] = result[i].submission__build_arch + '/' + result[i].submission__cxx_stdlib;
        }
        let group = result.reduce((r, a) => {
            r[a.grouper] = [...r[a.grouper] || [], a];
            return r;
        }, {});

        return generateDataset(result, group, 'submission__os_version');
    }

    async function drawOSVersionsChart() {
        const ctx = document.getElementById('os_version_chart').getContext('2d');
        let data = {
            labels: [],
            datasets: []
        };
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
					title: {
						display: false,
						text: 'macOS Versions'
					},
					tooltips: {
						mode: 'index',
						intersect: false
					},
					responsive: true,
					scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					},
                    legend: {
					    display: false
                    }
				}
        });
        const result = await getOSVersionsData();
        let keys = Object.keys(result);
        let datasets = [];
        let c = 0;
        for(let key in result) {
            if(result.hasOwnProperty(key)) {
                let obj = {
                    label: key,
                    backgroundColor: getColors(keys.length)[c],
                    data: Array.from(result[key].values())
                };
                c++;
                datasets.push(obj);
            }
        }
        datasets.sort(BasicSort);
        data.labels = Array.from(result[keys[0]].keys());
        data.datasets = datasets;
        $("#os_version_chart_loader").hide();
        myChart.update();
    }

    async function getXCodeVersionsData() {
        const response = await fetch(generateURI() + "&property=submission__os_version&property=submission__xcode_version&sort_by=submission__os_version");
        const data = await response.json();
        const result = data.result;
        let group = result.reduce((r, a) => {
            r[a.submission__xcode_version] = [...r[a.submission__xcode_version] || [], a];
            return r;
        }, {});

        return generateDataset(result, group, 'submission__os_version');
    }
    async function drawXcodeVersionsChart() {
        const ctx = document.getElementById('xcode_version_chart').getContext('2d');
        let data = {
            labels: [],
            datasets: []
        };
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
					title: {
						display: false,
						text: 'Xcode Versions'
					},
					tooltips: {
						mode: 'nearest',
						intersect: true
					},
					responsive: true,
					scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					},
                    legend: {
					    display: false
                    },
				}
        });
        const result = await getXCodeVersionsData();
        let keys = Object.keys(result);
        let datasets = [];
        let c = 0;
        for(let key in result) {
            if(result.hasOwnProperty(key)) {
                let obj = {
                    label: key,
                    backgroundColor: getColors(keys.length)[c],
                    data: Array.from(result[key].values())
                };
                c++;
                datasets.push(obj);
            }
        }
        datasets.sort(BasicSort);
        data.labels = Array.from(result[keys[0]].keys());
        data.datasets = datasets;
        $("#xcode_version_chart_loader").hide();
        myChart.update();
    }

    async function getCLTVersionsData() {
        const response = await fetch(generateURI() + "&property=submission__os_version&property=submission__clt_version&sort_by=submission__os_version");
        const data = await response.json();
        const result = data.result;
        let group = result.reduce((r, a) => {
            r[a.submission__clt_version] = [...r[a.submission__clt_version] || [], a];
            return r;
        }, {});

        return generateDataset(result, group, 'submission__os_version');
    }
    async function drawCLTVersionsChart() {
        const ctx = document.getElementById('clt_version_chart').getContext('2d');
        let data = {
            labels: [],
            datasets: [],
        };
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                title: {
                    display: false,
                    text: 'CLT Versions'
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: true
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                },
                legend: {
                    display: false
                },
            }
        });
        const result = await getCLTVersionsData();
        let keys = Object.keys(result);
        let datasets = [];
        let c = 0;
        for(let key in result) {
            if(result.hasOwnProperty(key)) {
                let obj = {
                    label: key,
                    backgroundColor: getColors(keys.length)[c],
                    data: Array.from(result[key].values())
                };
                c++;
                datasets.push(obj);
            }
        }
        datasets.sort(BasicSort);
        data.labels = Array.from(result[keys[0]].keys());
        data.datasets = datasets;
        $("#clt_version_chart_loader").hide();
        myChart.update();
    }

    const months = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    async function getMonthlyData() {
        const response = await fetch("/api/v1/statistics/port/monthly?name={{ port.name }}");
        const data = await response.json();
        const result = data.result;
        for (let i=0; i<result.length; i++) {
            let m = result[i].month;
            let segments = m.split(",");
            let year = segments[0];
            let month = segments[1];
            result[i].month = months[parseInt(month)] + " " + year;
        }
        let x = [];
        let y = [];
        for (let i=0; i<result.length; i++) {
            x.push(result[i].month);
            y.push(result[i].count);
        }
        return {
            x: x,
            y: y
        }
    }

    async function drawMonthlyChart() {
        const ctx = document.getElementById('monthly_chart').getContext('2d');
        let data = {
            labels: [],
            datasets: [{
                label: "Installations",
                backgroundColor: 'rgba(210, 210, 210, 0.5)',
                fill: true,
                data: []
            }]
        };
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                title: {
                    display: false,
                    text: 'Port installations by month'
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: true
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                },
                legend: {
                    display: false
                }
            }
        });
        const result = await getMonthlyData();
        data.labels = result.x;
        data.datasets[0].data = result.y;
        $("#monthly_chart_loader").hide();
        myChart.update()
    }

    async function getMonthlyVersionsData() {
        const response = await fetch("/api/v1/statistics/port/monthly?name={{ port.name }}&include_versions=yes");
        const data = await response.json();
        const result = data.result;
        for (let i=0; i<result.length; i++) {
            let m = result[i].month;
            let segments = m.split(",");
            let year = segments[0];
            let month = segments[1];
            result[i].month = months[parseInt(month)] + " " + year;
        }

        let group = result.reduce((r, a) => {
            r[a.version] = [...r[a.version] || [], a];
            return r;
        }, {});
        const dataMap = {};
        for(let i=0; i<result.length; i++) {
            let key = result[i].month;
            dataMap[key] = 0;
        }

        let datasets = {};

        for(let key in group) {
            let d = Object.assign({}, dataMap);
            if(group.hasOwnProperty(key)) {
                let g = group[key];
                for(let i=0; i<g.length; i++) {
                    let keyInner = g[i].month;
                    d[keyInner] = g[i].count;
                }
            }
            datasets[key] = d;
        }

        // Convert to percentages
        for(let key in dataMap) {
            let monthlySum = 0;
            for(let version in datasets) {
                monthlySum = monthlySum + parseInt(datasets[version][key]);
            }
            for(let version in datasets) {
                datasets[version][key] = ((datasets[version][key]/monthlySum)*100).toFixed(1);
            }
        }

        return datasets;
    }
    async function drawMonthlyVersionsChart() {
        const ctx = document.getElementById('monthly_versions_chart').getContext('2d');
        let data = {
            labels: [],
            datasets: []
        };
        const myChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
                title: {
                    display: false,
                    text: 'Percentage of installations per version per month'
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: true
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true,
                        ticks: {
                            max: 100,
                            min: 0,
                            callback: function (value, index, values) {
                                return value + " %";
                            }
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Percentage of submissions'
                        }
                    }]
                },
                legend: {
                    display: false,
                    position: 'right'
                },
            }
        });

        const result = await getMonthlyVersionsData();
        let keys = Object.keys(result);
        let datasets = [];
        let c = 0;
        for(let key in result) {
            if(result.hasOwnProperty(key)) {
                let obj = {
                    label: key,
                    backgroundColor: getColors(keys.length)[c],
                    data: Object.values(result[key])
                };
                c++;
                datasets.push(obj);
            }
        }
        datasets.sort(BasicSort);
        data.datasets = datasets;
        data.labels = Object.keys(result[keys[0]]);
        $("#monthly_versions_chart_loader").hide();

        let month = data.labels[data.labels.length - 1];
        let tableHeader = '<thead><tr class="py-1"><th class="py-1">Version</th><th class="py-1">Percentage</th></tr></thead>';
        let tableBody = '<tbody>';
        for(let i = 0; i < datasets.length; i++) {
            let count = datasets[i].data[datasets[i].data.length - 1];
            if(count > 0) {
                tableBody += '<tr class="py-1"><td class="py-1">' + datasets[i].label + '</td><td class="py-1">' + count + ' %</td>';
            }
        }
        tableBody += '</tbody>';
        const table = '<h5>For ' + month + '</h5><table class="table table-condensed">' + tableHeader +  tableBody + '</table>';
        $('#monthly_versions_table').html(table);

        myChart.update();
    }
    drawVersionsChart();
    drawOSVersionsChart();
    drawXcodeVersionsChart();
    drawCLTVersionsChart();
    drawMonthlyVersionsChart();
    drawMonthlyChart();

    async function drawVariantsTable() {
        const response = await fetch(generateURI() + "&property=variants");
        const data = await response.json();
        const table = document.getElementById("variants_table");
        const result = data.result;

        for(let i=0; i < result.length; i++){
            let row = table.insertRow(-1);
            let cell1 = row.insertCell(0);
            let cell2 = row.insertCell(1);
            row.setAttribute("class", "py-0");
            cell1.setAttribute("class", "py-0");
            cell2.setAttribute("class", "py-0");
            cell1.innerHTML = result[i].variants;
            cell2.innerHTML = result[i].count;
        }
    }
    drawVariantsTable();

    </script>
    {% endif %}
{% endblock %}