kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Legend text is now bolded also the Y legend text has a transparent background

Browse source 
to help differentiate legends
This commit is contained in:
Jose Ivan Vargas 2017-03-21 16:40:15 -06:00
parent b076d03424
commit 5b0890edcc
2 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/assets/javascripts/monitoring/prometheus_graph.js
View file

@ -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];

10
app/assets/stylesheets/pages/environments.scss
View file

@ -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;