Improved stacked graph

lib/pages/stats/widgets/categories_totals_chart.dart

@@ -21,9 +21,9 @@ class CategoriesTotalsChart extends StatelessWidget {
             fontSize: 15,
             fontWeight: FontWeight.w300
           ),
-          titlePositionPercentageOffset: 0.8,
+          titlePositionPercentageOffset: 0.5,
           borderSide: const BorderSide(width: 0),
-          radius: 150,
+          radius: 40,
           color: categoriesColors[item.label]
         ))
       .toList();
@@ -60,7 +60,7 @@ class CategoriesTotalsChart extends StatelessWidget {
     return BlocBuilder<CategoryBloc, CategoryState>(
       builder: (context, state) => Container(
         height: 320,
-        width: 600,
+        width: 500,
         padding: const EdgeInsets.all(10),
         margin: const EdgeInsets.all(20),
         decoration: BoxDecoration(
@@ -76,8 +76,8 @@ class CategoriesTotalsChart extends StatelessWidget {
                   borderData: FlBorderData(
                     show: false
                   ),
-                  centerSpaceRadius: 0,
-                  sectionsSpace: 2
+                  centerSpaceRadius: 50,
+                  sectionsSpace: 4
                 )
               ),
             ),

lib/pages/stats/widgets/monthly_categories_total_chart.dart

@@ -1,22 +1,28 @@
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:intl/intl.dart';
 import 'package:tunas/domains/category/category_bloc.dart';
+import 'package:tunas/domains/charts/models/month_totals.dart';
 
 class MonthlyCategoriesTotalChart extends StatelessWidget {
-  final Map<int, Map<String, double>> categoriesMonthlyTotals;
+  final Map<int, MonthTotals> categoriesMonthlyTotals;
 
   const MonthlyCategoriesTotalChart({super.key, required this.categoriesMonthlyTotals});
 
-  BarChartRodData _computeStack(double barsWidth, MapEntry<int, Map<String, double>> entry, Map<String, Color> categoriesColors) {
+  BarChartRodData _computeStack(double barsWidth, Map<String, double> entry, Map<String, Color> categoriesColors) {
     var subcounter = 0.0;
-    var a = entry.value.entries.map((subEntry) => BarChartRodStackItem(subcounter, subcounter += subEntry.value, categoriesColors[subEntry.key] ?? Colors.red)).toList();
+    var items = entry.entries.map((subEntry) => BarChartRodStackItem(
+      subcounter, subcounter += subEntry.value,
+      categoriesColors[subEntry.key] ?? Colors.red,
+    )).toList();
     return BarChartRodData(
+      color: Colors.transparent,
       fromY: 0,
       toY: subcounter,
       width: barsWidth,
-      borderRadius: BorderRadius.zero,
-      rodStackItems: a
+      borderRadius: BorderRadius.circular(3),
+      rodStackItems: items
     );
   }
 
@@ -26,7 +32,11 @@ class MonthlyCategoriesTotalChart extends StatelessWidget {
         return BarChartGroupData(
           x: entry.key,
           barsSpace: barsSpace,
-          barRods: [_computeStack(barsWidth, entry, categoriesColors)]
+          barRods: [
+            _computeStack(barsWidth, entry.value.positives, categoriesColors),
+            _computeStack(barsWidth, entry.value.negatives, categoriesColors),
+          ],
+          showingTooltipIndicators: [0, 1]
         );
       })
       .toList();
@@ -46,7 +56,7 @@ class MonthlyCategoriesTotalChart extends StatelessWidget {
   double _computeMaxValue() {
     double max = 0.0;
     categoriesMonthlyTotals.forEach((monthKey, value) { 
-      double localMax = value.values.reduce((value, element) => value + element);
+      double localMax = value.maxValue();
       if (localMax > max) {
         max = localMax;
       }
@@ -61,8 +71,8 @@ class MonthlyCategoriesTotalChart extends StatelessWidget {
         aspectRatio: 1.66,
         child: LayoutBuilder(
           builder: (context, constraints) {
-            final barsSpace = 4.0 * constraints.maxWidth / 100;
-            final barsWidth = 8.0 * constraints.maxWidth / 130;
+            final barsSpace = 4.0 * constraints.maxWidth / 300;
+            final barsWidth = 8.0 * constraints.maxWidth / 500;
 
             return BarChart(
               BarChartData(
@@ -78,6 +88,41 @@ class MonthlyCategoriesTotalChart extends StatelessWidget {
                       getTitlesWidget: _computeBottomTitles
                     )
                   )
+                ),
+                barTouchData: BarTouchData(
+                  enabled: true,
+                  handleBuiltInTouches: false,
+                  touchTooltipData: BarTouchTooltipData(
+                    tooltipBgColor: Colors.transparent,
+                    tooltipMargin: 0,
+                    getTooltipItem:(group, groupIndex, rod, rodIndex) {
+                      String value = NumberFormat("#00").format(rod.toY);
+                      Color color = Colors.black;
+                      if (rodIndex == 0) {
+                        value = "+$value";
+                        color = Colors.green;
+                      } else {
+                        value = "-$value";
+                        color = Colors.red;
+                      }
+
+                      return BarTooltipItem(
+                        value,
+                        TextStyle(
+                          fontWeight: FontWeight.bold,
+                          color: color,
+                          fontSize: 12,
+                          fontFamily: 'NovaMono',
+                          shadows: const [
+                            Shadow(
+                              color: Colors.black26,
+                              blurRadius: 12,
+                            )
+                          ],
+                        ),
+                      );
+                    }
+                  )
                 )
               )
             );