import dayjs, { Dayjs } from "dayjs";

export function VOLUME_CHART_CONFIG(from: Date, to: Date) {
    const lineColor = '#636363ff';
    return {
        type: 'line',
        options: {
            animation: false,
            plugins: {
                title: {
                text: 'Chart.js Time Scale',
                display: true
                }
            },
            aspectRatio: 2.75,
            scales: {
                x: {
                type: 'time',
                time: {
                    // Luxon format string
                    tooltipFormat: 'DD.MM'
                },
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: 6,
                    align: 'center',
                    color: lineColor,
                    callback: function (value: number) {
                        return dayjs(new Date(value)).format("HH:mm");
                    }
                },
                min: from,
                max: to,
                grid: {
                        color: lineColor,
                        borderColor: lineColor,
                        lineWidth: 1
                    }
                },
                y: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        stepSize: 20,
                        color: lineColor,
                    },
                    grid: {
                        color: lineColor,
                        borderColor: lineColor,
                        lineWidth: 1
                    }
                }
            }
        }
    }
}