Hide area under zero in graph (#5000)

* Hide area under zero in graph

Set yScaleMax not to show area under zero.

* Update graph

Co-authored-by: Sebastian Florek <[email protected]>

Author: shu-mutou

src/app/frontend/common/components/graph/component.ts

@@ -34,6 +34,7 @@ export class GraphComponent implements OnInit, OnChanges {
   customColors = {};
   yAxisLabel = '';
   yAxisTickFormatting = (value: number) => `${value} ${this.yAxisSuffix_}`;
+  yScaleMax = 0;
 
   private suffixMap_: Map<number, string> = new Map<number, string>();
   private yAxisSuffix_ = '';
@@ -62,6 +63,7 @@ export class GraphComponent implements OnInit, OnChanges {
     let series: FormattedValue[];
     let highestSuffixPower = 0;
     let highestSuffix = '';
+    let maxValue = 0;
 
     switch (this.graphType) {
       case GraphType.Memory:
@@ -99,17 +101,35 @@ export class GraphComponent implements OnInit, OnChanges {
       } as DataPoint);
     });
 
-    return [
+    const result = [
       {
         name: this.id,
         series: points.reduce(this._average.bind(this), []).map(point => {
+          if (maxValue < point.y) {
+            maxValue = point.y;
+          }
+
           return {
             value: point.y,
             name: timeFormat('%H:%M')(new Date(1000 * point.x)),
           };
         }),
       },
     ];
+
+    // This way if max value is very small i.e. 0.0001 graph will be scaled to the more significant
+    // value.
+    switch (this.graphType) {
+      case GraphType.CPU:
+        this.yScaleMax = maxValue + 0.01;
+        break;
+      case GraphType.Memory:
+        this.yScaleMax = maxValue + 10;
+        break;
+      default:
+    }
+
+    return result;
   }
 
   // Calculate the average usage based on minute intervals. If there are more data points within

src/app/frontend/common/components/graph/template.html

@@ -20,6 +20,7 @@
                        [showYAxisLabel]="true"
                        [yAxisLabel]="yAxisLabel"
                        [yAxisTickFormatting]="yAxisTickFormatting"
+                       [yScaleMax]="yScaleMax"
                        [results]="series"
                        [showGridLines]="true"
                        [curve]="curve"