250 lines
9.9 KiB
PHP
250 lines
9.9 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" style="margin-bottom: 30px;">
|
|
<i class="fa fa-fw fa-info"></i> @lang('gallery.statistics.intro', ['gallery_name' => UserConfig::get('app_name')])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">@lang('gallery.statistics.taken_12_months')</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-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">@lang('gallery.statistics.uploaded_12_months')</div>
|
|
<div class="card-body text-center" id="uploaded-12m-graph">
|
|
<canvas id="uploaded-12m-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.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.taken12Months') }}', function(result)
|
|
{
|
|
$('.loading', '#taken-12m-graph').hide();
|
|
$('canvas', '#taken-12m-graph').show();
|
|
var myLineChart = new Chart($('#taken-12m-chart'),
|
|
{
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
borderColor: '#0F2240',
|
|
data: result.data,
|
|
fill: false
|
|
}
|
|
],
|
|
labels: result.labels
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
/* Photos uploaded in the last 12 months */
|
|
$.get('{{ route('statistics.uploaded12Months') }}', function(result)
|
|
{
|
|
$('.loading', '#uploaded-12m-graph').hide();
|
|
$('canvas', '#uploaded-12m-graph').show();
|
|
var myLineChart = new Chart($('#uploaded-12m-chart'),
|
|
{
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
borderColor: '#0F2240',
|
|
data: result.data,
|
|
fill: false
|
|
}
|
|
],
|
|
labels: result.labels
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
/* 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 |