File: /var/www/html/xfacil.desafio.com.py/resources/views/livewire/panel.blade.php
<div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="listado-tab" data-toggle="tab" href="#listado" role="tab" aria-controls="listado" aria-selected="true">Listado de inicio de sesiones</a>
</li>
<li class="nav-item">
<a class="nav-link" id="grafico-tab" data-toggle="tab" href="#grafico" role="tab" aria-controls="grafico" aria-selected="false">Gráfico de inicio de sesiones</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="listado" role="tabpanel" aria-labelledby="listado-tab">
<div class="card">
<div class="card-header">
<div class="col-12" align="right">
<button class="btn btn-success" wire:click="exportar()">Descargar registro</button><br><br>
</div>
<div class="col-12">
<div class="form-group">
<input wire:model="buscar" type="search" class="form-control" placeholder="Buscar" />
</div>
</div>
</div>
<div class="card-body">
<table class="table table-bordered" id="example">
<thead>
<tr>
<th>ID</th>
<th>Nombre y Apellido</th>
<th>Ip</th>
<th>Plataforma</th>
<th>Fecha</th>
</tr>
</thead>
<tbody>
@foreach($inicios as $value)
<tr>
<td>{{ $value->id }}</td>
<td>{{ $value->name }}</td>
<td>{{ $value->ip }}</td>
<td>{{ $value->navegador }}</td>
<td>{{ $value->created_at }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="col-12">
@if($inicios->count())
{{ $inicios->links() }}
@else
No hay resultados para la búsqueda "{{ $buscar }}"
@endif
</div>
</div>
<div class="tab-pane fade" id="grafico" role="tabpanel" aria-labelledby="grafico-tab">
<div class="row">
<div class="col-md-12">
<!-- BAR CHART -->
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Ingresos de la semana</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="barChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
</div>
<!-- /.card-body -->
</div>
</div>
<div class="col-md-12">
<!-- BAR CHART -->
<div class="card card-warning">
<div class="card-header">
<h3 class="card-title">Ingresos del mes</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="movimientomes" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
</div>
<!-- /.card-body -->
</div>
</div>
<div class="col-md-12">
<!-- BAR CHART -->
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">Ingresos del año</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="movimientoanho" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</div>
</div>
@section('js')
<script>
var areaChartData = {
labels : ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
datasets: [
{
label : 'Ingresos',
backgroundColor : 'rgba(60,141,188,0.9)',
borderColor : 'rgba(60,141,188,0.8)',
pointRadius : false,
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data : <?= $ingresosemana ?>,
},
]
}
var mesData = {
labels : <?= $fechas ?>,
datasets: [
{
label : 'Ingresos',
backgroundColor : '#ffc107',
borderColor : 'rgba(60,141,188,0.8)',
pointRadius : false,
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data : <?= $ingresomes ?>,
},
]
}
var anhoData = {
labels : ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre', 'Octubre', 'Noviembre', 'Diciembre'],
datasets: [
{
label : 'Ingresos',
backgroundColor : '#28a745',
borderColor : 'rgba(60,141,188,0.8)',
pointRadius : false,
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data : <?= $ingresoanho ?>,
},
]
}
//-------------
//- Semana -
//-------------
var barChartCanvas = $('#barChart').get(0).getContext('2d')
var barChartData = $.extend(true, {}, areaChartData)
var temp0 = areaChartData.datasets[0]
barChartData.datasets[0] = temp0
var barChartOptions = {
responsive : true,
maintainAspectRatio : false,
datasetFill : false
}
new Chart(barChartCanvas, {
type: 'bar',
data: barChartData,
options: barChartOptions
})
//-------------
//- Mes -
//-------------
var movimientomesCanvas = $('#movimientomes').get(0).getContext('2d')
var movimientomesData = $.extend(true, {}, mesData)
var temp0 = mesData.datasets[0]
movimientomesData.datasets[0] = temp0
var movimientomesOptions = {
responsive : true,
maintainAspectRatio : false,
datasetFill : false
}
new Chart(movimientomesCanvas, {
type: 'bar',
data: movimientomesData,
options: movimientomesOptions
})
//-------------
//- Año -
//-------------
var movimientoanhoCanvas = $('#movimientoanho').get(0).getContext('2d')
var movimientoanhoData = $.extend(true, {}, anhoData)
var temp0 = anhoData.datasets[0]
movimientoanhoData.datasets[0] = temp0
var movimientoanhoOptions = {
responsive : true,
maintainAspectRatio : false,
datasetFill : false
}
new Chart(movimientoanhoCanvas, {
type: 'bar',
data: movimientoanhoData,
options: movimientoanhoOptions
})
</script>
@stop
</div>