c6a95b0d |
import React from 'react';
import { Rectangle } from 'recharts';
import theme from '../theme'; |
8c7841d1 |
import { last } from 'rambda'; |
c6a95b0d |
export default class Job extends React.PureComponent {
render() {
const {
x,
y,
payload: { |
9d471776 |
name, |
c6a95b0d |
formerStartTime,
formerEndTime,
startTime, |
8c7841d1 |
endTime,
delayed |
c6a95b0d |
},
xAxis: {
niceTicks,
width: axisWidth
}
} = this.props;
if (!endTime) return null;
const duration = Math.abs(endTime - startTime);
if (!duration) return null;
const formerDuration = Math.abs(
(typeof formerEndTime === 'undefined' ? endTime : formerEndTime)
- (typeof formerStartTime === 'undefined' ? startTime : formerStartTime)
);
|
8c7841d1 |
// const width = (axisWidth / (niceTicks.length - 1)) * duration;
const width = (axisWidth / ((last(niceTicks) - niceTicks[0]) || 1)) * duration; |
c6a95b0d |
const height = theme.gantt.job.height;
|
8c7841d1 |
// console.log(this.props.payload, axisWidth, niceTicks, duration);
|
9d471776 |
return (
<JobBox
x={x + 5}
y={y + 5}
width={width}
height={height}
duration={formerDuration}
name={name} |
8c7841d1 |
isDelayed={delayed} |
9d471776 |
/>
); |
c6a95b0d |
}
}
|
9d471776 |
class JobBox extends React.PureComponent { |
c6a95b0d |
render() { |
9d471776 |
const { x, y, width, height } = this.props; |
8c7841d1 |
let { duration, name, isDelayed } = this.props;
const { stroke, textColor } = theme.gantt.job; |
9d471776 |
|
8c7841d1 |
const fill = isDelayed ? theme.gantt.job.fillError : theme.gantt.job.fill; |
c6a95b0d |
return (
<React.Fragment>
<Rectangle x={x} y={y - (height / 2)} width={width} height={height} fill={fill} stroke={stroke} /> |
9d471776 |
<text x={x + 10} y={y - 9} alignmentBaseline="central" fill={textColor}>{duration}</text>
<text x={x + 10} y={y + 9} alignmentBaseline="central" fill={textColor}>{name}</text> |
c6a95b0d |
</React.Fragment>
);
}
} |