<commit_before>
import React, { Component } from 'react';

import GivingChart from './GivingChart.js';

const styles = {
  container: {
    marginTop: '2rem',
    flexDirection: 'columns',
  },
  rowContainer: {
    flexDirection: 'row',
    display: 'flex',
  },
  leftRightPadding: {
    margin: '0rem 2rem',
  },
  allPadding: {
    margin: '2rem',
  }
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      year: "2017",
      month: "January",
      giving: 10000,
      budget: 20000,
      errorMessage: "",
    };

    this.changedYear = this.changedYear.bind(this);
    this.changedMonth = this.changedMonth.bind(this);
    this.changedGiving = this.changedGiving.bind(this);
    this.changedBudget = this.changedBudget.bind(this);
    this.saveGraph = this.saveGraph.bind(this);
  }

  changedYear(event) {
    this.setState({year: event.target.value});
  }

  changedMonth(event) {
    this.setState({month: event.target.value});
  }

  changedGiving(event) {
    this.setState({giving: event.target.value});
  }

  changedBudget(event) {
    this.setState({budget: event.target.value});
  }

  saveGraph(event) {
    const imageData = this.refs.givingChart.getImageData();
    this.refs.downloadButton.href = imageData;
  }

  render() {
    const {
      year,
      month,
      giving,
      budget,
      errorMessage,
    } = this.state;

    let errorBox;
    let graph;
    let saveButton;
    if (errorMessage) {
      errorBox = (
        <pre style={styles.leftRightPadding}>
          <code>
            {errorMessage}
          </code>
        </pre>
      );

      saveButton = (
        <button
          style={styles.allPadding}
          disabled
          className="button-primary"
        >
          Save Chart
        </button>
      );
    } else {
      graph = (
        <div style={styles.leftRightPadding}>
          <GivingChart
            ref="givingChart"
            year={year}
            month={month}
            giving={giving}
            budget={budget}
          />
        </div>
      );

      const downloadTitle = `${month} ${year} Giving Chart`;
      saveButton = (
        <a
          ref="downloadButton"<commit_msg>Generate error messages on numbers being 0 or negative<commit_after>
import React, { Component } from 'react';

import GivingChart from './GivingChart.js';

const styles = {
  container: {
    marginTop: '2rem',
    flexDirection: 'columns',
  },
  rowContainer: {
    flexDirection: 'row',
    display: 'flex',
  },
  leftRightPadding: {
    margin: '0rem 2rem',
  },
  allPadding: {
    margin: '2rem',
  }
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      year: "2017",
      month: "January",
      giving: 3,
      budget: 20,
      errorMessages: [],
    };

    this.checkForErrors = this.checkForErrors.bind(this);

    this.changedYear = this.changedYear.bind(this);
    this.changedMonth = this.changedMonth.bind(this);
    this.changedGiving = this.changedGiving.bind(this);
    this.changedBudget = this.changedBudget.bind(this);
    this.saveGraph = this.saveGraph.bind(this);
  }

  changedYear(event) {
    this.setState({year: event.target.value});
  }

  changedMonth(event) {
    this.setState({month: event.target.value});
  }

  checkForErrors(error, value) {
    const { errorMessages } = this.state;

    if (value <= 0) {
      if (!errorMessages.includes(error)) {
        this.setState({
          errorMessages: [...errorMessages, error],
        });
      }
    } else {
      this.setState({
        errorMessages: errorMessages.filter((item) => {
          return item !== error;
        })
      });
    }
  }

  changedGiving(event) {
    const value = event.target.value;
    this.checkForErrors('Giving cannot be 0 or negative', value);
    this.setState({giving: value});
  }

  changedBudget(event) {
    const value = event.target.value;
    this.checkForErrors('Budget cannot be 0 or negative', value);
    this.setState({budget: value});
  }

  saveGraph(event) {
    const imageData = this.refs.givingChart.getImageData();
    this.refs.downloadButton.href = imageData;
  }

  render() {
    const {
      year,
      month,
      giving,
      budget,
      errorMessages,
    } = this.state;

    let errorBox;
    let graph;
    let saveButton;
    if (errorMessages.length !== 0) {
      errorBox = (
        <pre style={styles.leftRightPadding}>
          <code>
            {errorMessages.join('\n')}
          </code>
        </pre>
      );

      saveButton = (
        <button
          style={styles.allPadding}
          disabled
          className="button-primary"
        >
          Save Chart
        </button>
      );
    } else {
      graph = (
        <div style={styles.leftRightPadding}>
          <GivingChart
            ref="givingChart"
            year={year}
            month={month}
            giving={giving}
            budget={budget}
          />
        </div>
      );

      const downloadTitle = `${month} ${year} Giving Chart`;
      saveButton = (
        <a
          ref="downloadButton"
{'fraction_non_alphanumeric': 0.13275024295432458, 'fraction_numerical': 0.006608357628765792, 'mean_word_length': 2.0962695547533094, 'pattern_counts': {'":': 0, '<': 24, '<?xml version=': 0, '>': 22, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '555896', 'n_tokens_mistral': 1621, 'n_tokens_neox': 1569, 'n_words': 301}