diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-08-31 23:43:49 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-09-07 17:19:13 +0300 |
commit | 45900c3030606c1699c841c1b51abf589fdffbfe (patch) | |
tree | 64c64ac3ef7fa863f04d4e27818489efe8cf6f13 /app/assets/javascripts/monitoring | |
parent | 057e84d6e3997033584339c5c7df1d2278af8ebd (diff) |
Added support for named colors, also added interpolations for the graphs
Diffstat (limited to 'app/assets/javascripts/monitoring')
3 files changed, 84 insertions, 16 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 11bbeb9392b..6b3e341f936 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/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'); diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index a43dad8e601..27a9ddbc568 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/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 diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index c47da3daf80..164157a72b7 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/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, }; }); } + |