[Lens] Add styling options for x and y axes on the settings popover (#…

…71829) (#74782)

* [Lens] Add styling options for x axis on the settings popover

* ts related changes

* Changes to the popover's design and y-axis implementatin

* fix types and add unit tests

* Add extra translations

* Fix functional test and change the logic of the yTitle

* fixes

* fix showTitle settings bug

* Fix ticklabels bug on y axes

* fix some tests

* Change the user flow on x and y titles on settings popover and enable the gridlines by default

* disable linter warning

* PR Comments

* Add a comment to callback to explain the decision to listen only to open changes

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -10,7 +10,7 @@ import { ExpressionsSetup } from '../../../../../src/plugins/expressions/public'
 import { UI_SETTINGS } from '../../../../../src/plugins/data/public';
 import { xyVisualization } from './xy_visualization';
 import { xyChart, getXyChartRenderer } from './xy_expression';
-import { legendConfig, layerConfig, yAxisConfig } from './types';
+import { legendConfig, layerConfig, yAxisConfig, tickLabelsConfig, gridlinesConfig } from './types';
 import { EditorFrameSetup, FormatFactory } from '../types';
 import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 
@@ -39,6 +39,8 @@ export class XyVisualization {
   ) {
     expressions.registerFunction(() => legendConfig);
     expressions.registerFunction(() => yAxisConfig);
+    expressions.registerFunction(() => tickLabelsConfig);
+    expressions.registerFunction(() => gridlinesConfig);
     expressions.registerFunction(() => layerConfig);
     expressions.registerFunction(() => xyChart);
 

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

@@ -41,6 +41,8 @@ describe('#toExpression', () => {
           legend: { position: Position.Bottom, isVisible: true },
           preferredSeriesType: 'bar',
           fittingFunction: 'Carry',
+          tickLabelsVisibilitySettings: { x: false, y: true },
+          gridlinesVisibilitySettings: { x: false, y: true },
           layers: [
             {
               layerId: 'first',
@@ -77,6 +79,27 @@ describe('#toExpression', () => {
     ).toEqual('None');
   });
 
+  it('should default the showXAxisTitle and showYAxisTitle to true', () => {
+    const expression = xyVisualization.toExpression(
+      {
+        legend: { position: Position.Bottom, isVisible: true },
+        preferredSeriesType: 'bar',
+        layers: [
+          {
+            layerId: 'first',
+            seriesType: 'area',
+            splitAccessor: 'd',
+            xAccessor: 'a',
+            accessors: ['b', 'c'],
+          },
+        ],
+      },
+      frame
+    ) as Ast;
+    expect(expression.chain[0].arguments.showXAxisTitle[0]).toBe(true);
+    expect(expression.chain[0].arguments.showYAxisTitle[0]).toBe(true);
+  });
+
   it('should not generate an expression when missing x', () => {
     expect(
       xyVisualization.toExpression(
@@ -140,8 +163,8 @@ describe('#toExpression', () => {
     expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('b');
     expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('c');
     expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('d');
-    expect(expression.chain[0].arguments.xTitle).toEqual(['col_a']);
-    expect(expression.chain[0].arguments.yTitle).toEqual(['col_b']);
+    expect(expression.chain[0].arguments.xTitle).toEqual(['']);
+    expect(expression.chain[0].arguments.yTitle).toEqual(['']);
     expect(
       (expression.chain[0].arguments.layers[0] as Ast).chain[0].arguments.columnToLabel
     ).toEqual([
@@ -152,4 +175,54 @@ describe('#toExpression', () => {
       }),
     ]);
   });
+
+  it('should default the tick labels visibility settings to true', () => {
+    const expression = xyVisualization.toExpression(
+      {
+        legend: { position: Position.Bottom, isVisible: true },
+        preferredSeriesType: 'bar',
+        layers: [
+          {
+            layerId: 'first',
+            seriesType: 'area',
+            splitAccessor: 'd',
+            xAccessor: 'a',
+            accessors: ['b', 'c'],
+          },
+        ],
+      },
+      frame
+    ) as Ast;
+    expect(
+      (expression.chain[0].arguments.tickLabelsVisibilitySettings[0] as Ast).chain[0].arguments
+    ).toEqual({
+      x: [true],
+      y: [true],
+    });
+  });
+
+  it('should default the gridlines visibility settings to true', () => {
+    const expression = xyVisualization.toExpression(
+      {
+        legend: { position: Position.Bottom, isVisible: true },
+        preferredSeriesType: 'bar',
+        layers: [
+          {
+            layerId: 'first',
+            seriesType: 'area',
+            splitAccessor: 'd',
+            xAccessor: 'a',
+            accessors: ['b', 'c'],
+          },
+        ],
+      },
+      frame
+    ) as Ast;
+    expect(
+      (expression.chain[0].arguments.gridlinesVisibilitySettings[0] as Ast).chain[0].arguments
+    ).toEqual({
+      x: [true],
+      y: [true],
+    });
+  });
 });

x-pack/plugins/lens/public/xy_visualization/to_expression.ts

@@ -13,28 +13,6 @@ interface ValidLayer extends LayerConfig {
   xAccessor: NonNullable<LayerConfig['xAccessor']>;
 }
 
-function xyTitles(layer: LayerConfig, frame: FramePublicAPI) {
-  const defaults = {
-    xTitle: 'x',
-    yTitle: 'y',
-  };
-
-  if (!layer || !layer.accessors.length) {
-    return defaults;
-  }
-  const datasource = frame.datasourceLayers[layer.layerId];
-  if (!datasource) {
-    return defaults;
-  }
-  const x = layer.xAccessor ? datasource.getOperationForColumnId(layer.xAccessor) : null;
-  const y = layer.accessors[0] ? datasource.getOperationForColumnId(layer.accessors[0]) : null;
-
-  return {
-    xTitle: x ? x.label : defaults.xTitle,
-    yTitle: y ? y.label : defaults.yTitle,
-  };
-}
-
 export const toExpression = (state: State, frame: FramePublicAPI): Ast | null => {
   if (!state || !state.layers.length) {
     return null;
@@ -52,7 +30,7 @@ export const toExpression = (state: State, frame: FramePublicAPI): Ast | null =>
     });
   });
 
-  return buildExpression(state, metadata, frame, xyTitles(state.layers[0], frame));
+  return buildExpression(state, metadata, frame);
 };
 
 export function toPreviewExpression(state: State, frame: FramePublicAPI) {
@@ -99,8 +77,7 @@ export function getScaleType(metadata: OperationMetadata | null, defaultScale: S
 export const buildExpression = (
   state: State,
   metadata: Record<string, Record<string, OperationMetadata | null>>,
-  frame?: FramePublicAPI,
-  { xTitle, yTitle }: { xTitle: string; yTitle: string } = { xTitle: '', yTitle: '' }
+  frame?: FramePublicAPI
 ): Ast | null => {
   const validLayers = state.layers.filter((layer): layer is ValidLayer =>
     Boolean(layer.xAccessor && layer.accessors.length)
@@ -116,8 +93,8 @@ export const buildExpression = (
         type: 'function',
         function: 'lens_xy_chart',
         arguments: {
-          xTitle: [xTitle],
-          yTitle: [yTitle],
+          xTitle: [state.xTitle || ''],
+          yTitle: [state.yTitle || ''],
           legend: [
             {
               type: 'expression',
@@ -137,6 +114,38 @@ export const buildExpression = (
             },
           ],
           fittingFunction: [state.fittingFunction || 'None'],
+          showXAxisTitle: [state.showXAxisTitle ?? true],
+          showYAxisTitle: [state.showYAxisTitle ?? true],
+          tickLabelsVisibilitySettings: [
+            {
+              type: 'expression',
+              chain: [
+                {
+                  type: 'function',
+                  function: 'lens_xy_tickLabelsConfig',
+                  arguments: {
+                    x: [state?.tickLabelsVisibilitySettings?.x ?? true],
+                    y: [state?.tickLabelsVisibilitySettings?.y ?? true],
+                  },
+                },
+              ],
+            },
+          ],
+          gridlinesVisibilitySettings: [
+            {
+              type: 'expression',
+              chain: [
+                {
+                  type: 'function',
+                  function: 'lens_xy_gridlinesConfig',
+                  arguments: {
+                    x: [state?.gridlinesVisibilitySettings?.x ?? true],
+                    y: [state?.gridlinesVisibilitySettings?.y ?? true],
+                  },
+                },
+              ],
+            },
+          ],
           layers: validLayers.map((layer) => {
             const columnToLabel: Record<string, string> = {};