feat: remake graph view

CHANGELOG.md

@@ -12,6 +12,10 @@
 - Fix starting balance not saving
 - Fix overlay disabling tappig on edit/delete buttons on home view
 - Allow changing dates on entries
+- Graph view now uses tabs
+- Graphs now display correct tooltips when displaying only income or only expenses
+- Change graph container style when using light mode
+- Make pie chart values more visible by adding the category's corresponding color as background
 # 1.0.0-alpha+5
 - Add tests
 - Add searching through entries to homepage

lib/l10n/app_cs.arb

@@ -111,8 +111,16 @@
     "sortOldest":"Nejstarší první",
     "sort":"Seřadit",
     "search":"Prohledat",
-    "expensesPerYear":"Měsíční výdaje v roce {year}",
+    "expensesPerYear":"Výdaje za měsíc v roce {year}",
-    "expensesPerMonth":"Denní výdaje během měsíce {monthYear}",
+    "expensesPerMonth":"Výdaje za den během měsíce {monthYear}",
-    "expensesPerCategory":"Dohromady výdaje za kategorii",
+    "date":"Datum",
-    "date":"Datum"
+    "incomePlural":"Příjmy",
+    "incomePerYear":"Příjmy za měsíc v roce {year}",
+    "incomePerMonth":"Příjmy za den během měsíce {monthYear}",
+    "expensesPerMonthCategory":"Výdaje podle kategorie během měsíce {monthYear}",
+    "expensesPerYearCategory":"Výdaje podle kategorie za rok {year}",
+    "incomePerYearCategory":"Příjmy podle kategorie za rok {year}",
+    "incomePerMonthCategory":"Příjmy podle kategorie za měsíc {monthYear}",
+    "selectYear":"Zvolte rok",
+    "selectMonth":"Zvolte měsíc a rok"
 }

lib/l10n/app_en.arb

@@ -247,6 +247,71 @@
             }
         }
     },
-    "expensesPerCategory":"Total expenses per category",
+    "incomePerYear":"Income per month in {year}",
-    "date":"Date"
+    "@incomePerYear":{
+        "placeholders": {
+            "year":{
+                "description": "The year of the monthly expense sum",
+                "example": "2024",
+                "type": "int"
+            }
+        }
+    },
+    "incomePerMonth":"Income per day during {monthYear}",
+    "@incomePerMonth":{
+        "placeholders": {
+            "monthYear":{
+                "description": "Month and year formatted through DateFormat class",
+                "example": "June, 2024",
+                "type": "String"
+            }
+        }
+    },
+    "date":"Date",
+    "incomePlural":"Income",
+    "@incomePlural":{
+        "description": "Plural form of 'Income'"
+    },
+    "expensesPerMonthCategory":"Expenses per category during {monthYear}",
+    "@expensesPerMonthCategory":{
+        "placeholders": {
+            "monthYear":{
+                "description": "Month and year formatted through DateFormat class",
+                "example": "June, 2024",
+                "type": "String"
+            }
+        }
+    },
+    "expensesPerYearCategory":"Expenses per category in {year}",
+    "@expensesPerYearCategory":{
+        "placeholders": {
+            "year":{
+                "description": "The year",
+                "example": "2024",
+                "type": "int"
+            }
+        }
+    },
+    "incomePerMonthCategory":"Income per category during {monthYear}",
+    "@incomePerMonthCategory":{
+        "placeholders": {
+            "monthYear":{
+                "description": "Month and year formatted through DateFormat class",
+                "example": "June, 2024",
+                "type": "String"
+            }
+        }
+    },
+    "incomePerYearCategory":"Income per category in {year}",
+    "@incomePerYearCategory":{
+        "placeholders": {
+            "year":{
+                "description": "The year",
+                "example": "2024",
+                "type": "int"
+            }
+        }
+    },
+    "selectYear":"Select a year",
+    "selectMonth":"Select a month and year"
 }

lib/util/graphs.dart

@@ -77,7 +77,8 @@ class ExpensesLineChart extends StatelessWidget {
               (index) => LineTooltipItem(
                 // Changes what's rendered on the tooltip
                 // when clicked in the chart
-                (spots[index].barIndex == 0) // income chart
+                (spots[index].barIndex == 0 &&
+                        incomeData.isNotEmpty) // income chart
                     ? (yearly
                         ? AppLocalizations.of(context).incomeForMonth(
                             DateFormat.MMMM(locale).format(
@@ -122,14 +123,11 @@ class ExpensesLineChart extends StatelessWidget {
                           )),
                 TextStyle(color: spots[index].bar.color),
                 children: [
-                  TextSpan(
+                  if (!yearly)
-                    text: "\n${yearly ? DateFormat.MMMM(locale).format(
+                    TextSpan(
-                        DateTime(
+                      text:
-                          date.year,
+                          "\n${DateFormat.yMMMMd(locale).format(DateTime(date.year, date.month, spots[index].spotIndex + 1))}",
-                          index + 1,
+                    ),
-                        ),
-                      ) : DateFormat.yMMMMd(locale).format(DateTime(date.year, date.month, spots[index].spotIndex + 1))}",
-                  ),
                 ],
               ),
             ),
@@ -137,12 +135,11 @@ class ExpensesLineChart extends StatelessWidget {
         ),
         maxY: maxY,
         maxX: yearly
-            ? 12
+            ? 11
             : date.lastDay.toDouble() -
                 1, // remove 1 because we are indexing from 0
         minY: 0,
         minX: 0,
-        backgroundColor: Theme.of(context).colorScheme.background,
         lineBarsData: [
           if (incomeData.isNotEmpty)
             LineChartBarData(
@@ -186,14 +183,16 @@ class ExpensesLineChart extends StatelessWidget {
           topTitles: const AxisTitles(),
           leftTitles: AxisTitles(
             sideTitles: SideTitles(
-              reservedSize: (NumberFormat.compact()
+              reservedSize: ((expenseDataSorted.isNotEmpty &&
-                              .format(expenseDataSorted.last)
+                          NumberFormat.compact(locale: locale)
-                              .length >=
+                                  .format(expenseDataSorted.last)
-                          5 ||
+                                  .length >=
-                      NumberFormat.compact()
+                              5) ||
-                              .format(incomeDataSorted.last)
+                      (incomeDataSorted.isNotEmpty &&
-                              .length >=
+                          NumberFormat.compact(locale: locale)
-                          5)
+                                  .format(incomeDataSorted.last)
+                                  .length >=
+                              5))
                   ? 50
                   : 25,
               showTitles: true,
@@ -290,7 +289,7 @@ class ExpensesBarChart extends StatelessWidget {
               getTooltipItem: (group, groupIndex, rod, rodIndex) =>
                   yearly // create custom tooltips for graph bars
                       ? BarTooltipItem(
-                          (rodIndex == 1)
+                          (rodIndex == 1 || incomeData.isEmpty) // expense
                               ? AppLocalizations.of(context).expensesForMonth(
                                   DateFormat.MMMM(locale).format(
                                     DateTime(date.year, groupIndex + 1),
@@ -302,6 +301,7 @@ class ExpensesBarChart extends StatelessWidget {
                                   ).format(rod.toY),
                                 )
                               : AppLocalizations.of(context).incomeForMonth(
+                                  // income
                                   DateFormat.MMMM(locale).format(
                                     DateTime(date.year, groupIndex + 1),
                                   ),
@@ -392,6 +392,7 @@ class CategoriesPieChart extends StatefulWidget {
     required this.entries,
     required this.categories,
     required this.symbol,
+    required this.locale,
     super.key,
   });
 
@@ -404,6 +405,9 @@ class CategoriesPieChart extends StatefulWidget {
   /// Currency symbol displayed on the chart
   final String symbol;
 
+  /// User locale
+  final String locale;
+
   @override
   State<CategoriesPieChart> createState() => _CategoriesPieChartState();
 }
@@ -465,8 +469,10 @@ class _CategoriesPieChartState extends State<CategoriesPieChart> {
                 sections: List<PieChartSectionData>.generate(
                   widget.categories.length,
                   (index) => PieChartSectionData(
-                    title: NumberFormat.compactCurrency(symbol: widget.symbol)
+                    title: NumberFormat.compactCurrency(
-                        .format(
+                      symbol: widget.symbol,
+                      locale: widget.locale,
+                    ).format(
                       widget.entries
                           .where(
                             (element) =>
@@ -483,6 +489,7 @@ class _CategoriesPieChartState extends State<CategoriesPieChart> {
                       color:
                           widget.categories[index].color.calculateTextColor(),
                       fontWeight: FontWeight.bold,
+                      backgroundColor: widget.categories[index].color,
                     ),
                     color: widget.categories[index].color,
                     value: widget.entries

lib/views/graph_view.dart

@@ -1,6 +1,8 @@
 import 'dart:async';
 
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:intl/intl.dart';
 import 'package:prasule/api/category.dart';
@@ -14,6 +16,7 @@ import 'package:prasule/util/utils.dart';
 import 'package:prasule/views/settings/settings.dart';
 import 'package:prasule/views/setup.dart';
 import 'package:shared_preferences/shared_preferences.dart';
+import 'package:wheel_chooser/wheel_chooser.dart';
 
 /// Shows data from a [Wallet] in graphs
 class GraphView extends StatefulWidget {
@@ -29,9 +32,7 @@ class _GraphViewState extends State<GraphView> {
   Wallet? selectedWallet;
   List<Wallet> wallets = [];
   String? locale;
-  Set<String> yearlyBtnSet = {"monthly"};
+  bool yearly = true;
-  Set<String> graphTypeSet = {"expense", "income"};
-  bool get yearly => yearlyBtnSet.contains("yearly");
 
   @override
   void didChangeDependencies() {
@@ -66,6 +67,8 @@ class _GraphViewState extends State<GraphView> {
     return data;
   }
 
+  final availableYears = <WheelChoice<int>>[];
+
   Future<void> loadWallet() async {
     wallets = await WalletManager.listWallets();
     if (wallets.isEmpty && mounted) {
@@ -76,6 +79,17 @@ class _GraphViewState extends State<GraphView> {
       return;
     }
     selectedWallet = wallets.first;
+    availableYears.clear();
+    for (final entry in selectedWallet!.entries) {
+      if (!availableYears.any((element) => element.value == entry.date.year)) {
+        availableYears.add(
+          WheelChoice<int>(
+            value: entry.date.year,
+            title: entry.date.year.toString(),
+          ),
+        );
+      }
+    }
     setState(() {});
   }
 
@@ -92,275 +106,611 @@ class _GraphViewState extends State<GraphView> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return DefaultTabController(
-      floatingActionButton: Tooltip(
+      length: 2,
-        message: AppLocalizations.of(context).changeDate,
+      child: Scaffold(
-        child: FloatingActionButton(
+        floatingActionButton: Tooltip(
-          child: const Icon(Icons.calendar_month),
+          message: AppLocalizations.of(context).changeDate,
-          onPressed: () async {
+          child: FloatingActionButton(
-            final firstDate = (selectedWallet!.entries
+            child: const Icon(Icons.calendar_month),
-                  ..sort(
+            onPressed: () async {
-                    (a, b) => a.date.compareTo(b.date),
+              var selectedYear = _selectedDate.year;
-                  ))
+              var selectedMonth = _selectedDate.month;
-                .first
+              await showAdaptiveDialog<void>(
-                .date;
+                context: context,
-            final newDate = await showDatePicker(
+                builder: (c) => AlertDialog.adaptive(
-              context: context,
+                  title: Text(
-              initialDate: DateTime(
+                    yearly
-                _selectedDate.year,
+                        ? AppLocalizations.of(context).selectYear
-                _selectedDate.month,
+                        : AppLocalizations.of(context).selectMonth,
-              ),
-              firstDate: firstDate,
-              lastDate: DateTime.now(),
-              initialEntryMode: yearly
-                  ? DatePickerEntryMode.input
-                  : DatePickerEntryMode.calendar,
-              initialDatePickerMode:
-                  yearly ? DatePickerMode.year : DatePickerMode.day,
-            );
-            if (newDate == null) return;
-            _selectedDate = newDate;
-            setState(() {});
-          },
-        ),
-      ),
-      appBar: AppBar(
-        title: DropdownButton<int>(
-          value:
-              (selectedWallet == null) ? -1 : wallets.indexOf(selectedWallet!),
-          items: [
-            ...wallets.map(
-              (e) => DropdownMenuItem(
-                value: wallets.indexOf(
-                  e,
-                ),
-                child: Text(e.name),
-              ),
-            ),
-            DropdownMenuItem(
-              value: -1,
-              child: Text(AppLocalizations.of(context).newWallet),
-            ),
-          ],
-          onChanged: (v) async {
-            if (v == null || v == -1) {
-              await Navigator.of(context).push(
-                platformRoute(
-                  (c) => const SetupView(
-                    newWallet: true,
                   ),
-                ),
+                  content: LimitedBox(
-              );
+                    maxHeight: MediaQuery.of(context).size.width * 0.7,
-              wallets = await WalletManager.listWallets();
+                    maxWidth: MediaQuery.of(context).size.width * 0.8,
-              logger.i(wallets.length);
+                    child: Wrap(
-              selectedWallet = wallets.last;
+                      alignment: WrapAlignment.center,
-              setState(() {});
+                      spacing: 5,
-              return;
+                      children: [
-            }
+                        if (!yearly)
-            selectedWallet = wallets[v];
+                          SizedBox(
-            setState(() {});
+                            width: 120,
-          },
+                            height: 100,
-        ),
+                            child: WheelChooser<int>.choices(
-        actions: [
+                              onChoiceChanged: (v) {
-          PopupMenuButton(
+                                selectedMonth = v as int;
-            itemBuilder: (context) => [
+                              },
-              AppLocalizations.of(context).settings,
+                              startPosition: _selectedDate.month - 1,
-              AppLocalizations.of(context).about,
+                              choices: List<WheelChoice<int>>.generate(
-            ].map((e) => PopupMenuItem(value: e, child: Text(e))).toList(),
+                                12,
-            onSelected: (value) {
+                                (index) => WheelChoice(
-              if (value == AppLocalizations.of(context).settings) {
+                                  value: index + 1,
-                Navigator.of(context)
+                                  title: DateFormat.MMMM(locale ?? "en").format(
-                    .push(
+                                    DateTime(
-                  platformRoute(
+                                      _selectedDate.year,
-                    (context) => const SettingsView(),
+                                      index + 1,
-                  ),
+                                    ),
-                )
+                                  ),
-                    .then((value) async {
-                  selectedWallet =
-                      await WalletManager.loadWallet(selectedWallet!.name);
-                  final s = await SharedPreferences.getInstance();
-                  chartType = s.getInt("monthlygraph") ?? 2;
-                  setState(() {});
-                });
-              } else if (value == AppLocalizations.of(context).about) {
-                showAbout(context);
-              }
-            },
-          ),
-        ],
-      ),
-      drawer: makeDrawer(context, 2),
-      body: SingleChildScrollView(
-        child: Center(
-          child: (selectedWallet == null)
-              ? const CircularProgressIndicator(
-                  strokeWidth: 5,
-                )
-              : SizedBox(
-                  width: MediaQuery.of(context).size.width,
-                  height: MediaQuery.of(context).size.height,
-                  child: Column(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      SegmentedButton<String>(
-                        segments: [
-                          ButtonSegment<String>(
-                            value: "expense",
-                            label: Text(AppLocalizations.of(context).expenses),
-                          ),
-                          ButtonSegment<String>(
-                            value: "income",
-                            label: Text(AppLocalizations.of(context).income),
-                          ),
-                        ],
-                        selected: graphTypeSet,
-                        multiSelectionEnabled: true,
-                        onSelectionChanged: (selection) {
-                          graphTypeSet = selection;
-                          setState(() {});
-                        },
-                      ),
-                      const SizedBox(
-                        height: 5,
-                      ),
-                      SegmentedButton<String>(
-                        segments: [
-                          ButtonSegment<String>(
-                            value: "yearly",
-                            label: Text(AppLocalizations.of(context).yearly),
-                          ),
-                          ButtonSegment<String>(
-                            value: "monthly",
-                            label: Text(AppLocalizations.of(context).monthly),
-                          ),
-                        ],
-                        selected: yearlyBtnSet,
-                        onSelectionChanged: (selection) async {
-                          yearlyBtnSet = selection;
-                          final s = await SharedPreferences.getInstance();
-                          chartType = yearly
-                              ? (s.getInt("yearlygraph") ?? 1)
-                              : (s.getInt("monthlygraph") ?? 2);
-                          setState(() {});
-                        },
-                      ),
-                      const SizedBox(height: 5),
-                      Container(
-                        decoration: BoxDecoration(
-                          borderRadius: BorderRadius.circular(8),
-                          color:
-                              Theme.of(context).colorScheme.secondaryContainer,
-                        ),
-                        child: Padding(
-                          padding: const EdgeInsets.all(8),
-                          child: Column(
-                            children: [
-                              Text(
-                                yearly
-                                    ? AppLocalizations.of(context)
-                                        .expensesPerYear(_selectedDate.year)
-                                    : AppLocalizations.of(context)
-                                        .expensesPerMonth(
-                                        DateFormat.yMMMM(locale)
-                                            .format(_selectedDate),
-                                      ),
-                                style: const TextStyle(
-                                  fontSize: 16,
-                                  fontWeight: FontWeight.bold,
                                 ),
                               ),
-                              const SizedBox(
+                            ),
-                                height: 15,
+                          ),
-                              ),
+                        SizedBox(
-                              SizedBox(
+                          height: 100,
-                                width: MediaQuery.of(context).size.width * 0.9,
+                          width: 80,
-                                height:
+                          child: WheelChooser<int>.choices(
-                                    MediaQuery.of(context).size.height * 0.35,
+                            startPosition: availableYears.indexWhere(
-                                child: (chartType == null)
+                              (element) => element.value == _selectedDate.year,
-                                    ? const CircularProgressIndicator()
+                            ),
-                                    : (chartType == 1)
+                            onChoiceChanged: (v) {
-                                        ? ExpensesBarChart(
+                              selectedYear = v as int;
-                                            currency: selectedWallet!.currency,
+                            },
-                                            date: _selectedDate,
+                            choices: availableYears,
-                                            locale: locale ?? "en",
-                                            yearly: yearly,
-                                            expenseData: (graphTypeSet
-                                                    .contains("expense"))
-                                                ? generateChartData(
-                                                    EntryType.expense,
-                                                  )
-                                                : [],
-                                            incomeData: (graphTypeSet
-                                                    .contains("income"))
-                                                ? generateChartData(
-                                                    EntryType.income,
-                                                  )
-                                                : [],
-                                          )
-                                        : Padding(
-                                            padding: const EdgeInsets.all(8),
-                                            child: ExpensesLineChart(
-                                              currency:
-                                                  selectedWallet!.currency,
-                                              date: _selectedDate,
-                                              locale: locale ?? "en",
-                                              yearly: yearly,
-                                              expenseData: (graphTypeSet
-                                                      .contains("expense"))
-                                                  ? generateChartData(
-                                                      EntryType.expense,
-                                                    )
-                                                  : [],
-                                              incomeData: (graphTypeSet
-                                                      .contains("income"))
-                                                  ? generateChartData(
-                                                      EntryType.income,
-                                                    )
-                                                  : [],
-                                            ),
-                                          ),
-                              ),
-                            ],
                           ),
                         ),
-                      ),
+                      ],
-                      const SizedBox(
+                    ),
-                        height: 25,
+                  ),
-                      ),
+                  actions: [
-                      Container(
+                    TextButton(
-                        decoration: BoxDecoration(
+                      onPressed: () {
-                          borderRadius: BorderRadius.circular(8),
+                        _selectedDate = DateTime(selectedYear, selectedMonth);
-                          color:
+                        Navigator.of(c).pop();
-                              Theme.of(context).colorScheme.secondaryContainer,
+                      },
-                        ),
+                      child: Text(AppLocalizations.of(context).ok),
-                        width: MediaQuery.of(context).size.width * 0.95,
+                    ),
-                        height: MediaQuery.of(context).size.height * 0.4,
+                  ],
+                ),
+              );
+              setState(() {});
+            },
+          ),
+        ),
+        appBar: AppBar(
+          bottom: TabBar(
+            tabs: [
+              Tab(
+                child: Text(AppLocalizations.of(context).expenses),
+              ),
+              Tab(
+                child: Text(AppLocalizations.of(context).incomePlural),
+              ),
+            ],
+          ),
+          title: DropdownButton<int>(
+            value: (selectedWallet == null)
+                ? -1
+                : wallets.indexOf(selectedWallet!),
+            items: [
+              ...wallets.map(
+                (e) => DropdownMenuItem(
+                  value: wallets.indexOf(
+                    e,
+                  ),
+                  child: Text(e.name),
+                ),
+              ),
+              DropdownMenuItem(
+                value: -1,
+                child: Text(AppLocalizations.of(context).newWallet),
+              ),
+            ],
+            onChanged: (v) async {
+              if (v == null || v == -1) {
+                await Navigator.of(context).push(
+                  platformRoute(
+                    (c) => const SetupView(
+                      newWallet: true,
+                    ),
+                  ),
+                );
+                wallets = await WalletManager.listWallets();
+                logger.i(wallets.length);
+                selectedWallet = wallets.last;
+                setState(() {});
+                return;
+              }
+              selectedWallet = wallets[v];
+              setState(() {});
+            },
+          ),
+          actions: [
+            PopupMenuButton(
+              itemBuilder: (context) => [
+                AppLocalizations.of(context).settings,
+                AppLocalizations.of(context).about,
+              ].map((e) => PopupMenuItem(value: e, child: Text(e))).toList(),
+              onSelected: (value) {
+                if (value == AppLocalizations.of(context).settings) {
+                  Navigator.of(context)
+                      .push(
+                    platformRoute(
+                      (context) => const SettingsView(),
+                    ),
+                  )
+                      .then((value) async {
+                    selectedWallet =
+                        await WalletManager.loadWallet(selectedWallet!.name);
+                    final s = await SharedPreferences.getInstance();
+                    chartType = s.getInt("monthlygraph") ?? 2;
+                    setState(() {});
+                  });
+                } else if (value == AppLocalizations.of(context).about) {
+                  showAbout(context);
+                }
+              },
+            ),
+          ],
+        ),
+        drawer: makeDrawer(context, 2),
+        body: TabBarView(
+          children: [
+            // EXPENSE TAB
+            SingleChildScrollView(
+              child: Center(
+                child: (selectedWallet == null)
+                    ? const CircularProgressIndicator(
+                        strokeWidth: 5,
+                      )
+                    : SizedBox(
+                        width: MediaQuery.of(context).size.width,
+                        height: MediaQuery.of(context).size.height,
                         child: Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
                           children: [
-                            const SizedBox(
+                            SizedBox(
-                              height: 10,
+                              width: 200,
-                            ),
+                              child: Row(
-                            Text(
+                                mainAxisAlignment:
-                              AppLocalizations.of(context).expensesPerCategory,
+                                    MainAxisAlignment.spaceBetween,
-                              style: const TextStyle(
+                                children: [
-                                fontSize: 16,
+                                  Text(
-                                fontWeight: FontWeight.bold,
+                                    AppLocalizations.of(context).monthly,
+                                    style: const TextStyle(
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                  Switch.adaptive(
+                                    value: yearly,
+                                    onChanged: (v) async {
+                                      yearly = v;
+                                      final s =
+                                          await SharedPreferences.getInstance();
+                                      chartType = yearly
+                                          ? (s.getInt("yearlygraph") ?? 1)
+                                          : (s.getInt("monthlygraph") ?? 2);
+
+                                      setState(() {});
+                                    },
+                                  ),
+                                  Text(
+                                    AppLocalizations.of(context).yearly,
+                                    style: const TextStyle(
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                ],
                               ),
                             ),
-                            Padding(
+                            Container(
-                              padding: const EdgeInsets.all(8),
+                              decoration: BoxDecoration(
-                              child: CategoriesPieChart(
+                                borderRadius: BorderRadius.circular(8),
-                                symbol: selectedWallet!.currency.symbol,
+                                boxShadow: (MediaQuery.of(context)
-                                entries: selectedWallet!.entries,
+                                            .platformBrightness ==
-                                categories: selectedWallet!.categories,
+                                        Brightness.light)
+                                    ? [
+                                        BoxShadow(
+                                          color: Colors.grey.withOpacity(0.5),
+                                          spreadRadius: 3,
+                                          blurRadius: 7,
+                                          offset: const Offset(
+                                            0,
+                                            3,
+                                          ),
+                                        ),
+                                      ]
+                                    : null,
+                                color: (MediaQuery.of(context)
+                                            .platformBrightness ==
+                                        Brightness.dark)
+                                    ? Theme.of(context)
+                                        .colorScheme
+                                        .secondaryContainer
+                                    : Theme.of(context).colorScheme.background,
+                              ),
+                              child: Padding(
+                                padding: const EdgeInsets.all(8),
+                                child: Column(
+                                  children: [
+                                    Text(
+                                      yearly
+                                          ? AppLocalizations.of(context)
+                                              .expensesPerYear(
+                                              _selectedDate.year,
+                                            )
+                                          : AppLocalizations.of(context)
+                                              .expensesPerMonth(
+                                              DateFormat.yMMMM(locale)
+                                                  .format(_selectedDate),
+                                            ),
+                                      style: const TextStyle(
+                                        fontSize: 16,
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                    ),
+                                    const SizedBox(
+                                      height: 15,
+                                    ),
+                                    SizedBox(
+                                      width: MediaQuery.of(context).size.width *
+                                          0.9,
+                                      height:
+                                          MediaQuery.of(context).size.height *
+                                              0.35,
+                                      child: (chartType == null)
+                                          ? const CircularProgressIndicator()
+                                          : (chartType == 1)
+                                              ? ExpensesBarChart(
+                                                  currency:
+                                                      selectedWallet!.currency,
+                                                  date: _selectedDate,
+                                                  locale: locale ?? "en",
+                                                  yearly: yearly,
+                                                  expenseData:
+                                                      generateChartData(
+                                                    EntryType.expense,
+                                                  ),
+                                                  incomeData: const [],
+                                                )
+                                              : Padding(
+                                                  padding:
+                                                      const EdgeInsets.all(8),
+                                                  child: ExpensesLineChart(
+                                                    currency: selectedWallet!
+                                                        .currency,
+                                                    date: _selectedDate,
+                                                    locale: locale ?? "en",
+                                                    yearly: yearly,
+                                                    expenseData:
+                                                        generateChartData(
+                                                      EntryType.expense,
+                                                    ),
+                                                    incomeData: const [],
+                                                  ),
+                                                ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ),
+                            const SizedBox(
+                              height: 25,
+                            ),
+                            Container(
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(8),
+                                boxShadow: (MediaQuery.of(context)
+                                            .platformBrightness ==
+                                        Brightness.light)
+                                    ? [
+                                        BoxShadow(
+                                          color: Colors.grey.withOpacity(0.5),
+                                          spreadRadius: 3,
+                                          blurRadius: 7,
+                                          offset: const Offset(
+                                            0,
+                                            3,
+                                          ),
+                                        ),
+                                      ]
+                                    : null,
+                                color: (MediaQuery.of(context)
+                                            .platformBrightness ==
+                                        Brightness.dark)
+                                    ? Theme.of(context)
+                                        .colorScheme
+                                        .secondaryContainer
+                                    : Theme.of(context).colorScheme.background,
+                              ),
+                              width: MediaQuery.of(context).size.width * 0.95,
+                              height: MediaQuery.of(context).size.height * 0.4,
+                              child: Column(
+                                children: [
+                                  const SizedBox(
+                                    height: 10,
+                                  ),
+                                  Flexible(
+                                    child: Text(
+                                      textAlign: TextAlign.center,
+                                      yearly
+                                          ? AppLocalizations.of(context)
+                                              .expensesPerYearCategory(
+                                              _selectedDate.year,
+                                            )
+                                          : AppLocalizations.of(context)
+                                              .expensesPerMonthCategory(
+                                              DateFormat.yMMMM(locale)
+                                                  .format(_selectedDate),
+                                            ),
+                                      style: const TextStyle(
+                                        fontSize: 16,
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                    ),
+                                  ),
+                                  Padding(
+                                    padding: const EdgeInsets.all(6),
+                                    child: CategoriesPieChart(
+                                      // TODO: better size adaptivity without overflow
+                                      locale: locale ?? "en",
+                                      symbol: selectedWallet!.currency.symbol,
+                                      entries: selectedWallet!.entries
+                                          .where(
+                                            (element) =>
+                                                ((!yearly)
+                                                    ? element.date.month ==
+                                                            _selectedDate
+                                                                .month &&
+                                                        element.date.year ==
+                                                            _selectedDate.year
+                                                    : element.date.year ==
+                                                        _selectedDate.year) &&
+                                                element.type ==
+                                                    EntryType.expense,
+                                          )
+                                          .toList(),
+                                      categories: selectedWallet!.categories,
+                                    ),
+                                  ),
+                                ],
                               ),
                             ),
                           ],
                         ),
                       ),
-                    ],
+              ),
-                  ),
+            ), // Expense Tab END
-                ),
+            SingleChildScrollView(
+              child: Center(
+                child: (selectedWallet == null)
+                    ? const CircularProgressIndicator(
+                        strokeWidth: 5,
+                      )
+                    : SizedBox(
+                        width: MediaQuery.of(context).size.width,
+                        height: MediaQuery.of(context).size.height,
+                        child: Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            SizedBox(
+                              width: 200,
+                              child: Row(
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceBetween,
+                                children: [
+                                  Text(
+                                    AppLocalizations.of(context).monthly,
+                                    style: const TextStyle(
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                  Switch.adaptive(
+                                    value: yearly,
+                                    onChanged: (v) async {
+                                      yearly = v;
+                                      final s =
+                                          await SharedPreferences.getInstance();
+                                      chartType = yearly
+                                          ? (s.getInt("yearlygraph") ?? 1)
+                                          : (s.getInt("monthlygraph") ?? 2);
+
+                                      setState(() {});
+                                    },
+                                  ),
+                                  Text(
+                                    AppLocalizations.of(context).yearly,
+                                    style: const TextStyle(
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                            Container(
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(8),
+                                boxShadow: (MediaQuery.of(context)
+                                            .platformBrightness ==
+                                        Brightness.light)
+                                    ? [
+                                        BoxShadow(
+                                          color: Colors.grey.withOpacity(0.5),
+                                          spreadRadius: 3,
+                                          blurRadius: 7,
+                                          offset: const Offset(
+                                            0,
+                                            3,
+                                          ),
+                                        ),
+                                      ]
+                                    : null,
+                                color: (MediaQuery.of(context)
+                                            .platformBrightness ==
+                                        Brightness.dark)
+                                    ? Theme.of(context)
+                                        .colorScheme
+                                        .secondaryContainer
+                                    : Theme.of(context).colorScheme.background,
+                              ),
+                              child: Padding(
+                                padding: const EdgeInsets.all(8),
+                                child: Column(
+                                  children: [
+                                    Text(
+                                      yearly
+                                          ? AppLocalizations.of(context)
+                                              .incomePerYear(
+                                              _selectedDate.year,
+                                            )
+                                          : AppLocalizations.of(context)
+                                              .incomePerMonth(
+                                              DateFormat.yMMMM(locale)
+                                                  .format(_selectedDate),
+                                            ),
+                                      style: const TextStyle(
+                                        fontSize: 16,
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                    ),
+                                    const SizedBox(
+                                      height: 15,
+                                    ),
+                                    SizedBox(
+                                      width: MediaQuery.of(context).size.width *
+                                          0.9,
+                                      height:
+                                          MediaQuery.of(context).size.height *
+                                              0.35,
+                                      child: (chartType == null)
+                                          ? const CircularProgressIndicator()
+                                          : (chartType == 1)
+                                              ? ExpensesBarChart(
+                                                  currency:
+                                                      selectedWallet!.currency,
+                                                  date: _selectedDate,
+                                                  locale: locale ?? "en",
+                                                  yearly: yearly,
+                                                  expenseData: const [],
+                                                  incomeData: generateChartData(
+                                                    EntryType.income,
+                                                  ),
+                                                )
+                                              : Padding(
+                                                  padding:
+                                                      const EdgeInsets.all(8),
+                                                  child: ExpensesLineChart(
+                                                    currency: selectedWallet!
+                                                        .currency,
+                                                    date: _selectedDate,
+                                                    locale: locale ?? "en",
+                                                    yearly: yearly,
+                                                    expenseData: const [],
+                                                    incomeData:
+                                                        generateChartData(
+                                                      EntryType.income,
+                                                    ),
+                                                  ),
+                                                ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ),
+                            const SizedBox(
+                              height: 25,
+                            ),
+                            Container(
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(8),
+                                boxShadow: (MediaQuery.of(context)
+                                            .platformBrightness ==
+                                        Brightness.light)
+                                    ? [
+                                        BoxShadow(
+                                          color: Colors.grey.withOpacity(0.5),
+                                          spreadRadius: 3,
+                                          blurRadius: 7,
+                                          offset: const Offset(
+                                            0,
+                                            3,
+                                          ),
+                                        ),
+                                      ]
+                                    : null,
+                                color: (MediaQuery.of(context)
+                                            .platformBrightness ==
+                                        Brightness.dark)
+                                    ? Theme.of(context)
+                                        .colorScheme
+                                        .secondaryContainer
+                                    : Theme.of(context).colorScheme.background,
+                              ),
+                              width: MediaQuery.of(context).size.width * 0.95,
+                              height: MediaQuery.of(context).size.height * 0.4,
+                              child: Column(
+                                children: [
+                                  const SizedBox(
+                                    height: 10,
+                                  ),
+                                  Flexible(
+                                    child: Text(
+                                      yearly
+                                          ? AppLocalizations.of(context)
+                                              .incomePerYearCategory(
+                                              _selectedDate.year,
+                                            )
+                                          : AppLocalizations.of(context)
+                                              .incomePerMonthCategory(
+                                              DateFormat.yMMMM(locale)
+                                                  .format(_selectedDate),
+                                            ),
+                                      style: const TextStyle(
+                                        fontSize: 16,
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                    ),
+                                  ),
+                                  Padding(
+                                    padding: const EdgeInsets.all(6),
+                                    child: CategoriesPieChart(
+                                      locale: locale ?? "en",
+                                      symbol: selectedWallet!.currency.symbol,
+                                      entries: selectedWallet!.entries
+                                          .where(
+                                            (element) =>
+                                                ((!yearly)
+                                                    ? element.date.month ==
+                                                            _selectedDate
+                                                                .month &&
+                                                        element.date.year ==
+                                                            _selectedDate.year
+                                                    : element.date.year ==
+                                                        _selectedDate.year) &&
+                                                element.type ==
+                                                    EntryType.income,
+                                          )
+                                          .toList(),
+                                      categories: selectedWallet!.categories,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+              ),
+            ), // Income Tab END
+          ],
         ),
       ),
     );

pubspec.lock

@@ -1145,6 +1145,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.2.1"
+  wheel_chooser:
+    dependency: "direct main"
+    description:
+      name: wheel_chooser
+      sha256: "3fee36f081f321c58a0b7b4afcdd92599f2ca520b3a1420084774e6b19cca1d8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2"
   win32:
     dependency: transitive
     description:

pubspec.yaml

@@ -40,6 +40,7 @@ dependencies:
   settings_ui: ^2.0.2
   shared_preferences: ^2.2.2
   url_launcher: ^6.2.4
+  wheel_chooser: ^1.1.2
 
 dev_dependencies:
   build_runner: ^2.4.6