{% 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 %}