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

Gauge Chart #1424

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

FlorianArnould
Copy link
Contributor

The implementation of the gauge chart (discussed here #199)

@docs-page
Copy link

docs-page bot commented Aug 22, 2023

To view this pull requests documentation preview, visit the following URL:

docs.page/imanneo/fl_chart~1424

Documentation is deployed and generated using docs.page.

@codecov
Copy link

codecov bot commented Aug 22, 2023

Codecov Report

Merging #1424 (c4d5647) into master (04b18d2) will increase coverage by 0.54%.
The diff coverage is 93.15%.

@@            Coverage Diff             @@
##           master    #1424      +/-   ##
==========================================
+ Coverage   86.48%   87.02%   +0.54%     
==========================================
  Files          45       49       +4     
  Lines        2982     3245     +263     
==========================================
+ Hits         2579     2824     +245     
- Misses        403      421      +18     
Files Changed Coverage Δ
lib/src/chart/gauge_chart/gauge_chart.dart 0.00% <0.00%> (ø)
lib/src/chart/gauge_chart/gauge_chart_data.dart 98.93% <98.93%> (ø)
lib/src/chart/gauge_chart/gauge_chart_painter.dart 99.15% <99.15%> (ø)
...ib/src/chart/gauge_chart/gauge_chart_renderer.dart 100.00% <100.00%> (ø)

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

final bool showChangingColorTicks;

static GaugeTicks? lerp(GaugeTicks? a, GaugeTicks? b, double t) {
// TODO(FlorianArnould): if showChangingColorTicks are different
Copy link
Owner

Choose a reason for hiding this comment

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

Is this to do necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes if we want a smooth transition on the color ticks
But would be deleted if we go for another approach like discussed here
#1424 (comment)

double gaugeRadius(Size size) => size.shortestSide / 2;
}

class GaugePosition {
Copy link
Owner

Choose a reason for hiding this comment

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

Please make this class private (as we need this object only here)

}
}

class Range {
Copy link
Owner

Choose a reason for hiding this comment

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

Also this one

}
}

class DegreeAngleRange {
Copy link
Owner

@imaNNeo imaNNeo Sep 14, 2023

Choose a reason for hiding this comment

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

And here

@imaNNeo
Copy link
Owner

imaNNeo commented Sep 14, 2023

When I put tick count: 3, I see 4 thicks. Is it intentional?
image

List<Object?> get props => [color];
}

class VariableGaugeColor
Copy link
Owner

Choose a reason for hiding this comment

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

This is a confusing approach in this project. Because we didn't use this approach on the other charts.
I would prefer to have a callback to get the progress and return a color (what we do in other charts).
Or a list of colors if you want to handle the gradient.
By the way, I can add these kinds of improvements if you allow me

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The idea is to be able to display some colored ticks at the angle the color changes.
If you work with a callback, you cannot get this angle precisely and moreover your will need to call it a lot of times with values between 0 and 1 to scan when the color changes.

height: 250,
child: GaugeChart(
GaugeChartData(
value: _value,
Copy link
Owner

Choose a reason for hiding this comment

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

I think we can have a list of values (each value can have startAngle and endAngle).
Then we can draw them on top of each other.
This way, it is more customizable.

Look at these samples:

image image image

@FlorianArnould
Copy link
Contributor Author

When I put tick count: 3, I see 4 thicks. Is it intentional? image

The 3 grey's are the ticks you asked and the colored one is the one showed because of the showChangingColorTicks on GaugeTicks, this defaults to true

@imaNNeo
Copy link
Owner

imaNNeo commented Nov 11, 2023

Can you update your branch, please? And reply to the other discussions?

@Sun3
Copy link

Sun3 commented Mar 5, 2024

Any updates to adding the Gauge Chart?

Thank you.

@matecode
Copy link

matecode commented Apr 4, 2024

@FlorianArnould & @imaNNeo Thank you for your work on this topic. How can I help to push the Gauge Chart to the library?

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.

None yet

4 participants