[7.x] [Lens] Fitting functions (#69820)

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/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) };
+}

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(

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> = {};
 

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[];
 }
 

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss

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

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);
+ });
+ });
 });