Prettify location wise graphs

dashboard/static/user-dashboard.css

@@ -147,4 +147,26 @@ body {
 .review-header-divider {
     margin-bottom: 10px;
     border-bottom: 1px solid #dadada;
+}
+
+.graph-card {
+  background: #fff;
+  border-radius: 2px;
+  display: inline-block;
+  margin: 1rem;
+  position: relative;
+}
+
+.graph-card-shadow {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.graph-card-shadow:hover {
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+.graph-container {
+    display: flex;
+    padding:1rem;
 }

user/templates/_navbar.html

@@ -21,13 +21,13 @@
         </a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="#">
+        <a class="nav-link" href="{% url 'location-analytics-graph' %}">
           <span data-feather="bar-chart-2"></span>
           Analytics
         </a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="#">
+        <a class="nav-link" href="{% url 'staff-leaderboard' %}">
           <span data-feather="award"></span>
           Staff Leaderboard
         </a>

user/templates/location-wise-reviews.html

@@ -1,21 +1,36 @@
 {% extends 'user-base.html' %}
 
 {% block content %}
-
-<canvas class="my-4" id="myChart" width="900" height="300"></canvas>
-<!--<div class="row">-->
-<!--  <canvas class="my-4" id="googleLineChart" width="900" height="300"></canvas>-->
-<!--  <canvas class="my-4" id="googlePieChart" width="900" height="300"></canvas>-->
-<!--</div>-->
-
-<div style="display: flex">
-    <div id="bar-chart-container" style="position: relative; width: 70%;">
-      <canvas id="googleLineChart" width="900" height="300"></canvas>
-    </div>
-    <div id="pie-chart-container" style="position: relative; width: 30%;">
-      <canvas id="googlePieChart" width="200" height="150"></canvas>
+  <div class="graph-card graph-card-shadow graph-container">
+    <div style="width: 100%;">
+      <canvas id="myChart" width="1200" height="300"></canvas>
     </div>
-</div>
+  </div>
+
+  <div class="graph-card graph-card-shadow graph-container">
+      <div id="bar-chart-container" style="position: relative; width: 70%;">
+        <canvas id="googleLineChart" width="900" height="300"></canvas>
+      </div>
+      <div id="pie-chart-container" style="position: relative; width: 30%;">
+        <canvas id="googlePieChart" width="200" height="150"></canvas>
+      </div>
+  </div>
+  <div class="graph-card graph-card-shadow graph-container">
+      <div style="position: relative; width: 70%;">
+        <canvas id="facebookLineChart" width="900" height="300"></canvas>
+      </div>
+      <div style="position: relative; width: 30%;">
+        <canvas id="facebookPieChart" width="200" height="150"></canvas>
+      </div>
+  </div>
+  <div class="graph-card graph-card-shadow graph-container">
+      <div style="position: relative; width: 70%;">
+        <canvas id="yelpLineChart" width="900" height="300"></canvas>
+      </div>
+      <div style="position: relative; width: 30%;">
+        <canvas id="yelpPieChart" width="200" height="150"></canvas>
+      </div>
+  </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>
@@ -25,6 +40,10 @@
   var ctx = document.getElementById("myChart");
   var google_line_ctx = document.getElementById("googleLineChart");
   var google_pie_ctx = document.getElementById("googlePieChart");
+  var facebook_line_ctx = document.getElementById("facebookLineChart");
+  var facebook_pie_ctx = document.getElementById("facebookPieChart");
+  var yelp_line_ctx = document.getElementById("yelpLineChart");
+  var yelp_pie_ctx = document.getElementById("yelpPieChart");
   var location_id = document.getElementById("location_id").value;
   console.log(location_id.value)
   var endpoint = '/user/api/analytics/all-platform';
@@ -102,8 +121,8 @@
                   {
                     label: '1*',
                     data: data.google.star_rating[0],
-                    borderColor: 'rgb(255, 204, 0)',
-                    backgroundColor: 'rgb(255, 204, 0)',
+                    borderColor: 'rgb(204, 0, 17)',
+                    backgroundColor: 'rgb(204, 0, 17)',
                     borderWidth: 1,
                     lineTension: 0,
                     fill: false
@@ -111,8 +130,8 @@
                 {
                     label: '2*',
                     data: data.google.star_rating[1],
-                    borderColor: 'rgb(0, 51, 204)',
-                    backgroundColor: 'rgb(0, 51, 204)',
+                    borderColor: 'rgb(255, 119, 0)',
+                    backgroundColor: 'rgb(255, 119, 0)',
                     borderWidth: 1,
                     lineTension: 0,
                     fill: false
@@ -120,8 +139,8 @@
                 {
                     label: '3*',
                     data: data.google.star_rating[2],
-                    borderColor: 'rgb(204, 51, 0)',
-                    backgroundColor: 'rgb(204, 51, 0)',
+                    borderColor: 'rgb(219, 208, 0)',
+                    backgroundColor: 'rgb(219, 208, 0)',
                     borderWidth: 1,
                     lineTension: 0,
                     fill: false
@@ -129,8 +148,8 @@
                 {
                     label: '4*',
                     data: data.google.star_rating[3],
-                    borderColor: 'rgb(0, 51, 204)',
-                    backgroundColor: 'rgb(0, 51, 204)',
+                    borderColor: 'rgb(0, 157, 166)',
+                    backgroundColor: 'rgb(0, 157, 166)',
                     borderWidth: 1,
                     lineTension: 0,
                     fill: false
@@ -138,8 +157,8 @@
                 {
                     label: '5*',
                     data: data.google.star_rating[4],
-                    borderColor: 'rgb(204, 51, 0)',
-                    backgroundColor: 'rgb(204, 51, 0)',
+                    borderColor: 'rgb(0, 97, 0)',
+                    backgroundColor: 'rgb(0, 97, 0)',
                     borderWidth: 1,
                     lineTension: 0,
                     fill: false,
@@ -177,11 +196,81 @@
                   {
                     data: data.google.curr_month.total,
                     backgroundColor: [
-                        'rgb(255, 99, 132)',
-                        'rgb(255, 159, 64)',
-                        'rgb(153, 102, 255)',
-                        'rgb(54, 162, 235)',
-                        'rgb(75, 192, 192)'
+                      'rgb(0, 97, 0)',
+                      'rgb(0, 157, 166)',
+                      'rgb(219, 208, 0)',
+                      'rgb(255, 119, 0)',
+                       'rgb(204, 0, 17)'
+                    ]
+                }]
+            },
+            options: {
+              title: {
+                display: true,
+                fontSize: 16,
+                text: 'This is google reviews'
+              }
+            }
+        });
+        // Facebook review charts
+        // Facebook line chart
+        var myFacebookLineChart = new Chart(facebook_line_ctx, {
+          type: 'line',
+          data: {
+              labels: data.facebook.labels,
+              datasets: [
+                  {
+                    label: 'Not Recommended',
+                    data: data.facebook.star_rating[0],
+                    borderColor: 'rgb(204, 0, 17)',
+                    backgroundColor: 'rgb(204, 0, 17)',
+                    borderWidth: 1,
+                    lineTension: 0,
+                    fill: false
+                },
+                {
+                    label: 'Recommended',
+                    data: data.facebook.star_rating[1],
+                    borderColor: 'rgb(0, 51, 204)',
+                    backgroundColor: 'rgb(0, 51, 204)',
+                    borderWidth: 1,
+                    lineTension: 0,
+                    fill: false
+                }]
+            },
+            options: {
+                borderJoinStyle: "bevel",
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        }
+                    }],
+                    xAxes: [{
+                        gridLines: {
+                            drawOnChartArea:false
+                        }
+                    }]
+                },
+                title: {
+                    display: true,
+                    fontSize: 16,
+                    text: "Monthly review in Facebook."
+                }
+            }
+        });
+
+        // Google pie chart
+        var myFacebookPieChart = new Chart(facebook_pie_ctx, {
+          type: 'pie',
+          data: {
+              labels: data.facebook.curr_month.label,
+              datasets: [
+                  {
+                    data: data.facebook.curr_month.total,
+                    backgroundColor: [
+                        'rgb(0, 51, 204)',
+                        'rgb(204, 0, 17)'
                     ]
                 }]
             },
@@ -193,6 +282,107 @@
               }
             }
         });
+        // Yelp review charts
+        // Yelp line chart
+        var myYelpLineChart = new Chart(yelp_line_ctx, {
+          type: 'line',
+          data: {
+              labels: data.yelp.labels,
+              datasets: [
+                  {
+                    label: '1*',
+                    data: data.yelp.star_rating[0],
+                    borderColor: 'rgb(204, 0, 17)',
+                    backgroundColor: 'rgb(204, 0, 17)',
+                    borderWidth: 1,
+                    lineTension: 0,
+                    fill: false
+                },
+                {
+                    label: '2*',
+                    data: data.yelp.star_rating[1],
+                    borderColor: 'rgb(255, 119, 0)',
+                    backgroundColor: 'rgb(255, 119, 0)',
+                    borderWidth: 1,
+                    lineTension: 0,
+                    fill: false
+                },
+                {
+                    label: '3*',
+                    data: data.yelp.star_rating[2],
+                    borderColor: 'rgb(219, 208, 0)',
+                    backgroundColor: 'rgb(219, 208, 0)',
+                    borderWidth: 1,
+                    lineTension: 0,
+                    fill: false
+                },
+                {
+                    label: '4*',
+                    data: data.yelp.star_rating[3],
+                    borderColor: 'rgb(0, 157, 166)',
+                    backgroundColor: 'rgb(0, 157, 166)',
+                    borderWidth: 1,
+                    lineTension: 0,
+                    fill: false
+                },
+                {
+                    label: '5*',
+                    data: data.yelp.star_rating[4],
+                    borderColor: 'rgb(0, 97, 0)',
+                    backgroundColor: 'rgb(0, 97, 0)',
+                    borderWidth: 1,
+                    lineTension: 0,
+                    fill: false,
+
+                }]
+            },
+            options: {
+                borderJoinStyle: "bevel",
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        }
+                    }],
+                    xAxes: [{
+                        gridLines: {
+                            drawOnChartArea:false
+                        }
+                    }]
+                },
+                title: {
+                    display: true,
+                    fontSize: 16,
+                    text: "Monthly review in Yelp."
+                }
+            }
+        });
+
+        // Yelp pie chart
+        var myGooglePieChart = new Chart(yelp_pie_ctx, {
+          type: 'pie',
+          data: {
+              labels: data.yelp.curr_month.label,
+              datasets: [
+                  {
+                    data: data.yelp.curr_month.total,
+                    backgroundColor: [
+                      'rgb(0, 97, 0)',
+                      'rgb(0, 157, 166)',
+                      'rgb(219, 208, 0)',
+                      'rgb(255, 119, 0)',
+                       'rgb(204, 0, 17)'
+                    ]
+                }]
+            },
+            options: {
+              title: {
+                display: true,
+                fontSize: 16,
+                text: 'This is yelp reviews'
+              }
+            }
+        });
     },
 
     error: function(error_data) {