panel/GaugeWidget.js

   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         let me = this;
  65         let color = me.defaultColor;
  66         let 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         let 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 });