{"size": 979, "ext": "js", "max_stars_repo_path": "front/src/components/cpu.js", "max_stars_repo_name": "shinomontaz/servermap", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "front/src/components/cpu.js", "max_issues_repo_name": "shinomontaz/servermap", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "front/src/components/cpu.js", "max_forks_repo_name": "shinomontaz/servermap", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.829787234, "max_line_length": 70, "alphanum_fraction": 0.5127681307}
import React, { Component } from "react";
import { Icon } from 'semantic-ui-react'

class Cpu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }

  render () {
    var {maxCpu, current, total} = this.props
    var chips = [];

    if (!maxCpu) {
      maxCpu = total
    }

    const maxItems = Math.ceil( ( total / maxCpu ) * 5 ) ;

    const busyItems = Math.floor( ( current / total ) * maxItems ) ;
    const topBusyItems = Math.ceil( ( current / total ) * maxItems ) ;

    for (var i=0; i<maxItems; i++) {
      chips[i] = "green";
      if (current > total ) {
        chips[i] = "red";
      }
      if (i < topBusyItems && i >= busyItems) {
        chips[i] = "olive";
      }
      if (i >= topBusyItems) {
        chips[i] = "grey";
      }
    }

    return(
      chips.map((value, index) => {
        return <Icon key={index} name='th' style={{ color: value }}/>
      })
    );
  }
}

export default Cpu;
