showing graph in analytic view

analytics/templates/analytics.html

@@ -0,0 +1,129 @@
+{% 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 %}

analytics/urls.py

@@ -0,0 +1,7 @@
+from django.urls import path
+from .views import ChartDataByMonth, AnalyticsData
+
+urlpatterns = [
+    path('', AnalyticsData.as_view(), name='analytics'),
+    path('month/', ChartDataByMonth.as_view()),
+]

analytics/utils.py

@@ -0,0 +1,76 @@
+from django.db.models import Count
+from review.models import Review
+
+
+def get_review_count_by_month(location_id):
+    sql = f'''
+    SELECT review_id, MONTHNAME(create_time) as month, COUNT(review_id) as total_review
+    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
+    '''
+    qs = Review.objects.raw(sql)
+    label = [q.month 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
+            FROM review_review
+            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
+            '''
+        qs = Review.objects.raw(sql)
+        ratings = [0]*len(label)
+        for q in qs:
+            ratings[label.index(q.month)] = q.total_ratings
+        star_ratings.append(ratings)
+    response = {
+        'month': label,
+        'total_reviews': total_review,
+        'one_star': star_ratings[0],
+        'two_star': star_ratings[1],
+        'three_star': star_ratings[2],
+        'four_star': star_ratings[3],
+        'five_star': star_ratings[4]
+    }
+    return response
+
+
+def get_review_count_by_month_all():
+    sql = f'''
+    SELECT review_id, MONTHNAME(create_time) as month, COUNT(review_id) as total_review
+    FROM review_review
+    GROUP BY MONTH(create_time)
+    ORDER BY DATE(create_time) DESC
+    '''
+    qs = Review.objects.raw(sql)
+    label = [q.month 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
+            FROM review_review
+            WHERE star_rating={i}
+            GROUP BY MONTH(create_time)
+            ORDER BY DATE(create_time) DESC
+            '''
+        qs = Review.objects.raw(sql)
+        ratings = [0]*len(label)
+        for q in qs:
+            ratings[label.index(q.month)] = q.total_ratings
+        star_ratings.append(ratings)
+    response = {
+        'month': label,
+        'total_reviews': total_review,
+        'one_star': star_ratings[0],
+        'two_star': star_ratings[1],
+        'three_star': star_ratings[2],
+        'four_star': star_ratings[3],
+        'five_star': star_ratings[4]
+    }
+    return response

analytics/views.py

@@ -1,3 +1,24 @@
 from django.shortcuts import render
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from django.views.generic import View
 
-# Create your views here.
+from gauth.models import Location
+
+from .utils import get_review_count_by_month, get_review_count_by_month_all
+
+
+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:
+            res = get_review_count_by_month(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})

dashboard/static/main.css

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

dashboard/templates/base.html

@@ -10,7 +10,8 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="{% static 'main.css' %}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha256-IvM9nJf/b5l2RoebiFno92E5ONttVyaEEsdemDC6iQA=" crossorigin="anonymous" />
 </head>
 <body>
     <header class="site-header">
@@ -27,7 +28,7 @@
             </div>
             <!-- Navbar Right Side -->
             <div class="navbar-nav">
-                <a class="nav-item nav-link" href="#">Analytics</a>
+                <a class="nav-item nav-link" href="{% url 'analytics' %}">Analytics</a>
                 <a class="nav-item nav-link" href="{% url 'review-report' %}">App Report</a>
             </div>
           </div>
@@ -42,7 +43,9 @@
         {% endif %}
     </header>
     <main role="main" class="container mb-5">
+        <div>
         {% block report %} {% endblock %}
+        </div>
       <div class="row">
         <div class="col-md-8">
           {% block content %}{% endblock %}
@@ -66,7 +69,9 @@
     </nav>
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <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/jquery/3.4.1/jquery.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>-->
+<!--    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </body>

review_automation/urls.py

@@ -8,6 +8,7 @@ urlpatterns = [
     path('', include('gauth.urls')),
     path('nlu/', include('nlu_job.urls')),
     path('dashboard/', include('dashboard.urls')),
+    path('analytics/', include('analytics.urls')),
 ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)