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

fix(axis): allow stacking on value xAxis #19653

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

alxnddr
Copy link

@alxnddr alxnddr commented Feb 27, 2024

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

On cartesian charts when both X and Y axes have type value the stack dimension is selected incorrectly which leads to broken stacked charts. This PR prevents X-axis coord dimension when Y-axis coord dimension is also stackable which allows having stacked vertical charts while not changing the API.

Further, to properly support stacked horizontal charts with both stackable axes, the API should be extended.

Minimal reproduction

ECharts supports stacking on the other continuous scale time so it would make sense to support it for value as well. Multiple created issues requesting the feature validate the needs of the community.

Why not to approximate it with the category scale?

Approximating continuous value scale with category one is not a great option because there is limitless set of sparse datasets which require adding many fake values to make the scale look continuous which affects performance. At the same time, the added fake empty values will be no distinguishable with real empty values coming from the dataset. This affects connectNulls option. Finally, besides the inability to provide the same functionality and experience with the approximation, it also disproportionately complicates the client code: find gcd of each interval, consider number of intervals per pixel, handle x-axis ticks so it shows only "nice" values, etc.

Fixed issues

Details

Before: What was the problem?

Stacking did not work on value xAxis. There are two stacked bar series on this screenshot:

Screenshot 2024-02-27 at 4 51 21 PM

After: How does it behave after the fixing?

Stacking works correctly on value xAxis:
Screenshot 2024-02-27 at 4 51 01 PM

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

If I understand the code correctly, existing API of ECharts does not let explicitly define whether a 2d cartesian chart is vertical or horizontal. It is decided based on X and Y axes types: if X-axis is ordinal or time, then it is a vertical chart but if Y-axis is one of these types then it is a horizontal chart. This leads to the undefined behavior when both X and Y axes have value type and there should be an option to set it explicitly for such cases. This PR strives to provide a minimalistic fix without changing API and breaking any existing defined behavior. It follows already existing logic of giving preference to X-axis dimension as the one to be stacked on dimension.

Copy link

echarts-bot bot commented Feb 27, 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.

@alxnddr alxnddr changed the title do not pick X coordinate dimension as stacked dimension when both X and Y are stackable Allow stacking on value xAxis Feb 27, 2024
@alxnddr alxnddr changed the title Allow stacking on value xAxis fix(axis): allow stacking on value xAxis Feb 27, 2024
@tim99919
Copy link

tim99919 commented Mar 4, 2024

Hello!
When can I expect this feature to be released in ECharts?

Thanks!

Copy link
Contributor

github-actions bot commented Mar 6, 2024

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

@admsev
Copy link

admsev commented May 25, 2024

@gooroodev review

@gooroodev
Copy link

1. Summary of Changes

The pull request aims to enable stacking on the value xAxis. The changes include:

  • Adding logic to identify if the y-axis dimension is stackable.
  • Modifying the conditions under which dimensions are considered for stacking to include checks for the y-axis stackability.
  • Ensuring compatibility with previous designs by forcing the stacking to be done by index if no specific dimension is provided for stacking.

2. Issues, Bugs, or Typos

Issue 1: Typo in Comments

  • The comment added in the new block of code has a small readability issue.

    // Compatible with previous design, value axis (time axis) only stack by index.
    // It may make sense if the user provides elaborately constructed data.

    Improvement:

    // Compatible with the previous design, where the value axis (time axis) only stacks by index.
    // This may make sense if the user provides elaborately constructed data.

Issue 2: Potential Redundancy in the isYCoordDimensionStackable Condition

  • The condition yCoordDimension != null is checked twice, once in the definition of isYCoordDimensionStackable and again in the condition yCoordDimension == null || (dimensionInfo.coordDim !== 'x' && isYCoordDimensionStackable). This could be simplified.

    Improvement:

    const isYCoordDimensionStackable = yCoordDimension != null
        && yCoordDimension.type !== 'ordinal' && yCoordDimension.type !== 'time';
    
    each(dimensionDefineList, function (dimensionInfo, index) {
        if (isString(dimensionInfo)) {
            dimensionDefineList[index] = dimensionInfo = {
                name: dimensionInfo
            };
        }
    
        if (!stackedDimInfo
            && dimensionInfo.type !== 'ordinal'
            && dimensionInfo.type !== 'time'
            && (dimensionInfo.coordDim !== 'x' || !isYCoordDimensionStackable)
            && (!stackedCoordDimension || stackedCoordDimension === dimensionInfo.coordDim)
        ) {
            stackedDimInfo = dimensionInfo;
        }
    });

3. General Review of Code Quality and Style

  • Code Quality: The code is well-structured and follows a logical flow. The added conditions and logic are clear and appropriately placed within the existing function.
  • Style: The code adheres to common TypeScript/JavaScript conventions. Variable names are descriptive, and comments are used to explain the logic.
  • Compatibility: The code maintains compatibility with previous designs, which is crucial for avoiding breaking changes.
  • Efficiency: The changes seem efficient and should not introduce significant performance overhead.

Overall, the pull request is well-implemented and makes the necessary changes to allow stacking on the value xAxis while maintaining compatibility with existing functionality. The suggested improvements are minor and primarily focused on readability and slight optimization.

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

@helgasoft
Copy link

helgasoft commented May 28, 2024

+1, good candidate for v.5.5.1
More related issues: #15102, #16656

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.

Thanks for making this pull request! A lot of developers are asking for this feature so it's nice to see this PR~

There seems to be a problem when the first series doesn't contain value while the second series has. See the demo.

Please add more test cases to ensure we considered enough marginal conditions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants