diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-07-28 20:23:53 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-08-31 02:28:11 +0300 |
commit | fdd1d59f60d75a1488b1195eff7cdb9691578c52 (patch) | |
tree | f679853ae06cb489d38a20e7f9742cf9568c01c9 /app/assets/javascripts/monitoring | |
parent | faf5363ea01cc3dd56ff9b8f9b1061feff1eb3f0 (diff) |
Added legends for each of the time series
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph/flag.vue | 15 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph/legend.vue | 71 |
2 files changed, 52 insertions, 34 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue index c4d4647d240..a98e3d06c18 100644 --- a/app/assets/javascripts/monitoring/components/graph/flag.vue +++ b/app/assets/javascripts/monitoring/components/graph/flag.vue @@ -7,10 +7,6 @@ type: Number, required: true, }, - currentYCoordinate: { - type: Number, - required: true, - }, currentFlagPosition: { type: Number, required: true, @@ -60,16 +56,7 @@ :y2="calculatedHeight" transform="translate(-5, 20)"> </line> - <circle - class="circle-metric" - :fill="circleColorRgb" - stroke="#000" - :cx="currentXCoordinate" - :cy="currentYCoordinate" - r="5" - transform="translate(-5, 20)"> - </circle> - <svg + <svg class="rect-text-metric" :x="currentFlagPosition" y="0"> diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index d08f9cbffd4..088612cadd3 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -1,4 +1,6 @@ <script> + import { formatRelevantDigits } from '../../lib/utils/number_utils'; + export default { props: { graphWidth: { @@ -29,10 +31,18 @@ type: String, required: true, }, - metricUsage: { + timeSeries: { + type: Array, + required: true, + }, + unitOfDisplay: { type: String, required: true, }, + currentDataIndex: { + type: Number, + required: true, + }, }, data() { return { @@ -63,6 +73,16 @@ yPosition() { return ((this.graphHeight - this.margin.top) + this.measurements.axisLabelLineOffset) || 0; }, + + }, + methods: { + translateLegendGroup(index) { + return `translate(${120 * index}, 0)`; + }, + + formatMetricUsage(series) { + return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`; + }, }, mounted() { this.$nextTick(() => { @@ -121,24 +141,35 @@ dy=".35em"> Time </text> - <rect - :fill="areaColorRgb" - :width="measurements.legends.width" - :height="measurements.legends.height" - x="20" - :y="graphHeight - measurements.legendOffset"> - </rect> - <text - class="text-metric-title" - x="50" - :y="graphHeight - 25"> - {{legendTitle}} - </text> - <text - class="text-metric-usage" - x="50" - :y="graphHeight - 10"> - {{metricUsage}} - </text> + <g class="legend-group" + v-for="(series, index) in timeSeries" + :key="index" + :transform="translateLegendGroup(index)"> + <rect + :fill="areaColorRgb" + :width="measurements.legends.width" + :height="measurements.legends.height" + x="20" + :y="graphHeight - measurements.legendOffset"> + </rect> + <text + class="text-metric-title" + x="45" + :y="graphHeight - 30"> + {{legendTitle}} + </text> + <text + class="text-metric-title" + x="45" + :y="graphHeight - 20"> + Series {{index + 1}} + </text> + <text + class="text-metric-usage" + x="45" + :y="graphHeight - 10"> + {{formatMetricUsage(series)}} + </text> + </g> </g> </template> |