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,13 +123,10 @@ class ExpensesLineChart extends StatelessWidget {
                           )),
                 TextStyle(color: spots[index].bar.color),
                 children: [
+                  if (!yearly)
                     TextSpan(
-                    text: "\n${yearly ? DateFormat.MMMM(locale).format(
+                      text:
-                        DateTime(
+                          "\n${DateFormat.yMMMMd(locale).format(DateTime(date.year, date.month, spots[index].spotIndex + 1))}",
-                          date.year,
-                          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 &&
+                          NumberFormat.compact(locale: locale)
                                   .format(expenseDataSorted.last)
                                   .length >=
-                          5 ||
+                              5) ||
-                      NumberFormat.compact()
+                      (incomeDataSorted.isNotEmpty &&
+                          NumberFormat.compact(locale: locale)
                                   .format(incomeDataSorted.last)
                                   .length >=
-                          5)
+                              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,42 +106,100 @@ class _GraphViewState extends State<GraphView> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return DefaultTabController(
+      length: 2,
+      child: Scaffold(
         floatingActionButton: Tooltip(
           message: AppLocalizations.of(context).changeDate,
           child: FloatingActionButton(
             child: const Icon(Icons.calendar_month),
             onPressed: () async {
-            final firstDate = (selectedWallet!.entries
+              var selectedYear = _selectedDate.year;
-                  ..sort(
+              var selectedMonth = _selectedDate.month;
-                    (a, b) => a.date.compareTo(b.date),
+              await showAdaptiveDialog<void>(
-                  ))
-                .first
-                .date;
-            final newDate = await showDatePicker(
                 context: context,
-              initialDate: DateTime(
+                builder: (c) => AlertDialog.adaptive(
-                _selectedDate.year,
+                  title: Text(
-                _selectedDate.month,
+                    yearly
+                        ? AppLocalizations.of(context).selectYear
+                        : AppLocalizations.of(context).selectMonth,
+                  ),
+                  content: LimitedBox(
+                    maxHeight: MediaQuery.of(context).size.width * 0.7,
+                    maxWidth: MediaQuery.of(context).size.width * 0.8,
+                    child: Wrap(
+                      alignment: WrapAlignment.center,
+                      spacing: 5,
+                      children: [
+                        if (!yearly)
+                          SizedBox(
+                            width: 120,
+                            height: 100,
+                            child: WheelChooser<int>.choices(
+                              onChoiceChanged: (v) {
+                                selectedMonth = v as int;
+                              },
+                              startPosition: _selectedDate.month - 1,
+                              choices: List<WheelChoice<int>>.generate(
+                                12,
+                                (index) => WheelChoice(
+                                  value: index + 1,
+                                  title: DateFormat.MMMM(locale ?? "en").format(
+                                    DateTime(
+                                      _selectedDate.year,
+                                      index + 1,
+                                    ),
+                                  ),
+                                ),
+                              ),
+                            ),
+                          ),
+                        SizedBox(
+                          height: 100,
+                          width: 80,
+                          child: WheelChooser<int>.choices(
+                            startPosition: availableYears.indexWhere(
+                              (element) => element.value == _selectedDate.year,
+                            ),
+                            onChoiceChanged: (v) {
+                              selectedYear = v as int;
+                            },
+                            choices: availableYears,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  actions: [
+                    TextButton(
+                      onPressed: () {
+                        _selectedDate = DateTime(selectedYear, selectedMonth);
+                        Navigator.of(c).pop();
+                      },
+                      child: Text(AppLocalizations.of(context).ok),
+                    ),
+                  ],
                 ),
-              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(
+          bottom: TabBar(
+            tabs: [
+              Tab(
+                child: Text(AppLocalizations.of(context).expenses),
+              ),
+              Tab(
+                child: Text(AppLocalizations.of(context).incomePlural),
+              ),
+            ],
+          ),
           title: DropdownButton<int>(
-          value:
+            value: (selectedWallet == null)
-              (selectedWallet == null) ? -1 : wallets.indexOf(selectedWallet!),
+                ? -1
+                : wallets.indexOf(selectedWallet!),
             items: [
               ...wallets.map(
                 (e) => DropdownMenuItem(
@@ -190,7 +262,10 @@ class _GraphViewState extends State<GraphView> {
           ],
         ),
         drawer: makeDrawer(context, 2),
-      body: SingleChildScrollView(
+        body: TabBarView(
+          children: [
+            // EXPENSE TAB
+            SingleChildScrollView(
               child: Center(
                 child: (selectedWallet == null)
                     ? const CircularProgressIndicator(
@@ -202,54 +277,65 @@ class _GraphViewState extends State<GraphView> {
                         child: Column(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [
-                      SegmentedButton<String>(
+                            SizedBox(
-                        segments: [
+                              width: 200,
-                          ButtonSegment<String>(
+                              child: Row(
-                            value: "expense",
+                                mainAxisAlignment:
-                            label: Text(AppLocalizations.of(context).expenses),
+                                    MainAxisAlignment.spaceBetween,
+                                children: [
+                                  Text(
+                                    AppLocalizations.of(context).monthly,
+                                    style: const TextStyle(
+                                      fontWeight: FontWeight.bold,
                                     ),
-                          ButtonSegment<String>(
-                            value: "income",
-                            label: Text(AppLocalizations.of(context).income),
                                   ),
-                        ],
+                                  Switch.adaptive(
-                        selected: graphTypeSet,
+                                    value: yearly,
-                        multiSelectionEnabled: true,
+                                    onChanged: (v) async {
-                        onSelectionChanged: (selection) {
+                                      yearly = v;
-                          graphTypeSet = selection;
+                                      final s =
-                          setState(() {});
+                                          await SharedPreferences.getInstance();
-                        },
-                      ),
-                      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),
+                                  Text(
+                                    AppLocalizations.of(context).yearly,
+                                    style: const TextStyle(
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
                             Container(
                               decoration: BoxDecoration(
                                 borderRadius: BorderRadius.circular(8),
-                          color:
+                                boxShadow: (MediaQuery.of(context)
-                              Theme.of(context).colorScheme.secondaryContainer,
+                                            .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),
@@ -258,7 +344,9 @@ class _GraphViewState extends State<GraphView> {
                                     Text(
                                       yearly
                                           ? AppLocalizations.of(context)
-                                        .expensesPerYear(_selectedDate.year)
+                                              .expensesPerYear(
+                                              _selectedDate.year,
+                                            )
                                           : AppLocalizations.of(context)
                                               .expensesPerMonth(
                                               DateFormat.yMMMM(locale)
@@ -273,50 +361,40 @@ class _GraphViewState extends State<GraphView> {
                                       height: 15,
                                     ),
                                     SizedBox(
-                                width: MediaQuery.of(context).size.width * 0.9,
+                                      width: MediaQuery.of(context).size.width *
+                                          0.9,
                                       height:
-                                    MediaQuery.of(context).size.height * 0.35,
+                                          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: (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
+                                                  expenseData:
-                                                      .contains("expense"))
+                                                      generateChartData(
-                                                  ? generateChartData(
                                                     EntryType.expense,
+                                                  ),
+                                                  incomeData: const [],
                                                 )
-                                                  : [],
+                                              : Padding(
-                                              incomeData: (graphTypeSet
+                                                  padding:
-                                                      .contains("income"))
+                                                      const EdgeInsets.all(8),
-                                                  ? generateChartData(
+                                                  child: ExpensesLineChart(
-                                                      EntryType.income,
+                                                    currency: selectedWallet!
-                                                    )
+                                                        .currency,
-                                                  : [],
+                                                    date: _selectedDate,
+                                                    locale: locale ?? "en",
+                                                    yearly: yearly,
+                                                    expenseData:
+                                                        generateChartData(
+                                                      EntryType.expense,
+                                                    ),
+                                                    incomeData: const [],
                                                   ),
                                                 ),
                                     ),
@@ -330,8 +408,28 @@ class _GraphViewState extends State<GraphView> {
                             Container(
                               decoration: BoxDecoration(
                                 borderRadius: BorderRadius.circular(8),
-                          color:
+                                boxShadow: (MediaQuery.of(context)
-                              Theme.of(context).colorScheme.secondaryContainer,
+                                            .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,
@@ -340,18 +438,46 @@ class _GraphViewState extends State<GraphView> {
                                   const SizedBox(
                                     height: 10,
                                   ),
-                            Text(
+                                  Flexible(
-                              AppLocalizations.of(context).expensesPerCategory,
+                                    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(8),
+                                    padding: const EdgeInsets.all(6),
                                     child: CategoriesPieChart(
+                                      // TODO: better size adaptivity without overflow
+                                      locale: locale ?? "en",
                                       symbol: selectedWallet!.currency.symbol,
-                                entries: selectedWallet!.entries,
+                                      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,
                                     ),
                                   ),
@@ -362,6 +488,230 @@ class _GraphViewState extends State<GraphView> {
                         ),
                       ),
               ),
+            ), // 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