justgage-rails 1.0.1.1

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in raphael-rails.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2012 Turadg Aleahmad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+![justGage](https://dl.dropbox.com/u/6211055/IMG/justgage_logo.png)
+
+JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.
+
+Checkout http://justgage.com for details, demos, current release and more.
+
+## Usage
+
+In your Gemfile, add:
+
+```ruby
+gem 'justgage-rails'
+```
+
+## Require Javascript
+
+Add the following to your application.js:
+
+```javascript
+//= require raphael
+//= require justgage
+```
+
+
+## Credits
+
+[JustGage](https://github.com/toorshia/justgage) by [Bojan Djuricic](https://github.com/toorshia/)
+
+Rails gem modeled after [raphael-rails](https://github.com/campreb/raphael-rails) by [Cameron Prebble](https://github.com/campreb)

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/lib/justgage-rails.rb

@@ -0,0 +1,6 @@
+module JustGage
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/justgage-rails/version.rb

@@ -0,0 +1,5 @@
+module JustGage
+  module Rails
+    VERSION = "1.0.1.1"
+  end
+end

data/vendor/assets/javascripts/justgage-min.js

@@ -0,0 +1,12 @@
+/**
+ * JustGage - a handy JavaScript plugin for generating and animating nice & clean dashboard gauges.
+ * Copyright (c) 2012 Bojan Djuricic - pindjur(at)gmail(dot)com | http://www.madcog.com
+ * Licensed under MIT.
+ * Date: 31/07/2012
+ * @author Bojan Djuricic  (@Toorshia)
+ * @version 1.0
+ *
+ * http://www.justgage.com
+ */
+ 
+JustGage=function(x){if(!x.id){alert("Missing id parameter for gauge!");return false}if(!document.getElementById(x.id)){alert('No element with id: "'+x.id+'" found!');return false}this.config={id:x.id,title:(x.title)?x.title:"Title",titleFontColor:(x.titleFontColor)?x.titleFontColor:"#999999",value:(x.value)?x.value:0,valueFontColor:(x.valueFontColor)?x.valueFontColor:"#010101",min:(x.min)?x.min:0,max:(x.max)?x.max:100,showMinMax:(x.showMinMax!=null)?x.showMinMax:true,gaugeWidthScale:(x.gaugeWidthScale)?x.gaugeWidthScale:1,gaugeColor:(x.gaugeColor)?x.gaugeColor:"#edebeb",label:(x.label)?x.label:"",showInnerShadow:(x.showInnerShadow!=null)?x.showInnerShadow:true,shadowOpacity:(x.shadowOpacity)?x.shadowOpacity:0.2,shadowSize:(x.shadowSize)?x.shadowSize:5,shadowVerticalOffset:(x.shadowVerticalOffset)?x.shadowVerticalOffset:3,levelColors:(x.levelColors)?x.levelColors:percentColors,levelColorsGradient:(x.levelColorsGradient!=null)?x.levelColorsGradient:true,labelFontColor:(x.labelFontColor)?x.labelFontColor:"#b3b3b3",startAnimationTime:(x.startAnimationTime)?x.startAnimationTime:700,startAnimationType:(x.startAnimationType)?x.startAnimationType:">",refreshAnimationTime:(x.refreshAnimationTime)?x.refreshAnimationTime:700,refreshAnimationType:(x.refreshAnimationType)?x.refreshAnimationType:">"};if(x.value>this.config.max){this.config.value=this.config.max}if(x.value<this.config.min){this.config.value=this.config.min}this.originalValue=x.value;this.canvas=Raphael(this.config.id,"100%","100%");var d=getStyle(document.getElementById(this.config.id),"width").slice(0,-2)*1;var q=getStyle(document.getElementById(this.config.id),"height").slice(0,-2)*1;var c,l;if((d/q)>1.25){c=1.25*q;l=q}else{c=d;l=d/1.25}var i=(d-c)/2;var g=(q-l)/2;var s=((l/8)>10)?(l/10):10;var n=i+c/2;var m=g+l/6.5;var k=((l/6.4)>16)?(l/6.4):16;var r=i+c/2;var p=g+l/1.4;var b=((l/16)>10)?(l/16):10;var f=i+c/2;var e=p+k/2+6;var j=((l/16)>10)?(l/16):10;var w=i+(c/10)+(c/6.666666666666667*this.config.gaugeWidthScale)/2;var v=g+l/1.126760563380282;var h=((l/16)>10)?(l/16):10;var u=i+c-(c/10)-(c/6.666666666666667*this.config.gaugeWidthScale)/2;var t=g+l/1.126760563380282;this.params={canvasW:d,canvasH:q,widgetW:c,widgetH:l,dx:i,dy:g,titleFontSize:s,titleX:n,titleY:m,valueFontSize:k,valueX:r,valueY:p,labelFontSize:b,labelX:f,labelY:e,minFontSize:j,minX:w,minY:v,maxFontSize:h,maxX:u,maxY:t};this.canvas.customAttributes.pki=function(K,L,N,E,O,F,D,y){var B=(1-(K-L)/(N-L))*Math.PI,G=E/2-E/10,J=G-E/6.666666666666667*y,C=E/2+F,A=O/1.25+D,H=E/2+F+G*Math.cos(B),P=O-(O-A)+D-G*Math.sin(B),M=E/2+F+J*Math.cos(B),z=O-(O-A)+D-J*Math.sin(B),I;I+="M"+(C-J)+","+A+" ";I+="L"+(C-G)+","+A+" ";I+="A"+G+","+G+" 0 0,1 "+H+","+P+" ";I+="L"+M+","+z+" ";I+="A"+J+","+J+" 0 0,0 "+(C-J)+","+A+" ";I+="z ";return{path:I}};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.gauge.id=this.config.id+"-gauge";this.level=this.canvas.path().attr({stroke:"none",fill:getColorForPercentage((this.config.value-this.config.min)/(this.config.max-this.config.min),this.config.levelColors,this.config.levelColorsGradient),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.level.id=this.config.id+"-level";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"});this.txtTitle.id=this.config.id+"-txttitle";this.txtValue=this.canvas.text(this.params.valueX,this.params.valueY,this.originalValue);this.txtValue.attr({"font-size":this.params.valueFontSize,"font-weight":"bold","font-family":"Arial",fill:this.config.valueFontColor,"fill-opacity":"0"});this.txtValue.id=this.config.id+"-txtvalue";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"});this.txtLabel.id=this.config.id+"-txtlabel";this.txtMin=this.canvas.text(this.params.minX,this.params.minY,this.config.min);this.txtMin.attr({"font-size":this.params.minFontSize,"font-weight":"normal","font-family":"Arial",fill:this.config.labelFontColor,"fill-opacity":(this.config.showMinMax==true)?"1":"0"});this.txtMin.id=this.config.id+"-txtmin";this.txtMax=this.canvas.text(this.params.maxX,this.params.maxY,this.config.max);this.txtMax.attr({"font-size":this.params.maxFontSize,"font-weight":"normal","font-family":"Arial",fill:this.config.labelFontColor,"fill-opacity":(this.config.showMinMax==true)?"1":"0"});this.txtMax.id=this.config.id+"-txtmax";var a=this.canvas.canvas.childNodes[1];var o="http://www.w3.org/2000/svg";if(ie<9){onCreateElementNsReady(function(){this.generateShadow()})}else{this.generateShadow(o,a)}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.startAnimationTime,this.config.startAnimationType);this.txtValue.animate({"fill-opacity":"1"},this.config.startAnimationTime,this.config.startAnimationType);this.txtLabel.animate({"fill-opacity":"1"},this.config.startAnimationTime,this.config.startAnimationType)};JustGage.prototype.refresh=function(b){originalVal=b;if(b>this.config.max){b=this.config.max}if(b<this.config.min){b=this.config.min}var a=getColorForPercentage((b-this.config.min)/(this.config.max-this.config.min),this.config.levelColors,this.config.levelColorsGradient);this.canvas.getById(this.config.id+"-txtvalue").attr({text:originalVal});this.canvas.getById(this.config.id+"-level").animate({pki:[b,this.config.min,this.config.max,this.params.widgetW,this.params.widgetH,this.params.dx,this.params.dy,this.config.gaugeWidthScale],fill:a},this.config.refreshAnimationTime,this.config.refreshAnimationType)};var percentColors=["#a9d70b","#f9c802","#ff0000"];JustGage.prototype.generateShadow=function(f,e){var h=document.createElementNS(f,"filter");h.setAttribute("id",this.config.id+"-inner-shadow");e.appendChild(h);var i=document.createElementNS(f,"feOffset");i.setAttribute("dx",0);i.setAttribute("dy",this.config.shadowVerticalOffset);h.appendChild(i);var g=document.createElementNS(f,"feGaussianBlur");g.setAttribute("result","offset-blur");g.setAttribute("stdDeviation",this.config.shadowSize);h.appendChild(g);var d=document.createElementNS(f,"feComposite");d.setAttribute("operator","out");d.setAttribute("in","SourceGraphic");d.setAttribute("in2","offset-blur");d.setAttribute("result","inverse");h.appendChild(d);var c=document.createElementNS(f,"feFlood");c.setAttribute("flood-color","black");c.setAttribute("flood-opacity",this.config.shadowOpacity);c.setAttribute("result","color");h.appendChild(c);var b=document.createElementNS(f,"feComposite");b.setAttribute("operator","in");b.setAttribute("in","color");b.setAttribute("in2","inverse");b.setAttribute("result","shadow");h.appendChild(b);var a=document.createElementNS(f,"feComposite");a.setAttribute("operator","over");a.setAttribute("in","shadow");a.setAttribute("in2","SourceGraphic");h.appendChild(a);if(this.config.showInnerShadow==true){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 getColorForPercentage=function(b,c,d){var a=c.length;if(a===1){return c[0]}var f=(d)?(1/(a-1)):(1/a);var g=new Array();for(var n=0;n<c.length;n++){var h=(d)?(f*n):(f*(n+1));var r=parseInt((cutHex(c[n])).substring(0,2),16);var e=parseInt((cutHex(c[n])).substring(2,4),16);var k=parseInt((cutHex(c[n])).substring(4,6),16);g[n]={pct:h,color:{r:r,g:e,b:k}}}if(b==0){return"rgb("+[g[0].color.r,g[0].color.g,g[0].color.b].join(",")+")"}for(var n=0;n<g.length;n++){if(b<=g[n].pct){if(d==true){var q=g[n-1];var o=g[n];var j=o.pct-q.pct;var m=(b-q.pct)/j;var s=1-m;var p=m;var l={r:Math.floor(q.color.r*s+o.color.r*p),g:Math.floor(q.color.g*s+o.color.g*p),b:Math.floor(q.color.b*s+o.color.b*p)};return"rgb("+[l.r,l.g,l.b].join(",")+")"}else{return"rgb("+[g[n].color.r,g[n].color.g,g[n].color.b].join(",")+")"}}}};function getRandomInt(b,a){return Math.floor(Math.random()*(a-b+1))+b}function cutHex(a){return(a.charAt(0)=="#")?a.substring(1,7):a}function getStyle(a,b){var c="";if(document.defaultView&&document.defaultView.getComputedStyle){c=document.defaultView.getComputedStyle(a,"").getPropertyValue(b)}else{if(a.currentStyle){b=b.replace(/\-(\w)/g,function(d,e){return e.toUpperCase()});c=a.currentStyle[b]}}return c}function onCreateElementNsReady(a){if(document.createElementNS!=undefined){a()}else{setTimeout(function(){onCreateElementNsReady(a)},100)}}var ie=(function(){var c,a=3,d=document.createElement("div"),b=d.getElementsByTagName("i");while(d.innerHTML="<!--[if gt IE "+(++a)+"]><i></i><![endif]-->",b[0]){}return a>4?a:c}());

data/vendor/assets/javascripts/justgage.js

@@ -0,0 +1,474 @@
+/**
+ * JustGage - a handy JavaScript plugin for generating and animating nice & clean dashboard gauges.
+ * Copyright (c) 2012 Bojan Djuricic - pindjur(at)gmail(dot)com | http://www.madcog.com
+ * Licensed under MIT.
+ * Date: 31/07/2012
+ * @author Bojan Djuricic  (@Toorshia)
+ * @version 1.0
+ *
+ * http://www.justgage.com
+ */
+
+JustGage = function(config) { 
+  
+  if (!config.id) {alert("Missing id parameter for gauge!"); return false;} 
+  if (!document.getElementById(config.id)) {alert("No element with id: \""+config.id+"\" found!"); return false;} 
+  
+  // configurable parameters
+  this.config = 
+  {
+    // id : string 
+    // this is container element id
+    id : config.id,
+    
+    // title : string
+    // gauge title 
+    title : (config.title) ? config.title : "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",
+    
+    // min : int
+    // min value
+    min : (config.min) ? config.min : 0,
+    
+    // max : int
+    // max value
+    max : (config.max) ? config.max : 100,
+    
+    // showMinMax : bool
+    // hide or display min and max values
+    showMinMax : (config.showMinMax != null) ? config.showMinMax : true,
+    
+    // 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 : "",
+    
+    // showInnerShadow : bool
+    // give gauge element small amount of inner shadow 
+    showInnerShadow : (config.showInnerShadow != null) ? config.showInnerShadow : true,
+    
+    // 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 : percentColors,
+    
+    // levelColorsGradient : bool
+    // whether to use gradual color change for value, or sector-based
+    levelColorsGradient : (config.levelColorsGradient != null) ? config.levelColorsGradient : true,
+    
+    // labelFontColor : string
+    // color of label showing label under value
+    labelFontColor : (config.labelFontColor) ? config.labelFontColor : "#b3b3b3",
+    
+    // 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 : ">"
+  };
+  
+  // overflow values
+  if (config.value > this.config.max) this.config.value = this.config.max; 
+  if (config.value < this.config.min) this.config.value = this.config.min;
+  this.originalValue = config.value;
+  
+  // canvas
+  this.canvas = Raphael(this.config.id, "100%", "100%");
+  
+  // canvas dimensions
+  //var canvasW = document.getElementById(this.config.id).clientWidth;
+  //var canvasH = document.getElementById(this.config.id).clientHeight;
+  var canvasW = getStyle(document.getElementById(this.config.id), "width").slice(0, -2) * 1;
+  var canvasH = getStyle(document.getElementById(this.config.id), "height").slice(0, -2) * 1;
+  
+  // widget dimensions
+  var widgetW, widgetH;
+  if ((canvasW / canvasH) > 1.25) {
+    widgetW = 1.25 * canvasH;
+    widgetH = canvasH;
+  } else {
+    widgetW = canvasW;
+    widgetH = canvasW / 1.25;
+  }
+  
+  // delta 
+  var dx = (canvasW - widgetW)/2;
+  var dy = (canvasH - widgetH)/2;
+  
+  // title 
+  var titleFontSize = ((widgetH / 8) > 10) ? (widgetH / 10) : 10;
+  var titleX = dx + widgetW / 2;
+  var titleY = dy + widgetH / 6.5;
+  
+  // value 
+  var valueFontSize = ((widgetH / 6.4) > 16) ? (widgetH / 6.4) : 16;
+  var valueX = dx + widgetW / 2;
+  var valueY = dy + widgetH / 1.4;
+  
+  // label 
+  var labelFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
+  var labelX = dx + widgetW / 2;
+  //var labelY = dy + widgetH / 1.126760563380282;
+  var labelY = valueY + valueFontSize / 2 + 6;
+  
+  // min 
+  var minFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
+  var minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * this.config.gaugeWidthScale) / 2 ;
+  var minY = dy + widgetH / 1.126760563380282;
+  
+  // max 
+  var maxFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
+  var maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * this.config.gaugeWidthScale) / 2 ;
+  var maxY = dy + widgetH / 1.126760563380282;
+  
+  // 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
+  };
+  
+  // pki - custom attribute for generating gauge paths
+  this.canvas.customAttributes.pki = function (value, min, max, w, h, dx, dy, gws) {
+    
+       var 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) + dy - Ro * Math.sin(alpha),
+          Xi = w / 2 + dx + Ri * Math.cos(alpha),
+          Yi = h - (h - Cy) + dy - Ri * Math.sin(alpha),
+          path;
+    
+      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 };
+  }  
+  
+  // 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.gauge.id = this.config.id+"-gauge";
+  
+  // level
+  this.level = this.canvas.path().attr({
+    "stroke": "none",
+    "fill": getColorForPercentage((this.config.value - this.config.min) / (this.config.max - this.config.min), this.config.levelColors, this.config.levelColorsGradient),  
+    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.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"         
+  });
+  this.txtTitle.id = this.config.id+"-txttitle";
+  
+  // value
+  this.txtValue = this.canvas.text(this.params.valueX, this.params.valueY, this.originalValue);
+  this.txtValue. attr({
+    "font-size":this.params.valueFontSize,
+    "font-weight":"bold",
+    "font-family":"Arial",
+    "fill":this.config.valueFontColor,
+    "fill-opacity":"0"          
+  });
+  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"
+  });
+  this.txtLabel.id = this.config.id+"-txtlabel";
+  
+  // min
+  this.txtMin = this.canvas.text(this.params.minX, this.params.minY, this.config.min);
+  this.txtMin. attr({
+    "font-size":this.params.minFontSize,
+    "font-weight":"normal",
+    "font-family":"Arial",
+    "fill":this.config.labelFontColor,   
+    "fill-opacity": (this.config.showMinMax == true)? "1" : "0"
+  });
+  this.txtMin.id = this.config.id+"-txtmin";
+  
+  // max
+  this.txtMax = this.canvas.text(this.params.maxX, this.params.maxY, this.config.max);
+  this.txtMax. attr({
+    "font-size":this.params.maxFontSize,
+    "font-weight":"normal",
+    "font-family":"Arial",
+    "fill":this.config.labelFontColor,   
+    "fill-opacity": (this.config.showMinMax == true)? "1" : "0"
+  });
+  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();
+    });  
+  } else {
+    this.generateShadow(svg, defs);
+  }
+  
+  // animate 
+  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.startAnimationTime, this.config.startAnimationType);
+  
+  this.txtValue.animate({"fill-opacity":"1"}, this.config.startAnimationTime, this.config.startAnimationType); 
+  this.txtLabel.animate({"fill-opacity":"1"}, this.config.startAnimationTime, this.config.startAnimationType);  
+};
+
+// refresh gauge level
+JustGage.prototype.refresh = function(val) {
+  // overflow values
+  originalVal = val;
+  if (val > this.config.max) {val = this.config.max;}
+  if (val < this.config.min) {val = this.config.min;}
+    
+  var color = getColorForPercentage((val - this.config.min) / (this.config.max - this.config.min), this.config.levelColors, this.config.levelColorsGradient);
+  this.canvas.getById(this.config.id+"-txtvalue").attr({"text":originalVal});
+  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], "fill":color},  this.config.refreshAnimationTime, this.config.refreshAnimationType);
+};
+
+var percentColors = [
+  "#a9d70b",
+  "#f9c802",
+  "#ff0000"
+]
+
+JustGage.prototype.generateShadow = function(svg, defs) {
+    // FILTER
+    var gaussFilter=document.createElementNS(svg,"filter");
+    gaussFilter.setAttribute("id", this.config.id + "-inner-shadow");
+    defs.appendChild(gaussFilter);
+    
+    // offset
+    var feOffset = document.createElementNS(svg,"feOffset");
+    feOffset.setAttribute("dx", 0);
+    feOffset.setAttribute("dy", this.config.shadowVerticalOffset);
+    gaussFilter.appendChild(feOffset);
+    
+    // blur
+    var feGaussianBlur = document.createElementNS(svg,"feGaussianBlur");
+    feGaussianBlur.setAttribute("result","offset-blur");
+    feGaussianBlur.setAttribute("stdDeviation", this.config.shadowSize);
+    gaussFilter.appendChild(feGaussianBlur);
+    
+    // composite 1
+    var 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
+    var 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
+    var 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
+    var 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.showInnerShadow == true) {
+      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 getColorForPercentage = function(pct, col, grad) {
+    
+    var no = col.length;
+    if (no === 1) return col[0];
+    var inc = (grad) ? (1 / (no - 1)) : (1 / no);
+    var colors = new Array();
+    for (var i = 0; i < col.length; i++) {
+      var percentage = (grad) ? (inc * i) : (inc * (i + 1));
+      var rval = parseInt((cutHex(col[i])).substring(0,2),16);
+      var gval = parseInt((cutHex(col[i])).substring(2,4),16);
+      var 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 i = 0; i < colors.length; i++) {
+          if (pct <= colors[i].pct) {
+            if (grad == true) {
+              var lower = colors[i - 1];
+              var upper = colors[i];
+              var range = upper.pct - lower.pct;
+              var rangePct = (pct - lower.pct) / range;
+              var pctLower = 1 - rangePct;
+              var pctUpper = rangePct;
+              var 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(',') + ')';
+            } else {
+              return 'rgb(' + [colors[i].color.r, colors[i].color.g, colors[i].color.b].join(',') + ')'; 
+            }
+          }
+      }
+} 
+
+function getRandomInt (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}    
+
+function cutHex(str) {return (str.charAt(0)=="#") ? str.substring(1,7):str}
+
+function getStyle(oElm, strCssRule){
+	var strValue = "";
+	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){
+			return p1.toUpperCase();
+		});
+		strValue = oElm.currentStyle[strCssRule];
+	}
+	return strValue;
+}
+
+ function onCreateElementNsReady(func) {
+  if (document.createElementNS != undefined) {
+    func();
+  } else {
+    setTimeout(function() { onCreateElementNsReady(func); }, 100);
+  }
+}
+
+// ----------------------------------------------------------
+// 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 = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
+        all[0]
+    );
+
+    return v > 4 ? v : undef;
+
+}());

metadata

@@ -0,0 +1,70 @@
+--- !ruby/object:Gem::Specification
+name: justgage-rails
+version: !ruby/object:Gem::Version
+  version: 1.0.1.1
+  prerelease: 
+platform: ruby
+authors:
+- Turadg Aleahmad
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-11-19 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: raphael-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '2.1'
+description: JustGage JS as a Rubygem for use in the Rails asset pipeline
+email:
+- turadg@aleahmad.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- LICENSE
+- Rakefile
+- Gemfile
+- lib/justgage-rails/version.rb
+- lib/justgage-rails.rb
+- vendor/assets/javascripts/justgage-min.js
+- vendor/assets/javascripts/justgage.js
+- vendor/cache/raphael-rails-2.1.0.gem
+homepage: http://github.com/Geknowm/justgage-rails
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: JustGage JS as a Rubygem
+test_files: []