[1.x] Add Support for Custom Periods

config/pulse.php

@@ -121,6 +121,24 @@
         Authorize::class,
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Pulse Periods
+    |--------------------------------------------------------------------------
+    |
+    | The following array lists the "periods" that will be available to select
+    | from the Pulse dashboard. You may modify this array as you wish, but
+    | ensure that the key is the period and the value is the hours.
+    |
+    */
+
+    'periods' => [
+        '1h' => 1,
+        '6h' => 6,
+        '24h' => 24,
+        '7d' => 168,
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Pulse Recorders

resources/views/livewire/period-selector.blade.php

@@ -12,8 +12,7 @@
         }
     }"
 >
-    <button @click="setPeriod('1_hour')" class="p-1 font-semibold sm:text-lg {{ $period === '1_hour' ? 'text-gray-700 dark:text-gray-300' : 'text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-500'}}">1h</button>
-    <button @click="setPeriod('6_hours')" class="p-1 font-semibold sm:text-lg {{ $period === '6_hours' ? 'text-gray-700 dark:text-gray-300' : 'text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-500'}}">6h</button>
-    <button @click="setPeriod('24_hours')" class="p-1 font-semibold sm:text-lg {{ $period === '24_hours' ? 'text-gray-700 dark:text-gray-300' : 'text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-500'}}">24h</button>
-    <button @click="setPeriod('7_days')" class="p-1 font-semibold sm:text-lg {{ $period === '7_days' ? 'text-gray-700 dark:text-gray-300' : 'text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-500'}}">7d</button>
+    @foreach(array_keys($periods) as $period)
+        <button @click="setPeriod('{{ $period }}')" class="p-1 font-semibold sm:text-lg {{ $current === $period ? 'text-gray-700 dark:text-gray-300' : 'text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-500'}}">{{ $period }}</button>
+    @endforeach
 </div>

src/Livewire/Concerns/HasPeriod.php

@@ -9,35 +9,46 @@ trait HasPeriod
 {
     /**
      * The usage period.
-     *
-     * @var '1_hour'|'6_hours'|'24_hours'|'7_days'|null
      */
     #[Url]
-    public ?string $period = '1_hour';
+    public ?string $period = '1h';
+
+    /**
+     * The default periods.
+     */
+    public array $defaults = [
+        '1h' => 1,
+        '6h' => 6,
+        '24h' => 24,
+        '7d' => 168,
+    ];
+
+    /**
+     * The available periods.
+     */
+    public function periods(): array
+    {
+        return config('pulse.periods', $this->defaults);
+    }
 
     /**
      * The period as an Interval instance.
      */
     public function periodAsInterval(): CarbonInterval
     {
-        return CarbonInterval::hours(match ($this->period) {
-            '6_hours' => 6,
-            '24_hours' => 24,
-            '7_days' => 168,
-            default => 1,
-        });
+        return CarbonInterval::hours($this->periods()[$this->period] ?? 1);
     }
 
     /**
      * The human friendly representation of the selected period.
      */
     public function periodForHumans(): string
     {
-        return match ($this->period) {
-            '6_hours' => '6 hours',
-            '24_hours' => '24 hours',
-            '7_days' => '7 days',
-            default => 'hour',
-        };
+        return collect($this->periods())
+            ->map(fn (int $hours, string $key): array => [
+                'key' => $key,
+                'label' => $hours,
+            ])
+            ->firstWhere('key', '=', $this->period)['label'] ?? '1h';
     }
 }

src/Livewire/PeriodSelector.php

@@ -4,27 +4,23 @@
 
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Support\Facades\View;
-use Livewire\Attributes\Url;
 use Livewire\Component;
 
 /**
  * @internal
  */
 class PeriodSelector extends Component
 {
-    /**
-     * The selected period.
-     *
-     * @var '1_hour'|'6_hours'|'24_hours'|'7_days'
-     */
-    #[Url]
-    public string $period = '1_hour';
+    use Concerns\HasPeriod;
 
     /**
      * Render the component.
      */
     public function render(): Renderable
     {
-        return View::make('pulse::livewire.period-selector');
+        return View::make('pulse::livewire.period-selector', [
+            'periods' => $this->periods(),
+            'current' => $this->period,
+        ]);
     }
 }