diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-03-22 01:40:15 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-04-03 18:38:16 +0300 |
commit | 5b0890edcc0af98378e62e6998d3e51378b01900 (patch) | |
tree | 7529bb73db5c2b45a5d0c572d3d39a2000e4dc7a | |
parent | b076d03424179aca6e544223b831010ae01fdd33 (diff) |
Legend text is now bolded also the Y legend text has a transparent background
to help differentiate legends
-rw-r--r-- | app/assets/javascripts/monitoring/prometheus_graph.js | 20 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/environments.scss | 10 |
2 files changed, 22 insertions, 8 deletions
diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js index 0fdeed9ccbd..04298fccd97 100644 --- a/app/assets/javascripts/monitoring/prometheus_graph.js +++ b/app/assets/javascripts/monitoring/prometheus_graph.js @@ -129,7 +129,7 @@ class PrometheusGraph { .attr('class', 'prometheus-graph-overlay') .attr('width', this.width) .attr('height', this.height) - .on('mousemove', this.handleMouseOverGraph.bind(this, chart, prometheusGraphContainer)); + .on('mousemove', this.handleMouseOverGraph.bind(this, prometheusGraphContainer)); } // The legends from the metric @@ -141,9 +141,9 @@ class PrometheusGraph { .attr('stroke', '#000000') .attr('stroke-width', '1') .attr({ - x1: 0, + x1: 10, y1: this.originalHeight - 80, - x2: this.originalWidth - this.margin.right, + x2: (this.originalWidth - this.margin.right) + 10, y2: this.originalHeight - 80, }); @@ -152,11 +152,17 @@ class PrometheusGraph { .attr('stroke', '#000000') .attr('stroke-width', '1') .attr({ - x1: 0, + x1: 10, y1: 0, - x2: 0, + x2: 10, y2: this.originalHeight - 80, }); + axisLabelContainer.append('rect') + .attr('class', 'rect-axis-text') + .attr('x', 0) + .attr('y', 50) + .attr('width', 30) + .attr('height', 150); axisLabelContainer.append('text') .attr('class', 'label-axis-text') @@ -189,7 +195,7 @@ class PrometheusGraph { .attr('height', 35); axisLabelContainer.append('text') - .attr('class', 'label-axis-text') + .attr('class', 'text-metric-title') .attr('x', this.originalWidth - 140) .attr('y', (this.originalHeight / 2) - 50) .text('Average'); @@ -200,7 +206,7 @@ class PrometheusGraph { .attr('y', (this.originalHeight / 2) - 25); } - handleMouseOverGraph(chart, prometheusGraphContainer) { + handleMouseOverGraph(prometheusGraphContainer) { const rectOverlay = document.querySelector(`${prometheusGraphContainer} .prometheus-graph-overlay`); const currentXCoordinate = d3.mouse(rectOverlay)[0]; diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 3d91e0b22d8..b55fa185406 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -159,11 +159,19 @@ text { fill: $stat-graph-axis-fill; } + .label-axis-text, + .text-metric-usage { + fill: $black; + font-weight: 500; + } + .legend-axis-text{ + fill: $black; + } } .x-axis path, .y-axis path, -.label-x-axis-line, +.x-axis-line, .label-y-axis-line { fill: none; stroke-width: 1; |