diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-08-30 00:59:52 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-08-31 02:36:23 +0300 |
commit | 8a807aedb8f0ee21fa366c3e734fd5b7d51e744a (patch) | |
tree | 8bccf0b6b6edad8935c96005172a83fce33c9411 /app/assets/javascripts/monitoring | |
parent | 80d8235b43e5d6cf006c29e4ace5ec93521a7398 (diff) |
Corrected y scale for multiple time series and visual improvements
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph/legend.vue | 16 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/utils/multiple_time_series.js | 14 |
2 files changed, 18 insertions, 12 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index 189e525018a..621e5fe3372 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -163,24 +163,20 @@ :y="graphHeight - measurements.legendOffset"> </rect> <text + v-if="timeSeries.length > 1" class="legend-metric-title" ref="legendTitleSvg" x="38" :y="graphHeight - 30"> - {{legendTitle}} + {{legendTitle}} Series {{index + 1}} {{formatMetricUsage(series)}} </text> <text + v-else class="legend-metric-title" - ref="seriesTitleSvg" - :x="seriesXPosition + 40" - :y="graphHeight - 30"> - Series {{index + 1}} - </text> - <text - class="text-metric-usage" - :x="metricUsageXPosition + seriesXPosition + 45" + ref="legendTitleSvg" + x="38" :y="graphHeight - 30"> - {{formatMetricUsage(series)}} + {{legendTitle}} {{formatMetricUsage(series)}} </text> </g> </g> diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index 34aaeed47ae..12943239b74 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js @@ -1,6 +1,17 @@ import d3 from 'd3'; +import _ from 'underscore'; export default function createTimeSeries(seriesData, graphWidth, graphHeight, graphHeightOffset) { + const maxValues = seriesData.map((timeSeries, index) => { + const maxValue = d3.max(timeSeries.values.map(d => d.value)); + return { + maxValue, + index, + }; + }); + + const maxValueFromSeries = _.max(maxValues, val => val.maxValue); + return seriesData.map((timeSeries) => { const timeSeriesScaleX = d3.time.scale() .range([0, graphWidth - 70]); @@ -9,7 +20,7 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr .range([graphHeight - graphHeightOffset, 0]); timeSeriesScaleX.domain(d3.extent(timeSeries.values, d => d.time)); - timeSeriesScaleY.domain([0, d3.max(timeSeries.values.map(d => d.value))]); + timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]); const lineFunction = d3.svg.line() .x(d => timeSeriesScaleX(d.time)) @@ -25,7 +36,6 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr linePath: lineFunction(timeSeries.values), areaPath: areaFunction(timeSeries.values), timeSeriesScaleX, - timeSeriesScaleY, values: timeSeries.values, }; }); |