[lens] Move XY chart config into popover and fix layering (#41927)

* [lens] Move XY chart config into popover and fix layering

* Fix tests

* Update style

* Change wrapping of layer settings popover

package.json

@@ -104,7 +104,7 @@
     "@babel/core": "7.4.5",
     "@babel/polyfill": "7.4.4",
     "@babel/register": "7.4.4",
-    "@elastic/charts": "^7.2.1",
+    "@elastic/charts": "^8.1.0",
     "@elastic/datemath": "5.0.2",
     "@elastic/eui": "12.4.0",
     "@elastic/filesaver": "1.1.2",

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/config_panel_wrapper.tsx

@@ -83,15 +83,17 @@ export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: Config
         }}
       />
       {props.activeVisualizationId && props.visualizationState !== null && (
-        <NativeRenderer
-          render={props.visualizationMap[props.activeVisualizationId].renderConfigPanel}
-          nativeProps={{
-            dragDropContext: context,
-            state: props.visualizationState,
-            setState: setVisualizationState,
-            frame: props.framePublicAPI,
-          }}
-        />
+        <div className="lnsConfigPanelWrapper">
+          <NativeRenderer
+            render={props.visualizationMap[props.activeVisualizationId].renderConfigPanel}
+            nativeProps={{
+              dragDropContext: context,
+              state: props.visualizationState,
+              setState: setVisualizationState,
+              frame: props.framePublicAPI,
+            }}
+          />
+        </div>
       )}
     </>
   );

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss

@@ -106,4 +106,8 @@
   font-size: 1.2em;
 }
 
+.lnsConfigPanelWrapper {
+  padding: $euiSize 0;
+}
+
 @import './suggestion_panel.scss';

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx

@@ -106,6 +106,7 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan
                   data-test-subj="indexPattern-dimensionPopover-remove"
                   iconType="cross"
                   iconSize="s"
+                  size="s"
                   color="danger"
                   aria-label={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
                     defaultMessage: 'Remove',

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx

@@ -161,6 +161,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
             data-test-subj="indexPattern-configure-dimension"
             onClick={() => setPopoverOpen(true)}
             iconType="plusInCircle"
+            size="s"
           />
         )
       }

x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx

@@ -8,6 +8,7 @@ import _ from 'lodash';
 import React from 'react';
 import { render } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
+import { EuiText } from '@elastic/eui';
 import {
   DatasourceDimensionPanelProps,
   DatasourceDataPanelProps,
@@ -338,7 +339,9 @@ export function getIndexPatternDatasource({
         renderLayerPanel: (domElement: Element, props: DatasourceLayerPanelProps) => {
           render(
             <I18nProvider>
-              <span>{state.indexPatterns[state.layers[props.layerId].indexPatternId].title}</span>
+              <EuiText size="s">
+                {state.indexPatterns[state.layers[props.layerId].indexPatternId].title}
+              </EuiText>
             </I18nProvider>,
             domElement
           );

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

@@ -71,6 +71,7 @@ export const buildExpression = (
       arguments: {
         xTitle: [xTitle],
         yTitle: [yTitle],
+        isHorizontal: [state.isHorizontal],
         legend: [
           {
             type: 'expression',
@@ -109,8 +110,6 @@ export const buildExpression = (
                   layerId: [layer.layerId],
 
                   title: [layer.title],
-                  showGridlines: [layer.showGridlines],
-                  position: [layer.position],
                   hide: [Boolean(layer.hide)],
 
                   xAccessor: [layer.xAccessor],

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

@@ -51,8 +51,6 @@ export const legendConfig: ExpressionFunction<
 
 interface AxisConfig {
   title: string;
-  showGridlines: boolean;
-  position: Position;
   hide?: boolean;
 }
 
@@ -61,15 +59,6 @@ const axisConfig: { [key in keyof AxisConfig]: ArgumentType<AxisConfig[key]> } =
     types: ['string'],
     help: 'The axis title',
   },
-  showGridlines: {
-    types: ['boolean'],
-    help: 'Show / hide axis grid lines.',
-  },
-  position: {
-    types: ['string'],
-    options: [Position.Top, Position.Right, Position.Bottom, Position.Left],
-    help: 'The position of the axis',
-  },
   hide: {
     types: ['boolean'],
     default: false,
@@ -137,15 +126,7 @@ export const layerConfig: ExpressionFunction<
     },
     seriesType: {
       types: ['string'],
-      options: [
-        'bar',
-        'line',
-        'area',
-        'horizontal_bar',
-        'bar_stacked',
-        'area_stacked',
-        'horizontal_bar_stacked',
-      ],
+      options: ['bar', 'line', 'area', 'bar_stacked', 'area_stacked'],
       help: 'The type of chart to display.',
     },
     splitAccessor: {
@@ -171,14 +152,7 @@ export const layerConfig: ExpressionFunction<
   },
 };
 
-export type SeriesType =
-  | 'bar'
-  | 'horizontal_bar'
-  | 'line'
-  | 'area'
-  | 'bar_stacked'
-  | 'horizontal_bar_stacked'
-  | 'area_stacked';
+export type SeriesType = 'bar' | 'line' | 'area' | 'bar_stacked' | 'area_stacked';
 
 export type LayerConfig = AxisConfig & {
   layerId: string;
@@ -198,12 +172,14 @@ export interface XYArgs {
   yTitle: string;
   legend: LegendConfig;
   layers: LayerArgs[];
+  isHorizontal: boolean;
 }
 
 // Persisted parts of the state
 export interface XYState {
   legend: LegendConfig;
   layers: LayerConfig[];
+  isHorizontal: boolean;
 }
 
 export type State = XYState;