[pve-devel] [PATCH manager 2/8] add gaugeWidget

[Dominik Csapak]

this adds a gaugeWidget panel, which will be used for the
cluster dashboard

it shows a title, a gauge (a half circle) with the percentage
in the center

over 59% the color is yellow,
over 89% the color is red

also you can add a text to the bottom

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/Makefile             |  1 +
 www/manager6/panel/GaugeWidget.js | 96 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 www/manager6/panel/GaugeWidget.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 28e31bd..a851264 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -77,6 +77,7 @@ JSSRC= 				                 	\
 	panel/InfoWidget.js				\
 	panel/TemplateStatusView.js			\
 	panel/InputPanel.js				\
+	panel/GaugeWidget.js				\
 	window/Edit.js					\
 	window/LoginWindow.js				\
 	window/TaskViewer.js				\
diff --git a/www/manager6/panel/GaugeWidget.js b/www/manager6/panel/GaugeWidget.js
new file mode 100644
index 0000000..91aa8b9
--- /dev/null
+++ b/www/manager6/panel/GaugeWidget.js
@@ -0,0 +1,96 @@
+Ext.define('PVE.panel.GaugeWidget', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pveGauge',
+
+    defaults: {
+	style: {
+	    'text-align':'center'
+	}
+    },
+    items: [
+	{
+	    xtype: 'box',
+	    itemId: 'title',
+	    data: {
+		title: ''
+	    },
+	    tpl: '<h3>{title}</h3>'
+	},
+	{
+	    xtype: 'polar',
+	    height: 120,
+	    border: false,
+	    itemId: 'chart',
+	    series: [{
+		type: 'gauge',
+		value: 0,
+		colors: ['#f5f5f5'],
+		sectors: [0],
+		donut: 90,
+		needleLength: 100,
+		totalAngle: Math.PI
+	    }],
+	    sprites: [{
+		id: 'valueSprite',
+		type: 'text',
+		text: '',
+		textAlign: 'center',
+		textBaseline: 'bottom',
+		x: 125,
+		y: 110,
+		fontSize: 30
+	    }]
+	},
+	{
+	    xtype: 'box',
+	    itemId: 'text'
+	}
+    ],
+
+    header: false,
+    border: false,
+
+    warningThreshold: 0.6,
+    criticalThreshold: 0.9,
+    warningColor: '#fc0',
+    criticalColor: '#f66',
+    defaultColor: '#c2ddf2',
+    backgroundColor: '#f5f5f5',
+
+    initialValue: 0,
+
+
+    updateValue: function(value, text) {
+	var me = this;
+	var color = me.defaultColor;
+
+	if (value >= me.criticalThreshold) {
+	    color = me.criticalColor;
+	} else if (value >= me.warningThreshold) {
+	    color = me.warningColor;
+	}
+
+	me.chart.series[0].setColors([color, me.backgroundColor]);
+	me.chart.series[0].setValue(value*100);
+
+	me.valueSprite.setText(' '+(value*100).toFixed(0) + '%');
+	me.valueSprite.setAttributes({x: me.chart.getWidth()/2, y:me.chart.getHeight()-20}, true);
+
+	if (text !== undefined) {
+	    me.text.setHtml(text);
+	}
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	me.callParent();
+
+	if (me.title) {
+	    me.getComponent('title').update({title: me.title});
+	}
+	me.text = me.getComponent('text');
+	me.chart = me.getComponent('chart');
+	me.valueSprite = me.chart.getSurface('chart').get('valueSprite');
+    }
+});
-- 
2.1.4