import { jsx as _jsx } from "react/jsx-runtime";
import { Chart as ChartJS, CategoryScale, PointElement, LinearScale, BarElement, Title, Tooltip, Legend, } from "chart.js";
import { Chart } from "react-chartjs-2";
import "./style.scss";
import { formatterForUSD } from "../../utils";
ChartJS.register(CategoryScale, LinearScale, PointElement, BarElement, Title, Tooltip, Legend);
export const options = {
    responsive: true,
    aspectRatio: 5,
    maintainAspectRatio: true,
    scales: {
        y: {
            grace: "40%",
            border: {
                color: "transparent",
            },
            grid: {
                color: "#232323",
                borderColor: "grey",
                tickColor: "transparent",
            },
            ticks: {
                callback: function (value) {
                    formatterForUSD.format(value);
                    return formatterForUSD.format(value);
                },
                font: {
                    family: "Rubik",
                    size: 14,
                    weight: 400,
                    lineHeight: "21px",
                },
                align: "start",
                color: "#ADADAD",
                count: 4,
                offset: true,
            },
        },
        x: {
            grid: {
                display: false,
                color: "transparent",
                borderColor: "grey",
                tickColor: "transparent",
            },
            ticks: {
                color: "#868686",
                font: {
                    family: "Rubik",
                    size: 14,
                    weight: 400,
                    lineHeight: "21px",
                },
            },
        },
    },
    plugins: {
        legend: {
            display: false,
        },
        tooltip: {
            callbacks: {
                title: function (tooltipItems) {
                    tooltipItems[0].formattedValue = `${tooltipItems[0].label} - ${formatterForUSD.format(tooltipItems[0].raw)}`;
                    return "";
                },
            },
            bodyColor: "#FF8D4E",
            bodyFont: {
                family: "Inter",
                size: 12,
                weight: 300,
                lineHeight: "18px",
            },
            displayColors: false,
            enabled: true,
            backgroundColor: "transparent",
            titleColor: "white",
            position: "nearest",
            xAlign: "center",
            yAlign: "bottom",
        },
        title: {
            display: false,
        },
    },
};
const PrivateFinancialsLineGraph = ({ revenues, aspectRatio = 5, }) => {
    const labels = revenues.map((revenue) => revenue.quater);
    const values = revenues.map((revenue) => revenue.amount);
    const data = {
        labels,
        datasets: [
            {
                type: "line",
                fill: true,
                label: "",
                data: values,
                pointBackgroundColor: "#331C10",
                backgroundColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, 200);
                    gradient.addColorStop(0, "rgba(255, 141, 78, 0.2)");
                    gradient.addColorStop(1, "rgba(35, 35, 35, 0)");
                    return gradient;
                },
                borderColor: "#FF8D4E",
                borderCapStyle: "round",
                borderWidth: 1,
            },
        ],
    };
    return (_jsx("div", { className: "privateFinancialsLineGraph", children: _jsx("div", { className: "barChart", children: _jsx(Chart, { type: "bar", id: "canvas", options: { ...options, aspectRatio }, data: data }) }) }));
};
export default PrivateFinancialsLineGraph;
