Skip to content

Commit

Permalink
Use gauge with free license
Browse files Browse the repository at this point in the history
  • Loading branch information
@yaramt
yaramt committed Aug 18, 2024
1 parent 3d92f1c commit 3944ea9
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 81 deletions.
9 changes: 8 additions & 1 deletion app/lib/screens/study/report/sections/average_section_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,14 @@ class AverageSectionWidget extends ReportSectionWidget {
section,
),
const SizedBox(height: 8),
const GaugesWidget(),
GaugesWidget(
valuesInterventionA,
valuesInterventionB,
nameInterventionA,
nameInterventionB,
subject,
section,
),
const SizedBox(height: 8),
getLegend(context, data),
const SizedBox(height: 8),
Expand Down
204 changes: 126 additions & 78 deletions app/lib/screens/study/report/sections/results_gauge.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:gauge_indicator/gauge_indicator.dart';
import 'package:statistics/statistics.dart';
import 'package:studyu_app/screens/study/report/sections/average_section_widget.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

class GaugeTitleWidget extends AverageSectionWidget {
const GaugeTitleWidget(
Expand All @@ -14,15 +15,28 @@ class GaugeTitleWidget extends AverageSectionWidget {
return Center(
child: Text(
'Average ${section.title ?? ''}',
style: const TextStyle(fontSize: 16, color: Colors.blueAccent),
style: const TextStyle(fontSize: 16, color: Colors.black87),
),
);
}
}

// Two gauges
class GaugesWidget extends StatelessWidget {
const GaugesWidget({super.key});
class GaugesWidget extends AverageSectionWidget {
final String nameInterventionA;
final String nameInterventionB;
final num meanInterventionA;
final num meanInterventionB;

GaugesWidget(
List<num> valuesInterventionA,
List<num> valuesInterventionB,
this.nameInterventionA,
this.nameInterventionB,
super.subject,
super.section, {
super.key,
}) : meanInterventionA = valuesInterventionA.mean,
meanInterventionB = valuesInterventionB.mean;

@override
Widget build(BuildContext context) {
Expand All @@ -31,98 +45,132 @@ class GaugesWidget extends StatelessWidget {
Expanded(
child: Column(
children: <Widget>[
SizedBox(
width: 140,
height: 140,
child: createGauge(0, 10, 10, 5), // min, max, steps, value
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(12.0),
),
child: SizedBox(
width: 160,
height: 160,
child: createGauge(0, 10, meanInterventionA,
nameInterventionA), // min, max, value
),
),
const Text('With Tea', style: TextStyle(fontSize: 14)),
],
),
),
Expanded(
child: Column(
children: <Widget>[
SizedBox(
width: 140,
height: 140,
child: createGauge(0, 10, 10, 7.5), // min, max, steps, value
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(12.0),
),
child: SizedBox(
width: 160,
height: 160,
child: createGauge(0, 10, meanInterventionB,
nameInterventionB), // min, max, value
),
),
const Text('Without Tea', style: TextStyle(fontSize: 14)),
],
),
),
],
);
}

// Create gauge with min and max values, steps to switch colors, value to point at
Widget createGauge(double min, double max, int steps, double value) {
// List of colors
final List<Color> colors = [
Colors.red[900]!,
Colors.red[700]!,
Colors.red[500]!,
Colors.orange[900]!,
Colors.orange[700]!,
Colors.yellow[700]!,
Colors.yellow[500]!,
Colors.green[300]!,
Colors.green[500]!,
Colors.green[700]!,
];
Widget createGauge(
double min, double max, num value, String nameIntervention) {
const Color gaugeBackgroundColor = Color(0xFFDFE2EC);

// Create gauge ranges based on steps and the color list
List<GaugeRange> createRanges() {
final double stepValue = (max - min) / steps;
return List.generate(steps, (index) {
final double start = min + (index * stepValue);
final double end = start + stepValue;
return GaugeRange(
startValue: start,
endValue: end,
color: colors[index],
);
});
}

return SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
minimum: min,
maximum: max,
pointers: <GaugePointer>[
NeedlePointer(
value: value,
needleColor: Colors.blue,
needleEndWidth: 7,
return Stack(
alignment: Alignment.center,
children: [
AnimatedRadialGauge(
duration: const Duration(seconds: 1),
curve: Curves.elasticOut,
radius: 100,
value: value.toDouble(),
axis: GaugeAxis(
min: min,
max: max,
degrees: 240, // Set to 240 degrees for a 3/4 circular gauge
style: const GaugeAxisStyle(
background: gaugeBackgroundColor,
segmentSpacing: 4,
),
pointer: const GaugePointer.needle(
width: 10,
height: 50,
borderRadius: 8,
color: Color(0xFF193663),
),
],
ranges: createRanges(),
annotations: <GaugeAnnotation>[
GaugeAnnotation(
widget: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: '$value',
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
TextSpan(
text: '/$max',
style: const TextStyle(fontSize: 10, color: Colors.blue),
),
],
progressBar: null, // Disable the progress bar
segments: [
GaugeSegment(from: 0, to: 1, color: Colors.red[900]!),
const GaugeSegment(from: 1, to: 2, color: Colors.red),
GaugeSegment(from: 2, to: 3, color: Colors.orange[900]!),
const GaugeSegment(from: 3, to: 4, color: Colors.orange),
const GaugeSegment(from: 4, to: 5, color: Colors.yellow),
const GaugeSegment(from: 5, to: 6, color: Colors.lightGreen),
GaugeSegment(from: 6, to: 7, color: Colors.green[600]!),
GaugeSegment(from: 7, to: 8, color: Colors.green[700]!),
GaugeSegment(from: 8, to: 9, color: Colors.green[800]!),
GaugeSegment(from: 9, to: 10, color: Colors.green[900]!),
],
),
),
// Text placed inside the gauge box
Positioned(
bottom:
30, // Position text inside the gauge without overlapping the needle
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: value.toStringAsFixed(1),
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors
.black87,
),
),
),
angle: 90,
positionFactor: 0.8,
const TextSpan(
text: '/10',
style: TextStyle(
fontSize: 12,
color: Colors
.black,
),
),
],
),
],
),
),
Positioned(
bottom: 0,
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: nameIntervention,
style: const TextStyle(
fontSize: 15,
color: Colors
.black,
),
),
],
),
),
),
],
);
Expand Down
2 changes: 1 addition & 1 deletion app/lib/screens/study/report/sections/results_textual_summary.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ class TextualSummaryWidget extends AverageSectionWidget {
nameInterventionB,
style: const TextStyle(
fontSize: 16,
color: Colors.orange,
color: Colors.deepOrangeAccent,
fontWeight: FontWeight.bold,
),
),
Expand Down
2 changes: 1 addition & 1 deletion app/pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ dependencies:
flutter_web_plugins:
sdk: flutter
flutter_widget_from_html: ^0.15.1
gauge_indicator: ^0.4.3
intersperse: ^2.0.0
intl: ^0.19.0
material_design_icons_flutter: ^7.0.7296
Expand All @@ -43,7 +44,6 @@ dependencies:
statistics: ^1.1.1
studyu_core: ^4.4.5
studyu_flutter_common: ^1.8.6
syncfusion_flutter_gauges: ^20.1.59
supabase: ^2.2.4
supabase_flutter: ^2.5.8
timeline_tile: ^2.0.0
Expand Down

0 comments on commit 3944ea9

Please sign in to comment.