[pve-devel] [RFC widget-toolkit 3/4] add option to display rrd graph as stacking

[Folke Gleumes]

Signed-off-by: Folke Gleumes <f.gleumes at 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