keppler 2.0.0

data/installer/core/app/views/app/layouts/_footer.html.haml

@@ -0,0 +1,3 @@
+%span Powered by
+= link_to "http://slicegroup.xyz", target:"_blank" do
+	= image_tag "app/slice-front.png", width: "100px"

data/installer/core/app/views/app/layouts/_google_analytics.html.haml

@@ -0,0 +1,14 @@
+- if Rails.env.production? && @setting.google_analytics_setting.ga_status
+	- if Script.get_script(request)
+		- tracking = Script.get_script(request).script
+	- unless tracking
+		- tracking = @setting.google_analytics_setting.ga_tracking_id
+
+	:javascript
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+		ga('create', "#{tracking}", 'auto');
+		ga('send', 'pageview');

data/installer/core/app/views/app/layouts/_head.html.haml

@@ -0,0 +1,22 @@
+// Title & Meta tags
+= render "app/layouts/meta_tags"
+
+// Stylesheets
+= stylesheet_link_tag 'app/application', media: 'all', 'data-turbolinks-track' => true
+%link{href:'https://fonts.googleapis.com/css?family=Patua+One', rel:'stylesheet', type:'text/css'}
+%link{href: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css", rel: "stylesheet"}/
+
+// Javascripts
+= javascript_include_tag 'app/application', 'data-turbolinks-track' => true
+%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"}
+
+// Google Analytics
+= render 'app/layouts/google_analytics'
+
+// Favicon
+= favicon_link_tag @favicon
+
+- scripts = @scripts.select{|x| x.url == request.env['PATH_INFO']}
+- unless scripts.empty?
+  - scripts.each do |script|
+    = raw script.script

data/installer/core/app/views/app/layouts/_messages.html.haml

@@ -0,0 +1,6 @@
+-# Rails flash messages styled for Bootstrap 3.0
+- flash.each do |name, msg|
+  - if msg.is_a?(String)
+    %div{:class => "alert alert-#{name.to_s == 'notice' ? 'success' : 'danger'}"}
+      %button.close{"aria-hidden" => "true", "data-dismiss" => "alert", type: "button"} ×
+      = content_tag :div, msg, :id => "flash_#{name}"

data/installer/core/app/views/app/layouts/_meta_tags.html.haml

@@ -0,0 +1,9 @@
+%meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0"}
+= csrf_meta_tags
+- if @meta
+	%meta{:name => "description", :content => "#{content_for?(:description) ? yield(:description) : "#{@meta.description}"}"}
+	= raw @meta.meta_tags
+	%title= content_for?(:title) ? yield(:title) : @meta.title
+- else
+	%meta{:name => "description", :content => "#{content_for?(:description) ? yield(:description) : "#{@description}"}"}
+	%title= content_for?(:title) ? yield(:title) : @name

data/installer/core/app/views/app/layouts/_navigation.html.haml

@@ -0,0 +1,13 @@
+-# navigation styled for Bootstrap 3.0
+%nav.navbar.navbar-default.navbar-fixed-top.app-navbar
+  .container
+    .navbar-header
+      %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
+        %span.sr-only Toggle navigation
+        %span.icon-bar
+        %span.icon-bar
+        %span.icon-bar
+      %span.brand-logo Keppler
+    .collapse.navbar-collapse
+      %ul.nav.navbar-nav
+        = render 'app/layouts/navigation_links'

data/installer/core/app/views/app/layouts/_navigation_links.html.haml

@@ -0,0 +1,6 @@
+%li= link_to '<i class="fa fa-home"> Home</i>'.html_safe, main_app.root_path
+- if user_signed_in?
+	%li= link_to '<i class="fa fa-power-off"> Sign out</i>'.html_safe, main_app.destroy_user_session_path, :method=>'delete'
+- else
+	%li= link_to '<i class="fa fa-power-off"> Sign in</i>'.html_safe, main_app.new_user_session_path
+

data/installer/core/app/views/app/layouts/application.html.haml

@@ -0,0 +1,10 @@
+!!!
+%html
+	%head
+		= render 'app/layouts/head'
+	%body
+		%header
+			= #render 'app/layouts/navigation'
+		%main{:role => "main"}
+			= #render 'app/layouts/messages'
+			= yield

data/installer/core/app/views/application_mailer/testing.html.haml

@@ -0,0 +1 @@
+Hola

data/installer/core/app/views/devise/mailer/reset_password_instructions.html.haml

@@ -0,0 +1,6 @@
+%p
+  Hola #{@resource.email}!
+%p Nos has hecho una petición para cambiar tu contraseña. Puedes hacerlo a través de este enlace.
+%p= link_to 'Cambiar mi contraseña', edit_password_url(@resource, reset_password_token: @token)
+%p Si usted no solicitó esto, por favor ignore este correo.
+%p Su contraseña no cambiará si no entra al enlace anterior y cree una nueva.

data/installer/core/app/views/devise/passwords/edit.html.haml

@@ -0,0 +1,27 @@
+.container
+  .devise-horizontal
+    .devise-vertical
+      .devise-box.card
+        .devise-box-header
+          .devise-box-title Keppler
+        = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put }) do |f|
+          .devise-box-body.row
+            .col.s12
+              %h5 Ya puedes cambiar tu contraseña.
+              %p Recuerda agregar una contraseña suficientemente segura
+            = f.hidden_field :reset_password_token
+            .input-field.col.s12
+              = f.password_field :password, autofocus: true, autocomplete: 'off', class: "validate #{'invalid' if resource.errors.messages[:password]}"
+              %label{for: "password"} Contraseña
+              .input-errors
+                = resource.errors.messages.fetch(:password).first
+            .input-field.col.s12
+              = f.password_field :password_confirmation, autocomplete: 'off', class: "validate #{'invalid' if resource.errors.messages[:password_confirmation]}"
+              %label{for: "password"} Confirmar contraseña
+              .input-errors
+                = resource.errors.messages.fetch(:password_confirmation).first
+          .devise-box-footer.row
+            .col.s12
+              = f.submit 'Cambiar contraseña', :class => 'right btn'
+            .col.s12.devise-logo.center-align.hidden-xs
+              = image_tag "admin/slice.png"

data/installer/core/app/views/devise/passwords/new.html.haml

@@ -0,0 +1,22 @@
+.container
+  .devise-horizontal
+    .devise-vertical
+      .devise-box.card
+        .devise-box-header
+          .devise-box-title Keppler
+        = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post, :role => 'form'}) do |f|
+          .devise-box-body.row
+            .col.s12
+              %h5 ¿Haz olvidado tu contraseña?
+              %p Envianos tu email para darle las instrucciones a seguir.
+            .input-field.col.s12
+              = f.email_field :email, :autofocus => true, class: "validate #{'invalid' unless resource.errors.messages.empty?}"
+              %label{for: :email} Email
+            .devise-errors.col.s12.center-align
+              - resource.errors.each do |name, msg|
+                = msg.capitalize
+          .devise-box-footer.row
+            .col.s12
+              = f.submit 'Enviar', :class => 'right btn '
+            .col.s12.devise-logo.center-align.hidden-xs
+              = image_tag "admin/slice.png"

data/installer/core/app/views/devise/registrations/edit.html.erb

@@ -0,0 +1,48 @@
+<div style="padding:30px; padding-bottom:0px;">
+  <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :role => 'form'}) do |f| %>
+    <%= devise_error_messages! %>
+    <div class="panel panel-default">
+      <div class="panel-heading"><b> <%= t('user.edit.edit-config')%></b></div>
+      <div class="panel-body">
+        <div class="form-group">
+          <%= f.label :name %>
+          <%= f.text_field :name, :autofocus => true, class: 'form-control' %>
+          <br>
+          <%= f.label :email %>
+          <%= f.email_field :email, class: 'form-control' %>
+          <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+            <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
+          <% end %>
+        </div>
+      
+      <fieldset>
+          <%= t('devise.announce_password') %>
+          <br>
+          <br>
+          <div class="form-group">
+            <%= f.label :password %>
+            <%= f.password_field :password, :autocomplete => 'off', class: 'form-control' %>
+          </div>
+          <div class="form-group">
+            <%= f.label :password_confirmation %>
+            <%= f.password_field :password_confirmation, class: 'form-control' %>
+          </div>
+        </fieldset>
+         <fieldset>
+          <%= t('devise.announce_password_confirmation') %>
+          <br>
+          <br>
+          <div class="form-group">
+            <%= f.label :current_password %>
+            <%= f.password_field :current_password, class: 'form-control' %>
+          </div>      
+         
+        </fieldset>
+      </div>
+      <div class="panel-footer">
+        <%= f.submit t('user.helpers.submit_update'), :class => 'pull-right  btn btn-warning' %>
+        <div class= "clearfix"></div>
+      </div>
+    </div>    
+  <% end %>
+</div>

data/installer/core/app/views/devise/registrations/new.html.erb

@@ -0,0 +1,19 @@
+<div class="authform">
+  <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :role => 'form'}) do |f| %>
+    <h3>Sign up</h3>
+    <%= devise_error_messages! %>
+    <div class="form-group">
+      <%= f.label :email %>
+      <%= f.email_field :email, :autofocus => true, class: 'form-control' %>
+    </div>
+    <div class="form-group">
+      <%= f.label :password %>
+      <%= f.password_field :password, class: 'form-control' %>
+    </div>
+    <div class="form-group">
+      <%= f.label :password_confirmation %>
+      <%= f.password_field :password_confirmation, class: 'form-control' %>
+    </div>
+     <%= f.submit 'Sign up', :class => 'button right' %>
+  <% end %>
+</div>

data/installer/core/app/views/devise/sessions/new.html.haml

@@ -0,0 +1,30 @@
+.container
+	.login-box
+		.center
+			.login-container
+				.login-logo
+					%a{ href: '#' }
+						%span{style:"font-family: 'Patua One'"} Keppler
+						Admin
+				/ /.login-logo
+				.login-box-body
+					= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :role => 'form'}) do |f|
+						%p.login-box-msg= t('keppler.login_message')
+						%form{:action => "../../index2.html", :method => "post"}
+							.form-group.has-feedback
+								= f.email_field :email, :autofocus => true, class: "form-control validate", :placeholder => "Email"
+								%i.icon-envelope.input-icon
+							.form-group.has-feedback
+								= f.password_field :password, :autofocus => true, class: "form-control validate #{'invalid' if flash[:alert]}", :placeholder => "Password"
+								%i.icon-lock.input-icon
+							.form-group.has-feedback
+								.pull-left
+									- if devise_mapping.recoverable?
+										= link_to new_password_path(resource_name), class: "recoverable" do
+											= t("devise.sessions.forgot_password")
+								.pull-right
+									= f.submit t("devise.sessions.log_in"), class: 'btn-primary'
+							.clearfix
+
+	.login-footer
+		= "#{t('keppler.powered')} <span>Slice Group</span>".html_safe

data/installer/core/app/views/errors/internal_server_error.html.haml

@@ -0,0 +1,7 @@
+%h2 Error!
+%small 500
+%footer
+	- if !loggedin? or (loggedin? and current_user.has_role? :client)
+		-# = link_to material_icon.md_24.home.html_safe, root_path
+	- else
+		-# = link_to material_icon.md_24.home, "/admin/dashboard"

data/installer/core/app/views/errors/not_authorized.html.haml

@@ -0,0 +1,7 @@
+= title "Acceso denegado"
+%h2 ¡Prohibido!
+%small= flash[:message] ? flash[:message] : "No estás autorizado"
+
+%footer
+  = link_to "/admin/dashboard" do
+    -# %i.material-icons home

data/installer/core/app/views/errors/not_found.html.haml

@@ -0,0 +1,7 @@
+%h2 Not found
+%small 404
+%footer
+	- if !loggedin? or (loggedin? and current_user.has_role? :client)
+		-# = link_to material_icon.md_24.home, root_path
+	- else
+		-# = link_to material_icon.md_24.home, "/admin/dashboard"

data/installer/core/app/views/errors/unprocessable.html.haml

@@ -0,0 +1,7 @@
+%h2 Error!
+%small 422
+%footer
+	- if !loggedin? or (loggedin? and current_user.has_role? :client)
+		-# = link_to material_icon.md_24.home, root_path
+	- else
+		-# = link_to material_icon.md_24.home, "/admin/dashboard"

data/installer/core/app/views/kaminari/_first_page.html.haml

@@ -0,0 +1,11 @@
+-#  Link to the "First" page
+-#  available local variables
+-#    url:           url to the first page
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+%span.first
+  - unless current_page.first?
+    = link_to url, :remote => remote, class: "btn-pag", title: 'First page' do
+      %i.fa.fa-angle-double-left

data/installer/core/app/views/kaminari/_gap.html.haml

@@ -0,0 +1,8 @@
+-#  Non-link tag that stands for skipped pages...
+-#  available local variables
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+%span.page.gap
+	= #"...".html_safe

data/installer/core/app/views/kaminari/_last_page.html.haml

@@ -0,0 +1,11 @@
+-#  Link to the "Last" page
+-#  available local variables
+-#    url:           url to the last page
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+%span.last
+  - unless current_page.last?
+    = link_to url, :remote => remote, class: "btn-pag", title: 'Last page' do
+      %i.fa.fa-angle-double-right

data/installer/core/app/views/kaminari/_next_page.html.haml

@@ -0,0 +1,11 @@
+-#  Link to the "Next" page
+-#  available local variables
+-#    url:           url to the next page
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+%span.next
+  - unless current_page.last?
+    = link_to url, rel: 'next', :remote => remote, class: "btn-pag", title: 'Next' do
+      %i.fa.fa-angle-right

data/installer/core/app/views/kaminari/_page.html.haml

@@ -0,0 +1,10 @@
+-#  Link showing page number
+-#  available local variables
+-#    page:          a page object for "this" page
+-#    url:           url to this page
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+%span{:class => page.current? ? "btn-pag bg-current" : "btn-pag bg-not"}
+  = link_to_unless page.current?, page, url, {:remote => remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil, :class => page.current? ? "btn-pag bg-current" : "btn-pag bg-not" }

data/installer/core/app/views/kaminari/_paginator.html.haml

@@ -0,0 +1,18 @@
+-#  The container tag
+-#  available local variables
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+-#    paginator:     the paginator that renders the pagination tags inside
+= paginator.render do
+  .pagination
+    = first_page_tag unless current_page.first?
+    -# = prev_page_tag unless current_page.first?
+    - each_page do |page|
+      - if page.left_outer? || page.right_outer? || page.inside_window?
+        = page_tag page
+      - elsif !page.was_truncated?
+        = gap_tag
+    -# = next_page_tag unless current_page.last?
+    = last_page_tag unless current_page.last?

data/installer/core/app/views/kaminari/_prev_page.html.haml

@@ -0,0 +1,11 @@
+-#  Link to the "Previous" page
+-#  available local variables
+-#    url:           url to the previous page
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+%span.prev
+  - unless current_page.first?
+    = link_to url, rel: 'prev', :remote => remote, class: "btn-pag", title: 'Preview' do
+      %i.fa.fa-angle-left

data/installer/core/app/views/keppler_ga_dashboard/dashboard/analytics.html.haml

@@ -0,0 +1,600 @@
+= title "Dashboard"
+
+= library_analytics
+
+-# %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"}
+%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"}
+%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"}
+%script{:src => "/assets/keppler_ga_dashboard/view-selector2.js?body=1"}
+%script{:src => "/assets/keppler_ga_dashboard/date-range-selector.self.js?body=1"}
+%script{:src => "/assets/keppler_ga_dashboard/active-users.self.js?body=1"}
+
+.container
+	.dashboard
+		.row
+			.col-lg-12
+				.box.slice-box
+					.box-header.with-border
+						%h3.box-title
+							Información
+					.box-body.pure-input
+						.dashboard-head
+							-# .form-group
+							-# 	%select.form-control
+							-# 		%option Opción 1
+							.row
+								.col-lg-12.separator-dash
+									.col-lg-6
+										#view-name.hide-on-small-only
+									.col-lg-6
+										#active-users-container
+								.col-lg-12
+									#view-selector-container.hide-on-small-only
+		.row
+			.col-lg-6
+				.box.slice-box
+					.box-header.with-border
+						%h3.box-title
+							Uso por semana
+						-# .box-tools.pull-right
+						-# 	%a.btn.btn-box-tool{"data-widget" => "collapse", type: "button"}
+						-# 		%i.fa.fa-minus
+					.box-body.pure-input
+						%canvas#chart-1-container{:height => "300", :width => "350"}
+						#legend-1-container.charts-legend
+
+			.col-lg-6
+				.box.slice-box
+					.box-header.with-border
+						%h3.box-title
+							Uso al mes
+					.box-body.pure-input
+						%canvas#chart-2-container{:height => "300", :width => "350"}
+						#legend-2-container.charts-legend
+		.row
+			.col-lg-6.m6.l6
+				.box.slice-box
+					.box-header.with-border
+						%h3.box-title
+							Usuarios por navegador
+					.box-body.pure-input
+						#canvas-holder{:height => "300", :width => "350"}
+							%canvas#chart-3-container{:height => "300", :width => "350"}
+
+			.col-lg-6.m6.l6
+				.box.slice-box
+					.box-header.with-border
+						%h3.box-title
+							Usuarios por países
+					.box-body.pure-input
+						#canvas-holder{:height => "300", :width => "350"}
+							%canvas#chart-4-container{:height => "300", :width => "350"}
+
+:javascript
+
+	 var status;
+
+	 function updateOnlineStatus() {
+		 var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+		 if ( condition == "ONLINE"){ status = true}
+		 else if ( condition == "OFFLINE"){ status = false}
+	 }
+
+	 updateOnlineStatus();
+
+	 var state = status;
+
+		if (state) {
+
+			gapi.analytics.ready(function() {
+
+				/*Authorize the user immediately if the user has already granted access.*/
+				gapi.analytics.auth.authorize({
+					serverAuth: {
+						access_token: "#{@access_token}" /*Se agrega el access token desde la api de ruby para analitycs*/
+					}
+				});
+
+
+				/**
+				 * Create a new ActiveUsers instance to be rendered inside of an
+				 * element with the id "active-users-container" and poll for changes every
+				 * five seconds.
+				 */
+				var activeUsers = new gapi.analytics.ext.ActiveUsers({
+					container: 'active-users-container',
+					pollingInterval: 5
+				});
+
+
+				/*Add CSS animation to visually show the when users come and go.*/
+				activeUsers.once('success', function() {
+					var element = this.container.firstChild;
+					var timeout;
+
+					this.on('change', function(data) {
+						var element = this.container.firstChild;
+						var animationClass = data.delta > 0 ? 'is-increasing' : 'is-decreasing';
+						element.className += (' ' + animationClass);
+
+						clearTimeout(timeout);
+						timeout = setTimeout(function() {
+							element.className = element.className.replace(/ is-(increasing|decreasing)/g, '');
+						}, 3000);
+					});
+				});
+
+
+				/*
+					Create a new ViewSelector2 instance to be rendered inside of an
+					element with the id "view-selector-container".
+				*/
+				var viewSelector = new gapi.analytics.ext.ViewSelector2({
+					container: 'view-selector-container',
+					accountId: "#{Rails.application.secrets.ga_auth.fetch(:account_id)}"
+				}).execute();
+
+
+				/*
+					Update the activeUsers component, the Chartjs charts, and the dashboard
+					title whenever the user changes the view.
+				*/
+				viewSelector.on('viewChange', function(data) {
+					var title = document.getElementById('view-name');
+					title.innerHTML = data.property.name + ' (' + data.view.name + ')';
+
+					// Start tracking active users for this view.
+					activeUsers.set(data).execute();
+
+					// Aqui se deben agregar los ids de las vistas de la pagina.
+					renderWeekOverWeekChart(data.ids);
+					renderYearOverYearChart(data.ids);
+					renderTopCountriesChart(data.ids);
+					renderTopBrowsersChart(data.ids);
+				});
+
+
+				/**
+				 * Draw the a chart.js line chart with data from the specified view that
+				 * overlays session data for the current week over session data for the
+				 * previous week.
+				 */
+				function renderWeekOverWeekChart(ids) {
+
+					// Adjust `now` to experiment with different days, for testing only...
+					var now = moment(); // .subtract(3, 'day');
+
+					var thisWeek = query({
+						'ids': ids,
+						'dimensions': 'ga:date,ga:nthDay',
+						'metrics': 'ga:sessions',
+						'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
+						'end-date': moment(now).format('YYYY-MM-DD')
+					});
+
+					var lastWeek = query({
+						'ids': ids,
+						'dimensions': 'ga:date,ga:nthDay',
+						'metrics': 'ga:sessions',
+						'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week').format('YYYY-MM-DD'),
+						'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week').format('YYYY-MM-DD')
+					});
+
+					Promise.all([thisWeek, lastWeek]).then(function(results) {
+
+						var data1 = results[0].rows.map(function(row) { return +row[2]; });
+						var data2 = results[1].rows.map(function(row) { return +row[2]; });
+						var labels = results[1].rows.map(function(row) { return +row[0]; });
+
+						// Chart line fill
+						var config = {
+								type: 'line',
+								data: {
+										labels: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
+										datasets: [{
+												label: "Esta semana",
+												backgroundColor: 'rgba(245, 14, 30, 0.2)',
+												borderColor: [
+														'rgba(255,99,132,1)',
+														'rgba(54, 162, 235, 1)',
+														'rgba(255, 206, 86, 1)',
+														'rgba(75, 192, 192, 1)',
+														'rgba(153, 102, 255, 1)',
+														'rgba(255, 159, 64, 1)'
+												],
+												// borderWidth: 1,
+												fill: true,
+												data: data1,
+										}, {
+												label: "Semana Pasada",
+												fill: true,
+												backgroundColor:'rgba(33, 150, 243, 0.29)',
+												borderColor: '#2196f3',
+												data: data2,
+												// borderWidth: 1
+										}]
+								},
+								options: {
+										responsive: true,
+										title:{
+												display:true,
+												text:' Semana a Semana'
+										},
+										tooltips: {
+												mode: 'index',
+												intersect: false,
+										},
+										hover: {
+												mode: 'nearest',
+												intersect: true
+										},
+										scales: {
+												xAxes: [{
+														display: true,
+														scaleLabel: {
+																display: true,
+																labelString: 'Dias'
+														}
+												}],
+												yAxes: [{
+														display: true,
+														scaleLabel: {
+																display: true,
+																labelString: 'Visitas'
+														},
+														// ticks: {
+														// 		min: 0,
+														// 		max: 100,
+														//
+														// 		// forces step size to be 5 units
+														// 		stepSize: 5
+														// }
+												}]
+										}
+								}
+						};
+
+						var ctx = document.getElementById("chart-1-container");
+						window.myLine = new Chart(ctx, config);
+
+					});
+				}
+
+
+				/**
+				 * Draw the a chart.js bar chart with data from the specified view that
+				 * overlays session data for the current year over session data for the
+				 * previous year, grouped by month.
+				 */
+				function renderYearOverYearChart(ids) {
+
+					// Adjust `now` to experiment with different days, for testing only...
+					var now = moment(); // .subtract(3, 'day');
+
+					var thisYear = query({
+						'ids': ids,
+						'dimensions': 'ga:month,ga:nthMonth',
+						'metrics': 'ga:users',
+						'start-date': moment(now).date(1).month(0).format('YYYY-MM-DD'),
+						'end-date': moment(now).format('YYYY-MM-DD')
+					});
+
+					var lastYear = query({
+						'ids': ids,
+						'dimensions': 'ga:month,ga:nthMonth',
+						'metrics': 'ga:users',
+						'start-date': moment(now).subtract(1, 'year').date(1).month(0).format('YYYY-MM-DD'),
+						'end-date': moment(now).date(1).month(0).subtract(1, 'day').format('YYYY-MM-DD')
+					});
+
+					Promise.all([thisYear, lastYear]).then(function(results) {
+						var data1 = results[0].rows.map(function(row) { return +row[2]; });
+						var data2 = results[1].rows.map(function(row) { return +row[2]; });
+						var labels = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
+
+						// Ensure the data arrays are at least as long as the labels array.
+						// Chart.js bar charts don't (yet) accept sparse datasets.
+						for (var i = 0, len = labels.length; i < len; i++) {
+							if (data1[i] === undefined) data1[i] = 0;
+							if (data2[i] === undefined) data2[i] = 0;
+						}
+
+						// Chart line fill
+						var config = {
+								type: 'bar',
+								data: {
+										labels: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
+										datasets: [{
+												label: "Año pasado",
+												backgroundColor: 'rgba(245, 14, 30, 0.2)',
+												borderColor: 'rgba(255,99,132,1)',
+												borderWidth: 2,
+												fill: true,
+												data: data2,
+										}, {
+												label: "Año actual",
+												fill: true,
+												backgroundColor:'rgba(33, 150, 243, 0.29)',
+												borderColor: '#2196f3',
+												data: data1,
+												borderWidth: 2
+										}]
+								},
+								options: {
+										responsive: true,
+										title:{
+												display:true,
+												text:' Semana a Semana'
+										},
+										tooltips: {
+												mode: 'index',
+												intersect: false,
+										},
+										hover: {
+												mode: 'nearest',
+												intersect: true
+										},
+										scales: {
+												xAxes: [{
+														display: true,
+														scaleLabel: {
+																display: true,
+																labelString: 'Dias'
+														}
+												}],
+												yAxes: [{
+														display: true,
+														scaleLabel: {
+																display: true,
+																labelString: 'Visitas'
+														},
+														// ticks: {
+														// 		min: 0,
+														// 		max: 100,
+														//
+														// 		// forces step size to be 5 units
+														// 		stepSize: 5
+														// }
+												}]
+										}
+								}
+						};
+
+						var ctx = document.getElementById("chart-2-container");
+						window.myLine = new Chart(ctx, config);
+
+					})
+					.catch(function(err) {
+						console.error(err.stack);
+					});
+				}
+
+
+				/**
+				 * Draw the a chart.js doughnut chart with data from the specified view that
+				 * show the top 5 browsers over the past seven days.
+				 */
+				function renderTopBrowsersChart(ids) {
+
+					query({
+						'ids': ids,
+						'dimensions': 'ga:browser',
+						'metrics': 'ga:pageviews',
+						'sort': '-ga:pageviews',
+						'max-results': 5
+					})
+					.then(function(response) {
+
+						var data = [];
+						var colors = ["rgba(245, 14, 30, 0.2)",'#e3e3e3','#2196f3','#f1dd30','#f44336'];
+
+						response.rows.forEach(function(row, i) {
+							data.push({
+								label: row[0],
+								value: +row[1],
+								color: colors[i]
+							});
+						});
+
+						var data_label = [];
+						var data_value = [];
+
+						for ( let i = 0 ; i < data.length; i++){
+							data_label.push(data[i].label);
+							data_value.push(data[i].value);
+						}
+
+						var config = {
+								type: 'doughnut',
+								data: {
+										datasets: [{
+												data: data_value,
+												backgroundColor: [
+													'rgba(245, 14, 30, 0.2)',
+													'rgba(4, 208, 7, 0.22)',
+													'rgba(33, 150, 243, 0.29)',
+													'rgba(241, 221, 48, 0.26)',
+													'rgba(205, 133, 63, 0.3)'
+													],
+												borderColor: [
+													'rgba(255,99,132,1)',
+													'#04d007',
+													'#2196f3',
+													'#f1dd30',
+													'peru',
+												],
+												label: 'Browser'
+										}],
+										labels: data_label
+								},
+								options: {
+										responsive: true
+								}
+						};
+
+						var ctx = document.getElementById("chart-3-container");
+						window.myPie = new Chart(ctx, config);
+					});
+				}
+
+
+				/**
+				 * Draw the a chart.js doughnut chart with data from the specified view that
+				 * compares sessions from mobile, desktop, and tablet over the past seven
+				 * days.
+				 */
+				function renderTopCountriesChart(ids) {
+					query({
+						'ids': ids,
+						'dimensions': 'ga:country',
+						'metrics': 'ga:sessions',
+						'sort': '-ga:sessions',
+						'max-results': 5
+					})
+					.then(function(response) {
+
+						var data = [];
+						var colors = ["#{@color}",'#e3e3e3','#2196f3','#f1dd30','#f44336'];
+
+						response.rows.forEach(function(row, i) {
+							data.push({
+								label: row[0],
+								value: +row[1],
+								color: colors[i]
+							});
+						});
+
+						var data_label = [];
+						var data_value = [];
+
+						for ( let i = 0 ; i < data.length; i++){
+							data_label.push(data[i].label);
+							data_value.push(data[i].value);
+						}
+
+						var config = {
+								type: 'pie',
+								data: {
+										datasets: [{
+												data: data_value,
+												backgroundColor: [
+													'rgba(245, 14, 30, 0.2)',
+													'rgba(4, 208, 7, 0.22)',
+													'rgba(33, 150, 243, 0.29)',
+													'rgba(241, 221, 48, 0.26)',
+													'rgba(205, 133, 63, 0.3)'
+													],
+												borderColor: [
+													'rgba(255,99,132,1)',
+													'#04d007',
+													'#2196f3',
+													'#f1dd30',
+													'peru',
+												],
+												label: 'Country'
+										}],
+										labels: data_label
+								},
+								options: {
+										responsive: true
+								}
+						};
+
+						var ctx = document.getElementById("chart-4-container");
+						window.myPie = new Chart(ctx, config);
+					});
+				}
+
+
+				/**
+				 * Extend the Embed APIs `gapi.analytics.report.Data` component to
+				 * return a promise the is fulfilled with the value returned by the API.
+				 * @param {Object} params The request parameters.
+				 * @return {Promise} A promise.
+				 */
+				function query(params) {
+					return new Promise(function(resolve, reject) {
+						var data = new gapi.analytics.report.Data({query: params});
+						data.once('success', function(response) { resolve(response); })
+						.once('error', function(response) { reject(response); })
+						.execute();
+					});
+				}
+
+
+				/**
+				 * Create a new canvas inside the specified element. Set it to be the width
+				 * and height of its container.
+				 * @param {string} id The id attribute of the element to host the canvas.
+				 * @return {RenderingContext} The 2D canvas context.
+				 */
+				function makeCanvas(id) {
+					var container = document.getElementById(id);
+					var canvas = document.createElement('canvas');
+					var ctx = canvas.getContext('2d');
+
+					container.innerHTML = '';
+					canvas.width = container.offsetWidth;
+					canvas.height = container.offsetHeight;
+					container.appendChild(canvas);
+
+					return ctx;
+				}
+
+
+				/**
+				 * Create a visual legend inside the specified element based off of a
+				 * Chart.js dataset.
+				 * @param {string} id The id attribute of the element to host the legend.
+				 * @param {Array.} items A list of labels and colors for the legend.
+				 */
+				function generateLegend(id, items) {
+					var legend = document.getElementById(id);
+					legend.innerHTML = items.map(function(item) {
+						var color = item.color || item.fillColor;
+						var label = item.label;
+						return '<li><i style="background:' + color + '"></i>' + label + '</li>';
+					}).join('');
+				}
+
+
+				// Set some global Chart.js defaults.
+				Chart.defaults.global.animationSteps = 60;
+				Chart.defaults.global.animationEasing = 'easeInOutQuart';
+				Chart.defaults.global.responsive = true;
+				Chart.defaults.global.maintainAspectRatio = false;
+			});
+
+
+		}
+
+		else {
+			alert("No hay conexion a internet al Dashboard");
+
+		}
+
+
+:scss
+	.ActiveUsers{
+		position: absolute;
+		top: -3px;
+		right: 10px;
+		background: none;
+		border: 1px solid #d4d2d0;
+		border-radius: 4px;
+		font-weight: 300;
+		padding: .5em 1.5em;
+		white-space: nowrap;
+	}
+
+	#view-name{
+		margin-left: -13px	;
+		font-family: "roboto";
+		font-weight: 300;
+		font-size: 1.4em;
+		color: #777;
+	}
+
+	.separator-dash{
+		margin-bottom: 5vh;
+	}