1 files changed, 69 insertions, 34 deletions

diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index eff0d7325cd..d5971730e31 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -30,7 +30,7 @@ const defaultColorOrder = ['blue', 'orange', 'red', 'green', 'purple'];
 
 const defaultStyleOrder = ['solid', 'dashed', 'dotted'];
 
-function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle) {
+function queryTimeSeries(query, graphDrawData, lineStyle) {
   let usedColors = [];
   let renderCanary = false;
   const timeSeriesParsed = [];
@@ -64,7 +64,7 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
   // 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 [minX, maxX] = graphDrawData.xDom;
   const offset = d3.timeMinute(minX) - Number(minX);
   const datesWithoutGaps = d3.timeSecond.every(60)
     .range(d3.timeMinute.offset(minX, -1), maxX)
@@ -84,31 +84,6 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
       renderCanary = true;
     }
 
-    const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]);
-
-    const timeSeriesScaleY = d3.scaleLinear().range([graphHeight - graphHeightOffset, 0]);
-
-    timeSeriesScaleX.domain(xDom);
-    timeSeriesScaleX.ticks(d3.timeMinute, 60);
-    timeSeriesScaleY.domain(yDom);
-
-    const defined = d => !Number.isNaN(d.value) && d.value != null;
-
-    const lineFunction = d3
-      .line()
-      .defined(defined)
-      .curve(d3.curveLinear) // d3 v4 uses curbe instead of interpolate
-      .x(d => timeSeriesScaleX(d.time))
-      .y(d => timeSeriesScaleY(d.value));
-
-    const areaFunction = d3
-      .area()
-      .defined(defined)
-      .curve(d3.curveLinear)
-      .x(d => timeSeriesScaleX(d.time))
-      .y0(graphHeight - graphHeightOffset)
-      .y1(d => timeSeriesScaleY(d.value));
-
     const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]];
     const seriesCustomizationData =
       query.series != null && _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel });
@@ -144,10 +119,10 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
     }));
 
     timeSeriesParsed.push({
-      linePath: lineFunction(values),
-      areaPath: areaFunction(values),
-      timeSeriesScaleX,
-      timeSeriesScaleY,
+      linePath: graphDrawData.lineFunction(values),
+      areaPath: graphDrawData.areaBelowLine(values),
+      timeSeriesScaleX: graphDrawData.timeSeriesScaleX,
+      timeSeriesScaleY: graphDrawData.timeSeriesScaleY,
       values: timeSeries.values,
       max: maximumValue,
       average: accum / timeSeries.values.length,
@@ -164,7 +139,7 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
   return timeSeriesParsed;
 }
 
-export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) {
+function xyDomain(queries) {
   const allValues = queries.reduce(
     (allQueryResults, query) =>
       allQueryResults.concat(
@@ -176,10 +151,70 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
   const xDom = d3.extent(allValues, d => d.time);
   const yDom = [0, d3.max(allValues.map(d => d.value))];
 
-  return queries.reduce((series, query, index) => {
+  return {
+    xDom,
+    yDom,
+  };
+}
+
+export function generateGraphDrawData(queries, graphWidth, graphHeight, graphHeightOffset) {
+  const { xDom, yDom } = xyDomain(queries);
+
+  const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]);
+  const timeSeriesScaleY = d3.scaleLinear().range([graphHeight - graphHeightOffset, 0]);
+
+  timeSeriesScaleX.domain(xDom);
+  timeSeriesScaleX.ticks(d3.timeMinute, 60);
+  timeSeriesScaleY.domain(yDom);
+
+  const defined = d => !Number.isNaN(d.value) && d.value != null;
+
+  const lineFunction = d3
+    .line()
+    .defined(defined)
+    .curve(d3.curveLinear) // d3 v4 uses curbe instead of interpolate
+    .x(d => timeSeriesScaleX(d.time))
+    .y(d => timeSeriesScaleY(d.value));
+
+  const areaBelowLine = d3
+    .area()
+    .defined(defined)
+    .curve(d3.curveLinear)
+    .x(d => timeSeriesScaleX(d.time))
+    .y0(graphHeight - graphHeightOffset)
+    .y1(d => timeSeriesScaleY(d.value));
+
+  const areaAboveLine = d3
+    .area()
+    .defined(defined)
+    .curve(d3.curveLinear)
+    .x(d => timeSeriesScaleX(d.time))
+    .y0(0)
+    .y1(d => timeSeriesScaleY(d.value));
+
+  return {
+    lineFunction,
+    areaBelowLine,
+    areaAboveLine,
+    xDom,
+    yDom,
+    timeSeriesScaleX,
+    timeSeriesScaleY,
+  };
+}
+
+export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) {
+  const graphDrawData = generateGraphDrawData(queries, graphWidth, graphHeight, graphHeightOffset);
+
+  const timeSeries = queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];
     return series.concat(
-      queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle),
+      queryTimeSeries(query, graphDrawData, lineStyle),
     );
   }, []);
+
+  return {
+    timeSeries,
+    graphDrawData,
+  };
 }