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

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

{% block title %}Statistics |{% endblock %}

{% block content %}
    <br>
    <ul class="nav nav-tabs" id="tabs" role="tablist">
        <li class="nav-item">
            <a href="#" class="nav-link active font-weight-bold text-dark">System Stats</a>
        </li>
        <li class="nav-item">
            <a href="{% url 'stats_port_installations' %}" class="nav-link text-dark">Port Installations</a>
        </li>
    </ul>
    <br><br>
    <div class="row">
        <div class="col-lg-7 p-0">
            <canvas id="user-chart"></canvas>
        </div>
        <div class="col-lg-5">
            <p class="text-center" style="font-size: 15px"><i>Opt-in for submitting stats by installing the port <span class="bg-light">mpstats</span>.</i></p>
            <br>
            <table class="table table-striped">
                <tbody>
                <tr>
                    <th scope="row">Total submissions:</th>
                    <td class="text-right">{{ total_submissions|intcomma }}</td>
                </tr>
                <tr>
                    <th scope="row">Total unique users:</th>
                    <td class="text-right">{{ unique_users|intcomma }}</td>
                </tr>
                <tr>
                    <th scope="row">Unique users last week:</th>
                    <td class="text-right">{{ last_week|intcomma }}</td>
                </tr>
                <tr>
                    <th scope="row">Unique users this week:</th>
                    <td class="text-right">{{ current_week|intcomma }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <br>
    <hr>
    <br>
    {% csrf_token %}
    <form id="duration-selector" class="bg-light p-2 form form-inline justify-content-center" method="get" action="{% url 'stats' %}#duration-selector">
        <lable for="days">Displaying statistics for <strong>{{ users_count_in_duration|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>

    <h6 class="text-center p-2">
        <span class="text-muted">Duration selected:</span> <u>{{ start_date|date:"Y-m-d" }}</u> <span class="text-muted">to</span> <u>{{ end_date|date:"Y-m-d" }}</u>
    </h6>

    <br>
    <div class="container full-width-chart-container">
        <p class="text-center p-0 m-0 f14 font-weight-bold" id="macports_versions"><a href="#macports_versions">MacPorts Versions</a></p>
        <canvas id="macports_version_chart"></canvas>
        <p id="macports_version_chart_loader" class="text-secondary text-center">Loading Chart <img width="30px" src="{% static 'images/tspinner.gif' %}">
        </p>
        <br><br><br>
        <p class="text-center p-0 m-0 f14 font-weight-bold" id="macos_versions"><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>
        <br><br><br>
        <p class="text-center p-0 m-0 f14 font-weight-bold" id="xcode_versions"><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>
        <br><br><br>
        <p class="text-center p-0 m-0 f14 font-weight-bold" id="clt_versions"><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>
{% endblock %}

{% block script %}
<script type="text/javascript">
    function generateURI(){
        const days = $("#days").val();
        const days_ago = $("#days_ago").val();
        const base = "/api/v1/statistics";
        return base + "?days=" + days + "&days_ago=" + days_ago;
    }

    async function getMacPortsVersionsData() {
        const response = await fetch(generateURI() + "&property=macports_version&sort_by=macports_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].macports_version);
            y.push(result[i].count);
        }
        return {x, y};
    }
    async function drawMacPortsVersionsChart() {
        const ctx = document.getElementById('macports_version_chart').getContext('2d');
        let data = {
            labels: [],
            datasets: []
        };
        const myChart = new Chart(ctx, {
            type: 'horizontalBar',
            data: data,
            options: {
					title: {
						display: false,
						text: 'MacPorts Version'
					},
					responsive: true
				}
        });
        const result = await getMacPortsVersionsData();
        let keys = Object.keys(result);
        let datasets = [
            {
                label: 'Users',
                backgroundColor: getColors(1)[0],
                data: result.y,
            }
        ];
        data.labels = result.x;
        data.datasets = datasets;
        $("#macports_version_chart_loader").hide();
        myChart.update();
    }

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

       return generateDataset(result, group, '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: 'nearest',
						intersect: true
					},
					responsive: true,
					scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					}
				}
        });
        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=os_version&property=xcode_version&sort_by=os_version");
        const data = await response.json();
        const result = data.result;
        for(let i=0; i<result.length; i++){
            let xcode_version = result[i].xcode_version;
            let segments = xcode_version.split(".");
            if (segments.length>=2){
                result[i].xcode_version = segments[0] + "." + segments[1];
            } else {
                result[i].xcode_version = segments[0];
            }
        }
        let group = result.reduce((r, a) => {
            r[a.xcode_version] = [...r[a.xcode_version] || [], a];
            return r;
        }, {});

        return generateDataset(result, group, '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: true
                },
            }
        });
        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=os_version&property=clt_version&sort_by=os_version");
        const data = await response.json();
        const result = data.result;
        for(let i=0; i<result.length; i++){
            let xcode_version = result[i].clt_version;
            let segments = xcode_version.split(".");
            if (segments.length>=2){
                result[i].clt_version = segments[0] + "." + segments[1];
            } else {
                result[i].clt_version = segments[0];
            }
        }
        let group = result.reduce((r, a) => {
            r[a.clt_version] = [...r[a.clt_version] || [], a];
            return r;
        }, {});

        return generateDataset(result, group, '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: true
                },
            }
        });
        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();
    }
    function drawUserChart() {
        const ctx = document.getElementById('user-chart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [{% for i in users_by_month %}"{{ i.month|date:"M Y" }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
                datasets: [{
                    label: "Users",
                    backgroundColor: "#5dc5bf",
                    borderColor: "#bebebe",
                    fill: false,
                    data: [{% for i in users_by_month %}"{{ i.num }}"{% if not forloop.last %}, {% endif %}{% endfor %}]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Users'
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: true
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                },
                legend: {
                    display: true
                },
            }
        });
    }

    $(function () {
        drawUserChart();
        drawMacPortsVersionsChart();
        drawOSVersionsChart();
        drawXcodeVersionsChart();
        drawCLTVersionsChart();
    });
</script>
{% endblock %}