From bbda3f99ef0d9780bcf1b9af88d26e3cc04e316e Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 3 Jul 2020 16:15:06 +0200
Subject: [PATCH] [Lens] Fitting functions (#69820)

---
 .../workspace_panel_wrapper.tsx               | 48 ++++++-----
 .../__snapshots__/to_expression.test.ts.snap  |  3 +
 .../__snapshots__/xy_expression.test.tsx.snap | 20 +++++
 .../xy_visualization/fitting_functions.ts     | 69 +++++++++++++++
 .../xy_visualization/to_expression.test.ts    | 22 +++++
 .../public/xy_visualization/to_expression.ts  |  1 +
 .../lens/public/xy_visualization/types.ts     |  3 +
 .../xy_visualization/xy_config_panel.scss     |  3 +
 .../xy_visualization/xy_config_panel.test.tsx | 54 ++++++++++--
 .../xy_visualization/xy_config_panel.tsx      | 84 ++++++++++++++++++-
 .../xy_visualization/xy_expression.test.tsx   | 62 ++++++++++++++
 .../public/xy_visualization/xy_expression.tsx | 28 ++++++-
 .../xy_visualization/xy_suggestions.test.ts   |  7 ++
 .../public/xy_visualization/xy_suggestions.ts |  1 +
 .../xy_visualization/xy_visualization.tsx     | 11 ++-
 15 files changed, 379 insertions(+), 37 deletions(-)
 create mode 100644 x-pack/plugins/lens/public/xy_visualization/fitting_functions.ts
 create mode 100644 x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
index 60c31e5d090e..f21939b3a289 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
+++ b/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) && (
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
index c037aecde558..d7d76bdd1f44 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
@@ -5,6 +5,9 @@ Object {
   "chain": Array [
     Object {
       "arguments": Object {
+        "fittingFunction": Array [
+          "Carry",
+        ],
         "layers": Array [
           Object {
             "chain": Array [
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap
index 6e87e47a5cf9..c7c173f87ad7 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap
@@ -54,6 +54,11 @@ exports[`xy_expression XYChart component it renders area 1`] = `
       ]
     }
     enableHistogramMode={false}
+    fit={
+      Object {
+        "type": "none",
+      }
+    }
     groupId="left"
     id="d-a"
     key="0-0"
@@ -93,6 +98,11 @@ exports[`xy_expression XYChart component it renders area 1`] = `
       ]
     }
     enableHistogramMode={false}
+    fit={
+      Object {
+        "type": "none",
+      }
+    }
     groupId="left"
     id="d-b"
     key="0-1"
@@ -402,6 +412,11 @@ exports[`xy_expression XYChart component it renders line 1`] = `
       ]
     }
     enableHistogramMode={false}
+    fit={
+      Object {
+        "type": "none",
+      }
+    }
     groupId="left"
     id="d-a"
     key="0-0"
@@ -441,6 +456,11 @@ exports[`xy_expression XYChart component it renders line 1`] = `
       ]
     }
     enableHistogramMode={false}
+    fit={
+      Object {
+        "type": "none",
+      }
+    }
     groupId="left"
     id="d-b"
     key="0-1"
diff --git a/x-pack/plugins/lens/public/xy_visualization/fitting_functions.ts b/x-pack/plugins/lens/public/xy_visualization/fitting_functions.ts
new file mode 100644
index 000000000000..2d2df4b7b621
--- /dev/null
+++ b/x-pack/plugins/lens/public/xy_visualization/fitting_functions.ts
@@ -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) };
+}
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
index e9e0cfed909f..31b34e41e82d 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
@@ -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(
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
index b5b796dc019d..3b9406cedd49 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
@@ -133,6 +133,7 @@ export const buildExpression = (
               ],
             },
           ],
+          fittingFunction: [state.fittingFunction || 'None'],
           layers: validLayers.map((layer) => {
             const columnToLabel: Record<string, string> = {};
 
diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts
index 8ea9683ca042..08f29c65b26d 100644
--- a/x-pack/plugins/lens/public/xy_visualization/types.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/types.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[];
 }
 
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss
new file mode 100644
index 000000000000..c353f3f370ee
--- /dev/null
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss
@@ -0,0 +1,3 @@
+.lnsXyToolbar__popover {
+  width: 400px;
+}
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
index 7544ed0f87b7..981ce1cca595 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
@@ -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);
+    });
+  });
 });
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
index e6c284f09ab4..84ea53fb4dc3 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -8,8 +8,14 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { debounce } from 'lodash';
 import {
+  EuiButtonEmpty,
   EuiButtonGroup,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSuperSelect,
   EuiFormRow,
+  EuiPopover,
+  EuiText,
   htmlIdGenerator,
   EuiForm,
   EuiColorPicker,
@@ -17,10 +23,17 @@ import {
   EuiToolTip,
   EuiIcon,
 } from '@elastic/eui';
+import {
+  VisualizationLayerWidgetProps,
+  VisualizationDimensionEditorProps,
+  VisualizationToolbarProps,
+} from '../types';
 import { State, SeriesType, visualizationTypes, YAxisMode } from './types';
-import { VisualizationDimensionEditorProps, VisualizationLayerWidgetProps } from '../types';
 import { isHorizontalChart, isHorizontalSeries, getSeriesColor } from './state_helpers';
 import { trackUiEvent } from '../lens_ui_telemetry';
+import { fittingFunctionDefinitions } from './fitting_functions';
+
+import './xy_config_panel.scss';
 
 type UnwrapArray<T> = T extends Array<infer P> ? P : T;
 
@@ -78,6 +91,75 @@ export function LayerContextMenu(props: VisualizationLayerWidgetProps<State>) {
   );
 }
 
+export function XyToolbar(props: VisualizationToolbarProps<State>) {
+  const [open, setOpen] = useState(false);
+  const hasNonBarSeries = props.state?.layers.some(
+    (layer) => layer.seriesType === 'line' || layer.seriesType === 'area'
+  );
+  return (
+    <EuiFlexGroup justifyContent="flexEnd">
+      <EuiFlexItem grow={false}>
+        <EuiPopover
+          panelClassName="lnsXyToolbar__popover"
+          button={
+            <EuiButtonEmpty
+              color="text"
+              iconType="arrowDown"
+              iconSide="right"
+              onClick={() => {
+                setOpen(!open);
+              }}
+            >
+              {i18n.translate('xpack.lens.xyChart.settingsLabel', { defaultMessage: 'Settings' })}
+            </EuiButtonEmpty>
+          }
+          isOpen={open}
+          closePopover={() => {
+            setOpen(false);
+          }}
+          anchorPosition="downRight"
+        >
+          <EuiFormRow
+            display="columnCompressed"
+            label={i18n.translate('xpack.lens.xyChart.fittingLabel', {
+              defaultMessage: 'Fill missing values',
+            })}
+            helpText={
+              !hasNonBarSeries &&
+              i18n.translate('xpack.lens.xyChart.fittingDisabledHelpText', {
+                defaultMessage:
+                  'This setting only applies to line charts and unstacked area charts.',
+              })
+            }
+          >
+            <EuiSuperSelect
+              compressed
+              disabled={!hasNonBarSeries}
+              options={fittingFunctionDefinitions.map(({ id, title, description }) => {
+                return {
+                  value: id,
+                  dropdownDisplay: (
+                    <>
+                      <strong>{title}</strong>
+                      <EuiText size="xs" color="subdued">
+                        <p>{description}</p>
+                      </EuiText>
+                    </>
+                  ),
+                  inputDisplay: title,
+                };
+              })}
+              valueOfSelected={props.state?.fittingFunction || 'None'}
+              onChange={(value) => props.setState({ ...props.state, fittingFunction: value })}
+              itemLayoutAlign="top"
+              hasDividers
+            />
+          </EuiFormRow>
+        </EuiPopover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
 const idPrefix = htmlIdGenerator()();
 
 export function DimensionEditor(props: VisualizationDimensionEditorProps<State>) {
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx
index 4a532d378eaf..b7a50b3af640 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx
@@ -15,6 +15,7 @@ import {
   GeometryValue,
   XYChartSeriesIdentifier,
   SeriesNameFn,
+  Fit,
 } from '@elastic/charts';
 import { xyChart, XYChart } from './xy_expression';
 import { LensMultiTable } from '../types';
@@ -1554,5 +1555,66 @@ describe('xy_expression', () => {
 
       expect(component.find(Settings).prop('showLegend')).toEqual(true);
     });
+
+    test('it should apply the fitting function to all non-bar series', () => {
+      const data: LensMultiTable = {
+        type: 'lens_multitable',
+        tables: {
+          first: createSampleDatatableWithRows([
+            { a: 1, b: 2, c: 'I', d: 'Foo' },
+            { a: 1, b: 5, c: 'J', d: 'Bar' },
+          ]),
+        },
+      };
+
+      const args: XYArgs = createArgsWithLayers([
+        { ...sampleLayer, accessors: ['a'] },
+        { ...sampleLayer, seriesType: 'bar', accessors: ['a'] },
+        { ...sampleLayer, seriesType: 'area', accessors: ['a'] },
+        { ...sampleLayer, seriesType: 'area_stacked', accessors: ['a'] },
+      ]);
+
+      const component = shallow(
+        <XYChart
+          data={{ ...data }}
+          args={{ ...args, fittingFunction: 'Carry' }}
+          formatFactory={getFormatSpy}
+          timeZone="UTC"
+          chartsThemeService={chartsThemeService}
+          histogramBarTarget={50}
+          onClickValue={onClickValue}
+          onSelectRange={onSelectRange}
+        />
+      );
+
+      expect(component.find(LineSeries).prop('fit')).toEqual({ type: Fit.Carry });
+      expect(component.find(BarSeries).prop('fit')).toEqual(undefined);
+      expect(component.find(AreaSeries).at(0).prop('fit')).toEqual({ type: Fit.Carry });
+      expect(component.find(AreaSeries).at(0).prop('stackAccessors')).toEqual([]);
+      // stacked area series doesn't get the fit prop
+      expect(component.find(AreaSeries).at(1).prop('fit')).toEqual(undefined);
+      expect(component.find(AreaSeries).at(1).prop('stackAccessors')).toEqual(['c']);
+    });
+
+    test('it should apply None fitting function if not specified', () => {
+      const { data, args } = sampleArgs();
+
+      args.layers[0].accessors = ['a'];
+
+      const component = shallow(
+        <XYChart
+          data={{ ...data }}
+          args={{ ...args }}
+          formatFactory={getFormatSpy}
+          timeZone="UTC"
+          chartsThemeService={chartsThemeService}
+          histogramBarTarget={50}
+          onClickValue={onClickValue}
+          onSelectRange={onSelectRange}
+        />
+      );
+
+      expect(component.find(LineSeries).prop('fit')).toEqual({ type: Fit.None });
+    });
   });
 });
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
index 3e5fb10e080d..3ab12aa0879b 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
@@ -40,6 +40,7 @@ import { parseInterval } from '../../../../../src/plugins/data/common';
 import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 import { EmptyPlaceholder } from '../shared_components';
 import { desanitizeFilterContext } from '../utils';
+import { fittingFunctionDefinitions, getFitOptions } from './fitting_functions';
 import { getAxesConfiguration } from './axes_configuration';
 
 type InferPropType<T> = T extends React.FunctionComponent<infer P> ? P : T;
@@ -94,6 +95,13 @@ export const xyChart: ExpressionFunctionDefinition<
         defaultMessage: 'Configure the chart legend.',
       }),
     },
+    fittingFunction: {
+      types: ['string'],
+      options: [...fittingFunctionDefinitions.map(({ id }) => id)],
+      help: i18n.translate('xpack.lens.xyChart.fittingFunction.help', {
+        defaultMessage: 'Define how missing values are treated',
+      }),
+    },
     layers: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       types: ['lens_xy_layer'] as any,
@@ -191,7 +199,7 @@ export function XYChart({
   onClickValue,
   onSelectRange,
 }: XYChartRenderProps) {
-  const { legend, layers } = args;
+  const { legend, layers, fittingFunction } = args;
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
 
@@ -463,7 +471,7 @@ export function XYChart({
               }
               // This handles both split and single-y cases:
               // * If split series without formatting, show the value literally
-              // * If single Y, the seriesKey will be the acccessor, so we show the human-readable name
+              // * If single Y, the seriesKey will be the accessor, so we show the human-readable name
               return splitAccessor ? d.seriesKeys[0] : columnToLabelMap[d.seriesKeys[0]] ?? '';
             },
           };
@@ -472,17 +480,29 @@ export function XYChart({
 
           switch (seriesType) {
             case 'line':
-              return <LineSeries key={index} {...seriesProps} />;
+              return (
+                <LineSeries key={index} {...seriesProps} fit={getFitOptions(fittingFunction)} />
+              );
             case 'bar':
             case 'bar_stacked':
             case 'bar_horizontal':
             case 'bar_horizontal_stacked':
               return <BarSeries key={index} {...seriesProps} />;
-            default:
+            case 'area_stacked':
               return <AreaSeries key={index} {...seriesProps} />;
+            case 'area':
+              return (
+                <AreaSeries key={index} {...seriesProps} fit={getFitOptions(fittingFunction)} />
+              );
+            default:
+              return assertNever(seriesType);
           }
         })
       )}
     </Chart>
   );
 }
+
+function assertNever(x: never): never {
+  throw new Error('Unexpected series type: ' + x);
+}
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
index c107d8d36824..f30120635506 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
@@ -331,6 +331,7 @@ describe('xy_suggestions', () => {
   test('makes a visible seriesType suggestion for unchanged table without split', () => {
     const currentState: XYState = {
       legend: { isVisible: true, position: 'bottom' },
+      fittingFunction: 'None',
       preferredSeriesType: 'bar',
       layers: [
         {
@@ -368,6 +369,7 @@ describe('xy_suggestions', () => {
     const currentState: XYState = {
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
+      fittingFunction: 'None',
       layers: [
         {
           accessors: ['price', 'quantity'],
@@ -408,6 +410,7 @@ describe('xy_suggestions', () => {
     (generateId as jest.Mock).mockReturnValueOnce('dummyCol');
     const currentState: XYState = {
       legend: { isVisible: true, position: 'bottom' },
+      fittingFunction: 'None',
       preferredSeriesType: 'bar',
       layers: [
         {
@@ -440,6 +443,7 @@ describe('xy_suggestions', () => {
     const currentState: XYState = {
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
+      fittingFunction: 'None',
       layers: [
         {
           accessors: ['price'],
@@ -474,6 +478,7 @@ describe('xy_suggestions', () => {
     const currentState: XYState = {
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
+      fittingFunction: 'None',
       layers: [
         {
           accessors: ['price', 'quantity'],
@@ -512,6 +517,7 @@ describe('xy_suggestions', () => {
     const currentState: XYState = {
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
+      fittingFunction: 'None',
       layers: [
         {
           accessors: ['price'],
@@ -551,6 +557,7 @@ describe('xy_suggestions', () => {
     const currentState: XYState = {
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
+      fittingFunction: 'None',
       layers: [
         {
           accessors: ['price', 'quantity'],
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
index 9d0ebbb389c0..e0bfbd266f8f 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
@@ -402,6 +402,7 @@ function buildSuggestion({
 
   const state: State = {
     legend: currentState ? currentState.legend : { isVisible: true, position: Position.Right },
+    fittingFunction: currentState?.fittingFunction || 'None',
     preferredSeriesType: seriesType,
     layers: [...keptLayers, newLayer],
   };
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
index d38f51cb1621..f321e0962caa 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
@@ -11,7 +11,7 @@ import { Position } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { getSuggestions } from './xy_suggestions';
-import { DimensionEditor, LayerContextMenu } from './xy_config_panel';
+import { LayerContextMenu, XyToolbar, DimensionEditor } from './xy_config_panel';
 import { Visualization, OperationMetadata, VisualizationType } from '../types';
 import { State, PersistableState, SeriesType, visualizationTypes, LayerConfig } from './types';
 import chartBarStackedSVG from '../assets/chart_bar_stacked.svg';
@@ -264,6 +264,15 @@ export const xyVisualization: Visualization<State, PersistableState> = {
     );
   },
 
+  renderToolbar(domElement, props) {
+    render(
+      <I18nProvider>
+        <XyToolbar {...props} />
+      </I18nProvider>,
+      domElement
+    );
+  },
+
   renderDimensionEditor(domElement, props) {
     render(
       <I18nProvider>