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

Added initial animation for LineChart / BarChart / RadarChart #1445

Closed

Conversation

Dartek12
Copy link
Contributor

@Dartek12 Dartek12 commented Sep 22, 2023

PR adds some animations at the first appearance of the widgets: LineChart / BarChart / RadarChart. It is enabled by default but can be disabled by providing simple configuration object.
For line/bar charts it works by replacing displayed data with datasets where y axis values are zeroed (most of the time) so that they are animated from the bottom of the graph by evaluating the tween up to the target/initial data.
For radar chart a scaleFactor value was introduced for the renderer so that it can multiply the target distance from the center of the radar to the target point. It is used in the initial animation by moving from scaleFactor 0 to 1.

untitled

Issue: #406

@codecov
Copy link

codecov bot commented Sep 30, 2023

Codecov Report

Merging #1445 (2278ab3) into master (79e6ec7) will increase coverage by 2.84%.
The diff coverage is 94.66%.

❗ Current head 2278ab3 differs from pull request most recent head ecb1256. Consider uploading reports for the commit ecb1256 to get more accurate results

@@            Coverage Diff             @@
##           master    #1445      +/-   ##
==========================================
+ Coverage   86.54%   89.38%   +2.84%     
==========================================
  Files          45       47       +2     
  Lines        2996     3044      +48     
==========================================
+ Hits         2593     2721     +128     
+ Misses        403      323      -80     
Files Coverage Δ
lib/src/chart/line_chart/line_chart.dart 53.62% <100.00%> (+53.62%) ⬆️
lib/src/chart/radar_chart/radar_chart.dart 100.00% <100.00%> (+100.00%) ⬆️
lib/src/chart/radar_chart/radar_chart_painter.dart 99.57% <100.00%> (ø)
lib/src/chart/bar_chart/bar_chart.dart 61.53% <95.23%> (+61.53%) ⬆️
...chart/base/base_chart/initial_animation_mixin.dart 95.00% <95.00%> (ø)
...se/base_chart/initial_animation_configuration.dart 33.33% <33.33%> (ø)

... and 5 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@Dartek12 Dartek12 force-pushed the issue-406-initial-animation branch from ce469e5 to 2278ab3 Compare October 1, 2023 17:50
@Dartek12 Dartek12 force-pushed the issue-406-initial-animation branch from 2278ab3 to ecb1256 Compare October 7, 2023 09:00
@jebstern
Copy link

If data changes, will e.g Bar values jump to zero, then animate to new values?

@Dartek12
Copy link
Contributor Author

@jebstern That should not happen based on this PR, it would animate from current values to the next ones


T getAppearanceAnimationData(T data);

double getAppearanceValue(double minY, double maxY) {
Copy link
Owner

Choose a reason for hiding this comment

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

We have PieChart and RadarChart which are not axis-based charts, so we need to implement an approach that supports all kinds of charts. (In the future, we will add more chart types which are not axis-based. Such as GaugeChart)

@imaNNeo
Copy link
Owner

imaNNeo commented Nov 12, 2023

Hi, Thanks for contributing!
I think this approach is not customizable, for example, suppose I want to animate the x-axis of my line chart. Or suppose I want to animate the values of my PieChart sections, or ...
This feature (initial animation) is one of the most wanted features by the users and if we merge this approach, it would be hard to develop a new approach and force users to migrate to the new approach (Otherwise we need to handle backward compatibility)

That's why I write the points that are on my head here, then you can try to implement them:

  • Animation starts when the widget is created (for the first time) and can be disabled by the user by passing something like an AnimationController. In this way, the user needs to show it manually when the widget is created or run it whenever they want.
  • It should be highly customizable (as we develop a highly customizable chart library). Users can override a method|callback to customize the animation. For example, they can animate the x-axis of the line chart, or animate each line separately in a sequence. Or I might want to animate the radius of my PieChart. These can be some pre-defined animations which user can choose from. Also, they can create a new one (or maybe they can contribute the created one to add as a pre-defined animation)
  • The user should be able to handle the animation and it should be different from the swapAnimation which runs whenever data changes (color, size,...)

@Dartek12
Copy link
Contributor Author

Dartek12 commented Dec 1, 2023

Hi, thank you for your comments regarding this issue. I agree with your points but my initial intention was to just give users the ability to animate on start the same way we animate between data sets changes. As of the moment I don't have any intention on working further on it and I hope the code provided gives some starting point for the others

@imaNNeo
Copy link
Owner

imaNNeo commented Dec 3, 2023

Nice, thanks for letting me know about your intention. So I will close the PR.

@imaNNeo imaNNeo closed this Dec 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants