Select Git revision
TasksStatPercent.jsx
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
TasksStatPercent.jsx 3.13 KiB
import React from "react";
import { useTasks } from "@context/TasksContext";
const TasksStatPercent = () => {
const { tasks } = useTasks();
const currentUser = JSON.parse(localStorage.getItem("currentUser"));
const totalTasks = tasks.filter(task => task.email == currentUser.email).length;
const completedTasks = tasks.filter(task => task.isCompleted && task.email == currentUser.email).length;
const radius = 50;
const circumference = 2 * Math.PI * radius;
const completedPercentage = totalTasks === 0 ? 0 : Math.round((completedTasks / totalTasks) * 100);
const strokeDashoffset = circumference - (completedPercentage / 100) * circumference;
return (
<div>
<h2 className="text-xl font-semibold mb-4 dark:text-white">All Tasks completion status</h2>
<div className="flex items-center justify-between">
<div className="relative">
<svg width="120" height="120" className="transform -rotate-90">
<circle
cx="60"
cy="60"
r={radius}
stroke="#E2E8F0"
strokeWidth="8"
fill="none"
/>
<circle
cx="60"
cy="60"
r={radius}
stroke="#7C3AED"
strokeWidth="8"
fill="none"
strokeDasharray={circumference}
strokeDashoffset={strokeDashoffset}
className="dark:stroke-purple-400"
style={{
transition: 'stroke-dashoffset 0.5s ease'
}}
/>
</svg>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div className="text-2xl font-bold dark:text-white">{totalTasks}</div>
<div className="text-sm text-gray-500 dark:text-gray-400">Total</div>
</div>
</div>
<div className="space-y-4">
<div className="bg-white dark:bg-gray-800 p-3 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
<div className="text-2xl font-bold text-violet-700 dark:text-violet-400">{completedPercentage}%</div>
<div className="text-sm text-gray-600 dark:text-gray-300">Completed</div>
</div>
<div className="bg-white dark:bg-gray-800 p-3 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
<div className="text-2xl font-bold text-violet-400">{100 - completedPercentage}%</div>
<div className="text-sm text-gray-600 dark:text-gray-300">Uncompleted</div>
</div>
</div>
</div>
</div>
);
};
export default TasksStatPercent;