diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-08-30 22:07:50 -0500 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-08-31 16:31:19 -0500 |
commit | 05a77e79b825df04eabc9c95d1ff9725a35a6134 (patch) | |
tree | 51cf4416609b336e862eff0f5a1aa73ade71b462 /app/assets/javascripts/monitoring | |
parent | dd7d691f50827285deaab0276f10c654c4bd8da1 (diff) | |
download | gitlab-ce-05a77e79b825df04eabc9c95d1ff9725a35a6134.tar.gz |
Added simple support for multiple colors on the different time series
Diffstat (limited to 'app/assets/javascripts/monitoring')
4 files changed, 42 insertions, 17 deletions
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" /> - <rect - class="prometheus-graph-overlay" - :width="(graphWidth - 70)" - :height="(graphHeight - 100)" - transform="translate(-5, 20)" - ref="graphOverlay" - @mousemove="handleMouseOverGraph($event)"> - </rect> <monitoring-deployment :show-deploy-info="showDeployInfo" :deployment-data="reducedDeploymentData" diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index 621e5fe3372..a43dad8e601 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -19,10 +19,6 @@ type: Object, required: true, }, - areaColorRgb: { - type: String, - required: true, - }, legendTitle: { type: String, required: true, @@ -156,7 +152,7 @@ :key="index" :transform="translateLegendGroup(index)"> <rect - :fill="areaColorRgb" + :fill="series.areaColor" :width="measurements.legends.width" :height="measurements.legends.height" x="20" diff --git a/app/assets/javascripts/monitoring/components/monitoring_paths.vue b/app/assets/javascripts/monitoring/components/monitoring_paths.vue index 2d17f544cb6..043f1bf66bb 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_paths.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_paths.vue @@ -33,7 +33,7 @@ :d="generatedLinePath" :stroke="lineColor" fill="none" - stroke-width="2" + stroke-width="1" transform="translate(-5, 20)"> </path> </g> 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, }; }); } |