review-automation-server/analytics/templates/analytics.html

{% extends "base.html" %}
{% block report %}

    <div class="mt-2">
        <select id="location" class="select-style">
            {% for loc in location_list %}
                <option class="btn btn-secondary m-1" value="{{loc.location_id}}">{{ loc.care_name }}</option>
            {% endfor %}
        </select>
        <select id="timeInterval" class="select-style">
            <option value="month">Monthly</option>
            <option value="week">Weekly</option>
            <option value="day">Daily</option>
        </select>
    </div>
    <div>
        <h2 style="text-align:center" class="mt-4">Total Review in Last One Year</h2>
        <canvas id="barChart" width="400" height="100" class="mt-2"></canvas>
    </div>
    <div>
        <h2 style="text-align:center" class="mt-4">Total Star ratings in Last One Year</h2>
        <canvas id="lineChart" width="400" height="100" class="mt-4"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
    <script>
    $(document).ready(function(){
        var endpoint = '/analytics/month';
        params = {
            "location_id": 'all'
        }
        $.ajax({
            type: "get",
            url: endpoint,
            data: params,
            dataType: 'json',
            success: function(data) {
            var ctx = document.getElementById('lineChart').getContext('2d');
            var ctxBar = document.getElementById('barChart').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.month,
                        datasets: [
                        {
                            label: '5 Star',
                            data: data.five_star,
                            borderColor: 'rgb(75, 192, 192)',
                            backgroundColor: 'rgb(75, 192, 192)',
                            borderWidth: 3,
                            fill: false
                        },
                        {
                            label: '4 Star',
                            data: data.four_star,
                            borderColor: 'rgb(54, 162, 235)',
                            backgroundColor: 'rgb(54, 162, 235)',
                            borderWidth: 3,
                            fill: false
                        },
                        {
                            label: '3 Star',
                            data: data.three_star,
                            borderColor: 'rgb(153, 102, 255)',
                            backgroundColor: 'rgb(153, 102, 255)',
                            borderWidth: 3,
                            fill: false
                        },
                        {
                            label: '2 Star',
                            data: data.two_star,
                            borderColor: 'rgb(255, 159, 64)',
                            backgroundColor: 'rgb(255, 159, 64)',
                            borderWidth: 3,
                            fill: false
                        },
                        {
                            label: '1 Star',
                            data: data.one_star,
                            borderColor: 'rgb(255, 99, 132)',
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderWidth: 3,
                            fill: false
                        },
                    ]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
                var myChart = new Chart(ctxBar, {
                    type: 'bar',
                    data: {
                        labels: data.month,
                        datasets: [
                        {
                            label: 'All Reviews',
                            data: data.total_reviews,
                            borderColor: 'rgb(75, 192, 192)',
                            backgroundColor: 'rgb(75, 192, 192)',
                            borderWidth: 3,
                            fill: false
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            },

            error: function(error_data) {
                console.log(error_data);
            }
            });
        });
    </script>
{% endblock report %}