add GaugeWidget from PVE

and adds the functionality to set a different fontsize

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/Makefile b/Makefile
index 5ab68174ee4bc866a14a9d956d01863ca3dcff45..54b1cac0d34f176a8cc2e804213e5b0619d3c9d5 100644 (file)
--- 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 (file)
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');
+    }
+});