refactor: decouple tooltip from XY chart

docs/0-Intro/1-Overview.mdx

@@ -233,7 +233,7 @@ Return types:
 ```ts
 type BarStyleAccessor = (
   datum: RawDataSeriesDatum,
-  seriesIdentifier: SeriesIdentifier,
+  seriesIdentifier: XYChartSeriesIdentifier,
 ) => RecursivePartial<BarSeriesStyle> | Color | null;
 ```
 
@@ -250,7 +250,7 @@ Return types:
 ```ts
 type PointStyleAccessor = (
   datum: RawDataSeriesDatum,
-  seriesIdentifier: SeriesIdentifier,
+  seriesIdentifier: XYChartSeriesIdentifier,
 ) => RecursivePartial<PointStyle> | Color | null;
 ```
 

src/chart_types/xy_chart/legend/legend.ts

@@ -4,8 +4,8 @@ import {
   SeriesCollectionValue,
   getSeriesIndex,
   getSortedDataSeriesColorsValuesMap,
-  SeriesIdentifier,
   getSeriesLabel,
+  XYChartSeriesIdentifier,
 } from '../utils/series';
 import { AxisSpec, BasicSeriesSpec, Postfixes, isAreaSeriesSpec, isBarSeriesSpec } from '../utils/specs';
 import { Y0_ACCESSOR_POSTFIX, Y1_ACCESSOR_POSTFIX } from '../tooltip/tooltip';
@@ -20,7 +20,7 @@ export type LegendItem = Postfixes & {
   key: string;
   color: string;
   label: string;
-  seriesIdentifier: SeriesIdentifier;
+  seriesIdentifier: XYChartSeriesIdentifier;
   isSeriesVisible?: boolean;
   banded?: boolean;
   isLegendItemVisible?: boolean;
@@ -59,7 +59,7 @@ export function computeLegend(
   specs: BasicSeriesSpec[],
   defaultColor: string,
   axesSpecs: AxisSpec[],
-  deselectedDataSeries: SeriesIdentifier[] = [],
+  deselectedDataSeries: XYChartSeriesIdentifier[] = [],
 ): Map<string, LegendItem> {
   const legendItems: Map<string, LegendItem> = new Map();
   const sortedCollection = getSortedDataSeriesColorsValuesMap(seriesCollection);

src/chart_types/xy_chart/rendering/rendering.test.ts

@@ -6,7 +6,7 @@ import {
   getClippedRanges,
 } from './rendering';
 import { BarSeriesStyle, SharedGeometryStateStyle, PointStyle } from '../../../utils/themes/theme';
-import { DataSeriesDatum, SeriesIdentifier } from '../utils/series';
+import { DataSeriesDatum, XYChartSeriesIdentifier } from '../utils/series';
 import { mergePartial, RecursivePartial } from '../../../utils/commons';
 import { BarGeometry, PointGeometry } from '../../../utils/geometry';
 import { MockDataSeries } from '../../../mocks';
@@ -95,7 +95,7 @@ describe('Rendering utils', () => {
   });
 
   describe('should get common geometry style dependent on legend item highlight state', () => {
-    const seriesIdentifier: SeriesIdentifier = {
+    const seriesIdentifier: XYChartSeriesIdentifier = {
       specId: 'id',
       yAccessor: 'y1',
       splitAccessors: new Map(),
@@ -222,7 +222,7 @@ describe('Rendering utils', () => {
       initialY1: 4,
       initialY0: 5,
     };
-    const seriesIdentifier: SeriesIdentifier = {
+    const seriesIdentifier: XYChartSeriesIdentifier = {
       specId: 'test',
       yAccessor: 'test',
       splitAccessors: new Map(),
@@ -314,7 +314,7 @@ describe('Rendering utils', () => {
       initialY1: 4,
       initialY0: 5,
     };
-    const seriesIdentifier: SeriesIdentifier = {
+    const seriesIdentifier: XYChartSeriesIdentifier = {
       specId: 'test',
       yAccessor: 'test',
       splitAccessors: new Map(),

src/chart_types/xy_chart/rendering/rendering.ts

@@ -10,7 +10,7 @@ import {
 } from '../../../utils/themes/theme';
 import { Scale, ScaleType, isLogarithmicScale } from '../../../scales';
 import { CurveType, getCurveFactory } from '../../../utils/curves';
-import { DataSeriesDatum, SeriesIdentifier, DataSeries } from '../utils/series';
+import { DataSeriesDatum, DataSeries, XYChartSeriesIdentifier } from '../utils/series';
 import { DisplayValueSpec, PointStyleAccessor, BarStyleAccessor } from '../utils/specs';
 import {
   IndexedGeometry,
@@ -41,7 +41,7 @@ export function mutableIndexedGeometryMapUpsert(
 
 export function getPointStyleOverrides(
   datum: DataSeriesDatum,
-  seriesIdentifier: SeriesIdentifier,
+  seriesIdentifier: XYChartSeriesIdentifier,
   pointStyleAccessor?: PointStyleAccessor,
 ): Partial<PointStyle> | undefined {
   const styleOverride = pointStyleAccessor && pointStyleAccessor(datum, seriesIdentifier);
@@ -61,7 +61,7 @@ export function getPointStyleOverrides(
 
 export function getBarStyleOverrides(
   datum: DataSeriesDatum,
-  seriesIdentifier: SeriesIdentifier,
+  seriesIdentifier: XYChartSeriesIdentifier,
   seriesStyle: BarSeriesStyle,
   styleAccessor?: BarStyleAccessor,
 ): BarSeriesStyle {
@@ -125,7 +125,7 @@ function renderPoints(
         y = yScale.scale(yDatum);
       }
       const originalY = hasY0Accessors && index === 0 ? initialY0 : initialY1;
-      const seriesIdentifier: SeriesIdentifier = {
+      const seriesIdentifier: XYChartSeriesIdentifier = {
         key: dataSeries.key,
         specId: dataSeries.specId,
         yAccessor: dataSeries.yAccessor,
@@ -268,7 +268,7 @@ export function renderBars(
           }
         : undefined;
 
-    const seriesIdentifier: SeriesIdentifier = {
+    const seriesIdentifier: XYChartSeriesIdentifier = {
       key: dataSeries.key,
       specId: dataSeries.specId,
       yAccessor: dataSeries.yAccessor,
@@ -522,7 +522,7 @@ export function getClippedRanges(dataset: DataSeriesDatum[], xScale: Scale, xSca
 }
 
 export function getGeometryStateStyle(
-  seriesIdentifier: SeriesIdentifier,
+  seriesIdentifier: XYChartSeriesIdentifier,
   highlightedLegendItem: LegendItem | null,
   sharedGeometryStyle: SharedGeometryStateStyle,
   individualHighlight?: { [key: string]: boolean },
@@ -565,6 +565,10 @@ export function isPointOnGeometry(
   return yCoordinate >= y && yCoordinate <= y + height && xCoordinate >= x && xCoordinate <= x + width;
 }
 
-export function getSeriesIdentifierPrefixedKey(seriesIdentifier: SeriesIdentifier, prefix?: string, postfix?: string) {
+export function getSeriesIdentifierPrefixedKey(
+  seriesIdentifier: XYChartSeriesIdentifier,
+  prefix?: string,
+  postfix?: string,
+) {
   return `${prefix || ''}${seriesIdentifier.key}${postfix || ''}`;
 }

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

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

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

@@ -10,7 +10,7 @@ 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';
+import { XYChartSeriesIdentifier } from '../../utils/series';
 
 interface Props {
   settings: SettingsSpec | undefined;
@@ -58,7 +58,7 @@ export function createOnElementOverCaller(): (state: GlobalChartState) => void {
           };
 
           if (isOverElement(prevProps, nextProps) && settings.onElementOver) {
-            const elements = highlightedGeometries.map<[GeometryValue, SeriesIdentifier]>(
+            const elements = highlightedGeometries.map<[GeometryValue, XYChartSeriesIdentifier]>(
               ({ value, seriesIdentifier }) => [value, seriesIdentifier],
             );
             settings.onElementOver(elements);

src/chart_types/xy_chart/state/utils.ts

@@ -12,8 +12,8 @@ import {
   getFormattedDataseries,
   getSplittedSeries,
   getSeriesKey,
-  SeriesIdentifier,
   RawDataSeries,
+  XYChartSeriesIdentifier,
 } from '../utils/series';
 import {
   AreaSeriesSpec,
@@ -99,7 +99,10 @@ export interface SeriesDomainsAndData {
  * @param series
  * @param target
  */
-export function updateDeselectedDataSeries(series: SeriesIdentifier[], target: SeriesIdentifier): SeriesIdentifier[] {
+export function updateDeselectedDataSeries(
+  series: XYChartSeriesIdentifier[],
+  target: XYChartSeriesIdentifier,
+): XYChartSeriesIdentifier[] {
   const seriesIndex = getSeriesIndex(series, target);
   const updatedSeries = series ? [...series] : [];
 
@@ -167,7 +170,7 @@ function getLastValues(formattedDataSeries: {
   // we need to get the latest
   formattedDataSeries.stacked.forEach((ds) => {
     ds.dataSeries.forEach((series) => {
-      const seriesKey = getSeriesKey(series as SeriesIdentifier);
+      const seriesKey = getSeriesKey(series as XYChartSeriesIdentifier);
       if (series.data.length > 0) {
         const last = series.data[series.data.length - 1];
         if (last !== null) {
@@ -182,7 +185,7 @@ function getLastValues(formattedDataSeries: {
   });
   formattedDataSeries.nonStacked.forEach((ds) => {
     ds.dataSeries.forEach((series) => {
-      const seriesKey = getSeriesKey(series as SeriesIdentifier);
+      const seriesKey = getSeriesKey(series as XYChartSeriesIdentifier);
       if (series.data.length > 0) {
         const last = series.data[series.data.length - 1];
         if (last !== null) {
@@ -210,7 +213,7 @@ function getLastValues(formattedDataSeries: {
 export function computeSeriesDomains(
   seriesSpecs: BasicSeriesSpec[],
   customYDomainsByGroupId: Map<GroupId, DomainRange> = new Map(),
-  deselectedDataSeries: SeriesIdentifier[] = [],
+  deselectedDataSeries: XYChartSeriesIdentifier[] = [],
   customXDomain?: DomainRange | Domain,
 ): SeriesDomainsAndData {
   const { splittedSeries, xValues, seriesCollection } = deselectedDataSeries

src/chart_types/xy_chart/utils/series.test.ts

@@ -8,7 +8,7 @@ import {
   getSplittedSeries,
   RawDataSeries,
   splitSeries,
-  SeriesIdentifier,
+  XYChartSeriesIdentifier,
   cleanDatum,
 } from './series';
 import { BasicSeriesSpec, LineSeriesSpec, SeriesTypes } from './specs';
@@ -555,7 +555,7 @@ describe('Series', () => {
     const emptyDeselected = getSplittedSeries([splitSpec]);
     expect(emptyDeselected.splittedSeries.get(specId)!.length).toBe(2);
 
-    const deselectedDataSeries: SeriesIdentifier[] = [
+    const deselectedDataSeries: XYChartSeriesIdentifier[] = [
       {
         specId,
         yAccessor: splitSpec.yAccessors[0],

src/chart_types/xy_chart/utils/series.ts

@@ -45,21 +45,23 @@ export interface DataSeriesDatum<T = any> {
   /** the list of filled values because missing or nulls */
   filled?: FilledValues;
 }
-
-export interface SeriesIdentifier {
+export type SeriesIdentifier = {
   specId: SpecId;
+  key: string;
+};
+
+export interface XYChartSeriesIdentifier extends SeriesIdentifier {
   yAccessor: string | number;
   splitAccessors: Map<string | number, string | number>; // does the map have a size vs making it optional
   seriesKeys: (string | number)[];
-  key: string;
 }
 
-export type DataSeries = SeriesIdentifier & {
+export type DataSeries = XYChartSeriesIdentifier & {
   // seriesColorKey: string;
   data: DataSeriesDatum[];
 };
 
-export type RawDataSeries = SeriesIdentifier & {
+export type RawDataSeries = XYChartSeriesIdentifier & {
   // seriesColorKey: string;
   data: RawDataSeriesDatum[];
 };
@@ -80,10 +82,10 @@ export type SeriesCollectionValue = {
   banded?: boolean;
   lastValue?: LastValues;
   specSortIndex?: number;
-  seriesIdentifier: SeriesIdentifier;
+  seriesIdentifier: XYChartSeriesIdentifier;
 };
 
-export function getSeriesIndex(series: SeriesIdentifier[], target: SeriesIdentifier): number {
+export function getSeriesIndex(series: XYChartSeriesIdentifier[], target: XYChartSeriesIdentifier): number {
   if (!series) {
     return -1;
   }
@@ -149,7 +151,7 @@ export function getSeriesKey({
   specId,
   yAccessor,
   splitAccessors,
-}: Pick<SeriesIdentifier, 'specId' | 'yAccessor' | 'splitAccessors'>): string {
+}: Pick<XYChartSeriesIdentifier, 'specId' | 'yAccessor' | 'splitAccessors'>): string {
   const joinedAccessors = [...splitAccessors.entries()]
     .sort(([a], [b]) => (a > b ? 1 : -1))
     .map(([key, value]) => `${key}-${value}`)
@@ -332,7 +334,7 @@ function getRawDataSeries(
  */
 export function getSplittedSeries(
   seriesSpecs: BasicSeriesSpec[],
-  deselectedDataSeries: SeriesIdentifier[] = [],
+  deselectedDataSeries: XYChartSeriesIdentifier[] = [],
 ): {
   splittedSeries: Map<SpecId, RawDataSeries[]>;
   seriesCollection: Map<string, SeriesCollectionValue>;
@@ -362,7 +364,7 @@ export function getSplittedSeries(
       seriesCollection.set(series.key, {
         banded,
         specSortIndex: spec.sortIndex,
-        seriesIdentifier: series as SeriesIdentifier,
+        seriesIdentifier: series as XYChartSeriesIdentifier,
       });
     });
 
@@ -404,7 +406,7 @@ const getCustomSubSeriesName = (() => {
 
 const getSeriesLabelKeys = (
   spec: BasicSeriesSpec,
-  seriesIdentifier: SeriesIdentifier,
+  seriesIdentifier: XYChartSeriesIdentifier,
   isTooltip: boolean,
 ): (string | number)[] => {
   const isMultipleY = spec.yAccessors.length > 1;
@@ -426,7 +428,7 @@ const getSeriesLabelKeys = (
  * Get series label based on `SeriesIdentifier`
  */
 export function getSeriesLabel(
-  seriesIdentifier: SeriesIdentifier,
+  seriesIdentifier: XYChartSeriesIdentifier,
   hasSingleSeries: boolean,
   isTooltip: boolean,
   spec?: BasicSeriesSpec,

src/chart_types/xy_chart/utils/specs.ts

@@ -13,7 +13,7 @@ import { RecursivePartial, Color, Position, Datum } from '../../../utils/commons
 import { AxisId, GroupId } from '../../../utils/ids';
 import { ScaleContinuousType, ScaleType } from '../../../scales';
 import { CurveType } from '../../../utils/curves';
-import { RawDataSeriesDatum, SeriesIdentifier } from './series';
+import { RawDataSeriesDatum, XYChartSeriesIdentifier } from './series';
 import { AnnotationTooltipFormatter } from '../annotations/annotation_utils';
 import { Spec, SpecTypes } from '../../..';
 import { ChartTypes } from '../..';
@@ -37,7 +37,10 @@ export type SeriesTypes = $Values<typeof SeriesTypes>;
  * - `RecursivePartial<BarSeriesStyle>`: Style values to be merged with base bar styles
  * - `null`: Keep existing bar style
  */
-export type BarStyleAccessor = (datum: RawDataSeriesDatum, seriesIdentifier: SeriesIdentifier) => BarStyleOverride;
+export type BarStyleAccessor = (
+  datum: RawDataSeriesDatum,
+  seriesIdentifier: XYChartSeriesIdentifier,
+) => BarStyleOverride;
 /**
  * Override for bar styles per datum
  *
@@ -46,11 +49,14 @@ export type BarStyleAccessor = (datum: RawDataSeriesDatum, seriesIdentifier: Ser
  * - `RecursivePartial<PointStyle>`: Style values to be merged with base point styles
  * - `null`: Keep existing point style
  */
-export type PointStyleAccessor = (datum: RawDataSeriesDatum, seriesIdentifier: SeriesIdentifier) => PointStyleOverride;
+export type PointStyleAccessor = (
+  datum: RawDataSeriesDatum,
+  seriesIdentifier: XYChartSeriesIdentifier,
+) => PointStyleOverride;
 export const DEFAULT_GLOBAL_ID = '__global__';
 
-export type FilterPredicate = (series: SeriesIdentifier) => boolean;
-export type SeriesStringPredicate = (series: SeriesIdentifier, isTooltip: boolean) => string | null;
+export type FilterPredicate = (series: XYChartSeriesIdentifier) => boolean;
+export type SeriesStringPredicate = (series: XYChartSeriesIdentifier, isTooltip: boolean) => string | null;
 export type SubSeriesStringPredicate = (
   accessorLabel: string | number,
   accessorKey: string | number | null,
@@ -239,7 +245,7 @@ export interface SeriesSpec extends Spec {
    *
    * This takes precedence over `customSubSeriesLabel`
    *
-   * @param series - `SeriesIdentifier`
+   * @param series - `XYChartSeriesIdentifier`
    * @param isTooltip - true if tooltip label, otherwise legend label
    */
   customSeriesLabel?: SeriesStringPredicate;
@@ -267,7 +273,7 @@ export interface Postfixes {
 }
 
 export type SeriesColorsArray = string[];
-export type SeriesColorAccessorFn = (seriesIdentifier: SeriesIdentifier) => string | null;
+export type SeriesColorAccessorFn = (seriesIdentifier: XYChartSeriesIdentifier) => string | null;
 export type CustomSeriesColors = SeriesColorsArray | SeriesColorAccessorFn;
 
 export interface SeriesAccessors {