From e7ff021c57872b3fde2c7c175cc7d55ad3d9bdcd Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Tue, 10 Oct 2017 15:10:20 +0200
Subject: [PATCH] add GaugeWidget from PVE

and adds the functionality to set a different fontsize

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

diff --git a/Makefile b/Makefile
index 5ab6817..54b1cac 100644
--- a/Makefile
+++ b/Makefile
@@ -37,6 +37,7 @@ JSSRC=					\
 	panel/InputPanel.js		\
 	panel/LogView.js		\
 	panel/RRDChart.js		\
+	panel/GaugeWidget.js		\
 	window/Edit.js			\
 	window/PasswordEdit.js		\
 	window/TaskViewer.js		\
diff --git a/panel/GaugeWidget.js b/panel/GaugeWidget.js
new file mode 100644
index 0000000..b5dfb4c
--- /dev/null
+++ b/panel/GaugeWidget.js
@@ -0,0 +1,102 @@
+Ext.define('Proxmox.panel.GaugeWidget', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.proxmoxGauge',
+
+    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: '#FF6C59',
+    defaultColor: '#c2ddf2',
+    backgroundColor: '#f5f5f5',
+
+    initialValue: 0,
+
+
+    updateValue: function(value, text) {
+	var me = this;
+	var color = me.defaultColor;
+	var attr = {};
+
+	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) + '%');
+	attr.x = me.chart.getWidth()/2;
+	attr.y = me.chart.getHeight()-20;
+	if (me.spriteFontSize) {
+	    attr.fontSize = me.spriteFontSize;
+	}
+	me.valueSprite.setAttributes(attr, 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.39.2