feat(axis): enale boundaryGap for category axis

[xdbobname]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

I'd like to align ending axis labels with the boundary, but the boundaryGap not suitable for category axis chart.

Fixed issues

#19636

Details

Before: What was the problem?

place axis label space-between

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.

⚠️ MISSING DOCUMENT INFO: Please make sure one of the document options are checked in this PR's description. Search "Document Info" in the description of this PR. This should be done either by the author or the reviewers of the PR.

[echarts-bot]

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.

[Ovilia]

This seems to be more like some kind of margin/padding than boundaryGap to me, since its value is in pixels rather than the unit of the axis.

Consider the real world cases where this feature should be useful and add the cases in the test. And when you are clear about where this feature should be used, give it a better name (margin?pardding?offset?...) to isolate from boundaryGap.

[cooljser]

So great. I need this feature. There has a line chart on the top of page, and a bar chart on the bottom of page. Although there xAxis is different, i want to align the left xAxis.

[xdbobname]

So great. I need this feature. There has a line chart on the top of page, and a bar chart on the bottom of page. Although their xAxis is different, i want to align the left xAxis.

maybe you wannna say "left yAxis"? emmm, it has nothing to do with this pr, which customize the distance between yAxis and the line chart start point

[cooljser]

So great. I need this feature. There has a line chart on the top of page, and a bar chart on the bottom of page. Although their xAxis is different, i want to align the left xAxis.

maybe you wannna say "left yAxis"? emmm, it has nothing to do with this pr, which customize the distance between yAxis and the line chart start point

like this situation. I want to setting the gap between yAxis and bar.

[admsev]

@gooroodev review

[gooroodev]

Summary of Changes

1. Axis.ts Modifications:

   • Imports: Added isArray from zrender/src/core/util.
   • Method fixExtentWithBands: Updated to accept an additional parameter onBand which is an array of numbers. This array is used to adjust the extent margins.
   • Method dataToCoord: Updated to pass the onBand array to fixExtentWithBands.

2. New Test File:

   • File: line-space-between.html
   • Purpose: Added a new HTML test file to visualize the changes. This file sets up a chart with a category axis and boundary gaps.

Issues, Bugs, and Typos

1. Typo in Pull Request Title:

   • Current Title: "feat(axis): enale boundaryGap for category axis"
   • Corrected Title: "feat(axis): enable boundaryGap for category axis"

2. Code Issues:

   • Default Parameter in fixExtentWithBands:
     • Current Code: function fixExtentWithBands(extent: [number, number], nTick: number, onBand = [] as number[]): void {
     • Improved Code: The current usage is correct, but consider adding a type assertion for clarity.

       function fixExtentWithBands(extent: [number, number], nTick: number, onBand: number[] = []): void {

General Review of Code Quality and Style

1. Code Quality:

   • The changes are clear and well-structured.
   • The addition of the isArray check ensures that onBand is correctly processed as an array, which adds robustness to the code.
   • The new test file is a good addition for visual verification of the changes.

2. Code Style:

   • The code adheres to TypeScript best practices.
   • The use of default parameters in the fixExtentWithBands function is appropriate and enhances readability.

Recommendations

1. Title Correction:

   • Update the pull request title to correct the typo.

2. Documentation:

   • Consider adding comments to the new parameters and methods to explain their purpose and usage.

3. Tests:

   • Ensure that the new test file is integrated into the existing test suite if applicable. Automated tests should verify the correctness of the boundaryGap feature.

Conclusion

The pull request introduces a useful feature for enabling boundaryGap on category axes, with well-structured code and a new test file for verification. Minor improvements and typo corrections are suggested to enhance clarity and correctness.

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

[xdbobname]

This seems to be more like some kind of margin/padding than boundaryGap to me, since its value is in pixels rather than the unit of the axis.

Consider the real world cases where this feature should be useful and add the cases in the test. And when you are clear about where this feature should be used, give it a better name (margin?pardding?offset?...) to isolate from boundaryGap.
Although it behaves like margin, (and it actually replace margin in the code), such behaivor has already been supported by the value axis. So I try to keep the prop name.

[xdbobname]

@gooroodev review

[gooroodev]

Thanks, @xdbobname, for the ping!

{mistakes: 1, typos: 1, security: 0, performance: 0, code_styling: 1, others: 0}

Summary of Changes:

1. Added support for boundaryGap in category axes.
2. Modified fixExtentWithBands to accept an optional onBand parameter.
3. Added a new test file line-space-between.html to verify the changes.

Issues, Bugs, and Typos:

1. Typo in Pull Request Title:

   • Current: enale
   • Corrected: enable

2. Mistake in Axis.ts:

   • The onBand parameter should be an array of two numbers, but the default value should be [0, 0] instead of [].
   • Correction:

     function fixExtentWithBands(extent: [number, number], nTick: number, onBand: number[] = [0, 0]): void {

General Review of Code Quality and Style:

• The code is generally well-structured and follows good practices.
• The new feature is integrated seamlessly with existing functionality.
• The test case is well-prepared and adheres to the project's licensing and style guidelines.

Code Improvements:

1. Default Value for onBand:

   • File: src/coord/Axis.ts
   • Line: 273
   • Improved Code:

     function fixExtentWithBands(extent: [number, number], nTick: number, onBand: number[] = [0, 0]): void {

2. Typo in Pull Request Title:

   • Improved Title:

     feat(axis): enable boundaryGap for category axis
     

Yours, Gooroo.dev. React or reply to give your feedback!

[Ovilia]

#19228 provides the ability to align the first/last label. From there, we could adjust category axis label with alignMinLabel/alignMaxLabel to change accordingly.

[xdbobname]

#19228 provides the ability to align the first/last label. From there, we could adjust category axis label with alignMinLabel/alignMaxLabel to change accordingly.

the 1st or last label align-self independent will shrink/grow the first and last gap, but behave good