mirror of https://github.com/CIRCL/AIL-framework
441 lines
15 KiB
JavaScript
441 lines
15 KiB
JavaScript
/**
|
|
* FlexGauge
|
|
* Version: 1.0
|
|
* Author: Jeff Millies
|
|
* Author URI:
|
|
*
|
|
* Slight modification for better display in Sentiment webpages
|
|
*/
|
|
(function ($) {
|
|
var FlexGauge = function (o) {
|
|
if (typeof o === 'object') {
|
|
this._extendOptions(o, false);
|
|
this._build();
|
|
}
|
|
};
|
|
FlexGauge.prototype = {
|
|
/**
|
|
* {String} Element that you would like to append to. ie '#idname', '.classname', 'div#idname', etc..
|
|
*/
|
|
appendTo: 'body',
|
|
/**
|
|
* {String} Id of Canvas already created or Id of canvas that will be created automatically
|
|
*/
|
|
elementId: 'canvas',
|
|
/**
|
|
* {String} Class of canvas created
|
|
*/
|
|
elementClass: 'canvas',
|
|
/**
|
|
* {Int} Canvas Width & Height
|
|
*/
|
|
elementWidth: 200,
|
|
elementHeight: 200,
|
|
/**
|
|
* {Boolean|String} Generate Dial Value for the Gauge, true will use arcFillPercent or arcFillInt
|
|
* depending on provided values and specified dialUnits, string will use specified value
|
|
*/
|
|
dialValue: false,
|
|
/**
|
|
* {String} Class applied to div when dial is generated.
|
|
*/
|
|
dialClass: 'fg-dial',
|
|
/**
|
|
* {string: %|$| } Type of unit to use for the dial
|
|
*/
|
|
dialUnit: '%',
|
|
/**
|
|
* {string: before|after} Where the dial unit will be displayed
|
|
*/
|
|
dialUnitPosition: 'after',
|
|
/**
|
|
* {Boolean|String} Generate Label for the Gauge, true will use default "FlexGauge", string will use specified
|
|
*/
|
|
dialLabel: false,
|
|
/**
|
|
* {String} Class applied to div when label is generated.
|
|
*/
|
|
dialLabelClass: 'fg-dial-label',
|
|
/**
|
|
* {Int} Radius of the arc
|
|
*/
|
|
inc: 0.0,
|
|
incTot: 1.0,
|
|
/**
|
|
* {Doule} Increment value
|
|
*/
|
|
arcSize: 85,
|
|
/**
|
|
* {double} Starting and Ending location of the arc, End always needs to be larger
|
|
* arc(x, y, radius, startAngle, endAngle, anticlockwise)
|
|
*/
|
|
arcAngleStart: 0.85,
|
|
arcAngleEnd: 2.15,
|
|
/**
|
|
* {double} Percentage the arc fills
|
|
*/
|
|
arcFillPercent: .5,
|
|
/**
|
|
* {Int} Starting and Ending values that are used to
|
|
* find a difference for amount of units
|
|
* ie: 60 (arcFillEnd) - 10 (arcFillStart) = 50
|
|
*/
|
|
arcFillStart: null,
|
|
arcFillEnd: null,
|
|
/**
|
|
* {Int} Data used to find out what percentage of the
|
|
* arc to fill. arcFillInt can be populated by
|
|
* the difference of arcFillStart and arcFillEnd
|
|
*/
|
|
arcFillInt: null,
|
|
arcFillTotal: null,
|
|
/**
|
|
* {Int} Color lightness: 0 - 255, 0 having no white added, 255 having all white and no color
|
|
*/
|
|
arcBgColorLight: 80,
|
|
/**
|
|
* {Int} Color saturation: 0 - 100, 0 having no color, 100 is full color
|
|
*/
|
|
arcBgColorSat: 60,
|
|
/**
|
|
* {Int} Size of the line marking the percentage
|
|
*/
|
|
arcStrokeFg: 30,
|
|
/**
|
|
* {Int} Size of the container holding the line
|
|
*/
|
|
arcStrokeBg: 30,
|
|
|
|
/**
|
|
* {string: hex} Color of the line marking the percentage
|
|
*/
|
|
colorArcFg: '#5bc0de',
|
|
/**
|
|
* {string: hex} Color of the container holding the line, default is using the Fg color and lightening it
|
|
*/
|
|
colorArcBg: null,
|
|
|
|
/**
|
|
* {String} Instead of providing a color or hex for the color, you can provide a class from the style
|
|
* sheet and specify what you would like to grab for the color in styleSrc
|
|
*/
|
|
styleArcFg: null,
|
|
styleArcBg: null,
|
|
styleSrc: 'color',
|
|
|
|
/**
|
|
* {Boolean} If set to false, then the graph will not be animated
|
|
*/
|
|
animateEasing: true,
|
|
/**
|
|
* {Int} Speed for the animation, 1 is fastest, higher the number, slower the animation
|
|
*/
|
|
animateSpeed: 5,
|
|
/**
|
|
* {Int} Math used in animation speed
|
|
*/
|
|
animateNumerator: 12,
|
|
animateDivisor: 15,
|
|
|
|
/**
|
|
* {double} Placeholder for current percentage while animating
|
|
*/
|
|
_animatePerc: 0.00,
|
|
|
|
/**
|
|
* {Object} Placeholder for setInterval
|
|
*/
|
|
_animateLoop: null,
|
|
|
|
/**
|
|
* {Object} Placeholder for canvas
|
|
*/
|
|
_canvas: null,
|
|
|
|
/**
|
|
* {Object} Placeholder for canvas context
|
|
*/
|
|
_ctx: null,
|
|
|
|
update: function (o) {
|
|
if (typeof o === 'object') {
|
|
var difference;
|
|
|
|
// if using int, convert to percent to check difference
|
|
if (typeof o.arcFillInt !== 'undefined' && o.arcFillInt == this.arcFillInt &&
|
|
typeof o.arcFillTotal !== 'undefined' && o.arcFillTotal == this.arcFillTotal) {
|
|
o.arcFillPercent = this.arcFillPercent;
|
|
} else if (typeof o.arcFillInt !== 'undefined' && typeof o.arcFillTotal !== 'undefined' &&
|
|
(o.arcFillInt != this.arcFillInt || o.arcFillTotal == this.arcFillTotal)) {
|
|
o.arcFillPercent = (o.arcFillInt / o.arcFillTotal);
|
|
} else if (typeof o.arcFillInt !== 'undefined' && typeof o.arcFillTotal === 'undefined' &&
|
|
(o.arcFillInt != this.arcFillInt)) {
|
|
o.arcFillPercent = (o.arcFillInt / this.arcFillTotal);
|
|
}
|
|
|
|
if (typeof o.arcFillPercent !== 'undefined') {
|
|
difference = Math.abs((this.arcFillPercent - o.arcFillPercent));
|
|
} else {
|
|
difference = this.arcFillPercent;
|
|
}
|
|
|
|
this._extendOptions(o, true);
|
|
|
|
clearInterval(this._animateLoop);
|
|
|
|
if (difference > 0) {
|
|
var that = this;
|
|
this._animateLoop = setInterval(function () {
|
|
return that._animate();
|
|
}, (this.animateSpeed * this.animateNumerator) / (difference * this.animateDivisor));
|
|
}
|
|
}
|
|
},
|
|
|
|
_extendOptions: function (o, update) {
|
|
var color = false;
|
|
if (update)
|
|
color = this.colorArcFg;
|
|
|
|
$.extend(this, o, true);
|
|
|
|
if (typeof o.arcFillStart !== 'undefined' && typeof o.arcFillEnd !== 'undefined' && typeof o.arcFillTotal !== 'undefined') {
|
|
this.arcFillInt = (o.arcFillEnd - o.arcFillStart);
|
|
}
|
|
|
|
if (typeof o.arcFillPercent === 'undefined' && this.arcFillInt !== null && this.arcFillInt >= 0 && this.arcFillTotal !== null && this.arcFillTotal > 0) {
|
|
this.arcFillPercent = this.arcFillInt / this.arcFillTotal;
|
|
}
|
|
|
|
if (typeof o.elementId === 'undefined') {
|
|
this.elementId = 'fg-' + this.appendTo + '-canvas';
|
|
}
|
|
// supporting color if pass, changing to hex
|
|
if (typeof o.colorArcFg !== 'undefined') {
|
|
this.colorArcFg = colorToHex(o.colorArcFg);
|
|
}
|
|
|
|
if (typeof o.colorArcBg !== 'undefined') {
|
|
this.colorArcBg = colorToHex(o.colorArcBg);
|
|
}
|
|
|
|
// only use the styleArcFg if colorArcFg wasn't specified in the options
|
|
if (typeof o.styleArcFg !== 'undefined' && typeof o.colorArcFg === 'undefined') {
|
|
this.colorArcFg = getStyleRuleValue(this.styleSrc, this.styleArcFg);
|
|
}
|
|
|
|
if (typeof o.colorArcBg === 'undefined' && this.colorArcBg === null && this.colorArcFg !== null) {
|
|
this.colorArcBg = this.colorArcFg;
|
|
}
|
|
|
|
if (typeof this.colorArcBg !== null && (!update || colorToHex(this.colorArcFg) != colorToHex(color))) {
|
|
if (colorToHex(this.colorArcFg) != colorToHex(color))
|
|
this.colorArcBg = this.colorArcFg;
|
|
|
|
this.colorArcBg = shadeColor(this.colorArcBg, this.arcBgColorLight, this.arcBgColorSat);
|
|
}
|
|
|
|
if (typeof o.dialLabel === 'boolean' && o.dialLabel) {
|
|
this.dialLabel = 'FlexGauge';
|
|
}
|
|
|
|
},
|
|
|
|
_build: function () {
|
|
if (document.getElementById(this.elementId) === null) {
|
|
$(this.appendTo).append('<canvas id="' + this.elementId + '" width="' + this.elementWidth + '" height="' + this.elementHeight + '"></canvas>');
|
|
}
|
|
|
|
this._canvas = document.getElementById(this.elementId);
|
|
this._ctx = this._canvas.getContext("2d");
|
|
|
|
this.arcAngleStart = this.arcAngleStart * Math.PI;
|
|
this.arcAngleEnd = this.arcAngleEnd * Math.PI;
|
|
if (this.animateEasing === false) {
|
|
this._animatePerc = this.arcFillPercent;
|
|
}
|
|
|
|
var that = this;
|
|
this._animateLoop = setInterval(function () {
|
|
return that._animate();
|
|
}, (this.animateSpeed * this.animateNumerator) / (this.arcFillPercent * this.animateDivisor));
|
|
},
|
|
|
|
_animate: function () {
|
|
var animateInt = Math.round(this._animatePerc * 100);
|
|
var arcInt = Math.round(this.arcFillPercent * 100);
|
|
|
|
if (animateInt < arcInt)
|
|
animateInt++;
|
|
else
|
|
animateInt--;
|
|
|
|
this._animatePerc = (animateInt / 100);
|
|
if (animateInt === arcInt) {
|
|
this.arcFillPercent = this._animatePerc;
|
|
clearInterval(this._animateLoop);
|
|
this._draw();
|
|
}
|
|
this._draw();
|
|
},
|
|
|
|
_draw: function () {
|
|
//Clear the canvas everytime a chart is drawn
|
|
this._ctx.clearRect(0, 0, this.elementWidth, this.elementHeight);
|
|
|
|
//Background 360 degree arc
|
|
this._ctx.beginPath();
|
|
this._ctx.strokeStyle = this.colorArcBg;
|
|
this._ctx.lineWidth = this.arcStrokeBg;
|
|
this._ctx.arc(
|
|
this.elementWidth / 2,
|
|
this.elementHeight / 2 + 50,
|
|
this.arcSize,
|
|
0,
|
|
Math.PI,
|
|
true
|
|
);
|
|
|
|
this._ctx.stroke();
|
|
|
|
//var newEnd = ((this.arcAngleEnd - this.arcAngleStart) * this._animatePerc) + this.arcAngleStart;
|
|
var newStart;
|
|
var newEnd;
|
|
|
|
var incArc = this.inc*Math.PI/2;
|
|
if (this.inc >= 0.0){
|
|
newStart = -Math.PI/2;
|
|
newEnd = newStart + incArc;
|
|
} else {
|
|
newStart = -Math.PI/2 + incArc;
|
|
newEnd = -Math.PI/2;
|
|
}
|
|
|
|
var colorShadesTabRed = ['#ff0000','#ff4000','#ff8000','#ff9900','#ffbf00','#ffff00'];
|
|
var colorShadesTabGreen = ['#ffff00','#E0FF00','#D0FF00','#a0ff00','#00ff00','#00ff40',];
|
|
var colorValue = parseInt(Math.abs((this.inc / this.incTot) * 5));
|
|
var theColor;
|
|
if (this.inc >= 0.0)
|
|
theColor = colorShadesTabGreen[colorValue];
|
|
else
|
|
theColor = colorShadesTabRed[5-colorValue];
|
|
this.colorArcFg = theColor;
|
|
|
|
this._ctx.beginPath();
|
|
this._ctx.strokeStyle = this.colorArcFg;
|
|
this._ctx.lineWidth = this.arcStrokeFg;
|
|
this._ctx.arc(
|
|
this.elementWidth / 2,
|
|
this.elementHeight / 2 + 50,
|
|
this.arcSize,
|
|
newStart,
|
|
newEnd,
|
|
false
|
|
);
|
|
this._ctx.stroke();
|
|
this._renderLabel();
|
|
},
|
|
|
|
_renderLabel: function () {
|
|
if (this.dialValue) {
|
|
var dialVal;
|
|
var dial = $(this.appendTo).find('div.' + this.dialClass);
|
|
if (dial.length === 0) {
|
|
$(this.appendTo).append('<div class="' + this.dialClass + '"></div>');
|
|
}
|
|
dial = $(this.appendTo).find('div.' + this.dialClass);
|
|
if (typeof this.dialValue === 'boolean') {
|
|
switch (this.dialUnit) {
|
|
case '%':
|
|
dialVal = Math.round(this._animatePerc * 100);
|
|
break;
|
|
default:
|
|
dialVal = Math.round(this.arcFillInt * (this._animatePerc / this.arcFillPercent));
|
|
break;
|
|
}
|
|
dialVal = (isNaN(dialVal) ? 0 : dialVal);
|
|
switch (this.dialUnitPosition) {
|
|
case 'before':
|
|
dialVal = this.dialUnit + dialVal;
|
|
break;
|
|
case 'after':
|
|
dialVal = dialVal + this.dialUnit;
|
|
break;
|
|
}
|
|
} else {
|
|
dialVal = this.dialValue;
|
|
}
|
|
dial.html(dialVal)
|
|
}
|
|
if (this.dialLabel) {
|
|
var label = $(this.appendTo).find('div.' + this.dialLabelClass);
|
|
if (label.length === 0) {
|
|
$(this.appendTo).append('<div class="' + this.dialLabelClass + '"></div>');
|
|
}
|
|
label = $(this.appendTo).find('div.' + this.dialLabelClass);
|
|
label.html(this.dialLabel);
|
|
}
|
|
}
|
|
};
|
|
|
|
function shadeColor(col, amt, sat) {
|
|
if (col[0] == "#") {
|
|
col = col.slice(1);
|
|
}
|
|
|
|
var num = parseInt(col, 16);
|
|
|
|
var r = (num >> 16) + amt;
|
|
|
|
if (r > 255) r = 255;
|
|
else if (r < 0) r = 0;
|
|
|
|
var b = ((num >> 8) & 0x00FF) + amt;
|
|
|
|
if (b > 255) b = 255;
|
|
else if (b < 0) b = 0;
|
|
|
|
var g = (num & 0x0000FF) + amt;
|
|
|
|
if (g > 255) g = 255;
|
|
else if (g < 0) g = 0;
|
|
|
|
var gray = r * 0.3086 + g * 0.6094 + b * 0.0820;
|
|
sat = (sat / 100);
|
|
|
|
r = Math.round(r * sat + gray * (1 - sat));
|
|
g = Math.round(g * sat + gray * (1 - sat));
|
|
b = Math.round(b * sat + gray * (1 - sat));
|
|
return "#" + (g | (b << 8) | (r << 16)).toString(16);
|
|
}
|
|
|
|
function getStyleRuleValue(style, selector) {
|
|
$('body').append('<div id="getStyleRuleValue-' + selector + '"></div>');
|
|
var element = $('#getStyleRuleValue-' + selector);
|
|
element.addClass(selector);
|
|
var color = element.css(style);
|
|
var hex = colorToHex(color);
|
|
element.remove();
|
|
return hex;
|
|
}
|
|
|
|
function colorToHex(color) {
|
|
if (color[0] != 'r')
|
|
return color;
|
|
|
|
var rgb = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
|
return "#" +
|
|
("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
|
|
("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
|
|
("0" + parseInt(rgb[3], 10).toString(16)).slice(-2);
|
|
}
|
|
|
|
if (typeof define === 'function') {
|
|
define('flex-gauge', ['jquery'], function ($) {
|
|
return FlexGauge;
|
|
});
|
|
} else {
|
|
window.FlexGauge = FlexGauge;
|
|
}
|
|
})(jQuery);
|