add statistics for users: map and google charts.

This commit is contained in:
Fabiano Alencar 2018-02-19 14:23:04 -03:00
parent 6a1248a357
commit 45f87c5841
4 changed files with 54 additions and 8 deletions

23
src/assets/js/charts.js Normal file
View File

@ -0,0 +1,23 @@
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
legend: {alignment: 'end'},
pieHole: 0.4,
width: '500px',
backgroundColor: '#000'
};
var chart = new google.visualization.PieChart(document.getElementById('collectionGraph'));
chart.draw(data, options);
}

View File

@ -4,6 +4,8 @@ $scooter: #2cb4c1;
$jungle-green: #25a189;
$haiti: #150e38;
$oslo-gray: #898d8f;
$dodger-blue: #04a5ff;
$black: rgba(0, 0, 0, 0.01);
$theme-colors: (
@ -12,7 +14,9 @@ $theme-colors: (
"scooter": $scooter,
"jungle-green": $jungle-green,
"haiti": $haiti,
"oslo-gray": $oslo-gray
"oslo-gray": $oslo-gray,
"dodger-blue": $dodger-blue,
"black-opacit": $black
);
$font-family-sans-serif: "Roboto", "Helvetica Neue", Arial, sans-serif;
@import "../vendor/bootstrap/scss/bootstrap";

View File

@ -36,9 +36,11 @@ function tainacanEnqueueScripts(){
wp_enqueue_script('popper', get_template_directory_uri() . '/assets/vendor/bootstrap/js/popper.min.js', '', '', true);
//JS Bootstrap 4
wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.min.js', array('jquery'), '4.0.0', true);
wp_enqueue_script( 'charts', 'https://www.gstatic.com/charts/loader.js');
//Javascript for Tainacan
wp_enqueue_script('jsTainacan', get_template_directory_uri() . '/assets/js/js.js', '', '', true);
wp_enqueue_script('jsTainacan', get_template_directory_uri() . '/assets/js/js.js', '', '1.0', true);
wp_enqueue_script('collectionGraph', get_template_directory_uri() . '/assets/js/charts.js', array('charts'), '1.0');
}
add_action('wp_enqueue_scripts', 'tainacanEnqueueScripts');
@ -48,7 +50,6 @@ add_action('wp_enqueue_scripts', 'tainacanEnqueueScripts');
function tainacanEnqueueStyles(){
//Style Bootstrap 4
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/assets/vendor/bootstrap/css/bootstrap.min.css');
//Style Tainacan
wp_enqueue_style('style', get_stylesheet_uri(), array('bootstrap'));
}

View File

@ -91,10 +91,10 @@
</div>
</section>
<section class="tainacan-gallery-itens p-2">
<div class="col-12 d-flex border-bottom">
<div class="col-12 d-flex border-bottom mb-5">
<h4 class="text-jelly-bean">Galeria de itens</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
</div>
<div class="row p-5">
<div class="row p-3 p-md-5">
<div class="col-sm-6 col-lg-4">
<img class="img-fluid mx-auto d-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=1" alt="slide 1">
</div>
@ -125,11 +125,29 @@
</div>
</section>
<section class="tainacan-estatisticas p-2">
<div class="col-12 d-flex border-bottom">
<div class="col-12 d-flex border-bottom mb-4">
<h4 class="text-jelly-bean">Estatísticas</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
</div>
<div class="row p-5">
<div class="row p-0 p-lg-5">
<div class="col-lg-6 p-0 p-lg-5">
<h5 class="text-dark p-4">Localização do usuário</h5>
<div class="d-flex justify-content-center bg-black-opacit">
<iframe class="my-lg-5" frameborder="0" style="border:0; height: 242.5px; width: 381.3px;"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBbMcow3w_8HeBmqUcYcwigRSii0b2exT0
&q=Campus+Samambaia,Goiania+GO" allowfullscreen>
</iframe>
</div>
</div>
<div class="col-lg-6 p-5">
<h5 class="text-dark p-4">Coleções do usuário</h5>
<div id="collectionGraph" class="bg-black-opacit" style="width: 100%; height: 300px;"></div>
</div>
<div class="col-lg-6 p-3">
</div>
<div class="col-lg-6 p-3">
</div>
</div>
</section>
<section class="tainacan-caracteristicas p-2">