<commit_before>import React from 'react';

// Visual component showing a horizontal bar broken down into three colors
// showing percent of students at different DIBELS levels.
export default function DibelsBreakdownBar(props) {
  const {height, coreCount, strategicCount, intensiveCount, style = {}} = props;
  const totalCount = coreCount + strategicCount + intensiveCount;
  const opacity = 0.5;
  const fontSize = 10;
  const scale = (value) => `${Math.ceil(100 * value)}%`;

  if (totalCount === 0) return null;
  return (
    <div className="DibelsBreakdownBar" style={{height, ...style}}>
      <div style={{position: 'relative', width: '100%', height}}>
        <div style={{
          position: 'absolute',
          background: 'green',
          opacity,
          fontSize,
          left: scale(0),
          width: scale(coreCount / totalCount),
          height
        }}>{'\u00A0'}</div>
        <div style={{
          position: 'absolute',
          background: 'orange',
          opacity,
          fontSize,
          left: scale(coreCount / totalCount),
          width: scale(strategicCount / totalCount),
          height
        }}>{'\u00A0'}</div>
        <div style={{
          position: 'absolute',
          background: 'red',
          opacity,
          fontSize,
          left: scale((coreCount + strategicCount) / totalCount),
          width: scale(intensiveCount / totalCount),
          height
        }}>{'\u00A0'}</div>

        {coreCount > 0 && 
          <div style={{
            position: 'absolute',
            textAlign: 'right',
            opacity,
            fontSize,
            left: scale(0),
            width: scale(coreCount / totalCount),
            top: height/2  + 1, // padding
            color: 'green'
          }}>{coreCount}</div>}
      </div>
    </div>
  );
}
DibelsBreakdownBar.propTypes = {
  coreCount: React.PropTypes.number.isRequired,
  strategicCount: React.PropTypes.number.isRequired,
  intensiveCount: React.PropTypes.number.isRequired,
  height: React.PropTypes.number.isRequired,
  style: React.PropTypes.object
};
<commit_msg>Add labels to each DibelsBreakDown, refactor<commit_after>import React from 'react';

// Visual component showing a horizontal bar broken down into three colors
// showing percent of students at different DIBELS levels.
export default class DibelsBreakdownBar extends React.Component {
  totalCount() {
    const {coreCount, strategicCount, intensiveCount} = this.props;
    return coreCount + strategicCount + intensiveCount;
  }

  scale(count) {
    const totalCount = this.totalCount();
    return `${Math.ceil(100 * count / totalCount)}%`;
  }

  render() {
    const {height, coreCount, strategicCount, intensiveCount, style = {}} = this.props;    
    return (
      <div className="DibelsBreakdownBar" style={{height, ...style}}>
        <div style={{position: 'relative', width: '100%', height}}>
          {this.renderBarAndLabel({
            left: 0,
            width: coreCount,
            color: 'green'
          })}
          {this.renderBarAndLabel({
            left: coreCount,
            width: strategicCount,
            color: 'orange'
          })}
          {this.renderBarAndLabel({
            left: coreCount + strategicCount,
            width: intensiveCount,
            color: 'red'
          })}
        </div>
      </div>
    );
  }


  renderBarAndLabel({left, width, color}) {
    const {height} = this.props;
    const opacity = 0.5;
    const fontSize = 10;

    if (width === 0) return;
    return (
      <div>
        <div style={{
          opacity,
          fontSize,
          position: 'absolute',
          background: color,
          left: this.scale(left),
          width: this.scale(width),
          height
        }}>{'\u00A0'}</div>
        {width > 0 && 
          <div style={{
            opacity,
            fontSize,
            color,
            position: 'absolute',
            textAlign: 'right',
            left: this.scale(left),
            width: this.scale(width),
            top: height/2  + 1, // padding
            paddingRight: 1
          }}>{width}</div>}
      </div>
    );
  }
}

DibelsBreakdownBar.propTypes = {
  coreCount: React.PropTypes.number.isRequired,
  strategicCount: React.PropTypes.number.isRequired,
  intensiveCount: React.PropTypes.number.isRequired,
  height: React.PropTypes.number.isRequired,
  style: React.PropTypes.object
};

{'fraction_non_alphanumeric': 0.12640575798470535, 'fraction_numerical': 0.009896536212325686, 'mean_word_length': 2.1163279607568324, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 28, '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': '6643273', 'n_tokens_mistral': 1293, 'n_tokens_neox': 1253, 'n_words': 310}