From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id B4876B99FA for ; Mon, 11 Dec 2023 15:48:16 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 9899D19705 for ; Mon, 11 Dec 2023 15:48:16 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Mon, 11 Dec 2023 15:48:13 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id C6D0445B45 for ; Mon, 11 Dec 2023 15:48:12 +0100 (CET) From: Folke Gleumes To: pve-devel@lists.proxmox.com Date: Mon, 11 Dec 2023 15:47:20 +0100 Message-Id: <20231211144721.212071-4-f.gleumes@proxmox.com> X-Mailer: git-send-email 2.39.2 In-Reply-To: <20231211144721.212071-1-f.gleumes@proxmox.com> References: <20231211144721.212071-1-f.gleumes@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.017 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record T_SCC_BODY_TEXT_LINE -0.01 - Subject: [pve-devel] [RFC widget-toolkit 3/4] add option to display rrd graph as stacking X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Mon, 11 Dec 2023 14:48:16 -0000 Signed-off-by: Folke Gleumes --- src/panel/RRDChart.js | 59 +++++++++++++++++++++++++++++++++---------- 1 file changed, 46 insertions(+), 13 deletions(-) diff --git a/src/panel/RRDChart.js b/src/panel/RRDChart.js index dc5940c..983437e 100644 --- a/src/panel/RRDChart.js +++ b/src/panel/RRDChart.js @@ -118,9 +118,14 @@ Ext.define('Proxmox.widget.RRDChart', { if (view.fieldTitles && view.fieldTitles[view.fields.indexOf(item.field)]) { prefix = view.fieldTitles[view.fields.indexOf(item.field)]; } - let v = this.convertToUnits(record.get(item.field)); - let t = new Date(record.get('time')); - tooltip.setHtml(`${prefix}: ${v}${suffix}
${t}`); + let value = record.get(item.field); + if (value !== null) { + let v = this.convertToUnits(record.get(item.field)); + let t = new Date(record.get('time')); + tooltip.setHtml(`${prefix}: ${v}${suffix}
${t}`); + } else { + tooltip.setHtml('No Data'); + } }, onAfterAnimation: function(chart, eopts) { @@ -256,18 +261,13 @@ Ext.define('Proxmox.widget.RRDChart', { } // add a series for each field we get - me.fields.forEach(function(item, index) { - let title = item; - if (me.fieldTitles && me.fieldTitles[index]) { - title = me.fieldTitles[index]; - } + if (me.stacking) { me.addSeries(Ext.apply( { - type: 'line', + type: 'area', xField: 'time', - yField: item, - title: title, - fill: true, + yField: me.fields, + title: me.fieldTitles, style: { lineWidth: 1.5, opacity: 0.60, @@ -287,7 +287,40 @@ Ext.define('Proxmox.widget.RRDChart', { }, me.seriesConfig, )); - }); + } else { + me.fields.forEach(function(item, index) { + let title = item; + if (me.fieldTitles && me.fieldTitles[index]) { + title = me.fieldTitles[index]; + } + me.addSeries(Ext.apply( + { + type: 'line', + xField: 'time', + yField: item, + title: title, + fill: true, + style: { + lineWidth: 1.5, + opacity: 0.60, + }, + marker: { + opacity: 0, + scaling: 0.01, + }, + highlightCfg: { + opacity: 1, + scaling: 1.5, + }, + tooltip: { + trackMouse: true, + renderer: 'onSeriesTooltipRender', + }, + }, + me.seriesConfig, + )); + }); + } // enable animation after the store is loaded me.store.onAfter('load', function() { -- 2.39.2