From faaf0d3576f31b6f16273258409879bbd6f878f8 Mon Sep 17 00:00:00 2001
From: Welton Moura <weltonmoura@live.com>
Date: Thu, 9 Jan 2025 16:57:29 -0300
Subject: [PATCH] feat: chart in page home

---
 gestaoRaul/db.sqlite3                         | Bin 241664 -> 241664 bytes
 gestaoRaul/home/templates/home.html           |  46 ++++++++++++++----
 gestaoRaul/templates/static/home/css/home.css |   6 +--
 gestaoRaul/templates/static/home/js/home.js   |  37 ++++++++++++++
 4 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3
index 0bcd4ba461126baa74450eb721a60fd986bb6553..62e65ab8c0dc1ed93adf84eccbc47b0c948e8ba0 100644
GIT binary patch
delta 5281
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
A!T<mO

delta 1960
zcmY+_d2AGQ6bJC%do!~$bZ6ccp)7`S$R!ADxG#x7%!W`15k@6ZVo*VW7%Uh$)UpN2
zAq6bZc3N72w%lh6lqokN%3(P~5)%oBKq(LtjS~Mbk@%fXFuI$aPu~0e-u&h_^RknB
zTXJtpK^sSuQZM2+1V38SZ4gP#<e3TPN9(R6TG3mJ8xzYK6XZ80xa}-$7?*qICZ2y_
ze0nDP<&`|mu{ib^rD~{eS93!wK6r5sqQQCdaU7J_EG?}<-HOyG-#W#$<jl6~>>4}Q
zo*#U@?9)8f%RSA*{yil8W2d>nOxYtTN9eFj(zXiKDP@co@<Eo+A@H(LEf^+r5DXAH
z01`s`!Sg~jpo35~cvfg1ct&V1hzjiiy3lT=^uL96fj@<If?tJpfCoa`RZ8hU3vEOA
zlh9W1gU}XGFSHqaBUA-W2vq`Kr~*_AZ2~)lHiAl_4WLZuOHe3O4ps@3fu%z0K}x6;
z%o8dBvxGb_L#SA(l>V+z5yDAAh2S-zbzq#(S};mz4HzL*0EP&C0s0E920esUfzCoJ
zL0h4G&`M|phzWfTETQFqgqA6#{Ux*%{2{ai{34VGyms~6sgGTx`Z)X$yx{Ny(8=LO
zkm>M!kl}CxFde=Z(TE+s>&-@)*msmTd<$UcrdL(Z!-v~XlxgtgV4lI3LN12XJ1vwL
z{9PDb2s!Tz43g&n>dt!4UF3{6oe4^!d^(sB<*!0cg`9NW4^}%7L=iq7VDM4r<DmLT
z7#()@s7!<FK!(9SzygQDvHjkfi=3J1{21(QGr-=e0QOM{aOMjC{6!wh2Aa9Q;aOLB
znxFnXzfQVS>XdrfS9y$=x{5}AdPw+3uksQz744<YyL8x@s417~Vln-gOFpP|=@8iK
zQZ3l#(m}Avr30YUrTt*7OEn<hrD~Ap(ms&m(q1sfr9I%ov9udZOVTdzc9M32H<Gji
zxJlX`%Zlk^le7(CGD%y(OG(-S1|?}T=$)i0&^<|&pyOPs0BzJh+5}rrbJ_@_b7=$c
znqBA4{h~`$zf67zdS>wh&?Su<LAxa12k|U!02Y~i&(xS{Ai84mb?y?2UQ;obZvji~
zLt7MH=Mkys?})1TaxfLyrp9o&sWD8hw@oE(*cfqcYK$3t-tM7dn0gMH?fGo*{7n8f
zAcM~Yr1RJIC?(CqMv48eQA|E*Pg15EHcB)Vc1o0w+B1}Cg`JYdhwUnrX>%ROXvRK3
z+ckBH#ruOL(s*;z6+h;xAk5^-0GBK5OR6mfK`VtpC>R7-vLdW34=J-BDVdqZ<<Lyy
zvLKtq>qAN%>>Lp=v$!-&mNebZIC~E6Ko*w(ix38*ZMirgjf(<Wa-lO(WgrOzNnj%B
zjkv+_{!WfcS2esE29Ie~(`kiQ29+-7hpcdR1ou84;L=xk`8T*-+_|gb7B2_sw1AgE
z3oi9e-N2uPL{x^$3jykK0qRo0$)@vykR0i+1Q9T&bB@>YCU+Xr0r%-Mc}KN|pTczb
z3AEt+pl&qJ3z;itlpq4;XrAk5-{ivP+Az81nZMzU)ThI%;$M5hy$QLJB2$}JyHIN`
zYhJPZ645>gvj3UsWuGM7@0H+gw6%jaxi4N;Pd`H=ry^yMIg#;^o)OcyV;nb1jE{_Q
zMt4KkZ|O($B0XClqj&YJTy27%m#Y;t^Vh$pJ=C?1i${4iQ?xeTqA6N~<ycv2WMnFN
zR)Mxik4%k>z)Q2%pf29(VlD0rNc8XBdq|%_j@xm`bZ=F$*4oc4)-I5a%joL0pQUy5
JvrDvs_&<fHrb+++

diff --git a/gestaoRaul/home/templates/home.html b/gestaoRaul/home/templates/home.html
index 73c4085..0d705fd 100644
--- a/gestaoRaul/home/templates/home.html
+++ b/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>
 
 
diff --git a/gestaoRaul/templates/static/home/css/home.css b/gestaoRaul/templates/static/home/css/home.css
index c745b76..ede78b2 100644
--- a/gestaoRaul/templates/static/home/css/home.css
+++ b/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;
diff --git a/gestaoRaul/templates/static/home/js/home.js b/gestaoRaul/templates/static/home/js/home.js
index e69de29..24e7080 100644
--- a/gestaoRaul/templates/static/home/js/home.js
+++ b/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"
+      },
+      
+    }
+  });
\ No newline at end of file