<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import SpellIcon from 'common/SpellIcon';
import { formatNumber, formatPercentage } from 'common/format';
import Toggle from 'react-toggle';
import ReactTooltip from 'react-tooltip';
import colorForPerformance from 'parser/shared/modules/features/Checklist2/helpers/colorForPerformance';

class PerformanceBar extends React.Component {
  static propTypes = {
    percent: PropTypes.number.isRequired,
  };

  render() {
    return (
      <div className="performance-bar-container">
        <div
          className="performance-bar"
          style={{
            width: `${this.props.percent * 100}%`,
            transition: 'background-color 800ms',
            backgroundColor: colorForPerformance(this.props.percent),
          }}
        />
      </div>
    );
  }
}

class HealingEfficiencyBreakdown extends React.Component {
  static propTypes = {
    tracker: PropTypes.object.isRequired,
  };

  constructor() {
    super();
    this.state = {
      showHealing: true,
      showDamage: false,
      detailedView: false,
      showCooldowns: false,
    };
  }

  HealingEfficiencyTable = (props) => {
    const { tracker } = props;
    const { spells, topHpm, topDpm, topHpet, topDpet } = tracker.getAllSpellStats(this.state.showCooldowns);

    const spellArray = Object.keys(spells).map(function (key) {
      return spells[key];
    });
    spellArray.sort((a, b) => {
      if (a.hpm < b.hpm) {
        return 1;
      }
      else if (a.hpm > b.hpm) {
        return -1;
      }
      else {
        if (a.dpm < b.dpm) {
          return 1;
        }
        else if (a.dpm > b.dpm) {
          return -1;
        }
      }
      return 0;
    });

    const spellRows = spellArray.map((spellDetail => {
      if (spellDetail.casts > 0) {
        return this.HealingEfficiencySpellRow(spellDetail, topHpm, topDpm, topHpet, topDpet);
      }
      return null;
    }));

    return spellRows;
  };

  HealingEfficiencySpellRow = (spellDetail, topHpm, topDpm, topHpet, topDpet) => {
    return (
      <tr key={spellDetail.spell.id}>
        <td>
          <SpellIcon id={spellDetail.spell.id} /> {spellDetail.spell.name}
        </td>
        {this.state.detailedView ? <this.DetailView spellDetail={spellDetail} /> : <this.BarView spellDetail={spellDetail} topHpm={topHpm} topDpm={topDpm} topHpet={topHpet} topDpet={topDpet} />}
      </tr>
    );
  };

  BarHeader = () => {
    return (
      <>
        <th>Mana Spent</th>
        {this.state.showHealing &&
        <>
          <th colSpan={2} className={'text-center'}>Healing per mana spent</th>
          <th colSpan={2} className={'text-center'}>Healing per second spent casting</th>
        </>
        }
        {this.state.showDamage &&
        <>
          <th colSpan={2} className={'text-center'}>Damage per mana spent</th>
          <th colSpan={2} className={'text-center'}>Damage per second spent casting</th>
        </>
        }
      </>
    );
  };

  BarView = (props) => {
    const { spellDetail, topHpm, topDpm, topHpet, topDpet } = props;
    const hasHealing = spellDetail.healingDone;
    const hasDamage = spellDetail.damageDone > 0;
    let width = 30;
    if (this.state.showHealing) width -= 10;
    if (this.state.showDamage) width -= 10;

    return (
      <>
        <td>
          {formatNumber(spellDetail.manaSpent)}
          {' (' + formatPercentage(spellDetail.manaPercentSpent) + '%)'}
        </td>
        {this.state.showHealing &&
        <>
          <td className={'text-right'}>{hasHealing ? formatNumber(spellDetail.hpm) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={spellDetail.hpm / topHpm} /></td>

          <td className={'text-right'}>{hasHealing ? formatNumber(spellDetail.hpet) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={(spellDetail.hpet / topHpet) * 1000} /></td>
        </>
        }
        {this.state.showDamage &&
        <>
          <td className={'text-right'}>{hasDamage ? formatNumber(spellDetail.dpm) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={spellDetail.dpm / topDpm} /></td>

          <td className={'text-right'}>{hasHealing ? formatNumber(spellDetail.dpet) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={(spellDetail.dpet / topDpet) * 1000} /></td>
        </>
        }
      </>
    );
  };

  DetailHeader = () => {
    return (
      <><commit_msg>fixing bug with hpet and dpet<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import SpellIcon from 'common/SpellIcon';
import { formatNumber, formatPercentage } from 'common/format';
import Toggle from 'react-toggle';
import ReactTooltip from 'react-tooltip';
import colorForPerformance from 'parser/shared/modules/features/Checklist2/helpers/colorForPerformance';

class PerformanceBar extends React.Component {
  static propTypes = {
    percent: PropTypes.number.isRequired,
  };

  render() {
    return (
      <div className="performance-bar-container">
        <div
          className="performance-bar"
          style={{
            width: `${this.props.percent * 100}%`,
            transition: 'background-color 800ms',
            backgroundColor: colorForPerformance(this.props.percent),
          }}
        />
      </div>
    );
  }
}

class HealingEfficiencyBreakdown extends React.Component {
  static propTypes = {
    tracker: PropTypes.object.isRequired,
  };

  constructor() {
    super();
    this.state = {
      showHealing: true,
      showDamage: false,
      detailedView: false,
      showCooldowns: false,
    };
  }

  HealingEfficiencyTable = (props) => {
    const { tracker } = props;
    const { spells, topHpm, topDpm, topHpet, topDpet } = tracker.getAllSpellStats(this.state.showCooldowns);

    const spellArray = Object.keys(spells).map(function (key) {
      return spells[key];
    });
    spellArray.sort((a, b) => {
      if (a.hpm < b.hpm) {
        return 1;
      }
      else if (a.hpm > b.hpm) {
        return -1;
      }
      else {
        if (a.dpm < b.dpm) {
          return 1;
        }
        else if (a.dpm > b.dpm) {
          return -1;
        }
      }
      return 0;
    });

    const spellRows = spellArray.map((spellDetail => {
      if (spellDetail.casts > 0) {
        return this.HealingEfficiencySpellRow(spellDetail, topHpm, topDpm, topHpet, topDpet);
      }
      return null;
    }));

    return spellRows;
  };

  HealingEfficiencySpellRow = (spellDetail, topHpm, topDpm, topHpet, topDpet) => {
    return (
      <tr key={spellDetail.spell.id}>
        <td>
          <SpellIcon id={spellDetail.spell.id} /> {spellDetail.spell.name}
        </td>
        {this.state.detailedView ? <this.DetailView spellDetail={spellDetail} /> : <this.BarView spellDetail={spellDetail} topHpm={topHpm} topDpm={topDpm} topHpet={topHpet} topDpet={topDpet} />}
      </tr>
    );
  };

  BarHeader = () => {
    return (
      <>
        <th>Mana Spent</th>
        {this.state.showHealing &&
        <>
          <th colSpan={2} className={'text-center'}>Healing per mana spent</th>
          <th colSpan={2} className={'text-center'}>Healing per second spent casting</th>
        </>
        }
        {this.state.showDamage &&
        <>
          <th colSpan={2} className={'text-center'}>Damage per mana spent</th>
          <th colSpan={2} className={'text-center'}>Damage per second spent casting</th>
        </>
        }
      </>
    );
  };

  BarView = (props) => {
    const { spellDetail, topHpm, topDpm, topHpet, topDpet } = props;
    const hasHealing = spellDetail.healingDone;
    const hasDamage = spellDetail.damageDone > 0;
    let width = 30;
    if (this.state.showHealing) width -= 10;
    if (this.state.showDamage) width -= 10;

    return (
      <>
        <td>
          {formatNumber(spellDetail.manaSpent)}
          {' (' + formatPercentage(spellDetail.manaPercentSpent) + '%)'}
        </td>
        {this.state.showHealing &&
        <>
          <td className={'text-right'}>{hasHealing ? formatNumber(spellDetail.hpm) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={spellDetail.hpm / topHpm} /></td>

          <td className={'text-right'}>{hasHealing ? formatNumber(spellDetail.hpet * 1000) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={(spellDetail.hpet / topHpet)} /></td>
        </>
        }
        {this.state.showDamage &&
        <>
          <td className={'text-right'}>{hasDamage ? formatNumber(spellDetail.dpm) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={spellDetail.dpm / topDpm} /></td>

          <td className={'text-right'}>{hasDamage ? formatNumber(spellDetail.dpet * 1000) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={(spellDetail.dpet / topDpet)} /></td>
        </>
        }
      </>
    );
  };

  DetailHeader = () => {
    return (
      <>
{'fraction_non_alphanumeric': 0.15372618915005012, 'fraction_numerical': 0.007129330511306673, 'mean_word_length': 2.37012012012012, 'pattern_counts': {'":': 0, '<': 117, '<?xml version=': 0, '>': 135, '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': '827973', 'n_tokens_mistral': 2978, 'n_tokens_neox': 2922, 'n_words': 539}