fix(tooltip): fix tooltip formatting for rotated charts (#285)

markov00 · web-flow · commit 651edd174f04 · 2019-08-05T19:34:27.000+02:00
The X and Y axis spec, used to format the tooltip, needs to be inverted when rendering a rotated chart. fix #273
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
@@ -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
@@ -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];
         }
