mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[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:
parent
8baf89006c
commit
0dbb819563
2 changed files with 8 additions and 4 deletions
|
@ -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')
|
||||
|
|
|
@ -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')
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue