42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import HorizontalBarChart from "../Charts/HorizontalBarChart";
|
|
import { useProjects } from "../../hooks/useProjects";
|
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|
|
|
const ProjectCompletionChart = () => {
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const { data: projects, isLoading: loading, isError, error } = useProjects(currentPage, ITEMS_PER_PAGE);
|
|
|
|
console.log("Kartik", projects)
|
|
// 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;
|