fix(axis): fix axis label may have inappropriate precision or take too much unexpected space when alignTicks is enabled

src/chart/bar/BarView.ts

@@ -92,14 +92,15 @@ type RealtimeSortConfig = {
 // Return a number, based on which the ordinal sorted.
 type OrderMapping = (dataIndex: number) => number;
 
-function getClipArea(coord: CoordSysOfBar, data: SeriesData, strictClip?: boolean) {
+function getClipArea(coord: CoordSysOfBar, data: SeriesData) {
     const coordSysClipArea = coord.getArea && coord.getArea();
     if (isCoordinateSystemType<Cartesian2D>(coord, 'cartesian2d')) {
         const baseAxis = coord.getBaseAxis();
-        // When boundaryGap is false or using time axis. bar may exceed the grid.
+        // When boundaryGap is false in category axis, bar may exceed the grid.
         // We should not clip this part.
         // See test/bar2.html
-        if (!strictClip && (baseAxis.type !== 'category' || !baseAxis.onBand)) {
+        // PENDING: The effect is not preferable, but we preserve it for backward compatibility.
+        if (baseAxis.type === 'category' && !baseAxis.onBand) {
             const expandWidth = data.getLayout('bandWidth');
             if (baseAxis.isHorizontal()) {
                 (coordSysClipArea as CartesianCoordArea).x -= expandWidth;
@@ -220,12 +221,12 @@ class BarView extends ChartView {
         }
 
         const needsClip = seriesModel.get('clip', true) || realtimeSortCfg;
-        const strictClip = seriesModel.get('clip', true);
-        const coordSysClipArea = getClipArea(coord, data, strictClip);
+        const coordSysClipArea = getClipArea(coord, data);
         // 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
         // And don't want the label are clipped.
+        // Instead, `Clipper` is used in normal mode.
 
         const roundCap = seriesModel.get('roundCap', true);
 

src/chart/bar/install.ts

@@ -19,7 +19,7 @@
 
 import { EChartsExtensionInstallRegisters } from '../../extension';
 import * as zrUtil from 'zrender/src/core/util';
-import {layout, createProgressiveLayout} from '../../layout/barGrid';
+import {layout, createProgressiveLayout, registerBarGridAxisHandlers} from '../../layout/barGrid';
 import dataSample from '../../processor/dataSample';
 
 import BarSeries from './BarSeries';
@@ -67,4 +67,5 @@ export function install(registers: EChartsExtensionInstallRegisters) {
         );
     });
 
+    registerBarGridAxisHandlers(registers);
 }

src/chart/bar/installPictorialBar.ts

@@ -20,7 +20,7 @@
 import { EChartsExtensionInstallRegisters } from '../../extension';
 import PictorialBarView from './PictorialBarView';
 import PictorialBarSeriesModel from './PictorialBarSeries';
-import { createProgressiveLayout, layout } from '../../layout/barGrid';
+import { createProgressiveLayout, layout, registerBarGridAxisHandlers } from '../../layout/barGrid';
 import { curry } from 'zrender/src/core/util';
 
 export function install(registers: EChartsExtensionInstallRegisters) {
@@ -30,4 +30,6 @@ export function install(registers: EChartsExtensionInstallRegisters) {
     registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, curry(layout, 'pictorialBar'));
     // Do layout after other overall layout, which can prepare some information.
     registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('pictorialBar'));
+
+    registerBarGridAxisHandlers(registers);
 }

src/chart/boxplot/BoxplotSeries.ts

@@ -65,6 +65,7 @@ export interface BoxplotSeriesOption
     coordinateSystem?: 'cartesian2d'
 
     layout?: LayoutOrient
+    clip?: boolean;
     /**
      * [min, max] can be percent of band width.
      */
@@ -73,9 +74,11 @@ export interface BoxplotSeriesOption
     data?: (BoxplotDataValue | BoxplotDataItemOption)[]
 }
 
+export const SERIES_TYPE_BOXPLOT = 'boxplot';
+
 class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
 
-    static readonly type = 'series.boxplot';
+    static readonly type = 'series.' + SERIES_TYPE_BOXPLOT;
     readonly type = BoxplotSeriesModel.type;
 
     static readonly dependencies = ['xAxis', 'yAxis', 'grid'];
@@ -109,6 +112,7 @@ class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
         legendHoverLink: true,
 
         layout: null,
+        clip: true,
         boxWidth: [7, 50],
 
         itemStyle: {

src/chart/boxplot/BoxplotView.ts

@@ -17,20 +17,27 @@
 * under the License.
 */
 
-import * as zrUtil from 'zrender/src/core/util';
 import ChartView from '../../view/Chart';
 import * as graphic from '../../util/graphic';
 import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
 import Path, { PathProps } from 'zrender/src/graphic/Path';
-import BoxplotSeriesModel, { BoxplotDataItemOption } from './BoxplotSeries';
+import BoxplotSeriesModel, { SERIES_TYPE_BOXPLOT, BoxplotDataItemOption } from './BoxplotSeries';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import SeriesData from '../../data/SeriesData';
 import { BoxplotItemLayout } from './boxplotLayout';
 import { saveOldStyle } from '../../animation/basicTransition';
+import { resolveNormalBoxClipping } from '../helper/whiskerBoxCommon';
+import {
+    createClipPath, SHAPE_CLIP_KIND_FULLY_CLIPPED, SHAPE_CLIP_KIND_NOT_CLIPPED,
+    SHAPE_CLIP_KIND_PARTIALLY_CLIPPED,
+    updateClipPath
+} from '../helper/createClipPathFromCoordSys';
+import { map } from 'zrender/src/core/util';
+
 
 class BoxplotView extends ChartView {
-    static type = 'boxplot';
+    static type = SERIES_TYPE_BOXPLOT;
     type = BoxplotView.type;
 
     private _data: SeriesData;
@@ -47,12 +54,29 @@ class BoxplotView extends ChartView {
         }
 
         const constDim = seriesModel.getWhiskerBoxesLayout() === 'horizontal' ? 1 : 0;
+        const needClip = seriesModel.get('clip', true);
+        const coordSys = seriesModel.coordinateSystem;
+        const clipArea = coordSys.getArea && coordSys.getArea();
+        const clipPath = needClip && createClipPath(coordSys, false, seriesModel);
 
         data.diff(oldData)
             .add(function (newIdx) {
                 if (data.hasValue(newIdx)) {
                     const itemLayout = data.getItemLayout(newIdx) as BoxplotItemLayout;
+
+                    const clipKind = needClip
+                        ? resolveNormalBoxClipping(clipArea, itemLayout) : SHAPE_CLIP_KIND_NOT_CLIPPED;
+                    if (clipKind === SHAPE_CLIP_KIND_FULLY_CLIPPED) {
+                        return;
+                    }
+
                     const symbolEl = createNormalBox(itemLayout, data, newIdx, constDim, true);
+                    // One axis tick can corresponds to a group of box items (from different series),
+                    // so it may be visually misleading when a group of items are partially outside
+                    // but no clipping is applied.
+                    // Consider performance of zr Element['clipPath'], only set to partially clipped elements.
+                    updateClipPath(clipKind === SHAPE_CLIP_KIND_PARTIALLY_CLIPPED, symbolEl, clipPath);
+
                     data.setItemGraphicEl(newIdx, symbolEl);
                     group.add(symbolEl);
                 }
@@ -67,6 +91,14 @@ class BoxplotView extends ChartView {
                 }
 
                 const itemLayout = data.getItemLayout(newIdx) as BoxplotItemLayout;
+
+                const clipKind = needClip
+                    ? resolveNormalBoxClipping(clipArea, itemLayout) : SHAPE_CLIP_KIND_NOT_CLIPPED;
+                if (clipKind === SHAPE_CLIP_KIND_FULLY_CLIPPED) {
+                    group.remove(symbolEl);
+                    return;
+                }
+
                 if (!symbolEl) {
                     symbolEl = createNormalBox(itemLayout, data, newIdx, constDim);
                 }
@@ -75,6 +107,9 @@ class BoxplotView extends ChartView {
                     updateNormalBoxData(itemLayout, symbolEl, data, newIdx);
                 }
 
+                // See `updateClipPath` in `add`.
+                updateClipPath(clipKind === SHAPE_CLIP_KIND_PARTIALLY_CLIPPED, symbolEl, clipPath);
+
                 group.add(symbolEl);
 
                 data.setItemGraphicEl(newIdx, symbolEl);
@@ -192,7 +227,7 @@ function updateNormalBoxData(
 }
 
 function transInit(points: number[][], dim: number, itemLayout: BoxplotItemLayout) {
-    return zrUtil.map(points, function (point) {
+    return map(points, function (point) {
         point = point.slice();
         point[dim] = itemLayout.initBaseline;
         return point;

src/chart/boxplot/boxplotLayout.ts

@@ -17,103 +17,70 @@
 * under the License.
 */
 
-import * as zrUtil from 'zrender/src/core/util';
+import { isArray } from 'zrender/src/core/util';
 import {parsePercent} from '../../util/number';
 import type GlobalModel from '../../model/Global';
-import BoxplotSeriesModel from './BoxplotSeries';
-import Axis2D from '../../coord/cartesian/Axis2D';
-
-const each = zrUtil.each;
-
-interface GroupItem {
-    seriesModels: BoxplotSeriesModel[]
-    axis: Axis2D
-    boxOffsetList: number[]
-    boxWidthList: number[]
-}
+import BoxplotSeriesModel, { SERIES_TYPE_BOXPLOT } from './BoxplotSeries';
+import {
+    countSeriesOnAxisOnKey, eachAxisOnKey, eachSeriesOnAxisOnKey,
+    requireAxisStatistics
+} from '../../coord/axisStatistics';
+import { makeCallOnlyOnce } from '../../util/model';
+import { EChartsExtensionInstallRegisters } from '../../extension';
+import Axis from '../../coord/Axis';
+import { registerAxisContainShapeHandler } from '../../coord/scaleRawExtentInfo';
+import { calcBandWidth } from '../../coord/axisBand';
+import {
+    createBandWidthBasedAxisContainShapeHandler,
+    getMetricsNonOrdinalLinearPositiveMinGap,
+    makeAxisStatKey
+} from '../helper/axisSnippets';
+
+
+const callOnlyOnce = makeCallOnlyOnce();
 
 export interface BoxplotItemLayout {
     ends: number[][]
     initBaseline: number
 }
 
-export default function boxplotLayout(ecModel: GlobalModel) {
-
-    const groupResult = groupSeriesByAxis(ecModel);
-
-    each(groupResult, function (groupItem) {
-        const seriesModels = groupItem.seriesModels;
-
-        if (!seriesModels.length) {
+export function boxplotLayout(ecModel: GlobalModel) {
+    const axisStatKey = makeAxisStatKey(SERIES_TYPE_BOXPLOT);
+    eachAxisOnKey(ecModel, axisStatKey, function (axis) {
+        const seriesCount = countSeriesOnAxisOnKey(axis, axisStatKey);
+        if (!seriesCount) {
             return;
         }
-
-        calculateBase(groupItem);
-
-        each(seriesModels, function (seriesModel, idx) {
+        const baseResult = calculateBase(axis, seriesCount);
+        eachSeriesOnAxisOnKey(axis, axisStatKey, function (seriesModel: BoxplotSeriesModel, idx) {
             layoutSingleSeries(
                 seriesModel,
-                groupItem.boxOffsetList[idx],
-                groupItem.boxWidthList[idx]
+                baseResult.boxOffsetList[idx],
+                baseResult.boxWidthList[idx]
             );
         });
     });
 }
 
-/**
- * Group series by axis.
- */
-function groupSeriesByAxis(ecModel: GlobalModel) {
-    const result: GroupItem[] = [];
-    const axisList: Axis2D[] = [];
-
-    ecModel.eachSeriesByType('boxplot', function (seriesModel: BoxplotSeriesModel) {
-        const baseAxis = seriesModel.getBaseAxis();
-        let idx = zrUtil.indexOf(axisList, baseAxis);
-
-        if (idx < 0) {
-            idx = axisList.length;
-            axisList[idx] = baseAxis;
-            result[idx] = {
-                axis: baseAxis,
-                seriesModels: []
-            } as GroupItem;
-        }
-
-        result[idx].seriesModels.push(seriesModel);
-    });
-
-    return result;
-}
-
 /**
  * Calculate offset and box width for each series.
  */
-function calculateBase(groupItem: GroupItem) {
-    const baseAxis = groupItem.axis;
-    const seriesModels = groupItem.seriesModels;
-    const seriesCount = seriesModels.length;
-
-    const boxWidthList: number[] = groupItem.boxWidthList = [];
-    const boxOffsetList: number[] = groupItem.boxOffsetList = [];
+function calculateBase(baseAxis: Axis, seriesCount: number): {
+    boxOffsetList: number[];
+    boxWidthList: number[];
+} {
+    const boxWidthList: number[] = [];
+    const boxOffsetList: number[] = [];
     const boundList: number[][] = [];
 
-    let bandWidth: number;
-    if (baseAxis.type === 'category') {
-        bandWidth = baseAxis.getBandWidth();
-    }
-    else {
-        let maxDataCount = 0;
-        each(seriesModels, function (seriesModel) {
-            maxDataCount = Math.max(maxDataCount, seriesModel.getData().count());
-        });
-        const extent = baseAxis.getExtent();
-        bandWidth = Math.abs(extent[1] - extent[0]) / maxDataCount;
-    }
+    const bandWidth = calcBandWidth(
+        baseAxis,
+        {fromStat: {key: makeAxisStatKey(SERIES_TYPE_BOXPLOT)}, min: 1},
+    ).w;
 
-    each(seriesModels, function (seriesModel) {
+    eachSeriesOnAxisOnKey(baseAxis, makeAxisStatKey(SERIES_TYPE_BOXPLOT), function (seriesModel: BoxplotSeriesModel) {
         let boxWidthBound = seriesModel.get('boxWidth');
-        if (!zrUtil.isArray(boxWidthBound)) {
+        if (!isArray(boxWidthBound)) {
             boxWidthBound = [boxWidthBound, boxWidthBound];
         }
         boundList.push([
@@ -127,14 +94,19 @@ function calculateBase(groupItem: GroupItem) {
     const boxWidth = (availableWidth - boxGap * (seriesCount - 1)) / seriesCount;
     let base = boxWidth / 2 - availableWidth / 2;
 
-    each(seriesModels, function (seriesModel, idx) {
+    eachSeriesOnAxisOnKey(baseAxis, makeAxisStatKey(SERIES_TYPE_BOXPLOT), function (seriesModel, idx) {
         boxOffsetList.push(base);
         base += boxGap + boxWidth;
 
         boxWidthList.push(
             Math.min(Math.max(boxWidth, boundList[idx][0]), boundList[idx][1])
         );
     });
+
+    return {
+        boxOffsetList,
+        boxWidthList,
+    };
 }
 
 /**
@@ -212,3 +184,21 @@ function layoutSingleSeries(seriesModel: BoxplotSeriesModel, offset: number, box
         ends.push(from, to);
     }
 }
+
+export function registerBoxplotAxisHandlers(registers: EChartsExtensionInstallRegisters) {
+    callOnlyOnce(registers, function () {
+        const axisStatKey = makeAxisStatKey(SERIES_TYPE_BOXPLOT);
+        requireAxisStatistics(
+            registers,
+            {
+                key: axisStatKey,
+                seriesType: SERIES_TYPE_BOXPLOT,
+                getMetrics: getMetricsNonOrdinalLinearPositiveMinGap,
+            }
+        );
+        registerAxisContainShapeHandler(
+            axisStatKey,
+            createBandWidthBasedAxisContainShapeHandler(axisStatKey)
+        );
+    });
+}

src/chart/boxplot/install.ts

@@ -20,12 +20,14 @@
 import { EChartsExtensionInstallRegisters } from '../../extension';
 import BoxplotSeriesModel from './BoxplotSeries';
 import BoxplotView from './BoxplotView';
-import boxplotLayout from './boxplotLayout';
+import {boxplotLayout, registerBoxplotAxisHandlers} from './boxplotLayout';
 import { boxplotTransform } from './boxplotTransform';
 
 export function install(registers: EChartsExtensionInstallRegisters) {
     registers.registerSeriesModel(BoxplotSeriesModel);
     registers.registerChartView(BoxplotView);
     registers.registerLayout(boxplotLayout);
     registers.registerTransform(boxplotTransform);
+
+    registerBoxplotAxisHandlers(registers);
 }