Improved category with colors

2024-02-09 01:22:04 +01:00
parent c5ede79dc4
commit 44f6d433d1
14 changed files with 303 additions and 170 deletions
--- a/lib/pages/stats/widgets/account_counters.dart
+++ b/lib/pages/stats/widgets/account_counters.dart
@@ -10,7 +10,7 @@ class AccountCounter extends StatelessWidget {
    return accountsTotals.entries.toList().map((entry) => Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
-        Text("${entry.key}:"),
+        Text(entry.key),
        Text(
          NumberFormat('#######.00 €', 'fr_FR').format(entry.value),
          style: TextStyle(
--- a/lib/pages/stats/widgets/categories_totals_chart.dart
+++ b/lib/pages/stats/widgets/categories_totals_chart.dart
@@ -1,21 +1,22 @@
 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/chart_item.dart';

 class CategoriesTotalsChart extends StatelessWidget {
  final List<ChartItem> categoriesTotals;
  final List<ChartItem> categoriesTotalsPercents;
-  final Map<String, Color> categoriesColors;

-  const CategoriesTotalsChart({super.key, required this.categoriesTotals, required this.categoriesTotalsPercents, required this.categoriesColors});
+  const CategoriesTotalsChart({super.key, required this.categoriesTotals, required this.categoriesTotalsPercents});

-  List<PieChartSectionData> _convertDataForChart() {
+  List<PieChartSectionData> _convertDataForChart(Map<String, Color> categoriesColors) {
    return categoriesTotalsPercents
      .map((item) => 
        PieChartSectionData(
          value: item.value,
-          title: item.label,
+          title: NumberFormat("#0 %").format(item.value / 100),
          titleStyle: const TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w300
@@ -28,7 +29,7 @@ class CategoriesTotalsChart extends StatelessWidget {
      .toList();
  }

-  List<Row> _computeLegend() {
+  List<Row> _computeLegend(Map<String, Color> categoriesColors) {
    return categoriesTotals
      .map((item) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -56,55 +57,49 @@ class CategoriesTotalsChart extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return Container(
-      height: 320,
-      width: 560,
-      padding: const EdgeInsets.all(10),
-      margin: const EdgeInsets.all(20),
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(5),
-        color: Colors.blue
-      ),
-      child: Expanded(
-        child: AspectRatio(
-          aspectRatio: 1.3,
-          child: Row(
-            children: [
-              Expanded(
-                child: AspectRatio(
-                  aspectRatio: 1,
-                  child: PieChart(
-                    PieChartData(
-                      sections: _convertDataForChart(),
-                      borderData: FlBorderData(
-                        show: false
-                      ),
-                      centerSpaceRadius: 0,
-                      sectionsSpace: 2
-                    )
+    return BlocBuilder<CategoryBloc, CategoryState>(
+      builder: (context, state) => Container(
+        height: 320,
+        width: 560,
+        padding: const EdgeInsets.all(10),
+        margin: const EdgeInsets.all(20),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(5),
+          color: Colors.blue
+        ),
+        child: Row(
+          children: [
+            Expanded(
+              child: PieChart(
+                PieChartData(
+                  sections: _convertDataForChart(state.categoriesColors),
+                  borderData: FlBorderData(
+                    show: false
                  ),
+                  centerSpaceRadius: 0,
+                  sectionsSpace: 2
                )
              ),
-              Container(
-                height: 300,
-                width: 250,
-                padding: const EdgeInsets.all(10),
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(5),
-                  color: Colors.blueGrey
-                ),
-                child: SingleChildScrollView(
-                  scrollDirection: Axis.vertical,
-                  child: Column(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: _computeLegend(),
-                  ),
-                ) 
+            ),
+            Container(
+              height: 300,
+              width: 250,
+              padding: const EdgeInsets.all(10),
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(5),
+                color: Colors.blueGrey
              ),
-            ],
-          ),
-        )
+              child: SingleChildScrollView(
+                scrollDirection: Axis.vertical,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: _computeLegend(state.categoriesColors),
+                ),
+              ) 
+            ),
+          ],
+        ),
      )
    );
  }
--- a/lib/pages/stats/widgets/monthly_categories_total_chart.dart
+++ b/lib/pages/stats/widgets/monthly_categories_total_chart.dart
@@ -1,13 +1,14 @@
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:tunas/domains/category/category_bloc.dart';

 class MonthlyCategoriesTotalChart extends StatelessWidget {
  final Map<int, Map<String, double>> categoriesMonthlyTotals;
-  final Map<String, Color> categoriesColors;

-  const MonthlyCategoriesTotalChart({super.key, required this.categoriesMonthlyTotals, required this.categoriesColors});
+  const MonthlyCategoriesTotalChart({super.key, required this.categoriesMonthlyTotals});

-  BarChartRodData _computeStack(double barsWidth, MapEntry<int, Map<String, double>> entry) {
+  BarChartRodData _computeStack(double barsWidth, MapEntry<int, 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();
    return BarChartRodData(
@@ -19,13 +20,13 @@ class MonthlyCategoriesTotalChart extends StatelessWidget {
    );
  }

-  List<BarChartGroupData> _computeBarGroups(double barsSpace, double barsWidth) {
+  List<BarChartGroupData> _computeBarGroups(double barsSpace, double barsWidth, Map<String, Color> categoriesColors) {
    var a = categoriesMonthlyTotals.entries
      .map((entry) {
        return BarChartGroupData(
          x: entry.key,
          barsSpace: barsSpace,
-          barRods: [_computeStack(barsWidth, entry)]
+          barRods: [_computeStack(barsWidth, entry, categoriesColors)]
        );
      })
      .toList();
@@ -55,31 +56,33 @@ class MonthlyCategoriesTotalChart extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return AspectRatio(
-      aspectRatio: 1.66,
-      child: LayoutBuilder(
-        builder: (context, constraints) {
-          final barsSpace = 4.0 * constraints.maxWidth / 100;
-          final barsWidth = 8.0 * constraints.maxWidth / 130;
+    return BlocBuilder<CategoryBloc, CategoryState>(
+      builder: (context, state) => AspectRatio(
+        aspectRatio: 1.66,
+        child: LayoutBuilder(
+          builder: (context, constraints) {
+            final barsSpace = 4.0 * constraints.maxWidth / 100;
+            final barsWidth = 8.0 * constraints.maxWidth / 130;

-          return BarChart(
-            BarChartData(
-              maxY: _computeMaxValue(),
-              barGroups: _computeBarGroups(barsSpace, barsWidth),
-              titlesData: FlTitlesData(
-                topTitles: const AxisTitles(
-                  sideTitles: SideTitles(showTitles: false)
-                ),
-                bottomTitles: AxisTitles(
-                  sideTitles: SideTitles(
-                    showTitles: true,
-                    getTitlesWidget: _computeBottomTitles
+            return BarChart(
+              BarChartData(
+                maxY: _computeMaxValue(),
+                barGroups: _computeBarGroups(barsSpace, barsWidth, state.categoriesColors),
+                titlesData: FlTitlesData(
+                  topTitles: const AxisTitles(
+                    sideTitles: SideTitles(showTitles: false)
+                  ),
+                  bottomTitles: AxisTitles(
+                    sideTitles: SideTitles(
+                      showTitles: true,
+                      getTitlesWidget: _computeBottomTitles
+                    )
                  )
                )
              )
-            )
-          );
-        },
+            );
+          },
+        )
      )
    );
  }