/**
 * Created by Pensare Software.
 * User: Theo Weijmer
 * Date: 30/01/2018
 * Time: 16:03
 */

dbo.charts = {

    monthLabels : ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],

    drawHoursVsBudget: function ( hours, budget, element ) {
        var ctx = document.getElementById( element ).getContext( '2d' );

        var myChart = new Chart( ctx, {
            type   : 'bar',
            data   : {
                labels  : ["uren", "budget"],
                datasets: [{
                    data           : [hours, budget],
                    backgroundColor: [
                        '#f3a921', '#f2770c'
                    ]
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales             : {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend             : {
                    display: false,
                },
                title              : {
                    display  : true,
                    text     : 'Uren vs budget',
                    fontSize : 16,
                    fontColor: '#b2b2b2'
                }
            }
        } );
    },

    drawInvoicesVsPayed: function ( offer, invoice, payed, element ) {
        var ctx = document.getElementById( element ).getContext( '2d' );

        var myChart = new Chart( ctx, {
            type   : 'bar',
            data   : {
                labels  : ["offerte", "facturen", "betaald"],
                datasets: [{
                    data           : [offer, invoice, payed],
                    backgroundColor: [
                        '#f3a921', '#f2770c', '#72221a'
                    ]
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales             : {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend             : {
                    display: false,
                },
                title              : {
                    display  : true,
                    text     : 'offerte vs facuren vs betalingen',
                    fontSize : 16,
                    fontColor: '#b2b2b2'
                }
            }
        } );
    },

    drawHoursChart: function (element, chartData, labels, title, colors) {
        console.log( chartData );
        var ctx = document.getElementById( element ).getContext( '2d' );

        var myChart = new Chart( ctx, {
            type   : 'bar',
            data   : {
                labels  : labels,
                datasets: [{
                    data           : chartData,
                    backgroundColor: colors,
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales             : {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend             : {
                    display: false,
                    fontColor: '#ffffff',
                },
                title              : {
                    display  : true,
                    text     : title,
                    fontSize : 16,
                    fontColor: '#ffffff'
                }
            }

        } );
    }

}