fix: reflect specs ids on legend items when using single series

src/lib/series/legend.test.ts

@@ -0,0 +1,101 @@
+import { getGroupId, getSpecId, SpecId } from '../utils/ids';
+import { ScaleType } from '../utils/scales/scales';
+import { computeLegend } from './legend';
+import { DataSeriesColorsValues } from './series';
+import { BasicSeriesSpec } from './specs';
+
+const colorValues1a = {
+  specId: getSpecId('spec1'),
+  colorValues: [],
+};
+const colorValues1b = {
+  specId: getSpecId('spec1'),
+  colorValues: ['a', 'b'],
+};
+const colorValues2a = {
+  specId: getSpecId('spec2'),
+  colorValues: [],
+};
+const colorValues2b = {
+  specId: getSpecId('spec3'),
+  colorValues: ['c', 'd'],
+};
+const spec1: BasicSeriesSpec = {
+  id: getSpecId('spec1'),
+  groupId: getGroupId('group'),
+  seriesType: 'line',
+  yScaleType: ScaleType.Log,
+  xScaleType: ScaleType.Linear,
+  xAccessor: 'x',
+  yAccessors: ['y'],
+  yScaleToDataExtent: false,
+  data: [],
+};
+const spec2: BasicSeriesSpec = {
+  id: getSpecId('spec2'),
+  groupId: getGroupId('group'),
+  seriesType: 'line',
+  yScaleType: ScaleType.Log,
+  xScaleType: ScaleType.Linear,
+  xAccessor: 'x',
+  yAccessors: ['y'],
+  yScaleToDataExtent: false,
+  data: [],
+};
+
+describe('Legends', () => {
+  const seriesColor = new Map<string, DataSeriesColorsValues>();
+  const seriesColorMap = new Map<string, string>();
+  const specs = new Map<SpecId, BasicSeriesSpec>();
+  specs.set(spec1.id, spec1);
+  specs.set(spec2.id, spec2);
+  seriesColorMap.set('colorSeries1a', 'red');
+  seriesColorMap.set('colorSeries1b', 'blue');
+  seriesColorMap.set('colorSeries2a', 'green');
+  seriesColorMap.set('colorSeries2b', 'white');
+  beforeEach(() => {
+    seriesColor.clear();
+  });
+  it('compute legend for a single series', () => {
+    seriesColor.set('colorSeries1a', colorValues1a);
+    const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet');
+    const expected = [
+      { color: 'red', label: 'spec1', value: { colorValues: [], specId: 'spec1' } },
+    ];
+    expect(legend).toEqual(expected);
+  });
+  it('compute legend for a single spec but with multiple series', () => {
+    seriesColor.set('colorSeries1a', colorValues1a);
+    seriesColor.set('colorSeries1b', colorValues1b);
+    const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet');
+    const expected = [
+      { color: 'red', label: 'spec1', value: { colorValues: [], specId: 'spec1' } },
+      { color: 'blue', label: 'a - b', value: { colorValues: ['a', 'b'], specId: 'spec1' } },
+    ];
+    expect(legend).toEqual(expected);
+  });
+  it('compute legend for multiple specs', () => {
+    seriesColor.set('colorSeries1a', colorValues1a);
+    seriesColor.set('colorSeries2a', colorValues2a);
+    const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet');
+    const expected = [
+      { color: 'red', label: 'spec1', value: { colorValues: [], specId: 'spec1' } },
+      { color: 'green', label: 'spec2', value: { colorValues: [], specId: 'spec2' } },
+    ];
+    expect(legend).toEqual(expected);
+  });
+  it('empty legend for missing spec', () => {
+    seriesColor.set('colorSeries2b', colorValues2b);
+    const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet');
+    expect(legend).toEqual([]);
+  });
+  it('compute legend with default color for missing series color', () => {
+    seriesColor.set('colorSeries1a', colorValues1a);
+    const emptyColorMap = new Map<string, string>();
+    const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet');
+    const expected = [
+      { color: 'violet', label: 'spec1', value: { colorValues: [], specId: 'spec1' } },
+    ];
+    expect(legend).toEqual(expected);
+  });
+});

src/lib/series/legend.ts

@@ -1,7 +1,6 @@
-import { getAxesSpecForSpecId } from '../../state/utils';
-import { AxisId, SpecId } from '../utils/ids';
+import { SpecId } from '../utils/ids';
 import { DataSeriesColorsValues } from './series';
-import { AxisSpec, BasicSeriesSpec } from './specs';
+import { BasicSeriesSpec } from './specs';
 export interface LegendItem {
   color: string;
   label: string;
@@ -11,24 +10,19 @@ export function computeLegend(
   seriesColor: Map<string, DataSeriesColorsValues>,
   seriesColorMap: Map<string, string>,
   specs: Map<SpecId, BasicSeriesSpec>,
-  axes: Map<AxisId, AxisSpec>,
   defaultColor: string,
 ): LegendItem[] {
   const legendItems: LegendItem[] = [];
   seriesColor.forEach((series, key) => {
     const color = seriesColorMap.get(key) || defaultColor;
-    const spec = specs.get(series.specId);
-    if (!spec) {
-      return;
-    }
     let label = '';
+
     if (seriesColor.size === 1 || series.colorValues.length === 0 || !series.colorValues[0]) {
-      const axis = getAxesSpecForSpecId(axes, spec.groupId);
-      if (axis.yAxis) {
-        label = `${axis.yAxis.title}`;
-      } else {
-        label = `${spec.id}`;
+      const spec = specs.get(series.specId);
+      if (!spec) {
+        return;
       }
+      label = `${spec.id}`;
     } else {
       label = series.colorValues.join(' - ');
     }

src/state/chart_state.ts

@@ -289,7 +289,6 @@ export class ChartStore {
       seriesDomains.seriesColors,
       seriesColorMap,
       this.seriesSpecs,
-      this.axesSpecs,
       this.chartTheme.colors.defaultVizColor,
     );
     // tslint:disable-next-line:no-console

src/stories/bar_chart.tsx

@@ -276,25 +276,25 @@ storiesOf('Bar Chart', module)
       </Chart>
     );
   })
-  .add('clustered multi series', () => {
+  .add('clustered multiple series specs', () => {
     return (
       <Chart renderer="canvas" className={'story-chart'}>
         <Settings showLegend={true} legendPosition={Position.Right} />
         <Axis
           id={getAxisId('bottom')}
           position={Position.Bottom}
-          title={'Bottom axis'}
+          title={'elements'}
           showOverlappingTicks={true}
         />
         <Axis
           id={getAxisId('left2')}
-          title={'Left axis'}
+          title={'count'}
           position={Position.Left}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
 
         <BarSeries
-          id={getSpecId('bars1')}
+          id={getSpecId('bar series 1')}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           xAccessor="x"
@@ -304,7 +304,17 @@ storiesOf('Bar Chart', module)
           yScaleToDataExtent={false}
         />
         <BarSeries
-          id={getSpecId('bars2')}
+          id={getSpecId('bar series 2')}
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          splitSeriesAccessors={['g']}
+          data={[{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 4 }]}
+          yScaleToDataExtent={false}
+        />
+        <BarSeries
+          id={getSpecId('bar series 3')}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           xAccessor="x"