From bc1dafc3528c8c5fb31aac2fb8e8f0029962a091 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 5 Oct 2020 13:23:53 +0200
Subject: [PATCH] make histogram brushing possible

---
 .../xy_visualization/expression.test.tsx      | 81 +++++++++++++++++++
 .../public/xy_visualization/expression.tsx    | 10 ++-
 2 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
index 405491ddc372a..27665a9cbd102 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
@@ -750,6 +750,87 @@ describe('xy_expression', () => {
       });
     });
 
+    test('onBrushEnd returns correct context data for number histogram data', () => {
+      const { args } = sampleArgs();
+
+      const numberLayer: LayerArgs = {
+        layerId: 'numberLayer',
+        hide: false,
+        xAccessor: 'xAccessorId',
+        yScaleType: 'linear',
+        xScaleType: 'linear',
+        isHistogram: true,
+        seriesType: 'bar_stacked',
+        accessors: ['yAccessorId'],
+      };
+
+      const numberHistogramData: LensMultiTable = {
+        type: 'lens_multitable',
+        tables: {
+          numberLayer: {
+            type: 'kibana_datatable',
+            rows: [
+              {
+                xAccessorId: 5,
+                yAccessorId: 1,
+              },
+              {
+                xAccessorId: 7,
+                yAccessorId: 1,
+              },
+              {
+                xAccessorId: 8,
+                yAccessorId: 1,
+              },
+              {
+                xAccessorId: 10,
+                yAccessorId: 1,
+              },
+            ],
+            columns: [
+              {
+                id: 'xAccessorId',
+                name: 'bytes',
+              },
+              {
+                id: 'yAccessorId',
+                name: 'Count of records',
+              },
+            ],
+          },
+        },
+        dateRange: {
+          fromDate: new Date('2020-04-01T16:14:16.246Z'),
+          toDate: new Date('2020-04-01T17:15:41.263Z'),
+        },
+      };
+
+      const wrapper = mountWithIntl(
+        <XYChart
+          data={numberHistogramData}
+          args={{
+            ...args,
+            layers: [numberLayer],
+          }}
+          formatFactory={getFormatSpy}
+          timeZone="UTC"
+          chartsThemeService={chartsThemeService}
+          histogramBarTarget={50}
+          onClickValue={onClickValue}
+          onSelectRange={onSelectRange}
+        />
+      );
+
+      wrapper.find(Settings).first().prop('onBrushEnd')!({ x: [5, 8] });
+
+      expect(onSelectRange).toHaveBeenCalledWith({
+        column: 0,
+        table: numberHistogramData.tables.numberLayer,
+        range: [5, 8],
+        timeFieldName: undefined,
+      });
+    });
+
     test('onElementClick returns correct context data', () => {
       const geometry: GeometryValue = { x: 5, y: 1, accessor: 'y1', mark: null, datum: {} };
       const series = {
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index a59739ec78f7f..6c4f188cd4608 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -337,6 +337,9 @@ export function XYChart({
   }
 
   const isTimeViz = data.dateRange && filteredLayers.every((l) => l.xScaleType === 'time');
+  const isHistogramViz = filteredLayers.every(
+    (l) => l.xScaleType === 'time' || l.xScaleType === 'linear'
+  );
 
   const xDomain = isTimeViz
     ? {
@@ -402,8 +405,7 @@ export function XYChart({
             return;
           }
           const [min, max] = x;
-          // in the future we want to make it also for histogram
-          if (!xAxisColumn || !isTimeViz) {
+          if (!xAxisColumn || !isHistogramViz) {
             return;
           }
 
@@ -412,7 +414,9 @@ export function XYChart({
           const xAxisColumnIndex = table.columns.findIndex(
             (el) => el.id === filteredLayers[0].xAccessor
           );
-          const timeFieldName = table.columns[xAxisColumnIndex]?.meta?.aggConfigParams?.field;
+          const timeFieldName = isTimeViz
+            ? table.columns[xAxisColumnIndex]?.meta?.aggConfigParams?.field
+            : undefined;
 
           const context: LensBrushEvent['data'] = {
             range: [min, max],