Added support for named colors, also added interpolations for the graphs

app/assets/javascripts/lib/utils/number_utils.js

@@ -13,7 +13,7 @@ export function formatRelevantDigits(number) {
   let relevantDigits = 0;
   let formattedNumber = '';
   if (!isNaN(Number(number))) {
-    digitsLeft = number.split('.')[0];
+    digitsLeft = number.toString().split('.')[0];
     switch (digitsLeft.length) {
       case 1:
         relevantDigits = 3;

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

@@ -40,8 +40,6 @@
         graphHeightOffset: 120,
         margin: {},
         unitOfDisplay: '',
-        areaColorRgb: '#8fbce8',
-        lineColorRgb: '#1f78d1',
         yAxisLabel: '',
         legendTitle: '',
         reducedDeploymentData: [],
@@ -143,7 +141,7 @@
       },
 
       renderAxesPaths() {
-        this.timeSeries = createTimeSeries(this.graphData.queries[0].result,
+        this.timeSeries = createTimeSeries(this.graphData.queries[0],
         this.graphWidth,
         this.graphHeight,
         this.graphHeightOffset);
@@ -162,7 +160,7 @@
 
         const xAxis = d3.svg.axis()
           .scale(axisXScale)
-          .ticks(measurements.xTicks)
+          .ticks(d3.time.minute, 60)
           .tickFormat(timeScaleFormat)
           .orient('bottom');
 

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

@@ -81,6 +81,13 @@
       formatMetricUsage(series) {
         return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`;
       },
+
+      createSeriesString(index, series) {
+        if (series.metricTag) {
+          return `${series.metricTag} ${this.formatMetricUsage(series)}`;
+        }
+        return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`;
+      },
     },
     mounted() {
       this.$nextTick(() => {
@@ -164,7 +171,7 @@
         ref="legendTitleSvg"
         x="38"
         :y="graphHeight - 30">
-        {{legendTitle}} Series {{index + 1}} {{formatMetricUsage(series)}}
+        {{createSeriesString(index, series)}}        
       </text>
       <text
         v-else

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

@@ -1,8 +1,50 @@
 import d3 from 'd3';
 import _ from 'underscore';
 
-export default function createTimeSeries(seriesData, graphWidth, graphHeight, graphHeightOffset) {
-  const maxValues = seriesData.map((timeSeries, index) => {
+function pickColorFromNameNumber(colorName, colorNumber) {
+  let lineColor = '#1f78d1';
+  let areaColor = '#8fbce8';
+  const color = colorName != null ? colorName : colorNumber;
+  switch (color) {
+    case 'blue':
+    case 1:
+      lineColor = '#1f78d1';
+      areaColor = '#8fbce8';
+      break;
+    case 'orange':
+    case 2:
+      lineColor = '#fc9403';
+      areaColor = '#feca81';
+      break;
+    case 'red':
+    case 3:
+      lineColor = '#db3b21';
+      areaColor = '#ed9d90';
+      break;
+    case 'green':
+    case 4:
+      lineColor = '#1aaa55';
+      areaColor = '#8dd5aa';
+      break;
+    case 'purple':
+    case 5:
+      lineColor = '#6666c4';
+      areaColor = '#d1d1f0';
+      break;
+    default:
+      lineColor = '#1f78d1';
+      areaColor = '#8fbce8';
+      break;
+  }
+
+  return {
+    lineColor,
+    areaColor,
+  };
+}
+
+export default function createTimeSeries(queryData, graphWidth, graphHeight, graphHeightOffset) {
+  const maxValues = queryData.result.map((timeSeries, index) => {
     const maxValue = d3.max(timeSeries.values.map(d => d.value));
     return {
       maxValue,
@@ -18,7 +60,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
   const lineColors = ['#1f78d1', '#fc9403', '#db3b21', '#1aaa55', '#6666c4'];
   const areaColors = ['#8fbce8', '#feca81', '#ed9d90', '#8dd5aa', '#d1d1f0'];
 
-  return seriesData.map((timeSeries) => {
+  return queryData.result.map((timeSeries, index) => {
+    let metricTag = 'series';
+    let pathColors = null;
     const timeSeriesScaleX = d3.time.scale()
       .range([0, graphWidth - 70]);
 
@@ -26,25 +70,43 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
       .range([graphHeight - graphHeightOffset, 0]);
 
     timeSeriesScaleX.domain(d3.extent(timeSeries.values, d => d.time));
+    timeSeriesScaleX.ticks(d3.time.minute, 60);
     timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]);
 
     const lineFunction = d3.svg.line()
+      .interpolate('step-before')
       .x(d => timeSeriesScaleX(d.time))
       .y(d => timeSeriesScaleY(d.value));
 
     const areaFunction = d3.svg.area()
+      .interpolate('step-before')
       .x(d => timeSeriesScaleX(d.time))
       .y0(graphHeight - graphHeightOffset)
-      .y1(d => timeSeriesScaleY(d.value))
-      .interpolate('linear');
+      .y1(d => timeSeriesScaleY(d.value));
 
     lineColor = lineColors[timeSeriesNumber - 1];
     areaColor = areaColors[timeSeriesNumber - 1];
 
-    if (timeSeriesNumber <= 5) {
-      timeSeriesNumber = timeSeriesNumber += 1;
-    } else {
-      timeSeriesNumber = 1;
+    if (queryData.series != null) {
+      const seriesCustomizationData = queryData.series[index];
+      metricTag = timeSeries.metric[Object.keys(timeSeries.metric)[0]] || '';
+      if (seriesCustomizationData != null) {
+        if (
+          seriesCustomizationData.value === metricTag &&
+          seriesCustomizationData.color != null
+        ) {
+          pathColors = pickColorFromNameNumber(seriesCustomizationData.color.toLowerCase(), null);
+        }
+      }
+    }
+
+    if (pathColors == null) {
+      pathColors = pickColorFromNameNumber(null, timeSeriesNumber);
+      if (timeSeriesNumber <= 5) {
+        timeSeriesNumber = timeSeriesNumber += 1;
+      } else {
+        timeSeriesNumber = 1;
+      }
     }
 
     return {
@@ -52,8 +114,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
       areaPath: areaFunction(timeSeries.values),
       timeSeriesScaleX,
       values: timeSeries.values,
-      lineColor,
-      areaColor,
+      ...pathColors,
+      metricTag,
     };
   });
 }
+