<commit_before>import React, { Component, PropTypes } from 'react';
import { answerTotals } from './utils';

export default class BarGraph extends Component {
  render() {
    const answers = answerTotals(this.props);
    const totalAnswers = this.props.answers.length;
    return (
      <div>
        {Object.keys(answers).map((key) => {
          const total = answers[key];
          const width = ((total / totalAnswers) * 100).toFixed(2);
          const widthPercent = isNaN(width) ? '0%' : `${width}%`;
          return (<div key={key}>
            <strong>{key}</strong>
            <div style={{ height: 20, width: widthPercent, background: '#E5AB28' }}>{ `${widthPercent} (${total})` }</div>
          </div>);
        })}
      </div>
    );
  }
}

BarGraph.propTypes = {
  answers: PropTypes.array.isRequired
};<commit_msg>Style Updates to BarGraph Component<commit_after>import _ from 'lodash';
import React, { Component, PropTypes } from 'react';
import { answerTotals } from './utils';

export default class BarGraph extends Component {
  render() {
    const answers = answerTotals(this.props);
    const totalAnswers = this.props.answers.length;
    return (
      <div className="results__bar-graph">
        {_.keys(answers).map((key) => {
          const total = answers[key];
          const width = ((total / totalAnswers) * 100).toFixed(2);
          const nullWidth = isNaN(width);
          const widthPercent = nullWidth ? '0%' : `${width}%`;
          const valueOffset = nullWidth || width < 80 ? 2 : 20;
          const barValuePosition = isNaN(width) ? '0%' : `${width - valueOffset}%`;
          const greaterThanZero = !nullWidth && width > 0;
          return (<div key={key}>
            <div className="results__bar-graph__row">
              <div className="results__bar-graph__question"><strong>{key}</strong></div>
              <div className="results__bar-graph__bar-row">
                <div className={`results__bar-graph__bar ${(greaterThanZero ? 'active' : '')}`} style={{ height: 20, width: widthPercent, background: '#E5AB28', display: 'inline-block', verticalAlign: 'middle' }}></div>
                {(greaterThanZero ? <span className="results__bar-graph__bar-value" style={{ position: 'absolute', display: 'inline-block', verticalAlign: 'middle', padding: '0 5px', left: barValuePosition }}>{widthPercent} <span className="total">({total})</span></span> : null)}
              </div>
            </div>
          </div>);
        })}
      </div>
    );
  }
}

BarGraph.propTypes = {
  answers: PropTypes.array.isRequired
};
{'fraction_non_alphanumeric': 0.1611024844720497, 'fraction_numerical': 0.01125776397515528, 'mean_word_length': 2.8868778280542986, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 32, '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': '2763356', 'n_tokens_mistral': 786, 'n_tokens_neox': 753, 'n_words': 178}