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

dbo.charts = {

    pieColors  : ['#ffcf30', '#06b2dc', '#048a44', '#a63305', '#a0c03b', '#ffcb22', '#89c540', '#f77c01', '#1094f6', '#6733ba'],
    barColor   : ['#f3a921', '#f2770c', '#72221a', '#04843b', '#d63f2e', '#fec220'],
    charts     : [],

    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: dbo.charts.barColor
                }]
            },
            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 ) {
        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'
                }
            }
        } );
    },

    drawPie: function ( element, data, chartLabels, title ) {
        var ctx = document.getElementById( element ).getContext( '2d' );
        dbo.charts.charts[element] = new Chart( ctx, {
            type   : 'doughnut',
            data   : {
                datasets: [{
                    data           : data,
                    backgroundColor: dbo.charts.pieColors,
                    borderColor    : dbo.charts.pieColors,
                    label          : chartLabels
                }],
                labels  : chartLabels
            },
            options: {
                title         : {
                    display  : true,
                    text     : title,
                    fontSize : 16,
                    fontColor: '#ffffff'
                },
                legend        : {
                    display: false
                },
                legendCallback: function ( chart ) {
                    var text = '';
                    _.each( chart.data.labels, function ( p, i ) {
                        text += '<div><div style="float:left;width:15px;height:15px;border-radius:50%;background-color:' + dbo.charts.pieColors[i] + '"></div><div style="margin-left:10px;float:left;color:#ffffff;">' + p + '</div></div><br />'
                    } );

                    return text;
                }
            }
        } );
        document.getElementById( element + '-legends' ).innerHTML = dbo.charts.charts[element].generateLegend();
    }

}