Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(axis): enale boundaryGap for category axis #19638

Closed
wants to merge 2 commits into from

Conversation

xdbobname
Copy link

@xdbobname xdbobname commented Feb 22, 2024

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?

image

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

Copy link

echarts-bot bot commented Feb 22, 2024

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.

Copy link

echarts-bot bot commented Feb 22, 2024

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.

@echarts-bot echarts-bot bot added the PR: awaiting doc Document changes is required for this PR. label Feb 22, 2024
Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link

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
Copy link
Author

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
image

@cooljser
Copy link

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 image

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

@admsev
Copy link

admsev commented May 25, 2024

@gooroodev review

@gooroodev
Copy link

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
Copy link
Author

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
Copy link
Author

@gooroodev review

@gooroodev
Copy link

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!

Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#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
Copy link
Author

xdbobname commented Jul 1, 2024

#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
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR: awaiting doc Document changes is required for this PR. PR: first-time contributor size/S
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants