Flutter-Ernaehrungsapp/lib/android/pages/nav_pages/progress_page.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;
  }

  /*
  * TODO: in versch. Dateien auslagern, damit der Code nicht voll gemüllt wird
  * */
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
          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("Täglicher Durchschnitt (in kcal)"),
                        const SizedBox(
                          height: 10,
                        ),
                        const SecondaryTextComponent("Durchschnittlich"),
                        SecondaryBigTextComponent("${value.toString()} kcal/Tag"),
                      ],
                    ),
                  );
                },
              ),
              ValueListenableBuilder(
                valueListenable: StatisticsService.instance.barChartData,
                builder: (context, value, child) {
                  return SizedBox(
                    height: 325,
                    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
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top:50.0), // Adjust the margin value as needed
                          child: SizedBox(
                            height: 250,
                            child: BarChart(
                              BarChartData(
                                barTouchData: barTouchData,
                                titlesData: titlesData,
                                borderData: borderData,
                                barGroups: value,
                                gridData: FlGridData(show: false),
                                alignment: BarChartAlignment.spaceAround,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
              ValueListenableBuilder(
                valueListenable: StatisticsService.instance.weeklyCaloryRanking,
                builder: (context, value, child) {
                  return Column(
                    //TODO: Loop through the values and display them dynamically
                    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
    ),
  );


}