diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 029bb64a990..9c785f4ada8 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -233,7 +233,6 @@
:graph-height="graphHeight"
:margin="margin"
:measurements="measurements"
- :area-color-rgb="areaColorRgb"
:legend-title="legendTitle"
:y-axis-label="yAxisLabel"
:time-series="timeSeries"
@@ -249,17 +248,9 @@
:key="index"
:generated-line-path="path.linePath"
:generated-area-path="path.areaPath"
- :line-color="lineColorRgb"
- :area-color="areaColorRgb"
+ :line-color="path.lineColor"
+ :area-color="path.areaColor"
/>
-
-
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index 12943239b74..05d551e917c 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -12,6 +12,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
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]);
@@ -32,11 +35,46 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
.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,
};
});
}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 7ae57be9f6e..c53f7e8e1b4 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -167,7 +167,7 @@
}
.metric-area {
- opacity: 0.8;
+ opacity: 0.1;
}
.prometheus-graph-overlay {
diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js
index 6bbc9811adb..3daf6bf82df 100644
--- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js
+++ b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js
@@ -9,6 +9,8 @@ describe('Multiple time series', () => {
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);
});