Corrected y scale for multiple time series and visual improvements

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"
+        ref="legendTitleSvg"
+        x="38"
         :y="graphHeight - 30">
-        Series {{index + 1}}
-      </text>
-      <text
-        class="text-metric-usage"
-        :x="metricUsageXPosition + seriesXPosition + 45"
-        :y="graphHeight - 30">
-        {{formatMetricUsage(series)}}
+        {{legendTitle}} {{formatMetricUsage(series)}}
       </text>
     </g>
   </g>

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

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

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