att

Auditoria_checklist/wcm/widget/dashregional/src/main/resources/view.ftl

@@ -1,18 +1,10 @@
 <div id="dashRegional_${instanceId}"
 class="super-widget wcm-widget-class fluig-style-guide"
 data-params="DashRegional.instance()">
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-<div class="panel panel-default">
-<div class="panel-heading">
-<h3 class="panel-title">Não Conformes por Regional</h3>
-</div>
-
-<div class="panel-body">
-
-<canvas id="graficoRegional_${instanceId}" height="120"></canvas>
-
-</div>
-</div>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
+    <div class="drg-card">
+        <div class="drg-title">Auditorias Realizadas</div>
+        <canvas id="graficoRegionalTotal_${instanceId}" height="120"></canvas>
+    </div>
 </div>

Auditoria_checklist/wcm/widget/dashregional/src/main/webapp/resources/css/dashregional.css

@@ -1,12 +1,25 @@
-div[id^="dashRegional_"] {
-  position: relative !important;
-  z-index: 1;
+div[id^="dashRegional_"] .drg-card {
+  background: #ececed;
+  border-radius: 24px;
+  padding: 10px 14px;
+  min-height: 230px;
 }
 
-div[id^="dashRegional_"] .panel {
-  overflow: hidden;
+div[id^="dashRegional_"] .drg-title {
+  color: #004a6a;
+  font-size: 18px;
+  font-weight: 800;
+  text-align: center;
+  margin-bottom: 4px;
 }
 
 div[id^="dashRegional_"] canvas {
-  max-height: 260px;
+  min-height: 165px;
+  max-height: 180px;
+}
+
+@media (max-width: 1300px) {
+  div[id^="dashRegional_"] .drg-title {
+    font-size: 22px;
+  }
 }

Auditoria_checklist/wcm/widget/dashregional/src/main/webapp/resources/js/dashregional.js

@@ -1,102 +1,112 @@
 var DashRegional = SuperWidget.extend({
 
-chart:null,
+    chartTotal: 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);
-
-});
-
-},
-
-render:function(dados){
-
-var mapa={};
-
-// soma nao conformes por regional
-dados.forEach(function(i){
-
-var regional=i.regional || "Sem regional";
-
-if(!mapa[regional]) mapa[regional]=0;
-
-mapa[regional]+=parseInt(i.qtdNaoConforme||0,10) || 0;
-
-});
-
-// transformar em arrays
-var labels=Object.keys(mapa);
-var valores=Object.values(mapa);
-
-if(!labels.length){
-labels=["Aguardando filtro"];
-valores=[0];
-}
-
-// canvas
-var ctx=document.getElementById("graficoRegional_"+this.instanceId);
-
-if(this.chart){
-this.chart.destroy();
-}
-
-// criar gráfico
-this.chart=new Chart(ctx,{
-
-type:'bar',
-
-data:{
-labels:labels,
-datasets:[{
-label:"Não conformes",
-data:valores,
-backgroundColor:"#e74c3c"
-}]
-},
-
-options:{
-responsive:true,
-plugins:{
-legend:{display:false}
-}
-}
-
-});
-
-},
-
-renderAmostra:function(){
-var ctx=document.getElementById("graficoRegional_"+this.instanceId);
-if(!ctx){
-return;
-}
-
-if(this.chart){
-this.chart.destroy();
-}
-
-this.chart=new Chart(ctx,{
-type:'bar',
-data:{
-labels:["Aguardando filtro"],
-datasets:[{
-label:"Não conformes",
-data:[0],
-backgroundColor:"#cfd8dc"
-}]
-},
-options:{
-responsive:true,
-plugins:{legend:{display:false}}
-}
-});
-
-}
+        dados.forEach(function (item) {
+            var regiao = String(item.regional || "Sem regiao").trim();
+            if (!mapa[regiao]) {
+                mapa[regiao] = 0;
+            }
+            mapa[regiao] += 1;
+        });
+
+        var labels = Object.keys(mapa);
+        if (!labels.length) {
+            this.renderGrafico(["Aguardando filtro"], [0]);
+            return;
+        }
+
+        labels.sort(function (a, b) {
+            return a.localeCompare(b);
+        });
+
+        var totais = labels.map(function (l) { return mapa[l]; });
+        this.renderGrafico(labels, totais);
+    },
+
+    renderGrafico: function (labels, totais) {
+        var ctxTotal = document.getElementById("graficoRegionalTotal_" + this.instanceId);
+        if (!ctxTotal) return;
+
+        if (this.chartTotal) this.chartTotal.destroy();
+
+        var valueLabelsPlugin = {
+            id: "valueLabelsPlugin",
+            afterDatasetsDraw: function (chart) {
+                var ctx = chart.ctx;
+                ctx.save();
+                ctx.font = "700 10px Arial";
+                ctx.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) return;
+
+                        var y = bar.y - 4;
+                        var baseline = "bottom";
+                        if (y < chart.chartArea.top + 12) {
+                            y = bar.y + 10;
+                            baseline = "top";
+                        }
+
+                        ctx.textBaseline = baseline;
+                        ctx.fillStyle = baseline === "top" ? "#ffffff" : "#111111";
+                        ctx.fillText(String(value), bar.x, y);
+                    });
+                });
+
+                ctx.restore();
+            }
+        };
+
+        this.chartTotal = new Chart(ctxTotal, {
+            type: "bar",
+            plugins: [valueLabelsPlugin],
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: totais,
+                    backgroundColor: "#0a5d82"
+                }]
+            },
+            options: {
+                responsive: true,
+                layout: {
+                    padding: {
+                        top: 14
+                    }
+                },
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: {
+                        ticks: {
+                            autoSkip: false,
+                            maxRotation: 22,
+                            minRotation: 0,
+                            callback: function (value, index) {
+                                var txt = labels[index] || "";
+                                return txt.length > 18 ? txt.substring(0, 18) + "..." : txt;
+                            }
+                        }
+                    },
+                    y: { beginAtZero: true, precision: 0 }
+                }
+            }
+        });
+    }
 
 });