<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';

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

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

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

  Table = (props) => {
    const { tracker } = props;
    const spellDetails = tracker.spellDetails;

    const detailsArray = Object.keys(spellDetails).map(function (key) {
      return spellDetails[key];
    });
    detailsArray.sort((a, b) => {
      if (a.healingDone < b.healingDone) {
        return 1;
      }
      else if (a.healingDone > b.healingDone) {
        return -1;
      }
      else {
        if (a.damageDone < b.damageDone) {
          return 1;
        }
        else if (a.damageDone > b.damageDone) {
          return -1;
        }
      }
      return 0;
    });

    const spellRows = detailsArray.map((value => {
      if (value.casts > 0) {
        return this.SpellRow(value);
      }
      return null;
    }));

    return spellRows;
  };

  SpellRow = (spellDetail) => {
    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} />}
      </tr>
    );
  };

  BarHeader = (props) => {
    return (
      <>
        {this.state.showHealing &&
        <>
          <th colSpan={2}>
            <dfn data-tip={`Healing per mana spent casting the spell`}>HPM</dfn>
          </th>
          <th colSpan={2}>
            <dfn data-tip={`Healing per second spent casting the spell`}>HPET</dfn>
          </th>
        </>
        }
        {this.state.showDamage &&
        <>
          <th colSpan={2}>
            <dfn data-tip={`Damage per mana spent casting the spell`}>DPM</dfn>
          </th>
          <th colSpan={2}>
            <dfn data-tip={`Damage per second spent casting the spell`}>DPET</dfn>
          </th>
        </>
        }
      </>
    );
  };

  BarView = (props) => {
    const { tracker } = this.props;
    const { spellDetail } = props;
    const hasHealing = spellDetail.healingDone;
    const hasDamage = spellDetail.damageDone > 0;
    console.log(tracker);
    return (
      <>
        {this.state.showHealing &&
        <>
          <td>{hasHealing ? formatNumber(spellDetail.hpm) : '-'}</td>
          <td width="200px;"><PerformanceBar percent={spellDetail.hpm / tracker.topHpm} /></td>

          <td>{hasHealing ? formatNumber(spellDetail.hpm) : '-'}</td>
          <td width="200px;"><PerformanceBar percent={spellDetail.hpet / tracker.topHpet} /></td>
        </>
        }
        {this.state.showDamage &&
        <>
          <td>{hasDamage ? formatNumber(spellDetail.dpm) : '-'}</td>
          <td width="200px;"><PerformanceBar percent={spellDetail.dpm / tracker.topDpm} /></td>

          <td>{hasHealing ? formatNumber(spellDetail.dpec) : '-'}</td>
          <td width="200px;"><PerformanceBar percent={spellDetail.dpet / tracker.topDpet} /></td>
        </>
        }
      </>
    );
  };

  DetailHeader = (props) => {
    return (
      <>
        <th>
          <dfn data-tip={`Total Casts (Number of targets hit)`}>Casts</dfn>
        </th>
        <th>Mana Spent</th>
        {this.state.showHealing &&
        <>
          <th>Healing Done</th>
          <th>Overhealing</th>
          <th>
            <dfn data-tip={`Healing per mana spent casting the spell`}>HPM</dfn>
          </th>
          <th>
            <dfn data-tip={`Healing per second spent casting the spell`}>HPET</dfn>
          </th>
        </>
        }
        {this.state.showDamage &&
        <>
          <th>Damage Done</th>
          <th>
            <dfn data-tip={`Damage per mana spent casting the spell`}>DPM</dfn><commit_msg>Finishing up bar view<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';

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

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

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

  Table = (props) => {
    const { tracker } = props;
    const spellDetails = tracker.spellDetails;

    const detailsArray = Object.keys(spellDetails).map(function (key) {
      return spellDetails[key];
    });
    detailsArray.sort((a, b) => {
      if (a.healingDone < b.healingDone) {
        return 1;
      }
      else if (a.healingDone > b.healingDone) {
        return -1;
      }
      else {
        if (a.damageDone < b.damageDone) {
          return 1;
        }
        else if (a.damageDone > b.damageDone) {
          return -1;
        }
      }
      return 0;
    });

    const spellRows = detailsArray.map((value => {
      if (value.casts > 0) {
        return this.SpellRow(value);
      }
      return null;
    }));

    return spellRows;
  };

  SpellRow = (spellDetail) => {
    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} />}
      </tr>
    );
  };

  BarHeader = (props) => {
    return (
      <>
        {this.state.showHealing &&
        <>
          <th colSpan={2}>
            <dfn data-tip={`Healing per mana spent casting the spell`}>HPM</dfn>
          </th>
          <th colSpan={2}>
            <dfn data-tip={`Healing per second spent casting the spell`}>HPET</dfn>
          </th>
        </>
        }
        {this.state.showDamage &&
        <>
          <th colSpan={2}>
            <dfn data-tip={`Damage per mana spent casting the spell`}>DPM</dfn>
          </th>
          <th colSpan={2}>
            <dfn data-tip={`Damage per second spent casting the spell`}>DPET</dfn>
          </th>
        </>
        }
      </>
    );
  };

  BarView = (props) => {
    const { tracker } = this.props;
    const { spellDetail } = 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 (
      <>
        {this.state.showHealing &&
        <>
          <td>{hasHealing ? formatNumber(spellDetail.hpm) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={spellDetail.hpm / tracker.topHpm} /></td>

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

          <td>{hasHealing ? formatNumber(spellDetail.dpec) : '-'}</td>
          <td width={width + '%'}><PerformanceBar percent={spellDetail.dpet / tracker.topDpet} /></td>
        </>
        }
      </>
    );
  };

  DetailHeader = (props) => {
    return (
      <>
        <th>
          <dfn data-tip={`Total Casts (Number of targets hit)`}>Casts</dfn>
        </th>
        <th>Mana Spent</th>
        {this.state.showHealing &&
        <>
          <th>Healing Done</th>
          <th>Overhealing</th>
          <th>
            <dfn data-tip={`Healing per mana spent casting the spell`}>HPM</dfn>
          </th>
          <th>
            <dfn data-tip={`Healing per second spent casting the spell`}>HPET</dfn>
          </th>
        </>
        }
        {this.state.showDamage &&
        <>
          <th>Damage Done</th>
          <th>
            <dfn data-tip={`Damage per mana spent casting the spell`}>DPM</dfn>
{'fraction_non_alphanumeric': 0.15072587532023912, 'fraction_numerical': 0.005764304013663535, 'mean_word_length': 1.996162456028142, 'pattern_counts': {'":': 0, '<': 177, '<?xml version=': 0, '>': 197, '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': '936900', 'n_tokens_mistral': 3069, 'n_tokens_neox': 2989, 'n_words': 586}