import Chart from 'chart.js/auto';

// Theming
if (localStorage.theme !== 'light') {
    Chart.defaults.color = "#ADBABD";
    Chart.defaults.borderColor = "rgba(255,255,255,0.1)";
    Chart.defaults.backgroundColor = "rgba(255,255,0,0.1)";
    Chart.defaults.elements.line.borderColor = "rgba(255,255,0,0.4)";
}

// Get Tags from API
window.axios.get('/v1/monthly-views').then(function (response) {
    if (response.status != 200) {
        return;
    }

    const data = {
        labels: response.data.map((entry) => { return entry.date }),
        datasets: [{
            label: 'Views',
            fill: false,
            backgroundColor: 'rgba(190, 18, 60, 0.3)',
            borderColor: 'rgba(190, 18, 60, 1.0)',
            cubicInterpolationMode: 'monotone',
            data: response.data.map((entry) => { return entry.count }),
        }]
    }

    const config = {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Views the last 30 days',
                    font: {
                        size: 18
                    }
                },
            },
            interaction: {
                intersect: false,
            },
            scales: {
                x: {
                    display: true,
                    title: {
                        display: true
                    }
                },
                y: {
                    display: true,
                    title: {
                        display: true,
                        text: 'Views'
                    },
                    suggestedMin: 0,
                    suggestedMax: 40000
                }
            }
        },
        };

    const monthlyViewChart = new Chart(
        document.getElementById('monthlyChart'),
        config
    );
}).catch(function (error) {
    console.log(error);
});