stacked bar graph, edit / remove transaction & budget page base

This commit is contained in:
2024-02-06 23:58:29 +01:00
parent 3abee9ff6f
commit 3610c466d2
25 changed files with 483 additions and 180 deletions

View File

@@ -25,8 +25,8 @@ class AccountCounter extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(20),
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blue

View File

@@ -6,33 +6,11 @@ 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});
const CategoriesTotalsChart({super.key, required this.categoriesTotals, required this.categoriesTotalsPercents, required this.categoriesColors});
List<PieChartSectionData> _convertDataForChart() {
var count = 1;
var colors = [
Colors.purple.shade300,
Colors.purple.shade500,
Colors.purple.shade700,
Colors.purple.shade900,
Colors.blue.shade300,
Colors.blue.shade500,
Colors.blue.shade700,
Colors.blue.shade900,
Colors.green.shade300,
Colors.green.shade500,
Colors.green.shade700,
Colors.green.shade900,
Colors.yellow.shade300,
Colors.yellow.shade500,
Colors.yellow.shade700,
Colors.yellow.shade900,
Colors.red.shade300,
Colors.red.shade500,
Colors.red.shade700,
Colors.red.shade900,
];
return categoriesTotalsPercents
.map((item) =>
PieChartSectionData(
@@ -45,7 +23,7 @@ class CategoriesTotalsChart extends StatelessWidget {
titlePositionPercentageOffset: 0.8,
borderSide: const BorderSide(width: 0),
radius: 150,
color: colors[count++]
color: categoriesColors[item.label]
))
.toList();
}
@@ -55,9 +33,19 @@ class CategoriesTotalsChart extends StatelessWidget {
.map((item) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("${item.label}: "),
Row(
children: [
Container(
height: 10,
width: 10,
color: categoriesColors[item.label],
),
Container(width: 5),
Text(item.label),
],
),
Text(
NumberFormat("#00 €").format(item.value),
NumberFormat("#00 €").format(item.value.abs()),
style: const TextStyle(
fontFamily: 'NovaMono',
)
@@ -70,7 +58,7 @@ class CategoriesTotalsChart extends StatelessWidget {
Widget build(BuildContext context) {
return Container(
height: 320,
width: 550,
width: 560,
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(
@@ -99,12 +87,14 @@ class CategoriesTotalsChart extends StatelessWidget {
),
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,

View File

@@ -2,14 +2,73 @@ import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class MonthlyCategoriesTotalChart extends StatelessWidget {
final Map<String, Map<String, double>> categoriesMonthlyTotals;
final Map<int, Map<String, double>> categoriesMonthlyTotals;
final Map<String, Color> categoriesColors;
const MonthlyCategoriesTotalChart({super.key, required this.categoriesMonthlyTotals});
const MonthlyCategoriesTotalChart({super.key, required this.categoriesMonthlyTotals, required this.categoriesColors});
BarChartRodData _computeStack(double barsWidth, MapEntry<int, Map<String, double>> entry) {
var subcounter = 0.0;
var a = entry.value.entries.map((subEntry) => BarChartRodStackItem(subcounter, subcounter += subEntry.value, categoriesColors[subEntry.key] ?? Colors.red)).toList();
return BarChartRodData(
fromY: 0,
toY: subcounter,
width: barsWidth,
borderRadius: BorderRadius.zero,
rodStackItems: a
);
}
List<BarChartGroupData> _computeBarGroups(double barsSpace, double barsWidth) {
var a = categoriesMonthlyTotals.entries
.map((entry) {
return BarChartGroupData(
x: entry.key,
barsSpace: barsSpace,
barRods: [_computeStack(barsWidth, entry)]
);
})
.toList();
return a;
}
SideTitleWidget _computeBottomTitles(double value, TitleMeta meta) {
const titles = ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Jui', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'];
String title = titles[value.toInt() - 1];
return SideTitleWidget(
axisSide: meta.axisSide,
child: Text(title)
);
}
@override
Widget build(BuildContext context) {
return BarChart(
BarChartData()
return AspectRatio(
aspectRatio: 1.66,
child: LayoutBuilder(
builder: (context, constraints) {
final barsSpace = 4.0 * constraints.maxWidth / 400;
final barsWidth = 8.0 * constraints.maxWidth / 100;
return BarChart(
BarChartData(
barGroups: _computeBarGroups(barsSpace, barsWidth),
titlesData: FlTitlesData(
topTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false)
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: _computeBottomTitles
)
)
)
)
);
},
)
);
}
}