diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/monitoring_column.vue')
| -rw-r--r-- | app/assets/javascripts/monitoring/components/monitoring_column.vue | 30 |
1 files changed, 17 insertions, 13 deletions
diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue index 0f33581ec52..c376baea79c 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_column.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue @@ -105,9 +105,9 @@ this.measurements = measurements.small; } this.data = query.result[0].values; - this.unitOfDisplay = query.unit || 'N/A'; + this.unitOfDisplay = query.unit || ''; this.yAxisLabel = this.columnData.y_label || 'Values'; - this.legendTitle = query.legend || 'Average'; + this.legendTitle = query.label || 'Average'; this.graphWidth = this.$refs.baseSvg.clientWidth - this.margin.left - this.margin.right; this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom; @@ -159,12 +159,12 @@ const xAxis = d3.svg.axis() .scale(axisXScale) - .ticks(measurements.ticks) + .ticks(measurements.xTicks) .orient('bottom'); const yAxis = d3.svg.axis() .scale(this.yScale) - .ticks(measurements.ticks) + .ticks(measurements.yTicks) .orient('left'); d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis); @@ -172,8 +172,12 @@ const width = this.graphWidth; d3.select(this.$refs.baseSvg).select('.y-axis').call(yAxis) .selectAll('.tick') - .each(function createTickLines() { - d3.select(this).select('line').attr('x2', width); + .each(function createTickLines(d, i) { + if (i > 0) { + d3.select(this).select('line') + .attr('x2', width) + .attr('class', 'axis-tick'); + } // Avoid adding the class to the first tick, to prevent coloring }); // This will select all of the ticks once they're rendered this.xScale = d3.time.scale() @@ -215,16 +219,16 @@ }; </script> <template> - <div + <div :class="classType"> - <h5 + <h5 class="text-center graph-title"> {{columnData.title}} </h5> <div class="prometheus-svg-container" :style="paddingBottomRootSvg"> - <svg + <svg :viewBox="outterViewBox" ref="baseSvg"> <g @@ -235,7 +239,7 @@ class="y-axis" transform="translate(70, 20)"> </g> - <monitoring-legends + <monitoring-legends :graph-width="graphWidth" :graph-height="graphHeight" :margin="margin" @@ -245,7 +249,7 @@ :y-axis-label="yAxisLabel" :metric-usage="metricUsage" /> - <svg + <svg class="graph-data" :viewBox="innerViewBox" ref="graphData"> @@ -263,7 +267,7 @@ stroke-width="2" transform="translate(-5, 20)"> </path> - <rect + <rect class="prometheus-graph-overlay" :width="(graphWidth - 70)" :height="(graphHeight - 100)" @@ -277,7 +281,7 @@ :graph-height="graphHeight" :graph-height-offset="graphHeightOffset" /> - <monitoring-flag + <monitoring-flag v-if="showFlag" :current-x-coordinate="currentXCoordinate" :current-y-coordinate="currentYCoordinate" |