Added in network graph on about screen

resources/views/about.blade.php

@@ -7,6 +7,8 @@
 	<h2>About the FTN Clearing House</h2>
 
 	<p>Welcome to the FTN Clearing House.</p>
+
+	<div style="float:right; width: 50%; height: 20em;" id="network_traffic"></div>
 	<p>The FTN Clearing House (FCH) is both a FTN Mailer and FTN message tosser, where mail is stored internally in a DB. FCH can also hatch and toss files into FTN networks for both up/downstream nodes.</p>
 	<p>It was created as an idea to bring modern technology and capabilities to a legacy computing network that existed in the 1970's, 1980's and 1990's (before the Internet basically).</p>
 
@@ -62,4 +64,67 @@ If you have more than 1 BBS, then the Clearing House can receive all your mail f
 	<p>FTN Clearing House is build with Open Source software. At it's core, PHP drives this web UI and the interaction with nodes.</p>
 	<p>This web UI has been inspired by the great work at <a href="https://int10h.org">int10h.org</a>. If you have ideas to make it even better, please send me a message, or submit your comments in <a href="https://dev.leenooks.net/bbs/clrghouz">gitlab</a></p>
 	<span class="float-end"><strong class="highlight">clrghouz</strong> <small>[<strong class="gray">{{ gethostname() }}</strong>@if (File::exists('../VERSION')) @ <strong class="success">{{ chop(File::get('../VERSION')) }}</strong>@endif]</small></span>
-@endsection
+@endsection
+
+@section('page-scripts')
+	@js('highcharts')
+
+	<script>
+		Highcharts.chart('network_traffic', {
+			chart: {
+				type: 'spline',
+				zoomType: 'x',
+				resetZoomButton: {
+					position: {
+						x: 0,
+						y: -40,
+					}
+				}
+			},
+			credits: {
+				enabled: false
+			},
+			exporting: {
+				buttons: false
+			},
+			title: {
+				text: 'FTN Network Traffic'
+			},
+			xAxis: {
+				type: 'datetime',
+				title: {
+					text: 'Time'
+				},
+			},
+			yAxis: {
+				title: {
+					text: 'Echomail'
+				},
+			},
+			legend: {
+				symbolWidth: 40
+			},
+			plotOptions: {
+				series: {
+					point: {
+						events: {
+							click: function () {
+								//window.location.href = this.series.options.website;
+							}
+						}
+					},
+					cursor: 'pointer'
+				}
+			},
+			series: [
+				@foreach (\App\Models\Domain::active()->public()->get() as $o)
+				{
+					name: '{{ $o->name }}',
+					data: {!! $o->daily_area_stats() !!},
+					dashStyle: 'ShortDot',
+				},
+				@endforeach
+			],
+		});
+	</script>
+@append