1 files changed, 27 insertions, 3 deletions
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index cee39fd0559..eff0d7325cd 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import { scaleLinear, scaleTime } from 'd3-scale';
 import { line, area, curveLinear } from 'd3-shape';
 import { extent, max, sum } from 'd3-array';
-import { timeMinute } from 'd3-time';
+import { timeMinute, timeSecond } from 'd3-time';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
 const d3 = {
@@ -14,6 +14,7 @@ const d3 = {
   extent,
   max,
   timeMinute,
+  timeSecond,
   sum,
 };
 
@@ -51,6 +52,24 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
     return defaultColorPalette[pick];
   }
 
+  function findByDate(series, time) {
+    const val = series.find(v => Math.abs(d3.timeSecond.count(time, v.time)) < 60);
+    if (val) {
+      return val.value;
+    }
+    return NaN;
+  }
+
+  // The timeseries data may have gaps in it
+  // but we need a regularly-spaced set of time/value pairs
+  // this gives us a complete range of one minute intervals
+  // offset the same amount as the original data
+  const [minX, maxX] = xDom;
+  const offset = d3.timeMinute(minX) - Number(minX);
+  const datesWithoutGaps = d3.timeSecond.every(60)
+    .range(d3.timeMinute.offset(minX, -1), maxX)
+    .map(d => d - offset);
+
   query.result.forEach((timeSeries, timeSeriesNumber) => {
     let metricTag = '';
     let lineColor = '';
@@ -119,9 +138,14 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
       });
     }
 
+    const values = datesWithoutGaps.map(time => ({
+      time,
+      value: findByDate(timeSeries.values, time),
+    }));
+
     timeSeriesParsed.push({
-      linePath: lineFunction(timeSeries.values),
-      areaPath: areaFunction(timeSeries.values),
+      linePath: lineFunction(values),
+      areaPath: areaFunction(values),
       timeSeriesScaleX,
       timeSeriesScaleY,
       values: timeSeries.values,