feat(metrics): Implementing metrics into the status page

Author: Ionys320

package-lock.json

@@ -30,6 +30,9 @@
         "@alpinejs/collapse": "^3.13.3",
         "@alpinejs/focus": "^3.13.3",
         "@alpinejs/ui": "^3.13.3-beta.4",
-        "alpinejs": "^3.13.3"
+        "alpinejs": "^3.13.3",
+        "chart.js": "^4.4.2",
+        "chartjs-adapter-moment": "^1.0.1",
+        "moment": "^2.30.1"
     }
 }

package.json

@@ -1,13 +1,21 @@
+import 'moment';
+import Chart from 'chart.js/auto'
+import 'chartjs-adapter-moment';
+
 import Alpine from 'alpinejs'
 
 import Anchor from '@alpinejs/anchor'
 import Collapse from '@alpinejs/collapse'
 import Focus from '@alpinejs/focus'
 import Ui from '@alpinejs/ui'
 
+Chart.defaults.color = '#fff';
+window.Chart = Chart
+
 Alpine.plugin(Anchor)
 Alpine.plugin(Collapse)
 Alpine.plugin(Focus)
 Alpine.plugin(Ui)
 
-Alpine.start()
+window.Alpine = Alpine
+Alpine.start()

resources/js/cachet.js

@@ -0,0 +1,47 @@
+@props([
+'metric',
+])
+
+<div x-data="chart">
+    <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-1.5">
+            <div class="font-semibold leading-6">{{ $metric->name }}</div>
+
+            <div x-data x-popover class="flex items-center">
+                <button x-ref="anchor" x-popover:button>
+                    <x-heroicon-o-question-mark-circle class="size-4 text-zinc-500 dark:text-zinc-300" />
+                </button>
+                <div x-popover:panel x-cloak x-transition.opacity x-anchor.right.offset.8="$refs.anchor" class="rounded bg-white px-2 py-1 text-xs font-medium text-zinc-800 drop-shadow dark:text-zinc-800">
+                    <span class="pointer-events-none absolute -left-1 top-1.5 size-4 rotate-45 bg-white"></span>
+                    <p class="relative">{{ $metric->description }}</p>
+                </div>
+            </div>
+
+            <!-- Period Selector -->
+            <select x-model="period" class="ml-auto rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm font-medium">
+                <option value="0">Last Hour</option>
+                <option value="1">Today</option>
+                <option value="2">Week</option>
+                <option value="3">Month</option>
+            </select>
+        </div>
+        <canvas x-ref="canvas" height="300" class="ring-1 ring-gray-900/5 dark:ring-gray-100/10 bg-gray-50 dark:bg-gray-800 rounded-md shadow-sm text-white"></canvas>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('chart', () => ({
+            metric: <?php echo json_encode($metric); ?>,
+            period: <?php echo json_encode($metric->defaultView); ?>,
+            points: [
+                [],
+                [],
+                [],
+                []
+            ],
+            chart: null,
+            init,
+        }))
+    })
+</script>

resources/views/components/metric.blade.php

@@ -0,0 +1,56 @@
+<script>
+    const now = new Date();
+    const previousHour = new Date(now - 60 * 60 * 1000);
+    const previous24Hours = new Date(now - 24 * 60 * 60 * 1000);
+    const previous7Days = new Date(now - 7 * 24 * 60 * 60 * 1000);
+    const previous30Days = new Date(now - 30 * 24 * 60 * 60 * 1000);
+
+    function init() {
+        // Parse metric points
+        const metricPoints = this.metric.metric_points.map((point) => {
+            return {
+                x: new Date(point.x),
+                y: point.y
+            }
+        });
+
+        // Filter points based on the selected period
+        this.points[0] = metricPoints.filter((point) => point.x >= previousHour);
+        this.points[1] = metricPoints.filter((point) => point.x >= previous24Hours);
+        this.points[2] = metricPoints.filter((point) => point.x >= previous7Days);
+        this.points[3] = metricPoints.filter((point) => point.x >= previous30Days);
+
+        // Initialize chart
+        const chart = new Chart(this.$refs.canvas, {
+            type: 'line',
+            data: {
+                datasets: [{
+                    label: this.metric.name,
+                    data: this.points[this.period],
+                    fill: false,
+                    borderColor: 'rgb(75, 192, 192)',
+                    tension: 0.1
+                }],
+            },
+            options: {
+                scales: {
+                    x: {
+                        type: 'timeseries',
+                    }
+                },
+            }
+        });
+
+        this.$watch('period', () => {
+            chart.data.datasets[0].data = this.points[this.period];
+            chart.update();
+        });
+    }
+</script>
+
+<div class="flex flex-col gap-8">
+    @foreach($metrics as $metric)
+    <x-cachet::metric :metric="$metric" />
+    <x-cachet::metric :metric="$metric" />
+    @endforeach
+</div>

resources/views/components/metrics.blade.php

@@ -14,6 +14,8 @@
         <x-cachet::component-ungrouped :component="$component" />
         @endforeach
 
+        <x-cachet::metrics />
+
         @if($schedules->isNotEmpty())
         <x-cachet::schedules :schedules="$schedules" />
         @endif

resources/views/status-page/index.blade.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace Cachet\View\Components;
+
+use Cachet\Models\Metric;
+use Cachet\Settings\AppSettings;
+use Illuminate\Contracts\View\View;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Collection;
+use Illuminate\View\Component;
+
+class Metrics extends Component
+{
+    public function __construct(private AppSettings $appSettings)
+    {
+        //
+    }
+
+    public function render(): View
+    {
+        $startDate = Carbon::now()->subDays(30);
+
+        $metrics = $this->metrics($startDate);
+
+        // Convert each metric point to Chart.js format (x, y)
+        $metrics->each(function ($metric) {
+            $metric->metricPoints->transform(function ($point) {
+                return [
+                    'x' => $point->created_at->toIso8601String(),
+                    'y' => $point->value,
+                ];
+            });
+        });
+
+        return view('cachet::components.metrics', [
+            'metrics' => $metrics
+        ]);
+    }
+
+    /**
+     * Fetch the available metrics and their points.
+     */
+    private function metrics(Carbon $startDate): Collection
+    {
+        return Metric::query()
+            ->with([
+                'metricPoints' => fn ($query) => $query->orderBy('created_at'),
+            ])
+            ->where('visible', '>=', !auth()->check())
+            ->whereHas('metricPoints', function (Builder $query) use ($startDate) {
+                $query->where('created_at', '>=', $startDate);
+            })
+            ->orderBy('places', 'asc')
+            ->get();
+    }
+}