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.
 typeOrderMapping=(dataIndex: number)=>number;
 
-functioncreateClipArea(coord: CoordSysOfBar,data: SeriesData){
-constcoordSysClipArea=coord.getArea&&coord.getArea();
-if(isCoordinateSystemType<Cartesian2D>(coord,'cartesian2d')){
-constbaseAxis=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){
-constexpandWidth=data.getLayout('bandWidth');
-if(baseAxis.isHorizontal()){
-(coordSysClipAreaasCartesianCoordArea).x-=expandWidth;
-(coordSysClipAreaasCartesianCoordArea).width+=expandWidth*2;
-}
-else{
-(coordSysClipAreaasCartesianCoordArea).y-=expandWidth;
-(coordSysClipAreaasCartesianCoordArea).height+=expandWidth*2;
-}
-}
-}
-
-returncoordSysClipAreaasPolarCoordArea|CartesianCoordArea;
-}
 
 classBarViewextendsChartView{
 statictype='bar'asconst;
@@ -226,7 +199,8 @@ class BarView extends ChartView {
 }
 
 constneedsClip=seriesModel.get('clip',true)||realtimeSortCfg;
-constcoordSysClipArea=createClipArea(coord,data);
+// Both `cartesian2d` and `polar` has `getArea()`.
+constcoordSysClipArea=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`.
  */
 exportfunctioncreateBandWidthBasedAxisContainShapeHandler(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".)
+
 returnfunction(axis,scale,ecModel){
 constbandWidthResult=calcBandWidth(axis,{fromStat: {key: axisStatKey}});
 constinvRatio=bandWidthResult.invRatio;

src/component/dataZoom/AxisProxy.ts

@@ -49,6 +49,8 @@ interface MinMaxSpan {
 exportinterfaceAxisProxyWindow{
 // 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[] {
 constmargin=size/(axis.scaleasOrdinalScale).count()/2;
 extent[0]+=margin;
 extent[1]-=margin;
-
 }
 returnextent;
 }

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.
  */
 exportfunctionscaleCalcAlign(
 targetAxis: Axis,

src/coord/axisBand.ts

@@ -125,21 +125,23 @@ function calcBandWidthForCategoryAxis(
 scale: Scale
 ): void{
 constaxisExtent=axis.getExtent();
-constdataExtent=scale.getExtent();
 constpxSpan=mathAbs(axisExtent[1]-axisExtent[0]);
-constlinearScaleSpan=dataExtent[1]-dataExtent[0];
+// See the reason on BAND_WIDTH_USED_LINEAR_SCALE_SPAN.
+constlinearScaleSpan=getScaleLinearSpanForMapping(scale);
 constonBand=axis.onBand;
 
 letlen=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(
 constaxisExtent=axis.getExtent();
 // Always use a new pxSpan because it may be changed in `grid` contain label calculation.
 constpxSpan=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.
 constlinearScaleSpan=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;
 }
+
+exportfunctionisAxisOnBand(scale: Scale,axisModel: AxisBaseModel): boolean{
+returnisOrdinalScale(scale)&&!!(axisModelasAxisBaseModel<CategoryAxisBaseOption>).get('boundaryGap');
+}

src/coord/axisNiceTicks.ts

@@ -35,7 +35,8 @@ import type LogScale from '../scale/Log';
 importScalefrom'../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(
 constoldOutermostExtent=isTargetLogScale ? scale.getExtent() : null;
 constoldIntervalExtent=intervalStub.getExtent();
 
-letnewIntervalExtent=intervalScaleEnsureValidExtent(oldIntervalExtent,fixMinMax);
+letnewIntervalExtent=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.
  */
 exportfunctionscaleCalcNice(
 axisLike: {
@@ -209,6 +213,9 @@ export function scaleCalcNice(
 scaleCalcNice2(scale,model,axis,ecModel,null);
 }
 
+/**
+ * @see SCALE_EXTENT_CONSTRUCTION for the full processing flow.
+ */
 exportfunctionscaleCalcNice2(
 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';
 importCartesian2D,{cartesian2DDimensions}from'./Cartesian2D';
 importAxis2Dfrom'./Axis2D';
@@ -493,8 +494,7 @@ class Grid implements CoordinateSystemMaster {
 axisPosition
 );
 
-constisCategory=axis.type==='category';
-axis.onBand=isCategory&&(axisModelasAxisBaseModel<CategoryAxisBaseOption>).get('boundaryGap');
+axis.onBand=isAxisOnBand(axis.scale,axisModel);
 axis.inverse=axisModel.get('inverse');
 
 // Inject axis into axisModel