354 lines
15 KiB
Dart
354 lines
15 KiB
Dart
import 'package:ernaehrung/android/components/meal_page_text/secondary_big_text_component.dart';
|
|
import 'package:ernaehrung/android/components/meal_page_text/secondary_text_component.dart';
|
|
import 'package:ernaehrung/android/components/meal_page_text/title_component.dart';
|
|
import 'package:ernaehrung/android/config/statistics.dart';
|
|
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
import '../../config/format_helper.dart';
|
|
|
|
class ProgressPage extends StatelessWidget {
|
|
final String title;
|
|
final Color backgroundColor = const Color(0xff47a44b);
|
|
|
|
const ProgressPage({Key? key, required this.title}) : super(key: key);
|
|
|
|
String get getTitle => title;
|
|
|
|
@override
|
|
String toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) {
|
|
return getTitle;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
decoration: const BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.all(Radius.circular(8))),
|
|
child: Padding(
|
|
padding:
|
|
const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
|
|
child: Column(
|
|
children: [
|
|
ValueListenableBuilder(
|
|
valueListenable: StatisticsService
|
|
.instance.dailyAverageForCurrentWeek,
|
|
builder: (context, value, child) {
|
|
return SizedBox(
|
|
height: 100,
|
|
width: 400,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const TitleComponent("Kalorien"),
|
|
const SizedBox(
|
|
height: 10,
|
|
),
|
|
const SecondaryTextComponent(
|
|
"Durchschnittlich"),
|
|
SecondaryBigTextComponent(
|
|
"${value.toString()} kcal/Tag"),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
ValueListenableBuilder(
|
|
valueListenable:
|
|
StatisticsService.instance.barChartData,
|
|
builder: (context, value, child) {
|
|
return SizedBox(
|
|
height: 300,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SizedBox(
|
|
height: 15,
|
|
// Adjust the height of the legend as needed
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
margin: const EdgeInsets.symmetric(
|
|
horizontal: 8.0),
|
|
// Adjust the spacing between legend items
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 12,
|
|
height: 12,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.red,
|
|
// Use the color of the first bar rod for the legend item
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
const SizedBox(width: 4.0),
|
|
// Adjust the spacing between the color indicator and the legend label
|
|
const Text(
|
|
'Frühstück',
|
|
// Replace with your desired legend label
|
|
style: TextStyle(
|
|
fontSize:
|
|
12), // Adjust the font size of the legend labels
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
margin: const EdgeInsets.symmetric(
|
|
horizontal: 8.0),
|
|
// Adjust the spacing between legend items
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 12,
|
|
height: 12,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.green,
|
|
// Use the color of the first bar rod for the legend item
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
const SizedBox(width: 4.0),
|
|
// Adjust the spacing between the color indicator and the legend label
|
|
const Text(
|
|
'Mittagessen',
|
|
// Replace with your desired legend label
|
|
style: TextStyle(
|
|
fontSize:
|
|
12), // Adjust the font size of the legend labels
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
margin: const EdgeInsets.symmetric(
|
|
horizontal: 8.0),
|
|
// Adjust the spacing between legend items
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 12,
|
|
height: 12,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.yellow,
|
|
// Use the color of the first bar rod for the legend item
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
const SizedBox(width: 4.0),
|
|
// Adjust the spacing between the color indicator and the legend label
|
|
const Text(
|
|
'Abendessen',
|
|
// Replace with your desired legend label
|
|
style: TextStyle(
|
|
fontSize:
|
|
12), // Adjust the font size of the legend labels
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
margin:
|
|
const EdgeInsets.fromLTRB(0, 24, 0, 0),
|
|
height: 250,
|
|
child: BarChart(
|
|
BarChartData(
|
|
barTouchData: barTouchData,
|
|
titlesData: titlesData,
|
|
borderData: borderData,
|
|
barGroups: value,
|
|
gridData: FlGridData(show: false),
|
|
alignment: BarChartAlignment.spaceAround,
|
|
extraLinesData: ExtraLinesData(
|
|
horizontalLines: [
|
|
HorizontalLine(
|
|
y: StatisticsService.instance.getCaloryTargetForOneDay(), // Specify the y-value where you want the line to be positioned
|
|
color: Colors.black, // Change the color as per your requirement
|
|
strokeWidth: 2, // Adjust the width as needed
|
|
dashArray: [3, 2],
|
|
label: HorizontalLineLabel(
|
|
show: true,
|
|
labelResolver: (x) => "Zielwert"
|
|
)
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
)),
|
|
Container(
|
|
margin: const EdgeInsets.fromLTRB(0, 16, 0, 0),
|
|
decoration: const BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.all(Radius.circular(8))),
|
|
child: Padding(
|
|
padding:
|
|
const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
|
|
child: ValueListenableBuilder(
|
|
valueListenable:
|
|
StatisticsService.instance.weeklyCaloryRanking,
|
|
builder: (context, value, child) {
|
|
return Column(
|
|
children: [
|
|
const TitleComponent(
|
|
"Lebensmittel mit dem höchsten Kaloriengehalt"),
|
|
const SizedBox(
|
|
height: 24,
|
|
),
|
|
for (var item in value.toSet())
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
SecondaryTextComponent(
|
|
getWeeklyRankingString(item.name)),
|
|
SecondaryTextComponent(
|
|
item.calories.toString()),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
))
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
BarTouchData get barTouchData => BarTouchData(
|
|
enabled: false,
|
|
touchTooltipData: BarTouchTooltipData(
|
|
tooltipBgColor: Colors.transparent,
|
|
tooltipPadding: EdgeInsets.zero,
|
|
tooltipMargin: 4,
|
|
getTooltipItem: (
|
|
BarChartGroupData group,
|
|
int groupIndex,
|
|
BarChartRodData rod,
|
|
int rodIndex,
|
|
) {
|
|
return BarTooltipItem(
|
|
rod.toY.round().toString(),
|
|
const TextStyle(
|
|
color: Colors.transparent,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
|
|
Widget getTitles(double value, TitleMeta meta) {
|
|
const style = TextStyle(
|
|
color: Colors.orange,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 14,
|
|
);
|
|
String text;
|
|
switch (value.toInt()) {
|
|
case 0:
|
|
text = 'M';
|
|
break;
|
|
case 1:
|
|
text = 'T';
|
|
break;
|
|
case 2:
|
|
text = 'W';
|
|
break;
|
|
case 3:
|
|
text = 'T';
|
|
break;
|
|
case 4:
|
|
text = 'F';
|
|
break;
|
|
case 5:
|
|
text = 'S';
|
|
break;
|
|
case 6:
|
|
text = 'S';
|
|
break;
|
|
default:
|
|
text = '';
|
|
break;
|
|
}
|
|
return SideTitleWidget(
|
|
axisSide: meta.axisSide,
|
|
space: 4,
|
|
child: Text(text, style: style),
|
|
);
|
|
}
|
|
|
|
FlTitlesData get titlesData => FlTitlesData(
|
|
show: true,
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 30,
|
|
getTitlesWidget: getTitles,
|
|
),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
),
|
|
),
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
getTitlesWidget: (value, _) {
|
|
// Return a custom widget for each axis value
|
|
return Container(
|
|
constraints:
|
|
const BoxConstraints.tightFor(width: double.infinity),
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(right: 3.0),
|
|
// Adjust the margin value as needed
|
|
child: FittedBox(
|
|
fit: BoxFit.scaleDown,
|
|
alignment: Alignment.centerLeft,
|
|
child: Text(
|
|
value.toInt().toString(),
|
|
style: const TextStyle(
|
|
color: Colors.orange,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
));
|
|
|
|
FlBorderData get borderData => FlBorderData(
|
|
show: true, // Set to true to display the chart border
|
|
border: const Border(
|
|
bottom: BorderSide(color: Colors.black, width: 1),
|
|
left:
|
|
BorderSide(color: Colors.black, width: 1), // Hide the left border
|
|
),
|
|
);
|
|
}
|