Workaround the colorfill problem for the vertical DOS plot (#56)

The dos plot has problem that the TDOS will have a spurious step jump if the grap colorfill background is used.
We don't know what exactly cause the issue but the workaround is found by adding a dumb dos as the first line to the plot.

---------
Co-authored-by: Jusong Yu <[email protected]>

Author: dou-du

js/lib/bands.js

@@ -170,7 +170,10 @@ function bandPlot(bandDivId, bandPathTextBoxId, dataFilePaths, dosFile, showFerm
                 $("#" + bandDivId + "bt-togglePdos").addClass("button-white");
                 $("#" + bandDivId + "bt-togglePdos").removeClass("button");
 
-                for (var i = 1; i < theBandPlot.dosSeries.length; i++) {
+		// The PDOS curves start from index 2.
+		// Index 0 is for the dumb datset of y axis add to workaround the step change issue #49 .
+		// Index 1 is for total DOS (The widget don't know if the first set of data is TDOS or not, this need to be polish in future.)
+                for (var i = 2; i < theBandPlot.dosSeries.length; i++) {
                     theBandPlot.dosSeries[i].hidden = true;
                 };
                 theBandPlot.myDos.update();
@@ -179,7 +182,7 @@ function bandPlot(bandDivId, bandPathTextBoxId, dataFilePaths, dosFile, showFerm
                 $("#" + bandDivId + "bt-togglePdos").addClass("button");
                 $("#" + bandDivId + "bt-togglePdos").removeClass("button-white");
 
-                for (var i = 1; i < theBandPlot.dosSeries.length; i++) {
+                for (var i = 2; i < theBandPlot.dosSeries.length; i++) {
                     theBandPlot.dosSeries[i].hidden = false;
                 };
                 theBandPlot.myDos.update();

js/lib/bandstructure.js

@@ -332,6 +332,12 @@ BandPlot.prototype.initDosChart = function (orientation = 'vertical') {
                 legend: {
                     display: this.showLegend,
                     position: 'right',
+                    labels: {
+                        filter: function(item, chart) {
+                        // remove the label for the dumb dataset of the y axis
+                            return !item.text.includes('y axis');
+                        }
+                    }
                 },
                 scales: {
                     xAxes: [{
@@ -443,6 +449,12 @@ BandPlot.prototype.initDosChart = function (orientation = 'vertical') {
                 legend: {
                     display: true,
                     position: 'right',
+                    labels: {
+                        filter: function(item, chart) {
+                        // remove the label for the dumb dataset of the y axis
+                            return !item.text.includes('y axis');
+                        }
+                    }
                 },
                 scales: {
                     yAxes: [{
@@ -784,6 +796,40 @@ BandPlot.prototype.updateDosPlot = function (orientation = 'vertical') {
     bandPlotObject.dosSeries = [];
     curve = [];
 
+
+    // Here, a dumb dataset was created to represent the y axis.
+    // All the DOS curves were filled to this dumb dataset.
+    var dosx = bandPlotObject.dosData['dos'][0]['x'];
+    var dosy = bandPlotObject.dosData['dos'][0]['y'];
+
+    // The dumb dataset was set to the Fermi level (<= dosFermiEnergy)
+    // So the color fill will up to the Fermi level
+    dosx.forEach(function (data, k) {
+        if (orientation === 'vertical') {
+	    if (data <= bandPlotObject.dosFermiEnergy) {
+            	curve.push({ x: 0, y: data - bandPlotObject.dosFermiEnergy });
+	    };
+        } else {
+	    if (data <= bandPlotObject.dosFermiEnergy) {
+            	curve.push({ x: data - bandPlotObject.dosFermiEnergy, y: 0 });
+	    };
+        };
+    });
+
+    // The color of the dumb dataset is white, label is 'y axis'
+    var dumb_dos = {
+        borderColor: 'white',
+        hidden: false,
+        borderWidth: 1,
+        data: curve,
+        fill: false,
+        showLine: true,
+        pointRadius: 0,
+        label: 'y axis'
+    };
+
+    bandPlotObject.dosSeries.push(dumb_dos);
+
     for (let i = 0; i < bandPlotObject.dosData['dos'].length; i++) {
         curve = [];
 
@@ -804,7 +850,7 @@ BandPlot.prototype.updateDosPlot = function (orientation = 'vertical') {
             hidden: false,
             borderWidth: 1,
             data: curve,
-            fill: true,
+            fill: 0,
             showLine: true,
             pointRadius: 0,
             label: bandPlotObject.dosData['dos'][i]['label'],