blue-twilight/resources/views/themes/base/gallery/statistics.blade.php

265 lines
12 KiB
PHP

@extends(Theme::viewName('layout'))
@section('title', trans('gallery.statistics.title'))
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
<li class="breadcrumb-item active">@lang('gallery.statistics.title')</li>
@endsection
@section('content')
<div class="container">
<div class="row">
<div class="col">
<h1>@lang('gallery.statistics.title')</h1>
<div class="alert alert-info mb-3">
<i class="fa fa-fw fa-info"></i> @lang('gallery.statistics.intro', ['gallery_name' => UserConfig::get('app_name')])
</div>
@can('admin:configure')
<div class="card mb-3">
<div class="card-body">
<p>@lang('admin.statistics_enable_public_intro')</p>
<form method="post" action="{{ route('admin.statistics.save') }}">
{{ csrf_field() }}
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="enable_public_statistics" @if (UserConfig::get('public_statistics')) checked="checked"@endif/>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">@lang('admin.statistics_enable_public_checkbox')</span>
</label><br/>
<button class="btn btn-success"><i class="fa fa-floppy-o"></i> @lang('forms.save_action')</button>
</form>
</div>
</div>
@endcan
</div>
</div>
<div class="row">
<div class="col-md-8 mb-4">
<div class="card">
<div class="card-header">@lang('gallery.statistics.photos_combined.chart_title')</div>
<div class="card-body text-center" id="taken-12m-graph">
<canvas id="taken-12m-chart" style="display: none;"></canvas>
<img class="loading" src="{{ asset('ripple.svg') }}"/>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-header">@lang('gallery.statistics.numbers.chart_title')</div>
<div class="card-body text-center" style="padding: 0;">
<table class="table table-striped stats-table mb-0">
<tbody>
<tr>
<td class="icon-col"><i class="fa fa-photo"></i></td>
<td class="stat-col">{{ number_format($photo_count, 0) }}</td>
<td class="text-col">{{ trans_choice('gallery.statistics.numbers.photos', $photo_count) }}</td>
</tr>
<tr>
<td class="icon-col"><i class="fa fa-book"></i></td>
<td class="stat-col">{{ number_format($album_count, 0) }}</td>
<td class="text-col">{{ trans_choice('gallery.statistics.numbers.albums', $album_count) }}</td>
</tr>
<tr>
<td class="icon-col"><i class="fa fa-tags"></i></td>
<td class="stat-col">{{ number_format($label_count, 0) }}</td>
<td class="text-col">{{ trans_choice('gallery.statistics.numbers.labels', $label_count) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-header">@lang('gallery.statistics.cameras')</div>
<div class="card-body text-center" id="cameras-graph">
<canvas id="cameras-chart" style="display: none;"></canvas>
<img class="loading" src="{{ asset('ripple.svg') }}"/>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-header">@lang('gallery.statistics.file_sizes')</div>
<div class="card-body text-center" id="filesizes-graph">
<canvas id="filesizes-chart" style="display: none;"></canvas>
<img class="loading" src="{{ asset('ripple.svg') }}"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-header">@lang('gallery.statistics.album_by_photos')</div>
<div class="card-body text-center" id="album-photos-graph">
<canvas id="album-photos-chart" style="display: none;"></canvas>
<img class="loading" src="{{ asset('ripple.svg') }}"/>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-header">@lang('gallery.statistics.album_by_size')</div>
<div class="card-body text-center" id="album-size-graph">
<canvas id="album-size-chart" style="display: none;"></canvas>
<img class="loading" src="{{ asset('ripple.svg') }}"/>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
{{-- TODO: include ChartJS locally --}}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Photos taken in the last 12 months */
$.get('{{ route('statistics.photosCombined') }}', function(result)
{
$('.loading', '#taken-12m-graph').hide();
$('canvas', '#taken-12m-graph').show();
var myLineChart = new Chart($('#taken-12m-chart'),
{
type: 'line',
data: {
datasets: [
{
borderColor: '#5f6cd9',
data: result.data[0].values,
fill: false,
label: result.data[0].label
},
{
borderColor: '#59c669',
data: result.data[1].values,
fill: false,
label: result.data[1].label
}
],
labels: result.labels
},
options: {
legend: {
position: 'bottom'
}
}
});
});
/* Cameras */
$.get('{{ route('statistics.cameras') }}', function(result)
{
$('.loading', '#cameras-graph').hide();
$('canvas', '#cameras-graph').show();
var myPieChart = new Chart($('#cameras-chart'),
{
type: 'doughnut',
data: {
datasets: [
{
backgroundColor: result.backgrounds,
data: result.data
}
],
labels: result.labels
},
options: {
legend: {
display: true,
position: 'bottom'
}
}
});
});
/* File Sizes */
$.get('{{ route('statistics.fileSizes') }}', function(result)
{
$('.loading', '#filesizes-graph').hide();
$('canvas', '#filesizes-graph').show();
var myPieChart = new Chart($('#filesizes-chart'),
{
type: 'doughnut',
data: {
datasets: [
{
backgroundColor: result.backgrounds,
data: result.data
}
],
labels: result.labels
},
options: {
legend: {
display: true,
position: 'bottom'
}
}
});
});
/* Album size by photo count */
$.get('{{ route('statistics.albumSizePhotos') }}', function(result)
{
$('.loading', '#album-photos-graph').hide();
$('canvas', '#album-photos-graph').show();
var myPieChart = new Chart($('#album-photos-chart'),
{
type: 'doughnut',
data: {
datasets: [
{
backgroundColor: result.backgrounds,
data: result.data
}
],
labels: result.labels
},
options: {
legend: {
display: true,
position: 'bottom'
}
}
});
});
/* Album size by photo size */
$.get('{{ route('statistics.albumSizePhotoSize') }}', function(result)
{
$('.loading', '#album-size-graph').hide();
$('canvas', '#album-size-graph').show();
var myPieChart = new Chart($('#album-size-chart'),
{
type: 'doughnut',
data: {
datasets: [
{
backgroundColor: result.backgrounds,
data: result.data
}
],
labels: result.labels
},
options: {
legend: {
display: true,
position: 'bottom'
}
}
});
});
});
</script>
@endpush