import dayjs, { Dayjs } from "dayjs";
import utc from 'dayjs/plugin/utc';

export function VOLUME_CHART_CONFIG(from: Date, to: Date) {
    dayjs.extend(utc);
    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: '#cacacaff',
                    callback: function (value: Date) {
                        const offset = new Date().getTimezoneOffset();
                        const date: Dayjs = dayjs(value).utcOffset(-offset);
                        return date.format("HH:mm");
                    }
                },
                min: from,
                max: to,
                grid: {
                        color: '#cacacaff',
                        borderColor: '#cacacaff',
                        lineWidth: 1
                    }
                },
                y: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        stepSize: 20,
                        color: '#cacacaff',
                    },
                    grid: {
                        color: '#cacacaff',
                        borderColor: '#cacacaff',
                        lineWidth: 1
                    }
                }
            }
        }
    }
}