{% extends 'base.html' %}

{% block prehead %}
    <meta name="description" content="Statistiche sull'attività della Royal Games">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js" integrity="sha384-DhLzB4p1BEBSNugP/gw0UBLxHx7kHgldDGYtGinCssfp4HK+sG4ByZDau4pWmpqG" crossorigin="anonymous"></script>
{% endblock %}

{% block title %}
    Attività
{% endblock %}

{% block pagetitle %}
    {{ game_name }}
{% endblock %}

{% block body %}
    <div class="discord-activity">
        <h1>
            Attività su Discord negli ultimi 7 giorni
        </h1>
        <canvas class="graph members-graph-7d" id="discord-members-graph-7d" height="60px"></canvas>
        <script>
            new Chart("discord-members-graph-7d",
                {
                    "type": "line",
                    "data": {
                        "labels": [
                            {% for point in activityreports %}
                                "{{ point.timestamp.strftime("%a %H:%M") }}",
                            {% endfor %}
                        ],
                        "datasets": [
                            {
                                "label": "In cv",
                                "borderColor": "#fe7f00",
                                "backgroundColor": "#fe7f0022",
                                "borderWidth": 4,
                                "cubicInterpolationMode": "monotone",
                                "fill": "origin",
                                "data": [
                                    {% for point in activityreports %}
                                        {{ point.discord_members_cv }},
                                    {% endfor %}
                                ]
                            },
                            {
                                "label": "In game",
                                "borderColor": "#9ae915",
                                "backgroundColor": "#9ae91511",
                                "borderWidth": 1,
                                "borderDash": [2],
                                "cubicInterpolationMode": "monotone",
                                "fill": "disabled",
                                "data": [
                                    {% for point in activityreports %}
                                        {{ point.discord_members_ingame }},
                                    {% endfor %}
                                ]
                            },
                            {
                                "label": "Online",
                                "borderColor": "#6dcff6",
                                "backgroundColor": "#6dcff611",
                                "borderWidth": 1,
                                "cubicInterpolationMode": "monotone",
                                "fill": 0,
                                "data": [
                                    {% for point in activityreports %}
                                        {{ point.discord_members_online }},
                                    {% endfor %}
                                ]
                            }
                        ]
                    },
                    "options":{

                    }
                });
        </script>
        <canvas class="graph cv-graph-7d" id="discord-cv-graph-7d" height="60px"></canvas>
        <script>
            new Chart("discord-cv-graph-7d",
                {
                    "type": "line",
                    "data": {
                        "labels": [
                            {% for point in activityreports %}
                                "{{ point.timestamp.strftime("%a %H:%M") }}",
                            {% endfor %}
                        ],
                        "datasets": [
                            {
                                "label": "Membri in cv",
                                "borderColor": "#a0ccff",
                                "backgroundColor": "#a0ccff22",
                                "borderWidth": 4,
                                "cubicInterpolationMode": "monotone",
                                "fill": "origin",
                                "data": [
                                    {% for point in activityreports %}
                                        {{ point.discord_members_cv }},
                                    {% endfor %}
                                ]
                            },
                            {
                                "label": "Utenti in cv",
                                "borderColor": "#ffff00",
                                "backgroundColor": "#ffff0011",
                                "borderWidth": 2,
                                "cubicInterpolationMode": "monotone",
                                "fill": 0,
                                "data": [
                                    {% for point in activityreports %}
                                        {{ point.discord_cv }},
                                    {% endfor %}
                                ]
                            },
                        ]
                    },
                    "options":{

                    }
                });
        </script>
        <canvas class="graph channels-graph-7d" id="discord-channels-graph-7d" height="60px"></canvas>
        <script>
            new Chart("discord-channels-graph-7d",
                {
                    "type": "line",
                    "data": {
                        "labels": [
                            {% for point in activityreports %}
                                "{{ point.timestamp.strftime("%a %H:%M") }}",
                            {% endfor %}
                        ],
                        "datasets": [
                            {
                                "label": "Canali utilizzati",
                                "borderColor": "#ff0000",
                                "backgroundColor": "#ff000022",
                                "borderWidth": 2,
                                "cubicInterpolationMode": "monotone",
                                "fill": "origin",
                                "data": [
                                    {% for point in activityreports %}
                                        {{ point.discord_channels_used }},
                                    {% endfor %}
                                ]
                            }
                        ]
                    },
                    "options":{

                    }
                });
        </script>
        <h1>
            Attività per ogni ora nell'ultimo mese
        </h1>
        <canvas class="graph members-graph-hour-bucket" id="discord-members-hour-bucket" height="60px"></canvas>
        <script>
            new Chart("discord-members-hour-bucket",
                {
                    "type": "line",
                    "data": {
                        "labels": [
                            {% for point in hourly_avg %}
                                "{{ point.h|int }}:00",
                            {% endfor %}
                        ],
                        "datasets": [
                            {
                                "label": "In cv",
                                "borderColor": "#fe7f00",
                                "backgroundColor": "#fe7f0022",
                                "borderWidth": 4,
                                "cubicInterpolationMode": "monotone",
                                "fill": "origin",
                                "data": [
                                    {% for point in hourly_avg %}
                                        {{ point.cv_members_avg }},
                                    {% endfor %}
                                ]
                            },
                            {
                                "label": "In game",
                                "borderColor": "#9ae915",
                                "backgroundColor": "#9ae91511",
                                "borderWidth": 1,
                                "borderDash": [2],
                                "cubicInterpolationMode": "monotone",
                                "fill": "disabled",
                                "data": [
                                    {% for point in hourly_avg %}
                                        {{ point.ingame_members_avg }},
                                    {% endfor %}
                                ]
                            },
                            {
                                "label": "Online",
                                "borderColor": "#6dcff6",
                                "backgroundColor": "#6dcff611",
                                "borderWidth": 1,
                                "cubicInterpolationMode": "monotone",
                                "fill": 0,
                                "data": [
                                    {% for point in hourly_avg %}
                                        {{ point.online_members_avg }},
                                    {% endfor %}
                                ]
                            }
                        ]
                    },
                    "options":{

                    }
                });
        </script>
        <h1>
            Confronto cv con il mese scorso
        </h1>
        <canvas class="graph members-graph-hour-comp" id="discord-members-hour-comp" height="60px"></canvas>
        <script>
            new Chart("discord-members-hour-comp",
                {
                    "type": "line",
                    "data": {
                        "labels": [
                            {% for point in hourly_avg %}
                                "{{ point.h|int }}:00",
                            {% endfor %}
                        ],
                        "datasets": [
                            {
                                "label": "Adesso",
                                "borderColor": "#a0ccff",
                                "backgroundColor": "#a0ccff22",
                                "borderWidth": 4,
                                "cubicInterpolationMode": "monotone",
                                "fill": "origin",
                                "data": [
                                    {% for point in hourly_avg %}
                                        {{ point.cv_members_avg }},
                                    {% endfor %}
                                ]
                            },
                            {
                                "label": "Il mese scorso",
                                "borderColor": "#d3a1ff",
                                "backgroundColor": "#d3a1ff11",
                                "borderWidth": 1,
                                "cubicInterpolationMode": "monotone",
                                "fill": "origin",
                                "data": [
                                    {% for point in hourly_comp %}
                                        {{ point.cv_members_avg }},
                                    {% endfor %}
                                ]
                            },
                            {
                                "label": "Il mese prima",
                                "borderColor": "#ffa3d0",
                                "backgroundColor": "#ffa3d011",
                                "borderWidth": 1,
                                "cubicInterpolationMode": "monotone",
                                "fill": "origin",
                                "data": [
                                    {% for point in hourly_before %}
                                        {{ point.cv_members_avg }},
                                    {% endfor %}
                                ]
                            }
                        ]
                    },
                    "options":{

                    }
                });
        </script>
    </div>
{% endblock %}