wbase 0.0.14 → 0.0.15

data/app/assets/javascripts/wbase/admin/jquery.easy-pie-chart/src/renderer/canvas.js

@@ -0,0 +1,190 @@
+/**
+ * Renderer to render the chart on a canvas object
+ * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
+ * @param {object}     options options object of the plugin
+ */
+var CanvasRenderer = function(el, options) {
+	var cachedBackground;
+	var canvas = document.createElement('canvas');
+
+	el.appendChild(canvas);
+
+	if (typeof(G_vmlCanvasManager) !== 'undefined') {
+		G_vmlCanvasManager.initElement(canvas);
+	}
+
+	var ctx = canvas.getContext('2d');
+
+	canvas.width = canvas.height = options.size;
+
+	// canvas on retina devices
+	var scaleBy = 1;
+	if (window.devicePixelRatio > 1) {
+		scaleBy = window.devicePixelRatio;
+		canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
+		canvas.width = canvas.height = options.size * scaleBy;
+		ctx.scale(scaleBy, scaleBy);
+	}
+
+	// move 0,0 coordinates to the center
+	ctx.translate(options.size / 2, options.size / 2);
+
+	// rotate canvas -90deg
+	ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
+
+	var radius = (options.size - options.lineWidth) / 2;
+	if (options.scaleColor && options.scaleLength) {
+		radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
+	}
+
+	// IE polyfill for Date
+	Date.now = Date.now || function() {
+		return +(new Date());
+	};
+
+	/**
+	 * Draw a circle around the center of the canvas
+	 * @param {strong} color     Valid CSS color string
+	 * @param {number} lineWidth Width of the line in px
+	 * @param {number} percent   Percentage to draw (float between -1 and 1)
+	 */
+	var drawCircle = function(color, lineWidth, percent) {
+		percent = Math.min(Math.max(-1, percent || 0), 1);
+		var isNegative = percent <= 0 ? true : false;
+
+		ctx.beginPath();
+		ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
+
+		ctx.strokeStyle = color;
+		ctx.lineWidth = lineWidth;
+
+		ctx.stroke();
+	};
+
+	/**
+	 * Draw the scale of the chart
+	 */
+	var drawScale = function() {
+		var offset;
+		var length;
+
+		ctx.lineWidth = 1;
+		ctx.fillStyle = options.scaleColor;
+
+		ctx.save();
+		for (var i = 24; i > 0; --i) {
+			if (i % 6 === 0) {
+				length = options.scaleLength;
+				offset = 0;
+			} else {
+				length = options.scaleLength * 0.6;
+				offset = options.scaleLength - length;
+			}
+			ctx.fillRect(-options.size/2 + offset, 0, length, 1);
+			ctx.rotate(Math.PI / 12);
+		}
+		ctx.restore();
+	};
+
+	/**
+	 * Request animation frame wrapper with polyfill
+	 * @return {function} Request animation frame method or timeout fallback
+	 */
+	var reqAnimationFrame = (function() {
+		return  window.requestAnimationFrame ||
+				window.webkitRequestAnimationFrame ||
+				window.mozRequestAnimationFrame ||
+				function(callback) {
+					window.setTimeout(callback, 1000 / 60);
+				};
+	}());
+
+	/**
+	 * Draw the background of the plugin including the scale and the track
+	 */
+	var drawBackground = function() {
+		if(options.scaleColor) drawScale();
+		if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
+	};
+
+  /**
+    * Canvas accessor
+   */
+  this.getCanvas = function() {
+    return canvas;
+  };
+
+  /**
+    * Canvas 2D context 'ctx' accessor
+   */
+  this.getCtx = function() {
+    return ctx;
+  };
+
+	/**
+	 * Clear the complete canvas
+	 */
+	this.clear = function() {
+		ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
+	};
+
+	/**
+	 * Draw the complete chart
+	 * @param {number} percent Percent shown by the chart between -100 and 100
+	 */
+	this.draw = function(percent) {
+		// do we need to render a background
+		if (!!options.scaleColor || !!options.trackColor) {
+			// getImageData and putImageData are supported
+			if (ctx.getImageData && ctx.putImageData) {
+				if (!cachedBackground) {
+					drawBackground();
+					cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
+				} else {
+					ctx.putImageData(cachedBackground, 0, 0);
+				}
+			} else {
+				this.clear();
+				drawBackground();
+			}
+		} else {
+			this.clear();
+		}
+
+		ctx.lineCap = options.lineCap;
+
+		// if barcolor is a function execute it and pass the percent as a value
+		var color;
+		if (typeof(options.barColor) === 'function') {
+			color = options.barColor(percent);
+		} else {
+			color = options.barColor;
+		}
+
+		// draw bar
+		drawCircle(color, options.lineWidth, percent / 100);
+	}.bind(this);
+
+	/**
+	 * Animate from some percent to some other percentage
+	 * @param {number} from Starting percentage
+	 * @param {number} to   Final percentage
+	 */
+	this.animate = function(from, to) {
+		var startTime = Date.now();
+		options.onStart(from, to);
+		var animation = function() {
+			var process = Math.min(Date.now() - startTime, options.animate.duration);
+			var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
+			this.draw(currentValue);
+			options.onStep(from, to, currentValue);
+			if (process >= options.animate.duration) {
+				options.onStop(from, to);
+			} else {
+				reqAnimationFrame(animation);
+			}
+		}.bind(this);
+
+		reqAnimationFrame(animation);
+	}.bind(this);
+};

data/app/assets/javascripts/wbase/admin/jquery.flot.init.js

@@ -0,0 +1,500 @@
+/**
+ * Theme: Ubold Admin Template
+ * Author: Coderthemes
+ * Module/App: Flot-Chart
+ */
+
+! function($) {
+	"use strict";
+
+	var FlotChart = function() {
+		this.$body = $("body")
+		this.$realData = []
+	};
+
+	//creates plot graph
+	FlotChart.prototype.createPlotGraph = function(selector, data1, data2, labels, colors, borderColor, bgColor) {
+		//shows tooltip
+		function showTooltip(x, y, contents) {
+			$('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css({
+				position : 'absolute',
+				top : y + 5,
+				left : x + 5
+			}).appendTo("body").fadeIn(200);
+		}
+
+
+		$.plot($(selector), [{
+			data : data1,
+			label : labels[0],
+			color : colors[0]
+		}, {
+			data : data2,
+			label : labels[1],
+			color : colors[1]
+		}], {
+			series : {
+				lines : {
+					show : true,
+					fill : true,
+					lineWidth : 1,
+					fillColor : {
+						colors : [{
+							opacity : 0.5
+						}, {
+							opacity : 0.5
+						}]
+					}
+				},
+				points : {
+					show : true
+				},
+				shadowSize : 0
+			},
+
+			grid : {
+				hoverable : true,
+				clickable : true,
+				borderColor : borderColor,
+				tickColor : "#f9f9f9",
+				borderWidth : 1,
+				labelMargin : 10,
+				backgroundColor : bgColor
+			},
+			legend : {
+				position : "ne",
+				margin : [0, -24],
+				noColumns : 0,
+				labelBoxBorderColor : null,
+				labelFormatter : function(label, series) {
+					// just add some space to labes
+					return '' + label + '&nbsp;&nbsp;';
+				},
+				width : 30,
+				height : 2
+			},
+			yaxis : {
+				tickColor : '#f5f5f5',
+				font : {
+					color : '#bdbdbd'
+				}
+			},
+			xaxis : {
+				tickColor : '#f5f5f5',
+				font : {
+					color : '#bdbdbd'
+				}
+			},
+			tooltip : true,
+			tooltipOpts : {
+				content : '%s: Value of %x is %y',
+				shifts : {
+					x : -60,
+					y : 25
+				},
+				defaultTheme : false
+			}
+		});
+	},
+	//end plot graph
+
+	//creates Pie Chart
+	FlotChart.prototype.createPieGraph = function(selector, labels, datas, colors) {
+		var data = [{
+			label : labels[0],
+			data : datas[0]
+		}, {
+			label : labels[1],
+			data : datas[1]
+		}, {
+			label : labels[2],
+			data : datas[2]
+		}];
+		var options = {
+			series : {
+				pie : {
+					show : true
+				}
+			},
+			legend : {
+				show : false
+			},
+			grid : {
+				hoverable : true,
+				clickable : true
+			},
+			colors : colors,
+			tooltip : true,
+			tooltipOpts : {
+				content : "%s, %p.0%"
+			}
+		};
+
+		$.plot($(selector), data, options);
+	},
+
+	//returns some random data
+	FlotChart.prototype.randomData = function() {
+		var totalPoints = 300;
+		if (this.$realData.length > 0)
+			this.$realData = this.$realData.slice(1);
+
+		// Do a random walk
+		while (this.$realData.length < totalPoints) {
+
+			var prev = this.$realData.length > 0 ? this.$realData[this.$realData.length - 1] : 50,
+			    y = prev + Math.random() * 10 - 5;
+
+			if (y < 0) {
+				y = 0;
+			} else if (y > 100) {
+				y = 100;
+			}
+
+			this.$realData.push(y);
+		}
+
+		// Zip the generated y values with the x values
+		var res = [];
+		for (var i = 0; i < this.$realData.length; ++i) {
+			res.push([i, this.$realData[i]])
+		}
+
+		return res;
+	}, FlotChart.prototype.createRealTimeGraph = function(selector, data, colors) {
+		var plot = $.plot(selector, [data], {
+			colors : colors,
+			series : {
+				grow : {
+					active : false
+				}, //disable auto grow
+				shadowSize : 0, // drawing is faster without shadows
+				lines : {
+					show : true,
+					fill : true,
+					lineWidth : 2,
+					steps : false
+				}
+			},
+			grid : {
+				show : true,
+				aboveData : false,
+				color : '#dcdcdc',
+				labelMargin : 15,
+				axisMargin : 0,
+				borderWidth : 0,
+				borderColor : null,
+				minBorderMargin : 5,
+				clickable : true,
+				hoverable : true,
+				autoHighlight : false,
+				mouseActiveRadius : 20
+			},
+			tooltip : true, //activate tooltip
+			tooltipOpts : {
+				content : "Value is : %y.0" + "%",
+				shifts : {
+					x : -30,
+					y : -50
+				}
+			},
+			yaxis : {
+				min : 0,
+				max : 100,
+				color : 'rgba(0,0,0,0.1)'
+			},
+			xaxis : {
+				show : false
+			}
+		});
+
+		return plot;
+	},
+	//creates Pie Chart
+	FlotChart.prototype.createDonutGraph = function(selector, labels, datas, colors) {
+		var data = [{
+			label : labels[0],
+			data : datas[0]
+		}, {
+			label : labels[1],
+			data : datas[1]
+		}, {
+			label : labels[2],
+			data : datas[2]
+		}, {
+			label : labels[3],
+			data : datas[3]
+		}];
+		var options = {
+			series : {
+				pie : {
+					show : true,
+					innerRadius : 0.5
+				}
+			},
+			legend : {
+				show : true,
+				labelFormatter : function(label, series) {
+					return '<div style="font-size:14px;">&nbsp;' + label + '</div>'
+				},
+				labelBoxBorderColor : null,
+				margin : 50,
+				width : 20,
+				padding : 1
+			},
+			grid : {
+				hoverable : true,
+				clickable : true
+			},
+			colors : colors,
+			tooltip : true,
+			tooltipOpts : {
+				content : "%s, %p.0%"
+			}
+		};
+
+		$.plot($(selector), data, options);
+	},
+	//creates Combine Chart
+	FlotChart.prototype.createCombineGraph = function(selector, ticks, labels, datas) {
+
+		var data = [{
+			label : labels[0],
+			data : datas[0],
+			lines : {
+				show : true,
+				fill : true
+			},
+			points : {
+				show : true
+			}
+		}, {
+			label : labels[1],
+			data : datas[1],
+			lines : {
+				show : true
+			},
+			points : {
+				show : true
+			}
+		}, {
+			label : labels[2],
+			data : datas[2],
+			bars : {
+				show : true
+			}
+		}];
+		var options = {
+			series : {
+				shadowSize : 0
+			},
+			grid : {
+				hoverable : true,
+				clickable : true,
+				tickColor : "#f9f9f9",
+				borderWidth : 1,
+				borderColor : "#eeeeee"
+			},
+			colors : ["#6e8cd7", "$brand-info", "#5fbeaa"],
+			tooltip : true,
+			tooltipOpts : {
+				defaultTheme : false
+			},
+			legend : {
+				position : "ne",
+				margin : [0, -24],
+				noColumns : 0,
+				labelBoxBorderColor : null,
+				labelFormatter : function(label, series) {
+					// just add some space to labes
+					return '' + label + '&nbsp;&nbsp;';
+				},
+				width : 30,
+				height : 2
+			},
+			yaxis : {
+				tickColor : '#f5f5f5',
+				font : {
+					color : '#bdbdbd'
+				}
+			},
+			xaxis : {
+				ticks: ticks,
+				tickColor : '#f5f5f5',
+				font : {
+					color : '#bdbdbd'
+				}
+			}
+		};
+
+		$.plot($(selector), data, options);
+	},
+
+	//initializing various charts and components
+	FlotChart.prototype.init = function() {
+		//plot graph data
+		var uploads = [[0, 9], [1, 8], [2, 5], [3, 8], [4, 5], [5, 14], [6, 10]];
+		var downloads = [[0, 5], [1, 12], [2, 4], [3, 3], [4, 12], [5, 11], [6, 14]];
+		var plabels = ["Visits", "Pages/Visit"];
+		var pcolors = ['#5fbeaa', '$brand-info'];
+		var borderColor = '#f5f5f5';
+		var bgColor = '#fff';
+		this.createPlotGraph("#website-stats", uploads, downloads, plabels, pcolors, borderColor, bgColor);
+
+		//Pie graph data
+		var pielabels = ["Series 1", "Series 2", "Series 3"];
+		var datas = [20, 30, 15];
+		var colors = ["#5fbeaa", "#6c85bd", "$brand-info"];
+		this.createPieGraph("#pie-chart #pie-chart-container", pielabels, datas, colors);
+
+		//real time data representation
+		var plot = this.createRealTimeGraph('#flotRealTime', this.randomData(), ['#5fbeaa']);
+		plot.draw();
+		var $this = this;
+		function updatePlot() {
+			plot.setData([$this.randomData()]);
+			// Since the axes don't change, we don't need to call plot.setupGrid()
+			plot.draw();
+			setTimeout(updatePlot, $('html').hasClass('mobile-device') ? 1000 : 1000);
+		}
+
+		updatePlot();
+
+		//Donut pie graph data
+		var donutlabels = ["Series 1", "Series 2", "Series 3", "Series 4"];
+		var donutdatas = [35, 20, 10, 20];
+		var donutcolors = ["#5fbeaa", "#ebeff2", "$brand-info", "#6e8cd7"];
+		this.createDonutGraph("#donut-chart #donut-chart-container", donutlabels, donutdatas, donutcolors);
+
+		//Combine graph data
+		var data24Hours = [[0, 201], [1, 520], [2, 337], [3, 261], [4, 157], [5, 95], [6, 200], [7, 250], [8, 320], [9, 500], [10, 152], [11, 214], [12, 364], [13, 449], [14, 558], [15, 282], [16, 379], [17, 429], [18, 518], [19, 470], [20, 330], [21, 245], [22, 358], [23, 74]];
+		var data48Hours = [[0, 311], [1, 630], [2, 447], [3, 371], [4, 267], [5, 205], [6, 310], [7, 360], [8, 430], [9, 610], [10, 262], [11, 324], [12, 474], [13, 559], [14, 668], [15, 392], [16, 489], [17, 539], [18, 628], [19, 580], [20, 440], [21, 355], [22, 468], [23, 184]];
+		var dataDifference = [[23, 727], [22, 128], [21, 110], [20, 92], [19, 172], [18, 63], [17, 150], [16, 592], [15, 12], [14, 246], [13, 52], [12, 149], [11, 123], [10, 2], [9, 325], [8, 10], [7, 15], [6, 89], [5, 65], [4, 77], [3, 600], [2, 200], [1, 385], [0, 200]];
+		var ticks = [[0, "22h"], [1, ""], [2, "00h"], [3, ""], [4, "02h"], [5, ""], [6, "04h"], [7, ""], [8, "06h"], [9, ""], [10, "08h"], [11, ""], [12, "10h"], [13, ""], [14, "12h"], [15, ""], [16, "14h"], [17, ""], [18, "16h"], [19, ""], [20, "18h"], [21, ""], [22, "20h"], [23, ""]];
+		var combinelabels = ["Last 24 Hours", "Last 48 Hours", "Difference"];
+		var combinedatas = [data24Hours, data48Hours, dataDifference];
+
+		this.createCombineGraph("#combine-chart #combine-chart-container", ticks, combinelabels, combinedatas);
+	},
+
+	//init flotchart
+	$.FlotChart = new FlotChart, $.FlotChart.Constructor =
+	FlotChart
+
+}(window.jQuery),
+
+//initializing flotchart
+function($) {
+	"use strict";
+	$.FlotChart.init()
+}(window.jQuery);
+
+$(document).ready(function() {
+
+	
+
+	//------------- Ordered bars chart -------------//
+	$(function() {
+		//some data
+		var d1 = [];
+		for (var i = 0; i <= 10; i += 1)
+			d1.push([i, parseInt(Math.random() * 30)]);
+
+		var d2 = [];
+		for (var i = 0; i <= 10; i += 1)
+			d2.push([i, parseInt(Math.random() * 30)]);
+
+		var d3 = [];
+		for (var i = 0; i <= 10; i += 1)
+			d3.push([i, parseInt(Math.random() * 30)]);
+
+		var ds = new Array();
+
+		ds.push({
+			label : "Data One",
+			data : d1,
+			bars : {
+				order : 1
+			}
+		});
+		ds.push({
+			label : "Data Two",
+			data : d2,
+			bars : {
+				order : 2
+			}
+		});
+		ds.push({
+			label : "Data Three",
+			data : d3,
+			bars : {
+				order : 3
+			}
+		});
+
+		var stack = 0,
+		    bars = false,
+		    lines = false,
+		    steps = false;
+
+		var options = {
+			bars : {
+				show : true,
+				barWidth : 0.2,
+				fill : 1
+			},
+			grid : {
+				show : true,
+				aboveData : false,
+				labelMargin : 5,
+				axisMargin : 0,
+				borderWidth : 1,
+				minBorderMargin : 5,
+				clickable : true,
+				hoverable : true,
+				autoHighlight : false,
+				mouseActiveRadius : 20,
+				borderColor : '#f5f5f5'
+			},
+			series : {
+				stack : stack
+			},
+			legend : {
+				position : "ne",
+				margin : [0, -24],
+				noColumns : 0,
+				labelBoxBorderColor : null,
+				labelFormatter : function(label, series) {
+					// just add some space to labes
+					return '' + label + '&nbsp;&nbsp;';
+				},
+				width : 30,
+				height : 2
+			},
+			yaxis : {
+				tickColor : '#f5f5f5',
+				font : {
+					color : '#bdbdbd'
+				}
+			},
+			xaxis : {
+				tickColor : '#f5f5f5',
+				font : {
+					color : '#bdbdbd'
+				}
+			},
+			colors : ["#6e8cd7", "$brand-info", "#5fbeaa"],
+			tooltip : true, //activate tooltip
+			tooltipOpts : {
+				content : "%s : %y.0",
+				shifts : {
+					x : -30,
+					y : -50
+				}
+			}
+		};
+
+		$.plot($("#ordered-bars-chart"), ds, options);
+	});
+});
+