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]>
kubernetes · Mar 12, 2020 · fea6a64 · fea6a64
1 parent 8e4748d
commit fea6a64
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/app/frontend/common/components/graph/component.ts b/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

diff --git a/src/app/frontend/common/components/graph/template.html b/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"