refactor(scale): For readability and maintainability (1) Migrate calcNiceTicks and calcNiceExtent from Scale class override member functions to plain functions, similar to axisAlignTicks. Previously it's hard to modify and error-prone. (2) Remove unnecessary override on Scale class hierarchy and limit override usage, which is difficult to understand and error-prone. (3) Simplify the inheritance - shift LogScale and TimeScale inheritance from IntervalScale to Scale. (4) Clarify the impl of IntervalScale - uniform the parameters setting entry for both "nice ticks" and "align ticks".

Author: 100pah

src/component/dataZoom/AxisProxy.ts

@@ -458,11 +458,7 @@ class AxisProxy {
 
         const axisModel = this.getAxisModel();
 
-        const window = this._window;
-        if (!window) {
-            return;
-        }
-        const {percent, value} = window;
+        const {percent, value} = this._window;
 
         // For value axis, if min/max/scale are not set, we just use the extent obtained
         // by series data, which may be a little different from the extent calculated by

src/component/timeline/SliderTimelineView.ts

@@ -23,7 +23,7 @@ import * as graphic from '../../util/graphic';
 import { createTextStyle } from '../../label/labelStyle';
 import * as layout from '../../util/layout';
 import TimelineView from './TimelineView';
-import TimelineAxis from './TimelineAxis';
+import TimelineAxis, { TimelineAxisType } from './TimelineAxis';
 import {createSymbol, normalizeSymbolOffset, normalizeSymbolSize} from '../../util/symbol';
 import * as numberUtil from '../../util/number';
 import GlobalModel from '../../model/Global';
@@ -35,17 +35,16 @@ import TimelineModel, { TimelineDataItemOption, TimelineCheckpointStyle } from '
 import { TimelineChangePayload, TimelinePlayChangePayload } from './timelineAction';
 import Model from '../../model/Model';
 import { PathProps, PathStyleProps } from 'zrender/src/graphic/Path';
-import Scale from '../../scale/Scale';
-import OrdinalScale from '../../scale/Ordinal';
-import TimeScale from '../../scale/Time';
-import IntervalScale from '../../scale/Interval';
 import { VectorArray } from 'zrender/src/core/vector';
 import { parsePercent } from 'zrender/src/contain/text';
 import { makeInner } from '../../util/model';
 import { getECData } from '../../util/innerStore';
 import { enableHoverEmphasis } from '../../util/states';
 import { createTooltipMarkup } from '../tooltip/tooltipMarkup';
 import Displayable from 'zrender/src/graphic/Displayable';
+import { createScaleByModel } from '../../coord/axisHelper';
+import { OptionAxisType } from '../../coord/axisCommonTypes';
+import { scaleCalcNiceReal } from '../../coord/axisNiceTicks';
 
 const PI = Math.PI;
 
@@ -338,9 +337,12 @@ class SliderTimelineView extends TimelineView {
 
     private _createAxis(layoutInfo: LayoutInfo, timelineModel: SliderTimelineModel) {
         const data = timelineModel.getData();
-        const axisType = timelineModel.get('axisType');
+        let axisType = timelineModel.get('axisType') || timelineModel.get('type') as TimelineAxisType;
+        if (axisType !== 'category' && axisType !== 'time') {
+            axisType = 'value';
+        }
 
-        const scale = createScaleByModel(timelineModel, axisType);
+        const scale = createScaleByModel(timelineModel, axisType as OptionAxisType);
 
         // Customize scale. The `tickValue` is `dataIndex`.
         scale.getTicks = function () {
@@ -351,7 +353,7 @@ class SliderTimelineView extends TimelineView {
 
         const dataExtent = data.getDataExtent('value');
         scale.setExtent(dataExtent[0], dataExtent[1]);
-        scale.calcNiceTicks();
+        scaleCalcNiceReal(scale, {fixMinMax: [true, true]});
 
         const axis = new TimelineAxis('value', scale, layoutInfo.axisExtent as [number, number], axisType);
         axis.model = timelineModel;
@@ -730,28 +732,6 @@ class SliderTimelineView extends TimelineView {
     }
 }
 
-function createScaleByModel(model: SliderTimelineModel, axisType?: string): Scale {
-    axisType = axisType || model.get('type');
-    if (axisType) {
-        switch (axisType) {
-            // Buildin scale
-            case 'category':
-                return new OrdinalScale({
-                    ordinalMeta: model.getCategories(),
-                    extent: [Infinity, -Infinity]
-                });
-            case 'time':
-                return new TimeScale({
-                    locale: model.ecModel.getLocaleModel(),
-                    useUTC: model.ecModel.get('useUTC')
-                });
-            default:
-                // default to be value
-                return new IntervalScale();
-        }
-    }
-}
-
 
 function getViewRect(model: SliderTimelineModel, api: ExtensionAPI) {
     return layout.getLayoutRect(

src/component/timeline/TimelineAxis.ts

@@ -23,12 +23,14 @@ import TimelineModel from './TimelineModel';
 import { LabelOption } from '../../util/types';
 import Model from '../../model/Model';
 
+export type TimelineAxisType = 'category' | 'time' | 'value';
+
 /**
  * Extend axis 2d
  */
 class TimelineAxis extends Axis {
 
-    type: 'category' | 'time' | 'value';
+    type: TimelineAxisType;
 
     // @ts-ignore
     model: TimelineModel;
@@ -37,7 +39,7 @@ class TimelineAxis extends Axis {
         dim: string,
         scale: Scale,
         coordExtent: [number, number],
-        axisType: 'category' | 'time' | 'value'
+        axisType: TimelineAxisType
     ) {
         super(dim, scale, coordExtent);
         this.type = axisType || 'value';

src/component/timeline/TimelineModel.ts

@@ -292,10 +292,6 @@ class TimelineModel extends ComponentModel<TimelineOption> {
         return this._data;
     }
 
-    /**
-     * @public
-     * @return {Array.<string>} categoreis
-     */
     getCategories() {
         if (this.get('axisType') === 'category') {
             return this._names.slice();

src/coord/axisAlignTicks.ts

@@ -113,7 +113,7 @@ export function alignScaleTicks(
         // At least one nice segment is present, and not-nice segments are only present on
         // the start and/or the end.
         // In this case, ticks corresponding to nice segments are made "nice".
-        const alignToInterval = alignToScaleLinear.getInterval();
+        const alignToInterval = alignToScaleLinear.getConfig().interval;
         t0 = (
             1 - (alignToTicks[0].value - alignToExpNiceTicks[0].value) / alignToInterval
         ) % 1;
@@ -282,23 +282,28 @@ export function alignScaleTicks(
                 const currIntervalCount = mathRound((maxNice - minNice) / interval);
                 if (currIntervalCount <= alignToNiceSegCount) {
                     const moreCount = alignToNiceSegCount - currIntervalCount;
-                    // Consider cases that negative series data do not make sense (or vice versa), users can
-                    // simply specify `xxxAxis.min/max: 0` to achieve that. But we still optimize it for some
-                    // common default cases whenever possible, especially when ec option `xxxAxis.scale: false`
-                    // (the default), it is usually unexpected if negative (or positive) ticks are introduced.
+                    // Consider cases that negative tick do not make sense (or vice versa), users can simply
+                    // specify `xxxAxis.min/max: 0` to avoid negative. But we still automatically handle it
+                    // for some common cases whenever possible:
+                    //  - When ec option is `xxxAxis.scale: false` (the default), it is usually unexpected if
+                    //    negative (or positive) ticks are introduced.
+                    //  - In LogScale, series data are usually either all > 1 or all < 1, rather than both,
+                    //    that is, logarithm result is typically either all positive or all negative.
                     let moreCountPair: number[];
-                    const needCrossZero = targetExtentInfo.needCrossZero;
-                    if (needCrossZero && targetExtent[0] === 0) {
+                    const mayEnhanceZero = targetExtentInfo.needCrossZero || isTargetLogScale;
+                    // `bounds < 0` or `bounds > 0` may require more complex handling, so we only auto handle
+                    // `bounds === 0`.
+                    if (mayEnhanceZero && targetExtent[0] === 0) {
                         // 0 has been included in extent and all positive.
                         moreCountPair = [0, moreCount];
                     }
-                    else if (needCrossZero && targetExtent[1] === 0) {
+                    else if (mayEnhanceZero && targetExtent[1] === 0) {
                         // 0 has been included in extent and all negative.
                         moreCountPair = [moreCount, 0];
                     }
                     else {
-                        // Try to arrange tick in the middle as possible corresponding to the given `alignTo`
-                        // ticks, which is especially preferable in `LogScale`.
+                        // Try to center ticks in axis space whenever possible, which is especially preferable
+                        // in `LogScale`.
                         const lessHalfCount = mathFloor(moreCount / 2);
                         moreCountPair = moreCount % 2 === 0 ? [lessHalfCount, lessHalfCount]
                             : (min + max) < (targetExtent[0] + targetExtent[1]) ? [lessHalfCount, lessHalfCount + 1]
@@ -325,9 +330,9 @@ export function alignScaleTicks(
         ]
         : [];
 
-    // NOTE: Must in setExtent -> setInterval order.
+    // NOTE: Must in setExtent -> setConfigs order.
     targetScaleLinear.setExtent(min, max);
-    targetScaleLinear.setInterval({
+    targetScaleLinear.setConfig({
         // Even in LogScale, `interval` should not be in log space.
         interval,
         intervalCount,

src/coord/axisCommonTypes.ts

@@ -34,6 +34,9 @@ import type { PrimaryTimeUnit } from '../util/time';
 export const AXIS_TYPES = {value: 1, category: 1, time: 1, log: 1} as const;
 export type OptionAxisType = keyof typeof AXIS_TYPES;
 
+// `scale/Ordinal` | `scale/Interval` | `scale/Log` | `scale/Time`
+export type AxisScaleType = 'ordinal' | 'interval' | 'log' | 'time';
+
 export interface AxisBaseOptionCommon extends ComponentOption,
     AnimationOptionMixin {
     type?: OptionAxisType;

src/coord/axisHelper.ts

@@ -41,6 +41,7 @@ import {
     AxisLabelCategoryFormatter,
     AxisLabelValueFormatter,
     AxisLabelFormatterExtraParams,
+    OptionAxisType,
 } from './axisCommonTypes';
 import CartesianAxisModel from './cartesian/AxisModel';
 import SeriesData from '../data/SeriesData';
@@ -50,7 +51,8 @@ import { ensureScaleRawExtentInfo, ScaleRawExtentResult } from './scaleRawExtent
 import { parseTimeAxisLabelFormatter } from '../util/time';
 import { getScaleBreakHelper } from '../scale/break';
 import { error } from '../util/log';
-import { isIntervalScale, isTimeScale } from '../scale/helper';
+import { isTimeScale } from '../scale/helper';
+import { AxisModelExtendedInCreator } from './axisModelCreator';
 
 
 type BarWidthAndOffset = ReturnType<typeof makeColumnLayout>;
@@ -157,43 +159,22 @@ function adjustScaleForOverflow(
     return {min: min, max: max};
 }
 
-export function niceScaleExtent(
-    scale: Scale,
-    inModel: AxisBaseModel,
-    // Typically: data extent from all series on this axis, which can be obtained by
-    //  `scale.unionExtentFromData(...); scale.getExtent();`.
-    dataExtent: number[],
-): void {
-    const model = inModel as AxisBaseModel<LogAxisBaseOption>;
-    const extentInfo = adoptScaleExtentOptionAndPrepare(scale, model, dataExtent);
-
-    const isInterval = isIntervalScale(scale);
-    const isIntervalOrTime = isInterval || isTimeScale(scale);
-
-    scale.setBreaksFromOption(retrieveAxisBreaksOption(model));
-    scale.setExtent(extentInfo.min, extentInfo.max);
-    scale.calcNiceExtent({
-        splitNumber: model.get('splitNumber'),
-        fixMinMax: [extentInfo.minFixed, extentInfo.maxFixed],
-        minInterval: isIntervalOrTime ? model.get('minInterval') : null,
-        maxInterval: isIntervalOrTime ? model.get('maxInterval') : null
-    });
-
-    // If some one specified the min, max. And the default calculated interval
-    // is not good enough. He can specify the interval. It is often appeared
-    // in angle axis with angle 0 - 360. Interval calculated in interval scale is hard
-    // to be 60.
-    // In `xxxAxis.type: 'log'`, ec option `xxxAxis.interval` requires a logarithm-applied
-    // value rather than a value in the raw scale.
-    const interval = model.get('interval');
-    if (interval != null && (scale as IntervalScale).setInterval) {
-        (scale as IntervalScale).setInterval({interval});
-    }
-}
-
-export function createScaleByModel(model: AxisBaseModel): Scale {
-    const axisType = model.get('type');
-    switch (axisType) {
+export function createScaleByModel(
+    model:
+        Model<
+            // Expect `Pick<AxisBaseOptionCommon, 'type'>`,
+            // but be lenient for user's invalid input.
+            {type?: string}
+            & Pick<LogAxisBaseOption, 'logBase'>
+        >
+        & Partial<Pick<
+            AxisModelExtendedInCreator,
+            'getOrdinalMeta' | 'getCategories'
+        >>,
+    axisType?: OptionAxisType
+): Scale {
+    const type = axisType || model.get('type');
+    switch (type) {
         case 'category':
             return new OrdinalScale({
                 ordinalMeta: model.getOrdinalMeta
@@ -208,10 +189,10 @@ export function createScaleByModel(model: AxisBaseModel): Scale {
             });
         case 'log':
             // See also #3749
-            return new LogScale((model as AxisBaseModel<LogAxisBaseOption>).get('logBase'));
+            return new LogScale(model.get('logBase'));
         default:
             // case 'value'/'interval', or others.
-            return new (Scale.getClass(axisType) || IntervalScale)();
+            return new (Scale.getClass(type) || IntervalScale)();
     }
 }