38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
import React from "react";
|
|
import HorizontalBarChart from "../Charts/HorizontalBarChart";
|
|
import { useProjects } from "../../hooks/useProjects";
|
|
|
|
const ProjectCompletionChart = () => {
|
|
const { projects, loading } = useProjects();
|
|
|
|
// Bar chart logic
|
|
const projectNames = projects?.map((p) => p.name) || [];
|
|
const projectProgress =
|
|
projects?.map((p) => {
|
|
const completed = p.completedWork || 0;
|
|
const planned = p.plannedWork || 1;
|
|
const percent = (completed / planned) * 100;
|
|
return Math.min(Math.round(percent), 100);
|
|
}) || [];
|
|
|
|
return (
|
|
<div className="card h-100">
|
|
<div className="card-header d-flex align-items-start justify-content-between">
|
|
<div className="card-title mb-0 text-start">
|
|
<h5 className="mb-1">Projects</h5>
|
|
<p className="card-subtitle">Projects Completion Status</p>
|
|
</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<HorizontalBarChart
|
|
categories={projectNames}
|
|
seriesData={projectProgress}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectCompletionChart;
|