frontend/src/organisms/StackedBarChartComponent.js

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

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

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

            const data = tasks.reduce((acc, task) => {
                // Tìm object có cùng assignee và status trong accumulator
                const existing = acc.find(
                    item => item.assignee === task.assignee && item.status === task.status
                );
            
                if (existing) {
                    // Nếu đã tồn tại, cộng thêm vào count
                    existing.count += 1;
                } else {
                    // Nếu chưa tồn tại, thêm một object mới vào accumulator
                    acc.push({ assignee: task.assignee, status: task.status, count: 1 });
                }
            
                return acc;
            }, []).sort((a, b) => a.status.length - b.status.length);

            const chart = Plot.plot({
                marks: [
                    Plot.barY(data, {
                        x: "assignee",
                        y: "count",
                        fill: "status",
                        sort: { x: "y", reverse: true },
                        stack: true,
                    })
                ],
                height: 400,
                width: 600,
                color: { legend: true },
            });
            chartRef.current.append(chart);
        }
    }, [tasks]);

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

export default StackedBarChartComponent;