/*
Name: 			UI Elements / Charts - Examples
Written by: 	Okler Themes - (http://www.okler.net)
Theme Version: 	1.4.1
*/

(function( $ ) {

	'use strict';

	/*
	Flot: Basic
	*/
	(function() {
		var plot = $.plot('#flotBasic', flotBasicData, {
			series: {
				lines: {
					show: true,
					fill: true,
					lineWidth: 1,
					fillColor: {
						colors: [{
							opacity: 0.45
						}, {
							opacity: 0.45
						}]
					}
				},
				points: {
					show: true
				},
				shadowSize: 0
			},
			grid: {
				hoverable: true,
				clickable: true,
				borderColor: 'rgba(0,0,0,0.1)',
				borderWidth: 1,
				labelMargin: 15,
				backgroundColor: 'transparent'
			},
			yaxis: {
				min: 0,
				max: 200,
				color: 'rgba(0,0,0,0.1)'
			},
			xaxis: {
				color: 'rgba(0,0,0,0.1)'
			},
			tooltip: true,
			tooltipOpts: {
				content: '%s: Value of %x is %y',
				shifts: {
					x: -60,
					y: 25
				},
				defaultTheme: false
			}
		});
	})();

	/*
	Flot: Real-Time
	*/
	(function() {
		var data = [],
			totalPoints = 300;

		function getRandomData() {

			if (data.length > 0)
				data = data.slice(1);

			// Do a random walk
			while (data.length < totalPoints) {

				var prev = data.length > 0 ? data[data.length - 1] : 50,
					y = prev + Math.random() * 10 - 5;

				if (y < 0) {
					y = 0;
				} else if (y > 100) {
					y = 100;
				}

				data.push(y);
			}

			// Zip the generated y values with the x values
			var res = [];
			for (var i = 0; i < data.length; ++i) {
				res.push([i, data[i]])
			}

			return res;
		}

		var plot = $.plot('#flotRealTime', [getRandomData()], {
			colors: ['#8CC9E8'],
			series: {
				lines: {
					show: true,
					fill: true,
					lineWidth: 1,
					fillColor: {
						colors: [{
							opacity: 0.45
						}, {
							opacity: 0.45
						}]
					}
				},
				points: {
					show: false
				},
				shadowSize: 0
			},
			grid: {
				borderColor: 'rgba(0,0,0,0.1)',
				borderWidth: 1,
				labelMargin: 15,
				backgroundColor: 'transparent'
			},
			yaxis: {
				min: 0,
				max: 100,
				color: 'rgba(0,0,0,0.1)'
			},
			xaxis: {
				show: false
			}
		});

		function update() {

			plot.setData([getRandomData()]);

			// Since the axes don't change, we don't need to call plot.setupGrid()
			plot.draw();
			setTimeout(update, $( 'html' ).hasClass( 'mobile-device' ) ? 1000 : 30 );
		}

		update();
	})();

	/*
	Flot: Bars
	*/
	(function() {
		var plot = $.plot('#flotBars', [flotBarsData], {
			colors: ['#8CC9E8'],
			series: {
				bars: {
					show: true,
					barWidth: 0.8,
					align: 'center'
				}
			},
			xaxis: {
				mode: 'categories',
				tickLength: 0
			},
			grid: {
				hoverable: true,
				clickable: true,
				borderColor: 'rgba(0,0,0,0.1)',
				borderWidth: 1,
				labelMargin: 15,
				backgroundColor: 'transparent'
			},
			tooltip: true,
			tooltipOpts: {
				content: '%y',
				shifts: {
					x: -10,
					y: 20
				},
				defaultTheme: false
			}
		});
	})();

	/*
	Flot: Pie
	*/
	(function() {
		var plot = $.plot('#flotPie', flotPieData, {
			series: {
				pie: {
					show: true,
					combine: {
						color: '#999',
						threshold: 0.1
					}
				}
			},
			legend: {
				show: false
			},
			grid: {
				hoverable: true,
				clickable: true
			}
		});
	})();


	/*
	Morris: Line
	*/
	Morris.Line({
		resize: true,
		element: 'morrisLine',
		data: morrisLineData,
		xkey: 'y',
		ykeys: ['a', 'b'],
		labels: ['Series A', 'Series B'],
		hideHover: true,
		lineColors: ['#0088cc', '#734ba9'],
	});

	/*
	Morris: Donut
	*/
	Morris.Donut({
		resize: true,
		element: 'morrisDonut',
		data: morrisDonutData,
		colors: ['#0088cc', '#734ba9', '#E36159']
	});

	/*
	Morris: Bar
	*/
	Morris.Bar({
		resize: true,
		element: 'morrisBar',
		data: morrisBarData,
		xkey: 'y',
		ykeys: ['a', 'b'],
		labels: ['Series A', 'Series B'],
		hideHover: true,
		barColors: ['#0088cc', '#2baab1']
	});

	/*
	Morris: Area
	*/
	Morris.Area({
		resize: true,
		element: 'morrisArea',
		data: morrisAreaData,
		xkey: 'y',
		ykeys: ['a', 'b'],
		labels: ['Series A', 'Series B'],
		lineColors: ['#0088cc', '#2baab1'],
		fillOpacity: 0.7,
		hideHover: true
	});

	/*
	Morris: Stacked
	*/
	Morris.Bar({
		resize: true,
		element: 'morrisStacked',
		data: morrisStackedData,
		xkey: 'y',
		ykeys: ['a', 'b'],
		labels: ['Series A', 'Series B'],
		barColors: ['#0088cc', '#2baab1'],
		fillOpacity: 0.7,
		smooth: false,
		stacked: true,
		hideHover: true
	});

	/*
	Gauge: Basic
	*/
	(function() {
		var target = $('#gaugeBasic'),
			opts = $.extend(true, {}, {
				lines: 12, // The number of lines to draw
				angle: 0.12, // The length of each line
				lineWidth: 0.5, // The line thickness
				pointer: {
					length: 0.7, // The radius of the inner circle
					strokeWidth: 0.05, // The rotation offset
					color: '#444' // Fill color
				},
				limitMax: 'true', // If true, the pointer will not go past the end of the gauge
				colorStart: '#0088CC', // Colors
				colorStop: '#0088CC', // just experiment with them
				strokeColor: '#F1F1F1', // to see which ones work best for you
				generateGradient: true
			}, target.data('plugin-options'));

			var gauge = new Gauge(target.get(0)).setOptions(opts);

		gauge.maxValue = opts.maxValue; // set max gauge value
		gauge.animationSpeed = 32; // set animation speed (32 is default value)
		gauge.set(opts.value); // set actual value
		gauge.setTextField(document.getElementById("gaugeBasicTextfield"));
	})();

	/*
	Gauge: Alternative
	*/
	(function() {
		var target = $('#gaugeAlternative'),
			opts = $.extend(true, {}, {
				lines: 12, // The number of lines to draw
				angle: 0.12, // The length of each line
				lineWidth: 0.5, // The line thickness
				pointer: {
					length: 0.7, // The radius of the inner circle
					strokeWidth: 0.05, // The rotation offset
					color: '#444' // Fill color
				},
				limitMax: 'true', // If true, the pointer will not go past the end of the gauge
				colorStart: '#2BAAB1', // Colors
				colorStop: '#2BAAB1', // just experiment with them
				strokeColor: '#F1F1F1', // to see which ones work best for you
				generateGradient: true
			}, target.data('plugin-options'));

			var gauge = new Gauge(target.get(0)).setOptions(opts);

		gauge.maxValue = opts.maxValue; // set max gauge value
		gauge.animationSpeed = 32; // set animation speed (32 is default value)
		gauge.set(opts.value); // set actual value
		gauge.setTextField(document.getElementById("gaugeAlternativeTextfield"));
	})();

	/*
	Liquid Meter
	*/
	$('#meter').liquidMeter({
		shape: 'circle',
		color: '#0088CC',
		background: '#F9F9F9',
		fontSize: '24px',
		fontWeight: '600',
		stroke: '#F2F2F2',
		textColor: '#333',
		liquidOpacity: 0.9,
		liquidPalette: ['#333'],
		speed: 3000,
		animate: !$.browser.mobile
	});

	/*
	Liquid Meter Dark
	*/
	$('#meterDark').liquidMeter({
		shape: 'circle',
		color: '#0088CC',
		background: '#272A31',
		stroke: '#33363F',
		fontSize: '24px',
		fontWeight: '600',
		textColor: '#FFFFFF',
		liquidOpacity: 0.9,
		liquidPalette: ['#0088CC'],
		speed: 3000,
		animate: !$.browser.mobile
	});

	/*
	Sparkline: Line
	*/
	$("#sparklineLine").sparkline(sparklineLineData, {
		type: 'line',
		width: '80',
		height: '30',
		lineColor: '#0088cc'
	});

	/*
	Sparkline: Bar
	*/
	$("#sparklineBar").sparkline(sparklineBarData, {
		type: 'bar',
		width: '80',
		height: '30',
		barColor: '#0088cc',
		negBarColor: '#B20000'
	});

	/*
	Sparkline: Tristate
	*/
	$("#sparklineTristate").sparkline(sparklineTristateData, {
		type: 'tristate',
		width: '80',
		height: '30',
		posBarColor: '#0088cc',
		negBarColor: '#B20000'
	});

	/*
	Sparkline: Discrete
	*/
	$("#sparklineDiscrete").sparkline(sparklineDiscreteData, {
		type: 'discrete',
		width: '80',
		height: '30',
		lineColor: '#0088cc'
	});

	/*
	Sparkline: Bullet
	*/
	$("#sparklineBullet").sparkline(sparklineBulletData, {
		type: 'bullet',
		width: '80',
		height: '30',
		targetColor: '#ff7f00',
		performanceColor: '#0088cc'
	});

	/*
	Sparkline: Pie
	*/
	$("#sparklinePie").sparkline(sparklinePieData, {
		type: 'pie',
		height: '30',
		barColor: '#0088cc'
	});

	/*
	Chartist: Line Chart - Simple Chart
	*/
	(function() {
		new Chartist.Line('#ChartistSimpleLineChart', {
			labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
			series: [
				[12, 9, 7, 8, 5],
				[2, 1, 3.5, 7, 3],
				[1, 3, 4, 5, 6]
			]
		});
	})();

	/*
	Chartist: Line Chart - Scatter Diagram With Responsive Settings
	*/
	(function() {
		var times = function(n) {
			return Array.apply(null, new Array(n));
		};

		var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
			data.labels.push(index + 1);
			data.series.forEach(function(series) {
				series.push(Math.random() * 100)
			});

			return data;
		}, {
			labels: [],
			series: times(4).map(function() {
				return new Array()
			})
		});

		var options = {
			showLine: false,
			axisX: {
				labelInterpolationFnc: function(value, index) {
					return index % 13 === 0 ? 'W' + value : null;
				}
			}
		};

		var responsiveOptions = [
			['screen and (min-width: 640px)', {
				axisX: {
					labelInterpolationFnc: function(value, index) {
						return index % 4 === 0 ? 'W' + value : null;
					}
				}
			}]
		];

		new Chartist.Line('#ChartistLineScatterDiagramWithResponsiveSettings', data, options, responsiveOptions);
	})();

	/*
	Chartist: Line Chart - With Tooltips
	*/
	(function() {
		new Chartist.Line('#ChartistLineChartWithTooltips', {
			labels: ['1', '2', '3', '4', '5', '6'],
			series: [{
				name: 'Fibonacci sequence',
				data: [1, 2, 3, 5, 8, 13]
			}, {
				name: 'Golden section',
				data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
			}]
		});

		var $chart = $('#ChartistLineChartWithTooltips');

		var $toolTip = $chart
			.append('<div class="tooltip"></div>')
			.find('.tooltip')
			.hide();

		$chart.on('mouseenter', '.ct-point', function() {
			var $point = $(this),
				value = $point.attr('ct:value'),
				seriesName = $point.parent().attr('ct:series-name');
			$toolTip.html(seriesName + '<br>' + value).show();
		});

		$chart.on('mouseleave', '.ct-point', function() {
			$toolTip.hide();
		});

		$chart.on('mousemove', function(event) {
			$toolTip.css({
				left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
				top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
			});
		});
	})();

	/*
	Chartist: Line Chart - With Area
	*/
	(function() {
		new Chartist.Line('#ChartistLineChartWithArea', {
			labels: [1, 2, 3, 4, 5, 6, 7, 8],
			series: [
				[5, 9, 7, 8, 5, 3, 5, 4]
			]
		}, {
			low: 0,
			showArea: true
		});
	})();

	/*
	Chartist: Line Chart - Bi-Polar Chart With Area Only
	*/
	(function() {
		new Chartist.Line('#ChartistBiPolarLineChartWithAreaOnly', {
			labels: [1, 2, 3, 4, 5, 6, 7, 8],
			series: [
				[1, 2, 3, 1, -2, 0, 1, 0],
				[-2, -1, -2, -1, -2.5, -1, -2, -1],
				[0, 0, 0, 1, 2, 2.5, 2, 1],
				[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
			]
		}, {
			high: 3,
			low: -3,
			showArea: true,
			showLine: false,
			showPoint: false,
			fullWidth: true,
			axisX: {
				showLabel: false,
				showGrid: false
			}
		});
	})();

	/*
	Chartist: Line Chart - Using Events to Replace Graphics
	*/
	(function() {
		var chart = new Chartist.Line('#ChartistEventsToReplaceGraphics', {
			labels: [1, 2, 3, 4, 5],
			series: [
				[12, 9, 7, 8, 5]
			]
		});

		// Listening for draw events that get emitted by the Chartist chart
		chart.on('draw', function(data) {
			// If the draw event was triggered from drawing a point on the line chart
			if (data.type === 'point') {
				// We are creating a new path SVG element that draws a triangle around the point coordinates
				var triangle = new Chartist.Svg('path', {
					d: ['M',
						data.x,
						data.y - 15,
						'L',
						data.x - 15,
						data.y + 8,
						'L',
						data.x + 15,
						data.y + 8,
						'z'
					].join(' '),
					style: 'fill-opacity: 1'
				}, 'ct-area');

				// With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
				data.element.replace(triangle);
			}
		});
	})();

	/*
	Chartist: Line Chart - Interpolation / Smoothing
	*/
	(function() {
		var chart = new Chartist.Line('#ChartistLineInterpolationSmoothing', {
			labels: [1, 2, 3, 4, 5],
			series: [
				[1, 5, 10, 0, 1, 2],
				[10, 15, 0, 1, 2, 3]
			]
		}, {
			// Remove this configuration to see that chart rendered with cardinal spline interpolation
			// Sometimes, on large jumps in data values, it's better to use simple smoothing.
			lineSmooth: Chartist.Interpolation.simple({
				divisor: 2
			}),
			fullWidth: true,
			low: 0
		});
	})();

	/*
	Chartist: Bar Chart - Bi-Polar Chart
	*/
	(function() {
		var data = {
			labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
			series: [
				[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
			]
		};

		var options = {
			high: 10,
			low: -10,
			axisX: {
				labelInterpolationFnc: function(value, index) {
					return index % 2 === 0 ? value : null;
				}
			}
		};

		new Chartist.Bar('#ChartistBiPolarBarChart', data, options);
	})();

	/*
	Chartist: Bar Chart - Overlapping On Mobile
	*/
	(function() {
		var data = {
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			series: [
				[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
				[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
			]
		};

		var options = {
			seriesBarDistance: 10
		};

		var responsiveOptions = [
			['screen and (max-width: 640px)', {
				seriesBarDistance: 5,
				axisX: {
					labelInterpolationFnc: function(value) {
						return value[0];
					}
				}
			}]
		];

		new Chartist.Bar('#ChartistOverlappingBarsOnMobile', data, options, responsiveOptions);
	})();

	/*
	Chartist: Bar Chart - Add Peak Circles Using Draw Events
	*/
	(function() {
		// Create a simple bi-polar bar chart
		var chart = new Chartist.Bar('#ChartistAddPeakCirclesUsingDrawEvents', {
			labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
			series: [
				[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
			]
		}, {
			high: 10,
			low: -10,
			axisX: {
				labelInterpolationFnc: function(value, index) {
					return index % 2 === 0 ? value : null;
				}
			}
		});

		// Listen for draw events on the bar chart
		chart.on('draw', function(data) {
			// If this draw event is of type bar we can use the data to create additional content
			if (data.type === 'bar') {
				// We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
				data.group.append(new Chartist.Svg('circle', {
					cx: data.x2,
					cy: data.y2,
					r: Math.abs(data.value) * 2 + 5
				}, 'ct-slice'));
			}
		});
	})();

	/*
	Chartist: Bar Chart - Multi-Line Labels
	*/
	(function() {
		new Chartist.Bar('#ChartistMultiLineLabels', {
			labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
			series: [
				[60000, 40000, 80000, 70000],
				[40000, 30000, 70000, 65000],
				[8000, 3000, 10000, 6000]
			]
		}, {
			seriesBarDistance: 10,
			axisX: {
				offset: 60
			},
			axisY: {
				offset: 80,
				labelInterpolationFnc: function(value) {
					return value + ' CHF'
				},
				scaleMinSpace: 15
			}
		});
	})();

	/*
	Chartist: Bar Chart - Stacked Chart
	*/
	(function() {
		new Chartist.Bar('#ChartistStackedChart', {
			labels: ['Q1', 'Q2', 'Q3', 'Q4'],
			series: [
				[800000, 1200000, 1400000, 1300000],
				[200000, 400000, 500000, 300000],
				[100000, 200000, 400000, 600000]
			]
		}, {
			stackBars: true,
			axisY: {
				labelInterpolationFnc: function(value) {
					return (value / 1000) + 'k';
				}
			}
		}).on('draw', function(data) {
			if (data.type === 'bar') {
				data.element.attr({
					style: 'stroke-width: 30px'
				});
			}
		});
	})();

	/*
	Chartist: Bar Chart - Horizontal Chart
	*/
	(function() {
		new Chartist.Bar('#ChartistHorizontalChart', {
			labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
			series: [
				[5, 4, 3, 7, 5, 10, 3],
				[3, 2, 9, 5, 4, 6, 4]
			]
		}, {
			seriesBarDistance: 10,
			reverseData: true,
			horizontalBars: true,
			axisY: {
				offset: 70
			}
		});
	})();

	/*
	Chartist:
	*/
	(function() {
		new Chartist.Bar('#ChartistExtremeResponsiveConfiguration', {
			labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
			series: [
				[5, 4, 3, 7],
				[3, 2, 9, 5],
				[1, 5, 8, 4],
				[2, 3, 4, 6],
				[4, 1, 2, 1]
			]
		}, {
			// Default mobile configuration
			stackBars: true,
			axisX: {
				labelInterpolationFnc: function(value) {
					return value.split(/\s+/).map(function(word) {
						return word[0];
					}).join('');
				}
			},
			axisY: {
				offset: 20
			}
		}, [
			// Options override for media > 400px
			['screen and (min-width: 400px)', {
				reverseData: true,
				horizontalBars: true,
				axisX: {
					labelInterpolationFnc: Chartist.noop
				},
				axisY: {
					offset: 60
				}
			}],
			// Options override for media > 800px
			['screen and (min-width: 800px)', {
				stackBars: false,
				seriesBarDistance: 10
			}],
			// Options override for media > 1000px
			['screen and (min-width: 1000px)', {
				reverseData: false,
				horizontalBars: false,
				seriesBarDistance: 15
			}]
		]);
	})();

	/*
	Chartist: Pie Chart - Simple Chart
	*/
	(function() {
		var data = {
			series: [5, 3, 4]
		};

		var sum = function(a, b) {
			return a + b
		};

		new Chartist.Pie('#ChartistSimplePieChart', data, {
			labelInterpolationFnc: function(value) {
				return Math.round(value / data.series.reduce(sum) * 100) + '%';
			}
		});
	})();

	/*
	Chartist: Pie Chart - With Custom Labels
	*/
	(function() {
		var data = {
			labels: ['Bananas', 'Apples', 'Grapes'],
			series: [20, 15, 40]
		};
		var options = {
			labelInterpolationFnc: function(value) {
				return value[0]
			}
		};
		var responsiveOptions = [
			['screen and (min-width: 640px)', {
				chartPadding: 30,
				labelOffset: 100,
				labelDirection: 'explode',
				labelInterpolationFnc: function(value) {
					return value;
				}
			}],
			['screen and (min-width: 1024px)', {
				labelOffset: 80,
				chartPadding: 20
			}]
		];
		new Chartist.Pie('#ChartistPieChartWithCustomLabels', data, options, responsiveOptions);
	})();

	/*
	Chartist: Gauge Chart
	*/
	(function() {
		new Chartist.Pie('#ChartistGaugeChart', {
			series: [20, 10, 30, 40]
		}, {
			donut: true,
			donutWidth: 60,
			startAngle: 270,
			total: 200,
			showLabel: false
		});
	})();

	/*
	Chartist: CSS Animation
	*/
	(function() {
		var data = {
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			series: [
				[1, 2, 2.7, 0, 3, 5, 3, 4, 8, 10, 12, 7],
				[0, 1.2, 2, 7, 2.5, 9, 5, 8, 9, 11, 14, 4],
				[10, 9, 8, 6.5, 6.8, 6, 5.4, 5.3, 4.5, 4.4, 3, 2.8]
			]
		};

		var responsiveOptions = [
			[
				'only screen', {
					axisX: {
						labelInterpolationFnc: function(value, index) {
							// Interpolation function causes only every 2nd label to be displayed
							if (index % 2 !== 0) {
								return false;
							} else {
								return value;
							}
						}
					}
				}
			]
		];

		new Chartist.Line('#ChartistCSSAnimation', data, null, responsiveOptions);
	})();

}).apply( this, [ jQuery ]);