cluedin-widget/core/components/charts/TimeLineBar.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { PropTypes } from 'react';
import iso from '../../../iso';

const TimeLineBar = (props) => {
  const {
    value,
    mode,
  } = props;

  let unit;
  let maxUnit;

  let numberMinutes = iso.entity.format.getPresentationTime(value);

  if (mode === 'timetowrite') {
    numberMinutes = parseInt(value, 10);
  }

  let percentage = (numberMinutes / 360) * 100;

  if (numberMinutes > 360) {
    unit = '1 day';
    maxUnit = '5 days';
    percentage = (numberMinutes / (360 * 5)) * 100;
  } else {
    unit = '1 hour';
    maxUnit = '6 hours';
  }

  return (
    <div className="cluedIn_timeLineBar">
      <div className="simple-bar-wrapper">
        <div className="simplebar">
          <div style={{ width: `${percentage}%` }} className="simplebar-line"></div>
          <div className="unit">{unit}</div>
          <div className="maxunit">{maxUnit}</div>
        </div>
      </div>
    </div>
  );
};

TimeLineBar.propTypes = {
  value: PropTypes.number,
  mode: PropTypes.string,
};

export default TimeLineBar;