radialIndicator-rails 0.1.0
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.
- checksums.yaml +7 -0
- data/bin/console +14 -0
- data/bin/setup +7 -0
- data/lib/radialIndicator/rails.rb +8 -0
- data/lib/radialIndicator/rails/version.rb +5 -0
- data/vendor/assets/javascripts/angular.radialIndicator.js +49 -0
- data/vendor/assets/javascripts/radialIndicator.js +422 -0
- data/vendor/assets/javascripts/radialIndicator.min.js +7 -0
- metadata +79 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: b79637f1ddc06f863aa739c48f9a2fbdfe3120d2
|
4
|
+
data.tar.gz: 4706224b09ab5a933605e6340df247a6f9bc3b1f
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: a3643c7abf2f7e59017347392687eed4d05ad288588a474b28d6203ebf74058cb302780b85f82b72be38a31e231abb91af96ea8b9ae6df4c05d3c354971db64d
|
7
|
+
data.tar.gz: 5b31f66ff9cea5fb09db9ecfafd76904153c2bcafd0a07c8422822a41bb1908bf9fa793fae162f369108d390d1571d1ed03ce9e242e2b0612ddf68ff575a7b10
|
data/bin/console
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
|
3
|
+
require "bundler/setup"
|
4
|
+
require "radialIndicator/rails"
|
5
|
+
|
6
|
+
# You can add fixtures and/or initialization code here to make experimenting
|
7
|
+
# with your gem easier. You can also use a different console, if you like.
|
8
|
+
|
9
|
+
# (If you use this, don't forget to add pry to your Gemfile!)
|
10
|
+
# require "pry"
|
11
|
+
# Pry.start
|
12
|
+
|
13
|
+
require "irb"
|
14
|
+
IRB.start
|
data/bin/setup
ADDED
@@ -0,0 +1,49 @@
|
|
1
|
+
/*
|
2
|
+
radialIndicator.js v 1.2.1
|
3
|
+
Author: Sudhanshu Yadav
|
4
|
+
Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
|
5
|
+
Demo on: ignitersworld.com/lab/radialIndicator.html
|
6
|
+
*/
|
7
|
+
|
8
|
+
/* Angular hook for radialIndicator */
|
9
|
+
;
|
10
|
+
(function (angular) {
|
11
|
+
angular.module('radialIndicator', []).directive('radialIndicator', ['radialIndicatorInstance',
|
12
|
+
|
13
|
+
function (radialIndicatorInstance) {
|
14
|
+
return {
|
15
|
+
restrict: 'A',
|
16
|
+
link: function (scope, element, attrs) {
|
17
|
+
var element = element,
|
18
|
+
id = attrs.radialIndicatorId,
|
19
|
+
options = scope.$eval(attrs.radialIndicator),
|
20
|
+
model = attrs.radialIndicatorModel;
|
21
|
+
|
22
|
+
var indInstance = radialIndicator(element, options);
|
23
|
+
|
24
|
+
//store indicator instance on radialIndicatorConfig so can get through dependency injection
|
25
|
+
if (id) radialIndicatorInstance[id] = indInstance;
|
26
|
+
|
27
|
+
//watch for modal change
|
28
|
+
scope.$watch(model, function (newValue) {
|
29
|
+
indInstance.value(newValue);
|
30
|
+
});
|
31
|
+
|
32
|
+
//delete the idnicator instance when scope dies
|
33
|
+
scope.$on('$destroy', function () {
|
34
|
+
if (id) delete radialIndicatorInstance[id];
|
35
|
+
});
|
36
|
+
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}])
|
40
|
+
//a factory to store radial indicators instances which can be injected to controllers or directive to get any indicators instance
|
41
|
+
.factory('radialIndicatorInstance', function () {
|
42
|
+
if (!window.radialIndicator) throw "Please include radialIndicator.js";
|
43
|
+
|
44
|
+
var radialIndicatorInstance = {};
|
45
|
+
|
46
|
+
return radialIndicatorInstance;
|
47
|
+
|
48
|
+
});
|
49
|
+
}(angular));
|
@@ -0,0 +1,422 @@
|
|
1
|
+
/*
|
2
|
+
radialIndicator.js v 1.2.1
|
3
|
+
Author: Sudhanshu Yadav
|
4
|
+
Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
|
5
|
+
Demo on: ignitersworld.com/lab/radialIndicator.html
|
6
|
+
*/
|
7
|
+
|
8
|
+
;(function($, window, document) {
|
9
|
+
"use strict";
|
10
|
+
//circumfence and quart value to start bar from top
|
11
|
+
var circ = Math.PI * 2,
|
12
|
+
quart = Math.PI / 2;
|
13
|
+
|
14
|
+
|
15
|
+
//function to smooth canvas drawing for ratina devices
|
16
|
+
|
17
|
+
//method to manage device pixel ratio in ratina devices
|
18
|
+
var smoothCanvas = (function() {
|
19
|
+
var ctx = document.createElement("canvas").getContext("2d"),
|
20
|
+
dpr = window.devicePixelRatio || 1,
|
21
|
+
bsr = ctx.webkitBackingStorePixelRatio ||
|
22
|
+
ctx.mozBackingStorePixelRatio ||
|
23
|
+
ctx.msBackingStorePixelRatio ||
|
24
|
+
ctx.oBackingStorePixelRatio ||
|
25
|
+
ctx.backingStorePixelRatio || 1,
|
26
|
+
|
27
|
+
ratio = dpr / bsr; //PIXEL RATIO
|
28
|
+
|
29
|
+
return function(w, h, canvasElm) {
|
30
|
+
var can = canvasElm || document.createElement("canvas");
|
31
|
+
can.width = w * ratio;
|
32
|
+
can.height = h * ratio;
|
33
|
+
can.style.width = w + "px";
|
34
|
+
can.style.height = h + "px";
|
35
|
+
can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
|
36
|
+
return can;
|
37
|
+
}
|
38
|
+
}());
|
39
|
+
|
40
|
+
//function to convert hex to rgb
|
41
|
+
function hexToRgb(hex) {
|
42
|
+
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
43
|
+
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
44
|
+
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
45
|
+
return r + r + g + g + b + b;
|
46
|
+
});
|
47
|
+
|
48
|
+
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
49
|
+
return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
|
50
|
+
}
|
51
|
+
|
52
|
+
function getPropVal(curShift, perShift, bottomRange, topRange) {
|
53
|
+
return Math.round(bottomRange + ((topRange - bottomRange) * curShift / perShift));
|
54
|
+
}
|
55
|
+
|
56
|
+
|
57
|
+
//function to get current color in case of
|
58
|
+
function getCurrentColor(curPer, bottomVal, topVal, bottomColor, topColor) {
|
59
|
+
var rgbAryTop = topColor.indexOf('#') != -1 ? hexToRgb(topColor) : topColor.match(/\d+/g),
|
60
|
+
rgbAryBottom = bottomColor.indexOf('#') != -1 ? hexToRgb(bottomColor) : bottomColor.match(/\d+/g),
|
61
|
+
perShift = topVal - bottomVal,
|
62
|
+
curShift = curPer - bottomVal;
|
63
|
+
|
64
|
+
if (!rgbAryTop || !rgbAryBottom) return null;
|
65
|
+
|
66
|
+
return 'rgb(' + getPropVal(curShift, perShift, rgbAryBottom[0], rgbAryTop[0]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[1], rgbAryTop[1]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[2], rgbAryTop[2]) + ')';
|
67
|
+
}
|
68
|
+
|
69
|
+
//to merge object
|
70
|
+
function merge() {
|
71
|
+
var arg = arguments,
|
72
|
+
target = arg[0];
|
73
|
+
for (var i = 1, ln = arg.length; i < ln; i++) {
|
74
|
+
var obj = arg[i];
|
75
|
+
for (var k in obj) {
|
76
|
+
if (obj.hasOwnProperty(k)) {
|
77
|
+
target[k] = obj[k];
|
78
|
+
}
|
79
|
+
}
|
80
|
+
}
|
81
|
+
return target;
|
82
|
+
}
|
83
|
+
|
84
|
+
//function to apply formatting on number depending on parameter
|
85
|
+
function formatter(pattern) {
|
86
|
+
return function(num) {
|
87
|
+
if (!pattern) return num.toString();
|
88
|
+
num = num || 0
|
89
|
+
var numRev = num.toString().split('').reverse(),
|
90
|
+
output = pattern.split("").reverse(),
|
91
|
+
i = 0,
|
92
|
+
lastHashReplaced = 0;
|
93
|
+
|
94
|
+
//changes hash with numbers
|
95
|
+
for (var ln = output.length; i < ln; i++) {
|
96
|
+
if (!numRev.length) break;
|
97
|
+
if (output[i] == "#") {
|
98
|
+
lastHashReplaced = i;
|
99
|
+
output[i] = numRev.shift();
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
//add overflowing numbers before prefix
|
104
|
+
output.splice(lastHashReplaced + 1, output.lastIndexOf('#') - lastHashReplaced, numRev.reverse().join(""));
|
105
|
+
|
106
|
+
return output.reverse().join('');
|
107
|
+
}
|
108
|
+
}
|
109
|
+
|
110
|
+
|
111
|
+
//circle bar class
|
112
|
+
function Indicator(container, indOption) {
|
113
|
+
var self = this;
|
114
|
+
|
115
|
+
indOption = indOption || {};
|
116
|
+
indOption = merge({}, radialIndicator.defaults, indOption);
|
117
|
+
|
118
|
+
this.indOption = indOption;
|
119
|
+
|
120
|
+
//create a queryselector if a selector string is passed in container
|
121
|
+
if (typeof container == "string")
|
122
|
+
container = document.querySelector(container);
|
123
|
+
|
124
|
+
//get the first element if container is a node list
|
125
|
+
if (container.length)
|
126
|
+
container = container[0];
|
127
|
+
|
128
|
+
this.container = container;
|
129
|
+
|
130
|
+
//create a canvas element
|
131
|
+
var canElm = document.createElement("canvas");
|
132
|
+
container.appendChild(canElm);
|
133
|
+
|
134
|
+
this.canElm = canElm; // dom object where drawing will happen
|
135
|
+
|
136
|
+
this.ctx = canElm.getContext('2d'); //get 2d canvas context
|
137
|
+
|
138
|
+
//add intial value
|
139
|
+
this.current_value = indOption.initValue || indOption.minValue || 0;
|
140
|
+
|
141
|
+
|
142
|
+
//handeling user interaction
|
143
|
+
var startListener = function(e) {
|
144
|
+
if (!indOption.interaction) return;
|
145
|
+
|
146
|
+
var touchMove = e.type == "touchstart" ? "touchmove" : "mousemove",
|
147
|
+
touchEnd = e.type == "touchstart" ? "touchend" : "mouseup",
|
148
|
+
position = canElm.getBoundingClientRect(),
|
149
|
+
cy = position.top + canElm.offsetHeight / 2,
|
150
|
+
cx = position.left + canElm.offsetWidth / 2;
|
151
|
+
|
152
|
+
var moveListener = function(e) {
|
153
|
+
e.preventDefault();
|
154
|
+
|
155
|
+
//get the cordinates
|
156
|
+
var mx = e.clientX || e.touches[0].clientX,
|
157
|
+
my = e.clientY || e.touches[0].clientY,
|
158
|
+
radian = (circ + quart + Math.atan2((my - cy), (mx - cx))) % (circ + 0.0175),
|
159
|
+
radius = (indOption.radius - 1 + indOption.barWidth / 2),
|
160
|
+
circum = circ * radius,
|
161
|
+
precision = indOption.precision != null ? indOption.precision : 0,
|
162
|
+
precisionNo = Math.pow(10, precision),
|
163
|
+
val = Math.round(precisionNo * radian * radius * (indOption.maxValue - indOption.minValue) / circum) / precisionNo;
|
164
|
+
|
165
|
+
self.value(val);
|
166
|
+
};
|
167
|
+
|
168
|
+
var endListener = function() {
|
169
|
+
document.removeEventListener(touchMove, moveListener, false);
|
170
|
+
document.removeEventListener(touchEnd, endListener, false);
|
171
|
+
};
|
172
|
+
|
173
|
+
document.addEventListener(touchMove, moveListener, false);
|
174
|
+
document.addEventListener(touchEnd, endListener, false);
|
175
|
+
};
|
176
|
+
|
177
|
+
canElm.addEventListener('touchstart', startListener, false);
|
178
|
+
canElm.addEventListener('mousedown', startListener, false);
|
179
|
+
|
180
|
+
|
181
|
+
canElm.addEventListener("mousewheel", MouseWheelHandler, false);
|
182
|
+
canElm.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
|
183
|
+
|
184
|
+
function MouseWheelHandler(e) {
|
185
|
+
if (!indOption.interaction) return;
|
186
|
+
e.preventDefault();
|
187
|
+
|
188
|
+
// cross-browser wheel delta
|
189
|
+
var delta = -(Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))),
|
190
|
+
precision = indOption.precision != null ? indOption.precision : 0,
|
191
|
+
precisionNo = Math.pow(10, precision),
|
192
|
+
diff = indOption.maxValue - indOption.minValue,
|
193
|
+
val = self.current_value + Math.round(precisionNo * delta * diff / Math.min(diff, 100)) / precisionNo;
|
194
|
+
|
195
|
+
self.value(val);
|
196
|
+
|
197
|
+
return false;
|
198
|
+
}
|
199
|
+
}
|
200
|
+
|
201
|
+
|
202
|
+
Indicator.prototype = {
|
203
|
+
constructor: radialIndicator,
|
204
|
+
_init: function() {
|
205
|
+
var indOption = this.indOption,
|
206
|
+
canElm = this.canElm,
|
207
|
+
ctx = this.ctx,
|
208
|
+
dim = (indOption.radius + indOption.barWidth) * 2; //elm width and height
|
209
|
+
|
210
|
+
//create a formatter function
|
211
|
+
this.formatter = typeof indOption.format == "function" ? indOption.format : formatter(indOption.format);
|
212
|
+
|
213
|
+
//maximum text length;
|
214
|
+
this.maxLength = indOption.percentage ? 4 : this.formatter(indOption.maxValue).length;
|
215
|
+
|
216
|
+
//smooth the canvas elm for ratina display
|
217
|
+
smoothCanvas(dim, dim, canElm);
|
218
|
+
|
219
|
+
//draw background bar
|
220
|
+
this._drawBarBg();
|
221
|
+
|
222
|
+
//put the initial value if defined
|
223
|
+
this.value(this.current_value);
|
224
|
+
|
225
|
+
return this;
|
226
|
+
},
|
227
|
+
//draw background bar
|
228
|
+
_drawBarBg: function() {
|
229
|
+
var indOption = this.indOption,
|
230
|
+
ctx = this.ctx,
|
231
|
+
dim = (indOption.radius + indOption.barWidth) * 2, //elm width and height
|
232
|
+
center = dim / 2; //center point in both x and y axis
|
233
|
+
|
234
|
+
//draw nackground circle
|
235
|
+
ctx.strokeStyle = indOption.barBgColor; //background circle color
|
236
|
+
ctx.lineWidth = indOption.barWidth;
|
237
|
+
if (indOption.barBgColor != "transparent") {
|
238
|
+
ctx.beginPath();
|
239
|
+
ctx.arc(center, center, indOption.radius - 1 + indOption.barWidth / 2, 0, 2 * Math.PI);
|
240
|
+
ctx.stroke();
|
241
|
+
}
|
242
|
+
},
|
243
|
+
//update the value of indicator without animation
|
244
|
+
value: function(val) {
|
245
|
+
//return the val if val is not provided
|
246
|
+
if (val === undefined || isNaN(val)) {
|
247
|
+
return this.current_value;
|
248
|
+
}
|
249
|
+
|
250
|
+
val = parseFloat(val);
|
251
|
+
|
252
|
+
var ctx = this.ctx,
|
253
|
+
indOption = this.indOption,
|
254
|
+
curColor = indOption.barColor,
|
255
|
+
dim = (indOption.radius + indOption.barWidth) * 2,
|
256
|
+
minVal = indOption.minValue,
|
257
|
+
maxVal = indOption.maxValue,
|
258
|
+
center = dim / 2;
|
259
|
+
|
260
|
+
//limit the val in range of minumum and maximum value
|
261
|
+
val = val < minVal ? minVal : val > maxVal ? maxVal : val;
|
262
|
+
|
263
|
+
var precision = indOption.precision != null ? indOption.precision : 0,
|
264
|
+
precisionNo = Math.pow(10, precision),
|
265
|
+
perVal = Math.round(((val - minVal) * precisionNo / (maxVal - minVal)) * 100) / precisionNo, //percentage value tp two decimal precision
|
266
|
+
dispVal = indOption.percentage ? perVal + '%' : this.formatter(val); //formatted value
|
267
|
+
|
268
|
+
//save val on object
|
269
|
+
this.current_value = val;
|
270
|
+
|
271
|
+
|
272
|
+
//draw the bg circle
|
273
|
+
ctx.clearRect(0, 0, dim, dim);
|
274
|
+
this._drawBarBg();
|
275
|
+
|
276
|
+
//get current color if color range is set
|
277
|
+
if (typeof curColor == "object") {
|
278
|
+
var range = Object.keys(curColor);
|
279
|
+
|
280
|
+
for (var i = 1, ln = range.length; i < ln; i++) {
|
281
|
+
var bottomVal = range[i - 1],
|
282
|
+
topVal = range[i],
|
283
|
+
bottomColor = curColor[bottomVal],
|
284
|
+
topColor = curColor[topVal],
|
285
|
+
newColor = val == bottomVal ? bottomColor : val == topVal ? topColor : val > bottomVal && val < topVal ? indOption.interpolate ? getCurrentColor(val, bottomVal, topVal, bottomColor, topColor) : topColor : false;
|
286
|
+
|
287
|
+
if (newColor != false) {
|
288
|
+
curColor = newColor;
|
289
|
+
break;
|
290
|
+
}
|
291
|
+
}
|
292
|
+
}
|
293
|
+
|
294
|
+
//draw th circle value
|
295
|
+
ctx.strokeStyle = curColor;
|
296
|
+
|
297
|
+
//add linecap if value setted on options
|
298
|
+
if (indOption.roundCorner) ctx.lineCap = "round";
|
299
|
+
|
300
|
+
ctx.beginPath();
|
301
|
+
ctx.arc(center, center, indOption.radius - 1 + indOption.barWidth / 2, -(quart), ((circ) * perVal / 100) - quart, false);
|
302
|
+
ctx.stroke();
|
303
|
+
|
304
|
+
//add percentage text
|
305
|
+
if (indOption.displayNumber) {
|
306
|
+
var cFont = ctx.font.split(' '),
|
307
|
+
weight = indOption.fontWeight,
|
308
|
+
fontSize = indOption.fontSize || (dim / (this.maxLength - (Math.floor(this.maxLength * 1.4 / 4) - 1)));
|
309
|
+
|
310
|
+
cFont = indOption.fontFamily || cFont[cFont.length - 1];
|
311
|
+
|
312
|
+
ctx.fillStyle = indOption.fontColor || curColor;
|
313
|
+
ctx.font = weight + " " + fontSize + "px " + cFont;
|
314
|
+
ctx.textAlign = "center";
|
315
|
+
ctx.textBaseline = 'middle';
|
316
|
+
ctx.fillText(dispVal, center, center);
|
317
|
+
}
|
318
|
+
|
319
|
+
//call onChange callback
|
320
|
+
indOption.onChange.call(this.container,val);
|
321
|
+
|
322
|
+
return this;
|
323
|
+
},
|
324
|
+
//animate progressbar to the value
|
325
|
+
animate: function(val) {
|
326
|
+
var indOption = this.indOption,
|
327
|
+
counter = this.current_value || indOption.minValue,
|
328
|
+
self = this,
|
329
|
+
minVal = indOption.minValue,
|
330
|
+
maxVal = indOption.maxValue,
|
331
|
+
frameNum = indOption.frameNum || (indOption.percentage ? 100 : 500),
|
332
|
+
precision = indOption.precision != null ? indOption.precision : Math.ceil(Math.log(maxVal - minVal / frameNum)),
|
333
|
+
precisionNo = Math.pow(10, precision),
|
334
|
+
incBy = Math.round((maxVal - minVal) * precisionNo / frameNum) / precisionNo; //increment by .2% on every tick and 1% if showing as percentage
|
335
|
+
|
336
|
+
//limit the val in range of minumum and maximum value
|
337
|
+
val = val < minVal ? minVal : val > maxVal ? maxVal : val;
|
338
|
+
|
339
|
+
var back = val < counter;
|
340
|
+
|
341
|
+
//clear interval function if already started
|
342
|
+
if (this.intvFunc) clearInterval(this.intvFunc);
|
343
|
+
|
344
|
+
this.intvFunc = setInterval(function() {
|
345
|
+
|
346
|
+
if ((!back && counter >= val) || (back && counter <= val)) {
|
347
|
+
if (self.current_value == counter) {
|
348
|
+
clearInterval(self.intvFunc);
|
349
|
+
if (indOption.onAnimationComplete) indOption.onAnimationComplete(self.current_value);
|
350
|
+
return;
|
351
|
+
} else {
|
352
|
+
counter = val;
|
353
|
+
}
|
354
|
+
}
|
355
|
+
|
356
|
+
self.value(counter); //dispaly the value
|
357
|
+
|
358
|
+
if (counter != val) {
|
359
|
+
counter = counter + (back ? -incBy : incBy);
|
360
|
+
}; //increment or decrement till counter does not reach to value
|
361
|
+
}, indOption.frameTime);
|
362
|
+
|
363
|
+
return this;
|
364
|
+
},
|
365
|
+
//method to update options
|
366
|
+
option: function(key, val) {
|
367
|
+
if (val === undefined) return this.option[key];
|
368
|
+
|
369
|
+
if (['radius', 'barWidth', 'barBgColor', 'format', 'maxValue', 'percentage'].indexOf(key) != -1) {
|
370
|
+
this.indOption[key] = val;
|
371
|
+
this._init().value(this.current_value);
|
372
|
+
}
|
373
|
+
this.indOption[key] = val;
|
374
|
+
}
|
375
|
+
|
376
|
+
};
|
377
|
+
|
378
|
+
/** Initializer function **/
|
379
|
+
function radialIndicator(container, options) {
|
380
|
+
var progObj = new Indicator(container, options);
|
381
|
+
progObj._init();
|
382
|
+
return progObj;
|
383
|
+
}
|
384
|
+
|
385
|
+
//radial indicator defaults
|
386
|
+
radialIndicator.defaults = {
|
387
|
+
radius: 50, //inner radius of indicator
|
388
|
+
barWidth: 5, //bar width
|
389
|
+
barBgColor: '#eeeeee', //unfilled bar color
|
390
|
+
barColor: '#99CC33', //filled bar color , can be a range also having different colors on different value like {0 : "#ccc", 50 : '#333', 100: '#000'}
|
391
|
+
format: null, //format indicator numbers, can be a # formator ex (##,###.##) or a function
|
392
|
+
frameTime: 10, //miliseconds to move from one frame to another
|
393
|
+
frameNum: null, //Defines numbers of frame in indicator, defaults to 100 when showing percentage and 500 for other values
|
394
|
+
fontColor: null, //font color
|
395
|
+
fontFamily: null, //defines font family
|
396
|
+
fontWeight: 'bold', //defines font weight
|
397
|
+
fontSize: null, //define the font size of indicator number
|
398
|
+
interpolate: true, //interpolate color between ranges
|
399
|
+
percentage: false, //show percentage of value
|
400
|
+
precision: null, //default value for precision depend on difference between min and max divided by number of frames
|
401
|
+
displayNumber: true, //display indicator number
|
402
|
+
roundCorner: false, //have round corner in filled bar
|
403
|
+
minValue: 0, //minimum value
|
404
|
+
maxValue: 100, //maximum value
|
405
|
+
initValue: 0, //define initial value of indicator,
|
406
|
+
interaction: false, //if true it allows to change radial indicator value using mouse or touch interaction
|
407
|
+
onChange: function() {}
|
408
|
+
};
|
409
|
+
|
410
|
+
window.radialIndicator = radialIndicator;
|
411
|
+
|
412
|
+
//add as a jquery plugin
|
413
|
+
if ($) {
|
414
|
+
$.fn.radialIndicator = function(options) {
|
415
|
+
return this.each(function() {
|
416
|
+
var newPCObj = radialIndicator(this, options);
|
417
|
+
$.data(this, 'radialIndicator', newPCObj);
|
418
|
+
});
|
419
|
+
};
|
420
|
+
}
|
421
|
+
|
422
|
+
}(window.jQuery, window, document, void 0));
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/*
|
2
|
+
radialIndicator.js v 1.2.1
|
3
|
+
Author: Sudhanshu Yadav
|
4
|
+
Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
|
5
|
+
Demo on: ignitersworld.com/lab/radialIndicator.html
|
6
|
+
*/
|
7
|
+
!function(t,e,n){"use strict";function i(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,n,i){return e+e+n+n+i+i});var n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return n?[parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)]:null}function r(t,e,n,i){return Math.round(n+(i-n)*t/e)}function a(t,e,n,a,o){var u=-1!=o.indexOf("#")?i(o):o.match(/\d+/g),l=-1!=a.indexOf("#")?i(a):a.match(/\d+/g),s=n-e,c=t-e;return u&&l?"rgb("+r(c,s,l[0],u[0])+","+r(c,s,l[1],u[1])+","+r(c,s,l[2],u[2])+")":null}function o(){for(var t=arguments,e=t[0],n=1,i=t.length;i>n;n++){var r=t[n];for(var a in r)r.hasOwnProperty(a)&&(e[a]=r[a])}return e}function u(t){return function(e){if(!t)return e.toString();e=e||0;for(var n=e.toString().split("").reverse(),i=t.split("").reverse(),r=0,a=0,o=i.length;o>r&&n.length;r++)"#"==i[r]&&(a=r,i[r]=n.shift());return i.splice(a+1,i.lastIndexOf("#")-a,n.reverse().join("")),i.reverse().join("")}}function l(t,e){function i(t){if(e.interaction){t.preventDefault();var n=-Math.max(-1,Math.min(1,t.wheelDelta||-t.detail)),i=null!=e.precision?e.precision:0,a=Math.pow(10,i),o=e.maxValue-e.minValue,u=r.current_value+Math.round(a*n*o/Math.min(o,100))/a;return r.value(u),!1}}var r=this;e=e||{},e=o({},s.defaults,e),this.indOption=e,"string"==typeof t&&(t=n.querySelector(t)),t.length&&(t=t[0]),this.container=t;var a=n.createElement("canvas");t.appendChild(a),this.canElm=a,this.ctx=a.getContext("2d"),this.current_value=e.initValue||e.minValue||0;var u=function(t){if(e.interaction){var i="touchstart"==t.type?"touchmove":"mousemove",o="touchstart"==t.type?"touchend":"mouseup",u=a.getBoundingClientRect(),l=u.top+a.offsetHeight/2,s=u.left+a.offsetWidth/2,d=function(t){t.preventDefault();var n=t.clientX||t.touches[0].clientX,i=t.clientY||t.touches[0].clientY,a=(c+h+Math.atan2(i-l,n-s))%(c+.0175),o=e.radius-1+e.barWidth/2,u=c*o,d=null!=e.precision?e.precision:0,f=Math.pow(10,d),v=Math.round(f*a*o*(e.maxValue-e.minValue)/u)/f;r.value(v)},f=function(){n.removeEventListener(i,d,!1),n.removeEventListener(o,f,!1)};n.addEventListener(i,d,!1),n.addEventListener(o,f,!1)}};a.addEventListener("touchstart",u,!1),a.addEventListener("mousedown",u,!1),a.addEventListener("mousewheel",i,!1),a.addEventListener("DOMMouseScroll",i,!1)}function s(t,e){var n=new l(t,e);return n._init(),n}var c=2*Math.PI,h=Math.PI/2,d=function(){var t=n.createElement("canvas").getContext("2d"),i=e.devicePixelRatio||1,r=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1,a=i/r;return function(t,e,i){var r=i||n.createElement("canvas");return r.width=t*a,r.height=e*a,r.style.width=t+"px",r.style.height=e+"px",r.getContext("2d").setTransform(a,0,0,a,0,0),r}}();l.prototype={constructor:s,_init:function(){var t=this.indOption,e=this.canElm,n=(this.ctx,2*(t.radius+t.barWidth));return this.formatter="function"==typeof t.format?t.format:u(t.format),this.maxLength=t.percentage?4:this.formatter(t.maxValue).length,d(n,n,e),this._drawBarBg(),this.value(this.current_value),this},_drawBarBg:function(){var t=this.indOption,e=this.ctx,n=2*(t.radius+t.barWidth),i=n/2;e.strokeStyle=t.barBgColor,e.lineWidth=t.barWidth,"transparent"!=t.barBgColor&&(e.beginPath(),e.arc(i,i,t.radius-1+t.barWidth/2,0,2*Math.PI),e.stroke())},value:function(t){if(void 0===t||isNaN(t))return this.current_value;t=parseFloat(t);var e=this.ctx,n=this.indOption,i=n.barColor,r=2*(n.radius+n.barWidth),o=n.minValue,u=n.maxValue,l=r/2;t=o>t?o:t>u?u:t;var s=null!=n.precision?n.precision:0,d=Math.pow(10,s),f=Math.round((t-o)*d/(u-o)*100)/d,v=n.percentage?f+"%":this.formatter(t);if(this.current_value=t,e.clearRect(0,0,r,r),this._drawBarBg(),"object"==typeof i)for(var m=Object.keys(i),p=1,g=m.length;g>p;p++){var x=m[p-1],b=m[p],C=i[x],M=i[b],w=t==x?C:t==b?M:t>x&&b>t?n.interpolate?a(t,x,b,C,M):M:!1;if(0!=w){i=w;break}}if(e.strokeStyle=i,n.roundCorner&&(e.lineCap="round"),e.beginPath(),e.arc(l,l,n.radius-1+n.barWidth/2,-h,c*f/100-h,!1),e.stroke(),n.displayNumber){var y=e.font.split(" "),B=n.fontWeight,V=n.fontSize||r/(this.maxLength-(Math.floor(1.4*this.maxLength/4)-1));y=n.fontFamily||y[y.length-1],e.fillStyle=n.fontColor||i,e.font=B+" "+V+"px "+y,e.textAlign="center",e.textBaseline="middle",e.fillText(v,l,l)}return n.onChange.call(this.container,t),this},animate:function(t){var e=this.indOption,n=this.current_value||e.minValue,i=this,r=e.minValue,a=e.maxValue,o=e.frameNum||(e.percentage?100:500),u=null!=e.precision?e.precision:Math.ceil(Math.log(a-r/o)),l=Math.pow(10,u),s=Math.round((a-r)*l/o)/l;t=r>t?r:t>a?a:t;var c=n>t;return this.intvFunc&&clearInterval(this.intvFunc),this.intvFunc=setInterval(function(){if(!c&&n>=t||c&&t>=n){if(i.current_value==n)return clearInterval(i.intvFunc),void(e.onAnimationComplete&&e.onAnimationComplete(i.current_value));n=t}i.value(n),n!=t&&(n+=c?-s:s)},e.frameTime),this},option:function(t,e){return void 0===e?this.option[t]:(-1!=["radius","barWidth","barBgColor","format","maxValue","percentage"].indexOf(t)&&(this.indOption[t]=e,this._init().value(this.current_value)),void(this.indOption[t]=e))}},s.defaults={radius:50,barWidth:5,barBgColor:"#eeeeee",barColor:"#99CC33",format:null,frameTime:10,frameNum:null,fontColor:null,fontFamily:null,fontWeight:"bold",fontSize:null,interpolate:!0,percentage:!1,precision:null,displayNumber:!0,roundCorner:!1,minValue:0,maxValue:100,initValue:0,interaction:!1,onChange:function(){}},e.radialIndicator=s,t&&(t.fn.radialIndicator=function(e){return this.each(function(){var n=s(this,e);t.data(this,"radialIndicator",n)})})}(window.jQuery,window,document,void 0);
|
metadata
ADDED
@@ -0,0 +1,79 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: radialIndicator-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- xiajian
|
8
|
+
autorequire:
|
9
|
+
bindir: exe
|
10
|
+
cert_chain: []
|
11
|
+
date: 2015-12-21 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: bundler
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '1.8'
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.8'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rake
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '10.0'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '10.0'
|
41
|
+
description: 's-yadav''s radialIndicator Rails assets 打包, 是一款轻量级的图形指示器。 '
|
42
|
+
email:
|
43
|
+
- jhqy2011@gmail.com
|
44
|
+
executables: []
|
45
|
+
extensions: []
|
46
|
+
extra_rdoc_files: []
|
47
|
+
files:
|
48
|
+
- bin/console
|
49
|
+
- bin/setup
|
50
|
+
- lib/radialIndicator/rails.rb
|
51
|
+
- lib/radialIndicator/rails/version.rb
|
52
|
+
- vendor/assets/javascripts/angular.radialIndicator.js
|
53
|
+
- vendor/assets/javascripts/radialIndicator.js
|
54
|
+
- vendor/assets/javascripts/radialIndicator.min.js
|
55
|
+
homepage: https://github.com/xiajian/radialIndicator-rails
|
56
|
+
licenses:
|
57
|
+
- MIT
|
58
|
+
metadata: {}
|
59
|
+
post_install_message:
|
60
|
+
rdoc_options: []
|
61
|
+
require_paths:
|
62
|
+
- lib
|
63
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
64
|
+
requirements:
|
65
|
+
- - ">="
|
66
|
+
- !ruby/object:Gem::Version
|
67
|
+
version: '0'
|
68
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
69
|
+
requirements:
|
70
|
+
- - ">="
|
71
|
+
- !ruby/object:Gem::Version
|
72
|
+
version: '0'
|
73
|
+
requirements: []
|
74
|
+
rubyforge_project:
|
75
|
+
rubygems_version: 2.4.8
|
76
|
+
signing_key:
|
77
|
+
specification_version: 4
|
78
|
+
summary: This is a rails assets gem that packaged s-yadav's radialIndicator(圆形图形指示器)
|
79
|
+
test_files: []
|