fix(tooltip): fix duplicate key warning for band area charts (#327)

A band area chart has the same seriesKey for the Y0 and Y1 values. This cause the tooltip to emit a warning because of two react components with the same key. This commit fix that adding the accessor value as part of the react key

fix #326

src/chart_types/xy_chart/store/chart_state.test.ts

@@ -590,6 +590,7 @@ describe('Chart Store', () => {
       isHighlighted: false,
       isXValue: false,
       seriesKey: 'a',
+      yAccessor: 'y',
     };
     store.cursorPosition.x = -1;
     store.cursorPosition.y = 1;
@@ -699,6 +700,7 @@ describe('Chart Store', () => {
       isHighlighted: false,
       isXValue: false,
       seriesKey: 'a',
+      yAccessor: 'y',
     };
     store.xScale = new ScaleContinuous(ScaleType.Linear, [0, 100], [0, 100]);
     store.cursorPosition.x = 1;
@@ -835,6 +837,7 @@ describe('Chart Store', () => {
       isHighlighted: true,
       isXValue: false,
       seriesKey: 'foo',
+      yAccessor: 'y',
     };
     const unhighlightedTooltipValue = {
       name: 'foo',
@@ -843,6 +846,7 @@ describe('Chart Store', () => {
       isHighlighted: false,
       isXValue: false,
       seriesKey: 'foo',
+      yAccessor: 'y',
     };
 
     const expectedRectTooltipState = {
@@ -870,6 +874,7 @@ describe('Chart Store', () => {
       isHighlighted: false,
       isXValue: true,
       seriesKey: 'headerSeries',
+      yAccessor: 'y',
     };
 
     store.tooltipData.replace([headerValue]);
@@ -882,6 +887,7 @@ describe('Chart Store', () => {
       isHighlighted: false,
       isXValue: false,
       seriesKey: 'seriesKey',
+      yAccessor: 'y',
     };
     store.tooltipData.replace([headerValue, tooltipValue]);
 

src/chart_types/xy_chart/tooltip/tooltip.test.ts

@@ -67,6 +67,7 @@ describe('Tooltip formatting', () => {
   test('format simple tooltip', () => {
     const tooltipValue = formatTooltip(indexedGeometry, SPEC_1, false, false, YAXIS_SPEC);
     expect(tooltipValue).toBeDefined();
+    expect(tooltipValue.yAccessor).toBe('y1');
     expect(tooltipValue.name).toBe('bar_1');
     expect(tooltipValue.isXValue).toBe(false);
     expect(tooltipValue.isHighlighted).toBe(false);
@@ -83,6 +84,7 @@ describe('Tooltip formatting', () => {
     };
     const tooltipValue = formatTooltip(geometry, SPEC_1, false, false, YAXIS_SPEC);
     expect(tooltipValue).toBeDefined();
+    expect(tooltipValue.yAccessor).toBe('y1');
     expect(tooltipValue.name).toBe('y1');
     expect(tooltipValue.isXValue).toBe(false);
     expect(tooltipValue.isHighlighted).toBe(false);
@@ -99,6 +101,7 @@ describe('Tooltip formatting', () => {
     };
     const tooltipValue = formatTooltip(geometry, SPEC_1, false, false, YAXIS_SPEC);
     expect(tooltipValue).toBeDefined();
+    expect(tooltipValue.yAccessor).toBe('y0');
     expect(tooltipValue.name).toBe('bar_1');
     expect(tooltipValue.isXValue).toBe(false);
     expect(tooltipValue.isHighlighted).toBe(false);
@@ -115,6 +118,7 @@ describe('Tooltip formatting', () => {
     };
     let tooltipValue = formatTooltip(geometry, SPEC_1, true, false, YAXIS_SPEC);
     expect(tooltipValue).toBeDefined();
+    expect(tooltipValue.yAccessor).toBe('y0');
     expect(tooltipValue.name).toBe('bar_1');
     expect(tooltipValue.isXValue).toBe(true);
     expect(tooltipValue.isHighlighted).toBe(false);

src/chart_types/xy_chart/tooltip/tooltip.ts

@@ -30,7 +30,7 @@ export function formatTooltip(
   const { id } = spec;
   const {
     color,
-    value: { x, y },
+    value: { x, y, accessor },
     geometryId: { seriesKey },
   } = searchIndexValue;
   const seriesKeyAsString = getColorValuesAsString(seriesKey, id);
@@ -49,6 +49,7 @@ export function formatTooltip(
     color,
     isHighlighted: isXValue ? false : isHighlighted,
     isXValue,
+    yAccessor: accessor,
   };
 }
 

src/chart_types/xy_chart/utils/interactions.ts

@@ -1,6 +1,7 @@
 import { BarGeometry, IndexedGeometry, isBarGeometry, isPointGeometry, PointGeometry } from '../rendering/rendering';
 import { Datum, Rotation } from './specs';
 import { Dimensions } from '../../../utils/dimensions';
+import { Accessor } from '../../../utils/accessor';
 
 /** The type of tooltip to use */
 export const TooltipType = Object.freeze({
@@ -27,6 +28,7 @@ export interface TooltipValue {
   isHighlighted: boolean;
   isXValue: boolean;
   seriesKey: string;
+  yAccessor: Accessor;
 }
 
 export type TooltipValueFormatter = (data: TooltipValue) => JSX.Element | string;

src/chart_types/xy_chart/utils/series.ts

@@ -107,7 +107,7 @@ export function splitSeries(
         const cleanedDatum = cleanDatum(datum, xAccessor, accessor, y0Accessors && y0Accessors[index]);
         xValues.add(cleanedDatum.x);
         updateSeriesMap(series, [...seriesKey, accessor], cleanedDatum, specId, colorValuesKey);
-      }, {});
+      });
     } else {
       const colorValues = getColorValues(datum, splitSeriesAccessors);
       const colorValuesKey = getColorValuesAsString(colorValues, specId);
@@ -116,7 +116,7 @@ export function splitSeries(
       xValues.add(cleanedDatum.x);
       updateSeriesMap(series, [...seriesKey], cleanedDatum, specId, colorValuesKey);
     }
-  }, {});
+  });
   return {
     rawDataSeries: [...series.values()],
     colorsValues,

src/components/tooltips.tsx

@@ -30,14 +30,14 @@ class TooltipsComponent extends React.Component<TooltipProps> {
       <div className="echTooltip" style={{ transform: tooltipPosition.transform }}>
         <div className="echTooltip__header">{this.renderHeader(tooltipData[0], tooltipHeaderFormatter)}</div>
         <div className="echTooltip__list">
-          {tooltipData.slice(1).map(({ name, value, color, isHighlighted, seriesKey }) => {
+          {tooltipData.slice(1).map(({ name, value, color, isHighlighted, seriesKey, yAccessor }) => {
             const classes = classNames('echTooltip__item', {
               /* eslint @typescript-eslint/camelcase:0 */
               echTooltip__rowHighlighted: isHighlighted,
             });
             return (
               <div
-                key={seriesKey}
+                key={`${seriesKey}--${yAccessor}`}
                 className={classes}
                 style={{
                   borderLeftColor: color,

stories/area_chart.tsx

@@ -431,6 +431,7 @@ storiesOf('Area Chart', module)
     const scaleToDataExtent = boolean('scale to extent', true);
     return (
       <Chart className={'story-chart'}>
+        <Settings showLegend legendPosition={Position.Right} />
         <Axis
           id={getAxisId('bottom')}
           title={'timestamp per 1 minute'}