frontend/src/organisms/PieChartComponent.js

import * as Plot from "@observablehq/plot";
import { Card } from "react-bootstrap";
import React, {useRef, useEffect} from "react";


const PieChartComponent = ({ tasks }) => {
    const chartRef = useRef();

    useEffect(() => {
        if (chartRef.current) {
            while (chartRef.current.firstChild) {
                chartRef.current.removeChild(chartRef.current.firstChild);
            }

            const priorityCounts = tasks.reduce((acc, task) => {
                acc[task.priority] = (acc[task.priority] || 0) + 1;
                return acc;
            }, {});

            const data = Object.entries(priorityCounts).map(([priority, count]) => ({ priority, count }));
            
            const chart = Plot.plot({
                marks: [
                    Plot.barY(data, {
                        x: "priority",
                        y: "count",
                        fill: "priority",
                        stroke: "white",
                        title: d => `${d.priority}: ${d.count}`,
                        r: "count"
                    })
                ],
                height: 500,
                width: 600,
            });
            chartRef.current.append(chart);
        }
    }, [tasks]);

    return (
        <Card className="card-report card-nospan">
            <Card.Body >
                <Card.Title>Task Priority Distribution</Card.Title>
                <div ref={chartRef} className="d-flex justify-content-center align-items-center" />
            </Card.Body>
        </Card>
    );
};

export default PieChartComponent;