justgage-rails 1.0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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: []