fix(axis):fix radar axisName.overflow not correct work

[huaqian888]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Fix radar axisName.overflow not correct work

Fixed issues

• [Bug] radar.axisName.width Setting is invalid #17414
• [Bug] [radar] axisName.height & axisName.width & axisName.overflow & axisName.ellipsis config not working #17319

Details

Before: What was the problem?

After: How does it behave after the fixing?

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 apache/echarts-doc#xxx

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.

[github-actions]

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-19546@db53c7b

[admsev]

@gooroodev review

[gooroodev]

1. Summary of Changes

The pull request makes the following changes:

1. AxisBuilder.ts:

   • Adds support for overflow and sets a default value of 'truncate'.
   • Adds a default value for ellipsis as '...'.
   • Updates how maxWidth is retrieved, now considering truncateOpt.width as well.
   • Updates the text style to use the overflow property from truncateOpt.

2. axisCommonTypes.ts:

   • Adds overflow and width properties to the nameTruncate option in the AxisBaseOptionCommon interface.

3. RadarModel.ts:

   • Adds the nameTruncate property to the radar axis configuration.

2. Issues, Bugs, or Typos

Issue 1: Default Values for overflow and ellipsis

• The default value for overflow is set to 'truncate' directly in the destructuring assignment. This is good practice, but it can be made more readable by separating the assignment.

Issue 2: Consistency in Property Names

• The code uses both maxWidth and width in truncateOpt. It would be better to standardize on one term to avoid confusion.

Proposed Improvement 1: Separate Default Value Assignment

const truncateOpt = axisModel.get('nameTruncate', true) || {};
const overflow = truncateOpt.overflow ?? 'truncate';
const ellipsis = truncateOpt.ellipsis ?? '...';
const maxWidth = retrieve(
    opt.nameTruncateMaxWidth, truncateOpt.maxWidth ?? truncateOpt.width, axisNameAvailableWidth
);

Proposed Improvement 2: Standardize on maxWidth

const maxWidth = retrieve(
    opt.nameTruncateMaxWidth, truncateOpt.maxWidth, axisNameAvailableWidth
);

• Update the interface to use only maxWidth:

export interface AxisBaseOptionCommon extends ComponentOption {
    // By degree.
    nameRotate?: number;
    nameTruncate?: {
        overflow?: TextStyleProps['overflow'];
        maxWidth?: number;  // Use only maxWidth
        ellipsis?: string;
        placeholder?: string;
    };
    // Other properties...
}

3. General Review of Code Quality and Style

• Readability: The code is generally readable. However, separating the assignment of default values for overflow and ellipsis can improve readability.
• Consistency: The use of both maxWidth and width in the same context can be confusing. It's better to standardize on one term.
• Type Safety: The changes are type-safe and align with TypeScript best practices.
• Documentation: Ensure that any new properties added to interfaces are documented for clarity.

Overall, the changes improve the functionality and maintainability of the code. The proposed improvements aim to enhance readability and consistency.

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