att
This commit is contained in:
Andrey Cunha
@@ -1,11 +1,7 @@
|
||||
<div id="dashConforme_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="DashConforme.instance()">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Top Inconformidades</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="graficoConforme_${instanceId}" height="120"></canvas>
|
||||
</div>
|
||||
<div class="dconf-card">
|
||||
<div class="dconf-title">Atingimento por Loja</div>
|
||||
<canvas id="graficoConforme_${instanceId}" height="120"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+24
-2
@@ -1,3 +1,25 @@
|
||||
div[id^="dashConforme_"] canvas {
|
||||
max-height: 420px;
|
||||
div[id^="dashConforme_"] .dconf-card {
|
||||
background: #ececed;
|
||||
border-radius: 24px;
|
||||
padding: 10px 14px;
|
||||
min-height: 230px;
|
||||
}
|
||||
|
||||
div[id^="dashConforme_"] .dconf-title {
|
||||
color: #004a6a;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
div[id^="dashConforme_"] canvas {
|
||||
min-height: 165px;
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
div[id^="dashConforme_"] .dconf-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
+93
-113
@@ -1,149 +1,129 @@
|
||||
var DashConforme = SuperWidget.extend({
|
||||
|
||||
chart:null,
|
||||
chart: null,
|
||||
|
||||
init:function(){
|
||||
|
||||
var self=this;
|
||||
this.renderAmostra();
|
||||
|
||||
window.addEventListener("dashboardData",function(e){
|
||||
init: function () {
|
||||
var self = this;
|
||||
this.render([]);
|
||||
|
||||
window.addEventListener("dashboardData", function (e) {
|
||||
self.render(e.detail || []);
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
render:function(dados){
|
||||
|
||||
render: function (dados) {
|
||||
var mapa = {};
|
||||
|
||||
dados.forEach(function(item){
|
||||
var lista = String(item.listaNaoConforme || "").trim();
|
||||
if(!lista){
|
||||
return;
|
||||
dados.forEach(function (item) {
|
||||
var loja = String(item.loja || "Sem loja").trim();
|
||||
if (!mapa[loja]) {
|
||||
mapa[loja] = { total: 0, conforme: 0 };
|
||||
}
|
||||
mapa[loja].total += 1;
|
||||
if (normalizaStatus(item) === "CONFORME") {
|
||||
mapa[loja].conforme += 1;
|
||||
}
|
||||
|
||||
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]};
|
||||
var pares = Object.keys(mapa).map(function (nome) {
|
||||
var total = mapa[nome].total;
|
||||
var pct = total ? (mapa[nome].conforme / total) * 100 : 0;
|
||||
return { nome: nome, pct: Number(pct.toFixed(2)) };
|
||||
});
|
||||
|
||||
pares.sort(function(a,b){
|
||||
return b.valor - a.valor;
|
||||
pares.sort(function (a, b) {
|
||||
return b.pct - a.pct;
|
||||
});
|
||||
|
||||
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];
|
||||
if (!pares.length) {
|
||||
pares = [{ nome: "Aguardando filtro", pct: 0 }];
|
||||
}
|
||||
|
||||
var ctx = document.getElementById("graficoConforme_"+this.instanceId);
|
||||
if(!ctx){
|
||||
return;
|
||||
}
|
||||
var labels = pares.map(function (p) { return p.nome; });
|
||||
var valores = pares.map(function (p) { return p.pct; });
|
||||
|
||||
if(this.chart){
|
||||
this.chart.destroy();
|
||||
}
|
||||
var ctx = document.getElementById("graficoConforme_" + this.instanceId);
|
||||
if (!ctx) return;
|
||||
|
||||
this.chart = new Chart(ctx,{
|
||||
type:"bar",
|
||||
data:{
|
||||
labels:labels,
|
||||
datasets:[{
|
||||
label:"Ocorrências",
|
||||
data:valores,
|
||||
backgroundColor:"#f39c12"
|
||||
if (this.chart) this.chart.destroy();
|
||||
|
||||
var valueLabelsPlugin = {
|
||||
id: "valueLabelsPlugin",
|
||||
afterDatasetsDraw: function (chart) {
|
||||
var c = chart.ctx;
|
||||
c.save();
|
||||
c.font = "700 10px Arial";
|
||||
c.textAlign = "center";
|
||||
|
||||
chart.data.datasets.forEach(function (dataset, datasetIndex) {
|
||||
var meta = chart.getDatasetMeta(datasetIndex);
|
||||
meta.data.forEach(function (bar, index) {
|
||||
var value = dataset.data[index];
|
||||
if (value == null || Number(value) === 0) return;
|
||||
|
||||
var y = bar.y - 4;
|
||||
var baseline = "bottom";
|
||||
if (y < chart.chartArea.top + 12) {
|
||||
y = bar.y + 10;
|
||||
baseline = "top";
|
||||
}
|
||||
|
||||
c.textBaseline = baseline;
|
||||
c.fillStyle = baseline === "top" ? "#ffffff" : "#111111";
|
||||
c.fillText(String(value).replace(".", ",") + "%", bar.x, y);
|
||||
});
|
||||
});
|
||||
|
||||
c.restore();
|
||||
}
|
||||
};
|
||||
|
||||
this.chart = new Chart(ctx, {
|
||||
type: "bar",
|
||||
plugins: [valueLabelsPlugin],
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: valores,
|
||||
backgroundColor: "#0a5d82"
|
||||
}]
|
||||
},
|
||||
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] : "";
|
||||
}
|
||||
}
|
||||
options: {
|
||||
responsive: true,
|
||||
layout: {
|
||||
padding: {
|
||||
top: 14
|
||||
}
|
||||
},
|
||||
scales:{
|
||||
x:{
|
||||
ticks:{
|
||||
autoSkip:false,
|
||||
maxRotation:35,
|
||||
minRotation:0,
|
||||
callback:function(value,index){
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 28,
|
||||
minRotation: 10,
|
||||
callback: function (value, index) {
|
||||
var txt = labels[index] || "";
|
||||
return txt.length > 38 ? txt.substring(0,38) + "..." : txt;
|
||||
return txt.length > 22 ? txt.substring(0, 22) + "..." : txt;
|
||||
}
|
||||
}
|
||||
},
|
||||
y:{
|
||||
beginAtZero:true,
|
||||
precision:0
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
ticks: {
|
||||
callback: function (value) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
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}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function normalizaStatus(item) {
|
||||
return String(item.saidaAnalise || item.status || "").trim().toUpperCase();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user