github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Fix cosmetic issues with cut off chart overflows. (#19794)

Browse source 
1. Increases the top margin to 5 and the right margin to 1 to avoid cutting off the chart because overflow is hidden for the directives mlEventRateChart and mlMultiMetricJobChart. The top margin gives enough room to avoid cutting off y-axis labels. The right margin is a tweak to not cut off the gray border by 1 pixel to the right.
2. Fixes how the domain for mlEventRateChart is calculated. The domain gets now extended by 1 barsInterval, otherwise the last bar will start at the end of vizWidth and overflow the chart (the overflow is hidden so the visible chart missed one bar).
This commit is contained in:
Walter Rafelsberger 2018-06-11 17:04:50 +02:00 • committed by GitHub
parent af5215fb9f
commit d2e0aed450
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/event_rate_chart_directive.js
View file

@ -29,7 +29,7 @@ module.directive('mlEventRateChart', function () {
let svgWidth = 0;
const barChartHeight = scope.eventRateChartHeight;
const margin = { top: 0, right: 0, bottom: 20, left: scope.chartTicksMargin.width };
const margin = { top: 5, 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 };
@ -120,9 +120,15 @@ module.directive('mlEventRateChart', function () {
}
swimlaneXScale.domain(d3.extent(finerData, d => d.date));
// Extend the time range/domain at the end by 1 barsInterval,
// otherwise the last bar will start at the end of vizWidth
// and overflow the chart.
const timeExtent = d3.extent(data, d => d.date);
timeExtent[1] = new Date(timeExtent[1].getTime() + scope.chartData.barsInterval);
barChartXScale = d3.time.scale()
.range([0, vizWidth])
.domain(d3.extent(data, d => d.date));
.domain(timeExtent);
chartLimits.max = d3.max(data, (d) => d.value);
chartLimits.min = 0;

2
x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_chart_directive.js
View file

@ -27,7 +27,7 @@ module.directive('mlMultiMetricJobChart', function () {
let svgWidth = 0;
const lineChartHeight = scope.chartHeight;
const margin = { top: 0, right: 0, bottom: 20, left: scope.chartTicksMargin.width };
const margin = { top: 5, 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 };