fix: align series names on splitted series configuration

.playground/index.html

@@ -18,14 +18,12 @@
         position: absolute;
         top: 10px;
         left: 10px;
-        bottom: 10px;
-        right: 10px;
       }
       .chart {
         background: white;
         position: relative;
-        width: 800px;
-        height: 450px;
+        width: 600px;
+        height: 350px;
         margin: 10px;
       }
     </style>

.playground/playgroud.tsx

@@ -1,13 +1,41 @@
 import React, { Fragment } from 'react';
-import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, BarSeries } from '../src';
+import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, BarSeries, Settings } from '../src';
 
-export class Playground extends React.Component {
+export class Playground extends React.Component<{}, { dataLimit: boolean }> {
+  state = {
+    dataLimit: false,
+  };
+  changeData = () => {
+    this.setState((prevState) => {
+      return {
+        dataLimit: !prevState.dataLimit,
+      };
+    });
+  };
   render() {
-    const data = [{ x: 0, y: -4 }, { x: 1, y: -3 }, { x: 2, y: 2 }, { x: 3, y: 1 }];
+    const data = [
+      {
+        g: null,
+        i: 'aa',
+        x: 1571212800000,
+        y: 16,
+        y1: 2,
+      },
+      // {
+      //   x: 1571290200000,
+      //   y: 1,
+      //   y1: 5,
+      //   // g: 'authentication_success',
+      // },
+    ];
     return (
       <Fragment>
+        <div>
+          <button onClick={this.changeData}>Reduce data</button>
+        </div>
         <div className="chart">
           <Chart>
+            <Settings showLegend />
             <Axis id={getAxisId('top')} position={Position.Bottom} title={'Top axis'} />
             <Axis
               id={getAxisId('left2')}
@@ -17,15 +45,14 @@ export class Playground extends React.Component {
             />
 
             <BarSeries
-              id={getSpecId('bars')}
+              id={getSpecId('bars1')}
               xScaleType={ScaleType.Linear}
               yScaleType={ScaleType.Linear}
               xAccessor="x"
               yAccessors={['y']}
               splitSeriesAccessors={['g']}
               stackAccessors={['x']}
-              data={data}
-              yScaleToDataExtent={true}
+              data={data.slice(0, this.state.dataLimit ? 1 : 2)}
             />
           </Chart>
         </div>

src/chart_types/xy_chart/legend/legend.test.ts

@@ -263,4 +263,27 @@ describe('Legends', () => {
     label = getSeriesColorLabel([0], false, spec1);
     expect(label).toBe('0');
   });
+  it('use the splitted value as label if has a single series and splitSeries is used', () => {
+    const specWithSplit: BasicSeriesSpec = {
+      ...spec1,
+      splitSeriesAccessors: ['g'],
+    };
+    let label = getSeriesColorLabel([], true, specWithSplit);
+    expect(label).toBe('Spec 1 title');
+
+    label = getSeriesColorLabel(['a'], true, specWithSplit);
+    expect(label).toBe('a');
+
+    // happens when we have multiple values in splitSeriesAccessor
+    // or we have also multiple yAccessors
+    label = getSeriesColorLabel(['a', 'b'], true, specWithSplit);
+    expect(label).toBe('a - b');
+
+    // happens when the value of a splitSeriesAccessor is null
+    label = getSeriesColorLabel([null], true, specWithSplit);
+    expect(label).toBe('Spec 1 title');
+
+    label = getSeriesColorLabel([], false, specWithSplit);
+    expect(label).toBe('Spec 1 title');
+  });
 });

src/chart_types/xy_chart/legend/legend.ts

@@ -95,7 +95,7 @@ export function computeLegend(
 }
 
 export function getSeriesColorLabel(
-  colorValues: any[],
+  colorValues: Array<string | number | null | undefined>,
   hasSingleSeries: boolean,
   spec?: BasicSeriesSpec,
 ): string | undefined {
@@ -104,7 +104,11 @@ export function getSeriesColorLabel(
     if (!spec) {
       return;
     }
-    label = spec.name || `${spec.id}`;
+    if (spec.splitSeriesAccessors && colorValues.length > 0 && colorValues[0] !== null) {
+      label = colorValues.join(' - ');
+    } else {
+      label = spec.name || `${spec.id}`;
+    }
   } else {
     label = colorValues.join(' - ');
   }