refactor&feature:

(1) Uniform series data union logic; previous they are implemented in several inconsistent ways and error-prone. And also strict the extent calculation with uniformed utilities.
(2) Refactor Scale - uniform the implementation of the numeric transformations (such as axis breaks, logarithm, ordinal related handling) with a decorator pattern and decouple them from Scale class hierarchy. This brings consistent handling for details and enables further extension.
(3) Refactor Scale - decouple "axis nice" logic from Scale and make the "axis nice" and "axis align" implemented in the same code style. This removes override (hard to read and maintain), and uniforms the parameters of IntervalScale (previous its parameters can be generated by itself or outside, which is confusing), and reduce scale-type-specified handling (e.g., if (isLogScale) ...) in calculation.
(4) Enable "value" axis and "log" axis to render "bar" and "pictorialBar" series without overflowing the axis. Previously only "time" axis enables that on only "bar" series. Introduce "SCALE_EXTENT_KIND_MAPPING" to cover this generalized behavior and use strict "clip" for bar series without extra margin (a previous compromise). And clarify `barGrid` code accordingly, which removes duplicated time-consuming calculation in "bandWidth" calculation. Close #19972. Close #17858. Close #12720. Close #13321. Close #20718. Close #20421. Close #20503.

Author: 100pah

src/chart/bar/BarView.ts

@@ -96,10 +96,10 @@ 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 (baseAxis.type !== 'category' || !baseAxis.onBand) {
+        if (baseAxis.type === 'category' && !baseAxis.onBand) {
             const expandWidth = data.getLayout('bandWidth');
             if (baseAxis.isHorizontal()) {
                 (coordSysClipArea as CartesianCoordArea).x -= expandWidth;
@@ -225,6 +225,7 @@ class BarView extends ChartView {
         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, registerBarGridAxisContainShapeHandler} from '../../layout/barGrid';
 import dataSample from '../../processor/dataSample';
 
 import BarSeries from './BarSeries';
@@ -67,4 +67,5 @@ export function install(registers: EChartsExtensionInstallRegisters) {
         );
     });
 
+    registerBarGridAxisContainShapeHandler(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, registerBarGridAxisContainShapeHandler } 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'));
+
+    registerBarGridAxisContainShapeHandler(registers);
 }

src/chart/custom/CustomSeries.ts

@@ -21,7 +21,10 @@ import Displayable from 'zrender/src/graphic/Displayable';
 import { ImageProps, ImageStyleProps } from 'zrender/src/graphic/Image';
 import { PathProps, PathStyleProps } from 'zrender/src/graphic/Path';
 import { ZRenderType } from 'zrender/src/zrender';
-import { BarGridLayoutOptionForCustomSeries, BarGridLayoutResult } from '../../layout/barGrid';
+import {
+    BarGridLayoutOptionForCustomSeries,
+    BarGridLayoutResultForCustomSeries
+} from '../../layout/barGrid';
 import {
     AnimationOption,
     BlurScope,
@@ -296,7 +299,7 @@ export interface CustomSeriesRenderItemAPI extends
     ): VT extends NonStyleVisualProps ? DefaultDataVisual[VT]
         : VT extends StyleVisualProps ? PathStyleProps[typeof STYLE_VISUAL_TYPE[VT]]
         : void;
-    barLayout(opt: BarGridLayoutOptionForCustomSeries): BarGridLayoutResult;
+    barLayout(opt: BarGridLayoutOptionForCustomSeries): BarGridLayoutResultForCustomSeries;
     currentSeriesIndices(): number[];
     font(opt: Pick<TextCommonOption, 'fontStyle' | 'fontWeight' | 'fontSize' | 'fontFamily'>): string;
 }

src/chart/custom/CustomView.ts

@@ -25,7 +25,10 @@ import * as graphicUtil from '../../util/graphic';
 import { setDefaultStateProxy, toggleHoverEmphasis } from '../../util/states';
 import * as labelStyleHelper from '../../label/labelStyle';
 import {getDefaultLabel} from '../helper/labelHelper';
-import {getLayoutOnAxis} from '../../layout/barGrid';
+import {
+    BarGridLayoutOptionForCustomSeries, BarGridLayoutResultForCustomSeries,
+    getLayoutOnAxis
+} from '../../layout/barGrid';
 import DataDiffer from '../../data/DataDiffer';
 import Model from '../../model/Model';
 import ChartView from '../../view/Chart';
@@ -43,7 +46,7 @@ import {
     ECElement,
     DisplayStateNonNormal,
     OrdinalRawValue,
-    InnerDecalObject
+    InnerDecalObject,
 } from '../../util/types';
 import Element, { ElementTextConfig } from 'zrender/src/Element';
 import prepareCartesian2d from '../../coord/cartesian/prepareCustom';
@@ -90,7 +93,8 @@ import CustomSeriesModel, {
     CustomPathOption,
     CustomRootElementOption,
     CustomSeriesOption,
-    CustomCompoundPathOption
+    CustomCompoundPathOption,
+    CustomSeriesRenderItemCoordinateSystemAPI
 } from './CustomSeries';
 import { PatternObject } from 'zrender/src/graphic/Pattern';
 import {
@@ -916,8 +920,8 @@ function makeRenderItem(
      * @return If not support, return undefined.
      */
     function barLayout(
-        opt: Omit<Parameters<typeof getLayoutOnAxis>[0], 'axis'>
-    ): ReturnType<typeof getLayoutOnAxis> {
+        opt: BarGridLayoutOptionForCustomSeries
+    ): BarGridLayoutResultForCustomSeries {
         if (coordSys.type === 'cartesian2d') {
             const baseAxis = coordSys.getBaseAxis() as Axis2D;
             return getLayoutOnAxis(defaults({axis: baseAxis}, opt));

src/chart/heatmap/HeatmapView.ts

@@ -241,10 +241,10 @@ class HeatmapView extends ChartView {
                 if (isNaN(data.get(dataDims[2], idx) as number)
                     || isNaN(dataDimX as number)
                     || isNaN(dataDimY as number)
-                    || dataDimX < xAxisExtent[0]
-                    || dataDimX > xAxisExtent[1]
-                    || dataDimY < yAxisExtent[0]
-                    || dataDimY > yAxisExtent[1]
+                    || (dataDimX as number) < xAxisExtent[0]
+                    || (dataDimX as number) > xAxisExtent[1]
+                    || (dataDimY as number) < yAxisExtent[0]
+                    || (dataDimY as number) > yAxisExtent[1]
                 ) {
                     continue;
                 }

src/chart/line/LineView.ts

@@ -92,8 +92,8 @@ function xyExtentFromPoints(points: ArrayLike<number>) {
         const x = points[i++];
         const y = points[i++];
         if (!isPointIllegal(x, y)) {
-            modelUtil.unionExtent(xExtent, x);
-            modelUtil.unionExtent(yExtent, y);
+            modelUtil.unionExtentFromNumber(xExtent, x);
+            modelUtil.unionExtentFromNumber(yExtent, y);
         }
     }
     return [xExtent, yExtent];

src/component/axis/AxisBuilder.ts

@@ -65,7 +65,7 @@ import ExtensionAPI from '../../core/ExtensionAPI';
 import { makeInner } from '../../util/model';
 import { getAxisBreakHelper } from './axisBreakHelper';
 import { AXIS_BREAK_EXPAND_ACTION_TYPE, BaseAxisBreakPayload } from './axisAction';
-import { getScaleBreakHelper } from '../../scale/break';
+import { getScaleBreakHelper, hasBreaks } from '../../scale/break';
 import BoundingRect from 'zrender/src/core/BoundingRect';
 import Point from 'zrender/src/core/Point';
 import { copyTransform } from 'zrender/src/core/Transformable';
@@ -709,7 +709,7 @@ const builders: Record<AxisBuilderAxisPartName, AxisElementsBuilder> = {
             style: lineStyle,
         };
 
-        if (axisModel.get(['axisLine', 'breakLine']) && axisModel.axis.scale.hasBreaks()) {
+        if (axisModel.get(['axisLine', 'breakLine']) && hasBreaks(axisModel.axis.scale)) {
             getAxisBreakHelper()!.buildAxisBreakLine(axisModel, group, transformGroup, pathBaseProp);
         }
         else {

src/component/axisPointer/modelHelper.ts

@@ -373,8 +373,7 @@ export function fixValue(axisModel: AxisBaseModel) {
         option.status = useHandle ? 'show' : 'hide';
     }
 
-    const extent = scale.getExtent().slice();
-    extent[0] > extent[1] && extent.reverse();
+    const extent = scale.getExtent();
 
     if (// Pick a value on axis when initializing.
         value == null

src/component/dataZoom/AxisProxy.ts

@@ -30,9 +30,11 @@ import { Dictionary, NullUndefined } from '../../util/types';
 import DataZoomModel from './DataZoomModel';
 import { AxisBaseModel } from '../../coord/AxisBaseModel';
 import { getAxisMainType, isCoordSupported, DataZoomAxisDimension } from './helper';
-import { initExtentForUnion, SINGLE_REFERRING } from '../../util/model';
+import { SINGLE_REFERRING } from '../../util/model';
 import { isOrdinalScale, isTimeScale } from '../../scale/helper';
-import { AXIS_EXTENT_INFO_BUILD_FROM_DATA_ZOOM, axisExtentInfoFinalBuild, ensureScaleRawExtentInfo } from '../../coord/scaleRawExtentInfo';
+import {
+    AXIS_EXTENT_INFO_BUILD_FROM_DATA_ZOOM, scaleRawExtentInfoReallyCreate,
+} from '../../coord/scaleRawExtentInfo';
 
 
 interface MinMaxSpan {
@@ -69,7 +71,7 @@ class AxisProxy {
 
     private _window: AxisProxyWindow;
 
-    private _dataExtent: [number, number];
+    private _dataExtent: number[];
 
     private _minMaxSpan: MinMaxSpan;
 
@@ -260,7 +262,7 @@ class AxisProxy {
         const pxSpan = mathAbs(pxExtent[1] - pxExtent[0]);
         const precision = isScaleOrdinalOrTime
             ? 0
-            : getAcceptableTickPrecision(valueWindow[1] - valueWindow[0], pxSpan, 0.5);
+            : getAcceptableTickPrecision(valueWindow, pxSpan, 0.5);
         each([[0, mathCeil], [1, mathFloor]] as const, function ([idx, ceilOrFloor]) {
             if (!needRound[idx] || !isFinite(precision)) {
                 return;
@@ -320,10 +322,10 @@ class AxisProxy {
         // Nevertheless, user can set min/max/scale on axes to make extent of axes
         // consistent.
         const axis = this.getAxisModel().axis;
-        axisExtentInfoFinalBuild(this.ecModel, axis, AXIS_EXTENT_INFO_BUILD_FROM_DATA_ZOOM);
-        const rawExtentInfo = ensureScaleRawExtentInfo(axis)
-        const rawExtentResult = rawExtentInfo.calculate();
-        this._dataExtent = [rawExtentResult.min, rawExtentResult.max];
+        scaleRawExtentInfoReallyCreate(this.ecModel, axis, AXIS_EXTENT_INFO_BUILD_FROM_DATA_ZOOM);
+
+        const rawExtentInfo = axis.scale.rawExtentInfo;
+        this._dataExtent = rawExtentInfo.makeForZoom();
 
         // `calculateDataWindow` uses min/maxSpan.
         this._updateMinMaxSpan();
@@ -342,10 +344,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.setDeterminedMinMax('min', value[0]);
+            rawExtentInfo.setZoomMinMax(0, value[0]);
         }
         if (percent[1] !== 100) {
-            rawExtentInfo.setDeterminedMinMax('max', value[1]);
+            rawExtentInfo.setZoomMinMax(1, value[1]);
         }
     }