|
|
@@ -6,27 +6,54 @@
|
|
|
|
|
|
<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</h5></div>
|
|
|
+ <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">
|
|
|
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Total Review</td>
|
|
|
+ <td>200</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><i class="fa fa-line-chart" aria-hidden="true"></i> Growth</td>
|
|
|
+ <td>-2.4%</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</h5></div>
|
|
|
+ <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">
|
|
|
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Total Review</td>
|
|
|
+ <td>200</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><i class="fa fa-line-chart" aria-hidden="true"></i> Growth</td>
|
|
|
+ <td>-2.4%</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</h5></div>
|
|
|
+ <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">
|
|
|
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Total Review</td>
|
|
|
+ <td>200</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><i class="fa fa-line-chart" aria-hidden="true"></i> Growth</td>
|
|
|
+ <td>-2.4%</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -34,136 +61,69 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- canvas-->
|
|
|
- <canvas class="my-4" id="myChart" width="900" height="350"></canvas>
|
|
|
+ <canvas class="my-4" id="myChart" width="900" height="300"></canvas>
|
|
|
|
|
|
<h2>Section title</h2>
|
|
|
<div class="table-responsive">
|
|
|
- <table class="table table-striped table-sm">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>#</th>
|
|
|
- <th>Header</th>
|
|
|
- <th>Header</th>
|
|
|
- <th>Header</th>
|
|
|
- <th>Header</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>1,001</td>
|
|
|
- <td>Lorem</td>
|
|
|
- <td>ipsum</td>
|
|
|
- <td>dolor</td>
|
|
|
- <td>sit</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,002</td>
|
|
|
- <td>amet</td>
|
|
|
- <td>consectetur</td>
|
|
|
- <td>adipiscing</td>
|
|
|
- <td>elit</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,003</td>
|
|
|
- <td>Integer</td>
|
|
|
- <td>nec</td>
|
|
|
- <td>odio</td>
|
|
|
- <td>Praesent</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,003</td>
|
|
|
- <td>libero</td>
|
|
|
- <td>Sed</td>
|
|
|
- <td>cursus</td>
|
|
|
- <td>ante</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,004</td>
|
|
|
- <td>dapibus</td>
|
|
|
- <td>diam</td>
|
|
|
- <td>Sed</td>
|
|
|
- <td>nisi</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,005</td>
|
|
|
- <td>Nulla</td>
|
|
|
- <td>quis</td>
|
|
|
- <td>sem</td>
|
|
|
- <td>at</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,006</td>
|
|
|
- <td>nibh</td>
|
|
|
- <td>elementum</td>
|
|
|
- <td>imperdiet</td>
|
|
|
- <td>Duis</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,007</td>
|
|
|
- <td>sagittis</td>
|
|
|
- <td>ipsum</td>
|
|
|
- <td>Praesent</td>
|
|
|
- <td>mauris</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,008</td>
|
|
|
- <td>Fusce</td>
|
|
|
- <td>nec</td>
|
|
|
- <td>tellus</td>
|
|
|
- <td>sed</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,009</td>
|
|
|
- <td>augue</td>
|
|
|
- <td>semper</td>
|
|
|
- <td>porta</td>
|
|
|
- <td>Mauris</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,010</td>
|
|
|
- <td>massa</td>
|
|
|
- <td>Vestibulum</td>
|
|
|
- <td>lacinia</td>
|
|
|
- <td>arcu</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,011</td>
|
|
|
- <td>eget</td>
|
|
|
- <td>nulla</td>
|
|
|
- <td>Class</td>
|
|
|
- <td>aptent</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,012</td>
|
|
|
- <td>taciti</td>
|
|
|
- <td>sociosqu</td>
|
|
|
- <td>ad</td>
|
|
|
- <td>litora</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,013</td>
|
|
|
- <td>torquent</td>
|
|
|
- <td>per</td>
|
|
|
- <td>conubia</td>
|
|
|
- <td>nostra</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,014</td>
|
|
|
- <td>per</td>
|
|
|
- <td>inceptos</td>
|
|
|
- <td>himenaeos</td>
|
|
|
- <td>Curabitur</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>1,015</td>
|
|
|
- <td>sodales</td>
|
|
|
- <td>ligula</td>
|
|
|
- <td>in</td>
|
|
|
- <td>libero</td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
-</div>
|
|
|
+ <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_pos_gr }}</td>
|
|
|
+ {% else %}
|
|
|
+ <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ google_pos_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_pos_gr }}</td>
|
|
|
+ {% else %}
|
|
|
+ <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }};</td>
|
|
|
+ {% endif %}
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <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_pos_gr }}</td>
|
|
|
+ {% else %}
|
|
|
+ <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }};</td>
|
|
|
+ {% endif %}
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
|
Mohidul Islam