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