From: Folke Gleumes <f.gleumes@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [RFC widget-toolkit 3/4] add option to display rrd graph as stacking
Date: Mon, 11 Dec 2023 15:47:20 +0100 [thread overview]
Message-ID: <20231211144721.212071-4-f.gleumes@proxmox.com> (raw)
In-Reply-To: <20231211144721.212071-1-f.gleumes@proxmox.com>
Signed-off-by: Folke Gleumes <f.gleumes@proxmox.com>
---
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}<br>${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}<br>${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
next prev parent reply other threads:[~2023-12-11 14:48 UTC|newest]
Thread overview: 6+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-12-11 14:47 [pve-devel] [RFC cluster/common/widget-toolkit/manager 0/4] split node memory graph into usage types Folke Gleumes
2023-12-11 14:47 ` [pve-devel] [RFC cluster 1/4] rrd: add free, buffer/cache and arc size to memory statistics Folke Gleumes
2023-12-12 7:49 ` DERUMIER, Alexandre
2023-12-11 14:47 ` [pve-devel] [RFC common 2/4] add more detailed statistics to memory report Folke Gleumes
2023-12-11 14:47 ` Folke Gleumes [this message]
2023-12-11 14:47 ` [pve-devel] [RFC manager 4/4] split ram usage into usage types Folke Gleumes
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20231211144721.212071-4-f.gleumes@proxmox.com \
--to=f.gleumes@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox