Improved color selector and addressed observations

2 files changed, 38 insertions, 51 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index 27a9ddbc568..dbc48c63747 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -171,7 +171,7 @@
         ref="legendTitleSvg"
         x="38"
         :y="graphHeight - 30">
-        {{createSeriesString(index, series)}}        
+        {{createSeriesString(index, series)}}
       </text>
       <text
         v-else
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index eca79587a49..9845fd53222 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -1,46 +1,31 @@
 import d3 from 'd3';
 import _ from 'underscore';
 
-function pickColorFromNameNumber(colorName, colorNumber) {
-  let lineColor = '';
-  let areaColor = '';
-  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;
-  }
+const defaultColorPalette = {
+  blue: ['#1f78d1', '#8fbce8'],
+  orange: ['#fc9403', '#feca81'],
+  red: ['#db3b21', '#ed9d90'],
+  green: ['#1aaa55', '#8dd5aa'],
+  purple: ['#6666c4', '#d1d1f0'],
+};
 
-  return {
-    lineColor,
-    areaColor,
-  };
+const defaultColorOrder = ['blue', 'orange', 'red', 'green', 'purple'];
+let usedColors = [];
+function pickColor(name) {
+  let pick;
+  if (name && defaultColorPalette[name]) {
+    pick = name;
+  } else {
+    const unusedColors = _.difference(defaultColorOrder, usedColors);
+    if (unusedColors.length > 0) {
+      pick = unusedColors[0];
+    } else {
+      usedColors = [];
+      pick = defaultColorOrder[0];
+    }
+  }
+  usedColors.push(pick);
+  return defaultColorPalette[pick];
 }
 
 export default function createTimeSeries(queryData, graphWidth, graphHeight, graphHeightOffset) {
@@ -56,9 +41,10 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra
 
   let timeSeriesNumber = 1;
 
-  return queryData.result.map((timeSeries, index) => {
+  return queryData.result.map((timeSeries) => {
     let metricTag = '';
-    let pathColors = null;
+    let lineColor = '#1f78d1';
+    let areaColor = '#8fbce8';
     const timeSeriesScaleX = d3.time.scale()
       .range([0, graphWidth - 70]);
 
@@ -70,33 +56,33 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra
     timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]);
 
     const lineFunction = d3.svg.line()
-      .interpolate('step-before')
+      .interpolate('linear')
       .x(d => timeSeriesScaleX(d.time))
       .y(d => timeSeriesScaleY(d.value));
 
     const areaFunction = d3.svg.area()
-      .interpolate('step-before')
+      .interpolate('linear')
       .x(d => timeSeriesScaleX(d.time))
       .y0(graphHeight - graphHeightOffset)
       .y1(d => timeSeriesScaleY(d.value));
 
     if (queryData.series != null) {
-      const seriesCustomizationData = queryData.series[index];
       const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]];
+      const seriesCustomizationData = _.findWhere(queryData.series[0].series,
+                                                  { value: timeSeriesMetricLabel });
       if (seriesCustomizationData != null) {
         metricTag = seriesCustomizationData.value || timeSeriesMetricLabel;
         if (seriesCustomizationData.color != null) {
-          pathColors = pickColorFromNameNumber(seriesCustomizationData.color.toLowerCase(), null);
+          [lineColor, areaColor] = pickColor(seriesCustomizationData.color);
+        } else {
+          [lineColor, areaColor] = pickColor();
         }
       } else {
         metricTag = timeSeriesMetricLabel || `series ${timeSeriesNumber}`;
+        [lineColor, areaColor] = pickColor();
       }
     }
 
-    if (pathColors == null) {
-      pathColors = pickColorFromNameNumber(null, timeSeriesNumber);
-    }
-
     if (timeSeriesNumber <= 5) {
       timeSeriesNumber = timeSeriesNumber += 1;
     } else {
@@ -108,7 +94,8 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra
       areaPath: areaFunction(timeSeries.values),
       timeSeriesScaleX,
       values: timeSeries.values,
-      ...pathColors,
+      lineColor,
+      areaColor,
       metricTag,
     };
   });