feat: Enhance tooltip behavior in ExpenseDonutChart to display formatted currency and percentage

This commit is contained in:
Vaibhav Surve 2025-11-01 15:52:59 +05:30
parent 9890fbaffe
commit 99f6c594b9

View File

@ -381,13 +381,45 @@ class _ExpenseDonutChartState extends State<_ExpenseDonutChart> {
super.initState();
_tooltipBehavior = TooltipBehavior(
enable: true,
format: 'point.x: point.y',
color: Colors.blueAccent,
textStyle: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w600,
),
builder: (dynamic data, dynamic point, dynamic series, int pointIndex,
int seriesIndex) {
final total = widget.data.report
.fold<double>(0, (sum, e) => sum + e.totalApprovedAmount);
final value = data.value as double;
final percentage = total > 0 ? (value / total * 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.label,
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),
),
],
),
);
},
elevation: 4,
animationDuration: 300,
);