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

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).
maryia-lapata · Jun 25, 2018 · 55ff5d1 · 55ff5d1
1 parent 1e13e7d
commit 55ff5d1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/...s/ml/public/jobs/new_job/simple/components/event_rate_chart/event_rate_chart_directive.js b/...s/ml/public/jobs/new_job/simple/components/event_rate_chart/event_rate_chart_directive.js
@@ -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;

diff --git a/...ugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_chart_directive.js b/...ugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_chart_directive.js
@@ -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 };