Merge branch 'additional-time-series-charts' into 'master'

Added support for additional time series charts

Closes #33345

See merge request !13159

app/assets/javascripts/monitoring/components/graph.vue

@@ -3,11 +3,12 @@
   import GraphLegend from './graph/legend.vue';
   import GraphFlag from './graph/flag.vue';
   import GraphDeployment from './graph/deployment.vue';
+  import monitoringPaths from './monitoring_paths.vue';
   import MonitoringMixin from '../mixins/monitoring_mixins';
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
-  import { formatRelevantDigits } from '../../lib/utils/number_utils';
   import { timeScaleFormat } from '../utils/date_time_formatters';
+  import createTimeSeries from '../utils/multiple_time_series';
   import bp from '../../breakpoints';
 
   const bisectDate = d3.bisector(d => d.time).left;
@@ -36,32 +37,29 @@
 
     data() {
       return {
+        baseGraphHeight: 450,
+        baseGraphWidth: 600,
         graphHeight: 450,
         graphWidth: 600,
         graphHeightOffset: 120,
-        xScale: {},
-        yScale: {},
         margin: {},
-        data: [],
         unitOfDisplay: '',
         areaColorRgb: '#8fbce8',
         lineColorRgb: '#1f78d1',
         yAxisLabel: '',
         legendTitle: '',
         reducedDeploymentData: [],
-        area: '',
-        line: '',
         measurements: measurements.large,
         currentData: {
           time: new Date(),
           value: 0,
         },
-        currentYCoordinate: 0,
+        currentDataIndex: 0,
         currentXCoordinate: 0,
         currentFlagPosition: 0,
-        metricUsage: '',
         showFlag: false,
         showDeployInfo: true,
+        timeSeries: [],
       };
     },
 
@@ -69,16 +67,17 @@
       GraphLegend,
       GraphFlag,
       GraphDeployment,
+      monitoringPaths,
     },
 
     computed: {
       outterViewBox() {
-        return `0 0 ${this.graphWidth} ${this.graphHeight}`;
+        return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
       },
 
       innerViewBox() {
-        if ((this.graphWidth - 150) > 0) {
-          return `0 0 ${this.graphWidth - 150} ${this.graphHeight}`;
+        if ((this.baseGraphWidth - 150) > 0) {
+          return `0 0 ${this.baseGraphWidth - 150} ${this.baseGraphHeight}`;
         }
         return '0 0 0 0';
       },
@@ -89,7 +88,7 @@
 
       paddingBottomRootSvg() {
         return {
-          paddingBottom: `${(Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0}%`,
+          paddingBottom: `${(Math.ceil(this.baseGraphHeight * 100) / this.baseGraphWidth) || 0}%`,
         };
       },
     },
@@ -104,17 +103,16 @@
           this.margin = measurements.small.margin;
           this.measurements = measurements.small;
         }
-        this.data = query.result[0].values;
         this.unitOfDisplay = query.unit || '';
         this.yAxisLabel = this.graphData.y_label || 'Values';
         this.legendTitle = query.label || 'Average';
         this.graphWidth = this.$refs.baseSvg.clientWidth -
                      this.margin.left - this.margin.right;
         this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
-        if (this.data !== undefined) {
+        this.baseGraphHeight = this.graphHeight;
+        this.baseGraphWidth = this.graphWidth;
         this.renderAxesPaths();
         this.formatDeployments();
-        }
       },
 
       handleMouseOverGraph(e) {
@@ -123,16 +121,17 @@
         point.y = e.clientY;
         point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
         point.x = point.x += 7;
-        const timeValueOverlay = this.xScale.invert(point.x);
-        const overlayIndex = bisectDate(this.data, timeValueOverlay, 1);
-        const d0 = this.data[overlayIndex - 1];
-        const d1 = this.data[overlayIndex];
+        const firstTimeSeries = this.timeSeries[0];
+        const timeValueOverlay = firstTimeSeries.timeSeriesScaleX.invert(point.x);
+        const overlayIndex = bisectDate(firstTimeSeries.values, timeValueOverlay, 1);
+        const d0 = firstTimeSeries.values[overlayIndex - 1];
+        const d1 = firstTimeSeries.values[overlayIndex];
         if (d0 === undefined || d1 === undefined) return;
         const evalTime = timeValueOverlay - d0[0] > d1[0] - timeValueOverlay;
         this.currentData = evalTime ? d1 : d0;
-        this.currentXCoordinate = Math.floor(this.xScale(this.currentData.time));
+        this.currentDataIndex = evalTime ? overlayIndex : (overlayIndex - 1);
+        this.currentXCoordinate = Math.floor(firstTimeSeries.timeSeriesScaleX(this.currentData.time));
         const currentDeployXPos = this.mouseOverDeployInfo(point.x);
-        this.currentYCoordinate = this.yScale(this.currentData.value);
 
         if (this.currentXCoordinate > (this.graphWidth - 200)) {
           this.currentFlagPosition = this.currentXCoordinate - 103;
@@ -145,17 +144,25 @@
         } else {
           this.showFlag = true;
         }
-
-        this.metricUsage = `${formatRelevantDigits(this.currentData.value)} ${this.unitOfDisplay}`;
       },
 
       renderAxesPaths() {
+        this.timeSeries = createTimeSeries(this.graphData.queries[0].result,
+        this.graphWidth,
+        this.graphHeight,
+        this.graphHeightOffset);
+
+        if (this.timeSeries.length > 3) {
+          this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
+        }
+
         const axisXScale = d3.time.scale()
           .range([0, this.graphWidth]);
-        this.yScale = d3.scale.linear()
+        const axisYScale = d3.scale.linear()
           .range([this.graphHeight - this.graphHeightOffset, 0]);
-        axisXScale.domain(d3.extent(this.data, d => d.time));
-        this.yScale.domain([0, d3.max(this.data.map(d => d.value))]);
+
+        axisXScale.domain(d3.extent(this.timeSeries[0].values, d => d.time));
+        axisYScale.domain([0, d3.max(this.timeSeries[0].values.map(d => d.value))]);
 
         const xAxis = d3.svg.axis()
           .scale(axisXScale)
@@ -164,7 +171,7 @@
           .orient('bottom');
 
         const yAxis = d3.svg.axis()
-          .scale(this.yScale)
+          .scale(axisYScale)
           .ticks(measurements.yTicks)
           .orient('left');
 
@@ -180,25 +187,6 @@
                 .attr('class', 'axis-tick');
             } // Avoid adding the class to the first tick, to prevent coloring
           }); // This will select all of the ticks once they're rendered
-
-        this.xScale = d3.time.scale()
-          .range([0, this.graphWidth - 70]);
-
-        this.xScale.domain(d3.extent(this.data, d => d.time));
-
-        const areaFunction = d3.svg.area()
-          .x(d => this.xScale(d.time))
-          .y0(this.graphHeight - this.graphHeightOffset)
-          .y1(d => this.yScale(d.value))
-          .interpolate('linear');
-
-        const lineFunction = d3.svg.line()
-          .x(d => this.xScale(d.time))
-          .y(d => this.yScale(d.value));
-
-        this.line = lineFunction(this.data);
-
-        this.area = areaFunction(this.data);
       },
     },
 
@@ -245,30 +233,25 @@
           :graph-height="graphHeight"
           :margin="margin"
           :measurements="measurements"
-          :area-color-rgb="areaColorRgb"
           :legend-title="legendTitle"
           :y-axis-label="yAxisLabel"
-          :metric-usage="metricUsage"
+          :time-series="timeSeries"
+          :unit-of-display="unitOfDisplay"
+          :current-data-index="currentDataIndex"
         />
         <svg
           class="graph-data"
           :viewBox="innerViewBox"
           ref="graphData">
-            <path
-              class="metric-area"
-              :d="area"
-              :fill="areaColorRgb"
-              transform="translate(-5, 20)">
-            </path>
-            <path
-              class="metric-line"
-              :d="line"
-              :stroke="lineColorRgb"
-              fill="none"
-              stroke-width="2"
-              transform="translate(-5, 20)">
-            </path>
-            <graph-deployment
+            <monitoring-paths 
+              v-for="(path, index) in timeSeries"
+              :key="index"
+              :generated-line-path="path.linePath"
+              :generated-area-path="path.areaPath"
+              :line-color="path.lineColor"
+              :area-color="path.areaColor"
+            />
+            <monitoring-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
               :graph-height="graphHeight"
@@ -277,7 +260,6 @@
             <graph-flag
               v-if="showFlag"
               :current-x-coordinate="currentXCoordinate"
-              :current-y-coordinate="currentYCoordinate"
               :current-data="currentData"
               :current-flag-position="currentFlagPosition"
               :graph-height="graphHeight"

app/assets/javascripts/monitoring/components/graph/flag.vue

@@ -7,10 +7,6 @@
         type: Number,
         required: true,
       },
-      currentYCoordinate: {
-        type: Number,
-        required: true,
-      },
       currentFlagPosition: {
         type: Number,
         required: true,
@@ -60,15 +56,6 @@
       :y2="calculatedHeight"
       transform="translate(-5, 20)">
     </line>
-    <circle
-      class="circle-metric"
-      :fill="circleColorRgb"
-      stroke="#000"
-      :cx="currentXCoordinate"
-      :cy="currentYCoordinate"
-      r="5"
-      transform="translate(-5, 20)">
-    </circle>
     <svg 
       class="rect-text-metric"
       :x="currentFlagPosition"

app/assets/javascripts/monitoring/components/graph/legend.vue

 <script>
+  import { formatRelevantDigits } from '../../../lib/utils/number_utils';
+
   export default {
     props: {
       graphWidth: {
@@ -17,10 +19,6 @@
         type: Object,
         required: true,
       },
-      areaColorRgb: {
-        type: String,
-        required: true,
-      },
       legendTitle: {
         type: String,
         required: true,
@@ -29,15 +27,25 @@
         type: String,
         required: true,
       },
-      metricUsage: {
+      timeSeries: {
+        type: Array,
+        required: true,
+      },
+      unitOfDisplay: {
         type: String,
         required: true,
       },
+      currentDataIndex: {
+        type: Number,
+        required: true,
+      },
     },
     data() {
       return {
         yLabelWidth: 0,
         yLabelHeight: 0,
+        seriesXPosition: 0,
+        metricUsageXPosition: 0,
       };
     },
     computed: {
@@ -63,10 +71,28 @@
       yPosition() {
         return ((this.graphHeight - this.margin.top) + this.measurements.axisLabelLineOffset) || 0;
       },
+
+    },
+    methods: {
+      translateLegendGroup(index) {
+        return `translate(0, ${12 * (index)})`;
+      },
+
+      formatMetricUsage(series) {
+        return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`;
+      },
     },
     mounted() {
       this.$nextTick(() => {
         const bbox = this.$refs.ylabel.getBBox();
+        this.metricUsageXPosition = 0;
+        this.seriesXPosition = 0;
+        if (this.$refs.legendTitleSvg != null) {
+          this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
+        }
+        if (this.$refs.seriesTitleSvg != null) {
+          this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
+        }
         this.yLabelWidth = bbox.width + 10; // Added some padding
         this.yLabelHeight = bbox.height + 5;
       });
@@ -121,24 +147,33 @@
       dy=".35em">
       Time
     </text>
+    <g class="legend-group"
+      v-for="(series, index) in timeSeries"
+      :key="index"
+      :transform="translateLegendGroup(index)">
       <rect
-      :fill="areaColorRgb"
+        :fill="series.areaColor"
         :width="measurements.legends.width"
         :height="measurements.legends.height"
         x="20"
         :y="graphHeight - measurements.legendOffset">
       </rect>
       <text
-      class="text-metric-title"
-      x="50"
-      :y="graphHeight - 25">
-      {{legendTitle}}
+        v-if="timeSeries.length > 1"
+        class="legend-metric-title"
+        ref="legendTitleSvg"
+        x="38"
+        :y="graphHeight - 30">
+        {{legendTitle}} Series {{index + 1}} {{formatMetricUsage(series)}}
       </text>
       <text
-      class="text-metric-usage"
-      x="50"
-      :y="graphHeight - 10">
-      {{metricUsage}}
+        v-else
+        class="legend-metric-title"
+        ref="legendTitleSvg"
+        x="38"
+        :y="graphHeight - 30">
+        {{legendTitle}} {{formatMetricUsage(series)}}
       </text>
     </g>
+  </g>
 </template>

app/assets/javascripts/monitoring/components/monitoring_paths.vue

+<script>
+  export default {
+    props: {
+      generatedLinePath: {
+        type: String,
+        required: true,
+      },
+      generatedAreaPath: {
+        type: String,
+        required: true,
+      },
+      lineColor: {
+        type: String,
+        required: true,
+      },
+      areaColor: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>
+<template>
+  <g>
+    <path
+      class="metric-area"
+      :d="generatedAreaPath"
+      :fill="areaColor"
+      transform="translate(-5, 20)">
+    </path>
+    <path
+      class="metric-line"
+      :d="generatedLinePath"
+      :stroke="lineColor"
+      fill="none"
+      stroke-width="1"
+      transform="translate(-5, 20)">
+    </path>
+  </g>
+</template>

app/assets/javascripts/monitoring/mixins/monitoring_mixins.js

@@ -21,9 +21,9 @@ const mixins = {
     formatDeployments() {
       this.reducedDeploymentData = this.deploymentData.reduce((deploymentDataArray, deployment) => {
         const time = new Date(deployment.created_at);
-        const xPos = Math.floor(this.xScale(time));
+        const xPos = Math.floor(this.timeSeries[0].timeSeriesScaleX(time));
 
-        time.setSeconds(this.data[0].time.getSeconds());
+        time.setSeconds(this.timeSeries[0].values[0].time.getSeconds());
 
         if (xPos >= 0) {
           deploymentDataArray.push({

app/assets/javascripts/monitoring/stores/monitoring_store.js

 import _ from 'underscore';
 
-class MonitoringStore {
-  constructor() {
-    this.groups = [];
-    this.deploymentData = [];
-  }
+function sortMetrics(metrics) {
+  return _.chain(metrics).sortBy('weight').sortBy('title').value();
+}
 
-  // eslint-disable-next-line class-methods-use-this
-  createArrayRows(metrics = []) {
-    const currentMetrics = metrics;
-    const availableMetrics = [];
-    let metricsRow = [];
-    let index = 1;
-    Object.keys(currentMetrics).forEach((key) => {
-      const metricValues = currentMetrics[key].queries[0].result[0].values;
-      if (metricValues != null) {
-        const literalMetrics = metricValues.map(metric => ({
-          time: new Date(metric[0] * 1000),
-          value: metric[1],
+function normalizeMetrics(metrics) {
+  return metrics.map(metric => ({
+    ...metric,
+    queries: metric.queries.map(query => ({
+      ...query,
+      result: query.result.map(result => ({
+        ...result,
+        values: result.values.map(([timestamp, value]) => ({
+          time: new Date(timestamp * 1000),
+          value,
+        })),
+      })),
+    })),
   }));
-        currentMetrics[key].queries[0].result[0].values = literalMetrics;
-        metricsRow.push(currentMetrics[key]);
-        if (index % 2 === 0) {
-          availableMetrics.push(metricsRow);
-          metricsRow = [];
-        }
-        index = index += 1;
+}
+
+function collate(array, rows = 2) {
+  const collatedArray = [];
+  let row = [];
+  array.forEach((value, index) => {
+    row.push(value);
+    if ((index + 1) % rows === 0) {
+      collatedArray.push(row);
+      row = [];
     }
   });
-    if (metricsRow.length > 0) {
-      availableMetrics.push(metricsRow);
+  if (row.length > 0) {
+    collatedArray.push(row);
   }
-    return availableMetrics;
+  return collatedArray;
+}
+
+export default class MonitoringStore {
+  constructor() {
+    this.groups = [];
+    this.deploymentData = [];
   }
 
   storeMetrics(groups = []) {
-    this.groups = groups.map((group) => {
-      const currentGroup = group;
-      currentGroup.metrics = _.chain(group.metrics).sortBy('weight').sortBy('title').value();
-      currentGroup.metrics = this.createArrayRows(currentGroup.metrics);
-      return currentGroup;
-    });
+    this.groups = groups.map(group => ({
+      ...group,
+      metrics: collate(normalizeMetrics(sortMetrics(group.metrics))),
+    }));
   }
 
   storeDeploymentData(deploymentData = []) {
@@ -57,5 +63,3 @@ class MonitoringStore {
     return metricsCount;
   }
 }
-
-export default MonitoringStore;

app/assets/javascripts/monitoring/utils/measurements.js

@@ -7,15 +7,15 @@ export default {
       left: 40,
     },
     legends: {
-      width: 15,
-      height: 25,
+      width: 10,
+      height: 3,
     },
     backgroundLegend: {
       width: 30,
       height: 50,
     },
     axisLabelLineOffset: -20,
-    legendOffset: 35,
+    legendOffset: 33,
   },
   large: { // This covers both md and lg screen sizes
     margin: {
@@ -25,15 +25,15 @@ export default {
       left: 80,
     },
     legends: {
-      width: 20,
-      height: 30,
+      width: 15,
+      height: 3,
     },
     backgroundLegend: {
       width: 30,
       height: 150,
     },
     axisLabelLineOffset: 20,
-    legendOffset: 38,
+    legendOffset: 36,
   },
   xTicks: 8,
   yTicks: 3,

app/assets/javascripts/monitoring/utils/multiple_time_series.js

+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);
+
+  let timeSeriesNumber = 1;
+  let lineColor = '#1f78d1';
+  let areaColor = '#8fbce8';
+  return seriesData.map((timeSeries) => {
+    const timeSeriesScaleX = d3.time.scale()
+      .range([0, graphWidth - 70]);
+
+    const timeSeriesScaleY = d3.scale.linear()
+      .range([graphHeight - graphHeightOffset, 0]);
+
+    timeSeriesScaleX.domain(d3.extent(timeSeries.values, d => d.time));
+    timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]);
+
+    const lineFunction = d3.svg.line()
+      .x(d => timeSeriesScaleX(d.time))
+      .y(d => timeSeriesScaleY(d.value));
+
+    const areaFunction = d3.svg.area()
+      .x(d => timeSeriesScaleX(d.time))
+      .y0(graphHeight - graphHeightOffset)
+      .y1(d => timeSeriesScaleY(d.value))
+      .interpolate('linear');
+
+    switch (timeSeriesNumber) {
+      case 1:
+        lineColor = '#1f78d1';
+        areaColor = '#8fbce8';
+        break;
+      case 2:
+        lineColor = '#fc9403';
+        areaColor = '#feca81';
+        break;
+      case 3:
+        lineColor = '#db3b21';
+        areaColor = '#ed9d90';
+        break;
+      case 4:
+        lineColor = '#1aaa55';
+        areaColor = '#8dd5aa';
+        break;
+      case 5:
+        lineColor = '#6666c4';
+        areaColor = '#d1d1f0';
+        break;
+      default:
+        lineColor = '#1f78d1';
+        areaColor = '#8fbce8';
+        break;
+    }
+
+    if (timeSeriesNumber <= 5) {
+      timeSeriesNumber = timeSeriesNumber += 1;
+    } else {
+      timeSeriesNumber = 1;
+    }
+
+    return {
+      linePath: lineFunction(timeSeries.values),
+      areaPath: areaFunction(timeSeries.values),
+      timeSeriesScaleX,
+      values: timeSeries.values,
+      lineColor,
+      areaColor,
+    };
+  });
+}

app/assets/stylesheets/pages/environments.scss

@@ -169,7 +169,7 @@
 }
 
 .metric-area {
-  opacity: 0.8;
+  opacity: 0.25;
 }
 
 .prometheus-graph-overlay {
@@ -251,8 +251,14 @@
     font-weight: $gl-font-weight-bold;
   }
 
-  .label-axis-text,
-  .text-metric-usage {
+  .label-axis-text {
+    fill: $black;
+    font-weight: $gl-font-weight-normal;
+    font-size: 10px;
+  }
+
+  .text-metric-usage,
+  .legend-metric-title {
     fill: $black;
     font-weight: $gl-font-weight-normal;
     font-size: 12px;

changelogs/unreleased/additional-time-series-charts.yml

+---
+title: Added support the multiple time series for prometheus monitoring
+merge_request: !36893
+author:
+type: changed

spec/javascripts/monitoring/graph/flag_spec.js

@@ -32,10 +32,6 @@ describe('GraphFlag', () => {
       .toEqual(component.currentXCoordinate);
     expect(getCoordinate(component, '.selected-metric-line', 'x2'))
       .toEqual(component.currentXCoordinate);
-    expect(getCoordinate(component, '.circle-metric', 'cx'))
-      .toEqual(component.currentXCoordinate);
-    expect(getCoordinate(component, '.circle-metric', 'cy'))
-      .toEqual(component.currentYCoordinate);
   });
 
   it('has a SVG with the class rect-text-metric at the currentFlagPosition', () => {

spec/javascripts/monitoring/graph/legend_spec.js

 import Vue from 'vue';
 import GraphLegend from '~/monitoring/components/graph/legend.vue';
 import measurements from '~/monitoring/utils/measurements';
+import createTimeSeries from '~/monitoring/utils/multiple_time_series';
+import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data';
 
 const createComponent = (propsData) => {
   const Component = Vue.extend(GraphLegend);
@@ -10,102 +12,96 @@ const createComponent = (propsData) => {
   }).$mount();
 };
 
-function getTextFromNode(component, selector) {
-  return component.$el.querySelector(selector).firstChild.nodeValue.trim();
-}
+const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
 
-describe('GraphLegend', () => {
-  describe('Computed props', () => {
-    it('textTransform', () => {
-      const component = createComponent({
+const defaultValuesComponent = {
   graphWidth: 500,
   graphHeight: 300,
+  graphHeightOffset: 120,
   margin: measurements.large.margin,
   measurements: measurements.large,
   areaColorRgb: '#f0f0f0',
   legendTitle: 'Title',
   yAxisLabel: 'Values',
   metricUsage: 'Value',
-      });
+  unitOfDisplay: 'Req/Sec',
+  currentDataIndex: 0,
+};
+
+const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result,
+  defaultValuesComponent.graphWidth, defaultValuesComponent.graphHeight,
+  defaultValuesComponent.graphHeightOffset);
+
+defaultValuesComponent.timeSeries = timeSeries;
+
+function getTextFromNode(component, selector) {
+  return component.$el.querySelector(selector).firstChild.nodeValue.trim();
+}
+
+describe('GraphLegend', () => {
+  describe('Computed props', () => {
+    it('textTransform', () => {
+      const component = createComponent(defaultValuesComponent);
 
       expect(component.textTransform).toContain('translate(15, 120) rotate(-90)');
     });
 
     it('xPosition', () => {
-      const component = createComponent({
-        graphWidth: 500,
-        graphHeight: 300,
-        margin: measurements.large.margin,
-        measurements: measurements.large,
-        areaColorRgb: '#f0f0f0',
-        legendTitle: 'Title',
-        yAxisLabel: 'Values',
-        metricUsage: 'Value',
-      });
+      const component = createComponent(defaultValuesComponent);
 
       expect(component.xPosition).toEqual(180);
     });
 
     it('yPosition', () => {
-      const component = createComponent({
-        graphWidth: 500,
-        graphHeight: 300,
-        margin: measurements.large.margin,
-        measurements: measurements.large,
-        areaColorRgb: '#f0f0f0',
-        legendTitle: 'Title',
-        yAxisLabel: 'Values',
-        metricUsage: 'Value',
-      });
+      const component = createComponent(defaultValuesComponent);
 
       expect(component.yPosition).toEqual(240);
     });
 
     it('rectTransform', () => {
-      const component = createComponent({
-        graphWidth: 500,
-        graphHeight: 300,
-        margin: measurements.large.margin,
-        measurements: measurements.large,
-        areaColorRgb: '#f0f0f0',
-        legendTitle: 'Title',
-        yAxisLabel: 'Values',
-        metricUsage: 'Value',
-      });
+      const component = createComponent(defaultValuesComponent);
 
       expect(component.rectTransform).toContain('translate(0, 120) rotate(-90)');
     });
   });
 
-  it('has 2 rect-axis-text rect svg elements', () => {
-    const component = createComponent({
-      graphWidth: 500,
-      graphHeight: 300,
-      margin: measurements.large.margin,
-      measurements: measurements.large,
-      areaColorRgb: '#f0f0f0',
-      legendTitle: 'Title',
-      yAxisLabel: 'Values',
-      metricUsage: 'Value',
+  describe('methods', () => {
+    it('translateLegendGroup should only change Y direction', () => {
+      const component = createComponent(defaultValuesComponent);
+
+      const translatedCoordinate = component.translateLegendGroup(1);
+      expect(translatedCoordinate.indexOf('translate(0, ')).not.toEqual(-1);
+    });
+
+    it('formatMetricUsage should contain the unit of display and the current value selected via "currentDataIndex"', () => {
+      const component = createComponent(defaultValuesComponent);
+
+      const formattedMetricUsage = component.formatMetricUsage(timeSeries[0]);
+      const valueFromSeries = timeSeries[0].values[component.currentDataIndex].value;
+      expect(formattedMetricUsage.indexOf(component.unitOfDisplay)).not.toEqual(-1);
+      expect(formattedMetricUsage.indexOf(valueFromSeries)).not.toEqual(-1);
+    });
   });
 
+  it('has 2 rect-axis-text rect svg elements', () => {
+    const component = createComponent(defaultValuesComponent);
+
     expect(component.$el.querySelectorAll('.rect-axis-text').length).toEqual(2);
   });
 
   it('contains text to signal the usage, title and time', () => {
-    const component = createComponent({
-      graphWidth: 500,
-      graphHeight: 300,
-      margin: measurements.large.margin,
-      measurements: measurements.large,
-      areaColorRgb: '#f0f0f0',
-      legendTitle: 'Title',
-      yAxisLabel: 'Values',
-      metricUsage: 'Value',
+    const component = createComponent(defaultValuesComponent);
+    const titles = component.$el.querySelectorAll('.legend-metric-title');
+
+    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);
   });
 
-    expect(getTextFromNode(component, '.text-metric-title')).toEqual(component.legendTitle);
-    expect(getTextFromNode(component, '.text-metric-usage')).toEqual(component.metricUsage);
-    expect(getTextFromNode(component, '.label-axis-text')).toEqual(component.yAxisLabel);
+  it('should contain the same number of legend groups as the timeSeries length', () => {
+    const component = createComponent(defaultValuesComponent);
+
+    expect(component.$el.querySelectorAll('.legend-group').length).toEqual(component.timeSeries.length);
   });
 });

spec/javascripts/monitoring/graph_row_spec.js

 import Vue from 'vue';
 import GraphRow from '~/monitoring/components/graph_row.vue';
 import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
-import { deploymentData, singleRowMetrics } from './mock_data';
+import { deploymentData, convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from './mock_data';
 
 const createComponent = (propsData) => {
   const Component = Vue.extend(GraphRow);
@@ -11,15 +11,15 @@ const createComponent = (propsData) => {
   }).$mount();
 };
 
+const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
 describe('GraphRow', () => {
   beforeEach(() => {
     spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
   });
-
   describe('Computed props', () => {
     it('bootstrapClass is set to col-md-6 when rowData is higher/equal to 2', () => {
       const component = createComponent({
-        rowData: singleRowMetrics,
+        rowData: convertedMetrics,
         updateAspectRatio: false,
         deploymentData,
       });
@@ -29,7 +29,7 @@ describe('GraphRow', () => {
 
     it('bootstrapClass is set to col-md-12 when rowData is lower than 2', () => {
       const component = createComponent({
-        rowData: [singleRowMetrics[0]],
+        rowData: [convertedMetrics[0]],
         updateAspectRatio: false,
         deploymentData,
       });
@@ -40,7 +40,7 @@ describe('GraphRow', () => {
 
   it('has one column', () => {
     const component = createComponent({
-      rowData: singleRowMetrics,
+      rowData: convertedMetrics,
       updateAspectRatio: false,
       deploymentData,
     });
@@ -51,7 +51,7 @@ describe('GraphRow', () => {
 
   it('has two columns', () => {
     const component = createComponent({
-      rowData: singleRowMetrics,
+      rowData: convertedMetrics,
       updateAspectRatio: false,
       deploymentData,
     });

spec/javascripts/monitoring/graph_spec.js

 import Vue from 'vue';
-import _ from 'underscore';
 import Graph from '~/monitoring/components/graph.vue';
 import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
 import eventHub from '~/monitoring/event_hub';
-import { deploymentData, singleRowMetrics } from './mock_data';
+import { deploymentData, convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from './mock_data';
 
 const createComponent = (propsData) => {
   const Component = Vue.extend(Graph);
@@ -13,6 +12,8 @@ const createComponent = (propsData) => {
   }).$mount();
 };
 
+const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
+
 describe('Graph', () => {
   beforeEach(() => {
     spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
@@ -20,7 +21,7 @@ describe('Graph', () => {
 
   it('has a title', () => {
     const component = createComponent({
-      graphData: singleRowMetrics[0],
+      graphData: convertedMetrics[1],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
@@ -29,29 +30,10 @@ describe('Graph', () => {
     expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
   });
 
-  it('creates a path for the line and area of the graph', (done) => {
-    const component = createComponent({
-      graphData: singleRowMetrics[0],
-      classType: 'col-md-6',
-      updateAspectRatio: false,
-      deploymentData,
-    });
-
-    Vue.nextTick(() => {
-      expect(component.area).toBeDefined();
-      expect(component.line).toBeDefined();
-      expect(typeof component.area).toEqual('string');
-      expect(typeof component.line).toEqual('string');
-      expect(_.isFunction(component.xScale)).toBe(true);
-      expect(_.isFunction(component.yScale)).toBe(true);
-      done();
-    });
-  });
-
   describe('Computed props', () => {
     it('axisTransform translates an element Y position depending of its height', () => {
       const component = createComponent({
-        graphData: singleRowMetrics[0],
+        graphData: convertedMetrics[1],
         classType: 'col-md-6',
         updateAspectRatio: false,
         deploymentData,
@@ -64,7 +46,7 @@ describe('Graph', () => {
 
     it('outterViewBox gets a width and height property based on the DOM size of the element', () => {
       const component = createComponent({
-        graphData: singleRowMetrics[0],
+        graphData: convertedMetrics[1],
         classType: 'col-md-6',
         updateAspectRatio: false,
         deploymentData,
@@ -79,7 +61,7 @@ describe('Graph', () => {
 
   it('sends an event to the eventhub when it has finished resizing', (done) => {
     const component = createComponent({
-      graphData: singleRowMetrics[0],
+      graphData: convertedMetrics[1],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
@@ -95,7 +77,7 @@ describe('Graph', () => {
 
   it('has a title for the y-axis and the chart legend that comes from the backend', () => {
     const component = createComponent({
-      graphData: singleRowMetrics[0],
+      graphData: convertedMetrics[1],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,

spec/javascripts/monitoring/monitoring_paths_spec.js

+import Vue from 'vue';
+import MonitoringPaths from '~/monitoring/components/monitoring_paths.vue';
+import createTimeSeries from '~/monitoring/utils/multiple_time_series';
+import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data';
+
+const createComponent = (propsData) => {
+  const Component = Vue.extend(MonitoringPaths);
+
+  return new Component({
+    propsData,
+  }).$mount();
+};
+
+const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
+
+const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120);
+
+describe('Monitoring Paths', () => {
+  it('renders two paths to represent a line and the area underneath it', () => {
+    const component = createComponent({
+      generatedLinePath: timeSeries[0].linePath,
+      generatedAreaPath: timeSeries[0].areaPath,
+      lineColor: '#ccc',
+      areaColor: '#fff',
+    });
+    const metricArea = component.$el.querySelector('.metric-area');
+    const metricLine = component.$el.querySelector('.metric-line');
+
+    expect(metricArea.getAttribute('fill')).toBe('#fff');
+    expect(metricArea.getAttribute('d')).toBe(timeSeries[0].areaPath);
+    expect(metricLine.getAttribute('stroke')).toBe('#ccc');
+    expect(metricLine.getAttribute('d')).toBe(timeSeries[0].linePath);
+  });
+});

spec/javascripts/monitoring/utils/multiple_time_series_spec.js

+import createTimeSeries from '~/monitoring/utils/multiple_time_series';
+import { convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from '../mock_data';
+
+const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
+const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120);
+
+describe('Multiple time series', () => {
+  it('createTimeSeries returned array contains an object for each element', () => {
+    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].areaColor).toEqual('string');
+    expect(typeof timeSeries[0].lineColor).toEqual('string');
+    expect(timeSeries[0].values instanceof Array).toEqual(true);
+  });
+
+  it('createTimeSeries returns an array', () => {
+    expect(timeSeries instanceof Array).toEqual(true);
+    expect(timeSeries.length).toEqual(2);
+  });
+});