Commit 6c5837ae authored by Tim Zallmann's avatar Tim Zallmann

Merge branch '37105-monitoring-graph-axes-labels-are-inaccurate-and-inconsistent' into 'master'

Resolve "Monitoring graph axes labels are inaccurate and inconsistent"

Closes #37105

See merge request gitlab-org/gitlab-ce!14258
parents 9560d5b8 790bc25d
......@@ -3,7 +3,7 @@
import GraphLegend from './graph/legend.vue';
import GraphFlag from './graph/flag.vue';
import GraphDeployment from './graph/deployment.vue';
import GraphPath from './graph_path.vue';
import GraphPath from './graph/path.vue';
import MonitoringMixin from '../mixins/monitoring_mixins';
import eventHub from '../event_hub';
import measurements from '../utils/measurements';
......@@ -69,7 +69,7 @@
},
computed: {
outterViewBox() {
outerViewBox() {
return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
},
......@@ -137,17 +137,19 @@
},
renderAxesPaths() {
this.timeSeries = createTimeSeries(this.graphData.queries[0],
this.timeSeries = createTimeSeries(
this.graphData.queries[0],
this.graphWidth,
this.graphHeight,
this.graphHeightOffset);
this.graphHeightOffset,
);
if (this.timeSeries.length > 3) {
this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
}
const axisXScale = d3.time.scale()
.range([0, this.graphWidth]);
.range([0, this.graphWidth - 70]);
const axisYScale = d3.scale.linear()
.range([this.graphHeight - this.graphHeightOffset, 0]);
......@@ -214,7 +216,7 @@
class="prometheus-svg-container"
:style="paddingBottomRootSvg">
<svg
:viewBox="outterViewBox"
:viewBox="outerViewBox"
ref="baseSvg">
<g
class="x-axis"
......
......@@ -291,9 +291,15 @@
fill: $black;
}
.tick > text {
.tick {
> line {
stroke: $gray-darker;
}
> text {
font-size: 12px;
}
}
.text-metric-title {
font-size: 12px;
......
---
title: Fix incorrect X-axis labels in Prometheus graphs
merge_request: 14258
author:
type: fixed
import Vue from 'vue';
import GraphPath from '~/monitoring/components/graph_path.vue';
import GraphPath from '~/monitoring/components/graph/path.vue';
import createTimeSeries from '~/monitoring/utils/multiple_time_series';
import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data';
......
......@@ -44,7 +44,7 @@ describe('Graph', () => {
.not.toEqual(-1);
});
it('outterViewBox gets a width and height property based on the DOM size of the element', () => {
it('outerViewBox gets a width and height property based on the DOM size of the element', () => {
const component = createComponent({
graphData: convertedMetrics[1],
classType: 'col-md-6',
......@@ -52,8 +52,8 @@ describe('Graph', () => {
deploymentData,
});
const viewBoxArray = component.outterViewBox.split(' ');
expect(typeof component.outterViewBox).toEqual('string');
const viewBoxArray = component.outerViewBox.split(' ');
expect(typeof component.outerViewBox).toEqual('string');
expect(viewBoxArray[2]).toEqual(component.graphWidth.toString());
expect(viewBoxArray[3]).toEqual(component.graphHeight.toString());
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment