Skip to content
Snippets Groups Projects
Select Git revision
  • 7d788176890792a7b32058c72ca4fd9a2cb4dab4
  • main default protected
  • Light/DarkMode-Feature
3 results

TasksStatPercent.jsx

Blame
  • user avatar
    alphamine123 authored
    5ea9fde2
    History
    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;