diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index 189e525018a..621e5fe3372 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -163,24 +163,20 @@
:y="graphHeight - measurements.legendOffset">
- {{legendTitle}}
+ {{legendTitle}} Series {{index + 1}} {{formatMetricUsage(series)}}
- Series {{index + 1}}
-
-
- {{formatMetricUsage(series)}}
+ {{legendTitle}} {{formatMetricUsage(series)}}
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index 34aaeed47ae..12943239b74 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -1,6 +1,17 @@
import d3 from 'd3';
+import _ from 'underscore';
export default function createTimeSeries(seriesData, graphWidth, graphHeight, graphHeightOffset) {
+ const maxValues = seriesData.map((timeSeries, index) => {
+ const maxValue = d3.max(timeSeries.values.map(d => d.value));
+ return {
+ maxValue,
+ index,
+ };
+ });
+
+ const maxValueFromSeries = _.max(maxValues, val => val.maxValue);
+
return seriesData.map((timeSeries) => {
const timeSeriesScaleX = d3.time.scale()
.range([0, graphWidth - 70]);
@@ -9,7 +20,7 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
.range([graphHeight - graphHeightOffset, 0]);
timeSeriesScaleX.domain(d3.extent(timeSeries.values, d => d.time));
- timeSeriesScaleY.domain([0, d3.max(timeSeries.values.map(d => d.value))]);
+ timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]);
const lineFunction = d3.svg.line()
.x(d => timeSeriesScaleX(d.time))
@@ -25,7 +36,6 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
linePath: lineFunction(timeSeries.values),
areaPath: areaFunction(timeSeries.values),
timeSeriesScaleX,
- timeSeriesScaleY,
values: timeSeries.values,
};
});
diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js
index 2cb6dcc7225..da2fbd26e23 100644
--- a/spec/javascripts/monitoring/graph/legend_spec.js
+++ b/spec/javascripts/monitoring/graph/legend_spec.js
@@ -93,7 +93,7 @@ describe('GraphLegend', () => {
const component = createComponent(defaultValuesComponent);
const titles = component.$el.querySelectorAll('.legend-metric-title');
- expect(getTextFromNode(component, '.legend-metric-title')).toEqual(component.legendTitle);
+ expect(getTextFromNode(component, '.legend-metric-title').indexOf(component.legendTitle)).not.toEqual(-1);
expect(titles[0].textContent.indexOf('Title')).not.toEqual(-1);
expect(titles[1].textContent.indexOf('Series')).not.toEqual(-1);
expect(getTextFromNode(component, '.y-label-text')).toEqual(component.yAxisLabel);
diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js
index 06af8d113e1..6bbc9811adb 100644
--- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js
+++ b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js
@@ -9,7 +9,6 @@ describe('Multiple time series', () => {
expect(typeof timeSeries[0].linePath).toEqual('string');
expect(typeof timeSeries[0].areaPath).toEqual('string');
expect(typeof timeSeries[0].timeSeriesScaleX).toEqual('function');
- expect(typeof timeSeries[0].timeSeriesScaleY).toEqual('function');
expect(timeSeries[0].values instanceof Array).toEqual(true);
});