[Lens] Allow user to drag and select a subset of the timeline in the chart (aka brush interaction)

src/plugins/embeddable/public/lib/triggers/triggers.ts

@@ -28,8 +28,9 @@ export interface EmbeddableVisTriggerContext {
   embeddable?: IEmbeddable;
   timeFieldName?: string;
   data: {
-    e?: MouseEvent;
     data: unknown;
+    e?: MouseEvent;
+    range?: string[];
   };
 }
 

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

@@ -63,6 +63,7 @@ export function createMockDatasource(id: string): DatasourceMock {
     datasourceId: id,
     getTableSpec: jest.fn(() => []),
     getOperationForColumnId: jest.fn(),
+    primaryTimeFieldName: 'timefield',
   };
 
   return {

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

@@ -55,7 +55,7 @@ export interface DraggedField {
 }
 
 export function columnToOperation(column: IndexPatternColumn, uniqueLabel?: string): Operation {
-  const { dataType, label, isBucketed, scale } = column;
+  const { dataType, label, isBucketed, scale, sourceField } = column;
   return {
     dataType: normalizeOperationDataType(dataType),
     isBucketed,
@@ -318,6 +318,8 @@ export function getIndexPatternDatasource({
           }
           return null;
         },
+        primaryTimeFieldName:
+          state.indexPatterns[state.layers[layerId].indexPatternId]?.timeFieldName,
       };
     },
     getDatasourceSuggestionsForField(state, draggedField) {

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

@@ -166,6 +166,7 @@ export interface DatasourcePublicAPI {
   datasourceId: string;
   getTableSpec: () => Array<{ columnId: string }>;
   getOperationForColumnId: (columnId: string) => Operation | null;
+  primaryTimeFieldName?: string | null;
 }
 
 export interface DatasourceDataPanelProps<T = unknown> {

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

@@ -109,6 +109,8 @@ export const buildExpression = (
     return null;
   }
 
+  const timeFieldName = frame?.datasourceLayers[validLayers[0].layerId].primaryTimeFieldName;
+
   return {
     type: 'expression',
     chain: [
@@ -118,6 +120,7 @@ export const buildExpression = (
         arguments: {
           xTitle: [xTitle],
           yTitle: [yTitle],
+          primaryTimeFieldName: timeFieldName ? [timeFieldName] : [],
           legend: [
             {
               type: 'expression',
@@ -142,7 +145,7 @@ export const buildExpression = (
                 .concat(layer.splitAccessor ? [layer.splitAccessor] : [])
                 .forEach(accessor => {
                   const operation = datasource.getOperationForColumnId(accessor);
-                  if (operation && operation.label) {
+                  if (operation?.label) {
                     columnToLabel[accessor] = operation.label;
                   }
                 });

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

@@ -208,6 +208,7 @@ export type LayerArgs = LayerConfig & {
 export interface XYArgs {
   xTitle: string;
   yTitle: string;
+  primaryTimeFieldName: string | null;
   legend: LegendConfig & { type: 'lens_xy_legendConfig' };
   layers: LayerArgs[];
 }

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

@@ -30,6 +30,145 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
 const executeTriggerActions = jest.fn();
 
+const dateHistogramData: LensMultiTable = {
+  type: 'lens_multitable',
+  tables: {
+    timeLayer: {
+      type: 'kibana_datatable',
+      rows: [
+        {
+          xAccessorId: 1585758120000,
+          splitAccessorId: "Men's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585758360000,
+          splitAccessorId: "Women's Accessories",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585758360000,
+          splitAccessorId: "Women's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585759380000,
+          splitAccessorId: "Men's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585759380000,
+          splitAccessorId: "Men's Shoes",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585759380000,
+          splitAccessorId: "Women's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585760700000,
+          splitAccessorId: "Men's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585760760000,
+          splitAccessorId: "Men's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585760760000,
+          splitAccessorId: "Men's Shoes",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585761120000,
+          splitAccessorId: "Men's Shoes",
+          yAccessorId: 1,
+        },
+      ],
+      columns: [
+        {
+          id: 'xAccessorId',
+          name: 'order_date per minute',
+          meta: {
+            type: 'date_histogram',
+            indexPatternId: 'indexPatternId',
+            aggConfigParams: {
+              field: 'order_date',
+              timeRange: { from: '2020-04-01T16:14:16.246Z', to: '2020-04-01T17:15:41.263Z' },
+              useNormalizedEsInterval: true,
+              scaleMetricValues: false,
+              interval: '1m',
+              drop_partials: false,
+              min_doc_count: 0,
+              extended_bounds: {},
+            },
+          },
+          formatHint: { id: 'date', params: { pattern: 'HH:mm' } },
+        },
+        {
+          id: 'splitAccessorId',
+          name: 'Top values of category.keyword',
+          meta: {
+            type: 'terms',
+            indexPatternId: 'indexPatternId',
+            aggConfigParams: {
+              field: 'category.keyword',
+              orderBy: 'yAccessorId',
+              order: 'desc',
+              size: 3,
+              otherBucket: false,
+              otherBucketLabel: 'Other',
+              missingBucket: false,
+              missingBucketLabel: 'Missing',
+            },
+          },
+          formatHint: {
+            id: 'terms',
+            params: {
+              id: 'string',
+              otherBucketLabel: 'Other',
+              missingBucketLabel: 'Missing',
+              parsedUrl: {
+                origin: 'http://localhost:5601',
+                pathname: '/jiy/app/kibana',
+                basePath: '/jiy',
+              },
+            },
+          },
+        },
+        {
+          id: 'yAccessorId',
+          name: 'Count of records',
+          meta: {
+            type: 'count',
+            indexPatternId: 'indexPatternId',
+            aggConfigParams: {},
+          },
+          formatHint: { id: 'number' },
+        },
+      ],
+    },
+  },
+  dateRange: {
+    fromDate: new Date('2020-04-01T16:14:16.246Z'),
+    toDate: new Date('2020-04-01T17:15:41.263Z'),
+  },
+};
+
+const dateHistogramLayer: LayerArgs = {
+  layerId: 'timeLayer',
+  hide: false,
+  xAccessor: 'xAccessorId',
+  yScaleType: 'linear',
+  xScaleType: 'time',
+  isHistogram: true,
+  splitAccessor: 'splitAccessorId',
+  seriesType: 'bar_stacked',
+  accessors: ['yAccessorId'],
+};
+
 const createSampleDatatableWithRows = (rows: KibanaDatatableRow[]): KibanaDatatable => ({
   type: 'kibana_datatable',
   columns: [
@@ -65,6 +204,7 @@ const sampleLayer: LayerArgs = {
 const createArgsWithLayers = (layers: LayerArgs[] = [sampleLayer]): XYArgs => ({
   xTitle: '',
   yTitle: '',
+  primaryTimeFieldName: null,
   legend: {
     type: 'lens_xy_legendConfig',
     isVisible: false,
@@ -441,6 +581,55 @@ describe('xy_expression', () => {
       expect(component.find(Settings).prop('rotation')).toEqual(90);
     });
 
+    test('onBrushEnd returns correct context data', () => {
+      const { args } = sampleArgs();
+
+      const wrapper = mountWithIntl(
+        <XYChart
+          data={dateHistogramData}
+          args={{
+            ...args,
+            primaryTimeFieldName: 'order_date',
+            layers: [dateHistogramLayer],
+          }}
+          formatFactory={getFormatSpy}
+          timeZone="UTC"
+          chartTheme={{}}
+          executeTriggerActions={executeTriggerActions}
+        />
+      );
+
+      wrapper
+        .find(Settings)
+        .first()
+        .prop('onBrushEnd')!(1585757732783, 1585758880838);
+
+      expect(executeTriggerActions).toHaveBeenCalledWith('SELECT_RANGE_TRIGGER', {
+        data: {
+          data: {
+            ordered: {
+              date: true,
+            },
+            series: [
+              {
+                values: expect.arrayContaining([
+                  {
+                    xRaw: {
+                      column: 0,
+                      row: 2,
+                      table: dateHistogramData.tables.timeLayer,
+                    },
+                  },
+                ]),
+              },
+            ],
+          },
+          range: ['2020-04-01T16:15:32.783Z', '2020-04-01T16:34:40.838Z'],
+        },
+        timeFieldName: 'order_date',
+      });
+    });
+
     test('onElementClick returns correct context data', () => {
       const geometry: GeometryValue = { x: 5, y: 1, accessor: 'y1' };
       const series = {
@@ -458,6 +647,7 @@ describe('xy_expression', () => {
           data={data}
           args={{
             ...args,
+            primaryTimeFieldName: 'my_time',
             layers: [
               {
                 layerId: 'first',
@@ -501,6 +691,7 @@ describe('xy_expression', () => {
             },
           ],
         },
+        timeFieldName: 'my_time',
       });
     });