From 21b9431acd8e2b13ab3d9200461060a2a2ad216a Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Fri, 7 Jun 2019 10:11:51 +0200 Subject: [PATCH] [Lens] Xy expression building (#37967) --- x-pack/plugins/lens/public/index.scss | 5 + x-pack/plugins/lens/public/index.ts | 6 ++ .../xy_visualization.test.ts.snap | 93 +++++++++++++++++++ .../xy_expression.scss | 4 + .../xy_visualization.test.ts | 11 ++- .../xy_visualization.tsx | 65 ++++++++++++- 6 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 x-pack/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap create mode 100644 x-pack/plugins/lens/public/xy_visualization_plugin/xy_expression.scss diff --git a/x-pack/plugins/lens/public/index.scss b/x-pack/plugins/lens/public/index.scss index e69de29bb2d1d..6c01d745e0202 100644 --- a/x-pack/plugins/lens/public/index.scss +++ b/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"; \ No newline at end of file diff --git a/x-pack/plugins/lens/public/index.ts b/x-pack/plugins/lens/public/index.ts index f8f074cdb99bf..ad0b78c63e710 100644 --- a/x-pack/plugins/lens/public/index.ts +++ b/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'; diff --git a/x-pack/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap new file mode 100644 index 0000000000000..5f8dd2ef2b3d0 --- /dev/null +++ b/x-pack/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap @@ -0,0 +1,93 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`XY visualization #toExpression should map to a valid AST 1`] = ` +Object { + "chain": Array [ + Object { + "arguments": Object { + "legend": Array [ + Object { + "chain": Array [ + Object { + "arguments": Object { + "isVisible": Array [ + true, + ], + "position": Array [ + "bottom", + ], + }, + "function": "lens_xy_legendConfig", + "type": "function", + }, + ], + "type": "expression", + }, + ], + "seriesType": Array [ + "area", + ], + "splitSeriesAccessors": Array [], + "stackAccessors": Array [], + "title": Array [ + "Foo", + ], + "x": Array [ + Object { + "chain": Array [ + Object { + "arguments": Object { + "accessor": Array [ + "a", + ], + "position": Array [ + "bottom", + ], + "showGridlines": Array [ + true, + ], + "title": Array [ + "Baz", + ], + }, + "function": "lens_xy_xConfig", + "type": "function", + }, + ], + "type": "expression", + }, + ], + "y": Array [ + Object { + "chain": Array [ + Object { + "arguments": Object { + "accessors": Array [ + "b", + "c", + ], + "position": Array [ + "left", + ], + "showGridlines": Array [ + true, + ], + "title": Array [ + "Bar", + ], + }, + "function": "lens_xy_yConfig", + "type": "function", + }, + ], + "type": "expression", + }, + ], + }, + "function": "lens_xy_chart", + "type": "function", + }, + ], + "type": "expression", +} +`; diff --git a/x-pack/plugins/lens/public/xy_visualization_plugin/xy_expression.scss b/x-pack/plugins/lens/public/xy_visualization_plugin/xy_expression.scss new file mode 100644 index 0000000000000..93986078f68b1 --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/x-pack/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts index 6fa876bed0663..d2b458e87219c 100644 --- a/x-pack/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts +++ b/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(); + }); + }); }); diff --git a/x-pack/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx b/x-pack/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx index 58cc7422631cb..44b3a64b17560 100644 --- a/x-pack/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx +++ b/x-pack/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx @@ -51,5 +51,68 @@ export const xyVisualization: Visualization = { 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, + }, + }, + ], + }), };