justgage-rails 1.0.1.1

Sign up to get free protection for your applications and to get access to all the features.
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source "http://rubygems.org"
2
+
3
+ # Specify your gem's dependencies in raphael-rails.gemspec
4
+ gemspec
data/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License
2
+
3
+ Copyright (c) 2012 Turadg Aleahmad
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,29 @@
1
+ ![justGage](https://dl.dropbox.com/u/6211055/IMG/justgage_logo.png)
2
+
3
+ JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.
4
+
5
+ Checkout http://justgage.com for details, demos, current release and more.
6
+
7
+ ## Usage
8
+
9
+ In your Gemfile, add:
10
+
11
+ ```ruby
12
+ gem 'justgage-rails'
13
+ ```
14
+
15
+ ## Require Javascript
16
+
17
+ Add the following to your application.js:
18
+
19
+ ```javascript
20
+ //= require raphael
21
+ //= require justgage
22
+ ```
23
+
24
+
25
+ ## Credits
26
+
27
+ [JustGage](https://github.com/toorshia/justgage) by [Bojan Djuricic](https://github.com/toorshia/)
28
+
29
+ Rails gem modeled after [raphael-rails](https://github.com/campreb/raphael-rails) by [Cameron Prebble](https://github.com/campreb)
data/Rakefile ADDED
@@ -0,0 +1,2 @@
1
+ require 'bundler'
2
+ Bundler::GemHelper.install_tasks
@@ -0,0 +1,6 @@
1
+ module JustGage
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -0,0 +1,5 @@
1
+ module JustGage
2
+ module Rails
3
+ VERSION = "1.0.1.1"
4
+ end
5
+ end
@@ -0,0 +1,12 @@
1
+ /**
2
+ * JustGage - a handy JavaScript plugin for generating and animating nice & clean dashboard gauges.
3
+ * Copyright (c) 2012 Bojan Djuricic - pindjur(at)gmail(dot)com | http://www.madcog.com
4
+ * Licensed under MIT.
5
+ * Date: 31/07/2012
6
+ * @author Bojan Djuricic (@Toorshia)
7
+ * @version 1.0
8
+ *
9
+ * http://www.justgage.com
10
+ */
11
+
12
+ 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}());
@@ -0,0 +1,474 @@
1
+ /**
2
+ * JustGage - a handy JavaScript plugin for generating and animating nice & clean dashboard gauges.
3
+ * Copyright (c) 2012 Bojan Djuricic - pindjur(at)gmail(dot)com | http://www.madcog.com
4
+ * Licensed under MIT.
5
+ * Date: 31/07/2012
6
+ * @author Bojan Djuricic (@Toorshia)
7
+ * @version 1.0
8
+ *
9
+ * http://www.justgage.com
10
+ */
11
+
12
+ JustGage = function(config) {
13
+
14
+ if (!config.id) {alert("Missing id parameter for gauge!"); return false;}
15
+ if (!document.getElementById(config.id)) {alert("No element with id: \""+config.id+"\" found!"); return false;}
16
+
17
+ // configurable parameters
18
+ this.config =
19
+ {
20
+ // id : string
21
+ // this is container element id
22
+ id : config.id,
23
+
24
+ // title : string
25
+ // gauge title
26
+ title : (config.title) ? config.title : "Title",
27
+
28
+ // titleFontColor : string
29
+ // color of gauge title
30
+ titleFontColor : (config.titleFontColor) ? config.titleFontColor : "#999999",
31
+
32
+ // value : int
33
+ // value gauge is showing
34
+ value : (config.value) ? config.value : 0,
35
+
36
+ // valueFontColor : string
37
+ // color of label showing current value
38
+ valueFontColor : (config.valueFontColor) ? config.valueFontColor : "#010101",
39
+
40
+ // min : int
41
+ // min value
42
+ min : (config.min) ? config.min : 0,
43
+
44
+ // max : int
45
+ // max value
46
+ max : (config.max) ? config.max : 100,
47
+
48
+ // showMinMax : bool
49
+ // hide or display min and max values
50
+ showMinMax : (config.showMinMax != null) ? config.showMinMax : true,
51
+
52
+ // gaugeWidthScale : float
53
+ // width of the gauge element
54
+ gaugeWidthScale : (config.gaugeWidthScale) ? config.gaugeWidthScale : 1.0,
55
+
56
+ // gaugeColor : string
57
+ // background color of gauge element
58
+ gaugeColor : (config.gaugeColor) ? config.gaugeColor : "#edebeb",
59
+
60
+ // label : string
61
+ // text to show below value
62
+ label : (config.label) ? config.label : "",
63
+
64
+ // showInnerShadow : bool
65
+ // give gauge element small amount of inner shadow
66
+ showInnerShadow : (config.showInnerShadow != null) ? config.showInnerShadow : true,
67
+
68
+ // shadowOpacity : int
69
+ // 0 ~ 1
70
+ shadowOpacity : (config.shadowOpacity) ? config.shadowOpacity : 0.2,
71
+
72
+ // shadowSize: int
73
+ // inner shadow size
74
+ shadowSize : (config.shadowSize) ? config.shadowSize : 5,
75
+
76
+ // shadowVerticalOffset : int
77
+ // how much shadow is offset from top
78
+ shadowVerticalOffset : (config.shadowVerticalOffset) ? config.shadowVerticalOffset : 3,
79
+
80
+ // levelColors : string[]
81
+ // colors of indicator, from lower to upper, in RGB format
82
+ levelColors : (config.levelColors) ? config.levelColors : percentColors,
83
+
84
+ // levelColorsGradient : bool
85
+ // whether to use gradual color change for value, or sector-based
86
+ levelColorsGradient : (config.levelColorsGradient != null) ? config.levelColorsGradient : true,
87
+
88
+ // labelFontColor : string
89
+ // color of label showing label under value
90
+ labelFontColor : (config.labelFontColor) ? config.labelFontColor : "#b3b3b3",
91
+
92
+ // startAnimationTime : int
93
+ // length of initial animation
94
+ startAnimationTime : (config.startAnimationTime) ? config.startAnimationTime : 700,
95
+
96
+ // startAnimationType : string
97
+ // type of initial animation (linear, >, <, <>, bounce)
98
+ startAnimationType : (config.startAnimationType) ? config.startAnimationType : ">",
99
+
100
+ // refreshAnimationTime : int
101
+ // length of refresh animation
102
+ refreshAnimationTime : (config.refreshAnimationTime) ? config.refreshAnimationTime : 700,
103
+
104
+ // refreshAnimationType : string
105
+ // type of refresh animation (linear, >, <, <>, bounce)
106
+ refreshAnimationType : (config.refreshAnimationType) ? config.refreshAnimationType : ">"
107
+ };
108
+
109
+ // overflow values
110
+ if (config.value > this.config.max) this.config.value = this.config.max;
111
+ if (config.value < this.config.min) this.config.value = this.config.min;
112
+ this.originalValue = config.value;
113
+
114
+ // canvas
115
+ this.canvas = Raphael(this.config.id, "100%", "100%");
116
+
117
+ // canvas dimensions
118
+ //var canvasW = document.getElementById(this.config.id).clientWidth;
119
+ //var canvasH = document.getElementById(this.config.id).clientHeight;
120
+ var canvasW = getStyle(document.getElementById(this.config.id), "width").slice(0, -2) * 1;
121
+ var canvasH = getStyle(document.getElementById(this.config.id), "height").slice(0, -2) * 1;
122
+
123
+ // widget dimensions
124
+ var widgetW, widgetH;
125
+ if ((canvasW / canvasH) > 1.25) {
126
+ widgetW = 1.25 * canvasH;
127
+ widgetH = canvasH;
128
+ } else {
129
+ widgetW = canvasW;
130
+ widgetH = canvasW / 1.25;
131
+ }
132
+
133
+ // delta
134
+ var dx = (canvasW - widgetW)/2;
135
+ var dy = (canvasH - widgetH)/2;
136
+
137
+ // title
138
+ var titleFontSize = ((widgetH / 8) > 10) ? (widgetH / 10) : 10;
139
+ var titleX = dx + widgetW / 2;
140
+ var titleY = dy + widgetH / 6.5;
141
+
142
+ // value
143
+ var valueFontSize = ((widgetH / 6.4) > 16) ? (widgetH / 6.4) : 16;
144
+ var valueX = dx + widgetW / 2;
145
+ var valueY = dy + widgetH / 1.4;
146
+
147
+ // label
148
+ var labelFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
149
+ var labelX = dx + widgetW / 2;
150
+ //var labelY = dy + widgetH / 1.126760563380282;
151
+ var labelY = valueY + valueFontSize / 2 + 6;
152
+
153
+ // min
154
+ var minFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
155
+ var minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * this.config.gaugeWidthScale) / 2 ;
156
+ var minY = dy + widgetH / 1.126760563380282;
157
+
158
+ // max
159
+ var maxFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
160
+ var maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * this.config.gaugeWidthScale) / 2 ;
161
+ var maxY = dy + widgetH / 1.126760563380282;
162
+
163
+ // parameters
164
+ this.params = {
165
+ canvasW : canvasW,
166
+ canvasH : canvasH,
167
+ widgetW : widgetW,
168
+ widgetH : widgetH,
169
+ dx : dx,
170
+ dy : dy,
171
+ titleFontSize : titleFontSize,
172
+ titleX : titleX,
173
+ titleY : titleY,
174
+ valueFontSize : valueFontSize,
175
+ valueX : valueX,
176
+ valueY : valueY,
177
+ labelFontSize : labelFontSize,
178
+ labelX : labelX,
179
+ labelY : labelY,
180
+ minFontSize : minFontSize,
181
+ minX : minX,
182
+ minY : minY,
183
+ maxFontSize : maxFontSize,
184
+ maxX : maxX,
185
+ maxY : maxY
186
+ };
187
+
188
+ // pki - custom attribute for generating gauge paths
189
+ this.canvas.customAttributes.pki = function (value, min, max, w, h, dx, dy, gws) {
190
+
191
+ var alpha = (1 - (value - min) / (max - min)) * Math.PI ,
192
+ Ro = w / 2 - w / 10,
193
+ Ri = Ro - w / 6.666666666666667 * gws,
194
+
195
+ Cx = w / 2 + dx,
196
+ Cy = h / 1.25 + dy,
197
+
198
+ Xo = w / 2 + dx + Ro * Math.cos(alpha),
199
+ Yo = h - (h - Cy) + dy - Ro * Math.sin(alpha),
200
+ Xi = w / 2 + dx + Ri * Math.cos(alpha),
201
+ Yi = h - (h - Cy) + dy - Ri * Math.sin(alpha),
202
+ path;
203
+
204
+ path += "M" + (Cx - Ri) + "," + Cy + " ";
205
+ path += "L" + (Cx - Ro) + "," + Cy + " ";
206
+ path += "A" + Ro + "," + Ro + " 0 0,1 " + Xo + "," + Yo + " ";
207
+ path += "L" + Xi + "," + Yi + " ";
208
+ path += "A" + Ri + "," + Ri + " 0 0,0 " + (Cx - Ri) + "," + Cy + " ";
209
+ path += "z ";
210
+ return { path: path };
211
+ }
212
+
213
+ // gauge
214
+ this.gauge = this.canvas.path().attr({
215
+ "stroke": "none",
216
+ "fill": this.config.gaugeColor,
217
+ 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]
218
+ });
219
+ this.gauge.id = this.config.id+"-gauge";
220
+
221
+ // level
222
+ this.level = this.canvas.path().attr({
223
+ "stroke": "none",
224
+ "fill": getColorForPercentage((this.config.value - this.config.min) / (this.config.max - this.config.min), this.config.levelColors, this.config.levelColorsGradient),
225
+ 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]
226
+ });
227
+ this.level.id = this.config.id+"-level";
228
+
229
+ // title
230
+ this.txtTitle = this.canvas.text(this.params.titleX, this.params.titleY, this.config.title);
231
+ this.txtTitle. attr({
232
+ "font-size":this.params.titleFontSize,
233
+ "font-weight":"bold",
234
+ "font-family":"Arial",
235
+ "fill":this.config.titleFontColor,
236
+ "fill-opacity":"1"
237
+ });
238
+ this.txtTitle.id = this.config.id+"-txttitle";
239
+
240
+ // value
241
+ this.txtValue = this.canvas.text(this.params.valueX, this.params.valueY, this.originalValue);
242
+ this.txtValue. attr({
243
+ "font-size":this.params.valueFontSize,
244
+ "font-weight":"bold",
245
+ "font-family":"Arial",
246
+ "fill":this.config.valueFontColor,
247
+ "fill-opacity":"0"
248
+ });
249
+ this.txtValue.id = this.config.id+"-txtvalue";
250
+
251
+ // label
252
+ this.txtLabel = this.canvas.text(this.params.labelX, this.params.labelY, this.config.label);
253
+ this.txtLabel. attr({
254
+ "font-size":this.params.labelFontSize,
255
+ "font-weight":"normal",
256
+ "font-family":"Arial",
257
+ "fill":this.config.labelFontColor,
258
+ "fill-opacity":"0"
259
+ });
260
+ this.txtLabel.id = this.config.id+"-txtlabel";
261
+
262
+ // min
263
+ this.txtMin = this.canvas.text(this.params.minX, this.params.minY, this.config.min);
264
+ this.txtMin. attr({
265
+ "font-size":this.params.minFontSize,
266
+ "font-weight":"normal",
267
+ "font-family":"Arial",
268
+ "fill":this.config.labelFontColor,
269
+ "fill-opacity": (this.config.showMinMax == true)? "1" : "0"
270
+ });
271
+ this.txtMin.id = this.config.id+"-txtmin";
272
+
273
+ // max
274
+ this.txtMax = this.canvas.text(this.params.maxX, this.params.maxY, this.config.max);
275
+ this.txtMax. attr({
276
+ "font-size":this.params.maxFontSize,
277
+ "font-weight":"normal",
278
+ "font-family":"Arial",
279
+ "fill":this.config.labelFontColor,
280
+ "fill-opacity": (this.config.showMinMax == true)? "1" : "0"
281
+ });
282
+ this.txtMax.id = this.config.id+"-txtmax";
283
+
284
+ var defs = this.canvas.canvas.childNodes[1];
285
+ var svg = "http://www.w3.org/2000/svg";
286
+
287
+
288
+
289
+ if (ie < 9) {
290
+ onCreateElementNsReady(function() {
291
+ this.generateShadow();
292
+ });
293
+ } else {
294
+ this.generateShadow(svg, defs);
295
+ }
296
+
297
+ // animate
298
+ 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);
299
+
300
+ this.txtValue.animate({"fill-opacity":"1"}, this.config.startAnimationTime, this.config.startAnimationType);
301
+ this.txtLabel.animate({"fill-opacity":"1"}, this.config.startAnimationTime, this.config.startAnimationType);
302
+ };
303
+
304
+ // refresh gauge level
305
+ JustGage.prototype.refresh = function(val) {
306
+ // overflow values
307
+ originalVal = val;
308
+ if (val > this.config.max) {val = this.config.max;}
309
+ if (val < this.config.min) {val = this.config.min;}
310
+
311
+ var color = getColorForPercentage((val - this.config.min) / (this.config.max - this.config.min), this.config.levelColors, this.config.levelColorsGradient);
312
+ this.canvas.getById(this.config.id+"-txtvalue").attr({"text":originalVal});
313
+ 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);
314
+ };
315
+
316
+ var percentColors = [
317
+ "#a9d70b",
318
+ "#f9c802",
319
+ "#ff0000"
320
+ ]
321
+
322
+ JustGage.prototype.generateShadow = function(svg, defs) {
323
+ // FILTER
324
+ var gaussFilter=document.createElementNS(svg,"filter");
325
+ gaussFilter.setAttribute("id", this.config.id + "-inner-shadow");
326
+ defs.appendChild(gaussFilter);
327
+
328
+ // offset
329
+ var feOffset = document.createElementNS(svg,"feOffset");
330
+ feOffset.setAttribute("dx", 0);
331
+ feOffset.setAttribute("dy", this.config.shadowVerticalOffset);
332
+ gaussFilter.appendChild(feOffset);
333
+
334
+ // blur
335
+ var feGaussianBlur = document.createElementNS(svg,"feGaussianBlur");
336
+ feGaussianBlur.setAttribute("result","offset-blur");
337
+ feGaussianBlur.setAttribute("stdDeviation", this.config.shadowSize);
338
+ gaussFilter.appendChild(feGaussianBlur);
339
+
340
+ // composite 1
341
+ var feComposite1 = document.createElementNS(svg,"feComposite");
342
+ feComposite1.setAttribute("operator","out");
343
+ feComposite1.setAttribute("in", "SourceGraphic");
344
+ feComposite1.setAttribute("in2","offset-blur");
345
+ feComposite1.setAttribute("result","inverse");
346
+ gaussFilter.appendChild(feComposite1);
347
+
348
+ // flood
349
+ var feFlood = document.createElementNS(svg,"feFlood");
350
+ feFlood.setAttribute("flood-color","black");
351
+ feFlood.setAttribute("flood-opacity", this.config.shadowOpacity);
352
+ feFlood.setAttribute("result","color");
353
+ gaussFilter.appendChild(feFlood);
354
+
355
+ // composite 2
356
+ var feComposite2 = document.createElementNS(svg,"feComposite");
357
+ feComposite2.setAttribute("operator","in");
358
+ feComposite2.setAttribute("in", "color");
359
+ feComposite2.setAttribute("in2","inverse");
360
+ feComposite2.setAttribute("result","shadow");
361
+ gaussFilter.appendChild(feComposite2);
362
+
363
+ // composite 3
364
+ var feComposite3 = document.createElementNS(svg,"feComposite");
365
+ feComposite3.setAttribute("operator","over");
366
+ feComposite3.setAttribute("in", "shadow");
367
+ feComposite3.setAttribute("in2","SourceGraphic");
368
+ gaussFilter.appendChild(feComposite3);
369
+
370
+ // set shadow
371
+ if (this.config.showInnerShadow == true) {
372
+ this.canvas.canvas.childNodes[2].setAttribute("filter", "url(#" + this.config.id + "-inner-shadow)");
373
+ this.canvas.canvas.childNodes[3].setAttribute("filter", "url(#" + this.config.id + "-inner-shadow)");
374
+ }
375
+ }
376
+
377
+ var getColorForPercentage = function(pct, col, grad) {
378
+
379
+ var no = col.length;
380
+ if (no === 1) return col[0];
381
+ var inc = (grad) ? (1 / (no - 1)) : (1 / no);
382
+ var colors = new Array();
383
+ for (var i = 0; i < col.length; i++) {
384
+ var percentage = (grad) ? (inc * i) : (inc * (i + 1));
385
+ var rval = parseInt((cutHex(col[i])).substring(0,2),16);
386
+ var gval = parseInt((cutHex(col[i])).substring(2,4),16);
387
+ var bval = parseInt((cutHex(col[i])).substring(4,6),16);
388
+ colors[i] = { pct: percentage, color: { r: rval, g: gval, b: bval } };
389
+ }
390
+
391
+ if(pct == 0) return 'rgb(' + [colors[0].color.r, colors[0].color.g, colors[0].color.b].join(',') + ')';
392
+ for (var i = 0; i < colors.length; i++) {
393
+ if (pct <= colors[i].pct) {
394
+ if (grad == true) {
395
+ var lower = colors[i - 1];
396
+ var upper = colors[i];
397
+ var range = upper.pct - lower.pct;
398
+ var rangePct = (pct - lower.pct) / range;
399
+ var pctLower = 1 - rangePct;
400
+ var pctUpper = rangePct;
401
+ var color = {
402
+ r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
403
+ g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
404
+ b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
405
+ };
406
+ return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
407
+ } else {
408
+ return 'rgb(' + [colors[i].color.r, colors[i].color.g, colors[i].color.b].join(',') + ')';
409
+ }
410
+ }
411
+ }
412
+ }
413
+
414
+ function getRandomInt (min, max) {
415
+ return Math.floor(Math.random() * (max - min + 1)) + min;
416
+ }
417
+
418
+ function cutHex(str) {return (str.charAt(0)=="#") ? str.substring(1,7):str}
419
+
420
+ function getStyle(oElm, strCssRule){
421
+ var strValue = "";
422
+ if(document.defaultView && document.defaultView.getComputedStyle){
423
+ strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
424
+ }
425
+ else if(oElm.currentStyle){
426
+ strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
427
+ return p1.toUpperCase();
428
+ });
429
+ strValue = oElm.currentStyle[strCssRule];
430
+ }
431
+ return strValue;
432
+ }
433
+
434
+ function onCreateElementNsReady(func) {
435
+ if (document.createElementNS != undefined) {
436
+ func();
437
+ } else {
438
+ setTimeout(function() { onCreateElementNsReady(func); }, 100);
439
+ }
440
+ }
441
+
442
+ // ----------------------------------------------------------
443
+ // A short snippet for detecting versions of IE in JavaScript
444
+ // without resorting to user-agent sniffing
445
+ // ----------------------------------------------------------
446
+ // If you're not in IE (or IE version is less than 5) then:
447
+ // ie === undefined
448
+ // If you're in IE (>=5) then you can determine which version:
449
+ // ie === 7; // IE7
450
+ // Thus, to detect IE:
451
+ // if (ie) {}
452
+ // And to detect the version:
453
+ // ie === 6 // IE6
454
+ // ie > 7 // IE8, IE9 ...
455
+ // ie < 9 // Anything less than IE9
456
+ // ----------------------------------------------------------
457
+
458
+ // UPDATE: Now using Live NodeList idea from @jdalton
459
+
460
+ var ie = (function(){
461
+
462
+ var undef,
463
+ v = 3,
464
+ div = document.createElement('div'),
465
+ all = div.getElementsByTagName('i');
466
+
467
+ while (
468
+ div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
469
+ all[0]
470
+ );
471
+
472
+ return v > 4 ? v : undef;
473
+
474
+ }());
metadata ADDED
@@ -0,0 +1,70 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: justgage-rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.1.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Turadg Aleahmad
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2012-11-19 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: raphael-rails
16
+ requirement: !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: '2.1'
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: '2.1'
30
+ description: JustGage JS as a Rubygem for use in the Rails asset pipeline
31
+ email:
32
+ - turadg@aleahmad.net
33
+ executables: []
34
+ extensions: []
35
+ extra_rdoc_files: []
36
+ files:
37
+ - README.md
38
+ - LICENSE
39
+ - Rakefile
40
+ - Gemfile
41
+ - lib/justgage-rails/version.rb
42
+ - lib/justgage-rails.rb
43
+ - vendor/assets/javascripts/justgage-min.js
44
+ - vendor/assets/javascripts/justgage.js
45
+ - vendor/cache/raphael-rails-2.1.0.gem
46
+ homepage: http://github.com/Geknowm/justgage-rails
47
+ licenses: []
48
+ post_install_message:
49
+ rdoc_options: []
50
+ require_paths:
51
+ - lib
52
+ required_ruby_version: !ruby/object:Gem::Requirement
53
+ none: false
54
+ requirements:
55
+ - - ! '>='
56
+ - !ruby/object:Gem::Version
57
+ version: '0'
58
+ required_rubygems_version: !ruby/object:Gem::Requirement
59
+ none: false
60
+ requirements:
61
+ - - ! '>='
62
+ - !ruby/object:Gem::Version
63
+ version: '0'
64
+ requirements: []
65
+ rubyforge_project:
66
+ rubygems_version: 1.8.24
67
+ signing_key:
68
+ specification_version: 3
69
+ summary: JustGage JS as a Rubygem
70
+ test_files: []