diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-09-07 22:09:52 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-09-07 22:17:38 +0300 |
commit | 290217d51bd2489ad23e346a65fbc21b52e57724 (patch) | |
tree | 46292c60fd624e2cddf3a285f36ae51598cd4305 /app/assets/javascripts/monitoring | |
parent | ce27b99f800716cd5296c4324b855a14dd84c799 (diff) |
Improved color selector and addressed observations
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph/legend.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/utils/multiple_time_series.js | 87 |
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, }; }); |