{% extends 'user-base.html' %} {% block content %} <!--cart--> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="card text-white bg-secondary mb-3"> <div class="card-header"><h5 class="card-title">Google <span><i class="fa fa-google" aria-hidden="true"></i></span></h5></div> <div class="card-body"> <table class="table"> <tr> <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Total Review</td> <td>{{ google_total }}</td> </tr> <tr> <td><i class="fa fa-line-chart" aria-hidden="true"></i> Growth</td> <td>{{ google_total_growth }} %</td> </tr> </table> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="card text-white bg-danger mb-3"> <div class="card-header"><h5 class="card-title">Yelp <span><i class="fa fa-yelp" aria-hidden="true"></i></span></h5></div> <div class="card-body"> <table class="table"> <tr> <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Total Review</td> <td>{{ yelp_total }}</td> </tr> <tr> <td><i class="fa fa-line-chart" aria-hidden="true"></i> Growth</td> <td>{{ yelp_total_growth }}%</td> </tr> </table> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="card text-white bg-primary mb-3"> <div class="card-header"><h5 class="card-title">Facebook <span><i class="fa fa-facebook" aria-hidden="true"></i></span></h5></div> <div class="card-body"> <table class="table"> <tr> <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Total Review</td> <td>{{ facebook_total }}</td> </tr> <tr> <td><i class="fa fa-line-chart" aria-hidden="true"></i> Growth</td> <td>{{ facebook_total_growth }} %</td> </tr> </table> </div> </div> </div> </div> <!-- canvas--> <canvas class="my-4" id="myChart" width="900" height="300"></canvas> <h2>Section title</h2> <div class="table-responsive"> <table class="table"> <thead> <tr class="table-info"> <th>Platform</th> <th>Total <br>Positive Review</th> <th>Positive <br> review Growth</th> <th>Total <br>Negative Review</th> <th>Negative <br> review Growth</th> </tr> </thead> <tbody> <tr> <td>Google</td> <td>{{ google_pos }}</td> {% if google_pos_gr > 0 %} <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ google_pos_gr }} %</td> {% else %} <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ google_pos_gr }} %</td> {% endif %} <td>{{ google_neg }}</td> {% if google_neg_gr < 0 %} <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ google_neg_gr }} %</td> {% else %} <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ google_neg_gr }} %</td> {% endif %} </tr> <tr> <td>Yelp</td> <td>{{ yelp_pos }}</td> {% if yelp_pos_gr > 0 %} <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }} %</td> {% else %} <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }} %</td> {% endif %} <td>{{ yelp_neg }}</td> {% if yelp_neg_gr < 0 %} <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ yelp_neg_gr }} %</td> {% else %} <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ yelp_neg_gr }} %</td> {% endif %} </tr> <tr style="border-bottom: 1px solid #dee2e6"> <td>Facebook</td> <td>{{ facebook_pos }}</td> {% if facebook_pos_gr > 0 %} <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }} %</td> {% else %} <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }} %</td> {% endif %} <td>{{ facebook_neg }}</td> {% if facebook_neg_gr < 0 %} <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ facebook_neg_gr }} %</td> {% else %} <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ facebook_neg_gr }} %</td> {% endif %} </tr> </tbody> </table> </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 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> <script> var ctx = document.getElementById("myChart"); var location_id = document.getElementById("location_id").value; console.log(location_id.value) var endpoint = '/user/api/analytics'; params = { "location_id":location_id.trim() } console.log(params) $.ajax({ type: "get", url: endpoint, data: params, dataType: 'json', success: function(data) { console.log(data) var myBarChart = new Chart(ctx, { type: 'bar', data: { labels: data.label, datasets: [ { label: 'Google', data: data.google, borderColor: 'rgb(255, 204, 0)', backgroundColor: 'rgb(255, 204, 0)', borderWidth: 1, fill: false }, { label: 'Facebook', data: data.facebook, borderColor: 'rgb(0, 51, 204)', backgroundColor: 'rgb(0, 51, 204)', borderWidth: 1, fill: false }, { label: 'Yelp', data: data.yelp, borderColor: 'rgb(204, 51, 0)', backgroundColor: 'rgb(204, 51, 0)', borderWidth: 1, fill: false }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }], xAxes: [{ gridLines: { drawOnChartArea:false } }] }, title: { display: true, fontSize: 16, text: "Review of this month in all platforms." } } }); }, error: function(error_data) { console.log(error_data); } }); </script> {% endblock %}