Merge branch '7.x' into backport/7.x/pr-70031

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,16 +4,15 @@ Summarize your PR. If it involves visual changes include a screenshot or gif.
 
 ### Checklist
 
-Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.
+Delete any items that are not applicable to this PR.
 
-- [ ] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)
 - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)
 - [ ] [Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials
 - [ ] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios
 - [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)
+- [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)
+- [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
 
 ### For maintainers
 
 - [ ] This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)
-- [ ] This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)
-

package.json

@@ -120,7 +120,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
     "@babel/register": "^7.10.1",
     "@elastic/apm-rum": "^5.2.0",
-    "@elastic/charts": "19.6.3",
+    "@elastic/charts": "19.7.0",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
     "@elastic/eui": "24.1.0",

packages/kbn-ui-shared-deps/package.json

@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --dev --watch"
   },
   "dependencies": {
-    "@elastic/charts": "19.6.3",
+    "@elastic/charts": "19.7.0",
     "@elastic/eui": "24.1.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",

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