Vislib: Fix position calculation of ticks in non-horizontal axes (#62309

) (#62605)
elastic · Apr 6, 2020 · c1e5e22 · c1e5e22
1 parent 54ed390
commit c1e5e22
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/axis/axis_labels.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/axis/axis_labels.js
@@ -108,9 +108,9 @@ export class AxisLabels {
 
       selection.selectAll('.tick text').text(function(d) {
         const parentNode = d3.select(this.parentNode).node();
-        const currentTickCenter =
-          scaleStartPad +
-          (config.isHorizontal() ? self.axisScale.scale(d) : upperBound - self.axisScale.scale(d));
+        const currentTickCenter = config.isHorizontal()
+          ? scaleStartPad + self.axisScale.scale(d)
+          : upperBound - scaleStartPad - self.axisScale.scale(d);
         const currentTickSize =
           (config.isHorizontal() ? parentNode.getBBox().width : parentNode.getBBox().height) *
           padding;

diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js
@@ -48,10 +48,32 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visEditor.selectXAxisPosition('left');
         await PageObjects.visEditor.clickGo();
 
-        const leftLabels = await PageObjects.visChart.getXAxisLabels();
+        // the getYAxisLabels helper always returns the labels on the left axis
+        const leftLabels = await PageObjects.visChart.getYAxisLabels();
         log.debug(`${leftLabels.length} tick labels on left x axis`);
         expect(leftLabels.length).to.be.greaterThan(bottomLabels.length * (2 / 3));
       });
+
+      it('should not filter out first label after rotation of the chart', async function() {
+        await PageObjects.visualize.navigateToNewVisualization();
+        await PageObjects.visualize.clickVerticalBarChart();
+        await PageObjects.visualize.clickNewSearch();
+        await PageObjects.timePicker.setDefaultAbsoluteRange();
+        await PageObjects.visEditor.clickBucket('X-axis');
+        await PageObjects.visEditor.selectAggregation('Date Range');
+        await PageObjects.visEditor.selectField('@timestamp');
+        await PageObjects.visEditor.clickGo();
+        const bottomLabels = await PageObjects.visChart.getXAxisLabels();
+        expect(bottomLabels.length).to.be(1);
+
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.selectXAxisPosition('left');
+        await PageObjects.visEditor.clickGo();
+
+        // the getYAxisLabels helper always returns the labels on the left axis
+        const leftLabels = await PageObjects.visChart.getYAxisLabels();
+        expect(leftLabels.length).to.be(1);
+      });
     });
 
     describe('bar charts range on x axis', () => {