Corrected y scale for multiple time series and visual improvements

2 files changed, 18 insertions, 12 deletions

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">
       </rect>
       <text
+        v-if="timeSeries.length > 1"
         class="legend-metric-title"
         ref="legendTitleSvg"
         x="38"
         :y="graphHeight - 30">
-        {{legendTitle}}
+        {{legendTitle}} Series {{index + 1}} {{formatMetricUsage(series)}}
       </text>
       <text
+        v-else
         class="legend-metric-title"
-        ref="seriesTitleSvg"
-        :x="seriesXPosition + 40"
-        :y="graphHeight - 30">
-        Series {{index + 1}}
-      </text>
-      <text
-        class="text-metric-usage"
-        :x="metricUsageXPosition + seriesXPosition + 45"
+        ref="legendTitleSvg"
+        x="38"
         :y="graphHeight - 30">
-        {{formatMetricUsage(series)}}
+        {{legendTitle}} {{formatMetricUsage(series)}}
       </text>
     </g>
   </g>
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,
     };
   });