Kaynağa Gözat

added yelp graphs in manager dashboard

Mohidul Islam 4 yıl önce
ebeveyn
işleme
77c42751b2
2 değiştirilmiş dosya ile 133 ekleme ve 9 silme
  1. 130 8
      manager/templates/location-wise-reviews-man.html
  2. 3 1
      user/views.py

+ 130 - 8
manager/templates/location-wise-reviews-man.html

@@ -25,14 +25,14 @@
         <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>-->
+  <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>
@@ -44,6 +44,8 @@
   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)
   var endpoint = '/user/api/analytics/all-platform';
@@ -80,6 +82,14 @@
                     backgroundColor: 'rgb(0, 51, 204)',
                     borderWidth: 1,
                     fill: false
+                },
+                {
+                    label: 'Yelp',
+                    data: data.yelp.total_review,
+                    borderColor: 'rgb(255, 51, 51)',
+                    backgroundColor: 'rgb(204, 0, 0)',
+                    borderWidth: 1,
+                    fill: false
                 }]
             },
             options: {
@@ -205,6 +215,118 @@
               }
             }
         });
+
+
+
+        // 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 Google."
+                }
+            }
+        });
+
+        // Yelp pie chart
+        var myYelpPieChart = 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: 12,
+               // position: 'bottom',
+                text: 'All reviews of this month'
+              }
+            }
+        });
+
+
+
+
+
+
+
         // Facebook review charts
         // Facebook line chart
         var myFacebookLineChart = new Chart(facebook_line_ctx, {

+ 3 - 1
user/views.py

@@ -95,9 +95,11 @@ class ChartDataAllPlatform(APIView):
             return Response({'error': 'No location Found'}, status=status.HTTP_400_BAD_REQUEST)
         g_res = get_review_count_by_month(location_id, 'google')
         f_res = get_review_count_by_month(location_id, 'facebook')
+        y_res = get_review_count_by_month(location_id, 'yelp')
         res = {
             'google': g_res,
-            'facebook': f_res
+            'facebook': f_res,
+            'yelp': y_res
         }
         return Response(res)