<h2 class="mt-4">
{{ __('Statistics') }}
- <span class="heading-subtitle">{{ $fluidbook->name }}</span>
+ <span class="heading-subtitle">{{ $fluidbook_settings->title }}</span>
</h2>
<div data-daterangepicker class="mb-4" style="cursor: pointer" title="{{ __('Statistics Period - click to choose a new date range') }}">
<dl class="summary">
<dt>{{ __('Fluidbook Name') }}</dt>
- <dd>{{ $fluidbook->name }}</dd>
+ <dd>{{ $fluidbook_settings->title }}</dd>
<dt>{{ __('Creation Date') }}</dt>
<dd>
<dt>{{ __('Page Count') }}</dt>
<dd>{{ $page_count }}</dd>
+ {{-- Summary of totals --}}
@if($period_details->isNotEmpty())
@foreach ($table_map['summary'] as $summary_key => $summary_heading)
@php
@if($period_details->isNotEmpty())
+ {{-- Period (segmentation) override controls [ Day / Week / Month / Year ] --}}
<div class="chart-header mt-5">
<h2>{!! $chart_heading !!}</h2>
<div class="periods">
@foreach($period_map as $period_key => $period_title)
- @if($period_key === $period)
- <span>{{ $period_title['singular'] }}</span>
+ @php
+ // When in the month or year display modes, it makes no sense to offer the month and year segmentations
+ $period_not_available = ($mode === 'month' && in_array($period_key, ['month', 'year'])) || ($mode === 'year' && $period_key === 'year');
+ @endphp
+ @if($period_key === $period || $period_not_available)
+ <span @if($period_not_available)class="period_disabled"@endif>{{ $period_title['singular'] }}</span>
@else
<a href="{{ route('stats', compact('fluidbook_id', 'hash') + ['date' => $date ?? '-', 'period_override' => $period_key]) }}" onclick="showStatsLoader()">
{{ $period_title['singular'] }}
{{-- Chart --}}
<canvas id="stats_chart"></canvas>
- {{-- Stats for each period entry (year, month or day) --}}
+ {{-- Stats for each period entry (year, month, week or day) --}}
<table class="sortable stats-details mt-5">
<thead>
<tr>
<tbody>
@foreach($countries as $country)
<tr>
- <td class="whitespace-nowrap">
+ <td class="whitespace-nowrap" data-sort-value="{{ $country['label'] }}">
<img src="{{ $country['flag'] }}" alt="{{ $country['label'] }}" style="width: 1.5em; margin-right: 0.75em;">
{{ $country['label'] }}
</td>
{{-- Charting library --}}
<script>
//=== Chart Setup
- const labels = {!! json_encode($labels) !!};
+ const labels = {!! json_encode(array_keys($tooltip_labels)) !!};
const tooltip_labels = {!! json_encode($tooltip_labels) !!};
const data = {
labels: labels,