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>