Create a reusable jQuery circleGauge widget to replace the circle previously used in the guests tab. Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/css/theme-default/circle.css | 26 --------- ui/css/theme-default/circleGauge.css | 26 +++++++++ ui/js/src/kimchi.circle.js | 88 ----------------------------- ui/js/widgets/circleGauge.js | 104 +++++++++++++++++++++++++++++++++++ 4 files changed, 130 insertions(+), 114 deletions(-) delete mode 100644 ui/css/theme-default/circle.css create mode 100644 ui/css/theme-default/circleGauge.css delete mode 100644 ui/js/src/kimchi.circle.js create mode 100644 ui/js/widgets/circleGauge.js diff --git a/ui/css/theme-default/circle.css b/ui/css/theme-default/circle.css deleted file mode 100644 index 8008219..0000000 --- a/ui/css/theme-default/circle.css +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2013 - * - * Authors: - * Lise Noble <lwnoble@us.ibm.com> - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -.circle { - position: relative; - margin: 30px 10px 10px 10px; - width: 70px; - height: 70px; -} diff --git a/ui/css/theme-default/circleGauge.css b/ui/css/theme-default/circleGauge.css new file mode 100644 index 0000000..cf9970e --- /dev/null +++ b/ui/css/theme-default/circleGauge.css @@ -0,0 +1,26 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2013 + * + * Authors: + * Lise Noble <lwnoble@us.ibm.com> + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +.circleGauge { + position: relative; + margin: 30px 10px 10px 10px; + width: 70px; + height: 70px; +} diff --git a/ui/js/src/kimchi.circle.js b/ui/js/src/kimchi.circle.js deleted file mode 100644 index 7b9ccc7..0000000 --- a/ui/js/src/kimchi.circle.js +++ /dev/null @@ -1,88 +0,0 @@ -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2013 - * - * Authors: - * Hongliang Wang <hlwanghl@cn.ibm.com> - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -(function($) { - $.fn.circle = function(options) { - var settings = $.extend({ - color : '#87C004', - fillColor : '#87C004', - fontFamily : 'Geneva, sans-serif', - fontSize : 13, - radius : 35, - lineWidth : 20 - }, options); - - $(this).each(function() { - var that = $(this); - var json = eval("(" + that.data('value') + ")"); - var parentNode = that.parent() - var type = ''; - var display = 0; - var circle = 0; - - if (parentNode.hasClass('guest-cpu')) { - display = parseInt(json['cpu_utilization']); - circle = display; - type = '%'; - } else if (parentNode.hasClass('guest-network')) { - display = parseInt(json['net_throughput']); - circle = (display * 100) / parseInt(json['net_throughput_peak']); - } else if (parentNode.hasClass('guest-storage')) { - display = parseInt(json['io_throughput']); - circle = (display * 100) / parseInt(json['io_throughput_peak']); - } - - that.empty(); - var canvas = document.createElement('canvas'); - that.append($(canvas)); - var ctx = canvas.getContext('2d'); - var lineWidth = settings['lineWidth']; - var radius = settings['radius']; - var fontSize = settings['fontSize']; - var shadowSize = 2; - var width = height = radius * 2; - $(canvas).attr('height', height); - $(canvas).attr('width', width); - $(canvas).css({ - 'boxShadow' : shadowSize + 'px ' + shadowSize + 'px ' + shadowSize + 'px #fff, -' + shadowSize + 'px -' + shadowSize + 'px ' + shadowSize + 'px #eaeaea', - borderRadius : radius + 'px' - }); - ctx.clearRect(0, 0, width, height); - - ctx.fillStyle = settings['fillColor']; - ctx.font = 'bold ' + fontSize + 'px ' + settings['fontFamily']; - ctx.textAlign = 'center'; - var originPos = radius; - ctx.textBaseline = 'middle'; - ctx.fillText(display + type, originPos, originPos); - ctx.strokeStyle = settings['color']; - ctx.lineWidth = lineWidth; - ctx.beginPath(); - ctx.arc(originPos, originPos, radius, -.5 * Math.PI, (circle / 50 - .5) * Math.PI); - ctx.stroke(); - }); - - return this; - }; -}(jQuery)); - -kimchi.circle = function(selector) { - $(selector).circle(); -}; diff --git a/ui/js/widgets/circleGauge.js b/ui/js/widgets/circleGauge.js new file mode 100644 index 0000000..d0887fd --- /dev/null +++ b/ui/js/widgets/circleGauge.js @@ -0,0 +1,104 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2013 + * + * Authors: + * Hongliang Wang <hlwanghl@cn.ibm.com> + * Adam King <rak@linux.vnet.ibm.com> + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + (function($) { + $.widget('kimchi.circleGauge', { + + options : { + color : '#87C004', + fillColor : '#87C004', + lineWidth : 20, + shadowSize : '2px', + font : 'bold 13px Geneva, sans-serif', + textAlign : 'center', + radius : 35, + peakRate : 100, + display : 0, + circle : 0, + label : '' + }, + + _create : function() { + //valuesAttr="{" + this.element.data('value')+ "}"; + //console.info(valuesAttr); + //values=eval("(" + valuesAttr + ")"); + //$.extend(this.options, values); + this.options.display=this.element.data('display'); + this.options.percentage=this.element.data('percentage'); + this._fixupPeakRate(); + this._draw(); + }, + + setValues : function(values) { + $.extend(this.options, values); + this._fixupPeakRate(); + this._draw(); + }, + + _fixupPeakRate : function() { + if (this.options.circle>this.options.peakRate) { + this.options.peakRate=this.options.circle; + } + }, + + _draw : function() { + this.element.empty(); + var canvas = document.createElement('canvas'); + //this.element.append($(canvas)); //I don't quite understand this line so trying the one below... + this.element.append(canvas); + + var ctx = canvas.getContext('2d'); + var radius = this.options.radius; + + var shadowSize = 2; + var width = height = radius * 2; + $(canvas).attr('height', height); + $(canvas).attr('width', width); + + $(canvas).css({ + 'boxShadow' : shadowSize + 'px ' + shadowSize + 'px ' + shadowSize + 'px #fff, -' + shadowSize + 'px -' + shadowSize + 'px ' + shadowSize + 'px #eaeaea', + borderRadius : radius + 'px' + }); + + ctx.clearRect(0, 0, width, height); + ctx.fillStyle = this.options.fillColor; + ctx.font = this.options.font; + ctx.textAlign = 'center'; + var originPos = radius; + ctx.textBaseline = 'middle'; + ctx.fillText(this.options.display, originPos, originPos); + ctx.strokeStyle = this.options.color; + ctx.lineWidth = this.options.lineWidth; + ctx.beginPath(); + ctx.arc(originPos, originPos, radius, -.5 * Math.PI, (this.options.percentage / 50 - .5) * Math.PI); + ctx.stroke(); + }, + + destroy : function() { + this.element.empty(); + $.Widget.prototype.destroy.call(this); + } + }); +}(jQuery)); + +kimchi.circleGauge = function(selector) { + $(selector).circleGauge(); +}; -- 1.8.1.4