Improved stacked graph

This commit is contained in:
2024-02-11 22:49:57 +01:00
parent cbaf94d866
commit a51ca14041
5 changed files with 118 additions and 24 deletions

View File

@@ -1,6 +1,7 @@
import 'package:equatable/equatable.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:tunas/domains/charts/models/month_totals.dart';
import 'package:tunas/domains/transaction/models/transaction_line.dart';
import 'package:tunas/domains/charts/models/chart_item.dart';
import 'package:tunas/repositories/account/account_repository.dart';
@@ -100,7 +101,10 @@ class ChartBloc extends Bloc<ChartEvent, ChartState> {
List<ChartItem> scopedCategoriesPositiveTotals = [];
List<ChartItem> scopedCategoriesNegativeTotals = [];
Map<int, FlSpot> scopedMonthlyTotals = {};
Map<int, Map<String, double>> scopedCategoriesMonthlyTotals = {};
Map<int, MonthTotals> scopedCategoriesMonthlyTotals = {};
Map<int, double> scopedMonthlyPostitiveTotals = {};
Map<int, double> scopedMonthlyNegativeTotals = {};
for(var transaction in state.transactions) {
globalTotal += transaction.value;
@@ -123,6 +127,12 @@ class ChartBloc extends Bloc<ChartEvent, ChartState> {
continue;
}
MonthTotals? categoryMonthTotal = scopedCategoriesMonthlyTotals[transaction.date.month];
if (categoryMonthTotal == null) {
categoryMonthTotal = MonthTotals(negatives: {}, positives: {});
scopedCategoriesMonthlyTotals[transaction.date.month] = categoryMonthTotal;
}
if (transaction.value >= 0) {
ChartItem? chartItem = scopedCategoriesPositiveTotals.firstWhere(
(item) => item.label == transaction.category,
@@ -133,6 +143,9 @@ class ChartBloc extends Bloc<ChartEvent, ChartState> {
}
);
chartItem.value += transaction.value;
scopedMonthlyPostitiveTotals[transaction.date.month] = transaction.value + (scopedMonthlyPostitiveTotals[transaction.date.month] ?? 0);
categoryMonthTotal.positives[transaction.category] = transaction.value.abs() + (categoryMonthTotal.positives[transaction.category] ?? 0);
}
if (transaction.value < 0) {
@@ -146,13 +159,8 @@ class ChartBloc extends Bloc<ChartEvent, ChartState> {
);
chartItem.value += transaction.value;
Map<String, double>? a = scopedCategoriesMonthlyTotals[transaction.date.month];
if (scopedCategoriesMonthlyTotals[transaction.date.month] == null) {
a = {};
}
a?[transaction.category] = transaction.value.abs() + (a[transaction.category] ?? 0);
scopedCategoriesMonthlyTotals[transaction.date.month] = a!;
scopedMonthlyNegativeTotals[transaction.date.month] = transaction.value + (scopedMonthlyPostitiveTotals[transaction.date.month] ?? 0);
categoryMonthTotal.negatives[transaction.category] = transaction.value.abs() + (categoryMonthTotal.negatives[transaction.category] ?? 0);
}
}
@@ -214,6 +222,8 @@ class ChartBloc extends Bloc<ChartEvent, ChartState> {
scopedSimplifiedCategoriesNegativeTotalsPercents: scopedSimplifiedCategoriesNegativeTotalsPercents,
scopedMonthlyTotals: scopedMonthlyTotals.values.toList(),
scopedCategoriesMonthlyTotals: scopedCategoriesMonthlyTotals,
scopedMonthlyPostitiveTotals: scopedMonthlyPostitiveTotals,
scopedMonthlyNegativeTotals: scopedMonthlyNegativeTotals,
);
}
}

View File

@@ -27,7 +27,9 @@ final class ChartState extends Equatable {
final List<ChartItem> scopedSimplifiedCategoriesNegativeTotalsPercents;
final List<FlSpot> scopedMonthlyTotals;
final Map<int, Map<String, double>> scopedCategoriesMonthlyTotals;
final Map<int, MonthTotals> scopedCategoriesMonthlyTotals;
final Map<int, double> scopedMonthlyPostitiveTotals;
final Map<int, double> scopedMonthlyNegativeTotals;
final double scoppedProfit;
@@ -53,6 +55,8 @@ final class ChartState extends Equatable {
this.scopedMonthlyTotals = const [],
this.scopedCategoriesMonthlyTotals = const {},
this.scoppedProfit = 0,
this.scopedMonthlyPostitiveTotals = const {},
this.scopedMonthlyNegativeTotals = const {},
});
ChartState copyWith({
@@ -75,8 +79,10 @@ final class ChartState extends Equatable {
List<ChartItem>? scopedSimplifiedCategoriesNegativeTotals,
List<ChartItem>? scopedSimplifiedCategoriesNegativeTotalsPercents,
List<FlSpot>? scopedMonthlyTotals,
Map<int, Map<String, double>>? scopedCategoriesMonthlyTotals,
Map<int, MonthTotals>? scopedCategoriesMonthlyTotals,
double? scoppedProfit,
Map<int, double>? scopedMonthlyPostitiveTotals,
Map<int, double>? scopedMonthlyNegativeTotals,
}) {
return ChartState(
transactions: transactions ?? this.transactions,
@@ -100,6 +106,8 @@ final class ChartState extends Equatable {
scopedMonthlyTotals: scopedMonthlyTotals ?? this.scopedMonthlyTotals,
scopedCategoriesMonthlyTotals: scopedCategoriesMonthlyTotals ?? this.scopedCategoriesMonthlyTotals,
scoppedProfit: scoppedProfit ?? this.scoppedProfit,
scopedMonthlyPostitiveTotals: scopedMonthlyPostitiveTotals ?? this.scopedMonthlyPostitiveTotals,
scopedMonthlyNegativeTotals: scopedMonthlyNegativeTotals ?? this.scopedMonthlyNegativeTotals,
);
}
@@ -124,6 +132,8 @@ final class ChartState extends Equatable {
scopedMonthlyTotals,
scopedCategoriesMonthlyTotals,
scoppedProfit,
scopedMonthlyPostitiveTotals,
scopedMonthlyNegativeTotals,
];
}

View File

@@ -0,0 +1,29 @@
class MonthTotals {
Map<String, double> positives;
Map<String, double> negatives;
MonthTotals({
required this.positives,
required this.negatives,
});
double maxValue() {
double max = 0.0;
if (positives.isNotEmpty) {
double localMax = positives.values.reduce((value, element) => value + element);
if (localMax > max) {
max = localMax;
}
}
if (negatives.isNotEmpty) {
double localMax2 = negatives.values.reduce((value, element) => value + element);
if (localMax2 > max) {
max = localMax2;
}
}
return max;
}
}

View File

@@ -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
)
),
),

View File

@@ -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,
)
],
),
);
}
)
)
)
);