Incluindo filtros de data nos graficos do painel

app/Http/Controllers/Admin/GraficosController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers\Admin;
 use App\Http\Controllers\Controller;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Gate;
+use Illuminate\Http\Request;
 
 class GraficosController extends Controller
 {
@@ -18,14 +19,14 @@ class GraficosController extends Controller
         return view("admin.graficos.graficos");
     }
 
-    public function show()
+    public function show(Request $request)
     {
-        $data = $this->getRelatorioDados();
+        $data = $this->getRelatorioDados($request->dataInicio, $request->dataFim);
 
         return response()->json(['status' => true, 'data' => $data]);
     }
 
-    private function getRelatorioDados()
+    private function getRelatorioDados($dataInicio, $dataFim)
     {
         $user = auth()->user();
         $id_empresa = $user->empresa->first()->id;
@@ -33,7 +34,17 @@ class GraficosController extends Controller
         $atendimentosData = DB::table('usuarios as u')
             ->leftJoin('atendimento as a', 'u.id', '=', 'a.id_usuario')
             ->select('u.nome', DB::raw('count(a.id_usuario) as qtde_atendimento'))
-            ->where('a.id_empresa', $id_empresa)
+            ->where('a.id_empresa', $id_empresa);
+
+        if ($dataInicio && $dataFim) {
+            $atendimentosData->whereBetween(DB::raw('a.data_reg::DATE'), [$dataInicio, $dataFim]);
+        } elseif ($dataInicio) {
+            $atendimentosData->where(DB::raw('a.data_reg::DATE'), '>=', $dataInicio);
+        } elseif ($dataFim) {
+            $atendimentosData->where(DB::raw('a.data_reg::DATE'), '<=', $dataFim);
+        }
+
+        $atendimentosData = $atendimentosData
             ->groupBy('u.nome')
             ->get();
 
@@ -44,14 +55,34 @@ class GraficosController extends Controller
             ->where([
                 ['ue.id_empresa', '=', $id_empresa],
                 ['ea.evento', '<>', config('event.CONF_EVENT_ESPERA')],
-            ])
+            ]);
+
+        if ($dataInicio && $dataFim) {
+            $atendimentosStatusData->whereBetween(DB::raw('ea.data_reg::DATE'), [$dataInicio, $dataFim]);
+        } elseif ($dataInicio) {
+            $atendimentosStatusData->where(DB::raw('ea.data_reg::DATE'), '>=', $dataInicio);
+        } elseif ($dataFim) {
+            $atendimentosStatusData->where(DB::raw('ea.data_reg::DATE'), '<=', $dataFim);
+        }
+
+        $atendimentosStatusData = $atendimentosStatusData
             ->groupBy('ea.evento')
             ->get();
 
         $filasMaisUsadas = DB::table('queues as q')
             ->join('eventos_atendimento as ea', 'ea.id_queue', '=', 'q.id')
             ->select('q.nome', DB::raw('count(ea.id_queue) as qtde_fila'))
-            ->where('q.id_empresa', $id_empresa)
+            ->where('q.id_empresa', $id_empresa);
+
+        if ($dataInicio && $dataFim) {
+            $filasMaisUsadas->whereBetween(DB::raw('ea.data_reg::DATE'), [$dataInicio, $dataFim]);
+        } elseif ($dataInicio) {
+            $filasMaisUsadas->where(DB::raw('ea.data_reg::DATE'), '>=', $dataInicio);
+        } elseif ($dataFim) {
+            $filasMaisUsadas->where(DB::raw('ea.data_reg::DATE'), '<=', $dataFim);
+        }
+
+        $filasMaisUsadas = $filasMaisUsadas
             ->groupBy('q.nome')
             ->get();
         
@@ -65,4 +96,6 @@ class GraficosController extends Controller
     }
 
 
+
+
 }

public/js/views/graficos/index.js

@@ -13,12 +13,16 @@ const eventos = {
 
 }
 
-function getDadosRelatorioDB() {
+function getDadosRelatorioDB(dataInicio, dataFim) {
     return new Promise(function(resolve, reject) {
         $.ajax({
             type: "get",
             dataType: 'json',
             url: `graficos/getDados`,
+            data: {
+                dataInicio: dataInicio,
+                dataFim: dataFim
+            },
             success: function(response) {
                 const data = response.data;
                 resolve(data);
@@ -28,12 +32,16 @@ function getDadosRelatorioDB() {
 }
 
 function montaGrafico1(dataDB) {
-
     let labels = dataDB.map((value) => value.nome)
     let data = dataDB.map((value) => value.qtde_atendimento)
     const ctx = document.getElementById('myChart');
 
-    new Chart(ctx, {
+    let chartStatus = Chart.getChart("myChart"); 
+    if (chartStatus != undefined) {
+        chartStatus.destroy();
+    }
+
+    var myChart = new Chart(ctx, {
         type: 'bar',
         data: {
             labels: labels,
@@ -102,7 +110,13 @@ function montaGrafico2(dataDB) {
     });
     let labels = Object.keys(somaPorEvento).map(label => eventos[label]);
     let data = Object.values(somaPorEvento);
-    new Chart(ctx2, {
+    
+    let chartStatus = Chart.getChart("myChart2"); 
+    if (chartStatus != undefined) {
+        chartStatus.destroy();
+    }
+
+    var myChart2 = new Chart(ctx2, {
         type: 'doughnut',
         data: {
             labels: labels,
@@ -146,7 +160,13 @@ function montaGrafico3(dataDB) {
     const ctx3 = document.getElementById('myChart3');
     let labels3 = dataDB.map((value) => value.nome)
     let data3 = dataDB.map((value) => value.qtde_fila)
-    new Chart(ctx3, {
+    
+    let chartStatus = Chart.getChart("myChart3"); 
+    if (chartStatus != undefined) {
+        chartStatus.destroy();
+    }
+
+    var myChart3= new Chart(ctx3, {
         type: 'pie',
         data: {
             labels: labels3,
@@ -174,7 +194,10 @@ function montaGrafico3(dataDB) {
 }
 
 async function graficos() {
-    const data = await getDadosRelatorioDB();
+    document.getElementById('graficos').hidden = false;
+    var dataInicio = document.getElementById('dataInicio').value;
+    var dataFim = document.getElementById('dataFim').value;
+    const data = await getDadosRelatorioDB(dataInicio, dataFim);
     montaGrafico1(data.atendimentosData);
     montaGrafico2(data.atendimentosStatusData);
     montaGrafico3(data.filasMaisUsadas);

resources/views/admin/graficos/graficos.blade.php

@@ -1,12 +1,28 @@
+@props(['atendimentosData'])
 <x-app-layout>
     <div class="py-12 sm:px-6 lg:px-8" :class="{'mx-auto': open, 'w-full': !open}">
         <div class="header flex flex-col  gap-4">
             <h1 class="text-gray-900 dark:text-gray-100 text-3xl font-bold">
                 Gráficos
             </h1>
+            <div class="flex gap-4">
+                <div class="fixed-1 flex flex-col gap-1">
+                    <label>Data Inicio: </label>
+                    <input type="date" class="w-20 rounded-md p-2 text-sm dark:bg-gray-800 placeholder-text-gray-800 dark:placeholder-text-gray-100 dark:text-gray-100" name="dataInicio" id="dataInicio" value="{{ $selected->dataInicio ?? '' }}" placeholder="Data de Início">
+                </div>
+        
+                <div class="fixed-1 flex flex-col gap-1">
+                    <label>Data Fim: </label>
+                    <input type="date" class="w-20 rounded-md p-2 text-sm dark:bg-gray-800 placeholder-text-gray-800 dark:placeholder-text-gray-100 dark:text-gray-100" name="dataFim" id="dataFim" value="{{ $selected->dataFim ?? '' }}" placeholder="Data de Fim">
+                </div>
+        
+                <div class="flex-1 flex flex-col gap-1" style="background-color: transparent; margin-top: 25px;"> 
+                    <button onclick="graficos()" class="lg:ml-auto ml-0 bg-blue-900 hover:bg-opacity-90 transition-all  text-white py-2 px-6 rounded text-lg overflow-hidden">Gerar Gráficos</button>
+                </div>
+            </div>
         </div>
 
-        <div>
+        <div id="graficos" hidden>
             <div class=" flex flex-col">
                 <div class="mt-8 flex gap-5 flex-col md:flex-row justify-between">
                     <div class="dark:bg-gray-800 px-10 py-4 bg-gray-50 rounded shadow-md flex-1">
@@ -28,8 +44,4 @@
     </div>
 
     <script src="{{ asset('js/views/graficos/index.js') }}"></script>
-
-    <script>
-        graficos();
-    </script>
 </x-app-layout>