src/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             // set to '-' to suppress warning in debug mode
  24             downloadServerUrl: '-',
  25             itemId: 'chart',
  26             series: [{
  27                 type: 'gauge',
  28                 value: 0,
  29                 colors: ['#f5f5f5'],
  30                 sectors: [0],
  31                 donut: 90,
  32                 needleLength: 100,
  33                 totalAngle: Math.PI,
  34             }],
  35             sprites: [{
  36                 id: 'valueSprite',
  37                 type: 'text',
  38                 text: '',
  39                 textAlign: 'center',
  40                 textBaseline: 'bottom',
  41                 x: 125,
  42                 y: 110,
  43                 fontSize: 30,
  44             }],
  45         },
  46         {
  47             xtype: 'box',
  48             itemId: 'text',
  49         },
  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     checkThemeColors: function() {
  65         let me = this;
  66         let rootStyle = getComputedStyle(document.documentElement);
  67
  68         // get colors
  69         let panelBg = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
  70         let textColor = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
  71         me.defaultColor = rootStyle.getPropertyValue("--pwt-gauge-default").trim() || '#c2ddf2';
  72         me.criticalColor = rootStyle.getPropertyValue("--pwt-gauge-crit").trim() || '#ff6c59';
  73         me.warningColor = rootStyle.getPropertyValue("--pwt-gauge-warn").trim() || '#fc0';
  74         me.backgroundColor = rootStyle.getPropertyValue("--pwt-gauge-back").trim() || '#f5f5f5';
  75
  76         // set gauge colors
  77         let value = me.chart.series[0].getValue() / 100;
  78
  79         let color = me.defaultColor;
  80
  81         if (value >= me.criticalThreshold) {
  82             color = me.criticalColor;
  83         } else if (value >= me.warningThreshold) {
  84             color = me.warningColor;
  85         }
  86
  87         me.chart.series[0].setColors([color, me.backgroundColor]);
  88
  89         // set text and background colors
  90         me.chart.setBackground(panelBg);
  91         me.valueSprite.setAttributes({ fillStyle: textColor }, true);
  92         me.chart.redraw();
  93     },
  94
  95     updateValue: function(value, text) {
  96         let me = this;
  97         let color = me.defaultColor;
  98         let attr = {};
  99
 100         if (value >= me.criticalThreshold) {
 101             color = me.criticalColor;
 102         } else if (value >= me.warningThreshold) {
 103             color = me.warningColor;
 104         }
 105
 106         me.chart.series[0].setColors([color, me.backgroundColor]);
 107         me.chart.series[0].setValue(value*100);
 108
 109         me.valueSprite.setText(' '+(value*100).toFixed(0) + '%');
 110         attr.x = me.chart.getWidth()/2;
 111         attr.y = me.chart.getHeight()-20;
 112         if (me.spriteFontSize) {
 113             attr.fontSize = me.spriteFontSize;
 114         }
 115         me.valueSprite.setAttributes(attr, true);
 116
 117         if (text !== undefined) {
 118             me.text.setHtml(text);
 119         }
 120     },
 121
 122     initComponent: function() {
 123         let me = this;
 124
 125         me.callParent();
 126
 127         if (me.title) {
 128             me.getComponent('title').update({ title: me.title });
 129         }
 130         me.text = me.getComponent('text');
 131         me.chart = me.getComponent('chart');
 132         me.valueSprite = me.chart.getSurface('chart').get('valueSprite');
 133
 134         me.checkThemeColors();
 135
 136         // switch colors on media query changes
 137         me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
 138         me.themeListener = (e) => { me.checkThemeColors(); };
 139         me.mediaQueryList.addEventListener("change", me.themeListener);
 140     },
 141
 142     doDestroy: function() {
 143         let me = this;
 144
 145         me.mediaQueryList.removeEventListener("change", me.themeListener);
 146
 147         me.callParent();
 148     },
 149 });