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

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;