2023-06-12 20:53:03 +02:00
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:charts_flutter/flutter.dart' as charts;
|
|
|
|
|
|
|
|
|
|
|
|
class MonthlyExpensesChart extends StatelessWidget {
|
|
|
|
final List<ExpenseData> data;
|
|
|
|
|
2023-06-14 00:26:04 +02:00
|
|
|
const MonthlyExpensesChart({super.key, required this.data});
|
2023-06-12 20:53:03 +02:00
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
List<charts.Series<ExpenseData, String>> series = [
|
|
|
|
charts.Series(
|
|
|
|
id: 'Expenses',
|
|
|
|
data: data,
|
|
|
|
domainFn: (ExpenseData expense, _) => expense.month,
|
|
|
|
measureFn: (ExpenseData expense, _) => expense.amount,
|
|
|
|
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
|
|
|
|
),
|
|
|
|
];
|
|
|
|
|
|
|
|
return Container(
|
|
|
|
height: 200,
|
2023-06-14 00:26:04 +02:00
|
|
|
padding: const EdgeInsets.all(16),
|
2023-06-12 20:53:03 +02:00
|
|
|
child: charts.BarChart(
|
|
|
|
series,
|
|
|
|
animate: true,
|
2023-06-14 00:26:04 +02:00
|
|
|
domainAxis: const charts.OrdinalAxisSpec(
|
2023-06-12 20:53:03 +02:00
|
|
|
renderSpec: charts.SmallTickRendererSpec(
|
|
|
|
labelStyle: charts.TextStyleSpec(
|
|
|
|
fontSize: 12,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
2023-06-14 00:26:04 +02:00
|
|
|
primaryMeasureAxis: const charts.NumericAxisSpec(
|
2023-06-12 20:53:03 +02:00
|
|
|
renderSpec: charts.GridlineRendererSpec(
|
|
|
|
labelStyle: charts.TextStyleSpec(
|
|
|
|
fontSize: 12,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class ExpenseData {
|
|
|
|
final String month;
|
|
|
|
final double amount;
|
|
|
|
|
|
|
|
ExpenseData({required this.month, required this.amount});
|
|
|
|
}
|
|
|
|
|