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

250 lines
9.9 KiB
PHP
Raw Normal View History

@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