[ML] Fixes a regression bug which made the progress bar invisible. (#20618)

Fixes a regression introduced by #19794. This PR added a 5px top margin to the affected charts. The hard coded bottom margin of the progress bars wasn't adjusted accordingly so the progress bars ended up being hidden behind the actual chart. This PR fixes the problem by taking the chart's top margin into account for progressBarMarginBottom.
This commit is contained in:
Walter Rafelsberger 2018-07-11 15:21:39 +02:00 committed by GitHub
parent 8baf89006c
commit 0dbb819563
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 4 deletions

View file

@ -28,7 +28,9 @@ module.directive('mlEventRateChart', function () {
let svgWidth = 0;
const barChartHeight = scope.eventRateChartHeight;
const margin = { top: 5, right: 1, bottom: 20, left: scope.chartTicksMargin.width };
const marginTop = 5;
const progressBarMarginBottom = barChartHeight + marginTop - 15;
const margin = { top: marginTop, right: 1, bottom: 20, left: scope.chartTicksMargin.width };
const svgHeight = barChartHeight + margin.top + margin.bottom;
let vizWidth = svgWidth - margin.left - margin.right;
const chartLimits = { max: 0, min: 0 };
@ -83,7 +85,7 @@ module.directive('mlEventRateChart', function () {
if (chartElement.select('.progress-bar')[0][0] === null) {
const style = `width: ${(+vizWidth + 2)}px;
margin-bottom: -${(+barChartHeight - 15)}px;
margin-bottom: -${(+progressBarMarginBottom)}px;
margin-left: ${(+margin.left - 1)}px;'`;
chartElement.append('div')

View file

@ -27,7 +27,9 @@ module.directive('mlMultiMetricJobChart', function () {
let svgWidth = 0;
const lineChartHeight = scope.chartHeight;
const margin = { top: 5, right: 1, bottom: 20, left: scope.chartTicksMargin.width };
const marginTop = 5;
const progressBarMarginBottom = lineChartHeight + marginTop - 15;
const margin = { top: marginTop, right: 1, bottom: 20, left: scope.chartTicksMargin.width };
const svgHeight = lineChartHeight + margin.top + margin.bottom;
let vizWidth = svgWidth - margin.left - margin.right;
const chartLimits = { max: 0, min: 0 };
@ -88,7 +90,7 @@ module.directive('mlMultiMetricJobChart', function () {
if (chartElement.select('.progress-bar')[0][0] === null) {
const style = `width: ${(+vizWidth + 2)}px;
margin-bottom: -${(+lineChartHeight - 15)}px;
margin-bottom: -${(+progressBarMarginBottom)}px;
margin-left: ${(+margin.left - 1)}px;'`;
chartElement.append('div')