[Kimchi-devel] [PATCH v2 3/4] Create a reusable jQuery circleGauge widget
Adam King
rak at linux.vnet.ibm.com
Fri Feb 21 01:59:34 UTC 2014
Create a reusable jQuery circleGauge widget to replace the circle previously
used in the guests tab.
Signed-off-by: Adam King <rak at 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 at 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 at 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 at 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 at cn.ibm.com>
+ * Adam King <rak at 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
More information about the Kimchi-devel
mailing list