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

42 lines
1.2 KiB
TypeScript

import React, { FunctionComponent } from "react";
import { Project } from "../../models/project";
import { getTaskCategoriesMeanRepartition } from "../../util/stat";
export interface RepartitionPreviewProps {
project: Project
}
const RepartitionPreview: FunctionComponent<RepartitionPreviewProps> = ({ project }) => {
const repartition = getTaskCategoriesMeanRepartition(project);
return (
<div className="table-container">
<table className="table is-bordered is-striped is-fullwidth">
<thead>
<tr>
<th colSpan={2}>Répartition moyenne</th>
</tr>
<tr>
<th>Catégorie</th>
<th>Temps (en %)</th>
</tr>
</thead>
<tbody>
{
Object.values(project.params.taskCategories).map(tc => {
let percent = (repartition[tc.id] * 100).toFixed(0);
return (
<tr key={`task-category-${tc.id}`}>
<td>{tc.label}</td>
<td>{percent} %</td>
</tr>
);
})
}
</tbody>
</table>
</div>
);
};
export default RepartitionPreview;