From 0f2dad413b0d0cd3325c7b880bce10a2f6e4a5c4 Mon Sep 17 00:00:00 2001 From: Martin Trigaux Date: Tue, 9 Apr 2013 16:23:02 +0200 Subject: [PATCH] [ADD] use gauge for kanbans bzr revid: mat@openerp.com-20130409142302-lsyye6g5cfl3wa90 --- addons/gamification/__openerp__.py | 5 +- addons/gamification/goal_view.xml | 12 +- addons/gamification/plan_view.xml | 2 +- addons/gamification/static/src/css/goal.css | 6 +- .../static/src/js/gamification.js | 36 +- addons/gamification/static/src/js/justgage.js | 885 ++++++++++++++++++ 6 files changed, 935 insertions(+), 11 deletions(-) create mode 100644 addons/gamification/static/src/js/justgage.js diff --git a/addons/gamification/__openerp__.py b/addons/gamification/__openerp__.py index c9ecdf0252b..fe180b20c2b 100644 --- a/addons/gamification/__openerp__.py +++ b/addons/gamification/__openerp__.py @@ -61,6 +61,9 @@ A **Badge** is a symbolic token granted to a user as a sign of reward. It can be 'application': True, 'auto_install': True, 'css': ['static/src/css/goal.css'], - 'js': ['static/src/js/gamification.js'], + 'js': [ + 'static/src/js/gamification.js', + 'static/src/js/justgage.js', + ], 'qweb': ['static/src/xml/gamification.xml'], } diff --git a/addons/gamification/goal_view.xml b/addons/gamification/goal_view.xml index 31c8b6ac4a2..c0953362112 100644 --- a/addons/gamification/goal_view.xml +++ b/addons/gamification/goal_view.xml @@ -144,20 +144,22 @@
-

+

-
-

- / +

+
diff --git a/addons/gamification/plan_view.xml b/addons/gamification/plan_view.xml index 514bb1d85ae..f305eb13192 100644 --- a/addons/gamification/plan_view.xml +++ b/addons/gamification/plan_view.xml @@ -36,7 +36,7 @@ gamification.goal Related Goals kanban,tree - {'search_default_group_by_type': True, 'search_default_inprogress': True, 'default_plan_id': active_id} + {'search_default_group_by_type': True, 'search_default_inprogress': True, 'search_default_plan_id': active_id, 'default_plan_id': active_id}

There is no goals associated to this plan matching your search. diff --git a/addons/gamification/static/src/css/goal.css b/addons/gamification/static/src/css/goal.css index 41bc282df5b..57b76dd70c3 100644 --- a/addons/gamification/static/src/css/goal.css +++ b/addons/gamification/static/src/css/goal.css @@ -3,6 +3,7 @@ .openerp .oe_kanban_view .oe_kanban_card.oe_kanban_badge { width: 220px; min-height: 160px; + /*height: 200px;*/ } .openerp .oe_kanban_view .oe_kanban_card.oe_kanban_color_reached { background-color: #A1FF81; @@ -30,7 +31,10 @@ border-radius: 2px; -box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } - +.oe_goal_gauge { + width:200px; + height:150px; +} /* Mail Sidebar */ diff --git a/addons/gamification/static/src/js/gamification.js b/addons/gamification/static/src/js/gamification.js index 4aa456964c5..34acb568026 100644 --- a/addons/gamification/static/src/js/gamification.js +++ b/addons/gamification/static/src/js/gamification.js @@ -30,7 +30,6 @@ openerp.gamification = function(instance) { 'click a.oe_goal_action': function(event) { var self = this; var goal_id = parseInt(event.currentTarget.id, 10); - console.log("oe_goal_action"); var goal_action = new instance.web.Model('gamification.goal').call('get_action', [goal_id]).then(function(res) { goal_action['action'] = res; }); @@ -59,7 +58,6 @@ openerp.gamification = function(instance) { }, get_goal_todo_info: function() { var self = this; - console.log("get_goal_todo_info"); var goals_info = this.res_user.call('get_goals_todo_info', {}).then(function(res) { self.goals_info['info'] = res; }); @@ -113,9 +111,41 @@ openerp.gamification = function(instance) { start: function() { this._super(); var self = this; - console.log("start"); var sidebar = new instance.gamification.Sidebar(self); sidebar.appendTo($('.oe_mail_wall_aside')); } }); + + instance.web_kanban.KanbanRecord.include({ + start: function () { + var rendering = this._super(); + var self = this; + + $.when(rendering).done(function() { + if (self.view.dataset.model === 'gamification.goal' && self.$el.find('.oe_goal_gauge').length == 1) { + var unique_id = _.uniqueId("goal_gauge_"); + self.$el.find('.oe_goal_gauge').attr('id', unique_id); + console.log(self.$el.find('.oe_goal_gauge').empty().get(0)); + // debugger; + var g = new JustGage({ + id: unique_id, + node: self.$el.find('.oe_goal_gauge').empty().get(0), + value: self.record.current.raw_value, + min: 0, + max: self.record.target_goal.raw_value, + title: self.record.type_id.value, + relativeGaugeSize: true + }); + console.log(g); + } + }); + }, + on_card_clicked: function() { + if (this.view.dataset.model === 'gamification.goal.plan') { + this.$('.oe_kanban_project_list a').first().click(); + } else { + this._super.apply(this, arguments); + } + } + }); }; diff --git a/addons/gamification/static/src/js/justgage.js b/addons/gamification/static/src/js/justgage.js new file mode 100644 index 00000000000..b83e5cbdb1e --- /dev/null +++ b/addons/gamification/static/src/js/justgage.js @@ -0,0 +1,885 @@ +/** + * JustGage - this is work-in-progress, unreleased, unofficial code, so it might not work top-notch :) + * Check http://www.justgage.com for official releases + * Licensed under MIT. + * @author Bojan Djuricic (@Toorshia) + * + * LATEST UPDATES + + * ----------------------------- + * April 01, 2013. + * ----------------------------- + * fix - https://github.com/toorshia/justgage/issues/46 + + * ----------------------------- + * March 26, 2013. + * ----------------------------- + * customSectors - define specific color for value range (0-10 : red, 10-30 : blue etc.) + + * ----------------------------- + * March 23, 2013. + * ----------------------------- + * counter - option to animate value in counting fashion + * fix - https://github.com/toorshia/justgage/issues/45 + + * ----------------------------- + * March 13, 2013. + * ----------------------------- + * refresh method - added optional 'max' parameter to use when you need to update max value + + * ----------------------------- + * February 26, 2013. + * ----------------------------- + * decimals - option to define/limit number of decimals when not using humanFriendly or customRenderer to display value + * fixed a missing parameters bug when calling generateShadow() for IE < 9 + + * ----------------------------- + * December 31, 2012. + * ----------------------------- + * fixed text y-position for hidden divs - workaround for Raphael 'dy' bug - https://github.com/DmitryBaranovskiy/raphael/issues/491 + * 'show' parameters, like showMinMax are now 'hide' because I am lame developer - please update these in your setups + * Min and Max labels are now auto-off when in donut mode + * Start angle in donut mode is now 90 + * donutStartAngle - option to define start angle for donut + + * ----------------------------- + * November 25, 2012. + * ----------------------------- + * Option to define custom rendering function for displayed value + + * ----------------------------- + * November 19, 2012. + * ----------------------------- + * Config.value is now updated after gauge refresh + + * ----------------------------- + * November 13, 2012. + * ----------------------------- + * Donut display mode added + * Option to hide value label + * Option to enable responsive gauge size + * Removed default title attribute + * Option to accept min and max defined as string values + * Option to configure value symbol + * Fixed bad aspect ratio calculations + * Option to configure minimum font size for all texts + * Option to show shorthand big numbers (human friendly) + */ + + JustGage = function(config) { + + if (!config.id) {alert("Missing id parameter for gauge!"); return false;} + if (!config.node) { + if (!document.getElementById(config.id)) {alert("No element with id: \""+config.id+"\" found!"); return false;} + config.node = document.getElementById(config.id); + } + + var obj = this; + + // configurable parameters + obj.config = + { + // id : string + // this is container element id + id : config.id, + + // node : string + // the node to use instead of DOM + node : config.node, + + // title : string + // gauge title + title : (config.title) ? config.title : "", + + // titleFontColor : string + // color of gauge title + titleFontColor : (config.titleFontColor) ? config.titleFontColor : "#999999", + + // value : int + // value gauge is showing + value : (config.value) ? config.value : 0, + + + // valueFontColor : string + // color of label showing current value + valueFontColor : (config.valueFontColor) ? config.valueFontColor : "#010101", + + // symbol : string + // special symbol to show next to value + symbol : (config.symbol) ? config.symbol : "", + + // min : int + // min value + min : (config.min) ? parseFloat(config.min) : 0, + + // max : int + // max value + max : (config.max) ? parseFloat(config.max) : 100, + + // humanFriendlyDecimal : int + // number of decimal places for our human friendly number to contain + humanFriendlyDecimal : (config.humanFriendlyDecimal) ? config.humanFriendlyDecimal : 0, + + // textRenderer: func + // function applied before rendering text + textRenderer : (config.textRenderer) ? config.textRenderer : null, + + // gaugeWidthScale : float + // width of the gauge element + gaugeWidthScale : (config.gaugeWidthScale) ? config.gaugeWidthScale : 1.0, + + // gaugeColor : string + // background color of gauge element + gaugeColor : (config.gaugeColor) ? config.gaugeColor : "#edebeb", + + // label : string + // text to show below value + label : (config.label) ? config.label : "", + + // labelFontColor : string + // color of label showing label under value + labelFontColor : (config.labelFontColor) ? config.labelFontColor : "#b3b3b3", + + // shadowOpacity : int + // 0 ~ 1 + shadowOpacity : (config.shadowOpacity) ? config.shadowOpacity : 0.2, + + // shadowSize: int + // inner shadow size + shadowSize : (config.shadowSize) ? config.shadowSize : 5, + + // shadowVerticalOffset : int + // how much shadow is offset from top + shadowVerticalOffset : (config.shadowVerticalOffset) ? config.shadowVerticalOffset : 3, + + // levelColors : string[] + // colors of indicator, from lower to upper, in RGB format + levelColors : (config.levelColors) ? config.levelColors : [ + "#a9d70b", + "#f9c802", + "#ff0000" + ], + + // startAnimationTime : int + // length of initial animation + startAnimationTime : (config.startAnimationTime) ? config.startAnimationTime : 700, + + // startAnimationType : string + // type of initial animation (linear, >, <, <>, bounce) + startAnimationType : (config.startAnimationType) ? config.startAnimationType : ">", + + // refreshAnimationTime : int + // length of refresh animation + refreshAnimationTime : (config.refreshAnimationTime) ? config.refreshAnimationTime : 700, + + // refreshAnimationType : string + // type of refresh animation (linear, >, <, <>, bounce) + refreshAnimationType : (config.refreshAnimationType) ? config.refreshAnimationType : ">", + + // donutStartAngle : int + // angle to start from when in donut mode + donutStartAngle : (config.donutStartAngle) ? config.donutStartAngle : 90, + + // valueMinFontSize : int + // absolute minimum font size for the value + valueMinFontSize : config.valueMinFontSize || 16, + + // titleMinFontSize + // absolute minimum font size for the title + titleMinFontSize : config.titleMinFontSize || 10, + + // labelMinFontSize + // absolute minimum font size for the label + labelMinFontSize : config.labelMinFontSize || 10, + + // minLabelMinFontSize + // absolute minimum font size for the minimum label + minLabelMinFontSize : config.minLabelMinFontSize || 10, + + // maxLabelMinFontSize + // absolute minimum font size for the maximum label + maxLabelMinFontSize : config.maxLabelMinFontSize || 10, + + // hideValue : bool + // hide value text + hideValue : (config.hideValue) ? config.hideValue : false, + + // hideMinMax : bool + // hide min and max values + hideMinMax : (config.hideMinMax) ? config.hideMinMax : false, + + // hideInnerShadow : bool + // hide inner shadow + hideInnerShadow : (config.hideInnerShadow) ? config.hideInnerShadow : false, + + // humanFriendly : bool + // convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M) + humanFriendly : (config.humanFriendly) ? config.humanFriendly : false, + + // noGradient : bool + // whether to use gradual color change for value, or sector-based + noGradient : (config.noGradient) ? config.noGradient : false, + + // donut : bool + // show full donut gauge + donut : (config.donut) ? config.donut : false, + + // relativeGaugeSize : bool + // whether gauge size should follow changes in container element size + relativeGaugeSize : (config.relativeGaugeSize) ? config.relativeGaugeSize : false, + + // counter : bool + // animate level number change + counter : (config.counter) ? config.counter : false, + + // decimals : int + // number of digits after floating point + decimals : (config.decimals) ? config.decimals : 0, + + // customSectors : [] of objects + // number of digits after floating point + customSectors : (config.customSectors) ? config.customSectors : [] + }; + + // variables + var + 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 (this.config.value > this.config.max) this.config.value = this.config.max; + if (this.config.value < this.config.min) this.config.value = this.config.min; + this.originalValue = config.value; + + // canvas + this.canvas = Raphael(this.config.node, "100%", "100%"); + if (this.config.relativeGaugeSize === true) { + this.canvas.setViewBox(0, 0, 200, 150, true); + } + + // canvas dimensions + if (this.config.relativeGaugeSize === true) { + canvasW = 200; + canvasH = 150; + } else { + canvasW = getStyle(this.config.node, "width").slice(0, -2) * 1; + canvasH = getStyle(this.config.node, "height").slice(0, -2) * 1; + } + + // widget dimensions + if (this.config.donut === true) { + + // DONUT ******************************* + + // width more than height + if(canvasW > canvasH) { + widgetH = canvasH; + widgetW = widgetH; + // width less than height + } else if (canvasW < canvasH) { + widgetW = canvasW; + widgetH = widgetW; + // if height don't fit, rescale both + if(widgetH > canvasH) { + aspect = widgetH / canvasH; + widgetH = widgetH / aspect; + widgetW = widgetH / aspect; + } + // equal + } else { + widgetW = canvasW; + widgetH = widgetW; + } + + // delta + dx = (canvasW - widgetW)/2; + dy = (canvasH - widgetH)/2; + + // title + titleFontSize = ((widgetH / 8) > 10) ? (widgetH / 10) : 10; + titleX = dx + widgetW / 2; + titleY = dy + widgetH / 11; + + // value + valueFontSize = ((widgetH / 6.4) > 16) ? (widgetH / 5.4) : 18; + valueX = dx + widgetW / 2; + if(this.config.label !== '') { + valueY = dy + widgetH / 1.85; + } else { + valueY = dy + widgetH / 1.7; + } + + // label + labelFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10; + labelX = dx + widgetW / 2; + labelY = valueY + labelFontSize; + + // min + minFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10; + minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * this.config.gaugeWidthScale) / 2 ; + minY = labelY; + + // max + maxFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10; + maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * this.config.gaugeWidthScale) / 2 ; + maxY = labelY; + + } else { + // HALF ******************************* + + // width more than height + if(canvasW > canvasH) { + widgetH = canvasH; + widgetW = widgetH * 1.25; + //if width doesn't fit, rescale both + 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; + // if height don't fit, rescale both + if(widgetH > canvasH) { + aspect = widgetH / canvasH; + widgetH = widgetH / aspect; + widgetW = widgetH / aspect; + } + // equal + } else { + widgetW = canvasW; + widgetH = widgetW * 0.75; + } + + // delta + dx = (canvasW - widgetW)/2; + dy = (canvasH - widgetH)/2; + + // title + titleFontSize = ((widgetH / 8) > this.config.titleMinFontSize) ? (widgetH / 10) : this.config.titleMinFontSize; + titleX = dx + widgetW / 2; + titleY = dy + widgetH / 6.4; + + // value + valueFontSize = ((widgetH / 6.5) > this.config.valueMinFontSize) ? (widgetH / 6.5) : this.config.valueMinFontSize; + valueX = dx + widgetW / 2; + valueY = dy + widgetH / 1.275; + + // label + labelFontSize = ((widgetH / 16) > this.config.labelMinFontSize) ? (widgetH / 16) : this.config.labelMinFontSize; + labelX = dx + widgetW / 2; + labelY = valueY + valueFontSize / 2 + 5; + + // min + minFontSize = ((widgetH / 16) > this.config.minLabelMinFontSize) ? (widgetH / 16) : this.config.minLabelMinFontSize; + minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * this.config.gaugeWidthScale) / 2 ; + minY = labelY; + + // max + maxFontSize = ((widgetH / 16) > this.config.maxLabelMinFontSize) ? (widgetH / 16) : this.config.maxLabelMinFontSize; + maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * this.config.gaugeWidthScale) / 2 ; + maxY = labelY; + } + + // parameters + this.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 + this.canvas.customAttributes.pki = function (value, min, max, w, h, dx, dy, gws, donut) { + + var alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path; + + if (donut) { + alpha = (1 - 2 * (value - min) / (max - min)) * Math.PI; + Ro = w / 2 - w / 7; + Ri = Ro - w / 6.666666666666667 * gws; + + Cx = w / 2 + dx; + Cy = h / 1.95 + dy; + + Xo = w / 2 + dx + Ro * Math.cos(alpha); + Yo = h - (h - Cy) + 0 - Ro * Math.sin(alpha); + Xi = w / 2 + dx + Ri * Math.cos(alpha); + Yi = h - (h - Cy) + 0 - Ri * Math.sin(alpha); + + path += "M" + (Cx - Ri) + "," + Cy + " "; + path += "L" + (Cx - Ro) + "," + Cy + " "; + if (value > ((max - min) / 2)) { + path += "A" + Ro + "," + Ro + " 0 0 1 " + (Cx + Ro) + "," + Cy + " "; + } + path += "A" + Ro + "," + Ro + " 0 0 1 " + Xo + "," + Yo + " "; + path += "L" + Xi + "," + Yi + " "; + if (value > ((max - min) / 2)) { + path += "A" + Ri + "," + Ri + " 0 0 0 " + (Cx + Ri) + "," + Cy + " "; + } + path += "A" + Ri + "," + Ri + " 0 0 0 " + (Cx - Ri) + "," + Cy + " "; + path += "Z "; + + return { path: path }; + + } else { + alpha = (1 - (value - min) / (max - min)) * Math.PI; + Ro = w / 2 - w / 10; + Ri = Ro - w / 6.666666666666667 * gws; + + Cx = w / 2 + dx; + Cy = h / 1.25 + dy; + + Xo = w / 2 + dx + Ro * Math.cos(alpha); + Yo = h - (h - Cy) + 0 - Ro * Math.sin(alpha); + Xi = w / 2 + dx + Ri * Math.cos(alpha); + Yi = h - (h - Cy) + 0 - Ri * Math.sin(alpha); + + path += "M" + (Cx - Ri) + "," + Cy + " "; + path += "L" + (Cx - Ro) + "," + Cy + " "; + path += "A" + Ro + "," + Ro + " 0 0 1 " + Xo + "," + Yo + " "; + path += "L" + Xi + "," + Yi + " "; + path += "A" + Ri + "," + Ri + " 0 0 0 " + (Cx - Ri) + "," + Cy + " "; + path += "Z "; + + return { path: path }; + } + + // var clear + alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path = null; + }; + + // gauge + this.gauge = this.canvas.path().attr({ + "stroke": "none", + "fill": this.config.gaugeColor, + pki: [this.config.max, this.config.min, this.config.max, this.params.widgetW, this.params.widgetH, this.params.dx, this.params.dy, this.config.gaugeWidthScale, this.config.donut] + }); + this.gauge.id = this.config.id+"-gauge"; + + // level + this.level = this.canvas.path().attr({ + "stroke": "none", + "fill": getColor(this.config.value, (this.config.value - this.config.min) / (this.config.max - this.config.min), this.config.levelColors, this.config.noGradient, this.config.customSectors), + pki: [this.config.min, this.config.min, this.config.max, this.params.widgetW, this.params.widgetH, this.params.dx, this.params.dy, this.config.gaugeWidthScale, this.config.donut] + }); + if(this.config.donut) { + this.level.transform("r" + this.config.donutStartAngle + ", " + (this.params.widgetW/2 + this.params.dx) + ", " + (this.params.widgetH/1.95 + this.params.dy)); + } + this.level.id = this.config.id+"-level"; + + // title + this.txtTitle = this.canvas.text(this.params.titleX, this.params.titleY, this.config.title); + this.txtTitle.attr({ + "font-size":this.params.titleFontSize, + "font-weight":"bold", + "font-family":"Arial", + "fill":this.config.titleFontColor, + "fill-opacity":"1" + }); + setDy(this.txtTitle, this.params.titleFontSize, this.params.titleY); + this.txtTitle.id = this.config.id+"-txttitle"; + + // value + this.txtValue = this.canvas.text(this.params.valueX, this.params.valueY, 0); + this.txtValue.attr({ + "font-size":this.params.valueFontSize, + "font-weight":"bold", + "font-family":"Arial", + "fill":this.config.valueFontColor, + "fill-opacity":"0" + }); + setDy(this.txtValue, this.params.valueFontSize, this.params.valueY); + this.txtValue.id = this.config.id+"-txtvalue"; + + // label + this.txtLabel = this.canvas.text(this.params.labelX, this.params.labelY, this.config.label); + this.txtLabel.attr({ + "font-size":this.params.labelFontSize, + "font-weight":"normal", + "font-family":"Arial", + "fill":this.config.labelFontColor, + "fill-opacity":"0" + }); + setDy(this.txtLabel, this.params.labelFontSize, this.params.labelY); + this.txtLabel.id = this.config.id+"-txtlabel"; + + // min + this.txtMinimum = this.config.min; + if( this.config.humanFriendly ) this.txtMinimum = humanFriendlyNumber( this.config.min, this.config.humanFriendlyDecimal ); + this.txtMin = this.canvas.text(this.params.minX, this.params.minY, this.txtMinimum); + this.txtMin.attr({ + "font-size":this.params.minFontSize, + "font-weight":"normal", + "font-family":"Arial", + "fill":this.config.labelFontColor, + "fill-opacity": (this.config.hideMinMax || this.config.donut)? "0" : "1" + }); + setDy(this.txtMin, this.params.minFontSize, this.params.minY); + this.txtMin.id = this.config.id+"-txtmin"; + + // max + this.txtMaximum = this.config.max; + if( this.config.humanFriendly ) this.txtMaximum = humanFriendlyNumber( this.config.max, this.config.humanFriendlyDecimal ); + this.txtMax = this.canvas.text(this.params.maxX, this.params.maxY, this.txtMaximum); + this.txtMax.attr({ + "font-size":this.params.maxFontSize, + "font-weight":"normal", + "font-family":"Arial", + "fill":this.config.labelFontColor, + "fill-opacity": (this.config.hideMinMax || this.config.donut)? "0" : "1" + }); + setDy(this.txtMax, this.params.maxFontSize, this.params.maxY); + this.txtMax.id = this.config.id+"-txtmax"; + + var defs = this.canvas.canvas.childNodes[1]; + var svg = "http://www.w3.org/2000/svg"; + + if (ie < 9) { + onCreateElementNsReady(function() { + this.generateShadow(svg, defs); + }); + } else { + this.generateShadow(svg, defs); + } + + // var clear + defs, svg = null; + + // execute on each animation frame + function onAnimate() { + if (obj.config.counter) { + var currentValue = obj.level.attr("pki"); + + if(obj.config.textRenderer) { + // this.originalValue = this.config.textRenderer(this.originalValue); + obj.txtValue.attr("text", obj.config.textRenderer(Math.floor(currentValue[0]))); + } else if(obj.config.humanFriendly) { + // this.originalValue = humanFriendlyNumber( this.originalValue, this.config.humanFriendlyDecimal ) + this.config.symbol; + obj.txtValue.attr("text", humanFriendlyNumber( Math.floor(currentValue[0]), obj.config.humanFriendlyDecimal ) + obj.config.symbol); + } else { + // this.originalValue += this.config.symbol; + obj.txtValue.attr("text", (currentValue[0] * 1).toFixed(obj.config.decimals) + obj.config.symbol); + } + + setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY); + currentValue = null; + } + } + + if(!obj.config.counter) { + 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 { + obj.originalValue = (obj.originalValue * 1).toFixed(obj.config.decimals); + } + + obj.txtValue.attr("text", obj.originalValue + obj.config.symbol); + setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY); + } + + //event fired on each animation frame + eve.on("raphael.anim.frame.*", onAnimate); + + // animate gauge level + this.level.animate({pki: [this.config.value, this.config.min, this.config.max, this.params.widgetW, this.params.widgetH, this.params.dx, this.params.dy, this.config.gaugeWidthScale, this.config.donut]}, this.config.startAnimationTime, this.config.startAnimationType); + + // animate value + this.txtValue.animate({"fill-opacity":"1"}, this.config.startAnimationTime, this.config.startAnimationType); + + // animate label + this.txtLabel.animate({"fill-opacity":"1"}, this.config.startAnimationTime, this.config.startAnimationType); +}; + +/** Refresh gauge level */ +JustGage.prototype.refresh = function(val, max) { + + var originalVal, displayVal, color, max = max || null; + + // set new max + if(max !== null) { + this.config.max = max; + + this.txtMaximum = this.config.max; + if( this.config.humanFriendly ) this.txtMaximum = humanFriendlyNumber( this.config.max, this.config.humanFriendlyDecimal ); + this.txtMax.attr({"text" : this.config.max}); + setDy(this.txtMax, this.params.maxFontSize, this.params.maxY); + } + + // overflow values + originalVal = val; + displayVal = val; + if ((val * 1) > (this.config.max * 1)) {val = (this.config.max * 1);} + if ((val * 1) < (this.config.min * 1)) {val = (this.config.min * 1);} + + color = getColor(val, (val - this.config.min) / (this.config.max - this.config.min), this.config.levelColors, this.config.noGradient, this.config.customSectors); + + if(this.config.textRenderer) { + displayVal = this.config.textRenderer(displayVal); + } else if( this.config.humanFriendly ) { + displayVal = humanFriendlyNumber( displayVal, this.config.humanFriendlyDecimal ) + this.config.symbol; + } else { + displayVal = (displayVal * 1).toFixed(this.config.decimals) + this.config.symbol; + } + + if(!this.config.counter) { + this.canvas.getById(this.config.id+"-txtvalue").attr({"text":displayVal}); + setDy(this.canvas.getById(this.config.id+"-txtvalue"), this.params.valueFontSize, this.params.valueY); + } + + this.canvas.getById(this.config.id+"-level").animate({pki: [val, this.config.min, this.config.max, this.params.widgetW, this.params.widgetH, this.params.dx, this.params.dy, this.config.gaugeWidthScale, this.config.donut], "fill":color}, this.config.refreshAnimationTime, this.config.refreshAnimationType); + this.config.value = val * 1; + + // var clear + originalVal, displayVal, color, max = null; +}; + +/** Generate shadow */ +JustGage.prototype.generateShadow = function(svg, defs) { + + var gaussFilter, feOffset, feGaussianBlur, feComposite1, feFlood, feComposite2, feComposite3; + + // FILTER + gaussFilter=document.createElementNS(svg,"filter"); + gaussFilter.setAttribute("id", this.config.id + "-inner-shadow"); + defs.appendChild(gaussFilter); + + // offset + feOffset = document.createElementNS(svg,"feOffset"); + feOffset.setAttribute("dx", 0); + feOffset.setAttribute("dy", this.config.shadowVerticalOffset); + gaussFilter.appendChild(feOffset); + + // blur + feGaussianBlur = document.createElementNS(svg,"feGaussianBlur"); + feGaussianBlur.setAttribute("result","offset-blur"); + feGaussianBlur.setAttribute("stdDeviation", this.config.shadowSize); + gaussFilter.appendChild(feGaussianBlur); + + // composite 1 + feComposite1 = document.createElementNS(svg,"feComposite"); + feComposite1.setAttribute("operator","out"); + feComposite1.setAttribute("in", "SourceGraphic"); + feComposite1.setAttribute("in2","offset-blur"); + feComposite1.setAttribute("result","inverse"); + gaussFilter.appendChild(feComposite1); + + // flood + feFlood = document.createElementNS(svg,"feFlood"); + feFlood.setAttribute("flood-color","black"); + feFlood.setAttribute("flood-opacity", this.config.shadowOpacity); + feFlood.setAttribute("result","color"); + gaussFilter.appendChild(feFlood); + + // composite 2 + feComposite2 = document.createElementNS(svg,"feComposite"); + feComposite2.setAttribute("operator","in"); + feComposite2.setAttribute("in", "color"); + feComposite2.setAttribute("in2","inverse"); + feComposite2.setAttribute("result","shadow"); + gaussFilter.appendChild(feComposite2); + + // composite 3 + feComposite3 = document.createElementNS(svg,"feComposite"); + feComposite3.setAttribute("operator","over"); + feComposite3.setAttribute("in", "shadow"); + feComposite3.setAttribute("in2","SourceGraphic"); + gaussFilter.appendChild(feComposite3); + + // set shadow + if (!this.config.hideInnerShadow) { + this.canvas.canvas.childNodes[2].setAttribute("filter", "url(#" + this.config.id + "-inner-shadow)"); + this.canvas.canvas.childNodes[3].setAttribute("filter", "url(#" + this.config.id + "-inner-shadow)"); + } + + // var clear + gaussFilter, feOffset, feGaussianBlur, feComposite1, feFlood, feComposite2, feComposite3 = null; + +}; + +/** Get color for value */ +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) { + return custSec[i].color; + } + } + } + + no = col.length; + if (no === 1) return col[0]; + inc = (noGradient) ? (1 / no) : (1 / (no - 1)); + colors = []; + for (var 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 } }; + } + + if(pct === 0) { + return 'rgb(' + [colors[0].color.r, colors[0].color.g, colors[0].color.b].join(',') + ')'; + } + + for (var j = 0; j < colors.length; j++) { + if (pct <= colors[j].pct) { + if (noGradient) { + return 'rgb(' + [colors[j].color.r, colors[j].color.g, colors[j].color.b].join(',') + ')'; + } else { + lower = colors[j - 1]; + upper = colors[j]; + range = upper.pct - lower.pct; + rangePct = (pct - lower.pct) / range; + pctLower = 1 - rangePct; + pctUpper = rangePct; + color = { + r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper), + g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper), + b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper) + }; + return 'rgb(' + [color.r, color.g, color.b].join(',') + ')'; + } + } + } + +} + +/** Fix Raphael display:none tspan dy attribute bug */ +function setDy(elem, fontSize, txtYpos) { + if ((!ie || ie > 9) && (elem.node.firstChild.attributes.dy)) { + elem.node.firstChild.attributes.dy.value = 0; + } +} + +/** Random integer */ +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; +} + +/** Human friendly number suffix - From: http://stackoverflow.com/questions/2692323/code-golf-friendly-number-abbreviator */ +function humanFriendlyNumber( n, d ) { + var p, d2, i, s; + + 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; +} + +/** Get style */ +function getStyle(oElm, strCssRule){ + var strValue = ""; + if(document.defaultView && document.defaultView.getComputedStyle){ + console.log(oElm); + strValue = document.defaultView.getComputedStyle(oElm).getPropertyValue(strCssRule); + console.log(strValue, strCssRule); + } + else if(oElm.currentStyle){ + strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ + return p1.toUpperCase(); + }); + strValue = oElm.currentStyle[strCssRule]; + } + return strValue; +} + +/** Create Element NS Ready */ +function onCreateElementNsReady(func) { + if (document.createElementNS !== undefined) { + func(); + } else { + setTimeout(function() { onCreateElementNsReady(func); }, 100); + } +} + +/** Get IE version */ +// ---------------------------------------------------------- +// A short snippet for detecting versions of IE in JavaScript +// without resorting to user-agent sniffing +// ---------------------------------------------------------- +// If you're not in IE (or IE version is less than 5) then: +// ie === undefined +// If you're in IE (>=5) then you can determine which version: +// ie === 7; // IE7 +// Thus, to detect IE: +// if (ie) {} +// And to detect the version: +// ie === 6 // IE6 +// ie > 7 // IE8, IE9 ... +// ie < 9 // Anything less than IE9 +// ---------------------------------------------------------- +// UPDATE: Now using Live NodeList idea from @jdalton +var ie = (function(){ + + var undef, + v = 3, + div = document.createElement('div'), + all = div.getElementsByTagName('i'); + + while ( + div.innerHTML = '', + all[0] + ); + return v > 4 ? v : undef; +}()); \ No newline at end of file