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

51 lines
2.0 KiB
TypeScript

import { FunctionalComponent, h, Fragment } from "preact";
import { Project } from "../../models/project";
import { useProjectEstimations, Estimation } from "../../hooks/use-project-estimations";
import EstimationRange from "../../components/estimation-range";
export interface TimePreviewProps {
project: Project
}
const TimePreview: FunctionalComponent<TimePreviewProps> = ({ project }) => {
const estimations = useProjectEstimations(project);
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>
<th class="is-narrow">Confiance</th>
<th>Estimation</th>
</tr>
</thead>
<tbody>
<tr>
<td class="is-narrow">>= 99.7%</td>
<td><EstimationRange project={project} estimation={estimations.p99} /></td>
</tr>
<tr>
<td class="is-narrow">>= 90%</td>
<td><EstimationRange project={project} estimation={estimations.p90} /></td>
</tr>
<tr>
<td class="is-narrow">>= 68%</td>
<td><EstimationRange project={project} estimation={estimations.p68} /></td>
</tr>
</tbody>
<tfoot class="noPrint">
<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>
</table>
</div>
);
};
export default TimePreview;