[lens] Label each Y axis with its operation label

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts

@@ -71,10 +71,15 @@ const axisConfig: { [key in keyof AxisConfig]: ArgumentType<AxisConfig[key]> } =
   },
 };
 
-export interface YConfig extends AxisConfig {
+export interface YState extends AxisConfig {
   accessors: string[];
 }
 
+export type YConfig = AxisConfig &
+  YState & {
+    labels: string[];
+  };
+
 type YConfigResult = YConfig & { type: 'lens_xy_yConfig' };
 
 export const yConfig: ExpressionFunction<'lens_xy_yConfig', null, YConfig, YConfigResult> = {
@@ -92,6 +97,11 @@ export const yConfig: ExpressionFunction<'lens_xy_yConfig', null, YConfig, YConf
       help: 'The columns to display on the y axis.',
       multi: true,
     },
+    labels: {
+      types: ['string'],
+      help: '',
+      multi: true,
+    },
   },
   fn: function fn(_context: unknown, args: YConfig) {
     return {
@@ -142,5 +152,15 @@ export interface XYArgs {
   stackAccessors: string[];
 }
 
-export type State = XYArgs;
-export type PersistableState = XYArgs;
+export interface XYState {
+  seriesType: SeriesType;
+  title: string;
+  legend: LegendConfig;
+  y: YState;
+  x: XConfig;
+  splitSeriesAccessors: string[];
+  stackAccessors: string[];
+}
+
+export type State = XYState;
+export type PersistableState = XYState;

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Position } from '@elastic/charts';
+import { BarSeries, Position } from '@elastic/charts';
 import { xyChart, XYChart } from './xy_expression';
 import { KibanaDatatable } from '../types';
 import React from 'react';
@@ -27,6 +27,7 @@ function sampleArgs() {
     },
     y: {
       accessors: ['a', 'b'],
+      labels: ['Label A', 'Label B'],
       position: Position.Left,
       showGridlines: false,
       title: 'A and B',
@@ -75,6 +76,7 @@ describe('xy_expression', () => {
     test('yConfig produces the correct arguments', () => {
       const args: YConfig = {
         accessors: ['bar'],
+        labels: [''],
         position: Position.Bottom,
         showGridlines: true,
         title: 'Barrrrrr!',
@@ -123,5 +125,19 @@ describe('xy_expression', () => {
         shallow(<XYChart data={data} args={{ ...args, seriesType: 'area' }} />)
       ).toMatchSnapshot();
     });
+
+    test('it remaps rows based on the labels', () => {
+      const { data, args } = sampleArgs();
+
+      const chart = shallow(<XYChart data={data} args={{ ...args, seriesType: 'bar' }} />);
+      const barSeries = chart.find(BarSeries);
+
+      expect(barSeries.prop('yAccessors')).toEqual(['Label A', 'Label B']);
+      expect(barSeries.prop('data')[0]).toEqual({
+        'Label A': 1,
+        'Label B': 2,
+        c: 3,
+      });
+    });
   });
 });

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx

@@ -103,18 +103,37 @@ export const xyChartRenderer: RenderFunction<XYChartProps> = {
 
 export function XYChart({ data, args }: XYChartProps) {
   const { legend, x, y, splitSeriesAccessors, stackAccessors, seriesType } = args;
+  // TODO: Stop mapping data once elastic-charts allows axis naming
+  // https://github.com/elastic/elastic-charts/issues/245
   const seriesProps = {
     splitSeriesAccessors,
     stackAccessors,
-    id: getSpecId(y.accessors.join(',')),
+    id: getSpecId(y.labels.join(',')),
     xAccessor: x.accessor,
-    yAccessors: y.accessors,
-    data: data.rows,
+    yAccessors: y.labels,
+    data: data.rows.map(row => {
+      const newRow: typeof row = {};
+
+      // Remap data to { 'Count of documents': 5 }
+      Object.keys(row).forEach(key => {
+        const labelIndex = y.accessors.indexOf(key);
+        if (labelIndex > -1) {
+          newRow[y.labels[labelIndex]] = row[key];
+        } else {
+          newRow[key] = row[key];
+        }
+      });
+      return newRow;
+    }),
   };
 
   return (
     <Chart className="lnsChart">
-      <Settings showLegend={legend.isVisible} legendPosition={legend.position} />
+      <Settings
+        showLegend={legend.isVisible}
+        legendPosition={legend.position}
+        showLegendDisplayValue={false}
+      />
 
       <Axis
         id={getAxisId('x')}

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts

@@ -6,7 +6,8 @@
 
 import { xyVisualization } from './xy_visualization';
 import { Position } from '@elastic/charts';
-import { DatasourcePublicAPI } from '../types';
+import { Ast } from '@kbn/interpreter/target/common';
+import { Operation } from '../types';
 import { State } from './types';
 import { createMockDatasource } from '../editor_frame_plugin/mocks';
 
@@ -89,8 +90,34 @@ Object {
   describe('#toExpression', () => {
     it('should map to a valid AST', () => {
       expect(
-        xyVisualization.toExpression(exampleState(), {} as DatasourcePublicAPI)
+        xyVisualization.toExpression(exampleState(), createMockDatasource().publicAPIMock)
       ).toMatchSnapshot();
     });
+
+    it('should default to labeling all columns with their column label', () => {
+      const mockDatasource = createMockDatasource();
+
+      mockDatasource.publicAPIMock.getOperationForColumnId
+        .mockReturnValueOnce({
+          label: 'First',
+        } as Operation)
+        .mockReturnValueOnce({
+          label: 'Second',
+        } as Operation);
+
+      const expression = xyVisualization.toExpression(
+        exampleState(),
+        mockDatasource.publicAPIMock
+      )! as Ast;
+
+      expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledTimes(2);
+      expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('b');
+      expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('c');
+
+      expect((expression.chain[0].arguments.y[0] as Ast).chain[0].arguments.labels).toEqual([
+        'First',
+        'Second',
+      ]);
+    });
   });
 });

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx

@@ -50,7 +50,7 @@ export const xyVisualization: Visualization<State, PersistableState> = {
       domElement
     ),
 
-  toExpression: state => ({
+  toExpression: (state, datasource) => ({
     type: 'expression',
     chain: [
       {
@@ -103,6 +103,10 @@ export const xyVisualization: Visualization<State, PersistableState> = {
                     showGridlines: [state.y.showGridlines],
                     position: [state.y.position],
                     accessors: state.y.accessors,
+                    labels: state.y.accessors.map(accessor => {
+                      const operation = datasource.getOperationForColumnId(accessor);
+                      return operation ? operation.label : accessor;
+                    }),
                   },
                 },
               ],