pfSense

/**

 * Class: ProtoChart 

 * Version: v0.5 beta

 * 

 * ProtoChart is a charting lib on top of Prototype.

 * This library is heavily motivated by excellent work done by:

 * * Flot <http://code.google.com/p/flot/>

 * * Flotr <http://solutoire.com/flotr/>

 * 

 * Complete examples can be found at: <http://www.deensoft.com/lab/protochart>

 */

/**

 * Events:

 * ProtoChart:mousemove - Fired when mouse is moved over the chart

 * ProtoChart:plotclick - Fired when graph is clicked

 * ProtoChart:dataclick - Fired when graph is clicked AND the click is on a data point

 * ProtoChart:selected	- Fired when certain region on the graph is selected

 * ProtoChart:hit		- Fired when mouse is moved near or over certain data point on the graph

 */

if(!Proto) var Proto = {};

Proto.Chart = Class.create({

	/**

	 * Function: 

	 * {Object} elem

	 * {Object} data

	 * {Object} options

	 */

	initialize: function(elem, data, options)

	{

		options = options || {};

		this.graphData = [];

		/**

		 * Property: options

		 * 

		 * Description: Various options can be set. More details in description.

		 * 

		 * colors:

		 * {Array}		- pass in a array which contains strings of colors you want to use. Default has 6 color set.

		 * 

		 * legend:

		 * {BOOL} 		- show				- if you want to show the legend. Default is false

		 * {integer} 	- noColumns			- Number of columns for the legend. Default is 1

		 * {function} 	- labelFormatter	- A function that returns a string. The function is called with a string and is expected to return a string. Default = null

		 * {string}		- labelBoxBorderColor - border color for the little label boxes. Default #CCC

		 * {HTMLElem}	- container			- an HTML id or HTML element where the legend should be rendered. If left null means to put the legend on top of the Chart

		 * {string}		- position			- position for the legend on the Chart. Default value 'ne'

		 * {integer}	- margin			- default valud of 5

		 * {string} 	- backgroundColor	- default to null (which means auto-detect)

		 * {float} 		- backgroundOpacity - leave it 0 to avoid background

		 * 

		 * xaxis (yaxis) options:

		 * {string} 	- mode 		- default is null but you can pass a string "time" to indicate time series

		 * {integer}	- min

		 * {integer}	- max

		 * {float}		- autoscaleMargin - in % to add if auto-setting min/max

		 * {mixed}		- ticks - either [1, 3] or [[1, "a"], 3] or a function which gets axis info and returns ticks

		 * {function} 	- tickFormatter - A function that returns a string as a tick label. Default is null

		 * {float}		- tickDecimals

		 * {integer}	- tickSize

		 * {integer} 	- minTickSize

		 * {array}		- monthNames

		 * {string}		- timeformat

		 * 

		 * Points / Lines / Bars options:

		 * {bool}		- show, default is false

		 * {integer}	- radius: default is 3

		 * {integer}	- lineWidth : default is 2

		 * {bool}		- fill : default is true

		 * {string}		- fillColor: default is #ffffff

		 * 

		 * Grid options:

		 * {string}		- color

		 * {string}		- backgroundColor 	- defualt is *null*

		 * {string}		- tickColor			- default is *#dddddd*

		 * {integer}	- labelMargin		- should be in pixels default is 3

		 * {integer}	- borderWidth		- default *1*

		 * {bool}		- clickable 		- default *null* - pass in TRUE if you wish to monitor click events

		 * {mixed}		- coloredAreas 		- default *null* - pass in mixed object eg. {x1, x2}

		 * {string}		- coloredAreasColor	- default *#f4f4f4*

		 * {bool}		- drawXAxis			- default *true*

		 * {bool}		- drawYAxis			- default *true*

		 * 

		 * selection options:

		 * {string}		- mode : either "x", "y" or "xy"

		 * {string}		- color : string

		 */

		this.options = this.merge(options,{

			colors: ["#edc240", "#00A8F0", "#C0D800", "#cb4b4b", "#4da74d", "#9440ed"],

            legend: {

                show: false,

                noColumns: 1,

                labelFormatter: null,

                labelBoxBorderColor: "#ccc",

                container: null, 

                position: "ne",

                margin: 5,

                backgroundColor: null,

                backgroundOpacity: 0.85

            },

            xaxis: {

				mode: null, 

                min: null,

                max: null,

                autoscaleMargin: null,

                ticks: null,

                tickFormatter: null,

                tickDecimals: null,

                tickSize: null,

                minTickSize: null,

                monthNames: null,

                timeformat: null

            },

            yaxis: {

				mode: null,

				min: null,

				max: null,

				ticks: null,

				tickFormatter: null,

				tickDecimals: null,

				tickSize: null,

				minTickSize: null,

				monthNames: null,

				timeformat: null,				

                autoscaleMargin: 0.02

            },

            points: {

                show: false,

                radius: 3,

                lineWidth: 2,

                fill: true,

                fillColor: "#ffffff"

            },

            lines: {

                show: false,

                lineWidth: 2,

                fill: false,

                fillColor: null

            },

            bars: {

                show: false,

                lineWidth: 2,

                barWidth: 1,

                fill: true,

                fillColor: null,

				showShadow: false,

				fillOpacity: 0.4,

				autoScale: true

            },

			pies: {

				show: false,

				radius: 50,

				borderWidth: 1,

				fill: true,

				fillColor: null,

				fillOpacity: 0.90,

				labelWidth: 30,

				fontSize: 11,

				autoScale: true

			},

            grid: {

                color: "#545454",

                backgroundColor: null,

                tickColor: "#dddddd",

                labelMargin: 3,

                borderWidth: 1,

                clickable: null,

                coloredAreas: null,

                coloredAreasColor: "#f4f4f4",

				drawXAxis: true,

				drawYAxis: true

            },

			mouse: {

				track: false,

				position: 'se',

				fixedPosition: true,

				clsName: 'mouseValHolder',

				trackFormatter: this.defaultTrackFormatter,

				margin: 3,

				color: '#ff3f19',

				trackDecimals: 1,

				sensibility: 2,

				radius: 5,

				lineColor: '#cb4b4b'

			},

            selection: {

                mode: null,

                color: "#97CBFF"

            },

			allowDataClick: true,

			makeRandomColor: false,

            shadowSize: 4			

		});

		/*

		 * Local variables.

		 */

		this.canvas = null; 

		this.overlay = null;

		this.eventHolder = null;

		this.context = null;

		this.overlayContext = null;

		this.domObj = $(elem);

		this.xaxis = {};

		this.yaxis = {};

		this.chartOffset = {left: 0, right: 0, top: 0, bottom: 0};

		this.yLabelMaxWidth = 0;

		this.yLabelMaxHeight = 0;

		this.xLabelBoxWidth = 0;

		this.canvasWidth = 0;

		this.canvasHeight = 0;

		this.chartWidth = 0;

		this.chartHeight = 0;

		this.hozScale = 0;

		this.vertScale = 0;

		this.workarounds = {};

		this.domObj = $(elem);

		this.barDataRange = [];

        this.lastMousePos = { pageX: null, pageY: null };

        this.selection = { first: { x: -1, y: -1}, second: { x: -1, y: -1} };

        this.prevSelection = null;

        this.selectionInterval = null;

        this.ignoreClick = false;	

		this.prevHit = null;

		if(this.options.makeRandomColor)

			this.options.color = this.makeRandomColor(this.options.colors);

		this.setData(data);

		this.constructCanvas();

		this.setupGrid();

		this.draw();

	},

	/**

	 * Private function internally used.

	 */

	merge: function(src, dest)

	{

		var result = dest || {};

		for(var i in src){		  

			result[i] = (typeof(src[i]) == 'object' && !(src[i].constructor == Array || src[i].constructor == RegExp)) ? this.merge(src[i], dest[i]) : result[i] = src[i];		

		}

		return result;	

	},

	/**

	 * Function: setData

	 * {Object} data

	 * 

	 * Description:

	 * Sets datasoruces properly then sets the Bar Width accordingly, then copies the default data options and then processes the graph data

	 * 

	 * Returns: none

	 * 

	 */	

	setData: function(data) 

	{

        this.graphData = this.parseData(data);		

		this.setBarWidth();

        this.copyGraphDataOptions();

        this.processGraphData();

    },

	/**

	 * Function: parseData

	 * {Object} data

	 * 

	 * Return: 

	 * {Object} result

	 * 

	 * Description:

	 * Takes the provided data object and converts it into generic data that we can understand. User can pass in data in 3 different ways:

	 * - [d1, d2]

	 * - [{data: d1, label: "data1"}, {data: d2, label: "data2"}]

	 * - [d1, {data: d1, label: "data1"}]

	 * 

	 * This function parses these senarios and makes it readable

	 */

	parseData: function(data)

	{

		var res = [];

		data.each(function(d){

			var s;

			if(d.data) {

				s = {};

				for(var v in d) {

					s[v] = d[v];

				}

			}

			else {

				s = {data: d};

			}

			res.push(s);

		}.bind(this));

		return res;

	},

	/**

	 * function: makeRandomColor

	 * {Object} colorSet

	 * 

	 * Return: 

	 * {Array} result - array containing random colors

	 */

	makeRandomColor: function(colorSet)

	{

		var randNum = Math.floor(Math.random() * colorSet.length);

		var randArr = [];

		var newArr = [];

		randArr.push(randNum);

		while(randArr.length < colorSet.length)

		{

			var tempNum = Math.floor(Math.random() * colorSet.length);

			while(checkExisted(tempNum, randArr))

				tempNum = Math.floor(Math.random() * colorSet.length);

			randArr.push(tempNum);

		}

		randArr.each(function(ra){

			newArr.push(colorSet[ra]);

		}.bind(this));

		return newArr;		

	},

	/**

	 * function: checkExisted

	 * {Object} needle

	 * {Object} haystack

	 * 

	 * return: 

	 * {bool} existed - true if it finds needle in the haystack

	 */

	checkExisted: function(needle, haystack)

	{

		var existed = false;

		haystack.each(function(aNeedle){

			if(aNeedle == needle) {

				existed = true;

				throw $break;

			}

		}.bind(this));

		return existed;

	},

	/**

	 * function: setBarWidth

	 * 

	 * Description: sets the bar width for Bar Graph, you should enable *autoScale* property for bar graph

	 */

	setBarWidth: function()

	{

		if(this.options.bars.show && this.options.bars.autoScale)

		{

			this.options.bars.barWidth = 1 / this.graphData.length / 1.2;	

		}

	},

	/**

	 * Function: copyGraphDataOptions

	 * 

	 * Description: Private function that goes through each graph data (series) and assigned the graph

	 * properties to it.

	 */

	copyGraphDataOptions: function()

	{

		var i, neededColors = this.graphData.length, usedColors = [], assignedColors = [];

		this.graphData.each(function(gd){

			var sc = gd.color;

			if(sc) {

				--neededColors;

				if(Object.isNumber(sc)) {

					assignedColors.push(sc);

				}

				else {

					usedColors.push(this.parseColor(sc));

				}

			}

		}.bind(this));

		assignedColors.each(function(ac){

			neededColors = Math.max(neededColors, ac + 1);

		});

        var colors = [];

        var variation = 0;

        i = 0;

        while (colors.length < neededColors) {

            var c;

            if (this.options.colors.length == i) {

				c = new Proto.Color(100, 100, 100);

			}

			else {

				c = this.parseColor(this.options.colors[i]);

			}

            var sign = variation % 2 == 1 ? -1 : 1;

            var factor = 1 + sign * Math.ceil(variation / 2) * 0.2;

            c.scale(factor, factor, factor);

            colors.push(c);

            ++i;

            if (i >= this.options.colors.length) {

                i = 0;

                ++variation;

            }

        }

        var colorIndex = 0, s;

		this.graphData.each(function(gd){

			if(gd.color == null)

			{

				gd.color = colors[colorIndex].toString();

				++colorIndex;

			}

			else if(Object.isNumber(gd.color)) {

				gd.color = colors[gd.color].toString();

			}

            gd.lines = Object.extend(Object.clone(this.options.lines), gd.lines); 

            gd.points = Object.extend(Object.clone(this.options.points), gd.points); 

            gd.bars = Object.extend(Object.clone(this.options.bars), gd.bars); 

            gd.mouse = Object.extend(Object.clone(this.options.mouse), gd.mouse);

            if (gd.shadowSize == null) {

                gd.shadowSize = this.options.shadowSize;

			}

		}.bind(this));

	},

	/**

	 * Function: processGraphData

	 * 

	 * Description: processes graph data, setup xaxis and yaxis min and max points. 

	 */

	processGraphData: function() {

		this.xaxis.datamin = this.yaxis.datamin = Number.MAX_VALUE;

		this.xaxis.datamax = this.yaxis.datamax = Number.MIN_VALUE;

		this.graphData.each(function(gd) {

			var data = gd.data;

			data.each(function(d){

				if(d == null) {

					return;

				}

				var x = d[0], y = d[1];

				if(!x || !y || isNaN(x = +x) || isNaN(y = +y)) {

					d = null;

					return;

				}

				if (x < this.xaxis.datamin)

					this.xaxis.datamin = x;

				if (x > this.xaxis.datamax)

					this.xaxis.datamax = x;

				if (y < this.yaxis.datamin)

					this.yaxis.datamin = y;

				if (y > this.yaxis.datamax)

					this.yaxis.datamax = y;

			}.bind(this));

		}.bind(this));

		if (this.xaxis.datamin == Number.MAX_VALUE)

			this.xaxis.datamin = 0;

		if (this.yaxis.datamin == Number.MAX_VALUE)

			this.yaxis.datamin = 0;

		if (this.xaxis.datamax == Number.MIN_VALUE)

			this.xaxis.datamax = 1;

		if (this.yaxis.datamax == Number.MIN_VALUE)

			this.yaxis.datamax = 1;

	},

	/**

	 * Function: constructCanvas

	 * 

	 * Description: constructs the main canvas for drawing. It replicates the HTML elem (usually DIV) passed

	 * in via constructor. If there is no height/width assigned to the HTML elem then we take a default size

	 * of 400px (width) and 300px (height)

	 */

	constructCanvas: function() {

		this.canvasWidth = this.domObj.getWidth();

		this.canvasHeight = this.domObj.getHeight();

		this.domObj.update(""); // clear target

		this.domObj.setStyle({

			"position": "relative"

		}); 

		if (this.canvasWidth <= 0) {

			this.canvasWdith = 400;

		}

		if(this.canvasHeight <= 0) {

			this.canvasHeight = 300;

		}

		this.canvas = (Prototype.Browser.IE) ? document.createElement("canvas") : new Element("CANVAS", {'width': this.canvasWidth, 'height': this.canvasHeight});

		Element.extend(this.canvas);

		this.canvas.style.width = this.canvasWidth + "px";

		this.canvas.style.height = this.canvasHeight + "px";

		this.domObj.appendChild(this.canvas);

		if (Prototype.Browser.IE) // excanvas hack

		{

			this.canvas = $(window.G_vmlCanvasManager.initElement(this.canvas));

		}

		this.canvas = $(this.canvas);

		this.context = this.canvas.getContext("2d");

		this.overlay = (Prototype.Browser.IE) ? document.createElement("canvas") :  new Element("CANVAS", {'width': this.canvasWidth, 'height': this.canvasHeight});

		Element.extend(this.overlay);

		this.overlay.style.width = this.canvasWidth + "px";

		this.overlay.style.height = this.canvasHeight + "px";

		this.overlay.style.position = "absolute";

		this.overlay.style.left = "0px";

		this.overlay.style.right = "0px";

		this.overlay.setStyle({

			'position': 'absolute',

			'left': '0px',

			'right': '0px'

		});

		this.domObj.appendChild(this.overlay);

		if (Prototype.Browser.IE) {

			this.overlay = $(window.G_vmlCanvasManager.initElement(this.overlay));

		}

		this.overlay = $(this.overlay);

		this.overlayContext = this.overlay.getContext("2d");

		if(this.options.selection.mode)

		{

			this.overlay.observe('mousedown', this.onMouseDown.bind(this));

			this.overlay.observe('mousemove', this.onMouseMove.bind(this));

		}

		if(this.options.grid.clickable) {

			this.overlay.observe('click', this.onClick.bind(this));

		}

		if(this.options.mouse.track)

		{

			this.overlay.observe('mousemove', this.onMouseMove.bind(this));

		}

	},

	/**

	 * function: setupGrid

	 * 

	 * Description: a container function that does a few interesting things.

	 * 

	 * 1. calls <extendXRangeIfNeededByBar> function which makes sure that our axis are expanded if needed

	 * 

	 * 2. calls <setRange> function providing xaxis options which fixes the ranges according to data points

	 * 

	 * 3. calls <prepareTickGeneration> function for xaxis which generates ticks according to options provided by user

	 * 

	 * 4. calls <setTicks> function for xaxis that sets the ticks

	 * 

	 * similar sequence is called for y-axis. 

	 * 

	 * At the end if this is a pie chart than we insert Labels (around the pie chart) via <insertLabels> and we also call <insertLegend>

	 */

	setupGrid: function()

	{

		if(this.options.bars.show)

		{

			this.xaxis.max += 0.5;

			this.xaxis.min -= 0.5;

		}

		//x-axis

		this.extendXRangeIfNeededByBar();

		this.setRange(this.xaxis, this.options.xaxis);

		this.prepareTickGeneration(this.xaxis, this.options.xaxis);

		this.setTicks(this.xaxis, this.options.xaxis);

		//y-axis

		this.setRange(this.yaxis, this.options.yaxis);

		this.prepareTickGeneration(this.yaxis, this.options.yaxis);

		this.setTicks(this.yaxis, this.options.yaxis);

		this.setSpacing();

		if(!this.options.pies.show)

		{

			this.insertLabels();

		}

		this.insertLegend();

	},

	/**

	 * function: setRange

	 * 

	 * parameters:

	 * {Object} axis

	 * {Object} axisOptions

	 */

	setRange: function(axis, axisOptions) {

		var min = axisOptions.min != null ? axisOptions.min : axis.datamin;

		var max = axisOptions.max != null ? axisOptions.max : axis.datamax;

		if (max - min == 0.0) {

			// degenerate case

			var widen;

			if (max == 0.0)

				widen = 1.0;

			else

				widen = 0.01;

			min -= widen;

			max += widen;

		}

		else {

			// consider autoscaling

			var margin = axisOptions.autoscaleMargin;

			if (margin != null) {

				if (axisOptions.min == null) {

					min -= (max - min) * margin;

					// make sure we don't go below zero if all values

					// are positive

					if (min < 0 && axis.datamin >= 0)

						min = 0;

				}

				if (axisOptions.max == null) {

					max += (max - min) * margin;

					if (max > 0 && axis.datamax <= 0)

						max = 0;

				}

			}

		}

		axis.min = min;

		axis.max = max;

	},

	/**

	 * function: prepareTickGeneration

	 * 

	 * Parameters:

	 * {Object} axis

	 * {Object} axisOptions

	 */

	prepareTickGeneration: function(axis, axisOptions) {

		// estimate number of ticks

		var noTicks;

		if (Object.isNumber(axisOptions.ticks) && axisOptions.ticks > 0)

			noTicks = axisOptions.ticks;

		else if (axis == this.xaxis)

			noTicks = this.canvasWidth / 100;

		else

			noTicks = this.canvasHeight / 60;

		var delta = (axis.max - axis.min) / noTicks;

		var size, generator, unit, formatter, i, magn, norm;

		if (axisOptions.mode == "time") {

			function formatDate(d, fmt, monthNames) {

				var leftPad = function(n) {

					n = "" + n;

					return n.length == 1 ? "0" + n : n;

				};

				var r = [];

				var escape = false;

				if (monthNames == null)

					monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];