[Lens] Fitting functions (elastic#69820)

Author: flash1293

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx

@@ -68,29 +68,33 @@ export function WorkspacePanelWrapper({
   return (
     <EuiFlexGroup gutterSize="s" direction="column" alignItems="stretch" responsive={false}>
       <EuiFlexItem grow={false}>
-        <ChartSwitch
-          data-test-subj="lnsChartSwitcher"
-          visualizationMap={visualizationMap}
-          visualizationId={visualizationId}
-          visualizationState={visualizationState}
-          datasourceMap={datasourceMap}
-          datasourceStates={datasourceStates}
-          dispatch={dispatch}
-          framePublicAPI={framePublicAPI}
-        />
+        <EuiFlexGroup gutterSize="s" direction="row" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <ChartSwitch
+              data-test-subj="lnsChartSwitcher"
+              visualizationMap={visualizationMap}
+              visualizationId={visualizationId}
+              visualizationState={visualizationState}
+              datasourceMap={datasourceMap}
+              datasourceStates={datasourceStates}
+              dispatch={dispatch}
+              framePublicAPI={framePublicAPI}
+            />
+          </EuiFlexItem>
+          {activeVisualization && activeVisualization.renderToolbar && (
+            <EuiFlexItem grow>
+              <NativeRenderer
+                render={activeVisualization.renderToolbar}
+                nativeProps={{
+                  frame: framePublicAPI,
+                  state: visualizationState,
+                  setState: setVisualizationState,
+                }}
+              />
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
       </EuiFlexItem>
-      {activeVisualization && activeVisualization.renderToolbar && (
-        <EuiFlexItem grow={false}>
-          <NativeRenderer
-            render={activeVisualization.renderToolbar}
-            nativeProps={{
-              frame: framePublicAPI,
-              state: visualizationState,
-              setState: setVisualizationState,
-            }}
-          />
-        </EuiFlexItem>
-      )}
       <EuiFlexItem>
         <EuiPageContent className="lnsWorkspacePanelWrapper">
           {(!emptyExpression || title) && (

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

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Fit } from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
+
+export type FittingFunction = typeof fittingFunctionDefinitions[number]['id'];
+
+export const fittingFunctionDefinitions = [
+  {
+    id: 'None',
+    title: i18n.translate('xpack.lens.fittingFunctionsTitle.none', {
+      defaultMessage: 'Hide',
+    }),
+    description: i18n.translate('xpack.lens.fittingFunctionsDescription.none', {
+      defaultMessage: 'Do not fill gaps',
+    }),
+  },
+  {
+    id: 'Zero',
+    title: i18n.translate('xpack.lens.fittingFunctionsTitle.zero', {
+      defaultMessage: 'Zero',
+    }),
+    description: i18n.translate('xpack.lens.fittingFunctionsDescription.zero', {
+      defaultMessage: 'Fill gaps with zeros',
+    }),
+  },
+  {
+    id: 'Linear',
+    title: i18n.translate('xpack.lens.fittingFunctionsTitle.linear', {
+      defaultMessage: 'Linear',
+    }),
+    description: i18n.translate('xpack.lens.fittingFunctionsDescription.linear', {
+      defaultMessage: 'Fill gaps with a line',
+    }),
+  },
+  {
+    id: 'Carry',
+    title: i18n.translate('xpack.lens.fittingFunctionsTitle.carry', {
+      defaultMessage: 'Last',
+    }),
+    description: i18n.translate('xpack.lens.fittingFunctionsDescription.carry', {
+      defaultMessage: 'Fill gaps with the last value',
+    }),
+  },
+  {
+    id: 'Lookahead',
+    title: i18n.translate('xpack.lens.fittingFunctionsTitle.lookahead', {
+      defaultMessage: 'Next',
+    }),
+    description: i18n.translate('xpack.lens.fittingFunctionsDescription.lookahead', {
+      defaultMessage: 'Fill gaps with the next value',
+    }),
+  },
+] as const;
+
+export function getFitEnum(fittingFunction?: FittingFunction) {
+  if (fittingFunction) {
+    return Fit[fittingFunction];
+  }
+  return Fit.None;
+}
+
+export function getFitOptions(fittingFunction?: FittingFunction) {
+  return { type: getFitEnum(fittingFunction) };
+}

x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap

@@ -40,6 +40,7 @@ describe('#toExpression', () => {
         {
           legend: { position: Position.Bottom, isVisible: true },
           preferredSeriesType: 'bar',
+          fittingFunction: 'Carry',
           layers: [
             {
               layerId: 'first',
@@ -55,6 +56,27 @@ describe('#toExpression', () => {
     ).toMatchSnapshot();
   });
 
+  it('should default the fitting function to None', () => {
+    expect(
+      (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).chain[0].arguments.fittingFunction[0]
+    ).toEqual('None');
+  });
+
   it('should not generate an expression when missing x', () => {
     expect(
       xyVisualization.toExpression(

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

@@ -133,6 +133,7 @@ export const buildExpression = (
               ],
             },
           ],
+          fittingFunction: [state.fittingFunction || 'None'],
           layers: validLayers.map((layer) => {
             const columnToLabel: Record<string, string> = {};
 

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

@@ -16,6 +16,7 @@ import chartBarHorizontalStackedSVG from '../assets/chart_bar_horizontal_stacked
 import chartLineSVG from '../assets/chart_line.svg';
 
 import { VisualizationType } from '../index';
+import { FittingFunction } from './fitting_functions';
 
 export interface LegendConfig {
   isVisible: boolean;
@@ -225,12 +226,14 @@ export interface XYArgs {
   yTitle: string;
   legend: LegendConfig & { type: 'lens_xy_legendConfig' };
   layers: LayerArgs[];
+  fittingFunction?: FittingFunction;
 }
 
 // Persisted parts of the state
 export interface XYState {
   preferredSeriesType: SeriesType;
   legend: LegendConfig;
+  fittingFunction?: FittingFunction;
   layers: LayerConfig[];
 }
 

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

@@ -0,0 +1,3 @@
+.lnsXyToolbar__popover {
+  width: 400px;
+}

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

@@ -5,15 +5,15 @@
  */
 
 import React from 'react';
-import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
-import { EuiButtonGroupProps } from '@elastic/eui';
-import { LayerContextMenu } from './xy_config_panel';
+import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
+import { EuiButtonGroupProps, EuiSuperSelect } from '@elastic/eui';
+import { LayerContextMenu, XyToolbar } from './xy_config_panel';
 import { FramePublicAPI } from '../types';
 import { State } from './types';
 import { Position } from '@elastic/charts';
 import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks';
 
-describe('LayerContextMenu', () => {
+describe('XY Config panels', () => {
   let frame: FramePublicAPI;
 
   function testState(): State {
@@ -39,11 +39,6 @@ describe('LayerContextMenu', () => {
     };
   });
 
-  test.skip('allows toggling of legend visibility', () => {});
-  test.skip('allows changing legend position', () => {});
-  test.skip('allows toggling the y axis gridlines', () => {});
-  test.skip('allows toggling the x axis gridlines', () => {});
-
   describe('LayerContextMenu', () => {
     test('enables stacked chart types even when there is no split series', () => {
       const state = testState();
@@ -92,4 +87,45 @@ describe('LayerContextMenu', () => {
       expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
     });
   });
+
+  describe('XyToolbar', () => {
+    it('should show currently selected fitting function', () => {
+      const state = testState();
+
+      const component = shallow(
+        <XyToolbar
+          frame={frame}
+          setState={jest.fn()}
+          state={{
+            ...state,
+            layers: [{ ...state.layers[0], seriesType: 'line' }],
+            fittingFunction: 'Carry',
+          }}
+        />
+      );
+
+      expect(component.find(EuiSuperSelect).prop('valueOfSelected')).toEqual('Carry');
+    });
+
+    it('should disable the select if there is no unstacked area or line series', () => {
+      const state = testState();
+
+      const component = shallow(
+        <XyToolbar
+          frame={frame}
+          setState={jest.fn()}
+          state={{
+            ...state,
+            layers: [
+              { ...state.layers[0], seriesType: 'bar' },
+              { ...state.layers[0], seriesType: 'area_stacked' },
+            ],
+            fittingFunction: 'Carry',
+          }}
+        />
+      );
+
+      expect(component.find(EuiSuperSelect).prop('disabled')).toEqual(true);
+    });
+  });
 });