]>
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 | }); |