att
This commit is contained in:
Andrey Cunha
@@ -1,9 +1,9 @@
|
||||
<div id="dashGrafico_${instanceId}"
|
||||
class="super-widget wcm-widget-class fluig-style-guide"
|
||||
data-params="DashGrafico.instance()">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<div style="height:260px; max-width:360px; margin:0 auto;">
|
||||
<canvas id="grafico_${instanceId}"></canvas>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<div class="dgf-card">
|
||||
<div class="dgf-title">Atingimento por Regional</div>
|
||||
<canvas id="grafico_${instanceId}" height="120"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+25
-1
@@ -1 +1,25 @@
|
||||
/* Coloque aqui seu codigo CSS */
|
||||
div[id^="dashGrafico_"] .dgf-card {
|
||||
background: #ececed;
|
||||
border-radius: 24px;
|
||||
padding: 10px 14px;
|
||||
min-height: 230px;
|
||||
}
|
||||
|
||||
div[id^="dashGrafico_"] .dgf-title {
|
||||
color: #004a6a;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
div[id^="dashGrafico_"] canvas {
|
||||
min-height: 165px;
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
div[id^="dashGrafico_"] .dgf-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
+139
-81
@@ -1,91 +1,149 @@
|
||||
var DashGrafico = SuperWidget.extend({
|
||||
|
||||
chart:null,
|
||||
chart: null,
|
||||
|
||||
init:function(){
|
||||
init: function () {
|
||||
var self = this;
|
||||
this.render([]);
|
||||
|
||||
var self=this;
|
||||
this.renderAmostra();
|
||||
window.addEventListener("dashboardData", function (e) {
|
||||
self.render(e.detail || []);
|
||||
});
|
||||
},
|
||||
|
||||
window.addEventListener("dashboardData",function(e){
|
||||
render: function (dados) {
|
||||
var mapa = {};
|
||||
|
||||
self.render(e.detail);
|
||||
dados.forEach(function (item) {
|
||||
var regiao = String(item.regional || "Sem regiao").trim();
|
||||
if (!mapa[regiao]) {
|
||||
mapa[regiao] = { total: 0, conforme: 0, naoConforme: 0 };
|
||||
}
|
||||
mapa[regiao].total += 1;
|
||||
if (normalizaStatus(item) === "CONFORME") {
|
||||
mapa[regiao].conforme += 1;
|
||||
} else {
|
||||
mapa[regiao].naoConforme += 1;
|
||||
}
|
||||
});
|
||||
|
||||
var labels = Object.keys(mapa).sort(function (a, b) { return a.localeCompare(b); });
|
||||
if (!labels.length) {
|
||||
labels = ["Aguardando filtro"];
|
||||
this.plot(labels, [0], [0]);
|
||||
return;
|
||||
}
|
||||
|
||||
var atingimento = labels.map(function (l) {
|
||||
var r = mapa[l];
|
||||
return r.total ? Number(((r.conforme / r.total) * 100).toFixed(2)) : 0;
|
||||
});
|
||||
|
||||
var ncMedio = labels.map(function (l) {
|
||||
var r = mapa[l];
|
||||
return r.total ? Number(((r.naoConforme / r.total) * 100).toFixed(2)) : 0;
|
||||
});
|
||||
|
||||
this.plot(labels, atingimento, ncMedio);
|
||||
},
|
||||
|
||||
plot: function (labels, atingimento, ncMedio) {
|
||||
var canvas = document.getElementById("grafico_" + this.instanceId);
|
||||
if (!canvas) return;
|
||||
|
||||
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(canvas, {
|
||||
type: "bar",
|
||||
plugins: [valueLabelsPlugin],
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Atingimento (%)",
|
||||
data: atingimento,
|
||||
backgroundColor: "#0a5d82"
|
||||
},
|
||||
{
|
||||
label: "Nao conforme (%)",
|
||||
data: ncMedio,
|
||||
backgroundColor: "#88a5b8"
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
layout: {
|
||||
padding: {
|
||||
top: 14
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top"
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 20,
|
||||
minRotation: 0,
|
||||
callback: function (value, index) {
|
||||
var txt = labels[index] || "";
|
||||
return txt.length > 18 ? txt.substring(0, 18) + "..." : txt;
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
ticks: {
|
||||
callback: function (value) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
render:function(dados){
|
||||
|
||||
var conforme=dados.filter(function(i){
|
||||
return normalizaStatus(i)=="CONFORME";
|
||||
}).length;
|
||||
|
||||
var nao=dados.filter(function(i){
|
||||
return normalizaStatus(i)=="NAO_CONFORME";
|
||||
}).length;
|
||||
|
||||
var ctx=document.getElementById("grafico_"+this.instanceId);
|
||||
|
||||
if(this.chart){
|
||||
this.chart.destroy();
|
||||
function normalizaStatus(item) {
|
||||
return String(item.saidaAnalise || item.status || "").trim().toUpperCase();
|
||||
}
|
||||
|
||||
this.chart=new Chart(ctx,{
|
||||
|
||||
type:'doughnut',
|
||||
|
||||
data:{
|
||||
labels:["Conforme ("+conforme+")","Não Conforme ("+nao+")"],
|
||||
datasets:[{
|
||||
data:[conforme,nao],
|
||||
backgroundColor:["#2ecc71","#e74c3c"]
|
||||
}]
|
||||
},
|
||||
options:{
|
||||
responsive:true,
|
||||
maintainAspectRatio:false,
|
||||
cutout:"48%"
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function normalizaStatus(item){
|
||||
var raw = item.saidaAnalise || item.status || "";
|
||||
return String(raw).trim().toUpperCase();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
renderAmostra:function(){
|
||||
var ctx=document.getElementById("grafico_"+this.instanceId);
|
||||
if(!ctx){
|
||||
return;
|
||||
}
|
||||
|
||||
if(this.chart){
|
||||
this.chart.destroy();
|
||||
}
|
||||
|
||||
this.chart=new Chart(ctx,{
|
||||
type:'doughnut',
|
||||
data:{
|
||||
labels:["Conforme (0)","Não Conforme (0)"],
|
||||
datasets:[{
|
||||
data:[1,0],
|
||||
backgroundColor:["#cfd8dc","#eceff1"]
|
||||
}]
|
||||
},
|
||||
options:{
|
||||
responsive:true,
|
||||
maintainAspectRatio:false,
|
||||
cutout:"48%",
|
||||
plugins:{
|
||||
tooltip:{enabled:false}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user