From b3bb0758a9d2b5c4148eecdd547d2032427d7a8f Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 27 Sep 2022 19:26:36 +0200
Subject: [PATCH] Select period segmentation from date picker + other
 improvements. WIP #5316 @8

---
 .../FluidbookPublication/StatsOperation.php   | 29 ++++++---
 .../daterangepicker/daterangepicker.css       | 25 ++++----
 .../views/fluidbook_stats/loader.blade.php    | 59 ++++++++++++++++++-
 .../views/fluidbook_stats/summary.blade.php   | 57 ++++++++++++------
 4 files changed, 126 insertions(+), 44 deletions(-)

diff --git a/app/Http/Controllers/Admin/Operations/FluidbookPublication/StatsOperation.php b/app/Http/Controllers/Admin/Operations/FluidbookPublication/StatsOperation.php
index 930a005e5..f900f03bd 100644
--- a/app/Http/Controllers/Admin/Operations/FluidbookPublication/StatsOperation.php
+++ b/app/Http/Controllers/Admin/Operations/FluidbookPublication/StatsOperation.php
@@ -178,10 +178,22 @@ trait StatsOperation
 
         // Translatable list of labels for the available periods
         $period_map = [
-            'day'   => __('Day'),
-            'week'  => __('Week'),
-            'month' => __('Month'),
-            'year'  => __('Year'),
+            'day'   => [
+                'singular' => __('Day'),
+                'periodic' => __('Daily'),
+            ],
+            'week'  => [
+                'singular' => __('Week'),
+                'periodic' => __('Weekly'),
+            ],
+            'month' => [
+                'singular' => __('Month'),
+                'periodic' => __('Monthly'),
+            ],
+            'year'  => [
+                'singular' => __('Year'),
+                'periodic' => __('Annual'),
+            ],
         ];
 
         $dates = $date ? $this->parseDate($date) : false;
@@ -190,6 +202,7 @@ trait StatsOperation
         $period_override = in_array($period_override, array_keys($period_map)) ? $period_override : null;
         $period = $period_override ?? $this->determinePeriod($dates, $fluidbook);
 
+        $chart_heading = sprintf(__('%s Details'), $period_map[$period]['periodic']);
         $report_timespan = '';
 
         // Which mode are we in?
@@ -200,7 +213,6 @@ trait StatsOperation
             $date_range = "{$start_date},{$end_date}";
             $formatted_date_range = Carbon::parse($start_date)->isoFormat('MMMM Do, YYYY') . ' &mdash; ' .
                                     Carbon::parse($end_date)->isoFormat('MMMM Do, YYYY');
-            $chart_heading = __('Daily Details');
 
             // Human-friendly representation of the time span
             // Since our start and end dates are only in the format YYYY-MM-DD, the time defaults to midnight
@@ -222,8 +234,7 @@ trait StatsOperation
             $start_date = "{$year}-{$month}-01";
             $date_range = "{$start_date},{$year}-{$month}-{$last_day_of_month}";
             $end_date = ($month == date('m') && $year == date('Y')) ? date('Y-m-d') : "{$year}-{$month}-{$last_day_of_month}";
-            $chart_heading = __('Daily Details') .
-                             '<span class="heading-subtitle">' . Carbon::parse($start_date)->isoFormat('MMMM YYYY') . '</span>';
+            $chart_heading .= '<span class="heading-subtitle">' . Carbon::parse($start_date)->isoFormat('MMMM YYYY') . '</span>';
             $formatted_date_range = Carbon::parse($start_date)->isoFormat('Do') . ' &mdash; ' .
                                     Carbon::parse($end_date)->isoFormat('Do MMMM, YYYY');
 
@@ -235,7 +246,7 @@ trait StatsOperation
             $end_date = $year == date('Y') ? date('Y-m-d') : "{$year}-12-31"; // If it's the current year, don't count future dates
             $formatted_date_range = Carbon::parse($start_date)->isoFormat('MMMM Do, YYYY') . ' &mdash; ' .
                                     Carbon::parse($end_date)->isoFormat('MMMM Do, YYYY');
-            $chart_heading = __('Annual Details') . "<span class='heading-subtitle'>$year</span>";
+            $chart_heading .= "<span class='heading-subtitle'>$year</span>";
 
         } else { // No valid dates specified, display the full data set
             $mode = 'overview';
@@ -550,7 +561,7 @@ trait StatsOperation
         $table_map = [
             // Main summary table
             'summary' => [
-                'formatted_date'   => $period_map[$period],
+                'formatted_date'   => $period_map[$period]['singular'],
                 'nb_uniq_visitors' => __('Unique Visitors'),
                 'nb_visits'        => __('Visits'),
                 'nb_hits'          => __('Pages Viewed'),
diff --git a/public/packages/daterangepicker/daterangepicker.css b/public/packages/daterangepicker/daterangepicker.css
index 3ca56fc5f..6e4d8745b 100755
--- a/public/packages/daterangepicker/daterangepicker.css
+++ b/public/packages/daterangepicker/daterangepicker.css
@@ -13,7 +13,7 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
   border-radius: 4px;
-  padding: 4px;
+  padding: 0.5em 0.25em;
   font-size: 13px;
   font-family: sans-serif;
   line-height: 1.5em;
@@ -74,23 +74,22 @@
 
 .daterangepicker .ranges li {
   border-radius: 4px;
-  margin-bottom: 8px;
   text-align: left;
 }
+.daterangepicker .ranges li + li {
+    margin-top: 0.5em;
+}
 
 .daterangepicker .custom-range-inputs {
-  display: -ms-flexbox;
   display: flex;
-  margin: -3px;
-  margin-bottom: 5px;
+  align-items: center;
+  gap: 0.5em;
+  margin-top: 0.5em;
 }
 
 .daterangepicker .custom-range-inputs input {
-  min-width: 50px;
-  width: 50px;
-  -ms-flex: 1;
-      flex: 1;
-  margin: 3px;
+  min-width: 11ch;
+  flex: 1;
   border-radius: 4px;
   border: 1px solid #ccc;
   height: auto;
@@ -100,15 +99,13 @@
 }
 
 .daterangepicker .custom-range-buttons {
-  display: -ms-flexbox;
   display: flex;
-  margin: -3px;
+  gap: 0.5em;
+  margin-top: 1em;
 }
 
 .daterangepicker .custom-range-buttons button {
-  margin: 0;
   padding: 4px 9px;
-  margin: 3px;
   border-radius: 4px;
   background: #f5f5f5;
   color: #08c;
diff --git a/resources/views/fluidbook_stats/loader.blade.php b/resources/views/fluidbook_stats/loader.blade.php
index f90ee6386..d60607e9b 100644
--- a/resources/views/fluidbook_stats/loader.blade.php
+++ b/resources/views/fluidbook_stats/loader.blade.php
@@ -3,6 +3,11 @@
 @section('after_styles')
     <link rel="stylesheet" href="{{ asset('packages/daterangepicker/daterangepicker.css') }}">
     <style>
+        .container-fluid.animated.fadeIn {
+            {{-- Disable entrance animation on this page because we already have the stats loader --}}
+            animation: none;
+        }
+
         @keyframes spinner {
             to {
                 transform: rotate(360deg);
@@ -43,14 +48,20 @@
             margin: 5em auto;
         }
 
+        .chart-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
 
         .periods {
             display: inline-flex;
             margin-left: 2em;
         }
         .periods > * {
-            padding: 0.2em 0.8em;
+            padding: 0.35em 0.7em;
             border: 1px solid #ddd;
+            line-height: 1;
         }
         .periods > * + * {
             border-left: 0;
@@ -92,7 +103,7 @@
             width: 100%;
         }
         table.stats-details th, table.stats-details td {
-            padding: 0.5em 1em;
+            padding: 0.5em 0.75em;
         }
         table.stats-details thead tr {
             position: sticky;
@@ -103,6 +114,10 @@
             background-color: rgba(156, 195, 34, 0.15);
         }
 
+        [data-name="formatted_date"] {
+            white-space: nowrap;
+        }
+
         .table-columns {
             display: flex;
             flex-wrap: wrap;
@@ -130,12 +145,37 @@
         [data-daterangepicker]:hover {
             color: #467fcf;
         }
+
+        .daterangepicker.expanded {
+            padding-bottom: 0.75em;
+        }
+
         .daterangepicker .periods li:hover, .daterangepicker .periods li.active, .daterangepicker .ranges li:hover, .daterangepicker .ranges li.active {
             background: #263340;
         }
         .daterangepicker .periods li, .daterangepicker .ranges li {
             color: #467fcf;
         }
+
+        .daterangepicker .ranges {
+            margin-bottom: 1em;
+        }
+
+        .daterangepicker .custom-range-inputs input {
+            padding: 0.25em 0.5em;
+            width: 11ch;
+        }
+        .daterangepicker .custom-range-inputs .arrow-right {
+            opacity: 0.5;
+        }
+        .daterangepicker .custom-range-buttons {
+            flex-direction: row-reverse;
+        }
+        .daterangepicker.expanded .custom-range-buttons {
+            position: absolute;
+            right: 1em;
+            bottom: 0.75em;
+        }
         .daterangepicker .custom-range-buttons button {
             color: #467fcf;
         }
@@ -146,6 +186,15 @@
             background: #263340;
         }
 
+        .daterangepicker select[name="segmentation"] {
+            border: 1px solid #ccc;
+            border-radius: 0.25em;
+            padding: 0.25em;
+            text-align: left;
+            color: #333;
+            margin: 0;
+        }
+
         /*=== Table Column Sorter ===*/
         .sortable th:not(.sorttable_nosort) {
             cursor: pointer;
@@ -206,11 +255,15 @@
             showStatsError();
         });
 
-
         function hideStatsLoader() {
             document.getElementById('stats_loader').style.display = 'none';
         }
 
+        function showStatsLoader() {
+            document.getElementById('stats_wrapper').style.display = 'none';
+            document.getElementById('stats_loader').style.display = 'flex';
+        }
+
         function showStatsError() {
             hideStatsLoader();
             document.getElementById('stats_error').style.display = 'block';
diff --git a/resources/views/fluidbook_stats/summary.blade.php b/resources/views/fluidbook_stats/summary.blade.php
index 0deba1d52..8b1c7ddc9 100644
--- a/resources/views/fluidbook_stats/summary.blade.php
+++ b/resources/views/fluidbook_stats/summary.blade.php
@@ -6,7 +6,7 @@
     <span class="heading-subtitle">{{ $fluidbook->name }}</span>
 </h2>
 
-<span data-daterangepicker class="mb-2" style="cursor: pointer" title="{{ __('Statistics Period - click to choose a new date range') }}">
+<div data-daterangepicker class="mb-4" style="cursor: pointer" title="{{ __('Statistics Period - click to choose a new date range') }}">
     <i class="las la-calendar-week align-middle mr-1" style="font-size: 32px;"></i>
     <span class="date-range-text">
         {!! $formatted_date_range !!}
@@ -14,18 +14,6 @@
             <span style="opacity: 0.6; display: inline-block; margin-left: 0.5em;">({{ $report_timespan }})</span>
         @endif
     </span>
-</span>
-
-<div class="periods mb-4">
-    @foreach($period_map as $period_key => $period_title)
-        @if($period_key === $period)
-            <span>{{ $period_title }}</span>
-        @else
-            <a href="{{ route('stats', compact('fluidbook_id', 'hash') + ['date' => $date ?? '-', 'period_override' => $period_key]) }}">
-                {{ $period_title }}
-            </a>
-        @endif
-    @endforeach
 </div>
 
 
@@ -64,7 +52,20 @@
 
 @if($period_details->isNotEmpty())
 
-    <h2 class="mt-5">{!! $chart_heading !!}</h2>
+    <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>
+                @else
+                    <a href="{{ route('stats', compact('fluidbook_id', 'hash') + ['date' => $date ?? '-', 'period_override' => $period_key]) }}" onclick="showStatsLoader()">
+                        {{ $period_title['singular'] }}
+                    </a>
+                @endif
+            @endforeach
+        </div>
+    </div>
 
     {{-- Chart --}}
     <canvas id="stats_chart"></canvas>
@@ -231,11 +232,11 @@
 
     $('[data-daterangepicker]').daterangepicker({
         callback: function(startDate, endDate, period) {
+            showStatsLoader();
             let range = startDate.format('YYYY-MM-DD') + ',' + endDate.format('YYYY-MM-DD');
-            location.href = `{{ $base_URL }}/${range}`;
-
-            // TODO: add loading spinner after changing the date so that we know something is happening while the next page loads...
-
+            let segmentation = document.querySelector('.daterangepicker [name="segmentation"]')?.value || false;
+            let periodOverride = segmentation ? `/${segmentation}` : '';
+            location.href = `{{ $base_URL }}/${range}${periodOverride}`;
         },
         forceUpdate: false,
         minDate: '{{ $fluidbook->created_at->isoFormat('YYYY-MM-DD') }}', // Creation date of the Fluidbook
@@ -253,6 +254,26 @@
         --}}
     });
 
+    {{-- Inject the segmentation (period) dropdown into the date picker --}}
+    let picker = document.querySelector('.daterangepicker');
+
+    let segmentOptions = '<option value="">{{ __('Segmentation:') }} {{ __('Automatic') }}</option>';
+    @foreach ($period_map as $period_key => $period_title)
+        segmentOptions += '<option value="{{ $period_key }}">{{ __('Segmentation:') }} {{ $period_title['periodic'] }}</option>'
+    @endforeach
+
+    let segmentation = document.createElement('select');
+    segmentation.name = 'segmentation';
+    segmentation.innerHTML = segmentOptions;
+    picker.querySelector('form').prepend(segmentation);
+
+    // Add arrow between range inputs
+    let rangeInputs = picker.querySelector('.custom-range-inputs');
+    let arrow = document.createElement('span');
+    arrow.className = 'arrow-right';
+    rangeInputs.insertBefore(arrow, rangeInputs.children[1]); // Insert in 2nd position
+
+
 </script>
 
 {{--============================================================================================================--}}
-- 
2.39.5