fix(interactions): change allowBrushingLastHistogramBin to true

packages/charts/api/charts.api.md

@@ -1850,7 +1850,7 @@ export const Settings: React_2.FunctionComponent<SettingsSpecProps>;
 
 // @public
 export interface SettingsSpec extends Spec, LegendSpec {
-    allowBrushingLastHistogramBucket?: boolean;
+    allowBrushingLastHistogramBin?: boolean;
     // (undocumented)
     animateData: boolean;
     ariaDescribedBy?: string;

packages/charts/src/chart_types/xy_chart/state/selectors/on_brush_end_caller.ts

@@ -10,7 +10,7 @@ import { Selector } from 'reselect';
 
 import { ChartType } from '../../..';
 import { Scale } from '../../../../scales';
-import { GroupBrushExtent, XYBrushEvent } from '../../../../specs';
+import { GroupBrushExtent, SeriesSpecs, XYBrushEvent } from '../../../../specs';
 import { BrushAxis } from '../../../../specs/constants';
 import { DragState, GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
@@ -19,11 +19,13 @@ import { clamp, Rotation } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { hasDragged, DragCheckProps } from '../../../../utils/events';
 import { GroupId } from '../../../../utils/ids';
+import { isHistogramEnabled } from '../../domains/y_domain';
 import { isVerticalRotation } from '../utils/common';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
 import { computeSmallMultipleScalesSelector, SmallMultipleScales } from './compute_small_multiple_scales';
 import { getPlotAreaRestrictedPoint, getPointsConstraintToSinglePanel, PanelPoints } from './get_brush_area';
 import { getComputedScalesSelector } from './get_computed_scales';
+import { getSeriesSpecsSelector } from './get_specs';
 import { isBrushAvailableSelector } from './is_brush_available';
 import { isHistogramModeEnabledSelector } from './is_histogram_mode_enabled';
 
@@ -53,21 +55,16 @@ export function createOnBrushEndCaller(): (state: GlobalChartState) => void {
           computeChartDimensionsSelector,
           isHistogramModeEnabledSelector,
           computeSmallMultipleScalesSelector,
+          getSeriesSpecsSelector,
         ],
         (
           lastDrag,
-          {
-            onBrushEnd,
-            rotation,
-            brushAxis,
-            minBrushDelta,
-            roundHistogramBrushValues,
-            allowBrushingLastHistogramBucket,
-          },
+          { onBrushEnd, rotation, brushAxis, minBrushDelta, roundHistogramBrushValues, allowBrushingLastHistogramBin },
           computedScales,
           { chartDimensions },
           histogramMode,
           smallMultipleScales,
+          seriesSpec,
         ): void => {
           const nextProps = {
             lastDrag,
@@ -85,9 +82,10 @@ export function createOnBrushEndCaller(): (state: GlobalChartState) => void {
                 histogramMode,
                 xScale as Scale<number>,
                 smallMultipleScales,
+                allowBrushingLastHistogramBin,
+                seriesSpec,
                 minBrushDelta,
                 roundHistogramBrushValues,
-                allowBrushingLastHistogramBucket,
               );
             }
             if (brushAxis === BrushAxis.Y || brushAxis === BrushAxis.Both) {
@@ -136,9 +134,10 @@ function getXBrushExtent(
   histogramMode: boolean,
   xScale: Scale<number>,
   smallMultipleScales: SmallMultipleScales,
+  allowBrushingLastHistogramBin: boolean = true,
+  seriesSpecs: SeriesSpecs,
   minBrushDelta?: number,
   roundHistogramBrushValues?: boolean,
-  allowBrushingLastHistogramBucket?: boolean,
 ): [number, number] | undefined {
   const isXHorizontal = !isVerticalRotation(rotation);
   // scale screen coordinates down to panel scale
@@ -153,15 +152,16 @@ function getXBrushExtent(
     // if 0 size brush, avoid computing the value
     return;
   }
-
   const offset = histogramMode ? 0 : -(xScale.bandwidth + xScale.bandwidthPadding) / 2;
-  const invertValue = roundHistogramBrushValues
-    ? (value: number) => xScale.invertWithStep(value, xScale.domain).value
-    : (value: number) => xScale.invert(value);
+  const histogramEnabled = isHistogramEnabled(seriesSpecs);
+  const invertValue =
+    histogramEnabled && roundHistogramBrushValues
+      ? (value: number) => xScale.invertWithStep(value, xScale.domain).value
+      : (value: number) => xScale.invert(value);
   const minPosScaled = invertValue(minPos + offset);
   const maxPosScaled = invertValue(maxPos + offset);
-
-  const maxDomainValue = xScale.domain[1] + (allowBrushingLastHistogramBucket ? xScale.minInterval : 0);
+  const maxDomainValue =
+    xScale.domain[1] + (histogramEnabled && allowBrushingLastHistogramBin ? xScale.minInterval : 0);
 
   const minValue = clamp(minPosScaled, xScale.domain[0], maxPosScaled);
   const maxValue = clamp(minPosScaled, maxPosScaled, maxDomainValue);

packages/charts/src/specs/settings.tsx

@@ -582,16 +582,16 @@ export interface SettingsSpec extends Spec, LegendSpec {
   roundHistogramBrushValues?: boolean;
   /**
    * Boolean to allow brushing on last bucket even when outside domain or limit to end of domain.
-   *
+   * Should apply only for histogram charts
    * e.g.
    * A brush selection range of [1.23, 3.6] with a domain of [1, 2, 3]
    *
    * - when true returns [1.23, 3.6]
    * - when false returns [1.23, 3]
    *
-   * @defaultValue false
+   * @defaultValue true
    */
-  allowBrushingLastHistogramBucket?: boolean;
+  allowBrushingLastHistogramBin?: boolean;
   /**
    * Orders ordinal x values
    */

storybook/stories/interactions/10a_brush_selection_bar_hist.story.tsx

@@ -22,7 +22,7 @@ export const Example = () => (
       onBrushEnd={action('onBrushEnd')}
       rotation={getChartRotationKnob()}
       roundHistogramBrushValues={boolean('roundHistogramBrushValues', false)}
-      allowBrushingLastHistogramBucket={boolean('allowBrushingLastHistogramBucket', false)}
+      allowBrushingLastHistogramBin={boolean('allowBrushingLastHistogramBin', false)}
     />
     <Axis id="bottom" position={Position.Bottom} title="bottom" showOverlappingTicks />
     <Axis id="left" title="left" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />

storybook/stories/interactions/12_brush_time_hist.story.tsx

@@ -48,7 +48,7 @@ export const Example = () => {
         onElementClick={action('onElementClick')}
         rotation={getChartRotationKnob()}
         roundHistogramBrushValues={boolean('roundHistogramBrushValues', false)}
-        allowBrushingLastHistogramBucket={boolean('allowBrushingLastHistogramBucket', false)}
+        allowBrushingLastHistogramBin={boolean('allowBrushingLastHistogramBin', false)}
       />
       <Axis
         id="bottom"