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

{% block body.content %}
    <div style="min-height: 50px;"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div id="diabetes_types_difference">

                </div>
            </div>
            <div class="col-md-7">
                <div id="age_distribution">

                </div>
            </div>
        </div>
        <div style="min-height: 50px;"></div>
        <div class="row">
            <div class="col-md-5">
                <div id="gender_distribution">

                </div>
            </div>
            <div class="col-md-7">
                <div id="a1c_distribution">

                </div>
            </div>
        </div>
        <div style="min-height: 50px;"></div>
        <div class="row">
            <div class="col-md-12">
                <div id="a1c_improvement">

                </div>
            </div>
        </div>
        <div style="min-height: 50px;"></div>
        <div class="row">
            <div class="col-md-12">
                <div id="a1c_improvement_scatter">

                </div>
            </div>
        </div>
        <div style="min-height: 50px;"></div>
        <div class="row">
            <div class="col-md-12">
                <div id="a1c_improvement_by_age_scatter">

                </div>
            </div>
        </div>
        <div style="min-height: 50px;"></div>
        <div class="row">
            <div class="col-md-12">
                <div id="a1c_improvement_by_usage_scatter">

                </div>
            </div>
        </div>
        <div style="min-height: 50px;"></div>
        <div class="row">
            <div class="col-md-12">
                <div id="active_users_by_age_distribution">

                </div>
            </div>
        </div>
        <div style="min-height: 50px;"></div>
        <div class="row">
            <div class="col-md-12">
                <div id="active_users_by_time">

                </div>
            </div>
        </div>
        <div style="min-height: 50px;"></div>
        <div class="row">
            <div class="col-md-12">
                <div id="users_per_month">

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts.other %}
    <script type="text/javascript" src="{% static 'idia_site/support/js/charts/echarts.js' %}"></script>
    <script type="text/javascript">
        mymax = function (arr){
            let large = arr[0];
            for(var i = 0; i < arr.length; i++){
                if (arr[i] > large){
                    large = arr[i];
                }
            }
            return large;
        }

        class BarChart {
            constructor(id, x, data, title, unit='number of people') {
                this.id = id;
                this.data = data;
                this.x_label = "";
                this.y_label = "";
                this.x = x;
                this.title = title;
                this.chart = null;
                this.option = {
                    title: {
                        text: this.title,
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            name: this.x_label,
                            nameLocation: 'center',
                            data: x,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            nameLocation: 'center',
                            name: this.y_label,
                        }
                    ],
                    series: [
                        {
                            name: unit,
                            type: 'bar',
                            barWidth: '60%',
                            data: data
                        }
                    ]
                };
            }

            set_labels(x="", y=""){
                this.option['xAxis'][0]['name'] = x;
                this.option['yAxis'][0]['name'] = y;
            }

            draw() {
                // Initialize the echarts instance based on the prepared dom
                $("#" + this.id).css(
                    {
                        'width': '100%',
                        'min-height': '400px'
                    }
                );
                this.chart = echarts.init(document.getElementById(this.id));
                // Display the chart using the configuration items and data just specified.
                this.chart.setOption(this.option);
            }

            insert_to(parent_id) {
                $("#" + parent_id).append('<div id = "' + this.id + '"' + ' style="width: 100%; height: 100%; min-height: 500px;"></div>');
                return this;
            }
        }


        class PieChart {
            constructor(id, data, title) {
                this.id = id;
                this.data = data;
                this.title = title;
                this.chart = null;
                this.option = {
                    title: {
                        text: this.title,
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        top: '5%'
                    },
                    series: [
                        {
                            name: this.title,
                            type: 'pie',
                            radius: '40%',
                            data: this.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
            }

            draw() {
                // Initialize the echarts instance based on the prepared dom
                $("#" + this.id).css(
                    {
                        'width': '100%',
                        'min-height': '400px'
                    }
                );
                this.chart = echarts.init(document.getElementById(this.id));
                // Display the chart using the configuration items and data just specified.
                this.chart.setOption(this.option);
            }

            insert_to(parent_id) {
                $("#" + parent_id).append('<div id = "' + this.id + '"' + ' style="width: 100%; height: 100%; min-height: 500px;"></div>');
                return this;
            }
        }


        class ScatterChart {
            constructor(id, x, y, title, x_axis_name="", y_axis_name="", x_axis_type='') {
                this.id = id;
                this.data = [];
                for(let i = 0; i < x.length; i++){
                    this.data.push([x[i], y[i]]);
                }
                console.log(this.data);
                this.title = title;
                this.chart = null;
                this.option = {
                    title: {
                        text: this.title,
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        top: '5%'
                    },
                    xAxis: {
                        name:x_axis_name,
                        nameLocation: 'center',
                        type:x_axis_type
                    },
                    yAxis: {
                        name:y_axis_name,
                        nameLocation: 'center'
                    },
                    series: [
                        {
                            name: this.title,
                            type: 'scatter',
                            data: this.data,
                            symbolSize: 6,
                        }
                    ]
                };
            }

            draw() {
                // Initialize the echarts instance based on the prepared dom
                $("#" + this.id).css(
                    {
                        'width': '100%',
                        'min-height': '400px'
                    }
                );
                this.chart = echarts.init(document.getElementById(this.id));
                // Display the chart using the configuration items and data just specified.
                this.chart.setOption(this.option);
            }

            insert_to(parent_id) {
                $("#" + parent_id).append('<div id = "' + this.id + '"' + ' style="width: 100%; height: 100%; min-height: 500px;"></div>');
                return this;
            }
        }


        // pie chart
        var data = null;
        data = [
            {value: {{ type1 }}, name: 'Type1 ({{ type1 }})'},
            {value: {{ type2 }}, name: 'Type2 ({{ type2 }})'},
            {value: {{ pregnancy }}, name: 'pregnancy ({{ pregnancy }})'},
            {value: {{ unknown_type }}, name: 'Unknown ({{ unknown_type }})'},
        ];
        new PieChart("diabetes_types_difference", data, "diabetes types").draw();

        data = {{ age_distribution }};
        var bc = null;
        var x = ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '60-70', '71-80'];
        bc = new BarChart("age_distribution", x, data, "Age Distribution");
        bc.set_labels('Age', '# of people');
        bc.draw();


        data = [
            {value: {{ women }}, name: 'Female ({{ women }})'},
            {value: {{ men }}, name: 'Male ({{ men }})'},
            {value: {{ unknown_gender }}, name: 'Unknown ({{ unknown_gender }})'},
        ];
        new PieChart("gender_distribution", data, "Gender Distribution").draw();

        data = {{ a1c_distribution }};
        x = ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14'];
        bc = new BarChart("a1c_distribution", x, data, "a1c Distribution");
        bc.set_labels("A1C", "# of people");
        bc.draw();


        temp = {{ a1c_improvement_list }};
        data = [0, 0, 0, 0, 0, 0];
        temp.forEach((value, index) => {
            data[Math.floor(value)]++;
        });
        x = [];
        for(var i=0; i < 6; i++) {
            x.push(i.toString() + '-' + (i+1).toString());
        }
        bc = new BarChart("a1c_improvement", x, data, "A1C Improvement");
        bc.set_labels('A1C Improvement', '# of people');
        bc.draw()


        x = {{ a1c_improvement_list_user_average_time_per_day }};
        let y = {{ a1c_improvement_list }};
        new ScatterChart("a1c_improvement_scatter", x, y, "A1C Improvement / Average usage time (min)",
            "Average usage time (min)", "A1C Improvement").draw();


        x = {{ a1c_improvement_list_user_age }};
        y = {{ a1c_improvement_list }};
        new ScatterChart("a1c_improvement_by_age_scatter", x, y, "A1C Improvement / Age (year)",
            "Age (year)", "A1C Improvement").draw();


        x = {{ a1c_improvement_list_number_of_days }};
        y = {{ a1c_improvement_list }};
        new ScatterChart("a1c_improvement_by_usage_scatter", x, y, "A1C Improvement / Number of Days",
            "Number of Days", "A1C Improvement", '').draw();


        data = {{ activity_by_age }};
        x = [];
        for(var i=0; i < 10; i++) {
            x.push((i * 10).toString() + '-' + ((i+1) * 10).toString());
        }
        bc = new BarChart("active_users_by_age_distribution", x, data, "activity of users in different age ranges", "activity");
        bc.set_labels('Age', 'activity of users');
        bc.draw();


        data = {{ activity_by_time }};
        let data_percent = [];
        let m = mymax(data);
        for(var i=0; i < data.length; i++) {
            data_percent.push(Math.round(data[i] * 100 / m));
        }
        x = [];
        for(var i=0; i < 24; i++) {
            x.push(i.toString() + '-' + (i+1).toString());
        }
        bc = new BarChart("active_users_by_time", x, data_percent, "Percentage of user activity at different hours of the day", "%");
        bc.set_labels('time', 'Percentage of user activity');
        bc.draw();


        data = {{ users_per_month | safe }};
        x = {{ users_per_month_names | safe }};
        bc = new BarChart("users_per_month", x, data, "Number of Users", "User");
        bc.set_labels('Date', 'Users');
        bc.draw();



    </script>
{% endblock %}