add statistics for users: map and google charts.

src/assets/js/charts.js

@@ -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);
+}

src/assets/scss/bootstrap_custom.scss

@@ -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";

src/functions.php

@@ -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'));
 }

src/single-colecoes.php

@@ -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,12 +125,30 @@
         </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">
         <div class="col-12 d-flex border-bottom">