refactor: decouple tooltip from XY chart (opensearch-project#553)

This commit will decouple the tooltip component from the XY chart to allow Partition and other chart type an ease use.

BREAKING CHANGE: the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default.

close opensearch-project#246

packages/osd-charts/.playground/playground.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Chart, ScaleType, Position, Axis, getAxisId, timeFormatter, getSpecId, AreaSeries } from '../src';
+import { Chart, ScaleType, Position, Axis, getAxisId, timeFormatter, getSpecId, AreaSeries, Settings } from '../src';
 import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
 export class Playground extends React.Component {
   chartRef: React.RefObject<Chart> = React.createRef();
@@ -13,6 +13,7 @@ export class Playground extends React.Component {
       <>
         <div className="chart">
           <Chart className={'story-chart'}>
+            <Settings showLegend={true} />
             <Axis
               id={getAxisId('bottom')}
               title={'timestamp per 1 minute'}
@@ -33,7 +34,10 @@ export class Playground extends React.Component {
               yScaleType={ScaleType.Linear}
               xAccessor={0}
               yAccessors={[1]}
-              data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
+              y0Accessors={[2]}
+              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.map((d) => {
+                return [...d, d[1] - 10];
+              })}
             />
           </Chart>
         </div>

packages/osd-charts/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;
 ```
 

packages/osd-charts/src/chart_types/partition_chart/state/chart_state.tsx

@@ -27,4 +27,13 @@ export class PartitionState implements InternalChartState {
   getPointerCursor() {
     return 'default';
   }
+  isTooltipVisible() {
+    return false;
+  }
+  getTooltipInfo() {
+    return undefined;
+  }
+  getTooltipAnchor() {
+    return null;
+  }
 }

packages/osd-charts/src/chart_types/xy_chart/crosshair/crosshair_utils.test.ts

@@ -1,4 +1,4 @@
-import { getFinalTooltipPosition } from './crosshair_utils';
+import { getFinalTooltipPosition } from '../../../components/tooltip/utils';
 
 describe('Tooltip position', () => {
   const container = {
@@ -19,15 +19,11 @@ describe('Tooltip position', () => {
         container,
         tooltip,
         {
-          isRotatedHorizontal: true,
-          vPosition: {
-            bandHeight: 0,
-            bandTop: 0,
-          },
-          hPosition: {
-            bandWidth: 0,
-            bandLeft: 10,
-          },
+          isRotated: false,
+          y1: 0,
+          y0: 0,
+          x0: 10,
+          x1: 10,
         },
         5,
       );
@@ -39,15 +35,11 @@ describe('Tooltip position', () => {
         container,
         tooltip,
         {
-          isRotatedHorizontal: true,
-          vPosition: {
-            bandHeight: 0,
-            bandTop: 90,
-          },
-          hPosition: {
-            bandWidth: 0,
-            bandLeft: 10,
-          },
+          isRotated: false,
+          y0: 90,
+          y1: 90,
+          x0: 10,
+          x1: 10,
         },
         5,
       );
@@ -59,15 +51,11 @@ describe('Tooltip position', () => {
         container,
         tooltip,
         {
-          isRotatedHorizontal: true,
-          vPosition: {
-            bandHeight: 0,
-            bandTop: 0,
-          },
-          hPosition: {
-            bandWidth: 0,
-            bandLeft: 100,
-          },
+          isRotated: false,
+          y0: 0,
+          y1: 0,
+          x0: 100,
+          x1: 100,
         },
         5,
       );
@@ -79,15 +67,11 @@ describe('Tooltip position', () => {
         container,
         tooltip,
         {
-          isRotatedHorizontal: true,
-          vPosition: {
-            bandHeight: 0,
-            bandTop: 90,
-          },
-          hPosition: {
-            bandWidth: 0,
-            bandLeft: 100,
-          },
+          isRotated: false,
+          y0: 90,
+          y1: 90,
+          x0: 100,
+          x1: 100,
         },
         5,
       );
@@ -101,15 +85,11 @@ describe('Tooltip position', () => {
         container,
         tooltip,
         {
-          isRotatedHorizontal: false,
-          vPosition: {
-            bandHeight: 0,
-            bandTop: 0,
-          },
-          hPosition: {
-            bandWidth: 0,
-            bandLeft: 10,
-          },
+          isRotated: true,
+          y0: 0,
+          y1: 0,
+          x1: 10,
+          x0: 10,
         },
         5,
       );
@@ -121,15 +101,11 @@ describe('Tooltip position', () => {
         container,
         tooltip,
         {
-          isRotatedHorizontal: false,
-          vPosition: {
-            bandHeight: 0,
-            bandTop: 90,
-          },
-          hPosition: {
-            bandWidth: 0,
-            bandLeft: 10,
-          },
+          isRotated: true,
+          y0: 90,
+          y1: 90,
+          x1: 10,
+          x0: 10,
         },
         5,
       );
@@ -141,15 +117,11 @@ describe('Tooltip position', () => {
         container,
         tooltip,
         {
-          isRotatedHorizontal: false,
-          vPosition: {
-            bandHeight: 0,
-            bandTop: 0,
-          },
-          hPosition: {
-            bandWidth: 0,
-            bandLeft: 100,
-          },
+          isRotated: true,
+          y0: 0,
+          y1: 0,
+          x1: 100,
+          x0: 100,
         },
         5,
       );
@@ -161,15 +133,11 @@ describe('Tooltip position', () => {
         container,
         tooltip,
         {
-          isRotatedHorizontal: false,
-          vPosition: {
-            bandHeight: 0,
-            bandTop: 90,
-          },
-          hPosition: {
-            bandWidth: 0,
-            bandLeft: 100,
-          },
+          isRotated: true,
+          y0: 90,
+          y1: 90,
+          x1: 100,
+          x0: 100,
         },
         5,
       );