Added highcharts stats via /stats

2025-03-09 17:57:42 +11:00
parent ef4ee6ea96
commit 292a296a63
6 changed files with 335 additions and 122 deletions
--- a/resources/views/stats.blade.php
+++ b/resources/views/stats.blade.php
@@ -0,0 +1,122 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<script src="https://code.highcharts.com/modules/export-data.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
+
+<figure class="highcharts-figure">
+	<div id="container"></div>
+	<p class="highcharts-description">
+		This shows the number of sites that have queried the version server to see if there is an update, and thus reporting
+		their version at the same time.
+	</p>
+</figure>
+
+<script>
+	Highcharts.chart('container', {
+		chart: {
+			type: 'area',
+			zoomType: 'x',
+		},
+		title: {
+			text: 'PLA version activity'
+		},
+		subtitle: {
+			text: 'Source: ' +
+				'<a href="https://demo.phpldapadmin.org/"' +
+				'target="_blank">PLA</a>'
+		},
+		credits: {
+			enabled: false
+		},
+		xAxis: {
+			type: 'datetime',
+			title: {
+				text: 'Time'
+			},
+		},
+		yAxis: {
+			title: {
+				//useHTML: true,
+				text: '# Sites'
+			}
+		},
+		tooltip: {
+			shared: true,
+			headerFormat: '<span style="font-size:12px"><b>{point.key}</b></span>' +
+				'<br>'
+		},
+		plotOptions: {
+			area: {
+				stacking: 'normal',
+				lineColor: '#666666',
+				lineWidth: 1,
+				marker: {
+					lineWidth: 1,
+					lineColor: '#666666'
+				}
+			}
+		},
+
+		series: [
+			@foreach($query->groupBy('ver') as $label => $o)
+				{
+					name: '{{ $label }}',
+					data: {!! $o->map(fn($item)=>['x'=>$item->date,'y'=>$item->total]) !!}
+				},
+			@endforeach
+		]
+	});
+</script>
+
+<style>
+	#container {
+		height: 400px;
+	}
+
+	.highcharts-figure,
+	.highcharts-data-table table {
+		min-width: 310px;
+		max-width: 800px;
+		margin: 1em auto;
+	}
+
+	.highcharts-data-table table {
+		font-family: Verdana, sans-serif;
+		border-collapse: collapse;
+		border: 1px solid #ebebeb;
+		margin: 10px auto;
+		text-align: center;
+		width: 100%;
+		max-width: 500px;
+	}
+
+	.highcharts-data-table caption {
+		padding: 1em 0;
+		font-size: 1.2em;
+		color: #555;
+	}
+
+	.highcharts-data-table th {
+		font-weight: 600;
+		padding: 0.5em;
+	}
+
+	.highcharts-data-table td,
+	.highcharts-data-table th,
+	.highcharts-data-table caption {
+		padding: 0.5em;
+	}
+
+	.highcharts-data-table thead tr,
+	.highcharts-data-table tr:nth-child(even) {
+		background: #f8f8f8;
+	}
+
+	.highcharts-data-table tr:hover {
+		background: #f1f7ff;
+	}
+
+	.highcharts-description {
+		margin: 0.3rem 10px;
+	}
+</style>