From 2ed2df4e02790f6599f4f3ed8879bd082c0372af Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Mon, 5 Aug 2019 17:24:02 +0200
Subject: [PATCH] fix(tooltip): fix tooltip formatting for rotated charts

When using rotated charts, the used X and Y axis for formatting should be inverted.

fix #273
---
 .../store/chart_state.interactions.test.ts    | 42 ++++++++++++++++++-
 src/chart_types/xy_chart/store/chart_state.ts |  7 ++--
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/chart_types/xy_chart/store/chart_state.interactions.test.ts b/src/chart_types/xy_chart/store/chart_state.interactions.test.ts
index 68f591ee2c..5876210644 100644
--- a/src/chart_types/xy_chart/store/chart_state.interactions.test.ts
+++ b/src/chart_types/xy_chart/store/chart_state.interactions.test.ts
@@ -1,8 +1,8 @@
 import { BarGeometry } from '../rendering/rendering';
 import { computeXScale, computeYScales } from '../utils/scales';
 import { DataSeriesColorsValues } from '../utils/series';
-import { BarSeriesSpec, BasicSeriesSpec, RectAnnotationSpec } from '../utils/specs';
-import { getAnnotationId, getGroupId, getSpecId } from '../../../utils/ids';
+import { BarSeriesSpec, BasicSeriesSpec, RectAnnotationSpec, Position } from '../utils/specs';
+import { getAnnotationId, getGroupId, getSpecId, getAxisId } from '../../../utils/ids';
 import { TooltipType } from '../utils/interactions';
 import { ScaleContinuous } from '../../../utils/scales/scale_continuous';
 import { ScaleType } from '../../../utils/scales/scales';
@@ -392,4 +392,42 @@ function mouseOverTestSuite(scaleType: ScaleType) {
       expect(store.tooltipPosition.transform).toBe(expectedTransform);
     });
   });
+  describe('can format tooltip values on rotated chart', () => {
+    beforeEach(() => {
+      store.addAxisSpec({
+        hide: true,
+        id: getAxisId('yaxis'),
+        groupId: GROUP_ID,
+        position: Position.Left,
+        tickFormat: (value) => `left ${Number(value)}`,
+        showOverlappingLabels: false,
+        showOverlappingTicks: false,
+        tickPadding: 0,
+        tickSize: 0,
+      });
+      store.addAxisSpec({
+        hide: true,
+        id: getAxisId('xaxis'),
+        groupId: GROUP_ID,
+        position: Position.Bottom,
+        tickFormat: (value) => `bottom ${Number(value)}`,
+        showOverlappingLabels: false,
+        showOverlappingTicks: false,
+        tickPadding: 0,
+        tickSize: 0,
+      });
+    });
+    test('chart 0 rotation', () => {
+      store.setCursorPosition(chartLeft + 0, chartTop + 99);
+      expect(store.tooltipData[0].value).toBe('bottom 0');
+      expect(store.tooltipData[1].value).toBe('left 10');
+    });
+
+    test('chart 90 deg rotated', () => {
+      store.chartRotation = 90;
+      store.setCursorPosition(chartLeft + 0, chartTop + 99);
+      expect(store.tooltipData[0].value).toBe('left 1');
+      expect(store.tooltipData[1].value).toBe('bottom 5');
+    });
+  });
 }
diff --git a/src/chart_types/xy_chart/store/chart_state.ts b/src/chart_types/xy_chart/store/chart_state.ts
index d2ca494e2c..f464807810 100644
--- a/src/chart_types/xy_chart/store/chart_state.ts
+++ b/src/chart_types/xy_chart/store/chart_state.ts
@@ -367,12 +367,13 @@ export class ChartStore {
         }
 
         // format the tooltip values
-        const formattedTooltip = formatTooltip(indexedGeometry, spec, false, isHighlighted, yAxis);
-
+        const yAxisFormatSpec = [0, 180].includes(this.chartRotation) ? yAxis : xAxis;
+        const formattedTooltip = formatTooltip(indexedGeometry, spec, false, isHighlighted, yAxisFormatSpec);
         // format only one time the x value
         if (!xValueInfo) {
           // if we have a tooltipHeaderFormatter, then don't pass in the xAxis as the user will define a formatter
-          const formatterAxis = this.tooltipHeaderFormatter ? undefined : xAxis;
+          const xAxisFormatSpec = [0, 180].includes(this.chartRotation) ? xAxis : yAxis;
+          const formatterAxis = this.tooltipHeaderFormatter ? undefined : xAxisFormatSpec;
           xValueInfo = formatTooltip(indexedGeometry, spec, true, false, formatterAxis);
           return [xValueInfo, ...acc, formattedTooltip];
         }