{% extends "base.html" %}
{% load staticfiles %}

{% block content %}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header no-border-bottom">
                <h2 class="card-title">Booking Statistics</h2>
            </div>
            <div class="card-content">
                <div class="card-body">
                    <div class="row justify-content-md-center">
                        <div class="col-lg-4">
                            <div class="container">
                                <canvas id="util-gauge"></canvas>
                            </div>
                        </div>
                        <div class="col-4 border-left border-right">
                            <div class="container">
                                <canvas id="resources-time-series"></canvas>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="container">
                                <canvas id="project-chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="row border-top">
                        <div class="col-6">
                            <div class="container">
                                <canvas id="booking-time-series"></canvas>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="container">
                                <canvas id="users-time-series"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>

    function processTimeSeriesData(data_dict, colors) {
        let output = [];
        let i = 0;

        for (let key in data_dict) {
            output.push({
                label: key,
                data: data_dict[key][1],
                steppedLine: true,
                fill: false,
                backgroundColor: colors[i],
                borderColor: colors[i]
            });

            i += 1;
        }

        return output
    }

    let booking_chart = document.getElementById('booking-time-series').getContext('2d');
    let users_chart = document.getElementById('users-time-series').getContext('2d');
    let util_chart = document.getElementById('util-gauge').getContext('2d');
    let project_chart = document.getElementById('project-chart').getContext('2d');
    let resources_chart = document.getElementById('resources-time-series').getContext('2d');

    let data = {{data | safe}};
    let booking = data['booking'];
    let users = data['user'];
    let projects = data['projects'];
    let colors = data['colors'];

    let primary_color = colors[0];
    let secondary_color = colors[1];
    let accent_color = colors[2];

    let booking_config = {
        type: 'line',
        data: {
            labels: booking[0],
            datasets: [{
                label: 'Bookings',
                data: booking[1],
                steppedLine: true,
                fill: false,
                backgroundColor: primary_color,
                borderColor: primary_color
            }]
        },
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                axis: 'x'
            },
            title: {
                display: true,
                text: 'Active Bookings'
            },
            legend: {
                display: true
            },
            elements: {
                point: {
                    radius: 0
                }
            }
        }
    };

    let resources_config = {
        type: 'line',
        data: {
            labels: booking[0],
            datasets: processTimeSeriesData(data['resources'], colors)
        },
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                axis: 'x'
            },
            title: {
                display: true,
                text: 'Booked Resources'
            },
            legend: {
                display: true
            },
            transitions: {
                show: {
                    animations: {
                        x: {
                            from: 100
                        },
                        y: {
                            from: 1
                        }
                    }
                },
                hide: {
                    animations: {
                        x: {
                            to: 0
                        },
                        y: {
                            to: 100
                        }
                    }
                }
            },
            elements: {
                point: {
                    radius: 0
                }
            }
        }
    };

    let users_config = {
        type: 'line',
        data: {
            labels: users[0],
            datasets: [{
                label: 'Users',
                data: users[1],
                fill: false,
                steppedLine: true,
                backgroundColor: primary_color,
                borderColor: primary_color
            }]
        },
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                axis: 'x'
            },
            legend: {
                display: true
            },
            title: {
                display: true,
                text: 'Active Users'
            },
            elements: {
                point: {
                    radius: 0
                }
            }
        }
    };

    let utilization_config = {
        type:"doughnut",
        data: {
            labels : ["In Use","Not In Use","Maitenance"],
            datasets: [{
                label: 'Lab Utilization',
                data : [data['utils'][0], data['utils'][1], data['utils'][2]],
                backgroundColor: [
                    primary_color,
                    secondary_color,
                    accent_color,
                ]
            }]
        },
        options: {
            circumference: Math.PI,
            rotation : Math.PI,
            cutoutPercentage : 80,
            plugins: {
                datalabels: {
                    backgroundColor: primary_color,
                    borderColor: secondary_color,
                    align: 'start',
                    anchor: 'start',
                    offset: 10,
                    borderRadius: 4,
                    borderWidth: 1,
                }
            },
            legend: {
                display: false
            },
            tooltips: {
                enabled: true
            },
            title: {
                display: true,
                text: "Lab Resources Utilization"
            }
        }
    };

    let project_config = {
        type: 'bar',
        data: {
            labels: projects[0],
            datasets:[{
                label: 'Projects',
                data: projects[1],
                backgroundColor: primary_color,
                borderColor: secondary_color
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            legend: {
                display: false,
                position: 'right'
            },
            title: {
                display: true,
                text: 'Top Represented Projects'
            }
        }
    };

    let bookingChart = new Chart(booking_chart, booking_config);
    let usersChart = new Chart(users_chart, users_config);
    let utilGauge = new Chart(util_chart, utilization_config);
    let projectBars = new Chart(project_chart, project_config);
    let resourceChart = new Chart(resources_chart, resources_config);
</script>
{% endblock content %}