'use strict';

/* Chart.js docs: https://www.chartjs.org/ */

window.chartColors = {
	green: '#75c181',
	gray: '#a9b5c9',
	text: '#252930',
	border: '#e7e9ed'
};

/* Random number generator for demo purpose */
var randomDataPoint = function(){ return Math.round(Math.random()*10000)};


//Chart.js Line Chart Example 
var labels=[];
var avgcount=[];
var tempt;
var transfermsg=JSON.parse(window.localStorage.getItem("transfermsg"));
var mysecond=parseFloat(JSON.parse(window.localStorage.getItem("mysecond")));
var oncanvas=parseInt(JSON.parse(window.localStorage.getItem("oncanvas")));
var offcanvas=parseInt(JSON.parse(window.localStorage.getItem("offcanvas")));
var pagefreq=JSON.parse(window.localStorage.getItem("pagefreq"));
var pagefreqoff=JSON.parse(window.localStorage.getItem("pagefreqoff"));
var pgnum=parseInt(window.localStorage.getItem("pgnum"));

var i=0;
var j=0;
var item=(mysecond/(oncanvas+offcanvas)).toFixed(2);
var time_oncanvas=[];
var time_offcanvas=[];
var time_canvas=[];

tempt=oncanvas*item/pgnum;
for(i=0;i<pgnum;i++){	
	labels.push(`第${i+1}页`);
	time_oncanvas.push(0);
	time_canvas.push(0);
	time_offcanvas.push(0);
	avgcount.push((tempt).toFixed(2));
}
for(i=0;i<pagefreq.length;i++){	
	pagefreq[i]=parseInt(pagefreq[i]);
	pagefreqoff[i]=parseInt(pagefreqoff[i]);
	time_canvas[i]+=(pagefreq[i]*item).toFixed(2);
	time_offcanvas[i]+=pagefreqoff[i]*item;
}

for(i=0;i<time_canvas.length;i++){	
	time_oncanvas[i]=time_canvas[i]-time_offcanvas[i];
}


console.log(pagefreq,pagefreqoff,time_canvas,time_oncanvas,time_offcanvas);


var lineChartConfig = {
	type: 'line',

	data: {
		labels: labels,
		
		datasets: [{
			label: '您的每页的阅读时长',
			fill: false,
			backgroundColor: window.chartColors.green,
			borderColor: window.chartColors.green,
			data: time_canvas,
		}, {
			label: '您每页平均阅读时长',
		    borderDash: [3, 5],
			backgroundColor: window.chartColors.gray,
			borderColor: window.chartColors.gray,
			
			data: avgcount,
			fill: false,
		}]
	},
	options: {
		responsive: true,	
		aspectRatio: 1.5,
		
		legend: {
			display: true,
			position: 'bottom',
			align: 'end',
		},
		
		title: {
			display: true,
			text: '平均每页注视时长',
			
		}, 
		tooltips: {
			mode: 'index',
			intersect: false,
			titleMarginBottom: 10,
			bodySpacing: 10,
			xPadding: 16,
			yPadding: 16,
			borderColor: window.chartColors.border,
			borderWidth: 1,
			backgroundColor: '#fff',
			bodyFontColor: window.chartColors.text,
			titleFontColor: window.chartColors.text,

            callbacks: {
	            //Ref: https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
                label: function(tooltipItem, data) {
	                if (parseInt(tooltipItem.value) >= 10) {
                        return  tooltipItem.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    } else {
	                    return  tooltipItem.value;
                    }
                }
            },

		},
		hover: {
			mode: 'nearest',
			intersect: true
		},
		scales: {
			xAxes: [{
				display: true,
				gridLines: {
					drawBorder: false,
					color: window.chartColors.border,
				},
				scaleLabel: {
					display: false,
				
				}
			}],
			yAxes: [{
				display: true,
				gridLines: {
					drawBorder: false,
					color: window.chartColors.border,
				},
				scaleLabel: {
					display: false,
				},
				ticks: {
		            beginAtZero: true,
		            userCallback: function(value, index, values) {
		                return  value.toLocaleString();   //Ref: https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
		            }
		        },
			}]
		}
	}
};





//Bar Chart Demo

var barChartConfig = {
	type: 'bar',

	data: {
		labels:labels,
		datasets: [{
			label: '视线在PDF上的时间（秒）',
			backgroundColor: "rgba(117,193,129,0.8)", 
			hoverBackgroundColor: "rgba(117,193,129,1)",
			
			
			data: time_oncanvas
		}, 
		{
			label: '视线不在PDF上的时间（秒）',
			backgroundColor: "rgba(91,153,234,0.8)", 
			hoverBackgroundColor: "rgba(91,153,234,1)",
			
			
			data: time_offcanvas
		}
		]
	},
	options: {
		responsive: true,
		legend: {
			position: 'bottom',
			align: 'end',
		},

		tooltips: {
			mode: 'index',
			intersect: false,
			titleMarginBottom: 10,
			bodySpacing: 10,
			xPadding: 16,
			yPadding: 16,
			borderColor: window.chartColors.border,
			borderWidth: 1,
			backgroundColor: '#fff',
			bodyFontColor: window.chartColors.text,
			titleFontColor: window.chartColors.text,
			callbacks: {
                label: function(tooltipItem, data) {	                 
	                return tooltipItem.value + 's';   
                }
            },
			

		},
		scales: {
			xAxes: [{
				display: true,
				gridLines: {
					drawBorder: false,
					color: window.chartColors.border,
				},

			}],
			yAxes: [{
				display: true,
				gridLines: {
					drawBorder: false,
					color: window.chartColors.borders,
				},
				ticks: {
		            beginAtZero: true,
		            userCallback: function(value, index, values) {
		                return value + 's';  
		            }
		        },

				
			}]
		}
		
	}
}




// Generate charts on load
window.addEventListener('load', function(){
	
	var lineChart = document.getElementById('canvas-linechart').getContext('2d');
	window.myLine = new Chart(lineChart, lineChartConfig);
	
	var barChart = document.getElementById('canvas-barchart').getContext('2d');
	window.myBar = new Chart(barChart, barChartConfig);
	

});	
	
