diff --git a/src/app/frontend/common/components/graph/component.ts b/src/app/frontend/common/components/graph/component.ts index ae9c80bc4174..41bd104d3634 100644 --- 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 = new Map(); 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,10 +101,14 @@ 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)), @@ -110,6 +116,20 @@ export class GraphComponent implements OnInit, OnChanges { }), }, ]; + + // 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 index 84e1426add60..66c8d9bf0b3d 100644 --- 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"