<commit_before>import React from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import PropTypes from 'prop-types';

import { get, actions } from '../../store';

import { translate as $t } from '../../helpers';

import BudgetListItem from './item';

class Budget extends React.Component {

    constructor(props) {
        super(props);

        let now = new Date();
        this.state = {
            month: now.getMonth(),
            year: now.getFullYear(),
            showCatWithoutThreshold: true,
            displayInPercent: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.showOperations = this.showOperations.bind(this);
        this.handleToggleWithoutThreshold = this.handleToggleWithoutThreshold.bind(this);
        this.handleTogglePercentDisplay = this.handleTogglePercentDisplay.bind(this);
    }

    handleChange(event) {
        let period = event.currentTarget.value.split('-');

        this.setState({
            month: parseInt(period[1], 10),
            year: parseInt(period[0], 10)
        });
    }

    handleToggleWithoutThreshold() {
        this.setState({
            showCatWithoutThreshold: !this.state.showCatWithoutThreshold
        });
    }

    handleTogglePercentDisplay() {
        this.setState({
            displayInPercent: !this.state.displayInPercent
        });
    }

    showOperations(catId) {
        let periodDate = { year: this.state.year, month: this.state.month };
        let fromDate = moment(periodDate).toDate();
        let toDate = moment(periodDate).endOf('month').toDate();
        this.props.showOperations(catId, fromDate, toDate);
    }

    render() {
        let periodDate = { year: this.state.year, month: this.state.month };
        let fromDate = moment(periodDate).toDate();
        let toDate = moment(periodDate).endOf('month').toDate();
        let dateFilter = op => ((op.date >= fromDate) && (op.date <= toDate));
        let operations = this.props.operations.filter(dateFilter);
        let categoriesToShow = this.props.categories;

        if (!this.state.showCatWithoutThreshold) {
            categoriesToShow = categoriesToShow.filter(cat => cat.threshold !== 0);
        }

        let sumAmounts = 0;
        let sumThresholds = 0;
        let items = categoriesToShow.map(cat => {
            let catOps = operations.filter(op => cat.id === op.categoryId);
            let amount = catOps.reduce((acc, op) => acc + op.amount, 0);

            sumAmounts += amount;
            sumThresholds += cat.threshold;

            return (<BudgetListItem
              key={ cat.id }
              cat={ cat }
              amount={ parseFloat(amount.toFixed(2)) }
              updateCategory={ this.props.updateCategory }
              showOperations={ this.showOperations }
              displayInPercent={ this.state.displayInPercent }
              currentAccountId={ this.props.currentAccountId }
            />);
        });

        let remaining = '-';
        if (sumAmounts) {
            if (this.state.displayInPercent) {
                remaining = 100 * (sumAmounts - sumThresholds) / sumThresholds;
                remaining = `${remaining.toFixed(2)}%`;
            } else {
                remaining = (sumAmounts - sumThresholds).toFixed(2);
            }
        }

        let currentDate = new Date();
        let currentYear = currentDate.getFullYear();
        let currentMonth = currentDate.getMonth();

        let months = this.props.periods.map(period => {
            let monthId = `${period.year}-${period.month}`;
            let label = '';

            if (period.month === currentMonth && period.year === currentYear) {<commit_msg>Fix budget difference percent when no threshold set<commit_after>import React from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import PropTypes from 'prop-types';

import { get, actions } from '../../store';

import { translate as $t } from '../../helpers';

import BudgetListItem from './item';

class Budget extends React.Component {

    constructor(props) {
        super(props);

        let now = new Date();
        this.state = {
            month: now.getMonth(),
            year: now.getFullYear(),
            showCatWithoutThreshold: true,
            displayInPercent: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.showOperations = this.showOperations.bind(this);
        this.handleToggleWithoutThreshold = this.handleToggleWithoutThreshold.bind(this);
        this.handleTogglePercentDisplay = this.handleTogglePercentDisplay.bind(this);
    }

    handleChange(event) {
        let period = event.currentTarget.value.split('-');

        this.setState({
            month: parseInt(period[1], 10),
            year: parseInt(period[0], 10)
        });
    }

    handleToggleWithoutThreshold() {
        this.setState({
            showCatWithoutThreshold: !this.state.showCatWithoutThreshold
        });
    }

    handleTogglePercentDisplay() {
        this.setState({
            displayInPercent: !this.state.displayInPercent
        });
    }

    showOperations(catId) {
        let periodDate = { year: this.state.year, month: this.state.month };
        let fromDate = moment(periodDate).toDate();
        let toDate = moment(periodDate).endOf('month').toDate();
        this.props.showOperations(catId, fromDate, toDate);
    }

    render() {
        let periodDate = { year: this.state.year, month: this.state.month };
        let fromDate = moment(periodDate).toDate();
        let toDate = moment(periodDate).endOf('month').toDate();
        let dateFilter = op => ((op.date >= fromDate) && (op.date <= toDate));
        let operations = this.props.operations.filter(dateFilter);
        let categoriesToShow = this.props.categories;

        if (!this.state.showCatWithoutThreshold) {
            categoriesToShow = categoriesToShow.filter(cat => cat.threshold !== 0);
        }

        let sumAmounts = 0;
        let sumThresholds = 0;
        let items = categoriesToShow.map(cat => {
            let catOps = operations.filter(op => cat.id === op.categoryId);
            let amount = catOps.reduce((acc, op) => acc + op.amount, 0);

            sumAmounts += amount;
            sumThresholds += cat.threshold;

            return (<BudgetListItem
              key={ cat.id }
              cat={ cat }
              amount={ parseFloat(amount.toFixed(2)) }
              updateCategory={ this.props.updateCategory }
              showOperations={ this.showOperations }
              displayInPercent={ this.state.displayInPercent }
              currentAccountId={ this.props.currentAccountId }
            />);
        });

        let remaining = '-';
        if (sumAmounts) {
            if (this.state.displayInPercent) {
                if (sumThresholds) {
                    remaining = 100 * (sumAmounts - sumThresholds) / sumThresholds;
                    remaining = `${remaining.toFixed(2)}%`;
                } else {
                    remaining = '-';
                }
            } else {
                remaining = (sumAmounts - sumThresholds).toFixed(2);
            }
        }

        let currentDate = new Date();
        let currentYear = currentDate.getFullYear();
        let currentMonth = currentDate.getMonth();

        let months = this.props.periods.map(period => {
            let monthId = `${period.year}-${period.month}`;
            let label = '';

            if (period.month === currentMonth && period.year === currentYear) {
{'fraction_non_alphanumeric': 0.12478632478632479, 'fraction_numerical': 0.0042077580539119, 'mean_word_length': 2.10069302894415, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4871098', 'n_tokens_mistral': 2056, 'n_tokens_neox': 2013, 'n_words': 423}