var DashConforme = SuperWidget.extend({

    chart:null,

    init:function(){

        var self=this;
        this.renderAmostra();

        window.addEventListener("dashboardData",function(e){

            self.render(e.detail || []);

        });

    },

    render:function(dados){

        var mapa = {};

        dados.forEach(function(item){
            var lista = String(item.listaNaoConforme || "").trim();
            if(!lista){
                return;
            }

            lista.split("|").forEach(function(indicador){
                var chave = String(indicador || "").trim();
                if(!chave){
                    return;
                }
                if(!mapa[chave]){
                    mapa[chave] = 0;
                }
                mapa[chave] += 1;
            });
        });

        var pares = Object.keys(mapa).map(function(k){
            return {nome:k,valor:mapa[k]};
        });

        pares.sort(function(a,b){
            return b.valor - a.valor;
        });

        pares = pares.slice(0,10);

        var labels = pares.map(function(p){ return p.nome; });
        var valores = pares.map(function(p){ return p.valor; });

        if(!labels.length){
            labels = ["Aguardando filtro"];
            valores = [0];
        }

        var ctx = document.getElementById("graficoConforme_"+this.instanceId);
        if(!ctx){
            return;
        }

        if(this.chart){
            this.chart.destroy();
        }

        this.chart = new Chart(ctx,{
            type:"bar",
            data:{
                labels:labels,
                datasets:[{
                    label:"Ocorrências",
                    data:valores,
                    backgroundColor:"#f39c12"
                }]
            },
            options:{
                responsive:true,
                maintainAspectRatio:false,
                indexAxis:"x",
                plugins:{
                    legend:{display:false},
                    tooltip:{
                        callbacks:{
                            title:function(items){
                                if(labels.length === 1 && labels[0] === "Aguardando filtro"){
                                    return "Aguardando filtro";
                                }
                                return items && items.length ? labels[items[0].dataIndex] : "";
                            }
                        }
                    }
                },
                scales:{
                    x:{
                        ticks:{
                            autoSkip:false,
                            maxRotation:35,
                            minRotation:0,
                            callback:function(value,index){
                                var txt = labels[index] || "";
                                return txt.length > 38 ? txt.substring(0,38) + "..." : txt;
                            }
                        }
                    },
                    y:{
                        beginAtZero:true,
                        precision:0
                    }
                }
            }
        });

    },

    renderAmostra:function(){
        var ctx = document.getElementById("graficoConforme_"+this.instanceId);
        if(!ctx){
            return;
        }

        if(this.chart){
            this.chart.destroy();
        }

        this.chart = new Chart(ctx,{
            type:"bar",
            data:{
                labels:["Aguardando filtro"],
                datasets:[{
                    label:"Ocorrências",
                    data:[0],
                    backgroundColor:"#cfd8dc"
                }]
            },
            options:{
                responsive:true,
                maintainAspectRatio:false,
                plugins:{legend:{display:false}},
                scales:{
                    x:{ticks:{autoSkip:false,maxRotation:0,minRotation:0}},
                    y:{beginAtZero:true,precision:0}
                }
            }
        });

    }

});
