Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.57k
stars
771
forks
source link
Allow NumericAxis to have custom number(value) formatting #2098
Say we want to display a chart SfCartesianChart, LineSeries with NumericAxis
Where values are say 'network speed' or 'duration' or 'file size'.
These values may not be in the same unit, but on the chart we still want to maintain the relative sizes between them, if it make sense.
For example
Say on X axis we want to show 'duration' - we can't show it in a specific unit, cuz say on one chart we may have seconds, but also hours.
Or say we want to show memory usage. Some memory usage will be in Kb, some in Mb, some in Gb. Showing in the units that make sense to the user, based on the value itself.
Now, NumericAxis already has numberFormat which is of type NumberFormat
And one could create own NumberFormat, but this extending a std lib class, which I feel is not meant to be extended.
Here is an example for Duration number format that sort-of works: (you can see I had to implement some defaults, else something is using them and the it throws)
Custom NumberFormat
```dart
mixin CustomNumberFormat implements NumberFormat {}
class DurationNumberFormat with CustomNumberFormat {
@override
String? currencyName;
@override
int maximumFractionDigits = 2;
@override
int maximumIntegerDigits = 5;
@override
int? maximumSignificantDigits;
@override
int minimumExponentDigits = 5;
@override
int minimumFractionDigits = 5;
@override
int minimumIntegerDigits = 5;
@override
int? minimumSignificantDigits;
@override
bool minimumSignificantDigitsStrict = false;
@override
int? significantDigits;
@override
bool significantDigitsInUse = false;
@override
String get currencySymbol => throw UnimplementedError();
@override
int? get decimalDigits => throw UnimplementedError();
@override
String format(number) {
return prettyDuration(Duration(milliseconds: number), abbreviated: true);
}
@override
String get locale => throw UnimplementedError();
@override
int get localeZero => throw UnimplementedError();
@override
int get multiplier => throw UnimplementedError();
@override
String get negativePrefix => throw UnimplementedError();
@override
String get negativeSuffix => throw UnimplementedError();
@override
num parse(String text) {
throw UnimplementedError();
}
@override
R parseWith>(P Function(NumberFormat p1, String p2) parserGenerator, String text) {
throw UnimplementedError();
}
@override
String get positivePrefix => throw UnimplementedError();
@override
String get positiveSuffix => throw UnimplementedError();
@override
String simpleCurrencySymbol(String currencyCode) {
throw UnimplementedError();
}
@override
NumberSymbols get symbols => throw UnimplementedError();
@override
num? tryParse(String text) {
throw UnimplementedError();
}
@override
R? tryParseWith>(P Function(NumberFormat p1, String p2) parserGenerator, String text) {
throw UnimplementedError();
}
@override
void turnOffGrouping() {
}
}
```
Allow users of this lib to provide custom formatter ( maybe could be even used not on numbers too?)
For example, as a bare minimum we could do something like this:
abstract class SfFormatter<T> {
String format(T value);
}
But it would be helpful for to provide a hint where the format will be applied in, for example you may want to be short on X/Y axis format, but can provide longer format in the trackball popup.
On which target platforms have you observed this bug?
Android, iOS, Web, Web (Android browser), Web (iOS browser), Windows, macOS, Linux
Flutter Doctor output
Doctor output
```console
[✓] Flutter (Channel stable, 3.22.3, on Fedora Linux 40 (KDE Plasma) 6.10.10-200.fc40.x86_64, locale en_NZ.UTF-8)
• Flutter version 3.22.3 on channel stable at /opt/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b0850beeb2 (2 months ago), 2024-07-16 21:43:41 -0700
• Engine revision 235db911ba
• Dart version 3.4.4
• DevTools version 2.34.3
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /home/deishelon/Android/Sdk
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Linux toolchain - develop for Linux desktop
• clang version 18.1.8 (Fedora 18.1.8-1.fc40)
• cmake version 3.28.2
• ninja version 1.12.1
• pkg-config version 2.1.1
[✓] Android Studio (version 2024.1)
• Android Studio at /home/deishelon/.local/share/JetBrains/Toolbox/apps/android-studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.2)
• IntelliJ at /home/deishelon/.local/share/JetBrains/Toolbox/apps/intellij-idea-ultimate
• Flutter plugin version 81.1.3
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Fedora Linux 40 (KDE Plasma) 6.10.10-200.fc40.x86_64
• Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.58
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
```
Bug description
Say we want to display a chart SfCartesianChart, LineSeries with NumericAxis Where values are say 'network speed' or 'duration' or 'file size'.
These values may not be in the same unit, but on the chart we still want to maintain the relative sizes between them, if it make sense. For example
Now,
NumericAxis
already hasnumberFormat
which is of typeNumberFormat
And one could create own NumberFormat, but this extending a std lib class, which I feel is not meant to be extended. Here is an example for Duration number format that sort-of works: (you can see I had to implement some defaults, else something is using them and the it throws)
Custom NumberFormat
```dart mixin CustomNumberFormat implements NumberFormat {} class DurationNumberFormat with CustomNumberFormat { @override String? currencyName; @override int maximumFractionDigits = 2; @override int maximumIntegerDigits = 5; @override int? maximumSignificantDigits; @override int minimumExponentDigits = 5; @override int minimumFractionDigits = 5; @override int minimumIntegerDigits = 5; @override int? minimumSignificantDigits; @override bool minimumSignificantDigitsStrict = false; @override int? significantDigits; @override bool significantDigitsInUse = false; @override String get currencySymbol => throw UnimplementedError(); @override int? get decimalDigits => throw UnimplementedError(); @override String format(number) { return prettyDuration(Duration(milliseconds: number), abbreviated: true); } @override String get locale => throw UnimplementedError(); @override int get localeZero => throw UnimplementedError(); @override int get multiplier => throw UnimplementedError(); @override String get negativePrefix => throw UnimplementedError(); @override String get negativeSuffix => throw UnimplementedError(); @override num parse(String text) { throw UnimplementedError(); } @override R parseWithAnd you can use it as such:
Proposal:
But it would be helpful for to provide a hint where the format will be applied in, for example you may want to be short on X/Y axis format, but can provide longer format in the trackball popup.
So maybe this:
is a bit more optimial.
Steps to reproduce
As above
Code sample
As above
Screenshots or Video
NaN
Stack Traces
NaN
On which target platforms have you observed this bug?
Android, iOS, Web, Web (Android browser), Web (iOS browser), Windows, macOS, Linux
Flutter Doctor output
Doctor output
```console [✓] Flutter (Channel stable, 3.22.3, on Fedora Linux 40 (KDE Plasma) 6.10.10-200.fc40.x86_64, locale en_NZ.UTF-8) • Flutter version 3.22.3 on channel stable at /opt/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision b0850beeb2 (2 months ago), 2024-07-16 21:43:41 -0700 • Engine revision 235db911ba • Dart version 3.4.4 • DevTools version 2.34.3 [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /home/deishelon/Android/Sdk ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/linux#android-setup for more details. [✓] Chrome - develop for the web • Chrome at google-chrome [✓] Linux toolchain - develop for Linux desktop • clang version 18.1.8 (Fedora 18.1.8-1.fc40) • cmake version 3.28.2 • ninja version 1.12.1 • pkg-config version 2.1.1 [✓] Android Studio (version 2024.1) • Android Studio at /home/deishelon/.local/share/JetBrains/Toolbox/apps/android-studio • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314) [✓] IntelliJ IDEA Ultimate Edition (version 2024.2) • IntelliJ at /home/deishelon/.local/share/JetBrains/Toolbox/apps/intellij-idea-ultimate • Flutter plugin version 81.1.3 • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] Connected device (2 available) • Linux (desktop) • linux • linux-x64 • Fedora Linux 40 (KDE Plasma) 6.10.10-200.fc40.x86_64 • Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.58 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```