import { jsx as _jsx } 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 LineChart = ({ Data, fill = true, pointBackgroundColor = "#ffffff", gradient1Color = "rgba(255, 141, 78, 0.2)", gradient2Color = "rgba(35, 35, 35, 0)", borderColor = "#FF8D4E", borderWidth = 1, yGridColor = "#232323", }) => {
    const labels = Data.map((Xaxis) => Xaxis.Xaxis);
    const values = Data.map((Yaxis) => Yaxis.Yaxis);
    const titleDataset = ["Title1", "Title2", "Title3000", "", "Title24s"];
    const options = {
        responsive: true,
        aspectRatio: 5,
        maintainAspectRatio: true,
        scales: {
            y: {
                grace: "40%",
                beginAtZero: true,
                border: {
                    color: "transparent",
                    position: "center",
                },
                grid: {
                    color: yGridColor,
                    borderColor: "grey",
                    tickColor: "transparent",
                    padding: 4,
                },
                ticks: {
                    align: "start",
                    color: "#ADADAD",
                    count: 4,
                    offset: true,
                },
            },
            x: {
                grid: {
                    display: false,
                },
                ticks: {
                    color: "#868686",
                },
            },
        },
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                // filter: function (tooltipItem: any) {
                //   return tooltipItem.datasetIndex === 0;
                // },
                enabled: true,
                backgroundColor: "transparent",
                titleColor: "white",
                position: "nearest",
                xAlign: "center",
                yAlign: "bottom",
                callbacks: {
                    title: function (tooltipItems) {
                        const datasetIndex = tooltipItems[0].dataIndex;
                        // console.log(datasetIndex);
                        if (titleDataset[datasetIndex] === "") {
                            return;
                        }
                        else {
                            return titleDataset[datasetIndex];
                        }
                    },
                },
            },
            title: {
                display: false,
            },
            filler: {
                propagate: true,
            },
        },
    };
    const data = {
        labels,
        datasets: [
            {
                type: "line",
                fill: fill,
                label: "",
                data: values,
                pointBackgroundColor: pointBackgroundColor,
                backgroundColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, 200);
                    gradient.addColorStop(0, gradient1Color);
                    gradient.addColorStop(1, gradient2Color);
                    return gradient;
                },
                borderColor: borderColor,
                borderCapStyle: "round",
                borderWidth: borderWidth,
            },
        ],
    };
    return (_jsx("div", { className: "LineChart", children: _jsx("div", { children: _jsx(Chart, { type: "bar", id: "canvas", options: options, data: data }) }) }));
};
export default LineChart;
