import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Chart as ChartJS, CategoryScale, PointElement, LinearScale, BarElement, Title, Tooltip, Legend, } from "chart.js";
import { Bar } 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).replace("$", "");
                },
                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) {
                    // console.log(tooltipItems[0]);
                    tooltipItems[0].formattedValue = formatterForUSD
                        .format(tooltipItems[0].raw)
                        .replace("$", "");
                    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,
        },
    },
};
export const CompanyBarChartFinancialTab = ({ revenues, QoQlatest, aspectRatio = 5, }) => {
    const labels = revenues.map((revenue) => revenue.quater);
    const values = revenues.map((revenue) => revenue.amount);
    const data = {
        labels,
        datasets: [
            {
                label: "",
                data: values,
                borderWidth: 2,
                backgroundColor: "#4B4B4B",
                barThickness: 27,
                maxBarThickness: 27,
                hoverBorderColor: "#CC713E",
            },
        ],
    };
    return (_jsxs("div", { className: "CompanyBarChartFinancialTab", children: [_jsx("div", { className: "qoQGrowth", children: _jsxs("span", { className: "percentage", children: [QoQlatest ? `${QoQlatest}%` : "--", " ", _jsx("br", {}), " ", _jsx("span", { className: "qoQGrowthlatest", children: "YoY Growth latest" })] }) }), _jsx(Bar, { options: { ...options, aspectRatio }, data: data })] }));
};
export default CompanyBarChartFinancialTab;
