[Lens] [TSVB] Fixes the brushing of the last bucket for timeseries visualizations (#112068)

* Enable allowBrushingLastHistogramBucket for timeseries visualizations

* Cleanup

src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js

@@ -141,6 +141,7 @@ export const TimeSeries = ({
         debugState={window._echDebugStateFlag ?? false}
         showLegend={legend}
         showLegendExtra={true}
+        allowBrushingLastHistogramBucket={true}
         legendPosition={legendPosition}
         onBrushEnd={onBrushEndListener}
         onElementClick={(args) => handleElementClick(args)}

x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
   renderer="canvas"
 >
   <Connect(SpecInstance)
+    allowBrushingLastHistogramBucket={false}
     baseTheme={Object {}}
     debugState={false}
     legendAction={
@@ -228,6 +229,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
   renderer="canvas"
 >
   <Connect(SpecInstance)
+    allowBrushingLastHistogramBucket={false}
     baseTheme={Object {}}
     debugState={false}
     legendAction={
@@ -465,6 +467,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
   renderer="canvas"
 >
   <Connect(SpecInstance)
+    allowBrushingLastHistogramBucket={false}
     baseTheme={Object {}}
     debugState={false}
     legendAction={
@@ -702,6 +705,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
   renderer="canvas"
 >
   <Connect(SpecInstance)
+    allowBrushingLastHistogramBucket={false}
     baseTheme={Object {}}
     debugState={false}
     legendAction={
@@ -925,6 +929,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
   renderer="canvas"
 >
   <Connect(SpecInstance)
+    allowBrushingLastHistogramBucket={false}
     baseTheme={Object {}}
     debugState={false}
     legendAction={
@@ -1156,6 +1161,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
   renderer="canvas"
 >
   <Connect(SpecInstance)
+    allowBrushingLastHistogramBucket={false}
     baseTheme={Object {}}
     debugState={false}
     legendAction={
@@ -1401,6 +1407,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
   renderer="canvas"
 >
   <Connect(SpecInstance)
+    allowBrushingLastHistogramBucket={false}
     baseTheme={Object {}}
     debugState={false}
     legendAction={

x-pack/plugins/lens/public/xy_visualization/expression.test.tsx

@@ -974,7 +974,6 @@ describe('xy_expression', () => {
           }}
         />
       );
-
       wrapper.find(Settings).first().prop('onBrushEnd')!({ x: [1585757732783, 1585758880838] });
 
       expect(onSelectRange).toHaveBeenCalledWith({
@@ -1075,6 +1074,22 @@ describe('xy_expression', () => {
       expect(wrapper.find(Settings).first().prop('onBrushEnd')).toBeUndefined();
     });
 
+    test('allowBrushingLastHistogramBucket is true for date histogram data', () => {
+      const { args } = sampleArgs();
+
+      const wrapper = mountWithIntl(
+        <XYChart
+          {...defaultProps}
+          data={dateHistogramData}
+          args={{
+            ...args,
+            layers: [dateHistogramLayer],
+          }}
+        />
+      );
+      expect(wrapper.find(Settings).at(0).prop('allowBrushingLastHistogramBucket')).toEqual(true);
+    });
+
     test('onElementClick returns correct context data', () => {
       const geometry: GeometryValue = { x: 5, y: 1, accessor: 'y1', mark: null, datum: {} };
       const series = {
@@ -1335,6 +1350,36 @@ describe('xy_expression', () => {
       });
     });
 
+    test('allowBrushingLastHistogramBucket should be fakse for ordinal data', () => {
+      const { args, data } = sampleArgs();
+
+      const wrapper = mountWithIntl(
+        <XYChart
+          {...defaultProps}
+          data={data}
+          args={{
+            ...args,
+            layers: [
+              {
+                layerId: 'first',
+                layerType: layerTypes.DATA,
+                seriesType: 'line',
+                xAccessor: 'd',
+                accessors: ['a', 'b'],
+                columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}',
+                xScaleType: 'ordinal',
+                yScaleType: 'linear',
+                isHistogram: false,
+                palette: mockPaletteOutput,
+              },
+            ],
+          }}
+        />
+      );
+
+      expect(wrapper.find(Settings).at(0).prop('allowBrushingLastHistogramBucket')).toEqual(false);
+    });
+
     test('onElementClick is not triggering event on non-interactive mode', () => {
       const { args, data } = sampleArgs();
 

x-pack/plugins/lens/public/xy_visualization/expression.tsx

@@ -516,6 +516,7 @@ export function XYChart({
           boundary: document.getElementById('app-fixed-viewport') ?? undefined,
           headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
         }}
+        allowBrushingLastHistogramBucket={Boolean(isTimeViz)}
         rotation={shouldRotate ? 90 : 0}
         xDomain={xDomain}
         onBrushEnd={interactive ? brushHandler : undefined}