521 lines
16 KiB
Dart
521 lines
16 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:syncfusion_flutter_charts/charts.dart';
|
|
import 'package:marco/controller/dashboard/dashboard_controller.dart';
|
|
import 'package:marco/helpers/widgets/my_text.dart';
|
|
import 'package:marco/helpers/utils/utils.dart';
|
|
import 'package:intl/intl.dart';
|
|
|
|
// =========================
|
|
// CONSTANTS
|
|
// =========================
|
|
class _ChartConstants {
|
|
static const List<Color> flatColors = [
|
|
Color(0xFFE57373),
|
|
Color(0xFF64B5F6),
|
|
Color(0xFF81C784),
|
|
Color(0xFFFFB74D),
|
|
Color(0xFFBA68C8),
|
|
Color(0xFFFF8A65),
|
|
Color(0xFF4DB6AC),
|
|
Color(0xFFA1887F),
|
|
Color(0xFFDCE775),
|
|
Color(0xFF9575CD),
|
|
Color(0xFF7986CB),
|
|
Color(0xFFAED581),
|
|
Color(0xFFFF7043),
|
|
Color(0xFF4FC3F7),
|
|
Color(0xFFFFD54F),
|
|
Color(0xFF90A4AE),
|
|
Color(0xFFE573BB),
|
|
Color(0xFF81D4FA),
|
|
Color(0xFFBCAAA4),
|
|
Color(0xFFA5D6A7),
|
|
Color(0xFFCE93D8),
|
|
Color(0xFFFF8A65),
|
|
Color(0xFF80CBC4),
|
|
Color(0xFFFFF176),
|
|
Color(0xFF90CAF9),
|
|
Color(0xFFE0E0E0),
|
|
Color(0xFFF48FB1),
|
|
Color(0xFFA1887F),
|
|
Color(0xFFB0BEC5),
|
|
Color(0xFF81C784),
|
|
Color(0xFFFFB74D),
|
|
Color(0xFF64B5F6),
|
|
];
|
|
|
|
static const Map<MonthlyExpenseDuration, String> durationLabels = {
|
|
MonthlyExpenseDuration.oneMonth: "1M",
|
|
MonthlyExpenseDuration.threeMonths: "3M",
|
|
MonthlyExpenseDuration.sixMonths: "6M",
|
|
MonthlyExpenseDuration.twelveMonths: "12M",
|
|
MonthlyExpenseDuration.all: "All",
|
|
};
|
|
|
|
static const double mobileBreakpoint = 600;
|
|
static const double mobileChartHeight = 350;
|
|
static const double desktopChartHeight = 400;
|
|
static const double mobilePadding = 12;
|
|
static const double desktopPadding = 20;
|
|
static const double mobileVerticalPadding = 16;
|
|
static const double desktopVerticalPadding = 20;
|
|
static const double noDataIconSize = 48;
|
|
static const double noDataContainerHeight = 220;
|
|
static const double labelRotation = 45;
|
|
static const int tooltipAnimationDuration = 300;
|
|
}
|
|
|
|
// =========================
|
|
// MAIN CHART WIDGET
|
|
// =========================
|
|
class MonthlyExpenseDashboardChart extends StatelessWidget {
|
|
MonthlyExpenseDashboardChart({Key? key}) : super(key: key);
|
|
|
|
final DashboardController _controller = Get.find<DashboardController>();
|
|
|
|
Color _getColorForIndex(int index) =>
|
|
_ChartConstants.flatColors[index % _ChartConstants.flatColors.length];
|
|
|
|
BoxDecoration get _containerDecoration => BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(5),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.grey.withOpacity(0.05),
|
|
blurRadius: 6,
|
|
spreadRadius: 1,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
);
|
|
|
|
bool _isMobileLayout(double screenWidth) =>
|
|
screenWidth < _ChartConstants.mobileBreakpoint;
|
|
|
|
double _calculateTotalExpense(List<dynamic> data) =>
|
|
data.fold<double>(0, (sum, item) => sum + item.total);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final screenWidth = MediaQuery.of(context).size.width;
|
|
final isMobile = _isMobileLayout(screenWidth);
|
|
|
|
return Obx(() {
|
|
final isLoading = _controller.isMonthlyExpenseLoading.value;
|
|
final expenseData = _controller.monthlyExpenseList;
|
|
final selectedDuration = _controller.selectedMonthlyExpenseDuration.value;
|
|
final totalExpense = _calculateTotalExpense(expenseData);
|
|
|
|
return Container(
|
|
decoration: _containerDecoration,
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: isMobile
|
|
? _ChartConstants.mobileVerticalPadding
|
|
: _ChartConstants.desktopVerticalPadding,
|
|
horizontal: isMobile
|
|
? _ChartConstants.mobilePadding
|
|
: _ChartConstants.desktopPadding,
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_ChartHeader(
|
|
controller: _controller, // pass controller explicitly
|
|
selectedDuration: selectedDuration,
|
|
onDurationChanged: _controller.updateMonthlyExpenseDuration,
|
|
totalExpense: totalExpense,
|
|
),
|
|
const SizedBox(height: 12),
|
|
SizedBox(
|
|
height: isMobile
|
|
? _ChartConstants.mobileChartHeight
|
|
: _ChartConstants.desktopChartHeight,
|
|
child: _buildChartContent(
|
|
isLoading: isLoading,
|
|
data: expenseData,
|
|
isMobile: isMobile,
|
|
totalExpense: totalExpense,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
Widget _buildChartContent({
|
|
required bool isLoading,
|
|
required List<dynamic> data,
|
|
required bool isMobile,
|
|
required double totalExpense,
|
|
}) {
|
|
if (isLoading) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
|
|
if (data.isEmpty) {
|
|
return const _EmptyDataWidget();
|
|
}
|
|
|
|
return _MonthlyExpenseChart(
|
|
data: data,
|
|
getColor: _getColorForIndex,
|
|
isMobile: isMobile,
|
|
totalExpense: totalExpense,
|
|
);
|
|
}
|
|
}
|
|
|
|
// =========================
|
|
// HEADER WIDGET
|
|
// =========================
|
|
class _ChartHeader extends StatelessWidget {
|
|
const _ChartHeader({
|
|
Key? key,
|
|
required this.controller, // added
|
|
required this.selectedDuration,
|
|
required this.onDurationChanged,
|
|
required this.totalExpense,
|
|
}) : super(key: key);
|
|
|
|
final DashboardController controller; // added
|
|
final MonthlyExpenseDuration selectedDuration;
|
|
final ValueChanged<MonthlyExpenseDuration> onDurationChanged;
|
|
final double totalExpense;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_buildTitle(),
|
|
const SizedBox(height: 2),
|
|
_buildSubtitle(),
|
|
const SizedBox(height: 8),
|
|
// ==========================
|
|
// Row with popup menu on the right
|
|
// ==========================
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
Obx(() {
|
|
final selectedType = controller.selectedExpenseType.value;
|
|
|
|
return PopupMenuButton<String>(
|
|
tooltip: 'Filter by Expense Category',
|
|
onSelected: (String value) {
|
|
if (value == 'all') {
|
|
controller.updateSelectedExpenseType(null);
|
|
} else {
|
|
final type = controller.expenseTypes
|
|
.firstWhere((t) => t.id == value);
|
|
controller.updateSelectedExpenseType(type);
|
|
}
|
|
},
|
|
itemBuilder: (context) {
|
|
final types = controller.expenseTypes;
|
|
return [
|
|
PopupMenuItem<String>(
|
|
value: 'all',
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
const Text('All Types'),
|
|
if (selectedType == null)
|
|
const Icon(Icons.check,
|
|
size: 16, color: Colors.blueAccent),
|
|
],
|
|
),
|
|
),
|
|
...types.map((type) => PopupMenuItem<String>(
|
|
value: type.id,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(type.name),
|
|
if (selectedType?.id == type.id)
|
|
const Icon(Icons.check,
|
|
size: 16, color: Colors.blueAccent),
|
|
],
|
|
),
|
|
)),
|
|
];
|
|
},
|
|
child: Container(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
border: Border.all(color: Colors.grey.shade300),
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Flexible(
|
|
child: Text(
|
|
selectedType?.name ?? 'All Types',
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(fontSize: 14),
|
|
),
|
|
),
|
|
const SizedBox(width: 4),
|
|
const Icon(Icons.arrow_drop_down, size: 20),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 8),
|
|
_buildDurationSelector(),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildTitle() =>
|
|
MyText.bodyMedium('Monthly Expense Overview', fontWeight: 700);
|
|
|
|
Widget _buildSubtitle() =>
|
|
MyText.bodySmall('Month-wise total expense', color: Colors.grey);
|
|
|
|
Widget _buildDurationSelector() {
|
|
return Row(
|
|
children: _ChartConstants.durationLabels.entries
|
|
.map((entry) => _DurationChip(
|
|
label: entry.value,
|
|
duration: entry.key,
|
|
isSelected: selectedDuration == entry.key,
|
|
onSelected: onDurationChanged,
|
|
))
|
|
.toList(),
|
|
);
|
|
}
|
|
}
|
|
|
|
// =========================
|
|
// DURATION CHIP WIDGET
|
|
// =========================
|
|
class _DurationChip extends StatelessWidget {
|
|
const _DurationChip({
|
|
Key? key,
|
|
required this.label,
|
|
required this.duration,
|
|
required this.isSelected,
|
|
required this.onSelected,
|
|
}) : super(key: key);
|
|
|
|
final String label;
|
|
final MonthlyExpenseDuration duration;
|
|
final bool isSelected;
|
|
final ValueChanged<MonthlyExpenseDuration> onSelected;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.only(right: 4),
|
|
child: ChoiceChip(
|
|
label: Text(label, style: const TextStyle(fontSize: 12)),
|
|
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 0),
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
visualDensity: VisualDensity.compact,
|
|
selected: isSelected,
|
|
onSelected: (_) => onSelected(duration),
|
|
selectedColor: Colors.blueAccent.withOpacity(0.15),
|
|
backgroundColor: Colors.grey.shade200,
|
|
labelStyle: TextStyle(
|
|
color: isSelected ? Colors.blueAccent : Colors.black87,
|
|
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(5),
|
|
side: BorderSide(
|
|
color: isSelected ? Colors.blueAccent : Colors.grey.shade300,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// =========================
|
|
// EMPTY DATA WIDGET
|
|
// =========================
|
|
class _EmptyDataWidget extends StatelessWidget {
|
|
const _EmptyDataWidget({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
height: _ChartConstants.noDataContainerHeight,
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.info_outline,
|
|
color: Colors.grey.shade400,
|
|
size: _ChartConstants.noDataIconSize,
|
|
),
|
|
const SizedBox(height: 10),
|
|
MyText.bodyMedium(
|
|
'No monthly expense data available.',
|
|
textAlign: TextAlign.center,
|
|
color: Colors.grey.shade500,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// =========================
|
|
// CHART WIDGET
|
|
// =========================
|
|
class _MonthlyExpenseChart extends StatelessWidget {
|
|
const _MonthlyExpenseChart({
|
|
Key? key,
|
|
required this.data,
|
|
required this.getColor,
|
|
required this.isMobile,
|
|
required this.totalExpense,
|
|
}) : super(key: key);
|
|
|
|
final List<dynamic> data;
|
|
final Color Function(int index) getColor;
|
|
final bool isMobile;
|
|
final double totalExpense;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SfCartesianChart(
|
|
tooltipBehavior: _buildTooltipBehavior(),
|
|
primaryXAxis: _buildXAxis(),
|
|
primaryYAxis: _buildYAxis(),
|
|
series: <ColumnSeries>[_buildColumnSeries()],
|
|
);
|
|
}
|
|
|
|
TooltipBehavior _buildTooltipBehavior() {
|
|
return TooltipBehavior(
|
|
enable: true,
|
|
builder: _tooltipBuilder,
|
|
animationDuration: _ChartConstants.tooltipAnimationDuration,
|
|
);
|
|
}
|
|
|
|
Widget _tooltipBuilder(
|
|
dynamic data,
|
|
dynamic point,
|
|
dynamic series,
|
|
int pointIndex,
|
|
int seriesIndex,
|
|
) {
|
|
final value = data.total as double;
|
|
final percentage = totalExpense > 0 ? (value / totalExpense * 100) : 0;
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
color: Colors.blueAccent,
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'${data.monthName} ${data.year}',
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
Utils.formatCurrency(value),
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
Text(
|
|
'${percentage.toStringAsFixed(1)}%',
|
|
style: const TextStyle(
|
|
color: Colors.white70,
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 10,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
CategoryAxis _buildXAxis() {
|
|
return CategoryAxis(
|
|
labelRotation: _ChartConstants.labelRotation.toInt(),
|
|
majorGridLines:
|
|
const MajorGridLines(width: 0), // removes X-axis grid lines
|
|
);
|
|
}
|
|
|
|
NumericAxis _buildYAxis() {
|
|
return NumericAxis(
|
|
numberFormat: NumberFormat.simpleCurrency(
|
|
locale: 'en_IN',
|
|
name: '₹',
|
|
decimalDigits: 0,
|
|
),
|
|
axisLabelFormatter: (AxisLabelRenderDetails args) {
|
|
return ChartAxisLabel(Utils.formatCurrency(args.value), null);
|
|
},
|
|
majorGridLines:
|
|
const MajorGridLines(width: 0), // removes Y-axis grid lines
|
|
);
|
|
}
|
|
|
|
ColumnSeries<dynamic, String> _buildColumnSeries() {
|
|
return ColumnSeries<dynamic, String>(
|
|
dataSource: data,
|
|
xValueMapper: (d, _) => _ChartFormatter.formatMonthYear(d),
|
|
yValueMapper: (d, _) => d.total,
|
|
pointColorMapper: (_, index) => getColor(index),
|
|
name: 'Monthly Expense',
|
|
borderRadius: BorderRadius.circular(4),
|
|
dataLabelSettings: _buildDataLabelSettings(),
|
|
);
|
|
}
|
|
|
|
DataLabelSettings _buildDataLabelSettings() {
|
|
return DataLabelSettings(
|
|
isVisible: true,
|
|
builder: (data, _, __, ___, ____) => Text(
|
|
Utils.formatCurrency(data.total),
|
|
style: const TextStyle(fontSize: 11),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// =========================
|
|
// FORMATTER HELPER
|
|
// =========================
|
|
class _ChartFormatter {
|
|
static String formatMonthYear(dynamic data) {
|
|
try {
|
|
final month = data.month ?? 1;
|
|
final year = data.year ?? DateTime.now().year;
|
|
final date = DateTime(year, month, 1);
|
|
final monthName = DateFormat('MMM').format(date);
|
|
final shortYear = year % 100;
|
|
return '$shortYear $monthName';
|
|
} catch (e) {
|
|
return '${data.monthName} ${data.year}';
|
|
}
|
|
}
|
|
}
|