filter graph with location and monthly or weekly

analytics/templates/analytics.html

@@ -4,126 +4,42 @@
     <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>
+                <option 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>
+        <button id="applyBtn" style="display: none;">Apply</button>
     </div>
-    <div>
-        <h2 style="text-align:center" class="mt-4">Total Review in Last One Year</h2>
+<br>
+    <div id="bar-chart-container">
+        <h4 id="bar-chart-header" style="text-align:center" class="mt-4">Total Review in Last One Year</h4>
         <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>
+<br>
+<br>
+    <div id="line-chart-container">
+        <h4 style="text-align:center" class="mt-4">Total Star ratings in Last One Year</h4>
         <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
-                                }
-                            }]
-                        }
-                    }
-                });
-            },
+        $('#applyBtn').click(function () {
+            {% block jquery %} {% endblock %}
+         });
+         $('#applyBtn').click();
 
-            error: function(error_data) {
-                console.log(error_data);
-            }
-            });
-        });
+         $("#location").on("change", function(){
+            $('#applyBtn').click();
+         });
+         $("#timeInterval").on("change", function(){
+            $('#applyBtn').click();
+
+         });
+     });
     </script>
 {% endblock report %}

analytics/templates/charts.html

@@ -0,0 +1,114 @@
+{% extends 'analytics.html' %}
+<script>
+    {% block jquery %}
+    var location_id = document.getElementById("location").value;
+    var time_interval = document.getElementById("timeInterval").value;
+    var endpoint = '/analytics/analytic-data';
+    params = {
+        "location_id": location_id,
+        "time_interval": time_interval
+    }
+    $.ajax({
+        type: "get",
+        url: endpoint,
+        data: params,
+        dataType: 'json',
+        success: function(data) {
+
+            $('#barChart').remove();
+            $('#bar-chart-container').append('<canvas id="barChart" width="400" height="100" class="mt-2"></canvas>');
+
+            $('#lineChart').remove();
+            $('#line-chart-container').append('<canvas id="lineChart" width="400" height="100" class="mt-2"></canvas>');
+
+            var ctx = document.getElementById('lineChart').getContext('2d');
+            var ctxBar = document.getElementById('barChart').getContext('2d');
+            var myLineChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.label,
+                    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 myBarChart = new Chart(ctxBar, {
+                type: 'bar',
+                data: {
+                    labels: data.label,
+                    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);
+        }
+    });
+    {% endblock jquery %}
+</script>

analytics/urls.py

@@ -3,5 +3,5 @@ from .views import ChartDataByMonth, AnalyticsData
 
 urlpatterns = [
     path('', AnalyticsData.as_view(), name='analytics'),
-    path('month/', ChartDataByMonth.as_view()),
+    path('analytic-data/', ChartDataByMonth.as_view()),
 ]

analytics/utils.py

@@ -1,4 +1,3 @@
-from django.db.models import Count
 from review.models import Review
 
 
@@ -8,7 +7,7 @@ def get_review_count_by_month(location_id):
     FROM review_review
     WHERE DATE_ADD(CURRENT_TIMESTAMP(),INTERVAL -1 YEAR) <= create_time and location_id={location_id}
     GROUP BY MONTH(create_time)
-    ORDER BY DATE(create_time) DESC
+    ORDER BY DATE(create_time)
     '''
     qs = Review.objects.raw(sql)
     label = [q.month for q in qs]
@@ -21,7 +20,7 @@ def get_review_count_by_month(location_id):
             WHERE DATE_ADD(CURRENT_TIMESTAMP(),INTERVAL -1 YEAR) <= create_time
             and location_id={location_id} and star_rating={i}
             GROUP BY MONTH(create_time)
-            ORDER BY DATE(create_time) DESC
+            ORDER BY DATE(create_time)
             '''
         qs = Review.objects.raw(sql)
         ratings = [0]*len(label)
@@ -29,7 +28,7 @@ def get_review_count_by_month(location_id):
             ratings[label.index(q.month)] = q.total_ratings
         star_ratings.append(ratings)
     response = {
-        'month': label,
+        'label': label,
         'total_reviews': total_review,
         'one_star': star_ratings[0],
         'two_star': star_ratings[1],
@@ -40,32 +39,34 @@ def get_review_count_by_month(location_id):
     return response
 
 
-def get_review_count_by_month_all():
+def get_review_count_by_week(location_id):
     sql = f'''
-    SELECT review_id, MONTHNAME(create_time) as month, COUNT(review_id) as total_review
+    SELECT review_id, WEEK(create_time) as week, COUNT(review_id) as total_review
     FROM review_review
-    GROUP BY MONTH(create_time)
-    ORDER BY DATE(create_time) DESC
+    WHERE DATE_ADD(CURRENT_TIMESTAMP(),INTERVAL -1 YEAR) <= create_time and location_id={location_id}
+    GROUP BY WEEK(create_time)
+    ORDER BY DATE(create_time)
     '''
     qs = Review.objects.raw(sql)
-    label = [q.month for q in qs]
+    label = [q.week for q in qs]
     total_review = [q.total_review for q in qs]
     star_ratings = []
     for i in range(1, 6):
         sql = f'''
-            SELECT review_id, MONTHNAME(create_time) as month, COUNT(review_id) as total_ratings
+            SELECT review_id, WEEK(create_time) as week, COUNT(review_id) as total_ratings
             FROM review_review
-            WHERE star_rating={i}
-            GROUP BY MONTH(create_time)
-            ORDER BY DATE(create_time) DESC
+            WHERE DATE_ADD(CURRENT_TIMESTAMP(),INTERVAL -1 YEAR) <= create_time
+            and location_id={location_id} and star_rating={i}
+            GROUP BY WEEK(create_time)
+            ORDER BY DATE(create_time)
             '''
         qs = Review.objects.raw(sql)
         ratings = [0]*len(label)
         for q in qs:
-            ratings[label.index(q.month)] = q.total_ratings
+            ratings[label.index(q.week)] = q.total_ratings
         star_ratings.append(ratings)
     response = {
-        'month': label,
+        'label': label,
         'total_reviews': total_review,
         'one_star': star_ratings[0],
         'two_star': star_ratings[1],

analytics/views.py

@@ -5,20 +5,21 @@ from django.views.generic import View
 
 from gauth.models import Location
 
-from .utils import get_review_count_by_month, get_review_count_by_month_all
+from .utils import get_review_count_by_month, get_review_count_by_week
 
 
 class ChartDataByMonth(APIView):
     def get(self, request, *args, **kwargs):
         location_id = request.GET['location_id']
-        if location_id == 'all':
-            res = get_review_count_by_month_all()
-        else:
+        time_interval = request.GET['time_interval']
+        if time_interval == 'month':
             res = get_review_count_by_month(location_id)
+        else:
+            res = get_review_count_by_week(location_id)
         return Response(res)
 
 
 class AnalyticsData(View):
     def get(self, request, *args, **kwargs):
         locations = Location.objects.all()
-        return render(request, 'analytics.html', {'location_list': locations})
+        return render(request, 'charts.html', {'location_list': locations})

dashboard/static/main.css

@@ -97,15 +97,12 @@ a.article-title:hover {
 
 
 .select-style {
-    border: 1px solid #ccc;
-    width: 40%;
+    border: 2px solid #ccc;
+    width: 45%;
     border-radius: 3px;
     overflow: hidden;
     background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
-    height: 40px
+    height: 40px;
+    margin-left: 2px;
+    padding: 2px 10px;
 }
-.btn-primary {
-    color: #fff;
-    background-color: #007bff;
-    border-color: #007bff;
-    width: 15%;