diff --git a/justgage.js b/justgage.js index 8f1a32e..b35c200 100644 --- a/justgage.js +++ b/justgage.js @@ -5,241 +5,240 @@ * @author Bojan Djuricic (@Toorshia) **/ - JustGage = function(config) { +JustGage = function(config) { var obj = this; // Helps in case developer wants to debug it. unobtrusive - if (config === null || config === undefined) { - console.log('* justgage: Make sure to pass options to the constructor!'); - return false; + if (config === null || config === undefined) { + console.log('* justgage: Make sure to pass options to the constructor!'); + return false; } var node; if (config.id !== null && config.id !== undefined) { - node= document.getElementById(config.id); - if (!node) { - console.log('* justgage: No element with id : %s found', config.id); - return false; + node = document.getElementById(config.id); + if (!node) { + console.log('* justgage: No element with id : %s found', config.id); + return false; } } else if (config.parentNode !== null && config.parentNode !== undefined) { node = config.parentNode; } else { - console.log('* justgage: Make sure to pass the existing element id or parentNode to the constructor.'); - return false; + console.log('* justgage: Make sure to pass the existing element id or parentNode to the constructor.'); + return false; } var dataset = node.dataset ? node.dataset : {}; // check for defaults var defaults = (config.defaults !== null && config.defaults !== undefined) ? config.defaults : false; - if(defaults !== false) { + if (defaults !== false) { config = extend({}, config, defaults); delete config.defaults; } // configurable parameters - obj.config = - { + obj.config = { // id : string // this is container element id - id : config.id, + id: config.id, // value : float // value gauge is showing - value : kvLookup('value', config, dataset, 0, 'float'), + value: kvLookup('value', config, dataset, 0, 'float'), // defaults : bool // defaults parameter to use - defaults : kvLookup('defaults', config, dataset, 0, false), + defaults: kvLookup('defaults', config, dataset, 0, false), // parentNode : node object // this is container element - parentNode : kvLookup('parentNode', config, dataset, null), + parentNode: kvLookup('parentNode', config, dataset, null), // width : int // gauge width - width : kvLookup('width', config, dataset, null), + width: kvLookup('width', config, dataset, null), // height : int // gauge height - height : kvLookup('height', config, dataset, null), + height: kvLookup('height', config, dataset, null), // title : string // gauge title - title : kvLookup('title', config, dataset, ""), + title: kvLookup('title', config, dataset, ""), // titleFontColor : string // color of gauge title - titleFontColor : kvLookup('titleFontColor', config, dataset, "#999999"), + titleFontColor: kvLookup('titleFontColor', config, dataset, "#999999"), // valueFontColor : string // color of label showing current value - valueFontColor : kvLookup('valueFontColor', config, dataset, "#010101"), + valueFontColor: kvLookup('valueFontColor', config, dataset, "#010101"), // symbol : string // special symbol to show next to value - symbol : kvLookup('symbol', config, dataset, ''), + symbol: kvLookup('symbol', config, dataset, ''), // min : float // min value - min : kvLookup('min', config, dataset, 0, 'float'), + min: kvLookup('min', config, dataset, 0, 'float'), // max : float // max value - max : kvLookup('max', config, dataset, 100, 'float'), + max: kvLookup('max', config, dataset, 100, 'float'), // humanFriendlyDecimal : int // number of decimal places for our human friendly number to contain - humanFriendlyDecimal : kvLookup('humanFriendlyDecimal', config, dataset, 0), + humanFriendlyDecimal: kvLookup('humanFriendlyDecimal', config, dataset, 0), // textRenderer: func // function applied before rendering text - textRenderer : kvLookup('textRenderer', config, dataset, null), + textRenderer: kvLookup('textRenderer', config, dataset, null), // gaugeWidthScale : float // width of the gauge element - gaugeWidthScale : kvLookup('gaugeWidthScale', config, dataset, 1.0), + gaugeWidthScale: kvLookup('gaugeWidthScale', config, dataset, 1.0), // gaugeColor : string // background color of gauge element - gaugeColor : kvLookup('gaugeColor', config, dataset, "#edebeb"), + gaugeColor: kvLookup('gaugeColor', config, dataset, "#edebeb"), // label : string // text to show below value - label : kvLookup('label', config, dataset, ''), + label: kvLookup('label', config, dataset, ''), // labelFontColor : string // color of label showing label under value - labelFontColor : kvLookup('labelFontColor', config, dataset, "#b3b3b3"), + labelFontColor: kvLookup('labelFontColor', config, dataset, "#b3b3b3"), // shadowOpacity : int // 0 ~ 1 - shadowOpacity : kvLookup('shadowOpacity', config, dataset, 0.2), + shadowOpacity: kvLookup('shadowOpacity', config, dataset, 0.2), // shadowSize: int // inner shadow size - shadowSize : kvLookup('shadowSize', config, dataset, 5), + shadowSize: kvLookup('shadowSize', config, dataset, 5), // shadowVerticalOffset : int // how much shadow is offset from top - shadowVerticalOffset : kvLookup('shadowVerticalOffset', config, dataset, 3), + shadowVerticalOffset: kvLookup('shadowVerticalOffset', config, dataset, 3), // levelColors : string[] // colors of indicator, from lower to upper, in RGB format - levelColors : kvLookup('levelColors', config, dataset, [ "#a9d70b", "#f9c802", "#ff0000" ], 'array', ','), + levelColors: kvLookup('levelColors', config, dataset, ["#a9d70b", "#f9c802", "#ff0000"], 'array', ','), // startAnimationTime : int // length of initial animation - startAnimationTime : kvLookup('startAnimationTime', config, dataset, 700), + startAnimationTime: kvLookup('startAnimationTime', config, dataset, 700), // startAnimationType : string // type of initial animation (linear, >, <, <>, bounce) - startAnimationType : kvLookup('startAnimationType', config, dataset, '>'), + startAnimationType: kvLookup('startAnimationType', config, dataset, '>'), // refreshAnimationTime : int // length of refresh animation - refreshAnimationTime : kvLookup('refreshAnimationTime', config, dataset, 700), + refreshAnimationTime: kvLookup('refreshAnimationTime', config, dataset, 700), // refreshAnimationType : string // type of refresh animation (linear, >, <, <>, bounce) - refreshAnimationType : kvLookup('refreshAnimationType', config, dataset, '>'), + refreshAnimationType: kvLookup('refreshAnimationType', config, dataset, '>'), // donutStartAngle : int // angle to start from when in donut mode - donutStartAngle : kvLookup('donutStartAngle', config, dataset, 90), + donutStartAngle: kvLookup('donutStartAngle', config, dataset, 90), // valueMinFontSize : int // absolute minimum font size for the value - valueMinFontSize : kvLookup('valueMinFontSize', config, dataset, 16), + valueMinFontSize: kvLookup('valueMinFontSize', config, dataset, 16), // titleMinFontSize // absolute minimum font size for the title - titleMinFontSize : kvLookup('titleMinFontSize', config, dataset, 10), + titleMinFontSize: kvLookup('titleMinFontSize', config, dataset, 10), // labelMinFontSize // absolute minimum font size for the label - labelMinFontSize : kvLookup('labelMinFontSize', config, dataset, 10), + labelMinFontSize: kvLookup('labelMinFontSize', config, dataset, 10), // minLabelMinFontSize // absolute minimum font size for the minimum label - minLabelMinFontSize : kvLookup('minLabelMinFontSize', config, dataset, 10), + minLabelMinFontSize: kvLookup('minLabelMinFontSize', config, dataset, 10), // maxLabelMinFontSize // absolute minimum font size for the maximum label - maxLabelMinFontSize : kvLookup('maxLabelMinFontSize', config, dataset, 10), + maxLabelMinFontSize: kvLookup('maxLabelMinFontSize', config, dataset, 10), // hideValue : bool // hide value text - hideValue : kvLookup('hideValue', config, dataset, false), + hideValue: kvLookup('hideValue', config, dataset, false), // hideMinMax : bool // hide min and max values - hideMinMax : kvLookup('hideMinMax', config, dataset, false), + hideMinMax: kvLookup('hideMinMax', config, dataset, false), // hideInnerShadow : bool // hide inner shadow - hideInnerShadow : kvLookup('hideInnerShadow', config, dataset, false), + hideInnerShadow: kvLookup('hideInnerShadow', config, dataset, false), // humanFriendly : bool // convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M) - humanFriendly : kvLookup('humanFriendly', config, dataset, false), + humanFriendly: kvLookup('humanFriendly', config, dataset, false), // noGradient : bool // whether to use gradual color change for value, or sector-based - noGradient : kvLookup('noGradient', config, dataset, false), + noGradient: kvLookup('noGradient', config, dataset, false), // donut : bool // show full donut gauge - donut : kvLookup('donut', config, dataset, false), + donut: kvLookup('donut', config, dataset, false), // relativeGaugeSize : bool // whether gauge size should follow changes in container element size - relativeGaugeSize : kvLookup('relativeGaugeSize', config, dataset, false), + relativeGaugeSize: kvLookup('relativeGaugeSize', config, dataset, false), // counter : bool // animate level number change - counter : kvLookup('counter', config, dataset, false), + counter: kvLookup('counter', config, dataset, false), // decimals : int // number of digits after floating point - decimals : kvLookup('decimals', config, dataset, 0), + decimals: kvLookup('decimals', config, dataset, 0), // customSectors : [] of objects // number of digits after floating point - customSectors : kvLookup('customSectors', config, dataset, []), + customSectors: kvLookup('customSectors', config, dataset, []), // formatNumber: boolean // formats numbers with commas where appropriate - formatNumber : kvLookup('formatNumber', config, dataset, false) + formatNumber: kvLookup('formatNumber', config, dataset, false) }; // variables var - canvasW, - canvasH, - widgetW, - widgetH, - aspect, - dx, - dy, - titleFontSize, - titleX, - titleY, - valueFontSize, - valueX, - valueY, - labelFontSize, - labelX, - labelY, - minFontSize, - minX, - minY, - maxFontSize, - maxX, - maxY; + canvasW, + canvasH, + widgetW, + widgetH, + aspect, + dx, + dy, + titleFontSize, + titleX, + titleY, + valueFontSize, + valueX, + valueY, + labelFontSize, + labelX, + labelY, + minFontSize, + minX, + minY, + maxFontSize, + maxX, + maxY; // overflow values if (obj.config.value > obj.config.max) obj.config.value = obj.config.max; @@ -279,28 +278,28 @@ // DONUT ******************************* // width more than height - if(canvasW > canvasH) { + if (canvasW > canvasH) { widgetH = canvasH; widgetW = widgetH; - // width less than height - } else if (canvasW < canvasH) { - widgetW = canvasW; - widgetH = widgetW; + // width less than height + } else if (canvasW < canvasH) { + widgetW = canvasW; + widgetH = widgetW; // if height don't fit, rescale both - if(widgetH > canvasH) { + if (widgetH > canvasH) { aspect = widgetH / canvasH; widgetH = widgetH / aspect; widgetW = widgetH / aspect; } - // equal - } else { - widgetW = canvasW; - widgetH = widgetW; - } + // equal + } else { + widgetW = canvasW; + widgetH = widgetW; + } // delta - dx = (canvasW - widgetW)/2; - dy = (canvasH - widgetH)/2; + dx = (canvasW - widgetW) / 2; + dy = (canvasH - widgetH) / 2; // title titleFontSize = ((widgetH / 8) > 10) ? (widgetH / 10) : 10; @@ -310,7 +309,7 @@ // value valueFontSize = ((widgetH / 6.4) > 16) ? (widgetH / 5.4) : 18; valueX = dx + widgetW / 2; - if(obj.config.label !== '') { + if (obj.config.label !== '') { valueY = dy + widgetH / 1.85; } else { valueY = dy + widgetH / 1.7; @@ -323,46 +322,46 @@ // min minFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10; - minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2 ; + minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2; minY = labelY; // max maxFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10; - maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2 ; + maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2; maxY = labelY; } else { // HALF ******************************* // width more than height - if(canvasW > canvasH) { + if (canvasW > canvasH) { widgetH = canvasH; widgetW = widgetH * 1.25; //if width doesn't fit, rescale both - if(widgetW > canvasW) { + if (widgetW > canvasW) { aspect = widgetW / canvasW; widgetW = widgetW / aspect; widgetH = widgetH / aspect; } - // width less than height - } else if (canvasW < canvasH) { - widgetW = canvasW; - widgetH = widgetW / 1.25; + // width less than height + } else if (canvasW < canvasH) { + widgetW = canvasW; + widgetH = widgetW / 1.25; // if height don't fit, rescale both - if(widgetH > canvasH) { + if (widgetH > canvasH) { aspect = widgetH / canvasH; widgetH = widgetH / aspect; widgetW = widgetH / aspect; } - // equal - } else { - widgetW = canvasW; - widgetH = widgetW * 0.75; - } + // equal + } else { + widgetW = canvasW; + widgetH = widgetW * 0.75; + } // delta - dx = (canvasW - widgetW)/2; - dy = (canvasH - widgetH)/2; + dx = (canvasW - widgetW) / 2; + dy = (canvasH - widgetH) / 2; // title titleFontSize = ((widgetH / 8) > obj.config.titleMinFontSize) ? (widgetH / 10) : obj.config.titleMinFontSize; @@ -381,45 +380,45 @@ // min minFontSize = ((widgetH / 16) > obj.config.minLabelMinFontSize) ? (widgetH / 16) : obj.config.minLabelMinFontSize; - minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2 ; + minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2; minY = labelY; // max maxFontSize = ((widgetH / 16) > obj.config.maxLabelMinFontSize) ? (widgetH / 16) : obj.config.maxLabelMinFontSize; - maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2 ; + maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2; maxY = labelY; } // parameters - obj.params = { - canvasW : canvasW, - canvasH : canvasH, - widgetW : widgetW, - widgetH : widgetH, - dx : dx, - dy : dy, - titleFontSize : titleFontSize, - titleX : titleX, - titleY : titleY, - valueFontSize : valueFontSize, - valueX : valueX, - valueY : valueY, - labelFontSize : labelFontSize, - labelX : labelX, - labelY : labelY, - minFontSize : minFontSize, - minX : minX, - minY : minY, - maxFontSize : maxFontSize, - maxX : maxX, - maxY : maxY + obj.params = { + canvasW: canvasW, + canvasH: canvasH, + widgetW: widgetW, + widgetH: widgetH, + dx: dx, + dy: dy, + titleFontSize: titleFontSize, + titleX: titleX, + titleY: titleY, + valueFontSize: valueFontSize, + valueX: valueX, + valueY: valueY, + labelFontSize: labelFontSize, + labelX: labelX, + labelY: labelY, + minFontSize: minFontSize, + minX: minX, + minY: minY, + maxFontSize: maxFontSize, + maxX: maxX, + maxY: maxY }; // var clear canvasW, canvasH, widgetW, widgetH, aspect, dx, dy, titleFontSize, titleX, titleY, valueFontSize, valueX, valueY, labelFontSize, labelX, labelY, minFontSize, minX, minY, maxFontSize, maxX, maxY = null; // pki - custom attribute for generating gauge paths - obj.canvas.customAttributes.pki = function (value, min, max, w, h, dx, dy, gws, donut) { + obj.canvas.customAttributes.pki = function(value, min, max, w, h, dx, dy, gws, donut) { var alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path; @@ -449,7 +448,9 @@ path += "A" + Ri + "," + Ri + " 0 0 0 " + (Cx - Ri) + "," + Cy + " "; path += "Z "; - return { path: path }; + return { + path: path + }; } else { alpha = (1 - (value - min) / (max - min)) * Math.PI; @@ -471,7 +472,9 @@ path += "A" + Ri + "," + Ri + " 0 0 0 " + (Cx - Ri) + "," + Cy + " "; path += "Z "; - return { path: path }; + return { + path: path + }; } // var clear @@ -480,19 +483,19 @@ // gauge obj.gauge = obj.canvas.path().attr({ - "stroke": "none", - "fill": obj.config.gaugeColor, - pki: [ - obj.config.max, - obj.config.min, - obj.config.max, - obj.params.widgetW, - obj.params.widgetH, - obj.params.dx, - obj.params.dy, - obj.config.gaugeWidthScale, - obj.config.donut - ] + "stroke": "none", + "fill": obj.config.gaugeColor, + pki: [ + obj.config.max, + obj.config.min, + obj.config.max, + obj.params.widgetW, + obj.params.widgetH, + obj.params.dx, + obj.params.dy, + obj.config.gaugeWidthScale, + obj.config.donut + ] }); // level @@ -511,84 +514,83 @@ obj.config.donut ] }); - if(obj.config.donut) { - obj.level.transform("r" + obj.config.donutStartAngle + ", " + (obj.params.widgetW/2 + obj.params.dx) + ", " + (obj.params.widgetH/1.95 + obj.params.dy)); + if (obj.config.donut) { + obj.level.transform("r" + obj.config.donutStartAngle + ", " + (obj.params.widgetW / 2 + obj.params.dx) + ", " + (obj.params.widgetH / 1.95 + obj.params.dy)); } // title obj.txtTitle = obj.canvas.text(obj.params.titleX, obj.params.titleY, obj.config.title); obj.txtTitle.attr({ - "font-size":obj.params.titleFontSize, - "font-weight":"bold", - "font-family":"Arial", - "fill":obj.config.titleFontColor, - "fill-opacity":"1" + "font-size": obj.params.titleFontSize, + "font-weight": "bold", + "font-family": "Arial", + "fill": obj.config.titleFontColor, + "fill-opacity": "1" }); setDy(obj.txtTitle, obj.params.titleFontSize, obj.params.titleY); // value obj.txtValue = obj.canvas.text(obj.params.valueX, obj.params.valueY, 0); obj.txtValue.attr({ - "font-size":obj.params.valueFontSize, - "font-weight":"bold", - "font-family":"Arial", - "fill":obj.config.valueFontColor, - "fill-opacity":"0" + "font-size": obj.params.valueFontSize, + "font-weight": "bold", + "font-family": "Arial", + "fill": obj.config.valueFontColor, + "fill-opacity": "0" }); setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY); // label obj.txtLabel = obj.canvas.text(obj.params.labelX, obj.params.labelY, obj.config.label); obj.txtLabel.attr({ - "font-size":obj.params.labelFontSize, - "font-weight":"normal", - "font-family":"Arial", - "fill":obj.config.labelFontColor, - "fill-opacity":"0" + "font-size": obj.params.labelFontSize, + "font-weight": "normal", + "font-family": "Arial", + "fill": obj.config.labelFontColor, + "fill-opacity": "0" }); setDy(obj.txtLabel, obj.params.labelFontSize, obj.params.labelY); // min obj.txtMinimum = obj.config.min; - if( obj.config.humanFriendly ) { - obj.txtMinimum = humanFriendlyNumber( obj.config.min, obj.config.humanFriendlyDecimal ); - } else if ( obj.config.formatNumber ) { - obj.txtMinimum = formatNumber( obj.config.min ); + if (obj.config.humanFriendly) { + obj.txtMinimum = humanFriendlyNumber(obj.config.min, obj.config.humanFriendlyDecimal); + } else if (obj.config.formatNumber) { + obj.txtMinimum = formatNumber(obj.config.min); } obj.txtMin = obj.canvas.text(obj.params.minX, obj.params.minY, obj.txtMinimum); obj.txtMin.attr({ - "font-size":obj.params.minFontSize, - "font-weight":"normal", - "font-family":"Arial", - "fill":obj.config.labelFontColor, - "fill-opacity": (obj.config.hideMinMax || obj.config.donut)? "0" : "1" + "font-size": obj.params.minFontSize, + "font-weight": "normal", + "font-family": "Arial", + "fill": obj.config.labelFontColor, + "fill-opacity": (obj.config.hideMinMax || obj.config.donut) ? "0" : "1" }); setDy(obj.txtMin, obj.params.minFontSize, obj.params.minY); // max obj.txtMaximum = obj.config.max; - if( obj.config.formatNumber ) { - obj.txtMaximum = formatNumber( obj.txtMaximum ); - } else if( obj.config.humanFriendly ) { - obj.txtMaximum = humanFriendlyNumber( obj.config.max, obj.config.humanFriendlyDecimal ); + if (obj.config.formatNumber) { + obj.txtMaximum = formatNumber(obj.txtMaximum); + } else if (obj.config.humanFriendly) { + obj.txtMaximum = humanFriendlyNumber(obj.config.max, obj.config.humanFriendlyDecimal); } obj.txtMax = obj.canvas.text(obj.params.maxX, obj.params.maxY, obj.txtMaximum); obj.txtMax.attr({ - "font-size":obj.params.maxFontSize, - "font-weight":"normal", - "font-family":"Arial", - "fill":obj.config.labelFontColor, - "fill-opacity": (obj.config.hideMinMax || obj.config.donut)? "0" : "1" + "font-size": obj.params.maxFontSize, + "font-weight": "normal", + "font-family": "Arial", + "fill": obj.config.labelFontColor, + "fill-opacity": (obj.config.hideMinMax || obj.config.donut) ? "0" : "1" }); setDy(obj.txtMax, obj.params.maxFontSize, obj.params.maxY); var defs = obj.canvas.canvas.childNodes[1]; var svg = "http://www.w3.org/2000/svg"; - if (ie !== 'undefined' && ie < 9 ) { + if (ie !== 'undefined' && ie < 9) { // VML mode - no SVG & SVG filter support - } - else if (ie !== 'undefined') { + } else if (ie !== 'undefined') { onCreateElementNsReady(function() { obj.generateShadow(svg, defs); }); @@ -600,25 +602,25 @@ defs, svg = null; // set value to display - if(obj.config.textRenderer) { + if (obj.config.textRenderer) { obj.originalValue = obj.config.textRenderer(obj.originalValue); - } else if(obj.config.humanFriendly) { - obj.originalValue = humanFriendlyNumber( obj.originalValue, obj.config.humanFriendlyDecimal ) + obj.config.symbol; - } else if(obj.config.formatNumber) { + } else if (obj.config.humanFriendly) { + obj.originalValue = humanFriendlyNumber(obj.originalValue, obj.config.humanFriendlyDecimal) + obj.config.symbol; + } else if (obj.config.formatNumber) { obj.originalValue = formatNumber(obj.originalValue) + obj.config.symbol; } else { obj.originalValue = (obj.originalValue * 1).toFixed(obj.config.decimals) + obj.config.symbol; } - if(obj.config.counter === true) { + if (obj.config.counter === true) { //on each animation frame eve.on("raphael.anim.frame." + (obj.level.id), function() { var currentValue = obj.level.attr("pki"); - if(obj.config.textRenderer) { + if (obj.config.textRenderer) { obj.txtValue.attr("text", obj.config.textRenderer(Math.floor(currentValue[0]))); - } else if(obj.config.humanFriendly) { - obj.txtValue.attr("text", humanFriendlyNumber( Math.floor(currentValue[0]), obj.config.humanFriendlyDecimal ) + obj.config.symbol); - } else if(obj.config.formatNumber) { + } else if (obj.config.humanFriendly) { + obj.txtValue.attr("text", humanFriendlyNumber(Math.floor(currentValue[0]), obj.config.humanFriendlyDecimal) + obj.config.symbol); + } else if (obj.config.formatNumber) { obj.txtValue.attr("text", formatNumber(Math.floor(currentValue[0])) + obj.config.symbol); } else { obj.txtValue.attr("text", (currentValue[0] * 1).toFixed(obj.config.decimals) + obj.config.symbol); @@ -628,13 +630,17 @@ }); //on animation end eve.on("raphael.anim.finish." + (obj.level.id), function() { - obj.txtValue.attr({"text" : obj.originalValue}); + obj.txtValue.attr({ + "text": obj.originalValue + }); setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY); }); } else { //on animation start eve.on("raphael.anim.start." + (obj.level.id), function() { - obj.txtValue.attr({"text" : obj.originalValue}); + obj.txtValue.attr({ + "text": obj.originalValue + }); setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY); }); } @@ -653,8 +659,12 @@ obj.config.donut ] }, obj.config.startAnimationTime, obj.config.startAnimationType); - obj.txtValue.animate({"fill-opacity":(obj.config.hideValue)?"0":"1"}, obj.config.startAnimationTime, obj.config.startAnimationType); - obj.txtLabel.animate({"fill-opacity":"1"}, obj.config.startAnimationTime, obj.config.startAnimationType); + obj.txtValue.animate({ + "fill-opacity": (obj.config.hideValue) ? "0" : "1" + }, obj.config.startAnimationTime, obj.config.startAnimationType); + obj.txtLabel.animate({ + "fill-opacity": "1" + }, obj.config.startAnimationTime, obj.config.startAnimationType); }; /** Refresh gauge level */ @@ -664,31 +674,37 @@ JustGage.prototype.refresh = function(val, max) { var displayVal, color, max = max || null; // set new max - if(max !== null) { + if (max !== null) { obj.config.max = max; obj.txtMaximum = obj.config.max; - if( obj.config.humanFriendly ) { - obj.txtMaximum = humanFriendlyNumber( obj.config.max, obj.config.humanFriendlyDecimal ); - } else if( obj.config.formatNumber ) { - obj.txtMaximum = formatNumber( obj.config.max ); + if (obj.config.humanFriendly) { + obj.txtMaximum = humanFriendlyNumber(obj.config.max, obj.config.humanFriendlyDecimal); + } else if (obj.config.formatNumber) { + obj.txtMaximum = formatNumber(obj.config.max); } - obj.txtMax.attr({"text" : obj.txtMaximum}); + obj.txtMax.attr({ + "text": obj.txtMaximum + }); setDy(obj.txtMax, obj.params.maxFontSize, obj.params.maxY); } // overflow values displayVal = val; - if ((val * 1) > (obj.config.max * 1)) {val = (obj.config.max * 1);} - if ((val * 1) < (obj.config.min * 1)) {val = (obj.config.min * 1);} + if ((val * 1) > (obj.config.max * 1)) { + val = (obj.config.max * 1); + } + if ((val * 1) < (obj.config.min * 1)) { + val = (obj.config.min * 1); + } color = getColor(val, (val - obj.config.min) / (obj.config.max - obj.config.min), obj.config.levelColors, obj.config.noGradient, obj.config.customSectors); - if(obj.config.textRenderer) { + if (obj.config.textRenderer) { displayVal = obj.config.textRenderer(displayVal); - } else if( obj.config.humanFriendly ) { - displayVal = humanFriendlyNumber( displayVal, obj.config.humanFriendlyDecimal ) + obj.config.symbol; - } else if( obj.config.formatNumber ) { + } else if (obj.config.humanFriendly) { + displayVal = humanFriendlyNumber(displayVal, obj.config.humanFriendlyDecimal) + obj.config.symbol; + } else if (obj.config.formatNumber) { displayVal = formatNumber((displayVal * 1).toFixed(obj.config.decimals)) + obj.config.symbol; } else { displayVal = (displayVal * 1).toFixed(obj.config.decimals) + obj.config.symbol; @@ -696,8 +712,10 @@ JustGage.prototype.refresh = function(val, max) { obj.originalValue = displayVal; obj.config.value = val * 1; - if(!obj.config.counter) { - obj.txtValue.attr({"text":displayVal}); + if (!obj.config.counter) { + obj.txtValue.attr({ + "text": displayVal + }); setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY); } @@ -713,8 +731,8 @@ JustGage.prototype.refresh = function(val, max) { obj.config.gaugeWidthScale, obj.config.donut ], - "fill":color - }, obj.config.refreshAnimationTime, obj.config.refreshAnimationType); + "fill": color + }, obj.config.refreshAnimationTime, obj.config.refreshAnimationType); // var clear obj, displayVal, color, max = null; @@ -728,56 +746,56 @@ JustGage.prototype.generateShadow = function(svg, defs) { var gaussFilter, feOffset, feGaussianBlur, feComposite1, feFlood, feComposite2, feComposite3; // FILTER - gaussFilter = document.createElementNS(svg,"filter"); + gaussFilter = document.createElementNS(svg, "filter"); gaussFilter.setAttribute("id", sid); defs.appendChild(gaussFilter); // offset - feOffset = document.createElementNS(svg,"feOffset"); + feOffset = document.createElementNS(svg, "feOffset"); feOffset.setAttribute("dx", 0); feOffset.setAttribute("dy", obj.config.shadowVerticalOffset); gaussFilter.appendChild(feOffset); // blur - feGaussianBlur = document.createElementNS(svg,"feGaussianBlur"); - feGaussianBlur.setAttribute("result","offset-blur"); + feGaussianBlur = document.createElementNS(svg, "feGaussianBlur"); + feGaussianBlur.setAttribute("result", "offset-blur"); feGaussianBlur.setAttribute("stdDeviation", obj.config.shadowSize); gaussFilter.appendChild(feGaussianBlur); // composite 1 - feComposite1 = document.createElementNS(svg,"feComposite"); - feComposite1.setAttribute("operator","out"); + feComposite1 = document.createElementNS(svg, "feComposite"); + feComposite1.setAttribute("operator", "out"); feComposite1.setAttribute("in", "SourceGraphic"); - feComposite1.setAttribute("in2","offset-blur"); - feComposite1.setAttribute("result","inverse"); + feComposite1.setAttribute("in2", "offset-blur"); + feComposite1.setAttribute("result", "inverse"); gaussFilter.appendChild(feComposite1); // flood - feFlood = document.createElementNS(svg,"feFlood"); - feFlood.setAttribute("flood-color","black"); + feFlood = document.createElementNS(svg, "feFlood"); + feFlood.setAttribute("flood-color", "black"); feFlood.setAttribute("flood-opacity", obj.config.shadowOpacity); - feFlood.setAttribute("result","color"); + feFlood.setAttribute("result", "color"); gaussFilter.appendChild(feFlood); // composite 2 - feComposite2 = document.createElementNS(svg,"feComposite"); - feComposite2.setAttribute("operator","in"); + feComposite2 = document.createElementNS(svg, "feComposite"); + feComposite2.setAttribute("operator", "in"); feComposite2.setAttribute("in", "color"); - feComposite2.setAttribute("in2","inverse"); - feComposite2.setAttribute("result","shadow"); + feComposite2.setAttribute("in2", "inverse"); + feComposite2.setAttribute("result", "shadow"); gaussFilter.appendChild(feComposite2); // composite 3 - feComposite3 = document.createElementNS(svg,"feComposite"); - feComposite3.setAttribute("operator","over"); + feComposite3 = document.createElementNS(svg, "feComposite"); + feComposite3.setAttribute("operator", "over"); feComposite3.setAttribute("in", "shadow"); - feComposite3.setAttribute("in2","SourceGraphic"); + feComposite3.setAttribute("in2", "SourceGraphic"); gaussFilter.appendChild(feComposite3); // set shadow if (!obj.config.hideInnerShadow) { - obj.canvas.canvas.childNodes[2].setAttribute("filter", "url(#"+ sid +")"); - obj.canvas.canvas.childNodes[3].setAttribute("filter", "url(#"+ sid +")"); + obj.canvas.canvas.childNodes[2].setAttribute("filter", "url(#" + sid + ")"); + obj.canvas.canvas.childNodes[3].setAttribute("filter", "url(#" + sid + ")"); } // var clear @@ -799,29 +817,29 @@ function kvLookup(key, tablea, tableb, defval, datatype, delimiter) { var val = defval; var canConvert = false; if (!(key === null || key === undefined)) { - if (tableb !== null && tableb !== undefined && typeof tableb === "object" && key in tableb) { - val = tableb[key]; - canConvert = true; - } else if (tablea !== null && tablea !== undefined && typeof tablea === "object" && key in tablea) { - val = tablea[key]; - canConvert = true; - } else { - val = defval; - } - if (canConvert === true) { - if (datatype !== null && datatype !== undefined) { - switch(datatype) { - case 'int': - val = parseInt(val, 10); - break; - case 'float': - val = parseFloat(val); - break; - default: - break; - } - } + if (tableb !== null && tableb !== undefined && typeof tableb === "object" && key in tableb) { + val = tableb[key]; + canConvert = true; + } else if (tablea !== null && tablea !== undefined && typeof tablea === "object" && key in tablea) { + val = tablea[key]; + canConvert = true; + } else { + val = defval; + } + if (canConvert === true) { + if (datatype !== null && datatype !== undefined) { + switch (datatype) { + case 'int': + val = parseInt(val, 10); + break; + case 'float': + val = parseFloat(val); + break; + default: + break; + } } + } } return val; }; @@ -832,9 +850,9 @@ function getColor(val, pct, col, noGradient, custSec) { var no, inc, colors, percentage, rval, gval, bval, lower, upper, range, rangePct, pctLower, pctUpper, color; var noGradient = noGradient || custSec.length > 0; - if(custSec.length > 0) { - for(var i = 0; i < custSec.length; i++) { - if(val > custSec[i].lo && val <= custSec[i].hi) { + if (custSec.length > 0) { + for (var i = 0; i < custSec.length; i++) { + if (val > custSec[i].lo && val <= custSec[i].hi) { return custSec[i].color; } } @@ -846,13 +864,20 @@ function getColor(val, pct, col, noGradient, custSec) { colors = []; for (i = 0; i < col.length; i++) { percentage = (noGradient) ? (inc * (i + 1)) : (inc * i); - rval = parseInt((cutHex(col[i])).substring(0,2),16); - gval = parseInt((cutHex(col[i])).substring(2,4),16); - bval = parseInt((cutHex(col[i])).substring(4,6),16); - colors[i] = { pct: percentage, color: { r: rval, g: gval, b: bval } }; + rval = parseInt((cutHex(col[i])).substring(0, 2), 16); + gval = parseInt((cutHex(col[i])).substring(2, 4), 16); + bval = parseInt((cutHex(col[i])).substring(4, 6), 16); + colors[i] = { + pct: percentage, + color: { + r: rval, + g: gval, + b: bval + } + }; } - if(pct === 0) { + if (pct === 0) { return 'rgb(' + [colors[0].color.r, colors[0].color.g, colors[0].color.b].join(',') + ')'; } @@ -887,13 +912,13 @@ function setDy(elem, fontSize, txtYpos) { } /** Random integer */ -function getRandomInt (min, max) { +function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } /** Cut hex */ function cutHex(str) { - return (str.charAt(0)=="#") ? str.substring(1,7):str; + return (str.charAt(0) == "#") ? str.substring(1, 7) : str; } /** Human friendly number suffix - From: http://stackoverflow.com/questions/2692323/code-golf-friendly-number-abbreviator */ @@ -903,30 +928,29 @@ function humanFriendlyNumber(n, d) { p = Math.pow; d2 = p(10, d); i = 7; - while( i ) { - s = p(10,i--*3); - if( s <= n ) { - n = Math.round(n*d2/s)/d2+"KMGTPE"[i]; - } - } - return n; + while (i) { + s = p(10, i-- * 3); + if (s <= n) { + n = Math.round(n * d2 / s) / d2 + "KMGTPE" [i]; + } + } + return n; } /** Format numbers with commas - From: http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript */ function formatNumber(x) { - var parts = x.toString().split("."); - parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); - return parts.join("."); + var parts = x.toString().split("."); + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + return parts.join("."); } /** Get style */ -function getStyle(oElm, strCssRule){ +function getStyle(oElm, strCssRule) { var strValue = ""; - if(document.defaultView && document.defaultView.getComputedStyle){ + if (document.defaultView && document.defaultView.getComputedStyle) { strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); - } - else if(oElm.currentStyle){ - strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ + } else if (oElm.currentStyle) { + strCssRule = strCssRule.replace(/\-(\w)/g, function(strMatch, p1) { return p1.toUpperCase(); }); strValue = oElm.currentStyle[strCssRule]; @@ -939,7 +963,9 @@ function onCreateElementNsReady(func) { if (document.createElementNS !== undefined) { func(); } else { - setTimeout(function() { onCreateElementNsReady(func); }, 100); + setTimeout(function() { + onCreateElementNsReady(func); + }, 100); } } @@ -960,18 +986,18 @@ function onCreateElementNsReady(func) { // ie < 9 // Anything less than IE9 // ---------------------------------------------------------- // UPDATE: Now using Live NodeList idea from @jdalton -var ie = (function(){ +var ie = (function() { var undef, - v = 3, - div = document.createElement('div'), - all = div.getElementsByTagName('i'); + v = 3, + div = document.createElement('div'), + all = div.getElementsByTagName('i'); while ( div.innerHTML = '', all[0] - ); - return v > 4 ? v : undef; + ); + return v > 4 ? v : undef; }()); // extend target object with second object @@ -989,4 +1015,4 @@ function extend(out) { } return out; -}; \ No newline at end of file +};