fix: (1) Fix: fix bar overflow issue on category axis with boundaryGap: false - use the newly added containShape handler. (2) Fix regression: Drop the previous containShape strategy on bar series, use a simple strategy for better compatibility. (3) Fix regression: Fix new added bar clip feature on single data item case. (4) Fix regression: Clarify code.

Author: 100pah

src/chart/bar/BarView.ts

@@ -93,33 +93,6 @@ type RealtimeSortConfig = {
 // Return a number, based on which the ordinal sorted.
 type OrderMapping = (dataIndex: number) => number;
 
-function createClipArea(coord: CoordSysOfBar, data: SeriesData) {
-    const coordSysClipArea = coord.getArea && coord.getArea();
-    if (isCoordinateSystemType<Cartesian2D>(coord, 'cartesian2d')) {
-        const baseAxis = coord.getBaseAxis();
-        // When boundaryGap is false in category axis, bar may exceed the grid.
-        // We should not clip this part.
-        // See test/bar2.html
-        // FIXME:
-        //  When bar series lay out on `boundaryGap: false`, the effect is not
-        //  preferable - edge bars will overflow the Cartesian area.
-        //  It may be optimized following the way used in candlestick
-        //  (using `registerAxisContainShapeHandler`).
-        if (baseAxis.type === 'category' && !baseAxis.onBand) {
-            const expandWidth = data.getLayout('bandWidth');
-            if (baseAxis.isHorizontal()) {
-                (coordSysClipArea as CartesianCoordArea).x -= expandWidth;
-                (coordSysClipArea as CartesianCoordArea).width += expandWidth * 2;
-            }
-            else {
-                (coordSysClipArea as CartesianCoordArea).y -= expandWidth;
-                (coordSysClipArea as CartesianCoordArea).height += expandWidth * 2;
-            }
-        }
-    }
-
-    return coordSysClipArea as PolarCoordArea | CartesianCoordArea;
-}
 
 class BarView extends ChartView {
     static type = 'bar' as const;
@@ -226,7 +199,8 @@ class BarView extends ChartView {
         }
 
         const needsClip = seriesModel.get('clip', true) || realtimeSortCfg;
-        const coordSysClipArea = createClipArea(coord, data);
+        // Both `cartesian2d` and `polar` has `getArea()`.
+        const coordSysClipArea = coord.getArea();
         // If there is clipPath created in large mode. Remove it.
         group.removeClipPath();
         // We don't use clipPath in normal mode because we needs a perfect animation

src/chart/helper/axisSnippets.ts

@@ -29,8 +29,21 @@ import { ComponentSubType } from '../../util/types';
 
 /**
  * Require `requireAxisStatistics`.
+ *
+ * Simply expand `Scale` extent by half bandWidth.
+ * Do nothing if an `OrdinalScale` has `boundaryGap: true`.
  */
 export function createBandWidthBasedAxisContainShapeHandler(axisStatKey: AxisStatKey): AxisContainShapeHandler {
+
+    // [AXIS_CONTAIN_SHAPE_COMMON_STRATEGY]:
+    //  The calculation below is based on a proportion mapping
+    //  from `[barsBoundVal[0], barsBoundVal[1]]` to `[minValNew, maxValNew]`:
+    //                  |------|------------------------------|---|
+    //     barsBoundVal[0]   minValOld                 maxValOld barsBoundVal[1]
+    //                         |----|----------------------|--|
+    //                  minValNew    minValOld     maxValOld maxValNew
+    //     (Note: `|---|` above represents "pixels" rather than "data".)
+
     return function (axis, scale, ecModel) {
         const bandWidthResult = calcBandWidth(axis, {fromStat: {key: axisStatKey}});
         const invRatio = bandWidthResult.invRatio;

src/component/dataZoom/AxisProxy.ts

@@ -49,6 +49,8 @@ interface MinMaxSpan {
 export interface AxisProxyWindow {
     // NOTE: May include non-effective portion.
     value: number[];
+    // Although `dataZoom` effectively calculates based on "noZoomMapMM" (where
+    // containShape is considered), `dataZoom` labels always show `noZoomEffMM`.
     noZoomEffMM: ScaleRawExtentResultForZoom['noZoomEffMM'];
     percent: number[];
     // Percent invert from "value window", which may be slightly different from "percent window" due to some
@@ -375,10 +377,10 @@ class AxisProxy {
         // `axisHelper.getScaleExtent`. But the different just affects the experience a
         // little when zooming. So it will not be fixed until some users require it strongly.
         if (percent[0] !== 0) {
-            rawExtentInfo.setZoomMinMax(0, value[0]);
+            rawExtentInfo.setZoomMM(0, value[0]);
         }
         if (percent[1] !== 100) {
-            rawExtentInfo.setZoomMinMax(1, value[1]);
+            rawExtentInfo.setZoomMM(1, value[1]);
         }
     }
 

src/coord/Axis.ts

@@ -278,7 +278,6 @@ function makeExtentWithBands(axis: Axis): number[] {
         const margin = size / (axis.scale as OrdinalScale).count() / 2;
         extent[0] += margin;
         extent[1] -= margin;
-
     }
     return extent;
 }

src/coord/axisAlignTicks.ts

@@ -38,6 +38,8 @@ import type Axis from './Axis';
 
 /**
  * NOTE: See the summary of the process of extent determination in the comment of `scaleMapper.setExtent`.
+ *
+ * @see SCALE_EXTENT_CONSTRUCTION for the full processing flow.
  */
 export function scaleCalcAlign(
     targetAxis: Axis,

src/coord/axisBand.ts

@@ -125,21 +125,23 @@ function calcBandWidthForCategoryAxis(
     scale: Scale
 ): void {
     const axisExtent = axis.getExtent();
-    const dataExtent = scale.getExtent();
     const pxSpan = mathAbs(axisExtent[1] - axisExtent[0]);
-    const linearScaleSpan = dataExtent[1] - dataExtent[0];
+    // See the reason on BAND_WIDTH_USED_LINEAR_SCALE_SPAN.
+    const linearScaleSpan = getScaleLinearSpanForMapping(scale);
     const onBand = axis.onBand;
 
     let len = linearScaleSpan + (onBand ? 1 : 0);
     // Fix #2728, avoid NaN when only one data.
     len === 0 && (len = 1);
 
     out.w = pxSpan / len;
-    if (!onBand) {
+    // NOTE:
+    //  - When `linearScaleSpan === 0`, no need to expand extent.
+    //  - `onBand: true` (`boundaryGap: true`) does not need to support `containShape`,
+    //    thereby no `invRatio`.
+    if (!onBand && linearScaleSpan && pxSpan) {
         out.invRatio = linearScaleSpan / pxSpan;
     }
-    // `onBand: true` (`boundaryGap: true`) does not need to support `containShape`,
-    // thereby no `invRatio`.
 }
 
 /**
@@ -185,7 +187,18 @@ function calcBandWidthForNumericAxis(
     const axisExtent = axis.getExtent();
     // Always use a new pxSpan because it may be changed in `grid` contain label calculation.
     const pxSpan = mathAbs(axisExtent[1] - axisExtent[0]);
+
+    // [BAND_WIDTH_USED_LINEAR_SCALE_SPAN]
+    // Here we deliberately use `getScaleLinearSpanForMapping` rather than `scale.getExtent()`,
+    // because band width should always respect to the currently specified extent (e.g., specified by
+    // `calcContainShape`). Otherwise, the result may incorrect, especially when data count is small.
+    // For example, when "containShape" is calculating, no `SCALE_EXTENT_KIND_MAPPING` is set, so here only
+    // `SCALE_EXTENT_KIND_EFFECTIVE` is returned, say, `[3, 5]`, based on which a `SCALE_EXTENT_KIND_MAPPING`
+    // is calculated, say `[2.5, 5.5]` (expanded by `0.5`). Then when rendering, that `SCALE_EXTENT_KIND_MAPPING`
+    // is returned here.
+    // See AXIS_CONTAIN_SHAPE_COMMON_STRATEGY for more details.
     const linearScaleSpan = getScaleLinearSpanForMapping(scale);
+
     // `linearScaleSpan` may be `0` or `Infinity` or `NaN`, since normalizers like
     // `intervalScaleEnsureValidExtent` may not have been called yet.
     if (isNullableNumberFinite(linearScaleSpan) && linearScaleSpan > 0

src/coord/axisCommonTypes.ts

@@ -142,6 +142,11 @@ export interface AxisBaseOptionCommon extends ComponentOption,
     breakLabelLayout?: {
         moveOverlap?: 'auto' | boolean;
     }
+
+    // The axis contains the series shapes if possible, instead of overlowing at the edges.
+    // null/undefined means `true`.
+    // Not available on category axis with `boundaryGap: true`, but available with `boundaryGap: false`.
+    containShape?: boolean;
 }
 
 /**
@@ -155,11 +160,6 @@ export interface NumericAxisBaseOptionCommon extends AxisBaseOptionCommon {
 
     boundaryGap?: NumericAxisBoundaryGapOption;
 
-    // The axis contains the series shapes if possible, instead of overlowing at the edges.
-    // Key is series type, like 'bar', 'pictorialBar'.
-    // null/undefined means `true`.
-    containShape?: boolean;
-
     /**
      * AxisTick and axisLabel and splitLine are calculated based on splitNumber.
      */

src/coord/axisHelper.ts

@@ -374,3 +374,7 @@ export function getTickValueOutermost(scale: Scale, tick: ScaleTick): number {
         ? scale.getRawOrdinalNumber(tick.value)
         : tick.value;
 }
+
+export function isAxisOnBand(scale: Scale, axisModel: AxisBaseModel): boolean {
+    return isOrdinalScale(scale) && !!(axisModel as AxisBaseModel<CategoryAxisBaseOption>).get('boundaryGap');
+}

src/coord/axisNiceTicks.ts

@@ -35,7 +35,8 @@ import type LogScale from '../scale/Log';
 import Scale from '../scale/Scale';
 import {
     adoptScaleExtentKindMapping, adoptScaleRawExtentInfoAndPrepare,
-    ScaleExtentFixMinMax
+    ScaleExtentFixMinMax,
+    ScaleRawExtentResultFinal
 } from './scaleRawExtentInfo';
 import { getScaleLinearSpanEffective } from '../scale/scaleMapper';
 import { NullUndefined } from '../util/types';
@@ -58,7 +59,7 @@ function calcNiceForIntervalOrLogScale(
     const oldOutermostExtent = isTargetLogScale ? scale.getExtent() : null;
     const oldIntervalExtent = intervalStub.getExtent();
 
-    let newIntervalExtent = intervalScaleEnsureValidExtent(oldIntervalExtent, fixMinMax);
+    let newIntervalExtent = intervalScaleEnsureValidExtent(oldIntervalExtent, fixMinMax, opt.rawExtentResult);
 
     intervalStub.setExtent(newIntervalExtent[0], newIntervalExtent[1]);
     newIntervalExtent = intervalStub.getExtent();
@@ -183,13 +184,16 @@ type ScaleCalcNiceMethodOpt = {
     minInterval?: number;
     maxInterval?: number;
     fixMinMax?: ScaleExtentFixMinMax;
+    rawExtentResult?: ScaleRawExtentResultFinal;
 };
 
 /**
  * NOTE: See the summary of the process of extent determination in the comment of `scaleMapper.setExtent`.
  *
  * Calculate a "nice" extent and "nice" ticks configs based on the current scale extent and ec options.
  * scale extent will be modified, and config may be set to the scale.
+ *
+ * @see SCALE_EXTENT_CONSTRUCTION for the full processing flow.
  */
 export function scaleCalcNice(
     axisLike: {
@@ -209,6 +213,9 @@ export function scaleCalcNice(
     scaleCalcNice2(scale, model, axis, ecModel, null);
 }
 
+/**
+ * @see SCALE_EXTENT_CONSTRUCTION for the full processing flow.
+ */
 export function scaleCalcNice2(
     scale: Scale,
     model: AxisBaseModel<NumericAxisBaseOptionCommon>,
@@ -237,12 +244,13 @@ export function scaleCalcNice2(
             splitNumber: model.get('splitNumber'),
             fixMinMax: rawExtentResult.fixMM,
             minInterval: isIntervalOrTime ? model.get('minInterval') : null,
-            maxInterval: isIntervalOrTime ? model.get('maxInterval') : null
+            maxInterval: isIntervalOrTime ? model.get('maxInterval') : null,
+            rawExtentResult
         });
     }
 
     if (axis && ecModel) {
-        adoptScaleExtentKindMapping(scale, rawExtentResult);
+        adoptScaleExtentKindMapping(axis, scale, rawExtentResult);
     }
 
     if (__DEV__) {

src/coord/cartesian/Grid.ts

@@ -38,6 +38,7 @@ import {
     SCALE_VALUE_POSITION_KIND_EDGE,
     SCALE_VALUE_POSITION_KIND_INSIDE,
     getTickValueOutermost,
+    isAxisOnBand,
 } from '../../coord/axisHelper';
 import Cartesian2D, {cartesian2DDimensions} from './Cartesian2D';
 import Axis2D from './Axis2D';
@@ -493,8 +494,7 @@ class Grid implements CoordinateSystemMaster {
                     axisPosition
                 );
 
-                const isCategory = axis.type === 'category';
-                axis.onBand = isCategory && (axisModel as AxisBaseModel<CategoryAxisBaseOption>).get('boundaryGap');
+                axis.onBand = isAxisOnBand(axis.scale, axisModel);
                 axis.inverse = axisModel.get('inverse');
 
                 // Inject axis into axisModel