projects / proxmox-widget-toolkit.git / blame
| Commit | Line | Data |
|---|---|---|
| e7ff021c DC |
1 | Ext.define('Proxmox.panel.GaugeWidget', { |
| 2 | extend: 'Ext.panel.Panel', | |
| 3 | alias: 'widget.proxmoxGauge', | |
| 4 | ||
| 5 | defaults: { | |
| 6 | style: { | |
| 01031528 TL |
7 | 'text-align': 'center', |
| 8 | }, | |
| e7ff021c DC |
9 | }, |
| 10 | items: [ | |
| 11 | { | |
| 12 | xtype: 'box', | |
| 13 | itemId: 'title', | |
| 14 | data: { | |
| 01031528 | 15 | title: '', |
| e7ff021c | 16 | }, |
| 01031528 | 17 | tpl: '<h3>{title}</h3>', |
| e7ff021c DC |
18 | }, |
| 19 | { | |
| 20 | xtype: 'polar', | |
| 21 | height: 120, | |
| 22 | border: false, | |
| 518dd0b6 DC |
23 | // set to '-' to suppress warning in debug mode |
| 24 | downloadServerUrl: '-', | |
| e7ff021c DC |
25 | itemId: 'chart', |
| 26 | series: [{ | |
| 27 | type: 'gauge', | |
| 28 | value: 0, | |
| 29 | colors: ['#f5f5f5'], | |
| 30 | sectors: [0], | |
| 31 | donut: 90, | |
| 32 | needleLength: 100, | |
| 01031528 | 33 | totalAngle: Math.PI, |
| e7ff021c DC |
34 | }], |
| 35 | sprites: [{ | |
| 36 | id: 'valueSprite', | |
| 37 | type: 'text', | |
| 38 | text: '', | |
| 39 | textAlign: 'center', | |
| 40 | textBaseline: 'bottom', | |
| 41 | x: 125, | |
| 42 | y: 110, | |
| 01031528 TL |
43 | fontSize: 30, |
| 44 | }], | |
| e7ff021c DC |
45 | }, |
| 46 | { | |
| 47 | xtype: 'box', | |
| 01031528 TL |
48 | itemId: 'text', |
| 49 | }, | |
| e7ff021c DC |
50 | ], |
| 51 | ||
| 52 | header: false, | |
| 53 | border: false, | |
| 54 | ||
| 55 | warningThreshold: 0.6, | |
| 56 | criticalThreshold: 0.9, | |
| 57 | warningColor: '#fc0', | |
| 58 | criticalColor: '#FF6C59', | |
| 59 | defaultColor: '#c2ddf2', | |
| 60 | backgroundColor: '#f5f5f5', | |
| 61 | ||
| 62 | initialValue: 0, | |
| 63 | ||
| 64 | ||
| 65 | updateValue: function(value, text) { | |
| 05a977a2 TL |
66 | let me = this; |
| 67 | let color = me.defaultColor; | |
| 68 | let attr = {}; | |
| e7ff021c DC |
69 | |
| 70 | if (value >= me.criticalThreshold) { | |
| 71 | color = me.criticalColor; | |
| 72 | } else if (value >= me.warningThreshold) { | |
| 73 | color = me.warningColor; | |
| 74 | } | |
| 75 | ||
| 76 | me.chart.series[0].setColors([color, me.backgroundColor]); | |
| 77 | me.chart.series[0].setValue(value*100); | |
| 78 | ||
| 79 | me.valueSprite.setText(' '+(value*100).toFixed(0) + '%'); | |
| 80 | attr.x = me.chart.getWidth()/2; | |
| 81 | attr.y = me.chart.getHeight()-20; | |
| 82 | if (me.spriteFontSize) { | |
| 83 | attr.fontSize = me.spriteFontSize; | |
| 84 | } | |
| 85 | me.valueSprite.setAttributes(attr, true); | |
| 86 | ||
| 87 | if (text !== undefined) { | |
| 88 | me.text.setHtml(text); | |
| 89 | } | |
| 90 | }, | |
| 91 | ||
| 92 | initComponent: function() { | |
| 05a977a2 | 93 | let me = this; |
| e7ff021c DC |
94 | |
| 95 | me.callParent(); | |
| 96 | ||
| 97 | if (me.title) { | |
| 01031528 | 98 | me.getComponent('title').update({ title: me.title }); |
| e7ff021c DC |
99 | } |
| 100 | me.text = me.getComponent('text'); | |
| 101 | me.chart = me.getComponent('chart'); | |
| 102 | me.valueSprite = me.chart.getSurface('chart').get('valueSprite'); | |
| 01031528 | 103 | }, |
| e7ff021c | 104 | }); |