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); });