{% extends "Support/base.html" %}
{% load static %}

{% block title %}
اطلاعات سالانه
{% endblock %}

{% block header.scripts %}
    <script src="{% static 'js/canvas.min.js'%}"></script>
    <script>
        window.onload = function () {
            var user_counter = [];
            {% for an in analysis %}
                user_counter.push({x:new Date("{{ an.date.isoformat }}"), y:{{ an.user_counter | safe }}});
            {% endfor %}

            //chart 1
            var users_chart = new CanvasJS.Chart("chartContainer_users", {
                animationEnabled: true,
                title:{
                    text: "نمودار تعداد کاربران در سال گذشته",
                    fontFamily: "Yekan"
                },
                axisX: {
                    valueFormatString: "DD MMM,YY"
                },
                axisY: {
                    title: "تعداد کاربران",
                    includeZero: false,
                    suffix: "",
                    fontFamily: "Yekan"
                },
                legend:{
                    cursor: "pointer",
                    fontSize: 12,
                    fontFamily: "Yekan",
                    itemclick: user_chart_toggleDataSeries
                },
                toolTip:{
                    shared: true,
                    fontFamily: "Yekan",
                    backgroundColor: '#72544811'
                },
                data: [
                    {
                        name: "تعداد کل کاربران",
                        type: "spline",
                        yValueFormatString: "#0.## نفر",
                        showInLegend: true,
                        dataPoints: user_counter
                    },
                ]
            });
            users_chart.render();
            function user_chart_toggleDataSeries(e){
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                }
                else{
                    e.dataSeries.visible = true;
                }
                users_chart.render();
            }


        };


    </script>


{% endblock %}

{% block body.content %}


    <!-- Form Element area Start-->
    <div class="form-element-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-element-list mg-t-30">
                    <h5 class="text-center" id="status" style="color: #2edd58"></h5>
                    <div class="cmp-tb-hd">
                        <h2 class="text-right">اطلاعات سالانه</h2>
                    </div>
                    <div class="row">
                        <div id="chartContainer_users" class="col-lg-11 col-md-11 col-sm-11 container" style="font-family: Yekan; height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
    <!-- Form Element area End-->
{% endblock %}

{% block scripts.other %}

{% endblock %}