Fix 9265: Axis names overlap with labels

[robin-gerling]

Follow-up of #16825 and #12236

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

This PR shrinks the grid size such that the axis labels and names are completely contained (Option (B) of #9265 (comment)).

Fixed issues

• xAxis.nameGap and yAxis.nameGap should be set automatically given grid.containLabel #9265: xAxis.nameGap and yAxis.nameGap should be set automatically given grid.containLabel

Details

Before: What was the problem?

When grid.containLabel is set to true, the axis names overlap with the labels, when there is no magical number for nameGap specified. Furthermore, the names may be not visible when specifying the nameGap, because the names get pushed out of the grid. Therefore, also the distance between the grid and the container needs to be adjusted.

After: How does it behave after the fixing?

When grid.containLabel is set to true, the axis names do not overlap with labels and the grid size is shrinked such that the names are completely visible without the need to specify the grid to container distance or nameGap.

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in fix(grid): Adapt documentation of containLabel to include axis name. … echarts-doc#380

Misc

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

• Please squash the commits into a single one when merging.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

[DanielBogenrieder]

Hey @Ovilia, @100pah,

is there any chance we could get feedback on this PR?
We are happy to improve the PR if there is something wrong/missing, but it would be nice to get this into a release as soon as possible.

Greetings,
Daniel

[admsev]

@gooroodev review

[gooroodev]

Summary of Changes

1. AxisBuilder.ts:

   • Imported CartesianAxisModel.
   • Modified the calculation of gap in the axisName builder to include axisToNameGapStartGap from CartesianAxisModel.

2. axisHelper.ts:

   • Added computeNameBoundingRect function to calculate the bounding rectangle for the axis name.
   • Added isNameLocationCenter, isNameLocationStart, and isNameLocationEnd helper functions.
   • Added types CartesianAxisPositionMargins and ReservedSpace.
   • Added computeReservedSpace function to calculate the reserved space for axis labels and names.

3. AxisModel.ts:

   • Added inverseCartesianAxisPositionMap for mapping axis positions.
   • Added axisToNameGapStartGap property to CartesianAxisModel.

4. Grid.ts:

   • Imported additional functions and types from axisHelper.
   • Modified the logic to compute the reserved space for axis labels and names.
   • Adjusted the grid rectangle dimensions based on the reserved space.

5. axis-containLabelAndName.html:

   • Added a new test HTML file to ensure axis labels and names do not overlap.
   • Included various test cases with different configurations for axis names and labels.

Issues, Bugs, and Typos

1. Unused Imports:
   • In Grid.ts, reduce is imported but not used.

Proposed Improvement:

-import {isObject, each, indexOf, retrieve3, keys, reduce, map} from 'zrender/src/core/util';
+import {isObject, each, indexOf, retrieve3, keys, map} from 'zrender/src/core/util';

2. Redundant Code:
   • The function isNameLocationCenter is defined twice, once in AxisBuilder.ts and again in axisHelper.ts.

Proposed Improvement:

-function isNameLocationCenter(nameLocation: string) {
-    return nameLocation === 'middle' || nameLocation === 'center';
-}

General Review of Code Quality and Style

• Code Organization: The code is well-organized, with clear separation of concerns between different modules. Functions and types are logically grouped.
• Naming Conventions: The naming conventions are consistent and descriptive, making it easy to understand the purpose of each function and variable.
• Documentation: The code includes comments and JSDoc annotations, which enhance readability and maintainability.
• Test Coverage: The addition of axis-containLabelAndName.html demonstrates a thorough approach to testing different configurations, ensuring robustness.
• Style: The code follows a consistent style, with proper indentation and spacing, making it easy to read.

Overall, the pull request addresses the issue effectively and maintains high code quality. The proposed improvements are minor and would enhance the clarity and efficiency of the code.

Yours, Gooroo.dev. To receive reviews automatically, install Github App

[Ovilia]

Sorry for the late reply and thanks for your contribution!

I feel the changes are somewhat too complicated. Could we add the following code to the end of axisHelper.ts#estimateLabelUnionRect?

...
    const axisName = axisModel.get('name');
    if (axisName) {
        const nameLocation = axisModel.get('nameLocation');
        const nameGap = axisModel.get('nameGap') || 0;
        const nameRotate = axisModel.get('nameRotate') || 0;
        const nameTruncate = axisModel.get('nameTruncate');
        const textStyle = axisModel.getModel('nameTextStyle');

        const unrotatedSingleRect = textStyle.getTextRect(axisName);
        if (nameTruncate.maxWidth) {
            unrotatedSingleRect.width = Math.min(unrotatedSingleRect.width, nameTruncate.maxWidth);
        }

        const singleRect = rotateTextRect(unrotatedSingleRect, nameRotate);
        rect.union(singleRect);

        // TODO: also consider nameLocation, nameGap and etc. to control the rect
    }

    return rect;
}