265 lines
12 KiB
PHP
265 lines
12 KiB
PHP
@extends('themes.base.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 |