last_three_months_performance_card.dart

Go to the documentation of this file.

import 'package:connect/core/constants/app_values.dart';
import 'package:connect/core/localization/app_localizations.dart';
 
import '/core/ui/widgets/custom_card.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:intl/intl.dart';
 
class LastThreeMonthsPerformanceCard extends StatefulWidget {
  const LastThreeMonthsPerformanceCard({
    super.key,
    required this.earningActualMonth,
    required this.earningLastMonth,
    required this.earningLastTwoMonth,
  });
 
  final num? earningActualMonth;
  final num? earningLastMonth;
  final num? earningLastTwoMonth;
 
  @override
  State<LastThreeMonthsPerformanceCard> createState() =>
      _LastThreeMonthsPerformanceCardState();
}
 
class _LastThreeMonthsPerformanceCardState
    extends State<LastThreeMonthsPerformanceCard> {
  late List<num?> earnings;
  late List<String> months;
  int? hoveredIndex;
 
  @override
  void initState() {
    super.initState();
    earnings = [
      widget.earningLastTwoMonth,
      widget.earningLastMonth,
      widget.earningActualMonth,
    ];
    hoveredIndex = null;
  }
  
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    months = _getMonthNames();
  }
 
  List<String> _getMonthNames() {
    DateTime now = DateTime.now();
    DateTime lastMonth = DateTime(now.year, now.month - 1, now.day);
    DateTime twoMonthsAgo = DateTime(now.year, now.month - 2, now.day);
    List<String> months = [
      _getMonthName(twoMonthsAgo.month),
      _getMonthName(lastMonth.month),
      _getMonthName(now.month),
    ];
    return months;
  }
 
  String _getMonthName(int monthIndex) {
    List<String> monthNames = [
      AppLocalizations.of(context).translate('January'),
      AppLocalizations.of(context).translate('February'),
      AppLocalizations.of(context).translate('March'),
      AppLocalizations.of(context).translate('April'),
      AppLocalizations.of(context).translate('May'),
      AppLocalizations.of(context).translate('June'),
      AppLocalizations.of(context).translate('July'),
      AppLocalizations.of(context).translate('August'),
      AppLocalizations.of(context).translate('September'),
      AppLocalizations.of(context).translate('October'),
      AppLocalizations.of(context).translate('November'),
      AppLocalizations.of(context).translate('December'),
    ];
    return monthNames[monthIndex - 1];
  }
 
  @override
  Widget build(BuildContext context) {
    return CustomCard(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            AppLocalizations.of(context).translate('LAST 3 MONTHS PERFORMANCE'),
            style: Theme.of(context).textTheme.bodySmall,
          ),
          SizedBox(height: 20.sp),
          SizedBox(
            height: 170.sp,
            child: BarChart(
              BarChartData(
                barGroups: _buildBarGroups(),
                titlesData: _buildTitlesData(),
                borderData: FlBorderData(show: false),
                gridData: const FlGridData(show: false),
                alignment: BarChartAlignment.spaceAround,
                groupsSpace: 8.sp,
                barTouchData: _buildBarTouchData(context),
              ),
            ),
          ),
        ],
      ),
    );
  }
 
  List<BarChartGroupData> _buildBarGroups() {
    final validEarnings = earnings.map((e) => e ?? 0).toList();
    final maxEarning = validEarnings.reduce((a, b) => a > b ? a : b);
    return List.generate(
      validEarnings.length,
      (index) {
        final value = validEarnings[index];
        final isHovered = index == hoveredIndex;
        return BarChartGroupData(
          x: index,
          barRods: [
            BarChartRodData(
              toY: maxEarning == 0 ? 0 : value / maxEarning * 8,
              width: 60.sp,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(5),
                topRight: Radius.circular(5),
                bottomLeft: Radius.circular(5),
                bottomRight: Radius.circular(5),
              ),
              gradient: LinearGradient(
                colors: [
                  Theme.of(context)
                      .primaryColor
                      .withOpacity(isHovered ? 0.9 : 0.4),
                  Theme.of(context).colorScheme.surface.withOpacity(0.4),
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
          ],
        );
      },
    );
  }
 
  FlTitlesData _buildTitlesData() {
    return FlTitlesData(
      leftTitles: const AxisTitles(
        sideTitles: SideTitles(showTitles: false),
      ),
      topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
      rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
      bottomTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          getTitlesWidget: (value, _) {
            final index = value.toInt();
            if (index < months.length) {
              return Padding(
                padding: EdgeInsets.only(top: 4.sp),
                child: Text(
                  months[index],
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                        color: Theme.of(context).hintColor,
                        fontSize: 10.sp,
                      ),
                ),
              );
            }
            return const SizedBox.shrink();
          },
        ),
      ),
    );
  }
 
  BarTouchData _buildBarTouchData(BuildContext context) {
    return BarTouchData(
      enabled: true,
      touchTooltipData: BarTouchTooltipData(
        tooltipMargin: 8.sp,
        getTooltipColor: (group) => Theme.of(context).colorScheme.primary,
        getTooltipItem: (group, groupIndex, rod, rodIndex) {
          return BarTooltipItem(
            NumberFormat.currency(symbol: AppValues.currency)
                .format(earnings[groupIndex]),
            Theme.of(context).textTheme.displayLarge!.copyWith(
                  color: Theme.of(context).colorScheme.surface,
                  fontSize: 11.sp,
                ),
          );
        },
      ),
      touchCallback: (event, response) {
        if (response != null && response.spot != null) {
          setState(() {
            hoveredIndex = response.spot!.touchedBarGroupIndex;
          });
        } else {
          setState(() {
            hoveredIndex = null;
          });
        }
      },
    );
  }
}