44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import HorizontalBarChart from "../Charts/HorizontalBarChart";
|
|
import { useProjects } from "../../hooks/useProjects";
|
|
|
|
const ProjectCompletionChart = () => {
|
|
const { data, isLoading: loading } = useProjects();
|
|
|
|
const projects = Array.isArray(data)
|
|
? data
|
|
: data?.data && Array.isArray(data.data)
|
|
? data.data
|
|
: [];
|
|
|
|
// 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 = planned ? (completed / planned) * 100 : 0;
|
|
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 fw-bold ">Projects</h5>
|
|
<p className="card-subtitle">Projects Completion Status</p>
|
|
</div>
|
|
</div>
|
|
<div className="card-body ms-n7">
|
|
<HorizontalBarChart
|
|
categories={projectNames}
|
|
seriesData={projectProgress}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectCompletionChart;
|