import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Filler, Title, Tooltip, Legend, } from "chart.js";
import { Chart } from "react-chartjs-2";
import "./style.scss";
ChartJS.register(CategoryScale, Filler, LinearScale, BarElement, PointElement, LineElement, Title, Tooltip, Legend);
export const options = {
    responsive: true,
    aspectRatio: 3,
    maintainAspectRatio: true,
    scales: {
        y: {
            grace: "40%",
            beginAtZero: true,
            border: {
                color: "transparent",
                position: "center",
            },
            grid: {
                display: false,
            },
            ticks: {
                display: false,
            },
        },
        x: {
            grid: {
                color: "#373737",
                borderColor: "grey",
                tickColor: "transparent",
            },
            ticks: {
                color: "#868686",
            },
        },
    },
    plugins: {
        legend: {
            display: false,
        },
        tooltip: {
            enabled: true,
            backgroundColor: "transparent",
            titleColor: "white",
            position: "nearest",
            xAlign: "center",
            yAlign: "bottom",
        },
        title: {
            display: false,
        },
        filler: {
            propagate: true,
        },
    },
};
export const PersonStatisticsChart = ({ stats, }) => {
    const labels = Object.keys(stats.stats)
        .slice(1)
        .slice(0, -1)
        .map((str) => str.split("_")[0])
        .map((str) => str + "yrs");
    const values = Object.values(stats.stats).slice(1);
    // console.table(values);
    const data = {
        labels,
        datasets: [
            {
                type: "line",
                fill: true,
                label: "",
                data: values,
                pointBackgroundColor: "#FF8D4E",
                backgroundColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(400, 0, 500, 800);
                    gradient.addColorStop(0, "rgba(255, 141, 78, 0.2)");
                    gradient.addColorStop(1, "rgba(73, 73, 73, 0)");
                    return gradient;
                },
                // backgroundColor: 'red',
                borderColor: "#FF8D4E",
                borderWidth: 2,
                showLine: true,
                tension: 0.35,
                radius: 10,
            },
            {
                type: "bar",
                label: " ",
                data: [],
            },
        ],
    };
    return (_jsx("div", { className: "PersonStatisticsChart", children: _jsxs("div", { children: [_jsx(Chart, { id: "canvas", type: "line", options: options, data: data }), ";"] }) }));
};
export default PersonStatisticsChart;
