flutter_application_1/lib/pages/chart_page.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_application_1/widgets/chart_widget.dart';

// Widget für die Seite, die das gestapelte Säulendiagramm anzeigt
class ChartPage extends StatelessWidget {
  final List<double> investedMoneyList; // Liste der investierten Geldbeträge
  final List<double> compoundInterestList; // Liste der zusammengesetzten Zinsen

  const ChartPage({
    super.key,
    required this.investedMoneyList,
    required this.compoundInterestList,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Container(
              padding: EdgeInsets.only(
                left: 10,
                right: 10,
                top: MediaQuery.of(context).padding.top + 10,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                    icon: const Icon(CupertinoIcons.chevron_left, size: 15),
                    onPressed: () {
                      Navigator.pop(context); // Zurück zur vorherigen Seite
                    },
                  ),
                  const Text(
                    'Grafik',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(width: 40),
                ],
              ),
            ),
          ),
          // Anzeige des gestapelten Säulendiagramms
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: StackedColumnChart(
                lowerValues: investedMoneyList,
                upperValues: compoundInterestList,
              ),
            ),
          ),
          // Tabelle mit Einzahlungen, Zinsen und Endkapital
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                decoration: BoxDecoration(
                  color: CupertinoColors.black,
                  borderRadius: BorderRadius.circular(5),
                ),
                clipBehavior: Clip.antiAlias,
                child: Table(
                  columnWidths: const {
                    0: FixedColumnWidth(60),
                    1: FlexColumnWidth(),
                    2: FlexColumnWidth(),
                    3: FlexColumnWidth(),
                  },
                  border: TableBorder.symmetric(
                    inside: const BorderSide(
                      color: CupertinoColors.white,
                      width: 1,
                    ),
                  ),
                  children: [
                    // Tabellenkopf
                    const TableRow(
                      decoration: BoxDecoration(
                        color: CupertinoColors.darkBackgroundGray,
                      ),
                      children: [
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Text(
                            'Jahr',
                            style: TextStyle(
                              color: CupertinoColors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Text(
                            'Einzahlungen',
                            style: TextStyle(
                              color: CupertinoColors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Text(
                            'Zinsen',
                            style: TextStyle(
                              color: CupertinoColors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Text(
                            'Endkapital',
                            style: TextStyle(
                              color: CupertinoColors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ],
                    ),
                    // Datenzeilen
                    for (int i = 0; i < investedMoneyList.length; i++)
                      TableRow(
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              '${i + 1}',
                              style: const TextStyle(color: CupertinoColors.white),
                              textAlign: TextAlign.center,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              '€${investedMoneyList[i]}',
                              style: const TextStyle(color: CupertinoColors.white),
                              textAlign: TextAlign.center,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              '€${compoundInterestList[i]}',
                              style: const TextStyle(color: CupertinoColors.white),
                              textAlign: TextAlign.center,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              '€${compoundInterestList[i] + investedMoneyList[i]}',
                              style: const TextStyle(color: CupertinoColors.white),
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ],
                      ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}