[Lens] Add xy split series support

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx

@@ -14,12 +14,16 @@ import {
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { Operation, DataType } from '../types';
+import * as generator from '../id_generator';
+import { mockGeneratedIds } from '../id_generator/mock';
+
+jest.mock('../id_generator');
 
 describe('Datatable Visualization', () => {
   describe('#initialize', () => {
     it('should initialize from the empty state', () => {
       const datasource = createMockDatasource();
-      datasource.publicAPIMock.generateColumnId.mockReturnValueOnce('id');
+      mockGeneratedIds(generator, 'id');
       expect(datatableVisualization.initialize(datasource.publicAPIMock)).toEqual({
         columns: [{ id: 'id', label: '' }],
       });
@@ -30,7 +34,6 @@ describe('Datatable Visualization', () => {
       const expectedState: DatatableVisualizationState = {
         columns: [{ id: 'saved', label: 'label' }],
       };
-      expect(datasource.publicAPIMock.generateColumnId).not.toHaveBeenCalled();
       expect(datatableVisualization.initialize(datasource.publicAPIMock, expectedState)).toEqual(
         expectedState
       );
@@ -138,7 +141,7 @@ describe('Datatable Visualization', () => {
         />
       );
 
-      datasource.publicAPIMock.generateColumnId.mockReturnValueOnce('newId');
+      mockGeneratedIds(generator, 'newId');
 
       act(() => {
         wrapper

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx

@@ -24,6 +24,7 @@ import {
   VisualizationSuggestion,
 } from '../types';
 import { NativeRenderer } from '../native_renderer';
+import { generateId } from '../id_generator';
 
 export interface DatatableVisualizationState {
   columns: Array<{
@@ -117,7 +118,7 @@ export function DatatableConfigPanel(props: VisualizationProps<DatatableVisualiz
           onClick={() => {
             const newColumns = [...state.columns];
             newColumns.push({
-              id: datasource.generateColumnId(),
+              id: generateId(),
               label: '',
             });
             setState({
@@ -141,7 +142,7 @@ export const datatableVisualization: Visualization<
       state || {
         columns: [
           {
-            id: datasource.generateColumnId(),
+            id: generateId(),
             label: '',
           },
         ],

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx

@@ -446,7 +446,6 @@ Object {
         setDatasourceState(updatedState);
       });
 
-      expect(mockDatasource.getPublicAPI).toHaveBeenCalledTimes(2);
       expect(mockDatasource.getPublicAPI).toHaveBeenLastCalledWith(
         updatedState,
         expect.any(Function)

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx

@@ -6,7 +6,6 @@
 
 import React, { useState, useEffect } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-
 import { EuiIcon, EuiTitle, EuiPanel, EuiIconTip } from '@elastic/eui';
 import { toExpression } from '@kbn/interpreter/common';
 import { i18n } from '@kbn/i18n';

x-pack/legacy/plugins/lens/public/editor_frame_plugin/mocks.tsx

@@ -27,7 +27,6 @@ export function createMockDatasource(): DatasourceMock {
   const publicAPIMock: jest.Mocked<DatasourcePublicAPI> = {
     getTableSpec: jest.fn(() => []),
     getOperationForColumnId: jest.fn(),
-    generateColumnId: jest.fn(),
     renderDimensionPanel: jest.fn(),
     removeColumnInTableSpec: jest.fn(),
     moveColumnTo: jest.fn(),

x-pack/legacy/plugins/lens/public/id_generator/id_generator.test.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { generateId } from './id_generator';
+
+describe('XYConfigPanel', () => {
+  it('generates different ids', () => {
+    expect(generateId()).not.toEqual(generateId());
+  });
+});

x-pack/legacy/plugins/lens/public/id_generator/id_generator.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 uuid from 'uuid/v4';
+
+export function generateId() {
+  return uuid();
+}

x-pack/legacy/plugins/lens/public/id_generator/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export * from './id_generator';

x-pack/legacy/plugins/lens/public/id_generator/mock.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export function mockGeneratedIds(generator: { generateId: () => string }, ...ids: string[]) {
+  const mock = jest.spyOn(generator, 'generateId');
+  ids.forEach(id => mock.mockReturnValueOnce(id));
+}

x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx

@@ -10,7 +10,6 @@ import { render } from 'react-dom';
 import { Chrome } from 'ui/chrome';
 import { ToastNotifications } from 'ui/notify/toasts/toast_notifications';
 import { EuiComboBox } from '@elastic/eui';
-import uuid from 'uuid';
 import { Datasource, DataType } from '..';
 import {
   DatasourceDimensionPanelProps,
@@ -262,11 +261,6 @@ export function getIndexPatternDatasource(chrome: Chrome, toastNotifications: To
           }
           return columnToOperation(state.columns[columnId]);
         },
-        generateColumnId: () => {
-          // TODO: Come up with a more compact form of generating unique column ids
-          return uuid.v4();
-        },
-
         renderDimensionPanel: (domElement: Element, props: DatasourceDimensionPanelProps) => {
           render(
             <IndexPatternDimensionPanel

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

@@ -69,7 +69,6 @@ export interface Datasource<T = unknown, P = unknown> {
 export interface DatasourcePublicAPI {
   getTableSpec: () => TableSpec;
   getOperationForColumnId: (columnId: string) => Operation | null;
-  generateColumnId: () => string;
 
   // Render can be called many times
   renderDimensionPanel: (domElement: Element, props: DatasourceDimensionPanelProps) => void;

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx

@@ -12,6 +12,10 @@ import { DatasourcePublicAPI, DatasourceDimensionPanelProps, Operation } from '.
 import { State, SeriesType } from './types';
 import { Position } from '@elastic/charts';
 import { NativeRendererProps } from '../native_renderer';
+import * as generator from '../id_generator';
+import { mockGeneratedIds } from '../id_generator/mock';
+
+jest.mock('../id_generator');
 
 describe('XYConfigPanel', () => {
   const dragDropContext = { dragging: undefined, setDragging: jest.fn() };
@@ -20,7 +24,6 @@ describe('XYConfigPanel', () => {
     return {
       duplicateColumn: () => [],
       getOperationForColumnId: () => null,
-      generateColumnId: () => 'TESTID',
       getTableSpec: () => [],
       moveColumnTo: () => {},
       removeColumnInTableSpec: () => [],
@@ -357,12 +360,13 @@ describe('XYConfigPanel', () => {
   });
 
   test('allows adding y dimensions', () => {
+    mockGeneratedIds(generator, 'zed');
     const setState = jest.fn();
     const state = testState();
     const component = mount(
       <XYConfigPanel
         dragDropContext={dragDropContext}
-        datasource={{ ...mockDatasource(), generateColumnId: () => 'zed' }}
+        datasource={mockDatasource()}
         setState={setState}
         state={{ ...state, y: { ...state.y, accessors: ['a', 'b', 'c'] } }}
       />
@@ -376,6 +380,27 @@ describe('XYConfigPanel', () => {
     });
   });
 
+  test('allows adding split dimensions', () => {
+    mockGeneratedIds(generator, 'foo');
+    const setState = jest.fn();
+    const state = testState();
+    const component = mount(
+      <XYConfigPanel
+        dragDropContext={dragDropContext}
+        datasource={mockDatasource()}
+        setState={setState}
+        state={{ ...state, splitSeriesAccessors: ['a', 'b', 'c'] }}
+      />
+    );
+
+    (testSubj(component, 'lnsXY_splitSeriesDimensionPanel_add').onClick as Function)();
+
+    expect(setState).toHaveBeenCalledTimes(1);
+    expect(setState.mock.calls[0][0]).toMatchObject({
+      splitSeriesAccessors: ['a', 'b', 'c', 'foo'],
+    });
+  });
+
   test('allows toggling the y axis gridlines', () => {
     const toggleYGridlines = (showGridlines: boolean) => {
       const setState = jest.fn();

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx

@@ -20,6 +20,7 @@ import {
 import { State, SeriesType } from './types';
 import { VisualizationProps, Operation } from '../types';
 import { NativeRenderer } from '../native_renderer';
+import { generateId } from '../id_generator';
 
 const chartTypeIcons: Array<{ id: SeriesType; label: string; iconType: IconType }> = [
   {
@@ -161,6 +162,37 @@ export function XYConfigPanel(props: VisualizationProps<State>) {
         </EuiFormRow>
       )}
 
+      <EuiFormRow
+        label={i18n.translate('xpack.lens.xyChart.splitSeries', {
+          defaultMessage: 'Split series',
+        })}
+      >
+        <>
+          {state.splitSeriesAccessors.map(columnId => (
+            <NativeRenderer
+              data-test-subj="lnsXY_splitDimensionPanel"
+              render={datasource.renderDimensionPanel}
+              nativeProps={{
+                columnId,
+                dragDropContext: props.dragDropContext,
+                filterOperations: (op: Operation) => op.isBucketed === true,
+                suggestedPriority: 0,
+              }}
+            />
+          ))}
+          <EuiButton
+            data-test-subj="lnsXY_splitSeriesDimensionPanel_add"
+            onClick={() =>
+              setState({
+                ...state,
+                splitSeriesAccessors: [...state.splitSeriesAccessors, generateId()],
+              })
+            }
+            iconType="plusInCircle"
+          />
+        </>
+      </EuiFormRow>
+
       <EuiFormRow
         label={i18n.translate('xpack.lens.xyChart.xAxisLabel', {
           defaultMessage: 'X Axis',
@@ -287,7 +319,7 @@ export function XYConfigPanel(props: VisualizationProps<State>) {
                     ...state,
                     y: {
                       ...state.y,
-                      accessors: [...state.y.accessors, datasource.generateColumnId()],
+                      accessors: [...state.y.accessors, generateId()],
                     },
                   })
                 }

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts

@@ -8,6 +8,10 @@ import { getSuggestions } from './xy_suggestions';
 import { TableColumn, VisualizationSuggestion } from '../types';
 import { State } from './types';
 import { Ast } from '@kbn/interpreter/target/common';
+import * as generator from '../id_generator';
+import { mockGeneratedIds } from '../id_generator/mock';
+
+jest.mock('../id_generator');
 
 describe('xy_suggestions', () => {
   function numCol(columnId: string): TableColumn {
@@ -88,6 +92,7 @@ describe('xy_suggestions', () => {
   });
 
   test('suggests a basic x y chart with date on x', () => {
+    mockGeneratedIds(generator, 'aaa');
     const [suggestion, ...rest] = getSuggestions({
       tables: [
         {
@@ -102,7 +107,9 @@ describe('xy_suggestions', () => {
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
 Object {
   "seriesType": "line",
-  "splitSeriesAccessors": Array [],
+  "splitSeriesAccessors": Array [
+    "aaa",
+  ],
   "stackAccessors": Array [],
   "x": "date",
   "y": Array [
@@ -141,6 +148,7 @@ Object {
   });
 
   test('supports multiple suggestions', () => {
+    mockGeneratedIds(generator, 'bbb', 'ccc');
     const [s1, s2, ...rest] = getSuggestions({
       tables: [
         {
@@ -161,7 +169,9 @@ Object {
 Array [
   Object {
     "seriesType": "line",
-    "splitSeriesAccessors": Array [],
+    "splitSeriesAccessors": Array [
+      "bbb",
+    ],
     "stackAccessors": Array [],
     "x": "date",
     "y": Array [
@@ -170,7 +180,9 @@ Array [
   },
   Object {
     "seriesType": "bar",
-    "splitSeriesAccessors": Array [],
+    "splitSeriesAccessors": Array [
+      "ccc",
+    ],
     "stackAccessors": Array [],
     "x": "country",
     "y": Array [
@@ -182,6 +194,7 @@ Array [
   });
 
   test('handles two numeric values', () => {
+    mockGeneratedIds(generator, 'ddd');
     const [suggestion] = getSuggestions({
       tables: [
         {
@@ -195,7 +208,9 @@ Array [
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
 Object {
   "seriesType": "bar",
-  "splitSeriesAccessors": Array [],
+  "splitSeriesAccessors": Array [
+    "ddd",
+  ],
   "stackAccessors": Array [],
   "x": "quantity",
   "y": Array [
@@ -206,6 +221,7 @@ Object {
   });
 
   test('handles unbucketed suggestions', () => {
+    mockGeneratedIds(generator, 'eee');
     const [suggestion] = getSuggestions({
       tables: [
         {
@@ -230,7 +246,9 @@ Object {
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
 Object {
   "seriesType": "bar",
-  "splitSeriesAccessors": Array [],
+  "splitSeriesAccessors": Array [
+    "eee",
+  ],
   "stackAccessors": Array [],
   "x": "mybool",
   "y": Array [

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts

@@ -8,6 +8,7 @@ import { partition } from 'lodash';
 import { Position } from '@elastic/charts';
 import { SuggestionRequest, VisualizationSuggestion, TableColumn, TableSuggestion } from '../types';
 import { State } from './types';
+import { generateId } from '../id_generator';
 import { buildExpression } from './to_expression';
 
 const columnSortOrder = {
@@ -80,7 +81,7 @@ function getSuggestion(
     title,
     legend: { isVisible: true, position: Position.Right },
     seriesType: isDate ? 'line' : 'bar',
-    splitSeriesAccessors: splitBy && isDate ? [splitBy.columnId] : [],
+    splitSeriesAccessors: splitBy && isDate ? [splitBy.columnId] : [generateId()],
     stackAccessors: splitBy && !isDate ? [splitBy.columnId] : [],
     x: {
       accessor: xValue.columnId,