stacked bar graph, edit / remove transaction & budget page base
This commit is contained in:
@@ -45,15 +45,15 @@ class StatsPage extends StatelessWidget {
|
||||
),
|
||||
SizedBox(
|
||||
height: 500,
|
||||
child: MonthlyCategoriesTotalChart(categoriesMonthlyTotals: state.scopedCategoriesMonthlyTotals)
|
||||
child: MonthlyCategoriesTotalChart(categoriesMonthlyTotals: state.scopedCategoriesMonthlyTotals, categoriesColors: state.categoriesColors)
|
||||
),
|
||||
SizedBox(
|
||||
height: 450,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesPositiveTotals, categoriesTotalsPercents: state.scopedCategoriesPositiveTotalsPercents,),
|
||||
CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesNegativeTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesNegativeTotalsPercents,),
|
||||
CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesPositiveTotals, categoriesTotalsPercents: state.scopedCategoriesPositiveTotalsPercents, categoriesColors: state.categoriesColors),
|
||||
CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesNegativeTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesNegativeTotalsPercents, categoriesColors: state.categoriesColors),
|
||||
],
|
||||
)
|
||||
),
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user