style: page home

gestaoRaul/home/templates/home.html

@@ -67,17 +67,17 @@ RRB&C - DashBoard
     </div>
 
     <div class="card">
-      <h4> Gráfico de vendas </h4>
-      <canvas id="vendas" style="width:100%;height: 85%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;">
+      <h4> Mais vendidos </h4>
+      <canvas id="vendas" style="width:100%;height: 85%;max-width:100%; background-color: #d3ebff;border-radius: 5px;">
       </canvas>
     </div>
 
     <div class="card">
-      <h4> Gráfico cozinha </h4>
+      <h4>Tempo médio na cozinha</h4>
       <div style="
             width:95%;
             max-width:100%;
-            background-color: rgb(191, 225, 255);
+            background-color: #d3ebff;
             border-radius: 5px;
             padding: 10px 30px 10px 30px;"> 
       <canvas id="cuisine" style="width:80%;height: 65%;max-width:100%; border-radius: 5px;">
@@ -92,7 +92,7 @@ RRB&C - DashBoard
   </div>
   <h4>Faturamento anual</h4>
 <div style="height: 350px;margin: 30px;">
-  <canvas id="mensal" style="width:100%;height: 100%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;">
+  <canvas id="mensal" style="width:100%;height: 100%;max-width:100%; background-color: #d3ebff;border-radius: 5px;">
 </div>
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>

gestaoRaul/templates/static/home/css/home.css

@@ -35,7 +35,7 @@
     align-items: center;
     width: 300px;
     height: 130px;
-    background-color: #2b376e;
+    background-color: #1a237e;
     border-radius: 10px;
     box-shadow: 5px 5px 10px rgba(156, 156, 156, 0.2);
     text-align: left;

gestaoRaul/templates/static/home/js/home.js

@@ -1,23 +1,55 @@
 
-var barColors = ["red", "green","blue","orange","brown"];
+const barColors = ['rgba(252, 52, 95, 0.65)', 
+                'rgba(253, 193, 53, 0.65)',
+                'rgba(54, 162, 235, 0.65)',
+                'rgba(75, 192, 192, 0.65)',
+                'rgba(153, 102, 255, 0.65)',];
+
+const barColorsBorder = ['rgba(252, 52, 95)', 
+                'rgb(253, 193, 53)',
+                'rgb(54, 162, 235)',
+                'rgb(75, 192, 192)',
+                'rgb(153, 102, 255)',];
 
 var chartVendas = new Chart("vendas", {
   type: "bar",
   data: {
     labels: [],
     datasets: [{
+      fill: true,
+      // barPercentage: 1.0,
       data: [],
       backgroundColor: barColors,
+      borderColor: barColorsBorder,
+      borderWidth: 2,
+      borderRadius: 8
     }]
   },
   options: {
+    
+    indexAxis: 'y',
+    scales: {
+      y: {
+        ticks: {
+          display: true,
+
+          // color: 'white'
+          // padding: 5,
+          callback: function(value, index, values) {
+            return chartVendas.data.labels[index].substring(0, 6); // Retorna o valor normal do label
+          },
+        }
+      },
+      
+    },
     legend: {display: false},
     title: {
-      display: true,
+      display: false,
       text: "Produtos mais vendidos"
     },
     
-  }
+  },
+ 
 });
 
 var chartCuisine = new Chart("cuisine", {
@@ -228,7 +260,7 @@ function mediaCuisine(){
 var dateStart = document.getElementById('data-start').value == '' ? '2025-01-01' :document.getElementById('data-start').value;
 var dateEnd = document.getElementById('data-end').value == '' ? getDataAtualFormatada()[1] :document.getElementById('data-end').value;;
 var yValues = [];
-var xValues = ['Fila', 'Preparando', 'Entregar'];
+var xValues = ['Fila', 'Preparo', 'Entrega'];
 var totalPagamenstos = document.getElementById('total-pagamentos')
 var qtdPagamentos = document.getElementById('qtd-pagamentos')
 var ticketMedio = document.getElementById('ticket-medio')