This commit is contained in:
2026-03-11 17:54:14 -03:00
parent 9a0ef21ec8
commit 49491411f3
83 changed files with 5082 additions and 2776 deletions
@@ -31,8 +31,7 @@ var DashData = SuperWidget.extend({
if (!matchMulti(item.regional, filtros.regional)) {
return false;
}
var sup = item.responsavelLoja;
if (!matchMulti(sup, filtros.supervisao)) {
if (filtros.loja && normalizaTexto(item.loja).indexOf(normalizaTexto(filtros.loja)) === -1) {
return false;
}
@@ -118,6 +118,9 @@ var DashGrafico = SuperWidget.extend({
},
scales: {
x: {
grid: {
display: false
},
ticks: {
autoSkip: false,
maxRotation: 20,
@@ -135,6 +138,9 @@ var DashGrafico = SuperWidget.extend({
callback: function (value) {
return value + "%";
}
},
grid: {
display: false
}
}
}
@@ -0,0 +1,19 @@
application.type=widget
application.code=dashinconforme
application.title=dashinconforme
application.description=dashinconforme
application.fluig.version=null
application.category=SYSTEM
application.renderer=freemarker
developer.code=andrey.cunha
developer.name=andrey.cunha
developer.url=http://www.fluig.com
application.uiwidget=true
application.mobileapp=false
application.version=${build.version}-${build.revision}
view.file=view.ftl
edit.file=edit.ftl
locale.file.base.name=dashinconforme
application.resource.js.1=/resources/js/dashinconforme.js
application.resource.css.2=/resources/css/dashinconforme.css
hash=4a16315e9e66fa7d797b3f6b1fb365b69f9a4ce2
@@ -0,0 +1,4 @@
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
</div>
@@ -0,0 +1,9 @@
<div id="dashInconforme_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="DashInconforme.instance()">
<div class="dinco-card">
<div class="dinco-title">Top Inconformidades</div>
<div class="dinco-subtitle">Ranking por ocorrências</div>
<div class="dinco-canvas-wrap">
<canvas id="graficoInconforme_${instanceId}"></canvas>
</div>
</div>
</div>
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<jboss-web>
<context-root>/dashinconforme</context-root>
<disable-cross-context>false</disable-cross-context>
</jboss-web>
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>
@@ -0,0 +1,34 @@
div[id^="dashInconforme_"] .dinco-card {
background: #ececed;
border-radius: 24px;
padding: 14px 16px;
}
div[id^="dashInconforme_"] .dinco-title {
color: #004a6a;
font-size: 18px;
font-weight: 800;
margin-bottom: 2px;
}
div[id^="dashInconforme_"] .dinco-subtitle {
color: #5c6870;
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
}
div[id^="dashInconforme_"] .dinco-canvas-wrap {
position: relative;
min-height: 250px;
}
@media (max-width: 1300px) {
div[id^="dashInconforme_"] .dinco-title {
font-size: 18px;
}
div[id^="dashInconforme_"] .dinco-canvas-wrap {
min-height: 220px;
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

@@ -0,0 +1,147 @@
var DashInconforme = SuperWidget.extend({
chart: null,
init: function () {
var self = this;
this.render([]);
window.addEventListener("dashboardData", function (e) {
self.render(e.detail || []);
});
},
render: function (dados) {
var ranking = this.montarRanking(dados).slice(0, 5);
if (!ranking.length) {
ranking = [{ nome: "Aguardando filtro", total: 0 }];
}
var labels = ranking.map(function (item) { return item.nome; });
var valores = ranking.map(function (item) { return item.total; });
this.plot(labels, valores);
},
montarRanking: function (dados) {
var mapa = {};
dados.forEach(function (item) {
var lista = String(item.listaNaoConforme || "").trim();
if (!lista) return;
lista.split("|").forEach(function (parte) {
var nome = String(parte || "").replace(/\s+/g, " ").trim();
if (!nome) return;
mapa[nome] = (mapa[nome] || 0) + 1;
});
});
return Object.keys(mapa).map(function (nome) {
return {
nome: nome,
total: mapa[nome]
};
}).sort(function (a, b) {
if (b.total !== a.total) return b.total - a.total;
return a.nome.localeCompare(b.nome);
});
},
plot: function (labels, valores) {
var canvas = document.getElementById("graficoInconforme_" + 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 11px Arial";
c.textAlign = "center";
c.fillStyle = "#111111";
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) return;
c.textBaseline = "bottom";
c.fillText(String(value), bar.x, bar.y - 4);
});
});
c.restore();
}
};
this.chart = new Chart(canvas, {
type: "bar",
plugins: [valueLabelsPlugin],
data: {
labels: labels,
datasets: [{
label: "Ocorrencias",
data: valores,
backgroundColor: "#0b6a88",
borderColor: "#084d64",
borderWidth: 1,
borderRadius: 6,
maxBarThickness: 42
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
title: function (items) {
return items && items.length ? items[0].label : "";
},
label: function (context) {
return "Ocorrencias: " + context.raw;
}
}
}
},
layout: {
padding: {
top: 20,
right: 10
}
},
scales: {
x: {
ticks: {
autoSkip: false,
maxRotation: 25,
minRotation: 25,
callback: function (value, index) {
var txt = labels[index] || "";
return txt.length > 18 ? txt.substring(0, 18) + "..." : txt;
}
},
grid: {
display: false
}
},
y: {
beginAtZero: true,
ticks: {
precision: 0
},
grid: {
display: false
}
}
}
}
});
}
});
@@ -1,49 +1,49 @@
div[id^="dashKPI_"] .dkpi-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 4px;
grid-template-columns: 0.95fr 1.25fr;
gap: 3px;
}
div[id^="dashKPI_"] .dkpi-card {
background: #ececed;
border-radius: 18px;
padding: 8px 12px;
min-height: 120px;
padding: 6px 10px;
min-height: 96px;
}
div[id^="dashKPI_"] .dkpi-title {
color: #004a6a;
font-size: 14px;
font-size: 13px;
font-weight: 800;
margin-bottom: 4px;
margin-bottom: 2px;
line-height: 1.08;
}
div[id^="dashKPI_"] .dkpi-big {
font-size: 20px;
font-size: 18px;
font-weight: 800;
text-align: center;
margin-top: 2px;
margin-bottom: 2px;
margin-top: 0;
margin-bottom: 0;
}
div[id^="dashKPI_"] .dkpi-label {
text-align: center;
color: #44525a;
font-size: 11px;
font-size: 10px;
font-weight: 700;
}
div[id^="dashKPI_"] .dkpi-total-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
gap: 8px;
margin-top: 4px;
}
div[id^="dashKPI_"] .dkpi-bar-bg {
flex: 1;
height: 30px;
height: 22px;
border-radius: 4px;
background: #e0e5ea;
overflow: hidden;
@@ -59,7 +59,7 @@ div[id^="dashKPI_"] .dkpi-bar-fill {
div[id^="dashKPI_"] .dkpi-total {
min-width: 44px;
font-size: 16px;
font-size: 14px;
font-weight: 800;
color: #111111;
text-align: right;
@@ -0,0 +1,19 @@
application.type=widget
application.code=dashpilar
application.title=dashpilar
application.description=dashpilar
application.fluig.version=null
application.category=SYSTEM
application.renderer=freemarker
developer.code=andrey.cunha
developer.name=andrey.cunha
developer.url=http://www.fluig.com
application.uiwidget=true
application.mobileapp=false
application.version=${build.version}-${build.revision}
view.file=view.ftl
edit.file=edit.ftl
locale.file.base.name=dashpilar
application.resource.js.1=/resources/js/dashpilar.js
application.resource.css.2=/resources/css/dashpilar.css
hash=4a16315e9e66fa7d797b3f6b1fb365b69f9a4ce2
@@ -0,0 +1,4 @@
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
</div>
@@ -0,0 +1,9 @@
<div id="dashPilar_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="DashPilar.instance()">
<div class="dpilar-card">
<div class="dpilar-title">Pontuação Média por Pilar</div>
<div class="dpilar-subtitle">Média do score consolidado</div>
<div class="dpilar-canvas-wrap">
<canvas id="graficoPilar_${instanceId}"></canvas>
</div>
</div>
</div>
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<jboss-web>
<context-root>/dashpilar</context-root>
<disable-cross-context>false</disable-cross-context>
</jboss-web>
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>
@@ -0,0 +1,34 @@
div[id^="dashPilar_"] .dpilar-card {
background: #ececed;
border-radius: 24px;
padding: 14px 16px;
}
div[id^="dashPilar_"] .dpilar-title {
color: #004a6a;
font-size: 18px;
font-weight: 800;
margin-bottom: 2px;
}
div[id^="dashPilar_"] .dpilar-subtitle {
color: #5c6870;
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
}
div[id^="dashPilar_"] .dpilar-canvas-wrap {
position: relative;
min-height: 210px;
}
@media (max-width: 1300px) {
div[id^="dashPilar_"] .dpilar-title {
font-size: 18px;
}
div[id^="dashPilar_"] .dpilar-canvas-wrap {
min-height: 190px;
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

@@ -0,0 +1,161 @@
var DashPilar = SuperWidget.extend({
chart: null,
init: function () {
var self = this;
this.render([]);
window.addEventListener("dashboardData", function (e) {
self.render(e.detail || []);
});
},
render: function (dados) {
var agregados = this.agruparPorPilar(dados);
if (!agregados.length) {
agregados = [{ nome: "Sem dados", score: 0 }];
}
this.plot(
agregados.map(function (item) { return item.nome; }),
agregados.map(function (item) { return item.score; })
);
},
agruparPorPilar: function (dados) {
var mapa = {};
dados.forEach(function (item) {
var raw = String(item.scorePilares || "").trim();
if (!raw) return;
var parsed = null;
try {
parsed = JSON.parse(raw);
} catch (e) {
parsed = null;
}
if (!parsed) return;
Object.keys(parsed).forEach(function (nomePilar) {
var itemPilar = parsed[nomePilar] || {};
var score = parseFloat(itemPilar.score);
if (isNaN(score)) return;
if (!mapa[nomePilar]) {
mapa[nomePilar] = { total: 0, qtd: 0 };
}
mapa[nomePilar].total += score;
mapa[nomePilar].qtd += 1;
});
});
return Object.keys(mapa).map(function (nomePilar) {
var r = mapa[nomePilar];
return {
nome: nomePilar.replace(/^PILAR\s+/i, ""),
score: r.qtd ? Number((r.total / r.qtd).toFixed(2)) : 0
};
}).sort(function (a, b) {
if (b.score !== a.score) return b.score - a.score;
return a.nome.localeCompare(b.nome);
});
},
plot: function (labels, valores) {
var canvas = document.getElementById("graficoPilar_" + this.instanceId);
if (!canvas) return;
if (this.chart) {
this.chart.destroy();
}
var valueLabelsPlugin = {
id: "valueLabelsPluginPilar",
afterDatasetsDraw: function (chart) {
var c = chart.ctx;
c.save();
c.font = "700 11px Arial";
c.textAlign = "center";
c.textBaseline = "bottom";
c.fillStyle = "#0b4f6c";
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) return;
c.fillText(String(value).replace(".", ",") + "%", bar.x, bar.y - 4);
});
});
c.restore();
}
};
this.chart = new Chart(canvas, {
type: "bar",
plugins: [valueLabelsPlugin],
data: {
labels: labels,
datasets: [{
label: "Score médio",
data: valores,
backgroundColor: "#0b6a88",
borderColor: "#084d64",
borderWidth: 1,
borderRadius: 6,
maxBarThickness: 42
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: function (context) {
return "Score médio: " + String(context.raw).replace(".", ",") + "%";
}
}
}
},
layout: {
padding: {
top: 20,
right: 10
}
},
scales: {
x: {
grid: { display: false },
ticks: {
autoSkip: false,
maxRotation: 18,
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 + "%";
}
},
grid: {
display: false
}
}
}
}
});
}
});
@@ -93,6 +93,9 @@ var DashRegional = SuperWidget.extend({
plugins: { legend: { display: false } },
scales: {
x: {
grid: {
display: false
},
ticks: {
autoSkip: false,
maxRotation: 22,
@@ -103,7 +106,13 @@ var DashRegional = SuperWidget.extend({
}
}
},
y: { beginAtZero: true, precision: 0 }
y: {
beginAtZero: true,
precision: 0,
grid: {
display: false
}
}
}
}
});
@@ -8,6 +8,7 @@ data-params="DashTabela.instance()">
<table class="table table-hover">
<thead>
<tr>
<th>Solicitação</th>
<th>Data Inicio</th>
<th>Prazo</th>
<th>Ciclo</th>
@@ -20,7 +21,7 @@ data-params="DashTabela.instance()">
<tbody id="lista_${instanceId}">
<tr>
<td colspan="7" class="text-center">Aguardando filtro...</td>
<td colspan="8" class="text-center">Aguardando filtro...</td>
</tr>
</tbody>
</table>
@@ -1,24 +1,36 @@
div[id^="dashTabela_"] .dtb-card {
background: #ececed;
border-radius: 34px;
padding: 16px 20px;
padding: 12px 16px;
}
div[id^="dashTabela_"] .dtb-title {
color: #004a6a;
font-size: 34px;
font-size: 26px;
font-weight: 800;
text-align: center;
margin-bottom: 10px;
margin-bottom: 6px;
}
div[id^="dashTabela_"] table th,
div[id^="dashTabela_"] table td {
vertical-align: top;
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px;
}
div[id^="dashTabela_"] table th {
color: #0a4f70;
font-size: 13px;
}
div[id^="dashTabela_"] .dtb-row-link {
cursor: pointer;
}
div[id^="dashTabela_"] .dtb-row-link:hover td {
background: rgba(10, 93, 130, 0.06);
}
div[id^="dashTabela_"] table th:nth-child(1),
@@ -32,36 +44,38 @@ div[id^="dashTabela_"] table td:nth-child(3) {
div[id^="dashTabela_"] table th:nth-child(6),
div[id^="dashTabela_"] table td:nth-child(6) {
min-width: 220px;
min-width: 190px;
}
div[id^="dashTabela_"] .dash-table-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 8px;
gap: 8px;
padding-top: 6px;
border-top: 1px solid #d4d9dd;
}
div[id^="dashTabela_"] .dash-page-size {
display: flex;
align-items: center;
gap: 8px;
gap: 6px;
}
div[id^="dashTabela_"] .dash-page-size label {
margin: 0;
font-size: 12px;
font-size: 11px;
font-weight: 600;
}
div[id^="dashTabela_"] .dash-page-size select {
width: 72px;
width: 64px;
height: 30px;
font-size: 12px;
}
div[id^="dashTabela_"] .dash-page-info {
font-size: 12px;
font-size: 11px;
color: #44525a;
}
@@ -70,9 +84,15 @@ div[id^="dashTabela_"] .dash-page-actions {
gap: 6px;
}
div[id^="dashTabela_"] .dash-page-actions .btn {
min-height: 30px;
padding: 4px 10px;
font-size: 12px;
}
@media (max-width: 1300px) {
div[id^="dashTabela_"] .dtb-title {
font-size: 24px;
font-size: 20px;
}
div[id^="dashTabela_"] .dash-table-footer {
@@ -35,6 +35,15 @@ self.render(e.detail || []);
});
$("#lista_"+this.instanceId).on("click","tr[data-process-number]",function(){
var processNumber = String($(this).attr("data-process-number") || "").trim();
var processId = String($(this).attr("data-process-id") || "").trim();
var link = buildProcessLink(processNumber, processId);
if(link){
window.open(link,"_blank");
}
});
},
render:function(dados){
@@ -49,6 +58,8 @@ renderPage:function(){
var html="";
var totalPaginas = this.getTotalPaginas();
var totalHeaders = $("#dashTabela_" + this.instanceId + " thead th").length;
var hasSolicitacaoColumn = totalHeaders >= 8;
if(this.paginaAtual > totalPaginas){
this.paginaAtual = totalPaginas;
@@ -58,9 +69,14 @@ var inicio = (this.paginaAtual - 1) * this.itensPorPagina;
var fim = inicio + this.itensPorPagina;
var paginaDados = this.dados.slice(inicio,fim);
paginaDados.forEach(function(item){
html+="<tr>";
paginaDados.forEach(function(item){
var numeroSolicitacao = String(item.numeroSolicitacao || "").trim();
var processId = String(item.processId || "checklist").trim();
var clickableClass = numeroSolicitacao ? "dtb-row-link" : "";
html+="<tr class='"+clickableClass+"' data-process-number='"+escAttr(numeroSolicitacao)+"' data-process-id='"+escAttr(processId)+"'>";
if(hasSolicitacaoColumn){
html+="<td>"+esc(numeroSolicitacao || "-")+"</td>";
}
html+="<td>"+esc(formataData(item.dataAuditoria))+"</td>";
html+="<td>"+esc(formataData(item.dataLimite))+"</td>";
html+="<td>"+esc(item.ciclo || "")+"</td>";
@@ -73,7 +89,7 @@ html+="</tr>";
});
if(!html){
html+="<tr><td colspan='7' class='text-center'>Sem dados para o filtro selecionado</td></tr>";
html+="<tr><td colspan='"+(hasSolicitacaoColumn ? 8 : 7)+"' class='text-center'>Sem dados para o filtro selecionado</td></tr>";
}
$("#lista_"+this.instanceId).html(html);
@@ -101,6 +117,10 @@ return String(v == null ? "" : v)
.replace(/'/g,"&#39;");
}
function escAttr(v){
return esc(v).replace(/"/g,"&quot;");
}
function formataData(v){
var s = String(v || "").trim();
if(!s){
@@ -120,3 +140,63 @@ return "CONFORME";
}
return "NAO_CONFORME";
}
function buildProcessLink(numeroSolicitacao, processId){
var num = String(numeroSolicitacao || "").trim();
if(!num){
return "";
}
var pid = String(processId || "").trim() || "checklist";
var server = "";
var companyId = "";
try{
server = String(window.WCMAPI && window.WCMAPI.serverURL || "").trim();
}catch(e){}
try{
companyId = String(window.WCMAPI && window.WCMAPI.organizationId || "").trim();
}catch(e2){}
if(!server){
server = window.location.origin;
}
if(!companyId){
companyId = getCompanyIdFromDom();
}
if(!companyId){
companyId = "1";
}
return server + "/portal/p/" + companyId + "/pageworkflowview?app_ecm_workflowview_detailsProcessInstanceID=" + encodeURIComponent(num) + "&processID=" + encodeURIComponent(pid);
}
function getCompanyIdFromDom(){
var selectors = [
"input[name='WKCompany']",
"#WKCompany",
"input[name='companyId']",
"#companyId"
];
for(var i=0;i<selectors.length;i++){
try{
var value = String($(selectors[i]).val() || "").trim();
if(value) return value;
}catch(e){}
}
try{
if(window.parent && window.parent.$){
for(var j=0;j<selectors.length;j++){
var parentValue = String(window.parent.$(selectors[j]).val() || "").trim();
if(parentValue) return parentValue;
}
}
}catch(e2){}
return "";
}
@@ -0,0 +1,19 @@
application.type=widget
application.code=dashuf
application.title=dashuf
application.description=dashuf
application.fluig.version=null
application.category=SYSTEM
application.renderer=freemarker
developer.code=andrey.cunha
developer.name=andrey.cunha
developer.url=http://www.fluig.com
application.uiwidget=true
application.mobileapp=false
application.version=${build.version}-${build.revision}
view.file=view.ftl
edit.file=edit.ftl
locale.file.base.name=dashuf
application.resource.js.1=/resources/js/dashuf.js
application.resource.css.2=/resources/css/dashuf.css
hash=4a16315e9e66fa7d797b3f6b1fb365b69f9a4ce2
@@ -0,0 +1,4 @@
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
</div>
@@ -0,0 +1,9 @@
<div id="DashUf_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="DashUf.instance()">
<div class="duf-card">
<div class="duf-title">Auditorias por UF</div>
<div class="duf-subtitle">Distribuição por estado</div>
<div class="duf-canvas-wrap">
<canvas id="graficoUf_${instanceId}"></canvas>
</div>
</div>
</div>
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<jboss-web>
<context-root>/dashuf</context-root>
<disable-cross-context>false</disable-cross-context>
</jboss-web>
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>
@@ -0,0 +1,34 @@
div[id^="DashUf_"] .duf-card {
background: #ececed;
border-radius: 24px;
padding: 14px 16px;
}
div[id^="DashUf_"] .duf-title {
color: #004a6a;
font-size: 18px;
font-weight: 800;
margin-bottom: 2px;
}
div[id^="DashUf_"] .duf-subtitle {
color: #5c6870;
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
}
div[id^="DashUf_"] .duf-canvas-wrap {
position: relative;
min-height: 250px;
}
@media (max-width: 1300px) {
div[id^="DashUf_"] .duf-title {
font-size: 20px;
}
div[id^="DashUf_"] .duf-canvas-wrap {
min-height: 220px;
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

@@ -0,0 +1,139 @@
var DashUf = SuperWidget.extend({
chart: null,
init: function () {
var self = this;
this.render([]);
window.addEventListener("dashboardData", function (e) {
self.render(e.detail || []);
});
},
render: function (dados) {
var ranking = this.montarRanking(dados);
if (!ranking.length) {
ranking = [{ nome: "Sem dados", total: 0 }];
}
this.plot(
ranking.map(function (item) { return item.nome; }),
ranking.map(function (item) { return item.total; })
);
},
montarRanking: function (dados) {
var mapa = {};
dados.forEach(function (item) {
var uf = String(item.uf || "").replace(/\s+/g, " ").trim().toUpperCase();
if (!uf) {
uf = "SEM UF";
}
mapa[uf] = (mapa[uf] || 0) + 1;
});
return Object.keys(mapa).map(function (uf) {
return {
nome: uf,
total: mapa[uf]
};
}).sort(function (a, b) {
if (b.total !== a.total) return b.total - a.total;
return a.nome.localeCompare(b.nome);
});
},
plot: function (labels, valores) {
var canvas = document.getElementById("graficoUf_" + this.instanceId);
if (!canvas) return;
if (this.chart) {
this.chart.destroy();
}
var valueLabelsPlugin = {
id: "valueLabelsPluginUf",
afterDatasetsDraw: function (chart) {
var c = chart.ctx;
c.save();
c.font = "700 11px Arial";
c.textAlign = "center";
c.textBaseline = "bottom";
c.fillStyle = "#0b4f6c";
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) return;
c.fillText(String(value), bar.x, bar.y - 4);
});
});
c.restore();
}
};
this.chart = new Chart(canvas, {
type: "bar",
plugins: [valueLabelsPlugin],
data: {
labels: labels,
datasets: [{
label: "Auditorias",
data: valores,
backgroundColor: "#0b6a88",
borderColor: "#084d64",
borderWidth: 1,
borderRadius: 6,
maxBarThickness: 46
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: function (context) {
return "Auditorias: " + context.raw;
}
}
}
},
layout: {
padding: {
top: 18,
right: 8
}
},
scales: {
x: {
grid: { display: false },
ticks: {
color: "#4b5563",
font: {
size: 11,
weight: "600"
}
}
},
y: {
beginAtZero: true,
ticks: {
precision: 0,
color: "#6b7280"
},
grid: {
display: false
}
}
}
}
});
}
});
@@ -2,7 +2,7 @@
class="super-widget wcm-widget-class fluig-style-guide"
data-params="FiltroDash.instance()">
<div class="fdash-wrap">
<div class="fdash-title">AUDITORIAS DE LOJA - IAF 2026</div>
<div class="fdash-title">AUDITORIAS DE LOJA</div>
<div class="fdash-filters-row">
<div class="fdash-filter-card">
@@ -10,12 +10,15 @@ data-params="FiltroDash.instance()">
<div id="chips_ciclo_${instanceId}" class="fdash-chips"></div>
</div>
<div class="fdash-filter-card">
<div class="fdash-filter-label">REGIONAL</div>
<div class="fdash-filter-label"> SUPERVISOR REGIONAL</div>
<div id="chips_regional_${instanceId}" class="fdash-chips"></div>
</div>
<div class="fdash-filter-card">
<div class="fdash-filter-label">GESTOR</div>
<div id="chips_supervisao_${instanceId}" class="fdash-chips"></div>
<div class="fdash-filter-label">LOJA</div>
<div class="fdash-autocomplete-wrap">
<input type="text" class="form-control fdash-autocomplete" id="loja_${instanceId}" placeholder="Digite a loja">
<div id="lojaSugestoes_${instanceId}" class="fdash-sugestoes" style="display:none;"></div>
</div>
</div>
</div>
@@ -1,53 +1,94 @@
div[id^="filtroDash_"] .fdash-wrap {
background: #9d9d9f;
border-radius: 16px;
padding: 12px;
padding: 10px;
color: #ffffff;
}
div[id^="filtroDash_"] .fdash-title {
text-align: center;
font-size: 30px;
font-size: 24px;
line-height: 1.12;
font-weight: 800;
margin-bottom: 10px;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
div[id^="filtroDash_"] .fdash-filters-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
gap: 6px;
}
div[id^="filtroDash_"] .fdash-filter-card {
background: #ececed;
border-radius: 12px;
padding: 8px;
padding: 6px 8px;
}
div[id^="filtroDash_"] .fdash-autocomplete-wrap {
position: relative;
}
div[id^="filtroDash_"] .fdash-autocomplete {
border-radius: 8px;
height: 32px;
font-size: 12px;
border: 1px solid #c7d2da;
color: #1c4a62;
}
div[id^="filtroDash_"] .fdash-sugestoes {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 50;
max-height: 220px;
overflow-y: auto;
background: #ffffff;
border: 1px solid #c7d2da;
border-radius: 8px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}
div[id^="filtroDash_"] .fdash-sugestao-item {
width: 100%;
border: 0;
background: #ffffff;
color: #1c4a62;
text-align: left;
font-size: 12px;
padding: 8px 10px;
cursor: pointer;
}
div[id^="filtroDash_"] .fdash-sugestao-item:hover {
background: #eef4f8;
}
div[id^="filtroDash_"] .fdash-filter-label {
color: #004a6a;
font-size: 15px;
font-size: 13px;
font-weight: 800;
margin-bottom: 6px;
margin-bottom: 4px;
}
div[id^="filtroDash_"] .fdash-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
min-height: 36px;
gap: 4px;
min-height: 30px;
}
div[id^="filtroDash_"] .fdash-chip {
border: 1px solid #0a4f70;
background: #0a5d82;
color: #ffffff;
padding: 3px 8px;
padding: 2px 7px;
border-radius: 6px;
font-weight: 700;
font-size: 12px;
font-size: 11px;
cursor: pointer;
}
@@ -60,33 +101,33 @@ div[id^="filtroDash_"] .fdash-actions {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 8px;
margin-top: 8px;
gap: 6px;
margin-top: 6px;
}
div[id^="filtroDash_"] .fdash-date {
min-width: 160px;
min-width: 150px;
}
div[id^="filtroDash_"] .fdash-date label {
margin: 0 0 2px 0;
color: #ffffff;
font-weight: 700;
font-size: 12px;
font-size: 11px;
}
div[id^="filtroDash_"] .fdash-date input {
border-radius: 8px;
height: 34px;
font-size: 13px;
height: 30px;
font-size: 12px;
}
div[id^="filtroDash_"] .fdash-actions .btn {
font-weight: 700;
border-radius: 8px;
min-height: 34px;
padding: 6px 12px;
font-size: 13px;
min-height: 30px;
padding: 4px 10px;
font-size: 12px;
}
div[id^="filtroDash_"] .fdash-actions button[id^="limpar_"] {
@@ -109,7 +150,7 @@ div[id^="filtroDash_"] .fdash-actions button[id^="filtrar_"]:focus {
@media (max-width: 1300px) {
div[id^="filtroDash_"] .fdash-title {
font-size: 24px;
font-size: 20px;
}
div[id^="filtroDash_"] .fdash-filters-row {
@@ -117,11 +158,11 @@ div[id^="filtroDash_"] .fdash-actions button[id^="filtrar_"]:focus {
}
div[id^="filtroDash_"] .fdash-filter-label {
font-size: 14px;
font-size: 13px;
}
div[id^="filtroDash_"] .fdash-chip {
font-size: 12px;
font-size: 11px;
}
div[id^="filtroDash_"] .fdash-actions {
@@ -1,10 +1,10 @@
var FiltroDash = SuperWidget.extend({
dadosBase: [],
lojasDisponiveis: [],
selecionados: {
ciclo: {},
regional: {},
supervisao: {}
regional: {}
},
init: function () {
@@ -51,11 +51,11 @@ var FiltroDash = SuperWidget.extend({
renderFiltros: function () {
var ciclos = this.valoresUnicos(function (x) { return x.ciclo; });
var regionais = this.valoresUnicos(function (x) { return x.regional; });
var supervisoes = this.valoresUnicos(function (x) { return x.responsavelLoja; });
var lojas = this.valoresUnicos(function (x) { return x.loja; });
this.renderChips("ciclo", ciclos, "#chips_ciclo_" + this.instanceId);
this.renderChips("regional", regionais, "#chips_regional_" + this.instanceId);
this.renderChips("supervisao", supervisoes, "#chips_supervisao_" + this.instanceId);
this.renderAutocomplete(lojas);
},
valoresUnicos: function (getter) {
@@ -107,15 +107,83 @@ var FiltroDash = SuperWidget.extend({
});
},
renderAutocomplete: function (valores) {
var self = this;
var inputId = "#loja_" + this.instanceId;
var sugestoesId = "#lojaSugestoes_" + this.instanceId;
this.lojasDisponiveis = valores.slice();
$(sugestoesId).empty().hide();
$(inputId).off(".fdashLoja");
$(document).off(".fdashLojaDoc" + this.instanceId);
$(inputId).on("input.fdashLoja focus.fdashLoja", function () {
self.mostrarSugestoes($(this).val());
self.aplicar();
});
$(inputId).on("change.fdashLoja blur.fdashLoja", function () {
self.aplicar();
setTimeout(function () {
$(sugestoesId).hide();
}, 150);
});
$(document).on("click.fdashLojaDoc" + this.instanceId, function (e) {
if (!$(e.target).closest(".fdash-autocomplete-wrap").length) {
$(sugestoesId).hide();
}
});
},
mostrarSugestoes: function (texto) {
var self = this;
var sugestoes = this.filtrarLojas(texto);
var box = $("#lojaSugestoes_" + this.instanceId);
box.empty();
if (!texto || !sugestoes.length) {
box.hide();
return;
}
sugestoes.slice(0, 12).forEach(function (valor) {
var item = $("<button>")
.attr("type", "button")
.addClass("fdash-sugestao-item")
.text(valor);
item.on("click", function () {
$("#loja_" + self.instanceId).val(valor);
box.hide();
self.aplicar();
});
box.append(item);
});
box.show();
},
filtrarLojas: function (texto) {
var query = normalizaTexto(texto);
if (!query) return [];
return this.lojasDisponiveis.filter(function (valor) {
return normalizaTexto(valor).indexOf(query) > -1;
});
},
limpar: function () {
this.selecionados = {
ciclo: {},
regional: {},
supervisao: {}
regional: {}
};
$("#dtInicio_" + this.instanceId).val("");
$("#dtFim_" + this.instanceId).val("");
$("#loja_" + this.instanceId).val("");
$("#filtroDash_" + this.instanceId + " .fdash-chip").addClass("is-off");
this.aplicar();
},
@@ -126,9 +194,13 @@ var FiltroDash = SuperWidget.extend({
dataFim: $("#dtFim_" + this.instanceId).val(),
ciclo: Object.keys(this.selecionados.ciclo),
regional: Object.keys(this.selecionados.regional),
supervisao: Object.keys(this.selecionados.supervisao)
loja: $("#loja_" + this.instanceId).val()
};
try {
console.log("[filtrosDash] filtros aplicados:", filtros);
} catch (e) {}
window.dispatchEvent(new CustomEvent("dashboardFiltro", { detail: filtros }));
}