feat(listeners): add seriesIdentifiers to element listeners (#525)

This commit changes the object passed to the event listeners providing either the value of the
clicked/hovered element and the SeriesIdentifier object that can uniquely identify a series in elastic-charts. (see #419 for a description on SeriesIdentifiers)

BREAKING CHANGE: the `onElementOver` and the `onElementClick` are now called with
`Array<[GeometryValue, SeriesIdentifier]>` instead of `Array<GeometryValue>`

fix #505

src/chart_types/xy_chart/state/chart_state.interactions.test.ts

@@ -400,11 +400,20 @@ function mouseOverTestSuite(scaleType: ScaleType) {
     expect(onOverListener).toBeCalledTimes(1);
     expect(onOutListener).toBeCalledTimes(0);
     expect(onOverListener.mock.calls[0][0]).toEqual([
-      {
-        x: 0,
-        y: 10,
-        accessor: 'y1',
-      },
+      [
+        {
+          x: 0,
+          y: 10,
+          accessor: 'y1',
+        },
+        {
+          key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
+          seriesKeys: [1],
+          specId: 'spec_1',
+          splitAccessors: new Map(),
+          yAccessor: 1,
+        },
+      ],
     ]);
 
     store.dispatch(onPointerMove({ x: chartLeft - 1, y: chartTop - 1 }, 1));
@@ -435,11 +444,20 @@ function mouseOverTestSuite(scaleType: ScaleType) {
     expect(onOverListener).toBeCalledTimes(1);
     expect(onOutListener).toBeCalledTimes(0);
     expect(onOverListener.mock.calls[0][0]).toEqual([
-      {
-        x: 0,
-        y: 10,
-        accessor: 'y1',
-      },
+      [
+        {
+          x: 0,
+          y: 10,
+          accessor: 'y1',
+        },
+        {
+          key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
+          seriesKeys: [1],
+          specId: 'spec_1',
+          splitAccessors: new Map(),
+          yAccessor: 1,
+        },
+      ],
     ]);
     store.dispatch(onPointerMove({ x: chartLeft - 1, y: chartTop + 89 }, 1));
     projectedPointerPosition = getProjectedPointerPositionSelector(store.getState());
@@ -473,11 +491,20 @@ function mouseOverTestSuite(scaleType: ScaleType) {
     expect(onOverListener).toBeCalledTimes(1);
     expect(onOutListener).toBeCalledTimes(0);
     expect(onOverListener.mock.calls[0][0]).toEqual([
-      {
-        x: 0,
-        y: 10,
-        accessor: 'y1',
-      },
+      [
+        {
+          x: 0,
+          y: 10,
+          accessor: 'y1',
+        },
+        {
+          key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
+          seriesKeys: [1],
+          specId: 'spec_1',
+          splitAccessors: new Map(),
+          yAccessor: 1,
+        },
+      ],
     ]);
 
     store.dispatch(onPointerMove({ x: chartLeft + 45 + scaleOffset, y: chartTop + 0 }, 1));
@@ -516,11 +543,20 @@ function mouseOverTestSuite(scaleType: ScaleType) {
     expect(onOverListener).toBeCalledTimes(1);
     expect(onOutListener).toBeCalledTimes(0);
     expect(onOverListener.mock.calls[0][0]).toEqual([
-      {
-        x: spec.data[0][0],
-        y: spec.data[0][1],
-        accessor: 'y1',
-      },
+      [
+        {
+          x: spec.data[0][0],
+          y: spec.data[0][1],
+          accessor: 'y1',
+        },
+        {
+          key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
+          seriesKeys: [1],
+          specId: 'spec_1',
+          splitAccessors: new Map(),
+          yAccessor: 1,
+        },
+      ],
     ]);
 
     store.dispatch(onPointerMove({ x: chartLeft + 45 + scaleOffset, y: chartTop + 89 }, 1));
@@ -538,11 +574,20 @@ function mouseOverTestSuite(scaleType: ScaleType) {
     expect(tooltipData.highlightedGeometries.length).toBe(1);
     expect(onOverListener).toBeCalledTimes(2);
     expect(onOverListener.mock.calls[1][0]).toEqual([
-      {
-        x: spec.data[1][0],
-        y: spec.data[1][1],
-        accessor: 'y1',
-      },
+      [
+        {
+          x: spec.data[1][0],
+          y: spec.data[1][1],
+          accessor: 'y1',
+        },
+        {
+          key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
+          seriesKeys: [1],
+          specId: 'spec_1',
+          splitAccessors: new Map(),
+          yAccessor: 1,
+        },
+      ],
     ]);
 
     expect(onOutListener).toBeCalledTimes(0);
@@ -624,11 +669,20 @@ function mouseOverTestSuite(scaleType: ScaleType) {
     expect(tooltipData.tooltipValues.length).toBe(2);
     expect(onOverListener).toBeCalledTimes(1);
     expect(onOverListener.mock.calls[0][0]).toEqual([
-      {
-        x: 1,
-        y: 5,
-        accessor: 'y1',
-      },
+      [
+        {
+          x: 1,
+          y: 5,
+          accessor: 'y1',
+        },
+        {
+          key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
+          seriesKeys: [1],
+          specId: 'spec_1',
+          splitAccessors: new Map(),
+          yAccessor: 1,
+        },
+      ],
     ]);
     expect(onOutListener).toBeCalledTimes(0);
   });

src/chart_types/xy_chart/state/selectors/on_element_click_caller.ts

@@ -4,8 +4,9 @@ import { GlobalChartState, PointerState } from '../../../../state/chart_state';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getHighlightedGeomsSelector } from './get_tooltip_values_highlighted_geoms';
 import { SettingsSpec } from '../../../../specs';
-import { IndexedGeometry } from '../../../../utils/geometry';
+import { IndexedGeometry, GeometryValue } from '../../../../utils/geometry';
 import { ChartTypes } from '../../../index';
+import { SeriesIdentifier } from '../../utils/series';
 
 const getLastClickSelector = (state: GlobalChartState) => state.interactions.pointer.lastClick;
 
@@ -56,7 +57,10 @@ export function createOnElementClickCaller(): (state: GlobalChartState) => void
 
           if (isClicking(prevProps, nextProps)) {
             if (settings && settings.onElementClick) {
-              settings.onElementClick(indexedGeometries.map(({ value }) => value));
+              const elements = indexedGeometries.map<[GeometryValue, SeriesIdentifier]>(
+                ({ value, seriesIdentifier }) => [value, seriesIdentifier],
+              );
+              settings.onElementClick(elements);
             }
           }
           prevProps = nextProps;

src/chart_types/xy_chart/state/selectors/on_element_over_caller.ts

@@ -6,10 +6,11 @@ import {
 } from './get_tooltip_values_highlighted_geoms';
 import { SettingsSpec } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { IndexedGeometry } from '../../../../utils/geometry';
+import { IndexedGeometry, GeometryValue } from '../../../../utils/geometry';
 import { Selector } from 'react-redux';
 import { ChartTypes } from '../../../index';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { SeriesIdentifier } from '../../utils/series';
 
 interface Props {
   settings: SettingsSpec | undefined;
@@ -57,7 +58,10 @@ export function createOnElementOverCaller(): (state: GlobalChartState) => void {
           };
 
           if (isOverElement(prevProps, nextProps) && settings.onElementOver) {
-            settings.onElementOver(highlightedGeometries.map(({ value }) => value));
+            const elements = highlightedGeometries.map<[GeometryValue, SeriesIdentifier]>(
+              ({ value, seriesIdentifier }) => [value, seriesIdentifier],
+            );
+            settings.onElementOver(elements);
           }
           prevProps = nextProps;
         },

src/specs/settings.tsx

@@ -11,8 +11,8 @@ import { ChartTypes } from '../chart_types';
 import { GeometryValue } from '../utils/geometry';
 import { SeriesIdentifier } from '../chart_types/xy_chart/utils/series';
 
-export type ElementClickListener = (values: GeometryValue[]) => void;
-export type ElementOverListener = (values: GeometryValue[]) => void;
+export type ElementClickListener = (elements: Array<[GeometryValue, SeriesIdentifier]>) => void;
+export type ElementOverListener = (elements: Array<[GeometryValue, SeriesIdentifier]>) => void;
 export type BrushEndListener = (min: number, max: number) => void;
 export type LegendItemListener = (series: SeriesIdentifier | null) => void;
 export type PointerUpdateListener = (event: PointerEvent) => void;