From 46bd341e9a37d65f9f481b7de2fa019332e8d15b Mon Sep 17 00:00:00 2001 From: Sven van Ginkel Date: Mon, 25 Nov 2024 21:00:54 +0100 Subject: [PATCH 1/2] Add helper and average line --- .../Widgets/RecentDownloadChartWidget.php | 27 +++++++++--- .../RecentDownloadLatencyChartWidget.php | 38 +++++++++------- .../Widgets/RecentJitterChartWidget.php | 38 +++++++++------- .../Widgets/RecentPingChartWidget.php | 27 +++++++++--- .../Widgets/RecentUploadChartWidget.php | 27 +++++++++--- .../RecentUploadLatencyChartWidget.php | 38 +++++++++------- app/Helpers/Average.php | 44 +++++++++++++++++++ 7 files changed, 179 insertions(+), 60 deletions(-) create mode 100644 app/Helpers/Average.php diff --git a/app/Filament/Widgets/RecentDownloadChartWidget.php b/app/Filament/Widgets/RecentDownloadChartWidget.php index 7aca1d1df..3297d91f0 100644 --- a/app/Filament/Widgets/RecentDownloadChartWidget.php +++ b/app/Filament/Widgets/RecentDownloadChartWidget.php @@ -3,6 +3,7 @@ namespace App\Filament\Widgets; use App\Enums\ResultStatus; +use App\Helpers\Average; use App\Helpers\Number; use App\Models\Result; use Filament\Widgets\ChartWidget; @@ -52,13 +53,23 @@ protected function getData(): array 'datasets' => [ [ 'label' => 'Download', - 'data' => $results->map(fn ($item) => ! blank($item->download) ? Number::bitsToMagnitude(bits: $item->download_bits, precision: 2, magnitude: 'mbit') : 0), - 'borderColor' => '#0ea5e9', - 'backgroundColor' => '#0ea5e9', - 'pointBackgroundColor' => '#0ea5e9', + 'data' => $results->map(fn ($item) => ! blank($item->download) ? Number::bitsToMagnitude(bits: $item->download_bits, precision: 2, magnitude: 'mbit') : null), + 'borderColor' => 'rgba(14, 165, 233)', + 'backgroundColor' => 'rgba(14, 165, 233, 0.1)', + 'pointBackgroundColor' => 'rgba(14, 165, 233)', + 'cubicInterpolationMode' => 'monotone', + 'tension' => 0.4, + ], + [ + 'label' => 'Average', + 'data' => array_fill(0, count($results), Average::averageDownload($results)), + 'borderColor' => 'rgb(243, 7, 6, 1)', + 'pointBackgroundColor' => 'rgb(243, 7, 6, 1)', 'fill' => false, 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, + 'borderDash' => [5, 5], + 'pointRadius' => 0, ], ], 'labels' => $results->map(fn ($item) => $item->created_at->timezone(config('app.display_timezone'))->format(config('app.chart_datetime_format'))), @@ -70,7 +81,13 @@ protected function getOptions(): array return [ 'plugins' => [ 'legend' => [ - 'display' => false, + 'display' => true, + ], + 'tooltip' => [ + 'enabled' => true, + 'mode' => 'index', + 'intersect' => false, + 'position' => 'nearest', ], ], 'scales' => [ diff --git a/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php b/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php index c7bb0e05a..c60c6968a 100644 --- a/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php +++ b/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php @@ -51,31 +51,28 @@ protected function getData(): array 'datasets' => [ [ 'label' => 'Average (ms)', - 'data' => $results->map(fn ($item) => $item->download_latency_iqm ? number_format($item->download_latency_iqm, 2) : 0), - 'borderColor' => '#10b981', - 'backgroundColor' => '#10b981', - 'pointBackgroundColor' => '#10b981', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->download_latency_iqm ? number_format($item->download_latency_iqm, 2) : null), + 'borderColor' => 'rgba(16, 185, 129)', + 'backgroundColor' => 'rgba(16, 185, 129, 0.1)', + 'pointBackgroundColor' => 'rgba(16, 185, 129)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], [ 'label' => 'High (ms)', - 'data' => $results->map(fn ($item) => $item->download_latency_high ? number_format($item->download_latency_high, 2) : 0), - 'borderColor' => '#0ea5e9', - 'backgroundColor' => '#0ea5e9', - 'pointBackgroundColor' => '#0ea5e9', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->download_latency_high ? number_format($item->download_latency_high, 2) : null), + 'borderColor' => 'rgba(14, 165, 233)', + 'backgroundColor' => 'rgba(14, 165, 233, 0.1)', + 'pointBackgroundColor' => 'rgba(14, 165, 233)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], [ 'label' => 'Low (ms)', - 'data' => $results->map(fn ($item) => $item->download_latency_low ? number_format($item->download_latency_low, 2) : 0), - 'borderColor' => '#8b5cf6', - 'backgroundColor' => '#8b5cf6', - 'pointBackgroundColor' => '#8b5cf6', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->download_latency_low ? number_format($item->download_latency_low, 2) : null), + 'borderColor' => 'rgba(139, 92, 246)', + 'backgroundColor' => 'rgba(139, 92, 246, 0.1)', + 'pointBackgroundColor' => 'rgba(139, 92, 246)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], @@ -87,6 +84,17 @@ protected function getData(): array protected function getOptions(): array { return [ + 'plugins' => [ + 'legend' => [ + 'display' => true, + ], + 'tooltip' => [ + 'enabled' => true, + 'mode' => 'index', + 'intersect' => false, + 'position' => 'nearest', + ], + ], 'scales' => [ 'y' => [ 'beginAtZero' => true, diff --git a/app/Filament/Widgets/RecentJitterChartWidget.php b/app/Filament/Widgets/RecentJitterChartWidget.php index 2d2454862..1ae927b36 100644 --- a/app/Filament/Widgets/RecentJitterChartWidget.php +++ b/app/Filament/Widgets/RecentJitterChartWidget.php @@ -51,31 +51,28 @@ protected function getData(): array 'datasets' => [ [ 'label' => 'Download (ms)', - 'data' => $results->map(fn ($item) => $item->download_jitter ? number_format($item->download_jitter, 2) : 0), - 'borderColor' => '#0ea5e9', - 'backgroundColor' => '#0ea5e9', - 'pointBackgroundColor' => '#0ea5e9', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->download_jitter ? number_format($item->download_jitter, 2) : null), + 'borderColor' => 'rgba(14, 165, 233)', + 'backgroundColor' => 'rgba(14, 165, 233, 0.1)', + 'pointBackgroundColor' => 'rgba(14, 165, 233)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], [ 'label' => 'Upload (ms)', - 'data' => $results->map(fn ($item) => $item->upload_jitter ? number_format($item->upload_jitter, 2) : 0), - 'borderColor' => '#8b5cf6', - 'backgroundColor' => '#8b5cf6', - 'pointBackgroundColor' => '#8b5cf6', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->upload_jitter ? number_format($item->upload_jitter, 2) : null), + 'borderColor' => 'rgba(139, 92, 246)', + 'backgroundColor' => 'rgba(139, 92, 246, 0.1)', + 'pointBackgroundColor' => 'rgba(139, 92, 246)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], [ 'label' => 'Ping (ms)', - 'data' => $results->map(fn ($item) => $item->ping_jitter ? number_format($item->ping_jitter, 2) : 0), - 'borderColor' => '#10b981', - 'backgroundColor' => '#10b981', - 'pointBackgroundColor' => '#10b981', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->ping_jitter ? number_format($item->ping_jitter, 2) : null), + 'borderColor' => 'rgba(16, 185, 129)', + 'backgroundColor' => 'rgba(16, 185, 129, 0.1)', + 'pointBackgroundColor' => 'rgba(16, 185, 129)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], @@ -87,6 +84,17 @@ protected function getData(): array protected function getOptions(): array { return [ + 'plugins' => [ + 'legend' => [ + 'display' => true, + ], + 'tooltip' => [ + 'enabled' => true, + 'mode' => 'index', + 'intersect' => false, + 'position' => 'nearest', + ], + ], 'scales' => [ 'y' => [ 'beginAtZero' => true, diff --git a/app/Filament/Widgets/RecentPingChartWidget.php b/app/Filament/Widgets/RecentPingChartWidget.php index f0b9781f7..6455de4fe 100644 --- a/app/Filament/Widgets/RecentPingChartWidget.php +++ b/app/Filament/Widgets/RecentPingChartWidget.php @@ -3,6 +3,7 @@ namespace App\Filament\Widgets; use App\Enums\ResultStatus; +use App\Helpers\Average; use App\Models\Result; use Filament\Widgets\ChartWidget; @@ -50,14 +51,24 @@ protected function getData(): array return [ 'datasets' => [ [ - 'label' => 'Ping (ms)', + 'label' => 'Ping', 'data' => $results->map(fn ($item) => $item->ping), - 'borderColor' => '#10b981', - 'backgroundColor' => '#10b981', - 'pointBackgroundColor' => '#10b981', + 'borderColor' => 'rgba(16, 185, 129)', + 'backgroundColor' => 'rgba(16, 185, 129, 0.1)', + 'pointBackgroundColor' => 'rgba(16, 185, 129)', + 'cubicInterpolationMode' => 'monotone', + 'tension' => 0.4, + ], + [ + 'label' => 'Average', + 'data' => array_fill(0, count($results), Average::averagePing($results)), + 'borderColor' => 'rgb(243, 7, 6, 1)', + 'pointBackgroundColor' => 'rgb(243, 7, 6, 1)', 'fill' => false, 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, + 'borderDash' => [5, 5], + 'pointRadius' => 0, ], ], 'labels' => $results->map(fn ($item) => $item->created_at->timezone(config('app.display_timezone'))->format(config('app.chart_datetime_format'))), @@ -69,7 +80,13 @@ protected function getOptions(): array return [ 'plugins' => [ 'legend' => [ - 'display' => false, + 'display' => true, + ], + 'tooltip' => [ + 'enabled' => true, + 'mode' => 'index', + 'intersect' => false, + 'position' => 'nearest', ], ], 'scales' => [ diff --git a/app/Filament/Widgets/RecentUploadChartWidget.php b/app/Filament/Widgets/RecentUploadChartWidget.php index 5c9c85baf..c8c5ddc45 100644 --- a/app/Filament/Widgets/RecentUploadChartWidget.php +++ b/app/Filament/Widgets/RecentUploadChartWidget.php @@ -3,6 +3,7 @@ namespace App\Filament\Widgets; use App\Enums\ResultStatus; +use App\Helpers\Average; use App\Helpers\Number; use App\Models\Result; use Filament\Widgets\ChartWidget; @@ -52,13 +53,23 @@ protected function getData(): array 'datasets' => [ [ 'label' => 'Upload', - 'data' => $results->map(fn ($item) => ! blank($item->upload) ? Number::bitsToMagnitude(bits: $item->upload_bits, precision: 2, magnitude: 'mbit') : 0), - 'borderColor' => '#8b5cf6', - 'backgroundColor' => '#8b5cf6', - 'pointBackgroundColor' => '#8b5cf6', + 'data' => $results->map(fn ($item) => ! blank($item->upload) ? Number::bitsToMagnitude(bits: $item->upload_bits, precision: 2, magnitude: 'mbit') : null), + 'borderColor' => 'rgba(139, 92, 246)', + 'backgroundColor' => 'rgba(139, 92, 246, 0.1)', + 'pointBackgroundColor' => 'rgba(139, 92, 246)', + 'cubicInterpolationMode' => 'monotone', + 'tension' => 0.4, + ], + [ + 'label' => 'Average', + 'data' => array_fill(0, count($results), Average::averageUpload($results)), + 'borderColor' => 'rgb(243, 7, 6, 1)', + 'pointBackgroundColor' => 'rgb(243, 7, 6, 1)', 'fill' => false, 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, + 'borderDash' => [5, 5], + 'pointRadius' => 0, ], ], 'labels' => $results->map(fn ($item) => $item->created_at->timezone(config('app.display_timezone'))->format(config('app.chart_datetime_format'))), @@ -70,7 +81,13 @@ protected function getOptions(): array return [ 'plugins' => [ 'legend' => [ - 'display' => false, + 'display' => true, + ], + 'tooltip' => [ + 'enabled' => true, + 'mode' => 'index', + 'intersect' => false, + 'position' => 'nearest', ], ], 'scales' => [ diff --git a/app/Filament/Widgets/RecentUploadLatencyChartWidget.php b/app/Filament/Widgets/RecentUploadLatencyChartWidget.php index 049055adc..ca72da5e7 100644 --- a/app/Filament/Widgets/RecentUploadLatencyChartWidget.php +++ b/app/Filament/Widgets/RecentUploadLatencyChartWidget.php @@ -51,31 +51,28 @@ protected function getData(): array 'datasets' => [ [ 'label' => 'Average (ms)', - 'data' => $results->map(fn ($item) => $item->upload_latency_iqm ? number_format($item->upload_latency_iqm, 2) : 0), - 'borderColor' => '#10b981', - 'backgroundColor' => '#10b981', - 'pointBackgroundColor' => '#10b981', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->upload_latency_iqm ? number_format($item->upload_latency_iqm, 2) : null), + 'borderColor' => 'rgba(16, 185, 129)', + 'backgroundColor' => 'rgba(16, 185, 129, 0.1)', + 'pointBackgroundColor' => 'rgba(16, 185, 129)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], [ 'label' => 'High (ms)', - 'data' => $results->map(fn ($item) => $item->upload_latency_high ? number_format($item->upload_latency_high, 2) : 0), - 'borderColor' => '#0ea5e9', - 'backgroundColor' => '#0ea5e9', - 'pointBackgroundColor' => '#0ea5e9', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->upload_latency_high ? number_format($item->upload_latency_high, 2) : null), + 'borderColor' => 'rgba(14, 165, 233)', + 'backgroundColor' => 'rgba(14, 165, 233, 0.1)', + 'pointBackgroundColor' => 'rgba(14, 165, 233)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], [ 'label' => 'Low (ms)', - 'data' => $results->map(fn ($item) => $item->upload_latency_low ? number_format($item->upload_latency_low, 2) : 0), - 'borderColor' => '#8b5cf6', - 'backgroundColor' => '#8b5cf6', - 'pointBackgroundColor' => '#8b5cf6', - 'fill' => false, + 'data' => $results->map(fn ($item) => $item->upload_latency_low ? number_format($item->upload_latency_low, 2) : null), + 'borderColor' => 'rgba(139, 92, 246)', + 'backgroundColor' => 'rgba(139, 92, 246, 0.1)', + 'pointBackgroundColor' => 'rgba(139, 92, 246)', 'cubicInterpolationMode' => 'monotone', 'tension' => 0.4, ], @@ -87,6 +84,17 @@ protected function getData(): array protected function getOptions(): array { return [ + 'plugins' => [ + 'legend' => [ + 'display' => true, + ], + 'tooltip' => [ + 'enabled' => true, + 'mode' => 'index', + 'intersect' => false, + 'position' => 'nearest', + ], + ], 'scales' => [ 'y' => [ 'beginAtZero' => true, diff --git a/app/Helpers/Average.php b/app/Helpers/Average.php new file mode 100644 index 000000000..c93d2d5cd --- /dev/null +++ b/app/Helpers/Average.php @@ -0,0 +1,44 @@ +map(function ($item) use ($magnitude, $precision) { + return ! blank($item->download) + ? Number::bitsToMagnitude(bits: $item->download_bits, precision: $precision, magnitude: $magnitude) + : 0; + })->avg(), + $precision + ); + } + + public static function averageUpload(Collection $results, int $precision = 2, string $magnitude = 'mbit'): float + { + return round( + $results->map(function ($item) use ($magnitude, $precision) { + return ! blank($item->upload) + ? Number::bitsToMagnitude(bits: $item->upload_bits, precision: $precision, magnitude: $magnitude) + : 0; + })->avg(), + $precision + ); + } + + public static function averagePing(Collection $results, int $precision = 2): float + { + $avgPing = $results->filter(function ($item) { + return ! blank($item->ping); + })->avg('ping'); + + return round($avgPing, $precision); + } +} From 9cca0c77e4b6c363de037fcd07d6394a30dd0dd3 Mon Sep 17 00:00:00 2001 From: Sven van Ginkel Date: Mon, 25 Nov 2024 21:11:44 +0100 Subject: [PATCH 2/2] Fix query --- app/Filament/Widgets/RecentDownloadLatencyChartWidget.php | 6 +++--- app/Filament/Widgets/RecentJitterChartWidget.php | 6 +++--- app/Filament/Widgets/RecentUploadLatencyChartWidget.php | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php b/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php index c60c6968a..fcb758c7a 100644 --- a/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php +++ b/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php @@ -51,7 +51,7 @@ protected function getData(): array 'datasets' => [ [ 'label' => 'Average (ms)', - 'data' => $results->map(fn ($item) => $item->download_latency_iqm ? number_format($item->download_latency_iqm, 2) : null), + 'data' => $results->map(fn ($item) => $item->download_latency_iqm), 'borderColor' => 'rgba(16, 185, 129)', 'backgroundColor' => 'rgba(16, 185, 129, 0.1)', 'pointBackgroundColor' => 'rgba(16, 185, 129)', @@ -60,7 +60,7 @@ protected function getData(): array ], [ 'label' => 'High (ms)', - 'data' => $results->map(fn ($item) => $item->download_latency_high ? number_format($item->download_latency_high, 2) : null), + 'data' => $results->map(fn ($item) => $item->download_latency_high), 'borderColor' => 'rgba(14, 165, 233)', 'backgroundColor' => 'rgba(14, 165, 233, 0.1)', 'pointBackgroundColor' => 'rgba(14, 165, 233)', @@ -69,7 +69,7 @@ protected function getData(): array ], [ 'label' => 'Low (ms)', - 'data' => $results->map(fn ($item) => $item->download_latency_low ? number_format($item->download_latency_low, 2) : null), + 'data' => $results->map(fn ($item) => $item->download_latency_low), 'borderColor' => 'rgba(139, 92, 246)', 'backgroundColor' => 'rgba(139, 92, 246, 0.1)', 'pointBackgroundColor' => 'rgba(139, 92, 246)', diff --git a/app/Filament/Widgets/RecentJitterChartWidget.php b/app/Filament/Widgets/RecentJitterChartWidget.php index 1ae927b36..78a7a80a9 100644 --- a/app/Filament/Widgets/RecentJitterChartWidget.php +++ b/app/Filament/Widgets/RecentJitterChartWidget.php @@ -51,7 +51,7 @@ protected function getData(): array 'datasets' => [ [ 'label' => 'Download (ms)', - 'data' => $results->map(fn ($item) => $item->download_jitter ? number_format($item->download_jitter, 2) : null), + 'data' => $results->map(fn ($item) => $item->download_jitter), 'borderColor' => 'rgba(14, 165, 233)', 'backgroundColor' => 'rgba(14, 165, 233, 0.1)', 'pointBackgroundColor' => 'rgba(14, 165, 233)', @@ -60,7 +60,7 @@ protected function getData(): array ], [ 'label' => 'Upload (ms)', - 'data' => $results->map(fn ($item) => $item->upload_jitter ? number_format($item->upload_jitter, 2) : null), + 'data' => $results->map(fn ($item) => $item->upload_jitter), 'borderColor' => 'rgba(139, 92, 246)', 'backgroundColor' => 'rgba(139, 92, 246, 0.1)', 'pointBackgroundColor' => 'rgba(139, 92, 246)', @@ -69,7 +69,7 @@ protected function getData(): array ], [ 'label' => 'Ping (ms)', - 'data' => $results->map(fn ($item) => $item->ping_jitter ? number_format($item->ping_jitter, 2) : null), + 'data' => $results->map(fn ($item) => $item->ping_jitter), 'borderColor' => 'rgba(16, 185, 129)', 'backgroundColor' => 'rgba(16, 185, 129, 0.1)', 'pointBackgroundColor' => 'rgba(16, 185, 129)', diff --git a/app/Filament/Widgets/RecentUploadLatencyChartWidget.php b/app/Filament/Widgets/RecentUploadLatencyChartWidget.php index ca72da5e7..f6ab7e31d 100644 --- a/app/Filament/Widgets/RecentUploadLatencyChartWidget.php +++ b/app/Filament/Widgets/RecentUploadLatencyChartWidget.php @@ -51,7 +51,7 @@ protected function getData(): array 'datasets' => [ [ 'label' => 'Average (ms)', - 'data' => $results->map(fn ($item) => $item->upload_latency_iqm ? number_format($item->upload_latency_iqm, 2) : null), + 'data' => $results->map(fn ($item) => $item->upload_latency_iqm), 'borderColor' => 'rgba(16, 185, 129)', 'backgroundColor' => 'rgba(16, 185, 129, 0.1)', 'pointBackgroundColor' => 'rgba(16, 185, 129)', @@ -60,7 +60,7 @@ protected function getData(): array ], [ 'label' => 'High (ms)', - 'data' => $results->map(fn ($item) => $item->upload_latency_high ? number_format($item->upload_latency_high, 2) : null), + 'data' => $results->map(fn ($item) => $item->upload_latency_high), 'borderColor' => 'rgba(14, 165, 233)', 'backgroundColor' => 'rgba(14, 165, 233, 0.1)', 'pointBackgroundColor' => 'rgba(14, 165, 233)', @@ -69,7 +69,7 @@ protected function getData(): array ], [ 'label' => 'Low (ms)', - 'data' => $results->map(fn ($item) => $item->upload_latency_low ? number_format($item->upload_latency_low, 2) : null), + 'data' => $results->map(fn ($item) => $item->upload_latency_low), 'borderColor' => 'rgba(139, 92, 246)', 'backgroundColor' => 'rgba(139, 92, 246, 0.1)', 'pointBackgroundColor' => 'rgba(139, 92, 246)',