[Lens] Xy expression building (#37967)

x-pack/plugins/lens/public/index.scss

@@ -0,0 +1,5 @@
+// Import the EUI global scope so we can use EUI constants
+@import 'src/legacy/ui/public/styles/_styling_constants';
+
+@import "./drag_drop/drag_drop.scss";
+@import "./xy_visualization_plugin/xy_expression.scss";

x-pack/plugins/lens/public/index.ts

@@ -6,6 +6,12 @@
 
 export * from './types';
 
+import 'ui/autoload/all';
+import 'uiExports/fieldFormats';
+import 'uiExports/search';
+import 'uiExports/visRequestHandlers';
+import 'uiExports/visResponseHandlers';
+
 import { render, unmountComponentAtNode } from 'react-dom';
 import { IScope } from 'angular';
 import chrome from 'ui/chrome';

x-pack/plugins/lens/public/xy_visualization_plugin/xy_expression.scss

@@ -0,0 +1,4 @@
+ .lnsChart {
+   // TODO style this dependent on the screen height (see POC)
+   height: 500px;
+ }

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

@@ -6,6 +6,7 @@
 
 import { xyVisualization } from './xy_visualization';
 import { Position } from '@elastic/charts';
+import { DatasourcePublicAPI } from '../types';
 import { State } from './types';
 
 function exampleState(): State {
@@ -30,7 +31,7 @@ function exampleState(): State {
   };
 }
 
-describe('IndexPattern Data Source', () => {
+describe('XY visualization', () => {
   describe('#initialize', () => {
     it('loads default state', () => {
       const initialState = xyVisualization.initialize();
@@ -78,4 +79,12 @@ Object {
       expect(xyVisualization.getPersistableState(exampleState())).toEqual(exampleState());
     });
   });
+
+  describe('#toExpression', () => {
+    it('should map to a valid AST', () => {
+      expect(
+        xyVisualization.toExpression(exampleState(), {} as DatasourcePublicAPI)
+      ).toMatchSnapshot();
+    });
+  });
 });

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

@@ -51,5 +51,68 @@ export const xyVisualization: Visualization<State, PersistableState> = {
       domElement
     ),
 
-  toExpression: () => '',
+  toExpression: state => ({
+    type: 'expression',
+    chain: [
+      {
+        type: 'function',
+        function: 'lens_xy_chart',
+        arguments: {
+          seriesType: [state.seriesType],
+          title: [state.title],
+          legend: [
+            {
+              type: 'expression',
+              chain: [
+                {
+                  type: 'function',
+                  function: 'lens_xy_legendConfig',
+                  arguments: {
+                    isVisible: [state.legend.isVisible],
+                    position: [state.legend.position],
+                  },
+                },
+              ],
+            },
+          ],
+          x: [
+            {
+              type: 'expression',
+              chain: [
+                {
+                  type: 'function',
+                  function: 'lens_xy_xConfig',
+                  arguments: {
+                    title: [state.x.title],
+                    showGridlines: [state.x.showGridlines],
+                    position: [state.x.position],
+                    accessor: [state.x.accessor],
+                  },
+                },
+              ],
+            },
+          ],
+          y: [
+            {
+              type: 'expression',
+              chain: [
+                {
+                  type: 'function',
+                  function: 'lens_xy_yConfig',
+                  arguments: {
+                    title: [state.y.title],
+                    showGridlines: [state.y.showGridlines],
+                    position: [state.y.position],
+                    accessors: state.y.accessors,
+                  },
+                },
+              ],
+            },
+          ],
+          splitSeriesAccessors: state.splitSeriesAccessors,
+          stackAccessors: state.stackAccessors,
+        },
+      },
+    ],
+  }),
 };