= 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;
	}