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: bar race #12484

Merged
merged 15 commits into from
Jun 22, 2020
Merged

feat: bar race #12484

merged 15 commits into from
Jun 22, 2020

Conversation

Ovilia
Copy link
Contributor

@Ovilia Ovilia commented Apr 24, 2020

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

Enables bar race for ECharts 5.0.

Fixed issues

Details

Before: What was the problem?

Bar race is a popular way to show time series data, and visualize the change in trends over time. See examples at flourish and amcharts.

This PR brings this feature to ECharts including:

  • realtime bar sorting and interchanging based on bar width
  • realtime label updating with interpolated values

It still have some bugs when axis has min or max to restrict on the bars to be filtered, which should be fixed in further PRs.

After: How is it fixed in this PR?

bar-race

Usage

Are there any API changes?

  • The API has been changed.

New options:

  • [xAxis|yAxis].realtimeSort
  • [xAxis|yAxis].sortSeriesIndex

Typical usage:

var option = {
    xAxis: {
    },
    yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D'],
        sort: true,
        realtimeSort: true,
        sortSeriesIndex: 0,
        inverse: true,
        axisLabel: {
            formatter: function (label, id) {
                return label + '-' + id;
            }
        },
        animationDuration: 300,
        animationDurationUpdate: 300,
        // max: 2
    },
    series: [{
        name: 'X',
        type: 'bar',
        data: [120, 200, 90, 240],
        label: {
            show: true,
            position: 'right',
            formatter: '{c}RMB',
            valueAnimation: true
        }
    }],
    legend: {
        show: true
    },
    animationDuration: 5000,
    animationDurationUpdate: 5000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
};

Related test cases or examples to use the new APIs

  • test/bar-race.html

Others

Merging options

  • Please squash the commits into a single one when merge.

Other information

@echarts-bot
Copy link

echarts-bot bot commented Apr 24, 2020

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.

@Ovilia Ovilia changed the title (WIP) feat: bar race feat: bar race Jun 18, 2020
@Ovilia Ovilia marked this pull request as ready for review June 18, 2020 06:03
src/chart/bar/BarView.ts Show resolved Hide resolved
src/chart/helper/labelHelper.ts Show resolved Hide resolved
@@ -447,6 +462,36 @@ class Grid implements CoordinateSystemMaster {
);
});
}

// function sortCategory(
// data: List,
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove the commented code if they are not used anymore

src/model/mixin/dataFormat.ts Show resolved Hide resolved
setCategorySortInfo(info: OrdinalSortInfo[]): void {
this._categorySortInfo = info;
}

Copy link
Contributor

Choose a reason for hiding this comment

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

I can't find the general logic of sorting the categories when realtimeSort is not set. Did I miss it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's not implemented yet. It will be fixed later.

@@ -35,6 +36,10 @@ interface CartesianAxisOption extends AxisBaseOption {
position?: CartesianAxisPosition;
// Offset is for multiple axis on the same position.
offset?: number;
sort?: boolean;
realtimeSort?: boolean;
sortSeriesIndex?: number;
Copy link
Contributor

Choose a reason for hiding this comment

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

Still not very show if it's better to put sort realtimeSort configuration on the series. Perhaps we can let developers do the decision.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Leave this as it is for now.

@pissang pissang self-requested a review June 18, 2020 07:14
Copy link
Contributor

@pissang pissang left a comment

Choose a reason for hiding this comment

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

Commented my questions.

@plainheart plainheart mentioned this pull request Jun 19, 2020
@Ovilia Ovilia linked an issue Jun 22, 2020 that may be closed by this pull request
@Ovilia Ovilia merged commit 79fbcb9 into next Jun 22, 2020
@echarts-bot
Copy link

echarts-bot bot commented Jun 22, 2020

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

@Ovilia Ovilia deleted the feat-bar-race branch June 22, 2020 09:23
@plainheart
Copy link
Member

plainheart commented Jul 6, 2020

@Ovilia Hi, thank you for your excellent work for bar race. Here I'd like to give some feedback for this new feature, please feel free to check and evaluate it.
Normally, if the value of bar doesn't change, the value of its label should not change and if changed, it should count from its previous newest value, but in fact, the value of bar label will always count from 0 when updating, just like the screenshot below:

unexpected

What I think it's expected is like this:

expected

That is,
1). The label of bar has no need to recount from 0 if its value has no change.
2). If its value changed, it should recount from its previous value, like the screenshot above.

What do you think of these?

EDITED: I saw it looks like working well in the screenshot you provided in PR description.

@Ovilia
Copy link
Contributor Author

Ovilia commented Jul 6, 2020

Yes, it should change from previous values. I think there might be a bug with this. Not sure about it. I will check it later.
This feature is not completed yet, I'm still working on show the top 10 bars with more data.
Thanks for your feedback! I will at you once I've completed the others.

Ovilia added a commit that referenced this pull request Jul 29, 2020
@Ovilia Ovilia mentioned this pull request Jul 29, 2020
4 tasks
Ovilia added a commit that referenced this pull request Aug 13, 2020
@Ovilia Ovilia mentioned this pull request Sep 7, 2020
3 tasks
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.

Chart race template
3 participants