Mercurial Hosting > linkmystyle

diff src/private/reports/analytics.html.luan @ 0:8f4df159f06b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/private/reports/analytics.html.luan	Fri Jul 11 20:57:49 2025 -0600
@@ -0,0 +1,223 @@
+local Luan = require "luan:Luan.luan"
+local error = Luan.error
+local Parsers = require "luan:Parsers.luan"
+local json_string = Parsers.json_string or error()
+local Io = require "luan:Io.luan"
+local Http = require "luan:http/Http.luan"
+local Shared = require "site:/lib/Shared.luan"
+local head = Shared.head or error()
+local body_header = Shared.body_header or error()
+local footer = Shared.footer or error()
+local compressed = Shared.compressed or error()
+local Reporting = require "site:/lib/Reporting.luan"
+local get_data = Reporting.get_data or error()
+local Logging = require "luan:logging/Logging.luan"
+local logger = Logging.logger "analytics_new.html"
+
+
+return function()
+	Io.stdout = Http.response.text_writer()
+%>
+<!doctype html>
+<html lang="en">
+	<head>
+<%		head() %>
+		<title>Link My Style</title>
+		<style>
+			div[content] {
+				margin-left: 3%;
+				margin-right: 3%;
+			}
+			h1 {
+				text-align: center;
+				margin-bottom: 0;
+			}
+			p[top] {
+				text-align: center;
+			}
+			div[row] {
+				display: flex;
+				align-items: flex-start;
+				justify-content: space-between;
+				margin-top: 20px;
+				margin-bottom: 20px;
+			}
+			div[report] {
+				width: 48%;
+			}
+		</style>
+		<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+		<script>
+<%
+	do
+		local data = get_data( "+type:visit", "day" )
+%>
+			function initTraffic() {
+				let options = {
+					chart: {
+						type: 'line'
+					},
+					series: [{
+						name: 'Visitors',
+						data: <%=json_string(data,compressed)%>,
+					}],
+					xaxis: {
+						type: 'datetime'
+					},
+					title: {
+						text: 'Traffic'
+					}
+				};
+				let div = document.querySelector('div[report="traffic"]');
+				let chart = new ApexCharts( div, options );
+				chart.render();
+			}
+<%
+	end_do
+	do
+		local data = get_data( "+type:click", "day" )
+%>
+			function initClicks() {
+				let options = {
+					chart: {
+						type: 'line'
+					},
+					series: [{
+						name: 'Clicks',
+						data: <%=json_string(data,compressed)%>,
+					}],
+					xaxis: {
+						type: 'datetime'
+					},
+					title: {
+						text: 'Clicks'
+					}
+				};
+				let div = document.querySelector('div[report="clicks"]');
+				let chart = new ApexCharts( div, options );
+				chart.render();
+			}
+
+<%
+	end_do
+	do
+		local data = get_data( "+type:monthly_visit", "owner" )
+%>
+			function initOwnerTraffic() {
+				let data = <%=json_string(data,compressed)%>;
+				let options = {
+					chart: {
+						type: 'bar',
+						height: barChartHeight(data.length)
+					},
+					plotOptions: {
+						bar: {
+							horizontal: true
+						}
+					},
+					series: [{
+						name: 'Visitors',
+						data: data,
+					}],
+					title: {
+						text: 'Traffic by Owner'
+					}
+				};
+				let div = document.querySelector('div[report="owner_traffic"]');
+				let chart = new ApexCharts( div, options );
+				chart.render();
+			}
+<%
+	end_do
+	do
+		local data = get_data( "+type:monthly_click", "owner" )
+%>
+			function initOwnerClicks() {
+				let data = <%=json_string(data,compressed)%>;
+				let options = {
+					chart: {
+						type: 'bar',
+						height: barChartHeight(data.length)
+					},
+					plotOptions: {
+						bar: {
+							horizontal: true
+						}
+					},
+					series: [{
+						name: 'Clicks',
+						data: data,
+					}],
+					title: {
+						text: 'Clicks by Owner'
+					}
+				};
+				let div = document.querySelector('div[report="owner_clicks"]');
+				let chart = new ApexCharts( div, options );
+				chart.render();
+			}
+<%
+	end_do
+	do
+		local data = get_data( "+type:referrer", "value" )
+%>
+			function initReferrers() {
+				let data = <%=json_string(data,compressed)%>;
+				let options = {
+					chart: {
+						type: 'bar',
+						height: barChartHeight(data.length)
+					},
+					plotOptions: {
+						bar: {
+							horizontal: true
+						}
+					},
+					series: [{
+						name: 'Visitors',
+						data: data,
+					}],
+					title: {
+						text: 'Referring Domains'
+					}
+				};
+				let div = document.querySelector('div[report="referrers"]');
+				let chart = new ApexCharts( div, options );
+				chart.render();
+			}
+<%
+	end_do
+%>
+			function init() {
+				initTraffic();
+				initClicks();
+				initOwnerTraffic();
+				initOwnerClicks();
+				initReferrers();
+			}
+		</script>
+	</head>
+	<body onload="init()">
+	<div full>
+<%		body_header() %>
+		<div content>
+			<h1>Analytics</h1>
+			<p top>For the last 30 days</p>
+			<div row>
+				<div report=traffic></div>
+				<div report=clicks></div>
+			</div>
+			<div row>
+				<div report=owner_traffic></div>
+				<div report=owner_clicks></div>
+			</div>
+			<div row>
+				<div report=referrers></div>
+			</div>
+		</div>
+<%		footer() %>
+	</div>
+	</body>
+</html>
+<%
+end