fix(axis): allow stacking on value xAxis

[alxnddr]

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

• [Bug] stack isn't working when xaxis type='value'  #16765
• [Bug] Unexpected behavior when using stacked lines in chart with x-axis of type 'value' #19400
• [Bug] bar chart x-axis incorrect when stacking multiple series #17522

Details

Before: What was the problem?

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

After: How does it behave after the fixing?

Stacking works correctly on value xAxis:

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.

[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.

[tim99919]

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

Thanks!

[github-actions]

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

[admsev]

@gooroodev review

[gooroodev]

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]

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

[Ovilia]

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.

[the-string-val]

Hi,

I need similar feature for my project. it seems we already have PR for the issue, when can we expect to get it committed?
I see @Ovilia has asked for some changes and i think it is expected behavior as it is value axis and not all series will have same values otherwise solution looks fine to me.