feat: chart in page home

gestaoRaul/home/templates/home.html

@@ -5,6 +5,18 @@
 
 {% block 'head' %}
 <link rel="stylesheet" href="{% static 'home/css/home.css' %}">
+
+
+
+
+
+
+
+
+
+
+
+
 {% endblock %}
 
 {% block 'title' %}
@@ -18,14 +30,26 @@ RRB&C - DashBoard
   <div class="grid-container">
 
     <div class="card">
-      <h4> Valor Total de Pagamentos </h4>
-      <h4>R$ {{total_pagamentos |floatformat:2 }} </h4>
-    </div>
-    <div class="card">
+      <h4> Valor de Pagamentos </h4>
+      <h5>R$ {{total_pagamentos |floatformat:2 }} </h5>
+      <hr>
       <h4> Quantidade de Pagamentos </h4>
-      <h4> {{ qdt_pagamentos }} </h4>
-      <h4> Tíket médio </h4>
-      <h4>R$ {{ ticekMedio |floatformat:2}} </h4>
+      <h5> {{ qdt_pagamentos }} </h5>
+      <hr>
+      <h4> Ticket médio </h4>
+      <h5>R$ {{ ticekMedio |floatformat:2}} </h5>
+      <hr>
+    </div>
+
+    <div class="card">
+      <h4> Gráficos de vendas </h4>
+      <div></div>
+      <canvas id="vendas" style="width:100%;height: 85%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;">
+
+
+      </canvas>
+
+
     </div>
 
     <div class="card">
@@ -37,8 +61,8 @@ RRB&C - DashBoard
         </tr>
       {% for produto in produtos_mais_vendidos %}
       <tr>
-      <td style="background-color: rgba(0, 255, 255, 0);"> {{ produto.nome }} </td>
-      <td style="background-color: rgba(0, 255, 255, 0);"> {{ produto.quantidade }} </td>
+      <td id="n-{{forloop.counter0}}" style="background-color: rgba(0, 255, 255, 0);"> {{ produto.nome }} </td>
+      <td id="q-{{forloop.counter0}}" style="background-color: rgba(0, 255, 255, 0);"> {{ produto.quantidade }} </td>
     </tr>
     
       {% endfor %}
@@ -48,6 +72,10 @@ RRB&C - DashBoard
 
 
   </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+  <script src="{% static 'home/js/home.js' %}"></script>
+
+
 </body>
 
 

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

@@ -14,7 +14,7 @@
     width: 420px;
     height: 420px;
     background-color: #2b376e;
-    border-radius: 15px;
+    border-radius: 10px;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
     text-align: center;
     line-height: 30px; /* Centraliza o texto verticalmente */
@@ -46,10 +46,8 @@
       width: 95%;
       /* height: 80%; */
       background-color: #2b376e;
-      border-radius: 15px;
-      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
       text-align: center;
-      line-height: 30px; /* Centraliza o texto verticalmente */
+      line-height: 30px; 
       font-size: 20px;
       font-weight: bold;
       padding: 10px;

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

@@ -0,0 +1,37 @@
+
+
+console.log(document.getElementById('n-0'))
+
+
+var xValues = [document.getElementById('n-0').innerText,
+    document.getElementById('n-1').innerText,
+    document.getElementById('n-2').innerText, 
+    document.getElementById('n-3').innerText, 
+    document.getElementById('n-4').innerText
+    ];
+var yValues = [document.getElementById('q-0').innerText, 
+    document.getElementById('q-1').innerText, 
+    document.getElementById('q-2').innerText, 
+    document.getElementById('q-3').innerText, 
+    document.getElementById('q-4').innerText
+];
+var barColors = ["red", "green","blue","orange","brown"];
+
+new Chart("vendas", {
+    type: "bar",
+    data: {
+      labels: xValues,
+      datasets: [{
+        backgroundColor: barColors,
+        data: yValues
+      }]
+    },
+    options: {
+      legend: {display: false},
+      title: {
+        display: true,
+        text: "Produtos mais vendidos"
+      },
+      
+    }
+  });