diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/monitoring_column.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/monitoring_column.vue | 48 |
1 files changed, 27 insertions, 21 deletions
diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue index 4f4792877ee..c376baea79c 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_column.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue @@ -35,7 +35,7 @@ data() { return { - graphHeight: 500, + graphHeight: 450, graphWidth: 600, graphHeightOffset: 120, xScale: {}, @@ -88,7 +88,9 @@ }, paddingBottomRootSvg() { - return (Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0; + return { + paddingBottom: `${(Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0}%`, + }; }, }, @@ -103,9 +105,9 @@ this.measurements = measurements.small; } this.data = query.result[0].values; - this.unitOfDisplay = query.unit || 'N/A'; - this.yAxisLabel = this.columnData.y_axis || 'Values'; - this.legendTitle = query.legend || 'Average'; + this.unitOfDisplay = query.unit || ''; + this.yAxisLabel = this.columnData.y_label || 'Values'; + 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; @@ -157,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); @@ -170,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() @@ -198,7 +204,7 @@ watch: { updateAspectRatio() { if (this.updateAspectRatio) { - this.graphHeight = 500; + this.graphHeight = 450; this.graphWidth = 600; this.measurements = measurements.large; this.draw(); @@ -213,17 +219,17 @@ }; </script> <template> - <div + <div :class="classType"> - <h5 - class="text-center"> + <h5 + class="text-center graph-title"> {{columnData.title}} </h5> - <div - class="prometheus-svg-container"> - <svg + <div + class="prometheus-svg-container" + :style="paddingBottomRootSvg"> + <svg :viewBox="outterViewBox" - :style="{ 'padding-bottom': paddingBottomRootSvg }" ref="baseSvg"> <g class="x-axis" @@ -233,7 +239,7 @@ class="y-axis" transform="translate(70, 20)"> </g> - <monitoring-legends + <monitoring-legends :graph-width="graphWidth" :graph-height="graphHeight" :margin="margin" @@ -243,7 +249,7 @@ :y-axis-label="yAxisLabel" :metric-usage="metricUsage" /> - <svg + <svg class="graph-data" :viewBox="innerViewBox" ref="graphData"> @@ -261,7 +267,7 @@ stroke-width="2" transform="translate(-5, 20)"> </path> - <rect + <rect class="prometheus-graph-overlay" :width="(graphWidth - 70)" :height="(graphHeight - 100)" @@ -275,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" |