[Lens] Make histogram brushing possible (#79435)

elastic · Oct 7, 2020 · 018c2bd · 018c2bd
1 parent 8f49154
commit 018c2bd
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 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
@@ -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
@@ -337,6 +337,7 @@ export function XYChart({
   }
 
   const isTimeViz = data.dateRange && filteredLayers.every((l) => l.xScaleType === 'time');
+  const isHistogramViz = filteredLayers.every((l) => l.isHistogram);
 
   const xDomain = isTimeViz
     ? {
@@ -402,8 +403,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 +412,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],