Mercurial Hosting > linkmystyle

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
author	Franklin Schmidt <fschmidt@gmail.com>
date	Fri, 11 Jul 2025 20:57:49 -0600
parents
children