blue-twilight/resources/views/themes/base/gallery/statistics.blade.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