<commit_before>import { fromJS } from 'immutable';
import { pluck } from '../../../../tools';
import Donut from '../../../donut';

class CenterText extends React.Component {
  render() {
    const { data } = this.props;
    if (!data) return null;
    const [won, lost] = data.map(pluck('value'));
    const sum = won + lost;
    const percent = (won / sum) * 100;
    return (
      <div className="center-text two-rows">
        <div>
          {won}
          <div className="secondary">
            of {sum} ({Math.trunc(percent)}%)
          </div>
        </div>
      </div>
    );
  }
}

class NrWonVsLost extends React.PureComponent {
  transformNewData(path, data) {
    this.props.requestNewData(path, [{
      color: '#165781',
      label: 'Won',
      value: data.getIn([0, 'won', 'count']),
    }, {
      color: '#5fa0c9',
      label: 'Lost',
      value: data.getIn([0, 'lostCount'])
    }]);
  }

  render() {
    return (
      <Donut
        {...this.props}
        requestNewData={this.transformNewData.bind(this)}
        data={this.props.data || []}<commit_msg>OCE-427 Titles for 1st donut<commit_after>import { fromJS } from 'immutable';
import { pluck } from '../../../../tools';
import Donut from '../../../donut';

class CenterText extends React.Component {
  render() {
    const { data } = this.props;
    if (!data) return null;
    const [won, lost] = data.map(pluck('value'));
    const sum = won + lost;
    const percent = (won / sum) * 100;
    return (
      <div className="center-text two-rows">
        <div>
          {won}
          <div className="secondary">
            of {sum} ({Math.trunc(percent)}%)
          </div>
        </div>
      </div>
    );
  }
}

class NrWonVsLost extends React.PureComponent {
  transformNewData(path, data) {
    const won = data.getIn([0, 'won', 'count']);
    const lost = data.getIn([0, 'lostCount']);
    const sum = won + lost;
    const wonPercent = (won / sum * 100).toFixed(2);
    const lostPercent = (lost / sum * 100).toFixed(2);
    this.props.requestNewData(path, [{
      color: '#165781',
      label: `${won} (${wonPercent}%) contracts won`,
      value: won
    }, {
      color: '#5fa0c9',
      label: `${lost} (${lostPercent}%) contracts lost`,
      value: lost
    }]);
  }

  render() {
    return (
      <Donut
        {...this.props}
        requestNewData={this.transformNewData.bind(this)}
        data={this.props.data || []}
{'fraction_non_alphanumeric': 0.18118323746918652, 'fraction_numerical': 0.016433853738701727, 'mean_word_length': 2.2208994708994707, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 15, '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': '3402662', 'n_tokens_mistral': 827, 'n_tokens_neox': 800, 'n_words': 188}