guesstimate/src/routes/project/time-preview.tsx

51 lines
1.9 KiB
TypeScript
Raw Normal View History

2020-04-20 11:14:46 +02:00
import { FunctionalComponent, h } from "preact";
import { Project } from "../../models/project";
2020-04-21 14:10:50 +02:00
import { useProjectEstimations } from "../../hooks/use-project-estimations";
2020-04-20 11:14:46 +02:00
export interface TimePreviewProps {
project: Project
}
const TimePreview: FunctionalComponent<TimePreviewProps> = ({ project }) => {
2020-04-21 14:10:50 +02:00
const estimations = useProjectEstimations(project);
2020-04-20 11:14:46 +02:00
return (
<div class="table-container">
<table class="table is-bordered is-striped is-fullwidth">
<thead>
<tr>
<th colSpan={2}>Prévisionnel temps</th>
</tr>
<tr>
2020-04-21 14:10:50 +02:00
<th class="is-narrow">Confiance</th>
2020-04-20 11:14:46 +02:00
<th>Estimation</th>
</tr>
</thead>
<tbody>
<tr>
2020-04-21 14:10:50 +02:00
<td class="is-narrow">>= 99.7%</td>
<td>{`${estimations.p99.e.toPrecision(2)} ± ${estimations.p99.sd.toPrecision(2)} j/h`}</td>
2020-04-20 11:14:46 +02:00
</tr>
<tr>
2020-04-21 14:10:50 +02:00
<td class="is-narrow">>= 90%</td>
<td>{`${estimations.p90.e.toPrecision(2)} ± ${estimations.p90.sd.toPrecision(2)} j/h`}</td>
2020-04-20 11:14:46 +02:00
</tr>
<tr>
2020-04-21 14:10:50 +02:00
<td class="is-narrow">>= 68%</td>
<td>{`${estimations.p68.e.toPrecision(2)} ± ${estimations.p68.sd.toPrecision(2)} j/h`}</td>
2020-04-20 11:14:46 +02:00
</tr>
</tbody>
2020-04-21 14:10:50 +02:00
<tfoot class="noPrint">
2020-04-20 14:07:26 +02:00
<tr>
<td colSpan={2}>
<a class="is-small is-pulled-right" href="https://en.wikipedia.org/wiki/Three-point_estimation" target="_blank"> Estimation à 3 points</a>
</td>
</tr>
</tfoot>
2020-04-20 11:14:46 +02:00
</table>
</div>
);
};
export default TimePreview;