Chart

Overview

This Analysis Page displays transaction analysis for the user. It includes a bar chart visualization of transactions. The chart displays transactions of the user for the date range selected in the date filter option available at the top of the page.
The legends of the chart includes Income, Expenses, and transactions in a day summing above 2.5k+ transactional value. The value of the individual bars can be viewed by ‘tap and hold’.

Functions Called

  void initState() {
    super.initState();
    amount = getAmount();
    transaction = getTransactions();
  }

• Purpose: Initializes the state of the widget when it is first created.
• Functionality:
  • Calls super.initState() to ensure the base class initialization.
  • amount = getAmount(): Retrieves the total amount of transactions from the getAmount service.
  • transaction = getTransactions(): Fetches the list of transactions using the getTransactions service.

The Bar Chart

The transactions are divided in three categories namely: Income, Expenses and transactions with value more than 2.5k.
The color coding for the type of transactions is as shown above. Transactions having value more than 2.5k are coloured ‘Orange’ and a limit is in place on top of its bar graph to counter its overflow.

build Method

The build method is responsible for constructing the widget tree of the TheBarChart widget. This method is called whenever the state of the widget changes, and it returns a Widget that represents the UI of the TheBarChart widget.

TheBarChart Widget

Overview

• TheBarChart is a StatefulWidget that displays a bar chart based on a list of transactions. It allows the user to filter the data by date range and visualize the filtered results in a bar chart.

• TheBarChart({required this.listOftransactions});
  

  listOftransactions: Required parameter. It is a list of transactions used to generate the bar chart.

TheBarChartState Class

Methods

• _filterTransactions

  • Description: Filters the transactions based on _dateFrom and _dateTo, updates myList, and prepares data for the bar chart.
  • Implementation: Calls getAnalysisFilteredTransactions to filter transactions and processes the filtered data into BarChartGroupData.

    _filteredTransactions = getAnalysisFilteredTransactions(
      dateFrom: _dateFrom,
      dateTo: _dateTo,
    );
  

• _showDateBottomSheet

  • Description: Displays a bottom sheet that allows users to select date ranges for filtering transactions.
  • Implementation: Provides two ListTile widgets for selecting ‘From Date’ and ‘To Date’ using showDatePicker. Also provides buttons for applying or cancelling the Date Selection